/* ============================================================================
   AgentJobson — the site's one stylesheet. #3698.

   Layout and structure follow alt-website-mrkan: a bar, a hero with the product on a skewed band,
   a feature grid, the score section, a dark closing band, a footer.

   FIVE THEMES, ONE LAYOUT. ab.js sets `data-t` (the theme) and `data-m` (light or dark) on <html>
   before this sheet paints. Each theme is a block of tokens and nothing else; every rule below the
   token blocks reads tokens only, so a theme cannot change the layout, and a rule cannot be right
   in one theme and wrong in another.

   ORDER MATTERS. Bare :root is Shield light (also what a visitor without JavaScript gets), then
   Shield dark, then each other theme's light block and its dark block. `:root[data-t=x]` and
   `:root[data-m=dark]` have the same specificity, so a theme block placed after Shield dark wins
   over it; each theme's own dark block has one more attribute and wins over its light block.
   Every light block defines EVERY token, so nothing leaks from Shield into another theme.
   ========================================================================= */

/* ---------- A. Shield: the closest to MrKan. System font, the app's own shield blue. */
:root {
  --ground: #ffffff; --tint: #f5f8fd; --hair: #e1e7f0; --ink: #0b1b3f; --body: #3e4c66; --mute: #5f6b83;
  --accent: #1d4ed8; --accent-text: #1d4ed8; --wash: #eaf0ff; --fill: #1d4ed8; --fill-ink: #ffffff; --fill-hover: #1a43bd;
  --band: #1d4ed8; --close: #0b1b3f; --stripe: #1d4ed8; --od: #ffffff; --od-ink: #1d4ed8; --bar-bg: rgba(255, 255, 255, .88);
  --hl: var(--accent); --hl-bg: none; --hl-style: normal;
  --field: #ffffff; --field-hair: #cdd6e4; --danger: #b3253a;
  --fd: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --fb: var(--fd);
  --fm: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --hw: 700; --hls: -.03em; --htt: none; --hwd: 100; --h1: clamp(2.3rem, 4.4vw, 3.5rem); --h1-lh: 1.07;
  --h2: clamp(1.8rem, 3.4vw, 2.5rem); --h2-lh: 1.12; --h3w: 650; --h3s: 1.06rem;
  --r: 8px; --r-box: 12px;
  --wrap: clamp(1120px, 90vw, 1440px);
  color-scheme: light;
}
:root[data-m="dark"] {
  --ground: #0b1220; --tint: #0f172a; --hair: #1f2a40; --ink: #e8eefb; --body: #b4c0d6; --mute: #8796b0;
  --accent: #6f9cff; --accent-text: #8cb0ff; --wash: #15234a; --fill: #2f5fe6; --fill-ink: #ffffff; --fill-hover: #4170f0;
  --close: #050b18; --bar-bg: rgba(11, 18, 32, .86); --field: #0f172a; --field-hair: #2c3a57; --danger: #ff8597;
  color-scheme: dark;
}

