/* Landing page — the only surface with fluid display type and an entrance
   animation. Everything else is the shared system in app.css.

   The hero used to lean on Archivo's variable-width axis (`font-stretch: 108%`);
   with the system stack that is a no-op, so the weight and tracking carry it. */

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 32px); }

section { padding: clamp(56px, 9vw, 104px) 0; }

/* ── Hero ─────────────────────────────────────────────────────────────────── */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(32px, 6vw, 72px);
  align-items: center;
}
.hero h1 {
  font-size: clamp(2.5rem, 6.2vw, 4.3rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.032em;
  margin: 0 0 20px;
}
.hero h1 .turn { color: var(--primary); }
.hero .lede {
  font-size: clamp(1.02rem, 1.6vw, 1.14rem);
  color: var(--muted);
  line-height: 1.65;
  max-width: 54ch;
  margin: 0 0 30px;
  text-wrap: pretty;
}
.hero .cta-row { display: flex; gap: var(--sp-3); flex-wrap: wrap; }

@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.hero h1       { animation: rise 600ms cubic-bezier(0.16, 1, 0.3, 1) both; }
.hero .lede    { animation: rise 600ms 90ms cubic-bezier(0.16, 1, 0.3, 1) both; }
.hero .cta-row { animation: rise 600ms 180ms cubic-bezier(0.16, 1, 0.3, 1) both; }
.panel-stack   { animation: rise 700ms 260ms cubic-bezier(0.16, 1, 0.3, 1) both; }

/* Hero imagery: the product, drawn — feedback panel + job matches overlap. */
/* Two cards staggered diagonally: feedback top-left, matches bottom-right. The
   min-height must clear both stacked (293 + 245) or the lower card's row titles
   vanish behind the upper one. */
.panel-stack { position: relative; min-height: 560px; }
.mock {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-5);
}
.mock h4 {
  margin: 0 0 14px;
  font-size: var(--t-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--faint);
}
.mock-feedback { position: relative; z-index: 2; width: min(300px, 86%); }
.ring-row { display: flex; align-items: center; gap: var(--sp-5); margin-bottom: var(--sp-4); }
.ring-num { font-size: 34px; font-weight: 700; letter-spacing: -0.02em; }
.ring-num small { font-size: var(--t-sm); font-weight: 500; color: var(--muted); }
.ring-label { font-size: 13px; color: var(--muted); line-height: 1.4; }
.bar { height: 6px; border-radius: var(--r-full); background: var(--slate-100); margin: 7px 0 var(--sp-3); overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: var(--r-full); background: var(--teal-500); }
.bar-label { font-size: var(--t-xs); color: var(--muted); display: flex; justify-content: space-between; }

.mock-jobs { position: absolute; right: 0; bottom: 0; z-index: 1; width: min(290px, 84%); }
.job-row {
  display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3);
  padding: 10px 0; border-top: 1px solid var(--border-hairline); font-size: 13.5px;
}
.job-row:first-of-type { border-top: 0; padding-top: 0; }
.job-row .jr-t { color: var(--ink); font-weight: 600; }
.job-row .jr-s { color: var(--faint); font-size: var(--t-xs); display: block; }
.job-score { font-weight: 700; color: var(--primary-text); }

/* ── Two seats ────────────────────────────────────────────────────────────── */

.seats-head { max-width: 46ch; margin-bottom: clamp(28px, 4vw, 44px); }
.seats-head h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); font-weight: 700; letter-spacing: -0.025em; margin: 0 0 10px; }
.seats-head p { color: var(--muted); margin: 0; }
.seats { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-5); }
.seat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  box-shadow: var(--shadow-sm);
  padding: clamp(24px, 3.5vw, 36px);
  display: flex; flex-direction: column;
}
.seat h3 { margin: 0 0 6px; font-size: 1.3rem; font-weight: 700; letter-spacing: -0.02em; }
.seat .seat-for { color: var(--faint); font-size: 13px; margin: 0 0 var(--sp-5); }
.seat ul { list-style: none; margin: 0 0 var(--sp-6); padding: 0; display: grid; gap: 10px; }
.seat li { display: flex; gap: 10px; font-size: var(--t-sm); color: var(--muted); line-height: 1.55; }
.seat li .ico { margin-top: 3px; }
.seat .btn { margin-top: auto; align-self: start; }

