@import url('https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:wght@400;500;600;700;800&family=Instrument+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Space+Grotesk:wght@500;600;700&display=swap');

/* ---------- Square8 tokens ---------- */
:root {
  --s8-orange:        #BC521A;
  --s8-orange-bright: #E4671F;
  --s8-orange-wash:   #F7E7DA;
  --s8-orange-line:   #E4C4B2;
  --s8-ink:    #17150F;
  --s8-cream:  #EFECE3;
  --s8-paper:  #FBFAF6;
  --s8-tint:   #E7E1D4;
  --s8-green:  #3E6B4F;
  --s8-green-bright: #4E9E6A;
  --s8-amber:  #E8A33D;
  --s8-body:   #47433A;
  --s8-muted:  #8A8272;
  --s8-line:   #D9D3C5;
  --s8-line-2: #C9C2B4;

  /* wow layers */
  --grad-orange: linear-gradient(120deg, var(--s8-orange-bright), var(--s8-orange) 55%, #A8461A);
  --grad-accent: linear-gradient(100deg, var(--s8-orange-bright), var(--s8-amber));
  --grad-green:  linear-gradient(135deg, #5AAE77, #3E6B4F);
  --glass:        rgba(255,255,255,0.52);
  --glass-line:   rgba(255,255,255,0.72);
  --glass-shadow: 0 24px 60px rgba(70,48,24,0.14), 0 4px 14px rgba(70,48,24,0.08);

  --font-display: 'Schibsted Grotesk', 'Space Grotesk', Helvetica, Arial, sans-serif;
  --font-sans:    'Instrument Sans', Helvetica, Arial, sans-serif;
  --font-mono:    'Instrument Sans', Helvetica, Arial, sans-serif;

  --ls-wordmark: 0.14em;
  --ls-label:    0.18em;
  --ls-tag:      0.1em;

  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 3px rgba(31,29,26,.06);
  --shadow-md: 0 2px 10px rgba(31,29,26,.10);
  --shadow-lg: 0 8px 30px rgba(31,29,26,.12);

  --maxw: 1140px;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body {
  margin: 0;
  background: var(--s8-cream);
  color: var(--s8-body);
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.5;
}
h1, h2, h3 { margin: 0; color: var(--s8-ink); font-family: var(--font-display); font-weight: 500; line-height: 1.1; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; }

/* ---------- helpers ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }
.eyebrow {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--s8-orange);
}
.eyebrow.muted { color: var(--s8-muted); }
.lead { font-size: 21px; line-height: 1.5; color: var(--s8-body); }

.tag {
  font-family: var(--font-mono); font-weight: 700; font-size: 12px;
  letter-spacing: var(--ls-tag); text-transform: uppercase;
  padding: 5px 11px; border-radius: var(--radius-xs);
  display: inline-flex; align-items: center; line-height: 1;
}
.tag--agent { background: var(--s8-orange); color: var(--s8-cream); }
.tag--human { background: var(--s8-green); color: var(--s8-cream); }
.tag--ink   { background: var(--s8-ink); color: var(--s8-cream); }
.tag--skill { color: var(--s8-body); border: 1px solid var(--s8-line); background: transparent;
              text-transform: none; letter-spacing: .02em; font-weight: 400; }

.dot { width: 11px; height: 11px; border-radius: 50%; flex: none; display: inline-block; }
.dot--deployed { background: var(--s8-green); }
.dot--ready    { background: var(--s8-amber); }
.status { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-sans); font-size: 15px; color: var(--s8-body); }

.btn {
  font-family: var(--font-sans); font-weight: 600; letter-spacing: .01em;
  border-radius: var(--radius-sm); cursor: pointer; border: 1px solid transparent;
  transition: filter .15s ease; font-size: 16px; padding: 12px 22px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.btn:hover { filter: brightness(0.93); }
.btn--primary   { background: var(--s8-orange); color: var(--s8-cream); border-color: var(--s8-orange); }
.btn--secondary { background: transparent; color: var(--s8-ink); border-color: var(--s8-ink); }
.btn--ghost     { background: transparent; color: var(--s8-orange); }
.btn--lg { font-size: 18px; padding: 15px 30px; }
.btn--on-ink { background: var(--s8-cream); color: var(--s8-ink); border-color: var(--s8-cream); }

/* ---------- nav ---------- */
header.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(248,246,241,0.86); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--s8-line);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.nav-logo { width: 116px; }
.nav-links { display: flex; align-items: center; gap: 34px; }
.nav-links .link {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--s8-body);
}
.nav-links .link:hover { color: var(--s8-orange); }
.nav-cta { display: flex; align-items: center; gap: 18px; }

/* ---------- hero ---------- */
.hero { padding: 40px 0 72px; }
.hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 64px; align-items: center; }
.hero h1 { font-size: 74px; letter-spacing: -0.01em; }
.hero h1 .accent { color: var(--s8-orange); font-style: italic; }
.hero .lead { margin-top: 26px; max-width: 30em; }

.waitlist { margin-top: 38px; max-width: 480px; }
.waitlist-row { display: flex; gap: 10px; }
.field {
  flex: 1; font-family: var(--font-sans); font-size: 16px; color: var(--s8-ink);
  background: var(--s8-paper); border: 1px solid var(--s8-line);
  border-radius: var(--radius-sm); padding: 13px 15px; outline: none;
}
.field::placeholder { color: var(--s8-muted); }
.field:focus { border-color: var(--s8-orange); box-shadow: 0 0 0 3px rgba(188,82,26,.12); }
.waitlist-note { margin-top: 13px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; color: var(--s8-muted); }
.waitlist-success {
  display: none; margin-top: 4px; padding: 15px 18px; border-radius: var(--radius-lg);
  background: var(--s8-orange-wash); border: 1px solid var(--s8-orange-line);
  font-size: 15px; color: var(--s8-body);
}
.waitlist-success strong { color: var(--s8-ink); font-family: var(--font-sans); }
.waitlist.done form { display: none; }
.waitlist.done .waitlist-success { display: block; }

