/* ==========================================================================
   Crew — product page
   Brand ground (Polymath, Talkpush tints) carrying product screens rendered
   in Crew's own UI language (white cards, mint chips, thin grey rules).
   ========================================================================== */

@font-face {
  font-family: "PolymathText";
  src: url("../assets/fonts/PolymathText-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "PolymathText";
  src: url("../assets/fonts/PolymathText-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* brand tints */
  --c1: #ffc875;  /* amber   */
  --c2: #bbcaf0;  /* blue    */
  --c3: #f1c1f3;  /* pink    */
  --c4: #f2b457;  /* gold    */
  --c5: #b6d9c0;  /* sage    */
  --c6: #c0e5cb;  /* mint    */

  --ink:   #14131a;
  --ink-2: #43414f;
  --ink-3: #6f6c80;
  --line:  #e4e1d8;
  --paper: #fffdf8;

  /* crew product ui */
  --ui-bg:     #ffffff;
  --ui-shell:  #fbfbfa;
  --ui-line:   #e9e8e4;
  --ui-line-2: #f2f1ee;
  --ui-ink:    #1b1a18;
  --ui-ink-2:  #57544d;
  --ui-ink-3:  #8d8980;
  --ui-green:  #0f6b43;
  --ui-mint:   #e8f3ed;
  --ui-amber:  #fdf2dd;
  --ui-amber-ink: #8a5a06;
  --ui-red:    #fcecec;
  --ui-red-ink:#9a2b2b;
  --ui-blue:   #eaf0fb;
  --ui-blue-ink:#1f4f9c;

  --font: "PolymathText", "Helvetica Neue", Arial, sans-serif;
  --ui-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --h1: clamp(2rem, 1.35rem + 2.4vw, 3.25rem);
  --h2: clamp(1.7rem, 1.2rem + 1.9vw, 2.6rem);
  --h3: clamp(1.15rem, 1rem + 0.7vw, 1.5rem);
  --body: clamp(1rem, 0.96rem + 0.2vw, 1.1rem);

  --gut: clamp(1.15rem, 4vw, 3rem);
  --maxw: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 500;
  font-size: var(--body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

.cx-wrap { width: min(100% - (var(--gut) * 2), var(--maxw)); margin-inline: auto; }
.cx-wrap--narrow { width: min(100% - (var(--gut) * 2), 820px); margin-inline: auto; }

/* ---------- top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,253,248,0.88);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.topbar__in {
  display: flex; align-items: center; gap: 1.5rem;
  min-height: 64px;
}
.topbar__logo { height: 22px; width: auto; }
.topbar__mark {
  font-weight: 700; letter-spacing: -0.02em; font-size: 1.05rem;
  padding-left: 0.9rem; margin-left: 0.15rem;
  border-left: 1px solid var(--line);
}
.topbar__nav { display: flex; gap: 1.4rem; margin-left: auto; font-size: 0.92rem; }
.topbar__nav a { text-decoration: none; color: var(--ink-2); }
.topbar__nav a:hover { color: var(--ink); }
@media (max-width: 860px) { .topbar__nav { display: none; } }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.78rem 1.3rem; border-radius: 999px;
  font-family: var(--font); font-weight: 700; font-size: 0.95rem;
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn--solid { background: var(--ink); color: var(--paper); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--sm { padding: 0.55rem 1rem; font-size: 0.88rem; }

/* ---------- sections ---------- */
section { position: relative; }
.sec { padding-block: clamp(3.5rem, 8vw, 7rem); }
.sec--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }

.eyebrow {
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-3); margin: 0 0 0.9rem;
}
h1, h2, h3 { margin: 0; letter-spacing: -0.025em; line-height: 1.1; font-weight: 700; }
h1 { font-size: var(--h1); }
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); line-height: 1.25; }
.lede { font-size: clamp(1.05rem, 1rem + 0.45vw, 1.3rem); color: var(--ink-2); line-height: 1.5; margin: 1.1rem 0 0; max-width: 56ch; }
p { margin: 1rem 0 0; }

/* ---------- hero ---------- */
.hero { padding-top: clamp(3rem, 6vw, 5rem); padding-bottom: clamp(2rem, 4vw, 3rem); position: relative; overflow: hidden; }
.hero__wash {
  position: absolute; inset: -30% -10% auto -10%; height: 110vh; z-index: 0;
  pointer-events: none; filter: blur(90px); opacity: 0.75;
  background:
    radial-gradient(28% 32% at 14% 20%, rgba(187,202,240,0.95), transparent 70%),
    radial-gradient(24% 28% at 86% 10%, rgba(241,193,243,0.8), transparent 72%),
    radial-gradient(30% 34% at 64% 62%, rgba(192,229,203,0.8), transparent 72%),
    radial-gradient(20% 24% at 30% 78%, rgba(255,200,117,0.6), transparent 74%);
}
.hero > *:not(.hero__wash) { position: relative; z-index: 1; }
.hero__grid { display: grid; gap: clamp(1.8rem, 3vw, 3rem); align-items: center; }
@media (min-width: 980px) { .hero__grid { grid-template-columns: 0.92fr 1.08fr; } }
.hero__claim { max-width: 20ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.7rem; }
.hero__facts { display: flex; flex-wrap: wrap; gap: 1.6rem 2.4rem; margin-top: 2.2rem; }
.hero__fact b { display: block; font-size: 1.5rem; letter-spacing: -0.03em; }
.hero__fact span { font-size: 0.86rem; color: var(--ink-3); }