/* ── Pipelines — real ordered flows, so the numbers carry information. ─────── */

.flow { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 64px); }
.flow.rev { direction: rtl; }
.flow.rev > * { direction: ltr; }
.flow-side h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 700; letter-spacing: -0.025em; margin: 0 0 10px; }
.flow-side p { color: var(--muted); margin: 0; text-wrap: pretty; }
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.steps li {
  counter-increment: step;
  display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--sp-4);
  padding: var(--sp-5) 0;
}
.steps li + li { border-top: 1px solid var(--border); }
.steps li::before {
  content: counter(step, decimal-leading-zero);
  font-size: 13px; font-weight: 700; color: var(--primary-text);
  font-variant-numeric: tabular-nums;
  background: var(--teal-50);
  border: 1px solid var(--teal-200);
  border-radius: var(--r-full);
  width: 34px; height: 34px;
  display: grid; place-items: center;
  margin-top: 2px;
}
.steps b { display: block; font-weight: 600; font-size: 15.5px; margin-bottom: 3px; }
.steps span { color: var(--muted); font-size: var(--t-sm); line-height: 1.6; }

/* ── Bridge band — the app's one dark surface, shared with the interview stage. */

.bridge { background: var(--grad-stage); }
.bridge .wrap { text-align: center; }
.bridge p.big {
  font-size: clamp(1.5rem, 3.6vw, 2.5rem);
  font-weight: 700; letter-spacing: -0.025em; line-height: 1.2;
  color: #fff;
  max-width: 26ch; margin: 0 auto 14px;
}
.bridge p.small { color: var(--slate-300); max-width: 52ch; margin: 0 auto; font-size: 15px; }
.bridge .dot {
  display: inline-block; width: 10px; height: 10px;
  border-radius: var(--r-full); background: var(--teal-400); margin: 0 var(--sp-1) 0.2em;
}

/* ── Footer ───────────────────────────────────────────────────────────────── */

footer { border-top: 1px solid var(--border); padding: 28px 0; }
footer .wrap { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
footer .f-brand { color: var(--faint); font-size: 13.5px; }
footer nav { display: flex; gap: var(--sp-5); font-size: 13.5px; }

@media (max-width: 880px) {
  .hero { grid-template-columns: 1fr; }
  .panel-stack { min-height: 0; display: grid; gap: 14px; }
  .mock-feedback { width: 100%; }
  .mock-jobs { position: static; width: 100%; }
  .seats { grid-template-columns: 1fr; }
  .flow, .flow.rev { grid-template-columns: 1fr; direction: ltr; }
}

/* ── Trust bar ────────────────────────────────────────────────────────────────
   Sits directly under the hero. A named institution whose hiring we actually run
   is the strongest claim on the page, so it gets the first position after the
   fold and nothing else competes with it. */

.trust { padding: clamp(28px, 4vw, 44px) 0; }
/* ⚠️ No "Trusted by" eyebrow, deliberately. Above a single logo it reads as a
   roster with one entry; the statement carries it instead. Add one back only
   when there are enough marks to make a row. */
.trust__row { display: flex; align-items: center; gap: clamp(16px, 3vw, 28px); flex-wrap: wrap; }
/* The mark is a square PNG on an opaque white ground. The border+radius makes
   that read as a deliberate chip rather than an untrimmed image. */
.trust__logo {
  width: 64px; height: 64px; object-fit: contain; flex: none;
  border: 1px solid var(--border); border-radius: var(--r-lg);
  background: #fff; padding: 6px;
}
.trust__line { margin: 0; color: var(--muted); max-width: 60ch; font-size: 15px; line-height: 1.6; }
.trust__line b { color: var(--ink); font-weight: 650; }

/* ── Demo slots ───────────────────────────────────────────────────────────────
   ⚠️ The placeholder is styled to look FINISHED, not broken. A dashed grey box
   reads as a bug to anyone who opens the page before the footage exists; this
   reads as "a video goes here", which is what it is. */

.demo__head { max-width: 46ch; margin-bottom: var(--sp-5); }
.demo__head h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); font-weight: 700; letter-spacing: -0.025em; margin: 0 0 10px; }
.demo__head p { color: var(--muted); margin: 0; }