/* hero card — agent spec preview */
.hero-card {
  background: var(--s8-orange-wash); border: 1px solid var(--s8-orange-line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 26px;
}
.hero-card .card-head { display: flex; align-items: center; gap: 18px; }
.avatar { width: 66px; height: 66px; border-radius: 50%; flex: none;
  background: repeating-linear-gradient(45deg,#EAE4D8 0 8px,#F1EDE5 8px 16px); border: 1px solid var(--s8-line); }
.hero-card .name { font-family: var(--font-display); font-weight: 500; font-size: 25px; color: var(--s8-ink); line-height: 1.05; }
.hero-card .role { font-size: 15px; color: var(--s8-muted); margin-top: 3px; }
.card-rule { height: 1px; background: var(--s8-orange-line); margin: 22px 0; }
.spec-row { display: flex; justify-content: space-between; align-items: baseline; padding: 7px 0; gap: 16px; }
.spec-row .k { font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--s8-muted); }
.spec-row .v { font-size: 15px; color: var(--s8-body); text-align: right; }
.spec-row .v.big { font-family: var(--font-display); font-size: 22px; color: var(--s8-ink); }
.kpi-delta { color: var(--s8-muted); }
.kpi-delta b { color: var(--s8-green); font-family: var(--font-mono); font-weight: 700; }

/* ---------- proof band ---------- */
.proof { border-top: 1px solid var(--s8-line); border-bottom: 1px solid var(--s8-line); background: var(--s8-tint); }
.proof-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.proof-cell { padding: 40px 30px; border-left: 1px solid var(--s8-line); }
.proof-cell:first-child { border-left: none; }
.proof-cell .num { font-family: var(--font-display); font-weight: 500; font-size: 40px; color: var(--s8-ink); line-height: 1; white-space: nowrap; }
.proof-cell .lbl { margin-top: 12px; font-size: 15px; color: var(--s8-body); }
.proof-cell .src { margin-top: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; color: var(--s8-muted); }

/* ---------- generic section ---------- */
section.band { padding: 96px 0; }
.section-head { max-width: 640px; margin-bottom: 54px; }
.section-head h2 { font-size: 46px; margin-top: 16px; letter-spacing: -0.01em; }
.section-head p { margin-top: 18px; font-size: 19px; color: var(--s8-body); }

/* ---------- roster ---------- */
.roster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.agent-card {
  background: var(--s8-orange-wash); border: 1px solid var(--s8-orange-line);
  border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: 16px;
}
.agent-card.human { background: var(--s8-paper); border-color: var(--s8-line); }
.agent-top { display: flex; align-items: center; gap: 16px; }
.agent-top .name { font-family: var(--font-display); font-weight: 500; font-size: 22px; color: var(--s8-ink); line-height: 1.1; }
.agent-top .role { font-size: 14px; color: var(--s8-muted); margin-top: 3px; }
.agent-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.agent-skills { display: flex; gap: 7px; flex-wrap: wrap; }
.agent-skills .tag { font-size: 12px; }
.agent-foot { display: flex; align-items: center; justify-content: center; padding-top: 4px; border-top: 1px solid var(--s8-orange-line); margin-top: 2px; padding-top: 14px; }
.agent-card.human .agent-foot { border-color: var(--s8-line); }
.agent-foot .mgr { font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--s8-muted); }

/* ---------- how it works ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--s8-line); border-radius: var(--radius-lg); overflow: hidden; background: var(--s8-paper); }
.step { padding: 38px 34px; border-left: 1px solid var(--s8-line); }
.step:first-child { border-left: none; }
.step .no { font-family: var(--font-mono); font-size: 12px; letter-spacing: var(--ls-label); color: var(--s8-orange); }
.step h3 { font-size: 27px; margin-top: 16px; }
.step p { margin-top: 12px; font-size: 16px; color: var(--s8-body); }

/* ---------- dossier (spec sheet feature) ---------- */
.dossier { background: var(--s8-ink); color: var(--s8-cream); border-radius: var(--radius-lg); overflow: hidden; }
.dossier-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; }
.dossier-left { padding: 54px 48px; border-right: 1px solid rgba(248,246,241,.14); }
.dossier-left .eyebrow { color: var(--s8-orange-bright); }
.dossier-left h2 { color: var(--s8-cream); font-size: 40px; margin-top: 14px; }
.dossier-left p { margin-top: 20px; color: rgba(248,246,241,.72); font-size: 17px; }
/* live task queue (fills the dossier's lower-left space) */
.task-feed { margin-top: 40px; max-width: 360px; }
.task-feed-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: rgba(248,246,241,.5); display: flex; align-items: center; gap: 8px; }
.task-feed-label b { width: 7px; height: 7px; border-radius: 50%; background: var(--s8-green); animation: s8pulse 1.8s ease-in-out infinite; }
.task-feed-vp { position: relative; height: 176px; overflow: hidden; margin-top: 14px;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent); }
.task-feed-track { animation: feedScroll 13s linear infinite; }
.task-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 13px; color: rgba(248,246,241,.82); }
.task-row .tick { width: 14px; height: 14px; border-radius: 4px; flex: none; position: relative; background: var(--s8-orange); }
.task-row .tick::after { content: ''; position: absolute; left: 4px; top: 1.5px; width: 3.5px; height: 7px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.task-row .t-time { margin-left: auto; font-family: var(--font-mono); font-size: 10px; color: rgba(248,246,241,.4); }
@keyframes feedScroll { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@media (prefers-reduced-motion: reduce) { .task-feed-track { animation: none; } .task-feed-label b { animation: none; } }
.dossier-right { padding: 40px 48px; }
.ledger-row { display: grid; grid-template-columns: 150px 1fr; gap: 20px; padding: 18px 0; border-bottom: 1px solid rgba(248,246,241,.12); align-items: start; }
.ledger-row:last-child { border-bottom: none; }
.ledger-row .k { font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--ls-label); text-transform: uppercase; color: rgba(248,246,241,.5); padding-top: 3px; }
.ledger-row .v { font-size: 16px; color: var(--s8-cream); }
.ledger-row .v .chips { display: flex; gap: 7px; flex-wrap: wrap; }
.ledger-row .v .chip { font-family: var(--font-mono); font-size: 12px; padding: 4px 10px; border: 1px solid rgba(248,246,241,.24); border-radius: var(--radius-xs); color: var(--s8-cream); }
.ledger-row .v.kpi b { color: var(--s8-orange-bright); font-family: var(--font-mono); }

/* ---------- manifesto ---------- */
.manifesto { text-align: center; max-width: 900px; margin: 0 auto; }
.manifesto h2 { font-size: 52px; letter-spacing: -0.015em; }
.manifesto h2 .accent { color: var(--s8-orange); font-style: italic; }
.manifesto p { margin-top: 26px; font-size: 20px; color: var(--s8-body); }

/* ---------- final cta ---------- */
.finalcta { background: var(--s8-orange-wash); border-top: 1px solid var(--s8-orange-line); }
.finalcta-inner { text-align: center; max-width: 680px; margin: 0 auto; }
.finalcta h2 { font-size: 48px; letter-spacing: -0.01em; }
.finalcta p { margin-top: 18px; font-size: 19px; color: var(--s8-body); }
.finalcta .waitlist { margin: 34px auto 0; }

/* ---------- footer ---------- */
footer.foot { background: var(--s8-ink); color: rgba(248,246,241,.7); padding: 56px 0 40px; }
.foot-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; flex-wrap: wrap; }
.foot-logo { width: 117px; }
.foot-tag { margin-top: 16px; font-size: 15px; color: rgba(248,246,241,.6); max-width: 24em; }
.foot-cols { display: flex; gap: 68px; justify-content: flex-end; }
.foot-col h4 { font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--ls-label); text-transform: uppercase; color: rgba(248,246,241,.45); margin: 0 0 16px; font-weight: 700; }
.foot-col a { display: block; font-size: 15px; color: rgba(248,246,241,.75); padding: 5px 0; }
.foot-col a:hover { color: var(--s8-orange-bright); }
.foot-bottom { display: flex; justify-content: space-between; align-items: center; margin-top: 44px; padding-top: 24px; border-top: 1px solid rgba(248,246,241,.14); flex-wrap: wrap; gap: 12px; }
.foot-bottom span { font-family: var(--font-mono); font-size: 12px; letter-spacing: .05em; color: rgba(248,246,241,.5); }

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; gap: 44px; }
  .hero h1 { font-size: 56px; }
  .proof-grid { grid-template-columns: repeat(2, 1fr); }
  .proof-cell:nth-child(3) { border-left: none; }
  .proof-cell { border-top: 1px solid var(--s8-line); }
  .proof-cell:nth-child(-n+2) { border-top: none; }
  .roster { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .step { border-left: none; border-top: 1px solid var(--s8-line); }
  .step:first-child { border-top: none; }
  .dossier-grid { grid-template-columns: 1fr; }
  .dossier-left { border-right: none; border-bottom: 1px solid rgba(248,246,241,.14); }
  .nav-links { display: none; }
}
@media (max-width: 560px) {
  .hero h1 { font-size: 44px; }
  .section-head h2 { font-size: 34px; }
  .manifesto h2 { font-size: 34px; }
  .finalcta h2 { font-size: 34px; }
  .proof-grid { grid-template-columns: 1fr; }
  .proof-cell { border-left: none; border-top: 1px solid var(--s8-line); }
  .proof-cell:first-child { border-top: none; }
  .waitlist-row { flex-direction: column; }
  .foot-cols { gap: 40px; }
}

/* ---------- motion / wow ---------- */
#scrollbar {
  position: fixed; top: 0; left: 0; height: 2px; width: 0%;
  background: var(--s8-orange); z-index: 100;
}

/* scroll-in reveals (only active with JS) */
.js .reveal { opacity: 0; transform: translateY(22px); }
.reveal { transition: opacity .75s cubic-bezier(.16,.8,.24,1), transform .75s cubic-bezier(.16,.8,.24,1); will-change: opacity, transform; }
.reveal.in { opacity: 1; transform: none; }

/* tasteful hover lift */
.agent-card, .proof-cell { transition: transform .28s ease, box-shadow .28s ease; }
.agent-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }

/* hero card — the "hiring" sequence */
.hero-card { position: relative; overflow: hidden; }
.hero-card .avatar { transition: filter .6s ease, opacity .6s ease; }
.hero-card.training .avatar { filter: grayscale(1); opacity: .55; }
.dot { transition: background .5s ease; }
.progress { height: 3px; background: var(--s8-orange-line); border-radius: var(--radius-pill); overflow: hidden; margin-top: 10px; max-width: 220px; opacity: 0; transition: opacity .35s ease; }
.hero-card.training .progress { opacity: 1; }
.hero-card.deployed .progress { opacity: 0; height: 0; margin-top: 0; }
.progress > i { display: block; height: 100%; width: 0; background: var(--s8-orange); border-radius: var(--radius-pill); }
.progress.run > i { width: 100%; transition: width 1.55s cubic-bezier(.4,.05,.2,1); }
.stamp {
  position: absolute; top: 24px; right: 22px;
  font-family: var(--font-mono); font-weight: 700; font-size: 12px; letter-spacing: .22em;
  color: var(--s8-green); border: 2px solid var(--s8-green); border-radius: var(--radius-sm);
  padding: 6px 11px; transform: rotate(-7deg) scale(1.3); opacity: 0; pointer-events: none;
}
.hero-card.deployed .stamp {
  opacity: .92; transform: rotate(-7deg) scale(1);
  transition: opacity .4s ease, transform .4s cubic-bezier(.2,.8,.25,1);
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal, .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  #scrollbar, .progress { display: none; }
  .agent-card:hover { transform: none; }
  .stamp, .hero-card.deployed .stamp { transition: none; }
}

/* ============ EDITORIAL / DOSSIER CRAFT ============ */

/* dossier masthead — a printed-file dateline strip above the nav */
.dateline { background: var(--s8-ink); color: rgba(248,246,241,.66); }
.dateline-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 36px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }
.dateline .mid { color: var(--s8-cream); }
.dateline .live { display: inline-flex; align-items: center; gap: 8px; }
.dateline .live b { width: 7px; height: 7px; border-radius: 50%; background: var(--s8-orange-bright); }
@media (max-width: 720px) { .dateline .side { display: none; } .dateline-inner { justify-content: center; } }

/* numbered section kicker with a running rule */
.kicker { display: flex; align-items: center; gap: 18px; }
.kicker-no { font-family: var(--font-mono); font-weight: 700; font-size: 13px; letter-spacing: .1em; color: var(--s8-orange); flex: none; }
.kicker .eyebrow { flex: none; white-space: nowrap; }
.kicker-rule { flex: 1; height: 1px; background: var(--s8-line); }
.kicker--dark .kicker-no { color: var(--s8-orange-bright); }
.kicker--dark .kicker-rule { background: rgba(248,246,241,.18); }

/* hero editorial details */
.hero-meta { display: flex; gap: 34px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--s8-line); flex-wrap: wrap; }
.hero-meta .k { font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--s8-muted); }
.hero-meta .v { font-family: var(--font-sans); font-size: 14px; color: var(--s8-ink); margin-top: 5px; }
.figcap { margin-top: 12px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--s8-muted); text-align: right; }
.hero-card .spec-row { border-bottom: 1px solid var(--s8-orange-line); }
.hero-card .spec-row:last-child { border-bottom: none; }

/* roles ticker */
.ticker { display: flex; align-items: stretch; background: var(--s8-tint);
  border-top: 1px solid var(--s8-line); border-bottom: 1px solid var(--s8-line); overflow: hidden; }
