/* Case App public site: the tower, in navy. Navy grounds with stepped navy courses, blue for the action and the
   course in progress, white panels with black text for anything read or typed into. Gloock sets headlines, with
   their key words in a highlight colour; Hanken Grotesk sets everything else. No italics. Square corners throughout.
   Sections blend into one another, and content pops into place as it scrolls into view (pop.js). */

@font-face { font-family: "Gloock"; src: url("/static/site/fonts/Gloock-normal.woff2") format("woff2"); font-weight: 400; font-display: block; }
@font-face { font-family: "Hanken Grotesk"; src: url("/static/site/fonts/HankenGrotesk-normal.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }

:root {
  --navy: #0B1F3A;        /* the ground */
  --navy-deep: #071530;
  --navy-hi: #1D3F73;
  --blue: #2F54EB;        /* the action, and the course in progress */
  --blue-deep: #2443C7;
  --blue-hi: #9DB8FF;     /* accents and highlighted headline words on navy */
  --black: #0A0A0A;
  --white: #FFFFFF;
  --mist: #C3CEE2;        /* secondary text on navy and black */
  --muted: #4A5A73;       /* secondary text on white */
  --rule: #E3E8F0;
  --pale: #F2F5FA;
  --error: #B42318;
  --display: "Gloock", Georgia, serif;
  --text: "Hanken Grotesk", system-ui, sans-serif;
  --gutter: clamp(16px, 4vw, 56px);
  --blend: clamp(64px, 9vw, 120px);
  --navy-white: color-mix(in oklab, var(--navy), var(--white));   /* how far a section takes to reach its own colour from the one above */
  --max: 1328px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  /* a soft lift of light across a navy field, drawn once per section so nothing tiles */
  --wash: radial-gradient(70% 60% at 12% 8%, rgba(157, 184, 255, .10), transparent 70%), radial-gradient(60% 70% at 92% 70%, rgba(3, 8, 20, .45), transparent 70%);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 24px; scrollbar-color: var(--navy-hi) var(--navy-deep); }
body.site {
  margin: 0; font: 400 1.0625rem/1.6 var(--text); color: var(--white); background-color: var(--navy);
  background: var(--wash), var(--navy); background-size: 100% 1100px, auto; background-repeat: no-repeat, repeat;
  font-variant-numeric: lining-nums; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
}
::selection { background: var(--blue); color: var(--white); }
.site img { display: block; max-width: 100%; height: auto; }
.site a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.site :focus-visible { outline: 3px solid var(--blue-hi); outline-offset: 3px; }
.plaque :focus-visible, .paper :focus-visible, #who :focus-visible { outline-color: var(--blue); }
.skip { position: absolute; left: 8px; top: -60px; z-index: 10; background: var(--white); color: var(--black); padding: 10px 14px; font-weight: 700; }
.skip:focus { top: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- type ---------------------------------------------------------------------------------------------- */
.site h1, .site h2 { font-family: var(--display); font-weight: 400; letter-spacing: -.015em; line-height: 1.04; margin: 0; text-wrap: balance; }
.site h1 { font-size: clamp(2.6rem, 5.6vw, 5rem); }
.site h2 { font-size: clamp(2.1rem, 4.2vw, 3.6rem); }
.site h1 .hi, .site h2 .hi { color: var(--blue-hi); }   /* a headline's key words: one sentence, no italics (Lincoln, 2026-10-18) */
.paper h1 .hi, .paper h2 .hi, #who h2 .hi { color: var(--blue); }
.site h3 { font: 700 1.3rem/1.25 var(--text); margin: 0; letter-spacing: -.005em; }
.site p { margin: 0; }
.site .h { font: 400 1.6rem/1.1 var(--display); letter-spacing: -.01em; }
.lede { font-size: clamp(1.1rem, 1.5vw, 1.3rem); line-height: 1.55; color: var(--mist); max-width: 46ch; }
.label { font: 700 .78rem/1.2 var(--text); letter-spacing: .12em; text-transform: uppercase; }

/* ---- frame --------------------------------------------------------------------------------------------- */
.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.nav { width: min(100% - 2 * var(--gutter), var(--max)); margin: 0 auto; display: flex; align-items: center; gap: 32px;
  min-height: 72px; border-bottom: 1px solid rgba(195, 206, 226, .45); }
.mark { display: inline-flex; align-items: center; gap: 12px; font: 400 1.55rem/1 var(--display); text-decoration: none; margin-right: auto; letter-spacing: -.01em; }
/* the logo: the app's tower mark, three courses narrowing upward (pale blue, mist, white), drawn a step larger here */
.logo { flex: none; width: 18px; height: 17px; background:
  linear-gradient(var(--white) 0 0) 50% 0 / 6px 5px no-repeat,
  linear-gradient(var(--mist) 0 0) 50% 6px / 12px 5px no-repeat,
  linear-gradient(var(--blue-hi) 0 0) 50% 12px / 18px 5px no-repeat; }
.nav nav { display: flex; gap: 28px; }
.nav nav a { font: 600 .82rem/1 var(--text); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; padding: 10px 0; }
.nav nav a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--blue-hi); }
section { padding-block: clamp(64px, 9vw, 120px); }
.site h2 + .lede, .site h1 + .lede { margin-top: 20px; }

/* ---- controls ------------------------------------------------------------------------------------------ */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 28px;
  border: 0; background: var(--blue); color: var(--white); font: 700 1.05rem/1 var(--text); letter-spacing: .01em;
  text-decoration: none; cursor: pointer; transition: transform .25s var(--ease), background-color .2s; }
