@charset "UTF-8";
/* ============================================================
   80-tasks landing — base: scoped design tokens + base shell.
   Ported from the design handoff (req-workboard-landing-story.html),
   scoped under .t80. The verbatim SocialTalent tokens.css snapshot is
   reproduced here as custom properties on .t80 (light-only — the
   dark-theme + prefers-color-scheme blocks are intentionally dropped,
   this page ships data-theme="light"). @font-face is NOT ported — the
   theme already loads "TT Hoves Pro". Nav/footer chrome is NOT ported —
   the theme header/footer supply them.
   ============================================================ */
.t80 {
  /* Colour — brand */
  --color-brand-emerald: #147d5c;
  --color-brand-ocean: #02271f;
  --color-brand-black: #1d1d1b;
  --color-brand-white: #ffffff;
  --color-green-forest: #124035;
  --color-green-leaf: #00a75d;
  --color-green-moss: #659a7e;
  --color-green-lime: #97f881;
  --color-green-lime-hover: #88ff00;
  --color-green-pistache: #cbe8c5;
  --color-green-pastel: #c2f4c4;
  --color-green-pear: #e2ffdc;
  --color-green-frost: #ebf5eb;
  --color-green-snow: #f2f6f2;
  /* Colour — neutral & status */
  --color-neutral-black: #1d1d1b;
  --color-neutral-90: #343432;
  --color-neutral-75: #545452;
  --color-neutral-50: #8a8a89;
  --color-neutral-25: #c1c1c1;
  --color-neutral-10: #e2e2e2;
  --color-neutral-5: #ededed;
  --color-neutral-2-5: #f3f3f2;
  --color-neutral-white: #ffffff;
  --color-status-warning: #e1931d;
  --color-status-stop: #d91919;
  --color-status-stop-hover: #a91b1b;
  --color-status-stop-dark: #f87171;
  --color-status-link: #0038ff;
  --color-status-link-dark: #87a0ff;
  --color-overlay-35: #1d1d1b59;
  /* Spacing */
  --space-0: 0px;
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 8px;
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 20px;
  --space-7: 24px;
  --space-8: 32px;
  --space-9: 40px;
  --space-10: 48px;
  --space-11: 64px;
  --space-12: 80px;
  --space-13: 96px;
  /* Radius */
  --radius-none: 0px;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-full: 9999px;
  /* Type */
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-base: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 30px;
  --font-size-4xl: 36px;
  --font-line-height-xs: 16px;
  --font-line-height-sm: 20px;
  --font-line-height-base: 24px;
  --font-line-height-lg: 28px;
  --font-line-height-xl: 28px;
  --font-family-display: "TT Hoves Pro", system-ui, sans-serif;
  --font-family-body: "TT Hoves Pro", system-ui, sans-serif;
  --font-family-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-demibold: 600;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  /* Semantic aliases used by the page (light-only) */
  --color-bg-default: var(--color-brand-white);
  --color-bg-subtle: var(--color-neutral-2-5);
  --color-bg-muted: var(--color-neutral-5);
  --color-bg-brand-subtle: var(--color-green-frost);
  --color-text-primary: var(--color-brand-black);
  --color-text-secondary: var(--color-neutral-75);
  --color-text-tertiary: var(--color-neutral-75);
  --color-text-brand: var(--color-brand-emerald);
  --color-border-default: var(--color-neutral-10);
  --color-border-focus: var(--color-green-moss);
  --color-success-default: var(--color-brand-emerald);
  --color-success-subtle: var(--color-green-pear);
  --color-success-text: var(--color-green-forest);
  /* Additive page-only tokens (derived, no new hex) */
  --cwb-shadow-sm: 0 1px 3px rgba(2, 39, 31, 0.06), 0 1px 2px rgba(2, 39, 31, 0.04);
  --cwb-shadow-md: 0 4px 16px rgba(2, 39, 31, 0.1);
  --cwb-shadow-lg: 0 16px 40px rgba(2, 39, 31, 0.22);
  /* Motion curves */
  --spring-snappy: cubic-bezier(0.34, 1.56, 0.64, 1);
  --spring-smooth: cubic-bezier(0.33, 1, 0.68, 1);
  --ease-snap: cubic-bezier(0.22, 1, 0.36, 1);
  /* Page base (scoped — body/html rules can't be nested, so set here) */
  font-family: var(--font-family-body);
  font-size: var(--font-size-base);
  line-height: 1.55;
  color: var(--color-brand-black);
  background: var(--color-brand-white);
}
.t80 *,
.t80 *::before,
.t80 *::after {
  box-sizing: border-box;
}
/* ============================================================
   80-tasks landing — vendored section styles.
   Ported from the design handoff (req-workboard-landing-story.html):
   the second base \3c style> block + the #r2-additions overrides, in
   source order (r2 wins on conflict), scoped under .t80. The dead
   families flagged in the handoff are dropped (.cwb-*, .board-*,
   .support/.readout, .claim/.statrow/.viz/.tiles, .cards/.card,
   .site-header/.site-footer, .faq details/summary). @font-face and
   nav/footer chrome are omitted — the theme supplies them. The hero
   load-entrance keys off .t80.entered (not <body>.entered) so it can
   never touch theme chrome. The #hstory scroll-story lives in
   _hstory.scss (top-level, self-scoped by id).
   ============================================================ */