.ticker-label { flex: none; display: flex; align-items: center; background: var(--s8-orange); color: var(--s8-cream);
  font-family: var(--font-mono); font-weight: 700; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; padding: 0 22px; }
.ticker-vp { flex: 1; overflow: hidden; display: flex; align-items: center; }
.ticker-track { display: inline-flex; align-items: center; white-space: nowrap; padding: 14px 0;
  animation: marquee 38s linear infinite; }
.ticker-track > span { display: inline-flex; align-items: center; gap: 26px; padding: 0 26px;
  font-family: var(--font-mono); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--s8-body); }
.ticker-track i { width: 7px; height: 7px; border-radius: 2px; background: var(--s8-orange); flex: none; }
.ticker:hover .ticker-track { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* org chart — the signature connector-line motif */
.org-top { display: flex; justify-content: center; position: relative; padding-bottom: 36px; }
.org-top::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-1px);
  width: 2px; height: 36px; background: var(--s8-line-2); }
.mgr-node { display: inline-flex; align-items: center; gap: 16px; background: var(--s8-paper);
  border: 1px solid var(--s8-line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 16px 22px; }
.mgr-node .avatar { width: 50px; height: 50px; }
.mgr-node .name { font-family: var(--font-display); font-weight: 500; font-size: 20px; color: var(--s8-ink); line-height: 1.1; }
.mgr-node .role { font-size: 13px; color: var(--s8-muted); margin-top: 3px; }
.mgr-node .agent-meta { margin-top: 8px; }
.org-branch { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.org-branch::before { content: ''; position: absolute; top: 0; left: 16.666%; right: 16.666%; height: 2px; background: var(--s8-line-2); }
.org-cell { position: relative; padding-top: 36px; }
.org-cell::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-1px);
  width: 2px; height: 36px; background: var(--s8-line-2); }
.org-cell .agent-card { height: 100%; }

@media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } }

/* trust & controls grid */
.controls { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.control { background: var(--s8-paper); border: 1px solid var(--s8-line); border-radius: var(--radius-lg);
  padding: 26px 24px; box-shadow: var(--shadow-sm); }
.control-no { font-family: var(--font-mono); font-weight: 700; font-size: 12px; letter-spacing: var(--ls-label); color: var(--s8-orange); }
.control-icon { color: var(--s8-orange); margin-bottom: 8px; }
.control-icon svg { width: 26px; height: 26px; display: block; }
.control h3 { font-size: 21px; margin-top: 12px; }
.control p { margin-top: 10px; font-size: 15px; color: var(--s8-body); }
@media (max-width: 820px) { .controls { grid-template-columns: 1fr; } }

/* ===== hero: Deborah's photo & name, with a calm running task list beside her ===== */
.hero { overflow: hidden; }
.hero-grid { grid-template-columns: 1fr 1fr; }
.hero-fig { position: relative; display: flex; align-items: center; justify-content: center; }
.hero-figure { display: flex; align-items: center; gap: 30px; max-width: 560px; width: 100%; }
.hero-figure-id { flex: none; text-align: center; width: 170px; margin-left: -52px; position: relative; z-index: 3; }
.avatar.hero-avatar { width: 170px; height: 170px; margin: 0 auto; box-shadow: 0 8px 26px rgba(31,29,26,.18); }
.nucleus-cap { display: inline-flex; align-items: center; gap: 6px; margin-top: 13px; white-space: nowrap;
  background: var(--s8-paper); border: 1px solid var(--s8-line); border-radius: 999px; padding: 6px 12px; box-shadow: var(--shadow-sm); }
.nucleus-name { font-family: var(--font-display); font-weight: 500; font-size: 17px; color: var(--s8-ink); }
/* calm running task list, next to the photo */
.hero-tasklist { flex: 1 1 auto; min-width: 0; position: relative; z-index: 1; background: var(--s8-paper); border: 1px solid var(--s8-line);
  border-radius: 14px; padding: 16px 20px; box-shadow: var(--shadow-sm); }
.hero-tasklist .task-feed-label { color: var(--s8-muted); }
.hero-feed-vp { height: 208px; }
.hero-tasklist .task-row { color: var(--s8-body); }
.hero-tasklist .task-row .t-time { color: var(--s8-muted); }
.hero-feed-track { animation: feedScroll 26s linear infinite; }
@media (prefers-reduced-motion: reduce) { .hero-feed-track { animation: none; } }
@media (max-width: 980px) { .hero-grid { grid-template-columns: 1fr; } .hero-fig { display: none; } }

/* hero card — live activity line */
.card-activity { display:flex; align-items:center; gap:10px; margin-top:16px; padding-top:14px;
  border-top:1px solid var(--s8-orange-line); font-family:var(--font-mono); font-size:12px; min-width:0; }
.live-dot { width:8px; height:8px; border-radius:50%; background:var(--s8-green); flex:none; animation:s8pulse 1.8s ease-in-out infinite; }
.live-now { color:var(--s8-muted); letter-spacing:.14em; text-transform:uppercase; font-size:10px; flex:none; }
.live-task { color:var(--s8-ink); transition:opacity .35s ease; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.live-task.fade { opacity:0; }
@keyframes s8pulse { 0%,100% { transform:scale(1); opacity:1; } 50% { transform:scale(1.4); opacity:.5; } }

/* FAQ accordion */
.faq { max-width:860px; }
.faq-item { border-top:1px solid var(--s8-line); }
.faq-item:last-child { border-bottom:1px solid var(--s8-line); }
.faq-q { display:flex; align-items:center; justify-content:space-between; gap:24px; width:100%; text-align:left;
  background:none; border:none; cursor:pointer; padding:22px 2px; color:var(--s8-ink);
  font-family:var(--font-display); font-weight:500; font-size:21px; line-height:1.25; }
.faq-q:hover { color:var(--s8-orange); }
.faq-plus { flex:none; position:relative; width:20px; height:20px; }
.faq-plus::before, .faq-plus::after { content:''; position:absolute; background:var(--s8-orange); }
.faq-plus::before { left:0; top:9px; width:20px; height:2px; }
.faq-plus::after { left:9px; top:0; width:2px; height:20px; transition:transform .25s ease, opacity .25s ease; }
.faq-item.open .faq-plus::after { transform:rotate(90deg); opacity:0; }
.faq-a { overflow:hidden; max-height:0; transition:max-height .3s ease; }
.faq-item.open .faq-a { max-height:340px; }
.faq-a p { padding:0 2px 24px; font-size:15px; line-height:1.6; color:var(--s8-body); max-width:64em; }
@media (prefers-reduced-motion:reduce) { .live-dot { animation:none; } .live-task { transition:none; }
  .faq-a { transition:none; } .faq-plus::after { transition:none; } }

/* footnoted statistics */
.proof-cell .fn { font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--s8-orange);
  vertical-align: super; line-height: 0; }
.footnotes { margin-top: 30px; padding-top: 16px; border-top: 1px solid var(--s8-line);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .05em; color: var(--s8-muted); line-height: 1.7; }
.footnotes b { color: var(--s8-orange); font-weight: 700; }

/* ============ NAV DROPDOWNS ============ */
.nav-item { position: relative; display: inline-flex; align-items: center; padding: 24px 0; }
.nav-item > .link { cursor: pointer; }
.nav-item > .link::after { content: ''; display: inline-block; width: 5px; height: 5px; margin-left: 7px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px); opacity: .5; }
.submenu { position: absolute; top: 100%; left: -12px; min-width: 208px; padding: 8px;
  background: var(--s8-paper); border: 1px solid var(--s8-line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(-5px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s; z-index: 60; }
.nav-item:hover .submenu, .nav-item:focus-within .submenu { opacity: 1; visibility: visible; transform: none; }
.submenu a { display: block; padding: 9px 12px; border-radius: var(--radius-sm); font-family: var(--font-sans);
  font-size: 14px; color: var(--s8-body); white-space: nowrap; }
.submenu a:hover { background: var(--s8-orange-wash); color: var(--s8-orange); }
@media (prefers-reduced-motion: reduce) { .submenu { transition: none; } }

/* ============ SUB-PAGE SHELL ============ */
.page-head { padding: 64px 0 44px; }
.page-head h1 { font-size: 52px; letter-spacing: -0.01em; max-width: 17em; }
.page-head .lead { margin-top: 18px; font-size: 19px; color: var(--s8-body); max-width: 46em; }
.sub-head { margin: 0 0 26px; display: flex; align-items: center; gap: 18px; }
.sub-head h2 { font-size: 27px; white-space: nowrap; }
.sub-head .rule { flex: 1; height: 1px; background: var(--s8-line); }

/* worker card grid */
.worker-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.worker-grid .agent-card { height: 100%; transition: transform .28s ease, box-shadow .28s ease; }
.worker-grid a.agent-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.agent-card.soon { background: var(--s8-tint); border-color: var(--s8-line); }
@media (max-width: 900px) { .worker-grid { grid-template-columns: 1fr; } }

/* request-a-role / partner forms */
.ask-box { margin-top: 26px; background: var(--s8-paper); border: 1px solid var(--s8-line);
  border-radius: var(--radius-lg); padding: 28px; box-shadow: var(--shadow-sm); max-width: 780px; }
.ask-box h3 { font-size: 24px; }
.ask-box p.note { margin-top: 10px; font-size: 15px; color: var(--s8-body); }
.field-row { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.field-row .field { flex: 1; min-width: 200px; }
.field-col { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.field-col .field, .field-col select.field { width: 100%; }
select.field { appearance: none; background-image: none; cursor: pointer; }
textarea.field { min-height: 96px; resize: vertical; font-family: var(--font-sans); }
.form-success { display: none; margin-top: 18px; padding: 16px 18px; border-radius: var(--radius-lg);
  background: var(--s8-orange-wash); border: 1px solid var(--s8-orange-line); font-size: 15px; color: var(--s8-body); }
.form-success strong { color: var(--s8-ink); }
.ask-box.done form { display: none; }
.ask-box.done .form-success { display: block; }

/* ============ WORKER ROLE PAGE ============ */
.role-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: start; }
@media (max-width: 900px) { .role-grid { grid-template-columns: 1fr; gap: 36px; } }
.handles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 30px; margin-top: 10px; }
.handles div { display: flex; gap: 11px; align-items: flex-start; font-size: 16px; color: var(--s8-body); }
.handles div::before { content: ''; width: 6px; height: 6px; border-radius: 2px; background: var(--s8-orange); flex: none; margin-top: 8px; }
@media (max-width: 700px) { .handles { grid-template-columns: 1fr; } }
.scorecard { background: var(--s8-orange-wash); border: 1px solid var(--s8-orange-line);
  border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow-sm); }
.scorecard .card-head { display: flex; align-items: center; gap: 16px; }
.scorecard .name { font-family: var(--font-display); font-weight: 500; font-size: 22px; color: var(--s8-ink); line-height: 1.05; }
.scorecard .role { font-size: 14px; color: var(--s8-muted); margin-top: 3px; }
.scorecard .sc-rule { height: 1px; background: var(--s8-orange-line); margin: 18px 0; }
.scorecard .sc-label { font-family: var(--font-mono); font-weight: 700; font-size: 10px; letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--s8-orange); margin-bottom: 2px; }
.scorecard .row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--s8-orange-line); }
.scorecard .row:last-child { border-bottom: none; }
.scorecard .row .k { font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--s8-muted); }
.scorecard .row .v { font-size: 13px; color: var(--s8-body); text-align: right; }
.scorecard .row .v b { color: var(--s8-green); font-family: var(--font-mono); font-weight: 700; }