/* ---------- B. Highlighter: a posting marked up by a recruiter. Serif headlines, highlighter yellow. */
:root[data-t="highlighter"] {
  --ground: #fbfbf8; --tint: #f3f2ec; --hair: #e2e0d6; --ink: #17181c; --body: #45474f; --mute: #66676d;
  --accent: #2741b0; --accent-text: #2741b0; --wash: #eef0fb; --fill: #17181c; --fill-ink: #fbfbf8; --fill-hover: #33343a;
  --band: #ffe45c; --close: #17181c; --stripe: #2741b0; --od: #ffe45c; --od-ink: #17181c; --bar-bg: rgba(251, 251, 248, .88);
  --hl: inherit; --hl-bg: linear-gradient(transparent 58%, #ffe45c 58% 92%, transparent 92%); --hl-style: italic;
  --field: #ffffff; --field-hair: #d5d3c8; --danger: #b3253a;
  --fd: "Newsreader", Georgia, "Times New Roman", serif; --fb: "Karla", system-ui, sans-serif;
  --fm: "DM Mono", ui-monospace, Menlo, monospace;
  --hw: 500; --hls: -.015em; --htt: none; --hwd: 100; --h1: clamp(2.5rem, 4.9vw, 3.9rem); --h1-lh: 1.03;
  --h2: clamp(1.9rem, 3.6vw, 2.7rem); --h2-lh: 1.08; --h3w: 600; --h3s: 1.24rem;
  --r: 3px; --r-box: 3px;
  color-scheme: light;
}
:root[data-t="highlighter"][data-m="dark"] {
  --ground: #16171b; --tint: #1c1d22; --hair: #2e2f36; --ink: #efeee8; --body: #c0bfb8; --mute: #94938d;
  --accent: #9fb2ff; --accent-text: #a9baff; --wash: #262838; --fill: #ffe45c; --fill-ink: #17181c; --fill-hover: #fff07f;
  --band: #d9bd2c; --close: #0d0e11; --bar-bg: rgba(22, 23, 27, .86); --field: #1c1d22; --field-hair: #3a3b43; --danger: #ff8a76;
  --hl-bg: linear-gradient(transparent 58%, rgba(255, 228, 92, .38) 58% 92%, transparent 92%);
  color-scheme: dark;
}

/* ---------- C. Night Shift: dark first, for the agent that works while you sleep. */
:root[data-t="night"] {
  --ground: #0a131f; --tint: #0d1928; --hair: #1b2b40; --ink: #e3edf7; --body: #a9bbcf; --mute: #8095ad;
  --accent: #5cc4ff; --accent-text: #6fcbff; --wash: #0f2a40; --fill: #5cc4ff; --fill-ink: #04121f; --fill-hover: #85d4ff;
  --band: #0e5ea8; --close: #050b14; --stripe: #0e5ea8; --od: #5cc4ff; --od-ink: #04121f; --bar-bg: rgba(10, 19, 31, .86);
  --hl: var(--accent); --hl-bg: none; --hl-style: normal;
  --field: #0d1928; --field-hair: #26405e; --danger: #ff8a8a;
  --fd: "Sora", system-ui, sans-serif; --fb: "IBM Plex Sans", system-ui, sans-serif;
  --fm: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --hw: 700; --hls: -.035em; --htt: none; --hwd: 100; --h1: clamp(2.2rem, 4.3vw, 3.4rem); --h1-lh: 1.08;
  --h2: clamp(1.8rem, 3.3vw, 2.4rem); --h2-lh: 1.12; --h3w: 600; --h3s: 1.06rem;
  --r: 999px; --r-box: 12px;
  color-scheme: dark;
}
:root[data-t="night"][data-m="light"] {
  --ground: #f4f8fc; --tint: #eaf1f8; --hair: #d3dee9; --ink: #0b1a2b; --body: #3f5268; --mute: #5a6d83;
  --accent: #0a6fb8; --accent-text: #0a66aa; --wash: #e1effa; --fill: #0a6fb8; --fill-ink: #ffffff; --fill-hover: #085d9b;
  --band: #0a6fb8; --close: #0b1a2b; --od: #ffffff; --od-ink: #0a66aa; --bar-bg: rgba(244, 248, 252, .88);
  --field: #ffffff; --field-hair: #c4d2e0; --danger: #b3253a;
  color-scheme: light;
}

/* ---------- D. Cobalt Poster: tall condensed capitals, cobalt and hot orange. */
:root[data-t="cobalt"] {
  --ground: #ffffff; --tint: #eef1ff; --hair: #d9def5; --ink: #0d1650; --body: #3b4373; --mute: #5a6290;
  --accent: #1f3fd6; --accent-text: #1f3fd6; --wash: #e8ecff; --fill: #ff8a3d; --fill-ink: #1a0d02; --fill-hover: #ff9d5c;
  --band: #1f3fd6; --close: #1f3fd6; --stripe: #ff8a3d; --od: #ff8a3d; --od-ink: #1a0d02; --bar-bg: rgba(255, 255, 255, .88);
  --hl: var(--accent); --hl-bg: none; --hl-style: normal;
  --field: #ffffff; --field-hair: #c9d0ee; --danger: #b3253a;
  --fd: "Archivo", system-ui, sans-serif; --fb: "Archivo", system-ui, sans-serif;
  --fm: "Azeret Mono", ui-monospace, Menlo, monospace;
  --hw: 900; --hls: 0; --htt: uppercase; --hwd: 62; --h1: clamp(3rem, 6.6vw, 5.4rem); --h1-lh: .92;
  --h2: clamp(2.3rem, 4.6vw, 3.4rem); --h2-lh: .98; --h3w: 800; --h3s: 1.06rem;
  --r: 0; --r-box: 2px;
  color-scheme: light;
}
:root[data-t="cobalt"][data-m="dark"] {
  --ground: #0a1040; --tint: #0e1650; --hair: #1f2c7a; --ink: #f2f4ff; --body: #bcc4ef; --mute: #929bd6;
  --accent: #8ea3ff; --accent-text: #9fb1ff; --wash: #18236a; --hl: #ff8a3d;
  --band: #2b4bff; --close: #060b30; --bar-bg: rgba(10, 16, 64, .86); --field: #0e1650; --field-hair: #2a3a8f; --danger: #ff9a8a;
  color-scheme: dark;
}

/* ---------- E. Evergreen: the color of "met". Deep green ink, jade accent, a crisp grotesk. */
:root[data-t="evergreen"] {
  --ground: #ffffff; --tint: #f2f7f4; --hair: #dbe7e0; --ink: #0e2e24; --body: #3d5a50; --mute: #56706a;
  --accent: #0b7d55; --accent-text: #0b7650; --wash: #e3f4ec; --fill: #0b7d55; --fill-ink: #ffffff; --fill-hover: #096946;
  --band: #0b7d55; --close: #0e2e24; --stripe: #12a372; --od: #ffffff; --od-ink: #0b7650; --bar-bg: rgba(255, 255, 255, .88);
  --hl: var(--accent); --hl-bg: none; --hl-style: normal;
  --field: #ffffff; --field-hair: #c6d8ce; --danger: #b3253a;
  --fd: "Schibsted Grotesk", system-ui, sans-serif; --fb: "Figtree", system-ui, sans-serif;
  --fm: "Fragment Mono", ui-monospace, Menlo, monospace;
  --hw: 800; --hls: -.03em; --htt: none; --hwd: 100; --h1: clamp(2.3rem, 4.5vw, 3.6rem); --h1-lh: 1.05;
  --h2: clamp(1.8rem, 3.4vw, 2.5rem); --h2-lh: 1.1; --h3w: 700; --h3s: 1.06rem;
  --r: 8px; --r-box: 12px;
  color-scheme: light;
}
:root[data-t="evergreen"][data-m="dark"] {
  --ground: #08140f; --tint: #0c1c16; --hair: #1b3328; --ink: #e5f2ec; --body: #a9c3b7; --mute: #85a195;
  --accent: #4fd39c; --accent-text: #5fdaa7; --wash: #0f2a1f; --fill: #0f8a5e; --fill-ink: #ffffff; --fill-hover: #12a06d;
  --close: #04100b; --bar-bg: rgba(8, 20, 15, .86); --field: #0c1c16; --field-hair: #24453a; --danger: #ff8a8a;
  color-scheme: dark;
}

/* ============================================================================ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }
body { margin: 0; background: var(--ground); color: var(--body); font: 16px/1.6 var(--fb); -webkit-font-smoothing: antialiased;
  transition: background .25s, color .25s; }
a { color: inherit; }
img, svg { max-width: 100%; }
h1, h2, h3 { font-family: var(--fd); color: var(--ink); margin: 0; text-wrap: balance; font-weight: var(--hw);
  letter-spacing: var(--hls); text-transform: var(--htt); font-variation-settings: "wdth" var(--hwd); }
h1 { font-size: var(--h1); line-height: var(--h1-lh); }
h1 .hl { color: var(--hl); background: var(--hl-bg); font-style: var(--hl-style); }
h2 { font-size: var(--h2); line-height: var(--h2-lh); }
h3 { font-size: var(--h3s); font-weight: var(--h3w); line-height: 1.35; letter-spacing: -.01em; text-transform: none; font-variation-settings: "wdth" 100; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wrap { max-width: var(--wrap); margin-inline: auto;
  padding-left: max(clamp(16px, 3vw, 44px), env(safe-area-inset-left, 0px));
  padding-right: max(clamp(16px, 3vw, 44px), env(safe-area-inset-right, 0px)); }
.eyebrow { font: 500 .72rem/1 var(--fm); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-text); }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 12px; z-index: 100; background: var(--ground); color: var(--ink); padding: .5rem .8rem; border-radius: 6px; }

.btn { display: inline-flex; align-items: center; gap: .45rem; font: 600 .95rem/1 var(--fb); padding: .8rem 1.15rem; border-radius: var(--r);
  border: 1px solid transparent; white-space: nowrap; text-decoration: none; cursor: pointer; transition: transform .15s, background .15s; }
:root[data-t="cobalt"] .btn { text-transform: uppercase; letter-spacing: .04em; font-weight: 800; font-variation-settings: "wdth" 112; }
.btn-primary { background: var(--fill); color: var(--fill-ink); }
.btn-primary:hover { background: var(--fill-hover); transform: translateY(-1px); }
.btn-ghost { color: var(--ink); border-color: var(--hair); background: var(--ground); }
.btn-ghost:hover { border-color: var(--field-hair); transform: translateY(-1px); }
.btn-od { background: var(--od); color: var(--od-ink); }
.btn-od:hover { transform: translateY(-1px); filter: brightness(1.05); }
.btn .arw { transition: transform .15s; }
.btn:hover .arw { transform: translateX(3px); }

/* ============================================================================ bar */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 41; background: var(--ground); }
.bar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 40; background: var(--bar-bg);
  backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--hair); }