.t80 a {
  color: var(--color-brand-emerald);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.t80 a:hover {
  color: var(--color-green-forest);
}
.t80 .dark a {
  color: var(--color-green-lime);
}
.t80 .dark a:hover {
  color: var(--color-green-lime-hover);
}
.t80 h1,
.t80 h2,
.t80 h3 {
  font-family: var(--font-family-display);
  margin: 0;
  text-wrap: pretty;
}
.t80 p {
  margin: 0;
  text-wrap: pretty;
}
.t80 .wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-8);
}
.t80 .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  font-family: var(--font-family-body);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  border-radius: var(--radius-full);
  padding: 14px var(--space-8);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.t80 .btn-emerald {
  background: var(--color-brand-emerald);
  color: var(--color-brand-white);
}
.t80 .btn-emerald:hover {
  background: var(--color-green-forest);
  color: var(--color-brand-white);
}
.t80 .dark a.btn-emerald {
  color: var(--color-brand-white);
}
.t80 .btn-lime {
  background: #96f782;
  color: #03261f;
  height: 42px;
  padding: 0 20px;
  font-size: 14px;
  font-weight: 600;
  gap: 8px;
}
.t80 .btn-lime:hover {
  background: #b6ffa5;
  transform: translateY(-1px);
}
.t80 .dark a.btn-lime {
  color: #03261f;
}
.t80 .btn-ghost {
  background: transparent;
  color: var(--color-brand-white);
  border: 1px solid var(--color-green-moss);
}
.t80 .btn-ghost:hover {
  border-color: var(--color-green-lime);
  color: var(--color-green-lime);
}
.t80 .dark a.btn-ghost {
  color: var(--color-brand-white);
}
.t80 .dark a.btn-ghost:hover {
  color: var(--color-green-lime);
}
.t80 :focus-visible {
  outline: 3px solid var(--color-green-leaf);
  outline-offset: 2px;
}
.t80 .dark :focus-visible {
  outline-color: var(--color-green-lime);
}
.t80 .pill {
  display: inline-block;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border: 1px solid;
  border-radius: var(--radius-full);
  padding: 6px 14px;
  line-height: 1.4;
}
.t80 .pill-lime {
  color: var(--color-green-lime);
  border-color: color-mix(in srgb, var(--color-green-lime) 45%, transparent);
}
.t80 .pill-emerald {
  color: var(--color-brand-emerald);
  border-color: color-mix(in srgb, var(--color-brand-emerald) 40%, transparent);
}
.t80 .dark {
  background: var(--color-brand-ocean);
  color: var(--color-brand-white);
}
.t80 [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.t80 [data-reveal].in {
  opacity: 1;
  transform: none;
}
.t80 {
  /* Hero */
}
.t80 .hero {
  padding: calc(68px + var(--space-12)) 0 var(--space-13);
  position: relative;
  overflow: hidden;
}
.t80 .hero-copy {
  max-width: 900px;
}
.t80 .hero h1 {
  font-size: clamp(42px, 6vw, 78px);
  line-height: 1.02;
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.025em;
  color: var(--color-brand-white);
  margin: var(--space-7) 0;
}
.t80 .hero .sub {
  font-size: clamp(17px, 1.6vw, var(--font-size-xl));
  line-height: 1.55;
  color: var(--color-green-pistache);
  max-width: 660px;
}
.t80 .hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  margin-top: var(--space-9);
}
.t80 {
  /* Problem */
}
.t80 .problem {
  padding: var(--space-13) 0;
}
.t80 .problem-inner {
  max-width: 860px;
}
.t80 .problem h2 {
  margin: var(--space-6) 0 var(--space-7);
}
.t80 .problem p {
  font-size: clamp(17px, 1.6vw, var(--font-size-xl));
  line-height: 1.6;
  color: var(--color-neutral-75);
}
.t80 {
  /* Benefits */
}
.t80 .benefits {
  padding: var(--space-13) 0;
}
.t80 .benefits h2 {
  margin: var(--space-6) 0 var(--space-10);
  max-width: 680px;
}
.t80 {
  /* How she works */
}
.t80 .how {
  padding: var(--space-13) 0;
}
.t80 .how-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: var(--space-12);
  align-items: center;
}
.t80 .how h2 {
  color: var(--color-brand-white);
  margin: var(--space-6) 0 var(--space-7);
}
.t80 .how .body {
  font-size: var(--font-size-lg);
  line-height: 1.6;
  color: var(--color-green-pistache);
}
.t80 .adoption {
  text-align: left;
}
.t80 .adoption .num {
  font-size: clamp(80px, 9vw, 140px);
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--color-green-lime);
  font-variant-numeric: tabular-nums;
}
.t80 .adoption .cap {
  font-size: var(--font-size-sm);
  color: var(--color-green-moss);
  margin-top: var(--space-4);
  max-width: 260px;
}
.t80 .how-points {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
  margin-top: var(--space-11);
}
.t80 .how-point {
  border-top: 1px solid var(--color-green-forest);
  padding-top: var(--space-6);
}
.t80 .how-point h3 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-green-lime);
  margin-bottom: var(--space-3);
}
.t80 .how-point p {
  font-size: var(--font-size-sm);
  color: var(--color-green-pistache);
}
.t80 {
  /* Proof */
}
.t80 .proof {
  padding: var(--space-13) 0;
}
.t80 .proof h2 {
  margin: var(--space-6) 0 var(--space-5);
}
.t80 .proof .intro {
  color: var(--color-neutral-75);
  font-size: var(--font-size-lg);
  max-width: 700px;
  margin-bottom: var(--space-10);
}
.t80 .proof-row {
  display: grid;
  grid-template-columns: 64px 260px 1fr;
  gap: var(--space-8);
  padding: var(--space-7) 0;
  border-top: 1px solid var(--color-neutral-10);
}
.t80 .proof-row:last-of-type {
  border-bottom: 1px solid var(--color-neutral-10);
}
.t80 .proof-row .idx {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.12em;
  color: var(--color-brand-emerald);
  padding-top: 5px;
}
.t80 .proof-row h3 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
}
.t80 .proof-row p {
  color: var(--color-neutral-75);
}
.t80 {
  /* FAQ */
}
.t80 .faq {
  padding: var(--space-13) 0;
}
.t80 .faq h2 {
  margin: var(--space-6) 0 var(--space-10);
}
.t80 {
  /* Closing */
}
.t80 .closing {
  padding: var(--space-13) 0;
  text-align: center;
}
.t80 .closing h2 {
  font-size: clamp(34px, 4.8vw, 60px);
  line-height: 1.05;
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.025em;
  color: var(--color-brand-white);
}
.t80 .closing .body {
  margin: var(--space-7) auto var(--space-9);
  max-width: 560px;
  font-size: var(--font-size-lg);
  color: var(--color-green-pistache);
}
.t80 .closing .tagline {
  margin-top: var(--space-10);
  font-size: var(--font-size-base);
  letter-spacing: normal;
  color: color-mix(in srgb, var(--color-brand-white) 60%, transparent);
}
.t80 {
  /* ===================== #r2-additions overrides ===================== */
}
.t80 .wrap {
  padding-inline: 24px;
}
@media (min-width: 1024px) {
  .t80 .wrap {
    padding-inline: 48px;
  }
}
.t80 .problem-inner {
  max-width: 1200px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  grid-template-areas: "head rail" "main rail";
  -moz-column-gap: var(--space-13);
       column-gap: var(--space-13);
  align-items: start;
}
.t80 .problem-head {
  grid-area: head;
}
.t80 .problem-main {
  grid-area: main;
  min-width: 0;
}
.t80 .problem p {
  max-width: 56ch;
  margin-bottom: 0;
}
.t80 .problem-rail {
  grid-area: rail;
  min-width: 0;
  align-self: center;
}
.t80 .problem-bars {
  max-width: 320px;
  margin: 0;
}
.t80 .problem-bars .eyebrow {
  display: block;
  margin-bottom: var(--space-6);
}
.t80 .pbar-row {
  display: grid;
  grid-template-columns: 2.6em 1fr auto;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
.t80 .pbar-year {
  font-size: 12px;
  font-weight: var(--font-weight-demibold);
  letter-spacing: 0.04em;
  color: var(--color-neutral-50);
  font-variant-numeric: tabular-nums;
}
.t80 .pbar-track {
  height: 9px;
  min-width: 0;
}
.t80 .pbar-fill {
  display: block;
  height: 100%;
  width: var(--w);
  border-radius: 2px;
  background: color-mix(in srgb, var(--color-brand-emerald) 30%, var(--color-brand-white));
  transition: width 0.4s var(--ease-snap);
}
.t80 .pbar-row--lead .pbar-fill {
  background: var(--color-brand-emerald);
}
.t80 .pbar-val {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-neutral-75);
  font-variant-numeric: tabular-nums;
}
.t80 .pbar-row--lead .pbar-val {
  color: var(--color-brand-emerald);
}
.t80 .pbar-fill {
  width: 0;
}
.t80 [data-reveal].in .pbar-fill {
  width: var(--w);
}
.t80 [data-reveal].in .pbar-row:nth-child(2) .pbar-fill {
  transition-delay: 0.06s;
}
.t80 [data-reveal].in .pbar-row:nth-child(3) .pbar-fill {
  transition-delay: 0.12s;
}
.t80 [data-reveal].in .pbar-row:nth-child(4) .pbar-fill {
  transition-delay: 0.18s;
}
@media (prefers-reduced-motion: reduce) {
  .t80 .pbar-fill {
    transition: none;
    width: var(--w);
  }
}
@media (max-width: 900px) {
  .t80 .problem-inner {
    grid-template-columns: 1fr;
    grid-template-areas: "head" "main" "rail";
    row-gap: var(--space-9);
  }
  .t80 .problem-bars {
    max-width: none;
  }
}
.t80 h1,
.t80 h2,
.t80 h3 {
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.03em;
}
.t80 .display-1 {
  font-size: clamp(40px, 5.5vw, 72px);
  line-height: 0.98;
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.03em;
}
.t80 .display-2 {
  font-size: clamp(30px, 4vw, 52px);
  line-height: 1;
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.03em;
}
.t80 .display-3 {
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.02;
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.028em;
}
.t80 .proof h2,
.t80 .faq h2 {
  font-size: clamp(26px, 3vw, 40px);
}
.t80 .how h2 {
  font-size: clamp(24px, 2.4vw, 34px);
}
.t80 .hero {
  position: relative;
  overflow: hidden;
  padding: calc(68px + var(--space-13)) 0 var(--space-13);
}
.t80 .hero h1 {
  font-size: clamp(2.4rem, 3.7vw, 3.3rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  margin: var(--space-6) 0;
}
.t80 .eyebrow {
  display: inline-block;
  font-family: var(--font-family-display);
  font-size: 12px;
  font-weight: var(--font-weight-demibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-brand-emerald);
  margin-bottom: var(--space-5);
}
.t80 .eyebrow-mute {
  color: var(--color-green-pistache);
}
.t80 section.dark {
  position: relative;
}
.t80 section.dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 50% at 50% 35%, rgba(20, 112, 84, 0.35), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.t80 section.dark > .wrap {
  position: relative;
  z-index: 1;
}
.t80 .dark-forest {
  background: color-mix(in srgb, var(--color-brand-ocean) 60%, var(--color-green-forest));
}
.t80 .benefits,
.t80 .faq {
  position: relative;
  background: var(--color-green-frost);
}
.t80 .faq::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 55% at 50% 12%, color-mix(in srgb, var(--color-green-pastel) 40%, transparent), transparent 62%);
  pointer-events: none;
  z-index: 0;
}
.t80 .benefits > .wrap,
.t80 .faq > .wrap {
  position: relative;
  z-index: 1;
}
.t80 .benefits {
  background: var(--color-green-frost);
}
.t80 .benefits::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 55% at 50% 12%, color-mix(in srgb, var(--color-green-pastel) 42%, transparent), transparent 62%);
  pointer-events: none;
  z-index: 0;
}
.t80 [data-reveal] {
  transform: translateY(24px);
  transition: opacity 0.6s var(--spring-snappy), transform 0.6s var(--spring-snappy);
}
.t80 [data-entry] {
  opacity: 0;
  transform: translateY(24px);
  filter: blur(8px);
  transition: opacity 0.42s var(--spring-snappy), transform 0.42s var(--spring-snappy), filter 0.42s var(--spring-snappy);
}
.t80.entered [data-entry] {
  opacity: 1;
  transform: none;
  filter: none;
}
.t80 .hero .hero-copy [data-entry]:nth-child(2) {
  transition-delay: 0.09s;
}
.t80 .hero .hero-copy [data-entry]:nth-child(3) {
  transition-delay: 0.18s;
}
.t80 .hero .hero-copy [data-entry]:nth-child(4) {
  transition-delay: 0.27s;
}
.t80 .hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
.t80 .hero-copy {
  max-width: min(860px, 74%);
  position: relative;
  z-index: 2;
}
.t80 .hero .sub {
  max-width: 68ch;
  font-size: 1.125rem;
  line-height: 1.55;
  color: color-mix(in srgb, var(--color-brand-white) 72%, transparent);
}
.t80 .hero-photo {
  width: clamp(220px, 26vw, 360px);
  aspect-ratio: 1/1;
  border-radius: var(--radius-full);
  overflow: hidden;
  background: var(--color-green-pastel);
  justify-self: end;
  box-shadow: 0 30px 80px -30px rgba(2, 39, 31, 0.55);
}
.t80 .hero-photo img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
.t80 {
  /* Benefits — bento */
}
.t80 .bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
}
.t80 .bento .cell {
  border-radius: var(--radius-2xl);
  padding: 32px;
  background: var(--color-brand-white);
  border: 1px solid rgba(3, 38, 31, 0.08);
  display: flex;
  flex-direction: column;
}
.t80 .bento .cell .tag {
  font-size: 12px;
  font-weight: var(--font-weight-demibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-brand-emerald);
}
.t80 .bento .cell h3 {
  font-size: 24px;
  line-height: 1.1;
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.02em;
  margin: 12px 0 10px;
  color: var(--color-brand-ocean);
}
.t80 .bento .cell p {
  color: color-mix(in srgb, var(--color-brand-ocean) 72%, transparent);
  font-size: 16px;
  line-height: 1.55;
}
.t80 .bento .feature {
  grid-column: span 2;
  grid-row: span 2;
  background: var(--color-green-forest);
  border-color: transparent;
  justify-content: space-between;
}
.t80 .bento .feature .tag {
  color: var(--color-green-lime);
}
.t80 .bento .feature h3 {
  color: var(--color-brand-white);
}
.t80 .bento .feature p {
  color: color-mix(in srgb, var(--color-brand-white) 78%, transparent);
}
.t80 .feature-stat {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
}
.t80 .feature-stat .fs-num {
  font-size: clamp(44px, 5vw, 64px);
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--color-green-lime);
  font-variant-numeric: tabular-nums;
}
.t80 .feature-stat .fs-label {
  font-size: 14px;
  line-height: 1.4;
  color: color-mix(in srgb, var(--color-brand-white) 80%, transparent);
  max-width: 24ch;
}
.t80 .lime-underline {
  background: linear-gradient(var(--color-green-lime), var(--color-green-lime)) 0 92%/100% 0.16em no-repeat;
}
.t80 .bento .wide {
  grid-column: span 2;
}
.t80 .adoption .num {
  font-size: clamp(6rem, 14vw, 16rem);
  line-height: 0.9;
}
.t80 .how-points {
  margin-top: var(--space-10);
}
.t80 .how-point {
  border-top: none;
  padding-top: 0;
}
.t80 .how-point h3 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-demibold);
  color: var(--color-brand-white);
  margin-bottom: var(--space-2);
}
.t80 .how-point p {
  color: var(--color-green-pistache);
}
.t80 .proof-row .idx {
  color: var(--color-green-leaf);
  display: inline-block;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.55s var(--spring-smooth);
}
.t80 [data-reveal].in .proof-row .idx {
  transform: none;
}
.t80 [data-reveal].in .proof-row:nth-child(2) .idx {
  transition-delay: 0.08s;
}
.t80 [data-reveal].in .proof-row:nth-child(3) .idx {
  transition-delay: 0.16s;
}
.t80 [data-reveal].in .proof-row:nth-child(4) .idx {
  transition-delay: 0.24s;
}
.t80 .closing .tagline {
  font-family: var(--font-family-body);
  letter-spacing: normal;
  font-size: var(--font-size-base);
  color: color-mix(in srgb, var(--color-brand-white) 60%, transparent);
}
.t80 {
  /* FAQ accordion (JS-driven, not <details>) */
}
.t80 .acc {
  margin-top: var(--space-8);
}
.t80 .acc-item {
  border-top: 1px solid color-mix(in srgb, var(--color-brand-emerald) 18%, transparent);
}
.t80 .acc-item:last-child {
  border-bottom: 1px solid color-mix(in srgb, var(--color-brand-emerald) 18%, transparent);
}
.t80 .acc-q {
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-family-display);
  font-size: clamp(18px, 1.8vw, 20px);
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-7) 0;
  text-align: left;
}
.t80 .acc-q::after {
  content: "+";
  flex: none;
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-regular);
  color: var(--color-brand-emerald);
  line-height: 1;
}
.t80 .acc-item[data-open] .acc-q::after {
  content: "−";
}
.t80 .acc-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s var(--spring-smooth);
}
.t80 .acc-item[data-open] .acc-a {
  grid-template-rows: 1fr;
}
.t80 .acc-a-inner {
  overflow: hidden;
}
.t80 .acc-a p {
  padding: 0 0 var(--space-8);
  color: var(--color-neutral-75);
  max-width: 760px;
  font-size: var(--font-size-base);
}
@media (hover: hover) {
  .t80 .btn {
    transition: background-color 0.2s var(--ease-snap), border-color 0.2s var(--ease-snap), color 0.2s var(--ease-snap), transform 0.12s var(--ease-snap);
  }
  .t80 .btn:active {
    transform: scale(0.97);
  }
  .t80 .bento .cell {
    transition: transform 0.3s var(--ease-snap), box-shadow 0.3s var(--ease-snap);
  }
  .t80 .bento .cell:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(2, 39, 31, 0.14);
  }
}
@media (max-width: 900px) {
  .t80 .hero-photo {
    display: none;
  }
  .t80 .hero-copy {
    max-width: none;
  }
  .t80 .hero-grid {
    display: block;
  }
  .t80 .bento {
    grid-template-columns: 1fr;
  }
  .t80 .bento .feature,
  .t80 .bento .wide {
    grid-column: auto;
    grid-row: auto;
  }
  .t80 .how-grid {
    grid-template-columns: 1fr;
    gap: var(--space-9);
  }
  .t80 .how-points {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
}
@media (max-width: 820px) {
  .t80 .proof-row {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
  .t80 .proof-row .idx {
    padding: 0;
  }
}
@media (max-width: 640px) {
  .t80 .hero-ctas .btn {
    width: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .t80 [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .t80 [data-entry] {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
  .t80 .proof-row .idx {
    transform: none !important;
  }
  .t80 .acc-a {
    transition: none;
  }
  .t80 .bento .cell {
    transition: none;
  }
  .t80 *::before,
  .t80 *::after {
    transition: none !important;
    animation: none !important;
  }
}
.t80 {
  /* ===================== Analysis (#sec-analysis) ===================== */
}
.t80 #sec-analysis {
  --frost: var(--color-green-frost);
  --lime: var(--color-green-lime);
  --leaf: var(--color-green-leaf);
  --forest: var(--color-green-forest);
  --ocean: var(--color-brand-ocean);
  padding: var(--space-13) 0;
}
.t80 .anl__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 72px;
  align-items: center;
}
.t80 .anl__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
}
.t80 .anl__h {
  margin: 0;
  font-weight: var(--font-weight-medium);
  font-size: clamp(34px, 4vw, 56px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--color-brand-white);
}
.t80 .anl__h .em {
  color: var(--color-brand-white);
}
.t80 .anl__stats {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}
.t80 .anl__stat {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  text-align: left;
  padding: 16px 12px 16px 18px;
  border: 0;
  border-left: 3px solid transparent;
  border-radius: 0 10px 10px 0;
  opacity: 0.42;
  transition: opacity 0.18s var(--ease-snap), background 0.18s var(--ease-snap);
  background: transparent;
  cursor: pointer;
  font: inherit;
  color: inherit;
  width: 100%;
}
.t80 .anl__stat.is-on {
  opacity: 1;
}
.t80 .anl__stat:hover {
  background: rgba(235, 245, 235, 0.05);
}
.t80 .anl__pct {
  font-size: clamp(34px, 3.4vw, 48px);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.t80 .anl__col {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.t80 .anl__label {
  font-size: 19px;
  font-weight: 600;
  color: var(--color-brand-white);
  letter-spacing: -0.01em;
}
.t80 .anl__label em {
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-left: 8px;
}
.t80 .anl__desc {
  font-size: 16px;
  line-height: 1.55;
  color: rgba(235, 245, 235, 0.62);
  max-width: 42ch;
}
.t80 .anl__stat[data-cat=auto] {
  border-left-color: var(--color-green-lime);
}
.t80 .anl__stat[data-cat=auto] .anl__pct,
.t80 .anl__stat[data-cat=auto] .anl__label em {
  color: var(--color-green-lime);
}
.t80 .anl__stat[data-cat=hybrid] {
  border-left-color: var(--color-green-leaf);
}
.t80 .anl__stat[data-cat=hybrid] .anl__pct,
.t80 .anl__stat[data-cat=hybrid] .anl__label em {
  color: var(--color-green-leaf);
}
.t80 .anl__stat[data-cat=human] {
  border-left-color: rgba(235, 245, 235, 0.35);
}
.t80 .anl__stat[data-cat=human] .anl__pct {
  color: rgba(235, 245, 235, 0.82);
}
.t80 .anl__stat[data-cat=human] .anl__label em {
  color: rgba(235, 245, 235, 0.55);
}
.t80 .anl__src {
  margin: 6px 0 0;
  font-size: 13.5px;
  color: rgba(235, 245, 235, 0.45);
}
.t80 .anl__viz {
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.t80 .anl__tiles {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 10px;
}
.t80 .anl__tile {
  aspect-ratio: 1/1;
  border-radius: 9px;
  background: rgba(235, 245, 235, 0.06);
  border: 1px solid rgba(235, 245, 235, 0.1);
  transition: background 0.18s var(--ease-snap), border-color 0.18s var(--ease-snap), transform 0.18s var(--ease-snap), opacity 0.18s var(--ease-snap);
}
.t80 .anl__tile[data-cat=auto] {
  background: var(--color-green-lime);
  border-color: transparent;
}
.t80 .anl__tile[data-cat=hybrid] {
  background: var(--color-green-leaf);
  border-color: transparent;
}
.t80 .anl__tile.is-dim {
  opacity: 0.22;
}
.t80 .anl__tile.is-hit {
  transform: scale(1.06);
}
.t80 .anl__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  font-size: 14px;
  font-weight: 600;
}
.t80 .anl__key {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(235, 245, 235, 0.8);
}
.t80 .anl__key i {
  width: 12px;
  height: 12px;
  border-radius: 4px;
  background: rgba(235, 245, 235, 0.14);
}
.t80 .anl__key[data-cat=auto] i {
  background: var(--color-green-lime);
}
.t80 .anl__key[data-cat=hybrid] i {
  background: var(--color-green-leaf);
}
.t80 .anl__key b {
  font-weight: var(--font-weight-medium);
  color: rgba(235, 245, 235, 0.5);
}
@media (max-width: 1000px) {
  .t80 .anl__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 44px;
  }
  .t80 .anl__stat {
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 14px;
    padding: 14px 8px 14px 14px;
  }
  .t80 .anl__tiles {
    gap: 7px;
  }
}
/* ============================================================
   80-tasks landing — hours-returned horizontal scroll story.
   Ported verbatim from the design handoff (#hstory-css block). Kept
   TOP-LEVEL (not nested under .t80): the block is fully self-scoped by
   the #hstory id and redeclares the tokens it needs locally, so it lifts
   as one unit. html.reduced / @media / @keyframes and the global .stnav
   retract must stay at the top level to match ancestors correctly.
   ============================================================ */
/* Page-level guards (the story translates a full-width track; clip the
   page so it can never produce a horizontal scrollbar). */
html {
  scroll-behavior: smooth;
}
body.t80-page {
  overflow-x: clip;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}
#hstory {
  --color-brand-emerald: #147d5c;
  --color-brand-ocean: #02271f;
  --color-brand-black: #1d1d1b;
  --color-brand-white: #ffffff;
  --color-green-forest: #124035;
  --color-green-leaf: #00a75d;
  --color-green-moss: #659a7e;
  --color-green-lime: #97f881;
  --color-green-lime-hover: #88ff00;
  --color-green-pistache: #cbe8c5;
  --color-green-pastel: #c2f4c4;
  --color-green-pear: #e2ffdc;
  --color-green-frost: #ebf5eb;
  --color-green-snow: #f2f6f2;
  --color-neutral-black: #1d1d1b;
  --color-neutral-90: #343432;
  --color-neutral-75: #545452;
  --color-neutral-50: #8a8a89;
  --color-neutral-25: #c1c1c1;
  --color-neutral-10: #e2e2e2;
  --color-neutral-5: #ededed;
  --color-neutral-2-5: #f3f3f2;
  --color-neutral-white: #ffffff;
  --color-status-link: #0038ff;
  --space-3: 8px;
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 20px;
  --space-7: 24px;
  --space-8: 32px;
  --space-9: 40px;
  --space-10: 48px;
  --space-11: 64px;
  --space-12: 80px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-full: 9999px;
  --font-display: "TT Hoves Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "TT Hoves Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bg: var(--color-brand-white);
  --bg-snow: var(--color-green-snow);
  --ink: var(--color-brand-black);
  --ink-2: var(--color-neutral-75);
  --ink-3: var(--color-neutral-50);
  --line: var(--color-neutral-10);
  --brand: var(--color-brand-emerald);
  --ocean: var(--color-brand-ocean);
  --lime: var(--color-green-lime);
  --frost: var(--color-green-frost);
}
#hstory * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
#hstory {
  -webkit-text-size-adjust: 100%;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.42;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
#hstory a {
  color: var(--brand);
  text-decoration: none;
}
#hstory a:hover {
  color: var(--color-green-forest);
}
#hstory b,
#hstory strong {
  font-weight: 700;
}
#hstory .tnum {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
#hstory .counter {
  position: fixed;
  z-index: 60;
  top: 16px;
  left: 50%;
  transform: translateX(-50%) translateY(-160%);
  opacity: 0;
  transition: transform 0.55s cubic-bezier(0.16, 0.84, 0.3, 1), opacity 0.4s ease;
  display: flex;
  align-items: baseline;
  gap: var(--space-6);
  padding: 12px 22px;
  border-radius: var(--radius-full);
  background: var(--ocean);
  color: var(--color-green-snow);
  box-shadow: 0 10px 34px -12px rgba(2, 39, 31, 0.6);
  white-space: nowrap;
  max-width: calc(100vw - 24px);
}
#hstory .counter.is-on {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}
#hstory .counter__k {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
#hstory .counter__label {
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-green-moss);
  font-weight: 600;
}
#hstory .counter__val {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
#hstory .counter__num {
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  color: var(--lime);
}
#hstory .counter__unit {
  font-size: 13px;
  color: var(--color-green-pistache);
  font-weight: 500;
}
#hstory .counter__fte {
  font-size: 13px;
  color: var(--color-green-pistache);
  font-weight: 500;
  border-left: 1px solid rgba(203, 232, 197, 0.28);
  padding-left: var(--space-6);
}
#hstory .counter__fte b {
  color: var(--color-brand-white);
  font-weight: 700;
}
#hstory .rail {
  position: fixed;
  z-index: 55;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  width: min(560px, 84vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 11px;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
#hstory .rail.is-on {
  opacity: 1;
}
#hstory .rail__line {
  position: relative;
  width: 100%;
  height: 2px;
  background: var(--color-neutral-10);
  border-radius: 2px;
  overflow: hidden;
}
#hstory .rail__line i {
  position: absolute;
  inset: 0 auto 0 0;
  height: 100%;
  width: 0;
  background: var(--brand);
  transition: width 0.12s linear;
}
#hstory .rail__dots {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
#hstory .rail__dot {
  position: relative;
  width: 9px;
  height: 9px;
  border-radius: var(--radius-full);
  background: var(--color-neutral-25);
  transition: background 0.3s, transform 0.3s;
}
#hstory .rail__dot.is-done {
  background: var(--brand);
}
#hstory .rail__dot.is-active {
  background: var(--color-green-leaf);
  transform: scale(1.55);
}
#hstory .rail__dot span {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-2);
  background: var(--bg);
  padding: 2px 8px;
  border-radius: var(--radius-full);
  opacity: 0;
  transition: opacity 0.25s;
  white-space: nowrap;
  box-shadow: 0 2px 8px -3px rgba(0, 0, 0, 0.25);
}
#hstory .rail__dot.is-active span {
  opacity: 1;
}
#hstory .hscroll {
  position: relative;
  height: calc(var(--total, 1000) * 1vh);
}
#hstory .hviewport {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}
#hstory .htrack {
  display: flex;
  height: 100%;
  will-change: transform;
}
#hstory .panel {
  flex: 0 0 100vw;
  width: 100vw;
  height: 100%;
  overflow: hidden;
  position: relative;
}
#hstory .panel__inner {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  padding: 74px 0 34px;
}
#hstory .wrap {
  width: min(1120px, 90vw);
  margin: 0 auto;
}
#hstory .eyebrow {
  display: block;
  font-size: 12px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--brand);
  margin-bottom: var(--space-5);
}
#hstory .s0 .eyebrow {
  color: var(--ink-3);
}
#hstory .cost__lead {
  font-size: clamp(26px, 4.3vw, 50px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.02em;
  max-width: 16ch;
}
#hstory .cost__lead .in {
  position: relative;
  display: inline-flex;
  align-items: baseline;
}
#hstory .hires {
  font: inherit;
  color: var(--brand);
  font-weight: 700;
  background: transparent;
  border: 0;
  border-bottom: 2px dashed var(--color-green-moss);
  width: 5.4ch;
  padding: 0 2px;
  text-align: center;
  border-radius: 0;
  outline: none;
  caret-color: var(--brand);
}
#hstory .hires:focus {
  border-bottom-color: var(--brand);
  background: var(--frost);
}
#hstory .cost__big {
  margin-top: var(--space-9);
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}
#hstory .cost__num {
  font-size: clamp(64px, 13vw, 168px);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--ink);
}
#hstory .cost__num::before {
  content: "≈";
  font-size: 0.42em;
  color: var(--ink-3);
  margin-right: 0.12em;
  vertical-align: 0.14em;
  font-weight: 600;
}
#hstory .cost__unit {
  font-size: clamp(20px, 3vw, 30px);
  font-weight: 600;
  color: var(--ink-2);
}
#hstory .cost__foot {
  margin-top: var(--space-7);
  font-size: clamp(15px, 1.7vw, 19px);
  color: var(--ink-2);
  max-width: 40ch;
}
#hstory .scrollcue {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 26px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
}
#hstory .scrollcue i {
  width: 34px;
  height: 1px;
  background: linear-gradient(90deg, var(--color-neutral-25), transparent);
  animation: cuepulse 2.2s ease-in-out infinite;
}
@keyframes cuepulse {
  0%, 100% {
    opacity: 0.3;
    transform: scaleX(0.6);
  }
  50% {
    opacity: 1;
    transform: scaleX(1);
  }
}
#hstory .stage__head {
  margin-bottom: var(--space-7);
}
#hstory .stage__idx {
  font-size: 12px;
  letter-spacing: 0.13em;
  font-weight: 600;
  color: var(--brand);
}
#hstory .stage__title {
  font-size: clamp(30px, 5vw, 58px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1;
  margin-top: 6px;
}
#hstory .stage__title .tt {
  color: var(--ink-3);
  font-weight: 600;
}
#hstory .stage {
  display: grid;
  grid-template-columns: 1fr 44px 1fr;
  align-items: stretch;
}
#hstory .col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
#hstory .col__cap {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 7px;
  padding: 4px 13px 4px 4px;
  border-radius: var(--radius-full);
  font-size: 12.5px;
  letter-spacing: 0.005em;
  text-transform: none;
  font-weight: 600;
  margin-bottom: var(--space-4);
}
#hstory .col--team .col__cap {
  background: var(--color-neutral-5);
  color: var(--ink-2);
}
#hstory .col--cara .col__cap {
  background: var(--frost);
  color: var(--color-green-forest);
}
#hstory .col__cap .badge {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  flex: none;
}
#hstory .col--team .col__cap .badge {
  background: var(--color-brand-white);
  color: var(--ink-3);
}
#hstory .col--cara .col__cap .badge {
  background: var(--brand);
  color: #fff;
}
#hstory .col__cap .badge svg {
  width: 14px;
  height: 14px;
  stroke-width: 2.2;
}
#hstory .lane {
  display: flex;
  flex-direction: column;
  gap: 9px;
  flex: 1;
}
#hstory .col--cara .lane {
  position: relative;
}
#hstory .col--cara .lane::before {
  content: "";
  position: absolute;
  inset: 0;
  border-left: 2px dashed var(--line);
  left: -23px;
  width: 0;
}
#hstory .gut {
  display: grid;
  place-items: center;
  color: var(--color-neutral-25);
}
#hstory .gut svg {
  width: 20px;
  height: 20px;
}
#hstory .task {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 14px;
  border-radius: var(--radius-lg);
  font-size: 14px;
  font-weight: 500;
  will-change: transform, opacity;
  border: 1px solid var(--line);
  background: #fff;
}
#hstory .task__n {
  flex: none;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-3);
  width: 22px;
  height: 22px;
  border-radius: var(--radius-md);
  background: var(--color-neutral-2-5);
  display: grid;
  place-items: center;
  font-variant-numeric: tabular-nums;
}
#hstory .task__name {
  flex: 1;
  line-height: 1.2;
  min-width: 0;
}
#hstory .task__tick {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-full);
  display: grid;
  place-items: center;
}
#hstory .task--team {
  color: var(--ink);
}
#hstory .task--team .task__tick {
  background: var(--color-neutral-5);
}
#hstory .task--team .task__tick svg {
  opacity: 0.35;
}
#hstory .task--cara {
  background: var(--frost);
  border-color: var(--color-green-pastel);
  color: var(--color-green-forest);
}
#hstory .task--cara .task__n {
  background: #fff;
  color: var(--brand);
}
#hstory .task--cara .task__tick {
  background: var(--brand);
  color: #fff;
}
#hstory .stage__foot {
  margin-top: var(--space-8);
  min-height: 52px;
}
#hstory .stage__note {
  font-size: clamp(16px, 2vw, 22px);
  font-weight: 600;
  color: var(--ink);
  max-width: 34ch;
}
#hstory .subtotal {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-size: clamp(15px, 1.8vw, 20px);
  color: var(--ink-2);
  font-weight: 500;
}
#hstory .subtotal b {
  color: var(--brand);
  font-weight: 700;
  font-size: 1.15em;
}
#hstory .hy {
  max-width: 760px;
}
#hstory .hy__title {
  font-size: clamp(28px, 4.6vw, 52px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.02;
  margin-bottom: var(--space-8);
}
#hstory .hy__bar {
  position: relative;
  height: 96px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--color-neutral-2-5);
  display: flex;
}
#hstory .hy__fill {
  width: 0;
  height: 100%;
  background: repeating-linear-gradient(135deg, var(--brand), var(--brand) 11px, var(--color-green-leaf) 11px, var(--color-green-leaf) 22px);
  opacity: 0.9;
}
#hstory .hy__lab {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  font-weight: 600;
}
#hstory .hy__lab--cara {
  left: 20px;
  color: #fff;
  text-shadow: 0 1px 3px rgba(2, 39, 31, 0.35);
}
#hstory .hy__lab--team {
  right: 20px;
  color: var(--ink-2);
}
#hstory .hy__meta {
  position: absolute;
  bottom: 9px;
  left: 20px;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
}
#hstory .hy__cap {
  margin-top: var(--space-8);
  font-size: clamp(17px, 2.1vw, 23px);
  font-weight: 500;
  color: var(--ink);
  max-width: 44ch;
  line-height: 1.35;
}
#hstory .hy__cap b {
  color: var(--brand);
  font-weight: 700;
}
#hstory .panel--reckon {
  background: var(--ocean);
  color: var(--color-green-snow);
}
#hstory .panel--reckon .eyebrow {
  color: var(--color-green-moss);
}
#hstory .reckon__big {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: var(--space-5);
}
#hstory .reckon__num {
  font-size: clamp(64px, 13vw, 168px);
  font-weight: 700;
  line-height: 0.86;
  letter-spacing: -0.035em;
  color: var(--lime);
}
#hstory .reckon__num::before {
  content: "≈";
  font-size: 0.36em;
  color: var(--color-green-moss);
  margin-right: 0.1em;
  vertical-align: 0.2em;
}
#hstory .reckon__unit {
  font-size: clamp(20px, 3vw, 32px);
  font-weight: 600;
  color: var(--color-green-pistache);
}
#hstory .reckon__fte {
  margin-top: var(--space-5);
  font-size: clamp(19px, 2.6vw, 30px);
  font-weight: 600;
  color: #fff;
}
#hstory .reckon__fte b {
  color: var(--lime);
}
#hstory .reckon__quiet {
  margin-top: var(--space-9);
  max-width: 56ch;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