.btn:hover { transform: scale(1.025); background: var(--blue-deep); }
.btn:active { transform: scale(.99); }
.plaque { background: var(--white); color: var(--black); box-shadow: 0 0 0 1px rgba(10, 10, 10, .9), 0 18px 34px -16px rgba(3, 8, 20, .6); }
.field { display: grid; gap: 6px; }
.field label { font: 700 .78rem/1.2 var(--text); letter-spacing: .12em; text-transform: uppercase; }
.field label span { font-weight: 400; letter-spacing: .02em; text-transform: none; color: var(--muted); }
.field input, .field select, .field textarea { width: 100%; min-height: 52px; padding: 12px 14px; border: 1.5px solid var(--navy);
  border-radius: 0; background: var(--white); color: var(--black); font: 500 1.05rem/1.3 var(--text); caret-color: var(--blue); }
.field textarea { min-height: 150px; resize: vertical; }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%230B1F3A' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 16px; padding-right: 44px; }
.field input::placeholder, .field textarea::placeholder { color: #7A879C; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--blue); outline-offset: 0; }
.hp { position: absolute; left: -9999px; }
.note-ok, .note-err { font-weight: 600; padding: 12px 14px; }
.note-ok { background: var(--navy); color: var(--white); }
.note-err { background: var(--white); color: var(--error); box-shadow: inset 0 0 0 2px var(--error); }

/* waitlist plaque */
.join { padding: clamp(22px, 3vw, 32px); display: grid; gap: 16px; max-width: 520px; }
.join .small { font-size: 1.02rem; font-weight: 600; color: var(--black); }
.join.compact { max-width: 600px; gap: 12px; }
.join.compact .line { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; }

/* ---- the tower ------------------------------------------------------------------------------------------ */
.tower { margin: 0; display: grid; justify-items: center; align-content: end; }
.courses { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-direction: column-reverse; align-items: center; }
.course {
  --w: 100%; --tp: 4.5%; --rope: 26px;
  width: var(--w); min-height: calc(var(--rope) * 3); display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 calc(var(--tp) + 22px); color: var(--white); border-top: 2px solid rgba(195, 206, 226, .6);
  clip-path: polygon(var(--tp) 0, calc(100% - var(--tp)) 0, 100% 100%, 0 100%); background: #12294D;
}
.courses > .course:nth-child(2) { background: #163059; }
.courses > .course:nth-child(3) { background: #1A3866; }
.courses > .course:nth-child(4) { background: #1E4073; }
.courses > .course:nth-child(5) { background: #22477F; }
.course + .course { margin-bottom: -1px; }
.course .name { font: 700 clamp(.95rem, 1.4vw, 1.15rem)/1 var(--text); text-transform: uppercase; letter-spacing: .08em; }
.course .fig .n { font: 400 1.5em/1 var(--display); letter-spacing: 0; text-transform: none; color: var(--white); margin-right: .2em; }
.course .fig, .course .ver { white-space: nowrap; font: 500 clamp(.9rem, 1.3vw, 1.05rem)/1 var(--text); letter-spacing: .06em; text-transform: uppercase;
  color: var(--blue-hi); font-variant-numeric: tabular-nums; }
.courses > .course.damp, .course.damp { background: var(--blue); border-top-color: var(--blue-hi); }
.course.damp .fig, .course.damp .ver { color: var(--white); }
.hero .course { --rope: 19px; }
/* the folder on the tower: a quiet navy folder with slides tucked inside; hover, focus or a tap fans them out */
.folder { --fw: 60%; --spread: 24px; --lift: -46px; --turn: 8.5deg; --grow: 1.12; position: relative; width: var(--fw); aspect-ratio: 16 / 8.6; margin: 0 0 12px; padding: 0; border: 0; background: none;
  color: inherit; font: inherit; cursor: pointer; display: block; }
.folder-back { position: absolute; inset: 14px 0 0; background: #163059; box-shadow: inset 0 0 0 1px rgba(195, 206, 226, .35); }
.folder-tab { position: absolute; left: 0; top: -8px; z-index: 2; height: 22px; padding: 0 14px; display: flex; align-items: center; background: #163059;
  box-shadow: inset 0 0 0 1px rgba(195, 206, 226, .35); font: 700 .7rem/1 var(--text); letter-spacing: .12em; text-transform: uppercase; color: var(--mist); }
.folder-slides { position: absolute; inset: 0; z-index: 1; }
.sheet { position: absolute; left: 19%; width: 62%; aspect-ratio: 16 / 9; object-fit: cover; bottom: 34%;
  background: var(--white); padding: 3px; box-shadow: 0 0 0 1px rgba(10, 10, 10, .5), 0 10px 22px -12px rgba(3, 8, 20, .8);
  transform-origin: 50% 260%; transform: translateY(calc(var(--n) * 2px)) rotate(calc((var(--n) - 2.5) * 1.2deg));
  transition: transform .55s var(--ease), box-shadow .3s; transition-delay: calc(var(--n) * 30ms); }
.folder-front { position: absolute; left: 0; right: 0; bottom: 0; height: 54%; z-index: 2; background: #1E4073; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 4px;
  padding: 0 16px 14px; box-shadow: inset 0 1px 0 rgba(195, 206, 226, .6), 0 -8px 18px -10px rgba(3, 8, 20, .7); }
.folder .title { font: 400 1.3rem/1.1 var(--display); color: var(--white); letter-spacing: -.005em; }
.folder .hint { font: 400 .9rem/1.2 var(--text); color: var(--mist); }
.folder .on-touch { display: none; }
@media (hover: none) { .folder .on-hover { display: none; } .folder .on-touch { display: inline; } }
.folder.open .folder-slides, .folder:focus-visible .folder-slides { z-index: 3; }
.folder.open .sheet, .folder:focus-visible .sheet {
  transform: translate(calc((var(--n) - 2.5) * var(--spread)), var(--lift)) rotate(calc((var(--n) - 2.5) * var(--turn))) scale(var(--grow));
  box-shadow: 0 0 0 1px rgba(10, 10, 10, .6), 0 18px 30px -14px rgba(3, 8, 20, .9); }
@media (hover: hover) {
  .folder:hover .folder-slides { z-index: 3; }
  .folder:hover .sheet { transform: translate(calc((var(--n) - 2.5) * var(--spread)), var(--lift)) rotate(calc((var(--n) - 2.5) * var(--turn))) scale(var(--grow));
    box-shadow: 0 0 0 1px rgba(10, 10, 10, .6), 0 18px 30px -14px rgba(3, 8, 20, .9); }
}
.folder:focus-visible { outline-offset: 6px; }
.tower figcaption { margin-top: 14px; font-size: .95rem; color: var(--mist); text-align: center; max-width: 44ch; }

@media (prefers-reduced-motion: no-preference) {
  .hero .course, .hero .folder { animation: lay .8s var(--ease) both; animation-delay: calc(var(--i) * 120ms + 150ms); transform-origin: 50% 100%; }
  @keyframes lay { from { transform: translateY(-34px) scaleY(1.1); } 55% { transform: translateY(3px) scaleY(.95); } to { transform: none; } }
}

/* ---- hero ----------------------------------------------------------------------------------------------- */
.hero { padding-block: clamp(40px, 6vw, 72px) clamp(56px, 7vw, 96px); }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 72px); align-items: end; }
.hero .copy { display: grid; gap: 28px; align-content: start; }

/* ---- five stages: a sticky tower that rises as you read ----------------------------------------------- */
.stages { display: grid; grid-template-columns: minmax(300px, 440px) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); margin-top: 48px; }
.build { position: sticky; top: max(32px, calc(50vh - 280px)); align-self: start; }
.build .course { --rope: clamp(18px, 3.1vh, 30px); }
.build .course .name { font-size: 1.02rem; }
.build .course .fig { display: none; }
.build[data-at] .course { transition: opacity .5s var(--ease), transform .5s var(--ease); }
.build[data-at] .course.later { opacity: .4; transform: translateY(-10px); }
.build .fast { margin-top: 24px; min-height: 6.2em; font-size: 1.12rem; line-height: 1.5; color: var(--white); padding-top: 16px; border-top: 1px solid rgba(195, 206, 226, .35); }
.stage-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; }
.stage { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.stage .band { grid-column: 1 / -1; }
.stage .band.course { clip-path: none; --tp: 0%; justify-content: flex-start; gap: 18px; min-height: 66px; background: var(--navy); border-top-color: var(--mist); }
.stage .band.course.damp { background: var(--blue); border-top-color: var(--blue-hi); }
.stage .band .n { font: 600 .95rem/1 var(--text); letter-spacing: .12em; color: var(--blue-hi); }
.stage .band.damp .n { color: var(--white); }
.stage .band h3 { font: 400 clamp(1.5rem, 2.3vw, 2rem)/1 var(--display); letter-spacing: -.01em; }
.stage .does, .stage .yours { padding: 22px 24px; background: var(--white); color: var(--black); }
.stage .yours { background: var(--pale); }
.stage .does p + p, .stage .yours p + p { margin-top: 10px; }
.stage .does .label, .stage .yours .label { color: var(--muted); }
.stage .sample { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center; padding: 18px 24px;
  background: var(--black); color: var(--white); }
.stage .sample .label { color: var(--blue-hi); }
.stage .sample .slides { display: flex; gap: 10px; }
.stage .sample .slides img { width: 132px; box-shadow: 0 0 0 1px rgba(195, 206, 226, .35); }

/* ---- change one course ---------------------------------------------------------------------------------- */
#change .pair { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 4.5vw, 72px); align-items: start; }
#change h2 { font-size: clamp(1.9rem, 2.9vw, 2.7rem); }
.pair-change { display: grid; gap: 18px; }
.pair-change .lede { margin-top: -8px; }
.pair-reveal .on-narrow { display: none; }
.rewet { display: grid; gap: 0; width: 100%; margin: 6px 0 0; }
.rewet .course { --rope: 12.5px; }
.rewet .course .name { font-size: .95rem; }
.rewet .ver { font-size: .85rem; }
.rewet .ask { margin: 0 0 14px auto; width: 86%; padding: 12px 16px; position: relative; }
.rewet .ask::after { content: ""; position: absolute; left: 32px; bottom: -14px; border: 14px solid transparent; border-bottom: 0; border-top-color: var(--white); }
.rewet .ask .label { color: var(--muted); display: block; margin-bottom: 6px; }
.ways { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.way { padding: 18px 20px; }
.way + .way { border-left: 1px solid var(--rule); }
.way h3 { font-size: 1.1rem; margin-bottom: 6px; }
.way p { font-size: .95rem; }
.way .keys { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.key { font: 700 .78rem/1 var(--text); letter-spacing: .08em; text-transform: uppercase; padding: 8px 11px; color: var(--navy); box-shadow: inset 0 0 0 1.5px var(--navy); }

/* ---- the glossary, live --------------------------------------------------------------------------------- */
#terms .wrap { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.facts { list-style: none; margin: 32px 0 0; padding: 0; border-top: 1px solid var(--mist); }
.facts li { display: grid; grid-template-columns: 6.2rem 1fr; gap: 16px; align-items: center; padding: 18px 0; border-bottom: 1px solid rgba(195, 206, 226, .22); color: var(--mist); }
.facts .num { font: 400 2.6rem/1 var(--display); color: var(--white); letter-spacing: -.01em; }
.facts li.note { grid-template-columns: 1fr; }
.facts b { color: var(--white); font-weight: 700; }
.gdemo { padding: clamp(22px, 3vw, 34px); display: grid; gap: 22px; }
.gdemo .src { font-size: .95rem; color: var(--muted); }
.excerpt { font-size: 1.2rem; line-height: 1.65; }
.term { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: help;
  text-decoration: underline dotted var(--blue) 2px; text-underline-offset: .22em; }
.term:hover, .term:focus-visible, .term[aria-expanded="true"] { background: #E6ECFF; text-decoration-style: solid; }
.gc { display: none; border-top: 2px solid var(--black); padding-top: 18px; }
.gc .t { font: 400 1.6rem/1.1 var(--display); letter-spacing: -.01em; }
.gc .t span { display: block; font: 400 1rem/1.3 var(--text); margin-top: 6px; color: var(--muted); }
.gc .plain { font-weight: 600; margin-top: 10px; }
.gc .formula { margin-top: 10px; padding: 10px 12px; background: var(--pale); font-weight: 600; font-variant-numeric: tabular-nums; }
.gc dl { margin: 14px 0 0; display: grid; gap: 10px; }
.gc dt { font: 700 .76rem/1.2 var(--text); letter-spacing: .12em; text-transform: uppercase; color: var(--blue); }
.gc dd { margin: 2px 0 0; }
.gdemo:not([data-term]) .gc:first-of-type, .gdemo[data-term="load"] #gd-load, .gdemo[data-term="da"] #gd-da, .gdemo[data-term="jcurve"] #gd-jcurve { display: block; }
.gdemo:has(.term:hover) .gc { display: none !important; }
.gdemo:has([data-term-for="load"]:hover) #gd-load, .gdemo:has([data-term-for="da"]:hover) #gd-da,
.gdemo:has([data-term-for="jcurve"]:hover) #gd-jcurve { display: block !important; }

/* ---- the deck ------------------------------------------------------------------------------------------- */
.reel { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(280px, 38vw, 560px); gap: 22px; overflow-x: auto;
  padding: 8px var(--gutter) 22px; margin: 44px calc(50% - 50vw) 0; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
  scrollbar-color: var(--blue-hi) var(--navy-deep); }
.reel figure { margin: 0; scroll-snap-align: start; }
.reel img { width: 100%; aspect-ratio: 16 / 9; background: var(--white); padding: 6px; box-shadow: 0 0 0 1px rgba(10, 10, 10, .9), 0 18px 30px -16px rgba(3, 8, 20, .75); }
.reel figcaption { margin-top: 14px; font-size: .98rem; color: var(--mist); }
.reel figcaption b { display: block; font: 700 .76rem/1.2 var(--text); letter-spacing: .12em; text-transform: uppercase; color: var(--blue-hi); margin-bottom: 6px; }
.gets { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 28px; font-weight: 600; }
.gets span::before { content: ""; display: inline-block; width: 10px; height: 10px; background: var(--blue); margin-right: 10px; }

/* ---- who ------------------------------------------------------------------------------------------------ */
#who { color: var(--black); }
.who { list-style: none; margin: 44px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 2px solid var(--black); }
.who li { padding: 22px 22px 6px 0; }
.who li + li { padding-left: 22px; border-left: 1px solid var(--rule); }
.who h3 { margin-bottom: 10px; }
.who p { color: #26324A; }

/* ---- close ---------------------------------------------------------------------------------------------- */
.close .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: clamp(32px, 5vw, 80px); align-items: center; }
.close .copy { display: grid; gap: 22px; }
.close .copy a { font-weight: 600; text-decoration-color: var(--blue-hi); }

.foot { background: var(--black); color: var(--mist); padding-block: 56px 36px; }
/* after Cluely's footer: the logo on the left, link columns on the right, the copyright line under a rule */
.foot .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px 32px; align-items: start; }
.foot .mark { font-size: 1.3rem; color: var(--white); }
.foot-cols { display: grid; grid-template-columns: repeat(3, auto); gap: 32px clamp(48px, 10vw, 150px); }   /* wide gaps: the columns reach towards the centre */
.foot-cols h2 { font: 600 1rem/1.3 var(--text); letter-spacing: 0; color: var(--white); margin: 0 0 16px; }
.foot-cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.foot-cols a { text-decoration: none; transition: color .2s; }
.foot-cols a:hover { color: var(--white); text-decoration: underline; text-decoration-color: var(--blue-hi); }
.foot small { grid-column: 1 / -1; padding-top: 24px; border-top: 1px solid rgba(195, 206, 226, .22); font-size: .9rem; }

/* ---- pricing, checkout ---------------------------------------------------------------------------------- */
.page-head { padding-block: clamp(48px, 7vw, 88px) clamp(40px, 5vw, 64px); }
.page-head .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: clamp(32px, 5vw, 80px); align-items: start; }
.page-head .copy { display: grid; gap: 22px; padding-top: clamp(8px, 3vw, 40px); }
.page-head .copy.full { grid-column: 1 / -1; padding-top: 0; }
.includes { list-style: none; margin: 36px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 2px solid var(--black); }
.includes li { display: grid; grid-template-columns: 12px 1fr; gap: 14px; padding: 20px 20px 4px 0; }
.includes li + li { padding-left: 20px; border-left: 1px solid var(--rule); }
.includes li::before { content: ""; width: 12px; height: 12px; margin-top: 7px; background: var(--blue); }
.includes h3 { font-size: 1.15rem; margin-bottom: 4px; }
.includes p { color: #26324A; }
.offer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0; border-top: 2px solid var(--black); }
.offer { padding: 26px 24px; display: grid; gap: 14px; align-content: start; border-right: 1px solid var(--rule); }
.offer .price { font: 400 2.8rem/1 var(--display); color: var(--navy); }
.offer .price span { font: 500 1rem/1 var(--text); color: var(--muted); }
.offer ul { margin: 0; padding-left: 1.1em; }
.paper { background: var(--white); color: var(--black); }
.paper h2 { color: var(--navy); }
.paper + .paper { padding-top: 0; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.faq { margin-top: 36px; border-top: 2px solid var(--black); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 18px; padding: 20px 0; font: 600 1.15rem/1.3 var(--text); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 12px; height: 12px; margin-top: 6px; border-right: 2px solid var(--blue); border-bottom: 2px solid var(--blue); transform: rotate(45deg); transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(225deg); margin-top: 12px; }
.faq summary:hover { color: var(--blue); }
.faq .a { padding: 0 0 22px; max-width: 62ch; color: #26324A; }
.faq .a p + p { margin-top: 10px; }
.ask-form { padding: clamp(22px, 3vw, 32px); display: grid; gap: 16px; position: sticky; top: 32px; }
.order { padding: clamp(22px, 3vw, 32px); display: grid; gap: 14px; }
.order dl { margin: 0; display: grid; gap: 0; border-top: 2px solid var(--black); }
.order dl div { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.order dt { font-weight: 700; }
.order dd { margin: 0; text-align: right; }
.pay-slot { padding: 18px; border: 1.5px dashed var(--muted); color: var(--muted); }

/* ---- small screens --------------------------------------------------------------------------------------- */
@media (max-width: 980px) {
  .hero .wrap, #change .pair, #terms .wrap, .close .wrap, .page-head .wrap, .split { grid-template-columns: minmax(0, 1fr); }
  .hero .wrap { row-gap: 56px; }
  .stages { grid-template-columns: minmax(0, 1fr); }
  .build { display: none; }
  .who { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .who li:nth-child(3) { padding-left: 0; border-left: 0; }
  .includes { grid-template-columns: minmax(0, 1fr); }
  .includes li, .includes li + li { padding: 16px 0; border-left: 0; border-top: 1px solid var(--rule); }
  .ask-form { position: static; }
  .foot .wrap { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  body.site { font-size: 1rem; }
  .nav { gap: 16px; min-height: 64px; }
  .nav nav { gap: 16px; }
  .nav nav a { font-size: .74rem; letter-spacing: .06em; }
  .nav nav a.how { display: none; }
  .mark { font-size: 1.3rem; }
  .join.compact .line { grid-template-columns: minmax(0, 1fr); }
  .course { padding: 0 calc(var(--tp) + 12px); }
  .stage { grid-template-columns: minmax(0, 1fr); }
  .stage .sample { grid-template-columns: minmax(0, 1fr); }
  .stage .sample .slides img { width: calc(33% - 7px); }
  .who { grid-template-columns: minmax(0, 1fr); }
  .who li, .who li + li { padding: 18px 0 4px; border-left: 0; }
  .who li + li { border-top: 1px solid var(--rule); }
  .folder { --fw: 74%; --spread: 9px; --lift: -16px; --turn: 6deg; --grow: 1; }
  .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .course .name { font-size: .85rem; }
  .course .fig, .course .ver { font-size: .76rem; letter-spacing: .03em; }
  .course .fig { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }   /* the feature stacks, so the narrow top courses keep it inside */
  .course .fig .n { margin-right: 0; }
}

/* ---- leads (owner only) ---------------------------------------------------------------------------------- */
.lede.on-paper { color: var(--muted); margin-top: 12px; }
.leads { width: 100%; margin-top: 28px; border-collapse: collapse; border-top: 2px solid var(--black); font-size: 1rem; }
.leads th { text-align: left; font: 700 .76rem/1.2 var(--text); letter-spacing: .12em; text-transform: uppercase; padding: 12px 12px 12px 0; }
.leads td { padding: 12px 12px 12px 0; border-top: 1px solid var(--rule); vertical-align: top; }
.leads .msg { white-space: pre-wrap; max-width: 60ch; }

@media (prefers-reduced-motion: reduce) { .sheet, .reel img, .grip svg { transition: none; } }

/* ---- blueprint: a drafting grid behind the hero tower, and construction guides drawn from the tower itself ---- */
.hero, .blueprint { position: relative; isolation: isolate; }
.hero::before, .blueprint::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cpath d='M24 0V120M48 0V120M72 0V120M96 0V120M0 24H120M0 48H120M0 72H120M0 96H120' stroke='%239DB8FF' stroke-opacity='.06' stroke-width='1'/%3E%3Cpath d='M0 .5H120M.5 0V120' stroke='%239DB8FF' stroke-opacity='.13' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 120px 120px;
  -webkit-mask-image: radial-gradient(52% 78% at 74% 52%, #000 0%, rgba(0, 0, 0, .55) 45%, transparent 78%);
  mask-image: radial-gradient(52% 78% at 74% 52%, #000 0%, rgba(0, 0, 0, .55) 45%, transparent 78%); }
/* the hero tower only: the stages tower is sticky and must keep its own position */
.hero .tower { position: relative; }
.hero .tower > .courses, .hero .tower > .folder, .hero .tower > figcaption { position: relative; z-index: 1; }
.guides { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.guides path { fill: none; stroke: var(--blue-hi); stroke-width: 1; stroke-opacity: .42; vector-effect: non-scaling-stroke; }
.guides .dash { stroke-dasharray: 3 5; stroke-opacity: .6; }
.guides text { font: 600 10px/1 var(--text); letter-spacing: .14em; text-transform: uppercase; fill: var(--blue-hi); fill-opacity: .62; }
@media (prefers-reduced-motion: no-preference) {
  .guides .draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.3s var(--ease) .35s forwards; }
  .guides .dash, .guides text { opacity: 0; animation: fade .8s ease 1.1s forwards; }
  @keyframes draw { to { stroke-dashoffset: 0; } }
  @keyframes fade { to { opacity: 1; } }
}

/* ---- outline to slide: drag across one outline entry to reveal the slide built from it ---------------------- */
.reveal-wrap { margin: 28px 0 0; }
.reveal { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--pale);
  box-shadow: 0 0 0 1px rgba(195, 206, 226, .5), 0 26px 44px -26px rgba(0, 0, 0, .8); }
.reveal { container-type: inline-size; }
.outline-doc { position: absolute; inset: 0; font-size: clamp(.64rem, 1.5cqw, .98rem); line-height: 1.42; color: #1A2333; background: var(--pale); }
.outline-doc > * { position: absolute; margin: 0; }
.outline-doc .label { font-size: .82em; color: var(--muted); margin-right: .5em; }
.outline-doc .o-title { top: 5.5%; left: 3%; right: 17%; font: 400 clamp(.86rem, 2.3cqw, 1.6rem)/1.15 var(--display); color: var(--black); letter-spacing: -.005em; }
.outline-doc .o-main { top: 20%; bottom: 27%; left: 3%; right: 36%; display: flex; flex-direction: column; justify-content: space-between; }
.outline-doc .o-main ul { margin: 0; padding-left: 1.1em; display: flex; flex-direction: column; justify-content: space-around; flex: 1; }
.outline-doc .o-side { top: 22%; bottom: 27%; left: 70%; right: 3%; display: flex; flex-direction: column; gap: .7em; padding-left: 4%; border-left: 1px solid var(--rule); }
.outline-doc .o-side .label { margin: 0 0 .2em; }
.outline-doc .o-take { top: 81%; left: 3%; right: 3%; }
.outline-doc .o-src { top: 89%; left: 3%; right: 3%; font-size: .9em; }
.reveal .built { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--white); clip-path: inset(0 0 0 var(--cut)); }
.cutter { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; z-index: 3; -webkit-appearance: none; appearance: none; }
.grip { position: absolute; top: 0; bottom: 0; left: var(--cut); width: 2px; margin-left: -1px; background: var(--blue); z-index: 2; pointer-events: none; }
.grip svg { position: absolute; top: 50%; left: 50%; width: 46px; height: 46px; padding: 13px; transform: translate(-50%, -50%); background: var(--blue); color: var(--white);
  box-shadow: 0 8px 18px -8px rgba(3, 8, 20, .7); transition: transform .25s var(--ease); }
.reveal:hover .grip svg { transform: translate(-50%, -50%) scale(1.06); }
.cutter:focus-visible + .grip svg { outline: 3px solid var(--blue-hi); outline-offset: 3px; }
.reveal-wrap figcaption { display: flex; justify-content: space-between; margin-top: 12px; font: 700 .76rem/1.2 var(--text); letter-spacing: .12em; text-transform: uppercase; color: var(--mist); }

/* ---- the reel lifts the slide you point at; it drifts by itself until you take over (site.js) --------------- */
.reel img { transition: transform .35s var(--ease); }
.reel figure:hover img { transform: translateY(-6px); }
.reel.drifting { scroll-snap-type: none; }

@media (max-width: 640px) {
  .guides { display: none; }
  .reveal { aspect-ratio: auto; }
  .outline-doc { position: static; display: grid; gap: 14px; padding: 22px; font-size: .95rem; }
  .outline-doc > * { position: static; }
  .outline-doc .o-main, .outline-doc .o-main ul, .outline-doc .o-side { display: grid; gap: .5em; padding-left: 0; border: 0; }
  .outline-doc .o-main ul { padding-left: 1.1em; }
  .outline-doc .o-title { font-size: 1.25rem; }
  .ways { grid-template-columns: 1fr; }
  .way + .way { border-left: 0; border-top: 1px solid var(--rule); }
  .reveal .built { position: static; clip-path: none; border-top: 1px solid var(--black); }
  .cutter, .grip { display: none; }
  .pair-reveal .on-wide { display: none; }
  .pair-reveal .on-narrow { display: inline; }
}

/* ---- pricing: what every case gets, as a staircase of courses; questions on black ------------------------- */
.blueprint::before { -webkit-mask-image: radial-gradient(60% 90% at 20% 40%, #000 0%, rgba(0, 0, 0, .5) 50%, transparent 85%);
  mask-image: radial-gradient(60% 90% at 20% 40%, #000 0%, rgba(0, 0, 0, .5) 50%, transparent 85%); }
.does .includes { margin: 44px 0 0; border: 0; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; align-items: end; }
.does .includes li { display: flex; flex-direction: column; justify-content: flex-end; min-height: calc(210px + var(--i) * 34px); padding: 26px 22px; background: #12294D; border-top: 2px solid rgba(195, 206, 226, .6); }
.does .includes li + li { padding-left: 22px; border-left: 0; }
.does .includes li:nth-child(2) { background: #163059; }
.does .includes li:nth-child(3) { background: #1A3866; }
.does .includes li:nth-child(4) { background: #1E4073; }
.does .includes li:nth-child(5) { background: #22477F; }
.does .includes li:first-child { background: var(--blue); border-top-color: var(--blue-hi); }
.does .includes li::before { display: none; }
.does .includes h3 { font: 400 1.5rem/1.1 var(--display); color: var(--white); margin-bottom: 12px; letter-spacing: -.005em; }
.does .includes p { color: var(--mist); font-size: 1rem; }
.does .includes li:first-child p { color: var(--white); }
.does .offer-grid { border: 0; gap: 18px; margin-top: 44px; }
.does .offer { background: var(--white); color: var(--black); border: 0; box-shadow: 0 0 0 1px rgba(10, 10, 10, .9), 0 18px 34px -16px rgba(3, 8, 20, .6); }
.qa { color: var(--white); }
.qa .faq { border-top: 1px solid var(--mist); }
.qa .faq details { border-bottom: 1px solid rgba(195, 206, 226, .22); }
.qa .faq summary { color: var(--white); transition: color .2s; }
.qa .faq summary:hover, .qa .faq details[open] summary { color: var(--blue-hi); }
.qa .faq summary::after { border-color: var(--blue-hi); }
.qa .faq .a { color: var(--mist); }
.qa .faq summary:focus-visible { outline-offset: 4px; }
@media (max-width: 980px) {
  .does .includes { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .does .includes li { min-height: 0; padding: 20px 22px; border-top-width: 1px; }
  .does .includes li + li { border-top: 1px solid rgba(195, 206, 226, .6); }
}

/* ---- sections blend into one another (Lincoln, 2026-10-18: no hard cuts between colours): each section starts in the
   colour of the one above and reaches its own across its top padding; the last one fades into the footer's black --- */
#how { background: linear-gradient(transparent, var(--navy-deep) var(--blend)); }   /* transparent: the hero's ground above */
#change { background: linear-gradient(var(--navy-deep), transparent var(--blend)), var(--wash), var(--navy); }
#terms { background: linear-gradient(var(--navy), var(--black) var(--blend)); }
/* navy to white is a long way: the blend spans the padding on both sides of the boundary, meeting at an even mix, and
   runs in oklab so the middle reads as a lighter navy rather than grey */
#deck { background: linear-gradient(var(--black), transparent var(--blend)), linear-gradient(in oklab, transparent calc(100% - var(--blend)), var(--navy-white)), var(--wash), var(--navy); }
#who { background: linear-gradient(in oklab, var(--navy-white), var(--white) var(--blend), var(--white) calc(100% - var(--blend)), var(--navy-white)); }
.close { background: linear-gradient(in oklab, var(--navy-white), transparent var(--blend)), linear-gradient(transparent calc(100% - var(--blend)), var(--black)), var(--wash), var(--navy); }
.does { background: linear-gradient(transparent, var(--navy-deep) var(--blend)); }
.qa { background: linear-gradient(var(--navy-deep), var(--black) var(--blend)); }
main[data-page="checkout"] .page-head { background: linear-gradient(transparent calc(100% - var(--blend)), var(--black)); }

/* ---- pop-up entrances (pop.js, after cluely.com): text rises out of a soft blur, panels pop up from slightly smaller,
   chips pop from small; whatever arrives together follows in reading order, 90ms apart -------------------------- */
.pop [data-pop] { transition: opacity .7s var(--ease), transform .9s var(--ease), filter .7s var(--ease); transition-delay: var(--pd, 0ms); }
.pop [data-pop]:not(.in) { opacity: 0; transform: translateY(28px); filter: blur(6px); }
.pop [data-pop="panel"]:not(.in) { transform: translateY(64px) scale(.94); filter: none; }
.pop [data-pop="chip"]:not(.in) { transform: translateY(8px) scale(.82); filter: none; }