/* ==========================================================================
   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);
}

/* ==========================================================================
   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; }
}
/* ==========================================================================
   Clara's crew, the scrollytelling section (v4)
   Ported from clara-crew.vercel.app. Every selector is scoped to .cc because
   both pages were built from the crew-v2 component kit and share 37 class names
   with different meanings; those 37 are also renamed cc-* in the markup, the
   script and here. Regenerate with scratchpad/port.py + scope.py.
   ========================================================================== */
.cc{
  --c1:#ffc875;--c2:#bbcaf0;--c3:#f1c1f3;--c4:#f2b457;--c5:#b6d9c0;--c6:#c0e5cb;
  --ink:#14131a;--ink-2:#43414f;--ink-3:#6f6c80;--line:#e4e1d8;--paper:#fffdf8;
  --ui-bg:#fff;--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;
  --at:#5a3fd0;
  --font:"PolymathText","Helvetica Neue",Arial,sans-serif;
  --ui-font:"InterUI",Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --navH:64px;--railH:46px;--topH:calc(var(--navH) + var(--railH));
  --col:clamp(380px,37vw,520px);
  --shadow:0 1px 2px rgba(20,19,26,.04),0 18px 46px -22px rgba(20,19,26,.26);
}
.cc *{box-sizing:border-box}
.cc{scroll-behavior:smooth}
.cc{margin:0;font-family:var(--font);font-size:clamp(1rem,.96rem + .2vw,1.1rem);line-height:1.5;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased}
.cc img{display:block;max-width:100%}
.cc a{color:inherit}
.cc h1, .cc h2, .cc h3{margin:0;letter-spacing:-.025em;line-height:1.1;font-weight:700}
.cc h1{font-size:clamp(2rem,1.35rem + 2.4vw,3.25rem)}
.cc h2{font-size:clamp(1.7rem,1.2rem + 1.5vw,2.4rem)}
.cc p{margin:0}
.cc .cc-btn{display:inline-flex;align-items:center;gap:.5rem;padding:.78rem 1.3rem;border-radius:999px;font-family:var(--font);font-weight:700;font-size:.95rem;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:transform .15s ease,background .15s ease;white-space:nowrap}
.cc .cc-btn:hover{transform:translateY(-1px)}
.cc .cc-btn--solid{background:var(--ink);color:var(--paper)}
.cc .cc-btn--ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.cc .cc-btn--sm{padding:.55rem 1rem;font-size:.88rem}
.cc .cc-btn.done{background:var(--ui-green);color:#fff}
.cc .cc-eyebrow{font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin:0 0 .9rem}
.cc .tag{display:inline-block;padding:.3rem .7rem;border-radius:999px;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.cc .cc-t-amber{background:var(--c1)}
.cc .cc-t-blue{background:var(--c2)}
.cc .cc-t-pink{background:var(--c3)}
.cc .cc-t-gold{background:var(--c4)}
.cc .cc-t-sage{background:var(--c5)}
.cc .cc-t-mint{background:var(--c6)}
.cc .meta{display:flex;align-items:center;flex-wrap:wrap;gap:.6rem;margin-bottom:1rem}
.cc .when{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.cc .cc-lede{font-size:clamp(1.02rem,.98rem + .35vw,1.2rem);color:var(--ink-2);line-height:1.5;margin-top:1rem}
.cc .narr{font-size:1rem;color:var(--ink-2);margin:0 0 .9rem}
.cc .narr:last-child{margin-bottom:0}
.cc .narr b{color:var(--ink)}
.cc .illus{font-size:.82rem;color:var(--ink-3);margin-top:1.2rem}
.cc .list{list-style:none;margin:1.2rem 0 0;padding:0;display:grid;gap:.55rem}
.cc .list li{position:relative;padding-left:1.45rem;font-size:.97rem;color:var(--ink-2)}
.cc .list li::before{content:"";position:absolute;left:0;top:.54em;width:7px;height:7px;border-radius:2px;background:var(--ink)}
.cc .rail{position:fixed;left:0;right:0;top:var(--navH);height:var(--railH);z-index:59;background:rgba(255,253,248,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.cc .rail__track{position:absolute;left:clamp(40px,5vw,80px);right:clamp(40px,5vw,80px);top:0;bottom:0}
.cc .rail__line{position:absolute;left:0;right:0;top:15px;height:2px;background:var(--ui-line);border-radius:2px}
.cc .rail__fill{position:absolute;left:0;top:15px;height:2px;background:var(--ink);border-radius:2px;width:0}
.cc .rail__head{position:absolute;top:10px;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 4px var(--paper),0 0 0 5px var(--ink);left:0}
.cc .rail__tick{position:absolute;top:0;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;white-space:nowrap;cursor:pointer;background:none;border:0;padding:0;font:inherit;color:inherit}
.cc .rail__tick i{width:8px;height:8px;border-radius:50%;background:var(--paper);border:2px solid var(--ui-ink-3);margin-top:12px}
.cc .rail__tick.past i{background:var(--ink);border-color:var(--ink)}
.cc .rail__tick span{font-family:var(--mono);font-size:10px;letter-spacing:.04em;color:var(--ink-3)}
.cc .rail__tick span b{color:var(--ink);font-weight:700}
.cc .rail__tick.cur span{color:var(--ink)}
.cc .rail__tick em{position:absolute;top:-1px;font-style:normal;font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.08em;background:var(--c2);color:var(--ink);border-radius:999px;padding:1px 6px;transform:translateX(-50%);left:50%;display:none}
.cc .cc-stage{position:fixed;left:0;right:0;top:var(--topH);bottom:0;z-index:1;overflow:hidden;background:var(--paper)}
.cc .facade{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.cc .wash{position:absolute;inset:-30% -10% -10% -10%;filter:blur(90px);opacity:.75;pointer-events:none;
  background:radial-gradient(28% 32% at 14% 20%,rgba(187,202,240,.95),transparent 70%),radial-gradient(24% 28% at 86% 10%,rgba(241,193,243,.8),transparent 72%),radial-gradient(30% 34% at 64% 62%,rgba(192,229,203,.8),transparent 72%),radial-gradient(20% 24% at 30% 78%,rgba(255,200,117,.6),transparent 74%)}
.cc .facade .sign{position:absolute;transform:translate(-50%,-100%);font-family:var(--mono);font-weight:700;letter-spacing:.24em;font-size:11px;text-transform:uppercase;color:var(--ink-2);white-space:nowrap;display:flex;gap:10px;align-items:center}
.cc .facade .sign i{width:7px;height:7px;border-radius:50%;background:#5fb07a}
.cc .world{position:absolute;inset:0;overflow:hidden;background:linear-gradient(180deg,var(--sky1,#dfe8fb),var(--sky2,#fffdf8));will-change:clip-path}
.cc .world .stars{position:absolute;inset:0;opacity:var(--stars,0);background-image:radial-gradient(1.5px 1.5px at 12% 18%,#fff,transparent),radial-gradient(1.5px 1.5px at 32% 8%,#fff,transparent),radial-gradient(1px 1px at 58% 14%,#fff,transparent),radial-gradient(1.5px 1.5px at 82% 10%,#fff,transparent),radial-gradient(1px 1px at 91% 30%,#fff,transparent),radial-gradient(1px 1px at 70% 4%,#fff,transparent),radial-gradient(1px 1px at 44% 26%,#fff,transparent)}
.cc .dusk{position:absolute;inset:0;pointer-events:none;background:var(--tint,transparent);mix-blend-mode:multiply}
.cc .office{position:absolute;left:0;top:0;width:1200px;height:1090px;transform-origin:0 0;transition:transform 1.25s cubic-bezier(.65,0,.25,1);will-change:transform;font-family:var(--ui-font)}
.cc .bldg{position:absolute;left:4px;top:28px;width:1192px;height:782px;border-radius:28px;border:7px solid transparent;background:linear-gradient(#f1eee6,#f1eee6) padding-box,linear-gradient(120deg,#bbcaf0,#f1c1f3 50%,#c0e5cb) border-box;box-shadow:0 30px 60px -30px rgba(20,19,26,.35)}
.cc .room{position:absolute;width:380px;height:250px;border-radius:10px;overflow:hidden;transition:box-shadow .5s}
.cc .room .lamp{position:absolute;left:50%;top:18px;width:260px;height:160px;transform:translateX(-50%);background:radial-gradient(50% 60% at 50% 0,rgba(255,214,140,.85),transparent 72%);opacity:var(--lamp,0);mix-blend-mode:screen;pointer-events:none;z-index:2}
.cc .plate{position:absolute;left:38px;top:24px;display:flex;align-items:center;gap:6px;background:var(--ink);color:#fff;border-radius:7px;padding:4px 9px;font-weight:600;font-size:12px;letter-spacing:-.01em}
.cc .plate::before{content:"";width:7px;height:7px;border-radius:50%;background:#5fb07a}
.cc .room.focus{box-shadow:inset 0 0 0 3px var(--ink)}
.cc .ticker{position:absolute;left:38px;top:52px;max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:10px;color:var(--ui-ink-2);background:#fff;border:1px solid var(--ui-line);border-radius:6px;padding:2px 7px;transition:opacity .3s}
.cc .agent{position:absolute;left:50px;top:86px;width:80px;height:80px}
.cc .agent .av{width:80px;height:80px;box-shadow:0 0 0 3px #fff}
.cc .room .ring{position:absolute;inset:0;border-radius:10px;box-shadow:inset 0 0 0 3px #5fb07a;opacity:0}
.cc .room.pulse .ring{animation:ringp 1.6s ease-in-out infinite}
@keyframes ringp{0%,100%{opacity:0}50%{opacity:1}}
.cc .room.backlog{box-shadow:0 0 0 4px var(--c4),0 0 46px 6px rgba(242,180,87,.75)}
.cc .backtag{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);background:#ea9435;color:#fff;font-size:10.5px;font-weight:700;padding:3px 10px;border-radius:6px;white-space:nowrap;opacity:0;transition:opacity .4s;z-index:3}
.cc .room.backlog .backtag{opacity:1}
.cc .queue{position:absolute;left:30px;top:196px;width:322px;height:50px;display:flex;flex-wrap:wrap;gap:3px;align-content:flex-start;padding-left:4px}
.cc .queue i{width:20px;height:20px;border-radius:50%;background:var(--c4);border:2px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.2);animation:qin .4s cubic-bezier(.3,1.6,.5,1)}
@keyframes qin{from{transform:scale(0)}}
.cc .lobby{width:1160px;height:220px}
.cc .door{position:absolute;left:60px;top:40px;width:100px;height:156px;perspective:500px;background:linear-gradient(180deg,var(--sky1,#dfe8fb),var(--sky2,#fffdf8));border:5px solid #fff;border-bottom:0;border-radius:8px 8px 0 0;box-shadow:0 0 0 1px var(--ui-line)}
.cc .door b{position:absolute;top:0;bottom:0;width:50%;background:linear-gradient(160deg,rgba(255,255,255,.85),rgba(233,230,221,.9));border:1px solid var(--ui-line);transition:transform 1.2s cubic-bezier(.6,0,.3,1)}
.cc .door b:first-child{left:0;transform-origin:left center}
.cc .door b:last-child{right:0;transform-origin:right center}
.cc .door b::after{content:"";position:absolute;top:50%;width:3px;height:16px;border-radius:2px;background:var(--ink)}
.cc .door b:first-child::after{right:6px}
.cc .door b:last-child::after{left:6px}
.cc .door.open b:first-child{transform:rotateY(-72deg)}
.cc .door.open b:last-child{transform:rotateY(72deg)}
.cc .win{position:absolute;left:712px;top:34px;width:150px;height:110px;border-radius:10px;border:5px solid #fff;box-shadow:0 0 0 1px var(--ui-line);background:linear-gradient(180deg,var(--sky1,#dfe8fb),var(--sky2,#fffdf8));overflow:hidden}
.cc .win::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:4px;margin-left:-2px;background:#fff}
.cc .win .orb{position:absolute;width:26px;height:26px;border-radius:50%;left:var(--orbx,30%);top:var(--orby,40%);background:var(--orb,#ffd27a);box-shadow:0 0 18px var(--orb,#ffd27a);transition:background .6s}
.cc .win .city{position:absolute;left:0;right:0;bottom:0;height:30px;background:linear-gradient(90deg,#c9c3b5 0 12%,transparent 12% 16%,#bfb8a9 16% 30%,transparent 30% 34%,#cfc9bc 34% 52%,transparent 52% 56%,#c4bdaf 56% 76%,transparent 76% 80%,#cbc5b8 80%);clip-path:polygon(0 30%,12% 30%,12% 0,30% 0,30% 45%,52% 45%,52% 15%,76% 15%,76% 35%,100% 35%,100% 100%,0 100%);opacity:.8}
.cc .clara-spot{position:absolute;left:528px;top:44px;width:104px;height:104px}
.cc .clara-spot .av{width:104px;height:104px;box-shadow:0 0 0 4px #fff}
.cc .halo{position:absolute;left:510px;top:26px;width:140px;height:140px;border-radius:50%;background:radial-gradient(closest-side,rgba(187,202,240,.9),transparent);animation:halo 3.4s ease-in-out infinite}
@keyframes halo{50%{transform:scale(1.12);opacity:.6}}
.cc .readyb{position:absolute;left:884px;top:26px;width:236px;height:166px;border-radius:12px;background:var(--ui-mint);border:1px solid #cfe5d8;padding:10px 12px}
.cc .readyb h4{margin:0;font-size:11.5px;color:var(--ui-green);display:flex;justify-content:space-between;align-items:center;font-weight:600}
.cc .readyb h4 b{font-size:16px;font-variant-numeric:tabular-nums;color:var(--ink)}
.cc .readyb .cc-bar{height:7px;border-radius:99px;background:rgba(15,107,67,.12);margin:6px 0 8px;overflow:hidden}
.cc .readyb .cc-bar i{display:block;height:100%;width:0;background:var(--ui-green);transition:width 1s}
.cc .chips{position:absolute;inset:0;pointer-events:none}
.cc .cc-chip{position:absolute;left:0;top:0;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:9.5px;font-weight:700;color:var(--ink);border:2px solid #fff;box-shadow:0 3px 8px -2px rgba(20,19,26,.35);transition:transform 1.5s cubic-bezier(.6,0,.3,1),opacity .6s}
.cc .marilou{position:absolute;left:0;top:0;width:164px;height:40px;border-radius:10px;background:#fff;border:1px solid var(--ui-line);display:flex;align-items:center;gap:8px;padding:4px 8px 4px 4px;box-shadow:0 0 0 2px var(--ink),0 12px 24px -10px rgba(20,19,26,.5);transition:transform 1.7s cubic-bezier(.6,0,.3,1),opacity .6s,box-shadow .6s;opacity:0;z-index:5}
.cc .marilou img{width:30px;height:30px;border-radius:50%;object-fit:cover}
.cc .marilou b{display:block;font-size:11.5px;color:var(--ink);line-height:1.1}
.cc .marilou small{display:inline-block;margin-top:2px;font-size:9px;font-weight:600;white-space:nowrap;background:var(--ui-blue);color:var(--ui-blue-ink);border-radius:99px;padding:0 6px}
.cc .marilou.on{opacity:1}
.cc .marilou.done{box-shadow:0 0 0 2px var(--ui-green),0 12px 26px -8px rgba(15,107,67,.6)}
.cc .marilou.done small{background:var(--ui-mint);color:var(--ui-green)}
.cc .marilou::after{content:"";position:absolute;inset:-6px;border-radius:14px;border:2px solid var(--ink);opacity:0;animation:mping 2.2s ease-out infinite}
.cc .marilou.done::after{border-color:var(--ui-green)}
@keyframes mping{0%{opacity:.6;transform:scale(.95)}100%{opacity:0;transform:scale(1.15)}}
.cc .links{position:absolute;left:0;top:0;width:1200px;height:810px;pointer-events:none;overflow:visible}
.cc .links path{fill:none;stroke-width:3;stroke-linecap:round;opacity:0;transition:opacity .5s}
.cc .links path.brief{stroke:var(--at);opacity:.9;stroke-dasharray:8 9;animation:dash 1s linear infinite}
.cc .links path.report{stroke:var(--ui-green);opacity:.9;stroke-dasharray:8 9;animation:dash 1s linear infinite reverse}
@keyframes dash{to{stroke-dashoffset:-34}}
.cc .packet{position:absolute;left:0;top:0;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;opacity:0;offset-rotate:0deg;pointer-events:none}
.cc .packet.brief{opacity:1;background:var(--at);box-shadow:0 0 0 4px rgba(90,63,208,.22);animation:travel 1.8s cubic-bezier(.5,0,.5,1) infinite}
.cc .packet.report{opacity:1;background:var(--ui-green);box-shadow:0 0 0 4px rgba(15,107,67,.22);animation:travel 1.8s cubic-bezier(.5,0,.5,1) infinite reverse}
@keyframes travel{from{offset-distance:0%}to{offset-distance:100%}}
.cc .basement{position:absolute;left:20px;top:846px;width:1160px;height:236px;border-radius:14px;background:#fff;border:1px solid var(--ui-line);box-shadow:var(--shadow);overflow:hidden;opacity:0;transform:translateY(20px);transition:opacity .8s,transform .8s}
.cc .basement .bar2{display:flex;align-items:center;gap:10px;padding:9px 13px;border-bottom:1px solid var(--ui-line);font-size:12px;font-weight:600}
.cc .basement .bar2::before{content:"";width:38px;height:8px;border-radius:99px;background:linear-gradient(90deg,#c0e5cb,#bbcaf0,#f1c1f3)}
.cc .basement .bar2 span{margin-left:auto;font-weight:400;color:var(--ui-ink-3);font-size:11px}
.cc .cc-stage.cc-flow .basement{opacity:1;transform:none}
.cc .basement svg{position:absolute;left:0;top:0;width:100%;height:100%}
.cc .basement path{fill:none;stroke:var(--ui-ink-3);stroke-width:2;transition:opacity .8s,stroke-dashoffset 1.2s}
.cc .basement path.old{stroke:#e0a53a}
.cc .basement path.nw{stroke:var(--ui-green);stroke-dasharray:400;stroke-dashoffset:400;opacity:0}
.cc .cc-stage.changed .basement path.old{opacity:.08}
.cc .cc-stage.changed .basement path.nw{stroke-dashoffset:0;opacity:1}
.cc .node{position:absolute;height:44px;border-radius:9px;background:#fff;border:1px solid var(--ui-line);color:var(--ui-ink);font-size:12px;font-weight:600;display:flex;align-items:center;gap:8px;padding:0 12px;transition:opacity .8s,transform .8s}
.cc .node small{display:block;font-weight:400;color:var(--ui-ink-3);font-size:10px}
.cc .node.old{background:var(--ui-amber);border-color:#f0dcb3}
.cc .node.old .cnt{background:#e0a53a;color:#fff;border-radius:999px;padding:1px 6px;font-size:10px;margin-left:auto}
.cc .node.nw{opacity:0;transform:translateX(16px);background:var(--ui-mint);border-color:#cfe5d8}
.cc .cc-stage.changed .node.old{opacity:.15;transform:translateX(-10px)}
.cc .cc-stage.changed .node.nw{opacity:1;transform:none}
.cc .ov{position:absolute;pointer-events:none}
.cc .door-ov{position:absolute;pointer-events:none;perspective:1200px}
.cc .door-ov .leaf{position:absolute;top:0;bottom:0;width:50%;background:linear-gradient(160deg,rgba(255,255,255,.55),rgba(255,253,248,.25));backdrop-filter:blur(8px) saturate(1.1);-webkit-backdrop-filter:blur(8px) saturate(1.1);border:7px solid var(--ink)}
.cc .door-ov .leaf.l{left:0;transform-origin:left center;border-right-width:3px}
.cc .door-ov .leaf.r{right:0;transform-origin:right center;border-left-width:3px}
.cc .door-ov .leaf::after{content:"";position:absolute;top:48%;width:5px;height:44px;border-radius:3px;background:var(--ink)}
.cc .door-ov .leaf.l::after{right:10px}
.cc .door-ov .leaf.r::after{left:10px}
.cc .door-ov .frame{position:absolute;inset:-10px -10px 0 -10px;border:10px solid var(--ink);border-bottom:0;border-radius:18px 18px 0 0}
.cc .door-ov.frameonly .leaf, .cc .door-ov.frameonly .door-clara{display:none}
.cc .door-clara{position:absolute;left:50%;bottom:5%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px}
.cc .door-clara .av{width:clamp(92px,14vh,140px);height:clamp(92px,14vh,140px);box-shadow:0 0 0 5px var(--paper),0 20px 40px -12px rgba(20,19,26,.5)}
.cc .door-clara span:last-child{background:var(--ink);color:#fff;font-weight:700;font-size:13px;padding:4px 12px;border-radius:999px}
@keyframes cue{0%{transform:scaleY(.2);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}100%{transform:scaleY(.2);transform-origin:bottom}}
.cc .clock{position:absolute;z-index:6;display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.95);border:1px solid var(--ui-line);border-radius:14px;padding:10px 14px 10px 10px;box-shadow:var(--shadow);font-family:var(--ui-font);pointer-events:none;backdrop-filter:blur(8px)}
.cc .clock .ico{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:var(--clockbg,#fdf2dd);transition:background .6s}
.cc .clock .ico svg{width:22px;height:22px}
.cc .clock .d{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ui-ink-3)}
.cc .clock .t{font-family:var(--font);font-weight:700;font-size:28px;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums;color:var(--ink)}
.cc .clock .t small{font-size:12px;font-weight:600;color:var(--ink-3);letter-spacing:0;margin-left:6px}
.cc .clock .sd{margin-top:3px;font-size:10.5px;color:var(--ui-ink-2)}
.cc .clock .sd b{color:var(--ui-green)}
.cc .assign{position:absolute;inset:0}
.cc .assign::before{content:"";position:absolute;inset:-8%;background:radial-gradient(closest-side,rgba(255,253,248,.95),rgba(255,253,248,.6) 70%,transparent);opacity:0;transition:opacity .5s}
.cc .assign.dim::before{opacity:1}
.cc .brief-card, .cc .acard{position:absolute;left:50%;top:50%;background:#fff;border:1px solid var(--ui-line);border-radius:14px;box-shadow:var(--shadow);font-family:var(--ui-font);overflow:hidden;transition:opacity .45s,transform .7s cubic-bezier(.5,0,.3,1)}
.cc .brief-card{width:min(370px,86%);opacity:0;transform:translate(-50%,-50%) scale(.9)}
.cc .brief-card.on{opacity:1}
.cc .brief-card.split{opacity:0}
.cc .brief-card dl{margin:0;padding:14px 16px;display:grid;grid-template-columns:auto 1fr;gap:7px 14px;font-size:12.5px}
.cc .brief-card dt{color:var(--ui-ink-3)}
.cc .brief-card dd{margin:0;font-weight:600}
.cc .acard{width:254px;opacity:0;transform:translate(-50%,-50%) scale(.7)}
.cc .acard header{display:flex;gap:10px;align-items:center;padding:12px 14px 8px}
.cc .acard header .av{width:38px;height:38px}
.cc .acard header b{display:block;font-size:14px}
.cc .acard header small{color:var(--ui-ink-3);font-size:11px}
.cc .acard ul{list-style:none;margin:0;padding:0 14px 10px;display:grid;gap:6px}
.cc .acard li{font-size:11.5px;line-height:1.35;display:grid;grid-template-columns:80px 1fr;gap:6px;opacity:.15;transform:translateY(4px);transition:.4s;color:var(--ui-ink)}
.cc .acard li.on{opacity:1;transform:none}
.cc .acard li span{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ui-ink-3);padding-top:1px}
.cc .acard .work{margin:0 14px 12px;font-size:10.5px;font-weight:600;color:var(--ui-green);background:var(--ui-mint);border-radius:6px;padding:5px 8px;opacity:0;transition:.4s}
.cc .acard.done .work{opacity:1}
.cc .screens{position:absolute;left:214px;top:22px;display:flex;gap:6px}
.cc .cc-screen{background:var(--ui-bg);border:1px solid var(--ui-line);border-radius:14px;box-shadow:var(--shadow);overflow:hidden;font-family:var(--ui-font);color:var(--ui-ink);font-size:13px;line-height:1.45}
.cc .cc-screen__bar{display:flex;align-items:center;gap:.6rem;padding:9px 13px;border-bottom:1px solid var(--ui-line);background:var(--ui-bg)}
.cc .cc-screen__bar::before{content:"";width:38px;height:8px;border-radius:99px;background:linear-gradient(90deg,#c0e5cb,#bbcaf0,#f1c1f3);flex:none}
.cc .cc-screen__title{font-weight:600;font-size:12px;letter-spacing:-.01em}
.cc .cc-screen__crumb{color:var(--ui-ink-3);font-size:11px;margin-left:auto;white-space:nowrap}
.cc .cc-screen__body{padding:16px}
.cc .cc-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}
.cc .cc-ui-card{border:1px solid var(--ui-line);border-radius:10px;padding:12px;background:#fff}
.cc .cc-ui-h{font-size:14px;font-weight:700;letter-spacing:-.02em;margin:0 0 10px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.cc .cc-ui-h small{font-weight:400;font-size:11px;color:var(--ui-ink-3)}
.cc .uchip{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);white-space:nowrap}
.cc .uchip.ok{background:var(--ui-mint);color:var(--ui-green)}
.cc .uchip.warn{background:var(--ui-amber);color:var(--ui-amber-ink)}
.cc .uchip.bad{background:var(--ui-red);color:var(--ui-red-ink)}
.cc .uchip.blue{background:var(--ui-blue);color:var(--ui-blue-ink)}
.cc .cc-rowline{display:flex;align-items:center;justify-content:space-between;gap:9px;padding:8px 0;border-bottom:1px solid var(--ui-line-2);font-size:12.5px}
.cc .cc-rowline:last-child{border-bottom:0}
.cc .cc-sq{width:24px;height:24px;border-radius:7px;background:var(--ui-mint);display:grid;place-items:center;color:var(--ui-green);font-size:11px;font-weight:700;flex:none}
.cc .cc-sq.warn{background:var(--ui-amber);color:var(--ui-amber-ink)}
.cc .cc-sq.bad{background:var(--ui-red);color:var(--ui-red-ink)}
.cc .cc-rowline .l{display:flex;align-items:center;gap:9px}
.cc .chat{display:grid;gap:11px}
.cc .cc-msg{display:flex;gap:9px;align-items:flex-start;font-size:13px;line-height:1.5}
.cc .cc-msg .av{width:34px;height:34px}
.cc .cc-msg .bub{background:var(--ui-shell);border:1px solid var(--ui-line-2);border-radius:10px;padding:8px 12px 9px;max-width:88%}
.cc .cc-msg .who{display:flex;gap:8px;justify-content:space-between;margin-bottom:2px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ui-ink-3)}
.cc .cc-msg .who time{color:var(--ui-ink-3);letter-spacing:.04em}
.cc .cc-msg p{font-size:14px;color:var(--ui-ink)}
.cc .cc-msg.right{flex-direction:row-reverse}
.cc .cc-msg.right .bub{background:var(--ui-ink);border-color:var(--ui-ink)}
.cc .cc-msg.right p{color:#fff}
.cc .cc-msg.right .who{color:rgba(255,255,255,.6)}
.cc .cc-msg.right .who time{color:rgba(255,255,255,.6)}
.cc .cc-msg.cand .bub{background:var(--ui-mint);border-color:#d7eadf}
.cc .sysline{justify-self:center;font-size:11.5px;font-weight:600;color:var(--ui-ink-2);background:var(--ui-line-2);border-radius:999px;padding:3px 11px;display:flex;gap:8px;align-items:center;text-align:center}
.cc .sysline time{font-family:var(--mono);font-size:10px;color:var(--ui-ink-3);font-weight:400}
.cc .sysline.ok{background:var(--ui-mint);color:var(--ui-green)}
.cc .sysline.warn{background:var(--ui-amber);color:var(--ui-amber-ink)}
.cc .reveal{opacity:0;transform:translateY(12px);transition:opacity .6s,transform .6s cubic-bezier(.2,.8,.2,1)}
.cc .reveal.in{opacity:1;transform:none}
.cc .av{display:inline-block;border-radius:50%;overflow:hidden;flex:none;background:#ece8f6}
.cc .av img{width:100%;height:100%;object-fit:cover}
.cc .av.ph img{animation:breathe 5s ease-in-out infinite}
@keyframes breathe{50%{transform:translateY(-2px) scale(1.015)}}
.cc .cc-phone{width:258px;max-width:100%;margin:1.2rem auto 0;border-radius:22px;border:1px solid var(--ui-line);background:#ece5dd;overflow:hidden;box-shadow:0 16px 40px -20px rgba(20,19,26,.4);font-family:var(--ui-font)}
.cc .cc-phone .top{background:#075e54;color:#fff;padding:11px 13px;display:flex;align-items:center;gap:8px}
.cc .cc-phone .top .av{width:28px;height:28px}
.cc .cc-phone .top b{display:block;font-size:12.5px}
.cc .cc-phone .top small{display:block;font-size:10px;opacity:.8}
.cc .cc-phone .top .wa{margin-left:auto;font-size:9.5px;background:rgba(255,255,255,.16);padding:2px 7px;border-radius:999px}
.cc .cc-phone .body{padding:12px;display:grid;gap:7px;align-content:start;min-height:160px}
.cc .wmsg{max-width:84%;padding:7px 10px;border-radius:10px;font-size:12px;line-height:1.4;box-shadow:0 1px 1px rgba(0,0,0,.07);background:#fff;border-top-left-radius:3px;justify-self:start}
.cc .wmsg.me{background:#dcf8c6;border-top-left-radius:10px;border-top-right-radius:3px;justify-self:end}
.cc .wmsg .lbl{display:flex;align-items:center;gap:5px;font-size:10px;font-weight:700;color:var(--ui-green);margin-bottom:2px}
.cc .wmsg .lbl .av{width:15px;height:15px}
.cc .wmsg time{display:block;font-size:9px;color:#8d8980;text-align:right;margin-top:2px}
.cc .wform{justify-self:start;background:#fff;border-radius:10px;padding:7px 10px;font-size:11.5px;width:88%;box-shadow:0 1px 1px rgba(0,0,0,.07)}
.cc .wform div{display:flex;justify-content:space-between;padding:3px 0;border-bottom:1px dashed #eee}
.cc .wform div:last-child{border:0}
.cc .wform b{color:var(--ui-green)}
.cc .qr{justify-self:end;display:flex;gap:5px}
.cc .qr span{font-size:11px;border:1px solid #128c7e;color:#128c7e;border-radius:999px;padding:2px 10px;background:#fff}
.cc .qr span.sel{background:#128c7e;color:#fff}
.cc .docimg{width:146px;height:92px;border-radius:7px;background:linear-gradient(135deg,#fdf6e9,#efe1c6);position:relative;overflow:hidden;border:1px solid #e0d2b6}
.cc .docimg::before{content:"";position:absolute;left:12px;top:14px;width:32px;height:40px;border-radius:4px;background:#d7c3a3}
.cc .docimg::after{content:"";position:absolute;left:54px;top:18px;width:76px;height:5px;border-radius:3px;background:#cbb593;box-shadow:0 12px 0 #cbb593,0 24px 0 #cbb593,0 36px 0 #d9c6a7}
.cc .docimg.cut{clip-path:polygon(0 0,100% 0,100% 62%,78% 100%,0 100%)}
.cc .docimg .cc-flag{position:absolute;right:4px;bottom:4px;font-size:9px;font-weight:700;color:var(--ui-red-ink);background:#fff;border-radius:4px;padding:1px 4px;z-index:2}
.cc .docimg.ok .cc-flag{color:var(--ui-green)}
.cc .wmsg.media{padding:4px}
.cc .meter{display:grid;grid-template-columns:130px 1fr 62px;align-items:center;gap:10px;font-size:12px;padding:6px 0}
.cc .meter .track{height:7px;border-radius:99px;background:var(--ui-line-2);position:relative}
.cc .meter .track i{position:absolute;left:0;top:0;bottom:0;border-radius:99px;background:var(--ui-green);width:0;transition:width 1.1s cubic-bezier(.2,.8,.2,1) .2s}
.cc .meter .track u{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--ink);border-radius:1px}
.cc .reveal.in .meter .track i, .cc .cc-screen.in .meter .track i{width:var(--v)}
.cc .meter b{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.cc .legend2{display:flex;gap:14px;font-size:10.5px;color:var(--ui-ink-3);margin-top:8px}
.cc .legend2 i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.cc .duo{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:10px}
.cc .cc-kpi{border:1px solid var(--ui-line);border-radius:10px;padding:10px 11px;font-size:11.5px}
.cc .cc-kpi h6{margin:0 0 6px;font-size:11px;display:flex;gap:6px;align-items:center}
.cc .cc-kpi h6 .av{width:20px;height:20px}
.cc .cc-kpi div{display:flex;justify-content:space-between;padding:2px 0;color:var(--ui-ink-2)}
.cc .cc-kpi div b{color:var(--ui-ink)}
.cc .bars{display:grid;gap:10px}
.cc .bars .b{display:grid;grid-template-columns:48px 1fr 40px;align-items:center;gap:8px;font-size:12px;font-weight:600}
.cc .bars .stack{display:flex;height:14px;border-radius:5px;overflow:hidden;background:var(--ui-line-2)}
.cc .bars .stack i{display:block;height:100%;width:0;transition:width 1.1s cubic-bezier(.2,.8,.2,1) .2s}
.cc .reveal.in .bars .stack i, .cc .cc-screen.in .bars .stack i{width:var(--v)}
.cc .bars .stack i.u{background:#5b7fc4}
.cc .bars .stack i.cc-rv{background:#e0a53a}
.cc .rule{display:grid;gap:8px;font-size:12.5px}
.cc .rule div{border-radius:9px;padding:9px 11px;display:flex;gap:8px;align-items:center}
.cc .rule .before{background:var(--ui-amber);color:var(--ui-amber-ink)}
.cc .rule .after{background:var(--ui-mint);color:var(--ui-green);font-weight:600}
.cc .confirm{margin-top:12px;border:1px solid var(--ui-ink);border-radius:10px;padding:11px 13px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;font-size:12.5px}
.cc .confirm .lbl{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ui-ink-3);display:block}
.cc .cbtn{appearance:none;font:inherit;font-size:12px;font-weight:600;padding:6px 13px;border:1px solid var(--ui-ink);border-radius:8px;background:var(--ui-ink);color:#fff;cursor:pointer}
.cc .cbtn.done{background:var(--ui-green);border-color:var(--ui-green)}
.cc .steps{display:flex;gap:4px;margin-top:6px}
.cc .steps i{flex:1;height:6px;border-radius:3px;background:var(--ui-line-2)}
.cc .steps i.on{background:var(--ui-green)}
.cc .stepsl{display:block;font-size:11px;color:var(--ui-ink-3);margin-top:6px}
.cc .cc-pills{display:flex;flex-wrap:wrap;gap:6px}
.cc .cc-pill{border:1px solid var(--ui-line);border-radius:8px;padding:5px 9px;font-size:11px;font-weight:600;color:var(--ui-ink-2);background:#fff}
.cc .cc-pill--on{background:var(--ui-mint);border-color:transparent;color:var(--ui-green)}
.cc .inv h6{margin:10px 0 4px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ui-ink-3)}
.cc .inv h6:first-child{margin-top:0}
.cc .inv ul{margin:0;padding-left:18px;font-size:12.5px;display:grid;gap:3px}
.cc .story{position:relative;z-index:3;width:var(--col);padding:0 0 0 clamp(16px,3vw,40px);pointer-events:none}
.cc .story>*{pointer-events:auto}
.cc .scene{position:relative;padding:22vh 0 26vh}
.cc .scene:first-child{padding-top:calc(var(--topH) + 6vh)}
.cc .beat{margin:0 0 18vh}
.cc .beat:last-child{margin-bottom:0}
.cc .copy{background:rgba(255,253,248,.96);border:1px solid var(--line);border-radius:18px;padding:clamp(20px,2vw,30px);box-shadow:0 18px 46px -26px rgba(20,19,26,.3);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.cc .copy .cc-screen{margin-top:1.1rem;box-shadow:none}
.cc .copy .chat{margin-top:1.1rem}
.cc .cc-quote{font-size:clamp(1.25rem,1.1rem + .6vw,1.6rem);font-weight:700;letter-spacing:-.025em;line-height:1.2}
.cc .cc-quote span{color:var(--ink-3)}
.cc .actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.5rem}
.cc .facts{display:flex;flex-wrap:wrap;gap:1rem 2rem;margin-top:1.8rem}
.cc .facts b{display:block;font-size:1.5rem;letter-spacing:-.03em;line-height:1.1}
.cc .facts span{font-size:.82rem;color:var(--ink-3)}
.cc .crew{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-top:1.2rem}
.cc .crew .m{border:1px solid var(--line);border-radius:12px;padding:.8rem .9rem;background:rgba(255,255,255,.6);display:flex;gap:.7rem;align-items:flex-start}
.cc .crew .m.lead{grid-column:1/-1;background:var(--c6);border-color:transparent;align-items:center}
.cc .crew .avw{position:relative;flex:none}
.cc .crew .avw .av{width:46px;height:46px}
.cc .crew .m.lead .avw .av{width:72px;height:72px}
.cc .crew .avw::after{content:"";position:absolute;right:0;bottom:0;width:11px;height:11px;border-radius:50%;background:#5fb07a;border:2px solid var(--paper)}
.cc .crew b{display:block;font-size:1rem;letter-spacing:-.02em;line-height:1.15}
.cc .crew .m.lead b{font-size:1.4rem}
.cc .crew .role{display:block;margin-top:.2rem;font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.cc .crew small{display:block;font-size:.8rem;color:var(--ink-2);line-height:1.35;margin-top:.3rem}
.cc .meanwhile{display:grid;gap:0;margin-top:.8rem}
.cc .meanwhile div{display:flex;gap:10px;align-items:center;font-size:.95rem;color:var(--ink-2);padding:7px 0;border-bottom:1px solid var(--line)}
.cc .meanwhile div:last-child{border:0}
.cc .meanwhile .av{width:28px;height:28px}
.cc .meanwhile time{margin-left:auto;font-family:var(--mono);font-size:.7rem;color:var(--ink-3)}
.cc .meanwhile i{width:8px;height:8px;border-radius:50%;background:#5fb07a;animation:blink 1.4s infinite}
@keyframes blink{50%{opacity:.25}}
.cc .readycard{display:flex;gap:12px;align-items:center}
.cc .readycard img{width:52px;height:52px;border-radius:50%;object-fit:cover}
.cc .readycard b{display:block;font-size:1.15rem;letter-spacing:-.02em}
.cc .readycard small{color:var(--ink-3);font-size:.85rem}
@media (min-width:900px){

}
.cc .cc-foot{max-width:1180px;margin:2.5rem auto 0;width:100%;display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;font-size:.82rem;color:var(--ink-3);border-top:1px solid var(--line);padding-top:1.4rem}
.cc .cc-foot img{height:18px;width:auto;opacity:.8}
@media (max-width:860px){

}
@media (max-width:820px){
.cc{--navH:56px;--railH:30px;--stageH:42svh}
.cc .rail__tick span, .cc .rail__tick em{display:none}
.cc .rail__line, .cc .rail__fill{top:14px}
.cc .rail__head{top:9px;width:10px;height:10px;margin-left:-5px}
.cc .rail__tick i{margin-top:11px;width:7px;height:7px}
.cc .rail__now{display:block!important}
.cc .cc-stage{bottom:auto;height:var(--stageH);z-index:20;border-bottom:1px solid var(--line)}
.cc .story{width:auto;padding:calc(var(--topH) + var(--stageH)) 12px 0}
.cc .scene{padding:7vh 0 12vh}
.cc .scene:first-child{padding-top:18px}
.cc .beat{margin-bottom:9vh}
.cc .copy{padding:18px 16px;border-radius:16px}
.cc .crew{grid-template-columns:1fr}
.cc .meter{grid-template-columns:100px 1fr 54px}
.cc .clock{padding:6px 10px 6px 6px;gap:8px;border-radius:11px}
.cc .clock .ico{width:28px;height:28px;border-radius:8px}
.cc .clock .ico svg{width:16px;height:16px}
.cc .clock .t{font-size:18px}
.cc .clock .sd{display:none}
}
.cc .rail__now{display:none;position:absolute;right:0;top:-1px;font-family:var(--mono);font-size:9.5px;color:var(--ink-2);background:var(--paper);padding:0 0 0 6px}
@media (max-width:380px){
.cc .duo{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
.cc{scroll-behavior:auto}
.cc *, .cc *::before, .cc *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
.cc .reveal{opacity:1;transform:none}
.cc .packet{display:none}
}
@media (max-width:1180px){
.cc .rail__tick span{display:none}
.cc .rail__tick.cur span{display:block}
}
@media (max-width:820px){
.cc .rail__tick.cur span{display:none}
.cc .rail__track{left:14px;right:96px}
.cc .rail__now{display:block}
}
.cc .rail__now{right:14px;top:8px}
.cc .daymark{display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.cc .daymark::before, .cc .daymark::after{content:"";flex:1;height:1px;background:var(--ink-3);opacity:.35}
.cc .daymark span{background:var(--ink);color:var(--paper);padding:4px 10px;border-radius:999px;font-weight:700;white-space:nowrap}
.cc .daymark em{font-style:normal;letter-spacing:.04em;text-transform:none;font-family:var(--font);font-size:.9rem;color:var(--ink-2);background:rgba(255,253,248,.9);padding:2px 8px;border-radius:6px}
@media (max-width:820px){
.cc .daymark{flex-wrap:wrap;justify-content:center}
.cc .daymark::before, .cc .daymark::after{display:none}
}
.cc #marilouOv{z-index:6}
.cc #marilouOv .mhero{position:absolute;inset:4% 3%;margin:0;border-radius:22px;overflow:hidden;border:1.5px solid var(--ink);background:#20202a;box-shadow:0 40px 80px -30px rgba(20,19,26,.55);opacity:0;transform:translateY(24px) scale(.97);transition:opacity .6s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.cc #marilouOv .mhero img{width:100%;height:100%;object-fit:cover;object-position:43% 30%;display:block}
.cc #marilouOv .mhero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,19,26,0) 55%,rgba(20,19,26,.55))}
.cc #marilouOv figcaption{position:absolute;left:22px;bottom:20px;z-index:2;color:#fff;display:flex;flex-direction:column;gap:2px}
.cc #marilouOv figcaption b{font-size:clamp(1.4rem,2.6vw,2.2rem);line-height:1;letter-spacing:-.01em}
.cc #marilouOv figcaption small{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;opacity:.9}
.cc #marilouOv .mtag{align-self:flex-start;background:var(--c5);color:var(--ink);font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;padding:3px 9px;border-radius:999px;margin-bottom:6px}
.cc #marilouOv .mbub{position:absolute;z-index:2;right:6%;top:12%;max-width:min(300px,46%);background:#dcf8c6;color:#14131a;font-family:Inter,var(--font);font-size:.95rem;line-height:1.35;padding:10px 12px 8px;border-radius:14px 14px 4px 14px;box-shadow:0 14px 30px -12px rgba(0,0,0,.45);opacity:0;transform:translateY(10px);transition:opacity .5s .5s,transform .6s .5s}
.cc #marilouOv .mbub b{display:block;font-size:.66rem;font-family:var(--mono);letter-spacing:.06em;color:#0f6b43;margin-bottom:3px;font-weight:700}
.cc #marilouOv .mbub time{display:block;text-align:right;font-size:.66rem;color:#5b7a64;margin-top:3px}
.cc #marilouOv.cc-hero .mhero{opacity:1;transform:none}
.cc #marilouOv.cc-hero .mbub{opacity:1;transform:none}
@media (max-width:820px){
.cc #marilouOv .mhero{inset:0;border-radius:14px}
.cc #marilouOv .mbub{top:10px;bottom:auto;right:10px;font-size:.78rem;max-width:50%;padding:7px 9px 6px}
.cc #marilouOv figcaption{left:12px;bottom:12px}
.cc #marilouOv figcaption small{font-size:.6rem}
}
@media (prefers-reduced-motion:reduce){
.cc #marilouOv .mhero, .cc #marilouOv .mbub{transition:none}
}
.cc .av{background:#fbf8f1}
.cc .av.crayon img{object-fit:cover;object-position:50% 12%;transform:scale(1.32);transform-origin:50% 8%}
.cc .agent .av.crayon img, .cc .clara-spot .av.crayon img, .cc .door-clara .av.crayon img, .cc .crew .m.lead .av.crayon img{transform:scale(1.08);transform-origin:50% 10%}
.cc .bldg{border-width:3px;background:linear-gradient(#f6f3ec,#f6f3ec) padding-box,linear-gradient(120deg,#bbcaf0,#f1c1f3 50%,#c0e5cb) border-box;box-shadow:0 30px 60px -40px rgba(20,19,26,.3)}
.cc .room{border-radius:18px;background:var(--back);transition:box-shadow .5s,opacity .6s,filter .6s}
.cc .room .floor{position:absolute;left:0;right:0;bottom:0;height:46px;background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.55))}
.cc .plate{left:24px;top:20px;background:none;color:var(--ink);padding:0;font-size:14px;font-weight:700;letter-spacing:-.01em;gap:7px}
.cc .plate::before{width:6px;height:6px;background:#5fb07a}
.cc .ticker{left:auto;right:20px;top:20px;max-width:170px;font-size:10.5px;background:rgba(255,255,255,.75);border:0;border-radius:999px;padding:3px 10px;opacity:0}
.cc .room.focus .ticker{opacity:1}
.cc .agent{left:24px;top:52px;width:132px;height:auto;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.cc .agent .av{width:132px;height:132px;border-radius:26px;box-shadow:0 0 0 3px #fff,0 14px 24px -14px rgba(20,19,26,.35)}
.cc .nm{font-size:12px;font-weight:600;color:var(--ink-2);padding-left:2px}
.cc .room.focus{box-shadow:0 0 0 2px var(--ink)}
.cc .room .ring{border-radius:18px}
.cc .cc-stage.zoom .room:not(.focus){opacity:.22;filter:saturate(.35)}
.cc .queue{left:170px;top:186px;width:190px;height:56px}
.cc .queue i{width:16px;height:16px}
.cc .backtag{left:auto;right:16px;bottom:auto;top:18px;transform:none;border-radius:999px}
.cc .room.backlog .ticker{opacity:0}
.cc .door{left:56px;top:34px;height:170px}
.cc .clara-spot{left:500px;top:30px;width:132px;height:auto;display:flex;flex-direction:column;align-items:center;gap:8px}
.cc .clara-spot .av{width:132px;height:132px;border-radius:26px;box-shadow:0 0 0 4px #fff,0 16px 28px -14px rgba(20,19,26,.4)}
.cc .halo{left:476px;top:6px;width:180px;height:180px}
.cc .win{left:240px;top:44px;width:150px;height:110px}
.cc .readyb{left:860px;top:48px;width:260px;height:auto;padding:14px 16px;border-radius:14px}
.cc .readyb h4{font-size:12.5px}
.cc .readyb h4 b{font-size:18px}
.cc .readyb .cc-bar{margin:10px 0 0;height:8px}
.cc .cc-chip{width:22px;height:22px;border:2px solid #fff;box-shadow:0 2px 6px -2px rgba(20,19,26,.3)}
.cc .cc-stage.zoom .cc-chip{opacity:.15}
.cc .cc-stage[data-cam=applications] .cc-chip[data-room=applications]{opacity:1}
.cc .cc-stage[data-cam=interviews] .cc-chip[data-room=interviews]{opacity:1}
.cc .cc-stage[data-cam=assessments] .cc-chip[data-room=assessments]{opacity:1}
.cc .cc-stage[data-cam=documents] .cc-chip[data-room=documents]{opacity:1}
.cc .cc-stage[data-cam=offers] .cc-chip[data-room=offers]{opacity:1}
.cc .marilou{box-shadow:0 0 0 1.5px var(--ink),0 10px 20px -12px rgba(20,19,26,.45)}
.cc .marilou::after{display:none}
.cc .rail{background:rgba(255,253,248,.82);border-bottom-color:rgba(228,225,216,.6)}
.cc .rail__line{height:1px;background:var(--line)}
.cc .rail__fill{height:1px;background:var(--ink-3)}
.cc .rail__head{width:9px;height:9px;margin-left:-4.5px;top:11px;box-shadow:0 0 0 3px var(--paper),0 0 0 4px var(--ink-3);background:var(--ink-2)}
.cc .rail__tick i{width:5px;height:5px;border-width:1px;margin-top:13px;border-color:var(--ink-3)}
.cc .rail__tick.past i{background:var(--ink-3);border-color:var(--ink-3)}
.cc .rail__tick span{display:none;font-size:9.5px;color:var(--ink-2)}
.cc .rail__tick.cur span{display:block}
.cc .rail__tick em{display:block;position:static;transform:none;background:none;padding:0;font-size:9px;color:var(--ink-3);font-weight:600;order:2;margin-top:-2px}
.cc .rail__tick.cur em{color:var(--ink)}
.cc .rail__tick.day.cur em{display:none}
.cc .clock{background:rgba(255,253,248,.78);box-shadow:none;border-color:rgba(228,225,216,.8);padding:8px 14px 8px 8px;gap:10px}
.cc .clock .ico{width:30px;height:30px;background:transparent}
.cc .clock .ico svg{width:20px;height:20px}
.cc .clock .t{font-size:22px}
.cc .clock .sd{font-size:10px;color:var(--ink-3)}
.cc .beat{margin-bottom:28vh}
.cc .scene{padding:30vh 0 34vh}
.cc .copy{padding:clamp(24px,2.4vw,36px);box-shadow:0 14px 40px -30px rgba(20,19,26,.3)}
.cc .cc-screen__body{padding:18px 20px}
.cc .chat{gap:14px}
.cc .cc-lede{margin-top:1.2rem}
@media (max-width:820px){
.cc .beat{margin-bottom:14vh}
.cc .scene{padding:10vh 0 16vh}
.cc .scene:first-child{padding-top:24px}
.cc .copy{padding:22px 20px}
.cc .cc-screen__body{padding:14px}
.cc .clock{padding:5px 10px 5px 5px;gap:6px}
.cc .clock .ico{width:22px;height:22px}
.cc .clock .ico svg{width:15px;height:15px}
.cc .clock .t{font-size:16px}
.cc .rail__tick em, .cc .rail__tick.cur span{display:none}
}
.cc .scrollcue{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);font-family:var(--mono);color:var(--ink-3);font-size:11px;letter-spacing:.16em;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:6px}
.cc .scrollcue i{width:2px;height:24px;background:linear-gradient(var(--ink-3),transparent);animation:cue 1.6s ease-in-out infinite}
@media (max-width:820px){
.cc .scrollcue{display:none}
}

/* ==========================================================================
   Containing it in the page
   clara-crew runs as a document of its own: a fixed full viewport stage under a
   fixed nav and rail, with a narrow story column scrolling over it. Here the
   same thing has to sit inside the page's ordinary 1180px column, so the rail
   and the stage are wrapped in one sticky pin and the story is pulled back up
   over it with a negative margin. Nothing about the camera needed changing,
   because app.js already measures everything off the stage's own rect.
   ========================================================================== */
.cc {
  --navH: 0px;
  --railH: 42px;
  --topH: 0px;
  --col: clamp(320px, 36%, 470px);
  --ccH: min(66vh, 600px);
  /* the page header is 64px standalone and --tpx-h on talkpush.com */
  --ccTop: calc(var(--tpx-h, 64px) + 12px);
  position: relative;
}

.cc__wrap { position: relative; }

.cc__pin {
  position: sticky;
  top: var(--ccTop);
  z-index: 2;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--paper);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(20,19,26,0.04), 0 18px 46px -22px rgba(20,19,26,0.26);
}

/* the rail loses its fixed full width placement and becomes the pin's header */
.cc .rail {
  position: relative; left: auto; right: auto; top: auto;
  height: var(--railH); z-index: 2;
  background: var(--paper); backdrop-filter: none; -webkit-backdrop-filter: none;
}
.cc .rail__track { left: clamp(18px, 3vw, 44px); right: clamp(64px, 8vw, 120px); }

/* the stage stops being the viewport and becomes a panel */
.cc .cc-stage {
  position: relative; left: auto; right: auto; top: auto; bottom: auto;
  height: var(--ccH); z-index: 1; border-radius: 0;
}

/* the scenes ride back up over the pin */
.cc .story {
  margin-top: calc((var(--ccH) + var(--railH) + 2px) * -1);
  position: relative; z-index: 3;
  padding-left: clamp(14px, 2.2vw, 30px);
}
.cc .scene:first-child { padding-top: 7vh; }

/* The page already carries a header, so the section does not need the story's
   own nav, its scroll cue, or its closing panel. */
.cc .scrollcue { display: none; }

@media (max-width: 820px) {
  /* On a phone the pin holds the top of the viewport and the cards scroll
     underneath it rather than across it, which is what clara-crew already does.
     That means undoing the pulled-up margin AND lifting the pin above the story,
     which on desktop deliberately sits on top of the stage. */
  .cc { --ccH: 40vh; --ccTop: calc(var(--tpx-h, 56px) + 6px); }
  .cc__pin { z-index: 20; }
  .cc .story { margin-top: 0; width: auto; padding: 1.4rem 2px 0; }
  .cc .cc-stage { height: var(--ccH); border-bottom: 0; }
  .cc .scene:first-child { padding-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .cc .cc-stage, .cc .office { transition: none !important; }
}

/* ==========================================================================
   The story scrolls inside itself, not down the page
   The section used to cost the page about ten screens of scroll, which a reader
   who did not want the story had to wade through. Now .cc__frame is one screen
   tall whatever happens inside it: the pin fills it, and the scenes scroll in
   .cc__scroll on top. Reaching the end of the story chains to the page as
   normal, and the rail doubles as a jump-to-scene control.
   ========================================================================== */
.cc__frame {
  position: relative;
  height: var(--ccFrame);
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--paper);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(20,19,26,0.04), 0 18px 46px -22px rgba(20,19,26,0.26);
}
.cc { --ccFrame: min(86vh, 780px); }

/* the pin stops being sticky; the frame is what holds position now */
.cc .cc__pin,
.cc__pin {
  position: absolute; inset: 0; top: 0;
  z-index: 1;
  border: 0; border-radius: 0; box-shadow: none; background: transparent;
}
.cc .cc-stage { height: calc(var(--ccFrame) - var(--railH) - 2px); }

.cc__scroll {
  position: absolute; inset: 0;
  z-index: 3;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scroll-behavior: smooth;
}
.cc__scroll:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }

/* the scenes sit in normal flow inside the scroller now */
.cc .story { margin-top: 0; padding-top: var(--railH); }
.cc .scene { padding: 30% 0 34%; }
.cc .scene:first-child { padding-top: 24%; }
.cc .scene:last-child { padding-bottom: 46%; }

/* a way out that does not depend on finding the edge of the panel */
/* bottom right, so it does not sit on top of the rail's "now" readout */
.cc__skip {
  position: absolute; right: 12px; bottom: 12px; z-index: 6;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--line); background: rgba(255,253,248,0.92);
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-3); text-decoration: none; cursor: pointer;
}
.cc__skip:hover { color: var(--ink); border-color: var(--ink); }

@media (max-width: 820px) {
  /* On a phone the cards are full width, so overlaying them on the stage hides it
     completely. Inside the frame the two stack instead: the floor on top, the
     story scrolling in the space underneath it. */
  .cc { --ccFrame: min(86vh, 680px); --ccH: 34vh; }
  .cc__pin { bottom: auto; height: calc(var(--railH) + var(--ccH)); }
  .cc .cc-stage { height: var(--ccH); border-bottom: 1px solid var(--line); }
  .cc__scroll { top: calc(var(--railH) + var(--ccH)); }
  .cc .story { padding: 0 2px; width: auto; }
  .cc .scene { padding: 10% 0 14%; }
  .cc .scene:first-child { padding-top: 8%; }
  .cc .scene:last-child { padding-bottom: 26%; }
}

/* ---------- 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; } }