.video {
  margin: 0;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-2xl);
  overflow: hidden;
  background: var(--slate-900);
  box-shadow: var(--shadow-lg);
}
/* ⚠️ `contain`, never `cover`. This is a SCREEN RECORDING, not decorative
   footage: `cover` fills the frame by cropping whatever does not fit, and the
   first thing off the edge of a UI capture is the text at the margins. Letting
   it letterbox against the dark container is the only version where the
   product being demonstrated is legible. */
.video video { width: 100%; height: 100%; display: block; object-fit: contain; }
.video--empty { display: grid; place-items: center; background: var(--surface-deep); box-shadow: none; border: 1px solid var(--border); }
.video__ph { text-align: center; padding: var(--sp-6); display: grid; gap: 6px; justify-items: center; }
.video__ph .ico { color: var(--primary); }
.video__pht { margin: 4px 0 0; font-weight: 650; font-size: 16px; }
.video__phs { margin: 0; color: var(--muted); font-size: var(--t-sm); max-width: 44ch; }

/* ── Hiring (marketing only) ──────────────────────────────────────────────────
   No signup path exists for HR: every customer is provisioned their own tenant
   at <company>.careerbridge.tech. See the template comment. */

.hiring__head { max-width: 62ch; margin-bottom: var(--sp-6); }
.hiring__head h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); font-weight: 700; letter-spacing: -0.025em; margin: 8px 0 12px; }
.hiring__lede { color: var(--muted); margin: 0; font-size: clamp(1rem, 1.5vw, 1.08rem); line-height: 1.65; text-wrap: pretty; }

.hiring__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
}
.hiring__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.hiring__list li { display: flex; gap: 10px; font-size: var(--t-sm); color: var(--muted); line-height: 1.55; }
.hiring__list li .ico { margin-top: 3px; flex: none; }

.hiring__cta { margin-top: var(--sp-6); display: flex; gap: var(--sp-3); flex-wrap: wrap; align-items: center; }
.hiring__note { margin: 0; color: var(--faint); font-size: 13.5px; max-width: 52ch; line-height: 1.55; }
.hiring__note code {
  font-family: var(--font-mono, ui-monospace, monospace); font-size: 12.5px;
  background: var(--teal-50); color: var(--teal-700); padding: 1px 5px; border-radius: var(--r-sm);
}

@media (max-width: 880px) {
  .hiring__grid { grid-template-columns: 1fr; }
}

/* ── HR mock panels ───────────────────────────────────────────────────────────
   The hiring product DRAWN, reusing the hero's `.mock` shell. Not screenshots:
   a real HR screen shows candidate names beside CV scores and rejection
   decisions, which is a privacy problem to publish even when the rows are
   synthetic, because the names read as real people. Drawing it also keeps the
   panel sharp at any size and stops it going stale silently when the UI moves. */

