/* Landing page styles (moved out of landing.html, M1-1). */
/* PERF-02: metric-matched fallbacks. While the web fonts load (display=swap), text is set
   in a local font scaled to the web font's average glyph width and given its ascent and
   descent, so the swap barely moves anything. Values: hhea metrics and English
   letter-frequency average widths of the Google Fonts latin files against Arial, Roboto,
   Times New Roman, Noto Serif and Courier New (italic faces against the italic files).
   Fraunces is measured at opsz 40, the phone hero size, so the phone H1 keeps its line breaks
   on the swap. Arial and Roboto come out within 0.3% of each other, so the sans faces list both. */
@font-face{font-family:'Fraunces Fallback';src:local('Times New Roman'),local('TimesNewRomanPSMT');size-adjust:111.83%;ascent-override:87.46%;descent-override:22.80%;line-gap-override:0%;}
@font-face{font-family:'Fraunces Fallback Android';src:local('Noto Serif'),local('NotoSerif');size-adjust:93.98%;ascent-override:104.06%;descent-override:27.13%;line-gap-override:0%;}
@font-face{font-family:'Fraunces Fallback';font-style:italic;src:local('Times New Roman Italic'),local('TimesNewRomanPS-ItalicMT');size-adjust:106.33%;ascent-override:91.98%;descent-override:23.98%;line-gap-override:0%;}
@font-face{font-family:'Fraunces Fallback Android';font-style:italic;src:local('Noto Serif Italic'),local('NotoSerif-Italic');size-adjust:92.35%;ascent-override:105.91%;descent-override:27.61%;line-gap-override:0%;}
@font-face{font-family:'Inter Tight Fallback';src:local('Arial'),local('ArialMT'),local('Roboto');size-adjust:96.62%;ascent-override:100.26%;descent-override:24.96%;line-gap-override:0%;}
@font-face{font-family:'Space Grotesk Fallback';src:local('Arial'),local('ArialMT'),local('Roboto');size-adjust:110.49%;ascent-override:89.06%;descent-override:26.43%;line-gap-override:0%;}
@font-face{font-family:'Space Mono Fallback';src:local('Courier New'),local('CourierNewPSMT');size-adjust:101.98%;ascent-override:109.82%;descent-override:35.40%;line-gap-override:0%;}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

/* ── CSS Houdini @property for animatable tokens ── */
@property --mood-hue {
  syntax: '<number>';
  inherits: false;
  initial-value: 24;
}
:root{
  --p:#CE7B91;--p2:#B05A72;--acc:#DAE2DF;
  --txt:#1B1B1F;--sec:#5C5C60;--mute:#73716E;
  --ok:#5B9E7E;--bdr:#C9C2C3;--bg:#FBFBFB;--surface:#FBFBFB;
  --glow-p:rgba(206,123,145,.16);--crystal:#DAE2DF;--gold-salt:#B05A72;--salt-cream:#DAE2DF;--cream:#DAE2DF;
  --glow-ok:rgba(91,158,126,.12);
  /* Status tokens — locked across all directions */
  --success:#5B9E7E;--warning:#B5853A;--danger:#A8442D;--info:#5C5C60;--neutral:#73716E;
  /* Text on the forest background (every slide). Body >= 4.5:1, display >= 3:1 across
     the whole gradient; #B05A72 fails on dark, so rose text uses these lighter roses. */
  --on:#FBFBFB;--on-2:rgba(251,251,251,.80);--on-3:rgba(251,251,251,.72);
  --rose-on:#E096AA;--rose-on-sm:#F2BACA;
  --rose-glow:0 0 18px rgba(206,123,145,.45),0 0 2px rgba(206,123,145,.35);
}
html,body{width:100%;height:100%;overflow-x:clip;font-family:'Inter Tight','Inter Tight Fallback',sans-serif;-webkit-font-smoothing:antialiased;}

/* ── FOREST BACKGROUND ──
   One forest-green gradient behind every slide, in every layout (desktop deck,
   tablets, phones, reduced motion). It is viewport-sized and fixed, so it never
   repaints or moves; only the finale pool below fades in on s7/s8. */
#aurora-layer{
  position:fixed;inset:0;z-index:0;pointer-events:none !important;overflow:hidden;
  background:linear-gradient(in oklab to bottom, hsl(170, 14%, 30%) 0%, hsl(170, 16%, 19%) 100%);
}
/* FIN-7 — the finale descends: s5 is the plain forest, s7 a little deeper, s8 the
   deepest with a soft rose pool behind the CTA row. Static gradients; only the
   layer's opacity ever changes, so it is composited, never repainted. */
.aurora-finale{
  position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;
  background:
    radial-gradient(ellipse 55% 42% at 50% 64%, rgba(206,123,145,.14) 0%, rgba(206,123,145,0) 70%),
    linear-gradient(to bottom, rgba(16,22,21,0) 0%, rgba(16,22,21,.45) 100%);
  transition:opacity .9s cubic-bezier(.16,1,.3,1);
}
#aurora-layer.fin-7 .aurora-finale{opacity:.4;}
#aurora-layer.fin-8 .aurora-finale{opacity:1;}
@media(prefers-reduced-motion:reduce){.aurora-finale{transition:none;}}

/* ── SALT-TRACE OVERLAY ──
   One orthogonal SVG path per slide connecting header → widget → exit,
   plus the next slide's entry continuing from this slide's exit (so the
   path is visually continuous across the whole scroll). Sits behind
   slide content but above the aurora so text/widgets render on top. */
#salt-trace{
  position:fixed; inset:0; width:100%; height:100%;
  /* clipped to the viewport: the paths run past it (entry/exit legs at -60px and
     H+60px), and with overflow visible the composited layer started at those
     bounds, a fractional device-pixel offset at 125% scaling, so every line was
     resampled half a pixel off and drawn soft. */
  pointer-events:none; z-index:0; overflow:hidden;
}
.st-spath{
  /* Decorative chain — every slide's path stays visible always. The
     active class still emphasises anchors + reveals the scroll-follow
     tip, but the line itself never fades out. */
  opacity:1;
}
/* BG dashed tracer — the persistent under-drawing of EVERY slide's path.
   Quiet white-grey (rgba(200,200,210,.22)) so the dashed lines settle
   back without competing with content. Per-depth tier rules below set
   the active stroke tint. */
.st-spath-bg{
  fill:none; stroke:rgba(255,255,255,.22);
  stroke-width:1.2; stroke-linecap:square; stroke-linejoin:miter;
  stroke-dasharray:2 5;
}
/* FG stroke — only the ACTIVE slide draws it progressively via
   scroll-driven stroke-dashoffset. Pure white hairline, no glow.
   (Drop-shadow(0 0 8px rgba(255,255,255,.45)) was removed — glow read
   as halo noise against the toned-down per-slide curation.) */
.st-spath-fg{
  fill:none; stroke:#FFFFFF;
  stroke-width:1.6; stroke-linecap:square; stroke-linejoin:miter;
}
/* Anchor dots removed entirely — the white-dot-with-rose-border
   markers at the header/widget positions were too noisy against the
   per-slide bg-tracer combinations introduced below. */
.st-spath-anchor,
.st-spath-anchor--widget{ display:none !important; }

/* ── BG TRACER VISIBILITY + DEPTH ──
   The dashed bg tracers used to ALL show on every slide. Now each slide
   reveals only a curated subset (defined by BG_VISIBLE_PER_SLIDE in JS),
   and each visible tracer gets a depth tier based on its distance from
   the active slide — near (full opacity, sharp), mid (faded + slight
   blur), far (more faded + more blur). Gives the chain a layered feel
   without clutter. */
.st-spath-bg{
  visibility:hidden;
  transition:opacity .45s ease, filter .45s ease, stroke-width .45s ease;
}
.st-spath[data-bg-show="true"] .st-spath-bg{ visibility:visible; }
/* "near" tracer also gets a brighter stroke so it reads against the
   lighter top of the aurora. Pure white (rgba(255,255,255,*)) — no glow
   filter, just the cleaner white the user wanted. */
.st-spath[data-bg-depth="near"] .st-spath-bg{
  opacity:1;     stroke:rgba(255,255,255,.55); stroke-width:1.4; filter:none;
}
.st-spath[data-bg-depth="mid"]  .st-spath-bg{
  opacity:.7;    stroke:rgba(255,255,255,.30); stroke-width:1.1; filter:blur(.4px);
}
.st-spath[data-bg-depth="far"]  .st-spath-bg{
  opacity:.45;   stroke:rgba(255,255,255,.20); stroke-width:.9;  filter:blur(.9px);
}
/* The active slide draws no dashed scroll path of its own: the solid fg line is the
   whole trace there, so its dives read as the line slipping under the page and
   coming back up. The other slides' dashed tracers (mid/far) stay as decoration;
   edit mode (rule below, !important) still shows every path. */
.st-spath.is-active .st-spath-bg{ visibility:hidden; }/* Edit mode lifts the curation — every bg shows so user sees the chain */
body.st-edit .st-spath-bg{
  visibility:visible !important; opacity:.5 !important; filter:none !important; stroke-width:1.2 !important;
}
.st-spath-tip{
  fill:#FFFFFF;
  opacity:0;
  /* opacity = slide activation (slow, delayed); fill-opacity = dives (quick) */
  transition:opacity .45s ease .25s, fill-opacity .12s ease;
}
.st-spath.is-active .st-spath-tip{ opacity:1; }
/* DIVES — two short stretches per slide where the white line slips under the
   page (the fg is left undrawn there; see drawFg in the controller). While
   the draw head is inside one, the tip goes under with it. Edit mode shows
   the whole line so reshaping is unaffected. */
.st-spath.st-dive .st-spath-tip{ fill-opacity:0; }
/* the fade steps either side of a dive end flat, so neighbouring steps do not overlap */
.st-spath-fade{ stroke-linecap:butt; }
body.st-edit .st-spath.st-dive .st-spath-tip{ fill-opacity:1; }
/* FIN-2 — at the final CTA the travelling tip is absorbed by the button */

/* Edit-mode UI */
.st-handle{
  fill:rgba(251,251,251,.95); stroke:#B05A72; stroke-width:1.5;
  cursor:grab; pointer-events:none; opacity:0;
  transition:opacity .15s ease;
}
.st-handle.on{ opacity:1; pointer-events:auto; }
.st-handle:hover{ fill:#CE7B91; stroke:#FBFBFB; }
.st-handle:active{ cursor:grabbing; }
.st-handle--entry, .st-handle--exit{ rx:9; ry:9; }
/* Extras (user-added intermediate turns) — circular rose handles to
   distinguish from the fixed 4 waypoints. Right-click to delete. */
.st-handle--extra{ rx:9; ry:9; fill:#FFFFFF; stroke:#5B9E7E; stroke-width:1.8; }
.st-handle--extra:hover{ fill:#A8D9BD; stroke:#3D7A5E; }
/* Dive editor (edit mode). Rose bands mark the hidden sections (dives) of the
   active slide's line: drag a band to move it, drag its pill ends to resize,
   double-click the line (.st-dv-hit) to add one. Built by drawDiveEd. */
.st-dv-ed{ display:none; }
body.st-edit .st-dv-ed.on{ display:inline; }
.st-dv-hit{ fill:none; stroke:transparent; stroke-width:14; pointer-events:stroke; cursor:crosshair; }
.st-dv-body{
  fill:none; stroke:#CE7B91; stroke-opacity:.45; stroke-width:9;
  stroke-linecap:butt; stroke-linejoin:miter; pointer-events:stroke; cursor:grab;
  transition:stroke-opacity .12s ease;
}
.st-dv-body:hover{ stroke-opacity:.65; }
.st-dv-body.is-sel{ stroke-opacity:.92; stroke-width:12; }
.st-dv-body:active{ cursor:grabbing; }
.st-dv-end{ fill:#FBFBFB; stroke:#CE7B91; stroke-width:1.5; pointer-events:all; }
.st-dv-end:hover{ fill:#CE7B91; stroke:#FBFBFB; }
.st-dv-lbl{
  font-family:'Space Mono','Space Mono Fallback',monospace; font-size:10px; fill:#FBFBFB;
  paint-order:stroke; stroke:rgba(20,14,10,.85); stroke-width:3px; pointer-events:none;
}
body.st-edit #salt-trace{ z-index:9990; pointer-events:none; }
body.st-edit .st-spath{ opacity:1 !important; }
body.st-edit .st-spath:not(.is-active) .st-spath-fg{ opacity:.18; }
body.st-edit .st-spath:not(.is-active) .st-spath-bg{ opacity:.5; }
/* Full-preview toggle: when ON in edit mode, every slide's path shows
   at full opacity so the continuous chain is visible end-to-end. */
body.st-edit.st-preview-all .st-spath-fg,
body.st-edit.st-preview-all .st-spath-bg{ opacity:1 !important; }
body.st-edit.st-preview-all .st-spath .st-spath-anchor{ opacity:.95 !important; transform:scale(1) !important; }
@media(max-width:767px){ #salt-trace{display:none;} }
@media(prefers-reduced-motion:reduce){
  .st-spath, .st-spath-fg{transition:none !important;}
}

/* MOTION MARK — salt-trace-triggered header text reveal.
   Every slide sits on the forest: headlines rest as a faint bone and sweep to
   bone; the rose em rests faint and sweeps to the on-dark rose (with its glow). */
.mm-reveal{
  --mm-rest:rgba(251,251,251,.34); --mm-ink:#FBFBFB;
  --mm-em-rest:rgba(224,150,170,.38); --mm-em-ink:var(--rose-on);
  background:linear-gradient(90deg,var(--mm-ink) 0%,var(--mm-ink) 50%,var(--mm-rest) 50%,var(--mm-rest) 100%);
  background-size:220% 100%; background-position:100% 0;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  will-change:background-position;
}
.mm-reveal em{
  background:linear-gradient(90deg,var(--mm-em-ink) 0%,var(--mm-em-ink) 50%,var(--mm-em-rest) 50%,var(--mm-em-rest) 100%);
  background-size:220% 100%; background-position:100% 0;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.mm-reveal.mm-run{animation:mmTextReveal 1100ms cubic-bezier(.65,0,.35,1) forwards;}
.mm-reveal.mm-run em{animation:mmTextReveal 1100ms cubic-bezier(.65,0,.35,1) .18s forwards;}
@keyframes mmTextReveal{to{background-position:0% 0;}}
@media(prefers-reduced-motion:reduce){
  .mm-reveal,.mm-reveal em{background-position:0% 0 !important;animation:none !important;}

}

/* ── GL Canvas — retired in favour of the aurora wave-band system.
   The Three.js mood renderer painted opaque background colours
   (MOODS[0]=#FFFFFF) at the same z-index as #aurora-layer, which covered
   the wave-band SVGs on desktop. Hiding it lets aurora render through. */
#gl{display:none !important;}

/* ── SVG Turbulence Filter (used for slide transitions) ── */
.slide-dissolve-filter{position:fixed;width:0;height:0;pointer-events:none;}

/* ── NAV ── */
#nav{
  position:fixed;top:0;left:0;right:0;z-index:900;height:60px;padding:0 48px;
  display:flex;align-items:center;justify-content:space-between;
  transition:background .45s,border-color .45s;
}
/* No backdrop-filter — it forced the nav to re-sample the (moving) aurora
   behind it on every frame, producing visible nav flicker on dark slides.
   Higher alpha + drop-shadow gives the same "floating band" feel without
   the per-frame backdrop blur cost. */
#nav.dark {background:rgba(20,14,10,.92);border-bottom:1px solid rgba(255,255,255,.06);box-shadow:0 1px 24px rgba(0,0,0,.18);}
.nav-logo{display:flex;align-items:center;gap:9px;cursor:pointer;transition:opacity .3s;text-decoration:none;color:inherit;}
.nav-logo:hover{opacity:.85;}
/* Salt grain logo mark */
.salt-mark{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform .2s;}
.salt-mark svg{width:100%;height:100%;}
.salt-mark--nav{width:36px;height:36px;}
.salt-mark--footer{width:28px;height:28px;}
.nav-logo:hover .salt-mark{transform:scale(1.08) rotate(4deg);}
/* Crystal scatter — decorative salt crystal SVGs */
.crystal-scatter{position:absolute;pointer-events:none;z-index:0;}
/* Salt texture over the forest (every slide) */
.salt-texture-dark::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Crect x='24' y='18' width='6' height='6' rx='1.5' fill='white' opacity='0.035' transform='rotate(12 27 21)'/%3E%3Crect x='168' y='54' width='5' height='5' rx='1' fill='white' opacity='0.025' transform='rotate(-8 170 56)'/%3E%3Crect x='96' y='144' width='7' height='7' rx='1.5' fill='%23B89050' opacity='0.04' transform='rotate(15 99 147)'/%3E%3Crect x='204' y='192' width='4' height='4' rx='1' fill='white' opacity='0.03' transform='rotate(-5 206 194)'/%3E%3C/svg%3E");}
/* ── Artisanal background patches — a few subtle tonal rectangles per slide.
   z-index:-1 sits inside each isolated .slide: above the slide background,
   below all content. Translucent fills stay "minorly offset" over the
   animated aurora; mild shadow lifts them just off the surface. Injected
   per slide (max 5) by the bg-patch script near </body>. */
.bg-patches{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;}
.bg-patch{position:absolute;border-radius:3px;background:rgba(255,255,255,.04);}
.bg-patch--alt{background:rgba(206,123,145,.08);}
.logo-text{font-family:'Fraunces','Fraunces Fallback','Fraunces Fallback Android',serif;font-size:21px;transition:color .4s;}
#nav.dark  .logo-text{color:#FBFBFB;}
.nav-r{display:flex;align-items:center;gap:28px;}
.nav-link{font-size:13.5px;font-weight:500;transition:color .3s, transform .3s;cursor:pointer;text-decoration:none;}
#nav.dark  .nav-link{color:rgba(251,251,251,.5);}
#nav.dark  .nav-link:hover{color:var(--rose-on-sm);}
.nav-login{font-size:13.5px;font-weight:500;transition:color .3s;cursor:pointer;text-decoration:none;}
#nav.dark  .nav-login{color:rgba(251,251,251,.7);}
.nav-cta{
  font-size:13px;font-weight:600;padding:9px 22px;border-radius:100px;
  background:linear-gradient(135deg,var(--p),var(--p2));color:#fff;
  box-shadow:0 2px 16px var(--glow-p),0 0 0 1px rgba(206,123,145,.1);
  transition:all .25s cubic-bezier(.4,0,.2,1);cursor:pointer;text-decoration:none;
}
.nav-cta:hover{transform:translateY(-2px);box-shadow:0 8px 32px rgba(206,123,145,.4),0 0 0 1px rgba(206,123,145,.2);}

/* ── FEATURE STRIP (slides 1-5 only) — continues the dark nav band ── */
#feat-strip{
  position:fixed;top:60px;left:0;right:0;z-index:500;
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 48px;
  /* No backdrop-filter — same reason as #nav: re-sampling the aurora
     under the strip every frame causes flicker. Higher-alpha solid bg. */
  background:rgba(20,14,10,.92);
  border-bottom:1px solid rgba(251,251,251,.06);
  box-shadow:0 1px 20px rgba(0,0,0,.18);
  opacity:0;transform:translateY(-6px);
  transition:opacity .4s,transform .4s;pointer-events:none;
}
#feat-strip.on{opacity:1;transform:none;pointer-events:auto;}
.fs-eye{font-size:10px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:rgba(251,251,251,.6);}
.fs-pills{display:flex;gap:6px;}
.fs-pill{
  position:relative;overflow:hidden;
  font-size:12px;font-weight:600;padding:6px 16px;border-radius:100px;
  border:1.5px solid rgba(251,251,251,.24);color:rgba(251,251,251,.74);
  /* No backdrop-filter on these tiny pills either; the parent strip is
     now opaque so the pills sit on a solid surface anyway. */
  background:transparent;
  cursor:pointer;transition:background .25s cubic-bezier(.4,0,.2,1),
                            border-color .25s cubic-bezier(.4,0,.2,1),
                            color .25s cubic-bezier(.4,0,.2,1),
                            transform .15s cubic-bezier(.4,0,.2,1);
}
.fs-pill:hover{background:rgba(251,251,251,.07);border-color:rgba(251,251,251,.5);color:#FBFBFB;}
.fs-pill.on{background:#FBFBFB;border-color:transparent;color:#1B1B1F;box-shadow:none;}
.fs-pill:focus-visible{outline:2px solid #FBFBFB;outline-offset:2px;}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
@keyframes pill-tap{0%,100%{transform:scale(1)}50%{transform:scale(0.94)}}
.fs-pill.tapping{animation:pill-tap 150ms ease;}
.fs-prog{display:flex;align-items:center;gap:8px;}
.fs-num{font-family:'Space Mono','Space Mono Fallback',monospace;font-size:11px;color:rgba(251,251,251,.6);}
.fs-bar{width:60px;height:2px;background:rgba(251,251,251,.18);border-radius:2px;overflow:hidden;}
.fs-fill{width:100%;height:100%;background:var(--p);border-radius:2px;transform-origin:0 50%;transition:transform .4s cubic-bezier(.16,1,.3,1);}

/* ── DOT NAV removed (markup + JS handler deleted; only #prog-bar remains as the slide-position indicator) ── */

/* ── PROGRESS BAR — one continuous bar, scroll-linked (scaleX), with a tick at each slide
   boundary. --deck-n is the deck's slide count; the slide-system script sets it from N. ── */
#prog-bar{
  position:fixed;bottom:0;left:0;z-index:800;height:2px;width:100%;
  pointer-events:none;overflow:hidden;
}
#prog-bar::before{
  content:'';position:absolute;inset:0;z-index:1;
  background:repeating-linear-gradient(90deg, transparent 0 calc(100% / var(--deck-n, 9) - 1px), rgba(251,251,251,.25) calc(100% / var(--deck-n, 9) - 1px) calc(100% / var(--deck-n, 9)));
}

.pb-fill{
  position:absolute;inset:0;background:#CE7B91;
  transform:scaleX(0);transform-origin:0 50%;
}
/* goSlide does not drive the flow layout (phones, reduced motion) */
html:not(.hs-motion) #prog-bar{display:none;}

/* ── PAGE DRIVER ──
   100vh + 87.5vh per slide (9 slides): the scroll range gives each slide one 87.5vh
   band, the step of a PageDown/Space press, so a key press moves exactly one slide. */
#page-driver{height:887.5vh;}
#page-sticky{position:sticky;top:0;height:100vh;overflow:hidden;will-change:transform;}

/* ── SLIDE BASE — opacity-only cross-fade ──
   Previously also transitioned `filter:blur(4px)` and `transform:scale(0.98)`
   over 550ms. Over the now-transparent dark slides + animated aurora those
   were the dominant flicker source: every transition rasterised a blurred
   scaled layer above the moving gradient. Dropping them leaves a clean
   cross-fade that the GPU can composite without per-frame invalidation.
   `isolation:isolate` gives each slide its own stacking context so the
   compositor doesn't need to coordinate cross-slide repaints. */
.slide{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  opacity:0;
  transition:opacity .35s cubic-bezier(.4,0,.2,1);
  pointer-events:none;will-change:opacity;
  isolation:isolate;
}
.slide.on{
  opacity:1;pointer-events:auto;
}
/* SCROLL-1 — s1<->s2 share one window rect: #s1 (under #s2 in paint order) holds at
   full opacity for the 350ms turnover, so the two windows never cross-dissolve to a
   see-through rect; #s2's own fade then reads as the page changing inside one browser.
   The hero handoff uses the same hold: s1's window replaces #hero-morph's frame on
   the identical rect without a fade. */
.slide.sw-hold{opacity:1;transition:none;}

/* ════════════════ SLIDE 0 — HERO (Split Layout) ════════════════ */
#s0{padding:80px 64px 40px;}
.hero-inner{
  max-width:1400px;width:100%;height:100%;
  display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:48px;
  margin:0 auto;
}
.hero-left{display:flex;flex-direction:column;justify-content:center;}
.hero-right{display:flex;align-items:center;justify-content:center;position:relative;}
.hero-kicker{
  display:inline-flex;align-items:center;gap:8px;width:fit-content;
  background:rgba(206,123,145,.07);border:1px solid rgba(206,123,145,.15);
  border-radius:100px;padding:6px 16px;margin-bottom:28px;
  backdrop-filter:blur(12px);
  box-shadow:0 2px 12px rgba(206,123,145,.06);
}
.kicker-dot{width:6px;height:6px;border-radius:50%;background:var(--p);animation:kpulse 2s ease-in-out infinite;}
@keyframes kpulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(1.5)}}
.kicker-text{font-size:12px;font-weight:600;letter-spacing:.05em;color:var(--p);}
.hero-h1{
  font-family:'Fraunces','Fraunces Fallback','Fraunces Fallback Android',serif;
  font-size:clamp(48px,5.5vw,80px);line-height:1.18;letter-spacing:-.02em;
  color:var(--on);margin-bottom:22px;
  perspective:800px;
}
.hero-h1 em{font-style:italic;color:var(--p);}
.hero-h1 .word{display:inline-block;overflow:visible;perspective:800px;}
.hero-h1 .char{
  display:inline-block;
  transform:translateY(110%) rotateX(-40deg);
  opacity:0;
  transform-origin:center bottom;
  will-change:transform,opacity;
}
.hero-sub{
  font-size:clamp(15px,1.5vw,17px);line-height:1.72;
  color:var(--mute);max-width:440px;margin-bottom:36px;
}
.hero-acts{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:36px;}
.btn-p{
  font-family:'Inter Tight','Inter Tight Fallback',sans-serif;
  font-size:14px;font-weight:600;padding:14px 34px;border-radius:100px;
  background:linear-gradient(135deg,var(--p),var(--p2));color:#fff;
  box-shadow:0 4px 24px var(--glow-p),0 0 0 1px rgba(196,90,60,.08);
  transition:all .25s cubic-bezier(.4,0,.2,1);display:inline-flex;align-items:center;cursor:pointer;
  position:relative;overflow:hidden;text-decoration:none;letter-spacing:.02em;
}
/* Hover glow shimmer */
.btn-p::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.25) 50%,transparent 60%);
  background-size:200% 100%;
  opacity:0;transition:opacity .3s;
}
.btn-p:hover::after{opacity:1;animation:shimmer 1.8s ease-in-out infinite;}
.btn-p:hover{box-shadow:0 8px 40px rgba(206,123,145,.45),0 0 0 1px rgba(206,123,145,.15);transform:translateY(-2px);}
.btn-p:active{transform:translateY(0) scale(.98);}
.btn-ghost{
  font-family:'Inter Tight','Inter Tight Fallback',sans-serif;
  font-size:14px;font-weight:500;color:var(--txt);letter-spacing:.02em;
  border:1.5px solid rgba(232,228,224,.5);border-radius:100px;padding:13px 28px;
  background:rgba(255,255,255,.5);backdrop-filter:blur(16px) saturate(1.4);
  transition:all .25s cubic-bezier(.4,0,.2,1);cursor:pointer;
  box-shadow:0 2px 12px rgba(30,27,24,.03);
}
.btn-ghost:hover{border-color:var(--p);color:var(--p);background:rgba(255,255,255,.7);box-shadow:0 4px 20px var(--glow-p);transform:translateY(-1px);}
.btn-ghost:active{transform:translateY(0) scale(.98);}
.hero-pills{
  display:flex;gap:12px;flex-wrap:wrap;
  padding-top:24px;border-top:1px solid var(--bdr);
}
/* ── Hero Canvas (animated blob visual) ── */
#hero-canvas{
  width:100%;max-width:580px;aspect-ratio:1;
  position:relative;z-index:1;
  border-radius:50%;
  animation:heroCanvasMorph 12s ease-in-out infinite;
}
@keyframes heroCanvasMorph{
  0%{border-radius:50% 45% 55% 48% / 48% 52% 46% 50%}
  25%{border-radius:45% 55% 48% 52% / 52% 46% 54% 48%}
  50%{border-radius:52% 48% 46% 54% / 46% 50% 48% 55%}
  75%{border-radius:48% 52% 54% 46% / 55% 48% 52% 45%}
  100%{border-radius:50% 45% 55% 48% / 48% 52% 46% 50%}
}
.hero-float{
  position:absolute;
  background:rgba(255,255,255,.65);border:1px solid rgba(255,255,255,.45);
  border-radius:14px;padding:14px 18px;
  backdrop-filter:blur(24px) saturate(1.5);
  box-shadow:0 12px 40px rgba(27,27,31,.08),inset 0 1px 0 rgba(255,255,255,.5);
  z-index:4;transition:all .3s;
}
.hero-float:hover{transform:translateY(-4px);box-shadow:0 16px 48px rgba(27,27,31,.12);}
.hero-float-label{font-size:11px;font-weight:500;color:var(--mute);margin-bottom:4px;}
.hero-float-val{font-family:'Fraunces','Fraunces Fallback','Fraunces Fallback Android',serif;font-size:24px;line-height:1;}
.hero-float-val.green{color:var(--ok);}
.hero-float-val.orange{color:var(--p);}
.hero-float.f1{top:6%;right:4%;animation:heroFloat 7s ease-in-out infinite;}
.hero-float.f2{bottom:20%;left:-2%;animation:heroFloat 7s ease-in-out infinite 2.3s;}
.hero-float.f3{bottom:4%;right:10%;animation:heroFloat 7s ease-in-out infinite 4.6s;}
.hero-float-chip{
  position:absolute;
  background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.35);
  border-radius:100px;padding:7px 14px;
  backdrop-filter:blur(20px);font-size:11px;font-weight:600;color:var(--txt);
  display:flex;align-items:center;gap:6px;z-index:4;
  box-shadow:0 4px 16px rgba(27,27,31,.06);
}
.hero-float-chip .dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;}
.hero-float-chip.f4{top:38%;left:-6%;animation:heroFloat 8s ease-in-out infinite 1.5s;}
@keyframes heroFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.hpill{
  display:flex;align-items:center;gap:10px;
  background:rgba(255,255,255,.45);border:1px solid rgba(201,194,195,.3);
  border-radius:100px;padding:9px 18px;
  backdrop-filter:blur(20px) saturate(1.5);
  box-shadow:0 4px 16px rgba(27,27,31,.04),inset 0 1px 0 rgba(255,255,255,.6);
  transition:all .25s;
}
.hpill:hover{background:rgba(255,255,255,.6);box-shadow:0 6px 24px rgba(27,27,31,.06);transform:translateY(-1px);}
.hpill-n{font-family:'Inter Tight','Inter Tight Fallback',sans-serif;font-size:18px;font-weight:700;color:var(--txt);}
.hpill-l{font-size:11px;color:var(--mute);font-weight:500;letter-spacing:.02em;}
.hero-hint{
  position:absolute;bottom:28px;left:max(64px, calc((100% - 1400px) / 2));
  display:flex;flex-direction:column;align-items:flex-start;gap:7px;
  animation:fadeHint 1s ease .8s both;
  z-index:2;
}
@keyframes fadeHint{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.hint-txt{font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--on-3);}
.hint-line{position:relative;width:1px;height:40px;background:rgba(251,251,251,.2);overflow:hidden;}
.hint-line::after{
  content:'';position:absolute;left:0;top:0;width:1px;height:12px;background:#CE7B91;
  transform:translateY(-12px);animation:hline 1.8s cubic-bezier(.65,0,.35,1) infinite;
}
@keyframes hline{to{transform:translateY(40px)}}
.slide:not(.on):not(.m-flow) .hint-line::after{animation-play-state:paused;}
@media(prefers-reduced-motion:reduce){.hint-line::after{animation:none;transform:translateY(14px);}}

/* ════════════════ HERO · Editorial overrides ════════════════ */
/* Color-sweep entrance on .run: faint bone at rest, bone + on-dark rose when landed */
.hero-h1 .line{
  display:block;
  background:linear-gradient(90deg,var(--on) 0%,var(--on) 50%,rgba(251,251,251,.34) 50%,rgba(251,251,251,.34) 100%);
  background-size:220% 100%;background-position:100% 0;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  will-change:background-position;
}
.hero-h1 .line em{
  background:linear-gradient(90deg,var(--rose-on) 0%,var(--rose-on) 50%,rgba(224,150,170,.38) 50%,rgba(224,150,170,.38) 100%);
  background-size:220% 100%;background-position:100% 0;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.hero-h1.run .line{animation:heroSweep 1.1s cubic-bezier(.6,0,.2,1) both;}
.hero-h1.run .line em{animation:heroSweep 1.1s cubic-bezier(.6,0,.2,1) .18s both;}
@keyframes heroSweep{to{background-position:0% 0;}}

/* Old hero-right canvas + float chips no longer used — remove visually */
#hero-canvas,.hero-float,.hero-float-chip{display:none !important;}

/* ════════════════ HERO · Editorial composition (right pane) ════════════════ */
.ed-stage{
  position:relative;width:100%;max-width:600px;aspect-ratio:1/1.18;
  display:flex;align-items:center;justify-content:center;
}
.ed-paper{
  position:absolute;background:#FFFFFF;border-radius:6px;
  box-shadow:0 1px 0 rgba(27,27,31,.04),0 24px 60px rgba(27,27,31,.08),0 6px 16px rgba(27,27,31,.05);
}
.ed-paper-1{inset:5% 8% 8% 5%;transform:rotate(-3.5deg);background:linear-gradient(180deg,#FFFFFF,#FBFBFB);}
.ed-paper-2{inset:2% 4% 5% 11%;transform:rotate(2deg);background:#FAF3DD;}

/* Flip-through stage holds two stacked slots */
.ed-flip-stage{
  position:relative;width:88%;aspect-ratio:1/1.18;perspective:1800px;
}
.ed-flip-slot{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  transform-origin:top right;will-change:transform,opacity;
}
.ed-flip-slot--a{z-index:2;}
.ed-flip-slot--b{z-index:1;}
.ed-flip-counter{
  position:absolute;top:-26px;left:50%;transform:translateX(-50%) rotate(0);z-index:20;
  display:inline-flex;align-items:baseline;gap:6px;
  background:var(--bg);padding:5px 12px;border-radius:999px;
  font-family:'Space Mono','Space Mono Fallback',monospace;font-size:9px;
  letter-spacing:.16em;color:var(--mute);
  box-shadow:0 6px 16px rgba(27,27,31,.08);
}
.ed-flip-counter-eye{font-weight:700;}
.ed-flip-counter-n{
  font-family:'Space Grotesk','Space Grotesk Fallback',sans-serif;font-size:13px;font-weight:600;
  color:var(--txt);font-feature-settings:"tnum" 1;letter-spacing:0;
}
.ed-flip-counter-total{color:var(--txt);font-weight:700;}
.ed-flip-counter-sep{color:var(--mute);font-weight:400;text-transform:lowercase;letter-spacing:.04em;}

/* Inner dossier card */
.ed-flip-slot .ed-dossier{
  width:100%;transform:rotate(-1.5deg);
  background:#FFFFFF;border-radius:8px;padding:42px 28px 20px;
  box-shadow:
    0 1px 0 rgba(27,27,31,.05),
    0 30px 70px rgba(27,27,31,.14),
    0 8px 22px rgba(27,27,31,.08);
}
.ed-dossier-tab{
  position:absolute;top:-14px;left:32px;
  background:var(--txt);color:var(--bg);
  padding:6px 14px;border-radius:3px 3px 0 0;transform:rotate(-1deg);
}
.ed-tab-mono{font-family:'Space Mono','Space Mono Fallback',monospace;font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;}
.ed-dossier-meta-row{
  display:flex;align-items:center;gap:8px;
  font-family:'Space Mono','Space Mono Fallback',monospace;font-size:9px;
  color:var(--mute);margin:-6px 0 14px;
  padding-bottom:10px;border-bottom:1px dashed var(--bdr);
}
.ed-meta-eye{font-weight:700;letter-spacing:.14em;}
.ed-meta-id{color:var(--txt);font-weight:700;letter-spacing:.06em;}
.ed-meta-sep{color:var(--bdr);margin:0 2px;}
.ed-dossier-head{padding-bottom:14px;border-bottom:1px solid var(--bdr);margin-bottom:14px;}
.ed-dossier-name{
  font-family:'Fraunces','Fraunces Fallback','Fraunces Fallback Android',serif;font-size:24px;line-height:1.1;
  letter-spacing:-.022em;color:var(--txt);margin-bottom:4px;
}
.ed-dossier-name em{color:var(--p) !important;font-style:italic;}
.ed-dossier-role{font-family:'Inter Tight','Inter Tight Fallback',sans-serif;font-size:11.5px;color:var(--mute);margin-bottom:6px;}
.ed-dossier-ex{display:inline-flex;align-items:baseline;gap:6px;font-family:'Inter Tight','Inter Tight Fallback',sans-serif;font-size:11px;}
.ed-ex-eye{font-family:'Space Mono','Space Mono Fallback',monospace;font-size:9px;font-weight:700;letter-spacing:.16em;color:var(--p);}
.ed-dossier-ex em{font-style:italic;color:var(--txt);font-weight:500;}

/* Rings + score block, side by side */
.ed-dossier-rings{
  display:grid;grid-template-columns:120px 1fr;align-items:center;
  gap:18px;margin:4px 0 14px;
}
.ed-score-block{display:flex;flex-direction:column;gap:6px;align-items:flex-start;}
.ed-score-eye{font-family:'Space Mono','Space Mono Fallback',monospace;font-size:9px;font-weight:700;letter-spacing:.16em;color:var(--mute);text-transform:uppercase;}
.ed-score-num{
  font-family:'Space Grotesk','Space Grotesk Fallback',sans-serif;font-size:48px;font-weight:600;
  line-height:.9;color:var(--txt);font-feature-settings:"tnum" 1;letter-spacing:-.02em;
}
.ed-score-grade{font-family:'Space Mono','Space Mono Fallback',monospace;font-size:9px;font-weight:700;letter-spacing:.12em;padding:3px 9px;border-radius:999px;}

.ed-dossier-legend{
  display:grid;grid-template-columns:repeat(3,1fr);gap:6px;
  margin-bottom:12px;padding:9px 11px;background:var(--bg);border-radius:4px;
}
.ed-dossier-legend span{display:flex;align-items:center;gap:6px;font-family:'Inter Tight','Inter Tight Fallback',sans-serif;font-size:10px;color:var(--mute);}
.ed-dossier-legend i{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
.ed-dossier-legend em{font-family:'Space Mono','Space Mono Fallback',monospace;font-style:normal;font-weight:700;color:var(--txt);margin-left:auto;font-feature-settings:"tnum" 1;}

/* Criteria track */
.ed-criteria{margin-bottom:12px;}
.ed-criteria-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px;}
.ed-criteria-eye{font-family:'Space Mono','Space Mono Fallback',monospace;font-size:9px;font-weight:700;letter-spacing:.14em;color:var(--mute);}
.ed-criteria-n{font-family:'Inter Tight','Inter Tight Fallback',sans-serif;font-size:11px;color:var(--mute);}
.ed-criteria-n em{font-family:'Space Grotesk','Space Grotesk Fallback',sans-serif;font-style:normal;font-weight:700;color:var(--txt);font-feature-settings:"tnum" 1;}
.ed-criteria-track{display:grid;grid-template-columns:repeat(8,1fr);gap:3px;}
.ed-criteria-track i{display:block;height:5px;border-radius:1px;background:var(--acc);transition:background .3s;}
.ed-criteria-track i.on{background:var(--txt);}

/* Why-this-score */
.ed-why{background:var(--bg);border-radius:4px;padding:10px 12px;margin-bottom:10px;}
.ed-why-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:7px;}
.ed-why-eye{font-family:'Space Mono','Space Mono Fallback',monospace;font-size:9px;font-weight:700;letter-spacing:.14em;color:var(--mute);}
.ed-why-meta{font-family:'Inter Tight','Inter Tight Fallback',sans-serif;font-size:10px;color:var(--mute);}
.ed-why-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:5px;}
.ed-why-list li{display:flex;align-items:flex-start;gap:7px;font-family:'Inter Tight','Inter Tight Fallback',sans-serif;font-size:11px;line-height:1.45;color:var(--txt);}
.ed-bullet{width:4px;height:4px;border-radius:50%;background:var(--p);margin-top:7px;flex-shrink:0;}

/* Tag pills */
.ed-tags{display:flex;gap:4px;margin-bottom:12px;flex-wrap:wrap;}
.ed-tag{font-family:'Inter Tight','Inter Tight Fallback',sans-serif;font-size:9.5px;font-weight:500;padding:3px 8px;border-radius:999px;background:var(--bg);color:var(--sec);letter-spacing:.02em;}

/* Foot row */
.ed-dossier-foot{display:flex;align-items:center;justify-content:space-between;font-family:'Space Mono','Space Mono Fallback',monospace;font-size:10px;padding-top:10px;border-top:1px solid var(--bdr);}
.ed-foot-pill{font-family:'Space Mono','Space Mono Fallback',monospace;font-size:9px;font-weight:700;letter-spacing:.12em;padding:4px 10px;border-radius:999px;}
.ed-foot-stamp{font-size:10px;letter-spacing:.15em;color:var(--mute);}
.ed-foot-stamp em{font-style:normal;color:var(--txt);font-weight:700;}

/* Side stats pill (job scoreboard) */
.ed-side-pill{
  position:absolute;top:-2%;right:-4%;
  background:var(--txt);color:var(--bg);padding:18px 22px;
  border-radius:8px;transform:rotate(3deg);
  box-shadow:0 20px 50px rgba(27,27,31,.22),0 6px 16px rgba(27,27,31,.10);
  min-width:180px;z-index:10;
}
.ed-side-pill-eye{font-family:'Space Mono','Space Mono Fallback',monospace;font-size:9px;font-weight:700;letter-spacing:.18em;color:var(--p);margin-bottom:12px;}
.ed-side-pill-line{display:flex;align-items:baseline;gap:10px;margin-bottom:8px;}
.ed-side-pill-line:last-child{margin-bottom:0;}
.ed-side-pill-n{font-family:'Space Grotesk','Space Grotesk Fallback',sans-serif;font-size:22px;font-weight:600;color:var(--bg);font-feature-settings:"tnum" 1;min-width:36px;}
.ed-side-pill-line em{font-style:normal;font-size:11px;color:rgba(251,251,251,.55);}
.ed-side-pill-line--sub .ed-side-pill-n{font-size:16px;color:rgba(251,251,251,.7);}

/* Bottom-left status chip */
.ed-side-chip{
  position:absolute;bottom:6%;left:-3%;z-index:10;
  display:inline-flex;align-items:center;gap:8px;
  background:#FFFFFF;color:var(--txt);
  padding:8px 14px;border-radius:999px;
  font-family:'Inter Tight','Inter Tight Fallback',sans-serif;font-size:11px;font-weight:600;
  transform:rotate(-2deg);
  box-shadow:0 1px 0 rgba(27,27,31,.04),0 8px 20px rgba(27,27,31,.10);
}
.ed-side-chip em{font-style:normal;font-family:'Space Mono','Space Mono Fallback',monospace;color:var(--mute);font-size:10px;margin-left:2px;}
.ed-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;}
.ed-dot--ok{background:var(--ok);animation:edPulse 2s ease-in-out infinite;}
@keyframes edPulse{0%,100%{box-shadow:0 0 0 0 rgba(91,158,126,.5)}50%{box-shadow:0 0 0 6px rgba(91,158,126,0)}}

/* Paper-peel flip animations */
@keyframes flip-peel{
  0%   {transform:rotate(-1.5deg) translateY(0)     rotateY(0deg)    rotateZ(0)       scale(1);    opacity:1;filter:none;}
  12%  {transform:rotate(-1.5deg) translateY(-4px)  rotateY(-2deg)   rotateZ(-.5deg)  scale(1.005);opacity:1;filter:drop-shadow(0 28px 36px rgba(27,27,31,.18));}
  35%  {transform:rotate(-1.5deg) translateY(-8px)  rotateY(-28deg)  rotateZ(-2deg)   scale(1)     translate3d(-2%,-2%,0); opacity:1;}
  60%  {transform:rotate(-1.5deg) translateY(-14px) rotateY(-72deg)  rotateZ(-4.5deg) translate3d(-9%,-7%,0); opacity:.95;}
  82%  {transform:rotate(-1.5deg) translateY(-22px) rotateY(-118deg) rotateZ(-7deg)   translate3d(-22%,-16%,0); opacity:.55;}
  100% {transform:rotate(-1.5deg) translateY(-30px) rotateY(-165deg) rotateZ(-10deg)  translate3d(-44%,-28%,0); opacity:0;}
}
@keyframes flip-rise{
  0%   {transform:rotate(2.5deg)  translateY(14px) scale(.94); opacity:0;   filter:blur(2px);}
  25%  {transform:rotate(1.5deg)  translateY(8px)  scale(.97); opacity:.55; filter:blur(1px);}
  55%  {transform:rotate(-0.5deg) translateY(3px)  scale(.99); opacity:.95; filter:none;}
  100% {transform:rotate(-1.5deg) translateY(0)    scale(1);   opacity:1;   filter:none;}
}
.ed-flip-slot.ed-out{animation:flip-peel .6s cubic-bezier(.42,0,.28,1) forwards;}
.ed-flip-slot.ed-in {animation:flip-rise .42s cubic-bezier(.22,1.05,.36,1) forwards;}
@media(prefers-reduced-motion:reduce){
  .ed-flip-slot.ed-out,.ed-flip-slot.ed-in{animation:none !important;transition:opacity .4s ease;}
}

/* Tablet + mobile: the editorial stage stays (see "HERO HOOK · responsive" at the end of this sheet) */

/* ════════════════ Vertical edge stamps (vert-mark system) ════════════════ */
.vert-mark{
  position:absolute;
  font-family:'Space Mono','Space Mono Fallback',monospace;font-size:10px;font-weight:600;
  /* Off-white ("dark white" #E8E8E8) at full opacity. Pure white at
     .7 opacity faded into the lighter aurora regions and read as grey;
     #E8E8E8 holds its identity across the full gradient. !important
     defeats any downstream selectors that try to recolour the stamps. */
  letter-spacing:.32em;color:#E8E8E8 !important;opacity:1 !important;
  white-space:nowrap;pointer-events:none;z-index:5;
  transition:opacity .6s ease;
}
.vert-mark--right{
  top:50%;right:20px;transform:translateY(-50%);
  writing-mode:vertical-rl;text-orientation:sideways;max-height:70vh;
}
.vert-mark--left{
  top:50%;left:20px;transform:translateY(-50%) rotate(180deg);
  writing-mode:vertical-rl;text-orientation:sideways;max-height:70vh;
}
.vert-mark--tl{top:88px;left:32px;}
.vert-mark--tr{top:88px;right:32px;}
.vert-mark--bl{bottom:42px;left:32px;}
.vert-mark--br{bottom:42px;right:32px;}
/* Opacity overrides removed from these variants so the base !important
   opacity:1 wins — every stamp now reads at full strength. The sizing
   modifiers (--bottom-center, --xs, --sm) only change typography. */
.vert-mark--bottom-center{bottom:36px;left:50%;transform:translateX(-50%);font-size:9.5px;letter-spacing:.4em;}
.vert-mark--xs{font-size:9px;letter-spacing:.24em;}
.vert-mark--sm{font-size:9.5px;letter-spacing:.28em;}
/* Inv/accent/gold all settle to the same off-white as the base. */
.vert-mark--inv{color:#E8E8E8 !important;}
.vert-mark--accent{color:#E8E8E8 !important;}
.vert-mark--gold  {color:#E8E8E8 !important;}
@media(max-width:980px){.vert-mark{display:none;}}

/* ════════════════ SLIDES 1-3 — FEATURE ════════════════ */
.feat-slide{
  width:100%;max-width:1520px;
  padding:108px 48px 60px;
  display:flex;align-items:center;
}
.fc-copy{width:33%;display:flex;flex-direction:column;justify-content:center;}
/* Copy column sits off the left edge and its vertical rail. The negative right margin
   gives the shift back, so the column and the demo beside it keep their widths; the shift
   grows from 16px at 1100 to 40px at 1400, keeping a clear gap to the demo. Deck mode only:
   touch tablets at 1100-1279 load the hs-flow layout, which centres the copy and demo. */
@media(min-width:1100px){html:not(.hs-flow) .fc-copy{--fc-shift:clamp(16px,calc((100vw - 1000px) / 10),40px);margin-left:var(--fc-shift);margin-right:calc(-1 * var(--fc-shift));}}
.fc-step{font-family:'Space Mono','Space Mono Fallback',monospace;font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--rose-on-sm);text-shadow:var(--rose-glow);margin-bottom:16px;}
/* ONPA-12: the feature titles are h2s; weight stays the inherited one they had as divs */
.fc-title{font-family:'Fraunces','Fraunces Fallback','Fraunces Fallback Android',serif;font-size:clamp(34px,3.2vw,50px);line-height:1.1;color:var(--on);margin-bottom:16px;font-weight:inherit;}
/* Cycling accent word in feature titles (s1-s4): rose, swaps between synonyms.
   Forced rose (text-fill + no background) so the motion-mark reveal gradient on
   the title cannot clip it; inline-block enables the swap transition; min-width
   is set in JS (em) so surrounding words never reflow as the word changes. */
/* Cycling accent word: every synonym shares ONE css-grid cell, so the slot is always as
   wide as the WIDEST synonym (browser-computed, font-aware, stable across font load) and
   the surrounding sentence/punctuation NEVER shifts as the word changes — zero layout
   movement, no JS measurement. Only opacity cross-fades. The on-dark rose clears 3:1
   for display text across the forest gradient, and glows like every rose accent; forced
   solid + border-box clip so the title's motion-mark reveal gradient can't clip it. */
.fc-title .cyc{display:inline-grid;vertical-align:baseline;}
.fc-title .cyc-opt{grid-area:1 / 1;text-align:left;white-space:nowrap;
  color:var(--rose-on) !important;-webkit-text-fill-color:var(--rose-on) !important;text-shadow:var(--rose-glow);
  background:none !important;-webkit-background-clip:border-box !important;background-clip:border-box !important;
  opacity:0;transition:opacity .26s ease;pointer-events:none;}
.fc-title .cyc-opt.is-on{opacity:1;pointer-events:auto;}
/* The title's reveal gradient uses background-clip:text, which paints EVERY visible
   descendant glyph in the gradient colour and ignores the option's opacity. Inactive
   synonyms are visibility:hidden so they never enter that clip, and the word only cycles
   once the reveal has landed and .mm-done has removed the clip (JS gates the swap). */
.fc-title .cyc-opt{visibility:hidden;transition:opacity .26s ease,visibility 0s linear .26s;}
.fc-title .cyc-opt.is-on{visibility:visible;transition:opacity .26s ease .1s,visibility 0s;}
/* SCROLL-1 — feature headlines rest at half bone (not the deck's 34%), so a headline
   is legible from the frame it arrives in, before its sweep lands. */
.fc-title.mm-reveal{--mm-rest:rgba(251,251,251,.5);}
.fc-title.mm-done{background:none !important;-webkit-text-fill-color:var(--mm-ink) !important;color:var(--mm-ink) !important;}
@media(prefers-reduced-motion:reduce){.fc-title .cyc-opt{transition:none !important;}}
.fc-desc{font-size:15px;line-height:1.72;color:var(--on-2);max-width:380px;margin-bottom:24px;}
.fc-bullets{display:flex;flex-direction:column;gap:9px;}
.fc-bullet{display:flex;align-items:flex-start;gap:10px;font-size:13.5px;color:var(--on-3);}
/* Button row under each feature slide's copy: a solid bone pill (sign-up or pricing) and an
   outline pill for the second link, the hero's two buttons at a smaller size. A plain note
   (a span) stays as mono text. Bone, not rose: rose stays for the accents. */
.fc-cta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:28px;}
.fc-desc + .fc-cta{margin-top:4px;}
.fc-cta-main,.tc-cta > a{display:inline-flex;align-items:center;font-family:'Inter Tight','Inter Tight Fallback',sans-serif;font-size:13.5px;font-weight:600;letter-spacing:.02em;line-height:1.2;
  padding:11px 22px;border-radius:100px;background:#FBFBFB;color:#1B1B1F;text-decoration:none;text-shadow:none;border:0;
  box-shadow:0 4px 14px rgba(0,0,0,.25);transition:box-shadow .2s ease,transform .2s ease;}
.fc-cta-main:hover,.tc-cta > a:hover{box-shadow:0 8px 28px rgba(0,0,0,.35),0 0 0 1px rgba(251,251,251,.25);transform:translateY(-1px);}
.fc-cta-aside{font-family:'Space Mono','Space Mono Fallback',monospace;font-size:11px;letter-spacing:.04em;color:var(--on-3);}
a.fc-cta-aside,.tc-cta .tc-cta-or a{display:inline-flex;align-items:center;font-family:'Inter Tight','Inter Tight Fallback',sans-serif;font-size:13px;font-weight:500;letter-spacing:.02em;line-height:1.2;
  padding:10px 20px;border-radius:100px;border:1.5px solid rgba(251,251,251,.28);background:rgba(251,251,251,.04);color:rgba(251,251,251,.86);
  text-decoration:none;text-shadow:none;transition:color .2s ease,border-color .2s ease,background .2s ease;}
a.fc-cta-aside:hover,.tc-cta .tc-cta-or a:hover{color:#FBFBFB;border-color:rgba(251,251,251,.55);background:rgba(251,251,251,.08);}
.fc-cta a:focus-visible,.tc-cta a:focus-visible{outline:2px solid #FBFBFB;outline-offset:3px;}
/* phones: every button keeps the 44px touch target */
@media(max-width:767px){.fc-cta-main,a.fc-cta-aside,.tc-cta a,.s6-cta-main,.s6-cta-aside{min-height:44px;}}
/* s2 deck mode between 768 and 1099px (hs-flow stacks the slide instead): the 4-step
   wizard's min width used to squeeze the copy column to ~100px. The copy keeps its 33%
   and the right pane may shrink; the wizard compacts (number-only inactive steps, narrower
   copilot, slimmer weight bars) to a fixed floor, and BIGWIN zooms the window down to the
   stage when that floor is wider. */
@media (min-width:768px) and (max-width:1099px){
  html:not(.hs-flow) #s2 .fc-copy{flex-shrink:0;min-width:220px;}
  html:not(.hs-flow) #s2 .fc-right{min-width:0;}
  html:not(.hs-flow) #s2 .win-stage{padding:16px;}
  html:not(.hs-flow) #s2 .app-win{min-width:532px;}
  html:not(.hs-flow) #s2 .win-body{height:auto;}
  html:not(.hs-flow) #s2 .v9b-body{height:375px;}
  html:not(.hs-flow) #s2 .v9b-copilot{width:168px;}
  html:not(.hs-flow) #s2 .v9b-pill:not(.v9b-pill-active){padding:5px;}
  html:not(.hs-flow) #s2 .v9b-pill:not(.v9b-pill-active) .v9b-pill-label{display:none;}
  html:not(.hs-flow) #s2 .v9b-jd-line,html:not(.hs-flow) #s2 .v9b-tune-meta-hint{contain:inline-size;}
  html:not(.hs-flow) #s2 .v9b-tune-meta-hint{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  html:not(.hs-flow) #s2 .v9b-wbar{width:64px;}
  /* step 1: Industry and Hard skills take their own rows instead of clipping
     (the step body is 20px taller to hold them) */
  html:not(.hs-flow) #s2 .v9b-context-strip{flex-wrap:wrap;row-gap:10px;}
  html:not(.hs-flow) #s2 .v9b-ctx-div{display:none;}
  html:not(.hs-flow) #s2 .v9b-ctx-col:last-child,html:not(.hs-flow) #s2 .v9b-jd-tile:last-child{min-width:100% !important;}
}
/* Portrait tablets in deck mode (768-980): the copilot rail moves under the step body,
   so the window keeps a readable zoom beside a 220px+ copy column. Below 1024 the page
   currently always loads as hs-flow, so this only applies if that gate changes. */
@media (min-width:768px) and (max-width:980px){
  html:not(.hs-flow) #s2 .app-win{min-width:400px;}
  html:not(.hs-flow) #s2 .v9b-body{flex-direction:column;height:auto;}
  html:not(.hs-flow) #s2 .v9b-main{flex:none;height:375px;}
  html:not(.hs-flow) #s2 .v9b-copilot{width:auto;height:150px;border-left:0;border-top:1px solid var(--bdr);}
}
/* COPY-2 — bullets are a caption track for the demo beside them: each one lights
   (rose core, bone text) at the beat that proves it. Unlit text stays var(--on-3),
   which is AA on the forest, so nothing is ever hard to read. */
.fc-dot{
  width:17px;height:17px;border-radius:50%;
  background:transparent;border:1.5px solid rgba(251,251,251,.3);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;
  transition:border-color .3s ease;
}
.fc-dot::after{content:'';width:7px;height:7px;border-radius:50%;background:#CE7B91;
  transform:scale(0);transition:transform .3s cubic-bezier(.16,1,.3,1);}
.fc-bullet > span{transition:color .3s ease;}
.fc-bullet.is-lit .fc-dot{border-color:rgba(224,150,170,.75);}
.fc-bullet.is-lit .fc-dot::after{transform:scale(1);}
.fc-bullet.is-lit > span{color:var(--on);}
/* Flow layout (phones, reduced motion) has no demo to sync with: show every bullet lit */
.slide.m-flow .fc-dot{border-color:rgba(224,150,170,.75);}
.slide.m-flow .fc-dot::after{transform:scale(1);transition:none;}
@media(prefers-reduced-motion:reduce){
  .fc-dot{border-color:rgba(224,150,170,.75);}
  .fc-dot::after{transform:scale(1);transition:none;}
}
.fc-right{flex:1;padding-left:56px;}

/* ── Stage backdrop — sharp rectangle that visually separates the browser from the text on the left ── */
/* A faint bone-on-forest plate with sharp corners; sits behind the browser window. */
.win-stage{
  position:relative;
  width:100%;max-width:1044px;
  display:flex;justify-content:center;align-items:center;
  padding:32px;
  background:
    linear-gradient(140deg, rgba(251,251,251,.10) 0%, rgba(218,226,223,.06) 55%, rgba(251,251,251,.02) 100%);
  border-radius:0;          /* sharp corners — intentional */
  isolation:isolate;
}
/* BIGWIN — on the desktop deck the BIGWIN script below the slides pins the copy
   column at its normal width, then adds .is-big: a thinner plate margin, so the
   window (zoomed ~9%, layout zoom, so text stays crisp) grows inside the same stage. */
.win-stage.is-big{padding:16px;}
/* Removed: the ink top-left + rose bottom-right "editorial structure"
   accents that used to sit on .win-stage. They read as a subtle
   multi-colored border around the dossier and the user wanted them gone. */
.tc-win-stage{
  position:relative;
  display:block;
  padding:24px 26px 28px;
  margin-top:18px;
  background:
    linear-gradient(140deg, rgba(251,251,251,.10) 0%, rgba(218,226,223,.06) 55%, rgba(251,251,251,.02) 100%);
  border-radius:0;
  isolation:isolate;
  max-width:800px;
}
/* tc-win-stage corner accents removed for the same reason as .win-stage. */

/* ── App window — a light card on the forest (like the pricing cards). Opaque, no
   backdrop blur; the shadow is deep enough to lift it off the dark green. ── */
.app-win{
  width:100%;max-width:980px;
  background:#FCFAFA;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.3);
  box-shadow:0 32px 80px rgba(6,14,12,.42),0 6px 18px rgba(6,14,12,.22),
             inset 0 1px 0 rgba(255,255,255,.6);
  overflow:hidden;transition:all .3s cubic-bezier(.4,0,.2,1);
  will-change:transform;
}
.app-win:hover{box-shadow:0 36px 90px rgba(6,14,12,.48),0 6px 20px rgba(6,14,12,.26),inset 0 1px 0 rgba(255,255,255,.7);}
/* PERF-1 — GSAP drives opacity/transform on the s1/s2 windows, so the CSS transition
   there is limited to the hover shadow. */
#s1 .app-win,#s2 .app-win{
  transition:box-shadow .3s cubic-bezier(.4,0,.2,1);
}
/* Infinite keyframes (shimmer, dot pulses, spinner) stop while their slide is hidden */
#s1:not(.on):not(.m-flow) *,#s2:not(.on):not(.m-flow) *{animation-play-state:paused !important;}

/* -- S3 Live Demo -- animated two-pane grid replica -- */
#s3-live-demo{background:#fff;border-radius:16px;box-shadow:0 48px 96px rgba(27,27,31,.13),0 16px 36px rgba(27,27,31,.09),0 4px 10px rgba(27,27,31,.06);overflow:hidden;max-width:980px;width:100%;display:flex;flex-direction:column;transition:box-shadow .35s ease,transform .35s ease;}
#s3-live-demo:hover{box-shadow:0 56px 112px rgba(27,27,31,.16),0 20px 44px rgba(27,27,31,.11),0 6px 14px rgba(27,27,31,.07);transform:translateY(-3px);}
.demo-chrome{display:flex;align-items:center;gap:6px;padding:10px 14px;border-bottom:1px solid rgba(201,194,195,.5);background:rgba(250,250,249,.95);}
.demo-chrome-dots{display:flex;gap:5px;}
.demo-chrome-dot{width:10px;height:10px;border-radius:50%;}
.demo-chrome-url{flex:1;text-align:center;font-family:'Space Mono','Space Mono Fallback',monospace;font-size:10px;color:#73716E;background:rgba(201,194,195,.4);border-radius:5px;padding:3px 10px;margin:0 8px;}
.demo-body{display:flex;height:420px;}
.demo-left{width:38%;border-right:1px solid #C9C2C3;display:flex;flex-direction:column;background:#fff;}
.demo-list-header{display:flex;align-items:center;justify-content:space-between;padding:7px 10px 6px;border-bottom:1px solid #DAE2DF;flex-shrink:0;}
.demo-list-header-label{font-family:'Space Mono','Space Mono Fallback',monospace;font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#73716E;}
.demo-list-hint{font-size:9px;color:#B6B4B0;font-family:'Inter Tight','Inter Tight Fallback',sans-serif;}
.demo-list{flex:1;overflow:hidden;display:flex;flex-direction:column;position:relative;}
.demo-row{display:flex;align-items:center;gap:7px;padding:7px 8px 7px 6px;border-left:3px solid transparent;border-bottom:1px solid #DAE2DF;background:#fff;opacity:0;transform:translateX(-16px);flex-shrink:0;}
.demo-row:last-child{border-bottom:none;}
.demo-row.demo-entered{opacity:1;transform:translateX(0);transition:opacity 300ms cubic-bezier(.16,1,.3,1),transform 300ms cubic-bezier(.16,1,.3,1);}
.demo-row.demo-active{border-left-color:#CE7B91;background:#F2E5E2;border-bottom-color:#E5D5D2;}
@keyframes demo-shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
.demo-ring-skeleton{width:34px;height:34px;border-radius:50%;flex-shrink:0;background:linear-gradient(90deg,#C9C2C3 25%,#DAE2DF 50%,#C9C2C3 75%);background-size:200% 100%;animation:demo-shimmer 1.4s ease-in-out infinite;}
.demo-ring-svg{display:none;flex-shrink:0;}
.demo-row.demo-scored .demo-ring-skeleton{display:none;}
.demo-row.demo-scored .demo-ring-svg{display:block;}
.demo-grade{display:none;font-family:'Space Mono','Space Mono Fallback',monospace;font-size:8px;font-weight:700;padding:1px 4px;border-radius:3px;transform:scale(0);transition:transform 200ms cubic-bezier(.34,1.56,.64,1);}
.demo-row.demo-scored .demo-grade{display:inline-flex;transform:scale(1);}
.demo-grade-a{background:#E1F0E8;color:#3D6F50;}
.demo-grade-b{background:#FAF3DD;color:#7A5C28;}
.demo-grade-c{background:#F2E5E2;color:#A8442D;}
.demo-grade-d{background:#F4E2DD;color:#A8442D;}
.demo-row-info{flex:1;min-width:0;}
.demo-row-name{font-family:'Inter Tight','Inter Tight Fallback',sans-serif;font-size:11px;font-weight:600;color:#1B1B1F;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.demo-row-meta{display:flex;align-items:center;gap:4px;margin-top:1px;}
.demo-chip{font-size:8px;font-weight:600;padding:1px 5px;border-radius:999px;white-space:nowrap;}
.demo-chip-strong{background:#E1F0E8;color:#3D6F50;border:1px solid #A0CBB1;}
.demo-chip-maybe{background:#FAF3DD;color:#7A5C28;border:1px solid #E8DFC0;}
.demo-chip-skip{background:#F4E2DD;color:#A8442D;border:1px solid #E5C0BA;}
.demo-traj{font-size:11px;flex-shrink:0;}
.demo-traj-up{color:#5B9E7E;}
.demo-traj-flat{color:#B5853A;}
.demo-traj-down{color:#A8442D;}
.demo-right{width:62%;background:#FBFBFB;overflow-y:auto;position:relative;scrollbar-width:thin;scrollbar-color:#C9C2C3 transparent;}
.demo-right::-webkit-scrollbar{width:5px;}
.demo-right::-webkit-scrollbar-thumb{background:#C9C2C3;border-radius:3px;}
.demo-detail-block{opacity:0;display:none;transition:opacity 150ms ease;}
.demo-detail-block.demo-detail-visible{display:block;opacity:1;}
.demo-detail-header{padding:11px 13px 9px;border-bottom:1px solid #C9C2C3;}
.demo-detail-name{font-family:'Fraunces','Fraunces Fallback','Fraunces Fallback Android',serif;font-size:15px;color:#5C5C60;line-height:1.2;}
.demo-detail-role{font-family:'Inter Tight','Inter Tight Fallback',sans-serif;font-size:9.5px;color:#73716E;margin-top:2px;}
.demo-score-circle{width:44px;height:44px;border-radius:50%;background:#CE7B91;box-shadow:0 2px 8px rgba(206,123,145,.3);display:flex;flex-direction:column;align-items:center;justify-content:center;flex-shrink:0;}
.demo-score-num{font-family:'Space Mono','Space Mono Fallback',monospace;font-size:13px;font-weight:700;color:#fff;line-height:1;}
.demo-score-grade-lbl{font-size:8px;color:rgba(255,255,255,.9);font-weight:700;line-height:1;}
.demo-score-section{padding:9px 13px;border-bottom:1px solid #C9C2C3;}
.demo-section-label{font-family:'Space Mono','Space Mono Fallback',monospace;font-size:8px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#73716E;margin-bottom:7px;}
.demo-rings-row{display:flex;align-items:center;gap:10px;}
.demo-ring-legend{display:flex;flex-direction:column;gap:6px;flex:1;max-width:230px;opacity:0;transition:opacity 200ms ease;flex-shrink:0;}
.demo-ring-legend.demo-legend-visible{opacity:1;}
.demo-legend-dot{width:7px;height:7px;border-radius:50%;display:block;}
.demo-legend-label{font-family:'Inter Tight','Inter Tight Fallback',sans-serif;font-size:10px;color:#3F3F44;white-space:nowrap;}
.demo-legend-num{font-family:'Space Grotesk','Space Grotesk Fallback',sans-serif;font-size:10.5px;font-weight:600;color:#1B1B1F;font-variant-numeric:tabular-nums;text-align:right;}
.demo-action-btns{display:flex;gap:6px;padding:8px 13px;border-top:1px solid #EEE9E9;opacity:0;transform:translateY(6px);transition:opacity 200ms ease,transform 260ms cubic-bezier(.16,1,.3,1);}
.demo-action-btns.demo-btns-visible{opacity:1;transform:none;}
.demo-btn-shortlist{display:inline-flex;align-items:center;justify-content:center;padding:0 10px;height:26px;border-radius:6px;border:1px solid #CE7B91;background:#CE7B91;color:#fff;font-family:'Inter Tight','Inter Tight Fallback',sans-serif;font-size:9px;font-weight:600;white-space:nowrap;cursor:default;}
.demo-btn-profile{display:inline-flex;align-items:center;justify-content:center;padding:0 10px;height:26px;border-radius:6px;border:1px solid #C9C2C3;background:#fff;color:#5C5C60;font-family:'Inter Tight','Inter Tight Fallback',sans-serif;font-size:9px;font-weight:600;white-space:nowrap;cursor:default;}
.demo-reasoning-block{padding:8px 13px;border-bottom:1px solid #C9C2C3;opacity:0;transition:opacity 200ms ease;}
.demo-reasoning-block.demo-reasoning-visible{opacity:1;}
.demo-reasoning-text{font-family:'Inter Tight','Inter Tight Fallback',sans-serif;font-size:9px;color:#5C5C60;line-height:1.55;border-left:2px solid #DAE2DF;padding-left:8px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.demo-traj-block{padding:8px 13px 10px;opacity:0;transition:opacity 200ms ease;}
.demo-traj-block.demo-traj-visible{opacity:1;}
.demo-arc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-top:5px;}
.demo-arc-card{text-align:center;padding:5px 3px;border-radius:6px;background:#DAE2DF;border:1px solid #C9C2C3;}
.demo-arc-label{font-size:7px;color:#9F9D9A;font-family:'Inter Tight','Inter Tight Fallback',sans-serif;letter-spacing:.02em;text-transform:uppercase;margin-bottom:2px;}
.demo-arc-value{font-family:'Fraunces','Fraunces Fallback','Fraunces Fallback Android',serif;font-size:13px;font-weight:700;line-height:1;}
.demo-score-section,.demo-reasoning-block,.demo-traj-block{position:relative;}
/* Section spotlight pill — pops up on each section as it reveals */
.demo-spotlight-pill{
  position:absolute;top:7px;right:9px;
  display:inline-flex;align-items:center;gap:3px;
  padding:2px 8px 2px 6px;border-radius:999px;
  background:rgba(206,123,145,.1);border:1px solid rgba(206,123,145,.28);
  color:#CE7B91;font-family:'Space Mono','Space Mono Fallback',monospace;font-size:7px;font-weight:700;
  white-space:nowrap;pointer-events:none;
  opacity:0;transform:translateY(-5px) scale(.9);
  transition:opacity 220ms cubic-bezier(.16,1,.3,1),transform 220ms cubic-bezier(.16,1,.3,1);
  z-index:10;
}
.demo-spotlight-pill.demo-pill-visible{opacity:1;transform:translateY(0) scale(1);}
@keyframes demo-section-flush{
  0%{background:transparent;}
  25%{background:rgba(206,123,145,.05);}
  65%{background:rgba(206,123,145,.05);}
  100%{background:transparent;}
}
.demo-section-flushed{animation:demo-section-flush 1100ms ease forwards;}
/* S3-1 — scoring moment: shortlist line, pending pane, sort travel */
.demo-cutline{position:absolute;left:0;right:0;top:var(--cut,196px);height:0;border-top:1px dashed #B05A72;transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.16,1,.3,1);z-index:3;pointer-events:none;}
.demo-cutline span{position:absolute;right:8px;top:-8px;font:700 8.5px/1 'Space Mono','Space Mono Fallback',monospace;letter-spacing:.06em;text-transform:uppercase;color:#B05A72;background:#fff;padding:2px 6px;border-radius:99px;border:1px solid rgba(176,90,114,.25);opacity:0;transition:opacity .25s ease .2s;}
.demo-list.is-ranked .demo-cutline{transform:none;}
.demo-list.is-ranked .demo-cutline span{opacity:1;}
.demo-row.demo-entered{transition:opacity 300ms cubic-bezier(.16,1,.3,1),transform 300ms cubic-bezier(.16,1,.3,1),translate .7s cubic-bezier(.65,0,.35,1);}
.demo-list.is-ranked .demo-row.demo-below:not(.demo-active){opacity:.55;}
.demo-row.demo-moving{position:relative;z-index:2;}
.demo-sl-dot{display:inline-block;vertical-align:middle;margin:-2px 0 0 5px;width:6px;height:6px;border-radius:50%;background:#5B9E7E;flex-shrink:0;opacity:0;transform:scale(.4);transition:opacity .25s ease,transform .35s cubic-bezier(.16,1,.3,1);}
.demo-row.demo-shortlisted .demo-sl-dot{opacity:1;transform:none;}
/* Pending pane: a skeleton with the detail block's geometry (header, rings + legend,
   reasoning, trajectory, buttons), so the scores fill in where the placeholders sat. */
.demo-pending{position:absolute;inset:0;display:block;padding:0;transition:opacity .15s ease;pointer-events:none;}
.dp-shimmer{display:block;height:7px;border-radius:3px;background:linear-gradient(90deg,#ECE6E6 25%,#F5F2F2 50%,#ECE6E6 75%);background-size:200% 100%;animation:shimmerSm 1.5s ease-in-out infinite;}
.dp-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:11px 13px 9px;border-bottom:1px solid #ECE6E6;}
.dp-head-l{flex:1;min-width:0;}
.dp-head{transition:opacity .3s cubic-bezier(.16,1,.3,1);}
.dp-status{display:flex;align-items:center;gap:6px;height:11px;margin-bottom:3px;font-family:'Space Mono','Space Mono Fallback',monospace;font-size:9px;line-height:11px;color:#73716E;letter-spacing:.04em;white-space:nowrap;}
.dp-status::before{content:'';width:6px;height:6px;border-radius:50%;background:#CE7B91;flex-shrink:0;animation:dp-pulse 1.2s ease-in-out infinite alternate;}
@keyframes dp-pulse{from{opacity:.3}to{opacity:1}}
.dp-name{width:118px;height:14px;border-radius:4px;}
.dp-role{width:160px;max-width:100%;height:8px;margin-top:3px;}
.dp-chip{width:64px;height:12px;border-radius:999px;margin-top:4px;}
.dp-circle{width:44px;height:44px;border-radius:50%;background:#ECE6E6;flex-shrink:0;}
.dp-lbl{margin:3px 0 9px;}
.dp-score{padding:9px 13px;border-bottom:1px solid #ECE6E6;}
.dp-row{display:flex;align-items:center;gap:18px;}
.dp-rings{position:relative;width:124px;height:124px;flex-shrink:0;}
.dp-rings svg{display:block;}
.dp-sweep{transform-origin:60px 60px;animation:dp-spin 1.6s linear infinite;}
@keyframes dp-spin{to{transform:rotate(360deg);}}
.dp-center{position:absolute;left:49px;top:56px;width:26px;height:12px;border-radius:3px;}
.dp-legend{display:flex;flex-direction:column;gap:6px;flex:1;max-width:230px;}
.dp-lg{display:grid;grid-template-columns:8px 1fr 22px;column-gap:6px;align-items:center;height:13px;}
.dp-lg i{width:7px;height:7px;border-radius:50%;background:#ECE6E6;}
.dp-lg .dp-shimmer{height:8px;}
.dp-reason{padding:8px 13px;border-bottom:1px solid #ECE6E6;}
.dp-quote{display:flex;flex-direction:column;gap:3.5px;border-left:2px solid #DAE2DF;padding-left:8px;}
.dp-traj{padding:8px 13px 10px;}
.dp-arcs{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;}
.dp-arc{height:35px;border-radius:6px;background:#F1EFEF;}
.dp-btns{display:flex;gap:6px;padding:8px 13px;border-top:1px solid #EEE9E9;}
.dp-btns .dp-shimmer{height:26px;border-radius:6px;}
/* the pane sits quiet while resumes are read, then comes up block by block as the list ranks */
.dp-head-l .dp-shimmer,.dp-circle,.dp-score,.dp-reason,.dp-traj,.dp-btns{opacity:.7;transition:opacity .3s cubic-bezier(.16,1,.3,1);}
.demo-pending.dp-in .dp-head-l .dp-shimmer,.demo-pending.dp-in .dp-circle,.demo-pending.dp-in .dp-score,
.demo-pending.dp-in .dp-reason,.demo-pending.dp-in .dp-traj,.demo-pending.dp-in .dp-btns{opacity:1;}
.demo-pending.dp-in .dp-score{transition-delay:.08s;}
.demo-pending.dp-in .dp-reason{transition-delay:.16s;}
.demo-pending.dp-in .dp-traj{transition-delay:.24s;}
.demo-pending.dp-in .dp-btns{transition-delay:.3s;}
/* A candidate opens: its header and rings take over at once; the reasoning, trajectory
   and button placeholders stay until those sections of the visible detail render. */
#s3-live-demo.has-detail .dp-head,#s3-live-demo.has-detail .dp-score{opacity:0;transition-delay:0s;}
#s3-live-demo.has-detail:has(.demo-detail-visible .demo-reasoning-visible) .dp-reason,
#s3-live-demo.has-detail:has(.demo-detail-visible .demo-traj-visible) .dp-traj,
#s3-live-demo.has-detail:has(.demo-detail-visible .demo-btns-visible) .dp-btns{opacity:0;transition-delay:0s;}
@supports not selector(:has(a)){ #s3-live-demo.has-detail .demo-pending{opacity:0;} }
.demo-body{position:relative;}
/* S3-2 — readable breakdown: centre readout, legend rows that light in sync */
.demo-rings-row{gap:18px;}
.demo-lg-row{display:grid;grid-template-columns:8px 1fr 22px;column-gap:7px;align-items:center;opacity:.35;transition:opacity .2s ease;}
.demo-lg-row.on{opacity:1;}
.demo-btn-shortlist{transition:transform .12s ease,background-color .25s ease,border-color .25s ease;}
.demo-btn-shortlist.is-pressed{transform:scale(.96);}
/* the ink-gradient button rule further down uses !important, so the done state needs it too */
#s3-live-demo .demo-btn-shortlist.is-done{background:#3D7A5E!important;border-color:#3D7A5E;color:#fff;box-shadow:0 2px 8px rgba(61,122,94,.3)!important;}
/* the cursor reaches Shortlist: a rose halo. The ink rule's box-shadow is !important
   (it beats an animation), so the halo runs on a pseudo-element instead. */
.demo-btn-shortlist{position:relative;}
.demo-btn-shortlist.is-hot{transform:translateY(-1px);}
.demo-btn-shortlist.is-hot.is-pressed{transform:translateY(-1px) scale(.96);}
.demo-btn-shortlist.is-hot::after{content:'';position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;animation:dp-hot 900ms cubic-bezier(.16,1,.3,1) 2;}
@keyframes dp-hot{0%{box-shadow:0 0 0 0 rgba(206,123,145,.55)}100%{box-shadow:0 0 0 9px rgba(206,123,145,0)}}
/* S2 win-criteria — brief pop when scrolled into view */
@keyframes s2-win-pop{
  0%{transform:translateY(0) scale(1);}
  35%{transform:translateY(-6px) scale(1.015);}
  100%{transform:translateY(0) scale(1);}
}
.s2-win-popped{animation:s2-win-pop 560ms cubic-bezier(.22,1,.36,1) forwards;}
@media(prefers-reduced-motion:reduce){
  .demo-row,.demo-grade,.demo-detail-block,.demo-ring-legend,.demo-action-btns,
  .demo-reasoning-block,.demo-traj-block,.demo-spotlight-pill,.demo-section-flushed,
  .demo-cutline,.demo-cutline span,.demo-lg-row,.demo-pending,.demo-sl-dot,
  .s2-win-popped{transition:none!important;animation:none!important;}
  .demo-ring-skeleton,.dp-shimmer,.dp-status::before,.dp-sweep,
  .demo-btn-shortlist.is-hot::after{animation:none!important;}
  .dp-head,.dp-head-l .dp-shimmer,.dp-circle,.dp-score,.dp-reason,.dp-traj,.dp-btns{transition:none!important;}
}
.win-bar{display:flex;align-items:center;gap:6px;padding:11px 14px;border-bottom:1px solid rgba(201,194,195,.5);background:rgba(250,250,249,.85);}
.wd{width:11px;height:11px;border-radius:50%;}
.win-url{
  flex:1;text-align:center;font-family:'Space Mono','Space Mono Fallback',monospace;font-size:11px;color:var(--mute);
  background:rgba(201,194,195,.45);border-radius:6px;padding:4px 10px;margin:0 8px;
}
.win-body{height:420px;position:relative;overflow:hidden;}
/* Deck windows end where their content does, not on a fixed 420px floor. s1: the tallest
   state (the language cards) ends at 370px, so 394px leaves the same 24px as the top
   padding (below 1100 its cards wrap taller and keep 420px). s2: the pill row plus the
   355px step body (412px). The hero handoff reads #win1-body's size at runtime. */
@media(min-width:1100px){html:not(.hs-flow) #win1-body{height:394px;}}
html:not(.hs-flow) #s2 .win-body{height:auto;}
.g-panel{padding:24px 26px;}

/* ── Floating chips — sit below the app window ── */
.fc-right{display:flex;flex-direction:column;gap:12px;align-items:flex-end;}
.chips-layer{
  display:flex;gap:8px;flex-wrap:wrap;justify-content:center;
  width:100%;pointer-events:none;
}
.label-chip{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(255,255,255,.82);border:1px solid rgba(255,255,255,.5);
  border-radius:100px;padding:5px 12px;font-size:10px;font-weight:600;color:var(--txt);
  backdrop-filter:blur(16px) saturate(1.4);
  box-shadow:0 2px 10px rgba(27,27,31,.07),inset 0 1px 0 rgba(255,255,255,.6);
  white-space:nowrap;transition:all .2s;
}
.label-chip:hover{background:#fff;box-shadow:0 4px 16px rgba(27,27,31,.1);transform:translateY(-1px);}
.chip-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;}

/* Panel 0: Upload */
.p0-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;}
.p0-h{font-family:'Fraunces','Fraunces Fallback','Fraunces Fallback Android',serif;font-size:19px;color:var(--txt);}
.p0-newbtn{font-size:12px;font-weight:600;padding:7px 16px;border-radius:7px;background:var(--p);color:#fff;cursor:pointer;border:none;}
.dz{border:2px dashed rgba(206,123,145,.32);border-radius:12px;padding:36px 20px;text-align:center;background:rgba(206,123,145,.03);margin-bottom:12px;animation:dzpulse 3s ease-in-out infinite;}
@keyframes dzpulse{0%,100%{border-color:rgba(206,123,145,.28)}50%{border-color:rgba(206,123,145,.7)}}
.dz-icon{font-size:34px;margin-bottom:8px;}
.dz-t{font-size:13px;font-weight:600;color:var(--txt);margin-bottom:3px;}
.dz-s{font-size:11px;color:var(--mute);margin-bottom:14px;}
.dz-btn{font-size:11px;font-weight:600;padding:8px 18px;border-radius:100px;background:var(--p);color:#fff;cursor:pointer;border:none;}
.parse-row{display:flex;align-items:center;gap:9px;padding:9px 11px;background:rgba(91,158,126,.06);border-radius:7px;border:1px solid rgba(91,158,126,.16);}
.parse-dot{width:7px;height:7px;border-radius:50%;background:var(--ok);animation:kpulse 1.4s ease-in-out infinite;}
.parse-t{font-size:11px;font-weight:600;color:var(--ok);}
.parse-f{font-size:10px;color:var(--mute);margin-left:auto;font-family:'Space Mono','Space Mono Fallback',monospace;}

/* ── Dashboard mockup (Slide 1 realistic) ── */
.dash-btn-outline{
  font-size:8px;font-weight:600;padding:3px 8px;border-radius:7px;
  border:1px solid var(--bdr);color:var(--txt);background:transparent;
  display:flex;align-items:center;gap:3px;white-space:nowrap;
}
.dash-btn-fill{
  font-size:8px;font-weight:600;padding:3px 8px;border-radius:7px;
  background:var(--p);color:#fff;white-space:nowrap;
}
.dash-stat{
  background:#fff;border-radius:10px;padding:8px 10px;
  border:1px solid var(--bdr);
}
.dash-stat-label{font-size:9px;color:var(--mute);}
.dash-stat-num{font-family:'Space Mono','Space Mono Fallback',monospace;font-size:20px;color:var(--txt);margin-top:2px;}
.dash-job-card{
  background:#fff;border-radius:10px;border:1px solid var(--bdr);
  overflow:hidden;transition:opacity .4s,transform .4s;
  display:flex;flex-direction:column;
  min-height:96px;
}
.djc-bar{height:3px;background:linear-gradient(135deg,var(--p),var(--sec));flex-shrink:0;}
.djc-body{padding:10px 11px 9px;display:flex;flex-direction:column;flex:1;}
.djc-head{display:flex;justify-content:space-between;align-items:flex-start;gap:4px;margin-bottom:5px;}
.djc-title{font-size:10.5px;font-weight:700;color:var(--txt);line-height:1.2;}
.djc-badge{
  flex-shrink:0;font-family:'Space Mono','Space Mono Fallback',monospace;font-size:8px;
  padding:2px 6px;border-radius:100px;white-space:nowrap;
  background:rgba(206,123,145,.12);color:var(--p2);
}
.djc-badge-active{background:rgba(206,123,145,.18);color:var(--p);}
.djc-desc{font-size:8.5px;color:var(--mute);line-height:1.45;margin-bottom:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.djc-foot{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:7px;}
.djc-date{font-size:8px;color:var(--mute);}
.djc-actions{display:flex;gap:4px;}
.djc-act-upload{
  font-size:8px;font-weight:600;padding:3px 7px;border-radius:4px;
  background:rgba(27,27,31,.08);color:var(--sec);
}
.djc-act-results{
  font-size:8px;font-weight:600;padding:3px 7px;border-radius:4px;
  background:rgba(206,123,145,.1);color:var(--p);
}
/* Skeleton cards */
.dash-skeleton-card{
  background:#fff;border-radius:10px;border:1px solid var(--bdr);overflow:hidden;
  display:flex;flex-direction:column;
  min-height:96px;
}
.dsk-bar{height:3px;width:100%;flex-shrink:0;}
.dsk-body{padding:10px 11px 9px;display:flex;flex-direction:column;flex:1;}
.dsk-row{display:flex;justify-content:space-between;align-items:center;}
.dsk-block{height:8px;border-radius:3px;}
.w60{width:60%}.w80{width:80%}.w100{width:100%}.w20{width:20%}
@keyframes shimmerSm{0%{background-position:-200% 0}100%{background-position:200% 0}}
/* Skeleton loops on slides that are not showing keep repainting for nothing. */
.slide:not(.on):not(.m-flow) [class*=shimmer],
.slide:not(.on):not(.m-flow) .demo-ring-skeleton,
.slide:not(.on):not(.m-flow) .dp-sweep,
.slide:not(.on):not(.m-flow) .dp-status::before,
.slide:not(.on):not(.m-flow) .kicker-dot{animation-play-state:paused;}
.skeleton-shimmer-sm{
  background:linear-gradient(90deg,#C9C2C3 25%,#F0EAE0 50%,#C9C2C3 75%);
  background-size:200% 100%;
  animation:shimmerSm 1.5s ease-in-out infinite;
}
/* Mouse click indicator */
.click-indicator{
  position:absolute;width:28px;height:28px;border-radius:50%;
  border:2px solid var(--p);background:rgba(206,123,145,.12);
  pointer-events:none;z-index:20;
  opacity:0;transform:scale(0);
}
.click-indicator.show{
  animation:clickPulse .6s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes clickPulse{
  0%{opacity:1;transform:scale(0)}
  40%{opacity:1;transform:scale(1)}
  100%{opacity:0;transform:scale(1.5)}
}
.click-indicator::after{
  content:'';position:absolute;inset:6px;border-radius:50%;background:var(--p);
}

/* Reveal slot: skeleton + real card stacked */
.reveal-slot{position:relative;display:flex;flex-direction:column;}
.reveal-slot .skel-layer{position:relative;z-index:2;flex:1;}
.reveal-slot .real-layer{
  position:absolute;inset:0;z-index:1;
  transition:none; /* GSAP handles animation */
}
.reveal-slot.revealed .skel-layer{opacity:0;pointer-events:none;}
.reveal-slot.revealed .real-layer{z-index:2;}

/* Indic language banner inside the simulated dashboard */
.indic-banner{
  background:linear-gradient(135deg,rgba(206,123,145,.09) 0%,rgba(218,226,223,.06) 100%);
  border:0;
  border-radius:7px;padding:6px 10px;margin-bottom:9px;
  display:grid;
}
.indic-set{grid-area:1/1;display:flex;align-items:center;gap:6px;opacity:0;pointer-events:none;}
.indic-banner:not([data-set="world"]) .indic-set[data-set="indic"],
.indic-banner[data-set="world"] .indic-set[data-set="world"]{opacity:1;pointer-events:auto;}
.indic-banner-label{
  font-size:8px;font-family:'Inter Tight','Inter Tight Fallback',sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:.07em;color:var(--p);white-space:nowrap;
}
.indic-lang-pill{
  display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;border-radius:50%;
  font-size:9px;font-weight:700;
  background:rgba(206,123,145,.12);color:var(--p);
  border:0;
}
#win1-body [lang=ja],#win1-body [lang=ar],#win1-body [lang=zh]{
  font-family:'Inter Tight','Inter Tight Fallback','Noto Sans','Nirmala UI','Segoe UI','Yu Gothic UI','Hiragino Sans','Noto Sans JP','Noto Sans Arabic','Segoe UI Historic',system-ui,sans-serif;
  unicode-bidi:isolate;
}
/* the shared stack has no Simplified Chinese face before Yu Gothic UI, so zh text would take Japanese glyph forms */
#win1-body [lang=zh]{font-family:'Inter Tight','Inter Tight Fallback','Microsoft YaHei','PingFang SC','Noto Sans SC','Noto Sans CJK SC',system-ui,sans-serif;}
#indic-stat-jobs{position:relative;overflow:hidden;}
/* Small language tag inside a job card title */
.lang-tag{
  display:inline-block;vertical-align:middle;
  font-size:6.5px;font-family:'Inter Tight','Inter Tight Fallback',sans-serif;font-weight:600;
  padding:1px 4px;border-radius:3px;
  background:rgba(206,123,145,.1);color:var(--p);
  margin-left:3px;letter-spacing:.03em;white-space:nowrap;
}

/* ── S1-1 "New job" paste sheet: one paste, a scan line reads it, signals land in the
   tray, the sheet collapses into job card #42. Transform/opacity only (GSAP). ── */
#win1-body .dash-job-card{transition:none;}
.jd-sheet{
  position:absolute;left:44px;right:44px;top:66px;z-index:5;
  background:#fff;border:1px solid var(--bdr);border-radius:12px;overflow:hidden;
  box-shadow:0 18px 40px rgba(27,27,31,.10),0 2px 6px rgba(27,27,31,.05);
  opacity:0;transform:translateY(110%);will-change:transform,opacity;
}
.jd-sheet-in{display:flex;flex-direction:column;gap:12px;padding:16px 18px 14px;box-sizing:border-box;}
.jd-head{display:flex;align-items:baseline;gap:10px;}
.jd-title{font-family:'Fraunces','Fraunces Fallback','Fraunces Fallback Android',serif;font-size:15px;color:var(--txt);}
.jd-sub{font-size:9px;color:var(--mute);}
.jd-kbd{
  margin-left:auto;align-self:center;font-family:'Space Mono','Space Mono Fallback',monospace;font-size:9px;color:var(--sec);
  border:1px solid var(--bdr);border-radius:4px;padding:1px 6px;background:#FBFBFB;opacity:0;
}
.jd-box{position:relative;border:1px dashed var(--bdr);border-radius:8px;padding:12px 14px;min-height:112px;background:#FCFBFB;}
.jd-box.is-filled{border-style:solid;background:#fff;}
.jd-ph{position:absolute;left:14px;top:12px;font-size:11px;font-style:italic;color:var(--mute);}
.jd-box.is-filled .jd-ph{opacity:0;}
.jd-text{font-size:11.5px;line-height:1.7;color:var(--sec);opacity:0;}
.jd-text p{margin:0 0 5px;}
.jd-hit{background:none;color:inherit;position:relative;isolation:isolate;transition:color .3s ease;}
.jd-hit::before{
  content:'';position:absolute;inset:-1px -2px;border-radius:3px;z-index:-1;
  background:rgba(206,123,145,.18);transform:scaleX(0);transform-origin:left;
  transition:transform .32s cubic-bezier(.16,1,.3,1);
}
.jd-hit.on{color:var(--txt);}
.jd-hit.on::before{transform:scaleX(1);}
.jd-scan{
  position:absolute;left:8px;right:8px;top:10px;height:2px;border-radius:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,#CE7B91 25%,#CE7B91 75%,transparent);opacity:0;
}
/* soft read-band trailing above the scan line, so it reads as a sweep, not a strike */
.jd-scan::before{content:'';position:absolute;left:0;right:0;bottom:2px;height:18px;
  background:linear-gradient(180deg,rgba(206,123,145,0),rgba(206,123,145,.10));}
.jd-tray{display:flex;align-items:center;gap:5px;flex-wrap:wrap;min-height:20px;}
.jd-tray-l{font-family:'Space Mono','Space Mono Fallback',monospace;font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin-right:4px;}
.jd-chip{
  font-size:9.5px;font-weight:600;padding:2px 8px;border-radius:100px;
  background:rgba(91,158,126,.1);color:#3D7A5E;border:1px solid rgba(91,158,126,.22);
  opacity:0;transform:translateY(4px);
}
.jd-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;}
.jd-ready{display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:600;color:#3D7A5E;opacity:0;}
.jd-ready i{width:6px;height:6px;border-radius:50%;background:#5B9E7E;}
.jd-create{
  font-size:10px;font-weight:600;padding:5px 13px;border-radius:100px;
  background:var(--p);color:#fff;opacity:.35;transition:opacity .25s ease,transform .12s ease;
}
.jd-create.is-ready{opacity:1;}
.jd-create.is-pressed{transform:scale(.95);}
/* Upright tablets: the window is narrowest here, the text wraps more and the sheet ran
   past the window's bottom edge, hiding Create job. A wider, tighter sheet fits. */
@media (min-width:768px) and (max-width:847px){
  .jd-sheet{left:18px;right:18px;}
  .jd-sheet-in{gap:9px;padding:13px 14px 12px;}
  .jd-box{min-height:0;padding:10px 12px;}
}
/* The job the visitor just created */
.dash-job-card.is-new .djc-bar{background:linear-gradient(135deg,#CE7B91,#B05A72);transform-origin:left;}
.djc-badge-ready{background:rgba(91,158,126,.12);color:#3D7A5E;}
.djc-id{font-family:'Space Mono','Space Mono Fallback',monospace;color:var(--txt);margin-right:5px;}
#s1 .dash-job-card.is-target{outline:1px solid rgba(206,123,145,.6);outline-offset:2px;}

/* Fake cursor for criteria demo */
#ct-cursor,#up-cursor{
  position:absolute;left:0;top:0;width:14px;height:14px;z-index:50;pointer-events:none;
  opacity:0;transition:opacity .3s;will-change:transform;
  /* SVG cursor arrow */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%235C5C60'%3E%3Cpath d='M5.5 3.21V20.8c0 .45.54.67.85.35l4.86-4.86a.5.5 0 0 1 .35-.15h6.87a.5.5 0 0 0 .35-.85L6.35 2.86a.5.5 0 0 0-.85.35z'/%3E%3C/svg%3E");
  background-size:contain;background-repeat:no-repeat;
}
#ct-cursor.visible,#up-cursor.visible{opacity:1;}
/* Shared fake cursor for the demo windows (s3 scoring, s4 insights) */
.hs-cursor{position:absolute;left:0;top:0;width:14px;height:14px;z-index:50;pointer-events:none;opacity:0;transform:translate(0,0);transition:opacity .25s ease,transform .45s cubic-bezier(.16,1,.3,1);will-change:transform;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%235C5C60'%3E%3Cpath d='M5.5 3.21V20.8c0 .45.54.67.85.35l4.86-4.86a.5.5 0 0 1 .35-.15h6.87a.5.5 0 0 0 .35-.85L6.35 2.86a.5.5 0 0 0-.85.35z'/%3E%3C/svg%3E");background-size:contain;background-repeat:no-repeat;}
.hs-cursor.visible{opacity:1;}
.hs-cursor.is-grab::after{content:'';position:absolute;left:-5px;top:-5px;width:22px;height:22px;border-radius:50%;border:1.5px solid rgba(206,123,145,.55);}
@media(prefers-reduced-motion:reduce){.hs-cursor{display:none;}}
/* Typing cursor blink */
.ct-type-cursor{display:inline-block;width:1px;height:8px;background:#5C5C60;margin-left:1px;animation:ctBlink .53s step-end infinite;}
@keyframes ctBlink{0%,100%{opacity:1}50%{opacity:0}}

/* Criteria panels */
.ct-panel{transition:opacity .35s ease;}
.ct-panel-active{opacity:1 !important;}
.ct-tab-btn{transition:all .3s ease;}
.ct-tab-active{background:rgba(255,255,255,.6) !important;border-left-color:currentColor;}
.ct-row-anim{opacity:0;transform:translateY(6px);transition:all .35s ease;}
.ct-row-anim.show{opacity:1;transform:none;}
.ct-subtree-divider{height:1px;background:var(--bdr);margin:10px 0 7px;}
.ct-subtree-hdr{font-size:8px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--mute);margin-bottom:5px;}
.ct-sub-parent{display:flex;align-items:center;gap:5px;padding:5px 8px;background:rgba(251,251,251,.8);border-radius:4px;border-left:2px solid currentColor;margin-bottom:4px;}
.ct-sub-child-row{display:flex;align-items:center;gap:4px;padding:3px 0 3px 10px;margin-bottom:3px;}
.ct-sub-arrow{font-size:8px;color:var(--bdr);flex-shrink:0;}
.ct-sub-child-lbl{font-size:8px;color:var(--sec);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ct-sub-track{width:48px;height:4px;background:var(--bdr);border-radius:2px;overflow:hidden;flex-shrink:0;}
.ct-sub-bar{height:100%;border-radius:2px;transition:width .8s cubic-bezier(.4,0,.2,1);}
.ct-sub-pct{font-size:8.5px;font-family:'Space Mono','Space Mono Fallback',monospace;font-weight:600;width:24px;text-align:right;flex-shrink:0;}

/* ════════════ V9b — 4-step Scoring Criteria flow (slide 2) ════════════ */
.v9b-pill-row{
  display:flex;align-items:center;gap:8px;padding:14px 18px 12px;
  border-bottom:1px solid var(--bdr);background:rgba(251,251,251,.55);
}
.v9b-pill{
  display:flex;align-items:center;gap:6px;padding:5px 11px 5px 7px;
  border:1px solid var(--bdr);background:transparent;
  border-radius:100px;font-size:11px;font-weight:500;color:var(--mute);
  opacity:.4;transition:all .35s cubic-bezier(.4,0,.2,1);white-space:nowrap;
}
.v9b-pill-num{
  width:18px;height:18px;border-radius:50%;background:rgba(201,194,195,.55);
  color:var(--mute);font-family:'Space Mono','Space Mono Fallback',monospace;font-size:10px;font-weight:600;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative;
  transition:background .25s ease,color .25s ease;
}
.v9b-pill-num-text{display:block;}
.v9b-pill-check{width:11px;height:11px;display:none;}
.v9b-pill-active{
  opacity:1;border-color:rgba(206,123,145,.32);background:rgba(206,123,145,.05);
  color:var(--p);font-weight:600;
}
.v9b-pill-active .v9b-pill-num{background:rgba(206,123,145,.12);color:var(--p);}
.v9b-pill-done{
  opacity:1;border-color:rgba(91,158,126,.32);background:rgba(91,158,126,.05);
  color:#5B9E7E;
}
.v9b-pill-done .v9b-pill-num{background:rgba(91,158,126,.15);color:#5B9E7E;}
.v9b-pill-done .v9b-pill-num-text{display:none;}
.v9b-pill-done .v9b-pill-check{display:block;animation:v9bCheckIn .22s cubic-bezier(.16,1,.3,1) both;}
@keyframes v9bCheckIn{from{transform:scale(.4);opacity:0;}to{transform:scale(1);opacity:1;}}

.v9b-body{
  display:flex;gap:0;padding:0;height:355px;
}
.v9b-main{
  flex:1;min-width:0;padding:16px 18px;position:relative;
  overflow:hidden;
}
.v9b-copilot{
  width:215px;flex-shrink:0;border-left:1px solid var(--bdr);
  background:rgba(251,251,251,.55);padding:0;display:flex;flex-direction:column;
  overflow:hidden;
}
.v9b-cp-tabs{
  display:flex;border-bottom:1px solid var(--bdr);padding:0 10px;gap:0;
  background:rgba(255,255,255,.6);
}
.v9b-cp-tab{
  flex:1;padding:9px 4px;text-align:center;font-size:10px;font-weight:500;
  color:var(--mute);cursor:pointer;border-bottom:2px solid transparent;
  transition:color .15s,border-color .15s,background .15s;
  display:flex;align-items:center;justify-content:center;gap:4px;position:relative;
}
.v9b-cp-tab:hover{color:var(--p);background:rgba(206,123,145,.04);}
.v9b-cp-tab-active{color:var(--p);border-bottom-color:var(--p);font-weight:600;}
.v9b-cp-dot{width:5px;height:5px;border-radius:50%;background:#5B9E7E;display:inline-block;animation:v9bDotPulse 1.8s ease-in-out infinite;}
@keyframes v9bDotPulse{0%,100%{opacity:1;}50%{opacity:.4;}}
.v9b-cp-badge{
  display:inline-flex;align-items:center;justify-content:center;
  width:13px;height:13px;border-radius:50%;background:#CE7B91;color:#fff;
  font-size:8px;font-weight:700;line-height:1;
  animation:v9bBadgePop .28s cubic-bezier(.16,1,.3,1) both;
}
@keyframes v9bBadgePop{from{transform:scale(.4);opacity:0;}to{transform:scale(1);opacity:1;}}
.v9b-cp-body{padding:12px 12px 10px;flex:1;overflow:hidden;}
.v9b-cp-panel{display:none;}
.v9b-cp-panel-active{display:block;animation:v9bFadeIn .25s ease-out;}
@keyframes v9bFadeIn{from{opacity:0;transform:translateY(3px);}to{opacity:1;transform:none;}}
.v9b-cp-hint{
  font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--mute);margin-bottom:8px;
}
.v9b-cp-feed{display:flex;flex-direction:column;gap:7px;}
.v9b-cp-msg{
  background:#fff;border:1px solid var(--bdr);border-left:2.5px solid #CE7B91;
  border-radius:7px;padding:7px 9px;animation:v9bFadeIn .3s ease-out;
}
.v9b-cp-msg-time{font-size:8.5px;color:var(--mute);font-family:'Space Mono','Space Mono Fallback',monospace;margin-bottom:3px;}
.v9b-cp-msg-body{font-size:10.5px;line-height:1.45;color:var(--txt);}
.v9b-cp-msg-gap{border-left-color:#B05A72;background:rgba(176,90,114,.04);}
.v9b-cp-chips{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:10px;}
.v9b-cp-chip{
  font-size:9.5px;padding:3px 8px;border:1px solid var(--bdr);border-radius:100px;
  color:var(--mute);background:#fff;white-space:nowrap;cursor:pointer;
}
.v9b-cp-chip-active{background:rgba(206,123,145,.08);border-color:var(--p);color:var(--p);}
.v9b-cp-template{
  font-size:10.5px;line-height:1.65;color:var(--sec);
  padding:8px 9px;border-radius:7px;background:rgba(206,123,145,.04);
  border:1px dashed rgba(206,123,145,.3);margin-bottom:10px;
}
.v9b-cp-slot{
  display:inline-block;padding:1px 6px;border-radius:4px;
  background:rgba(206,123,145,.12);color:var(--p);font-weight:600;
  border:1px solid rgba(206,123,145,.25);font-size:9.5px;
}
.v9b-cp-slot-2{background:rgba(91,158,126,.12);color:#5B9E7E;border-color:rgba(91,158,126,.25);}
.v9b-cp-generate{
  width:100%;padding:7px 10px;border:none;border-radius:8px;
  background:var(--p);color:#fff;font-size:10.5px;font-weight:600;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:5px;
  transition:background .15s,transform .1s;
}
.v9b-cp-generate:hover{background:#5C5C60;}
.v9b-cp-generate:active{transform:scale(.97);}
.v9b-cp-tip{
  font-size:10.5px;line-height:1.5;color:var(--sec);
  padding:7px 9px;border:1px solid var(--bdr);border-radius:7px;background:#fff;
  margin-bottom:6px;
}

/* — Step content — */
.v9b-step{display:none;}
.v9b-step-active{display:block;animation:v9bStepIn .35s cubic-bezier(.16,1,.3,1) both;}
@keyframes v9bStepIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
.v9b-step-title{
  font-family:'Fraunces','Fraunces Fallback','Fraunces Fallback Android',serif;font-size:18px;color:var(--txt);margin-bottom:3px;
  letter-spacing:-.01em;
}
.v9b-step-sub{
  font-size:11px;color:var(--sec);line-height:1.45;margin-bottom:14px;
}

/* Step 1 — Context */
.v9b-context-strip{
  display:flex;align-items:stretch;gap:0;padding:14px 18px;
  background:#FAFAFA;border:1px solid #E8E4E0;border-radius:10px;margin-bottom:14px;
}
.v9b-ext-status{
  display:none;font-style:italic;color:var(--mute);font-size:14px;
}
.v9b-step-1-extracting .v9b-ext-status{display:inline;}
.v9b-step-1-extracting .v9b-ext-done{display:none;}
.v9b-ext-status::after{
  content:'';display:inline-block;width:6px;height:6px;margin-left:6px;
  border-radius:50%;background:#CE7B91;animation:v9bDotPulse 1s ease-in-out infinite;
}
[data-extract]{
  opacity:0;transform:translateY(4px) scale(.96);
  transition:opacity .4s ease,transform .4s cubic-bezier(.16,1,.3,1);
  position:relative;
}
[data-extract].is-pending{opacity:.4;transform:none;}
[data-extract].is-pending::before{
  content:'';position:absolute;inset:0;border-radius:8px;
  background:linear-gradient(90deg,transparent 30%,rgba(206,123,145,.18) 50%,transparent 70%);
  background-size:200% 100%;animation:v9bShimmer 1.4s linear infinite;pointer-events:none;
}
@keyframes v9bShimmer{0%{background-position:200% 0;}100%{background-position:-200% 0;}}
[data-extract].is-extracted{
  opacity:1;transform:none;
  animation:v9bExtractPop .45s cubic-bezier(.16,1,.3,1);
}
@keyframes v9bExtractPop{
  0%{box-shadow:0 0 0 0 rgba(206,123,145,.45);}
  60%{box-shadow:0 0 0 6px rgba(206,123,145,0);}
  100%{box-shadow:0 0 0 0 rgba(206,123,145,0);}
}
.v9b-jd-progress{
  font-size:9px;font-weight:500;letter-spacing:0;text-transform:none;
  color:var(--mute);margin-left:8px;font-style:italic;
  transition:opacity .3s;
}
.v9b-jd-progress.is-hidden{opacity:0;}
.v9b-jd-dots{display:inline-flex;gap:2px;margin-left:3px;}
.v9b-jd-dots span{
  width:3px;height:3px;border-radius:50%;background:currentColor;display:inline-block;
  animation:v9bDotBlink 1.2s infinite ease-in-out;
}
.v9b-jd-dots span:nth-child(2){animation-delay:.15s;}
.v9b-jd-dots span:nth-child(3){animation-delay:.3s;}
@keyframes v9bDotBlink{0%,100%{opacity:.25;}40%{opacity:1;}}
.v9b-jd-chip[data-skill]{
  opacity:0;transform:translateY(2px);
  transition:opacity .25s,transform .25s;
}
.v9b-jd-chip[data-skill].show{opacity:1;transform:none;}
.v9b-jd-chip-more[data-skill]{
  opacity:0;transform:translateY(2px);
  transition:opacity .25s,transform .25s;
}
.v9b-jd-chip-more[data-skill].show{opacity:1;transform:none;}
.v9b-ctx-col{flex-shrink:0;}
.v9b-ctx-div{width:1px;background:#E0DCDA;margin:0 18px;}
.v9b-ctx-label{
  font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--mute);margin-bottom:5px;
  display:inline-flex;align-items:center;gap:6px;
}
.v9b-ctx-label .v9b-ai-tag{margin-left:2px;text-transform:none;letter-spacing:.04em;}
.v9b-ctx-pills{display:flex;gap:4px;flex-wrap:wrap;}
.v9b-ctx-pill{
  padding:3px 8px;border:1px solid var(--bdr);border-radius:100px;
  background:#fff;color:var(--sec);font-size:10px;font-weight:600;
  white-space:nowrap;transition:all .15s;cursor:pointer;
  display:inline-flex;align-items:center;gap:3px;
}
.v9b-ctx-pill-active{background:var(--p);color:#fff;border-color:var(--p);}
.v9b-ai-dot{font-size:8px;opacity:.85;}
.v9b-ctx-select{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:7px 11px;background:#fff;border:1px solid var(--bdr);border-radius:7px;
  font-size:11px;color:var(--txt);min-width:0;width:100%;max-width:240px;cursor:pointer;
  line-height:1.4;
  overflow:hidden;
}
.v9b-ctx-select-text{
  flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.v9b-ctx-select svg{color:var(--mute);flex-shrink:0;}
.v9b-ai-tag{
  display:inline-flex;align-items:center;padding:1px 6px;border-radius:100px;
  background:rgba(91,158,126,.1);color:#3D7A5E;border:1px solid rgba(91,158,126,.2);
  font-size:9px;font-weight:600;font-family:'Space Mono','Space Mono Fallback',monospace;
  white-space:nowrap;flex-shrink:0;
}
.v9b-jd-label{
  font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--mute);margin-bottom:6px;
}
.v9b-jd-tiles{display:flex;gap:6px;flex-wrap:wrap;}
.v9b-jd-tile{
  padding:7px 10px;background:#FAFAFA;border:1px solid #E8E4E0;border-radius:8px;
  min-width:108px;
}
.v9b-jd-tile-label{
  font-size:8.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--mute);margin-bottom:3px;
  display:flex;align-items:center;gap:6px;
}
.v9b-jd-tile-count{
  font-size:8.5px;font-weight:500;letter-spacing:0;text-transform:none;
  color:#5B9E7E;background:rgba(91,158,126,.1);padding:1px 6px;border-radius:100px;
  font-family:'Space Mono','Space Mono Fallback',monospace;
}
.v9b-jd-tile-val{font-size:11px;color:var(--txt);line-height:1.3;}
.v9b-jd-chips{display:flex;flex-wrap:wrap;gap:3px;}
.v9b-jd-chip{
  display:inline-block;padding:1px 6px;border-radius:3px;
  background:rgba(92,92,96,.07);color:var(--sec);font-size:10px;
  white-space:nowrap;
}
.v9b-jd-chip-more{font-size:10px;color:var(--mute);padding:1px 4px;}

/* Step 2 — Review */
.v9b-section{margin-bottom:11px;}
.v9b-section-hdr{display:flex;align-items:center;gap:6px;margin-bottom:4px;}
.v9b-section-name{font-size:10.5px;font-weight:700;font-family:'Inter Tight','Inter Tight Fallback',sans-serif;}
.v9b-section-count{
  font-size:9px;font-family:'Space Mono','Space Mono Fallback',monospace;padding:1px 6px;border-radius:100px;
  font-weight:600;
}
.v9b-section-rule{flex:1;height:1px;background:var(--bdr);}
.v9b-add-btn{
  width:20px;height:20px;border-radius:50%;border:1px solid rgba(92,92,96,.35);
  background:rgba(92,92,96,.06);color:#5C5C60;font-size:13px;font-weight:600;line-height:1;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:all .15s;padding:0;
}
.v9b-add-btn:hover{background:rgba(92,92,96,.14);}
.v9b-add-btn.is-pulsing{box-shadow:0 0 0 0 rgba(92,92,96,.4);animation:v9bAddPulse 1.6s ease-out infinite;}
@keyframes v9bAddPulse{
  0%{box-shadow:0 0 0 0 rgba(92,92,96,.45);}
  100%{box-shadow:0 0 0 8px rgba(92,92,96,0);}
}
.v9b-row{
  display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:7px;
  transition:background .15s;
}
.v9b-row[data-row-anim]{opacity:0;transform:translateY(4px);transition:opacity .3s,transform .3s;}
.v9b-row[data-row-anim].show{opacity:1;transform:none;}
.v9b-row:hover{background:rgba(251,251,251,.7);}
.v9b-row-rank{
  width:16px;height:16px;border-radius:50%;background:rgba(201,194,195,.4);
  font-family:'Space Mono','Space Mono Fallback',monospace;font-size:9px;color:var(--mute);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;font-weight:600;
}
.v9b-row-name{flex:1;font-size:11px;font-weight:600;color:var(--txt);}
.v9b-row-pill{
  font-size:9px;padding:1px 6px;border-radius:100px;border:1px solid;font-weight:600;
  flex-shrink:0;
}
.v9b-row-weight{
  font-family:'Space Mono','Space Mono Fallback',monospace;font-size:11.5px;font-weight:700;
  min-width:30px;text-align:right;flex-shrink:0;
}
.v9b-add-form{
  display:none;flex-direction:column;gap:5px;padding:8px 10px;
  border:1px dashed rgba(92,92,96,.35);background:rgba(92,92,96,.04);border-radius:9px;
  margin-top:5px;
}
.v9b-add-form.show{display:flex;animation:v9bFadeIn .25s ease-out;}
.v9b-add-row{display:flex;align-items:center;gap:6px;}
.v9b-add-input{
  flex:1;font-size:10.5px;color:var(--txt);font-weight:600;
  padding:3px 5px;background:#fff;border:1px solid var(--bdr);border-radius:5px;
  min-height:18px;line-height:1.3;
}
.v9b-add-input:empty::before{content:attr(data-placeholder);color:var(--mute);font-weight:400;}
.v9b-add-textarea{
  font-size:9.5px;color:var(--sec);line-height:1.4;
  padding:4px 5px;background:#fff;border:1px solid var(--bdr);border-radius:5px;
  min-height:24px;
}
.v9b-add-textarea:empty::before{content:attr(data-placeholder);color:var(--mute);}
.v9b-add-actions{display:flex;justify-content:flex-end;gap:5px;align-items:center;}
.v9b-add-cancel{
  background:none;border:none;font-size:10px;color:var(--mute);cursor:pointer;
  padding:3px 8px;font-family:inherit;
}
.v9b-add-confirm{
  background:#5C5C60;color:#fff;font-size:10px;border:none;border-radius:6px;
  padding:3px 10px;font-weight:600;cursor:pointer;
  display:inline-flex;align-items:center;gap:4px;
  font-family:inherit;opacity:.45;
  transition:opacity .15s;
}
.v9b-add-confirm.is-ready{opacity:1;}
.v9b-custom-hint{
  font-size:10px;color:var(--mute);font-style:italic;padding:4px 0 0 24px;
}

/* Step 3 — Tune */
.v9b-tune-meta{
  display:flex;align-items:center;gap:10px;padding-bottom:8px;margin-bottom:6px;
  border-bottom:1px solid var(--bdr);
}
.v9b-tune-meta-lbl{font-size:10.5px;font-weight:600;color:var(--sec);}
.v9b-tune-meta-hint{flex:1;font-size:10px;color:var(--mute);}
.v9b-weight-chip{
  font-size:10px;padding:2px 8px;border-radius:100px;
  background:rgba(176,90,114,.1);color:#B05A72;font-weight:600;
  transition:background .25s ease,color .25s ease;
}
.v9b-weight-chip b{font-family:'Space Mono','Space Mono Fallback',monospace;font-weight:700;}
.v9b-weight-chip.is-balanced{background:rgba(91,158,126,.12);color:#5B9E7E;}
.v9b-autobalance{
  font-size:10px;color:var(--p);background:none;border:none;cursor:pointer;
  font-family:inherit;text-decoration:underline;text-underline-offset:2px;padding:0;
}
.v9b-tune-list{display:flex;flex-direction:column;gap:2px;}
.v9b-tune-row{
  display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:7px;
}
.v9b-tune-row[data-row-anim]{opacity:0;transform:translateY(4px);transition:opacity .3s,transform .3s;}
.v9b-tune-row[data-row-anim].show{opacity:1;transform:none;}
.v9b-stepper{
  display:inline-flex;align-items:center;gap:0;background:#fff;
  border:1px solid var(--bdr);border-radius:100px;padding:1px;
  flex-shrink:0;
}
.v9b-step-btn{
  width:20px;height:20px;border-radius:50%;border:none;background:transparent;
  color:var(--mute);font-size:13px;font-weight:600;cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-family:inherit;
  transition:background .12s;line-height:1;padding:0;
}
.v9b-step-btn:hover{background:rgba(206,123,145,.08);color:var(--p);}
.v9b-step-val{
  font-family:'Space Mono','Space Mono Fallback',monospace;font-size:10.5px;font-weight:700;
  min-width:34px;text-align:center;line-height:1;
  transition:transform .15s ease;
}
.v9b-step-val.is-bumped{animation:v9bBump .35s ease-out;}
@keyframes v9bBump{0%{transform:scale(1);}40%{transform:scale(1.18);}100%{transform:scale(1);}}

/* Step 4 — Save */
.v9b-save-compact{
  display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:10px;
  background:linear-gradient(135deg,rgba(91,158,126,.06),rgba(206,123,145,.04));
  border:1px solid rgba(91,158,126,.18);margin-bottom:8px;
}
.v9b-save-ring-sm{flex-shrink:0;}
.v9b-save-meta-line{
  flex:1;min-width:0;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-size:10.5px;color:var(--sec);
}
.v9b-save-recap-inline{
  display:inline-flex;align-items:center;gap:5px;font-weight:600;
}
.v9b-save-spacer{flex:1;}
/* Legacy v9b-save-card (kept for safety, unused now) */
.v9b-save-card{
  display:flex;align-items:center;gap:14px;padding:14px;border-radius:12px;
  background:linear-gradient(135deg,rgba(91,158,126,.06),rgba(206,123,145,.04));
  border:1px solid rgba(91,158,126,.18);margin-bottom:12px;
}
.v9b-save-ring{flex-shrink:0;}
.v9b-save-info{flex:1;min-width:0;}
.v9b-save-title{
  font-family:'Fraunces','Fraunces Fallback','Fraunces Fallback Android',serif;font-size:15px;color:var(--txt);margin-bottom:6px;
}
.v9b-save-recap{display:flex;flex-direction:column;gap:3px;font-size:10.5px;color:var(--sec);}
.v9b-save-recap > div{display:flex;align-items:center;gap:6px;}
.v9b-save-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.v9b-save-meta{
  display:flex;align-items:center;justify-content:space-between;
  padding:0 4px;margin-bottom:10px;
}
.v9b-save-meta-lbl{font-size:10.5px;color:var(--sec);}
.v9b-save-meta-time{font-size:10px;color:var(--mute);font-family:'Space Mono','Space Mono Fallback',monospace;}
.v9b-save-cta{
  width:100%;padding:9px 14px;border:none;border-radius:10px;
  background:var(--p);color:#fff;font-size:12px;font-weight:600;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:7px;
  transition:background .2s,transform .1s,box-shadow .2s;
  font-family:inherit;position:relative;overflow:hidden;margin-bottom:8px;
}
.v9b-save-cta:hover{background:#5C5C60;box-shadow:0 4px 12px rgba(206,123,145,.25);}
.v9b-save-cta.is-pressed{transform:scale(.97);background:#5C5C60;}
.v9b-save-cta.is-loading{background:#5B9E7E;cursor:default;}
.v9b-save-cta.is-done{background:#3D7A5E;cursor:default;box-shadow:0 4px 14px rgba(91,158,126,.3);}
.v9b-save-cta-default,.v9b-save-cta-loading,.v9b-save-cta-done{
  display:none;align-items:center;justify-content:center;gap:7px;
}
.v9b-save-cta:not(.is-loading):not(.is-done) .v9b-save-cta-default{display:inline-flex;}
.v9b-save-cta.is-loading .v9b-save-cta-loading{display:inline-flex;animation:v9bFadeIn .25s ease-out;}
.v9b-save-cta.is-done .v9b-save-cta-done{display:inline-flex;animation:v9bFadeIn .35s cubic-bezier(.16,1,.3,1);}
.v9b-spinner{
  width:13px;height:13px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;
  border-radius:50%;animation:v9bSpin .9s linear infinite;display:inline-block;
}
@keyframes v9bSpin{to{transform:rotate(360deg);}}
.v9b-save-after{
  display:none;margin-top:10px;padding:8px 12px;border-radius:9px;
  background:rgba(91,158,126,.08);border:1px solid rgba(91,158,126,.22);
  color:#3D7A5E;font-size:11px;font-weight:600;
  align-items:center;justify-content:center;gap:6px;
}
.v9b-save-after.show{display:flex;animation:v9bFadeIn .3s ease-out;}

/* Results card — appears after save success */
.v9b-results{
  display:none;margin-top:6px;border:1px solid rgba(91,158,126,.25);
  background:linear-gradient(180deg,rgba(91,158,126,.04),rgba(91,158,126,.01));
  border-radius:10px;padding:8px 11px;
}
.v9b-results.show{display:block;animation:v9bResultsIn .45s cubic-bezier(.16,1,.3,1);}
@keyframes v9bResultsIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
.v9b-results-hdr{
  display:flex;align-items:center;justify-content:space-between;
  padding-bottom:5px;margin-bottom:4px;border-bottom:1px solid rgba(91,158,126,.18);
}
.v9b-results-lbl{
  font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:#3D7A5E;display:inline-flex;align-items:center;gap:5px;
}
.v9b-results-dot{
  width:6px;height:6px;border-radius:50%;background:#5B9E7E;
  animation:v9bDotPulse 1.5s ease-in-out infinite;
}
.v9b-results-time{font-size:9px;color:var(--mute);font-family:'Space Mono','Space Mono Fallback',monospace;}
.v9b-results-list{display:flex;flex-direction:column;gap:2px;}
.v9b-result-row{
  display:flex;align-items:center;gap:7px;padding:3px 5px;border-radius:6px;
  background:rgba(255,255,255,.6);
  opacity:0;transform:translateX(-8px);
  transition:opacity .35s,transform .35s cubic-bezier(.16,1,.3,1);
}
.v9b-result-row.show{opacity:1;transform:none;}
.v9b-result-rank{
  width:16px;height:16px;border-radius:50%;font-family:'Space Mono','Space Mono Fallback',monospace;
  font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.v9b-result-name{flex:1;font-size:10.5px;font-weight:600;color:var(--txt);}
.v9b-result-move{
  font-size:9px;font-family:'Space Mono','Space Mono Fallback',monospace;font-weight:700;padding:1px 6px;
  border-radius:100px;
}
.v9b-result-up{background:rgba(91,158,126,.12);color:#3D7A5E;}
.v9b-result-down{background:rgba(168,68,45,.08);color:#A8442D;}
.v9b-result-grade{
  font-size:9px;font-weight:700;width:16px;height:16px;border-radius:4px;
  display:flex;align-items:center;justify-content:center;font-family:'Fraunces','Fraunces Fallback','Fraunces Fallback Android',serif;
}
.v9b-results-foot{
  margin-top:5px;padding-top:5px;border-top:1px solid rgba(91,158,126,.12);
  font-size:9.5px;color:var(--mute);text-align:center;
}
/* S2-2c — live re-rank: rows start in the old order with neutral rank chips; the demo
   FLIPs them (transform only), rolls the digits, then fades in the delta pills. */
.v9b-results-list{position:relative;}
.v9b-result-row{position:relative;isolation:isolate;}
.v9b-result-row.is-out{display:none;}
.v9b-result-rank{background:rgba(201,194,195,.4);color:var(--mute);transition:background .3s ease,color .3s ease;}
.v9b-results.is-ranked .v9b-result-row{transition:none;}
.v9b-results.is-ranked .v9b-result-row[data-tone="a"] .v9b-result-rank{background:rgba(91,158,126,.18);color:#3D7A5E;}
.v9b-results.is-ranked .v9b-result-row[data-tone="b"] .v9b-result-rank{background:rgba(138,122,102,.22);color:#7A6A52;}
.v9b-result-move{opacity:0;}
.v9b-result-ghost{position:absolute;left:0;right:0;margin:0;pointer-events:none;}
.v9b-result-row::before{content:'';position:absolute;inset:0;border-radius:6px;background:rgba(91,158,126,.14);opacity:0;z-index:-1;pointer-events:none;}
.v9b-result-row.is-wash::before{animation:v9bWash .6s ease-out;}
@keyframes v9bWash{0%{opacity:0}35%{opacity:1}100%{opacity:0}}
/* Digit roll wrapper (shared with the s1 job counter and the step-3 total) */
.roll{display:inline-block;position:relative;overflow:hidden;vertical-align:top;}
.roll-v{display:block;}
/* S2-2a — the JD excerpt step 1 reads from; phrases light up and fly to their field */
.v9b-jd-line{
  font-family:'Inter Tight','Inter Tight Fallback',sans-serif;font-size:10.5px;font-style:italic;line-height:1.5;
  color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:12px;
}
.v9b-jd-src{position:relative;isolation:isolate;transition:color .3s ease;}
.v9b-jd-src::before{
  content:'';position:absolute;inset:-1px -2px;border-radius:3px;background:rgba(206,123,145,.18);
  transform:scaleX(0);transform-origin:left;transition:transform .32s cubic-bezier(.16,1,.3,1);z-index:-1;
}
.v9b-jd-src.on{color:#B05A72;}
.v9b-jd-src.on::before{transform:scaleX(1);}
.v9b-jd-fly{
  position:absolute;z-index:48;pointer-events:none;white-space:nowrap;
  font-family:'Inter Tight','Inter Tight Fallback',sans-serif;font-size:10.5px;font-style:italic;line-height:1.5;color:#B05A72;
  transform-origin:left top;will-change:transform;
}
/* Reduced motion never runs the wizard demo: show step 1 in its finished state
   (signals extracted, JD phrases marked) instead of empty pending tiles. */
@media(prefers-reduced-motion:reduce){
  #s2 [data-extract]{opacity:1;transform:none;animation:none;}
  #s2 [data-extract]::before{display:none;}
  #s2 .v9b-jd-chip[data-skill],#s2 .v9b-jd-chip-more[data-skill]{opacity:1;transform:none;}
  #s2 .v9b-jd-progress{opacity:0;}
  #s2 .v9b-jd-src{color:#B05A72;}
  #s2 .v9b-jd-src::before{transform:scaleX(1);transition:none;}
}
/* S2-2b — weight as proportion: a full bar is 50% of the recipe */
.v9b-wbar{width:110px;height:4px;border-radius:2px;background:rgba(201,194,195,.45);position:relative;overflow:hidden;margin:0 4px;flex-shrink:0;}
.v9b-wbar i{position:absolute;inset:0;background:currentColor;transform-origin:left;transform:scaleX(calc(var(--w) * 2));}

/* Wizard nav — right end of the pill row (the old bottom footer overflowed the 420px body) */
.v9b-pill-nav{margin-left:auto;display:flex;align-items:center;gap:6px;flex-shrink:0;}
.v9b-back{
  font-size:10.5px;color:var(--mute);background:none;border:1px solid var(--bdr);
  border-radius:100px;padding:4px 11px;cursor:pointer;font-family:inherit;
  transition:all .15s;opacity:.55;
}
.v9b-back:hover{color:var(--sec);border-color:var(--sec);}
.v9b-back.is-enabled{opacity:1;}
.v9b-next{
  display:inline-flex;align-items:center;gap:5px;
  background:var(--p);color:#fff;font-size:11px;font-weight:600;
  border:none;border-radius:100px;padding:5px 10px 5px 13px;cursor:pointer;
  font-family:inherit;transition:background .15s,transform .1s;
}
.v9b-next:hover{background:#5C5C60;}
.v9b-next.is-pressed{transform:scale(.96);background:#5C5C60;}

/* Step 4 keeps the same layout — copilot rail stays visible */

/* =====================================================================
   s4 "Insights" right side, final round: the cut, read three ways at once.
   One sentence; one ranked ledger whose last column is the score scale.
   Your bar is the only strong vertical; 40 and 60 are faint guides that
   come up only while the bar is moved. The count that clears each bar
   sits above it; the cuts under ranks 4 and 8 run across the ledger and
   the notes, so table, plot and notes are one row-aligned object. On view the bar is moved to 40, to 60 and
   back; dots fill as it crosses them and the count rolls.
   Script-driven custom properties:
     --b  bar position on the score scale     --n  how many clear it
     --d  each candidate's dot (launch: 50 -> score)
   ===================================================================== */
#s4 .s4x{
  --x-ink:#1B1B1F; --x-2:#5C5C60; --x-mute:#73716E;
  --x-bg:#FBFBFB; --x-surface:#FFFFFF; --x-border:#C9C2C3; --x-sage:#DAE2DF;
  --x-rose:#CE7B91; --x-rose-d:#B05A72; --x-ok:#5B9E7E; --x-ok-d:#4A8A6B;
  --x-line:rgba(201,194,195,.5);
  --x-rule:rgba(201,194,195,.9);
  --x-dash:rgba(27,27,31,.34);
  --x-ease:cubic-bezier(.16,1,.3,1);
  /* score scale 40..90, matching the ticks rendered from range(40, 91, 10).
     Every score in s4_pool (the Jinja list above slide 4) must stay inside it,
     or its dot leaves the rail; widen both together if the pool changes. */
  --x-lo:40; --x-span:50;
  --x-rh:20px; --x-gut:22px;
}
#s4 .s4x *,#s4 .s4x *::before,#s4 .s4x *::after{box-sizing:border-box;}
#s4 .s4x p,#s4 .s4x ol{margin:0; padding:0;}
#s4 .s4x .s4x-n{font-family:'Space Grotesk','Space Grotesk Fallback','Inter Tight','Inter Tight Fallback',sans-serif; font-variant-numeric:tabular-nums lining-nums; font-feature-settings:'tnum' 1,'lnum' 1; letter-spacing:-.01em;}

/* ---------- Window (overrides the legacy .app-win card) ---------- */
#s4 .s4x.s4x-win{
  position:relative; width:100%; max-width:none; min-height:468px;
  display:flex; flex-direction:column;
  background:var(--x-surface); color:var(--x-ink);
  border:1px solid rgba(255,255,255,.3); border-radius:18px; overflow:hidden; isolation:isolate; z-index:1;
  font-family:'Inter Tight','Inter Tight Fallback',system-ui,sans-serif; font-size:12px; line-height:1.5;
  font-feature-settings:'kern' 1; -webkit-font-smoothing:antialiased; text-align:left;
  transition:box-shadow .3s cubic-bezier(.4,0,.2,1); will-change:auto;
}
/* the s2/s3 chrome (.win-bar, .wd, .win-url): fixed, never shrinks */
#s4 .s4x .win-bar{flex:none; user-select:none;}
#s4 .s4x .win-url{min-width:0; line-height:16px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

#s4 .s4x .s4x-body{
  flex:1; min-height:0; display:flex; flex-direction:column;
  padding:10px 24px 8px;   /* tighter than r1 by 8px: the s2/s3 chrome is 13px taller than the old crumb */
}

/* ---------- The finding ---------- */
#s4 .s4x .s4x-h{
  font-family:'Fraunces','Fraunces Fallback','Fraunces Fallback Android',Georgia,serif; font-weight:400; font-size:20px; line-height:26px;
  letter-spacing:-.014em; color:var(--x-ink); font-variation-settings:'opsz' 40;
  font-variant-numeric:lining-nums; white-space:nowrap;
}
#s4 .s4x .s4x-hn{letter-spacing:-.024em;}

/* ---------- Figure grid ----------
   cols: rank | name | score | gap | SCALE | gutter | notes
   rows: counts 18 | ticks 18 | 14 candidates | "Your bar" 30
   The label row is 30px, not 18: the tour's cursor holds the rule in the 17px between
   the last row and the label, so it covers neither Noah's row nor the words. */
#s4 .s4x .s4x-fig{
  position:relative; margin-top:16px;
  display:grid;
  grid-template-columns:18px 102px 22px 20px minmax(0,1fr) var(--x-gut) 210px;
  grid-template-rows:18px 20px repeat(14,var(--x-rh)) 30px;
}

/* counts that clear each bar, above the scale */
#s4 .s4x .s4x-cap{
  grid-column:1 / 4; grid-row:1; align-self:center; justify-self:end;
  font-size:11px; line-height:14px; color:var(--x-mute); white-space:nowrap;
}
#s4 .s4x .s4x-cnt{grid-column:5; grid-row:1; position:relative; z-index:4;}
#s4 .s4x .s4x-ct,#s4 .s4x .s4x-live{
  position:absolute; top:0; height:18px; transform:translateX(-50%);
  font-family:'Space Grotesk','Space Grotesk Fallback',sans-serif; font-variant-numeric:tabular-nums lining-nums;
  font-size:12.5px; line-height:18px; white-space:nowrap;
}
#s4 .s4x .s4x-ct{left:calc((var(--t) - var(--x-lo)) * 100% / var(--x-span)); color:var(--x-2); font-weight:500; transition:opacity .12s linear;}
#s4 .s4x .s4x-ct.is-cov{opacity:0;}
#s4 .s4x .s4x-live{
  left:calc((var(--b) - var(--x-lo)) * 100% / var(--x-span));
  padding:0 4px; background:var(--x-surface); color:var(--x-ink); font-weight:600; z-index:1;
}
/* odometer: the old number rolls up and out, the new one rolls in */
#s4 .s4x .s4x-od{position:relative; display:block; width:2.1ch; height:18px; overflow:hidden; text-align:center;}
#s4 .s4x .s4x-od > span{display:block; height:18px;}
#s4 .s4x .s4x-od > span + span{position:absolute; left:0; right:0; top:0;}

/* column heads + scale ticks */
#s4 .s4x .s4x-hd{grid-row:2; align-self:center; font-size:11px; line-height:14px; color:var(--x-mute); white-space:nowrap;}
#s4 .s4x .s4x-hd--rk{grid-column:1;}
#s4 .s4x .s4x-hd--nm{grid-column:2;}
#s4 .s4x .s4x-hd--sc{grid-column:3; justify-self:end;}
#s4 .s4x .s4x-ticks{grid-column:5 / 7; grid-row:2; position:relative;}
#s4 .s4x .s4x-ticks span{
  position:absolute; top:3px; left:calc((var(--t) - var(--x-lo)) * (100% - var(--x-gut)) / var(--x-span)); transform:translateX(-50%);
  font-family:'Space Grotesk','Space Grotesk Fallback',sans-serif; font-variant-numeric:tabular-nums; font-size:10.5px; line-height:14px; color:var(--x-mute);
}
#s4 .s4x .s4x-ticks span.is-bar{color:var(--x-rose-d); font-weight:600;}

/* row hairlines: one ruled table from rank to scale */
#s4 .s4x .s4x-rows{
  grid-column:1 / 6; grid-row:3 / 17; pointer-events:none;
  border-top:1px solid var(--x-rule);
  background:repeating-linear-gradient(to bottom, transparent 0 calc(var(--x-rh) - 1px), var(--x-line) calc(var(--x-rh) - 1px) var(--x-rh));
  margin-top:-1px;
}
/* the cut at 60 (under #4): dashed, through ledger, scale and notes */
#s4 .s4x .s4x-hl{
  grid-column:1 / -1; align-self:end; height:0; margin-bottom:-.5px; pointer-events:none; z-index:1;
  border-top:1px dashed var(--x-dash); opacity:0; transition:opacity .4s var(--x-ease);
}
#s4 .s4x .s4x-hl--4{grid-row:6;}
/* your bar's cut under #8, in the notes column; the moving part is .s4x-cut */
#s4 .s4x .s4x-hl--8{grid-row:10; grid-column:6 / -1; border-top:1px solid var(--x-rose); opacity:1;}
#s4 .s4x .s4x-cut{
  grid-column:1 / 6; grid-row:3; align-self:start; height:0; margin-top:-.5px; z-index:2; pointer-events:none;
  border-top:1px solid var(--x-rose);
  transform:translateY(calc(var(--n) * var(--x-rh))); transition:transform .18s var(--x-ease);
}

/* dashed bars at 40 and 60 */
#s4 .s4x .s4x-ov{grid-column:5; grid-row:3 / 17; position:relative; pointer-events:none; z-index:1;}
#s4 .s4x .s4x-g{
  position:absolute; top:0; bottom:0; width:0; margin-left:-.5px;
  left:calc((var(--t) - var(--x-lo)) * 100% / var(--x-span));
  border-left:1px dashed var(--x-dash); opacity:0; transition:opacity .3s var(--x-ease);
}
/* your bar: the rose rule and its name, riding --b */
#s4 .s4x .s4x-rail{grid-column:5; grid-row:3 / 18; position:relative; pointer-events:none; z-index:3;}
#s4 .s4x .s4x-rule{
  position:absolute; top:0; bottom:13px; width:0; margin-left:-.5px;
  left:calc((var(--b) - var(--x-lo)) * 100% / var(--x-span));
  border-left:1px solid var(--x-rose);
}
#s4 .s4x .s4x-yb{
  position:absolute; bottom:0; left:calc((var(--b) - var(--x-lo)) * 100% / var(--x-span)); transform:translateX(-50%);
  font-size:11px; line-height:13px; font-weight:600; color:var(--x-rose-d); white-space:nowrap;
}

/* ---------- Candidate rows ---------- */
#s4 .s4x .s4x-r{display:contents;}
#s4 .s4x .s4x-r > *{grid-row:var(--gr);}
#s4 .s4x .s4x-rk{grid-column:1; align-self:center; font-family:'Space Grotesk','Space Grotesk Fallback',sans-serif; font-variant-numeric:tabular-nums; font-size:10.5px; line-height:1; color:var(--x-mute);}
#s4 .s4x .s4x-nm{
  grid-column:2; align-self:center; min-width:0; overflow:hidden; text-overflow:ellipsis;
  font-size:12px; line-height:1; font-weight:500; color:var(--x-ink); letter-spacing:-.005em; white-space:nowrap;
  transition:color .15s var(--x-ease);
}
#s4 .s4x .s4x-sc{
  grid-column:3; align-self:center; text-align:right;
  font-family:'Space Grotesk','Space Grotesk Fallback',sans-serif; font-variant-numeric:tabular-nums; font-size:12px; line-height:1; font-weight:500; color:var(--x-ink);
  transition:color .15s var(--x-ease);
}
#s4 .s4x .s4x-r.is-lo .s4x-nm,#s4 .s4x .s4x-r.is-lo .s4x-sc{color:var(--x-2); font-weight:400;}

/* plot cell: stem from your bar to the dot, then the dot */
#s4 .s4x .s4x-pc{grid-column:5; position:relative; align-self:stretch; z-index:2;}
#s4 .s4x .s4x-st{
  position:absolute; top:50%; height:0; margin-top:-.5px;
  border-top:1px solid rgba(91,158,126,.62);
  left:calc((min(var(--b), var(--d)) - var(--x-lo)) * 100% / var(--x-span));
  width:calc((max(var(--b), var(--d)) - min(var(--b), var(--d))) * 100% / var(--x-span));
  transition:border-color .15s var(--x-ease);
}
#s4 .s4x .s4x-r.is-lo .s4x-st{border-top-color:rgba(115,113,110,.45);}
#s4 .s4x .s4x-dot{
  position:absolute; top:50%; width:8px; height:8px; border-radius:50%;
  left:calc((var(--d) - var(--x-lo)) * 100% / var(--x-span)); transform:translate(-50%,-50%);
  background:var(--x-ok); box-shadow:inset 0 0 0 1.25px var(--x-ok-d);
  transition:background-color .15s var(--x-ease), box-shadow .15s var(--x-ease), opacity .2s linear;
}
#s4 .s4x .s4x-r.is-lo .s4x-dot{background:var(--x-surface); box-shadow:inset 0 0 0 1.25px var(--x-mute);}
/* flagged: the only rose on the page, matched by the rule beside the flags */
#s4 .s4x .s4x-r.is-flag .s4x-dot{background:var(--x-rose); box-shadow:inset 0 0 0 1.25px var(--x-rose-d);}
#s4 .s4x .s4x-r.is-flag .s4x-st{border-top-color:rgba(206,123,145,.7);}
/* as s3's selected row: a 3px rose edge, then a small inset before the rank digit */
#s4 .s4x .s4x-fr{grid-column:1 / 6; margin-left:-9px; pointer-events:none; background:rgba(206,123,145,.09); box-shadow:inset 3px 0 0 var(--x-rose);}
#s4 .s4x.is-pre .s4x-dot{opacity:0;}
#s4 .s4x .s4x-r.is-in .s4x-dot{opacity:1;}

/* career momentum: a quiet rising trace after the name, keyed once in note 3 */
#s4 .s4x .s4x-up{
  display:inline-block; width:9px; height:8px; margin-left:5px; vertical-align:0;
  fill:none; stroke:var(--x-2); stroke-width:1.15; stroke-linecap:round; stroke-linejoin:round; overflow:visible;
}
#s4 .s4x .s4x-note .s4x-up{margin-left:1px; vertical-align:0;}

/* leader: Priya's dot to her note */
#s4 .s4x .s4x-ld{
  grid-column:5 / 7; grid-row:3; align-self:center; height:0; margin-top:-.5px; z-index:1;
  border-top:1px solid rgba(206,123,145,.7);
  margin-left:calc((100% - var(--x-gut)) * (var(--s1) - var(--x-lo)) / var(--x-span) + 7px); margin-right:8px;
  transform-origin:left center; transform:scaleX(0); transition:transform .5s var(--x-ease) .1s;
}

/* ---------- Notes: each sits in the band of rows it is about ---------- */
#s4 .s4x .s4x-note{
  grid-column:7; grid-row:var(--gr) / span 4; align-self:start; position:relative; z-index:2;
  display:flex; flex-direction:column;
  opacity:0; transform:translateY(3px);
  transition:opacity .45s var(--x-ease), transform .6s var(--x-ease);
  transition-delay:calc(.08s + var(--k) * .09s);
}
#s4 .s4x .s4x-note > b{display:block; font-size:12px; line-height:var(--x-rh); font-weight:600; color:var(--x-ink); letter-spacing:-.005em; white-space:nowrap;}
#s4 .s4x .s4x-note > b .s4x-n{font-weight:600;}
#s4 .s4x .s4x-note > span{display:block; margin-top:1px; font-size:11.5px; line-height:15px; color:var(--x-2);}
#s4 .s4x .s4x-note > span .s4x-n{color:var(--x-ink);}
#s4 .s4x .s4x-note > span + span{margin-top:0;}
#s4 .s4x .s4x-fl{
  display:grid; grid-template-columns:auto auto 1fr; column-gap:7px; align-items:baseline;
  margin-top:2px; padding:1px 0 1px 8px; border-left:1px solid var(--x-rose);
  font-size:11.5px; line-height:16px; color:var(--x-2); white-space:nowrap;
}
#s4 .s4x .s4x-fl p{display:contents;}
#s4 .s4x .s4x-fl p b{font-weight:500; color:var(--x-ink);}
#s4 .s4x .s4x-fl .s4x-thr{color:var(--x-mute);}
#s4 .s4x .s4x-fl .s4x-thr .s4x-n{color:var(--x-2);}
#s4 .s4x .s4x-note > .s4x-set{margin-top:5px; color:var(--x-mute);}
#s4 .s4x .s4x-note > .s4x-set .s4x-n{color:var(--x-2);}

/* ---------- States ----------
   is-pre    dots not launched yet
   is-shown  faint guides, counts, notes
   is-sweep  the bar is being moved: the 54 / 74 guides come up        */
#s4 .s4x.is-shown .s4x-hl{opacity:1;}
#s4 .s4x.is-shown .s4x-g{opacity:.12;}
#s4 .s4x.is-sweep .s4x-g{opacity:1;}
#s4 .s4x.is-shown .s4x-ld{transform:scaleX(1);}
#s4 .s4x.is-shown .s4x-note{opacity:1; transform:none;}
#s4 .s4x:not(.is-shown) .s4x-ct{opacity:0;}
#s4 .s4x.is-still *,#s4 .s4x.is-still *::after{transition:none !important;}   /* hold(): reset without transitions */
@media (prefers-reduced-motion:reduce){ #s4 .s4x *,#s4 .s4x *::after{transition:none !important;} }

/* =====================================================================
   Phone (.s4x-mw, inside #s4 .m-widget, viewport < 768px).
   Same ledger and scale; the notes follow as a ruled list.
   ===================================================================== */
#s4 .s4x.s4x-mw{
  --x-rh:17px; --x-gut:12px; position:relative; z-index:1;
  width:calc(100% - 32px); max-width:420px; margin:0 16px;
  background:var(--x-surface); color:var(--x-ink); border:1px solid var(--bdr); border-radius:16px; overflow:hidden;
  font-family:'Inter Tight','Inter Tight Fallback',system-ui,sans-serif; font-size:12px; line-height:1.45;
  -webkit-font-smoothing:antialiased; text-align:left;
  box-shadow:0 18px 44px rgba(6,14,12,.38),0 4px 12px rgba(6,14,12,.2);
}
#s4 .s4x.s4x-mw .s4x-body{display:block; padding:16px 14px 14px;}
#s4 .s4x.s4x-mw .s4x-h{font-size:18px; line-height:23px; white-space:normal; text-wrap:balance;}
#s4 .s4x.s4x-mw .s4x-fig{
  margin-top:12px;
  grid-template-columns:19px minmax(0,96px) 22px 16px minmax(0,1fr) var(--x-gut) 0;
  grid-template-rows:18px 20px repeat(14,var(--x-rh)) 18px;
}
#s4 .s4x.s4x-mw .s4x-hl{grid-column:1 / 6;}
#s4 .s4x.s4x-mw .s4x-hl--8{display:none;}
#s4 .s4x.s4x-mw .s4x-nm,#s4 .s4x.s4x-mw .s4x-sc{font-size:12px;}
#s4 .s4x.s4x-mw .s4x-rk{font-size:11px;}
#s4 .s4x.s4x-mw .s4x-hd,#s4 .s4x.s4x-mw .s4x-cap{font-size:11px;}
#s4 .s4x.s4x-mw .s4x-ticks span{font-size:11px;}
#s4 .s4x.s4x-mw .s4x-dot{width:7px; height:7px;}
#s4 .s4x.s4x-mw .s4x-notes{list-style:none; margin-top:8px; border-top:1px solid var(--x-rule);}
#s4 .s4x.s4x-mw .s4x-note{
  display:block; padding:7px 0 8px; border-bottom:1px solid var(--x-line);
  opacity:1; transform:none;
}
#s4 .s4x.s4x-mw .s4x-note > b{display:block; font-size:13px; line-height:17px; font-weight:600; white-space:normal;}
#s4 .s4x.s4x-mw .s4x-note > span{font-size:12px; line-height:16px; margin-top:1px;}
#s4 .s4x.s4x-mw .s4x-note > span b{font-weight:500; color:var(--x-ink);}
#s4 .s4x.s4x-mw .s4x-note > span i{font-style:normal; color:var(--x-border); margin:0 6px;}
#s4 .s4x.s4x-mw .s4x-note--a > span{margin-top:3px; padding-left:9px; border-left:1px solid var(--x-rose);}
#s4 .s4x.s4x-mw .s4x-note--a > .s4x-set{margin-top:5px; padding-left:0; border-left:0; color:var(--x-mute);}

/* =====================================================================
   s4 lenses. The window tours four readings of the same 14 people:
   Your bar (the ledger above) -> Score distribution -> Skill vs Experience
   -> Strength profile. One identity per candidate in every lens: Priya
   rose, above your bar green, below it hollow (.is-flag / .is-hi / .is-lo).
   Between lenses the same 14 marks (.s4x-mk) fly from where each person
   was to where they are next; the 40..90 scale and the rule at your bar (.s4x-ax)
   are one object whose span slides from lens to lens.
   Stage: 18 count row | 20 tick row | 14 x --x-rh | 18 label row; the
   last 210px (plus the 22px gutter) is the notes column in every lens.
   ===================================================================== */
#s4 .s4x .s4x-tabs{
  position:relative; flex:none; display:flex; align-items:stretch; gap:22px;
  height:28px; padding:0 24px; background:var(--x-surface);
  border-bottom:1px solid var(--x-rule);
}
#s4 .s4x .s4x-tab{
  appearance:none; -webkit-appearance:none; background:none; border:0; border-radius:0; margin:0; padding:0;
  display:inline-flex; flex-direction:column; justify-content:center;
  font:inherit; font-size:12px; line-height:27px; font-weight:400; letter-spacing:-.005em;
  color:var(--x-2); white-space:nowrap; cursor:pointer; transition:color .2s var(--x-ease);
}
/* the bold active label must not shift its neighbours: reserve the bold width */
#s4 .s4x .s4x-tab::after{content:attr(data-label); height:0; overflow:hidden; visibility:hidden; font-weight:500; pointer-events:none;}
#s4 .s4x .s4x-tab:hover{color:var(--x-ink);}
#s4 .s4x .s4x-tab.is-on{color:var(--x-ink); font-weight:500;}
#s4 .s4x .s4x-tab:focus-visible{outline:1.5px solid var(--x-ink); outline-offset:-2px; border-radius:2px;}
#s4 .s4x .s4x-ul{
  position:absolute; left:0; bottom:-1px; height:2px; width:0; background:var(--x-rose); pointer-events:none;
  transition:transform .55s var(--x-ease), width .55s var(--x-ease);
}
/* the tour's tell: while it runs, the underline is a faint track that fills over
   the lens's dwell (same idea as s5's tcDwell hairline); the fill's end moves the
   tour on (animationend in 7c), so hovering the window pauses both. */
#s4 .s4x .s4x-ul::after{content:''; position:absolute; inset:0; background:var(--x-rose); transform-origin:left center;}
#s4 .s4x .s4x-tabs.is-run .s4x-ul{background:rgba(206,123,145,.22);}
#s4 .s4x .s4x-job{margin-left:auto; align-self:center; font-size:11.5px; line-height:1; color:var(--x-mute); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0;}
#s4 .s4x .s4x-tabs.is-run .s4x-ul::after{animation:s4xDwell var(--dw, 5600ms) linear forwards;}
#s4 .s4x.s4x-win:hover .s4x-tabs.is-run .s4x-ul::after,#s4 .s4x.s4x-win:focus-within .s4x-tabs.is-run .s4x-ul::after{animation-play-state:paused;}
@keyframes s4xDwell{from{transform:scaleX(0);}to{transform:none;}}

/* Short hover details belong only to the desktop tour. Preserve each mark's placement transform. */
#s4 .s4x.s4x-win .s4x-dot{transition:background-color .15s var(--x-ease),box-shadow .15s var(--x-ease),opacity .2s linear,transform .18s var(--x-ease);}
#s4 .s4x.s4x-win .s4x-nm,#s4 .s4x.s4x-win .s4x-bl,#s4 .s4x.s4x-win .s4x-ql,#s4 .s4x.s4x-win .s4x-kn,#s4 .s4x.s4x-win .s4x-qd > span{transition:color .18s var(--x-ease);}
#s4 .s4x.s4x-win .s4x-note{transition:opacity .45s var(--x-ease) calc(.08s + var(--k) * .09s),transform .6s var(--x-ease) calc(.08s + var(--k) * .09s),background-color .18s var(--x-ease),box-shadow .18s var(--x-ease);}
#s4 .s4x.s4x-win .s4x-lnote{transition:background-color .18s var(--x-ease),box-shadow .18s var(--x-ease);}
#s4 .s4x.s4x-win .s4x-band,#s4 .s4x.s4x-win .s4x-bl::before{transition:background-color .18s var(--x-ease);}
#s4 .s4x.s4x-win .s4x-brk{transition:transform .18s var(--x-ease),color .18s var(--x-ease);}
#s4 .s4x.s4x-win .s4x-cell{transition:transform .18s var(--x-ease),background-color .18s var(--x-ease),box-shadow .18s var(--x-ease);}
#s4 .s4x.s4x-win .s4x-qd .s4x-dt{transition:transform .18s var(--x-ease);}
#s4 .s4x.s4x-win .s4x-rp{transition:opacity .18s var(--x-ease),fill .18s var(--x-ease),stroke-width .18s var(--x-ease);}
#s4 .s4x .s4x-r.is-hov .s4x-dot{transform:translate(-50%,-50%) scale(1.5);}
#s4 .s4x.s4x-win .s4x-r.is-hov .s4x-nm,#s4 .s4x.s4x-win .s4x-bl.is-hov,#s4 .s4x.s4x-win .s4x-ql.is-hov,#s4 .s4x.s4x-win .s4x-kr.is-hov .s4x-kn,#s4 .s4x.s4x-win .s4x-qd.is-hov > span{color:var(--x-ink);font-weight:600;}
/* the flag note keeps the flag's rose; the lens notes take the sage hover surface */
#s4 .s4x .s4x-note.is-hov{background:rgba(206,123,145,.08);box-shadow:0 0 0 6px rgba(206,123,145,.08);border-radius:4px;}
#s4 .s4x .s4x-lnote.is-hov{background:rgba(218,226,223,.55);box-shadow:0 0 0 6px rgba(218,226,223,.55);border-radius:4px;}
#s4 .s4x .s4x-band.is-hov,#s4 .s4x .s4x-bl.is-hov::before{background:rgba(91,158,126,.30);}
#s4 .s4x .s4x-brk.is-hov{transform:scale(1.08);color:var(--x-ink);}
/* the break's two cells take the ink of its bracket, so neither reads as flagged */
#s4 .s4x.s4x-win .s4x-cell.is-hov{transform:scale(1.04);box-shadow:inset 0 0 0 1px var(--x-ink);}
#s4 .s4x .s4x-qd.is-hov .s4x-dt{transform:scale(1.5);}
#s4 .s4x .s4x-stage[data-hov] .s4x-rp:not(.s4x-rp--bar){opacity:.3;}
#s4 .s4x .s4x-stage[data-hov="0"] .s4x-rp.s4x-rp--0{opacity:1;stroke-width:2.5;fill:rgba(206,123,145,.10);}
#s4 .s4x .s4x-stage[data-hov="bar"] .s4x-rp--bar{opacity:1;stroke-width:2;fill:rgba(27,27,31,.05);}

/* one finding per lens. The old one leaves at once (100 ms), the new one comes in
   at 140 ms, with the new lens's first marks: never two headlines on screen together,
   and never a window with none for long. */
#s4 .s4x .s4x-hs{display:grid;}
#s4 .s4x .s4x-hs > .s4x-h{
  grid-area:1 / 1; opacity:0; transform:translateY(4px);
  transition:opacity .1s linear, transform 0s linear .1s;
}
#s4 .s4x .s4x-hs > .s4x-h.is-on{opacity:1; transform:none; transition:opacity .45s var(--x-ease) .14s, transform .6s var(--x-ease) .14s;}

#s4 .s4x .s4x-stage{position:relative; margin-top:10px;}
#s4 .s4x .s4x-lens--bar .s4x-fig{margin-top:0;}
/* a lens leaves at once; only the flying marks bridge two lenses */
#s4 .s4x .s4x-lens{transition:opacity .12s linear, visibility 0s linear .12s;}   /* its content is hidden at once (below) */
#s4 .s4x .s4x-lens:not(.is-on){opacity:0; visibility:hidden; pointer-events:none;}
#s4 .s4x .s4x-lens:not(.is-on) > *,#s4 .s4x .s4x-lens:not(.is-on) .s4x-fig > *{visibility:hidden;}
#s4 .s4x .s4x-lens.is-on{opacity:1; visibility:visible; transition:opacity .4s var(--x-ease) .12s, visibility 0s;}
#s4 .s4x .s4x-lens--dist,#s4 .s4x .s4x-lens--quad,#s4 .s4x .s4x-lens--radar{position:absolute; inset:0;}

/* ---------- identity: one mark per candidate, everywhere ---------- */
#s4 .s4x .s4x-dt,#s4 .s4x .s4x-mk{
  display:block; flex:none; width:8px; height:8px; border-radius:50%;
  background:var(--x-ok); box-shadow:inset 0 0 0 1.25px var(--x-ok-d);
}
#s4 .s4x .s4x-dt.is-lo,#s4 .s4x .s4x-mk.is-lo{background:var(--x-surface); box-shadow:inset 0 0 0 1.25px var(--x-mute);}
#s4 .s4x .s4x-dt.is-flag,#s4 .s4x .s4x-mk.is-flag{background:var(--x-rose); box-shadow:inset 0 0 0 1.25px var(--x-rose-d);}
#s4 .s4x .s4x-marks{position:absolute; inset:0; pointer-events:none; z-index:6; visibility:hidden;}
#s4 .s4x .s4x-mk{position:absolute; left:0; top:0; margin:-4px 0 0 -4px; will-change:transform;}
#s4 .s4x .s4x-stage.is-fly .s4x-marks{visibility:visible;}
#s4 .s4x .s4x-stage.is-fly .s4x-dt,#s4 .s4x .s4x-stage.is-fly .s4x-dot{visibility:hidden;}

/* ---------- the shared scale: ticks 40..90 and the rule at your bar ---------- */
#s4 .s4x .s4x-ax{
  position:absolute; top:0; bottom:0; left:162px; width:calc(100% - 372px); pointer-events:none; z-index:3;
  transition:left .72s var(--x-ease), width .72s var(--x-ease), opacity .3s var(--x-ease);
}
#s4 .s4x .s4x-stage[data-lens="1"] .s4x-ax{left:0; width:calc(100% - 210px);}
#s4 .s4x .s4x-stage[data-lens="2"] .s4x-ax,#s4 .s4x .s4x-stage[data-lens="3"] .s4x-ax{left:calc(30px + (100% - 262px) * 15 / 60); width:calc((100% - 262px) * 50 / 60 + 22px);}
#s4 .s4x .s4x-stage[data-lens="3"] .s4x-ax{opacity:0;}
#s4 .s4x .s4x-axt span{
  position:absolute; top:21px; left:calc((var(--t) - 40) * (100% - 22px) / 50); transform:translateX(-50%);
  font-family:'Space Grotesk','Space Grotesk Fallback',sans-serif; font-variant-numeric:tabular-nums; font-size:10.5px; line-height:14px; color:var(--x-mute);
}
#s4 .s4x .s4x-axt span.is-bar{color:var(--x-rose-d); font-weight:600;}
#s4 .s4x .s4x-axr{
  position:absolute; top:38px; bottom:13px; width:0; margin-left:-.5px;
  left:calc((var(--b) - 40) * (100% - 22px) / 50); border-left:1px solid var(--x-rose);
  transition:top .72s var(--x-ease), bottom .72s var(--x-ease), border-color .5s var(--x-ease);
}
#s4 .s4x .s4x-axt{transition:opacity .3s var(--x-ease);}
/* Skill vs Experience numbers its own x-axis along the bottom; the shared rule leaves your bar and
   becomes the split at 50. The lens's axis box starts at 40 on the 25..85 plot (15 / 60), so 50 lands on 25 / 60. */
#s4 .s4x .s4x-stage[data-lens="2"] .s4x-axt{opacity:0;}
#s4 .s4x .s4x-stage[data-lens="2"] .s4x-axr{top:26px; bottom:36px; border-left-color:var(--x-ink); left:calc((50 - 40) * (100% - 22px) / 50); transition:top .72s var(--x-ease), bottom .72s var(--x-ease), border-color .5s var(--x-ease), left .72s var(--x-ease);}
#s4 .s4x .s4x-axl{
  position:absolute; bottom:0; left:calc((var(--b) - 40) * (100% - 22px) / 50); transform:translateX(-50%);
  font-size:11px; line-height:13px; font-weight:600; color:var(--x-rose-d); white-space:nowrap;
  transition:opacity .3s var(--x-ease);
}
#s4 .s4x .s4x-stage[data-lens="2"] .s4x-axl,#s4 .s4x .s4x-stage[data-lens="3"] .s4x-axl{opacity:0;}

/* ---------- notes column, shared by the three new lenses ---------- */
#s4 .s4x .s4x-ln{position:absolute; right:0; top:38px; width:210px; display:flex; flex-direction:column; gap:13px;}
#s4 .s4x .s4x-lnote > b{display:block; font-size:12px; line-height:20px; font-weight:600; color:var(--x-ink); letter-spacing:-.005em; white-space:nowrap;}
#s4 .s4x .s4x-lnote > b .s4x-n{font-weight:600;}
#s4 .s4x .s4x-lnote > span{display:block; margin-top:1px; font-size:11.5px; line-height:15px; color:var(--x-2);}
#s4 .s4x .s4x-lnote .s4x-n{color:var(--x-ink);}
/* the two dist notes carry the mark they explain: the ink bracket, the sage band */
#s4 .s4x .s4x-lnote--brk > span{margin-top:2px; padding-left:8px; border-left:1px solid var(--x-ink);}
#s4 .s4x .s4x-lnote--band > span{margin-top:2px; padding-left:8px; border-left:4px solid var(--x-sage);}
#s4 .s4x .s4x-lnote .s4x-set,#s4 .s4x .s4x-lnote .s4x-set .s4x-n{color:var(--x-mute);}

/* ---------- Score distribution ---------- */
#s4 .s4x .s4x-dist{position:absolute; left:0; top:0; bottom:0; right:232px;}
#s4 .s4x .s4x-dcols{position:absolute; left:0; right:0; top:0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr));}
#s4 .s4x .s4x-dcol{display:flex; flex-direction:column; gap:6px; padding:0 2px; min-width:0; container-type:inline-size;}
/* narrow windows (about 1280 wide): the same cell, a size down */
@container (max-width:80px){
  #s4 .s4x .s4x-dcol .s4x-cell{padding:0 4px; gap:4px;}
  #s4 .s4x .s4x-dcol .s4x-cn,#s4 .s4x .s4x-dcol .s4x-cs{font-size:10.5px;}
}
/* each column's head names its stretch and its count (40s, 4), so the
   count reads as the bin's and the scale numbers under it stay on the edges */
#s4 .s4x .s4x-dct{
  display:block; height:18px; margin-bottom:21px; text-align:center; white-space:nowrap;
  font-size:11.5px; line-height:18px; font-weight:400; color:var(--x-mute);
}
#s4 .s4x .s4x-dct b{font-weight:600; color:var(--x-2);}
#s4 .s4x .s4x-dcol.is-hi .s4x-dct b{color:var(--x-ink);}
#s4 .s4x .s4x-cell{
  display:flex; align-items:center; gap:5px; height:48px; padding:0 6px; min-width:0;
  border-radius:4px; background:rgba(91,158,126,.09); box-shadow:inset 0 0 0 1px rgba(91,158,126,.30);
}
#s4 .s4x .s4x-cell.is-lo{background:var(--x-surface); box-shadow:inset 0 0 0 1px rgba(115,113,110,.30);}
#s4 .s4x .s4x-cell.is-flag{background:rgba(206,123,145,.12); box-shadow:inset 0 0 0 1px rgba(206,123,145,.45);}
#s4 .s4x .s4x-cn{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11.5px; line-height:1; font-weight:500; color:var(--x-ink); letter-spacing:-.015em;}
#s4 .s4x .s4x-cs{margin-left:auto; padding-left:2px; font-size:11px; line-height:1; font-weight:500; color:var(--x-ink);}
#s4 .s4x .s4x-cell.is-lo .s4x-cn,#s4 .s4x .s4x-cell.is-lo .s4x-cs{color:var(--x-2); font-weight:400;}
/* the exact scores under the buckets: the break and the borderline band */
#s4 .s4x .s4x-rug{position:absolute; left:0; right:0; top:273px; height:22px;}
#s4 .s4x .s4x-rcap{position:absolute; left:0; bottom:calc(100% + 3px); font-size:11px; line-height:13px; color:var(--x-mute); white-space:nowrap;}
#s4 .s4x .s4x-rug::before{content:''; position:absolute; left:0; right:0; top:21px; border-top:1px solid var(--x-rule);}
#s4 .s4x .s4x-band{position:absolute; top:0; height:21px; left:calc((var(--a) - 40) * 2%); width:calc((var(--z) - var(--a)) * 2%); background:var(--x-sage);}
#s4 .s4x .s4x-rt{position:absolute; top:5px; height:16px; width:0; margin-left:-.75px; left:calc((var(--t) - 40) * 2%); border-left:1.5px solid var(--x-ok);}
#s4 .s4x .s4x-rt.is-lo{border-left-color:var(--x-mute);}
#s4 .s4x .s4x-rt.is-flag{border-left-color:var(--x-rose);}
#s4 .s4x .s4x-brk{
  position:absolute; bottom:calc(100% - 3px); height:24px; left:calc((var(--a) - 40) * 2%); width:calc((var(--z) - var(--a)) * 2%);
  text-align:center; font-size:11px; line-height:13px; font-weight:500; color:var(--x-ink); white-space:nowrap;
}
/* the sage band, named where it ends */
#s4 .s4x .s4x-bl{position:absolute; top:calc(100% + 4px); left:calc((var(--z) - 40) * 2%); margin-left:6px; display:flex; align-items:center; gap:5px; font-size:11px; line-height:13px; color:var(--x-2); white-space:nowrap;}
#s4 .s4x .s4x-bl::before{content:''; flex:none; width:10px; height:8px; background:var(--x-sage); box-shadow:inset 0 0 0 1px rgba(91,158,126,.35);}
#s4 .s4x .s4x-brk::after{content:''; position:absolute; left:0; right:0; bottom:0; height:7px; border:1px solid var(--x-ink); border-bottom:0;}

/* ---------- Skill vs Experience ---------- */
#s4 .s4x .s4x-quad{position:absolute; left:0; top:0; bottom:0; right:232px;}
/* Experience names the y-axis at the top; Skills Match names the x-axis under its numbers */
#s4 .s4x .s4x-qcap{position:absolute; left:0; top:0; height:18px; font-size:11px; line-height:18px; color:var(--x-mute); white-space:nowrap;}
#s4 .s4x .s4x-qcap--x{top:auto; left:auto; right:0; bottom:0;}
#s4 .s4x .s4x-qp{position:absolute; left:30px; right:0; top:26px; bottom:36px; border-left:1px solid var(--x-rule); border-bottom:1px solid var(--x-rule);}
#s4 .s4x .s4x-qtr{position:absolute; left:calc(25 / 60 * 100%); right:0; top:0; height:calc(30 / 55 * 100%); background:rgba(218,226,223,.6);}
#s4 .s4x .s4x-qy{position:absolute; right:calc(100% + 7px); top:calc((80 - var(--v)) / 55 * 100%); transform:translateY(-50%); font-size:10.5px; line-height:14px; color:var(--x-mute);}
#s4 .s4x .s4x-qx{position:absolute; top:calc(100% + 4px); left:calc((var(--v) - 25) / 60 * 100%); transform:translateX(-50%); font-size:10.5px; line-height:14px; color:var(--x-mute);}
#s4 .s4x .s4x-qx[style*="--v:50"],#s4 .s4x .s4x-qy[style*="--v:50"]{color:var(--x-ink); font-weight:500;}
#s4 .s4x .s4x-qh{position:absolute; left:0; right:0; top:calc(30 / 55 * 100%); height:0; border-top:1px solid var(--x-ink); transform-origin:calc(25 / 60 * 100%) 0;}
#s4 .s4x .s4x-qv{position:absolute; top:0; bottom:0; left:calc(25 / 60 * 100%); width:0; border-left:1px solid var(--x-ink);}
#s4 .s4x .s4x-ql{position:absolute; font-size:11px; line-height:13px; color:var(--x-mute); white-space:nowrap;}
#s4 .s4x .s4x-ql--tl{left:8px; top:7px;}
#s4 .s4x .s4x-ql--tr{right:8px; top:7px; color:var(--x-2); font-weight:500;}
#s4 .s4x .s4x-ql--bl{left:8px; bottom:6px;}
#s4 .s4x .s4x-ql--br{right:8px; bottom:6px;}
#s4 .s4x .s4x-qd{position:absolute; width:0; height:0; left:calc((var(--x) - 25) / 60 * 100%); top:calc((80 - var(--y)) / 55 * 100%); z-index:1;}
#s4 .s4x .s4x-qd > .s4x-dt{position:absolute; left:-4px; top:-4px;}
#s4 .s4x .s4x-qd > span{
  position:absolute; top:-7px; font-size:11px; line-height:14px; font-weight:500; color:var(--x-ink); white-space:nowrap;
  text-shadow:0 0 2px var(--x-surface),0 0 2px var(--x-surface),0 0 3px var(--x-surface);
}
#s4 .s4x .s4x-qd.is-lo > span{color:var(--x-2); font-weight:400;}
#s4 .s4x .s4x-qd--r > span{left:8px;}
#s4 .s4x .s4x-qd--l > span{right:8px;}
#s4 .s4x .s4x-qd--b > span{top:5px; left:0; transform:translateX(-50%);}
/* above its dot: to the right it would run across the split at 50, to the left into Ivan */
#s4 .s4x .s4x-qd--a > span{top:-20px; left:0; transform:translateX(-50%);}

/* ---------- Strength profile ---------- */
#s4 .s4x .s4x-radar{position:absolute; left:0; top:0; bottom:0; right:232px;}
/* The radar fills the stage height. --rs is px per score point; the box is a zero-width
   anchor at the chart's centre line, and every label sits off a vertex by calc(). The
   svg's viewBox runs y -124..101 (the 100 ring's top vertex at -120, bottom ones at +97). */
#s4 .s4x .s4x-rbox{--rs:1.28px; --top:20px; --cy:calc(var(--top) + var(--rs) * 124); position:absolute; left:50%; top:0; width:0; height:100%;}
#s4 .s4x .s4x-rd{position:absolute; left:calc(var(--rs) * -150); top:var(--top); width:calc(var(--rs) * 300); height:calc(var(--rs) * 225); overflow:visible;}
#s4 .s4x .s4x-rgrid polygon,#s4 .s4x .s4x-rgrid line{fill:none; stroke:rgba(201,194,195,.8); stroke-width:1; vector-effect:non-scaling-stroke;}
#s4 .s4x .s4x-rp{fill:none; stroke-width:1.5; stroke-linejoin:round; vector-effect:non-scaling-stroke; transform-box:view-box; transform-origin:0 0;}
/* line grammar: your bar thin ink dashes (ink, as the Skill vs Experience split: the bar is an
   overall-score line, so it takes no rose on per-category axes); pool average grey dots;
   Priya rose; Alex green; Maya long green dashes */
#s4 .s4x .s4x-rp--bar{stroke:var(--x-ink); stroke-width:1; stroke-dasharray:3 3; opacity:.6;}
#s4 .s4x .s4x-rp--avg{stroke:var(--x-mute); stroke-width:2; stroke-dasharray:0 4; stroke-linecap:round;}
#s4 .s4x .s4x-rp--2{stroke:var(--x-ok-d); stroke-dasharray:7 4;}
#s4 .s4x .s4x-rp--1{stroke:var(--x-ok);}
#s4 .s4x .s4x-rp--0{stroke:var(--x-rose);}
#s4 .s4x .s4x-rc{position:absolute; left:0; top:var(--cy); width:0; height:0;}
#s4 .s4x .s4x-ra{position:absolute; font-size:11px; line-height:13px; color:var(--x-2); white-space:nowrap;}
#s4 .s4x .s4x-ra--0{left:0; top:calc(var(--top) + var(--rs) * 4 - 17px); transform:translateX(-50%);}
#s4 .s4x .s4x-ra--1{left:calc(var(--rs) * 114.1 + 8px); top:calc(var(--cy) - var(--rs) * 37.1 - 7px);}
#s4 .s4x .s4x-ra--2{left:calc(var(--rs) * 70.5 - 10px); top:calc(var(--cy) + var(--rs) * 97.1 + 5px);}
#s4 .s4x .s4x-ra--3{left:calc(var(--rs) * -70.5 + 10px); top:calc(var(--cy) + var(--rs) * 97.1 + 5px); transform:translateX(-100%); text-align:right;}
#s4 .s4x .s4x-ra--4{left:calc(var(--rs) * -114.1 - 8px); top:calc(var(--cy) - var(--rs) * 37.1 - 13px); transform:translateX(-100%); text-align:right;}
#s4 .s4x .s4x-ra.is-key{color:var(--x-ink); font-weight:600;}
#s4 .s4x .s4x-key{list-style:none; margin:0; padding:0; border-top:1px solid var(--x-rule);}
#s4 .s4x .s4x-kr{display:flex; align-items:center; gap:8px; height:var(--x-rh); border-bottom:1px solid var(--x-line);}
#s4 .s4x .s4x-kr > i:not(.s4x-dt){display:block; flex:none; width:8px;}
#s4 .s4x .s4x-kn{flex:1; min-width:0; font-size:12px; line-height:1; font-weight:500; color:var(--x-ink); white-space:nowrap; letter-spacing:-.005em;}
#s4 .s4x .s4x-kr--avg .s4x-kn,#s4 .s4x .s4x-kr--bar .s4x-kn{font-weight:400; color:var(--x-2);}
#s4 .s4x .s4x-kr:first-child{background:rgba(206,123,145,.09); box-shadow:-6px 0 0 rgba(206,123,145,.09), 6px 0 0 rgba(206,123,145,.09);}
#s4 .s4x .s4x-kv{font-size:12px; line-height:1; font-weight:500; color:var(--x-ink);}
#s4 .s4x .s4x-ks{display:block; flex:none; width:18px; height:6px; overflow:visible;}
#s4 .s4x .s4x-ks line{stroke-width:1.5; fill:none;}
#s4 .s4x .s4x-ks--0 line{stroke:var(--x-rose);}
#s4 .s4x .s4x-ks--1 line{stroke:var(--x-ok);}
#s4 .s4x .s4x-ks--2 line{stroke:var(--x-ok-d); stroke-dasharray:7 4;}
#s4 .s4x .s4x-ks--avg line{stroke:var(--x-mute); stroke-width:2; stroke-dasharray:0 4; stroke-linecap:round;}
#s4 .s4x .s4x-ks--bar line{stroke:var(--x-ink); stroke-width:1; stroke-dasharray:3 3; opacity:.6;}

/* ---------- Phone: the same four lenses, one at a time under the same tabs ----------
   The sections share one grid cell, so the widget is as tall as the tallest lens
   (Your bar) and a tab never moves the page under it. No tour on the phone. */
#s4 .s4x.s4x-mw .s4x-tabs{gap:16px; height:34px; padding:0 14px;}
#s4 .s4x.s4x-mw .s4x-tab{font-size:12.5px; line-height:33px; min-height:34px;}
#s4 .s4x.s4x-mw .s4x-secs{display:grid;}
#s4 .s4x.s4x-mw .s4x-sec{grid-area:1 / 1; min-width:0; visibility:hidden; opacity:0; transition:opacity .1s linear, visibility 0s linear .1s;}
#s4 .s4x.s4x-mw .s4x-sec.is-on{visibility:visible; opacity:1; transition:opacity .4s var(--x-ease) .1s, visibility 0s;}
#s4 .s4x.s4x-mw .s4x-dist{position:relative; margin-top:12px; padding-bottom:52px;}
#s4 .s4x.s4x-mw .s4x-dcols{position:relative;}
#s4 .s4x.s4x-mw .s4x-dcol{gap:3px; padding:0 2px;}
#s4 .s4x.s4x-mw .s4x-dct{height:16px; line-height:16px; margin-bottom:4px; font-size:12px;}
#s4 .s4x.s4x-mw .s4x-cell{height:24px; padding:0 4px; gap:3px; border-radius:3px;}
#s4 .s4x.s4x-mw .s4x-cs{padding-left:2px;}
#s4 .s4x.s4x-mw .s4x-cell .s4x-dt{display:none;}
#s4 .s4x.s4x-mw .s4x-cn,#s4 .s4x.s4x-mw .s4x-cs{font-size:11px;}
#s4 .s4x.s4x-mw .s4x-rug{position:relative; top:auto; margin-top:30px; height:18px;}
#s4 .s4x.s4x-mw .s4x-rug::before{top:17px;}
#s4 .s4x.s4x-mw .s4x-band{height:17px;}
#s4 .s4x.s4x-mw .s4x-rt{top:4px; height:13px;}
#s4 .s4x.s4x-mw .s4x-dax{position:absolute; left:0; right:0; top:0; bottom:0; pointer-events:none;}
#s4 .s4x.s4x-mw .s4x-dax span{position:absolute; bottom:16px; left:calc((var(--t) - 40) * 2%); transform:translateX(-50%); font-family:'Space Grotesk','Space Grotesk Fallback',sans-serif; font-variant-numeric:tabular-nums; font-size:11px; line-height:14px; color:var(--x-mute);}
#s4 .s4x.s4x-mw .s4x-dax span:first-child{transform:none;}
#s4 .s4x.s4x-mw .s4x-dax span:last-of-type{transform:translateX(-100%);}
#s4 .s4x.s4x-mw .s4x-dax span.is-bar{color:var(--x-rose-d); font-weight:600;}
#s4 .s4x.s4x-mw .s4x-dv{position:absolute; left:calc((var(--b) - 40) * 2%); top:20px; bottom:32px; width:0; margin-left:-.5px; border-left:1px solid var(--x-rose);}
#s4 .s4x.s4x-mw .s4x-mn{margin:0; font-size:12px; line-height:16px; color:var(--x-2);}
#s4 .s4x.s4x-mw .s4x-mn b{font-weight:600; color:var(--x-ink);}
#s4 .s4x.s4x-mw .s4x-mn .s4x-n{color:var(--x-ink);}
#s4 .s4x.s4x-mw .s4x-mn > .s4x-set{display:block; margin-top:4px; color:var(--x-mute);}
#s4 .s4x.s4x-mw .s4x-mn > .s4x-set .s4x-n{color:var(--x-2);}
#s4 .s4x.s4x-mw .s4x-quad{position:relative; height:262px; margin-top:10px;}
#s4 .s4x.s4x-mw .s4x-qp{left:24px; right:4px; top:24px; bottom:36px;}
#s4 .s4x.s4x-mw .s4x-qy{right:calc(100% + 5px);}
#s4 .s4x.s4x-mw .s4x-ql{font-size:10.5px;}
#s4 .s4x.s4x-mw .s4x-qd > .s4x-dt{width:7px; height:7px; left:-3.5px; top:-3.5px;}
#s4 .s4x.s4x-mw .s4x-qd > span{font-size:10.5px; line-height:13px; top:-6.5px;}
#s4 .s4x.s4x-mw .s4x-qd--r > span{left:6px;}
#s4 .s4x.s4x-mw .s4x-qd--l > span{right:6px;}
#s4 .s4x.s4x-mw .s4x-qd--b > span{top:4px;}
#s4 .s4x.s4x-mw .s4x-qd--a > span{top:-18px;}
#s4 .s4x.s4x-mw .s4x-radar{position:relative; height:232px; margin-top:8px;}
#s4 .s4x.s4x-mw .s4x-rbox{--rs:.86px; --top:18px;}
#s4 .s4x.s4x-mw .s4x-ra{font-size:10.5px; line-height:12px;}
#s4 .s4x.s4x-mw .s4x-ln{position:static; width:auto; margin-top:6px; gap:8px;}
#s4 .s4x.s4x-mw .s4x-lnote > b{white-space:normal; font-size:12.5px; line-height:17px;}
#s4 .s4x.s4x-mw .s4x-lnote > span{font-size:12px; line-height:16px;}
#s4 .s4x.s4x-mw .s4x-key{--x-rh:22px;}
#s4 .s4x.s4x-mw .s4x-kn,#s4 .s4x.s4x-mw .s4x-kv{font-size:12px;}

/* The slide's salt texture (.salt-texture-dark::after, z-index 0) comes after the
   body in paint order; while [data-slide-body] is its own stacking context during
   the slide transition, the texture dots land on the white window. Lift the body. */
#s4 .feat-slide{position:relative; z-index:1;}
/* An inactive deck slide never takes the pointer, nor does anything inside it. The
   invisible s5 (opacity 0, painted above s4) kept pointer-events:auto on its open case
   panel (.tc-panel.tc-on) and swallowed every click over the s4 window; any later
   pointer-events:auto descendant on a hidden slide would do the same. The phone flow
   (.m-flow) shows every slide at once and is left alone. */
.slide:not(.on):not(.m-flow) *{pointer-events:none !important;}
/* the ranked list, once, for screen readers (both widgets are role=figure, their
   drawing aria-hidden); .s4x-say speaks a lens's finding when its tab is pressed */
#s4 .s4x .s4x-say,
#s4 .s4x.s4x-sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}

/* Panel 1: Score cards */
.p1-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:18px;}
.p1-h{font-family:'Fraunces','Fraunces Fallback','Fraunces Fallback Android',serif;font-size:18px;color:var(--txt);}
.p1-s{font-size:12px;color:var(--mute);}
.cand{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:10px;border:1.5px solid var(--bdr);margin-bottom:9px;cursor:pointer;transition:border-color .2s,box-shadow .15s;}
.cand.open{border-color:var(--p);box-shadow:0 2px 10px rgba(206,123,145,.1);}
.c-rk{font-family:'Space Mono','Space Mono Fallback',monospace;font-size:11px;color:var(--mute);width:14px;}
.c-info{flex:1;}
.c-nm{font-size:13px;font-weight:600;color:var(--txt);}
.c-mt{font-size:11px;color:var(--mute);}
.c-gr{font-size:11px;font-weight:700;padding:4px 11px;border-radius:100px;}
.gr-a{background:rgba(91,158,126,.12);color:#5B9E7E;}
.gr-b{background:rgba(206,123,145,.12);color:#7A5C28;}
.gr-c{background:rgba(206,123,145,.12);color:var(--p2);}
.c-exp{overflow:hidden;max-height:0;transition:max-height .35s ease;}
.cand.open .c-exp{max-height:140px;}
.sub-g{display:flex;flex-direction:column;gap:5px;padding:8px 0 2px;}
.sub-row{display:flex;align-items:center;gap:6px;font-size:10px;color:var(--mute);}
.sub-row>span:first-child{width:58px;flex-shrink:0;}
.sub-bw{flex:1;height:5px;background:var(--bdr);border-radius:2px;overflow:hidden;}
.sub-bf{height:100%;border-radius:2px;}
.sub-sc{font-family:'Space Mono','Space Mono Fallback',monospace;font-size:10px;color:var(--txt);width:20px;text-align:right;}

/* Panel 2: Analytics */
.p2-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:18px;}
.p2-h{font-family:'Fraunces','Fraunces Fallback','Fraunces Fallback Android',serif;font-size:18px;color:var(--txt);}
.kpi-g{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px;}
.kpi-c{background:var(--bg);border-radius:10px;padding:12px 14px;border:1px solid var(--bdr);}
.kpi-c.hl{background:rgba(206,123,145,.07);}
.kpi-n{font-family:'Fraunces','Fraunces Fallback','Fraunces Fallback Android',serif;font-size:20px;color:var(--p);line-height:1;}
.kpi-l{font-size:10px;color:var(--mute);margin-top:3px;}
.chart-w{display:grid;grid-template-columns:1fr .8fr;gap:14px;}
.chart-b,.hm-b{background:var(--bg);border-radius:10px;padding:14px;border:1px solid var(--bdr);}
.chart-l{font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin-bottom:10px;}
.bars{display:flex;align-items:flex-end;gap:5px;height:80px;}
.bar-c{display:flex;flex-direction:column;align-items:center;gap:2px;flex:1;}
.bar-f{width:100%;border-radius:2px 2px 0 0;background:var(--p);}
.bar-f.dim{opacity:.3;}
.bar-t{font-size:8px;color:var(--mute);}
.hm-r{display:flex;align-items:center;gap:5px;margin-bottom:7px;font-size:10px;}
.hm-l{width:58px;color:var(--mute);flex-shrink:0;}
.hm-bw{flex:1;height:5px;background:var(--bdr);border-radius:2px;overflow:hidden;}
.hm-bf{height:100%;border-radius:2px;}
.hm-sc{font-family:'Space Mono','Space Mono Fallback',monospace;font-size:10px;color:var(--txt);width:18px;text-align:right;}
/* ── Desktop heatmap matrix (Insights slide) ── */
.dw-hmap-hdr{display:flex;gap:3px;margin-bottom:6px;padding-left:51px;}
.dw-hmap-cname{flex:1;font-size:8px;font-weight:600;color:var(--mute);text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.dw-hmap-row{display:flex;align-items:center;gap:3px;margin-bottom:4px;}
.dw-hmap-row:last-child{margin-bottom:0;}
.dw-hmap-lbl{font-size:9px;color:var(--sec);width:48px;flex-shrink:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dw-hmap-cell{flex:1;height:24px;border-radius:4px;display:flex;align-items:center;justify-content:center;font-family:'Space Mono','Space Mono Fallback',monospace;font-size:8.5px;font-weight:700;color:#fff;}

/* ════════════════ SLIDE 7 — PRICING ════════════════ */
#s7 > #s7-inner{max-width:1060px;width:100%;padding:48px 24px 0;display:flex;flex-direction:column;align-items:center;}
.pr-eye{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--rose-on-sm);text-shadow:var(--rose-glow);margin-bottom:8px;}
.pr-h{font-family:'Fraunces','Fraunces Fallback','Fraunces Fallback Android',serif;font-size:clamp(28px,3.5vw,44px);color:#FBFBFB;margin-bottom:6px;text-align:center;line-height:1.1;}
/* FIN-5 — the subtitle carries the offer; it was 13px at 40% white (below AA) */
.pr-sub{font-size:15px;line-height:1.55;color:var(--on-2);margin:10px auto 28px;text-align:center;max-width:520px;}
/* FIN-5 — footnote: its own class (it used to borrow the s8 .cta-s) and quieter than the subtitle */
.pr-foot{position:relative;z-index:1;font-family:'Inter Tight','Inter Tight Fallback',sans-serif;font-size:12.5px;color:var(--on-3);letter-spacing:.01em;margin-top:18px;text-align:center;}
/* FIN-4 — Buy Credits / Subscribe toggle: bone pill on dark (rose stays for badges) */
.pr-toggle{position:relative;display:inline-grid;grid-template-columns:1fr 1fr;align-items:center;margin:0 auto 2rem;padding:4px;border-radius:9999px;background:rgba(251,251,251,.08);border:1px solid rgba(251,251,251,.14);}
.pr-pill{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:9999px;background:#FBFBFB;box-shadow:0 2px 10px rgba(0,0,0,.18);}
.pr-tbtn{position:relative;z-index:1;min-height:44px;padding:0 1.75rem;border:none;border-radius:9999px;background:transparent;cursor:pointer;font-family:'Inter Tight','Inter Tight Fallback',sans-serif;font-size:.875rem;font-weight:600;color:rgba(251,251,251,.7);transition:color .3s cubic-bezier(.16,1,.3,1) .12s;}
.pr-tbtn[aria-pressed="true"]{color:#1B1B1F;}
.pr-tbtn:not([aria-pressed="true"]):hover{color:#FBFBFB;}
.pr-tbtn:focus-visible{outline:2px solid #FBFBFB;outline-offset:3px;}
/* FIN-4 - grid + footnote share a stage that holds the taller of the two states, so
   the centred slide never moves; cards keep their natural height (no stretch). */
.pr-stage{width:100%;display:flex;flex-direction:column;align-items:center;}
#pr-grid{align-content:start;align-items:stretch;}
/* QA-S7 - the deck centres s7 below the opaque nav, never under it. `safe` drops
   to top alignment when the content is taller than the room; the JS fit in
   measure() scales the body down so that only happens before the fit has run. */
#s7:not(.m-flow){padding-top:72px;padding-bottom:12px;align-items:safe center;}
.pr-feat-more{display:none;font-size:.75rem;color:rgba(255,255,255,.55);padding-left:calc(11px + .35rem);}
/* CRISP-1 - the slide fits the room by layout, in tiers, and the card text keeps
   its real size. It used to be scaled down as a whole (scale .92 at 1536x864,
   .79 at 1280x610), which set the 10-12px card text at 7.9-11px. fit() in the s7
   script picks the first tier that fits; the transform scale is only the last
   resort for windows shorter than tier 3 can hold.
   Tier 1: tighter header; plan feature lists collapse to four items plus a count. */
#s7.pr-fit-1:not(.m-flow) > #s7-inner{padding-top:4px;}
#s7.pr-fit-1:not(.m-flow) .pr-h{font-size:clamp(28px,min(3.5vw,5vh),44px);}
#s7.pr-fit-1:not(.m-flow) .pr-sub{margin:6px auto 16px;}
#s7.pr-fit-1:not(.m-flow) .pr-toggle{margin-bottom:1.35rem;}
#s7.pr-fit-1:not(.m-flow) .pr-feats > .pr-feat:nth-child(n+5){display:none !important;}
#s7.pr-fit-1:not(.m-flow) .pr-feat-more{display:block;}
/* Tier 2: shorter headline, a wider subtitle (one line on laptop widths) and less
   air inside the cards (the 44px spacer above the resume count shrinks; the
   badges sit outside it). */
#s7.pr-fit-2:not(.m-flow) .pr-eye{margin-bottom:4px;}
#s7.pr-fit-2:not(.m-flow) .pr-h{font-size:clamp(26px,min(3vw,4.4vh),38px);}
#s7.pr-fit-2:not(.m-flow) .pr-sub{max-width:none;margin:4px auto 12px;}
#s7.pr-fit-2:not(.m-flow) .pr-toggle{margin-bottom:1rem;}
#s7.pr-fit-2:not(.m-flow) .pack-card{padding:18px 20px 20px;}
#s7.pr-fit-2:not(.m-flow) .pack-card > .mb-6{height:6px;margin-bottom:8px;}
#s7.pr-fit-2:not(.m-flow) .pack-per-resume{margin-bottom:10px;}
#s7.pr-fit-2:not(.m-flow) .pack-desc{margin-top:10px;margin-bottom:12px;}
#s7.pr-fit-2:not(.m-flow) #pr-grid{margin-bottom:8px !important;}
#s7.pr-fit-2:not(.m-flow) .pr-foot{margin-top:10px;}
/* Tier 3 (about 600px of room: 1280x720 and 1366x768 laptops once the browser's
   own bars are taken): no eyebrow (the nav already says Pricing), a smaller
   headline, tighter cards and no "+N more" line under the plan features. */
#s7.pr-fit-3:not(.m-flow) .pr-eye{display:none;}
#s7.pr-fit-3:not(.m-flow) .pr-h{font-size:clamp(24px,min(2.6vw,4vh),32px);}
#s7.pr-fit-3:not(.m-flow) .pr-toggle{margin-bottom:.75rem;}
#s7.pr-fit-3:not(.m-flow) .pack-card{padding:14px 18px 16px;}
#s7.pr-fit-3:not(.m-flow) .pack-desc{margin-top:8px;margin-bottom:10px;}
#s7.pr-fit-3:not(.m-flow) .pr-feats{gap:.2rem !important;margin-bottom:.75rem !important;}
#s7.pr-fit-3:not(.m-flow) .pr-feat-more{display:none;}
#s7.pr-fit-3:not(.m-flow) .pr-foot{margin-top:6px;}
/* Flow mode (phones and tablets): plan features start under the description. The
   inline flex-end pushed the shorter Scale list down to line up with Enterprise,
   leaving a tall empty gap above it once the two cards share a row. */
#s7.m-flow .pr-feats{justify-content:flex-start !important;}

/* Pack grid */
.pack-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,260px));justify-content:center;gap:14px;width:100%;margin-bottom:16px;}
.pack-card{
  /* No backdrop-filter — with the aurora moving behind, each card was
     re-sampling the gradient every frame. 4 cards on s7 explains why
     s7 flickered worst. Higher-alpha solid bg gives the same dark-glass
     read without the per-frame backdrop blur cost. */
  background:rgba(20,14,10,.55);
  border:1.5px solid rgba(255,255,255,.08);border-radius:16px;padding:24px 20px;
  position:relative;
  transition:background .35s cubic-bezier(.4,0,.2,1),
             border-color .35s cubic-bezier(.4,0,.2,1),
             --lift .35s cubic-bezier(.16,1,.3,1);
  /* --ey is the entrance/swap offset (tweened by gsap); --lift is the CSS rest/hover
     offset. gsap folds a CSS `translate` into its own transform and resets it, so the
     two offsets meet in one transform instead. */
  --ey:0px;--lift:0px;
  transform:translateY(calc(var(--ey) + var(--lift)));
  display:flex;flex-direction:column;align-items:flex-start;
  text-decoration:none;color:inherit;
}
/* Lifts use the individual `translate` property so they compose with the gsap
   entrance/swap tweens (which own `transform`) instead of being overwritten by them. */
@property --lift{syntax:'<length>';inherits:false;initial-value:0px;}
.pack-card:hover{border-color:rgba(251,251,251,.22);--lift:-4px;}
.pack-card:focus-visible{outline:2px solid #FBFBFB;outline-offset:3px;}
/* FIN-5 — tier identity is a 1px top hairline in the tier colour plus the badge.
   The old 40-50px rose/green outer glows read as neon on the dark finale. The
   recommended pack sits 8px higher on a slightly deeper ground. */
.pack-card.pack-best--most_popular{
  border-color:rgba(206,123,145,.30);
  box-shadow:inset 0 1px 0 rgba(206,123,145,.6);
  background:rgba(20,14,10,.68);
  --lift:-8px;
}
.pack-card.pack-best--most_popular:hover{--lift:-12px;border-color:rgba(206,123,145,.45);}
.pack-card.pack-best--best_value{
  border-color:rgba(91,158,126,.30);
  box-shadow:inset 0 1px 0 rgba(91,158,126,.6);
}
.pack-card.pack-best--best_value:hover{border-color:rgba(91,158,126,.45);}
.pack-card.pack-best--new{
  border-color:rgba(251,251,251,.20);
  box-shadow:inset 0 1px 0 rgba(251,251,251,.4);
}
/* FIN-4 — the Free card is the constant across the toggle: a hairline flash on each switch */
.pack-flash{position:absolute;left:16px;right:16px;top:-1px;height:1px;background:linear-gradient(90deg,rgba(251,251,251,0),rgba(251,251,251,.8) 50%,rgba(251,251,251,0));opacity:0;pointer-events:none;}
/* Badge strip — floats above card top edge; stacks multiple badges side-by-side */
.pack-badges{
  position:absolute;top:-13px;left:0;right:0;
  display:flex;justify-content:center;gap:6px;
  pointer-events:none;
}
.pack-badge{
  font-family:'Inter Tight','Inter Tight Fallback',sans-serif;font-size:10px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;
  padding:3px 12px;border-radius:100px;white-space:nowrap;
}
.pack-badge--most_popular{background:#B05A72;color:#FBFBFB;}
.pack-badge--best_value  {background:#4E8A6D;color:#FBFBFB;}
.pack-badge--new         {background:#5C5C60;color:#FBFBFB;}
.pack-resumes{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(251,251,251,.6);margin-bottom:10px;}
.pack-price-amt{font-family:'Fraunces','Fraunces Fallback','Fraunces Fallback Android',serif;font-size:32px;color:#FBFBFB;line-height:1;margin-bottom:6px;font-variant-numeric:tabular-nums;}
/* FIN-5 — per-resume price is the comparison a recruiter makes; promote it */
.pack-per-resume{font-family:'Space Grotesk','Space Grotesk Fallback',sans-serif;font-size:13px;color:rgba(251,251,251,.78);font-variant-numeric:tabular-nums;margin-bottom:14px;display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;}
.pack-save{font-family:'Space Mono','Space Mono Fallback',monospace;font-size:10px;letter-spacing:.02em;color:#7DBF9E;background:rgba(91,158,126,.14);border-radius:4px;padding:2px 6px;white-space:nowrap;}
.pack-tag{
  font-family:'Inter Tight','Inter Tight Fallback',sans-serif;font-size:10px;font-weight:600;
  padding:3px 10px;border-radius:100px;letter-spacing:.04em;
  display:inline-block;
}
.tag-neutral{background:rgba(255,255,255,.06);color:rgba(251,251,251,.45);}
.tag-green{background:rgba(91,158,126,.15);color:#5B9E7E;}
.tag-fix{background:rgba(91,158,126,.2);color:#5B9E7E;}
.tag-agency{background:rgba(206,123,145,.12);color:var(--p);}
.pack-desc{font-family:'Inter Tight','Inter Tight Fallback',sans-serif;font-size:12px;color:rgba(251,251,251,.7);line-height:1.55;margin-top:14px;margin-bottom:16px;}

/* Note bar */
.pack-note{
  display:flex;align-items:flex-start;gap:10px;
  font-size:11px;color:rgba(251,251,251,.4);line-height:1.65;
  background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.06);
  border-radius:10px;padding:14px 20px;width:100%;margin-bottom:20px;
}
.pack-note-icon{color:var(--rose-on-sm);flex-shrink:0;font-size:13px;margin-top:1px;}

/* CTA under packs */
.pack-buy-btn{margin-top:auto;width:100%;font-family:'Inter Tight','Inter Tight Fallback',sans-serif;font-size:13px;font-weight:600;color:#fff;background:var(--p);border:none;border-radius:9px;padding:11px 0;text-align:center;cursor:pointer;transition:background .2s,transform .15s;letter-spacing:.01em;}
.pack-card:hover .pack-buy-btn{background:var(--p2);}
.pack-cta-row{display:flex;gap:16px;justify-content:center;align-items:center;margin-top:12px;}
.pack-cta-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  font-family:'Inter Tight','Inter Tight Fallback',sans-serif;font-size:13px;font-weight:600;
  padding:11px 28px;border-radius:100px;
  background:var(--p);color:#fff;
  box-shadow:0 4px 18px rgba(206,123,145,.28);
  transition:all .2s;cursor:pointer;text-decoration:none;
}
.pack-cta-btn:hover{background:var(--p2);transform:translateY(-1px);}
.pack-cta-link{
  font-family:'Inter Tight','Inter Tight Fallback',sans-serif;font-size:12px;color:rgba(251,251,251,.45);
  text-decoration:none;transition:color .2s;
}
.pack-cta-link:hover{color:var(--rose-on-sm);}

/* ════════════════ SLIDE 6 — HIRING INTELLIGENCE ════════════════
   A light paper panel on the forest (like The Case's windows): white borderless
   cards on #FBFBFB, ink text and links, sage on card hover, rose-brown only on the
   italic heading line (large text, 4.5:1 on the panel). No gradients. The deck
   centres the panel below the opaque nav; the fit script scales it when the room
   is shorter than the panel. */
#s6:not(.m-flow){padding-top:72px;padding-bottom:14px;align-items:safe center;}
#s6 > .s6-inner{position:relative;z-index:1;width:100%;max-width:1340px;padding:0 clamp(24px,4.4vw,64px);}
.s6-panel{background:#FBFBFB;border:1px solid #C9C2C3;border-radius:10px;color:#1B1B1F;
  padding:clamp(22px,3.6vh,40px) clamp(22px,2.8vw,40px) clamp(20px,3.2vh,36px);
  box-shadow:0 28px 64px -32px rgba(0,0,0,.5);}
.s6-kick{font-family:'Space Mono','Space Mono Fallback',monospace;font-size:11px;font-weight:400;letter-spacing:.22em;text-transform:uppercase;color:#73716E;}
.s6-h{font-family:'Fraunces','Fraunces Fallback','Fraunces Fallback Android',serif;font-weight:400;font-size:clamp(30px,min(3.1vw,5.4vh),46px);line-height:1.08;letter-spacing:-.015em;color:#1B1B1F;margin-top:clamp(8px,1.5vh,14px);}
.s6-h em{font-style:italic;color:#B05A72;}
/* the motion-mark sweep, recoloured for the light panel (ink, and rose-brown on the em) */
#s6 .s6-h.mm-reveal{--mm-rest:rgba(27,27,31,.2);--mm-ink:#1B1B1F;--mm-em-rest:rgba(176,90,114,.24);--mm-em-ink:#B05A72;}
.s6-sub{margin-top:clamp(8px,1.5vh,14px);max-width:780px;font-size:clamp(14.5px,1.2vw,17.5px);line-height:1.55;color:#5C5C60;}
/* Sign-up and pricing links: last in reading order, but drawn at the right end of the kicker row,
   which is otherwise empty, so the panel does not grow. Phones stack them under the sub-line. */
.s6-head{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:32px;}
.s6-head > *{grid-column:1 / -1;}
.s6-head > .s6-kick{grid-column:1;grid-row:1;align-self:center;}
.s6-head > .s6-cta{grid-column:2;grid-row:1;align-self:center;}
/* On the light panel the pair inverts: a solid ink pill and an ink outline pill */
.s6-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px 10px;margin:0;}
.s6-cta-main,.s6-cta-aside{display:inline-flex;align-items:center;font-family:'Inter Tight','Inter Tight Fallback',sans-serif;letter-spacing:.02em;line-height:1.2;border-radius:100px;text-decoration:none;
  transition:background .2s ease,border-color .2s ease,box-shadow .2s ease;}
.s6-cta-main{font-size:13.5px;font-weight:600;padding:10px 20px;background:#1B1B1F;color:#FBFBFB;box-shadow:0 4px 14px rgba(27,27,31,.18);}
.s6-cta-aside{font-size:13px;font-weight:500;padding:9px 18px;border:1.5px solid #C9C2C3;color:#1B1B1F;background:transparent;}
.s6-cta-main:hover{background:#000000;box-shadow:0 8px 24px rgba(27,27,31,.28);}
.s6-cta-aside:hover{border-color:#1B1B1F;background:#DAE2DF;}
.s6-cta a:focus-visible{outline:2px solid #1B1B1F;outline-offset:3px;}
.s6-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.3vw,20px);margin-top:clamp(16px,3vh,32px);}
.s6-card{background:#FFFFFF;border-radius:8px;display:flex;flex-direction:column;min-width:0;
  padding:clamp(18px,2.8vh,28px) clamp(18px,2vw,30px) clamp(18px,2.6vh,26px);
  transition:background-color .18s cubic-bezier(.16,1,.3,1);}
.s6-card:hover{background:#DAE2DF;}
.s6-ct{font-family:'Fraunces','Fraunces Fallback','Fraunces Fallback Android',serif;font-weight:400;font-size:clamp(19px,min(1.65vw,3vh),25px);line-height:1.2;letter-spacing:-.01em;color:#1B1B1F;text-wrap:balance;}
.s6-cd{margin-top:8px;font-size:clamp(13.5px,1.08vw,15.5px);line-height:1.55;color:#5C5C60;}
.s6-lk{margin-top:clamp(10px,1.6vh,16px);align-self:flex-start;display:inline-flex;align-items:baseline;gap:6px;min-height:24px;
  font-size:clamp(13.5px,1.08vw,15.5px);font-weight:500;line-height:1.4;color:#1B1B1F;text-decoration:none;border-bottom:1px solid #1B1B1F;padding-bottom:1px;}
.s6-ar{display:inline-block;transition:transform .18s cubic-bezier(.16,1,.3,1);}
.s6-lk:hover .s6-ar{transform:translateX(3px);}
.s6-lk:focus-visible{outline:2px solid #1B1B1F;outline-offset:4px;border-radius:2px;}
.s6-vis{margin-top:clamp(14px,2.4vh,24px);flex:1;display:flex;flex-direction:column;justify-content:center;gap:clamp(10px,1.6vh,14px);
  background:#FBFBFB;border-radius:6px;padding:clamp(14px,2.4vh,22px) clamp(14px,1.6vw,22px);transition:background-color .18s cubic-bezier(.16,1,.3,1);}
.s6-card:hover .s6-vis{background:rgba(255,255,255,.7);}
.s6-vis ul,.s6-vis ol{list-style:none;}

/* card 1 - number slider. Every slide shares one grid cell, so the stage is always
   as tall as the tallest slide and the card never jumps. */
.s6-num{position:relative;display:flex;flex-direction:column;gap:clamp(8px,1.4vh,12px);container-type:inline-size;}
.s6-num-stage{display:grid;}
.s6-num-item{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .25s ease-out,transform .5s cubic-bezier(.16,1,.3,1),visibility 0s linear .25s;}
.s6-num-item.is-on{opacity:1;visibility:visible;transform:none;
  transition:opacity .45s ease-out .08s,transform .6s cubic-bezier(.16,1,.3,1) .08s,visibility 0s;}
.s6-num-tag{font-family:'Space Mono','Space Mono Fallback',monospace;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:#73716E;}
.s6-num-n{margin-top:clamp(4px,1vh,8px);font-family:'Space Grotesk','Space Grotesk Fallback',sans-serif;font-weight:600;font-size:clamp(36px,24cqi,66px);line-height:1;letter-spacing:-.03em;
  font-variant-numeric:lining-nums;color:#1B1B1F;white-space:nowrap;}
/* a word inside the numeral (the "under" and "pt" in "under 1 pt") is set small so the figures carry it */
.s6-num-w{font-size:.4em;font-weight:500;letter-spacing:0;color:#5C5C60;}
.s6-num-t{margin-top:clamp(6px,1.2vh,10px);max-width:320px;font-size:clamp(13px,1vw,14.5px);line-height:1.45;color:#5C5C60;text-wrap:pretty;}
.s6-num:focus-visible{outline:2px solid #1B1B1F;outline-offset:6px;border-radius:2px;}
.s6-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;}

/* card 2 - three rows */
.s6-rows{display:grid;gap:8px;}
.s6-rows li{display:grid;grid-template-columns:16px 1fr;gap:10px;padding:clamp(10px,1.7vh,14px) 14px;background:#FFFFFF;border-radius:4px;
  font-size:clamp(13.5px,1.05vw,15px);line-height:1.45;color:#1B1B1F;}
.s6-rows strong{font-weight:600;}
.s6-plus{font-family:'Space Mono','Space Mono Fallback',monospace;font-weight:700;color:#3A7A5E;}

/* card 3 - where a resume goes */
.s6-flow{display:flex;flex-wrap:wrap;align-items:center;gap:8px 6px;}
.s6-flow li{display:inline-flex;align-items:center;gap:6px;}
.s6-node{padding:6px 11px;border:1px solid #1B1B1F;border-radius:4px;background:#FFFFFF;font-size:clamp(12.5px,.98vw,14px);line-height:1.35;color:#1B1B1F;white-space:nowrap;}
.s6-arrow{font-family:'Space Mono','Space Mono Fallback',monospace;font-size:12px;color:#73716E;}
.s6-chips{display:flex;flex-wrap:wrap;gap:6px;}
/* chip text uses the dark green and dark ochre: #5B9E7E and #B5853A text fail AA on white */
.s6-chip{padding:3px 10px;border:1px solid #5B9E7E;border-radius:999px;background:#FFFFFF;font-family:'Space Mono','Space Mono Fallback',monospace;font-size:10.5px;line-height:1.5;letter-spacing:.06em;color:#3A7A5E;}
.s6-chip--kept{border-color:#B5853A;color:#87611F;}
.s6-notes{display:grid;gap:6px;font-size:clamp(12.5px,.95vw,14px);line-height:1.45;color:#5C5C60;}
.s6-notes li{display:grid;grid-template-columns:14px 1fr;gap:8px;}
.s6-notes li::before{content:'\00B7';font-weight:700;color:#73716E;}

/* flow layouts: reduced motion on a desktop (min-width 768) and phones */
#s6.m-flow{padding:84px 0 48px;}
@media(max-width:767px){
  #s6.m-flow{padding:40px 16px 32px;}
  #s6 > .s6-inner{padding:0;}
  .s6-panel{padding:24px 18px 20px;border-radius:8px;}
  .s6-h{font-size:clamp(28px,8.4vw,36px);}
  .s6-sub{font-size:15px;}
  .s6-head{display:block;}
  .s6-cta{justify-content:flex-start;margin-top:14px;}
  .s6-cards{grid-template-columns:1fr;gap:12px;margin-top:20px;}
  .s6-card{padding:20px 18px 18px;}
  .s6-ct{font-size:21px;}
}
@media(prefers-reduced-motion:reduce){
  .s6-num-item,.s6-num-item.is-on{transition:none;transform:none;}
  .s6-card,.s6-vis,.s6-ar{transition:none;}
}

/* ════════════════ SLIDE 8 — CTA ════════════════ */
#s8-inner{max-width:880px;text-align:center;padding:60px 32px 0;}
.cta-label{font-family:'Inter Tight','Inter Tight Fallback',sans-serif;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--rose-on-sm);text-shadow:var(--rose-glow);margin-bottom:18px;}
.cta-h{font-family:'Fraunces','Fraunces Fallback','Fraunces Fallback Android',serif;font-size:clamp(38px,5vw,66px);line-height:1.06;color:#FBFBFB;margin-bottom:20px;letter-spacing:-.02em;min-height:2.2em;text-wrap:balance;}
.cta-h em{font-style:italic;color:var(--rose-on);padding-right:.16em;margin-right:-.16em;}
/* FIN-3 — two lines: a plain first line and a clipped "roll" box for the rose second
   line. Both second-line slots share one grid cell, each centred on its own, so the
   roll never changes the box width. Padding gives the italic descenders room. */
.cta-l1{display:block;}
.cta-roll{display:grid;justify-items:center;overflow:hidden;padding:.06em 0 .16em;margin:-.06em 0 -.16em;}
.cta-roll .cta-l2{grid-area:1 / 1;display:block;}
.cta-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.cta-h.mm-done{background:none !important;-webkit-text-fill-color:#FBFBFB !important;color:#FBFBFB !important;}
.cta-h.mm-done em{background:none !important;-webkit-text-fill-color:var(--rose-on) !important;color:var(--rose-on) !important;}
.pr-h.mm-done{background:none !important;-webkit-text-fill-color:#FBFBFB !important;color:#FBFBFB !important;}
.cta-s{font-family:'Inter Tight','Inter Tight Fallback',sans-serif;font-size:16px;color:var(--on-2);line-height:1.72;margin-bottom:40px;}
.cta-acts{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:8px;}
/* FIN-8 — .cta-slot takes the entrance tween, .cta-mag the magnetic pull, the
   button its own hover; three owners, three elements, no transform fights. */
.cta-slot,.cta-mag{display:inline-flex;}
.cta-mag{position:relative;border-radius:100px;}
.btn-p-inv{
  font-family:'Inter Tight','Inter Tight Fallback',sans-serif;font-size:14px;font-weight:600;padding:14px 36px;border-radius:100px;
  background:linear-gradient(135deg,#B05A72,#9F4E66);color:#FBFBFB;
  box-shadow:0 4px 18px rgba(176,90,114,.25);
  transition:background .25s cubic-bezier(.16,1,.3,1),box-shadow .25s cubic-bezier(.16,1,.3,1),transform .25s cubic-bezier(.16,1,.3,1);
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  position:relative;overflow:hidden;text-decoration:none;
}
.btn-p-inv::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.2) 50%,transparent 60%);
  background-size:200% 100%;background-position:200% 0;opacity:0;transition:opacity .3s;
}
.btn-p-inv:hover::after{opacity:1;animation:shimmer 1.1s cubic-bezier(.16,1,.3,1) 1 forwards;}
.btn-p-inv:hover{background:linear-gradient(135deg,#9A4C62,#8A4258);transform:translateY(-2px);box-shadow:0 10px 30px rgba(176,90,114,.30);}
.btn-ghost-inv{
  font-family:'Inter Tight','Inter Tight Fallback',sans-serif;font-size:14px;font-weight:500;line-height:inherit;
  color:rgba(251,251,251,.78);border:1.5px solid rgba(251,251,251,.24);
  border-radius:100px;padding:13px 28px;
  background:rgba(251,251,251,.04);
  transition:border-color .25s cubic-bezier(.16,1,.3,1),color .25s cubic-bezier(.16,1,.3,1),background .25s cubic-bezier(.16,1,.3,1);cursor:pointer;
}
.btn-ghost-inv:hover{border-color:rgba(251,251,251,.5);color:#FBFBFB;background:rgba(251,251,251,.08);}
.btn-p-inv:focus-visible,.btn-ghost-inv:focus-visible{outline:2px solid #FBFBFB;outline-offset:3px;}
/* FIN-8 — reassurance under the buttons, restating facts already on the page */
.cta-note{font-family:'Space Mono','Space Mono Fallback',monospace;font-size:11px;letter-spacing:.06em;color:var(--on-3);margin-top:14px;}

/* ── Footer ── */
.cta-footer{
  margin-top:48px;padding:28px 0 16px;
  border-top:1px solid rgba(255,255,255,.12);
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
}
.f-logo{display:flex;align-items:center;gap:8px;font-family:'Fraunces','Fraunces Fallback','Fraunces Fallback Android',serif;font-size:19px;font-style:normal;color:rgba(251,251,251,.7);letter-spacing:-.01em;}
.f-logo .salt-mark{width:28px;height:28px;}
.f-copy{font-family:'Inter Tight','Inter Tight Fallback',sans-serif;font-size:12px;color:var(--on-3);}
.f-links{display:flex;flex-wrap:wrap;gap:8px 20px;}
.f-link{font-family:'Inter Tight','Inter Tight Fallback',sans-serif;font-size:12px;font-weight:500;color:var(--on-3);transition:color .2s;cursor:pointer;text-decoration:none;}
.f-link:hover{color:var(--rose-on-sm);}

/* ─── Mobile feature widgets (hidden on desktop) ─── */
.m-widget{display:none;}
.m-widget-inner{background:#fff;border:1px solid var(--bdr);border-radius:16px;width:100%;overflow:hidden;box-shadow:0 18px 44px rgba(6,14,12,.38),0 4px 12px rgba(6,14,12,.2);}

.mw-chrome{display:flex;align-items:center;gap:8px;padding:9px 14px;background:rgba(250,249,247,.95);border-bottom:1px solid var(--bdr);}
.mw-dots{display:flex;gap:5px;align-items:center;}
.mw-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;}
.mw-url{flex:1;font-family:'Space Mono','Space Mono Fallback',monospace;font-size:9px;color:var(--mute);background:rgba(201,194,195,.4);border-radius:5px;padding:3px 8px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mw-body{padding:14px;}
.mw-title{font-family:'Inter Tight','Inter Tight Fallback',sans-serif;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);margin-bottom:10px;}
.mw-stats-strip{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;text-align:center;padding-bottom:12px;border-bottom:1px solid var(--bdr);margin-bottom:12px;}
.mw-stat-div{width:1px;height:28px;background:var(--bdr);}
.mw-stat-n{font-family:'Fraunces','Fraunces Fallback','Fraunces Fallback Android',serif;font-size:20px;color:var(--txt);line-height:1;}
.mw-stat-l{font-size:8px;color:var(--mute);text-transform:uppercase;letter-spacing:.05em;margin-top:2px;}
.mw-section-hdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;}
.mw-section-title{font-size:11px;font-weight:600;color:var(--txt);}
.mw-action{font-size:9px;font-weight:600;color:var(--p);padding:3px 8px;background:rgba(206,123,145,.1);border-radius:4px;}
.mw-job-row{display:flex;align-items:center;gap:10px;padding:8px 10px;background:#FBFBFB;border-radius:8px;border-left:2.5px solid var(--p);margin-bottom:7px;}
.mw-job-row:last-child{margin-bottom:0;}
.mw-avatar{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#fff;flex-shrink:0;}
.mw-job-body{flex:1;min-width:0;}
.mw-job-name{font-size:11px;font-weight:600;color:var(--txt);}
.mw-job-sub{font-size:9px;color:var(--mute);margin-top:1px;}
.mw-job-meta{font-size:9px;color:var(--mute);margin-top:1px;}
.mw-progress-track{height:3px;background:var(--bdr);border-radius:2px;margin-top:5px;overflow:hidden;}
.mw-progress-bar{height:100%;width:100%;border-radius:2px;transform:scaleX(0);transform-origin:left;transition:transform .7s cubic-bezier(.16,1,.3,1) .15s;}
.m-widget.is-in .mw-progress-bar{transform:scaleX(var(--pg));}
@media(prefers-reduced-motion:reduce){
  .mw-bar-fill{transition:none;transform:scaleX(calc(var(--w) * 2));}
  .mw-progress-bar{transition:none;transform:scaleX(var(--pg));}
}
.mw-badge{margin-left:auto;font-size:9px;font-weight:700;padding:2px 7px;border-radius:4px;flex-shrink:0;}
.mw-preset-bar{display:flex;align-items:center;gap:8px;margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid var(--bdr);}
.mw-preset-job{font-size:10px;font-weight:600;color:var(--txt);flex:1;}
.mw-save-btn{font-size:9px;font-weight:600;color:var(--p);white-space:nowrap;}
.mw-tabs{display:flex;gap:4px;margin-bottom:12px;}
.mw-tab{flex:1;text-align:center;font-size:9px;font-weight:600;padding:5px 4px;border-radius:5px;border:1px solid var(--bdr);color:var(--mute);}
.mw-tab.active{background:var(--p);color:#fff;border-color:var(--p);}
.mw-bar-row{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.mw-bar-row:last-child{margin-bottom:0;}
.mw-bar-label{font-size:10px;color:var(--sec);width:112px;flex-shrink:0;display:flex;flex-direction:column;align-items:flex-start;gap:2px;line-height:1.25;}
.mw-bar-name{color:var(--txt);font-weight:600;}
.mw-bar-track{flex:1;height:6px;background:var(--bdr);border-radius:3px;overflow:hidden;}
/* MOBILE-1 — one-shot fills (transform only) when the widget scrolls in; a full
   track is 50% of the recipe, matching the desktop step-3 bars */
.mw-bar-fill{height:100%;width:100%;border-radius:3px;transform:scaleX(0);transform-origin:left;
  transition:transform .6s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i,0) * 60ms);}
.m-widget.is-in .mw-bar-fill{transform:scaleX(calc(var(--w) * 2));}
.mw-bar-val{font-size:10px;font-weight:700;color:var(--txt);width:30px;text-align:right;flex-shrink:0;}
.mw-cand-row{display:flex;align-items:center;gap:8px;padding:8px 10px;background:#FBFBFB;border-radius:8px;margin-bottom:6px;}
.mw-cand-row:last-child{margin-bottom:0;}
.mw-rank{font-family:'Space Mono','Space Mono Fallback',monospace;font-size:10px;font-weight:700;color:var(--mute);width:16px;flex-shrink:0;}
.mw-cand-info{flex:1;min-width:0;}
.mw-cand-name{font-size:11px;font-weight:600;color:var(--txt);}
.mw-cand-meta{font-size:9px;color:var(--mute);}
.mw-cand-tags{display:flex;gap:4px;margin-top:4px;flex-wrap:wrap;}
.mw-cand-tag{font-size:8px;border-radius:3px;padding:1px 5px;}
.mw-grade{font-size:9px;font-weight:700;padding:3px 7px;border-radius:4px;white-space:nowrap;flex-shrink:0;}
/* MOB-1 — the s3 phone widget gets its own "just scored" beat when it scrolls
   in (same one-shot .is-in as MOBILE-1): rings fill and count up in rank order,
   grades land after their ring. */
.mw-ring{stroke-dashoffset:87.96;transition:stroke-dashoffset .9s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i,0) * 120ms);}
.m-widget.is-in .mw-ring{stroke-dashoffset:var(--off);}
.mw-cand-row .mw-grade{opacity:0;transition:opacity .3s ease;transition-delay:calc(var(--i,0) * 120ms + 450ms);}
.m-widget.is-in .mw-cand-row .mw-grade{opacity:1;}
@media(prefers-reduced-motion:reduce){
  .mw-ring{transition:none;stroke-dashoffset:var(--off);}
  .mw-cand-row .mw-grade{transition:none;opacity:1;}
}

/* ── Pricing responsive ── */
@media(max-width:1100px){
  .pack-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:767px){
  .pack-grid{grid-template-columns:repeat(2,1fr);}
  .pack-cta-row{flex-direction:column;}
  .pack-cta-btn{align-self:center;}
}
@media(max-width:480px){
  .pack-grid{grid-template-columns:1fr;}
  .pack-cta-row{gap:12px;}
  .pack-cta-btn{width:auto;max-width:240px;}
}

/* ══════════════════════════════════════════
   MOBILE — disable animations, fix layout
   ══════════════════════════════════════════ */
@media(max-width:767px){
  /* Mobile: disable scroll-jacking, enable normal flow */
  #page-driver{height:auto!important;}
  #page-sticky{position:relative!important;top:auto!important;height:auto!important;overflow:visible!important;}
  /* PERF-4 — the hero takes the flow layout from CSS, before the deck script tags it
     .m-flow, so its crystals and job chip do not move after first paint. */
  .slide.m-flow,#s0{position:relative!important;top:auto!important;left:auto!important;width:100%!important;height:auto!important;min-height:0;opacity:1!important;transform:none!important;filter:none!important;pointer-events:auto!important;display:flex!important;overflow:visible!important;}
  /* #pr-grid's column count is set inline (and by the pricing JS), so only
     !important can collapse it — 4-5 columns at phone width overlapped the prices. */
  #pr-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  #pr-zone-subscribe{grid-column:1 / -1!important;}
  /* Every slide shows the fixed forest layer; s8 adds its rose pool behind the CTA */
  #s8.m-flow{background:radial-gradient(ellipse 80% 40% at 50% 40%, rgba(206,123,145,.12) 0%, rgba(206,123,145,0) 70%);}
  /* Show mobile widgets, hide desktop app windows + chips */
  .m-widget{display:flex;justify-content:center;width:100%;}
  .fc-right .app-win,
  .fc-right .win-stage{display:none;}
  .chips-layer{display:none;}

  /* Kill all expensive animations */
  .hero-float,
  .hero-float-chip,
  .hero-hint,
  .hint-line,
  .dz,
  .skeleton-shimmer-sm,
  .click-indicator{
    animation:none!important;
    transform:none!important;
  }
  .hero-hint{display:none!important;}
  /* #gl is hidden globally now (aurora replaces it); rule removed */
  #hero-canvas{display:none!important;}

  /* Remove expensive GPU filters on small screens */
  #nav{
    backdrop-filter:none!important;
    background:rgba(26,20,16,.97)!important;
    padding:0 20px;
    height:52px;
  }
  #feat-strip{
    backdrop-filter:none!important;
    background:rgba(26,20,16,.97)!important;
    padding:8px 16px;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }

  /* Faster slide transitions on mobile */
  .slide{
    filter:none!important;
    transition:opacity .25s ease,transform .25s ease;
  }

  /* Hero: single column stack */
  #s0{padding:64px 20px 32px;}
  .hero-inner{
    grid-template-columns:1fr!important;
    gap:28px;
    text-align:center;
  }
  .hero-left{align-items:center;}
  .hero-kicker{margin:0 auto 14px;}
  .hero-h1{font-size:clamp(38px,9vw,56px);margin-bottom:16px;}
  .hero-sub{font-size:15px;max-width:480px;margin:0 auto 20px;}
  .hero-acts{justify-content:center;}
  .hero-right{display:none;}  /* hide canvas + floats on mobile */
  .hero-pills{justify-content:center;padding-top:16px;gap:10px;}
  .hpill{padding:8px 14px;}
  .hpill-n{font-size:clamp(14px,4vw,18px);}
  .hpill-l{font-size:9px;}

  /* Hero text appears instantly on mobile (no sweep animation) */
  .hero-h1 .line,
  .hero-h1 .line em{
    background-position:0% 0!important;
  }

  /* Feature slides: stack vertically */
  .feat-slide{flex-direction:column!important;padding:48px 0 32px;gap:20px;}
  .fc-copy{padding:0 16px;}
  .fc-right{padding:0 16px!important;}
  .fc-copy{order:1;width:100%!important;text-align:center;}
  .fc-step,.fc-title{text-align:center;}
  .fc-cta{justify-content:center;}
  .fc-right{order:2;padding:0!important;width:100%!important;flex:none!important;}
  .fc-bullets{text-align:left;align-items:flex-start;align-self:center;padding:0;}
  .fc-bullet{font-size:13px!important;text-align:left!important;}
  .fc-title{font-size:clamp(26px,7vw,38px)!important;}
  .app-win{max-width:100%;min-height:auto;}
  .win-body{min-height:280px!important;}

  /* Pricing */
  #s7-inner{padding:48px 20px 32px;text-align:center;}
  .pr-eye{text-align:center;}
  .pr-h{font-size:clamp(24px,7vw,36px);text-align:center;}
  .pr-sub{text-align:center;}
  .pack-note{text-align:left;}
  .fc-desc{text-align:center!important;max-width:100%!important;}
  .pack-badge{font-size:9px;padding:2px 10px;}
  .pack-resumes{font-size:9px;}
  .pack-price-amt{font-size:28px;}
  .pack-per-resume{font-size:10px;}
  .pack-desc{font-size:11px;margin-top:6px;}
  /* 2x2 grid: no lift, so the rows align */
  .pack-card.pack-best--most_popular,.pack-card.pack-best--most_popular:hover{--lift:0px;}
  .pack-per-resume{font-size:11.5px;}

  /* CTA */
  #s8.m-flow{overflow:visible!important;min-height:auto!important;padding-bottom:0!important;}
  #s8-inner{padding:40px 20px 24px;max-width:100%;}
  .cta-h{font-size:clamp(28px,6.6vw,44px);}
  .cta-s{font-size:14px;}
  .cta-acts{flex-direction:column;gap:12px;}
  .btn-p-inv,.btn-ghost-inv{width:100%;justify-content:center;text-align:center;}
  .cta-slot,.cta-mag{display:flex;width:100%;}
  .cta-footer{flex-direction:column;align-items:center;text-align:center;gap:12px;padding-bottom:24px;}
  .f-links{justify-content:center;}

  /* Feature strip horizontal scroll */
  .fs-pills{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px;scrollbar-width:none;}
  .fs-pills::-webkit-scrollbar{display:none;}
  .fs-pill{flex-shrink:0;}
}

@media(max-width:480px){
  /* Tighten nav */
  #nav{padding:0 16px;height:50px;}
  .nav-r .nav-link{display:none;}
  .nav-cta{font-size:12px;padding:7px 16px;}

  /* Hero */
  #s0{padding:56px 16px 20px;}
  .hero-h1{font-size:clamp(32px,10vw,48px);}
  .hero-acts{flex-direction:column;gap:10px;}
  .btn-p,.btn-ghost{width:100%;justify-content:center;}
  .hero-pills{gap:8px;}
  .hpill{padding:7px 12px;}

  /* Feature strip scrollable */
  .fs-pills{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px;}
  .fs-pill{flex-shrink:0;}

  /* Pricing */
  .pack-card{padding:20px 16px;}
  .pack-price-amt{font-size:26px;}

  /* CTA footer */
  .cta-footer{gap:8px;padding:20px 0 12px;}
  .f-logo{font-size:16px;}
  .f-copy{font-size:11px;}
}


/* ── Reduced motion ── */
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important;}
  .slide{filter:none!important;transform:none!important;}
  body::before{display:none;}
}

/* ═══════════════ THE CASE SECTION (slide s5) ═══════════════ */
/* No solid background — the aurora layer below must show through.
   (Previously `background: var(--bg)` painted #FBFBFB and masked it.) */
#s5{width:100%;}
#s5 .tc-inner{max-width:1520px;width:100%;padding:96px 48px 32px;margin:0 auto;}
.tc-inner{max-width:1400px;margin:0 auto;padding:0 56px;}

/* ── Shell — blends with page background, no card chrome ── */
.tc-shell{display:grid;grid-template-columns:26% 1fr;gap:48px;background:transparent;border:none;border-radius:0;box-shadow:none;align-items:start;}

/* ── Left nav ── */
.tc-nav{border-right:1px solid rgba(251,251,251,.16);padding:0;position:relative;}
/* The list sits off the left edge and its vertical rail by the same 16-40px shift as the
   s1-s4 .fc-copy (1100 and wider, deck only). The nav narrows by the shift, so its divider
   and the case panel beside it stay where they are. */
@media(min-width:1100px){html:not(.hs-flow) #s5 .tc-nav{margin-left:clamp(16px,calc((100vw - 1000px) / 10),40px);}}
.tc-nav-item{position:relative;display:flex;align-items:center;gap:16px;padding:10px 20px 10px 12px;cursor:pointer;border-left:none;border-right:2px solid transparent;margin-right:-1px;border-radius:8px 0 0 8px;transition:color .15s cubic-bezier(0.16,1,0.3,1),background-color .2s ease,border-color .2s cubic-bezier(0.16,1,0.3,1),padding-right .2s cubic-bezier(0.16,1,0.3,1);}
.tc-nav-item:hover{background:rgba(251,251,251,.06);}
.tc-nav-item:hover .tc-lbl{color:var(--on);}
.tc-nav-item:hover .tc-num{color:var(--rose-on-sm);}
.tc-nav-item.tc-active{border-right-color:var(--p);padding-right:24px;background:transparent;}
.tc-nav-item.tc-active:hover{background:rgba(206,123,145,.10);}
.tc-nav-div{height:1px;background:rgba(251,251,251,.14);margin:0;}
.tc-num{font-family:'Space Grotesk','Space Grotesk Fallback','Inter Tight','Inter Tight Fallback',sans-serif;font-weight:500;font-size:clamp(24px,2vw,30px);line-height:1;letter-spacing:-.03em;font-variant-numeric:lining-nums tabular-nums;font-feature-settings:'tnum' 1,'lnum' 1;color:var(--on-3);width:44px;flex-shrink:0;transition:color .18s ease;}
.tc-nav-item.tc-active .tc-num{color:var(--rose-on-sm);text-shadow:var(--rose-glow);font-weight:500;}
.tc-lbl{font-size:14px;color:var(--on-2);font-weight:500;line-height:1.4;transition:color .15s ease;}
.tc-nav-item.tc-active .tc-lbl{color:var(--on);font-weight:600;}

/* ── Right panel — fixed min-height eliminates panel-switch jumps (CLS) ── */
.tc-content{padding:0 0 0 8px;min-height:560px;display:grid;align-items:start;}
/* S5-1 — every case sits in the same grid cell, so the container is always the
   tallest panel: the nav and headline never move and the salt-trace anchors
   (first .tc-headline / .tc-win-stage) line up with every case. */
.tc-panel{display:flex;flex-direction:column;gap:22px;grid-area:1/1;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s ease,visibility 0s .18s;}
.tc-panel.tc-on{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .01s;}
/* one sliding indicator replaces the per-item border-right */
.tc-ind{position:absolute;right:-1px;top:0;width:2px;height:1px;background:var(--p);transform-origin:top;transform:scaleY(0);pointer-events:none;}
.tc-nav.has-ind .tc-nav-item.tc-active{border-right-color:transparent;}
/* guided tour: the active case shows a dwell hairline; when it completes the next case opens */
.tc-run .tc-nav-item.tc-active::after{content:'';position:absolute;left:12px;right:20px;bottom:0;height:1px;background:var(--rose-on);transform-origin:left;animation:tcDwell 7s linear forwards;}
@keyframes tcDwell{from{transform:scaleX(0);}to{transform:none;}}
.tc-shell:hover .tc-nav-item::after,.tc-shell:focus-within .tc-nav-item::after{animation-play-state:paused;}
#s5 .tc-nav-item:focus-visible{outline:2px solid #FBFBFB;outline-offset:-2px;}
.tc-eyebrow-m{display:none;}
[x-cloak]{display:none!important;}
.tc-headline{font-family:'Fraunces','Fraunces Fallback','Fraunces Fallback Android',serif;font-style:normal;font-weight:500;font-size:clamp(28px,2.5vw,36px);color:var(--on);line-height:1.12;letter-spacing:-.015em;font-variation-settings:'opsz' 72,'SOFT' 30;max-width:640px;text-wrap:balance;}
.tc-body{font-size:15.5px;color:var(--on-2);line-height:1.65;max-width:560px;padding-left:14px;border-left:2px solid rgba(206,123,145,.5);margin-top:-6px;}
.tc-body strong{color:var(--on);font-weight:600;}

/* ── Mini app window — wider rectangle to match other slides' app-win + right alignment ── */
.tc-win{background:#fff;border-radius:14px;overflow:hidden;border:1px solid var(--bdr);box-shadow:0 18px 48px rgba(6,14,12,.36),0 4px 12px rgba(6,14,12,.18);width:100%;max-width:740px;margin-left:0;}
/* ── The Case windows (S5 redesign): shared kit .s5k-* + per-case .s5x-cN ── */
/* =====================================================================
   S5 window kit v2 — shared language for the 10 "The Case" product windows.
   Scope: .s5k-* classes + the #s5 stage plate. Case CSS lives under .s5x-cN.
   Spec: kit.md. Palette = tailwind.config.js only (no invented hexes);
   lines are #C9C2C3 at stated alphas.
   ===================================================================== */

/* ---------- Stage plate: air, not a ghost card ---------- */
#s5 .tc-win-stage:has(> .s5k-win){background:none; padding-top:12px; padding-bottom:20px;}

/* ---------- Window ---------- */
#s5 .tc-win.s5k-win{
  /* palette (tailwind.config.js) */
  --k-ink:#1B1B1F; --k-2:#5C5C60; --k-mute:#73716E;
  --k-bg:#FBFBFB; --k-surface:#FFFFFF; --k-border:#C9C2C3; --k-sage:#DAE2DF;
  --k-rose:#CE7B91; --k-rose-d:#B05A72;
  --k-ok:#5B9E7E; --k-warn:#B5853A; --k-bad:#A8442D;
  --k-gA:#5B9E7E; --k-gB:#8A7A66; --k-gC:#C4B59E; --k-gD:#1B1B1F;
  /* derived: #C9C2C3 at alpha, never a new hex */
  --k-line:rgba(201,194,195,.55);  /* row rules, meter tracks */
  --k-rule:rgba(201,194,195,.9);   /* header rule, control outlines */
  --k-rose-t:rgba(206,123,145,.22);/* marker band; ink text only on it */
  --k-thr:50;                      /* product default threshold (criteria.py SCREENING_THRESHOLD) */
  --k-body-h:318px;                /* body height when the window is >= 541px wide */
  --k-ease:cubic-bezier(.16,1,.3,1);
  --k-ease-io:cubic-bezier(.65,0,.35,1);
  container-type:inline-size; container-name:s5k;
  position:relative;
  background:var(--k-surface);
  border:0;
  border-radius:10px;
  overflow:hidden;
  color:var(--k-ink);
  font-family:'Inter Tight','Inter Tight Fallback',system-ui,sans-serif;
  font-size:12.5px; line-height:1.5;
  font-feature-settings:'kern' 1;
  -webkit-font-smoothing:antialiased;
  text-align:left;
  box-shadow:0 0 0 1px rgba(8,18,14,.28), 0 18px 40px -16px rgba(8,18,14,.55);
}
#s5 .s5k-win *,#s5 .s5k-win *::before,#s5 .s5k-win *::after{box-sizing:border-box;}

/* ---------- Header: where you are in the product, then the route ----------
   [ Senior Product Designer / Scoring Health ]            hiresalt.in/jobs/42?tab=… */
#s5 .s5k-bar{
  display:flex; align-items:center; gap:16px;
  height:34px; padding:0 16px;
  background:var(--k-bg);
  border-bottom:1px solid var(--k-rule);
  user-select:none;
}
#s5 .s5k-crumb{min-width:0; display:flex; align-items:baseline; gap:6px; font-size:12px; line-height:1; white-space:nowrap; overflow:hidden;}
#s5 .s5k-crumb b{font-weight:600; color:var(--k-ink); overflow:hidden; text-overflow:ellipsis; letter-spacing:-.005em;}
#s5 .s5k-crumb i{font-style:normal; color:var(--k-mute);}        /* the "/" separator */
#s5 .s5k-crumb span{color:var(--k-2); flex:none;}
#s5 .s5k-addr{
  margin-left:auto; min-width:0; flex:none; max-width:46%;
  font-family:'Space Mono','Space Mono Fallback',ui-monospace,monospace; font-size:11px; line-height:1;
  color:var(--k-2); letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* ---------- Body: content row + reserved footer row ---------- */
#s5 .s5k-body{
  position:relative; display:grid; grid-template-rows:minmax(0,1fr) auto; row-gap:14px;
  padding:20px 24px 18px; background:var(--k-surface);
}
#s5 .s5k-main{min-height:0; min-width:0;}
@container s5k (min-width:541px){ #s5 .s5k-body{height:var(--k-body-h); overflow:hidden;} }

/* ---------- Type roles (three families in the window; Fraunces only for one document title) ----------
   Inter Tight   = interface AND prose (labels, names, definitions, reasoning, letters)
   Space Grotesk = numbers that are data (scores, weights, ranks, counts that matter)
   Space Mono    = literal strings only: route, file name, merge field, share token  */
#s5 .s5k-lbl{font-size:11px; font-weight:500; color:var(--k-mute);}
#s5 .s5k-name{font-size:13px; font-weight:600; color:var(--k-ink); letter-spacing:-.01em;}
#s5 .s5k-sub{font-size:11.5px; color:var(--k-2);}
#s5 .s5k-note{font-size:12px; line-height:1.45; color:var(--k-2);}
#s5 .s5k-num{font-family:'Space Grotesk','Space Grotesk Fallback','Inter Tight','Inter Tight Fallback',sans-serif; font-variant-numeric:tabular-nums lining-nums; font-feature-settings:'tnum' 1,'lnum' 1; letter-spacing:-.01em;}
#s5 .s5k-num--l{font-size:20px; font-weight:500; line-height:1; letter-spacing:-.02em;}
#s5 .s5k-num--m{font-size:14px; font-weight:500;}
#s5 .s5k-num--s{font-size:12px; font-weight:500;}
#s5 .s5k-mono{font-family:'Space Mono','Space Mono Fallback',ui-monospace,monospace; font-size:11px; letter-spacing:-.01em;}
#s5 .s5k-doc{font-family:'Fraunces','Fraunces Fallback','Fraunces Fallback Android',Georgia,serif; font-weight:500; font-size:20px; line-height:1.15; letter-spacing:-.01em; color:var(--k-ink); font-variation-settings:'opsz' 36;}
#s5 .s5k-ink{color:var(--k-ink);} #s5 .s5k-2{color:var(--k-2);} #s5 .s5k-mu{color:var(--k-mute);}
#s5 .s5k-rose{color:var(--k-rose-d);}   /* text on #FFFFFF only (4.61:1); never on #FBFBFB or on a band */
/* Non-Latin names and excerpts: system script fonts are the one sanctioned fallback */
#s5 .s5k-script{font-family:'Inter Tight','Inter Tight Fallback','Noto Sans','Nirmala UI','Segoe UI','Yu Gothic UI','Hiragino Sans','Noto Sans JP','Noto Sans Arabic','Segoe UI Historic',system-ui,sans-serif; unicode-bidi:isolate;}

/* ---------- Head: label + optional count + optional meta. Rule is opt-in ---------- */
#s5 .s5k-head{display:flex; align-items:baseline; gap:8px; margin:0 0 10px; min-width:0;}
#s5 .s5k-head-t{font-size:12px; font-weight:600; color:var(--k-ink); letter-spacing:-.005em; white-space:nowrap;}
#s5 .s5k-head-n{font-family:'Space Grotesk','Space Grotesk Fallback',sans-serif; font-variant-numeric:tabular-nums; font-size:12px; font-weight:500; color:var(--k-mute);}
#s5 .s5k-head-m{margin-left:auto; font-size:11px; color:var(--k-mute); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0;}
#s5 .s5k-head--rule{padding-bottom:8px; border-bottom:1px solid var(--k-line);}

/* ---------- Ledger rows ---------- */
#s5 .s5k-rows{display:flex; flex-direction:column; margin:0; padding:0; list-style:none;}
#s5 .s5k-row{display:grid; align-items:center; column-gap:12px; min-height:30px; border-bottom:1px solid var(--k-line);}
#s5 .s5k-row:last-child{border-bottom:0;}

/* ---------- Meter: 0-100 on a 3px track; data-thr draws the threshold tick ---------- */
#s5 .s5k-meter{position:relative; height:3px; background:var(--k-line);}
#s5 .s5k-meter>b{position:absolute; inset:0 auto 0 0; width:calc(var(--v,0) * 1%); background:var(--k-ink); transform-origin:left center;}
#s5 .s5k-meter[data-g=A]>b{background:var(--k-gA);} #s5 .s5k-meter[data-g=B]>b{background:var(--k-gB);}
#s5 .s5k-meter[data-g=C]>b{background:var(--k-gC);} #s5 .s5k-meter[data-g=D]>b{background:var(--k-gD);}
#s5 .s5k-meter[data-thr]::after{content:''; position:absolute; left:calc(var(--k-thr) * 1%); top:-3px; width:1px; height:9px; background:var(--k-ink); opacity:.6;}

/* ---------- Grade: the letter (ink) over a 2px rule in the grade colour ----------
   Bands (criteria.grade_for_score): A >= 80, B >= 65, C >= 50, D < 50 */
#s5 .s5k-grade{display:inline-block; min-width:1.1em; padding-bottom:1px; font-family:'Space Grotesk','Space Grotesk Fallback',sans-serif; font-size:12px; font-weight:600; line-height:1.1; text-align:center; color:var(--k-ink); border-bottom:2px solid var(--k-gD);}
#s5 .s5k-grade[data-g=A]{border-color:var(--k-gA);} #s5 .s5k-grade[data-g=B]{border-color:var(--k-gB);}
#s5 .s5k-grade[data-g=C]{border-color:var(--k-gC);}

/* ---------- Delta: sign + numeral in ink; the sign carries direction ---------- */
#s5 .s5k-delta{font-family:'Space Grotesk','Space Grotesk Fallback',sans-serif; font-variant-numeric:tabular-nums; font-size:12px; font-weight:600; color:var(--k-ink);}
#s5 .s5k-delta.eq{color:var(--k-mute); font-weight:500;}

/* ---------- State: a 7px square mark in the state colour + the product's word in ink ---------- */
#s5 .s5k-state{display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:500; color:var(--k-ink); white-space:nowrap;}
#s5 .s5k-state::before{content:''; width:7px; height:7px; background:var(--k-2); flex:none;}
#s5 .s5k-state.ok::before{background:var(--k-ok);} #s5 .s5k-state.warn::before{background:var(--k-warn);}
#s5 .s5k-state.bad::before{background:var(--k-bad);} #s5 .s5k-state.rose::before{background:var(--k-rose);}
#s5 .s5k-state.quiet{color:var(--k-2);}

/* ---------- Highlight: marker band under source words (max one annotation system per window) ---------- */
#s5 .s5k-hl{color:var(--k-ink); background-image:linear-gradient(var(--k-rose-t),var(--k-rose-t)); background-repeat:no-repeat; background-position:0 92%; background-size:100% 40%; -webkit-box-decoration-break:clone; box-decoration-break:clone;}

/* ---------- Controls: spans, not <button> (inert illustration). Only where the claim IS the control ---------- */
#s5 .s5k-btn{display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 12px; border-radius:6px; background:var(--k-ink); color:var(--k-bg); font-size:12px; font-weight:600; letter-spacing:-.005em; white-space:nowrap; box-shadow:0 1px 1px rgba(0,0,0,.18);}
#s5 .s5k-btn--line{background:var(--k-surface); color:var(--k-ink); box-shadow:inset 0 0 0 1px var(--k-border);}
#s5 .s5k-btn--text{height:auto; padding:0; background:none; box-shadow:none; color:var(--k-ink); text-decoration:underline; text-decoration-color:var(--k-border); text-underline-offset:3px;}

/* ---------- Shortlist star (the product's real mark). Outline = #73716E (4.9:1), on = ink ----------
   <svg class="s5k-star" viewBox="0 0 12 12" aria-hidden="true"><path d="M6 .9l1.55 3.2 3.5.48-2.55 2.44.62 3.48L6 8.84 2.88 10.5l.62-3.48L.95 4.58l3.5-.48z"/></svg> */
#s5 .s5k-star{width:12px; height:12px; flex:none; fill:none; stroke:var(--k-mute); stroke-width:1.1; stroke-linejoin:round; transition:fill .16s var(--k-ease), stroke .16s var(--k-ease);}
#s5 .s5k-star.on{fill:var(--k-ink); stroke:var(--k-ink);}
#s5 .s5k-star.on.rose{fill:var(--k-rose); stroke:var(--k-rose-d);}

/* ---------- Split rule: two to three labelled shares of 100% ---------- */
#s5 .s5k-split{display:flex; gap:2px; height:5px;}
#s5 .s5k-split>i{display:block; flex:var(--w) 1 0; background:var(--k-ink); transform-origin:left center;}
#s5 .s5k-split>i.r{background:var(--k-rose);}
#s5 .s5k-split>i.m{background:var(--k-border);}

/* ---------- Footer row (grid row 2 of the body; never absolutely positioned) ---------- */
#s5 .s5k-foot{display:flex; align-items:center; gap:12px; min-width:0; font-size:11.5px; color:var(--k-2);}

/* ---------- Narrow container (< 541px; phones ~ 254px wide) ---------- */
@container s5k (max-width:540px){
  #s5 .s5k-bar{height:32px; padding:0 12px;}
  #s5 .s5k-addr{display:none;}
  #s5 .s5k-body{padding:14px 14px 16px; row-gap:12px;}
  #s5 .s5k-head-m{display:none;}
  #s5 .s5k-body>*{min-width:0;}
  #s5 .s5k-wide{display:none !important;}   /* desktop-only elements, named per case in briefs.md */
}
@container s5k (min-width:541px){ #s5 .s5k-narrow{display:none !important;} }

@media (prefers-reduced-motion:reduce){
  #s5 .s5k-win *{transition:none !important; animation:none !important;}
}
/* ---------- Case 1: JD to criteria ---------- */
/* Case 1, round 3: the job description and the score it became, line for line.
   Window 34 + 286 = 320px (kept from r2 so the CTA clears the salt-trace line).
   Main row = 286 - 18 - 16 = 252px. One grid, two columns (232 | 36 | 424), shared rows,
   so each duty in the JD sits on the same line as the criterion it became:
     row 1  heads                     30
     row 2  title  | From your JD 25%  38
     rows 3-6 duty | criterion 6.25%   4 x 36 = 144
     row 7  6+ years | Built-in 75%    40 (remainder)      -> 252 */
#s5 .tc-win.s5x-c1{--k-body-h:286px;}
#s5 .s5x-c1 .s5k-body{grid-template-rows:minmax(0,1fr); row-gap:0; padding:18px 24px 16px;}
#s5 .s5x-c1 .c1-g{
  display:grid; height:100%;
  grid-template-columns:232px minmax(0,1fr); column-gap:36px;
  grid-template-rows:30px 38px repeat(4,36px) minmax(0,1fr);
}
#s5 .s5x-c1 .c1-duties, #s5 .s5x-c1 .c1-crit{display:contents; margin:0; padding:0; list-style:none;}

/* placement */
#s5 .s5x-c1 .c1-hd--l{grid-area:1/1;} #s5 .s5x-c1 .c1-hd--r{grid-area:1/2;}
#s5 .s5x-c1 .c1-title{grid-area:2/1;} #s5 .s5x-c1 .c1-grp{grid-area:2/2;}
#s5 .s5x-c1 .c1-r1{grid-row:3;} #s5 .s5x-c1 .c1-r2{grid-row:4;}
#s5 .s5x-c1 .c1-r3{grid-row:5;} #s5 .s5x-c1 .c1-r4{grid-row:6;}
#s5 .s5x-c1 .c1-duty{grid-column:1;} #s5 .s5x-c1 .c1-row{grid-column:2;}
#s5 .s5x-c1 .c1-req{grid-area:7/1;} #s5 .s5x-c1 .c1-bi{grid-area:7/2;}

/* heads: one hairline across both columns at the same y */
#s5 .s5x-c1 .c1-hd{display:flex; align-items:flex-start; gap:8px; border-bottom:1px solid var(--k-line); min-width:0;}
#s5 .s5x-c1 .c1-hd .s5k-head-t{line-height:18px;}
#s5 .s5x-c1 .c1-hd-m{margin-left:auto; font-size:11.5px; line-height:18px; color:var(--k-2); white-space:nowrap;}

/* row 2: the document title against the JD's share of the score */
#s5 .s5x-c1 .c1-title{align-self:end; margin:0 0 5px; font-size:20px; line-height:24px; white-space:nowrap;}
#s5 .s5x-c1 .c1-grp{align-self:end; display:flex; align-items:baseline; gap:8px; padding-bottom:6px; min-width:0;}
#s5 .s5x-c1 .c1-grp-t{font-size:13.5px; font-weight:600; letter-spacing:-.01em; color:var(--k-ink);}
#s5 .s5x-c1 .c1-grp-n{font-size:11.5px; color:var(--k-2);}
#s5 .s5x-c1 .c1-grp-n .s5k-num{font-size:12px; font-weight:500; color:var(--k-ink);}
#s5 .s5x-c1 .c1-grp-w{margin-left:auto; font-size:20px; font-weight:500; line-height:1; letter-spacing:-.02em; color:var(--k-rose-d);}

/* left: the JD's duties, one per criterion row */
/* top-aligned so a duty's first line sits on its criterion's name line, its second on the sub-criteria */
#s5 .s5x-c1 .c1-duty{position:relative; padding:4px 0 0 13px; border-top:1px solid var(--k-line); font-size:12px; line-height:16px; color:var(--k-2); text-wrap:pretty;}
#s5 .s5x-c1 .c1-duty::before{content:''; position:absolute; left:1px; top:12px; width:5px; height:1px; background:var(--k-mute);}
#s5 .s5x-c1 .c1-req{position:relative; margin:0; padding-top:7px; border-top:1px solid var(--k-ink); font-size:12px; line-height:16px; color:var(--k-ink);}

/* right: the criteria, indented under From your JD */
#s5 .s5x-c1 .c1-row, #s5 .s5x-c1 .c1-bi{
  position:relative; display:grid; grid-template-columns:minmax(0,1fr) 56px; column-gap:12px;
  align-content:center; border-top:1px solid var(--k-line); min-width:0;
}
#s5 .s5x-c1 .c1-row{padding-left:14px;}
#s5 .s5x-c1 .c1-nm{position:relative; grid-area:1/1; font-size:13px; font-weight:600; line-height:17px; letter-spacing:-.01em; color:var(--k-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
#s5 .s5x-c1 .c1-fx{position:relative; grid-area:2/1; font-size:11.5px; line-height:15px; color:var(--k-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
#s5 .s5x-c1 .c1-w{position:relative; grid-area:1/2; justify-self:end; font-size:13px; font-weight:500; line-height:17px; color:var(--k-ink);}
#s5 .s5x-c1 .c1-bi{border-top-color:var(--k-ink); align-content:start; padding-top:6px;}
#s5 .s5x-c1 .c1-bi-w{font-size:14px;}

/* the read: one sage band per line, spanning both columns, sweeps from the duty into the criterion it
   became (motion only; opacity 0 at rest, so the still frame is clean). It sits under the text. */
#s5 .s5x-c1 .c1-band{grid-column:1/-1; z-index:0; margin:1px 0 0; background:var(--k-sage); opacity:0; transform-origin:0 50%; pointer-events:none;}
#s5 .s5x-c1 .c1-duty, #s5 .s5x-c1 .c1-row, #s5 .s5x-c1 .c1-grp, #s5 .s5x-c1 .c1-title, #s5 .s5x-c1 .c1-hd{z-index:1;}

/* narrow (< 541px): two duties as evidence, then the result; definitions hidden */
@container s5k (max-width:540px){
  #s5 .s5x-c1 .s5k-body{padding:12px 14px 14px;}
  #s5 .s5x-c1 .c1-g{grid-template-columns:minmax(0,1fr); grid-template-rows:none; grid-auto-rows:auto; height:auto;}
  #s5 .s5x-c1 .c1-g > *, #s5 .s5x-c1 .c1-duty, #s5 .s5x-c1 .c1-row{grid-area:auto; grid-column:1;}
  #s5 .s5x-c1 .c1-hd--l{order:1; height:24px; border-bottom:0;}
  #s5 .s5x-c1 .c1-duty.c1-r1{order:2;} #s5 .s5x-c1 .c1-duty.c1-r2{order:3; margin-top:4px;}
  #s5 .s5x-c1 .c1-title, #s5 .s5x-c1 .c1-hd--r, #s5 .s5x-c1 .c1-duty.c1-r3, #s5 .s5x-c1 .c1-duty.c1-r4, #s5 .s5x-c1 .c1-req{display:none;}
  #s5 .s5x-c1 .c1-grp{order:4; margin-top:14px; padding:8px 0 8px; border-top:1px solid var(--k-line);}
  #s5 .s5x-c1 .c1-row{min-height:30px;}
  #s5 .s5x-c1 .c1-row.c1-r1{order:5;} #s5 .s5x-c1 .c1-row.c1-r2{order:6;}
  #s5 .s5x-c1 .c1-row.c1-r3{order:7;} #s5 .s5x-c1 .c1-row.c1-r4{order:8;}
  #s5 .s5x-c1 .c1-bi{order:9; min-height:32px;}
  #s5 .s5x-c1 .c1-fx{display:none;}
  #s5 .s5x-c1 .c1-row, #s5 .s5x-c1 .c1-bi{grid-template-columns:minmax(0,1fr) 48px;}
  #s5 .s5x-c1 .c1-row{padding-left:10px;}
  #s5 .s5x-c1 .c1-nm{font-size:12.5px; white-space:normal;}
  #s5 .s5x-c1 .c1-row{padding-top:5px; padding-bottom:5px;}
  #s5 .s5x-c1 .c1-band{display:none;}
  #s5 .s5x-c1 .c1-duty{border-top:0;}
  #s5 .s5x-c1 .c1-bi{align-content:center; padding-top:0;}
  #s5 .s5x-c1 .s5k-crumb i, #s5 .s5x-c1 .s5k-crumb span{display:none;}
  #s5 .s5x-c1 .c1-grp-w{font-size:18px;}
}
/* ---------- Case 2: Career Story ---------- */
/* Case 2 - Career Story, round 2. The product's own panel structure (Career Story, _candidate_career_story.html):
   equal-width role columns under a node strip, start dates, transition words, per-role narrative, and
   "Natural next roles" with confidence. The node strip is stepped by level (the product writes the level code on
   each node; here the same level is carried by height) so the rise reads at a glance. Columns are NOT time-scaled;
   time is stated in words and numerals (start month, months in role).
   Budget (container >= 680px): body 318 = 20 pad + main 280 + 18 pad (single grid row, no footer).
   Main 280 = top 49 (name 24 + 7 + summary 18) + 24 + strip 74 + 14 + columns 96 (next column, tallest) = 257. */

#s5 .s5x-c2 .c2-body{grid-template-rows:minmax(0,1fr); row-gap:0;}
#s5 .s5x-c2 .c2-main{display:flex; flex-direction:column; min-height:0;}
#s5 .s5x-c2 p{margin:0;}

/* ---------- title block ---------- */
#s5 .s5x-c2 .c2-top{display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:baseline; column-gap:16px; row-gap:7px;}
#s5 .s5x-c2 .c2-name{margin:0; line-height:24px; white-space:nowrap;}
#s5 .s5x-c2 .c2-fit{justify-self:end;}
#s5 .s5x-c2 .c2-arc{grid-column:1/-1; font-size:12.5px; line-height:18px; color:var(--k-2); letter-spacing:-.003em;}

/* ---------- shared text roles (wide columns and narrow rail) ---------- */
#s5 .s5x-c2 .c2-when{font-size:12px; line-height:16px; color:var(--k-2); white-space:nowrap;}
#s5 .s5x-c2 .c2-when .s5k-num{font-size:12px; font-weight:500; color:var(--k-ink);}
#s5 .s5x-c2 .c2-when i,
#s5 .s5x-c2 .c2-m i{font-style:normal; color:var(--k-mute); padding:0 5px;}
#s5 .s5x-c2 .c2-t{margin-top:4px; font-size:12.5px; font-weight:600; line-height:17px; color:var(--k-ink); letter-spacing:-.01em; white-space:nowrap;}
#s5 .s5x-c2 .c2-m{font-size:12px; line-height:16px; color:var(--k-2); white-space:nowrap;}
#s5 .s5x-c2 .c2-m b{font-size:12px; font-weight:500; color:var(--k-ink);}
#s5 .s5x-c2 .c2-d{margin-top:7px; padding-right:16px; font-size:11.5px; line-height:16px; color:var(--k-2);}
#s5 .s5x-c2 .c2-nr{display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-top:4px; line-height:17px; white-space:nowrap;}
#s5 .s5x-c2 .c2-nr b{font-size:12.5px; font-weight:600; color:var(--k-ink); letter-spacing:-.01em;}
#s5 .s5x-c2 .c2-nr span{font-size:11.5px; color:var(--k-2);}
#s5 .s5x-c2 .c2-nh{display:flex; justify-content:space-between; gap:8px;}
#s5 .s5x-c2 .c2-nh span{font-size:11px; color:var(--k-mute);}
#s5 .s5x-c2 .c2-why{margin:2px 0 8px; font-size:11.5px; line-height:16px; color:var(--k-2);}

/* ---------- wide: story grid ---------- */
#s5 .s5x-c2 .c2-story{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)) 26px 186px; grid-template-rows:74px auto; row-gap:14px; margin-top:24px;}
#s5 .s5x-c2 .c2-strip{grid-column:1/4; grid-row:1; position:relative;}
#s5 .s5x-c2 .c2-link{grid-column:4; grid-row:1; position:relative;}
#s5 .s5x-c2 .c2-link svg{position:absolute; left:0; top:0; overflow:visible;}
#s5 .s5x-c2 .c2-link path{fill:none; stroke:var(--k-rose); stroke-width:1.5; stroke-dasharray:4 4; stroke-linejoin:miter;}
#s5 .s5x-c2 .c2-role{grid-row:2; min-width:0;}
#s5 .s5x-c2 .c2-c1{grid-column:1;} #s5 .s5x-c2 .c2-c2{grid-column:2;} #s5 .s5x-c2 .c2-c3{grid-column:3 / 5;}
#s5 .s5x-c2 .c2-next{grid-column:5; grid-row:2; min-width:0;}

/* track: level centres Lead 7 / Senior 27 / Mid 47 / Junior 67 (px from strip top); stroke 2px.
   Base = #73716E (4.87:1 on white), always present; ink overlay climbs over it. */
#s5 .s5x-c2 .c2-trk{position:absolute; inset:0;}
#s5 .s5x-c2 .c2-trk i{position:absolute; display:block; background:var(--k-mute);}
#s5 .s5x-c2 .c2-ink i{background:var(--k-ink);}
#s5 .s5x-c2 .s-t1{left:5px; top:66px; height:2px; width:calc(33.333% - 57px); transform-origin:0 50%;}
#s5 .s5x-c2 .s-r2{left:calc(33.333% + 4px); top:46px; width:2px; height:22px; transform-origin:50% 100%;}
#s5 .s5x-c2 .s-t2{left:calc(33.333% + 5px); top:46px; height:2px; width:33.334%; transform-origin:0 50%;}
#s5 .s5x-c2 .s-r3{left:calc(66.667% + 4px); top:26px; width:2px; height:22px; transform-origin:50% 100%;}
#s5 .s5x-c2 .s-t3{left:calc(66.667% + 5px); right:0; top:26px; height:2px; transform-origin:0 50%;}
#s5 .s5x-c2 .s-gap{position:absolute; left:calc(33.333% - 52px); width:52px; top:66px; height:0; border-top:2px dotted var(--k-mute);}
#s5 .s5x-c2 .c2-gaplab{position:absolute; right:calc(66.667% + 4px); top:42px; font-size:11px; line-height:13px; color:var(--k-mute); white-space:nowrap;}
#s5 .s5x-c2 .c2-now{position:absolute; right:0; top:35px; font-size:11px; font-weight:600; line-height:13px; color:var(--k-ink);}
#s5 .s5x-c2 .c2-n{position:absolute; width:9px; height:9px; margin:-4.5px 0 0 -4.5px; border-radius:50%; background:var(--k-ink); box-shadow:0 0 0 2px var(--k-surface);}
#s5 .s5x-c2 .c2-n1{left:5px; top:67px;}
#s5 .s5x-c2 .c2-n2{left:calc(33.333% + 5px); top:47px;}
#s5 .s5x-c2 .c2-n3{left:calc(66.667% + 5px); top:27px; width:11px; height:11px; margin:-5.5px 0 0 -5.5px;}
#s5 .s5x-c2 .c2-nn{grid-column:5; grid-row:1; align-self:start; justify-self:start; width:10px; height:10px; margin-top:2px; border-radius:50%; background:var(--k-surface); box-shadow:inset 0 0 0 1.5px var(--k-rose);}

/* the next level as an undated dashed tread (both predicted roles sit one level up: Lead/Staff = IC4) */
#s5 .s5x-c2 .c2-nt{grid-column:5; grid-row:1; align-self:start; margin:6.25px 0 0 12px; height:1.5px; background:repeating-linear-gradient(90deg,var(--k-rose) 0 4px,transparent 4px 8px);}

/* ---------- narrow: vertical rail ---------- */
#s5 .s5x-c2 .c2-rail{list-style:none; margin:20px 0 0; padding:0;}
#s5 .s5x-c2 .c2-ri{position:relative; padding:0 0 14px 22px;}
#s5 .s5x-c2 .c2-ri:last-child{padding-bottom:0;}
#s5 .s5x-c2 .c2-rn{position:absolute; left:0; top:4px; width:9px; height:9px; border-radius:50%; background:var(--k-ink); box-shadow:0 0 0 2px var(--k-surface); z-index:1;}
#s5 .s5x-c2 .c2-ri--cur .c2-rn{left:-1px; top:3px; width:11px; height:11px;}
#s5 .s5x-c2 .c2-rn--next{width:10px; height:10px; left:-.5px; background:var(--k-surface); box-shadow:inset 0 0 0 1.5px var(--k-rose);}
#s5 .s5x-c2 .c2-rv{position:absolute; left:3.5px; top:8px; bottom:0; width:2px; background:var(--k-mute);}
#s5 .s5x-c2 .c2-rv b{position:absolute; inset:0; background:var(--k-ink); transform-origin:50% 0;}
#s5 .s5x-c2 .c2-ri:nth-child(3) .c2-rv{bottom:-8px;}
#s5 .s5x-c2 .c2-rv--gap{top:0; bottom:-8px; background:none; border-left:2px dotted var(--k-mute); width:0;}
#s5 .s5x-c2 .c2-rv--fut{top:14px; bottom:-8px; background:none; width:0; border-left:1.5px dashed var(--k-rose); left:4px;}
#s5 .s5x-c2 .c2-rgap{padding-top:0; padding-bottom:12px;}
#s5 .s5x-c2 .c2-gapn{font-size:11px; line-height:13px; color:var(--k-mute);}
#s5 .s5x-c2 .c2-ri--next .c2-nr{margin-top:6px;}

/* ---------- breakpoints: role columns from 600px; 600-699 drops the per-role narratives and lets confidence wrap;
   under 600 the vertical rail (height auto, like the kit's narrow variant) ---------- */
@container s5k (min-width:600px){ #s5 .s5x-c2 .c2-nw{display:none;} }
@container s5k (min-width:600px) and (max-width:699px){
  #s5 .s5x-c2 .c2-story{grid-template-columns:repeat(3,minmax(0,1fr)) 26px 160px;}
  #s5 .s5x-c2 .c2-d{display:none;}
  #s5 .s5x-c2 .c2-nr{flex-wrap:wrap; row-gap:0;}
}
@container s5k (max-width:599px){
  #s5 .s5x-c2 .c2-w{display:none;}
  #s5 .s5x-c2.s5k-win .c2-body{height:auto;}
}
@container s5k (max-width:540px){
  #s5 .s5x-c2 .c2-crumb-job{display:none;}
  #s5 .s5x-c2 .c2-top{grid-template-columns:minmax(0,1fr); row-gap:6px;}
  #s5 .s5x-c2 .c2-fit{justify-self:start; grid-row:2;}
  #s5 .s5x-c2 .c2-arc{font-size:12px; line-height:17px;}
  #s5 .s5x-c2 .c2-rail{margin-top:18px;}
}
/* ---------- Case 3: Simulate before you decide ---------- */
/* Case 3 - Scoring Health, cropped to the product's own two halves:
   left  = "Adjust criterion weights" (five range inputs, each spanning its baseline +/-10; only Skills Match moved)
   right = "How your top 10 looks now" (the live re-sorted list: rank, name, rounded score, rank change)
   foot  = the product's stability verdict sentence.
   Budget, wide (body 318 = 38 padding + main + 14 gap + foot 18  =>  main 248):
     left : head 24 + 5 sliders x 34 (label 18 + track 14 + 2) = 170 + 14 + preset row 30   => 238
     right: head 24 + list 222 (rows 1-5 at pitch 30, 12px top-5 cut, rows 6-7 at pitch 30) => 246
   Numerals are Inter Tight tabular figures (Space Grotesk's footed "1" read as a font fallback in round 1).
   Narrow: Skills Match slider (cause) -> preview list (effect) -> verdict. */

#s5 .s5x-c3{--c3-num:'Inter Tight','Inter Tight Fallback',system-ui,sans-serif;}
#s5 .s5x-c3 .c3-grid{display:grid; grid-template-columns:minmax(0,.62fr) minmax(0,1fr); column-gap:32px; height:100%; align-items:start;}
#s5 .s5x-c3 .c3-head{margin:0 0 6px; height:18px;}

/* ---------- sliders: each track IS the real input range (baseline -10 .. baseline +10, step 5) ---------- */
#s5 .s5x-c3 .c3-sl{margin:0; padding:0; list-style:none;}
#s5 .s5x-c3 .c3-s{display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-rows:18px 14px; row-gap:0; margin-bottom:2px; align-items:center;}
#s5 .s5x-c3 .c3-sn{font-size:12.5px; line-height:18px; color:var(--k-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
#s5 .s5x-c3 .c3-sv{font-family:var(--c3-num); font-variant-numeric:tabular-nums lining-nums; font-feature-settings:'tnum' 1,'lnum' 1; font-size:12px; line-height:18px; color:var(--k-2); text-align:right; white-space:nowrap;}
#s5 .s5x-c3 .c3-sv b{font-weight:600; font-size:13px; color:var(--k-ink); letter-spacing:-.01em;}
#s5 .s5x-c3 .c3-was{color:var(--k-mute); font-size:12px;}
#s5 .s5x-c3 .c3-to{color:var(--k-mute); margin:0 4px; font-size:11.5px;}
#s5 .s5x-c3 .is-live .c3-sn{color:var(--k-ink); font-weight:600;}

#s5 .s5x-c3 .c3-tr{grid-column:1 / 3; position:relative; height:14px; --in:6px;}
#s5 .s5x-c3 .c3-tr::before{content:''; position:absolute; left:var(--in); right:var(--in); top:6px; height:2px; background:var(--k-border);}
/* baseline mark: the middle of every track (range is centred on the job's setting) */
#s5 .s5x-c3 .c3-base{position:absolute; left:50%; top:2px; width:2px; height:10px; margin-left:-1px; background:var(--k-ink);}
#s5 .s5x-c3 .c3-fill{position:absolute; left:50%; right:var(--in); top:6px; height:2px; background:var(--k-rose); transform-origin:left center;}
/* thumb: ink disc with a white halo that cuts the track */
/* thumb at rest on the baseline: white disc, #73716E ring (4.87:1). The moved thumb is solid ink with a white halo */
#s5 .s5x-c3 .c3-kn{position:absolute; left:50%; top:1px; width:12px; height:12px; margin-left:-6px; border-radius:50%; background:var(--k-surface); box-shadow:inset 0 0 0 1.5px var(--k-mute), 0 1px 2px rgba(27,27,31,.12);}
#s5 .s5x-c3 .is-live .c3-kn{left:calc(100% - var(--in)); background:var(--k-ink); box-shadow:0 0 0 2px var(--k-surface), 0 1px 3px 1px rgba(27,27,31,.2);}

/* named preset: the real "+ Save as preset" form, opened and named */
#s5 .s5x-c3 .c3-preset{display:flex; align-items:stretch; height:30px; margin-top:14px; border-radius:6px; background:var(--k-bg); box-shadow:inset 0 0 0 1px var(--k-rule);}
#s5 .s5x-c3 .c3-field{flex:1 1 auto; min-width:0; display:flex; align-items:center; padding:0 12px; font-size:12.5px; color:var(--k-ink); white-space:nowrap; overflow:hidden;}
#s5 .s5x-c3 .c3-save{flex:none; display:flex; align-items:center; padding:0 12px; border-left:1px solid var(--k-rule); font-size:12px; font-weight:600; color:var(--k-ink); white-space:nowrap;}

/* ---------- preview ranking ---------- */
#s5 .s5x-c3 .c3-rhead{display:flex; align-items:baseline; gap:12px; height:18px; margin-bottom:6px; min-width:0;}
#s5 .s5x-c3 .c3-prev{margin-left:auto; font-size:11.5px; color:var(--k-2); white-space:nowrap;}
#s5 .s5x-c3 .c3-list{position:relative; height:222px;}
#s5 .s5x-c3 .c3-rule{position:absolute; left:0; right:0; top:calc(var(--y) * 1px); height:1px; background:var(--k-line);}
#s5 .s5x-c3 .c3-cut{position:absolute; left:0; right:0; top:150px; height:12px; display:flex; align-items:center; gap:8px;}
#s5 .s5x-c3 .c3-cut span{font-size:11px; line-height:12px; font-weight:500; color:var(--k-2); white-space:nowrap;}
#s5 .s5x-c3 .c3-cut::after{content:''; flex:1 1 auto; height:1px; background:rgba(27,27,31,.6);}

#s5 .s5x-c3 .c3-k{position:absolute; left:0; width:16px; top:calc(var(--top) * 1px); height:29px; line-height:29px; text-align:right;
  font-family:var(--c3-num); font-feature-settings:'tnum' 1,'lnum' 1; font-variant-numeric:tabular-nums; font-size:12px; font-weight:500; color:var(--k-mute); z-index:3;}
#s5 .s5x-c3 .c3-r{position:absolute; left:28px; right:0; top:calc(var(--top) * 1px); height:29px; display:grid; grid-template-columns:minmax(0,1fr) 30px 46px; column-gap:12px; align-items:center; background:var(--k-surface); z-index:1; will-change:transform;}
#s5 .s5x-c3 .c3-r.up{z-index:2;}
#s5 .s5x-c3 .c3-hl{position:absolute; inset:0 0 0 -8px; background:var(--k-sage); opacity:0; pointer-events:none;}
#s5 .s5x-c3 .c3-nm{position:relative; font-size:13px; font-weight:600; letter-spacing:-.01em; color:var(--k-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
#s5 .s5x-c3 .c3-sc,
#s5 .s5x-c3 .c3-ch{position:relative; text-align:right; font-family:var(--c3-num); font-feature-settings:'tnum' 1,'lnum' 1; font-variant-numeric:tabular-nums lining-nums;}
#s5 .s5x-c3 .c3-sc{font-size:13px; font-weight:500; color:var(--k-ink);}
#s5 .s5x-c3 .c3-ch{display:flex; align-items:center; justify-content:flex-end; gap:3px; font-size:12.5px; font-weight:600; color:var(--k-ink);}
#s5 .s5x-c3 .c3-ch svg{width:9px; height:11px; flex:none; margin-top:-1px;}
#s5 .s5x-c3 .c3-ch.up svg{fill:var(--k-ok);}          /* product: rises green (3.16:1 mark) */
#s5 .s5x-c3 .c3-ch.dn svg{fill:var(--k-ink);}
#s5 .s5x-c3 .c3-ch.eq{font-family:'Inter Tight','Inter Tight Fallback',system-ui,sans-serif; font-size:11.5px; font-weight:400; color:var(--k-mute);}

/* ---------- footer: the product's verdict ---------- */
#s5 .s5x-c3 .c3-foot{min-height:18px;}
#s5 .s5x-c3 .c3-verdict{margin:0; font-size:12.5px; line-height:18px; color:var(--k-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
#s5 .s5x-c3 .c3-verdict b{font-weight:600; color:var(--k-ink);}

/* ---------- narrow (phone ~234px window): cause first, then the preview list, then the verdict ---------- */
@container s5k (max-width:540px){
  #s5 .s5x-c3 .s5k-crumb b,#s5 .s5x-c3 .s5k-crumb i{display:none;}
  #s5 .s5x-c3 .s5k-crumb span{color:var(--k-ink); font-weight:600;}
  #s5 .s5x-c3 .c3-grid{grid-template-columns:minmax(0,1fr); row-gap:16px; height:auto;}
  #s5 .s5x-c3 .c3-head,#s5 .s5x-c3 .c3-s:not(.is-live),#s5 .s5x-c3 .c3-preset{display:none;}
  #s5 .s5x-c3 .c3-s{margin:0;}
  #s5 .s5x-c3 .c3-rhead{flex-direction:column; align-items:flex-start; gap:2px; height:auto; margin-bottom:6px;}
  #s5 .s5x-c3 .c3-prev{margin-left:0; font-size:11px;}
  #s5 .s5x-c3 .c3-r{left:22px; grid-template-columns:minmax(0,1fr) 24px 34px; column-gap:8px;}
  #s5 .s5x-c3 .c3-k{width:12px;}
  #s5 .s5x-c3 .c3-nm{font-size:12.5px;}
  #s5 .s5x-c3 .c3-verdict{white-space:normal; font-size:12px; line-height:1.45;}
}
/* ---------- Case 4: Shortlist in one click ---------- */
/* Case 4 "Shortlist in one click", round 2. One ledger under one control; no footer row, main = 280px.
   Budget (desktop): strip 28 + gap 11 + top rule 1 + 8 rows x 30 = 280 <= 280 (measure.py clipped: []).
   Columns (strip and rows share them): pad 14 | rank 18 | 12 | name 190 | 12 | score 34 | 12 | outcome 1fr | pad 4.
   The trace of the press runs 22px into the outcome column; the button is centred on it.
   Shortlisted rows use the product's own list mark (_tab_candidates.html:38-41): success-green left edge + 5% green tint.
   Rose is spent once, on the press: the ring round the button and its trace (line + five stops).
   Numerals are Inter Tight tabular (Space Grotesk's flagged-and-based "1" read as a fallback glyph in r1). */
#s5 .s5x-c4 .s5k-body{grid-template-rows:minmax(0,1fr);}
#s5 .s5x-c4 .c4-main{--c4-cols:18px 190px 34px minmax(0,1fr); --c4-sx:22px; --c4-gap:11px; --c4-cg:12px;
  display:flex; flex-direction:column; gap:var(--c4-gap);}
#s5 .s5x-c4 .c4-rk,#s5 .s5x-c4 .c4-sc,#s5 .s5x-c4 .c4-from,#s5 .s5x-c4 .c4-n{
  font-family:'Inter Tight','Inter Tight Fallback',system-ui,sans-serif; font-variant-numeric:tabular-nums lining-nums; font-feature-settings:'tnum' 1,'lnum' 1;}

/* ---- control strip ---- */
#s5 .s5x-c4 .c4-strip{display:grid; grid-template-columns:var(--c4-cols); column-gap:var(--c4-cg); align-items:center;
  height:28px; padding:0 4px 0 14px;}
#s5 .s5x-c4 .c4-lead{grid-column:2 / 3; display:flex; align-items:baseline; gap:8px; min-width:0; white-space:nowrap;}
#s5 .s5x-c4 .c4-t{font-size:12.5px; font-weight:600; color:var(--k-ink); letter-spacing:-.005em;}
#s5 .s5x-c4 .c4-s{font-size:12px; color:var(--k-2);}
#s5 .s5x-c4 .c4-cnt{display:flex; align-items:baseline; gap:7px; margin-left:auto;}
#s5 .s5x-c4 .c4-cl{font-size:12px; color:var(--k-2); margin-right:1px;}
#s5 .s5x-c4 .c4-from{font-size:14px; font-weight:500; color:var(--k-2);}
#s5 .s5x-c4 .c4-n{font-size:14px; font-weight:600; color:var(--k-ink); min-width:.6em;}
#s5 .s5x-c4 .c4-arw{width:15px; height:8px; flex:none; align-self:center; fill:none; stroke:var(--k-mute); stroke-width:1.2; stroke-linecap:round; stroke-linejoin:round;}
#s5 .s5x-c4 .c4-act{grid-column:4 / 5; display:flex; align-items:center; height:28px; min-width:0;}
/* wrapper = button + 4px for the ring, so nothing paints outside its box */
#s5 .s5x-c4 .c4-bw{position:relative; display:block; flex:none; width:104px; padding:4px; margin:0 0 0 calc(var(--c4-sx) - 52px);}
#s5 .s5x-c4 .c4-btn{width:96px; justify-content:center; position:relative; z-index:1; transform-origin:50% 50%;}
#s5 .s5x-c4 .c4-ring{position:absolute; inset:0; border-radius:9px; box-shadow:inset 0 0 0 1.5px var(--k-rose); pointer-events:none;}

/* ---- ledger ---- */
#s5 .s5x-c4 .c4-rows{list-style:none; margin:0; padding:0; border-top:1px solid var(--k-line);}
#s5 .s5x-c4 .c4-row{position:relative; display:grid; grid-template-columns:var(--c4-cols); column-gap:var(--c4-cg); align-items:center;
  height:30px; padding:0 4px 0 14px; border-bottom:1px solid var(--k-line);}
#s5 .s5x-c4 .c4-row:last-child{border-bottom:0;}
/* the product's shortlisted-row mark */
#s5 .s5x-c4 .c4-mk{position:absolute; left:0; right:0; top:0; bottom:-1px; background:rgba(91,158,126,.05); box-shadow:inset 3px 0 0 var(--k-ok); pointer-events:none;}
#s5 .s5x-c4 .c4-rk{position:relative; font-size:12px; font-weight:500; color:var(--k-mute); text-align:right;}
#s5 .s5x-c4 .c4-nm{position:relative; font-size:13px; font-weight:600; color:var(--k-ink); letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
#s5 .s5x-c4 .c4-sc{position:relative; font-size:14px; font-weight:500; color:var(--k-ink); text-align:right; letter-spacing:-.01em;}

/* outcome column: the trace + the outcome in words */
#s5 .s5x-c4 .c4-st{position:relative; align-self:stretch; display:flex; align-items:center; min-width:0;}
#s5 .s5x-c4 .c4-sp{position:absolute; left:calc(var(--c4-sx) - .75px); top:0; bottom:-1px; width:1.5px; background:var(--k-rose); transform-origin:50% 0;}
#s5 .s5x-c4 .c4-sp.c4-stem{top:calc(-1 * var(--c4-gap) - 1px); bottom:auto; height:calc(var(--c4-gap) + 1px);}
#s5 .s5x-c4 .c4-sp--end{bottom:50%;}
/* a stop: 7px square on the trace + a 9px lead to the word */
#s5 .s5x-c4 .c4-node{position:absolute; left:calc(var(--c4-sx) - 3.5px); top:calc(50% - 3.5px); width:16px; height:7px;
  background:linear-gradient(var(--k-rose),var(--k-rose)) 0 0 / 7px 7px no-repeat, linear-gradient(var(--k-rose),var(--k-rose)) 7px 3px / 9px 1px no-repeat;}
#s5 .s5x-c4 .c4-tx{padding-left:calc(var(--c4-sx) + 20px); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
#s5 .s5x-c4 .c4-new{font-weight:600; color:var(--k-ink);}
#s5 .s5x-c4 .c4-had{color:var(--k-2);}
#s5 .s5x-c4 .c4-not{color:var(--k-mute);}

/* ---- narrow (< 541px window): same ledger, outcome as one word, the count moves to a foot line ---- */
#s5 .s5x-c4 .c4-foot{margin:0;}
@container s5k (max-width:540px){
  #s5 .s5x-c4 .c4-main{--c4-cols:12px minmax(0,1fr) 20px 64px; --c4-sx:9px; --c4-cg:7px;}
  #s5 .s5x-c4 .c4-strip,#s5 .s5x-c4 .c4-row{padding:0 2px 0 9px;}
  #s5 .s5x-c4 .c4-lead{grid-column:1 / 3; padding-left:5px;}  /* optical: starts under the rank digits */
  #s5 .s5x-c4 .c4-s{display:none;}
  #s5 .s5x-c4 .c4-act{grid-column:3 / 5; display:flex; justify-content:flex-end;}
  #s5 .s5x-c4 .c4-bw{margin:0 3px 0 0;}  /* centre on the trace: 2 pad + 64 - 9 = 57px from the row edge */
  #s5 .s5x-c4 .c4-nm{font-size:12.5px;}
  #s5 .s5x-c4 .c4-sc{font-size:12.5px;}
  #s5 .s5x-c4 .c4-rk{font-size:11px;}
  #s5 .s5x-c4 .c4-node{width:13px; background:linear-gradient(var(--k-rose),var(--k-rose)) 0 0 / 7px 7px no-repeat, linear-gradient(var(--k-rose),var(--k-rose)) 7px 3px / 6px 1px no-repeat;}
  #s5 .s5x-c4 .c4-tx{padding-left:calc(var(--c4-sx) + 15px); font-size:11.5px;}
  #s5 .s5x-c4 .c4-foot{display:flex; flex-wrap:wrap; align-items:baseline; column-gap:7px; row-gap:2px; padding:10px 2px 0 9px; border-top:1px solid var(--k-line);}
  #s5 .s5x-c4 .c4-foot .c4-arw{align-self:center;}
  #s5 .s5x-c4 .c4-fs{flex-basis:100%; font-size:11.5px; color:var(--k-2);}
}
/* ---------- Case 5: Email without switching tabs ---------- */
/* Case 5 r3 - Bulk Email opened from the Candidates list (one screen, two layers, no overlap of content).
   Body 318 (kit), padding 20 24 18, no footer -> main row 280.
   Layer 1, list (220 wide, fully visible): filter 30 + bulk bar 34 + 7 rows x 30 = 274 <= 280.
   Layer 2, dialog (absolute in .s5k-body: top 12, bottom 18 -> 288 tall; right 16, 468 wide; 20px clear of the 212px list):
     pad 16 | head 18 + 10 | Template 32 | Subject 32 | Body (flex) 10 + 18 + 6 + 36 + 6 + 18 + 10 = 104 | 12 | footer 30 | pad 14 = 268 <= 292.
   Footer is one row: [status] [Cancel] [Send]. Status cell holds "Replies go to" before the send and the
   product's result string after it, on the same baseline. The window root carries .c5-sent for the final state.
   Narrow: bulk 30 | 7 rows x 24 | gap 12 | sheet ~270.
   One rose idea: the per-candidate email count (#B05A72 on white, 4.61:1) that appears on the six rows that were sent. */

#s5 .s5x-c5 .c5-stage{position:static;}

/* ---------- layer 1: the list ---------- */
#s5 .s5x-c5 .c5-list{width:212px;}
#s5 .s5x-c5 .c5-filter{display:flex; align-items:center; gap:7px; height:30px; padding-bottom:4px;}
#s5 .s5x-c5 .c5-fv{font-size:12px; font-weight:600; color:var(--k-ink); letter-spacing:-.005em;}
#s5 .s5x-c5 .c5-chev{width:9px; height:6px; flex:none; fill:none; stroke:var(--k-2); stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round;}

#s5 .s5x-c5 .c5-bulk{display:flex; align-items:center; gap:10px; height:34px; border-bottom:1px solid var(--k-rule);}
#s5 .s5x-c5 .c5-sel{font-size:12px; font-weight:500; color:var(--k-2); white-space:nowrap;}
#s5 .s5x-c5 .c5-sel b{font-size:13px; font-weight:600; color:var(--k-ink); margin-right:2px;}
/* the Email control in its pressed state: it is what opened the dialog */
#s5 .s5x-c5 .c5-email{margin-left:auto; height:24px; padding:0 10px; background:var(--k-sage); color:var(--k-ink); font-weight:600;
  box-shadow:inset 0 0 0 1px rgba(27,27,31,.5);}

#s5 .s5x-c5 .c5-rows{margin:0; padding:0; list-style:none;}
#s5 .s5x-c5 .c5-r{display:grid; grid-template-columns:13px minmax(0,1fr) auto 22px; column-gap:10px; align-items:center; height:30px; border-bottom:1px solid var(--k-line);}
#s5 .s5x-c5 .c5-r:last-child{border-bottom:0;}
#s5 .s5x-c5 .c5-n{font-size:13px; font-weight:600; color:var(--k-ink); letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
#s5 .s5x-c5 .c5-mail{font-size:11px; font-weight:500; color:var(--k-rose-d); white-space:nowrap; text-align:right;}
#s5 .s5x-c5 .c5-sc{font-size:13px; font-weight:500; color:var(--k-ink); text-align:right;}
#s5 .s5x-c5:not(.c5-sent) .c5-mail{visibility:hidden;}

/* checkbox: the product's own row control */
#s5 .s5x-c5 .c5-cb{display:block; width:13px; height:13px; border-radius:3px; box-shadow:inset 0 0 0 1.2px var(--k-mute); flex:none;}
#s5 .s5x-c5 .c5-cb.on{background:var(--k-ink); box-shadow:none;}
#s5 .s5x-c5 .c5-cb svg{display:block; width:13px; height:13px; fill:none; stroke:var(--k-surface); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;}

/* ---------- layer 2: the dialog ---------- */
#s5 .s5x-c5 .c5-dlg{position:absolute; top:12px; bottom:18px; right:16px; width:468px; z-index:1;
  display:flex; flex-direction:column; padding:16px 20px 14px; background:var(--k-surface); border-radius:10px;
  box-shadow:0 0 0 1px rgba(27,27,31,.10), 0 1px 2px rgba(27,27,31,.06), 0 18px 36px -14px rgba(27,27,31,.30);}
#s5 .s5x-c5 .c5-dh{font-size:13px; font-weight:600; line-height:18px; color:var(--k-ink); letter-spacing:-.01em; margin-bottom:10px;}

#s5 .s5x-c5 .c5-fields{margin:0; padding:0; border-top:1px solid var(--k-line); flex:1; min-height:0; display:flex; flex-direction:column;}
#s5 .s5x-c5 .c5-f{display:grid; grid-template-columns:64px minmax(0,1fr); align-items:center; min-height:32px; border-bottom:1px solid var(--k-line);}
#s5 .s5x-c5 .c5-f dt{margin:0; font-size:11px; font-weight:500; line-height:18px; color:var(--k-mute);}
#s5 .s5x-c5 .c5-f dd{margin:0; min-width:0; display:flex; align-items:center; gap:8px; font-size:12px; line-height:18px; color:var(--k-ink); white-space:nowrap; overflow:hidden;}
#s5 .s5x-c5 .c5-f dd .c5-chev{margin-left:auto; margin-right:1px;}
#s5 .s5x-c5 .c5-tpl{font-weight:500;}
#s5 .s5x-c5 .c5-sys{font-weight:400; color:var(--k-2);}
#s5 .s5x-c5 .c5-subj{display:block !important;}

#s5 .s5x-c5 .c5-fb{flex:1; align-items:start; padding:10px 0;}
#s5 .s5x-c5 .c5-letter{display:block !important; white-space:normal !important;}
#s5 .s5x-c5 .c5-letter p{margin:0 0 6px; text-wrap:pretty;}
#s5 .s5x-c5 .c5-letter p:last-child{margin-bottom:0;}

/* merge fields: literal, exactly as the product stores them; all treated alike */
#s5 .s5x-c5 .c5-tok{font-family:'Space Mono','Space Mono Fallback',ui-monospace,monospace; font-size:11px; letter-spacing:-.01em; color:var(--k-2); background:none; padding:0; white-space:nowrap;}

/* footer: one row, one baseline; the status cell swaps its text after the send */
#s5 .s5x-c5 .c5-act{display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; column-gap:16px; height:30px; margin-top:12px;}
#s5 .s5x-c5 .c5-status{display:grid; min-width:0;}
#s5 .s5x-c5 .c5-status>span{grid-area:1/1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:18px;}
#s5 .s5x-c5 .c5-reply{font-size:11px; color:var(--k-mute);}
#s5 .s5x-c5 .c5-res{font-size:12px; font-weight:500; color:var(--k-ink);}
#s5 .s5x-c5 .c5-res b{font-weight:600; font-size:12.5px;}
#s5 .s5x-c5 .c5-cancel{color:var(--k-2); font-weight:500; text-decoration:none;}
#s5 .s5x-c5 .c5-send{height:30px; width:84px; padding:0; justify-content:center; flex:none; transform-origin:50% 50%;}

/* state: before the send vs after it (static markup = after) */
#s5 .s5x-c5.c5-sent .c5-reply{visibility:hidden;}
#s5 .s5x-c5:not(.c5-sent) .c5-res{visibility:hidden;}
#s5 .s5x-c5.c5-sent .c5-cancel{visibility:hidden;}

/* ---------- narrow (phone): list on top, the dialog as a sheet below it ---------- */
@container s5k (max-width:540px){
  #s5 .s5x-c5 .s5k-body{padding:10px 0 0;}
  #s5 .s5x-c5 .c5-stage{display:flex; flex-direction:column; gap:10px;}
  #s5 .s5x-c5 .c5-list{width:auto; padding:0 14px;}
  #s5 .s5x-c5 .c5-bulk{height:28px;}
  #s5 .s5x-c5 .c5-email{height:22px;}
  #s5 .s5x-c5 .c5-r{height:21px; column-gap:8px; grid-template-columns:12px minmax(0,1fr) auto 18px;}
  #s5 .s5x-c5 .c5-cb, #s5 .s5x-c5 .c5-cb svg{width:12px; height:12px;}
  #s5 .s5x-c5 .c5-n{font-size:12px;}
  #s5 .s5x-c5 .c5-sc{font-size:12px;}
  #s5 .s5x-c5 .c5-dlg{position:relative; top:auto; bottom:auto; right:auto; width:auto; padding:10px 14px 12px;
    border-radius:10px 10px 0 0; box-shadow:0 -1px 0 rgba(27,27,31,.10), 0 -12px 24px -16px rgba(27,27,31,.32);}
  #s5 .s5x-c5 .c5-dh{margin-bottom:6px;}
  #s5 .s5x-c5 .c5-f{grid-template-columns:52px minmax(0,1fr); min-height:28px;}
  #s5 .s5x-c5 .c5-sys{display:none;}
  /* subject runs on from its label so it wraps in two lines, never cut mid-field */
  #s5 .s5x-c5 .c5-fs{display:block; padding:5px 0 6px; line-height:18px;}
  #s5 .s5x-c5 .c5-fs dt{display:inline; margin-right:8px;}
  #s5 .s5x-c5 .c5-fs dd{display:inline !important; white-space:normal !important; overflow:visible;}
  #s5 .s5x-c5 .c5-fb{grid-template-columns:minmax(0,1fr); padding:5px 0 6px;}
  #s5 .s5x-c5 .c5-fb dt{display:none;}
  #s5 .s5x-c5 .c5-letter p{margin-bottom:3px;}
  /* footer stays one row: Cancel | Send before the send, the result string alone after it */
  #s5 .s5x-c5 .c5-act{margin-top:8px; column-gap:14px;}
  #s5 .s5x-c5 .c5-reply{visibility:hidden;}
  #s5 .s5x-c5.c5-sent .c5-cancel, #s5 .s5x-c5.c5-sent .c5-send{display:none;}
}
/* ---------- Case 6: Patterns across your pool ---------- */
/* Case 6 - Patterns across your pool. Skill Heatmap crop (jobs/42?tab=analytics), round 3.
   Representation: the product's heatmap with a score in every cell (as _tab_analytics.html prints them) on the
   product's bands at threshold 50, so colour only reinforces a number. The criterion almost nobody meets is the
   last weighted column; it stands behind a 12px gutter and a hairline rule. The window's footer states both halves:
   2 of 14 reach 50 on it, 6 to 8 on every other weighted criterion.

   Height budget, window >= 541px (body height set below, measured with measure.py):
     padding top 16
     head 16 + gap 12                                 =  28
     column heads 26 + gap 6                          =  32
     14 rows x 15 + 13 gaps x 2                       = 236
     body row-gap 12
     footer: rule 1 + 10 + 16                         =  27
     padding bottom 14
                                               body   = 365  -> window 399, stage 431
   panelH is then ~ c10's (stage 428). Window bottom edge lands ~7px below the 352px cases, whose headlines run two lines.
   Narrow (< 541px): height auto; first names x Education, Skills match, Design system stewardship; the footer
   sentence leads, so the cropped first phone view carries the claim. */

#s5 .tc-win.s5k-win.s5x-c6{--k-body-h:365px;}
#s5 .s5x-c6{
  --c6-cols:78px repeat(8,minmax(0,1fr)) 12px 86px;
  --c6-ex:#5B9E7E;                    /* Excellent >= 65: success, solid; ink numerals 5.43:1 */
  --c6-st:rgba(91,158,126,.34);       /* Strong 50-64: success at .34; ink numerals */
  --c6-wk:rgba(168,68,45,.085);       /* Weak < 50: danger at .085; danger numerals */
  --c6-wk-t:#A8442D;
}
#s5 .s5x-c6 .c6-body{padding:16px 18px 14px; row-gap:12px;}

/* head: title, scope, and the product legend reduced to its three bands */
#s5 .s5x-c6 .c6-head{display:flex; align-items:baseline; gap:10px; height:16px; margin-bottom:12px; white-space:nowrap;}
#s5 .s5x-c6 .c6-ts{display:inline-flex; align-items:baseline; gap:10px;}
#s5 .s5x-c6 .c6-t{font-size:13px; font-weight:600; line-height:16px; color:var(--k-ink); letter-spacing:-.01em;}
#s5 .s5x-c6 .c6-scope{font-size:12px; line-height:16px; color:var(--k-2);}
#s5 .s5x-c6 .c6-scope .s5k-num{color:var(--k-ink); font-weight:500;}
#s5 .s5x-c6 .c6-n{display:none;}
#s5 .s5x-c6 .c6-key{margin-left:auto; display:flex; align-items:baseline; gap:14px; font-size:11.5px; line-height:16px; color:var(--k-2);}
#s5 .s5x-c6 .c6-k{display:inline-flex; align-items:baseline; white-space:pre;}
#s5 .s5x-c6 .c6-k i{display:block; width:8px; height:8px; border-radius:1.5px; margin-right:6px; align-self:center; flex:none;}
#s5 .s5x-c6 .c6-k .s5k-num{color:var(--k-ink);}
#s5 .s5x-c6 .c6-k i.b0{box-shadow:inset 0 0 0 1px rgba(168,68,45,.45);}

/* the heatmap */
#s5 .s5x-c6 .c6-hm{display:flex; flex-direction:column; gap:2px;}
#s5 .s5x-c6 .c6-r{display:grid; grid-template-columns:var(--c6-cols); column-gap:2px; height:15px; align-items:stretch;}
#s5 .s5x-c6 .c6-hr{height:26px; margin-bottom:4px; align-items:end;}
#s5 .s5x-c6 .c6-h{font-size:11px; font-weight:400; line-height:12px; color:var(--k-mute); white-space:nowrap; text-align:center; letter-spacing:-.012em; justify-self:center; width:max-content;}
#s5 .s5x-c6 .c6-h.c6-f{font-size:11.5px; font-weight:600; line-height:13px; color:var(--k-ink); letter-spacing:-.01em;}
#s5 .s5x-c6 .c6-corner{font-size:11px; font-weight:400; color:var(--k-mute); line-height:12px; align-self:end;}
#s5 .s5x-c6 .c6-nm{font-size:11.5px; font-weight:500; line-height:15px; color:var(--k-ink); white-space:nowrap; overflow:hidden; letter-spacing:-.005em;}
#s5 .s5x-c6 .c6-c{display:block; border-radius:2px; font-size:11px; font-weight:500; line-height:15px; text-align:center; color:var(--k-ink);}
#s5 .s5x-c6 .c6-c.b2{background:var(--c6-ex);}
#s5 .s5x-c6 .c6-c.b1{background:var(--c6-st);}
#s5 .s5x-c6 .c6-c.b0{background:var(--c6-wk); color:var(--k-2); font-weight:400;}
#s5 .s5x-c6 .c6-c.b0.c6-f{color:var(--c6-wk-t); font-weight:600;}   /* red is spent once: on the column the claim is about */
#s5 .s5x-c6 .c6-c.c6-f{position:relative; font-size:12px; font-weight:600;}
#s5 .s5x-c6 .c6-v0{position:absolute; inset:0; font-size:11px; font-weight:400; color:var(--k-2); opacity:0;}   /* motion's before-state only */
#s5 .s5x-c6 .c6-v1{display:block;}
#s5 .s5x-c6 .c6-k i.b2{background:var(--c6-ex);}
#s5 .s5x-c6 .c6-k i.b1{background:var(--c6-st);}
#s5 .s5x-c6 .c6-k i.b0{background:var(--c6-wk);}

/* the gutter that sets the inspected column apart; its hairline runs unbroken through the row gaps */
#s5 .s5x-c6 .c6-gut{position:relative; display:block;}
#s5 .s5x-c6 .c6-gut::after{content:''; position:absolute; left:5.5px; width:1px; top:0; bottom:-2px; background:var(--k-ink); opacity:.5; transform-origin:50% 0;}
#s5 .s5x-c6 .c6-hr .c6-gut{align-self:stretch;}
#s5 .s5x-c6 .c6-hr .c6-gut::after{bottom:-4px;}
#s5 .s5x-c6 .c6-r:last-child .c6-gut::after{bottom:0;}

/* footer: the proof, in the product's voice, left-aligned under the names */
#s5 .s5x-c6 .c6-foot{display:block; margin:0; padding-top:10px; border-top:1px solid var(--k-line); font-size:12.5px; line-height:16px; color:var(--k-2); letter-spacing:-.003em; white-space:nowrap;}
#s5 .s5x-c6 .c6-foot b{font-weight:600; color:var(--k-ink);}
#s5 .s5x-c6 .c6-foot .s5k-num{color:var(--k-ink); font-weight:500;}
#s5 .s5x-c6 .c6-rest{margin-left:6px;}

/* narrow: first names x Education, Skills match, Design system stewardship. Order: the proof, the title, the grid,
   then the legend (numbers are in every cell, so the key can wait), so the cropped first phone view carries the claim. */
@container s5k (max-width:540px){
  #s5 .s5x-c6 .c6-hm{--c6-cols:42px repeat(2,minmax(0,1fr)) 9px 62px;}
  #s5 .s5x-c6 .c6-body{padding:14px 12px 16px; row-gap:12px; grid-template-rows:auto auto;}
  #s5 .s5x-c6 .c6-foot{order:-1; white-space:normal; border-top:0; padding-top:0; padding-bottom:12px; border-bottom:1px solid var(--k-line); font-size:12.5px; line-height:17px;}
  #s5 .s5x-c6 .c6-rest{margin-left:0;}
  #s5 .s5x-c6 .c6-main{display:flex; flex-direction:column;}
  #s5 .s5x-c6 .c6-head{display:contents;}
  #s5 .s5x-c6 .c6-ts{order:1; margin-bottom:10px; flex-wrap:wrap; column-gap:8px; row-gap:0;}
  #s5 .s5x-c6 .c6-t{font-size:12.5px;}
  #s5 .s5x-c6 .c6-scope{font-size:11.5px;}
  #s5 .s5x-c6 .c6-hm{order:2;}
  #s5 .s5x-c6 .c6-key{order:3; margin:12px 0 0; flex-wrap:wrap; gap:4px 10px; white-space:normal; font-size:11px; letter-spacing:-.01em;}
  #s5 .s5x-c6 .c6-w, #s5 .s5x-c6 .c6-ln, #s5 .s5x-c6 .c6-x, #s5 .s5x-c6 .c6-cw{display:none;}
  #s5 .s5x-c6 .c6-n{display:inline;}
  #s5 .s5x-c6 .c6-hr{height:38px;}
  #s5 .s5x-c6 .c6-h.c6-f{white-space:normal; width:auto; justify-self:stretch; font-size:11px; line-height:12.5px;}
  #s5 .s5x-c6 .c6-r:not(.c6-hr){height:16px;}
  #s5 .s5x-c6 .c6-nm, #s5 .s5x-c6 .c6-c{line-height:16px;}
}
/* ---------- Case 7: Recommendations engine ---------- */
/* Case 7 — Recommendations: the Hidden Gem lens drawn as the region it is, and the card it produced.
   Budget (main row, no footer = 280px):
     synthesis 18 + gap 14 = 32
     grid 248  = plot: y-title 13 + 8 + field 187 + x-ticks 20 + key/axis row 20
               = card: head 39 + name 22 + sentence 44 + action 44 = 149, pool-gap block 64 at the foot (35 spare)
   Plot domain: x = match score 25..82, y = career velocity 45..100. */

#s5 .s5x-c7{--c7-x0:35; --c7-xs:57; --c7-y0:45; --c7-ys:55;}

#s5 .s5x-c7 .c7-main{display:grid; grid-template-rows:auto minmax(0,1fr); row-gap:14px; height:100%;}
#s5 .s5x-c7 .c7-synth{margin:0; font-size:12.5px; line-height:18px; color:var(--k-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
#s5 .s5x-c7 .c7-synth b{font-family:'Space Grotesk','Space Grotesk Fallback','Inter Tight','Inter Tight Fallback',sans-serif; font-variant-numeric:tabular-nums lining-nums; font-weight:500; color:var(--k-ink);}
#s5 .s5x-c7 .c7-synth i{font-style:normal; color:var(--k-mute); padding:0 7px;}

#s5 .s5x-c7 .c7-grid{display:grid; grid-template-columns:minmax(0,1fr) 216px; column-gap:40px; min-height:0;}

/* ---------- plot ---------- */
#s5 .s5x-c7 .c7-plot{display:grid; grid-template-rows:auto minmax(0,1fr) auto auto; padding-left:30px; min-height:0; min-width:0;}
#s5 .s5x-c7 .c7-yt{margin:0 0 8px -30px; font-size:11px; line-height:13px; font-weight:500; color:var(--k-mute);}
#s5 .s5x-c7 .c7-field{position:relative; min-height:0; box-shadow:-1px 0 0 var(--k-rule), 0 1px 0 var(--k-rule);}

#s5 .s5x-c7 [style*="--y"]{bottom:calc((var(--y) - var(--c7-y0)) / var(--c7-ys) * 100%);}
#s5 .s5x-c7 .c7-field [style*="--x"], #s5 .s5x-c7 .c7-xticks [style*="--x"]{left:calc((var(--x) - var(--c7-x0)) / var(--c7-xs) * 100%);}

/* y ticks: label + 4px tick, both inside a 30px gutter box */
#s5 .s5x-c7 .c7-ty{position:absolute; left:-30px; width:30px; padding-right:9px; text-align:right; transform:translateY(50%);
  font-family:'Space Grotesk','Space Grotesk Fallback',sans-serif; font-variant-numeric:tabular-nums; font-size:11px; line-height:1; color:var(--k-mute);}
#s5 .s5x-c7 .c7-ty::after{content:''; position:absolute; right:0; top:50%; width:4px; height:1px; background:var(--k-rule);}
#s5 .s5x-c7 .c7-xticks{position:relative; height:20px;}
#s5 .s5x-c7 .c7-xticks span{position:absolute; top:7px; transform:translateX(-50%); font-family:'Space Grotesk','Space Grotesk Fallback',sans-serif; font-variant-numeric:tabular-nums; font-size:11px; line-height:1; color:var(--k-mute);}
#s5 .s5x-c7 .c7-xticks span::before{content:''; position:absolute; left:50%; top:-7px; width:1px; height:4px; background:var(--k-rule);}
#s5 .s5x-c7 .c7-on{color:var(--k-ink) !important; font-weight:500;}

/* the lens: below the bar and velocity over 80. Fine rose hatch; its floor is a dashed rose rule, captioned beneath */
#s5 .s5x-c7 .c7-lens{position:absolute; left:0; top:0;
  width:calc((64 - var(--c7-x0)) / var(--c7-xs) * 100%);
  height:calc((100 - 80) / var(--c7-ys) * 100%);
  background-image:repeating-linear-gradient(135deg, rgba(206,123,145,.34) 0 1px, transparent 1px 5px);
  border-bottom:1px dashed var(--k-rose);}
#s5 .s5x-c7 .c7-lens-t{position:absolute; left:8px; top:calc((100 - 80) / var(--c7-ys) * 100% + 6px); font-size:11px; line-height:14px; font-weight:500; color:var(--k-rose-d); white-space:nowrap;}

#s5 .s5x-c7 .c7-barline{position:absolute; top:0; bottom:0; width:1px; background:var(--k-ink); opacity:.6;}
#s5 .s5x-c7 .c7-barl{position:absolute; top:2px; margin-left:8px; font-size:11px; line-height:14px; font-weight:500; color:var(--k-ink); white-space:nowrap;}

/* marks: a zero-size anchor at the data point; glyphs centred with negative offsets so the beat can scale them */
#s5 .s5x-c7 .c7-m{position:absolute; width:0; height:0;}
#s5 .s5x-c7 .c7-m>svg, #s5 .s5x-c7 .c7-m>i, #s5 .s5x-c7 .c7-o::before{position:absolute; display:block;}
#s5 .s5x-c7 .c7-s>svg{left:-5.5px; top:-5.5px; width:11px; height:11px; fill:var(--k-ink); stroke:var(--k-ink); stroke-width:1; stroke-linejoin:round;}
#s5 .s5x-c7 .c7-o::before{content:''; left:-3.5px; top:-3.5px; width:7px; height:7px; border-radius:50%; box-shadow:inset 0 0 0 1.25px var(--k-mute); background:var(--k-surface);}

#s5 .s5x-c7 .c7-gem{z-index:2;}
#s5 .s5x-c7 .c7-gem-h{left:-12px; top:-12px; width:24px; height:24px; border-radius:50%; background:var(--k-surface); box-shadow:inset 0 0 0 1px var(--k-rose);}
#s5 .s5x-c7 .c7-gem-o{left:-4.5px; top:-4.5px; width:9px; height:9px; border-radius:50%; background:var(--k-surface); box-shadow:inset 0 0 0 1.6px var(--k-rose-d); opacity:0;}
#s5 .s5x-c7 .c7-gem-s{left:-7.5px; top:-8px; width:15px; height:15px; fill:var(--k-rose); stroke:var(--k-rose-d); stroke-width:.8; stroke-linejoin:round; overflow:visible;}
#s5 .s5x-c7 .c7-gem-l{position:absolute; right:17px; top:0; transform:translateY(-50%); padding:0 5px; background:var(--k-surface); font-size:12px; line-height:17px; font-weight:600; color:var(--k-ink); white-space:nowrap; letter-spacing:-.005em;}

/* key (left) and the x-axis title (right) share the last row */
#s5 .s5x-c7 .c7-foot{display:flex; align-items:center; gap:18px; height:20px; margin-top:2px; font-size:11.5px; color:var(--k-2); white-space:nowrap;}
#s5 .s5x-c7 .c7-k{display:inline-flex; align-items:center; gap:6px;}
#s5 .s5x-c7 .c7-k b{font-family:'Space Grotesk','Space Grotesk Fallback',sans-serif; font-variant-numeric:tabular-nums; font-size:12px; font-weight:500; color:var(--k-ink);}
#s5 .s5x-c7 .c7-k-s{width:11px; height:11px; fill:var(--k-ink); stroke:var(--k-ink); stroke-width:1; stroke-linejoin:round;}
#s5 .s5x-c7 .c7-k-o{display:block; width:7px; height:7px; margin:0 2px; border-radius:50%; box-shadow:inset 0 0 0 1.25px var(--k-mute);}
#s5 .s5x-c7 .c7-xt{margin-left:auto; font-size:11px; font-weight:500; color:var(--k-mute);}

/* ---------- the card the lens produced ---------- */
#s5 .s5x-c7 .c7-find{display:flex; flex-direction:column; min-height:0; min-width:0;}
#s5 .s5x-c7 .c7-find .s5k-head{margin-bottom:12px; padding-bottom:9px; border-bottom:1px solid var(--k-line);}
#s5 .s5x-c7 .c7-who{font-size:17px; line-height:22px; font-weight:600; letter-spacing:-.015em; color:var(--k-ink);}
#s5 .s5x-c7 .c7-why{margin:6px 0 0; font-size:12.5px; line-height:1.5; color:var(--k-2); text-wrap:pretty;}
#s5 .s5x-c7 .c7-act{display:grid; align-items:center; justify-items:start; margin-top:16px; height:28px;}
#s5 .s5x-c7 .c7-act>*{grid-area:1/1;}
#s5 .s5x-c7 .c7-pair{display:inline-flex; align-items:center; gap:16px; visibility:hidden;}
#s5 .s5x-c7 .c7-no{color:var(--k-2);}
#s5 .s5x-c7 .c7-done{font-size:12.5px; font-weight:600;}

#s5 .s5x-c7 .c7-gap{margin-top:auto; padding-top:10px; border-top:1px solid var(--k-line);}
#s5 .s5x-c7 .c7-gap-h{display:flex; align-items:baseline; justify-content:space-between; gap:8px;}
#s5 .s5x-c7 .c7-gap-t{font-size:12px; line-height:16px; font-weight:600; color:var(--k-ink);}
#s5 .s5x-c7 .c7-gap-m{margin-top:3px; font-size:12px; line-height:17px; color:var(--k-2);}
#s5 .s5x-c7 .c7-gap-a{font-size:11.5px; font-weight:500; line-height:16px;}

/* ---------- narrow (phone): synthesis, plot, card ---------- */
@container s5k (max-width:540px){
  #s5 .s5x-c7 .c7-main{height:auto; row-gap:12px;}
  #s5 .s5x-c7 .c7-synth{white-space:normal; font-size:12px; line-height:17px;}
  #s5 .s5x-c7 .c7-synth i{padding:0 4px;}
  #s5 .s5x-c7 .c7-grid{grid-template-columns:minmax(0,1fr); row-gap:16px;}
  #s5 .s5x-c7 .c7-field{height:132px;}
  #s5 .s5x-c7 .c7-plot{padding-left:26px; padding-right:6px;}
  #s5 .s5x-c7 .c7-yt{margin-left:-26px;}
  #s5 .s5x-c7 .c7-ty{left:-26px; width:26px; padding-right:8px;}
  #s5 .s5x-c7 .c7-ty:nth-child(2), #s5 .s5x-c7 .c7-ty:nth-child(3), #s5 .s5x-c7 .c7-ty:nth-child(5),
  #s5 .s5x-c7 .c7-xticks span:nth-child(2), #s5 .s5x-c7 .c7-xticks span:nth-child(4){visibility:hidden;}
  #s5 .s5x-c7 .c7-lens-t, #s5 .s5x-c7 .c7-barl{display:none;}
  /* label sits above-left of the mark so it stays inside the lens and clear of the bar line */
  #s5 .s5x-c7 .c7-gem-l{right:auto; left:-56px; top:-29px; transform:none; padding:0 3px; font-size:11px; line-height:15px;}
  #s5 .s5x-c7 .c7-gem-h{left:-10px; top:-10px; width:20px; height:20px;}
  #s5 .s5x-c7 .c7-foot{gap:14px; font-size:11px; margin-left:-26px; margin-right:-6px;}
  #s5 .s5x-c7 .c7-xt{display:none;}
  #s5 .s5x-c7 .c7-who{font-size:15px; line-height:20px;}
  #s5 .s5x-c7 .c7-why{font-size:12px;}
  #s5 .s5x-c7 .c7-act{margin-top:12px;}
  #s5 .s5x-c7 .c7-gap{display:none;}
}
/* ---------- Case 8: Branded report ---------- */
/* Case 8 — Branded report. Left 62%: the report page (a real sheet, cropped by the window floor).
   Right 38%: what the sender holds — the share link and the PDF.
   Budget (main row 280, no footer; the page bleeds 18px into the body's bottom padding = 298):
     page: pad 16 + masthead 38 + 11 + rule 2 + 13 + title 18 + meta 16 + 12 + th 18 + 7 x 21 = 147  => 291 <= 298
     right: share head 22 + field 30 + 9 + terms 36 + 12 + actions 28 = 137; gap 22; pdf head 22 + file 34 + 10 + link 16 = 82 => 241 <= 280 */
#s5 .s5x-c8 .s5k-body{grid-template-rows:minmax(0,1fr); padding-bottom:18px;}
#s5 .s5x-c8 .c8-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.62fr); column-gap:32px; height:100%; min-height:0;}

/* ---------- the page ---------- */
#s5 .s5x-c8 .c8-page{
  --brand:var(--k-gB);
  position:relative; margin:0 0 -18px; padding:16px 22px 0; min-height:0; overflow:hidden;
  background:var(--k-surface);
  border-radius:3px 3px 0 0;
  box-shadow:0 0 0 1px var(--k-line), 0 10px 26px -14px rgba(27,27,31,.22);
}
#s5 .s5x-c8 .c8-mast{display:flex; align-items:flex-end; justify-content:space-between; gap:16px;}
#s5 .s5x-c8 .c8-word{color:var(--brand); white-space:nowrap; font-size:21px; letter-spacing:-.015em;}
#s5 .s5x-c8 .c8-tag{margin-top:3px; font-size:11px; line-height:1.3; color:var(--k-mute);}
#s5 .s5x-c8 .c8-sub{max-width:118px; font-size:11px; line-height:1.3; color:var(--k-mute); text-align:right;}
#s5 .s5x-c8 .c8-rule{height:2px; margin:10px 0 12px; background:var(--brand); transform-origin:left center;}
#s5 .s5x-c8 .c8-title{font-size:13.5px; font-weight:600; line-height:18px; letter-spacing:-.01em; color:var(--k-ink);}
#s5 .s5x-c8 .c8-meta{margin-top:1px; font-size:11px; line-height:15px; color:var(--k-mute); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

#s5 .s5x-c8 .c8-th,
#s5 .s5x-c8 .c8-r{display:grid; grid-template-columns:14px minmax(0,1fr) 112px 24px; column-gap:12px; align-items:center;}
#s5 .s5x-c8 .c8-th{margin-top:10px; height:18px; font-size:11px; color:var(--k-mute); border-bottom:1px solid var(--k-rule);}
#s5 .s5x-c8 .c8-th span:nth-child(3){grid-column:3 / span 2; text-align:right;}
#s5 .s5x-c8 .c8-rows{margin:0; padding:0; list-style:none;}
#s5 .s5x-c8 .c8-r{height:21px; border-bottom:1px solid var(--k-line);}
#s5 .s5x-c8 .c8-r:last-child{border-bottom:0;}
#s5 .s5x-c8 .c8-rk{font-size:11px; color:var(--k-mute);}
#s5 .s5x-c8 .c8-nm{font-size:12px; font-weight:500; color:var(--k-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
#s5 .s5x-c8 .c8-m{position:relative; height:3px; background:var(--k-line);}
#s5 .s5x-c8 .c8-m>b{position:absolute; inset:0 auto 0 0; width:calc(var(--v) * 1%); background:var(--brand); transform-origin:left center;}
#s5 .s5x-c8 .c8-sc{font-size:12px; font-weight:500; text-align:right; color:var(--k-ink);}

/* ---------- the sender's side ---------- */
#s5 .s5x-c8 .c8-out{display:flex; flex-direction:column; gap:22px; min-width:0; padding-top:2px;}
#s5 .s5x-c8 .c8-out .s5k-head{margin-bottom:8px;}
#s5 .s5x-c8 .c8-field{
  height:30px; display:flex; align-items:center; padding:0 10px;
  background:var(--k-bg); border-radius:6px; box-shadow:inset 0 0 0 1px var(--k-rule);
  color:var(--k-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; line-height:30px;
}
#s5 .s5x-c8 .c8-terms{margin:9px 0 12px; font-size:12px; line-height:1.5; color:var(--k-2); text-wrap:pretty;}
#s5 .s5x-c8 .c8-terms b{font-weight:600; color:var(--k-ink);}
#s5 .s5x-c8 .c8-act{display:flex; align-items:center; justify-content:space-between; gap:10px;}
#s5 .s5x-c8 .c8-exp{font-size:11.5px; color:var(--k-2); white-space:nowrap;}
#s5 .s5x-c8 .c8-copy{position:relative; overflow:hidden;}
#s5 .s5x-c8 .c8-copy-b{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; opacity:0;}
#s5 .s5x-c8 .c8-pdf{padding-top:16px; border-top:1px solid var(--k-line);}
#s5 .s5x-c8 .c8-filerow{display:grid; grid-template-columns:22px minmax(0,1fr); column-gap:12px; align-items:center; margin-bottom:12px;}
#s5 .s5x-c8 .c8-ico{width:22px; height:30px; display:block;}
#s5 .s5x-c8 .c8-ico-p{fill:var(--k-surface); stroke:var(--k-border); stroke-width:1;}
#s5 .s5x-c8 .c8-ico-b{fill:var(--k-gB);}
#s5 .s5x-c8 .c8-ico-l{fill:var(--k-border);}
#s5 .s5x-c8 .c8-file{color:var(--k-ink); line-height:17px;}

/* ---------- narrow (< 541px window): page first, unclipped; link below; no meters, no PDF block ---------- */
@container s5k (max-width:540px){
  #s5 .s5x-c8 .s5k-body{padding-bottom:16px;}
  #s5 .s5x-c8 .c8-grid{grid-template-columns:minmax(0,1fr); row-gap:16px; height:auto;}
  #s5 .s5x-c8 .c8-page{margin:0; padding:12px 14px 6px; border-radius:3px;}
  #s5 .s5x-c8 .c8-mast{display:block;}
  #s5 .s5x-c8 .c8-word{font-size:20px;}
  #s5 .s5x-c8 .c8-tag{display:none;}
  #s5 .s5x-c8 .c8-sub{max-width:none; text-align:left; margin-top:3px;}
  #s5 .s5x-c8 .c8-rule{margin:9px 0 10px;}
  #s5 .s5x-c8 .c8-meta{white-space:normal;}
  #s5 .s5x-c8 .c8-th,
  #s5 .s5x-c8 .c8-r{grid-template-columns:minmax(0,1fr) 40px; column-gap:8px;}
  #s5 .s5x-c8 .c8-th span:nth-child(1), #s5 .s5x-c8 .c8-rk, #s5 .s5x-c8 .c8-m{display:none;}
  #s5 .s5x-c8 .c8-th span:nth-child(3){grid-column:auto; text-align:right;}
  #s5 .s5x-c8 .c8-r:nth-child(n+4){display:none;}
  #s5 .s5x-c8 .c8-r:nth-child(3){border-bottom:0;}
  #s5 .s5x-c8 .c8-pdf{display:none;}
  #s5 .s5x-c8 .c8-out{gap:0; padding-top:0;}
}
/* ---------- Case 9: Languages ---------- */
/* Case 9 — one English criterion, four scripts, ONE bar.
   Height budget (window >= 541px wide): body 318 = 20 pad + main + 14 gap + foot 17 + 18 pad => main 249.
     head        42  (criterion 18 + provenance 16 + 8 gap)
     4 rows x 50 200  (two-line script max: 2 x 19 + 12 padding)
     total      242 <= 249
   Columns (content 692): who 116 | 20 | line 1fr (340) | 20 | scale 196 (meter 160 + 10 + numeral 26).
   The threshold is one rule through every row: 80px into the scale column = 50% of the 160px meter. */

#s5 .s5x-c9 .c9-main{position:relative; display:flex; flex-direction:column;}
#s5 .s5x-c9 .c9-head,
#s5 .s5x-c9 .c9-row{display:grid; grid-template-columns:116px minmax(0,1fr) 196px; column-gap:20px;}
#s5 .s5x-c9 .c9-head{grid-template-columns:minmax(0,1fr) 196px; align-items:end; padding-bottom:8px; border-bottom:1px solid var(--k-line);}

#s5 .s5x-c9 .c9-crit-t{font-size:14px; font-weight:600; line-height:1.3; letter-spacing:-.01em; color:var(--k-ink);}
#s5 .s5x-c9 .c9-crit-s{font-size:11.5px; line-height:1.4; color:var(--k-2); margin-top:1px;}

/* axis over the scale column: 0 at the meter start, threshold at 80px, 100 at the meter end */
#s5 .s5x-c9 .c9-axis{position:relative; height:16px; font-family:'Space Grotesk','Space Grotesk Fallback',sans-serif; font-variant-numeric:tabular-nums; font-size:11px; line-height:16px; color:var(--k-mute);}
#s5 .s5x-c9 .c9-axis span{position:absolute; bottom:0; white-space:nowrap;}
#s5 .s5x-c9 .c9-a0{left:0;}
#s5 .s5x-c9 .c9-a100{left:160px; transform:translateX(-100%);}
#s5 .s5x-c9 .c9-a50{left:80px; transform:translateX(-50%); color:var(--k-rose-d); font-weight:500;}
#s5 .s5x-c9 .c9-a50::before{content:'Threshold '; font-family:'Inter Tight','Inter Tight Fallback',sans-serif; font-weight:500;}

#s5 .s5x-c9 .c9-tbl{position:relative;}
#s5 .s5x-c9 .c9-rows{list-style:none; margin:0; padding:0;}
#s5 .s5x-c9 .c9-row{align-items:center; min-height:50px; padding:6px 0; border-bottom:1px solid var(--k-line);}
#s5 .s5x-c9 .c9-row:last-child{border-bottom:0;}
#s5 .s5x-c9 .c9-lang{font-size:11.5px; line-height:1.35; color:var(--k-2); margin-top:1px;}

#s5 .s5x-c9 .c9-line{margin:0; font-size:13px; line-height:19px; color:var(--k-ink); text-wrap:pretty;}
#s5 .s5x-c9 .c9-deva{font-size:13.5px;}
#s5 .s5x-c9 .c9-jpan{word-break:keep-all; line-break:strict;}
#s5 .s5x-c9 .c9-arab{text-align:right; font-size:14px;}

#s5 .s5x-c9 .c9-score{display:grid; grid-template-columns:160px 1fr; column-gap:10px; align-items:center;}
#s5 .s5x-c9 .c9-meter{position:relative; display:block; height:3px; background:var(--k-line);}
#s5 .s5x-c9 .c9-meter>b{position:absolute; inset:0 auto 0 0; width:calc(var(--v) * 1%); background:var(--k-ink); transform-origin:left center;}
#s5 .s5x-c9 .c9-n{text-align:right; color:var(--k-ink);}

/* the one bar: a single rose rule from the axis label down through all four rows */
#s5 .s5x-c9 .c9-bar{position:absolute; top:-5px; bottom:4px; right:calc(196px - 80px - 1px); width:2px; background:var(--k-rose); transform-origin:center top;}

#s5 .s5x-c9 .c9-foot{color:var(--k-2);}

/* ---------- Narrow (phone, 3 rows: Japanese is .s5k-wide) ----------
   Row: name + language on one line, numeral at its right; the source line (2 lines max); the meter with a
   rose tick at 50 — the shared rule cannot cross stacked text, so the bar is repeated as a tick on every meter. */
@container s5k (max-width:540px){
  #s5 .s5x-c9 .c9-head{display:block; padding-bottom:10px;}
  #s5 .s5x-c9 .c9-crit-t{font-size:13.5px;}
  #s5 .s5x-c9 .c9-axis, #s5 .s5x-c9 .c9-bar{display:none;}
  #s5 .s5x-c9 .c9-row{grid-template-columns:minmax(0,1fr) auto; grid-template-areas:'who num' 'line line' 'meter meter';
    column-gap:8px; min-height:0; padding:10px 0 12px;}
  #s5 .s5x-c9 .c9-score{display:contents;}
  #s5 .s5x-c9 .c9-who{grid-area:who; display:flex; align-items:baseline; gap:8px; min-width:0;}
  #s5 .s5x-c9 .c9-who .s5k-name{white-space:nowrap;}
  #s5 .s5x-c9 .c9-rin{display:none;}
  #s5 .s5x-c9 .c9-lang{margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  #s5 .s5x-c9 .c9-n{grid-area:num; align-self:baseline;}
  #s5 .s5x-c9 .c9-line{grid-area:line; margin:4px 0 9px; font-size:13px; line-height:20px;}
  #s5 .s5x-c9 .c9-deva{font-size:13.5px;}
  #s5 .s5x-c9 .c9-arab{font-size:14px;}
  #s5 .s5x-c9 .c9-meter{grid-area:meter;}
  #s5 .s5x-c9 .c9-meter::after{content:''; position:absolute; left:50%; top:-4px; width:2px; height:11px; margin-left:-1px; background:var(--k-rose);}
  #s5 .s5x-c9 .c9-foot{display:block; line-height:1.45;}
}
/* ---------- Case 10: Built for teams ---------- */
/* Case 10 "Built for teams" r2: assignment map + activity and credit pool band.
   No kit footer: the body is one row, so main = 318 - 38 padding = 280.
   Map:  head 24 + 4 rows x 36 = 168   (lane SVG 252 x 168; row centres 42 / 78 / 114 / 150)
   Band: gap 20 + rule 1 + pad 14 + head 24 + content 52 = 111
   Total 279 <= 280.
   Columns: members 216 | lanes 252 | jobs 224 = 692 (window 740 - 2 x 24). Band: activity 468 | pool 224. */

/* Stage: 44px more air under the window than the kit's 20px, so the CTA below lands under the slide's
   salt-trace bottom rule (y=772 at 1440x900) instead of on it. Scoped to this case's stage only;
   on short desktops (1366x768) the rule sits below the CTA already, so the kit's 20px stays. */
@media (min-width:981px) and (min-height:820px){ #s5 .tc-win-stage:has(> .s5x-c10){padding-bottom:64px;} }
#s5 .s5x-c10 .s5k-body{grid-template-rows:minmax(0,1fr);}
#s5 .s5x-c10 .c10-main{display:flex; flex-direction:column;}

/* section heads: plain 12px 600 ink, rule under the map heads only */
#s5 .s5x-c10 .c10-head{margin:0; height:24px; padding:0 0 7px; display:flex; align-items:flex-end; font:600 12px/1 'Inter Tight','Inter Tight Fallback',system-ui,sans-serif; color:var(--k-ink); letter-spacing:-.005em; border-bottom:1px solid var(--k-rule);}
#s5 .s5x-c10 .c10-head--b{height:auto; padding:0; border:0; line-height:16px; margin-bottom:8px;}

/* ---------- map ---------- */
#s5 .s5x-c10 .c10-map{display:grid; grid-template-columns:216px 252px 224px; align-items:start;}
#s5 .s5x-c10 .c10-list{margin:0; padding:0; list-style:none;}
#s5 .s5x-c10 .c10-row{height:36px; display:flex; flex-direction:column; justify-content:center; border-bottom:1px solid var(--k-line); min-width:0;}
#s5 .s5x-c10 .c10-row:last-child{border-bottom:0;}
#s5 .s5x-c10 .c10-l1{display:flex; align-items:baseline; gap:10px; min-width:0; line-height:18px;}
#s5 .s5x-c10 .c10-l1 .s5k-name{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0;}
#s5 .s5x-c10 .c10-l2{font-size:11.5px; line-height:15px; color:var(--k-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0;}
#s5 .s5x-c10 .c10-role{margin-left:auto; flex:none; font-size:11.5px; color:var(--k-2);}
#s5 .s5x-c10 .c10-role.c10-own{color:var(--k-ink); font-weight:600;}
#s5 .s5x-c10 .c10-mem .c10-row{padding-right:14px;}
#s5 .s5x-c10 .c10-mem .c10-head{padding-right:14px;}
#s5 .s5x-c10 .c10-jobs .c10-row, #s5 .s5x-c10 .c10-jobs .c10-head{padding-left:14px;}
/* the pending invite: an address, not yet a person, so it has no lane */
#s5 .s5x-c10 .c10-email{font-size:12.5px; font-weight:500; color:var(--k-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; letter-spacing:-.005em;}
/* the unassigned job: the product's own empty-state line */
#s5 .s5x-c10 .c10-none .c10-l2{color:var(--k-mute);}

/* lanes: real pixels (no scaling), drawn from member to job */
#s5 .s5x-c10 .c10-lanes{display:block; width:252px; height:168px; overflow:visible; fill:none;}
#s5 .s5x-c10 .c10-grey path{stroke:var(--k-ink); stroke-opacity:.42; stroke-width:1.25; stroke-linecap:round;}
#s5 .s5x-c10 .c10-new{stroke:var(--k-rose); stroke-width:1.75; stroke-linecap:round;}
#s5 .s5x-c10 .c10-ports circle{fill:var(--k-ink); stroke:none;}

/* ---------- band: shared activity | credit pool ---------- */
#s5 .s5x-c10 .c10-band{display:grid; grid-template-columns:468px 224px; margin-top:20px; padding-top:14px; border-top:1px solid var(--k-line);}
#s5 .s5x-c10 .c10-act{padding-right:40px; min-width:0;}
#s5 .s5x-c10 .c10-ev{display:grid; grid-template-columns:46px minmax(0,1fr); align-items:baseline; height:22px; min-width:0;}
#s5 .s5x-c10 .c10-evt{min-width:0; font-size:12.5px; line-height:18px; color:var(--k-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
#s5 .s5x-c10 .c10-evt b{font-weight:600; color:var(--k-ink);}
#s5 .s5x-c10 .c10-evd{grid-column:1; grid-row:1; font-size:12px; font-weight:500; color:var(--k-mute);}
#s5 .s5x-c10 .c10-evt{grid-column:2; grid-row:1;}
#s5 .s5x-c10 .c10-pool{padding-left:14px; min-width:0;}
#s5 .s5x-c10 .c10-pool p{margin:0;}
#s5 .s5x-c10 .c10-pl1{font-size:13px; font-weight:600; line-height:18px; color:var(--k-ink); letter-spacing:-.01em;}
#s5 .s5x-c10 .c10-pool .c10-pl2{margin-top:2px; font-size:12px; line-height:16px; color:var(--k-2); text-wrap:pretty;}

/* ---------- Narrow (phones): members with their assigned jobs, then credit pool, then activity. No lanes,
   no separate jobs list (the same facts, read per person). Budget ~431px window, stage <= 560. ---------- */
@container s5k (max-width:540px){
  #s5 .s5x-c10 .c10-map{grid-template-columns:minmax(0,1fr);}
  #s5 .s5x-c10 .c10-mem .c10-row, #s5 .s5x-c10 .c10-mem .c10-head{padding-right:0;}
  #s5 .s5x-c10 .c10-head{height:auto; padding-bottom:6px; line-height:16px;}
  #s5 .s5x-c10 .c10-head--b{padding-bottom:0; margin-bottom:6px;}
  #s5 .s5x-c10 .c10-mem .c10-row{height:38px;}
  #s5 .s5x-c10 .c10-l1 .s5k-name{font-size:12.5px;}
  #s5 .s5x-c10 .c10-email{font-size:12px;}
  #s5 .s5x-c10 .c10-addm{color:var(--k-ink); font-weight:600;}
  #s5 .s5x-c10 .c10-band{grid-template-columns:minmax(0,1fr); row-gap:14px; margin-top:12px; padding-top:12px;}
  #s5 .s5x-c10 .c10-pool{order:-1; padding-left:0;}
  #s5 .s5x-c10 .c10-act{padding-right:0;}
  #s5 .s5x-c10 .c10-ev{height:auto; grid-template-columns:42px minmax(0,1fr); padding:2px 0;}
  #s5 .s5x-c10 .c10-evt{white-space:normal; font-size:12px; line-height:16px;}
  #s5 .s5x-c10 .c10-evd{font-size:11.5px; line-height:16px;}
  #s5 .s5x-c10 .c10-pl1{font-size:12.5px;}
}

/* ── Contextual CTA ── */
/* the buttons themselves are styled with the feature-slide buttons (.fc-cta-main) */
.tc-cta{margin-top:12px;display:flex;flex-wrap:wrap;align-items:center;gap:10px;}
#s5 .section-eyebrow{color:var(--rose-on-sm);text-shadow:var(--rose-glow);}
/* Left nav pushed down on desktop — eyebrow + buttons shift together;
   right column (tc-content / tc-headline) is untouched.
   Mobile horizontal-scroll row is exempt (see max-width:767px block). */
@media(min-width:768px){ #s5 .tc-nav{padding-top:80px;}}
/* QA-S5 - the deck centres s5 in the room below the feature strip (bottom ~109px),
   never under it. `safe` falls back to top alignment when the tallest case does not
   fit; the JS fit in the s5 script then scales the body down (hero --ed-s idea). */
@media(min-width:768px){
  #s5:not(.m-flow){padding-top:124px;padding-bottom:16px;align-items:safe center;}
  #s5:not(.m-flow) .tc-inner{padding-top:0;padding-bottom:0;}
}
@media(min-width:768px) and (max-height:820px){
  #s5:not(.m-flow) .tc-nav{padding-top:48px;}
  #s5:not(.m-flow) .tc-panel{gap:16px;}
  #s5:not(.m-flow) .tc-headline{font-size:30px;}
}
/* The Case headline is one line in the deck: size it to the panel so the longest case (about 27em) fits; below 22px it wraps instead */
#s5:not(.m-flow) .tc-content{container-type:inline-size;}
#s5:not(.m-flow) .tc-headline{max-width:none;font-size:max(22px,min(36px,calc(100cqi / 27.6)));}


/* ── The Case: animations ── */
@keyframes tcFadeUp {
  from { opacity:0; transform:translateY(18px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes tcFadeIn {
  from { opacity:0; }
  to   { opacity:1; }
}

/* Panel entrance: each child staggers in when tc-entering class is present */
.tc-panel.tc-entering .tc-headline {
  animation: tcFadeUp .28s cubic-bezier(0.16,1,0.3,1) both;
}
/* The fade-up must not replace the motion-mark sweep: (0,3,0) beat
   .mm-reveal.mm-run (0,2,0) and stranded the clip at the resting colour.
   Run both; once the sweep lands JS adds .mm-done and the clip is dropped. */
.tc-panel.tc-entering .tc-headline.mm-reveal.mm-run {
  animation: tcFadeUp .28s cubic-bezier(0.16,1,0.3,1) both, mmTextReveal 1100ms cubic-bezier(.65,0,.35,1) forwards;
}
.tc-headline.mm-done{background:none !important;-webkit-text-fill-color:var(--mm-ink) !important;color:var(--mm-ink) !important;}
.tc-panel.tc-entering .tc-body {
  animation: tcFadeUp .28s cubic-bezier(0.16,1,0.3,1) .07s both;
}
.tc-panel.tc-entering .tc-win {
  animation: tcFadeUp .32s cubic-bezier(0.16,1,0.3,1) .14s both;
}
.tc-panel.tc-entering .tc-cta {
  animation: tcFadeIn .2s ease .28s both;
}

/* The Case is now slide s5 — no scroll-in observer needed */

/* Reduced motion: disable all tc-* animations */
@media (prefers-reduced-motion: reduce) {
  .tc-panel.tc-entering .tc-headline,
  .tc-panel.tc-entering .tc-body,
  .tc-panel.tc-entering .tc-win,
  .tc-panel.tc-entering .tc-cta {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .tc-panel,.tc-panel.tc-on{transition:none !important;}
  .tc-run .tc-nav-item.tc-active::after{animation:none !important;display:none;}
}

/* ── The Case: mobile (max-width 767px) ── */
@media (max-width: 767px) {
  #s5 { padding: 64px 0 56px; }
  .tc-inner { padding: 0 20px; }
  .tc-title { font-size: 36px; margin-bottom: 28px; }
  .tc-shell {
    grid-template-columns: 1fr;
    border-radius: 14px;
  }
  .tc-nav {
    border-right: none;
    border-bottom: 1px solid rgba(251,251,251,.16);
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 8px 4px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .tc-nav::-webkit-scrollbar { display: none; }
  .tc-nav-div { display: none; }
  .tc-nav-item {
    flex-shrink: 0;
    flex-direction: row;
    padding: 8px 14px;
    border-left: none;
    border-bottom: 3px solid transparent;
    border-radius: 8px;
    min-height: 44px;
    white-space: nowrap;
  }
  .tc-nav-item.tc-active {
    border-bottom-color: var(--p);
    background: rgba(206,123,145,.12);
  }

  .tc-num { display: none; }
  .tc-lbl { font-size: 13px; }
  .tc-ind { display: none; }
  #s5 .tc-panel:not(.tc-on) { display: none; }
  #s5 .tc-eyebrow-d { display: none; }
  #s5 .tc-eyebrow-m { display: block; margin: 0 0 10px; }
  #s5 .tc-win-stage { padding: 10px; }
  .tc-content { padding: 28px 20px; }
  .tc-headline { font-size: 24px; }
  .tc-body { font-size: 14px; }
  .tc-win { max-width: 100%; }
}



/* ════════════════ HireSalt 2.0 refresh overrides ════════════════ */
/* Rose accent system. Marketing CTAs stay rose (energy);
   product app uses ink (quiet). */
/* Marketing cards: borderless on white-on-paper (matches setup-app rule) */
.dash-stat,.dash-job-card,.dash-skeleton-card,.kpi-c,.chart-b,.hm-b{
  border:0 !important;
  box-shadow:0 1px 0 rgba(201,194,195,.4);
}
#win1-body .dash-stat,#win1-body .dash-job-card,#win1-body .dash-skeleton-card,
#hero-morph .hm-body .dash-stat,#hero-morph .hm-body .dash-job-card,#hero-morph .hm-body .dash-skeleton-card{
  box-shadow:0 1px 2px rgba(27,27,31,.05),0 6px 16px rgba(27,27,31,.04);
}
#win1-body,#hero-morph .hm-body{background:#F6F4F4;}
/* the handoff frame grows past .hm-body's fixed height: same tone so no lighter strip shows under the clone */
#hero-morph .hm-win{background:#F6F4F4;}
/* Hairline reserved for inputs + ghost buttons + row dividers */
.cand{ border-color:#C9C2C3; }
.cand.open{ border-color:#CE7B91; box-shadow:0 2px 10px rgba(206,123,145,.12); }
/* Italic em accent in serif headlines: rose */

/* Tabular numerals on stats */
.kpi-n,.hpill-n,.hero-float-val,.dash-stat-num,.demo-score-num,.demo-arc-value,.pack-price-amt{
  font-family:'Space Grotesk','Space Grotesk Fallback','Inter Tight','Inter Tight Fallback',sans-serif;
  font-feature-settings:"tnum" 1;
}
/* Pricing card badges: rose / sage / slate (no blue). FIN-5: flat — no glow
   shadows on the dark finale; deeper rose/sage so the bone text keeps contrast. */
.pack-badge--new{background:#5C5C60;color:#FBFBFB;box-shadow:none;}
.pack-badge--best_value{background:#4E8A6D;color:#FBFBFB;box-shadow:none;}
.pack-badge--most_popular{background:#B05A72;color:#FBFBFB;box-shadow:none;}
.pack-card.pack-best--new{
  /* No bg-tint — uniform dark glass across every tier (see main rule). */
  border-color:rgba(251,251,251,.20);
  box-shadow:inset 0 1px 0 rgba(251,251,251,.4);
}
/* Demo-row hover/active palette refresh */
.demo-row.demo-active{border-left-color:#CE7B91;background:#F2E5E2;border-bottom-color:#E5D5D2;}
.demo-grade-a{background:#E1F0E8;color:#3D6F50;}
.demo-grade-b{background:#FAF3DD;color:#7A5C28;}
.demo-grade-c{background:#F2E5E2;color:#A8442D;}
.demo-grade-d{background:#F4E2DD;color:#A8442D;}
.demo-chip-strong{background:#E1F0E8;color:#3D6F50;border-color:#A0CBB1;}
.demo-chip-maybe{background:#FAF3DD;color:#7A5C28;border-color:#E8DFC0;}
.demo-chip-skip{background:#F4E2DD;color:#A8442D;border-color:#E5C0BA;}
.demo-score-circle{background:#CE7B91;box-shadow:0 2px 8px rgba(206,123,145,.32);}
/* Ranked grade pills (Slide 2) — semantic green→amber→rose */
.gr-a{background:rgba(91,158,126,.14);color:#3D6F50;}
.gr-b{background:rgba(181,133,58,.14);color:#7A5C28;}
.gr-c{background:rgba(206,123,145,.14);color:#B05A72;}
/* Section progress bar */
/* #prog-bar styling lives with its base rule (CHROME-1) */



/* ════════════════ Editorial · Bone & Ink overrides ════════════════ */
/* Aurora SVG stages now own the animated background — see #aurora-layer
   block at the top of the stylesheet. Body keeps a soft fallback in case
   the SVG hasn't built yet (e.g. before chroma.js loads). */
body{background:hsl(170, 16%, 19%);}

/* Buttons → ink gradient (matches setup app, not rose) */
.btn-p,.nav-cta,.pack-cta-btn,.dz-btn,.p0-newbtn,.dash-btn-fill,.demo-btn-shortlist,.pack-buy-btn{
  background:linear-gradient(135deg,#1B1B1F,#000000) !important;
  box-shadow:0 4px 14px rgba(27,27,31,.22),0 0 0 1px rgba(27,27,31,.06) !important;
}
.btn-p:hover,.nav-cta:hover,.pack-cta-btn:hover{
  box-shadow:0 8px 32px rgba(27,27,31,.32),0 0 0 1px rgba(27,27,31,.10) !important;
}

/* On the forest the ink buttons above sit on a near-black nav bar, dark green and
   near-black pricing cards and almost disappear; invert them to bone-on-ink. */
#nav.dark .nav-cta,
.btn-p,
#s7 .pack-buy-btn{
  background:#FBFBFB !important;color:#1B1B1F !important;
  box-shadow:0 4px 14px rgba(0,0,0,.25) !important;
}
#nav.dark .nav-cta:hover,
.btn-p:hover{box-shadow:0 8px 28px rgba(0,0,0,.35),0 0 0 1px rgba(251,251,251,.25) !important;}
.btn-p:focus-visible,.btn-ghost:focus-visible{outline:2px solid #FBFBFB;outline-offset:3px;}
/* Hero secondary: the same translucent bone outline as the finale's ghost button */
.btn-ghost{
  color:rgba(251,251,251,.86);border-color:rgba(251,251,251,.28);
  background:rgba(251,251,251,.04);backdrop-filter:none;box-shadow:none;
}
.btn-ghost:hover{color:#FBFBFB;border-color:rgba(251,251,251,.55);background:rgba(251,251,251,.08);box-shadow:none;}
#s7 .pack-card:hover .pack-buy-btn{background:#FFFFFF !important;}
/* FIN-5 — one recommendation: only the Most Popular pack keeps the solid bone
   button; every other pack gets an outline button so the eye has a default. */
#s7 .pack-card:not(.pack-best--most_popular) .pack-buy-btn{
  background:transparent !important;color:#FBFBFB !important;
  border:1px solid rgba(251,251,251,.28) !important;box-shadow:none !important;
  padding:10px 0;transition:background .2s,border-color .2s;
}
#s7 .pack-card:not(.pack-best--most_popular):hover .pack-buy-btn{
  background:rgba(251,251,251,.08) !important;border-color:rgba(251,251,251,.5) !important;
}

/* Rose reserved for emphasis only. On the forest, rose text uses the lighter
   on-dark roses and glows softly; rose inside the light cards keeps #CE7B91. */
.hero-h1 em,.pr-h em,.cta-h em{color:var(--rose-on) !important;text-shadow:var(--rose-glow);}
.ed-dossier-name em{color:#CE7B91 !important;}
/* no glow while a headline is still at its faint resting colour */
@media(prefers-reduced-motion:no-preference){
  .mm-reveal:not(.mm-run) em,
  html.hs-motion .hero-h1:not(.run) em{text-shadow:none;}
}
.kicker-dot{background:#CE7B91 !important;}

/* Hero headline: typeset more editorial — tighter, slightly larger, paper-feel */
.hero-h1{font-size:clamp(46px,5.8vw,84px); line-height:1.06; letter-spacing:-.025em;}
/* Each headline line wraps to two rows; scale with screen height too so the step row clears the Scroll cue on short laptops */
@media (min-width:768px){.hero-h1{font-size:clamp(40px,min(5.8vw,calc(19vh - 92px)),84px);}}
@media (min-width:768px) and (max-width:1100px){.hero-h1{font-size:clamp(40px,min(4.2vw,calc(19vh - 92px)),84px);}}
.hero-sub{color:var(--on-2); max-width:480px;}
.hero-kicker{
  background:transparent !important; border:0 !important; padding:0 0 8px 0 !important;
  box-shadow:none !important; backdrop-filter:none !important;
}
.hero-kicker .kicker-text{font-family:'Space Mono','Space Mono Fallback',monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--on-3) !important;}

/* Borderless data pills, paper-style */
.hpill{
  background:#FFFFFF !important; border:0 !important;
  box-shadow:0 1px 0 rgba(27,27,31,.04),0 6px 18px rgba(27,27,31,.06) !important;
}
.hero-pills{border-top:1px solid #C9C2C3;}

/* ════════════════ ED hero-right composition ════════════════ */
.ed-stage{
  position:relative; width:100%; max-width:560px; aspect-ratio:1/1.05;
  display:flex; align-items:center; justify-content:center;
}

/* Paper layers behind dossier */
.ed-paper{
  position:absolute; background:#FFFFFF; border-radius:6px;
  box-shadow:0 1px 0 rgba(27,27,31,.04),0 24px 60px rgba(27,27,31,.08),0 6px 16px rgba(27,27,31,.05);
}
.ed-paper-1{
  inset:5% 8% 8% 5%; transform:rotate(-3.5deg);
  background:linear-gradient(180deg,#FFFFFF,#FBFBFB);
}
.ed-paper-2{
  inset:2% 4% 5% 11%; transform:rotate(2deg);
  background:#FAF3DD;
}

/* Main dossier card */
.ed-dossier{
  position:relative; width:88%; background:#FFFFFF; border-radius:8px;
  padding:42px 32px 28px; transform:rotate(-1.5deg);
  box-shadow:
    0 1px 0 rgba(27,27,31,.05),
    0 30px 70px rgba(27,27,31,.14),
    0 8px 22px rgba(27,27,31,.08);
}
.ed-dossier-tab{
  position:absolute; top:-14px; left:32px;
  background:#1B1B1F; color:#FBFBFB;
  padding:6px 14px; border-radius:3px 3px 0 0;
  transform:rotate(-1deg);
}
.ed-tab-mono{
  font-family:'Space Mono','Space Mono Fallback',monospace; font-size:10px; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase;
}
.ed-dossier-head{padding-bottom:18px; border-bottom:1px solid #C9C2C3; margin-bottom:18px;}
.ed-dossier-name{
  font-family:'Fraunces','Fraunces Fallback','Fraunces Fallback Android',serif; font-size:28px; line-height:1.1;
  letter-spacing:-.02em; color:#1B1B1F; margin-bottom:4px;
}
.ed-dossier-role{
  font-family:'Inter Tight','Inter Tight Fallback',sans-serif; font-size:13px; color:#73716E;
}
.ed-dossier-rings{
  position:relative; display:flex; justify-content:center; align-items:center;
  margin-bottom:18px;
}
.ed-ring-numerals{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px; pointer-events:none;
}
.ed-ring-score{
  font-family:'Space Grotesk','Space Grotesk Fallback',sans-serif; font-size:32px; font-weight:600;
  line-height:1; color:#1B1B1F; font-feature-settings:"tnum" 1;
}
.ed-ring-grade{
  font-family:'Space Mono','Space Mono Fallback',monospace; font-size:9px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:#5B9E7E;
}
.ed-dossier-legend{
  display:grid; grid-template-columns:repeat(3,1fr); gap:6px;
  margin-bottom:18px; padding:10px 12px; background:#FBFBFB; border-radius:4px;
}
.ed-dossier-legend span{
  display:flex; align-items:center; gap:6px;
  font-family:'Inter Tight','Inter Tight Fallback',sans-serif; font-size:10.5px; color:#73716E;
}
.ed-dossier-legend i{width:7px; height:7px; border-radius:50%; flex-shrink:0;}
.ed-dossier-legend em{
  font-family:'Space Mono','Space Mono Fallback',monospace; font-style:normal; font-weight:700;
  color:#1B1B1F; margin-left:auto; font-feature-settings:"tnum" 1;
}
.ed-dossier-foot{
  display:flex; align-items:center; justify-content:space-between;
  font-family:'Space Mono','Space Mono Fallback',monospace; font-size:10px;
}
.ed-foot-pill{
  font-family:'Space Mono','Space Mono Fallback',monospace; font-size:9px; font-weight:700;
  letter-spacing:.12em; padding:4px 10px; border-radius:999px;
}
.ed-foot-pill--a{background:rgba(91,158,126,.15); color:#3D6F50;}
.ed-foot-stamp{
  font-size:10px; letter-spacing:.15em; color:#73716E;
}
.ed-foot-stamp em{font-style:normal; color:#1B1B1F; font-weight:700;}

/* Side stats pill */
.ed-side-pill{
  position:absolute; top:-2%; right:-4%;
  background:#1B1B1F; color:#FBFBFB; padding:18px 22px;
  border-radius:8px; transform:rotate(3deg);
  box-shadow:0 20px 50px rgba(27,27,31,.22),0 6px 16px rgba(27,27,31,.10);
  min-width:180px;
}
.ed-side-pill-eye{
  font-family:'Space Mono','Space Mono Fallback',monospace; font-size:9px; font-weight:700;
  letter-spacing:.18em; color:#CE7B91; margin-bottom:12px;
}
.ed-side-pill-line{
  display:flex; align-items:baseline; gap:10px;
  margin-bottom:8px;
}
.ed-side-pill-line:last-child{margin-bottom:0;}
.ed-side-pill-n{
  font-family:'Space Grotesk','Space Grotesk Fallback',sans-serif; font-size:22px; font-weight:600;
  color:#FBFBFB; font-feature-settings:"tnum" 1; min-width:36px;
}
.ed-side-pill-line em{
  font-style:normal; font-size:11px; color:rgba(251,251,251,.55);
}
.ed-side-pill-line--sub .ed-side-pill-n{font-size:16px; color:rgba(251,251,251,.7);}

/* Bottom-left status chip */
.ed-side-chip{
  position:absolute; bottom:6%; left:-3%;
  display:inline-flex; align-items:center; gap:8px;
  background:#FFFFFF; color:#1B1B1F;
  padding:8px 14px; border-radius:999px;
  font-family:'Inter Tight','Inter Tight Fallback',sans-serif; font-size:11px; font-weight:600;
  transform:rotate(-2deg);
  box-shadow:0 1px 0 rgba(27,27,31,.04),0 8px 20px rgba(27,27,31,.10);
}
.ed-side-chip em{
  font-style:normal; font-family:'Space Mono','Space Mono Fallback',monospace;
  color:#73716E; font-size:10px; margin-left:2px;
}
.ed-dot{width:6px; height:6px; border-radius:50%; flex-shrink:0;}
.ed-dot--ok{background:#5B9E7E; animation:edPulse 2s ease-in-out infinite;}
@keyframes edPulse{0%,100%{box-shadow:0 0 0 0 rgba(91,158,126,.5)}50%{box-shadow:0 0 0 6px rgba(91,158,126,0)}}

/* Vertical edge stamp — same off-white as the .vert-mark family. */
.ed-edge-stamp{
  position:absolute; top:50%; right:20px;
  transform:translateY(-50%);
  writing-mode:vertical-rl; text-orientation:sideways;
  font-family:'Space Mono','Space Mono Fallback',monospace; font-size:10px; font-weight:600;
  letter-spacing:.32em; color:#E8E8E8 !important; opacity:1 !important;
  white-space:nowrap; max-height:70vh;
}

/* ── Reusable edge stamps — vertical, horizontal, diagonal ──
   This block and the earlier one at line ~778 BOTH set color now;
   #E8E8E8 + opacity 1 keeps the stamps a quiet off-white regardless
   of which CSS source-order wins. !important ensures no downstream
   utility class or variant flips them back to a darker grey. */
.vert-mark{
  position:absolute;
  font-family:'Space Mono','Space Mono Fallback',monospace; font-size:10px; font-weight:600;
  letter-spacing:.32em; color:#E8E8E8 !important; opacity:1 !important;
  white-space:nowrap; pointer-events:none; z-index:5;
  transition:opacity .6s ease;
}


/* Vertical (existing — used for the spine stamps) */
.vert-mark--right{
  top:50%; right:20px;
  transform:translateY(-50%);
  writing-mode:vertical-rl; text-orientation:sideways;
  max-height:70vh;
}
.vert-mark--left{
  top:50%; left:20px;
  transform:translateY(-50%) rotate(180deg);
  writing-mode:vertical-rl; text-orientation:sideways;
  max-height:70vh;
}

/* Horizontal corners — small editorial labels */
.vert-mark--tl{ top:88px;  left:32px; }
.vert-mark--tr{ top:88px;  right:32px; }
.vert-mark--bl{ bottom:42px; left:32px; }
.vert-mark--br{ bottom:42px; right:32px; }

/* Horizontal bottom running marquee — centred, thin */
.vert-mark--bottom-center{
  bottom:36px; left:50%;
  transform:translateX(-50%);
  font-size:9.5px; letter-spacing:.4em; opacity:.55;
}

/* Diagonal corner stamps — rotated 45° (DISABLED per design feedback) */
.vert-mark--diag-tl,
.vert-mark--diag-tr,
.vert-mark--diag-bl,
.vert-mark--diag-br{display:none!important;}

.vert-mark--diag-tl-disabled{
  top:120px; left:-24px;
  transform:rotate(-45deg); transform-origin:left center;
  width:220px; overflow:hidden;
}
.vert-mark--diag-tr{
  top:120px; right:-24px;
  transform:rotate(45deg); transform-origin:right center;
  width:220px; overflow:hidden;
}
.vert-mark--diag-bl{
  bottom:120px; left:-24px;
  transform:rotate(45deg); transform-origin:left center;
  width:220px; overflow:hidden;
}
.vert-mark--diag-br{
  bottom:120px; right:-24px;
  transform:rotate(-45deg); transform-origin:right center;
  width:220px; overflow:hidden;
}

/* Marquee track inside diagonals (built by JS) */
.dm-track{
  display:inline-block; white-space:nowrap;
  animation:dm-scroll 14s linear infinite;
  will-change:transform;
}
.vert-mark--diag-tr .dm-track,
.vert-mark--diag-br .dm-track{
  /* Right-corner diagonals: text reads left-to-right (toward edge),
     scroll RIGHT-TO-LEFT for natural feel */
  animation-direction:normal;
}
.vert-mark--diag-tl .dm-track,
.vert-mark--diag-bl .dm-track{
  animation-direction:reverse;
}
@keyframes dm-scroll{
  from{ transform:translateX(0); }
  to  { transform:translateX(-50%); }
}
@media(prefers-reduced-motion:reduce){
  .dm-track{ animation:none; }
}

/* Size + tone variants */
.vert-mark--xs{ font-size:9px; letter-spacing:.24em; opacity:.55; }
.vert-mark--sm{ font-size:9.5px; letter-spacing:.28em; }
.vert-mark--inv{color:#FBFBFB; opacity:.55;}
.vert-mark--inv.vert-mark--xs{opacity:.42;}
.vert-mark--accent{color:#CE7B91; opacity:.75;}
.vert-mark--gold{color:#B05A72; opacity:.75;}
.vert-mark--sage{color:#5B9E7E; opacity:.7;}

/* Pill / bullet-led tags for corners (editorial label style) */
.vert-mark--tag::before{
  content:'';display:inline-block;width:14px;height:1px;
  background:currentColor;vertical-align:middle;margin-right:8px;opacity:.6;
}
.vert-mark--tag-r::after{
  content:'';display:inline-block;width:14px;height:1px;
  background:currentColor;vertical-align:middle;margin-left:8px;opacity:.6;
}

/* Issue-number badge style (boxed) */
.vert-mark--issue{
  font-family:'Space Mono','Space Mono Fallback',monospace; font-weight:700;
  padding:3px 8px; border:1px solid currentColor; border-radius:3px;
  opacity:.7; letter-spacing:.18em; font-size:9.5px;
}

/* Date-style stamp (boxed monospace) */
.vert-mark--date{
  font-family:'Space Mono','Space Mono Fallback',monospace; font-weight:600;
  background:rgba(115,113,110,.08); padding:3px 8px;
  border-radius:3px; letter-spacing:.16em; font-size:9.5px;
}
.vert-mark--inv.vert-mark--date{background:rgba(251,251,251,.08);}

@media(max-width:980px){
  .vert-mark{display:none;}
}

/* Disable old hero canvas + floats */
#hero-canvas,.hero-float,.hero-float-chip{display:none !important;}




/* ════════════════ Flip-Through · enhanced dossier ════════════════ */
/* Match Editorial's stage proportions for alignment */
.ed-stage{ max-width:600px; aspect-ratio:1/1.18; }
.ed-flip-stage{ aspect-ratio:auto; height:100%; perspective:2200px; }
.ed-flip-slot{ display:flex; align-items:center; justify-content:center; transform-origin:100% 0%; }
.ed-flip-slot .ed-dossier{
  width:100%; padding:46px 30px 22px; transform:rotate(-1.5deg);
}

/* Meta row above heading */
.ed-dossier-meta-row{
  display:flex; align-items:center; gap:8px;
  font-family:'Space Mono','Space Mono Fallback',monospace; font-size:9px;
  color:#73716E; margin:-6px 0 14px;
  padding-bottom:10px; border-bottom:1px dashed #C9C2C3;
}
.ed-meta-eye{font-weight:700; letter-spacing:.14em;}
.ed-meta-id{color:#1B1B1F; font-weight:700; letter-spacing:.06em;}
.ed-meta-sep{color:#C9C2C3; margin:0 2px;}

/* Heading refinements */
.ed-dossier-head{ padding-bottom:14px; margin-bottom:14px; }
.ed-dossier-name{ font-size:26px; letter-spacing:-.022em; }
.ed-dossier-role{ font-size:12px; color:#73716E; margin-bottom:6px; }
.ed-dossier-ex{
  display:inline-flex; align-items:baseline; gap:6px;
  font-family:'Inter Tight','Inter Tight Fallback',sans-serif; font-size:11px;
}
.ed-ex-eye{
  font-family:'Space Mono','Space Mono Fallback',monospace; font-size:9px; font-weight:700;
  letter-spacing:.16em; color:#CE7B91;
}
.ed-dossier-ex em{font-style:italic; color:#1B1B1F; font-weight:500;}

/* Tighter ring section */
.ed-dossier-rings{ margin-bottom:14px; }

/* Compress legend */
.ed-dossier-legend{ margin-bottom:12px; padding:9px 11px; }
.ed-dossier-legend span{ font-size:10px; }

/* Criteria match — small tracker */
.ed-criteria{ margin-bottom:12px; }
.ed-criteria-row{
  display:flex; justify-content:space-between; align-items:baseline;
  margin-bottom:6px;
}
.ed-criteria-eye{
  font-family:'Space Mono','Space Mono Fallback',monospace; font-size:9px; font-weight:700;
  letter-spacing:.14em; color:#73716E;
}
.ed-criteria-n{
  font-family:'Inter Tight','Inter Tight Fallback',sans-serif; font-size:11px; color:#73716E;
}
.ed-criteria-n em{
  font-family:'Space Grotesk','Space Grotesk Fallback',sans-serif; font-style:normal; font-weight:700;
  color:#1B1B1F; font-feature-settings:"tnum" 1;
}
.ed-criteria-track{
  display:grid; grid-template-columns:repeat(8,1fr); gap:3px;
}
.ed-criteria-track i{
  display:block; height:5px; border-radius:1px;
  background:#DAE2DF; transition:background .3s;
}
.ed-criteria-track i.on{ background:#1B1B1F; }

/* "Why this score" — single-line italic with quote mark */
.ed-why{
  position:relative; padding:8px 12px 8px 18px;
  background:#FBFBFB; border-radius:4px; margin-bottom:10px;
  font-family:'Fraunces','Fraunces Fallback','Fraunces Fallback Android',serif; font-style:italic; font-size:11.5px;
  line-height:1.45; color:#1B1B1F;
}
.ed-why em{font-style:italic; color:#1B1B1F;}
.ed-why-mark{
  position:absolute; left:6px; top:4px;
  font-family:'Fraunces','Fraunces Fallback','Fraunces Fallback Android',serif; font-size:22px;
  color:#CE7B91; font-style:italic; line-height:1;
}

/* Tags row */
.ed-tags{
  display:flex; gap:4px; margin-bottom:12px; flex-wrap:wrap;
}
.ed-tag{
  font-family:'Inter Tight','Inter Tight Fallback',sans-serif; font-size:9.5px; font-weight:500;
  padding:3px 8px; border-radius:999px;
  background:#FBFBFB; color:#5C5C60;
  letter-spacing:.02em;
}

/* Foot row — better alignment */
.ed-dossier-foot{
  padding-top:10px; border-top:1px solid #C9C2C3;
}

/* Center the flip counter above the card */
.ed-flip-counter{
  top:-30px; right:auto; left:50%;
  transform:translateX(-50%) rotate(0);
  z-index:20;
}



/* ════════════════ Flip v3 · polish ════════════════ */
.ed-dossier-rings{
  display:grid !important;
  grid-template-columns:120px 1fr;
  align-items:center;
  gap:18px;
  margin:4px 0 14px;
}
.ed-ring-numerals{display:none !important;}
.ed-score-block{
  display:flex; flex-direction:column; gap:6px;
  align-items:flex-start;
}
.ed-score-eye{
  font-family:'Space Mono','Space Mono Fallback',monospace; font-size:9px; font-weight:700;
  letter-spacing:.16em; color:#73716E; text-transform:uppercase;
}
.ed-score-num{
  font-family:'Space Grotesk','Space Grotesk Fallback',sans-serif; font-size:48px; font-weight:600;
  line-height:.9; color:#1B1B1F; font-feature-settings:"tnum" 1;
  letter-spacing:-.02em;
}
.ed-score-grade{
  font-family:'Space Mono','Space Mono Fallback',monospace; font-size:9px; font-weight:700;
  letter-spacing:.12em; padding:3px 9px; border-radius:999px;
}
.ed-why{
  background:#FBFBFB; border-radius:4px;
  padding:10px 12px; margin-bottom:10px;
}
.ed-why-head{
  display:flex; justify-content:space-between; align-items:baseline;
  margin-bottom:7px;
}
.ed-why-eye{font-family:'Space Mono','Space Mono Fallback',monospace; font-size:9px; font-weight:700; letter-spacing:.14em; color:#73716E;}
.ed-why-meta{font-family:'Inter Tight','Inter Tight Fallback',sans-serif; font-size:10px; color:#73716E;}
.ed-why-list{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:5px;}
.ed-why-list li{display:flex; align-items:flex-start; gap:7px; font-family:'Inter Tight','Inter Tight Fallback',sans-serif; font-size:11px; line-height:1.45; color:#1B1B1F;}
.ed-bullet{width:4px; height:4px; border-radius:50%; background:#CE7B91; margin-top:7px; flex-shrink:0;}
.ed-speed-tag{
  position:absolute; top:-30px; right:-2%;
  display:inline-flex; align-items:baseline; gap:6px;
  background:#1B1B1F; color:#FBFBFB;
  padding:5px 11px; border-radius:999px;
  font-family:'Space Mono','Space Mono Fallback',monospace; font-size:9px;
  letter-spacing:.14em; transform:rotate(2deg);
  box-shadow:0 6px 18px rgba(27,27,31,.18); z-index:21;
}
.ed-speed-dot{width:6px; height:6px; border-radius:50%; background:#5B9E7E; align-self:center; animation:edPulse 1.4s ease-in-out infinite;}
.ed-speed-eye{font-weight:700;}
.ed-speed-n{font-family:'Space Grotesk','Space Grotesk Fallback',sans-serif; font-size:12px; font-weight:600; color:#FBFBFB; letter-spacing:0; font-feature-settings:"tnum" 1;}
.ed-speed-unit{font-size:9px; color:rgba(251,251,251,.55); letter-spacing:.1em;}
.ed-flip-counter{top:-30px; right:auto; left:50%; transform:translateX(-50%) rotate(0); z-index:20;}
.ed-flip-slot .ed-dossier{padding:42px 28px 20px;}
.ed-dossier-name{font-size:24px;}
.ed-dossier-role{font-size:11.5px;}

/* ════════════════ HERO HOOK · live scoring + ranked cycle ════════════════
   Last in the sheet on purpose: the dossier rules above are layered three
   times (editorial, flip, flip v3) and this block is the final word. */

/* HOOK-2 — each value hugs its own label ("Skills 91", not "91 ● Exp") */
.ed-dossier-legend{display:flex;gap:18px;justify-content:flex-start;}
.ed-dossier-legend span{flex:0 0 auto;}
.ed-dossier-legend em{margin-left:4px;}
.ed-score-num,.ed-side-pill-n{font-variant-numeric:tabular-nums;}
.ed-criteria-track i{transform-origin:0 50%;}

/* HOOK-3 — the out card is filed down-left behind the stack; the next one
   rises into the rest pose. Transform/opacity only, no overshoot. */
.ed-flip-slot{transform-origin:50% 60%;}
/* The filed card stays opaque while the new one (above it) materialises, so
   the two never double-expose; it only fades once it is mostly covered. */
@keyframes flip-file{
  0%  {transform:none;opacity:1;}
  55% {transform:rotate(-3.5deg) translate3d(-4.5%,8%,0) scale(.95);opacity:1;}
  100%{transform:rotate(-6deg) translate3d(-8%,14%,0) scale(.9);opacity:0;}
}
@keyframes flip-rise2{
  0%  {transform:rotate(1.5deg) translateY(14px) scale(.96);opacity:0;}
  30% {opacity:1;}
  100%{transform:none;opacity:1;}
}
.ed-flip-slot.ed-out{animation:flip-file .52s cubic-bezier(.7,0,.84,0) forwards;}
.ed-flip-slot.ed-in {animation:flip-rise2 .6s cubic-bezier(.16,1,.3,1) forwards;}
@media(prefers-reduced-motion:reduce){
  .ed-flip-slot.ed-out,.ed-flip-slot.ed-in{animation:none !important;}
}
/* Phones: the two slots share one grid cell, so a card filed down-left peeked out
   below the incoming one and a fading pair double-printed. Here both slots fill
   the cell, the filed card holds still and opaque underneath, and the next card
   (opaque, on top) is dealt in from the right; the stage clips sideways only so
   the dossier tab above the card stays visible. */
@keyframes flip-hold{0%,99%{transform:none;opacity:1;}100%{transform:none;opacity:0;}}
@keyframes flip-deal{0%{transform:translate3d(104%,0,0);}100%{transform:none;}}
@media(max-width:767px){
  #s0 .ed-flip-stage{overflow-x:clip;}
  #s0 .ed-flip-slot{align-items:stretch;}
  #s0 .ed-flip-slot.ed-out{animation:flip-hold .56s linear forwards;}
  #s0 .ed-flip-slot.ed-in{animation:flip-deal .46s cubic-bezier(.16,1,.3,1) forwards;}
}
@media(max-width:767px) and (prefers-reduced-motion:reduce){
  #s0 .ed-flip-slot.ed-out,#s0 .ed-flip-slot.ed-in{animation:none !important;}
}

/* HOOK-3 — the JOB · 248 chip follows the card on screen */
.ed-side-pill-line{position:relative;}
.ed-side-pill-line::before{
  content:'';position:absolute;left:-22px;top:50%;width:2px;height:14px;margin-top:-7px;
  background:#CE7B91;opacity:0;transition:opacity .2s ease;
}
.ed-side-pill-n,.ed-side-pill-line em{transition:color .2s ease;}
.ed-side-pill-line.is-hit::before{opacity:1;}
.ed-side-pill-line.is-hit .ed-side-pill-n{color:#FBFBFB;}
.ed-side-pill-line.is-hit em{color:rgba(251,251,251,.92);}
.ed-meter{display:flex;gap:5px;margin:-3px 0 11px 46px;}
.ed-meter i{
  display:block;width:4px;height:4px;border-radius:50%;
  background:rgba(251,251,251,.18);transform:scale(.6);
  transition:transform .26s cubic-bezier(.16,1,.3,1),background-color .26s ease;
}
.ed-meter i.on{background:#5B9E7E;transform:scale(1);}

/* FLOW-1 — edge stamps arrive just after their slide: a short drift along the
   stamp's own axis plus a fade, 250ms behind the slide cross-fade. Slide mode
   only (flow mode keeps them static). Uses the individual translate property
   so it composes with each stamp's own positioning transform. */
.slide:not(.m-flow) .vert-mark{transition:opacity .5s ease .25s, translate .7s cubic-bezier(.16,1,.3,1) .25s;}
.slide:not(.m-flow):not(.on) .vert-mark{opacity:0 !important;transition-delay:0s;transition-duration:.2s;}
.slide:not(.m-flow):not(.on) .vert-mark--right,
.slide:not(.m-flow):not(.on) .vert-mark--left{translate:0 10px;}

/* ════════ HERO HOOK · fit + responsive (COMP-1, RESP-1) ════════
   The dossier keeps its desktop information design everywhere; it is scaled to
   fit (--ed-s, computed on resize only) instead of being hidden. */
.ed-flip-stage{transform:scale(var(--ed-s,1));transform-origin:50% 50%;}
@media(min-width:981px){
  /* never taller than the viewport under the nav (was clipped at 1280x720) */
  .ed-stage{aspect-ratio:auto;height:min(calc(100vh - 150px), 708px);}
  #s0{padding-top:96px;}
  .ed-side-pill--top{top:max(2%, 16px);}
}
/* Tablets in slide mode (768-980): headline on top, the live dossier below it */
@media(min-width:768px) and (max-width:980px){
  #s0 .hero-inner{grid-template-columns:1fr;grid-template-rows:auto 1fr;gap:28px;align-content:center;text-align:left;}
  #s0 .hero-right{display:flex;min-height:0;}
  .ed-stage{display:flex;width:100%;max-width:420px;height:min(46vh,520px);aspect-ratio:auto;}
  .ed-flip-slot .ed-dossier{width:460px;flex:none;}
  .ed-side-pill{top:-4%;right:-6%;}
}
@media(max-width:980px){
  #s0 .bg-patches{display:none;}
}
/* HANDOFF-0 — on the desktop deck the hero card becomes s1's window. #hero-morph
   lives in #page-sticky under the slides (so it outlives s0's fade and s1's window
   paints over it); the hero scrub grows it from the dossier's rect to #win1's.
   .hm-win copies .app-win and takes #win1's BIGWIN zoom, so the two are identical
   at rest and the slide swap only fills an existing window with content. */
#hero-morph{position:absolute;left:0;top:0;width:0;height:0;display:none;pointer-events:none;opacity:0;visibility:hidden;will-change:transform,opacity;}
@media(min-width:981px){html.hs-motion #hero-morph{display:block;}}
.hm-win{
  position:absolute;left:0;top:0;transform:translate(-50%,-50%);
  background:#FCFAFA;border-radius:18px;border:1px solid rgba(255,255,255,.3);
  box-shadow:0 32px 80px rgba(6,14,12,.42),0 6px 18px rgba(6,14,12,.22),inset 0 1px 0 rgba(255,255,255,.6);
  overflow:hidden;
}
.hm-win .win-bar{position:absolute;left:0;right:0;top:0;will-change:transform,opacity;}
.hm-win .win-url{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* a static copy of s1's dashboard at the window's final size, top-left anchored:
   the growing frame uncovers it the way a resized window does (no reflow) */
/* (not promoted: as its own layer inside the frame's rounded clip it cost a
   100-200ms frame where it first shows; painted into the frame it does not) */
.hm-body{position:absolute;left:0;top:0;height:420px;overflow:hidden;opacity:0;contain:layout paint;}
/* Phones (flow mode): a compact live card under the CTAs, chip as a row below */
@media(max-width:767px){
  #s0 .hero-right{display:flex;margin-top:24px;justify-content:center;}
  #s0 .ed-stage{display:block;width:100%;max-width:340px;height:auto;margin:0 auto;aspect-ratio:auto;}
  /* PERF-4 — the dossier card is injected by script; reserve its height (328px at
     every phone width) so the job chip below it starts in its final place. */
  #s0 .ed-flip-stage{display:grid;width:100%;height:auto;min-height:328px;transform:none;perspective:none;}
  #s0 .ed-flip-slot{position:relative;inset:auto;grid-area:1 / 1;}
  #s0 .ed-flip-slot .ed-dossier{width:100%;padding:34px 18px 16px;text-align:left;}
  #s0 .ed-why,#s0 .ed-tags,#s0 .ed-dossier-legend,#s0 .ed-dossier-meta-row,#s0 .ed-paper{display:none;}
  #s0 .ed-dossier-rings{grid-template-columns:96px 1fr;gap:14px;}
  #s0 .ed-dossier-rings svg{width:96px;height:96px;}
  #s0 .ed-side-pill{
    position:static;display:grid;grid-template-columns:repeat(3,1fr);align-items:start;
    gap:10px 8px;margin:18px auto 0;padding:14px 12px 12px;transform:none;min-width:0;
  }
  #s0 .ed-side-pill-eye{grid-column:1 / -1;margin:0;text-align:center;}
  #s0 .ed-side-pill-line{margin:0;gap:2px;flex-direction:column;align-items:center;text-align:center;padding-top:6px;}
  #s0 .ed-side-pill-line::before{left:50%;top:0;width:14px;height:2px;margin:0 0 0 -7px;}
  #s0 .ed-side-pill-n,#s0 .ed-side-pill-line--sub .ed-side-pill-n{font-size:18px;min-width:0;}
  #s0 .ed-side-pill-line em{font-size:10.5px;}
  #s0 .ed-meter{display:none;}
}

/* COMP-1 — three-step process ribbon in the dead band under the CTAs.
   Product steps, not claims; each jumps to its chapter. Enters after the
   headline sweep (keyed off .hero-h1.run) in desktop motion mode only. */
.hero-steps{list-style:none;margin:28px 0 0;padding:0;display:flex;align-items:center;flex-wrap:wrap;}
.hero-acts + .hero-steps{margin-top:-8px;}  /* .hero-acts already carries 36px below */
.hero-steps li{display:flex;align-items:center;}
.hero-steps li + li::before{
  content:'';display:block;width:28px;height:1px;margin:0 6px;
  background:rgba(251,251,251,.22);transition:background-color .15s ease;
}
.hero-steps li:hover::before{background:#CE7B91;}
.hero-steps button{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 6px;
  background:none;border:0;cursor:pointer;
  font-family:'Space Mono','Space Mono Fallback',monospace;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--on-3);transition:color .15s ease;
}
.hero-steps li:first-child button{padding-left:0;}
.hero-steps button:hover,.hero-steps button:focus-visible{color:var(--on);}
.hero-steps .hs-n{color:var(--rose-on-sm);text-shadow:var(--rose-glow);font-weight:700;}
html.hs-motion .hero-steps li{opacity:0;transform:translateY(6px);}
html.hs-motion .hero-h1.run ~ .hero-steps li{
  opacity:1;transform:none;
  transition:opacity .4s cubic-bezier(.16,1,.3,1),transform .4s cubic-bezier(.16,1,.3,1);
}
html.hs-motion .hero-h1.run ~ .hero-steps li:nth-child(1){transition-delay:1.1s;}
html.hs-motion .hero-h1.run ~ .hero-steps li:nth-child(2){transition-delay:1.18s;}
html.hs-motion .hero-h1.run ~ .hero-steps li:nth-child(3){transition-delay:1.26s;}
/* Phones: the three chapters follow directly below in flow mode and the ribbon
   stacked to ~130px, pushing the live card out of the first screen. */
@media(max-width:767px){
  .hero-steps{display:none;}
}

/* Reduced motion on desktop/tablet: the deck becomes a static, scrollable page.
   load() tags every slide .m-flow, but the flow rules only existed for phones,
   so from 768px up only the hero was ever visible (900vh of empty scroll). Each
   slide keeps a full-viewport frame over the fixed forest layer; s8 keeps its rose pool. */
@media(prefers-reduced-motion:reduce) and (min-width:768px){
  #page-driver{height:auto!important;}
  #page-sticky{position:relative!important;top:auto!important;height:auto!important;overflow:visible!important;}
  .slide.m-flow{position:relative!important;inset:auto!important;width:100%!important;height:auto!important;min-height:100vh;opacity:1!important;pointer-events:auto!important;display:flex!important;overflow:hidden;}
  #s8.m-flow{background:radial-gradient(ellipse 55% 42% at 50% 60%, rgba(206,123,145,.14) 0%, rgba(206,123,145,0) 70%);}

  #feat-strip{display:none;}
}

/* HOOK-1 — the paper intro: a pile of resumes read by hand with a pen, then
   the last one scored in place. Every hand-read page is the dossier card itself
   in "resume mode" (same head, same chassis, a raw resume body in place of the
   score body), so the pile and the product are one document system. .ed-intro
   is only the pen + tally overlay; JS sizes and places it over the front card. */
.ed-intro{position:absolute;left:0;top:0;z-index:3;pointer-events:none;display:none;transform-origin:50% 50%;}
html.sift-on .ed-intro{display:block;}
/* the two bodies share one box: the score body stays in flow and sets the card's
   height; the resume body lies over it. In resume mode the score body is clipped
   away and printed in (clip-path) above the resume when the page is scored. */
.ed-bodies{position:relative;}
.ed-body-r{position:absolute;inset:0;z-index:0;}
.ed-dossier.is-resume .ed-body-s{position:relative;z-index:1;background:#FFFFFF;clip-path:inset(0 0 100% 0);}
/* the tab (rotated, straddling the card's top edge) gets its own layer, so the
   clipped score body below it cannot change how it rasterises: the tab and the
   head must stay pixel-identical while the page is scored */
#s0 .ed-dossier-tab{will-change:transform;}
.er-body{height:100%;display:flex;flex-direction:column;padding-right:30px;}
.er-blk{margin-bottom:14px;}
.er-blk > .er-eye{display:block;margin-bottom:9px;}
.er-eye{font-family:'Space Mono','Space Mono Fallback',monospace;font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#73716E;}
.er-bars{display:flex;flex-direction:column;gap:6px;}
.er-bars i{display:block;height:4px;border-radius:1px;background:#E4E2DF;}
.er-bars--li{margin:0 0 11px;}
.er-row{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:0 0 7px;
  font-family:'Inter Tight','Inter Tight Fallback',sans-serif;font-size:12px;color:#1B1B1F;
}
.er-row b{font-weight:600;}
.er-date{font-family:'Space Mono','Space Mono Fallback',monospace;font-size:9.5px;letter-spacing:.06em;color:#73716E;white-space:nowrap;}
.er-foot{
  display:flex;align-items:center;justify-content:space-between;margin:auto -30px 0 0;
  padding-top:10px;border-top:1px solid #C9C2C3;font-family:'Space Mono','Space Mono Fallback',monospace;font-size:10px;
}
.er-foot-l{font-size:9px;font-weight:700;letter-spacing:.12em;padding:4px 0;color:#73716E;}
.er-ink{position:absolute;overflow:visible;pointer-events:none;}
.er-ink path{fill:none;stroke:#CE7B91;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
/* the extra sheets that make the unread pile read thick; same paper as .ed-paper */
.ed-paper-x{
  position:absolute;display:none;border-radius:6px;background:#FAF3DD;
  box-shadow:0 1px 0 rgba(27,27,31,.04),0 24px 60px rgba(27,27,31,.08),0 6px 16px rgba(27,27,31,.05);
}
.ed-paper-x1{inset:3.5% 6% 6.5% 8%;transform:rotate(-.8deg);background:#F7EFD7;}
.ed-paper-x2{inset:4.5% 9% 4% 6%;transform:rotate(-2.4deg);}
.ed-paper-x3{inset:3% 5% 5% 9.5%;transform:rotate(1deg);background:#F7EFD7;}
/* own layers, rastered with the pile: their fade at the scoring beat must not
   repaint three large soft shadows on the frames the score body wipes in */
html.sift-on .ed-paper-x{display:block;will-change:transform,opacity;}
/* the reviewer's pen: nib at the element's origin, barrel up and to the right */
.ed-pen{position:absolute;left:0;top:0;width:0;height:0;opacity:0;will-change:transform,opacity;}
.ed-pen svg{position:absolute;left:-2.6px;top:-18px;width:200px;height:36px;overflow:visible;transform-origin:2.6px 18px;transform:rotate(-38deg);}
/* the running tally under the pile: N of 248 by hand, then all 248 scored */
.ed-tally{
  position:absolute;left:4px;top:calc(100% + 40px);display:grid;white-space:nowrap;
  font-family:'Inter Tight','Inter Tight Fallback',sans-serif;font-size:19px;color:rgba(251,251,251,.76);
}
.ed-tally > span{grid-area:1 / 1;}
.ed-tally b{font-family:'Space Grotesk','Space Grotesk Fallback',sans-serif;font-weight:600;color:var(--rose-on-sm);font-variant-numeric:tabular-nums;}
/* hidden in CSS, not only by the timeline: the layer is in the DOM from first
   paint, and gsap's first write comes after the fonts load (up to 700ms) */
.ed-tally{opacity:0;}
.ed-tally-b{opacity:0;}
/* the hand-read pages are dossier slots above the front one (JS adds them) */
.ed-flip-slot--hand{z-index:3;}
html.sift-on .ed-flip-slot--b{visibility:hidden;}
/* the whole stage (paper, cards, chip) is held until the intro fades it in as
   one group: faded as siblings, the translucent card showed the cream sheets
   through it. Not 0: a fully transparent layer is never rastered, and its first
   raster (the large soft shadows) stalled the first beat it appeared on */
html.sift-on #s0 .ed-stage{opacity:.002;}
/* the chip's final tallies stay hidden until the intro zeroes them and starts
   counting (html.sift-count), so the payoff is not printed at first paint */
html.sift-on:not(.sift-count) .ed-side-pill-n{visibility:hidden;}

/* ════════════════ TOUCH PASS — phones and tablets (below 1024px) ════════════════
   Desktop is untouched. Below 1024 the page drops decoration that reads as noise on a
   small screen: floating shards, rose glow, fake browser chrome, one-sided accent bars,
   hairline frames and boxes nested inside boxes. Separation comes from surface and space. */
@media (max-width:1023px){
  :root{--rose-glow:none;}
  .bg-patches,.crystal-scatter,#salt-trace,.vert-mark,.kicker-dot{display:none !important;}

  /* product mocks: no traffic lights or address bar, one soft shadow, no plate behind */
  .mw-chrome,.win-bar,.demo-chrome{display:none !important;}
  .win-stage,.win-stage.is-big{background:none;padding:0;}
  .app-win,#s4 .s4x.s4x-win,.hm-win{border:0;box-shadow:0 26px 60px -26px rgba(6,14,12,.6),0 4px 14px rgba(6,14,12,.18);}
  .app-win:hover{box-shadow:0 26px 60px -26px rgba(6,14,12,.6),0 4px 14px rgba(6,14,12,.18);}
  #s3-live-demo,#s3-live-demo:hover{box-shadow:0 26px 60px -26px rgba(6,14,12,.6),0 4px 14px rgba(6,14,12,.18);transform:none;}

  /* one-sided accent bars become a quiet tint */
  .demo-row,.demo-row.demo-active{border-left:0;}
  #s4 .s4x .s4x-fr{box-shadow:none;}
  #s4 .s4x .s4x-fl{border-left:0;padding-left:0;}
  .tc-body{border-left:0;padding-left:0;}

  /* s5 tour: the active case is a tinted row, not a rail with a sliding bar */
  .tc-nav{border-right:0;}
  .tc-nav-div,.tc-ind{display:none !important;}
  .tc-nav-item.tc-active,.tc-nav.has-ind .tc-nav-item.tc-active{background:rgba(251,251,251,.08);border-right-color:transparent;}

  /* s6 trust: one light panel holds three cards; nothing is boxed inside a card */
  .s6-panel{border:0;}
  .s6-card:hover{background:#FFFFFF;}
  .s6-vis,.s6-card:hover .s6-vis{background:transparent;padding:0;}
  .s6-rows{gap:14px;}
  .s6-rows li{background:transparent;padding:0;border-radius:0;}
  .s6-node{border:0;background:#EDF1EF;}
  .s6-chip{border:0;background:rgba(91,158,126,.13);}
  .s6-chip--kept{background:rgba(181,133,58,.15);}

  /* s7 pricing: cards separate by surface; the badge marks the pick, not a glowing edge */
  .pack-card,.pack-card:hover{border-color:transparent;}
  #s7 .pack-card.pack-best--most_popular,#s7 .pack-card.pack-best--best_value,#s7 .pack-card.pack-best--new,
  #s7 .pack-card.pack-best--most_popular:hover,#s7 .pack-card.pack-best--best_value:hover{border-color:transparent;box-shadow:none;}
  #s7 .pack-card{text-align:left;}

  /* s8: a flat rose button (the gradient's dark end keeps white text above 4.5:1) and no rule over the footer */
  .btn-p-inv,.btn-p-inv:hover{background:#9F4E66;box-shadow:none;}
  .btn-p-inv::after{display:none;}
  .cta-footer{border-top:0;}
}

/* phones: the stacked page */
@media (max-width:767px){
  .m-widget-inner,#s4 .s4x.s4x-mw{border:0;box-shadow:0 22px 48px -22px rgba(6,14,12,.65),0 4px 12px rgba(6,14,12,.2);}
  .mw-stat-div{visibility:hidden;}
  .mw-stats-strip{border-bottom:0;margin-bottom:6px;}
  .mw-job-row{border-left:0;}
  .mw-preset-bar{border-bottom:0;}
  .mw-tab{border-color:transparent;background:#F1EFEF;}
  .mw-tab.active{background:var(--p);}
  #s4 .s4x .s4x-tabs{border-bottom:0;}
  #s4 .s4x.s4x-mw .s4x-notes{border-top:0;}
  #s4 .s4x.s4x-mw .s4x-note{border-bottom:0;padding:9px 0;}
  #s4 .s4x.s4x-mw .s4x-note--a > span{border-left:0;padding-left:0;}

  /* hero card sits square so its edges are not clipped */
  #s0 .ed-flip-slot .ed-dossier{transform:none;}

  /* s5: no dead space above or below, and the window uses the full width */
  #s5{padding:40px 0 16px;}
  #s5 .tc-inner{padding:0 16px;}
  #s5 .tc-shell{gap:20px;}
  #s5 .tc-content{padding:0 0 8px;}
  #s5 .tc-win-stage,#s5 .tc-win-stage:has(> .s5k-win){padding:0;}
  .tc-nav{border-bottom:0;}
  /* the active case is a bone pill with ink text, like the active step in the nav strip */
  .tc-nav-item.tc-active,.tc-nav.has-ind .tc-nav-item.tc-active,.tc-nav-item.tc-active:hover{border-bottom-color:transparent;padding-right:14px;background:#FBFBFB;}
  .tc-nav-item.tc-active .tc-lbl{color:#1B1B1F;}

  /* s7: one plan per row, left-aligned, and no reserved height under the foot line */
  #s7 > #s7-inner{padding:48px 20px 32px;}
  #s7 #pr-grid{grid-template-columns:1fr !important;gap:14px;}
  #s7 #pr-stage{min-height:0 !important;}
  #s7 #pr-zone-subscribe > div{grid-template-columns:1fr !important;}

  #s8.m-flow{background:none;}
}

/* upright tablets: the feature slides stack, copy over demo, instead of a 33% column.
   min-height keeps near-square windows on the side-by-side layout, where the stack would not fit */
@media (min-width:768px) and (max-width:1023px) and (orientation:portrait) and (min-height:960px){
  .feat-slide{flex-direction:column;align-items:stretch;justify-content:center;gap:28px;padding:132px 48px 40px;}
  .fc-copy,.fc-right{width:100%;flex:none;}
  .fc-right{padding-left:0;align-items:center;}
  .fc-desc{max-width:560px;}
  .fc-title{font-size:clamp(34px,4.6vw,44px);}
}

/* narrow tablets: the trust cards run two across, the first one full width */
@media (min-width:768px) and (max-width:899px){
  .s6-cards{grid-template-columns:repeat(2,minmax(0,1fr));}
  .s6-cards > .s6-card:first-child{grid-column:1 / -1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:32px;align-content:center;}
  .s6-cards > .s6-card:first-child > *{grid-column:1;}
  .s6-cards > .s6-card:first-child > .s6-vis{grid-column:2;grid-row:1 / span 3;margin-top:0;}
}

/* tablets: the s5 case list gets room so labels stay on one or two lines */
@media (min-width:768px) and (max-width:1023px){
  #s5 .tc-shell{grid-template-columns:minmax(210px,30%) minmax(0,1fr);gap:32px;}
}

/* PERF-08: in the phone/tablet flow layout the browser skips rendering sections that are
   off screen. The slides do not overflow their boxes there (checked at 375 and 768), so the
   paint containment this brings clips nothing. A remembered size replaces the 800px guess
   once a section has rendered. The deck (no hs-flow) stacks slides and is left alone.
   jumpSlide turns it off (hs-cv-off) while it measures and scrolls; the sizes the sections
   take then are remembered, since contain-intrinsic-size stays on. */
html.hs-flow #page-sticky > .slide.m-flow:not(#s0){content-visibility:auto;contain-intrinsic-size:auto 800px;}
html.hs-flow.hs-cv-off #page-sticky > .slide.m-flow:not(#s0){content-visibility:visible;}