/* ---------- the film, in the hero ---------- */
/* Same object as the product screens it replaced: thin rule, deep soft shadow,
   matching radius. Black inside so letterboxing never shows, and the poster is
   a dark frame because the page ground is the same cream as the film's. */
.herofilm {
  border-radius: 14px;
  overflow: hidden;
  background: #14131a;
  border: 1px solid rgba(20,19,26,0.12);
  box-shadow: 0 1px 2px rgba(20,19,26,0.04), 0 18px 46px -22px rgba(20,19,26,0.3);
  line-height: 0;
}
.herofilm__video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; }

/* ---------- logo strip ---------- */
.logos { border-block: 1px solid var(--line); padding-block: 1.8rem; }
.logos__label { font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); text-align: center; margin: 0 0 1.3rem; }
/* Several of these marks are white-filled SVGs, so brightness(0) is what makes
   them visible on the light ground. Same treatment as the live /crew page. */
.logos__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.5rem clamp(1.8rem, 3.6vw, 3.4rem); max-width: 880px; margin-inline: auto; }
.logos__row img { height: clamp(21px, 2.4vw, 28px); width: auto; filter: brightness(0); opacity: 0.42; transition: opacity 0.25s ease; }
.logos__row img:hover { opacity: 0.85; }
.logos__row img.is-tall { height: clamp(28px, 3.2vw, 38px); }
@media (max-width: 640px) { .logos__row { gap: 1.2rem 1.6rem; } .logos__row img { height: 19px; } .logos__row img.is-tall { height: 26px; } }

/* ---------- module wall ---------- */
.wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 0.6rem; margin-top: 2.4rem; }
.wall__item {
  border: 1px solid var(--line); border-radius: 12px; padding: 0.95rem 1rem;
  background: rgba(255,255,255,0.6); font-size: 0.92rem; line-height: 1.35;
}
.wall__item b { display: block; font-size: 0.95rem; }
.wall__item span { color: var(--ink-3); font-size: 0.82rem; }
.wall__item--on { background: var(--c6); border-color: transparent; }

/* ---------- feature blocks ---------- */
.feat { padding-block: clamp(3rem, 7vw, 6rem); }
.feat + .feat { border-top: 1px solid var(--line); }
/* min-width:0 so a product screen with a scrolling flow chart cannot blow the column out */
.feat__grid { display: grid; gap: clamp(1.8rem, 4vw, 3.4rem); align-items: center; }
.feat__grid > * { min-width: 0; }
@media (min-width: 960px) {
  .feat__grid { grid-template-columns: 0.85fr 1.15fr; }
  .feat__grid--flip .feat__copy { order: 2; }
}
.feat__tag {
  display: inline-block; padding: 0.3rem 0.7rem; border-radius: 999px;
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  margin-bottom: 1rem;
}
.t-amber { background: var(--c1); } .t-blue { background: var(--c2); }
.t-pink  { background: var(--c3); } .t-gold { background: var(--c4); }
.t-sage  { background: var(--c5); } .t-mint { background: var(--c6); }

.feat__list { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: 0.6rem; }
.feat__list li { position: relative; padding-left: 1.45rem; font-size: 0.97rem; color: var(--ink-2); }
.feat__list li::before {
  content: ""; position: absolute; left: 0; top: 0.54em;
  width: 7px; height: 7px; border-radius: 2px; background: var(--ink);
}

/* ---------- the story: Clara and the crew ---------- */
/* The v2 Clara block was an ordinary feature grid. Here it is a full width
   story: a roster, then a sticky office floor with ten scenes scrolling past
   it. scripts/main.js pans .office__plan onto the room the active scene names,
   which is why the plan is positioned (so a room's offsetLeft is measured
   against the plan and not against the section). Every room keeps its activity
   dots running even while dimmed, so the floor never looks switched off. */
.story { padding-block: clamp(3rem, 7vw, 6rem); border-top: 1px solid var(--line); }
.story__note { font-size: 0.88rem; color: var(--ink-3); margin-top: 1.5rem; max-width: 52ch; }