#hstory .reckon__quiet p {
  font-size: clamp(13px, 1.6vw, 17px);
  line-height: 1.5;
  color: var(--color-green-pistache);
}
#hstory .reckon__quiet p b {
  color: #fff;
  font-weight: 600;
}
#hstory .cta {
  margin-top: var(--space-9);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--lime);
  color: var(--ocean);
  font-weight: 700;
  font-size: 17px;
  padding: 16px 28px;
  border-radius: var(--radius-full);
  transition: background 0.2s, transform 0.2s;
}
#hstory .cta:hover {
  background: var(--color-green-lime-hover);
  color: var(--ocean);
  transform: translateY(-2px);
}
#hstory .cta svg {
  width: 18px;
  height: 18px;
}
@media (max-height: 720px) {
  #hstory .panel__inner {
    padding: 64px 0 18px;
  }
  #hstory .eyebrow {
    margin-bottom: 10px;
  }
  #hstory .stage__head {
    margin-bottom: 12px;
  }
  #hstory .stage__title {
    font-size: clamp(23px, 3.6vw, 34px);
  }
  #hstory .stage__idx {
    font-size: 11px;
  }
  #hstory .col__cap {
    margin-bottom: 8px;
  }
  #hstory .lane {
    gap: 6px;
  }
  #hstory .task {
    min-height: 34px;
    padding: 5px 12px;
    font-size: 13px;
    gap: 9px;
  }
  #hstory .task__n {
    width: 20px;
    height: 20px;
    font-size: 10px;
  }
  #hstory .task__tick {
    width: 18px;
    height: 18px;
  }
  #hstory .stage__foot {
    margin-top: 13px;
    min-height: 0;
  }
  #hstory .stage__note {
    font-size: 16px;
  }
  #hstory .subtotal {
    font-size: 16px;
  }
  #hstory .subtotal b {
    font-size: 1.08em;
  }
}
@media (max-width: 760px) {
  #hstory .counter {
    top: 0;
    left: 0;
    right: 0;
    transform: translateY(-110%);
    border-radius: 0;
    justify-content: center;
    gap: var(--space-5);
    padding: 10px 16px;
    max-width: none;
  }
  #hstory .counter.is-on {
    transform: translateY(0);
  }
  #hstory .counter__num {
    font-size: 23px;
  }
  #hstory .rail {
    width: 88vw;
    bottom: 16px;
  }
  #hstory .rail__dot span {
    display: none;
  }
  #hstory .panel__inner {
    padding: 70px 0 22px;
  }
  #hstory .stage {
    grid-template-columns: 1fr 30px 1fr;
  }
  #hstory .col--cara .lane::before {
    left: -16px;
  }
  #hstory .task {
    gap: 7px;
    padding: 7px 10px;
    font-size: 12.5px;
    border-radius: var(--radius-md);
  }
  #hstory .task__n {
    width: 18px;
    height: 18px;
    font-size: 10px;
  }
  #hstory .task__tick {
    width: 16px;
    height: 16px;
  }
}
html.reduced #hstory .hscroll {
  height: auto;
}
html.reduced #hstory .hviewport {
  position: static;
  height: auto;
  overflow: visible;
}
html.reduced #hstory .htrack {
  flex-direction: column;
  transform: none !important;
  width: auto;
  height: auto;
}
html.reduced #hstory .panel {
  flex: none;
  width: 100%;
  height: auto;
  min-height: 100vh;
  border-bottom: 1px solid var(--line);
}
html.reduced #hstory .panel--reckon {
  border-bottom: 0;
}
@media (prefers-reduced-motion: reduce) {
  #hstory .counter,
  #hstory .rail,
  #hstory .rail__line i {
    transition: none;
  }
  #hstory .scrollcue i {
    animation: none;
  }
}
/* ============================================================
   VARIANT A — "ocean depth wash" ground + task histogram.
   Locked design (handoff Web 3.0(29)): the whole pinned viewport
   sits on a dark emerald→forest→ocean gradient with two blurred
   parallax orbs + a grain overlay, and a 62-bar cumulative-hours
   histogram sweeps left→right in lockstep with scroll. Applied
   directly to #hstory (no data-bg/data-tex switch — this is THE
   design). Declared AFTER the light-ground rules above so the
   same-specificity dark overrides win by source order.
   ============================================================ */
