:root {
  --paper: #f6f3ea; --paper-deep: #e9e4d8; --vellum: rgba(246,243,234,.9);
  --white: #fff; --ink: #121722; --muted: #59606c; --line: #bcb7aa;
  --night: #121722; --night-soft: #202838; --night-muted: #b8c0d0;
  --cobalt: #3867ff; --coral: #ff5d45; --lime: #b7ed52; --amber: #ffc145;
  --display: "Onest", system-ui, sans-serif;
  --body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ease: cubic-bezier(.16,1,.3,1); --shell: min(1380px, calc(100% - 64px));
}
* { box-sizing: border-box; }
html { overflow-x: clip; scroll-behavior: smooth; }
body.public-home { margin: 0; overflow-x: clip; color: var(--ink); background: var(--paper); font-family: var(--body); font-size: 18px; line-height: 1.58; }
::selection { color: var(--white); background: var(--cobalt); }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 4px; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
button { font: inherit; }
img { display: block; max-width: 100%; }
figure, blockquote { margin: 0; }
h1, h2, h3, h4, p { margin-top: 0; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 500; letter-spacing: -.035em; text-wrap: balance; }
h2 { margin-bottom: 0; font-size: clamp(42px,5.2vw,76px); line-height: 1; }
.shell { width: var(--shell); margin-inline: auto; }
.skip-link { position: fixed; z-index: 100; top: 12px; left: 12px; padding: 10px 14px; color: var(--white); background: var(--night); transform: translateY(-160%); transition: transform 180ms var(--ease); }
.skip-link:focus { transform: none; }

.site-header { position: relative; z-index: 20; display: grid; grid-template-columns: 1fr auto; align-items: center; width: var(--shell); min-height: 72px; margin-inline: auto; border-bottom: 1px solid var(--ink); }
.brand { font-family: var(--display); font-weight: 600; letter-spacing: -.035em; text-decoration: none; }
.site-header .brand { font-size: 20px; }
.site-header p { margin: 0; color: var(--muted); font-size: 13px; }
.primary-action { display: inline-flex; min-height: 48px; padding: 11px 18px; justify-content: center; align-items: center; color: var(--white); background: var(--cobalt); border: 1px solid var(--cobalt); font-weight: 650; text-decoration: none; transition: color 180ms var(--ease), background 180ms var(--ease), transform 180ms var(--ease); }
.primary-action:hover { color: var(--ink); background: var(--lime); border-color: var(--ink); transform: translateY(-2px); }
.text-action { display: inline-flex; min-height: 44px; align-items: center; color: var(--ink); font-weight: 650; text-decoration: none; }
.text-action span { margin-left: 7px; transition: transform 180ms var(--ease); }
.text-action:hover span { transform: translateX(5px); }