/* the roster */
.crew { display: grid; grid-template-columns: repeat(auto-fill, minmax(206px, 1fr)); gap: 0.6rem; margin-top: 2.4rem; }
/* eight agents, so pin four across and get two even rows rather than five and three */
@media (min-width: 900px) { .crew { grid-template-columns: repeat(4, 1fr); } }
.crew__card { border: 1px solid var(--line); border-radius: 12px; padding: 1rem; background: rgba(255,255,255,0.6); }
.crew__card--lead { background: var(--c2); border-color: transparent; }
.crew__av {
  width: 48px; height: 48px; border-radius: 50%; overflow: hidden;
  display: block; background: var(--paper); margin-bottom: 0.75rem;
}
.crew__av img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.crew__card b { display: block; font-size: 1rem; letter-spacing: -0.015em; }
.crew__spec {
  display: block; margin-top: 0.25rem; font-family: var(--mono);
  font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3);
}
.crew__card p { margin: 0.6rem 0 0; font-size: 0.86rem; color: var(--ink-2); line-height: 1.45; }

/* the floor and the scenes beside it */
.story__floor { margin-top: clamp(2.5rem, 5vw, 4rem); }
/* The scenes scroll inside .story__scenes, not down the page. The grid row is a
   fixed height, so the whole section costs the page one screen however long the
   story is, and a reader who does not want it scrolls straight past. */
.story__grid { display: grid; gap: clamp(1.5rem, 4vw, 3.4rem); align-items: stretch; }
@media (min-width: 1000px) { .story__grid { height: var(--storyFrame); } }
.story { --storyFrame: min(84vh, 760px); }
.story__grid > * { min-width: 0; }
@media (min-width: 1000px) { .story__grid { grid-template-columns: 1.02fr 0.98fr; } }

.story__stage { position: relative; z-index: 4; align-self: start; }
/* the sticky offset this used to need is gone now that the column itself is the
   fixed height frame; leaving it in pushed the office card down inside the row */
@media (min-width: 1000px) { .story__stage { top: auto; align-self: center; } }