/* Dark-ground token flip — recolours every panel that reads a token. */
#hstory {
  --ink: #fff;
  --ink-2: rgba(235, 245, 235, 0.74);
  --ink-3: rgba(203, 232, 197, 0.6);
  --line: rgba(235, 245, 235, 0.16);
  --brand: var(--lime);
  --bg: transparent;
}
/* the ground itself */
#hstory .hviewport {
  background: linear-gradient(168deg, var(--color-brand-emerald) 0%, var(--color-green-forest) 46%, var(--color-brand-ocean) 100%);
}
/* z0 — background fx layer (wash + orbs + grain) */
#hstory .bgfx {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
#hstory .bgfx > * {
  position: absolute;
  will-change: transform;
}
#hstory .fx-a {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
#hstory .fx-a > * {
  position: absolute;
  display: block;
  will-change: transform;
}
#hstory .fx-a .w1 {
  inset: 0;
  background: radial-gradient(72% 62% at 88% -6%, rgba(151, 248, 129, 0.2), transparent 62%), radial-gradient(60% 55% at -4% 96%, rgba(0, 167, 93, 0.26), transparent 66%);
}
#hstory .fx-a .b {
  border-radius: 50%;
}
#hstory .fx-a .b1 {
  left: -10%;
  top: -40%;
  width: 720px;
  height: 720px;
  filter: blur(95px);
  opacity: 0.5;
  background: radial-gradient(circle, rgba(151, 248, 129, 0.44), transparent 66%);
}
#hstory .fx-a .b2 {
  right: -16%;
  bottom: -46%;
  width: 820px;
  height: 820px;
  filter: blur(105px);
  opacity: 0.5;
  background: radial-gradient(circle, rgba(0, 167, 93, 0.42), transparent 68%);
}
#hstory .bgfx .grain {
  inset: -25%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  opacity: 0.15;
}
/* z1 — histogram texture field (bars filled by the engine each frame) */
#hstory .texfx {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
#hstory .texfx > * {
  position: absolute;
  will-change: transform;
}
#hstory .tex-h {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
#hstory .tex-h .bars {
  position: absolute;
  left: 0;
  right: -6%;
  bottom: 0;
  height: 37%;
  display: flex;
  align-items: flex-end;
  gap: 0.35%;
  filter: blur(0.4px);
  mask-image: linear-gradient(to top, #000 0, #000 40%, transparent 100%);
  -webkit-mask-image: linear-gradient(to top, #000 0, #000 40%, transparent 100%);
}
#hstory .tex-h .bars .bar {
  flex: 1;
  position: relative;
  display: block;
  background: linear-gradient(to top, rgba(235, 245, 235, 0.07), rgba(235, 245, 235, 0.015));
}
#hstory .tex-h .bars .bar > b {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0;
  display: block;
  background: linear-gradient(to top, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0.2));
  transition: height 0.14s linear;
}
#hstory .tex-h .bars .bar.is-live > b {
  background: linear-gradient(to top, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.42));
}
/* z2 — the panel track must sit above ground + texture */
#hstory .htrack {
  position: relative;
  z-index: 2;
}
/* component-by-component dark-ground treatment */
#hstory .panel,
#hstory .panel--reckon {
  background: transparent;
}
#hstory .task {
  background: rgba(235, 245, 235, 0.07);
  backdrop-filter: blur(6px);
}
#hstory .task--cara {
  background: rgba(0, 167, 93, 0.18);
  border-color: rgba(151, 248, 129, 0.34);
  color: #ebf5eb;
}
#hstory .task__n {
  background: rgba(235, 245, 235, 0.1);
  color: var(--color-green-pistache);
}
#hstory .task--cara .task__n {
  background: rgba(151, 248, 129, 0.2);
  color: var(--lime);
}
#hstory .task--team .task__tick {
  background: rgba(235, 245, 235, 0.1);
}
#hstory .task--cara .task__tick {
  background: var(--brand);
  color: var(--ocean);
}
#hstory .col--team .col__cap {
  background: rgba(235, 245, 235, 0.08);
  color: var(--color-green-pistache);
}
#hstory .col--cara .col__cap {
  background: rgba(151, 248, 129, 0.14);
  color: var(--lime);
}
#hstory .col--team .col__cap .badge {
  background: rgba(235, 245, 235, 0.14);
  color: #fff;
}
#hstory .col--cara .col__cap .badge {
  background: var(--brand);
  color: var(--ocean);
}
#hstory .gut {
  color: rgba(235, 245, 235, 0.4);
}
#hstory .hy__bar {
  background: rgba(235, 245, 235, 0.07);
  border-color: rgba(235, 245, 235, 0.16);
}
#hstory .hy__lab--team {
  color: var(--ink-2);
}
#hstory .rail__line {
  background: rgba(235, 245, 235, 0.18);
}
#hstory .rail__dot {
  background: rgba(235, 245, 235, 0.34);
}
#hstory .rail__dot.is-done {
  background: var(--brand);
}
#hstory .rail__dot.is-active {
  background: var(--color-green-leaf);
}
#hstory .rail__dot span {
  background: var(--ocean);
  color: var(--color-green-pistache);
}
#hstory .scrollcue i {
  background: linear-gradient(90deg, rgba(235, 245, 235, 0.4), transparent);
}
/* the histogram drift freezes and stays at final fill under reduced-motion */
@media (prefers-reduced-motion: reduce) {
  #hstory .texfx *,
  #hstory .bgfx > * {
    transform: none !important;
  }
}
/* Story-pinned nav retract — targets the real theme nav (.stnav), which
   lives outside .t80, so this rule stays global. */