/* ============ SKILL BROWSER ============ */
.filter-bar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 26px; }
.filter-bar .field { max-width: 300px; flex: none; }
.chipf { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  padding: 8px 14px; border-radius: var(--radius-pill); border: 1px solid var(--s8-line);
  background: transparent; color: var(--s8-body); cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.chipf:hover { border-color: var(--s8-orange); color: var(--s8-orange); }
.chipf.on { background: var(--s8-orange); border-color: var(--s8-orange); color: var(--s8-cream); }
.skill-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 900px) { .skill-grid { grid-template-columns: 1fr; } }
.skill-chip { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--s8-paper); border: 1px solid var(--s8-line); border-radius: var(--radius-md);
  padding: 12px 14px; box-shadow: var(--shadow-sm); }
.skill-chip .sk-name { font-size: 15px; color: var(--s8-ink); font-weight: 500; }
.skill-chip .sk-cat { font-family: var(--font-mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--s8-muted); margin-top: 2px; }
.sk-src { display: inline-flex; align-items: center; gap: 6px; flex: none; font-family: var(--font-mono);
  font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }
.sk-in { color: var(--s8-orange); border: 1px solid var(--s8-orange-line); background: var(--s8-orange-wash);
  padding: 4px 8px; border-radius: var(--radius-xs); }
.sk-partner { color: var(--s8-muted); }
.sk-partner .logo { width: 26px; height: 26px; border-radius: 5px; background: var(--s8-tint);
  border: 1px solid var(--s8-line); display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-sans); font-weight: 700; font-size: 9px; color: var(--s8-body); letter-spacing: 0; }
.skill-empty { display: none; padding: 30px 4px; color: var(--s8-muted); font-size: 15px; }

/* ============ MODAL ============ */
.modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center;
  background: rgba(31,29,26,.45); padding: 24px; }
.modal[hidden] { display: none; }
.modal-card { background: var(--s8-paper); border: 1px solid var(--s8-line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: 32px; max-width: 460px; width: 100%; }
.modal-card h3 { font-size: 26px; }
.modal-card p { margin-top: 12px; font-size: 15px; color: var(--s8-body); }
.modal-card .btn { margin-top: 22px; }

/* ============ TRAINERS ============ */
.trainer-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; max-width: 840px; }
@media (max-width: 800px) { .trainer-grid { grid-template-columns: 1fr; } }
.trains { display: flex; align-items: center; gap: 11px; margin-top: 2px; padding-top: 14px; border-top: 1px solid var(--s8-line); }
.trains .avatar { width: 34px; height: 34px; }
.trains .t-meta { min-width: 0; }
.trains .t-label { font-family: var(--font-mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--s8-muted); }
.trains .t-name { font-size: 13.5px; color: var(--s8-ink); font-weight: 500; margin-top: 2px; }
.trains .t-role { font-size: 11.5px; color: var(--s8-muted); }


/* ============ A DAY OF WORK — alternating zig-zag timeline ============ */
.day { max-width: 1000px; margin: 24px auto 0; }
/* rows spaced so ~one task is centred at a time — the waterfall shows the current one */
.day-row { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; min-height: 38vh; perspective: 1500px; }
.day-row:first-of-type { min-height: 26vh; }
.day-row:last-of-type { min-height: 30vh; }
.day-anim { display: flex; justify-content: center; opacity: 0; will-change: transform, opacity;
  transform-style: preserve-3d; transition: opacity .09s linear, transform .12s ease-out; }
.day-text { opacity: 0; will-change: transform, opacity; transition: opacity .09s linear, transform .12s ease-out; }
.day-text .s-no { font-family: var(--font-mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--s8-orange); }
.day-text h3 { font-size: 34px; margin-top: 12px; letter-spacing: -0.01em; }
.day-text p { margin-top: 14px; font-size: 18px; line-height: 1.5; color: var(--s8-body); max-width: 27em; }

/* curved connector; the tick turns green as you scroll past it */
.day-link { position: relative; height: 128px; }
.day-curve { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.day-curve path { fill: none; stroke: var(--s8-line-2); stroke-width: 2; stroke-dasharray: 2 8; stroke-linecap: round; }
.day-link.r2l .day-curve { transform: scaleX(-1); transform-origin: center; }
.day-tick { position: absolute; left: 50%; top: 50%; width: 42px; height: 42px; border-radius: 50%;
  background: var(--s8-tint); border: 2px solid var(--s8-line); display: flex; align-items: center; justify-content: center;
  transform: translate(-50%,-50%) scale(.62); opacity: .5;
  transition: transform .55s cubic-bezier(.2,1.5,.45,1), opacity .3s ease, background .3s ease, border-color .3s ease; }
.day-tick svg { width: 21px; height: 21px; stroke: var(--s8-muted); fill: none; }
.day-link.done .day-tick { background: var(--s8-green); border-color: var(--s8-green); opacity: 1;
  transform: translate(-50%,-50%) scale(1); box-shadow: 0 8px 18px rgba(62,107,79,.4); }
.day-link.done .day-tick svg { stroke: var(--s8-cream); }
.day-word { position: absolute; left: 50%; top: calc(50% + 32px); transform: translateX(-50%);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--s8-green);
  opacity: 0; transition: opacity .3s ease .1s; white-space: nowrap; }
.day-link.done .day-word { opacity: 1; }

/* glassy work-artifact cards */
.wk-card { position: relative; width: 340px; max-width: 100%; text-align: left; padding: 22px 24px; border-radius: 14px;
  background: rgba(255,254,250,0.82); -webkit-backdrop-filter: blur(12px) saturate(1.15); backdrop-filter: blur(12px) saturate(1.15);
  border: 1px solid rgba(216,210,196,0.85); box-shadow: 0 22px 60px rgba(31,29,26,.16), 0 5px 16px rgba(31,29,26,.09); }
