/* Human Converter: home page (Main.dc.html, MobileHero.dc.html) and the
   converter wait screen (Converter.dc.html).

   Two kinds of rule live here:
   - Home page rules, all scoped to body.page-home, so nothing leaks if this
     file is loaded on another page.
   - The converter (.cv-*), the avatar picker (.avatar-picker, .face-btn) and
     the drop zone (.dropzone, .dz-*), which are unscoped because onboarding.js
     also runs on the offer letter page and loads this file there.
   Tokens come from base.css. */

/* =========================================================
   Header
   ========================================================= */

.page-home main:focus { outline: none; box-shadow: none; }

.page-home .site-nav a:not(.btn):hover { color: var(--orange-dark); }
.page-home .nav-cta { font-size: 15px; font-weight: 600; padding: 0 22px; }

.page-home .menu-toggle {
  display: none; align-items: center; justify-content: center; flex: none;
  width: 44px; height: 44px; padding: 0; border: var(--border); border-radius: 50%;
  background: none; color: var(--ink); cursor: pointer;
}
.page-home .menu-toggle svg { width: 20px; height: 20px; }
.page-home .menu-toggle:focus-visible { border-radius: 50%; }
.page-home .menu-icon-close { display: none; }
.page-home .site-header.is-open .menu-icon-open { display: none; }
.page-home .site-header.is-open .menu-icon-close { display: block; }

@media (max-width: 900px) { /* the menu button: five nav items no longer fit on one row */
  .page-home .site-header .wrap { padding-top: 14px; padding-bottom: 14px; row-gap: 0; }
  .page-home .logo { font-size: 14px; gap: 8px; }
  .page-home .logo svg { width: 22px; height: 22px; }
  .page-home .menu-toggle { display: inline-flex; }
  .page-home .site-nav {
    display: none; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 0;
    padding: 10px 0 6px;
  }
  .page-home .site-header.is-open .site-nav { display: flex; }
  .page-home .site-nav a:not(.btn) {
    display: flex; align-items: center; min-height: 48px; border-bottom: 1px solid var(--line); font-size: 17px;
  }
  .page-home .site-nav .nav-cta { margin-top: 14px; min-height: 48px; }
}

/* =========================================================
   Hero
   ========================================================= */

.page-home .hero { padding-top: 36px; padding-bottom: clamp(64px, 9vw, 104px); }
/* Sized so headline A fits on one line and B on two on a desktop, so the
   cards, "Choose a file" and the saving show on a laptop's first screen
   (review, 14 Oct 2026; measured at 1024 to 1440px). */
.page-home .hero-title { font-size: clamp(34px, 5.4vw, 72px); overflow-wrap: break-word; text-wrap: balance; }
.page-home .hero-lede { margin-top: 16px; max-width: 680px; }

/* ---------- The human role -> the AI employee (Matt, 14 Oct 2026) ----------
   Two cards with an arrow between them: on the left the human role, which is
   also the drop zone; on the right the AI employee. #hx[data-state]:
     idle  both cards show the worked example (Bob, BobAI) faintly (.hx-ghost)
           and the left card shows the drop zone (.hx-drop)
     live  a conversion is running or has just finished (hero-converter.js):
           the faint example gives way to the real values (.hx-real, a grey
           bar while still empty), the left card shows the document being
           scanned (.hx-doc) and the four steps run underneath (.hx-status) */