.stnav {
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.45s ease;
}
.stnav.cwb-immersive {
  transform: translateY(-115%) !important;
  opacity: 0 !important;
  pointer-events: none;
}
/* ============================================================
   80-tasks landing — integration fixes / overrides on top of the
   vendored prototype styles (theme-context adjustments live here).
   ============================================================ */
.t80 {
  /* The template mounts inside the theme's #main; neutralise any inherited
     top padding so the ocean hero meets the fixed nav cleanly (mirrors the
     page-cara-v2 .site-main handling). */
}
.t80.site-main {
  padding-top: 0;
}
.t80 {
  /* The FY23–25 "open roles per recruiter" graph (.problem-rail) was removed;
     collapse the problem grid to a single column so no empty 260px rail track
     is left behind. Keep the full .wrap width (1200px) so the left edge lines
     up with "Our analysis" below — the copy is capped by .problem p (56ch). */
}
.t80 .problem-inner {
  display: block;
}
.t80 {
  /* White hero — the dark ocean hero read as the same slab as the dark
     #hstory story directly below it, and the Cara headshot sits on a
     #c6f6c6 disc that needs a contrasting ground. Flip the hero to a white
     ground with dark type; the story section stays dark (bright open →
     dive into the dark data story). Loaded after _prototype so it wins. */
}
.t80 .hero.hero--light {
  background: var(--color-brand-white);
  border-bottom: 1px solid var(--color-neutral-10);
}
.t80 .hero.hero--light h1 {
  color: var(--color-brand-black);
}
.t80 .hero.hero--light .sub {
  color: var(--color-neutral-75);
}
.t80 .hero.hero--light {
  /* Floating orbs — soft blurred lime/emerald/pistache circles that drift
     slowly, echoing the /cara hero glows and this page's own story-section
     orbs. Tuned low-opacity so they add depth to the white without darkening
     it. Sit behind the copy (.wrap is lifted to z-index 1). */
}
.t80 .hero.hero--light .hero__orbs {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.t80 .hero.hero--light .hero__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(72px);
  will-change: transform;
}
.t80 .hero.hero--light .hero__orb--1 {
  width: 440px;
  height: 440px;
  top: -120px;
  left: -60px;
  background: radial-gradient(circle, rgba(150, 247, 130, 0.55), transparent 68%);
  animation: t80-orb-1 22s ease-in-out infinite alternate;
}
.t80 .hero.hero--light .hero__orb--2 {
  width: 560px;
  height: 560px;
  bottom: -220px;
  left: -40px;
  background: radial-gradient(circle, rgba(0, 167, 92, 0.18), transparent 70%);
  animation: t80-orb-2 27s ease-in-out infinite alternate;
}
.t80 .hero.hero--light .hero__orb--3 {
  width: 320px;
  height: 320px;
  top: 34%;
  left: 16%;
  background: radial-gradient(circle, rgba(194, 244, 196, 0.5), transparent 66%);
  animation: t80-orb-3 31s ease-in-out infinite alternate;
}
.t80 .hero.hero--light .wrap {
  position: relative;
  z-index: 1;
}
/* Hero orb drift — gentle translate + scale, top-level so the @keyframes names
   are global. Frozen under reduced-motion. */