.bar-in { height: 64px; display: flex; align-items: center; gap: 1.5rem; }
.brand { display: flex; align-items: center; gap: .55rem; font: 700 1.12rem/1 var(--fd); color: var(--ink); text-decoration: none; letter-spacing: -.01em; }
:root[data-t="cobalt"] .brand { text-transform: uppercase; font-variation-settings: "wdth" 112; font-weight: 800; letter-spacing: .01em; }
:root[data-t="highlighter"] .brand { font-weight: 600; font-size: 1.22rem; }
.brand .agent { color: var(--accent-text); }
.brand svg { flex: none; }
.nav { margin-left: auto; display: flex; align-items: center; gap: 1.4rem; font-size: .93rem; }
.nav .lnk { color: var(--body); text-decoration: none; }
.nav .lnk:hover { color: var(--ink); }
.mode { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 8px; border: 1px solid var(--hair);
  background: var(--ground); color: var(--ink); cursor: pointer; padding: 0; }
.mode svg { width: 16px; height: 16px; }
.mode .i-sun { display: none; }
:root[data-m="dark"] .mode .i-sun { display: block; }
:root[data-m="dark"] .mode .i-moon { display: none; }

/* ============================================================================ hero */
.hero { position: relative; overflow: hidden; padding-block: clamp(2.6rem, 5vw, 4.4rem) clamp(3.4rem, 6vw, 5.2rem); }
.hero-in { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(2rem, 4vw, 4rem); align-items: center; }
.hero-copy { max-width: 33rem; }
.hero .sub { margin-top: 1.2rem; font-size: 1.15rem; }
.cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.8rem; }
.fine { margin-top: 1.1rem; font: .78rem/1.5 var(--fm); color: var(--mute); max-width: 30rem; }