.page-home .hx {
  display: grid; grid-template-columns: minmax(0, 1fr) 84px minmax(0, 1fr); align-items: stretch;
  margin-top: 28px;
}
.page-home .hx-card {
  --hx-pad: 24px;
  position: relative; display: flex; flex-direction: column; gap: 14px; min-width: 0;
  padding: var(--hx-pad); border-radius: 24px;
}
.page-home .hx-labels {
  display: flex; justify-content: space-between; gap: 12px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.page-home .hx-person { display: flex; align-items: baseline; justify-content: space-between; gap: 4px 12px; flex-wrap: wrap; min-width: 0; }
.page-home .hx-name, .page-home .hx-ai-name { font-stretch: 125%; font-weight: 800; font-size: 28px; line-height: 1.1; overflow-wrap: anywhere; }
.page-home .hx-role { font-size: 15px; color: var(--text-3); }
.page-home .hx-foot {
  margin-top: auto; border-top: 1px solid var(--track); padding-top: 12px;
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 15px;
}
.page-home .hx-foot-label { color: var(--text-3); }
.page-home .hx-foot-value { font-weight: 700; text-align: right; }
.page-home .hx-foot-sub { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; color: var(--text-3); }

/* The worked example, faint, and the real values, which replace it once a
   conversion starts. An empty real value shows as a grey bar. */
/* The worked example: marked "Example" and still readable (review, 14 Oct 2026). */
.page-home .hx-ghost { opacity: .55; }
.page-home .hx-ai .hx-ghost { opacity: .72; }
.page-home .hx-example-tag {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border: 1px solid currentColor; border-radius: 999px;
  font-size: 10px; letter-spacing: .08em; vertical-align: 1px;
}
.page-home .hx:not([data-state="idle"]) .hx-example-tag { display: none; }
.page-home .hx[data-state="idle"] .hx-real,
.page-home .hx:not([data-state="idle"]) .hx-ghost,
.page-home .hx:not([data-state="idle"]) .hx-example-desc { display: none; }
.page-home .hx-real:empty::before {
  content: ''; display: inline-block; vertical-align: middle; width: 7em; max-width: 100%; height: .62em;
  border-radius: 6px; background: var(--track);
}
.page-home .hx-ai .hx-real:empty::before { background: #33363B; }

/* The left card: the human role and the drop zone. The card is the drop
   target, so it carries is-dragover / is-disabled (dropzone.js). */
.page-home .dz-area {
  background: var(--paper); border: 2px dashed var(--ink);
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.page-home .hx[data-state="idle"] .dz-area:not(.is-pasting):not(.is-disabled):not(.is-dragover):hover { background: #FFFBF8; }
.page-home .hx:not([data-state="idle"]) .dz-area { border-style: solid; }
.page-home .dz-area .dropzone { border: none; border-radius: 16px; background: transparent; padding: 14px 8px 10px; }
.page-home .dz-area .dropzone:hover { background: transparent; }
.page-home .dz-area .dropzone:has(input:focus-visible) { box-shadow: none; }
.page-home .dz-area:has(#file-input:focus-visible) { box-shadow: var(--focus); }
@supports not selector(:has(*)) {
  .page-home .dz-area .dropzone:focus-within { box-shadow: none; }
  .page-home .dz-area:focus-within { box-shadow: var(--focus); }
}
.page-home .dz-area.is-dragover { border-style: solid; border-color: var(--orange-dark); background: #FFF1E9; }
/* Busy (a result being restored): only the file side dims, never the card; the paste side's controls dim themselves ([disabled]). */
.page-home .dz-area.is-disabled .dropzone { opacity: .6; cursor: not-allowed; }

.page-home .hx-drop { display: flex; flex-direction: column; min-width: 0; }
/* The card already says what goes in: no upload icon, so the saving stays on a laptop's first screen. */
.page-home .hx-drop .dz-icon { display: none; }
.page-home .hx:not([data-state="idle"]) .hx-drop { display: none; }
.page-home .dz-paste-toggle[disabled], .page-home .dz-paste-back[disabled] { opacity: .55; cursor: not-allowed; }
.page-home .dz-paste { display: flex; flex-direction: column; gap: 10px; padding: 4px 0 6px; }
.page-home .dz-paste-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; }
.page-home .dz-paste-label { font-size: 18px; font-weight: 700; line-height: 1.25; }
.page-home .dz-paste .textarea { min-height: 180px; }
.page-home .paste-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.page-home .paste-foot .field-hint { font-size: 14px; color: var(--muted); }
.page-home .paste-foot .field-hint.is-limit { color: var(--orange-dark); font-weight: 600; }
.page-home .textarea[disabled] { opacity: .6; }

/* The document being read (live only): its kind, text lines and a scan line. */
.page-home .hx-doc { position: relative; display: none; flex-direction: column; gap: 12px; padding: 8px 0; overflow: hidden; }
/* Centred in the card, which is as tall as the AI card beside it. */
.page-home .hx:not([data-state="idle"]) .hx-doc { display: flex; margin: auto 0; }
.page-home .hx-doc-kind { font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--orange-dark); }
.page-home .hx-lines { display: flex; flex-direction: column; gap: 10px; }
.page-home .hx-lines span { display: block; height: 9px; border-radius: 5px; background: var(--track); }
.page-home .hx-lines span:nth-child(1) { width: 92%; }
.page-home .hx-lines span:nth-child(2) { width: 78%; }
.page-home .hx-lines span:nth-child(3) { width: 86%; }
.page-home .hx-lines span:nth-child(4) { width: 64%; }
.page-home .hx-lines span:nth-child(5) { width: 81%; }
.page-home .hx-scan {
  position: absolute; left: -4px; right: -4px; top: 0; height: 3px; border-radius: 2px;
  background: var(--orange); box-shadow: 0 0 14px 2px rgba(255, 91, 26, .45); opacity: 0;
}

/* The arrow between the cards. */
.page-home .hx-arrow {
  align-self: center; justify-self: center; display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 50%; background: var(--orange); color: var(--ink);
}
.page-home .hx-arrow svg { width: 26px; height: 26px; }

/* The right card: the AI employee. */
.page-home .hx-ai { background: var(--ink); color: var(--on-ink); border: 2px solid var(--ink); gap: 16px; }
.page-home .hx-ai .hx-labels { color: var(--on-ink-muted); }
.page-home .hx-id { display: flex; align-items: center; gap: 16px; min-width: 0; }
.page-home .hx-face {
  position: relative; display: block; width: 64px; height: 64px; flex: none; border-radius: 50%; overflow: hidden;
  background: #2A2D32; box-shadow: 0 0 0 2px var(--ink), 0 0 0 3.5px #4A4D53;
}
.page-home .hx-face-img { position: absolute; inset: 0; display: block; }
.page-home .hx-real.hx-face-img:empty::before { display: none; }
.page-home .hx-id-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.page-home .hx-ai-role { font-size: 15px; color: var(--on-ink-2); }
.page-home .hx-ai-tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--orange-light); }
.page-home .hx-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.page-home .hx-chips li { border: 1px solid #4A4D53; border-radius: 999px; padding: 6px 12px; font-size: 13px; }
.page-home .hx-chips li.is-placeholder { color: var(--on-ink-muted); border-style: dashed; }
.page-home .hx-chips li.is-hot { border-color: var(--orange-light); color: var(--on-ink); }
.page-home .hx-chips.hx-real:empty::before { width: 60%; }
.page-home .hx-tasks { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.page-home .hx-tasks-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--on-ink-muted); }
.page-home .hx-task-list { margin: 0; padding: 0; list-style: none; }
.page-home .hx-task-list li {
  display: flex; align-items: baseline; gap: 10px; padding: 9px 0; border-top: 1px solid #33363B; font-size: 15px;
}
.page-home .hx-task-list li::before {
  content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--orange-light); transform: translateY(-2px);
}
.page-home .hx-task-list.hx-real:empty::before { display: block; width: 70%; margin-top: 10px; }
.page-home .hx-ai .hx-foot { border-top-color: #33363B; }
.page-home .hx-ai .hx-foot-label { color: var(--on-ink-2); }
.page-home .hx-ai .hx-foot-value { color: var(--on-ink); }
.page-home .hx-ai .hx-foot-sub { color: var(--on-ink-2); } /* "That's a fifth of the salary." on the dark card */
/* The saving: the human salary less a year of the converted price. */
.page-home .hx-save {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  margin: -4px -10px -8px; padding: 12px 10px; border-radius: 12px; background: rgba(255, 138, 92, .12);
}
.page-home .hx-save[hidden] { display: none; }
.page-home .hx-save-label { font-weight: 700; color: var(--orange-light); }
.page-home .hx-save-value { font-stretch: 125%; font-weight: 800; font-size: 22px; line-height: 1.1; color: var(--orange-light); text-align: right; }

/* The four steps under the cards (live only). */
.page-home .hx-status { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 22px; text-align: center; }
.page-home .hx-status:focus { outline: none; box-shadow: none; } /* focused only to keep the visitor's place */
.page-home .hx-status-head { display: flex; align-items: center; gap: 12px; }
.page-home .hx-count { font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.page-home .hx-ticks { display: flex; gap: 6px; }
.page-home .hx-ticks span { width: 28px; height: 4px; border-radius: 2px; background: var(--track); transition: background-color .2s ease; }
.page-home .hx-ticks span.is-done { background: var(--ink); }
.page-home .hx-ticks span.is-current { background: var(--orange); }
.page-home .hx-status-title { font-size: 20px; font-weight: 700; line-height: 1.3; }
.page-home .hx-status-sub { font-size: 15px; color: var(--text-3); max-width: 560px; }

/* ---------- Done: the AI card is the result (result.js) ----------
   Matt, 14 Oct 2026: the result is rolled into the hero's right card. The
   cards no longer match heights (the result is much taller), the arrow stays
   near the top, the title replaces the OUTPUT / AI EMPLOYEE labels and the
   call shows the face, so the small portrait goes. */
.page-home .hx[data-state="done"] { align-items: start; }
.page-home .hx[data-state="done"] .hx-arrow { align-self: start; margin-top: 140px; }
.page-home .hx[data-state="done"] .hx-ai .hx-labels,
.page-home .hx[data-state="done"] .hx-ai .hx-id,
.page-home .hx[data-state="done"] .hx-lines { display: none; }
/* The AI card's order once done (review and Matt, 14 Oct 2026): the call,
   then the AI version, the saving and the decision box with Hire, then the
   work, the skills, the summary, Hire again, sharing and Rename. The parts
   result.js adds are direct children of the card. */
.page-home .hx[data-state="done"] .hx-ai > * { order: 20; }
.page-home .hx[data-state="done"] .hx-ai > .hx-done-title { order: 1; }
.page-home .hx[data-state="done"] .hx-ai > .hx-call { order: 2; }
.page-home .hx[data-state="done"] .hx-ai > .hx-plan { order: 3; }
.page-home .hx[data-state="done"] .hx-ai > .hx-disclose { order: 4; }
.page-home .hx[data-state="done"] .hx-ai > .hx-foot { order: 5; margin-top: 0; }
.page-home .hx[data-state="done"] .hx-ai > .hx-save { order: 6; }
.page-home .hx[data-state="done"] .hx-ai > .hx-fee { order: 7; }
.page-home .hx[data-state="done"] .hx-ai > .hx-cta { order: 8; }
.page-home .hx[data-state="done"] .hx-ai > .hx-decide { order: 9; }
.page-home .hx[data-state="done"] .hx-ai > .hx-tasks { order: 10; }
.page-home .hx[data-state="done"] .hx-ai > .hx-chips { order: 11; }
.page-home .hx[data-state="done"] .hx-ai > .hx-summary { order: 12; }
.page-home .hx[data-state="done"] .hx-ai > .hx-endcta { order: 13; }
.page-home .hx[data-state="done"] .hx-ai > .hx-share { order: 14; }
.page-home .hx[data-state="done"] .hx-ai > .hx-rename { order: 15; }
/* Hire stays in reach (Matt, 14 Oct 2026: it wasn't obvious enough): while
   its place is below the screen it waits at the bottom of the AI card's
   column, on a strip of the card's own colour, then settles under the price.
   result.js sets --hx-cta-bottom (above the cookie banner while it's up) and
   is-pinned (while it waits), when the content above fades out behind it. */
.page-home .hx[data-state="done"] .hx-ai > .hx-cta {
  position: sticky; bottom: var(--hx-cta-bottom, 0px); z-index: 3;
  margin: 0 calc(-1 * var(--hx-pad)); padding: 0 var(--hx-pad) 16px;
  background: var(--ink);
}
.page-home .hx[data-state="done"] .hx-ai { overflow: clip; } /* the fade never shows outside the card; clip, unlike hidden, keeps sticky working */
.page-home .hx[data-state="done"] .hx-ai > .hx-cta.is-pinned::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 40px; pointer-events: none;
  background: linear-gradient(to bottom, rgba(18, 19, 21, 0), var(--ink));
}
.page-home .hx-disclose { font-size: 13px; color: var(--on-ink-muted); text-align: center; }
.page-home .hx-done-title { font-size: clamp(26px, 2.5vw, 34px); line-height: 1.08; letter-spacing: -0.01em; color: var(--on-ink); }
.page-home .hx-done-title:focus { outline: none; box-shadow: none; }
.page-home .hx-call { min-width: 0; }
.page-home .hx-call .cf { padding: 0; background: transparent; }
/* The card is narrower than the old result column: a square tile keeps the portrait large. */
.page-home .hx-call .cf-stage { aspect-ratio: 1 / 1; }
.page-home .hx-plan .lead-inline { padding: 20px; }
.page-home .hx-plan .lead-inline:not(.is-done) { color: var(--ink); }
/* The card is narrower than the page, so the plan form's fields stack. */
.page-home .hx-plan .lead-grid--inline { grid-template-columns: minmax(0, 1fr); }
.page-home .hx-plan .lead-grid--inline .lead-field-company { grid-column: auto; }
.page-home .hx-rename { display: flex; flex-direction: column; align-items: center; }
/* Rename is a quiet text link on the result (it was a large pill). */
.page-home .hx-rename .result-rename {
  min-height: 36px; padding: 0; border: none; border-radius: 0; background: none; color: var(--on-ink-2);
  font-size: 14px; font-weight: 500; text-decoration: underline; text-underline-offset: 4px;
}
.page-home .hx-rename .result-rename:hover { background: none; color: var(--orange-light); }
.page-home .hx-rename .result-rename-form { align-self: stretch; }
/* The rename form, on the dark card. */
.page-home .hx-rename .result-rename-label { color: var(--on-ink); }
.page-home .hx-rename .btn-outline { color: var(--on-ink); border-color: var(--on-ink); }
.page-home .hx-rename .btn-dark { border-color: var(--ink-border); }
.page-home .hx-rename .field-hint, .page-home .hx-rename .result-rename-note { color: var(--on-ink-muted); }
.page-home .hx-rename .field-error { color: var(--orange-light); }
.page-home .hx-summary { font-size: 15px; line-height: 1.5; color: var(--on-ink-2); }
.page-home .hx-task-list li { justify-content: flex-start; }
.page-home .hx-task-text { flex: 1 1 auto; min-width: 0; }
.page-home .hx-task-tag {
  flex: none; font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--orange-light); border: 1px solid #5A5D63; border-radius: 999px; padding: 2px 8px;
}
/* The decision block: Hire and what a buyer needs right there. */
.page-home .hx-decide { display: flex; flex-direction: column; gap: 10px; margin-top: -4px; }
.page-home .hx-decide-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 15px; }
.page-home .hx-decide-value { font-weight: 700; text-align: right; }
.page-home .hx-hire { min-height: 60px; }
.page-home .hx-hire svg { width: 20px; height: 20px; }
.page-home .hx-decide-note { font-size: 14px; line-height: 1.45; color: var(--on-ink-2); text-align: center; }
.page-home .hx-decide-note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.page-home .hx-decide-promise { font-weight: 600; color: var(--on-ink); }
.page-home .hx-plan-link { align-self: center; text-align: center; color: var(--on-ink); }
.page-home .hx-plan-link:hover { color: var(--orange-light); }
.page-home .hx-decide-row { color: var(--on-ink-2); }
.page-home .hx-decide-value { color: var(--on-ink); }
/* Hire again at the end of the card, before sharing. */
.page-home .hx-endcta { padding-top: 18px; border-top: 1px solid #33363B; }
.page-home .hx-endcta + .hx-share { padding-top: 0; border-top: none; }

/* The page's closing section while a result is showing (result.js). */
.page-home .closing-title.is-hire {
  flex: 1 1 520px; min-width: 0; max-width: 760px; font-size: clamp(40px, 5vw, 68px);
  text-wrap: balance; overflow-wrap: anywhere;
}
/* Phones: small enough that a long name (ChristopherAI) still fits on a line. */
@media (max-width: 600px) { .page-home .closing-title.is-hire { font-size: clamp(28px, 8.6vw, 40px); } }
.page-home .closing-hire { flex: 0 1 460px; display: flex; flex-direction: column; gap: 12px; }
.page-home .closing-note { font-size: 15px; line-height: 1.45; font-weight: 600; color: var(--ink); }

/* Phones: a slim Hire bar once the card's sticky Hire has scrolled past (result.js). */
.hx-hirebar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px max(16px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background: var(--ink); color: var(--on-ink); box-shadow: 0 -6px 20px rgba(18, 19, 21, .25);
}
.hx-hirebar[hidden] { display: none; }
.hx-hirebar-price { font-weight: 700; }
.hx-hirebar-btn { min-height: 48px; }
.hx-hirebar-btn svg { width: 18px; height: 18px; }

.page-home .hx-share { padding-top: 18px; border-top: 1px solid #33363B; }
.page-home .hx-share .share-status { color: var(--on-ink-2); }
/* The card is narrow on small laptops: the pair of share buttons wraps rather
   than overflowing. (Phones keep them side by side, with Copy as an icon.) */
@media (min-width: 601px) { .page-home .hx-share .share-pair { flex-wrap: wrap; } }
.page-home .hx-again { align-self: center; }
/* The Indeed source is for the Bob example, so it goes once the cards show a real role. */
.page-home .hx:not([data-state="idle"]) ~ .hero-below .hero-aside { display: none; }

/* Under the cards: any error from the drop zone (left) and the example's source (right). */
.page-home .hero-below { display: grid; grid-template-columns: minmax(0, 1fr) 84px minmax(0, 1fr); margin-top: 28px; }
.page-home .hero-main { --hero-gap: 28px; grid-column: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--hero-gap); }
.page-home .hero-aside { grid-column: 3; min-width: 0; }

/* The alert region stays in the page (so screen readers announce what lands
   in it) but takes no room while empty. */
.page-home .convert-alert:empty { margin-top: calc(-1 * var(--hero-gap)); }
.page-home .convert-alert .notice { margin: 0; }


/* The paste link and the sample roles, inside the drop zone under "Choose a
   file" (Matt, 14 Oct 2026), so nothing sits under the cards. The sample roles
   are full pill buttons (44px): most visitors from ads have no file to hand. */
.page-home .dz-alt { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 0 0 6px; text-align: center; }
.page-home .dz-alt .dz-paste-toggle { min-height: 36px; font-size: 15px; }
.page-home .dz-alt-label { margin-top: 4px; font-size: 15px; font-weight: 600; }
.page-home .sample-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.page-home .sample-btn { background: var(--paper); font-size: 15px; }
.page-home .sample-btn:hover { background: var(--ink); color: var(--on-ink); }
.page-home .sample-btn[disabled] { opacity: .5; cursor: not-allowed; }
.page-home .sample-btn[disabled]:hover { background: var(--paper); color: var(--ink); }
.page-home .dz-trust { max-width: 380px; font-size: 13px; line-height: 1.4; color: var(--text-3); }

/* Tablets and phones: the cards stack and the arrow points down. */
@media (max-width: 900px) {
  .page-home .hx { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 76px auto; }
  .page-home .hx-arrow svg { transform: rotate(90deg); }
  .page-home .hx[data-state="done"] .hx-arrow { align-self: center; margin-top: 0; }
  .page-home .hero-below { grid-template-columns: minmax(0, 1fr); }
  .page-home .hero-main, .page-home .hero-aside { grid-column: 1; }
  .page-home .hero-aside { margin-top: 20px; }
}

@media (prefers-reduced-motion: no-preference) {
  .page-home .hx[data-state="live"] .hx-arrow { animation: hx-pulse 1.4s ease-in-out infinite; }
  .page-home .hx[data-state="live"][data-step="1"] .hx-scan { animation: hx-scan 1.6s ease-in-out infinite; }
  .page-home .hx-real.is-new { animation: hx-in .45s ease both; }
}
@keyframes hx-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 91, 26, .45); }
  50% { box-shadow: 0 0 0 12px rgba(255, 91, 26, 0); }
}
@keyframes hx-scan {
  0% { top: 0; opacity: 0; }
  12% { opacity: 1; }
  88% { opacity: 1; }
  100% { top: calc(100% - 3px); opacity: 0; }
}
@keyframes hx-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