/* the office, in the same shell as the product screens */
.office {
  background: var(--ui-bg);
  border: 1px solid var(--ui-line);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(20,19,26,0.04), 0 18px 46px -22px rgba(20,19,26,0.26);
  overflow: hidden;
  font-family: var(--ui-font); color: var(--ui-ink); font-size: 13px; line-height: 1.45;
}
.office__bar { display: flex; align-items: center; gap: 0.6rem; padding: 9px 13px; border-bottom: 1px solid var(--ui-line); }
.office__bar::before {
  content: ""; width: 38px; height: 8px; border-radius: 99px; flex: none;
  background: linear-gradient(90deg, #c0e5cb, #bbcaf0, #f1c1f3);
}
.office__title { font-weight: 600; font-size: 12px; letter-spacing: -0.01em; }
.office__crumb { color: var(--ui-ink-3); font-size: 11px; margin-left: auto; text-align: right; }

.office__view { overflow: hidden; background: var(--ui-shell); padding: 14px; }
.office__plan {
  position: relative;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  /* without this a label like "Scheduling and offers" sets the track width and
     the whole office card grows wider than the viewport on a phone */
  transform-origin: center center; will-change: transform;
  transition: transform 0.75s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.office__room {
  position: relative; border: 1px solid var(--ui-line); background: #fff;
  border-radius: 10px; padding: 10px;
  transition: opacity 0.45s ease, box-shadow 0.45s ease, border-color 0.45s ease;
}
.office__room--door { background: var(--ui-line-2); }
/* Clara's room runs the full width, so its contents are centred rather than
   pinned left. The camera crops an eighth off each side when it leans in, and
   her face is the one thing in here that has to survive that. */
.office__room--clara {
  grid-column: 1 / -1; background: var(--ui-blue); border-color: transparent;
  display: grid; grid-template-columns: auto auto auto; justify-content: center;
  align-items: center; gap: 0 11px;
}
.office__room--clara .office__dots { margin-left: 16px; }
.office__face { width: 32px; height: 32px; grid-row: 1 / 3; }
.office__room--clara b { grid-column: 2; align-self: end; margin-top: 0; }
.office__room--clara .office__job { grid-column: 2; align-self: start; }
.office__room--clara .office__dots { grid-column: 3; grid-row: 1 / 3; margin-top: 0; }

.office__av {
  width: 30px; height: 30px; border-radius: 50%; object-fit: cover; display: block;
  background: var(--ui-line-2);
  transition: box-shadow 0.45s ease;
}
.office__ini {
  width: 28px; height: 28px; border-radius: 8px; background: #14131a; color: #c0e5cb;
  display: grid; place-items: center; font-size: 11px; font-weight: 700;
}
.office__ini--open { background: transparent; color: var(--ui-ink-3); border: 1px dashed var(--ui-line); }
.office__room b { display: block; font-size: 12px; margin-top: 8px; letter-spacing: -0.01em; }
.office__job { display: block; overflow-wrap: break-word; font-size: 10px; color: var(--ui-ink-3); line-height: 1.3; margin-top: 2px; }

/* the floor is never idle, even in the rooms the camera is not looking at */
.office__dots { display: flex; gap: 3px; margin-top: 8px; }
.office__dots i { width: 5px; height: 5px; border-radius: 99px; background: var(--ui-green); animation: ofdot 2.4s ease-in-out infinite; }
.office__dots i:nth-child(2) { animation-delay: 0.45s; }
.office__dots i:nth-child(3) { animation-delay: 0.9s; }
.office__dots i:nth-child(4) { animation-delay: 1.35s; }
.office__dots i:nth-child(5) { animation-delay: 1.8s; }
@keyframes ofdot { 0%, 100% { opacity: 0.18; } 50% { opacity: 1; } }

/* is-live is the room the camera is on, is-lit the ones working alongside it,
   is-flag the one a scene says is backing up. All three have to read at rest,
   because the wide-view scenes do not dim anything. */
.office__room.is-live { border-color: var(--ui-green); box-shadow: 0 0 0 2px rgba(15,107,67,0.14); }
.office__room.is-live .office__av { box-shadow: 0 0 0 2px var(--ui-green); }
.office__room.is-live .office__ini { background: var(--ui-green); color: #fff; }
.office__room.is-lit { border-color: #8fb8ee; background: #f4f8fe; }
.office__room.is-flag { border-color: #e0a53a; background: var(--ui-amber); }
.office__room.is-flag .office__dots i { background: #d08c17; }
.office__plan > * { min-width: 0; }
.office__plan.is-zoomed .office__room:not(.is-live):not(.is-lit):not(.is-flag) { opacity: 0.4; }

/* what the active agent just produced */
.office__panel { border-top: 1px solid var(--ui-line); padding: 13px; min-height: 116px; }
.opan { display: none; }
.opan.is-on { display: block; animation: opan-in 0.45s ease both; }
@keyframes opan-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.opan__t { display: block; font-size: 12px; margin-bottom: 3px; }
.opan .rowline { font-size: 11.5px; }

/* the scenes */
.story__scenes {
  display: block; position: relative;
  overflow-y: auto; overflow-x: hidden;
  scrollbar-width: thin; scroll-behavior: smooth;
  padding-right: 10px;
}
.story__scenes:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
/* a way out that does not depend on finding the edge of the column */
.story__skip {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 1rem;
  padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line);
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-3); text-decoration: none;
}
.story__skip:hover { color: var(--ink); border-color: var(--ink); }
/* sits under the scene column, where a reader who has had enough is looking */
.story__skipwrap { grid-column: 1 / -1; margin: 0.2rem 0 0; text-align: right; }
@media (min-width: 1000px) { .story__skipwrap { margin-top: -0.4rem; } }
.scene { padding-block: clamp(2rem, 6vh, 3.4rem); opacity: 0.34; transition: opacity 0.45s ease; }
.scene.is-on { opacity: 1; }
@media (min-width: 1000px) { .scene { min-height: 62%; display: flex; flex-direction: column; justify-content: center; } }
.story__scenes > .scene:first-child { padding-top: 22%; }
.story__scenes > .scene:last-child { padding-bottom: 34%; }
.scene__n { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); }
.scene h3 { margin-top: 0.6rem; font-size: clamp(1.3rem, 1.05rem + 0.9vw, 1.9rem); max-width: 24ch; }
.scene p { font-size: 0.97rem; color: var(--ink-2); line-height: 1.6; max-width: 52ch; }
.scene .scene__beat { color: var(--ink); font-weight: 700; }

/* a spoken line, colour coded by who is talking */
.line {
  display: grid; grid-template-columns: 116px 1fr; gap: 0.9rem; align-items: start;
  margin-top: 0.9rem; padding-left: 0.9rem; border-left: 2px solid var(--line); max-width: 54ch;
}
.line b {
  font-family: var(--mono); font-size: 0.63rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-3); padding-top: 0.35em; line-height: 1.4;
}
.scene .line span { font-size: 1rem; color: var(--ink); line-height: 1.5; }
.line--clara { border-left-color: var(--c2); }
.line--agent { border-left-color: var(--c6); }
.line--you { border-left-color: var(--c1); }
.line--cand { border-left-color: var(--c3); }
@media (max-width: 620px) { .line { grid-template-columns: 1fr; gap: 0.2rem; } .line b { padding-top: 0; } }

.story__close { margin-top: clamp(3rem, 6vw, 5rem); padding-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--line); }

/* Under the desktop breakpoint the stage pins to the top of the viewport, so
   the panel comes off to keep it short enough to read scenes underneath. */
@media (max-width: 999px) {
  .story__stage { position: sticky; top: 60px; }
  .story__scenes { overflow: visible; height: auto; padding-right: 0; }
  .story__scenes > .scene:first-child, .story__scenes > .scene:last-child { padding-block: clamp(2rem, 6vh, 3.4rem); }
  .scene { opacity: 1; }
}
/* On a phone the stage is pinned to the top of the viewport, so the floor has to
   stay short enough to leave the scene readable underneath it. The rooms keep
   their four columns and drop to a monogram and a name; the job titles are in
   the roster above anyway. */
@media (max-width: 820px) {
  .office__panel { display: none; }
  .office__view { padding: 9px; }
  .office__plan { gap: 6px; }
  .office__room { padding: 7px; }
  .office__room b { font-size: 10.5px; margin-top: 5px; }
  .office__job { display: none; }
  .office__ini, .office__av { width: 24px; height: 24px; border-radius: 7px; font-size: 10px; }
  .office__av { border-radius: 50%; }
  .office__face { width: 26px; height: 26px; }
  .office__dots { margin-top: 5px; }
  .office__room--clara { padding: 8px 7px; }
  .office__crumb { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .office__plan { transition: none; }
  .office__dots i { animation: none; opacity: 0.7; }
  .opan.is-on { animation: none; }
  .scene { opacity: 1; }
}

/* ==========================================================================
   Product screens — Crew's own UI, rebuilt
   ========================================================================== */
.screen {
  background: var(--ui-bg);
  border: 1px solid var(--ui-line);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(20,19,26,0.04), 0 18px 46px -22px rgba(20,19,26,0.26);
  overflow: hidden;
  font-family: var(--ui-font);
  color: var(--ui-ink);
  font-size: 13px; line-height: 1.45;
}
.screen__bar {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 9px 13px; border-bottom: 1px solid var(--ui-line); background: var(--ui-bg);
}
.screen__bar::before {
  content: ""; width: 38px; height: 8px; border-radius: 99px;
  background: linear-gradient(90deg, #c0e5cb, #bbcaf0, #f1c1f3);
}
.screen__title { font-weight: 600; font-size: 12px; letter-spacing: -0.01em; }
.screen__crumb { color: var(--ui-ink-3); font-size: 11px; margin-left: auto; }
.screen__body { padding: 16px; }
.screen__body--flush { padding: 0; }

.ui-h { font-size: 16px; font-weight: 700; letter-spacing: -0.02em; margin: 0; }
/* used on both <p> and <span>, so force block either way */
.ui-sub { display: block; font-size: 11.5px; color: var(--ui-ink-3); margin: 3px 0 0; }
.ui-note {
  display: flex; gap: 8px; background: var(--ui-mint); border-radius: 8px;
  padding: 9px 11px; font-size: 11.5px; color: #1d4c37; margin-top: 12px;
}
.ui-note b { color: #0f3b29; }

.ui-card { border: 1px solid var(--ui-line); border-radius: 10px; padding: 12px; background: #fff; }
.ui-grid { display: grid; gap: 9px; }
.ui-grid--2 { grid-template-columns: 1fr 1fr; }
.ui-grid--3 { grid-template-columns: repeat(3, 1fr); }
.ui-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 560px) { .ui-grid--3, .ui-grid--4 { grid-template-columns: 1fr 1fr; } }

.chip {
  display: inline-flex; align-items: center; gap: 5px;
  border-radius: 999px; padding: 2px 9px; font-size: 10.5px; font-weight: 600;
  background: var(--ui-line-2); color: var(--ui-ink-2);
}
.chip--green { background: var(--ui-mint); color: var(--ui-green); }
.chip--amber { background: var(--ui-amber); color: var(--ui-amber-ink); }
.chip--red { background: var(--ui-red); color: var(--ui-red-ink); }
.chip--blue { background: var(--ui-blue); color: var(--ui-blue-ink); }

.sq {
  width: 26px; height: 26px; border-radius: 7px; background: var(--ui-mint);
  display: grid; place-items: center; color: var(--ui-green);
  font-size: 12px; font-weight: 700; flex: none;
}

.kpi { border: 1px solid var(--ui-line); border-radius: 10px; padding: 10px 11px; }
.kpi b { display: block; font-size: 19px; letter-spacing: -0.03em; line-height: 1.1; }
.kpi span { font-size: 10.5px; color: var(--ui-ink-3); }
.kpi i { font-style: normal; font-size: 10.5px; font-weight: 600; color: var(--ui-green); }

.row { display: flex; align-items: center; gap: 9px; }
.row--between { justify-content: space-between; }
.rowline { display: flex; align-items: center; gap: 9px; padding: 9px 0; border-bottom: 1px solid var(--ui-line-2); }
.rowline:last-child { border-bottom: 0; }

/* bars */
.bar { height: 7px; border-radius: 99px; background: var(--ui-line-2); overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: 99px; background: var(--ui-green); }
.bar--amber > i { background: #e0a53a; }
.bar--red > i { background: #c45b5b; }
.bar--blue > i { background: #5b7fc4; }

/* funnel */
.funnel { display: grid; gap: 7px; }
.funnel__row { display: grid; grid-template-columns: 112px 1fr 64px; align-items: center; gap: 10px; font-size: 11.5px; }
.funnel__bar { height: 22px; border-radius: 6px; background: var(--ui-mint); position: relative; }
.funnel__bar > i { position: absolute; inset: 0 auto 0 0; border-radius: 6px; background: var(--ui-green); opacity: 0.85; }
.funnel__n { text-align: right; font-variant-numeric: tabular-nums; color: var(--ui-ink-2); font-weight: 600; }

/* phone / whatsapp */
.phone {
  width: 258px; max-width: 100%; border-radius: 22px; border: 1px solid var(--ui-line);
  background: #ece5dd; overflow: hidden; box-shadow: 0 16px 40px -20px rgba(20,19,26,0.4);
  font-family: var(--ui-font);
}
.phone__top { background: #075e54; color: #fff; padding: 11px 13px; display: flex; align-items: center; gap: 8px; }
.phone__top b { font-size: 12.5px; }
.phone__top span { font-size: 10px; opacity: 0.8; display: block; }
.phone__av { width: 26px; height: 26px; border-radius: 99px; background: #0f6b43; display: grid; place-items: center; font-size: 11px; font-weight: 700; }
.phone__body { padding: 12px; display: grid; gap: 7px; min-height: 250px; align-content: start; }
.msg { max-width: 84%; padding: 7px 10px; border-radius: 10px; font-size: 11.5px; line-height: 1.4; box-shadow: 0 1px 1px rgba(0,0,0,0.07); }
.msg--in { background: #fff; border-top-left-radius: 3px; justify-self: start; }
.msg--out { background: #dcf8c6; border-top-right-radius: 3px; justify-self: end; }
.msg time { display: block; font-size: 9px; color: #8d8980; text-align: right; margin-top: 2px; }
.msg__btn { margin-top: 6px; border-top: 1px solid #ededed; padding-top: 5px; color: #1f7aec; text-align: center; font-weight: 600; font-size: 11px; }

/* interview stage */
.stage { background: #10131a; border-radius: 12px; padding: 14px; color: #e8e8ec; }
.stage__top { display: flex; align-items: center; gap: 8px; font-size: 10.5px; color: #9a9aa6; }
.stage__live { display: inline-flex; align-items: center; gap: 5px; color: #ff6b6b; font-weight: 700; }
.stage__live::before { content: ""; width: 6px; height: 6px; border-radius: 99px; background: #ff6b6b; }
.stage__tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 11px; }
.stage__tile { aspect-ratio: 4 / 3; border-radius: 9px; display: flex; flex-direction: column; justify-content: flex-end; padding: 9px; font-size: 10.5px; }
.stage__tile--ai { background: linear-gradient(150deg, #1d3b5c, #15202e); position: relative; }
/* Maya is the avatar the product itself ships for her. The only copy of it is a
   small one, so she is shown as a round avatar on the tile rather than
   full bleed: at this size the source resolution holds, and a round avatar on a
   dark tile is how the product shows an agent anyway. */
.stage__av {
  position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%);
  /* height:auto is load bearing. The <img> height attribute lands as a presentation
     hint, which beats aspect-ratio when nothing in CSS sets height, and the avatar
     renders as a tall ellipse. Inherited from v2, where it is still a live bug. */
  width: 44%; height: auto; aspect-ratio: 1; border-radius: 50%; object-fit: cover;
  border: 2px solid rgba(255,255,255,0.22);
}
.stage__tile--me { background: linear-gradient(150deg, #2e2740, #1a1725); }
.stage__cap { background: rgba(255,255,255,0.07); border-radius: 8px; padding: 9px 10px; margin-top: 10px; font-size: 11.5px; line-height: 1.45; }
.stage__cap b { color: #9fd4b4; }
.wavebar { display: flex; align-items: flex-end; gap: 2px; height: 14px; margin-top: 6px; }
.wavebar i { width: 3px; border-radius: 2px; background: #9fd4b4; animation: wv 1.1s ease-in-out infinite; }
@keyframes wv { 0%,100% { height: 20%; } 50% { height: 100%; } }

/* scorecard */
.score { display: grid; gap: 9px; }
.score__row { display: grid; grid-template-columns: 1fr 50px; gap: 10px; align-items: center; font-size: 11.5px; }
.score__ring {
  width: 64px; height: 64px; border-radius: 99px; display: grid; place-items: center;
  font-size: 17px; font-weight: 700; color: var(--ui-green); flex: none;
  background: conic-gradient(var(--ui-green) 0 82%, var(--ui-line-2) 82% 100%);
}
.score__ring > span { width: 50px; height: 50px; border-radius: 99px; background: #fff; display: grid; place-items: center; }

/* pills row */
.pills { display: flex; flex-wrap: wrap; gap: 6px; }
.pill {
  border: 1px solid var(--ui-line); border-radius: 8px; padding: 6px 9px;
  font-size: 11px; font-weight: 600; color: var(--ui-ink-2); background: #fff;
}
.pill--on { background: var(--ui-mint); border-color: transparent; color: var(--ui-green); }

/* workflow canvas */
.flow { background: #fbfbfa; border-radius: 10px; border: 1px solid var(--ui-line); padding: 14px; }
.flow__chain { display: flex; align-items: stretch; gap: 0; }
.flow__node { border: 1px solid var(--ui-line); background: #fff; border-radius: 9px; padding: 8px 9px; flex: 1 1 0; min-width: 0; }
.flow__node b { font-size: 11px; display: block; letter-spacing: -0.01em; }
.flow__node span { font-size: 9.5px; color: var(--ui-ink-3); display: block; line-height: 1.35; }
.flow__arrow { display: grid; place-items: center; color: var(--ui-ink-3); padding-inline: 5px; flex: none; font-size: 11px; }
@media (max-width: 560px) {
  .flow__chain { flex-wrap: wrap; gap: 6px; }
  .flow__node { flex: 1 1 44%; }
  .flow__arrow { display: none; }
}

/* agent console */
.agent__head { display: flex; align-items: center; gap: 10px; }
.agent__av { width: 34px; height: 34px; border-radius: 10px; background: #14131a; color: #c0e5cb; display: grid; place-items: center; font-weight: 700; font-size: 13px; flex: none; }
.agent__msg { background: var(--ui-shell); border: 1px solid var(--ui-line); border-radius: 10px; padding: 10px 11px; font-size: 11.5px; line-height: 1.5; }
.agent__msg + .agent__msg { margin-top: 8px; }
.agent__msg--me { background: #fff; }
.agent__step { display: grid; grid-template-columns: 18px 1fr; gap: 9px; align-items: start; font-size: 11.5px; padding: 8px 0; border-bottom: 1px solid var(--ui-line-2); }
.agent__step:last-child { border-bottom: 0; }
.agent__step b { font-size: 11.5px; }
.agent__step span { color: var(--ui-ink-3); font-size: 10.5px; display: block; }
.agent__num { width: 18px; height: 18px; border-radius: 99px; background: var(--ui-mint); color: var(--ui-green); display: grid; place-items: center; font-size: 10px; font-weight: 700; }

/* risk table */
.risk { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.risk th { text-align: left; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ui-ink-3); font-weight: 600; padding: 0 0 7px; }
.risk td { padding: 8px 0; border-top: 1px solid var(--ui-line-2); }
.risk td:last-child, .risk th:last-child { text-align: right; }
.flag { width: 9px; height: 9px; border-radius: 99px; display: inline-block; margin-right: 6px; }
.flag--a { background: #2f9e6b; } .flag--b { background: #e0a53a; } .flag--c { background: #c45b5b; }

/* ---------- module grid (everything else) ---------- */
.mods { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.75rem; margin-top: 2.4rem; }
.mod { border: 1px solid var(--line); border-radius: 14px; padding: 1.15rem 1.2rem; background: rgba(255,255,255,0.55); }
.mod b { display: block; font-size: 1rem; letter-spacing: -0.015em; }
.mod p { margin: 0.4rem 0 0; font-size: 0.9rem; color: var(--ink-2); line-height: 1.45; }

/* ---------- proof ---------- */
.proof { background: var(--ink); color: var(--paper); border-radius: 26px; padding: clamp(2rem, 5vw, 3.6rem); }
.proof h2 { color: var(--paper); }
.proof__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.8rem 2rem; margin-top: 2.4rem; }
@media (min-width: 820px) { .proof__grid { grid-template-columns: repeat(3, 1fr); } }
.proof__n { font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.7rem); letter-spacing: -0.035em; font-weight: 700; line-height: 1; }
.proof__l { font-size: 0.88rem; color: rgba(255,253,248,0.66); margin-top: 0.5rem; line-height: 1.4; }

/* ---------- quotes ---------- */
.quotes { display: grid; gap: 1.6rem; }
@media (min-width: 860px) { .quotes { grid-template-columns: 1fr 1fr; gap: 2.4rem; } }
.quote { margin: 0; border-top: 2px solid var(--ink); padding-top: 1.4rem; text-align: left; }
.quote blockquote {
  margin: 0; text-align: left; font-size: clamp(1.15rem, 1rem + 0.7vw, 1.5rem);
  line-height: 1.38; letter-spacing: -0.02em; font-weight: 700;
}
.quote figcaption { margin-top: 1.1rem; font-size: 0.92rem; text-align: left; }
.quote figcaption b { display: block; }
.quote figcaption span { color: var(--ink-3); }

/* ---------- case study strip ---------- */
.cstrip {
  display: grid; gap: 1.6rem; align-items: center; text-decoration: none;
  background: var(--c6); border-radius: 22px;
  padding: clamp(1.6rem, 3.4vw, 2.6rem);
  transition: transform 0.2s ease;
}
.cstrip:hover { transform: translateY(-2px); }
@media (min-width: 980px) { .cstrip { grid-template-columns: 1.05fr 1.25fr auto; gap: 2.6rem; } }
.cstrip__copy h3 { margin: 0.5rem 0 0; max-width: 20ch; }
.cstrip__copy p { font-size: 0.95rem; color: var(--ink-2); max-width: 42ch; }
.cstrip__nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.cstrip__nums b { display: block; font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem); letter-spacing: -0.035em; line-height: 1; }
.cstrip__nums span { display: block; margin-top: 0.4rem; font-size: 0.82rem; color: var(--ink-2); line-height: 1.35; }
.cstrip__go {
  font-weight: 700; font-size: 0.95rem; white-space: nowrap;
  border-bottom: 2px solid var(--ink); padding-bottom: 2px; justify-self: start;
}

/* ---------- per-section CTA ---------- */
/* Every feature section ends with the same offer, so it is a quiet text link
   rather than another button competing with the one in the header. */
.feat__cta {
  display: inline-flex; align-items: center; gap: 0.4rem;
  margin-top: 1.6rem; font-weight: 700; font-size: 0.95rem;
  text-decoration: none; color: var(--ink);
  border-bottom: 2px solid var(--ink); padding-bottom: 2px;
  transition: gap 0.18s ease;
}
.feat__cta:hover { gap: 0.7rem; }
.feat__cta--solo { margin-top: 2rem; }

/* ---------- the form slab ---------- */
/* Measured off the form on the live /crew page: #bbcaf0 fill, a 2px ink border,
   22px radius, two 470px columns, mono uppercase labels, and square 2px fields
   and button rather than the pills used elsewhere on this page. */
.slab {
  background: var(--c2);
  border: 2px solid var(--ink);
  border-radius: 22px;
  padding: clamp(1.8rem, 5vw, 5rem) clamp(1.4rem, 4.5vw, 4.5rem);
}
.form-grid { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 4vw, 3.5rem); }
.form-grid > * { min-width: 0; }
@media (min-width: 900px) { .form-grid { grid-template-columns: 1fr 1fr; } }
.slab h2 { font-size: clamp(1.8rem, 1.2rem + 2.2vw, 3rem); margin-top: 0.6rem; max-width: 18ch; }
.slab .lede { font-size: 1.02rem; margin-top: 1.2rem; }
.slab .feat__list { margin-top: 1.5rem; }

.two { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
@media (max-width: 430px) { .two { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 0.75rem; }
.field--wide { grid-column: 1 / -1; }
.field label {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink); font-weight: 500;
}
.field input, .field select, .field textarea {
  font-family: var(--font); font-size: 1rem; color: var(--ink);
  background: var(--paper); border: 1px solid rgba(17,17,21,0.35);
  border-radius: 2px; padding: 0.7rem 0.8rem; width: 100%;
}
.field textarea { min-height: 96px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 0; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(255,255,255,0.7);
}
.slab__btn {
  width: 100%; margin-top: 0.4rem; cursor: pointer;
  background: var(--ink); color: var(--paper); border: 1px solid var(--ink);
  border-radius: 2px; padding: 0.85rem 1.6rem;
  font-family: var(--font); font-weight: 700; font-size: 1rem;
  transition: opacity 0.15s ease;
}
.slab__btn:hover { opacity: 0.88; }
.form-msg { text-align: center; font-size: 0.86rem; color: var(--ink-2); margin-top: 0.8rem; }

/* ---------- footer ---------- */
.foot { border-top: 1px solid var(--line); padding-block: 2rem 3rem; font-size: 0.85rem; color: var(--ink-3); }
.foot__in { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; }

/* reveal */
.rv { opacity: 0; transform: translateY(14px); transition: opacity 0.6s ease, transform 0.6s ease; }
.rv.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; transition: none; }
  .wavebar i { animation: none; height: 60%; }
  html { scroll-behavior: auto; }
}

/* ---------- bare mode ---------- */
/* ?bare=1 (or #bare) hides the page's own header and footer, for embedding the
   page, recording it, or showing the product without the chrome around it.
   --tpx-h is the header height everything else offsets against, so it goes to 0
   and the sticky pieces park near the top of the window instead of under a bar
   that is no longer there. */
.is-bare .topbar, .is-bare .foot { display: none !important; }
.is-bare { --tpx-h: 0px; }
.is-bare .hero { padding-top: clamp(1.4rem, 3vw, 2.4rem); }
@media (max-width: 999px) { .is-bare .story__stage { top: 8px; } }