.hero { position: relative; padding: clamp(20px,2.2vw,36px) 0 clamp(40px,4vw,64px); }
.hero::before { position: absolute; z-index: -1; top: clamp(230px,18.5vw,300px); right: 0; bottom: 12%; left: 0; content: ""; background-image: linear-gradient(to bottom,var(--paper) 0%,rgba(246,243,234,0) 14%),linear-gradient(rgba(18,23,34,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(18,23,34,.08) 1px,transparent 1px); background-size: 100% 100%,72px 72px,72px 72px; mask-image: linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent); }
.hero-layout { display: grid; grid-template-areas: "cutaway heading"; grid-template-columns: minmax(0,1fr) minmax(300px,.36fr); column-gap: clamp(24px,3vw,48px); align-items: start; }
.hero-heading { display: flex; grid-area: heading; flex-direction: column; align-self: stretch; }
.descriptor { max-width: 34ch; margin: 22px 0 0; color: var(--cobalt); font-size: 14px; font-weight: 650; }
.hero h1 { max-width: 9ch; margin-bottom: 0; font-size: clamp(72px,8vw,96px); line-height: .86; letter-spacing: -.04em; }
.hero-thesis-block { display: flex; margin-top: clamp(20px,2vw,32px); flex: 1; flex-direction: column; }
.hero-thesis { max-width: 18ch; margin-bottom: 20px; font-family: var(--display); font-size: clamp(27px,3.1vw,44px); font-weight: 500; line-height: 1.08; letter-spacing: -.035em; }
.audience { max-width: 59ch; margin-bottom: 16px; font-size: 16px; font-weight: 620; line-height: 1.48; }
.actions { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; }
.hero-actions { margin-top: 26px; }
.hero-thesis-block .hero-actions { margin-top: auto; }
.cutaway, .system-map { position: relative; width: min(1540px,calc(100% - 24px)); margin-inline: auto; overflow: hidden; }
.hero-layout .cutaway { grid-area: cutaway; width: calc(100% + clamp(16px,2vw,28px)); margin: 0; background: var(--night); box-shadow: 0 28px 68px rgba(18,23,34,.16); }
.cutaway img, .system-map img { width: 100%; height: auto; }
.cutaway-legend { position: absolute; right: 18px; bottom: 18px; left: 18px; display: flex; min-height: 46px; padding: 10px 14px; align-items: center; color: var(--ink); background: var(--vellum); border: 1px solid rgba(18,23,34,.65); font-size: 11px; font-weight: 650; letter-spacing: .03em; }
.cutaway-legend i { height: 1px; margin: 0 12px; background: var(--cobalt); flex: 1; }
.hero-support { max-width: 68ch; margin: 0; color: var(--muted); font-size: 16px; }
.takeaway { padding-top: 18px; border-top: 3px solid var(--coral); font-family: var(--display); font-size: clamp(24px,2.5vw,34px); font-weight: 500; line-height: 1.24; letter-spacing: -.03em; text-wrap: balance; }

.opportunity { padding: clamp(52px,6vw,88px) 0; border-top: 1px solid var(--ink); }
.opportunity-heading { display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(50px,8vw,120px); align-items: end; }
.opportunity-heading h2 { max-width: 19ch; }
.opportunity-heading > p { max-width: 36ch; margin-bottom: 7px; color: var(--muted); }
.opportunity-voices { display: grid; grid-template-columns: repeat(4,1fr); margin-top: 56px; border-top: 1px solid var(--ink); }
.opportunity-voices p { margin: 0; padding: 20px 24px 0 0; color: var(--muted); font-size: 15px; }
.opportunity-voices p + p { padding-left: 24px; border-left: 1px solid var(--line); }
.opportunity-voices strong { display: block; margin-bottom: 8px; color: var(--ink); font-family: var(--display); font-size: 18px; }
.opportunity-takeaway { max-width: 36ch; margin: 64px 0 0 auto; }