.wk-lab { font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--s8-muted); }
.wk-t { font-family: var(--font-display); font-weight: 500; font-size: 22px; color: var(--s8-ink); line-height: 1.12; margin-top: 4px; }
.wk-s { font-size: 13px; color: var(--s8-muted); margin-top: 3px; }
.wk-row { display: flex; align-items: center; gap: 12px; }
.wk-avatar { width: 40px; height: 40px; border-radius: 50%; flex: none; background: repeating-linear-gradient(45deg,#EAE4D8 0 7px,#F1EDE5 7px 14px); border: 1px solid var(--s8-line); }
.wk-actions, .wk-foot { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
.wk-pill { font-family: var(--font-mono); font-weight: 700; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; padding: 5px 9px; border-radius: 5px; background: var(--s8-green); color: var(--s8-cream); }
.wk-meta { font-family: var(--font-mono); font-size: 11px; color: var(--s8-muted); }
.wk-amount { font-family: var(--font-display); font-size: 34px; color: var(--s8-ink); margin-top: 8px; }
.wk-bars { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.wk-bars span { height: 6px; border-radius: 3px; background: var(--s8-line); }
.wk-bars span:nth-child(1) { width: 85%; } .wk-bars span:nth-child(2) { width: 60%; } .wk-bars span:nth-child(3) { width: 72%; }
.wk-chips { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 12px; }
.wk-chips span { font-family: var(--font-mono); font-size: 11px; color: var(--s8-body); border: 1px solid var(--s8-line); border-radius: 4px; padding: 4px 9px; }
.wk-check { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--s8-body); margin-top: 12px; }
.wk-check::before { content: ''; width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid var(--s8-line); flex: none; }
.wk-check.done { color: var(--s8-ink); }
.wk-check.done::before { background: var(--s8-orange); border-color: var(--s8-orange);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8l3 3 5-6' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 12px; background-repeat: no-repeat; background-position: center; }
.wk-q { font-family: var(--font-display); font-size: 18px; color: var(--s8-ink); margin-top: 10px; }
.wk-a { font-size: 14px; line-height: 1.5; color: var(--s8-body); margin-top: 10px; padding: 12px 14px;
  background: var(--s8-orange-wash); border: 1px solid var(--s8-orange-line); border-radius: 8px; }

@media (prefers-reduced-motion: reduce) {
  .day-anim, .day-text { opacity: 1 !important; transform: none !important; transition: none; }
  .day-tick { transition: none; }
}
@media (max-width: 800px) {
  .day-row { grid-template-columns: 1fr; gap: 18px; }
  .day-row .day-anim { order: -1; }
  .day-anim, .day-anim.right { --fx: 0px; --fr: 0deg; }
  .day-link { height: 76px; }
  .day-text h3 { font-size: 26px; }
  .day-word { display: none; }
}
.wk-avatar.av-tom { background: url(/assets/01f75b862c.webp) center/cover no-repeat; border-color: var(--s8-line); }

/*=== NEXT STYLE BLOCK ===*/

/* Square8 AI worker portraits — real files (cached, parallel, non-blocking). WebP keeps the circular alpha at a fraction of PNG weight. */
.avatar.av-priya { background: url(/assets/ff27a7b3e6.webp) center/cover no-repeat; }
.avatar.av-deborah { background: url(/assets/0b626b9129.webp) center/cover no-repeat; }
.avatar.av-marcus { background: url(/assets/447c277226.webp) center/cover no-repeat; }
.avatar.av-aisha { background: url(/assets/f0dc79c30a.webp) center/cover no-repeat; }
.avatar.av-clara { background: url(/assets/2d7daf8abb.webp) center/cover no-repeat; }
.avatar.av-sofia { background: url(/assets/964e8e8455.webp) center/cover no-repeat; }
.avatar.av-omar { background: url(/assets/4986ed9af4.webp) center/cover no-repeat; }
.avatar.av-lukas { background: url(/assets/2079664a73.webp) center/cover no-repeat; }
.avatar.av-nisha { background: url(/assets/1f84c5083e.webp) center/cover no-repeat; }
.avatar.av-martina { background: url(/assets/be86360b93.webp) center/cover no-repeat; }
.avatar.av-thomas { background: url(/assets/66ca391cd7.webp) center/cover no-repeat; }


/*=== NEXT STYLE BLOCK ===*/

/* Global additions: mobile optimisation, print justification, no-line-break helper */
.keep-line { white-space: nowrap; }
@media (max-width: 480px) { .keep-line { white-space: normal; } }
@media print {
  body, p, li, .lead { text-align: justify; }
}
@media (max-width: 600px) {
  html { -webkit-text-size-adjust: 100%; }
  .wrap { padding-left: 20px; padding-right: 20px; }
  h1 { font-size: clamp(28px, 7vw, 40px); }
  h2 { font-size: clamp(22px, 6vw, 30px); }
  table { display: block; overflow-x: auto; }
}

/*=== NEXT STYLE BLOCK ===*/

/* ============================================================
   B+ REDESIGN LAYER — dimensional glass + drifting colour flow
   (cascades last; leaves the day-of-work animation intact)
   ============================================================ */

body { background:
  radial-gradient(1100px 620px at 82% -6%, #F6EEE4, transparent 60%),
  radial-gradient(900px 700px at 0% 108%, #E9EFE8, transparent 55%),
  linear-gradient(180deg, var(--s8-cream), #E9E2D6); }

/* drifting colour aura behind everything */
.aura { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.aura b { position: absolute; display: block; border-radius: 50%; filter: blur(72px);
  opacity: .5; mix-blend-mode: multiply; will-change: transform; }
.aura .g1 { width: 62vw; height: 62vw; top: -20vw; right: -14vw;
  background: radial-gradient(circle, rgba(228,103,31,.55), transparent 60%); animation: s8drift 21s ease-in-out infinite; }
.aura .g2 { width: 52vw; height: 52vw; bottom: -18vw; left: -14vw;
  background: radial-gradient(circle, rgba(78,158,106,.50), transparent 60%); animation: s8drift 27s ease-in-out infinite reverse; }
.aura .g3 { width: 44vw; height: 44vw; top: 40%; left: 46%;
  background: radial-gradient(circle, rgba(232,163,61,.48), transparent 60%); animation: s8drift 24s ease-in-out 1s infinite; }
@keyframes s8drift { 0%,100% { transform: translate(0,0) scale(1); }
  33% { transform: translate(-4vw,3vw) scale(1.12); } 66% { transform: translate(3vw,-3vw) scale(.95); } }
@media (prefers-reduced-motion: reduce) { .aura b { animation: none; } }

/* ---------- type: confident grotesque headlines ---------- */
h1, h2, h3 { font-weight: 700; letter-spacing: -0.025em; }
.hero h1 { font-weight: 800; font-size: clamp(34px, 3.8vw, 52px); line-height: 1.02; letter-spacing: -0.03em; }
.section-head h2, .manifesto h2, .finalcta h2, .dossier-left h2 { font-weight: 800; letter-spacing: -0.03em; }
.gradient, .hero h1 .accent, .manifesto h2 .accent {
  font-style: normal !important; background: var(--grad-accent);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.eyebrow { color: var(--s8-orange); }

/* ---------- nav (glassier, new paper) ---------- */
header.nav { background: rgba(239,236,227,.72); backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); border-bottom-color: rgba(217,211,197,.8); }
.nav-logo { width: 122px; }
.nav-links .link { font-family: var(--font-sans); font-size: 14px; letter-spacing: 0; text-transform: none; font-weight: 500; color: var(--s8-body); }
.nav-links .link:hover { color: var(--s8-orange); }
.submenu a { font-family: var(--font-sans); }

/* ---------- buttons: gradient pills, mono label ---------- */
.btn { font-family: var(--font-mono); font-weight: 500; text-transform: uppercase;
  letter-spacing: .06em; font-size: 12px; border-radius: 999px; padding: 14px 24px; }
.btn--lg { font-size: 13px; padding: 17px 30px; }
.btn--primary { background: var(--grad-orange); color: #fff; border: none;
  box-shadow: 0 14px 34px rgba(188,82,26,.34); transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; }
.btn--primary:hover { transform: translateY(-2px); filter: none; box-shadow: 0 20px 46px rgba(188,82,26,.46); }

/* ---------- tags / dots pop ---------- */
.tag--agent { background: var(--grad-orange); }
.tag--human { background: var(--grad-green); color: #fff; }
.dot--deployed { box-shadow: 0 0 9px rgba(78,158,106,.7); }

/* ---------- hero figure: glass task panel ---------- */
.hero-tasklist { background: var(--glass); backdrop-filter: blur(16px) saturate(1.35);
  -webkit-backdrop-filter: blur(16px) saturate(1.35); border: 1px solid var(--glass-line);
  box-shadow: var(--glass-shadow); border-radius: 18px; }
.avatar.hero-avatar { box-shadow: 0 18px 44px rgba(70,48,24,.24); }
.nucleus-cap { background: var(--glass); border-color: var(--glass-line); backdrop-filter: blur(10px); }

/* ---------- proof band: glass, gradient numerals ---------- */
.proof { background: rgba(255,255,255,.34); backdrop-filter: blur(8px);
  border-color: rgba(217,211,197,.7); }
.proof-cell { border-left-color: rgba(217,211,197,.7); }
.proof-cell .num { font-weight: 800; letter-spacing: -.02em; }

/* ---------- roster cards: glass + depth ---------- */
.agent-card { background: var(--glass); border: 1px solid var(--glass-line);
  backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: var(--glass-shadow); border-radius: 18px; }
.agent-card:hover { transform: translateY(-6px); box-shadow: 0 30px 70px rgba(70,48,24,.20); }
.mgr-node { background: var(--glass); border-color: var(--glass-line); backdrop-filter: blur(12px); border-radius: 16px; }
.agent-foot { display: none; }

/* ---------- how it works: glass panel ---------- */
.steps { background: var(--glass); backdrop-filter: blur(12px); border-color: var(--glass-line);
  border-radius: 18px; box-shadow: var(--glass-shadow); }
.step { border-left-color: rgba(217,211,197,.65); }
.step .no { color: var(--s8-orange); }
.step h3 { font-weight: 700; }

/* ---------- controls: DE-CARDED — one integrated spec panel with icon chips ---------- */
.controls { grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--glass-line);
  border-radius: 20px; overflow: hidden; background: var(--glass); backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3); box-shadow: var(--glass-shadow); }
.control { background: transparent; border: 0; border-radius: 0; box-shadow: none;
  border-top: 1px solid rgba(217,211,197,.6); border-left: 1px solid rgba(217,211,197,.6); padding: 30px 28px; }
.control:nth-child(-n+3) { border-top: 0; }
.control:nth-child(3n+1) { border-left: 0; }
.control-icon { width: 42px; height: 42px; border-radius: 11px; background: var(--grad-orange);
  color: #fff; display: flex; align-items: center; justify-content: center; margin-bottom: 16px;
  box-shadow: 0 8px 20px rgba(188,82,26,.28); }
.control-icon svg { width: 21px; height: 21px; }
.control h3 { font-weight: 700; font-size: 20px; }
@media (max-width: 820px) { .controls { grid-template-columns: 1fr; }
  .control { border-left: 0; } .control:nth-child(-n+3) { border-top: 1px solid rgba(217,211,197,.6); }
  .control:first-child { border-top: 0; } }

/* ---------- dossier: deeper ink with an ember glow ---------- */
.dossier { background: #141109; position: relative; box-shadow: 0 40px 90px rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.06); }
.dossier::before { content: ''; position: absolute; width: 460px; height: 460px; top: -160px; right: -120px;
  background: radial-gradient(circle, rgba(228,103,31,.35), transparent 62%); filter: blur(30px); pointer-events: none; }
.dossier-left, .dossier-right { position: relative; z-index: 1; }

/* ---------- FAQ ---------- */
.faq-q { font-weight: 700; }

/* ---------- manifesto ---------- */
.manifesto h2 { font-weight: 800; }

/* ---------- FINAL CTA: dark, dramatic close ---------- */
.finalcta { background: #141109; border-top: 0; position: relative; overflow: hidden; }
.finalcta::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(680px 360px at 50% -10%, rgba(228,103,31,.42), transparent 62%); }
.finalcta-inner { position: relative; z-index: 1; }
.finalcta .eyebrow { color: var(--s8-orange-bright); }
.finalcta h2 { color: var(--s8-cream); font-weight: 800; }
.finalcta p { color: rgba(239,236,227,.72); }
.finalcta .field { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); color: var(--s8-cream); }
.finalcta .field::placeholder { color: rgba(239,236,227,.5); }
.finalcta .waitlist-success { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); color: var(--s8-cream); }

/* ---------- footer ---------- */
footer.foot { background: #141109; }

/* ---------- ticker: gradient label ---------- */
.ticker-label { background: var(--grad-orange); }

/* ---------- sub-page components (harmless on the homepage) ---------- */
.page-head h1 { font-weight: 800; letter-spacing: -.03em; }
.sub-head h2 { font-weight: 700; }
.worker-grid .agent-card, .trainer-grid .agent-card { background: var(--glass); border: 1px solid var(--glass-line);
  backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); box-shadow: var(--glass-shadow); border-radius: 18px; }
.agent-card.soon { background: rgba(255,255,255,.32); }
.scorecard, .ask-box { background: var(--glass); border: 1px solid var(--glass-line);
  backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); box-shadow: var(--glass-shadow); border-radius: 18px; }
.scorecard h3, .ask-box h3 { font-weight: 700; }
.skill-chip { background: var(--glass); border: 1px solid var(--glass-line); backdrop-filter: blur(10px); box-shadow: none; border-radius: 12px; }
.handles div::before { background: var(--s8-orange); }
.chipf.on { background: var(--grad-orange); border-color: transparent; color: #fff; }
.modal-card { background: var(--s8-paper); border-color: var(--glass-line); border-radius: 18px; }

/* ---------- work-artifact cards (animation): a touch more glass ---------- */
.wk-card { background: rgba(255,254,250,0.72); border-color: rgba(255,255,255,.7);
  box-shadow: 0 26px 66px rgba(70,48,24,.18), 0 6px 18px rgba(70,48,24,.10); }
.wk-pill { background: var(--s8-green-bright); }

/* ---------- HERO: floating glass panels around Deborah ---------- */
.hero-fig { display: block; overflow: visible; }
.hero-stack { position: relative; width: 100%; max-width: 580px; height: 500px; margin: 0 auto; perspective: 1400px; }
.hp { position: absolute; transition: transform .25s ease-out; will-change: transform; }
.hero-pane { border-radius: 18px; background: var(--glass); border: 1px solid var(--glass-line);
  backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); box-shadow: var(--glass-shadow); }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }

.hp-deborah { top: 6px; left: 0; width: 250px; z-index: 4; }
.hp-deborah .hero-pane { padding: 20px; animation: floaty 7s ease-in-out infinite; }
.pane-fig .pf-top { display: flex; align-items: center; gap: 14px; }
.pane-fig .avatar { width: 60px; height: 60px; box-shadow: 0 6px 16px rgba(70,48,24,.18); }
.pane-fig .name { font-family: var(--font-display); font-weight: 700; font-size: 19px; color: var(--s8-ink); line-height: 1.1; letter-spacing: -.01em; }
.pane-fig .role { font-size: 13px; color: var(--s8-muted); margin-top: 2px; }
.pane-fig .pf-meta { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
.pane-fig .status { font-size: 13px; }

.hp-tasks { top: 172px; right: 0; width: 270px; z-index: 3; }
.hp-tasks .hero-pane { padding: 18px 20px; animation: floaty 8.5s ease-in-out .6s infinite; }
.hp-tasks .task-feed-label { color: var(--s8-muted); }
.hp-tasks .hero-feed-vp { height: 182px; }
.hp-tasks .task-row { color: var(--s8-body); }
.hp-tasks .task-row .t-time { color: var(--s8-muted); }

.hp-pay { bottom: 0; left: 22px; width: 208px; z-index: 5; }
.hp-pay .hero-pane { padding: 18px 20px; animation: floaty 6.5s ease-in-out .3s infinite; }
.hp-lab { font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--s8-muted); }
.hp-amount { font-family: var(--font-display); font-weight: 700; font-size: 30px; color: var(--s8-ink); letter-spacing: -.02em; margin: 6px 0 10px; }
.hp-tag { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-weight: 500; font-size: 10px;
  letter-spacing: .06em; text-transform: uppercase; color: #fff; background: var(--s8-green-bright); border-radius: 999px; padding: 6px 11px; }
.hp-check { width: 12px; height: 12px; border-radius: 3px; background: rgba(255,255,255,.28); position: relative; flex: none; }
.hp-check::after { content: ''; position: absolute; left: 4px; top: 1.5px; width: 3px; height: 6px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
@media (prefers-reduced-motion: reduce) { .hero-pane { animation: none !important; } }

@media (max-width: 560px) { .hero h1 { font-size: clamp(38px, 10vw, 52px); } }

/* ============ HIRE · TRAIN · MANAGE — transparent step flow ============ */
.steps--flow { position: relative; background: transparent !important; border: 0 !important; box-shadow: none !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  grid-template-columns: repeat(3, 1fr); gap: 30px; padding: 12px 0 0; overflow: visible; }
.steps--flow .step { background: transparent; border: 0 !important; padding: 26px 22px 0; text-align: center; position: relative; }
/* connector line + animated fill (nodes sit on it) */
.flow-line { position: absolute; top: 81px; left: calc(16.6667% - 10px); right: calc(16.6667% - 10px); height: 2px;
  background: rgba(188,82,26,.18); border-radius: 2px; z-index: 0; }
.flow-line .flow-fill { position: absolute; left: 0; top: 0; height: 100%; width: 0; border-radius: 2px;
  background: var(--grad-orange); box-shadow: 0 0 14px rgba(228,103,31,.6); transition: width 1.5s cubic-bezier(.4,0,.2,1); }
.steps--flow.in .flow-line .flow-fill { width: 100%; }
/* number nodes */
.step-node { width: 88px; height: 88px; border-radius: 50%; margin: 0 auto 20px; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 800; font-size: 30px; letter-spacing: -.02em; position: relative; z-index: 2;
  background: var(--s8-paper); border: 2px solid var(--s8-line); color: var(--s8-muted);
  transition: transform .3s ease, box-shadow .45s ease, background .55s ease, color .55s ease, border-color .55s ease; }
.steps--flow.in .step:nth-child(2) .step-node { transition-delay: .15s; }
.steps--flow.in .step:nth-child(3) .step-node { transition-delay: .75s; }
.steps--flow.in .step:nth-child(4) .step-node { transition-delay: 1.3s; }
.steps--flow.in .step-node { background: var(--grad-orange); border-color: transparent; color: #fff; box-shadow: 0 12px 30px rgba(188,82,26,.34); }
.steps--flow .no { font-family: var(--font-sans); font-weight: 600; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--s8-orange); }
.steps--flow .step h3 { margin-top: 8px; font-weight: 700; font-size: 25px; }
.steps--flow .step p { margin: 12px auto 0; max-width: 30ch; font-size: 15.5px; color: var(--s8-body); }
/* hover: lift the node + a soft glow behind the step */
.steps--flow .step::before { content: ''; position: absolute; top: -6px; left: 50%; transform: translateX(-50%); width: 200px; height: 200px;
  border-radius: 50%; background: radial-gradient(circle, rgba(228,103,31,.16), transparent 68%); opacity: 0; transition: opacity .35s ease; pointer-events: none; z-index: 0; }
.steps--flow .step:hover::before { opacity: 1; }
.steps--flow .step:hover .step-node { transform: translateY(-5px) scale(1.05); box-shadow: 0 18px 44px rgba(188,82,26,.45); }
@media (max-width: 820px) { .steps--flow { grid-template-columns: 1fr; gap: 8px; } .flow-line { display: none; } }

/* ============ MEET YOUR NEW COLLEAGUES — lighter glass + drawn connectors ============ */
#roster .agent-card, #roster .mgr-node { background: rgba(255,255,255,.34); }
/* Priya's manager card = same size/style as the agent cards */
.org-top .mgr-node { display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 16px;
  width: calc((100% - 40px) / 3); min-height: 195px; padding: 24px; border-radius: 18px; }
.org-top .mgr-node .avatar { width: 66px; height: 66px; }
/* Priya's manager card = same size/style as the agent cards */
.org-top .mgr-node { display: flex; flex-direction: column; justify-content: center; align-items: stretch; gap: 16px;
  width: calc((100% - 40px) / 3); min-height: 195px; padding: 24px; border-radius: 18px; }
.org-top .mgr-node .avatar { width: 66px; height: 66px; }
.org-top .mgr-node .name { font-size: 22px; }
.org-top .mgr-node .role { font-size: 14px; }
#roster .agent-card:hover { box-shadow: 0 30px 70px rgba(70,48,24,.20), 0 0 0 1px rgba(228,103,31,.22); }
/* connector geometry fix — close on the card centres despite the 20px grid gap */
.org-branch::before { left: calc(16.6667% - 6.667px); right: calc(16.6667% - 6.667px); }
/* connectors draw themselves in when the section scrolls into view */
.org-top::after { transform: translateX(-1px) scaleY(0); transform-origin: top center; transition: transform .5s ease; }
#roster.in-org .org-top::after { transform: translateX(-1px) scaleY(1); }
.org-branch::before { transform: scaleX(0); transform-origin: center; transition: transform .7s cubic-bezier(.4,0,.2,1) .4s; }
#roster.in-org .org-branch::before { transform: scaleX(1); }
.org-cell::before { transform: translateX(-1px) scaleY(0); transform-origin: top center; transition: transform .5s ease 1s; }
#roster.in-org .org-cell::before { transform: translateX(-1px) scaleY(1); }
@media (prefers-reduced-motion: reduce) {
  .flow-line .flow-fill { transition: none; width: 100%; }
  .org-top::after, .org-branch::before, .org-cell::before { transition: none; transform: none; }
  .org-top::after, .org-cell::before { transform: translateX(-1px); }
}

/* ============ HERO: integration logos + Slack card + entrance ============ */
.hero-stack { height: 560px; }
.hp-deborah { top: 18px; left: 0; width: 242px; z-index: 6; }
.hp-slack { bottom: 14px; right: 0; width: 322px; z-index: 7; }
.hp-slack .hero-pane { animation: floaty 8s ease-in-out .4s infinite; }

/* integration logo tiles */
.hp-logo { z-index: 3; }
.logo-tile { background: rgba(255,255,255,.94); border: 1px solid rgba(255,255,255,.9); border-radius: 13px;
  padding: 8px 14px; height: 44px; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  box-shadow: 0 14px 30px rgba(70,48,24,.16), 0 2px 6px rgba(70,48,24,.08); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  animation: floaty 6.5s ease-in-out infinite; }
.hp-logo:nth-child(2) .logo-tile { animation-duration: 7.5s; animation-delay: .5s; }
.hp-logo:nth-child(3) .logo-tile { animation-duration: 8s; animation-delay: .2s; }
.hp-logo:nth-child(5) .logo-tile { animation-duration: 7s; animation-delay: .8s; }
.hp-logo:nth-child(7) .logo-tile { animation-duration: 8.5s; animation-delay: .3s; }
.lt-name { font-family: var(--font-sans); font-weight: 600; font-size: 13.5px; color: var(--s8-ink); }
.lt-word { font-family: var(--font-sans); }
.lt-ic { width: 24px; height: 24px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; }
.lt-slack { flex: none; }

/* Slack card */
.slack-pane { padding: 0 !important; overflow: hidden; background: #fff !important; border: 1px solid rgba(0,0,0,.07) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: 0 26px 60px rgba(70,48,24,.20), 0 4px 14px rgba(0,0,0,.06) !important; }
.slack-head { background: #3F0E40; color: #fff; font-weight: 700; font-size: 13px; padding: 11px 15px; display: flex; align-items: center; gap: 6px; }
.slack-hash { opacity: .65; font-weight: 500; }
.slack-live { margin-left: auto; width: 8px; height: 8px; border-radius: 50%; background: #2EB67D; box-shadow: 0 0 8px rgba(46,182,125,.8); }
.slack-msg { display: flex; gap: 11px; padding: 14px 16px 16px; }
.slack-av { width: 40px; height: 40px; border-radius: 9px !important; flex: none; }
.slack-body { min-width: 0; }
.slack-name { font-family: var(--font-sans); font-weight: 700; font-size: 14px; color: #1D1C1D; display: flex; align-items: center; gap: 7px; }
.slack-app { background: var(--grad-orange); color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: .06em; }
.slack-time { color: #9b9a9b; font-weight: 400; font-size: 11px; }
.slack-text { font-family: var(--font-sans); font-size: 13px; color: #1D1C1D; line-height: 1.5; margin-top: 4px; }
.slack-react { display: flex; gap: 7px; margin-top: 10px; }
.react { display: inline-flex; align-items: center; gap: 6px; background: #F6F6F7; border: 1px solid #e5e6e8; border-radius: 20px;
  padding: 3px 10px; font-family: var(--font-sans); font-size: 12px; color: #5a5a5c; }
.react--reply { color: #1264A3; background: #EAF3FB; border-color: #d3e6f5; }
.rc-check { width: 13px; height: 13px; border-radius: 50%; background: #2EB67D; position: relative; }
.rc-check::after { content: ''; position: absolute; left: 4px; top: 2px; width: 3px; height: 6px; border: solid #fff; border-width: 0 1.6px 1.6px 0; transform: rotate(45deg); }

/* entrance: cards first, logos pop in around them */
#heroStack .hp { opacity: 0; animation: heroIn .6s cubic-bezier(.2,.75,.25,1) forwards; }
@keyframes heroIn { from { opacity: 0; transform: translateY(20px) scale(.94); } to { opacity: 1; transform: none; } }
#heroStack .hp-deborah { animation-delay: .1s; }
#heroStack .hp-slack { animation-delay: .24s; }
#heroStack .hp-logo:nth-child(1) { animation-delay: .46s; }
#heroStack .hp-logo:nth-child(2) { animation-delay: .52s; }
#heroStack .hp-logo:nth-child(3) { animation-delay: .58s; }
#heroStack .hp-logo:nth-child(4) { animation-delay: .64s; }
#heroStack .hp-logo:nth-child(5) { animation-delay: .70s; }
#heroStack .hp-logo:nth-child(6) { animation-delay: .76s; }
#heroStack .hp-logo:nth-child(7) { animation-delay: .82s; }
#heroStack .hp-logo:nth-child(8) { animation-delay: .88s; }
@media (prefers-reduced-motion: reduce) {
  #heroStack .hp { opacity: 1; animation: none; }
  .logo-tile, .hp-slack .hero-pane { animation: none; }
}

/* ============ HERO HUB-AND-SPOKE (overrides) ============ */
.hero-grid { grid-template-columns: minmax(0, 1fr) 560px; gap: 48px; }
@media (max-width: 1080px) { .hero-grid { grid-template-columns: 1fr; } .hero-fig { display: none; } }
.hero-stack { width: 560px; max-width: 560px; height: 540px; }
.hp-deborah { left: 165px; top: 204px; width: 230px; z-index: 6; }
.hp-slack { top: 2px; right: 0; left: auto; bottom: auto; width: 292px; z-index: 7; }
.hp-slack .hero-pane { animation: floaty 8s ease-in-out .4s infinite; }
.hp-logo { z-index: 3; }

/* dotted connectors with flowing dots (data → Deborah) */
.hub-lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; overflow: visible; animation: linesIn .7s ease .45s both; }
@keyframes linesIn { from { opacity: 0; } to { opacity: 1; } }
.hub-line { fill: none; stroke: var(--s8-orange); stroke-width: 1.7; stroke-dasharray: 1.6 7; stroke-linecap: round; stroke-opacity: .5; animation: hubflow 1s linear infinite; }
@keyframes hubflow { to { stroke-dashoffset: -8.6; } }

/* Deborah hub: gentle pulse ring */
.hp-deborah .hero-pane { position: relative; }
.hp-deborah .hero-pane::after { content: ''; position: absolute; inset: 0; border-radius: 18px; box-shadow: 0 0 0 0 rgba(228,103,31,.28); animation: hubpulse 2.8s ease-out infinite; pointer-events: none; }
@keyframes hubpulse { 0% { box-shadow: 0 0 0 0 rgba(228,103,31,.26); } 70% { box-shadow: 0 0 0 16px rgba(228,103,31,0); } 100% { box-shadow: 0 0 0 0 rgba(228,103,31,0); } }

/* Slack card: typing indicator */
.slack-typing { display: flex; align-items: center; gap: 8px; padding: 0 16px 13px; font-family: var(--font-sans); font-size: 12px; color: #9b9a9b; }
.tdots { display: inline-flex; gap: 3px; }
.tdots i { width: 5px; height: 5px; border-radius: 50%; background: #bdbcbd; animation: tbounce 1.3s infinite; }
.tdots i:nth-child(2) { animation-delay: .16s; } .tdots i:nth-child(3) { animation-delay: .32s; }
@keyframes tbounce { 0%,60%,100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }

/* entrance re-stagger for hub (svg=child1; logos=2-6; deborah=7; slack=8) */
#heroStack .hp-deborah { animation-delay: .05s; }
#heroStack .hp-slack { animation-delay: .2s; }
#heroStack .hp-logo { animation-delay: .5s; }
#heroStack .hp:nth-child(3) { animation-delay: .56s; }
#heroStack .hp:nth-child(4) { animation-delay: .62s; }
#heroStack .hp:nth-child(5) { animation-delay: .68s; }
#heroStack .hp:nth-child(6) { animation-delay: .74s; }

/* headline: rotating role */
.role-roller { display: inline-flex; align-items: baseline; }
.role-roller .brk { color: var(--s8-orange); opacity: .5; font-weight: 800; }
.roller { display: inline-block; overflow: hidden; height: 1.15em; line-height: 1.15em; vertical-align: bottom; transition: width .5s cubic-bezier(.5,0,.15,1); }
.roller-list { display: flex; flex-direction: column; align-items: flex-start; will-change: transform; }
.roller-item { height: 1.15em; line-height: 1.15em; white-space: nowrap; padding: 0 .05em; color: var(--s8-ink); }
@media (prefers-reduced-motion: reduce) { .hub-line, .tdots i, .hp-deborah .hero-pane::after { animation: none; } .roller-list { transform: none !important; } }

/* ============ HERO WORKSPACE (Gmail + Deborah + Tasks + logo row) ============ */
.hero-stack { height: 452px; }
.hp-deborah .hero-pane::after { display: none; } /* drop the pulse ring */

/* Gmail window */
.hp-gmail { top: 0; right: 0; left: auto; bottom: auto; width: 412px; z-index: 3; }
.gmail-pane { padding: 0 !important; overflow: hidden; background: #fff !important; border: 1px solid rgba(0,0,0,.08) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: 0 24px 56px rgba(70,48,24,.18), 0 3px 10px rgba(0,0,0,.05) !important; }
.gmail-head { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-bottom: 1px solid #ededed; }
.gmail-logo { flex: none; }
.gmail-title { font-family: var(--font-sans); font-weight: 700; font-size: 13px; color: #202124; }
.gmail-acc { margin-left: auto; width: 24px !important; height: 24px !important; border-radius: 50% !important; flex: none; box-shadow: 0 0 0 2px #fff; }
.gmail-list { padding-left: 96px; }
.gmail-row { display: flex; align-items: center; gap: 10px; padding: 9px 14px 9px 0; border-bottom: 1px solid #f4f4f4; font-family: var(--font-sans); font-size: 12.5px; }
.g-from { width: 62px; }
.gmail-row:last-child { border-bottom: 0; }
.gmail-row.unread { background: #F6FBFF; }
.g-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: transparent; box-shadow: inset 0 0 0 1px #d0d0d0; }
.gmail-row.unread .g-dot { background: #1A73E8; box-shadow: none; }
.g-from { color: #202124; width: 76px; flex: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gmail-row.unread .g-from { font-weight: 700; }
.g-subj { color: #5f6368; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gmail-row.unread .g-subj { color: #202124; font-weight: 600; }
.g-time { color: #9aa0a6; font-size: 11px; flex: none; }

/* Deborah profile — front-left, solid white card */
.hp-deborah { top: 54px; left: 0; width: 236px; z-index: 6; }
.hp-deborah .hero-pane { background: #fff !important; border-color: rgba(0,0,0,.07) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; animation: none !important; }

/* Tasks — working → done */
.hp-tasks2 { top: 214px; left: 0; width: 250px; z-index: 6; }
.tasks-pane { padding: 15px 17px !important; }
.tasks-arrow { position: absolute; left: -26px; top: 50%; transform: translateY(-50%); color: var(--s8-orange); font-size: 24px; font-weight: 700; line-height: 1; }
.tasks-head { font-family: var(--font-sans); font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--s8-muted); display: flex; align-items: center; gap: 7px; margin-bottom: 13px; }
.th-live { width: 7px; height: 7px; border-radius: 50%; background: var(--s8-green); box-shadow: 0 0 8px rgba(78,158,106,.8); animation: s8pulse 1.8s ease-in-out infinite; }
.tasks-list { display: flex; flex-direction: column; gap: 12px; }
.task-row2 { display: flex; align-items: center; gap: 11px; font-family: var(--font-sans); font-size: 13.5px; color: var(--s8-body); }
.task-row2 .tbox { width: 18px; height: 18px; border-radius: 6px; border: 1.6px solid var(--s8-line); flex: none; position: relative; transition: background .3s, border-color .3s; }
.task-row2 .ttext { transition: color .3s; }
.task-row2.working .tbox { border-color: var(--s8-orange); }
.task-row2.working .tbox::after { content: ''; position: absolute; inset: 2px; border-radius: 50%; border: 2px solid var(--s8-orange); border-top-color: transparent; animation: spin .7s linear infinite; }
.task-row2.working .ttext { color: var(--s8-ink); font-weight: 600; }
.task-row2.done .tbox { background: var(--s8-green); border-color: var(--s8-green); }
.task-row2.done .tbox::after { content: ''; position: absolute; left: 5.5px; top: 2px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.task-row2.done .ttext { color: var(--s8-muted); text-decoration: line-through; }
@keyframes spin { to { transform: rotate(360deg); } }

/* tool logo row */
.hp-logorow { left: 0; right: 0; bottom: 0; top: auto; z-index: 4; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.hp-logorow .logo-tile { animation: none; padding: 7px 11px; gap: 7px; height: 42px; }
.hp-logorow .lt-name { font-size: 12.5px; }

/* entrance stagger for the workspace */
#heroStack .hp-gmail { animation-delay: .08s; }
#heroStack .hp-deborah { animation-delay: .2s; }
#heroStack .hp-tasks2 { animation-delay: .32s; }
#heroStack .hp-logorow { animation-delay: .46s; }

/* ---------- mobile fix (Next.js port addition, not in the original design):
   .sub-head h2 is nowrap and overflows the viewport on phones for longer
   headings (e.g. "AI workers in training · coming soon"). Let it wrap. */
@media (max-width: 560px) {
  .sub-head h2 { white-space: normal; }
  /* 52px page-head headlines overflow narrow phones on long words
     ("Administrator"); scale with the viewport like the index hero does. */
  .page-head h1 { font-size: clamp(34px, 13vw, 52px); }
  /* the fixed-width day cards (.wk-card, 340px) otherwise force the grid
     track wider than tiny viewports */
  .day-row { grid-template-columns: minmax(0, 1fr); }
  /* dossier: the stacked track otherwise sizes to its item's min-content
     (368px) and the panel clips on phones */
  .dossier-grid { grid-template-columns: minmax(0, 1fr); }
  /* dossier: on phones, cut the section after the live task queue —
     the full spec ledger is too much for a small screen */
  .dossier-right { display: none; }
  .dossier-left { border-right: none; }
  /* controls ("low-risk by design"): collapse to three cards behind a
     Show-more button on phones */
  .controls:not(.controls--expanded) .control:nth-child(n+4) { display: none; }
  .controls:not(.controls--expanded) + .controls-more { display: flex; margin: 18px auto 0; }
}
@media (max-width: 380px) {
  /* at the 38px clamp floor the rotating role word ("Customer Support")
     exceeds the viewport; let the whole headline keep scaling down */
  .hero h1 { font-size: clamp(30px, 9.8vw, 52px); }
}

/* .keep-line (nowrap) overflows viewports narrower than its longest kept
   line (the become-a-trainer headline needs ~1100px; index lead paragraphs
   ~820px). Below that, let text wrap normally. */
@media (max-width: 1100px) {
  .keep-line { white-space: normal; }
}

/* ---------- mobile org chart (Next.js port change, replaces the design's
   zoom:calc() "fixed picture" — Chrome ignores calc() inside zoom):
   show two reports instead of three, at natural size, full width. */
@media (max-width: 820px) {
  .org-branch { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* connector spans the two card centres (track/2 = 25% - half the 20px gap) */
  .org-branch::before { left: calc(25% - 5px); right: calc(25% - 5px); }
  .org-cell:nth-child(3) { display: none; }
  /* manager card matches the new half-width cards instead of one third */
  .org-top .mgr-node { width: calc((100% - 20px) / 2); }
  /* inside the narrower cards, let the avatar row wrap instead of
     forcing the column wider than half a phone screen */
  .org-cell .agent-top, .org-top .mgr-node .agent-top { flex-wrap: wrap; }
  .org-cell .agent-top > div, .org-top .mgr-node .agent-top > div { min-width: 0; }
}
/* phones: a single full-width report reads better than two cramped
   half-width cards */
@media (max-width: 560px) {
  .org-branch { grid-template-columns: minmax(0, 1fr); }
  .org-branch::before { display: none; }
  .org-cell:nth-child(2) { display: none; }
  .org-top .mgr-node { width: 100%; }
}

/* phones: the header button reads just "Waitlist" — the full
   "Waitlist sign up" wraps awkwardly in the nav pill on small screens */
@media (max-width: 560px) {
  .nav-cta .cta-suffix { display: none; }
}

/* ---------- mobile nav menu (Next.js port addition): the design hides
   .nav-links below 980px with no replacement; a hamburger menu (pure
   CSS via <details>) fills the gap. */
.nav-burger { display: none; position: relative; margin-left: 12px; flex: none; }
.nav-burger > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border: 1px solid var(--s8-line); border-radius: 10px;
  background: var(--s8-paper); color: var(--s8-ink); }
.nav-burger > summary::-webkit-details-marker { display: none; }
.nav-burger[open] > summary { background: var(--s8-tint); }
.burger-menu { position: absolute; right: 0; top: calc(100% + 10px); min-width: 230px; background: var(--s8-paper);
  border: 1px solid var(--s8-line); border-radius: 14px; box-shadow: var(--shadow-md); padding: 10px; z-index: 80; }
.burger-menu a { display: block; padding: 9px 12px; border-radius: 8px; font-size: 15px; font-weight: 600; color: var(--s8-ink); }
.burger-menu a:hover { background: var(--s8-tint); }
.burger-menu .bm-sub { padding-left: 24px; font-weight: 500; color: var(--s8-body); }
.burger-menu .bm-label { display: block; padding: 9px 12px 2px; font-family: var(--font-mono); font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--s8-muted); }
@media (max-width: 980px) {
  .nav-burger { display: block; }
  .nav-inner { justify-content: flex-start; }
  .nav-cta { margin-left: auto; }
}

/* "Show more" for the controls grid — only rendered on phones (see the
   560px block); hidden everywhere else and once expanded */
.controls-more { display: none; }

/* Brand-styled "Get in touch" form in the final CTA band. Submits to
   HubSpot via its forms API (wired in IndexEffects). Styled for the dark
   band to match the site rather than HubSpot's default form chrome. */
.finalcta .demo-form { margin: 34px auto 0; max-width: 460px; text-align: left; }
.finalcta .demo-row { display: flex; gap: 10px; margin-bottom: 10px; }
.finalcta .demo-row input {
  flex: 1; min-width: 0; font-family: var(--font-sans); font-size: 15px;
  padding: 13px 15px; border-radius: 8px; color: var(--s8-cream);
  border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .07);
}
.finalcta .demo-row input::placeholder { color: rgba(239, 236, 227, .45); }
.finalcta .demo-row input:focus { outline: none; border-color: var(--s8-orange-bright); background: rgba(255, 255, 255, .1); }
.finalcta .demo-form .btn { width: 100%; margin-top: 6px; }
.finalcta .demo-form .btn:disabled { opacity: .4; cursor: not-allowed; filter: none; transform: none; box-shadow: none; }
.finalcta .form-msg { margin-top: 14px; font-family: var(--font-sans); font-size: 13px; text-align: center; }
.finalcta .form-msg--error { color: #E88; }
.finalcta .form-msg--success {
  margin-top: 22px; padding: 16px 18px; border-radius: 12px; text-align: center; color: var(--s8-cream);
  background: rgba(78, 158, 106, .14); border: 1px solid rgba(78, 158, 106, .3);
}
.finalcta .form-msg--success strong { color: var(--s8-green-bright); }
@media (max-width: 560px) { .finalcta .demo-row { flex-direction: column; } }