/* ============================================================================ the demo
   The product, drawn in CSS with the app's own dark palette (jobson web/src/index.css). It is the
   same in every theme on purpose: it is a picture of the app, and the app does not change with the
   site's theme. Only the band behind it and the step captions take the theme. */
.demo { position: relative; min-width: 0; }
/* The band belongs to the shot's own box (as in mrkan #2226), so it sits behind the picture at every
   width and never under the step buttons or the caption, where text would land on it. */
.shot-stage { position: relative; }
.band { position: absolute; z-index: 0; left: -8%; right: -40vw; top: -14%; bottom: 0; background: var(--band); transform: skewY(-7deg); border-radius: 6px; }
.shot { position: relative; z-index: 1; border-radius: 14px; overflow: hidden; background: #0f172a; border: 1px solid rgba(255, 255, 255, .09);
  box-shadow: 0 50px 100px -20px rgba(10, 20, 50, .5), 0 30px 60px -30px rgba(0, 0, 0, .45);
  font: 13px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: #e5eaf1; container-type: inline-size; }
.chrome { display: flex; align-items: center; gap: .7rem; padding: .55rem .9rem; background: #162033; border-bottom: 1px solid #334155; }
.dots { display: flex; gap: 6px; flex: none; }
.dots i { width: 10px; height: 10px; border-radius: 50%; background: #3a4558; display: block; }
.url { flex: 1; min-width: 0; background: #0f172a; border-radius: 6px; padding: .28rem .7rem; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace;
  color: #a3aec2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.url b { color: #86efac; font-weight: 400; }
.app-top { display: flex; align-items: center; gap: .55rem; padding: .55rem .9rem; border-bottom: 1px solid #1e293b; font-weight: 600; }
.app-steps { margin-left: auto; display: flex; gap: .25rem; font-size: 11px; font-weight: 500; color: #8391a7; }
.app-steps span { padding: .15rem .45rem; border-radius: 999px; }
.app-steps span.on { background: #1e3a8a; color: #bfdbfe; }
.app-steps span.done { color: #86efac; }

.screen { position: relative; height: 336px; overflow: hidden; }
.scene { position: absolute; inset: 0; padding: .9rem 1rem 1rem; display: grid; align-content: start; gap: .7rem;
  opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .35s, transform .35s, visibility 0s .35s; }
.scene.on { opacity: 1; visibility: visible; transform: none; transition: opacity .35s, transform .35s; }
.scene h4 { margin: 0; font-size: 15px; font-weight: 600; color: #f1f5f9; display: flex; justify-content: space-between; gap: .6rem; align-items: baseline; }
.scene h4 small { font-size: 12px; font-weight: 400; color: #a3aec2; }
.muted { color: #8391a7; }

/* Staggered entries: a child with .in (and a --d delay) animates in each time its scene starts. */
.scene.on .in { animation: rise .45s cubic-bezier(.2, .7, .2, 1) both; animation-delay: var(--d, 0s); }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* 1. upload */
.drop { border: 1.5px dashed #475569; border-radius: 10px; height: 150px; display: grid; place-items: center; text-align: center; color: #a3aec2; position: relative; }
.scene.on .drop { animation: dropzone 4.6s ease both; }
@keyframes dropzone { 0%, 22% { border-color: #475569; background: transparent; } 30%, 44% { border-color: #93c5fd; background: rgba(30, 58, 138, .25); } 52%, 100% { border-color: #334155; background: transparent; } }
.file { display: flex; align-items: center; gap: .6rem; background: #1e293b; border: 1px solid #334155; border-radius: 8px; padding: .5rem .7rem; width: max-content; max-width: 100%; }
.file .pdf { width: 26px; height: 32px; border-radius: 3px; background: #fca5a5; color: #4c1d1d; font: 700 8px/32px system-ui, sans-serif; text-align: center; flex: none; }
.file b { display: block; color: #f1f5f9; font-weight: 600; }
.file span { font-size: 11px; color: #a3aec2; }
.flying { position: absolute; left: 50%; top: 50%; translate: -50% -50%; }
.scene.on .flying { animation: fly 4.6s cubic-bezier(.3, .6, .2, 1) both; }
@keyframes fly { 0% { transform: translate(140px, -120px) rotate(6deg); opacity: 0; } 10% { opacity: 1; } 40% { transform: translate(0, 0) rotate(0); opacity: 1; } 100% { transform: none; opacity: 1; } }
.drop-hint { font-size: 12px; }
.scene.on .drop-hint { animation: fade-out 4.6s both; }
@keyframes fade-out { 0%, 25% { opacity: 1; } 35%, 100% { opacity: 0; } }
.bar-p { height: 6px; border-radius: 3px; background: #1e293b; overflow: hidden; }
.bar-p i { display: block; height: 100%; width: 100%; background: #3b82f6; transform-origin: left; transform: scaleX(0); }
.scene.s1.on .bar-p i { animation: fill 1.6s 1.9s ease-in-out both; }
@keyframes fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.ok { color: #86efac; font-weight: 600; }

/* 2. analysis */
.facts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .5rem; }
.fact { background: #162033; border: 1px solid #1e293b; border-radius: 8px; padding: .45rem .65rem; min-width: 0; }
.fact span { display: block; font-size: 11px; color: #8391a7; }
.fact b { color: #f1f5f9; font-weight: 600; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.chip { font-size: 11.5px; padding: .18rem .55rem; border-radius: 999px; background: #14213d; color: #bfdbfe; border: 1px solid #1e3a8a; }
.spin { display: inline-block; width: 10px; height: 10px; border: 2px solid #3b82f6; border-right-color: transparent; border-radius: 50%; margin-right: .35rem; vertical-align: -1px; }
.scene.on .spin { animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* 3. criteria + triage */
.form-row { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: .6rem; align-items: center; }
.form-row > span { font-size: 11.5px; color: #8391a7; }
.input { min-height: 30px; background: #0b1220; border: 1px solid #334155; border-radius: 6px; padding: .25rem .45rem; display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.input .chip { background: #1e293b; color: #e5eaf1; border-color: #334155; }
.caret { display: inline-block; width: 1.5px; height: 14px; background: #93c5fd; vertical-align: -2px; margin-left: 1px; }
.scene.on .caret { animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
/* data-at children (demo.js): hidden until their moment, then in. A typed chip is absent until typing starts. */
.at { opacity: 0; }
.at.shown { animation: rise .4s cubic-bezier(.2, .7, .2, 1) both; }
.chip[data-type]:empty { display: none; }
.go { justify-self: start; background: #1d4ed8; color: #fff; font-weight: 600; font-size: 12px; padding: .38rem .8rem; border-radius: 6px; }
.go.shown { animation: press .35s ease both; }
@keyframes press { 40% { transform: scale(.94); filter: brightness(1.3); } 100% { transform: none; filter: none; } }
.found { display: grid; gap: .35rem; }
.found div { display: flex; justify-content: space-between; gap: .6rem; background: #162033; border-radius: 6px; padding: .4rem .65rem; font-variant-numeric: tabular-nums; }
.found b { color: #f1f5f9; font-weight: 600; }
.found em { font-style: normal; color: #86efac; font-weight: 600; }

/* 4. scoring */
.jobs { display: grid; gap: .35rem; }
.job { display: grid; grid-template-columns: minmax(0, 1fr) auto 2.6em; gap: .7rem; align-items: center; background: #162033; border-radius: 6px; padding: .42rem .65rem; }
.job .t { color: #f1f5f9; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vd { display: flex; gap: 3px; }
.vd i { width: 8px; height: 8px; border-radius: 50%; background: #334155; }
.scene.on .vd i { animation: verdict .25s both; animation-delay: var(--d); }
.vd i.m { --c: #4ade80; } .vd i.p { --c: #fbbf24; } .vd i.n { --c: #f87171; }
@keyframes verdict { from { background: #334155; transform: scale(.6); } to { background: var(--c); transform: none; } }
.sc { font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.scene.on .sc { animation: rise .3s both; animation-delay: var(--d); }
.tally { display: flex; gap: 1rem; font-size: 12px; font-variant-numeric: tabular-nums; color: #a3aec2; }
.tally b { font-weight: 600; }
.t-m { color: #86efac; } .t-p { color: #fcd34d; } .t-n { color: #fca5a5; }

/* 5. report */
.tbl { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; table-layout: fixed; }
.tbl th { text-align: left; font-weight: 500; color: #8391a7; font-size: 11px; padding: 0 .4rem .35rem; border-bottom: 1px solid #334155; }
.tbl td { padding: .4rem .4rem; border-bottom: 1px solid #1e293b; vertical-align: middle; }
.tbl .c-s { width: 3.6em; } .tbl .c-p { width: 3.6em; }
.tbl .role { color: #f1f5f9; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tbl tr.open td { background: #162033; border-bottom: 0; }
.score { display: inline-block; min-width: 2.6em; text-align: center; padding: .08rem .3rem; border-radius: 5px; font-weight: 700; font-size: 12px; }
.s-hi { background: #14432a; color: #86efac; } .s-mid { background: #47330d; color: #fcd34d; } .s-lo { background: #4c1d1d; color: #fca5a5; }
.pct { color: #bcc6d4; font-size: 12px; }
.items { background: #162033; padding: .15rem .7rem .6rem 1.2rem; display: grid; gap: .3rem; font-size: 12px; border-bottom: 1px solid #1e293b; }
.items div { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: .6rem; }
.items q { color: #a3aec2; font-style: italic; }
.v { font-weight: 700; font-size: 10.5px; letter-spacing: .03em; }
.v.met { color: #86efac; } .v.par { color: #fcd34d; } .v.not { color: #fca5a5; }

@container (max-width: 470px) {
  .app-steps { display: none; }
  .facts { grid-template-columns: minmax(0, 1fr); }
  .facts .fact:nth-child(n+4) { display: none; }
  .form-row { grid-template-columns: minmax(0, 1fr); gap: .2rem; }
  .tbl .c-p, .tbl .pct { display: none; }
}

/* The steps under the shot: the walk-through's table of contents, and its controls. */
.steps { position: relative; z-index: 1; list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .4rem; }
.steps li { display: flex; }
.steps button { width: 100%; text-align: left; background: var(--ground); border: 1px solid var(--hair); border-radius: var(--r-box); padding: .5rem .6rem .55rem;
  font: 500 .8rem/1.25 var(--fb); color: var(--body); cursor: pointer; position: relative; overflow: hidden; min-height: 3.6rem; }
.steps button b { display: block; font: 500 .68rem/1 var(--fm); color: var(--mute); margin-bottom: .3rem; letter-spacing: .06em; }
.steps button[aria-current="step"] { border-color: var(--accent); color: var(--ink); }
.steps button[aria-current="step"] b { color: var(--accent-text); }
.steps button::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--accent); transform-origin: left; transform: scaleX(0); }
.steps button[aria-current="step"]::after { animation: progress var(--step-ms, 5000ms) linear both; }
.demo.paused .steps button[aria-current="step"]::after { animation-play-state: paused; }
.demo.still .steps button[aria-current="step"]::after { animation: none; transform: scaleX(1); }
@keyframes progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.caption { position: relative; z-index: 1; margin-top: .7rem; font-size: .95rem; color: var(--body); min-height: 3.2em; }
.caption b { color: var(--ink); font-weight: 600; }

/* Without JavaScript, or with reduced motion and before a step is picked, show the report. */
.demo:not(.js) .scene.s5 { opacity: 1; visibility: visible; transform: none; }
.demo.still .scene, .demo.still .scene * { animation: none !important; transition: none !important; }
.demo.still .bar-p i { transform: none; }
.demo.still .vd i.m { background: #4ade80; } .demo.still .vd i.p { background: #fbbf24; } .demo.still .vd i.n { background: #f87171; }
.demo.still .drop-hint { opacity: 0; }

/* ============================================================================ sections */
.features { background: var(--tint); border-top: 1px solid var(--hair); padding-block: clamp(3.2rem, 6vw, 5.2rem); }
.features + .features { border-top: 0; padding-top: 0; }
.sec-head { display: grid; gap: .8rem; max-width: 44rem; }
.sec-head > p:last-child { font-size: 1.08rem; }
.grid { display: grid; gap: 1px; margin-top: clamp(2rem, 4vw, 3rem); background: var(--hair); border: 1px solid var(--hair); border-radius: var(--r-box); overflow: hidden; }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cell { background: var(--ground); padding: 1.5rem 1.35rem 1.65rem; display: flex; flex-direction: column; gap: .55rem; min-width: 0; }
.cell .ico { width: 28px; height: 28px; color: var(--accent); margin-bottom: .3rem; }
.cell .ico svg { width: 100%; height: 100%; display: block; }
.cell p { font-size: .95rem; }
.cell code { font: .82em var(--fm); background: var(--wash); color: var(--accent-text); padding: .06em .32em; border-radius: 4px; }
.formula { margin-top: .4rem; font: .9rem/1.5 var(--fm); color: var(--ink); background: var(--wash); border-radius: 6px; padding: .6rem .8rem; overflow-x: auto; white-space: nowrap; }
.legend { display: flex; flex-wrap: wrap; gap: .5rem 1rem; margin-top: .3rem; font: .85rem/1.3 var(--fm); color: var(--ink); }
.legend span { display: inline-flex; align-items: center; gap: .4rem; }
.legend i { width: 10px; height: 10px; border-radius: 50%; }

.close { position: relative; overflow: hidden; background: var(--close); color: #ffffff; padding-block: clamp(3.2rem, 6vw, 5rem); }
.close::before { content: ""; position: absolute; inset: -60% -10% auto -10%; height: 420px; background: var(--stripe); transform: skewY(-7deg); opacity: .92; }
.close-in { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.6rem; }
.close h2 { color: #ffffff; max-width: 18ch; }
.close p { color: rgba(255, 255, 255, .88); margin-top: .7rem; max-width: 46ch; }

footer { border-top: 1px solid var(--hair); }
.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding-block: 1.6rem; font-size: .86rem; color: var(--mute); }
.foot nav { display: flex; flex-wrap: wrap; gap: 1.2rem; }
.foot a { text-decoration: none; }
.foot a:hover { color: var(--ink); }

/* ============================================================================ signup and text pages */
.page { padding-block: clamp(2.4rem, 5vw, 4rem) clamp(3rem, 6vw, 5rem); }
.page-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.page-copy { display: grid; gap: 1rem; max-width: 30rem; }
.page-copy ul { margin: .4rem 0 0; padding-left: 1.1rem; display: grid; gap: .4rem; }
.card { background: var(--ground); border: 1px solid var(--hair); border-radius: var(--r-box); padding: clamp(1.2rem, 3vw, 1.8rem); box-shadow: 0 30px 60px -45px rgba(10, 20, 50, .45); }
form { display: grid; gap: 1rem; }
.field { display: grid; gap: .35rem; }
.field label { font-weight: 600; color: var(--ink); font-size: .92rem; }
.field label span { font-weight: 400; color: var(--mute); }
.field input, .field textarea { font: inherit; color: var(--ink); background: var(--field); border: 1px solid var(--field-hair); border-radius: min(var(--r), 8px); padding: .65rem .75rem; width: 100%; }
.field textarea { resize: vertical; min-height: 5.5rem; }
.field input:focus, .field textarea:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
.field .err { color: var(--danger); font-size: .86rem; min-height: 0; }
.field .err:empty { display: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note { font-size: .86rem; color: var(--mute); }
.status { border-radius: 8px; padding: .8rem 1rem; font-size: .95rem; }
.status.good { background: var(--wash); color: var(--ink); }
.status.bad { border: 1px solid var(--danger); color: var(--danger); }
.prose { max-width: 44rem; display: grid; gap: 1rem; }
.prose h2 { font-size: clamp(1.3rem, 2.4vw, 1.6rem); margin-top: 1rem; }
.prose ul { margin: 0; padding-left: 1.2rem; display: grid; gap: .35rem; }

/* ============================================================================ narrow */
@media (max-width: 980px) {
  .hero-in, .page-in { grid-template-columns: minmax(0, 1fr); }
  .band { left: -30%; right: -30%; top: 6%; bottom: -4%; }
  .demo { margin-top: 1rem; }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .nav .lnk:not(.signin) { display: none; }
  .nav .signin { white-space: nowrap; }
  .nav { gap: .7rem; }
  .bar .btn { padding: .65rem .85rem; }
  .grid-3, .grid-2 { grid-template-columns: minmax(0, 1fr); }
  .steps { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .25rem; }
  .steps button { font-size: 0; min-height: 0; padding: .45rem 0; text-align: center; }
  .steps button b { font-size: .72rem; margin: 0; }
  .screen { height: 318px; }
}
/* #3700: with Sign in in the bar, the bar's button no longer fits a phone; the page's own call to action does the job. */
@media (max-width: 480px) {
  .bar .btn-primary { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  body, .btn, .btn .arw, .scene { transition: none !important; }
}

/* ============================================================================ terms (#3700) */
.terms h3 { font-size: 1.08rem; margin-top: .6rem; }
.terms ol { margin: 0; padding-left: 1.4rem; display: grid; gap: .35rem; }
.terms .caps { text-transform: uppercase; font-size: .86rem; letter-spacing: .01em; }
.terms address { font-style: normal; line-height: 1.7; }
.terms-meta { margin: 0; display: grid; gap: .3rem; padding: .9rem 1rem; background: var(--tint); border: 1px solid var(--hair); border-radius: var(--r-box); }
.terms-meta div { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: .8rem; }
.terms-meta dt { font: 500 .72rem/1.9 var(--fm); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.terms-meta dd { margin: 0; color: var(--ink); }
.toc { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; font-weight: 600; }
.toc a { color: var(--accent-text); }

/* ============================================================================ pricing (#3701) */
.pricing-head { padding-bottom: 0; }
.plans-band { padding-block: clamp(2rem, 4vw, 3rem) clamp(3rem, 6vw, 4.5rem); }
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.plan { background: var(--ground); border: 1px solid var(--hair); border-radius: var(--r-box); padding: 1.5rem 1.35rem 1.6rem; display: grid; gap: .9rem; min-width: 0; }
.plan.featured { border: 2px solid var(--accent); box-shadow: 0 30px 60px -40px rgba(10, 20, 50, .45); }
.plan-top { display: grid; gap: .6rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--hair); }
.plan-top h2 { font-size: 1.35rem; }
:root[data-t="cobalt"] .plan-top h2 { font-size: 2rem; }
.price { display: flex; align-items: baseline; gap: .5rem; }
.price .amount { font: var(--hw) clamp(2.4rem, 4vw, 3rem)/1 var(--fd); color: var(--ink); letter-spacing: var(--hls); font-variation-settings: "wdth" var(--hwd); }
.price .per { color: var(--mute); font-size: .95rem; }
.pitch { font-size: .95rem; line-height: 1.6; min-height: 3.2em; }   /* two lines in every column, so the buttons line up */
.plan-top .btn { justify-content: center; }
.plan-h { font: 500 .72rem/1 var(--fm); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); margin-top: .2rem; }
.limits, .feats { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; font-size: .94rem; }
.limits li { color: var(--body); }
.limits b { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.limits li > span { color: var(--mute); font-size: .86rem; }
.feats li { display: grid; grid-template-columns: 1.2rem minmax(0, 1fr); gap: .45rem; align-items: start; }
/* The marks are drawn, not typed: a ✓ glyph comes out differently in each theme's font. */
.feats li::before { content: ""; width: 1rem; height: 1rem; margin-top: .2rem; background: currentColor;
  -webkit-mask: var(--mark) center / contain no-repeat; mask: var(--mark) center / contain no-repeat; }
.feats li.yes::before { color: var(--accent);
  --mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.feats li.no { color: var(--mute); }
.feats li.no::before { --mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8h8' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.plans-note { margin-top: 1.2rem; font-size: .88rem; color: var(--mute); max-width: 60rem; }
@media (max-width: 900px) {
  .plans { grid-template-columns: minmax(0, 1fr); max-width: 30rem; }
  .pitch { min-height: 0; }
}