/* ---------- Drop zone (unscoped: also usable on other pages) ---------- */

.dropzone {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  padding: 44px 28px; background: var(--paper); border: 2px dashed var(--ink); border-radius: 24px;
  text-align: center; cursor: pointer; color: var(--ink);
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.dropzone:hover { background: #FFFBF8; }
.dropzone:hover .dz-button { background: #ff6d33; }
.dropzone:has(input:focus-visible) { box-shadow: var(--focus); }
@supports not selector(:has(*)) {
  .dropzone:focus-within { box-shadow: var(--focus); }
}
.dropzone.is-dragover { border-style: solid; border-color: var(--orange-dark); background: #FFF1E9; }
.dropzone.is-disabled { cursor: not-allowed; opacity: .6; }
.dropzone.is-disabled:hover { background: var(--paper); }
.dz-icon { width: 40px; height: 40px; }
.dz-title { font-size: 22px; font-weight: 700; line-height: 1.25; }
.dz-phone { display: none; }
.dz-meta { font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.dz-button { margin-top: 6px; pointer-events: none; }
.dz-button-icon { display: none; }

/* Phones and touch-only screens: a tap-to-upload button. */
@media (max-width: 640px), (hover: none) and (pointer: coarse) {
  .dz-desktop { display: none; }
  .dz-phone { display: inline; }
}
@media (max-width: 640px) {
  .dropzone { padding: 26px 20px; gap: 10px; border-radius: 20px; }
  .dz-icon { display: none; }
  .dz-title { font-size: 18px; }
  .dz-meta { font-size: 11px; }
  .dz-button { width: 100%; min-height: 52px; font-size: 16px; }
  .dz-button-icon { display: block; }
}

/* ---------- Face photos (unscoped) ----------
   Every face is a real photo (avatars.json: portrait 512x512, photo 16:9).
   Each <img> sits in a round neutral disc that shows while it loads, or alone
   if the photo can't load (avatar-picker.js hides a broken image). */

.face-img img, .hx-face-img img, .cv-face img {
  display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%;
  border-radius: 50%; color: transparent; user-select: none; -webkit-user-drag: none;
}
.face-img img[hidden], .hx-face-img img[hidden], .cv-face img[hidden], .cv-room img[hidden] { display: none; }

/* ---------- Avatar picker (unscoped) ----------
   Not on the home page since 14 Oct 2026 (the server picks the face to suit
   the name); kept for a later "change the face" option. */

.avatar-picker { display: flex; flex-wrap: wrap; gap: 16px; padding: 8px; margin: -8px; }
.face-btn {
  position: relative; flex: none; width: 56px; height: 56px; padding: 0; border: none; border-radius: 50%;
  background: none; cursor: pointer;
}
.face-btn .face-img {
  display: block; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; background: var(--track);
  box-shadow: 0 0 0 1px rgba(18, 19, 21, .14);
}
.face-btn img { transition: filter .15s ease; }
.face-btn:not([aria-pressed="true"]):not([disabled]):hover img { filter: brightness(1.05); }
.face-ring {
  position: absolute; inset: -6px; border: 3px solid var(--orange); border-radius: 50%;
  opacity: 0; transform: scale(.92); transition: opacity .15s ease, transform .15s ease; pointer-events: none;
}
.face-btn:hover .face-ring { opacity: .35; transform: none; }
.face-btn[aria-pressed="true"] .face-ring { opacity: 1; transform: none; }
.face-btn:focus-visible { box-shadow: none; border-radius: 50%; outline: 2px solid var(--ink); outline-offset: 9px; }
.face-btn[disabled] { cursor: not-allowed; opacity: .55; }
.face-btn[disabled]:hover .face-ring { opacity: 0; }
.face-btn[disabled][aria-pressed="true"] .face-ring { opacity: 1; }

@media (max-width: 640px) {
  /* One horizontally scrollable row that runs to the screen edges. */
  .page-home .avatar-picker {
    flex-wrap: nowrap; overflow-x: auto; gap: 14px; scroll-snap-type: x proximity; scroll-padding-inline: var(--gutter);
    margin: -8px calc(-1 * var(--gutter)); padding: 8px var(--gutter) 12px;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .page-home .avatar-picker::-webkit-scrollbar { display: none; }
  .page-home .face-btn { width: 52px; height: 52px; scroll-snap-align: start; }
}

/* The example's source (Indeed) and, when minMonthly/maxMonthly change the
   example's price, the one-line note saying so. Used in the hero and in the
   comparison section. */
.page-home .example-source { font-size: 13px; line-height: 1.45; color: var(--text-3); }
.page-home .example-source a { color: inherit; text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.page-home .example-source a:hover { color: var(--orange-dark); }
.page-home .example-note { font-size: 15px; font-weight: 600; color: var(--text-2); }
.page-home .hv-note + .hv-source { margin-top: 6px; }
.page-home .hv-source + .hv-source--cost { margin-top: 8px; }

@media (max-width: 640px) {
  .page-home .hero { padding-top: 28px; padding-bottom: 64px; }
  .page-home .hero-lede { font-size: 19px; }
  .page-home .hero-main { --hero-gap: 20px; }
  .page-home .hero-below { margin-top: 24px; }

  .page-home .hx { margin-top: 24px; grid-template-rows: auto 64px auto; }
  .page-home .hx-card { --hx-pad: 18px; border-radius: 20px; gap: 10px; }
  .page-home .hx-labels { font-size: 11px; }
  .page-home .hx-name, .page-home .hx-ai-name { font-size: 22px; }
  .page-home .hx-role, .page-home .hx-foot { font-size: 14px; }
  .page-home .hx-arrow { width: 48px; height: 48px; }
  .page-home .hx-arrow svg { width: 22px; height: 22px; }
  .page-home .hx-face { width: 48px; height: 48px; }
  .page-home .hx-id { gap: 12px; }
  .page-home .hx-ai-tag { font-size: 10px; }
  /* The AI card stays short on a phone (no chips or tasks) until it is the result. */
  .page-home .hx:not([data-state="done"]) .hx-chips, .page-home .hx:not([data-state="done"]) .hx-tasks { display: none; }
  .page-home .hx-status-title { font-size: 18px; }
  .page-home .hx-status-sub { font-size: 14px; }

  .page-home .dz-area .dropzone { padding: 8px 0 6px; }
  .page-home .dz-paste-label { font-size: 17px; }
  .page-home .paste-foot .btn { width: 100%; }
}

/* =========================================================
   The converter (unscoped: also used on the offer letter page)
   ========================================================= */


.cv { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.cv-eyebrow {
  margin: 0; font-family: var(--font-mono); font-size: 13px; font-weight: 500; letter-spacing: .1em;
  text-transform: uppercase; color: var(--orange-dark);
}
.cv-panel {
  background: var(--paper); border: var(--border); border-radius: 20px; padding: 24px;
  display: flex; flex-direction: column; gap: 20px; color: var(--ink);
}
.cv-panel:focus, .cv-panel:focus-visible { outline: none; box-shadow: none; }

.cv-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.cv-count { font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.cv-ticks { display: flex; gap: 4px; flex: none; }
.cv-tick { position: relative; display: block; width: 28px; height: 6px; border-radius: 3px; background: var(--track); overflow: hidden; transition: background-color .3s ease; }
.cv-tick.is-done, .cv-tick.is-current { background: var(--orange); }

/* ---------- Stage and scenes ----------
   A scene is on screen in full from the moment its step starts: the change of
   scene is a cut, never a fade from an empty stage (a fade left the stage
   blank light grey for the first half of each short sample step, and for the
   whole step where the browser had paused animations). The motion lives
   inside each scene, and every entrance starts from a visible pose. The stage
   background follows the scene so even a scene that hasn't painted yet shows
   the right panel. Timing scales with .cv.is-fast (sample roles). */

.cv {
  --cv-in: .6s;        /* entrances (resume card, AI card, face) */
  --cv-stagger: 90ms;  /* between skill chips */
  --cv-chip: .4s;
  --cv-rise: .2s;      /* first delay of the Bob -> BobAI line */
  --cv-leave: .45s;    /* the resume card going into the converter */
}
.cv.is-fast { --cv-in: .32s; --cv-stagger: 40ms; --cv-chip: .28s; --cv-rise: .08s; --cv-leave: .3s; }

.cv-stage { position: relative; height: 300px; border-radius: 14px; overflow: hidden; background: var(--ground-2); }
.cv-stage[data-scene="2"], .cv-stage[data-scene="4"] { background: var(--ink); }
.cv-scene { position: absolute; inset: 0; opacity: 0; visibility: hidden; }
.cv-stage[data-scene="1"] .cv-scene-scan,
.cv-stage[data-scene="2"] .cv-scene-skills,
.cv-stage[data-scene="3"] .cv-scene-name,
.cv-stage[data-scene="4"] .cv-scene-voice,
.cv-stage[data-scene="error"] .cv-scene-error {
  opacity: 1; visibility: visible; z-index: 1;
}

/* 1: the resume card goes into the converter */
.cv-scene-scan { background: var(--ground-2); --scan-to: 150px; }
.cv-doc {
  position: absolute; left: 50%; top: 36px; z-index: 1; width: 210px; margin-left: -105px;
  background: var(--paper); border: var(--border); border-radius: 12px; padding: 18px;
  display: flex; flex-direction: column; gap: 10px;
}
.cv-doc-title { font-stretch: 125%; font-weight: 800; font-size: 20px; line-height: 1.1; overflow-wrap: anywhere; }
.cv-doc-sub { font-size: 13px; color: var(--text-3); overflow-wrap: anywhere; }
.cv-lines { display: flex; flex-direction: column; gap: 10px; margin-top: 2px; }
.cv-lines span { display: block; height: 6px; border-radius: 3px; background: var(--track); }
.cv-lines span:nth-child(1) { width: 90%; }
.cv-lines span:nth-child(2) { width: 72%; }
.cv-lines span:nth-child(3) { width: 84%; }
.cv-lines span:nth-child(4) { width: 64%; }
.cv-lines span:nth-child(5) { width: 78%; }
.cv-scanline {
  position: absolute; left: 24px; right: 24px; top: 52px; z-index: 2; height: 3px; border-radius: 2px;
  background: var(--orange); box-shadow: 0 0 14px 2px rgba(255, 91, 26, .45);
}
.cv-band {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; height: 72px;
  display: flex; align-items: center; justify-content: center; background: var(--ink);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--orange-light);
}

/* 2: skills and experience flow out */
.cv-scene-skills { background: var(--ink); display: flex; align-items: center; gap: 14px; padding: 0 20px; }
.cv-mini-doc { flex: none; width: 70px; display: flex; flex-direction: column; gap: 8px; }
.cv-mini-doc span { display: block; height: 6px; border-radius: 3px; background: var(--ink-line); }
.cv-mini-doc span:nth-child(2) { width: 80%; }
.cv-mini-doc span:nth-child(3) { width: 92%; }
.cv-mini-doc span:nth-child(4) { width: 70%; }
.cv-arrow { flex: none; width: 28px; height: 28px; color: var(--orange); }
.cv-chips { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-content: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.cv-chip {
  border: 1px solid var(--ink-border); border-radius: 999px; padding: 6px 12px;
  font-size: 13px; line-height: 1.3; color: var(--on-ink); max-width: 100%; overflow-wrap: anywhere;
  transition: background-color .3s ease, border-color .3s ease, color .3s ease;
}
.cv-chip.is-hot { background: var(--orange); border-color: var(--orange); color: var(--ink); font-weight: 600; }
.cv-chip.is-placeholder { border-style: dashed; color: var(--on-ink-muted); }
.cv-chip.is-placeholder.is-hot { background: transparent; border-style: solid; border-color: var(--orange-light); color: var(--on-ink); font-weight: 400; }

/* 3: the AI employee's card comes out the other side, Bob -> BobAI */
.cv-scene-name { background: var(--ground-2); }
.cv-topband { position: absolute; left: 0; right: 0; top: 0; height: 72px; background: var(--ink); }
.cv-aicard {
  position: absolute; left: 50%; top: 52px; z-index: 1; width: 236px; margin-left: -118px;
  background: var(--ink); color: var(--on-ink); border: 1.5px solid var(--orange); border-radius: 12px; padding: 18px;
  display: flex; flex-direction: column; gap: 10px;
}
.cv-aicard-tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--orange-light); }
.cv-aicard-id { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cv-face { display: block; flex: none; border-radius: 50%; overflow: hidden; background: #2A2D32; }
.cv-face-sm { width: 44px; height: 44px; }
.cv-aicard-name { min-width: 0; font-stretch: 125%; font-weight: 800; font-size: 22px; line-height: 1.1; overflow-wrap: anywhere; }
.cv-name-ai { color: var(--orange-light); }
.cv-ai-role { font-size: 13px; color: var(--on-ink-2); }
.cv-morph {
  position: absolute; left: 16px; right: 16px; bottom: 22px;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  font-stretch: 125%; font-weight: 800; font-size: 26px; line-height: 1.15;
}
.cv-morph svg { width: 24px; height: 24px; flex: none; }
.cv-morph-from, .cv-morph-to { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-morph-from { color: var(--ink-border); }

/* 4: recording the introduction. The look of the call frame: the face's own
   photo, blurred and darkened so it reads as the room, behind the portrait. */
.cv-scene-voice { background: var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; overflow: hidden; }
.cv-room { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.cv-room img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  filter: blur(18px) brightness(.42) saturate(.9); transform: scale(1.15);
}
.cv-room::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 45%, rgba(18, 19, 21, 0) 0%, rgba(18, 19, 21, .45) 100%);
}
.cv-joining {
  position: absolute; left: 16px; top: 14px; z-index: 1; display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--on-ink);
}
.cv-joining .live-dot { width: 8px; height: 8px; }
.cv-face-wrap { position: relative; z-index: 1; display: block; border-radius: 50%; }
.cv-face-lg { box-shadow: 0 0 0 3px rgba(255, 255, 255, .14), 0 12px 32px rgba(0, 0, 0, .35); }
.cv-face-wrap::after {
  content: ''; position: absolute; inset: -8px; border-radius: 50%; border: 2px solid var(--orange-light); opacity: 0;
}
.cv-face-lg { width: 104px; height: 104px; }
.cv-bars { position: relative; z-index: 1; display: flex; align-items: center; gap: 4px; height: 40px; }
.cv-bars span { display: block; width: 5px; height: 40px; border-radius: 3px; background: var(--orange-light); transform: scaleY(var(--h, .5)); }
.cv-bars span:nth-child(1) { --h: .3; }
.cv-bars span:nth-child(2) { --h: .65; }
.cv-bars span:nth-child(3) { --h: .95; }
.cv-bars span:nth-child(4) { --h: .5; }
.cv-bars span:nth-child(5) { --h: .8; }
.cv-bars span:nth-child(6) { --h: .35; }
.cv-bars span:nth-child(7) { --h: .7; }
.cv-bars span:nth-child(8) { --h: .25; }
.cv-bars span:nth-child(9) { --h: .6; }

/* Stopped */
.cv-scene-error { background: var(--ground-2); display: flex; align-items: center; justify-content: center; color: var(--orange-dark); }
.cv-scene-error svg { width: 64px; height: 64px; }
.cv.is-error .cv-stage { height: 150px; }
.cv.is-error .cv-count { color: var(--orange-dark); }

/* ---------- Caption ---------- */

.cv-caption { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-height: 76px; }
.cv-title { margin: 0; font-size: 22px; font-weight: 700; line-height: 1.25; }
.cv-sub { margin: 0; font-size: 15px; color: var(--text-3); }
.cv-retry { margin-top: 12px; }

/* ---------- Motion (only when the visitor hasn't asked for less) ---------- */

@media (prefers-reduced-motion: no-preference) {
  .cv-tick.is-current::after {
    content: ''; position: absolute; top: 0; bottom: 0; left: -40%; width: 40%;
    background: rgba(255, 255, 255, .6); animation: cv-shimmer 1.2s linear infinite;
  }

  /* 1: the resume card drops in, is scanned, then goes down into the converter band */
  .cv-stage[data-scene="1"] .cv-doc { animation: cv-doc-in var(--cv-in) cubic-bezier(.2, .8, .2, 1) both; }
  .cv-stage[data-scene="1"] .cv-scanline { animation: cv-scan 1.5s ease-in-out .3s infinite alternate both; }
  .cv-stage[data-scene="1"] .cv-scene-scan.is-leaving .cv-doc { animation: cv-doc-leave var(--cv-leave) cubic-bezier(.55, 0, .75, .2) both; }
  .cv-scene-scan.is-leaving .cv-scanline { visibility: hidden; }

  /* 2: skills chips flow out of the converter */
  .cv-stage[data-scene="2"] .cv-chip { animation: cv-chip-in var(--cv-chip) cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * var(--cv-stagger)); }
  .cv-stage[data-scene="2"] .cv-arrow { animation: cv-nudge 1s ease-in-out infinite; }
  .cv-stage[data-scene="2"] .cv-mini-doc span { animation: cv-fade 1.2s ease-in-out infinite alternate; }
  .cv-stage[data-scene="2"] .cv-mini-doc span:nth-child(2) { animation-delay: .2s; }
  .cv-stage[data-scene="2"] .cv-mini-doc span:nth-child(3) { animation-delay: .4s; }
  .cv-stage[data-scene="2"] .cv-mini-doc span:nth-child(4) { animation-delay: .6s; }

  /* 3: the AI employee's card comes out of the band, then Bob -> BobAI */
  .cv-stage[data-scene="3"] .cv-aicard { animation: cv-card-out var(--cv-in) cubic-bezier(.2, .8, .2, 1) both; }
  .cv-stage[data-scene="3"] .cv-morph-from { animation: cv-rise .35s ease var(--cv-rise) both; }
  .cv-stage[data-scene="3"] .cv-morph svg { animation: cv-rise .35s ease calc(var(--cv-rise) * 2) both; }
  .cv-stage[data-scene="3"] .cv-morph-to { animation: cv-rise .35s ease calc(var(--cv-rise) * 3) both; }
  .cv-name-ai { display: inline-block; }

  /* 4: joining the call */
  .cv-stage[data-scene="4"] .cv-face-wrap { animation: cv-pop var(--cv-in) cubic-bezier(.2, .8, .2, 1) both; }
  .cv-stage[data-scene="4"] .cv-face-wrap::after { animation: cv-ring 1.8s ease-out .4s infinite; }
  .cv-stage[data-scene="4"] .cv-bars span { animation: cv-bar .8s ease-in-out infinite alternate; }
  .cv-bars span:nth-child(2n) { animation-duration: .65s; }
  .cv-bars span:nth-child(3n) { animation-duration: .95s; }
  .cv-bars span:nth-child(1) { animation-delay: -.1s; }
  .cv-bars span:nth-child(2) { animation-delay: -.5s; }
  .cv-bars span:nth-child(3) { animation-delay: -.2s; }
  .cv-bars span:nth-child(4) { animation-delay: -.7s; }
  .cv-bars span:nth-child(5) { animation-delay: -.3s; }
  .cv-bars span:nth-child(6) { animation-delay: -.6s; }
  .cv-bars span:nth-child(7) { animation-delay: -.15s; }
  .cv-bars span:nth-child(8) { animation-delay: -.45s; }
  .cv-bars span:nth-child(9) { animation-delay: -.25s; }
}
@media (prefers-reduced-motion: reduce) {
  .cv-tick { transition: none; }
}

/* Every entrance starts from a pose that is already on screen (no opacity 0),
   so a paused or slow first frame still shows the scene. */
@keyframes cv-shimmer { to { left: 100%; } }
@keyframes cv-doc-in { from { transform: translateY(-34px); } to { transform: none; } }
@keyframes cv-doc-leave { from { transform: none; } to { transform: translateY(215px) scale(.94); } }
@keyframes cv-scan { from { transform: translateY(0); } to { transform: translateY(var(--scan-to, 150px)); } }
@keyframes cv-chip-in { from { opacity: .55; transform: translateX(-16px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes cv-nudge { 0%, 100% { transform: translateX(-2px); } 50% { transform: translateX(4px); } }
@keyframes cv-fade { from { opacity: .45; } to { opacity: 1; } }
@keyframes cv-card-out { from { transform: translateY(-40px) scale(.97); } to { transform: none; } }
@keyframes cv-rise { from { opacity: .35; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes cv-pop { from { transform: scale(.86); } to { transform: none; } }
@keyframes cv-ring { from { opacity: .7; transform: scale(.95); } to { opacity: 0; transform: scale(1.35); } }
@keyframes cv-bar { from { transform: scaleY(.18); } to { transform: scaleY(1); } }

@media (max-width: 600px) {
  .cv-panel { padding: 18px; gap: 16px; border-radius: 18px; }
  .cv-stage { height: 260px; }
  .cv-scene-scan { --scan-to: 130px; }
  .cv-doc { top: 26px; width: 190px; margin-left: -95px; padding: 16px; }
  .cv-band { height: 60px; }
  .cv-scene-skills { padding: 0 14px; gap: 10px; }
  .cv-mini-doc { width: 40px; }
  .cv-arrow { width: 22px; height: 22px; }
  .cv-chip { font-size: 12px; padding: 5px 10px; }
  .cv-topband { height: 60px; }
  .cv-aicard { top: 40px; width: 220px; margin-left: -110px; padding: 16px; }
  .cv-morph { font-size: 20px; bottom: 18px; gap: 8px; }
  .cv-morph svg { width: 20px; height: 20px; }
  .cv-face-lg { width: 88px; height: 88px; }
  .cv-title { font-size: 20px; }
}

/* =========================================================
   Sections below the hero
   ========================================================= */

.page-home .section-eyebrow { margin-bottom: 16px; }

/* How it works: one line of three steps (Matt, 14 Oct 2026: the visitor has
   just been through it, so it stays short) */
.page-home .how { background: var(--paper); border-top: var(--border); border-bottom: var(--border); }
.page-home .how .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 48px; padding-top: 28px; padding-bottom: 28px; }
.page-home .how-title { margin: 0; }
.page-home .how-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 14px 40px; }
.page-home .how-steps li { display: flex; align-items: center; gap: 12px; font-size: 20px; font-weight: 700; line-height: 1.25; }
.page-home .how-num {
  display: inline-flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; border-radius: 50%;
  background: var(--ink); color: var(--on-ink); font-family: var(--font-mono); font-size: 14px; font-weight: 600;
}
.page-home .how-steps li:last-child .how-num { background: var(--orange); color: var(--ink); }

/* Onboarded like a person: an example staff card next to a day-one checklist */
.page-home .onboarded .h-section { margin-bottom: 40px; max-width: 980px; }
.page-home .onboarded .h-section:has(+ .onboarded-lede) { margin-bottom: 16px; }
.page-home .onboarded-lede { max-width: 760px; margin-bottom: 40px; color: var(--text-2); }
.page-home .onboarded-lede a { color: inherit; text-underline-offset: 3px; }
/* This section and pricing are centred on the page, like the questions (Matt, 15 Oct 2026). */
.page-home .onboarded .h-section,
.page-home .onboarded-lede { margin-inline: auto; text-align: center; }
/* Even lines for the headings; no word left alone on the paragraphs' last line. */
.page-home .onboarded .h-section,
.page-home .pricing-simple .h-section { text-wrap: balance; }
.page-home .onboarded-lede,
.page-home .pricing-line { text-wrap: pretty; }
.page-home .nowrap { white-space: nowrap; }
.page-home .staff {
  --staff-check: #3BD07E; /* the ticks only: green reads as "done" on the dark cards */
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; max-width: 900px;
  margin-inline: auto;
}
@media (max-width: 720px) { .page-home .staff { grid-template-columns: minmax(0, 1fr); } }
.page-home .staff-card,
.page-home .staff-list { background: var(--ink); color: var(--on-ink); border: 1px solid var(--ink-line); border-radius: 18px; min-width: 0; }
.page-home .staff-card {
  position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 30px 24px 22px;
  container-type: inline-size;
}
.page-home .staff-example {
  position: absolute; top: 14px; right: 14px; padding: 1px 8px; border: 1px solid var(--ink-border); border-radius: 999px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--on-ink-muted);
}
.page-home .staff-face {
  position: relative; display: grid; place-items: center; width: 80px; height: 80px; margin-bottom: 14px;
  border-radius: 50%; overflow: hidden; background: #4A2416;
}
.page-home .staff-initial { font-size: 30px; font-weight: 600; line-height: 1; color: var(--orange-light); }
.page-home .staff-face-img { position: absolute; inset: 0; }
.page-home .staff-name { font-size: 22px; font-weight: 700; line-height: 1.2; }
.page-home .staff-role { margin-top: 2px; color: var(--on-ink-2); }
.page-home .staff-meta {
  align-self: stretch; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--ink-line);
  font-family: var(--font-mono); font-size: 13px; color: var(--on-ink-2);
}
/* The line only breaks at the middle dot, never inside the date; on a card too
   narrow for one line, the date goes on its own line and the dot goes. */
.page-home .staff-nowrap { white-space: nowrap; }
@container (max-width: 295px) {
  .page-home .staff-meta .staff-dot { display: none; }
  .page-home .staff-meta .staff-nowrap { display: block; }
}
.page-home .staff-list { list-style: none; margin: 0; padding: 4px 22px; }
.page-home .staff-list li {
  display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 14px; align-items: start;
  padding: 13px 0; border-top: 1px solid var(--ink-line);
}
.page-home .staff-list li:first-child { border-top: none; }
.page-home .staff-list svg { grid-row: span 2; width: 20px; height: 20px; margin-top: 1px; color: var(--staff-check); }
.page-home .staff-k { font-weight: 700; line-height: 1.3; }
.page-home .staff-v { font-size: 14px; line-height: 1.45; color: var(--on-ink-2); overflow-wrap: anywhere; text-wrap: pretty; }
@media (forced-colors: active) { .page-home .staff { --staff-check: CanvasText; } }

/* Roles converted so far */
.page-home .counter { border-top: var(--border); }
.page-home .counter-inner {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 32px;
  padding-top: 48px; padding-bottom: 48px;
}
.page-home .counter-title {
  font-family: var(--font-mono); font-size: 13px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3);
}
.page-home .counter-num { font-stretch: 125%; font-weight: 800; font-size: clamp(48px, 8vw, 112px); line-height: 1; letter-spacing: -0.03em; }
.page-home .counter-note { flex-basis: 100%; font-size: 15px; color: var(--text-3); }

/* Pricing: one statement (the price for a role is on the hero card and the result) */
.page-home .pricing-simple { display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; }
.page-home .pricing-simple .h-section { max-width: 900px; }
.page-home .pricing-line { max-width: 760px; }
.page-home .availability {
  display: inline-flex; align-items: center; gap: 10px; max-width: 100%; padding: 10px 16px;
  border: var(--border); border-radius: 22px; font-size: 15px; font-weight: 500; background: var(--paper);
}
.page-home .availability .live-dot { flex: none; }
.page-home .availability a { font-weight: 700; }
.page-home .pricing-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 24px; margin-top: 4px; }
.page-home .pricing-actions .btn { min-height: 52px; }
.page-home .pricing-more { font-size: 16px; color: var(--text-3); }
.page-home .pricing-more a { color: var(--ink); font-weight: 600; }

@media (max-width: 640px) {
  .page-home .how .wrap { padding-top: 22px; padding-bottom: 22px; }
  .page-home .how-steps { flex-direction: column; gap: 12px; }
  .page-home .how-steps li { font-size: 18px; }
  .page-home .availability { font-size: 14px; }
  .page-home .pricing-actions, .page-home .pricing-actions .btn { width: 100%; }
}

/* The team (placeholders until Matt fills them in) */
.page-home .team-lede { margin-top: 20px; }
.page-home .team-grid {
  list-style: none; margin: 48px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 24px;
}
.page-home .team-card { background: var(--paper); border: var(--border); border-radius: 20px; padding: 24px; display: flex; flex-direction: column; gap: 8px; }
.page-home .team-card.is-placeholder { border-style: dashed; }
.page-home .team-photo {
  display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; margin-bottom: 8px;
  border: 1.5px dashed var(--line); border-radius: 14px; background: var(--ground-2);
  font-family: var(--font-mono); font-size: 14px; color: var(--muted);
}
.page-home .team-name { font-size: 20px; font-weight: 700; }
.page-home .team-role { font-family: var(--font-mono); font-size: 13px; letter-spacing: .06em; color: var(--orange-dark); }
.page-home .team-bio { color: var(--text-3); }

/* Questions */
.page-home .faq .h-section { margin-bottom: 40px; }
.page-home .faq-list { border-top: var(--border); }
.page-home .faq-item { border-bottom: var(--border); }
.page-home .faq-item summary {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 44px;
  padding: 22px 0; list-style: none; cursor: pointer;
  font-size: 20px; font-weight: 700; line-height: 1.3;
}
.page-home .faq-item summary::-webkit-details-marker { display: none; }
.page-home .faq-item summary::after {
  content: ''; flex: none; width: 11px; height: 11px; margin-right: 4px;
  border: solid var(--ink); border-width: 0 2.5px 2.5px 0; transform: translateY(-3px) rotate(45deg);
  transition: transform .2s ease;
}
.page-home .faq-item[open] summary::after { transform: translateY(3px) rotate(225deg); }
.page-home .faq-item summary:hover { color: var(--orange-dark); }
.page-home .faq-answer { padding: 0 0 24px; max-width: 760px; color: var(--text-3); }
.page-home .faq-answer p + p { margin-top: 12px; }
@media (prefers-reduced-motion: reduce) { .page-home .faq-item summary::after { transition: none; } }
@media (max-width: 600px) { .page-home .faq-item summary { font-size: 18px; padding: 18px 0; } }

/* Closing call to action */
.page-home .closing-inner { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 32px; }
.page-home .closing-title { font-size: clamp(44px, 7vw, 104px); line-height: .95; letter-spacing: -0.03em; max-width: 820px; }
.page-home .closing-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.page-home .closing-outline { border: 2px solid var(--ink); background: transparent; color: var(--ink); }
.page-home .closing-outline:hover { background: rgba(18, 19, 21, .08); color: var(--ink); }
.page-home .closing .btn:focus-visible { box-shadow: 0 0 0 3px var(--paper), 0 0 0 6px var(--ink); }
@media (max-width: 600px) {
  .page-home .closing-actions { width: 100%; }
  .page-home .closing-actions .btn { flex: 1 1 100%; }
}