/* CrewHunt service page graphics (sg-*), 14 Oct 2026.
   Replaces the placeholder-bar illustrations on /dedicated-recruiter/ and
   /recruitment-agency-support/. Navy and gold only, Inter, 1.8 px line icons.
   Rules kept: no digits, no names, no location words, no dashes in visible text.
   Motion runs only while a graphic is on screen (.sg-on, set by svc-graphics.js)
   and never under prefers-reduced-motion. */

.sg{--g:#bf9d47;--gt:#ebc770;--n0:#0b1020;--n1:#151b2e;--n2:#202840;--ln:#2c3550;--ln2:#3e4a68;--tx:#f5f5f7;--mu:#c9cedc;--mu2:#a1a1aa;font-size:13px;line-height:1.35;color:var(--tx);text-align:left}
.sg *{box-sizing:border-box}
.ilx.sg{white-space:normal}
.ilx.sg.wide{display:block}
.sg .sg-chip{justify-self:start}
.sg svg{flex-shrink:0}
.sg b{font-weight:600}
.sg small{display:block;font-size:11.5px;color:var(--mu);font-weight:500}

/* shared parts */
.sg-win{background:var(--n1);border:1px solid var(--ln);border-radius:16px;overflow:hidden}
.sg-wbar{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--ln);font-size:12.5px;min-height:40px}
.sg-wbar>i{width:8px;height:8px;border-radius:99px;background:var(--ln2);flex-shrink:0}
.sg-wbar>b{margin-left:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sg-wbar>.sg-r{margin-left:auto}
.sg-lbl{display:block;font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--mu)}
.sg-lbl.g{color:var(--gt)}
.sg-av{width:30px;height:30px;border-radius:99px;display:grid;place-items:center;font-size:11px;font-weight:700;letter-spacing:.02em;background:var(--n2);color:var(--tx);border:1px solid var(--ln2);flex-shrink:0}
.sg-av.g{background:var(--g);color:var(--n0);border-color:var(--g)}
.sg-av.sm{width:24px;height:24px;font-size:10px}
.sg-av.lg{width:52px;height:52px}
.sg-avs{display:flex}.sg-avs .sg-av{margin-left:-7px;border:2px solid var(--n1)}.sg-avs .sg-av:first-child{margin-left:0}
.sg-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:99px;border:1px solid var(--ln2);background:var(--n0);color:var(--tx);font-size:12px;font-weight:600;white-space:nowrap}
.sg-chip.g{background:var(--g);border-color:var(--g);color:var(--n0)}
.sg-chip.go{border-color:var(--g);color:var(--gt);background:transparent}
.sg-chip.mu{color:var(--mu);background:transparent}
.sg-tk{width:18px;height:18px;border-radius:99px;display:inline-grid;place-items:center;background:var(--g);color:var(--n0);flex-shrink:0}
.sg-tk.off{background:transparent;border:1px solid var(--ln2);color:var(--mu)}
.sg-ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--n2);color:var(--tx);flex-shrink:0}
.sg-ic.g{background:rgba(191,157,71,.16);color:var(--gt)}
.sg-live{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--gt)}
.sg-live em{width:8px;height:8px;border-radius:99px;background:var(--g);box-shadow:0 0 0 0 rgba(191,157,71,.6)}
.sg-paper{background:#fff;color:#0e2347;border-radius:12px}
.sg-paper small{color:#56627c}
.sg-row{display:flex;align-items:center;gap:10px}
.sg-grow{flex:1;min-width:0}
.sg-ell{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* motion (paused off screen, off under reduced motion) */
@keyframes sg-pulse{0%{box-shadow:0 0 0 0 rgba(191,157,71,.55)}70%{box-shadow:0 0 0 9px rgba(191,157,71,0)}100%{box-shadow:0 0 0 0 rgba(191,157,71,0)}}
@keyframes sg-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes sg-flow{to{background-position:-24px 0}}
@keyframes sg-flowv{to{background-position:0 -24px}}
@keyframes sg-sweep{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.sg [data-a]{animation-play-state:paused}
.sg.sg-on [data-a]{animation-play-state:running}
.sg-live em[data-a]{animation:sg-pulse 2.4s infinite}
@media (prefers-reduced-motion:reduce){.sg [data-a],.sg [data-a]::before,.sg [data-a]::after{animation:none!important}}

/* ===== Dedicated: hero and final CTA (team window) ===== */
.sg-hero{position:relative;padding:22px 22px 52px}
.sg-team{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:16px 14px 14px}
.sg-seat{display:grid;justify-items:center;gap:7px;padding:12px 6px;border-radius:14px;border:1px solid var(--ln);background:var(--n0);text-align:center;font-size:12px;font-weight:600}
.sg-seat .sg-av{width:38px;height:38px}
.sg-seat.g{border-color:var(--g);background:rgba(191,157,71,.10);color:var(--gt)}
.sg-seat.g .sg-av{background:var(--g);color:var(--n0);border-color:var(--g)}
.sg-seat .sg-chip{font-size:10.5px;padding:2px 8px}
.sg-sub{padding:12px 14px 6px;border-top:1px solid var(--ln)}
.sg-roles{list-style:none;margin:0;padding:0 14px 14px;display:grid;gap:8px}
.sg-roles li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 10px;align-items:center;padding:10px 12px;border-radius:12px;background:var(--n0);border:1px solid var(--ln)}
.sg-rn{display:flex;align-items:center;gap:8px;font-weight:600;min-width:0}
.sg-rn span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sg-rn svg{color:var(--gt)}
.sg-stg{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.sg-stg i{height:5px;border-radius:99px;background:var(--n2)}
.sg-stg i.on{background:var(--g)}
.sg-toast{position:absolute;right:16px;bottom:14px;display:flex;align-items:center;gap:10px;padding:10px 14px 10px 10px;border-radius:14px;background:#fff;color:#0e2347;box-shadow:0 18px 40px -12px rgba(11,16,32,.55);max-width:78%}
.sg-toast small{color:#56627c}
.sg-toast[data-a]{animation:sg-float 5s ease-in-out infinite}
.sg-hero .sg-win{position:relative}
@media (max-width:420px){.sg-hero{padding:14px 12px 40px}.sg-team{gap:6px;padding:12px 10px}.sg-seat{font-size:11px;padding:10px 4px}.sg-roles{padding:0 10px 12px}.sg-toast{right:10px;bottom:10px;max-width:88%}}

/* ===== Dedicated: a day ===== */
.sg-day{padding:22px}
.sg-sky{position:relative;height:30px;margin:0 6px 14px;display:flex;align-items:center;justify-content:space-between;color:var(--gt)}
.sg-sky::before{content:"";position:absolute;left:28px;right:28px;top:50%;height:2px;background:linear-gradient(90deg,var(--g),var(--ln2));border-radius:99px}
.sg-sky>span{position:relative;z-index:1;width:30px;height:30px;border-radius:99px;display:grid;place-items:center;background:var(--n1);border:1px solid var(--ln2)}
.sg-sky>span:last-child{color:var(--mu)}
.sg-sky>em{position:relative;z-index:1;width:12px;height:12px;border-radius:99px;background:var(--n0);border:2px solid var(--g)}
.sg-day4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.sg-slot{display:grid;align-content:start;gap:10px;padding:14px;border-radius:16px;background:var(--n1);border:1px solid var(--ln)}
.sg-q{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;background:var(--n0);border:1px solid var(--ln2);font-size:12px;font-weight:600}
.sg-q svg{color:var(--mu)}
.sg-bub{padding:10px 12px;border-radius:12px 12px 12px 4px;background:#fff;color:#0e2347;font-size:12.5px;font-weight:500}
.sg-bub.me{border-radius:12px 12px 4px 12px;background:var(--g);color:var(--n0);justify-self:end;font-weight:600}
.sg-must{display:grid;gap:6px;font-size:12px;font-weight:600}
.sg-post{display:grid;gap:8px;padding:10px;border-radius:12px;background:var(--n0);border:1px solid var(--ln2)}
.sg-post .sg-ch{font-size:11.5px;color:var(--mu);font-weight:600}
.sg-path{display:flex;align-items:center;flex-wrap:wrap;gap:4px;font-size:11px;font-weight:600;color:var(--mu)}
.sg-path b{color:var(--gt)}
@media (max-width:899px){.sg-day4{grid-template-columns:repeat(2,minmax(0,1fr))}.sg-sky{display:none}}
@media (max-width:520px){.sg-day{padding:14px}.sg-day4{grid-template-columns:1fr}}

/* ===== Dedicated: roles we cover ===== */
.sg-fam{padding:22px;display:grid;gap:14px}
.sg-fams{display:grid;gap:8px;margin-bottom:4px}
.sg-f{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;align-items:center;padding:12px;border-radius:14px;background:var(--n1);border:1px solid var(--ln);border-left:3px solid var(--g)}
.sg-f>b{font-size:14px}
.sg-f .sg-ic{grid-row:span 2}
.sg-ex{display:flex;flex-wrap:wrap;gap:6px}
.sg-ex .sg-chip{font-size:11.5px;padding:3px 9px}
.sg-also{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.sg-also>span{display:grid;justify-items:center;gap:6px;padding:12px 6px;border-radius:12px;border:1px dashed var(--ln2);font-size:12px;font-weight:600;color:var(--mu);text-align:center}
.sg-also svg{color:var(--mu)}
@media (max-width:420px){.sg-fam{padding:14px}.sg-also{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ===== Dedicated: plugs into your team (hub) ===== */
.sg-hub{padding:26px 22px;display:grid;grid-template-columns:minmax(0,1fr) minmax(170px,.8fr) minmax(0,1fr);gap:16px 0;align-items:center}
.sg-tools{display:grid;gap:12px}
.sg-tool{position:relative;display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:14px;background:var(--n1);border:1px solid var(--ln)}
.sg-tool>div{flex:1;min-width:0}
.sg-tool b{display:block;font-size:13px}
.sg-tools.l .sg-tool{margin-right:22px}
.sg-tools.r .sg-tool{margin-left:22px}
.sg-tool::after{content:"";position:absolute;top:50%;width:22px;height:2px;background-image:linear-gradient(90deg,var(--g) 50%,transparent 50%);background-size:8px 2px}
.sg-tools.l .sg-tool::after{left:100%}
.sg-tools.r .sg-tool::after{right:100%}
.sg-tool[data-a]::after{animation:sg-flow 1.2s linear infinite}
.sg-tools.r .sg-tool[data-a]::after{animation-direction:reverse}
.sg-core{position:relative;display:grid;justify-items:center;gap:10px;padding:22px 12px;border-radius:20px;border:1px solid var(--g);background:radial-gradient(120% 90% at 50% 0%,rgba(191,157,71,.20),rgba(191,157,71,0) 70%),var(--n0);text-align:center}
.sg-core .sg-av.lg[data-a]{animation:sg-pulse 2.6s infinite}
.sg-core>b{font-size:15px}
.sg-ctl{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding:8px 10px;border-radius:10px;background:var(--n1);font-size:11.5px;font-weight:600;color:var(--mu)}
.sg-sw{width:30px;height:18px;border-radius:99px;background:var(--g);position:relative;flex-shrink:0}
.sg-sw::after{content:"";position:absolute;right:2px;top:2px;width:14px;height:14px;border-radius:99px;background:var(--n0)}
@media (max-width:899px){.sg-hub{grid-template-columns:1fr;padding:18px}.sg-core{order:-1}.sg-tools{grid-template-columns:repeat(2,minmax(0,1fr))}.sg-tools.l .sg-tool,.sg-tools.r .sg-tool{margin:0}.sg-tool::after{display:none}}
@media (max-width:359px){.sg-tools{grid-template-columns:1fr}}

/* ===== Dedicated: a typical week (calendar) ===== */
.sg-cal{padding:22px}
.sg-calg{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;padding:12px}
.sg-dh{display:grid;gap:2px;padding:0 2px 6px;font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--mu)}
.sg-dh.now{color:var(--gt)}
.sg-col{display:grid;align-content:start;gap:8px}
.sg-ev{display:grid;gap:5px;padding:9px 10px;border-radius:10px;background:var(--n2);border-left:3px solid var(--ln2);font-size:12px;font-weight:600}
.sg-ev small{font-size:11px}
.sg-ev.g{background:rgba(191,157,71,.14);border-left-color:var(--g);color:var(--gt)}
.sg-ev.g small{color:var(--mu)}
.sg-ev.tall{min-height:96px}
.sg-ev.mid{min-height:64px}
.sg-ev .sg-chip{font-size:10.5px;padding:2px 7px;justify-self:start}
@media (max-width:720px){.sg-cal{padding:12px}.sg-calg{gap:5px;padding:8px}.sg-ev{padding:7px 5px;font-size:10.5px;overflow-wrap:anywhere}.sg-ev small,.sg-ev .sg-chip,.sg-ev.x{display:none}.sg-ev.tall,.sg-ev.mid{min-height:56px}}

/* ===== Dedicated: plan chooser ===== */
.sg-pick{padding:22px;display:grid;gap:14px}
.sg-tog{position:relative;display:grid;grid-template-columns:1fr 1fr;padding:4px;border-radius:99px;background:var(--n0);border:1px solid var(--ln2);font-size:12px;font-weight:600;text-align:center}
.sg-tog>i{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:99px;background:var(--g)}
.sg-tog>span{position:relative;padding:8px 6px;color:var(--mu)}
.sg-tog>span.a{color:var(--n0)}
.sg-tog>span.b{color:var(--mu)}
@keyframes sg-thumb{0%,42%{transform:translateX(0)}50%,92%{transform:translateX(100%)}100%{transform:translateX(0)}}
@keyframes sg-ta{0%,44%{color:#0b1020}48%,94%{color:#c9cedc}98%,100%{color:#0b1020}}
@keyframes sg-tb{0%,44%{color:#c9cedc}48%,94%{color:#0b1020}98%,100%{color:#c9cedc}}
@keyframes sg-pa{0%,44%{border-color:#bf9d47;background-color:rgba(191,157,71,.10)}48%,94%{border-color:#2c3550;background-color:#151b2e}98%,100%{border-color:#bf9d47;background-color:rgba(191,157,71,.10)}}
@keyframes sg-pb{0%,44%{border-color:#2c3550;background-color:#151b2e}48%,94%{border-color:#bf9d47;background-color:rgba(191,157,71,.10)}98%,100%{border-color:#2c3550;background-color:#151b2e}}
.sg-tog>i[data-a]{animation:sg-thumb 7s cubic-bezier(.22,1,.36,1) infinite}
.sg-tog>span.a[data-a]{animation:sg-ta 7s infinite}
.sg-tog>span.b[data-a]{animation:sg-tb 7s infinite}
.sg-plans{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sg-plan{display:grid;align-content:start;gap:8px;padding:12px;border-radius:14px;border:1px solid var(--ln);background:var(--n1)}
.sg-plan.a{border-color:var(--g);background:rgba(191,157,71,.10)}
.sg-plan.a[data-a]{animation:sg-pa 7s infinite}
.sg-plan.b[data-a]{animation:sg-pb 7s infinite}
.sg-plan>b{font-size:12.5px;line-height:1.25}
.sg-plan ul{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:11.5px;font-weight:600;color:var(--mu)}
.sg-plan li{display:flex;align-items:center;gap:6px}
.sg-plan li .sg-tk{width:15px;height:15px}
@media (max-width:420px){.sg-pick{padding:14px}.sg-tog{font-size:11px}.sg-plans{gap:6px}.sg-plan{padding:10px}}

/* ===== Agency: hero and final CTA (agency desk) ===== */
.sg-desk{position:relative;padding:22px}
.sg-desk.fin{padding-bottom:52px}
.sg-logo{width:22px;height:22px;border-radius:6px;background:var(--g);flex-shrink:0}
.sg-dgrid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:12px;padding:14px}
.sg-req{display:grid;align-content:start;gap:10px;padding:12px;border-radius:12px;background:var(--n0);border:1px solid var(--ln2)}
.sg-req>b{font-size:14px;line-height:1.25}
.sg-req .sg-ex .sg-chip{font-size:11px}
.sg-bo{display:grid;align-content:start;gap:8px}
.sg-bo .sg-lbl{display:flex;align-items:center;gap:6px}
.sg-cand{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:12px;background:var(--n0);border:1px solid var(--ln)}
.sg-cand>div{flex:1;min-width:0}
.sg-cand b{display:block;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sg-cand .sg-chip{font-size:10.5px;padding:2px 8px}
.sg-dfoot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;border-top:1px solid var(--ln);font-size:12px;font-weight:600;color:var(--mu)}
.sg-seatadd{position:absolute;right:16px;bottom:14px;display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:14px;background:var(--g);color:var(--n0);font-weight:700;box-shadow:0 18px 40px -12px rgba(11,16,32,.55)}
.sg-seatadd[data-a]{animation:sg-float 5s ease-in-out infinite}
.sg-desk{}
@media (max-width:520px){.sg-desk{padding:14px 12px}.sg-desk.fin{padding-bottom:44px}.sg-dgrid{grid-template-columns:1fr;padding:10px}.sg-seatadd{right:10px;bottom:10px}}

/* ===== Agency: time back ===== */
.sg-time{padding:22px;display:grid;gap:16px}
.sg-tb{display:grid;gap:8px}
.sg-tb .sg-row{justify-content:space-between;gap:12px}
.sg-tb .sg-row small{text-align:right}
.sg-bar{display:flex;gap:4px;height:46px}
.sg-seg{display:flex;align-items:center;gap:6px;padding:0 10px;border-radius:10px;font-size:12px;font-weight:600;overflow:hidden;white-space:nowrap;min-width:0}
.sg-seg.n{background:var(--n2);color:var(--tx);border:1px solid var(--ln2)}
.sg-seg.g{background:var(--g);color:var(--n0)}
.sg-seg .ics{display:flex;gap:5px;color:var(--mu)}
.sg-seg.n.sm{padding:0;justify-content:center}
.sg-seg span{overflow:hidden;text-overflow:ellipsis}
.sg-gain{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;border:1px dashed var(--g);color:var(--gt);font-size:12.5px;font-weight:600}
@media (max-width:420px){.sg-time{padding:14px}.sg-seg .ics{display:none}}

/* ===== Agency: task by task (before and after) ===== */
.mt .mti .sg-ba{display:grid;grid-template-columns:minmax(0,1fr) 28px minmax(0,1fr);align-items:center;gap:6px;padding:16px;border-radius:16px;background:linear-gradient(160deg,#0e2347,#0b1020);color:#f5f5f7;min-height:150px}
.sg-ba .sg-arr{display:grid;place-items:center;color:var(--gt)}
.sg-ba .sg-side{display:grid;gap:6px;align-content:center;min-width:0}
.sg-ba .sg-lbl{font-size:10px}
.sg-mini{display:flex;align-items:center;gap:6px;padding:6px 8px;border-radius:9px;background:var(--n1);border:1px solid var(--ln);font-size:11.5px;font-weight:600;min-width:0}
.sg-mini .sg-av{width:22px;height:22px;font-size:9.5px}
.sg-mini .sg-tk{width:16px;height:16px;margin-left:auto}
.sg-mini span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sg-mini.dim{opacity:1;color:var(--mu);border-style:dashed}
.sg-pile{position:relative;height:92px}
.sg-pile>span{position:absolute;width:62%;height:64px;border-radius:9px;background:#fff;box-shadow:0 6px 14px rgba(0,0,0,.25);padding:8px}
.sg-pile>span:nth-child(1){left:4%;top:16px;transform:rotate(-7deg)}
.sg-pile>span:nth-child(2){left:20%;top:8px;transform:rotate(3deg)}
.sg-pile>span:nth-child(3){left:34%;top:20px;transform:rotate(-2deg)}
.sg-pile i,.sg-doc i{display:block;height:4px;border-radius:99px;background:#d6d9e2;margin-top:5px}
.sg-pile i:first-child,.sg-doc i:first-child{margin-top:0}
.sg-mess{position:relative;height:96px}
.sg-mess>span{position:absolute;padding:5px 8px;border-radius:8px;background:var(--n2);border:1px solid var(--ln2);font-size:11px;font-weight:600;color:var(--mu)}
.sg-mess>span.dup{border-color:var(--g);color:var(--gt);background:var(--n1)}
.sg-kb{display:grid;gap:5px}
.sg-kb>div{display:grid;grid-template-columns:62px 1fr;align-items:center;gap:6px;padding:5px 6px;border-radius:8px;background:var(--n1)}
.sg-kb small{font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--mu)}
.sg-kb span{display:flex;gap:4px}
.sg-kb i{display:block;height:12px;flex:1;max-width:34px;border-radius:4px;background:var(--n2);border:1px solid var(--ln2)}
.sg-kb i.g{background:var(--g);border-color:var(--g)}
.sg-doc{padding:10px;border-radius:9px;background:#fff;color:#0e2347;box-shadow:0 6px 14px rgba(0,0,0,.25)}
.sg-doc .hd{display:flex;align-items:center;gap:6px;padding-bottom:6px;margin-bottom:7px;border-bottom:2px solid var(--g);font-size:10.5px;font-weight:700}
.sg-doc .hd .sg-logo{width:12px;height:12px;border-radius:3px}
.sg-doc .sl{display:block;font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#8a6210;margin:6px 0 2px}
.sg-doc.plain i{background:#e5e7ee}
@media (max-width:420px){.mt .mti .sg-ba{padding:12px;gap:4px;grid-template-columns:minmax(0,1fr) 20px minmax(0,1fr)}}

/* ===== Agency: your brand (light inbox) ===== */
.sg-mail{padding:22px}
.sg-mail .sg-paper{overflow:hidden}
.sg-mbar{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid #e5e7ee;font-weight:700;font-size:13px}
.sg-mbar .sg-r{margin-left:auto}
.sg-mrow{display:grid;grid-template-columns:34px minmax(0,1fr);gap:12px;padding:14px 16px;border-bottom:1px solid #e5e7ee}
.sg-mrow.two{background:#f7f8fa}
.sg-mrow .sg-logo{width:34px;height:34px;border-radius:9px}
.sg-mrow .cl{width:34px;height:34px;border-radius:99px;background:#e5e7ee;color:#0e2347;display:grid;place-items:center}
.sg-mrow b{display:block;font-size:13px}
.sg-mrow .subj{display:block;font-size:12.5px;font-weight:600;margin-top:2px}
.sg-mrow p{margin:2px 0 0;font-size:12px;color:#56627c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sg-pill{display:inline-flex;align-items:center;gap:6px;margin-top:8px;padding:4px 10px;border-radius:99px;font-size:11.5px;font-weight:600;background:#f5f5f7;color:#0e2347;border:1px solid #d6d9e2}
.sg-pill.g{background:#fbf5e6;border-color:#bf9d47;color:#6b4a00}
.sg-sig{display:flex;align-items:center;gap:8px;padding:12px 16px;font-size:12px;font-weight:600;color:#56627c}
.sg-sig .sg-logo{width:14px;height:14px;border-radius:4px}
@media (max-width:420px){.sg-mail{padding:12px}.sg-mrow{padding:12px}}

/* ===== Agency: client role flow (swimlanes) ===== */
.sg-flow{padding:22px}
.sg-lanes{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:118px 118px;row-gap:12px;column-gap:14px}
.sg-band{position:absolute;left:-8px;right:-8px;height:118px;border-radius:14px;background:rgba(255,255,255,.03);border:1px solid var(--ln);pointer-events:none}
.sg-band.t{top:0}.sg-band.b{top:130px}
.sg-band>span{position:absolute;left:10px;top:7px;font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--mu)}
.sg-band.t>span{color:var(--gt)}
.sg-wire{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.sg-wire path{fill:none;stroke:var(--g);stroke-width:2;stroke-dasharray:6 6;vector-effect:non-scaling-stroke}
.sg-wire path[data-a]{animation:sg-dash 1.2s linear infinite}
@keyframes sg-dash{to{stroke-dashoffset:-24}}
.sg-st{position:relative;z-index:1;align-self:end;display:grid;justify-items:center;gap:5px;padding:10px 6px;border-radius:14px;background:var(--n1);border:1px solid var(--ln);text-align:center;font-size:12px;font-weight:600;height:88px;align-content:center;margin-bottom:6px}
.sg-st.g{border-color:var(--g);background:#1d1f2a}
.sg-st .sg-ic{width:28px;height:28px}
.sg-st small{font-size:11px}
.sg-fb{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:14px;padding:9px;border-radius:10px;border:1px dashed var(--g);color:var(--gt);font-size:12px;font-weight:600}
.sg-fb svg{color:var(--gt)}
@media (max-width:899px){.sg-lanes{grid-template-columns:1fr;grid-template-rows:none;row-gap:8px}.sg-band,.sg-wire{display:none}.sg-st{grid-row:auto!important;grid-column:auto!important;height:auto;margin:0;grid-template-columns:28px 1fr;justify-items:start;text-align:left;column-gap:10px;align-items:center}.sg-st .sg-ic{grid-row:span 2}.sg-st .tag{display:inline}}
.sg-st .tag{display:none;font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--gt);margin-left:6px}
@media (max-width:420px){.sg-flow{padding:12px}}

/* ===== Agency: confidentiality ===== */
.sg-vault{padding:22px;display:grid;gap:14px}
.sg-shield{display:flex;align-items:center;gap:14px;padding:14px;border-radius:16px;border:1px solid var(--g);background:radial-gradient(120% 120% at 0% 0%,rgba(191,157,71,.22),rgba(191,157,71,0) 60%),var(--n0)}
.sg-shield .sg-ic{width:48px;height:48px;border-radius:14px;background:var(--g);color:var(--n0)}
.sg-shield b{font-size:15px;display:block}
.sg-v4{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sg-v{display:grid;gap:8px;padding:12px;border-radius:14px;background:var(--n1);border:1px solid var(--ln)}
.sg-v .sg-row{gap:8px}
.sg-v .sg-ic{width:28px;height:28px;border-radius:8px}
.sg-v b{font-size:12.5px}
.sg-v .sg-chip{justify-self:start;font-size:11px;padding:3px 9px}
@media (max-width:420px){.sg-vault{padding:14px}.sg-v4{gap:6px}.sg-v{padding:10px}}

/* ===== Agency: capacity (pricing) ===== */
.sg-cap{padding:22px;display:grid;gap:14px}
.sg-seg2{display:grid;gap:6px}
.sg-seg2 .opts{display:grid;grid-template-columns:1fr 1fr;padding:4px;border-radius:12px;background:var(--n0);border:1px solid var(--ln2);font-size:12px;font-weight:600;text-align:center}
.sg-seg2 .opts span{padding:8px 6px;border-radius:9px;color:var(--mu)}
.sg-seg2 .opts span.on{background:var(--g);color:var(--n0)}
.sg-seats{display:flex;align-items:center;gap:8px;padding:12px;border-radius:14px;background:var(--n1);border:1px solid var(--ln)}
.sg-seats .sg-av{width:34px;height:34px}
.sg-seats .add{width:34px;height:34px;border-radius:99px;border:1px dashed var(--g);color:var(--gt);display:grid;place-items:center}
.sg-seats .add[data-a]{animation:sg-pulse 2.6s infinite}
.sg-seats .sg-grow{font-size:12px;font-weight:600;color:var(--mu)}
@media (max-width:420px){.sg-cap{padding:14px}.sg-seg2 .opts{font-size:11px}}

/* illustrated candidate avatars (fictional people) */
.sg-av.ph{padding:0;overflow:hidden;background:var(--n2)}
.sg-av.ph img{width:100%;height:100%;display:block;border-radius:inherit}

/* ===== Cost comparison section (14 Oct 2026) ===== */
.cost3{display:grid;gap:16px;margin-top:40px}
@media (min-width:900px){.cost3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.cst{display:grid;align-content:start;gap:10px;padding:26px 24px;border-radius:24px;background:#fff;border:1px solid var(--soft-line,#e8e8ed);text-align:left}
.cst .k{font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#56627c}
.cst .v{font-size:clamp(34px,4vw,46px);line-height:1;font-weight:700;letter-spacing:-.02em;color:#0e2347}
.cst .v small{font-size:16px;font-weight:600;letter-spacing:0;color:#56627c;margin-left:4px}
.cst p{margin:0;font-size:15px;line-height:1.5;color:#56627c}
.cst.us{background:linear-gradient(160deg,#0e2347,#0b1020);border-color:#0e2347;box-shadow:0 30px 70px -30px rgba(11,16,32,.45)}
.cst.us .k{color:#ebc770}.cst.us .v{color:#fff}.cst.us .v small,.cst.us p{color:#c9cedc}
.cst.us p b{color:#fff}