.system-proof { padding: clamp(76px,8vw,120px) 0; color: var(--white); background: var(--night); }
.system-proof-head { display: grid; grid-template-columns: 1.12fr .88fr; gap: clamp(44px,8vw,120px); align-items: end; }
.system-proof h2 { max-width: 17ch; }
.proof-copy { max-width: 60ch; color: var(--night-muted); }
.proof-copy p:last-child { margin-bottom: 0; }
.system-map { margin-top: clamp(44px,6vw,84px); background: #070b12; box-shadow: 0 30px 72px rgba(0,0,0,.34); }
.system-map figcaption { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px,8vw,120px); padding: clamp(24px,4vw,54px); align-items: start; background: var(--night-soft); border-top: 1px solid #495267; }
.system-question { margin: 0; color: var(--night-muted); }
.proof-takeaway { color: var(--white); border-color: var(--lime); }

.arguments { padding: clamp(70px,9vw,134px) 0; }
.argument { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px,5vw,72px); padding: 54px 0; align-items: start; border-top: 1px solid var(--ink); }
.argument h2 { max-width: 13ch; font-size: clamp(38px,4.3vw,64px); }
.argument-body { max-width: 61ch; color: var(--muted); }
.argument-takeaway { grid-column: 1 / -1; max-width: 39ch; margin-left: auto; }
.argument-dark { margin-top: 40px; padding: clamp(42px,5vw,72px); color: var(--white); background: var(--night); border: 0; }
.argument-dark .argument-body { color: var(--night-muted); }
.argument-dark .argument-takeaway { border-color: var(--cobalt); }
.experiment { padding: 13px 0; color: var(--lime); border-top: 1px solid #495267; border-bottom: 1px solid #495267; font-weight: 600; }

.shape-declaration { padding: clamp(82px,10vw,150px) 0; background: var(--coral); }
.shape-layout { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(32px,6vw,92px); align-items: start; }
.shape-heading h2 { max-width: 17ch; font-size: clamp(43px,5.3vw,78px); }
.shape-wordmark { margin-bottom: 28px; font-family: var(--display); font-weight: 650; }
.shape-meaning { padding-top: 47px; }
.shape-list-intro { margin: 38px 0 8px; font-weight: 700; }
.shape-meaning ul { margin: 0; padding: 0; list-style: none; }
.shape-meaning li { padding: 10px 0; border-top: 1px solid rgba(18,23,34,.45); font-family: var(--display); font-size: 18px; }
.shape-takeaway { grid-column: 1 / -1; max-width: 36ch; margin: 34px 0 0 auto; border-color: var(--ink); }

.story { padding: clamp(82px,10vw,146px) 0; }
.story-header { display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: end; margin-bottom: 30px; }
.story-header h2 { max-width: 18ch; }
.story-controls { display: flex; gap: 12px; align-items: center; }
.story-arrow { display: grid; width: 54px; height: 54px; padding: 0; place-items: center; color: var(--ink); background: var(--paper); border: 1px solid var(--ink); cursor: pointer; transition: color 180ms var(--ease),background 180ms var(--ease),transform 180ms var(--ease); }
.story-arrow:hover { color: var(--white); background: var(--cobalt); transform: translateY(-2px); }
.story-arrow svg { width: 22px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.story-count { min-width: 50px; margin: 0; font-family: var(--display); font-variant-numeric: tabular-nums; text-align: center; }
.story-progress { display: grid; grid-template-columns: repeat(4,1fr); margin-bottom: 16px; border-top: 1px solid var(--ink); border-left: 1px solid var(--ink); }
.story-dot { min-height: 58px; padding: 10px 14px; color: var(--muted); background: transparent; border: 0; border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); cursor: pointer; font-weight: 650; text-align: left; transition: color 180ms var(--ease),background 180ms var(--ease); }
.story-dot:hover, .story-dot.is-active { color: var(--white); background: var(--ink); }
.story-dot span { font-size: 14px; }
.story-viewport { overflow: hidden; color: var(--white); background: var(--night); box-shadow: 0 28px 70px rgba(18,23,34,.18); cursor: grab; touch-action: pan-y; }
.story-viewport.is-dragging { cursor: grabbing; }
.story-track { display: flex; align-items: stretch; width: 400%; transform: translate3d(0,0,0); transition: transform 720ms var(--ease); will-change: transform; }
.story-slide { position: relative; display: grid; grid-template-columns: 1.02fr .98fr; gap: clamp(36px,5vw,72px); width: 25%; min-height: 590px; padding: clamp(38px,4.3vw,62px); overflow: hidden; flex: 0 0 25%; }
.story-slide::before { position: absolute; top: 0; right: 0; width: 38%; height: 8px; content: ""; background: var(--coral); }
.curriculum-slide::before { background: var(--lime); }.learning-slide::before { background: var(--cobalt); }.role-slide::before { background: var(--amber); }
.slide-number { position: absolute; top: 22px; right: 26px; color: var(--night-muted); font-family: var(--display); font-size: 13px; }
.slide-copy { position: relative; z-index: 2; align-self: center; }
.slide-copy h3 { margin-bottom: 20px; font-size: clamp(35px,3.8vw,56px); line-height: 1.03; }
.slide-copy > p { max-width: 56ch; color: var(--night-muted); }
.slide-copy blockquote, .slide-takeaway { max-width: 35ch; margin-top: 28px; padding-top: 16px; color: var(--white); border-top: 2px solid var(--coral); font-family: var(--display); font-size: clamp(20px,2vw,28px); line-height: 1.28; letter-spacing: -.025em; }
.lens-field { display: grid; grid-template-columns: 1fr 1fr; align-self: center; border-top: 1px solid #566078; border-left: 1px solid #566078; }
.lens-field span { display: flex; min-height: 92px; padding: 14px; align-items: flex-end; color: var(--night-muted); border-right: 1px solid #566078; border-bottom: 1px solid #566078; font-family: var(--display); font-size: 15px; }
.lens-field span:nth-child(2), .lens-field span:nth-child(5) { color: var(--white); background: #27396d; }
.lens-field span:nth-child(3) { color: var(--ink); background: var(--coral); }
.curriculum-slide { grid-template-columns: .7fr 1.3fr; grid-template-rows: auto auto; align-content: center; }
.curriculum-intro h3 { font-size: clamp(33px,3.5vw,50px); }
.curriculum-grid { display: grid; grid-template-columns: 1fr 1fr; align-self: center; border-top: 1px solid #566078; border-left: 1px solid #566078; }
.curriculum-grid section { min-height: 154px; padding: 14px; border-right: 1px solid #566078; border-bottom: 1px solid #566078; }
.curriculum-grid h4 { min-height: 2.8em; margin-bottom: 10px; color: var(--lime); font-size: 12px; line-height: 1.35; letter-spacing: .02em; }
.curriculum-grid ul { margin: 0; padding: 0; list-style: none; }
.curriculum-grid li { margin: 5px 0; font-family: var(--display); font-size: 14px; line-height: 1.25; }
.curriculum-slide .slide-takeaway { grid-column: 1 / -1; margin-top: 4px; border-color: var(--lime); }
.learning-slide { grid-template-columns: .9fr 1.1fr; grid-template-rows: 1fr auto; }
.learning-path { display: grid; align-self: center; margin: 0; padding: 0; list-style: none; border-top: 1px solid #566078; counter-reset: learn; }
.learning-path li { position: relative; min-height: 48px; padding: 11px 20px 11px 52px; border-bottom: 1px solid #566078; font-family: var(--display); font-size: 15px; counter-increment: learn; }
.learning-path li::before { position: absolute; left: 10px; color: var(--cobalt); content: counter(learn,decimal-leading-zero); font-size: 12px; font-weight: 700; }
.learning-path li::after { position: absolute; right: 0; bottom: -1px; width: calc(100% - (var(--step,0) * 11%)); height: 3px; content: ""; background: var(--cobalt); }
.learning-path li:nth-child(2){--step:1}.learning-path li:nth-child(3){--step:2}.learning-path li:nth-child(4){--step:3}.learning-path li:nth-child(5){--step:4}.learning-path li:nth-child(6){--step:5}.learning-path li:nth-child(7){--step:6}
.learning-mechanics { grid-column: 1 / -1; margin: 0; padding-top: 20px; color: var(--night-muted); border-top: 1px solid #566078; font-size: 14px; }
.role-slide { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; gap: 20px; }
.role-intro { align-self: auto; }.role-intro h3 { max-width: 15ch; margin-bottom: 0; }
.role-compare { display: grid; grid-template-columns: .82fr 1.18fr; border-top: 1px solid #566078; border-left: 1px solid #566078; }
.role-compare section { padding: 20px; border-right: 1px solid #566078; border-bottom: 1px solid #566078; }
.role-compare .vibe-side { color: var(--night-muted); background: #0b0f18; }
.role-compare h4 { margin-bottom: 16px; color: var(--white); font-size: 21px; }
.vibe-side blockquote { max-width: 15ch; margin-bottom: 24px; color: var(--white); font-family: var(--display); font-size: clamp(23px,2.4vw,34px); line-height: 1.2; }
.role-compare p { margin-bottom: 0; }.shape-side > p { color: var(--lime); }
.shape-side ul { margin: 14px 0 0; padding: 0; list-style: none; }.shape-side li { padding: 7px 0; border-top: 1px solid #566078; }
.role-slide .slide-takeaway { margin-top: 0; border-color: var(--amber); }

.closing { position: relative; padding: clamp(82px,10vw,150px) 0; overflow: hidden; color: var(--white); background: var(--cobalt); }
.closing::after { position: absolute; right: -5vw; bottom: -12vw; width: 38vw; height: 38vw; content: "SC"; color: rgba(18,23,34,.18); font-family: var(--display); font-size: 26vw; font-weight: 600; line-height: 1; letter-spacing: -.12em; pointer-events: none; }
.closing-inner { position: relative; z-index: 2; }.closing-brand { margin-bottom: 28px; color: var(--lime); font-family: var(--display); font-weight: 650; }
.closing h2 { max-width: 17ch; font-size: clamp(50px,7vw,96px); }.closing-support { max-width: 61ch; margin-top: 30px; font-size: 19px; }
.closing-actions { margin-top: 30px; }.light-action { color: var(--ink); background: var(--lime); border-color: var(--lime); }.light-action:hover { color: var(--white); background: var(--night); border-color: var(--night); }.light-text-action { color: var(--white); }.free-note { margin-top: 16px; font-size: 13px; }
.site-footer { display: flex; justify-content: space-between; gap: 28px; width: var(--shell); margin-inline: auto; padding: 26px 0 36px; }.site-footer p { margin: 0; color: var(--muted); font-size: 13px; }

/* One motion grammar: structural layers resolve into place. Content is visible before JavaScript. */
.scene img { transition: clip-path 1.15s var(--ease),filter 1.15s var(--ease),transform 1.15s var(--ease); }
.has-js .scene:not(.is-visible) img { clip-path: inset(0 14% 0 0); filter: saturate(.72); transform: scale(1.018); }
.has-js .cutaway.is-visible img { animation: cutaway-drift 16s ease-in-out 1.2s infinite alternate; }
@keyframes cutaway-drift { from { transform: scale(1.002); } to { transform: scale(1.022); } }

@media (max-width: 1100px) {
  .site-header { grid-template-columns: 1fr auto; }.site-header p { display: none; }
  .opportunity-heading,.system-proof-head { grid-template-columns: 1fr; }
  .opportunity-heading > p { max-width: 55ch; }
  .opportunity-voices { grid-template-columns: 1fr 1fr; }.opportunity-voices p:nth-child(3) { padding-left: 0; border-left: 0; }
  .argument { grid-template-columns: 1fr 1fr; }.argument-body { grid-column: 2; }.argument-takeaway { grid-column: 1 / -1; }
  .shape-layout { grid-template-columns: 1fr 1fr; }.shape-takeaway { grid-column: 1 / -1; }.shape-meaning { max-width: 760px; padding-top: 0; }
  .story-slide { grid-template-columns: 1fr; min-height: 700px; }
  .curriculum-slide { grid-template-columns: 1fr; grid-template-rows: auto auto auto; }.curriculum-slide .slide-takeaway { grid-column: 1; }
  .learning-slide { grid-template-columns: 1fr; }.learning-mechanics { grid-column: 1; }
}
@media (max-width: 920px) {
  .hero-layout { grid-template-areas: "heading" "cutaway"; grid-template-columns: 1fr; row-gap: clamp(32px,5vw,56px); }
  .hero-layout .cutaway { width: 100%; }
  .hero-thesis-block .hero-actions { margin-top: 12px; }
}
@media (max-width: 700px) {
  :root { --shell: calc(100% - 36px); }
  body.public-home { font-size: 17px; }.site-header { min-height: 64px; }.site-header .brand { font-size: 17px; }
  .hero { padding-top: 24px; }.hero h1 { font-size: clamp(65px,21vw,96px); line-height: .82; }
  .hero-thesis { font-size: clamp(28px,8.5vw,38px); }.audience { font-size: 16px; }
  .hero-actions,.closing-actions { align-items: flex-start; flex-direction: column; }.hero-actions .primary-action,.closing-actions .primary-action { width: 100%; }.hero-thesis-block .hero-actions .primary-action { width: auto; }
  .cutaway,.system-map { width: calc(100% - 18px); box-shadow: 0 18px 44px rgba(18,23,34,.18); }.hero-layout .cutaway { width: 100%; }.system-map { box-shadow: 0 22px 48px rgba(0,0,0,.34); }
  .system-map img { min-height: 270px; object-fit: cover; }.cutaway img { min-height: 0; height: auto; object-fit: contain; }
  .cutaway-legend { right: 8px; bottom: 8px; left: 8px; min-height: 38px; padding: 7px 8px; overflow: hidden; font-size: 9px; white-space: nowrap; }.cutaway-legend i { margin: 0 6px; }
  .system-map figcaption { grid-template-columns: 1fr; }.takeaway { font-size: clamp(25px,7.5vw,34px); }
  .opportunity-heading h2,.system-proof h2,.story-header h2 { font-size: clamp(40px,11vw,56px); }
  .opportunity-voices { grid-template-columns: 1fr; margin-top: 40px; }.opportunity-voices p,.opportunity-voices p + p,.opportunity-voices p:nth-child(3) { padding: 16px 0; border-top: 1px solid var(--line); border-left: 0; }.opportunity-takeaway { margin-top: 46px; }
  .system-proof-head { gap: 32px; }
  .argument,.argument-dark { grid-template-columns: 1fr; gap: 24px; padding: 38px 0; }.argument-dark { width: calc(100% + 36px); margin-left: -18px; padding: 38px 18px; }.argument h2,.argument-body,.argument-takeaway { grid-column: 1; }.argument h2 { font-size: clamp(39px,10.5vw,54px); }.argument-takeaway { margin-left: 0; }
  .shape-layout { grid-template-columns: 1fr; }.shape-heading,.shape-meaning,.shape-takeaway { grid-column: 1; }.shape-heading h2 { font-size: clamp(40px,11vw,56px); }.shape-takeaway { margin-left: 0; }
  .story-header { grid-template-columns: 1fr; }.story-controls { justify-content: space-between; }.story-progress { grid-template-columns: 1fr 1fr; }.story-dot { min-height: 54px; }
  .story-slide { min-height: 740px; padding: 38px 22px 30px; }.slide-copy h3 { font-size: clamp(30px,8vw,40px); }.slide-copy > p { font-size: 16px; }.lens-field span { min-height: 84px; padding: 10px; font-size: 14px; }
  .curriculum-slide { min-height: 850px; }.curriculum-grid { grid-template-columns: 1fr 1fr; }.curriculum-grid section { min-height: 0; padding: 12px; }.curriculum-grid h4 { min-height: 4.5em; font-size: 10px; }.curriculum-grid li { font-size: 12px; }
  .learning-slide,.role-slide { min-height: 790px; }.learning-path li { min-height: 44px; padding: 9px 12px 9px 44px; }.role-compare { grid-template-columns: 1fr; }.role-compare section { padding: 15px; }.shape-side li { padding: 5px 0; font-size: 13px; }
  .closing h2 { font-size: clamp(49px,14vw,72px); }.site-footer { align-items: flex-start; flex-direction: column; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; } *,*::before,*::after { animation: none !important; transition-duration: .01ms !important; }
  .has-js .scene img { clip-path: none !important; filter: none !important; transform: none !important; }.story-track { transition: none !important; }
}
html[data-reduced-motion="true"] { scroll-behavior: auto; }
html[data-reduced-motion="true"] *,html[data-reduced-motion="true"] *::before,html[data-reduced-motion="true"] *::after { animation: none !important; transition-duration: .01ms !important; }
html[data-reduced-motion="true"] .scene img { clip-path: none !important; filter: none !important; transform: none !important; }
html[data-reduced-motion="true"] .story-track { transition: none !important; }.i18n-stress-copy { color: inherit; }