.hr-stack { display: grid; gap: var(--sp-4); }
.mock-search .q {
  margin: 0 0 12px; font-size: 14.5px; color: var(--ink);
  background: var(--canvas, var(--slate-50)); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 9px 12px;
}
.mock-search .q-label {
  margin: 0 0 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--faint);
}
.mock-search .chips { margin: 0 0 14px; display: flex; gap: 6px; flex-wrap: wrap; }
.mock-search .chip {
  font-size: 12px; padding: 3px 9px; border-radius: var(--r-full);
  background: var(--teal-50); color: var(--teal-700);
  box-shadow: inset 0 0 0 1px var(--teal-200);
}
.cand-row {
  display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3);
  padding: 9px 0; border-top: 1px solid var(--border-hairline); font-size: 13.5px;
}
.cand-row:first-of-type { border-top: 0; padding-top: 0; }
.cand-row .cd-t { color: var(--ink); font-weight: 600; }
.cand-row .cd-s { color: var(--faint); font-size: var(--t-xs); display: block; }
.cand-row .cd-score { font-weight: 700; color: var(--primary-text); }
/* Search results carry a CV LINK, not a score: the search spans every
   candidate you hold, so most hits have no score for any one job. */
.cand-row .cd-cv {
  font-size: 12.5px; font-weight: 600; color: var(--primary-text);
  border: 1px solid var(--teal-200); background: var(--teal-50);
  border-radius: var(--r-md); padding: 2px 9px; white-space: nowrap;
}

/* ── Meet the interviewer ───────────────────────────────────────────────────
   A live render of the avatar that actually runs an interview. Same two-column
   proportions as .flow so the page keeps one rhythm, but reversed weighting:
   the stage is the point, the copy supports it.

   ⚠️ The stage reserves its own height before anything loads. The avatar
   arrives seconds after a click and several sections sit below it, so without a
   reserved box the whole page would jump under the reader's cursor. */

.meet {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
.meet__side h2 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700; letter-spacing: -0.025em; margin: 0 0 10px;
  text-wrap: balance;
}
.meet__side p { color: var(--muted); margin: 0 0 var(--sp-5); text-wrap: pretty; }

.meet__stage {
  position: relative;
  margin: 0;
  min-height: 420px;
  border-radius: var(--r-2xl);
  overflow: hidden;
  background: var(--surface-deep);
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
}
/* Once a head is rendering, the flat placeholder ground would read as a seam. */
.meet__stage.is-live { background: var(--slate-900); border-color: transparent; box-shadow: var(--shadow-lg); }

.meet__canvas { width: 100%; height: 100%; min-height: 420px; }
.meet__canvas canvas { display: block; }

/* The placeholder shown until the model arrives. Not a control: he loads
   himself when the section nears the viewport, so there is nothing to click. */
.meet__facade {
  position: absolute; inset: 0;
  display: grid; gap: 6px; place-content: center; justify-items: center;
  padding: var(--sp-6);
  text-align: center;
}
/* ⚠️ A class that sets `display` OUTRANKS the user-agent's `[hidden] { display:
   none }`, so `facade.hidden = true` left this placeholder painted straight
   over the loaded avatar — text and icon sitting on his face. Any rule in this
   file that sets `display` needs its own `[hidden]` companion. */
.meet__facade[hidden] { display: none; }
.meet__facade .ico { color: var(--primary); }
.meet__ft { font-weight: 650; font-size: 16px; }
.meet__fs { color: var(--muted); font-size: var(--t-sm); max-width: 32ch; }

.meet__status {
  position: absolute; inset-inline: 0; bottom: var(--sp-4);
  margin: 0; text-align: center;
  color: var(--muted); font-size: var(--t-sm);
}
.meet__stage.is-live .meet__status { color: var(--slate-200); }

/* A 9 MB download deserves a sign that something is happening. */
.meet__stage.is-loading::after {
  content: "";
  position: absolute; inset-inline: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--primary), transparent);
  animation: meet-scan 1.1s linear infinite;
}
@keyframes meet-scan { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

@media (prefers-reduced-motion: reduce) {
  .meet__stage.is-loading::after { animation: none; opacity: 0.6; }
}

@media (max-width: 860px) {
  .meet { grid-template-columns: minmax(0, 1fr); }
  .meet__stage, .meet__canvas { min-height: 340px; }
}