@keyframes t80-orb-1 {
  from {
    transform: translate(0, 0) scale(1);
  }
  to {
    transform: translate(-34px, 26px) scale(1.06);
  }
}
@keyframes t80-orb-2 {
  from {
    transform: translate(0, 0) scale(1);
  }
  to {
    transform: translate(28px, -22px) scale(1.05);
  }
}
@keyframes t80-orb-3 {
  from {
    transform: translate(0, 0) scale(1);
  }
  to {
    transform: translate(20px, 20px) scale(1.08);
  }
}
@media (prefers-reduced-motion: reduce) {
  .t80 .hero__orb {
    animation: none !important;
  }
}
/* ============================================================
   80-tasks — "Our analysis" barbell timeline + "The two ends" closer.
   Process-order band: Human (start) → Cara (the middle) → Human (decision).
   Ported from the event-hub barbell animation (fixed 1920 stage → fluid grid).
   Loads after _prototype so it can restyle .anl__* for the new layout.
   ============================================================ */
.t80 {
  /* ----- Analysis header: full-width, replaces the old 2-col copy/tiles grid ----- */
}
.t80 .anl__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  max-width: 860px;
}
.t80 .anl__sub {
  margin: 0;
  font-size: var(--font-size-lg);
  line-height: 1.5;
  color: rgba(235, 245, 235, 0.72);
  max-width: 62ch;
}
.t80 {
  /* ----- Stats: three-up strip under the band, counts added ----- */
}
.t80 .anl__stats {
  flex-direction: row;
  gap: 12px;
  margin-top: 56px;
}
.t80 .anl__stat {
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 16px;
  border-radius: 12px;
  border-left-width: 3px;
}
.t80 .anl__n {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(235, 245, 235, 0.5);
}
.t80 .anl__n b {
  color: var(--color-brand-white);
  font-weight: 600;
}
.t80 .anl__src {
  margin-top: 22px;
}
.t80 {
  /* ----- Barbell band ----- */
}
.t80 .barbell {
  --bb-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --bb-line: rgba(235, 245, 235, 0.16);
  --bb-plate-w: 30px;
  --bb-end: 96px; /* bar inset from the rig edge = room for the plates */
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr) minmax(0, 1fr);
  grid-template-rows: auto 104px auto;
  -moz-column-gap: 36px;
       column-gap: 36px;
  margin-top: 64px;
  z-index: 1;
}
.t80 .bb__zhead {
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding-bottom: 44px;
  align-self: end;
}
.t80 .bb__zhead--l {
  grid-column: 1;
}
.t80 .bb__zhead--m {
  grid-column: 2;
  align-items: center;
  text-align: center;
}
.t80 .bb__zhead--r {
  grid-column: 3;
  align-items: flex-end;
  text-align: right;
}
.t80 .bb__step {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(203, 232, 197, 0.6);
}
.t80 .bb__zhead--m .bb__step {
  color: var(--color-green-lime);
}
.t80 .bb__stage {
  margin: 0;
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--color-brand-white);
}
.t80 .bb__cap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 14px 4px 4px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  line-height: 1;
}
.t80 .bb__badge {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-style: normal;
  font-size: 12px;
  font-weight: 700;
  flex: none;
}
.t80 .bb__badge svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.t80 .bb__cap--team {
  background: rgba(235, 245, 235, 0.08);
  color: var(--color-green-pistache);
}
.t80 .bb__cap--team .bb__badge {
  background: rgba(235, 245, 235, 0.14);
  color: var(--color-brand-white);
}
.t80 .bb__cap--ai {
  background: rgba(151, 248, 129, 0.14);
  color: var(--color-green-lime);
}
.t80 .bb__cap--ai .bb__badge {
  background: var(--color-green-lime);
  color: var(--color-brand-ocean);
}
.t80 {
  /* rig: bar + fill + glow + checkpoints + collars + plates */
}
.t80 .bb__rig {
  grid-row: 2;
  grid-column: 1/-1;
  position: relative;
  height: 104px;
}
.t80 .bb__bar,
.t80 .bb__fill {
  position: absolute;
  left: var(--bb-end);
  right: var(--bb-end);
  top: 50%;
  height: 14px;
  margin-top: -7px;
  border-radius: 7px;
}
.t80 .bb__bar {
  background: rgba(235, 245, 235, 0.08);
  border: 1px solid var(--bb-line);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.7s var(--bb-ease);
}
.t80 .bb__fill {
  background: linear-gradient(90deg, var(--color-green-leaf), var(--color-green-lime));
  transform: scaleX(0);
  transform-origin: left center;
  box-shadow: 0 0 24px rgba(151, 248, 129, 0.35);
}
.t80 .bb__glow {
  position: absolute;
  top: 50%;
  left: var(--bb-end);
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(circle, rgba(151, 248, 129, 0.95) 0%, rgba(151, 248, 129, 0.4) 40%, rgba(151, 248, 129, 0) 70%);
  filter: blur(2px);
}
.t80 .bb__chk {
  position: absolute;
  top: 50%;
  left: calc(var(--bb-end) + (100% - 2 * var(--bb-end)) * var(--at, 0.5));
  width: 5px;
  height: 24px;
  margin: -12px 0 0 -2px;
  border-radius: 3px;
  background: rgba(235, 245, 235, 0.22);
  border: 1px solid var(--bb-line);
  transition: background 0.4s, box-shadow 0.4s;
}
.t80 .bb__chk.on {
  background: var(--color-green-lime);
  box-shadow: 0 0 14px rgba(151, 248, 129, 0.7);
}
.t80 .bb__collar {
  position: absolute;
  top: 50%;
  width: 14px;
  height: 28px;
  margin-top: -14px;
  border-radius: 5px;
  background: rgba(235, 245, 235, 0.14);
  border: 1px solid var(--bb-line);
  opacity: 0;
  transition: opacity 0.7s var(--bb-ease);
}
.t80 .bb__collar--l {
  left: calc(var(--bb-end) + 42px);
}
.t80 .bb__collar--r {
  right: calc(var(--bb-end) + 42px);
}
.t80 .bb__plates {
  position: absolute;
  top: 50%;
  width: calc(var(--bb-plate-w) * 2 + 8px);
  height: 0;
}
.t80 .bb__plates--l {
  left: 18px;
}
.t80 .bb__plates--r {
  right: 18px;
}
.t80 .bb__plate {
  position: absolute;
  top: -64px;
  width: var(--bb-plate-w);
  height: 128px;
  border-radius: 9px;
  background: rgba(235, 245, 235, 0.1);
  border: 1px solid rgba(235, 245, 235, 0.28);
  backdrop-filter: blur(8px);
  box-shadow: 0 14px 36px -12px rgba(2, 39, 31, 0.6);
  opacity: 0;
  will-change: transform, opacity;
}
.t80 .bb__plates--l .bb__plate {
  transform: translateX(-520px);
}
.t80 .bb__plates--l .bb__plate:nth-child(1) {
  left: 0;
}
.t80 .bb__plates--l .bb__plate:nth-child(2) {
  left: calc(var(--bb-plate-w) + 8px);
}
.t80 .bb__plates--r .bb__plate {
  transform: translateX(520px);
}
.t80 .bb__plates--r .bb__plate:nth-child(1) {
  right: 0;
}
.t80 .bb__plates--r .bb__plate:nth-child(2) {
  right: calc(var(--bb-plate-w) + 8px);
}
.t80 .bb__plate.in {
  opacity: 1;
  transform: translateX(0);
  transition: transform 1s var(--bb-ease), opacity 0.3s linear;
}
.t80 .bb__bar.in,
.t80 .bb__collar.in {
  opacity: 1;
}
.t80 .bb__rig.lifting {
  animation: t80-bb-lift 1.2s var(--bb-ease) both;
}
@keyframes t80-bb-lift {
  0% {
    transform: translateY(0);
  }
  45% {
    transform: translateY(-14px);
  }
  100% {
    transform: translateY(0);
  }
}
.t80 {
  /* rows */
}
.t80 .bb__rows {
  grid-row: 3;
  list-style: none;
  margin: 0;
  padding: 44px 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.t80 .bb__rows--l {
  grid-column: 1;
}
.t80 .bb__rows--m {
  grid-column: 2;
}
.t80 .bb__rows--r {
  grid-column: 3;
}
.t80 .bb__task {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  padding: 9px 14px;
  border-radius: 10px;
  font-size: 15.5px;
  font-weight: 500;
  line-height: 1.25;
  border: 1px solid var(--bb-line);
  background: rgba(235, 245, 235, 0.07);
  backdrop-filter: blur(6px);
  color: var(--color-brand-white);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.45s var(--bb-ease), transform 0.45s var(--bb-ease);
}
.t80 .bb__task.in {
  opacity: 1;
  transform: none;
}
.t80 .bb__n {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  background: rgba(235, 245, 235, 0.1);
  color: var(--color-green-pistache);
  flex: none;
}
.t80 .bb__dot {
  margin-left: auto;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
  font-size: 11px;
  font-weight: 700;
}
.t80 .bb__dot svg {
  width: 13px;
  height: 13px;
  stroke: var(--color-brand-white);
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.t80 .bb__dot--team {
  background: rgba(235, 245, 235, 0.14);
}
.t80 .bb__dot--ai {
  background: var(--color-green-lime);
  color: var(--color-brand-ocean);
}
.t80 .bb__task--ai {
  background: rgba(0, 167, 93, 0.18);
  border-color: rgba(151, 248, 129, 0.34);
  color: var(--color-green-frost);
}
.t80 .bb__task--ai .bb__n {
  background: rgba(151, 248, 129, 0.2);
  color: var(--color-green-lime);
}
.t80 .bb__task--ai[data-cat=hybrid] {
  background: rgba(0, 167, 93, 0.1);
  border-color: rgba(0, 167, 93, 0.45);
}
.t80 .bb__task--ai[data-cat=hybrid] .bb__dot--ai {
  background: var(--color-green-leaf);
  color: var(--color-brand-white);
}
.t80 {
  /* Cara's headshot replaces the "C" monogram in the Cara cap badge and the
     middle-row dots — same asset as the hero (setImgSrc → data-st-img), so no
     extra request. The container keeps its lime/leaf colour as a 2px ring. */
}
.t80 .bb__badge--face,
.t80 .bb__dot--face {
  padding: 2px;
  overflow: hidden;
}
.t80 .bb__badge--face img,
.t80 .bb__dot--face img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  background: var(--color-green-pastel);
}
.t80 {
  /* stat hover / lock cross-highlight (mirrors the old tile dimming) */
}
.t80 .bb__task.is-dim,
.t80 .bb__zhead.is-dim {
  opacity: 0.28;
}
.t80 .bb__task.is-hit {
  transform: translateX(3px);
}
.t80 {
  /* the reveal wrapper already fades the band in; don't double-translate the rig */
}
.t80 .barbell[data-reveal] {
  transition-duration: 0.3s;
}
.t80 {
  /* mobile-only pinned strip (see @media below) */
}
.t80 .bb__strip {
  display: none;
}
@media (max-width: 860px) {
  .t80 {
    /* Column flex (not grid): a sticky child of a grid only sticks inside its
       own row; in a flex column the strip sticks for the whole band. */
  }
  .t80 .barbell {
    display: flex;
    flex-direction: column;
    margin-top: 32px;
  }
  .t80 .bb__rig:not(.bb__rig--m) {
    display: none;
  }
  .t80 {
    /* source order is strip → heads → rig → rows; interleave per zone when stacked */
  }
  .t80 .bb__strip {
    order: 0;
  }
  .t80 .bb__zhead--l {
    order: 1;
  }
  .t80 .bb__rows--l {
    order: 2;
  }
  .t80 .bb__zhead--m {
    order: 3;
  }
  .t80 .bb__rows--m {
    order: 4;
  }
  .t80 .bb__zhead--r {
    order: 5;
  }
  .t80 .bb__rows--r {
    order: 6;
  }
  .t80 .bb__zhead,
  .t80 .bb__rows {
    align-self: stretch; /* desktop grid uses align-self:end — in the flex column that right-aligns */
    width: 100%;
  }
  .t80 .bb__zhead {
    padding: 24px 0 16px;
    border-top: 2px solid var(--bb-line);
    align-items: flex-start;
    text-align: left;
    transition: border-color 0.5s var(--bb-ease);
  }
  .t80 .bb__zhead--l {
    border-top: 0;
    padding-top: 6px;
  }
  .t80 .bb__zhead.is-live {
    border-top-color: var(--color-green-lime);
  }
  .t80 .bb__rows {
    padding: 0 0 22px;
  }
  .t80 .anl__stats {
    flex-direction: column;
    margin-top: 36px;
  }
  .t80 {
    /* ----- pinned horizontal strip: labels + compact rig ----- */
  }
  .t80 .bb__strip {
    display: block;
    position: sticky;
    top: var(--bb-nav, 0px); /* set from JS = live nav height */
    z-index: 5;
    margin: 0 -24px 8px; /* bleed over .wrap's 24px mobile padding */
    padding: 10px 24px 12px;
    background: linear-gradient(to bottom, var(--color-brand-ocean) 0, var(--color-brand-ocean) 78%, rgba(2, 39, 31, 0) 100%);
  }
  .t80 .bb__strip-lbl {
    display: grid;
    grid-template-columns: 1fr 1.12fr 1fr;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(203, 232, 197, 0.42);
  }
  .t80 .bb__strip-lbl span {
    transition: color 0.4s;
  }
  .t80 .bb__strip-lbl span:nth-child(2) {
    text-align: center;
  }
  .t80 .bb__strip-lbl span:nth-child(3) {
    text-align: right;
  }
  .t80 .bb__strip-lbl span.on {
    color: var(--color-brand-white);
  }
  .t80 .bb__strip-lbl span:nth-child(2).on {
    color: var(--color-green-lime);
  }
  .t80 {
    /* Proportions follow the desktop rig: plates ~9× the bar's thickness, a big
       inner plate and a smaller outer one, collars just inside. The end plates sit
       ghosted from the start so the silhouette reads as a barbell before the fill
       arrives. */
  }
  .t80 .bb__rig--m {
    --bb-end: 54px;
    display: block;
    height: 76px;
  }
  .t80 .bb__rig--m .bb__bar,
  .t80 .bb__rig--m .bb__fill {
    height: 8px;
    margin-top: -4px;
    border-radius: 4px;
  }
  .t80 .bb__rig--m .bb__bar {
    background: rgba(235, 245, 235, 0.12);
    border-color: rgba(235, 245, 235, 0.22);
    backdrop-filter: none;
  }
  .t80 .bb__rig--m .bb__glow {
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
  }
  .t80 .bb__rig--m .bb__chk {
    width: 4px;
    height: 18px;
    margin: -9px 0 0 -2px;
  }
  .t80 .bb__rig--m .bb__collar {
    width: 7px;
    height: 20px;
    margin-top: -10px;
    border-radius: 2px;
    background: rgba(235, 245, 235, 0.26);
    border-color: rgba(235, 245, 235, 0.4);
  }
  .t80 .bb__rig--m .bb__collar--l {
    left: calc(var(--bb-end) + 6px);
  }
  .t80 .bb__rig--m .bb__collar--r {
    right: calc(var(--bb-end) + 6px);
  }
  .t80 .bb__rig--m .bb__plates {
    width: 34px;
  }
  .t80 .bb__rig--m .bb__plates--l {
    left: 16px;
  }
  .t80 .bb__rig--m .bb__plates--r {
    right: 16px;
  }
  .t80 .bb__rig--m .bb__plate {
    border-radius: 3px;
    background: linear-gradient(180deg, rgba(235, 245, 235, 0.2), rgba(235, 245, 235, 0.09));
    border: 1px solid rgba(235, 245, 235, 0.42);
    backdrop-filter: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 8px 22px -8px rgba(0, 0, 0, 0.7);
  }
  .t80 .bb__rig--m .bb__plate:nth-child(1) {
    width: 15px;
    height: 64px;
    top: -32px;
  }
  .t80 .bb__rig--m .bb__plate:nth-child(2) {
    width: 11px;
    height: 46px;
    top: -23px;
  }
  .t80 .bb__rig--m .bb__plates--l .bb__plate {
    transform: translateX(-100vw);
  }
  .t80 .bb__rig--m .bb__plates--l .bb__plate:nth-child(1) {
    left: auto;
    right: 0;
  }
  .t80 .bb__rig--m .bb__plates--l .bb__plate:nth-child(2) {
    left: auto;
    right: 19px;
  }
  .t80 .bb__rig--m .bb__plates--r .bb__plate {
    transform: translateX(100vw);
  }
  .t80 .bb__rig--m .bb__plates--r .bb__plate:nth-child(1) {
    right: auto;
    left: 0;
  }
  .t80 .bb__rig--m .bb__plates--r .bb__plate:nth-child(2) {
    right: auto;
    left: 19px;
  }
  .t80 .bb__rig--m {
    /* nested so these outrank the --l/--r translateX(±100vw) rests above */
  }
  .t80 .bb__rig--m .bb__plates .bb__plate.in {
    opacity: 1;
    transform: none;
    transition: transform 1s var(--bb-ease), opacity 0.3s linear;
  }
  .t80 .bb__rig--m .bb__plates--r .bb__plate.ghost {
    opacity: 0.22;
    transform: none;
    transition: opacity 0.7s var(--bb-ease);
  }
  .t80 .bb__rig--m .bb__plates--r .bb__plate.in {
    opacity: 1;
  }
  .t80 .bb__rig--m.done .bb__plate {
    animation: t80-bb-settle 1.1s var(--bb-ease) 1;
  }
  @keyframes t80-bb-settle {
    0% {
      box-shadow: 0 0 0 rgba(151, 248, 129, 0);
    }
    35% {
      box-shadow: 0 0 18px rgba(151, 248, 129, 0.55);
      border-color: rgba(151, 248, 129, 0.6);
    }
    100% {
      box-shadow: 0 8px 22px -8px rgba(0, 0, 0, 0.7);
    }
  }
}
.t80 {
  /* ----- Closing CTA: "the two ends" pill row is the eyebrow device -----
     (The standalone .ends closer was merged into .closing — one section.) */
}
.t80 .ends__bar {
  display: flex;
  width: 100%;
  max-width: 440px;
  gap: 4px;
  margin: 0 auto var(--space-8);
}
.t80 .ends__seg {
  flex: 1 1 0;
  height: 32px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.t80 .ends__seg--team {
  background: rgba(235, 245, 235, 0.08);
  border: 1px solid rgba(235, 245, 235, 0.18);
  color: var(--color-green-pistache);
}
.t80 .ends__seg--cara {
  flex: 2.2 1 0;
  background: var(--color-green-lime);
  color: var(--color-brand-ocean);
}
.t80 .closing h2 {
  margin: 0;
}
/* Reduced motion: final frame, no transitions */
@media (prefers-reduced-motion: reduce) {
  .t80 .bb__plate,
  .t80 .bb__task,
  .t80 .bb__bar,
  .t80 .bb__collar,
  .t80 .bb__chk {
    transition-duration: 1ms !important;
  }
  .t80 .bb__rig.lifting,
  .t80 .bb__rig--m.done .bb__plate {
    animation: none;
  }
}
/* ============================================================
   80-tasks — hero refresh + research-pack capture.
   The white hero read too airy against the dark #hstory story below. The ground
   is now a snow → frost → pistache wash that deepens toward the story, with an
   ocean form bar carrying the lime CTA, an emerald "80 tasks" accent and a
   30/32/18 proof strip. Loads last so it wins over _prototype/_fixes.
   ============================================================ */
.t80 {
  /* ----- Ground ----- */
}
.t80 .hero.hero--light {
  padding: calc(68px + var(--space-11)) 0 var(--space-12);
  background: linear-gradient(180deg, var(--color-green-snow) 0%, var(--color-green-frost) 55%, var(--color-green-pistache) 100%);
  border-bottom: none;
}
.t80 .hero.hero--light h1 {
  font-size: clamp(2.6rem, 4.6vw, 4.4rem);
  font-weight: var(--font-weight-semibold);
  margin: var(--space-6) 0 var(--space-5);
}
.t80 .hero.hero--light h1 em {
  font-style: normal;
  color: var(--color-brand-emerald);
}
.t80 .hero .hero-copy [data-entry]:nth-child(5) {
  transition-delay: 0.36s;
}
.t80 {
  /* ----- Headshot: larger, lime halo ring ----- */
}
.t80 .hero-photo {
  position: relative;
  overflow: visible;
  width: clamp(260px, 30vw, 420px);
  background: none;
  box-shadow: none;
}
.t80 .hero-photo img {
  border-radius: var(--radius-full);
  background: var(--color-green-pastel);
  box-shadow: 0 30px 80px -30px rgba(2, 39, 31, 0.55);
}
.t80 .hero-photo::before {
  content: "";
  position: absolute;
  inset: -14px;
  border-radius: var(--radius-full);
  border: 2px solid var(--color-green-lime);
  opacity: 0.7;
  pointer-events: none;
}
.t80 {
  /* ----- Form bar ----- */
}
.t80 .hero-pack {
  margin-top: var(--space-9);
  max-width: 560px;
}
.t80 .hero-pack__row {
  display: flex;
  gap: 6px;
  padding: 6px;
  background: var(--color-brand-ocean);
  border: 1px solid var(--color-brand-ocean);
  border-radius: var(--radius-full);
  box-shadow: 0 22px 44px -22px rgba(2, 39, 31, 0.7);
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.t80 .hero-pack__row:focus-within {
  box-shadow: 0 0 0 3px rgba(151, 248, 129, 0.45), 0 22px 44px -22px rgba(2, 39, 31, 0.7);
}
.t80 .hero-pack__row .btn {
  flex: none;
  height: 48px;
  padding: 0 var(--space-6);
  font-size: 15px;
}
.t80 .hero-pack__row .btn:disabled {
  opacity: 0.6;
  cursor: progress;
  transform: none;
}
.t80 .hero-pack__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.t80 .hero-pack__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 48px;
  padding: 0 20px;
  font-family: var(--font-family-body);
  font-size: 15px;
  color: var(--color-brand-white);
  background: transparent;
  border: none;
  border-radius: 0;
  outline: none;
}
.t80 .hero-pack__input::-moz-placeholder {
  color: var(--color-brand-white);
  opacity: 1;
}
.t80 .hero-pack__input::placeholder {
  color: var(--color-brand-white);
  opacity: 1;
}
.t80 .hero-pack__input {
  /* Keep browser autofill from painting a pale box inside the dark bar. */
}
.t80 .hero-pack__input:-webkit-autofill {
  -webkit-text-fill-color: var(--color-brand-white);
  box-shadow: 0 0 0 1000px var(--color-brand-ocean) inset;
  caret-color: var(--color-brand-white);
  -webkit-transition: background-color 600000s 0s, color 600000s 0s;
  transition: background-color 600000s 0s, color 600000s 0s;
}
.t80 .hero-pack__input:-webkit-autofill, .t80 .hero-pack__input:-webkit-autofill:hover, .t80 .hero-pack__input:-webkit-autofill:focus, .t80 .hero-pack__input:autofill {
  -webkit-text-fill-color: var(--color-brand-white);
  box-shadow: 0 0 0 1000px var(--color-brand-ocean) inset;
  caret-color: var(--color-brand-white);
  -webkit-transition: background-color 600000s 0s, color 600000s 0s;
  transition: background-color 600000s 0s, color 600000s 0s;
}
.t80 .hero-pack.is-error .hero-pack__row {
  border-color: #e5484d;
}
.t80 .hero-pack__note {
  margin: var(--space-3) 0 0 var(--space-5);
  font-size: 13px;
  font-weight: var(--font-weight-medium);
  color: var(--color-brand-ocean);
}
.t80 .hero-pack__note a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.t80 .hero-pack__status:empty {
  display: none;
}
.t80 .hero-pack__status {
  margin: var(--space-2) 0 0 var(--space-5);
  font-size: 14px;
  color: #c0392b;
}
.t80 .hero-pack--done {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}
.t80 .hero-pack__thanks {
  margin: 0;
  font-size: 16px;
  color: var(--color-brand-ocean);
}
.t80 {
  /* ----- Proof strip: heading + proportional 30/32/18 bar + legend.
     A calm tonal ramp (moss -> emerald -> ocean): lime/leaf read too loud
     next to the lime CTA on this light ground. ----- */
}
.t80 .hero-proof {
  max-width: 560px;
  margin: var(--space-9) 0 0;
  padding: var(--space-6) 0 0;
  border-top: 1px solid rgba(2, 39, 31, 0.14);
}
.t80 .hero-proof__head {
  margin: 0 0 var(--space-4);
  font-family: var(--font-family-display);
  font-size: 12px;
  font-weight: var(--font-weight-demibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-brand-emerald);
}
.t80 .hero-proof__bar {
  display: flex;
  gap: 3px;
  height: 8px;
  margin-bottom: var(--space-5);
}
.t80 .hero-proof__bar i {
  border-radius: var(--radius-full);
}
.t80 .hero-proof__bar i[data-cat=auto] {
  flex: 30;
}
.t80 .hero-proof__bar i[data-cat=hybrid] {
  flex: 32;
}
.t80 .hero-proof__bar i[data-cat=human] {
  flex: 18;
}
.t80 .hero-proof [data-cat=auto] {
  --cat: var(--color-green-moss);
}
.t80 .hero-proof [data-cat=hybrid] {
  --cat: var(--color-brand-emerald);
}
.t80 .hero-proof [data-cat=human] {
  --cat: var(--color-brand-ocean);
}
.t80 .hero-proof__bar i {
  background: var(--cat);
}
.t80 .hero-proof__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.t80 .hero-proof__list li {
  margin: 0;
  padding-left: var(--space-3);
  border-left: 3px solid var(--cat);
}
.t80 .hero-proof__list b {
  display: block;
  font-size: 28px;
  line-height: 1;
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.02em;
  color: var(--color-brand-ocean);
}
.t80 .hero-proof__label {
  display: block;
  margin-top: var(--space-2);
  font-size: 14px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-brand-ocean);
}
.t80 .hero-proof__desc {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--color-neutral-75);
}
@media (max-width: 640px) {
  .t80 .hero.hero--light {
    padding: calc(68px + var(--space-10)) 0 var(--space-11);
  }
  .t80 .hero.hero--light h1 {
    white-space: normal;
  }
  .t80 .hero-pack__row {
    flex-direction: column;
    border-radius: 28px;
  }
  .t80 .hero-pack__row .btn {
    width: 100%;
  }
  .t80 .hero-pack__note,
  .t80 .hero-pack__status {
    margin-left: 0;
  }
  .t80 .hero-proof__list {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
}