/* insideout · home page (index.html, written by courses/build-study.js)
   The header, hero and navy footer are the original landing page's, kept as they were. The sections
   in between use the shared parts in src/study.css (posters, questions), which loads first.
   Follows DESIGN.md: warm neutrals, colour means meaning, one house easing. */

:root {
  --page: #F6F5F1;
  --sheet: #FDFDFB;
  --ink: #1D1C1A;
  --ink-2: #5E5B55;
  --ink-3: #97938B;
  --rule: rgba(29, 28, 26, .10);
  --rule-2: rgba(29, 28, 26, .16);

  --c-word: #2F6BD8;
  --c-count: #23885A;
  --c-chance: #7B4FD3;
  --c-echo: #FF5A1F;
  --c-bad: #D23F2A;

  --metal-1: #E3E0D9;
  --metal-2: #CDC9C0;
  --keycap: #F1EFEA;
  --screen: #121110;
  --navy: #13213B;

  --lift-1: 0 1px 1px rgba(60, 48, 30, .06), 0 2px 4px rgba(60, 48, 30, .06);
  --lift-2: 0 1px 2px rgba(60, 48, 30, .07), 0 4px 8px rgba(60, 48, 30, .07), 0 12px 24px rgba(60, 48, 30, .07);
  --lift-3: 0 2px 4px rgba(60, 48, 30, .08), 0 8px 16px rgba(60, 48, 30, .08), 0 24px 48px rgba(60, 48, 30, .10), 0 48px 80px rgba(60, 48, 30, .08);

  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-in: cubic-bezier(.23, 1, .32, 1);
  --serif: "Fraunces", Georgia, serif;
  --sans: "Satoshi", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono: "JetBrains Mono Variable", "JetBrains Mono", ui-monospace, monospace;
  --dot: "Doto", var(--mono);
}

/* The page is a light sheet lying over navy: overscroll shows light at the top and navy at the bottom. */
html { scroll-behavior: smooth; background: linear-gradient(var(--page) 50%, var(--navy) 50%); overscroll-behavior-y: none; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  min-height: 0;
  background: transparent;
  color: var(--ink);
  font: 400 18px/1.48 var(--sans);
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
html, body { overflow-x: clip; }
[hidden] { display: none !important; }
::selection { background: rgba(255, 90, 31, .18); }
:focus-visible { outline: 2px solid var(--c-echo); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--ink); color: var(--sheet); padding: 8px 14px; border-radius: 8px; }
.skip:focus { top: 12px; }

/* ---------- type ---------- */
.display {
  margin: 0; color: var(--ink);
  font-family: var(--serif); font-weight: 340; font-variation-settings: "opsz" 144;
  letter-spacing: -0.035em; line-height: 1.02; text-wrap: balance;
}
.display em { font-style: italic; font-weight: 330; letter-spacing: -0.03em; }

/* ---------- keys (buttons) ---------- */
.key {
  --h: 44px;
  position: relative;
  display: inline-flex; align-items: center; gap: 10px;
  height: var(--h); padding: 0 20px;
  border: 0; border-radius: 11px;
  font: 500 15.5px/1 var(--sans);
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform 160ms var(--ease), box-shadow 160ms var(--ease), background-color 160ms var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.key-sm { --h: 36px; padding: 0 14px; font-size: 14.5px; border-radius: 10px; gap: 8px; }
.key-lg { --h: 54px; padding: 0 26px; font-size: 17px; border-radius: 13px; gap: 12px; }
.key-dark {
  color: #FAF9F6;
  background: linear-gradient(180deg, #424140 0%, #282826 100%);
  box-shadow: inset 0 -3px 0 #1E1E1C, inset 0 1px 1px rgba(255, 255, 255, .30), 0 1px 2px rgba(30, 24, 14, .22), 0 6px 14px -4px rgba(30, 24, 14, .30);
}
.key-dark:hover { transform: translateY(-2px); box-shadow: inset 0 -3px 0 #1E1E1C, inset 0 1px 1px rgba(255,255,255,.30), 0 2px 3px rgba(30,24,14,.2), 0 12px 22px -6px rgba(30,24,14,.34); }
.key-dark:active { transform: translateY(1px); box-shadow: inset 0 -1px 0 #1E1E1C, inset 0 1px 1px rgba(255,255,255,.22), 0 1px 1px rgba(30,24,14,.2); transition-duration: 90ms; }
.key-light {
  color: var(--ink);
  background: linear-gradient(180deg, #FFFFFF 0%, #F3F1EC 100%);
  box-shadow: inset 0 -2px 0 rgba(29, 28, 26, .10), inset 0 0 0 1px rgba(29, 28, 26, .10), inset 0 1px 0 rgba(255, 255, 255, .9), var(--lift-1);
}
.key-light:hover { transform: translateY(-2px); box-shadow: inset 0 -2px 0 rgba(29,28,26,.10), inset 0 0 0 1px rgba(29,28,26,.12), inset 0 1px 0 #fff, var(--lift-2); }
.key-light:active { transform: translateY(1px); box-shadow: inset 0 -1px 0 rgba(29,28,26,.10), inset 0 0 0 1px rgba(29,28,26,.12); transition-duration: 90ms; }

.link-quiet {
  font-weight: 500; font-size: 16px; color: var(--ink);
  text-decoration: underline; text-decoration-color: var(--rule-2);
  text-underline-offset: 5px; text-decoration-thickness: 1.5px;
  transition: text-decoration-color 160ms var(--ease);
}
.link-quiet:hover { text-decoration-color: var(--ink); }
.link-light { color: #F6F4EE; text-decoration-color: rgba(246, 244, 238, .3); }
.link-light:hover { text-decoration-color: #F6F4EE; }

/* ---------- header ----------
   Calm and thin: wordmark left, a centred pill of links with a highlight that slides to what you
   point at, actions right. */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(246, 245, 241, .72);
  -webkit-backdrop-filter: saturate(1.6) blur(18px);
  backdrop-filter: saturate(1.6) blur(18px);
  border-bottom: 1px solid transparent;
  transition: border-color 240ms var(--ease), background-color 240ms var(--ease);
}
.nav.scrolled { border-bottom-color: var(--rule); background: rgba(246, 245, 241, .86); }
.nav.open { background: var(--page); border-bottom-color: var(--rule); }
.nav-in {
  max-width: 1240px; margin: 0 auto; height: 64px; padding: 0 28px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px;
  transition: height 240ms var(--ease);
}
.nav.scrolled .nav-in { height: 56px; }
.wordmark {
  justify-self: start;
  font: 400 21px/1 var(--serif); font-variation-settings: "opsz" 36; letter-spacing: -0.02em;
  text-decoration: none; color: var(--ink); white-space: nowrap;
}
.wordmark i { font-style: italic; }
.nav-center { justify-self: center; }
.nav-pill {
  position: relative; display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: 999px;
  background: rgba(29, 28, 26, .035); box-shadow: inset 0 0 0 1px rgba(29, 28, 26, .06);
}
.nav-hi {
  position: absolute; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: 999px; pointer-events: none;
  background: var(--sheet); box-shadow: 0 1px 2px rgba(40,32,20,.08), 0 0 0 1px rgba(29,28,26,.06);
  opacity: 0; transition: transform 260ms var(--ease), width 260ms var(--ease), opacity 160ms var(--ease);
}
.nav-pill.hovering .nav-hi { opacity: 1; }
.nav-item {
  position: relative; z-index: 1; display: inline-flex; align-items: center; height: 34px; padding: 0 15px;
  border-radius: 999px; font: 500 14px/1 var(--sans); color: var(--ink-2); white-space: nowrap;
  transition: color 160ms var(--ease);
}
.nav-item:hover { color: var(--ink); }
.nav-right { justify-self: end; display: flex; align-items: center; gap: 16px; }
.nav-sign { font-size: 14px; font-weight: 500; color: var(--ink-2); transition: color 160ms var(--ease); }
.nav-sign:hover { color: var(--ink); }
.nav-burger { display: none; width: 40px; height: 40px; border: 0; border-radius: 10px; background: none; cursor: pointer; position: relative; }
.nav-burger span { position: absolute; left: 11px; right: 11px; height: 1.6px; border-radius: 2px; background: var(--ink); transition: transform 220ms var(--ease), top 220ms var(--ease); }
.nav-burger span:first-child { top: 16px; }
.nav-burger span:nth-of-type(2) { top: 23px; }
.nav-burger[aria-expanded="true"] span:first-child { top: 19.5px; transform: rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-of-type(2) { top: 19.5px; transform: rotate(-45deg); }
.nav-burger b { display: none; }

/* phone menu: under the header, over everything else (outside the header: its blur would trap a fixed sheet).
   Learn and Build as two cards holding their folder covers, Pricing and FAQ as quiet rows, one action at the
   bottom. The header's own button hides while it's open, so "Your dashboard" never shows twice. */
.nav-sheet { position: fixed; inset: 0; z-index: 49; overflow-y: auto; overscroll-behavior: contain; background: var(--page); animation: sheet-in 240ms var(--ease-in); }
@keyframes sheet-in { from { opacity: 0; transform: translateY(-6px); } }
.nav.open .nav-cta { display: none; }
.sheet-body { display: flex; flex-direction: column; min-height: 100%; max-width: 560px; margin: 0 auto; padding: 78px 20px calc(18px + env(safe-area-inset-bottom)); }
.sheet-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sheet-card { display: flex; flex-direction: column; padding: 16px 16px 18px; border-radius: 20px; background: var(--tint); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(29, 28, 26, .05); transition: transform .2s var(--ease); }
.sheet-card:active { transform: scale(.98); }
.sheet-art { position: relative; display: block; height: 166px; margin: 6px 0 22px; }
.sheet-art .st-folder { position: absolute; width: 94px; height: auto; }
.sheet-art .st-folder:first-child { left: 52px; top: 0; transform: rotate(6deg); }
.sheet-art .st-folder:last-child { left: 2px; top: 26px; transform: rotate(-4deg); z-index: 2; }
.sheet-card b { font: 360 30px/1 var(--serif); font-variation-settings: "opsz" 144; letter-spacing: -.03em; }
.sheet-card small { margin-top: 6px; font-size: 14.5px; color: rgba(29, 28, 26, .62); }
.sheet-list { margin-top: 22px; border-top: 1px solid var(--rule); }
.sheet-list a { display: flex; align-items: center; justify-content: space-between; padding: 20px 4px; border-bottom: 1px solid var(--rule); font: 500 19px/1.2 var(--sans); letter-spacing: -.01em; color: var(--ink); }
.sheet-list a span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--rule-2); }
.sheet-list svg { width: 15px; height: 15px; }
.sheet-foot { margin-top: auto; padding-top: 32px; display: grid; gap: 16px; }
.sheet-foot .key { width: 100%; justify-content: center; }
.sheet-have { margin: 0; text-align: center; font-size: 15px; color: var(--ink-2); }
.sheet-have a { color: var(--ink); font-weight: 500; text-decoration: underline; text-decoration-color: var(--rule-2); text-underline-offset: 3px; }
.sheet-rise { animation: sheet-rise .5s var(--ease-in) both; animation-delay: calc(var(--i, 0) * 45ms + 40ms); }
@keyframes sheet-rise { from { opacity: 0; transform: translateY(10px); } }

/* ---------- sheet over navy ---------- */
.sheet-wrap {
  position: relative; z-index: 2;
  background: var(--page);
  border-radius: 0 0 40px 40px;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .35);
}

/* ---------- hero ---------- */
/* The hero fills the first screen exactly (minus the header), so the next section never peeks in half cut. */
.hero {
  position: relative;
  min-height: max(560px, calc(100svh - 64px));
  display: flex; flex-direction: column; justify-content: center;
  padding: 72px 24px 112px;
  overflow: hidden;
  isolation: isolate;
}
.hero-grid {
  position: absolute; inset: 0; z-index: -1;
  background-image: radial-gradient(rgba(29, 28, 26, .16) 1px, transparent 1.2px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 70% 62% at 50% 44%, #000 30%, transparent 78%);
  mask-image: radial-gradient(ellipse 70% 62% at 50% 44%, #000 30%, transparent 78%);
}
.hero::after { /* soft light behind the headline */
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: radial-gradient(ellipse 60% 50% at 50% 40%, #FDFDFB 0%, rgba(253,253,251,0) 70%);
}
.hero-copy { position: relative; z-index: 3; max-width: 940px; margin: 0 auto; text-align: center; }
/* Headline: Fraunces like every heading on the page, "out" in italic like the wordmark, and one living word in
   Echo's dot-matrix face */
.hero-h {
  margin: 0; font: 340 clamp(50px, 7vw, 104px)/1 var(--serif); font-variation-settings: "opsz" 144; letter-spacing: -0.035em; color: #232220;
}
.hero-h i { font-style: italic; font-weight: 300; }
.rot-wrap { display: inline-block; white-space: nowrap; }
.rot { font: 700 .74em/1 var(--dot); letter-spacing: -0.07em; color: #232220; }
.rot-caret { display: inline-block; width: .07em; height: .78em; margin: 0 .14em 0 .06em; background: var(--c-echo); vertical-align: -.04em; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.hero-sub { max-width: 640px; margin: 30px auto 0; font-size: 18.5px; line-height: 1.5; font-weight: 500; color: #3A3834; text-wrap: pretty; }
.hs-short { display: none; }
.hero-cta { margin-top: 38px; display: flex; justify-content: center; align-items: center; gap: 28px; }
.hero-note { margin: 22px 0 0; font-size: 13.5px; color: var(--ink-3); }
/* Short laptop screens: tighten the hero so it still fits in one screen. */
@media (max-height: 820px) and (min-width: 981px) {
  .hero { padding: 40px 24px 84px; }
  .hero-h { font-size: clamp(50px, min(7vw, 11.5vh), 104px); }
  .hero-sub { margin-top: 20px; font-size: 17px; }
  .hero-cta { margin-top: 26px; }
  .hero-note { margin-top: 14px; }
}

/* ---------- the four objects around the headline: one for each way in ----------
   A notebook, the Run key, two dice and a stopwatch. Made like the member's pass: real materials, one light
   source, one orange part each. The key presses itself now and then; the stopwatch hand sweeps. */
.artefacts { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.art {
  position: absolute;
  transform: rotate(var(--r));
  animation: drift 10s ease-in-out infinite alternate;
  animation-delay: var(--d, 0s);
}
@keyframes drift {
  from { transform: translate3d(0, 0, 0) rotate(var(--r)); }
  to   { transform: translate3d(0, -9px, 0) rotate(calc(var(--r) + .6deg)); }
}
.o-book { left: max(56px, calc(50% - 628px)); top: 9%; }
.o-key { right: max(36px, calc(50% - 676px)); top: 12%; }
.o-dice { left: max(64px, calc(50% - 640px)); top: 56%; }
.o-watch { right: max(52px, calc(50% - 640px)); top: 62%; }

/* the notebook: a cloth cover over a block of pages, held shut with an orange band */
.bk { position: relative; width: 186px; height: 246px; }
.bk-pages {
  position: absolute; left: 7px; right: -6px; top: 5px; bottom: -6px; border-radius: 3px 9px 9px 3px;
  background:
    repeating-linear-gradient(90deg, #F6F3EC 0 1px, #E2DED4 1px 2px) right / 6px 100% no-repeat,
    repeating-linear-gradient(0deg, #F6F3EC 0 1px, #E2DED4 1px 2px) bottom / 100% 6px no-repeat, #EDEAE2;
  box-shadow: 0 1px 2px rgba(60,48,30,.14), 0 16px 30px rgba(60,48,30,.15), 0 44px 80px rgba(60,48,30,.12);
}
.bk-cover {
  position: absolute; inset: 0; border-radius: 4px 12px 12px 4px; overflow: hidden;
  background:
    radial-gradient(120% 70% at 12% 0%, rgba(255,255,255,.26), transparent 60%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.035) 0 1px, transparent 1px 3px),
    linear-gradient(165deg, #9BBBA0, #7C9F84);
  box-shadow: inset 0 0 0 1px rgba(20,40,28,.14), inset 0 1px 0 rgba(255,255,255,.3), inset 0 -2px 0 rgba(0,0,0,.08);
}
.bk-spine { position: absolute; left: 0; top: 0; bottom: 0; width: 18px; background: linear-gradient(90deg, rgba(0,0,0,.12), rgba(0,0,0,.03) 55%, rgba(255,255,255,.18) 76%, rgba(0,0,0,.12) 84%, transparent); }
/* the title and the little network are pressed into the cloth: a dark line with a light edge under it */
.bk-title {
  position: absolute; left: 32px; top: 28px; right: 46px; margin: 0;
  font: 380 24px/1.04 var(--serif); font-variation-settings: "opsz" 72; letter-spacing: -.02em;
  color: rgba(28,52,36,.64); text-shadow: 0 1px 0 rgba(255,255,255,.32), 0 -1px 0 rgba(0,0,0,.08);
}
.bk-title i { font-weight: 320; }
.bk-art { position: absolute; left: 28px; bottom: 26px; width: 112px; overflow: visible; }
.bk-art path, .bk-art circle { fill: none; stroke-width: 1.6; stroke-linecap: round; }
.bk-art .lo > * { stroke: rgba(255,255,255,.34); }
.bk-art .hi > * { stroke: rgba(28,52,36,.46); }
.bk-band { position: absolute; right: 26px; top: -4px; bottom: -5px; width: 9px; border-radius: 2px; background: linear-gradient(90deg, #D4461A, #FF6C32 45%, #DF4E1D); box-shadow: 1px 0 1px rgba(0,0,0,.2), 3px 1px 6px rgba(0,0,0,.14); }

/* The Run key: one oversized orange keycap set into a low walnut block, lit from the top left.
   Same camera as the notebook (seen nearly from above, a little from the front right).
   Every 7 seconds someone presses it once: the cap sinks 3px into the wood and springs back. */
.ob-key { position: relative; width: 176px; height: 168px; }
.ob-key-shadow { position: absolute; left: 3px; top: 5px; width: 170px; height: 160px; border-radius: 14px;
  box-shadow: 0 2px 3px rgba(40,26,14,.18), 0 16px 30px rgba(60,48,30,.17), 0 44px 80px rgba(60,48,30,.13); }
.ob-key-plinth { position: absolute; left: 0; top: 0; width: 176px; height: 168px; overflow: visible;
  filter: drop-shadow(0 1px 1px rgba(40,26,14,.4)); }
/* the key's own shadow on the wood, kept on the flat top of the block */
.ob-key-castclip { position: absolute; left: 1.6px; top: 1.2px; width: 166.8px; height: 147.6px; border-radius: 10.5px; overflow: hidden; }
.ob-key-cast { position: absolute; left: 16.4px; top: 14.8px; width: 134px; height: 124px; border-radius: 20px;
  box-shadow: 0 0 2px 1px rgba(20,10,4,.36), 4px 6px 8px rgba(26,12,4,.42); }
/* the opening in the wood: below the rim the cap's skirt disappears into it */
.ob-key-well { position: absolute; inset: 0; clip-path: inset(0 25px 29px 19px round 0 0 19px 19px); }
.ob-key-cap { position: absolute; inset: 0; }
.ob-key-walls { position: absolute; left: 0; top: 0; width: 176px; height: 168px; }
.ob-key-top {
  position: absolute; left: 21.5px; top: 11px; width: 118px; height: 110px; border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255,240,228,.1), rgba(255,240,228,0) 42%),
    #FD672C;
  box-shadow:
    inset 1.2px 1.4px 0 rgba(255,244,236,.85),
    inset 2.5px 3px 3px -1px rgba(255,220,198,.3),
    inset -1.2px -1.6px 0 rgba(150,40,4,.3),
    0 1.2px 0 rgba(255,168,126,.55);
}
/* the dish: a shallow scoop, so the near (top-left) inner slope sits in shade and the far one catches the light */
.ob-key-dish {
  position: absolute; left: 5px; top: 5px; right: 5px; bottom: 7px; border-radius: 12px;
  background:
    radial-gradient(60% 50% at 50% 84%, rgba(150,38,0,.17), rgba(150,38,0,0) 76%),
    linear-gradient(90deg, rgba(150,36,0,.22), rgba(150,36,0,.1) 20%, rgba(150,36,0,0) 44%, rgba(255,228,208,.07) 64%, rgba(255,228,208,.22) 88%, rgba(255,228,208,.08));
  box-shadow: inset 2px 2.5px 4px -1px rgba(130,32,0,.3), inset -2px -2.5px 5px -1px rgba(255,222,200,.38);
}
.ob-key-tex { position: absolute; inset: 0; width: 100%; height: 100%; }
.ob-key-legend {
  position: absolute; left: 13px; top: 12px;
  font: 500 22px/1 var(--sans); letter-spacing: -.01em; color: #FFF4EA;
  text-shadow: 0 -.8px 0 rgba(150,40,4,.5), 0 .9px 0 rgba(255,206,182,.5);
}
/* where the skirt meets the wood it darkens */
.ob-key-occl { position: absolute; left: 19px; top: 17px; width: 132px; height: 122px; border-radius: 19px;
  box-shadow: inset 0 -4px 4px -2px rgba(30,10,0,.48), inset -2px 0 3px -1px rgba(30,10,0,.26), inset 1.5px 0 2px -1px rgba(30,10,0,.18); }

/* one press every 7 seconds: down 3px in 90ms, a beat at the bottom, back up in 160ms */
.ob-key-cap { animation: ob-key-press 7s linear 2.4s infinite; will-change: transform; }
.ob-key-cast { animation: ob-key-cast 7s linear 2.4s infinite; }
@keyframes ob-key-press {
  0%      { transform: translate(0, 0); animation-timing-function: cubic-bezier(.5, 0, .9, .4); }
  1.286%  { transform: translate(1.1px, 3px); animation-timing-function: linear; }
  1.857%  { transform: translate(1.1px, 3px); animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
  4.143%, 100% { transform: translate(0, 0); }
}
@keyframes ob-key-cast {
  0%      { box-shadow: 0 0 2px 1px rgba(20,10,4,.36), 4px 6px 8px rgba(26,12,4,.42); animation-timing-function: cubic-bezier(.5, 0, .9, .4); }
  1.286%  { box-shadow: 0 0 2px 1px rgba(20,10,4,.4), 2.5px 3.5px 5px rgba(26,12,4,.52); animation-timing-function: linear; }
  1.857%  { box-shadow: 0 0 2px 1px rgba(20,10,4,.4), 2.5px 3.5px 5px rgba(26,12,4,.52); animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
  4.143%, 100% { box-shadow: 0 0 2px 1px rgba(20,10,4,.36), 4px 6px 8px rgba(26,12,4,.42); }
}
@media (prefers-reduced-motion: reduce) { .ob-key-cap, .ob-key-cast { animation: none; } }

/* Two ivory dice from a good games cupboard, Japanese style: bone white, soft round corners, ink pips drilled into
   the faces and the one traditional big pip in orange. Drawn as real rounded cubes under one orthographic camera
   (3/4 from above left, light from the top left): flat faces, quarter-cylinder edges with exact gradients and
   finely tessellated corner spheres; pips are drawn flat and mapped onto each face, so they foreshorten truly.
   Generated by a small script; numbers are the projection, not hand-placed. */
.ob-dice { position: relative; width: 190px; height: 151px; }
.ob-dice svg { position: absolute; left: 0; top: 0; overflow: visible; }
.ob-dice-dice { filter: drop-shadow(0 1px 2px rgba(60,48,30,.14)) drop-shadow(0 9px 16px rgba(60,48,30,.12)) drop-shadow(0 24px 44px rgba(60,48,30,.10)); }

  /* A mechanical stopwatch: brushed steel case, polished bezel, cream enamel dial, one orange start button.
     The long hand sweeps once a minute; the little counter at six steps on one mark each time it comes round.
     Drawn at 150px across and zoomed a touch so it carries the same weight as the notebook. */
  .ob-watch { position: relative; width: 170px; height: 208px; zoom: 1.1; }

  /* bow, crown, stem and pusher sit behind the case; static, so one shared shadow filter is drawn once */
  .ob-watch-fit { position: absolute; inset: 0; filter: drop-shadow(0 1px .6px rgba(60,48,30,.34)) drop-shadow(0 5px 6px rgba(60,48,30,.14)); }
  .ob-watch-bow { position: absolute; left: 69px; top: 0; width: 32px; height: 32px; overflow: visible; }
  .ob-watch-stem, .ob-watch-collar, .ob-watch-crown, .ob-watch-neck {
    position: absolute;
    background: linear-gradient(90deg, #77736C, #E6E4DF 24%, #FAF9F6 33%, #C6C2BB 58%, #8E8A83 84%, #66625B);
  }
  .ob-watch-stem { left: 78.5px; top: 38px; width: 13px; height: 22px; }
  .ob-watch-collar { left: 76px; top: 49px; width: 18px; height: 8px; border-radius: 2px; box-shadow: inset 0 1px 0 rgba(255,255,255,.65), inset 0 -1px 0 rgba(50,44,36,.3); }
  .ob-watch-crown {
    left: 72px; top: 24px; width: 26px; height: 15px; border-radius: 4px;
    background:
      linear-gradient(90deg, rgba(50,44,36,.45), rgba(50,44,36,0) 24%, rgba(50,44,36,0) 66%, rgba(50,44,36,.45)),
      repeating-linear-gradient(90deg, rgba(60,54,46,.45) 0 1px, rgba(255,255,255,.5) 1px 1.6px, rgba(255,255,255,0) 1.6px 2.4px),
      linear-gradient(90deg, #77736C, #E6E4DF 24%, #FAF9F6 33%, #C6C2BB 58%, #8E8A83 84%, #66625B);
    box-shadow: inset 0 1.5px 0 rgba(255,255,255,.6), inset 0 -1.5px 0 rgba(50,44,36,.32);
  }
  /* the start button at one o'clock: a steel tube and an orange cap with a domed end, drawn pointing up,
     then turned about the centre of the case */
  .ob-watch-push { position: absolute; left: 85px; top: 130px; width: 0; height: 0; transform: rotate(33deg); }
  .ob-watch-neck { left: -5px; top: -85px; width: 10px; height: 15px; }
  .ob-watch-cap {
    position: absolute; left: -8.5px; top: -99.5px; width: 17px; height: 16px;
    border-radius: 6.5px 6.5px 2px 2px / 5px 5px 1.5px 1.5px;
    background:
      radial-gradient(ellipse 6px 2.4px at 40% 2.6px, rgba(255,232,214,.7), rgba(255,232,214,0)),
      linear-gradient(0deg, rgba(110,30,6,.28), rgba(110,30,6,0) 3px),
      linear-gradient(90deg, #C2421A, #FF8C5B 19%, #FF7440 32%, #FF5A1F 56%, #E34A17 80%, #99310C);
    box-shadow: inset 0 0 0 .6px rgba(110,30,6,.5), inset 0 1px .5px rgba(255,228,210,.5);
  }

  /* the case: a darker side band shows the watch's thickness, then the brushed rim, the polished bezel, the dial */
  .ob-watch-side {
    position: absolute; left: 11.5px; top: 58.5px; width: 150px; height: 150px; border-radius: 50%;
    background: linear-gradient(135deg, #B3AFA8, #7E7A72 55%, #57534C);
    box-shadow: 0 0 0 .5px rgba(60,52,42,.4), 0 2px 3px rgba(50,40,28,.24),
      0 1px 2px rgba(60,48,30,.14), 0 16px 30px rgba(60,48,30,.15), 0 44px 80px rgba(60,48,30,.12);
  }
  .ob-watch-case {
    position: absolute; left: 10px; top: 55px; width: 150px; height: 150px; border-radius: 50%;
    background:
      radial-gradient(circle 12px at 24px 23px, rgba(255,255,255,.95), rgba(255,255,255,0)),
      linear-gradient(135deg, rgba(255,255,255,.26), rgba(255,255,255,0) 40%, rgba(40,34,26,0) 56%, rgba(40,34,26,.34)),
      conic-gradient(from 0deg, #D2CFC9, #A9A59E 30deg, #8C8881 62deg, #B1ADA6 96deg, #E3E0DA 130deg, #C0BCB5 166deg, #94908A 214deg, #B0ACA5 252deg, #EAE8E3 290deg, #FFFFFF 318deg, #E5E2DD 342deg, #D2CFC9);
    box-shadow: inset 0 0 0 .75px rgba(78,72,62,.72), inset 2px 2.5px 1.2px -.6px rgba(255,255,255,.95), inset -2.5px -3px 2.5px -.5px rgba(46,40,32,.5);
  }
  /* the bezel slopes in toward the glass, so it is dark at the upper left and catches the light at the lower right */
  .ob-watch-bezel {
    position: absolute; left: 6px; top: 6px; width: 138px; height: 138px; border-radius: 50%;
    background:
      radial-gradient(circle 10px at 115px 116px, rgba(255,255,255,.9), rgba(255,255,255,0)),
      linear-gradient(135deg, rgba(30,26,20,.36), rgba(30,26,20,0) 46%, rgba(255,255,255,0) 56%, rgba(255,255,255,.42)),
      conic-gradient(from 0deg, #99958D, #B6B2AA 45deg, #DDDAD4 112deg, #F7F6F3 138deg, #C5C1BA 170deg, #8A867E 228deg, #6D6962 292deg, #605C56 316deg, #7C7871 342deg, #99958D);
    box-shadow: 0 0 0 .75px rgba(52,46,38,.6), -.5px -.5px 0 .9px rgba(255,255,255,.5);
  }
  .ob-watch-dial {
    position: absolute; left: 5px; top: 5px; width: 128px; height: 128px; border-radius: 50%; overflow: hidden;
    background: radial-gradient(circle at 46% 42%, #FDFBF6, #FBF8F1 40%, #F4EFE5 74%, #E9E2D4 97%);
    box-shadow: 0 0 0 .75px rgba(60,52,42,.55), inset 2px 3px 4px rgba(60,48,30,.24), inset -1px -1px 1px rgba(255,255,255,.7);
  }
  .ob-watch-dial svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
  .ob-watch-ticks circle { fill: none; stroke: #1D1C1A; }

  /* the wordmark, printed on the enamel under twelve */
  .ob-watch-mark {
    position: absolute; left: 0; right: 0; top: 29px; text-align: center;
    font: 430 9px/1 var(--serif); font-variation-settings: "opsz" 12; letter-spacing: -.01em; color: rgba(29,28,26,.88);
  }
  .ob-watch-mark i { font-style: italic; font-weight: 380; }

  /* the counter at six: a small sunk dial with fine turned rings */
  .ob-watch-sub {
    position: absolute; left: 49.5px; top: 79px; width: 29px; height: 29px; border-radius: 50%;
    background:
      repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,.32) 0 .8px, rgba(120,104,80,.05) .8px 1.6px),
      radial-gradient(circle at 42% 38%, #F8F5EE, #EFEAE0 70%, #E9E3D7);
    box-shadow: inset 1px 1.5px 2px rgba(60,48,30,.24), inset -.5px -.5px 0 rgba(255,255,255,.8), 0 0 0 .5px rgba(60,52,42,.2);
  }
  .ob-watch-sub svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }

  /* hands: each is drawn pointing at twelve and turned; a blurred copy, nudged down-right, is its shadow */
  .ob-watch-hand { position: absolute; inset: 0; }
  .ob-watch-sec { transform: rotate(54deg); animation: ob-watch-turn 60s linear -9s infinite; will-change: transform; }
  .ob-watch-min { transform: rotate(48deg); animation: ob-watch-turn 1800s steps(30, end) -249s infinite; }
  .ob-watch-shade { translate: .9px 1.6px; opacity: .28; filter: blur(.6px); }
  @keyframes ob-watch-turn { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

  /* the domed crystal: a crescent of light hugging the rim at the upper left, a faint shade at the lower right */
  .ob-watch-glass {
    position: absolute; left: 5px; top: 5px; width: 128px; height: 128px; border-radius: 50%; pointer-events: none;
    background:
      radial-gradient(circle 80px at 71px 71px, rgba(255,255,255,0) 62.5px, rgba(255,255,255,.16) 65.5px, rgba(255,255,255,.5) 69.5px, rgba(255,255,255,.62) 72px, rgba(255,255,255,.4) 74.5px),
      linear-gradient(145deg, rgba(255,255,255,.14), rgba(255,255,255,0) 44%);
    box-shadow: inset -2px -3px 5px -1px rgba(40,30,20,.17);
  }
  @media (prefers-reduced-motion: reduce) { .ob-watch-sec, .ob-watch-min { animation: none; } }

/* ---------- the sections in between: where to start, how it works, plans, questions ---------- */
.lp-sec { max-width: 1240px; margin: 0 auto; padding: 120px 28px 0; scroll-margin-top: 72px; }
.lp-sec:last-child { padding-bottom: 136px; }
/* Every section heading is centred over its content. */
.lp-head { max-width: 720px; margin: 0 auto 44px; text-align: center; }
.lp-head.is-center { margin-left: auto; margin-right: auto; text-align: center; }
.lp-head > p:not(.lp-kicker) { margin: 16px 0 0; font-size: 18.5px; line-height: 1.5; color: var(--ink-2); }
.lp-kicker { margin: 0 0 16px; font: 500 14px/1 var(--sans); color: var(--ink-3); }
.lp-h2 { margin: 0; font: 340 clamp(38px, 4.3vw, 60px)/1.02 var(--serif); font-variation-settings: "opsz" 144; letter-spacing: -0.035em; text-wrap: balance; }
.lp-h2 i { font-style: italic; font-weight: 330; }

/* the two subjects: each named once, with its two ways in as buttons and both folders fanned at the top */
.lp-paths { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.lp-subj { display: flex; flex-direction: column; padding: 26px 26px 24px; border-radius: 20px; background: var(--tint); box-shadow: inset 0 0 0 1px rgba(29, 28, 26, .05); }
.lp-subj-top { display: grid; grid-template-columns: 212px minmax(0, 1fr); gap: 28px; align-items: center; margin-bottom: 26px; }
.lp-subj-art { position: relative; height: 196px; }
.lp-subj-art .st-folder { position: absolute; width: 128px; height: auto; transition: transform .35s var(--ease); }
.lp-subj-art .f-read { left: 0; top: 22px; transform: rotate(-4deg); z-index: 2; }
.lp-subj-art .f-build { left: 70px; top: 0; transform: rotate(5deg); z-index: 1; }
.lp-subj:has(.is-read:hover, .is-read:focus-visible) .f-read { transform: rotate(-5deg) translateY(-10px); }
.lp-subj:has(.is-build:hover, .is-build:focus-visible) .f-build { z-index: 3; transform: rotate(3deg) translateY(-10px); }
.lp-subj-t { margin: 0; font: 380 33px/1.08 var(--serif); font-variation-settings: "opsz" 72; letter-spacing: -.025em; }
.lp-subj-d { margin: 10px 0 0; font-size: 16.5px; line-height: 1.45; color: var(--ink-2); }
.lp-ways { display: grid; gap: 10px; margin-top: auto; }
.lp-way {
  display: grid; grid-template-columns: 42px minmax(0, 1fr) auto 16px; align-items: center; gap: 14px; padding: 14px 18px 14px 14px;
  border-radius: 14px; background: rgba(255, 255, 255, .5); box-shadow: inset 0 0 0 1px rgba(29, 28, 26, .04);
  transition: background .2s, box-shadow .2s, transform .2s var(--ease);
}
.lp-way:hover { background: rgba(255, 255, 255, .88); transform: translateY(-1px); box-shadow: inset 0 0 0 1px rgba(29, 28, 26, .05), 0 8px 20px rgba(60, 48, 30, .10); }
.lp-way-ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--tint); }
.lp-way-ic svg { width: 20px; height: 20px; }
.lp-way-w b { display: block; font-size: 16.5px; font-weight: 600; letter-spacing: -.01em; }
.lp-way-w span { display: block; margin-top: 3px; font-size: 14px; line-height: 1.35; color: var(--ink-2); }
.lp-way-pill { padding: 6px 10px; border-radius: 999px; background: var(--tint); font: 600 12px/1 var(--sans); white-space: nowrap; }
.lp-way-go svg { width: 16px; height: 16px; display: block; transition: transform .2s var(--ease); }
.lp-way:hover .lp-way-go svg { transform: translateX(3px); }

/* what you'll actually do: four posters, each holding a real moment from the first lesson, drawn as paper in ink
   with one orange part. home.js holds each orange part back (.is-wait) until its poster comes on screen. */
.hw-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.hw {
  position: relative; display: flex; flex-direction: column; min-height: 450px; padding: 22px 22px 20px; border-radius: 18px; background: var(--pc);
  box-shadow: inset 0 0 0 1px rgba(29, 28, 26, .06); transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.hw:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px rgba(29, 28, 26, .08), 0 2px 4px rgba(60, 48, 30, .08), 0 18px 34px rgba(60, 48, 30, .12); }
.hw:hover .sc-card { transform: rotate(0deg) translateY(-4px); }
.hw-stage { flex: 1; display: grid; place-items: center; padding: 18px 4px 34px; }
.hw-foot { display: flex; flex-direction: column; gap: 6px; padding-right: 52px; }
.hw-t { font: 380 clamp(30px, 2.7vw, 38px)/1.02 var(--serif); font-variation-settings: "opsz" 144; letter-spacing: -.03em; }
.hw-s { font-size: 14.5px; line-height: 1.38; opacity: .85; }
.hw-go { position: absolute; right: 20px; bottom: 20px; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .42); }
.hw-go svg { width: 17px; height: 17px; transition: transform .2s var(--ease); }
.hw:hover .hw-go svg { transform: translateX(2px); }
.sc-card {
  position: relative; display: block; width: 100%; max-width: 236px; padding: 16px 17px; border-radius: 10px; background: #FCFBF8; color: #1D1C1A;
  box-shadow: 0 0 0 1.6px #1D1C1A; transform: rotate(var(--r, 0deg)); transition: transform .35s var(--ease);
}
.sc-h { display: block; font: 380 21px/1.08 var(--serif); font-variation-settings: "opsz" 72; letter-spacing: -.02em; }
.sc-h i { font-weight: 330; }
.sc-p { display: block; margin-top: 10px; font-size: 13px; line-height: 1.5; color: #4A4741; }
.sc-mark { color: #1D1C1A; background: linear-gradient(transparent 55%, rgba(255, 90, 31, .5) 55% 90%, transparent 90%) no-repeat 0 0 / 100% 100%; transition: background-size .9s var(--ease) .15s; }
.sc-q { display: block; margin-bottom: 11px; font: 600 13.5px/1.35 var(--sans); }
.sc-opt { position: relative; display: block; margin-top: 7px; padding: 7px 11px; border-radius: 999px; box-shadow: inset 0 0 0 1.4px #1D1C1A; font-size: 12.5px; line-height: 1.2; }
.sc-opt.is-pick { padding-right: 30px; box-shadow: inset 0 0 0 1.6px #FF5A1F; background: rgba(255, 90, 31, .12); font-weight: 600; }
.sc-opt i { position: absolute; right: 7px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; display: grid; place-items: center; background: #FF5A1F; color: #fff; transition: transform .4s cubic-bezier(.3, 1.6, .5, 1) .5s; }
.sc-opt i svg { width: 11px; height: 11px; }
.sc-pre { display: block; white-space: pre; font: 500 11.5px/1.7 var(--mono); }
.sc-pre .cm { color: #8E8A82; }
.sc-pass {
  position: absolute; right: -12px; bottom: -14px; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px 7px 9px; border-radius: 999px;
  background: #FF5A1F; color: #fff; font: 600 12.5px/1 var(--sans); box-shadow: 0 0 0 1.6px #1D1C1A; transform: rotate(-6deg);
  transition: transform .45s cubic-bezier(.3, 1.6, .5, 1) .45s, opacity .2s .45s;
}
.sc-pass svg { width: 13px; height: 13px; }
.sc-next { padding-top: 18px; padding-right: 44px; }
.sc-k { display: block; margin-bottom: 6px; font-size: 12px; color: #6E6A62; }
.sc-saved { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-size: 12.5px; color: #4A4741; }
.sc-saved svg { width: 13px; height: 13px; }
.sc-ribbon {
  position: absolute; right: 16px; top: -6px; width: 16px; height: 72px; background: #FF5A1F; box-shadow: 0 0 0 1.6px #1D1C1A;
  clip-path: polygon(-10% -10%, 110% -10%, 110% 100%, 50% 82%, -10% 100%); transition: height .7s var(--ease) .2s;
}
.is-wait .sc-mark { background-size: 0% 100%; }
.is-wait .sc-opt i { transform: scale(0); }
.is-wait .sc-pass { transform: rotate(-6deg) scale(.6); opacity: 0; }
.is-wait .sc-ribbon { height: 0; }

/* the trust banner: one line, then a slow row of logos in one grey ink between two hairlines.
   The row runs twice, back to back, and slides by exactly one copy, so the loop has no seam. */
.tb-sec { padding-top: 96px; }
.tb { position: relative; display: flex; align-items: center; gap: 40px; padding: 26px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.tb-line { flex: none; margin: 0; white-space: nowrap; font-size: 16.5px; color: var(--ink-2); }
.tb-line b { color: var(--ink); font-weight: 600; }
.tb-roll { flex: 1; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.tb-track { display: flex; width: max-content; animation: tb-roll 70s linear infinite; }
.tb-roll:hover .tb-track { animation-play-state: paused; }
.tb-set { display: flex; align-items: center; gap: 56px; padding-right: 56px; }
.tb-set img { display: block; flex: none; height: var(--h, 24px); width: auto; filter: brightness(0); opacity: .42; }
@keyframes tb-roll { to { transform: translateX(-50%); } }
/* until the numbers are real (PROOF.verified in build-study.js) */
.tb-sample { position: absolute; right: 0; top: -32px; padding: 5px 10px; border-radius: 999px; box-shadow: inset 0 0 0 1.4px #FF5A1F; background: #FFF4EE; color: #C23E0E; font: 600 12px/1 var(--sans); }

/* things you'll build: project folders standing on a shelf. Each column carries its own piece of plank,
   wide enough to meet its neighbours, so the shelf reads as one. */
#built .lp-head { margin-bottom: 16px; }
.sh { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0 24px; }
.sh-item { position: relative; display: flex; flex-direction: column; }
.sh-art { display: flex; justify-content: center; align-items: flex-end; height: 196px; padding: 0 8%; }
.sh-art .st-folder { width: min(74%, 132px); height: auto; transform: rotate(var(--r)); transform-origin: 50% 100%; transition: transform .35s var(--ease); }
.sh-item:hover .sh-art .st-folder, .sh-item:focus-visible .sh-art .st-folder { transform: translateY(-14px) rotate(0deg); }
.sh-item:hover .st-folder-face { transform: perspective(800px) rotateY(-8deg); }
.sh-plank { height: 13px; margin: 0 -12px; background: linear-gradient(180deg, #E3D8C3, #D2C5AC); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 12px 18px -10px rgba(60, 48, 30, .45); }
.sh-item:first-child .sh-plank { margin-left: -6px; border-radius: 4px 0 0 4px; }
.sh-item:last-child .sh-plank { margin-right: -6px; border-radius: 0 4px 4px 0; }
.sh-name { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 22px; font: 400 18.5px/1.2 var(--serif); font-variation-settings: "opsz" 36; letter-spacing: -.015em; }
.sh-name svg { width: 15px; height: 15px; flex: none; opacity: 0; transform: translateX(-4px); transition: opacity .2s, transform .2s var(--ease); }
.sh-item:hover .sh-name svg { opacity: 1; transform: none; }
.sh-what { margin-top: 5px; font-size: 14px; line-height: 1.42; color: var(--ink-2); }
.sh-foot { margin: 34px 0 0; text-align: center; font-size: 15.5px; color: var(--ink-2); }
.sh-foot a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* plans: the same four ways to pay as the pass on /pricing */

/* questions: one centred column of quiet ruled rows (src/study.css, .is-stack) with the email line under it.
   Here the questions are set in Fraunces, and a plus turns into a cross when one is open. */
.lp-sec .st-faq-side .st-h2 { margin: 0; font: 340 clamp(38px, 4.3vw, 60px)/1.02 var(--serif); font-variation-settings: "opsz" 144; letter-spacing: -0.035em; }
.lp-sec .st-faqs.is-stack .st-faq-side { margin-bottom: 44px; }
.lp-sec .st-faq summary { gap: 28px; padding: 26px 2px; font: 380 25px/1.2 var(--serif); font-variation-settings: "opsz" 72; letter-spacing: -.02em; }
.lp-sec .st-faq-ic { position: relative; width: 16px; height: 16px; margin: 0; border: 0; transform: none; transition: transform .35s var(--ease-in); }
.lp-sec .st-faq-ic::before, .lp-sec .st-faq-ic::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.6px; margin-top: -.8px; border-radius: 2px; background: var(--ink-2); transition: background-color .16s var(--ease); }
.lp-sec .st-faq-ic::after { transform: rotate(90deg); }
.lp-sec .st-faq summary:hover .st-faq-ic::before, .lp-sec .st-faq summary:hover .st-faq-ic::after { background: var(--ink); }
.lp-sec .st-faq details[open] .st-faq-ic { transform: rotate(45deg); }
.lp-sec .st-faq p { margin-top: -8px; padding: 0 60px 28px 2px; font-size: 17px; max-width: 62ch; }
.lp-sec .st-faq-mail { font-size: 16px; }
@media (max-width: 900px) {
  .lp-sec .st-faqs.is-stack .st-faq-side { margin-bottom: 28px; }
  .lp-sec .st-faq-side .st-h2 { font-size: 40px; }
  .lp-sec .st-faq summary { gap: 18px; padding: 20px 2px; font-size: 20.5px; }
  .lp-sec .st-faq-ic { width: 14px; height: 14px; }
  .lp-sec .st-faq p { padding: 0 8px 22px 2px; font-size: 15.5px; }
  .lp-sec .st-faq-mail { font-size: 15.5px; }
}

/* ---------- footer: one navy sheet with a blueprint grid ---------- */
.navy-end {
  position: relative; overflow: hidden; isolation: isolate;
  margin-top: -40px; background-color: var(--navy); color: #EDEBE5;
}
.navy-end::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  background-position: center top;
}
.foot { position: relative; }
.wordmark-light { color: #F6F4EE; }
/* The big wordmark spans the content width exactly (home.js fits it) and is never cropped. */
/* the footer: the giant word, then the legal links and the copyright */
.fw { position: relative; color: #EDEBE5; }
.fw-in { position: relative; max-width: 1320px; margin: 0 auto; padding: 104px 32px 32px; }
.fw .foot-mark { margin-top: 0; }
.fw-base {
  display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 12px 40px;
  margin-top: 44px; font: 400 14px/1.4 var(--sans); color: rgba(237, 235, 229, .5);
}
.fw-more { display: flex; flex-wrap: wrap; gap: 6px 26px; }
.fw-more a { color: rgba(237, 235, 229, .7); transition: color 160ms var(--ease); }
.fw-more a:hover, .fw-more a:focus-visible { color: #fff; }
.fw-base p { margin: 0; }
@media (max-width: 720px) {
  .fw-in { padding: 72px 20px 24px; }
  .fw-base { margin-top: 36px; }
}
@media (prefers-reduced-motion: reduce) { .fw-more a { transition: none; } }

.foot-mark {
  margin-top: 88px; text-align: center; color: #F6F4EE; user-select: none;
  font: 300 calc((min(100vw, 1320px) - 64px) / 3.1)/1 var(--serif); font-variation-settings: "opsz" 144;
  letter-spacing: -0.035em;
}
.foot-mark span { display: inline-block; white-space: nowrap; line-height: .78; padding-bottom: .02em; }
.foot-mark em { font-style: italic; letter-spacing: -0.03em; padding-right: .04em; }

/* ---------- smaller screens ---------- */
@media (max-width: 1180px) {
  /* Not enough room for all four: keep the notebook and Echo, up beside the headline. */
  .o-book { left: max(24px, calc(50% - 520px)); top: 12%; }
  .o-key { right: max(20px, calc(50% - 560px)); top: 13%; }
  .o-dice, .o-watch { display: none; }
}
@media (max-width: 1100px) {
  .lp-paths { grid-template-columns: minmax(0, 1fr); }
  .hw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sh { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 24px; }
  .sh-item:nth-child(3n + 1) .sh-plank { margin-left: -6px; border-radius: 4px 0 0 4px; }
  .sh-item:nth-child(3n) .sh-plank { margin-right: -6px; border-radius: 0 4px 4px 0; }
}
@media (max-width: 980px) {
  .nav-center, .nav-sign { display: none !important; }
  .nav-burger { display: block; }
  .nav-in { grid-template-columns: 1fr auto; }
  .hero { padding-top: 96px; min-height: 0; }
  /* the notebook and Echo sit side by side under the copy */
  .artefacts { position: relative; inset: auto; display: flex; justify-content: center; align-items: center; gap: 40px; margin: 56px 0 0; }
  .art { position: relative; inset: auto; animation: none; transform: rotate(var(--r)); }
  .o-book, .o-key { left: auto; right: auto; top: auto; }
}
@media (max-width: 720px) {
  body { font-size: 17px; }
  .nav-in, .nav.scrolled .nav-in { padding: 0 16px 0 20px; gap: 12px; height: 58px; }
  .wordmark { font-size: 19px; margin-right: auto; }
  .nav-right { gap: 8px; }
  .nav-cta { height: 36px; padding: 0 14px; font-size: 14px; }
  .nav-burger { width: auto; height: 36px; padding: 0 12px 0 32px; border-radius: 10px; background: var(--sheet); box-shadow: inset 0 0 0 1px var(--rule), 0 1px 2px rgba(60,48,30,.06); }
  .nav-burger span { left: 11px; right: auto; width: 14px; }
  .nav-burger span:nth-of-type(1) { top: 14px; }
  .nav-burger span:nth-of-type(2) { top: 20px; }
  .nav-burger[aria-expanded="true"] span:nth-of-type(1), .nav-burger[aria-expanded="true"] span:nth-of-type(2) { top: 17px; }
  .nav-burger b { display: inline; font: 500 14px var(--sans); color: var(--ink); }
  .sheet-body { padding-top: 74px; }

  /* hero: centred, no figures, pure typography */
  .hero { min-height: calc(100svh - 58px); padding: 40px 24px; justify-content: center; }
  .hero-grid { -webkit-mask-image: radial-gradient(ellipse 80% 50% at 50% 50%, #000 20%, transparent 70%); mask-image: radial-gradient(ellipse 80% 50% at 50% 50%, #000 20%, transparent 70%); }
  .hero-h { font-size: clamp(44px, 12vw, 60px); line-height: 1.02; }
  .hero-h br { display: none; }
  .hs-more { display: none; }
  .hs-short { display: inline; }
  .hero-sub { margin: 20px auto 0; max-width: 30ch; font-size: 16px; line-height: 1.5; }
  .hero-cta { margin-top: 28px; gap: 20px; flex-direction: column; }
  .hero-note { margin-top: 12px; font-size: 13px; }
  .artefacts { display: none; }

  .lp-sec { padding: 80px 16px 0; }
  .lp-sec:last-child { padding-bottom: 96px; }
  .lp-head { margin-bottom: 28px; }
  .lp-head > p:not(.lp-kicker) { font-size: 16.5px; }
  /* the ways in: swipe sideways instead of scrolling past four tall cards */
  .lp-paths { gap: 12px; }
  .lp-subj { padding: 18px 16px 16px; }
  .lp-subj-top { grid-template-columns: minmax(0, 1fr); gap: 18px; margin-bottom: 18px; }
  .lp-subj-art { height: 150px; }
  .lp-subj-art .st-folder { width: 98px; }
  .lp-subj-art .f-build { left: 56px; }
  .lp-subj-t { font-size: 28px; }
  /* the free note drops under the line */
  .lp-way { grid-template-columns: 38px minmax(0, 1fr) 16px; column-gap: 12px; row-gap: 7px; padding: 12px 14px 12px 12px; }
  .lp-way-ic { width: 38px; height: 38px; grid-row: 1 / 3; }
  .lp-way-pill { grid-column: 2; grid-row: 2; justify-self: start; padding: 5px 9px; font-size: 11.5px; }
  .lp-way-go { grid-column: 3; grid-row: 1 / 3; }
  /* the four posters, one per row, so the paper cards keep their full size */
  .hw-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .hw { min-height: 0; padding: 18px 18px 20px; border-radius: 16px; }
  .hw-stage { padding: 10px 0 24px; }
  .hw-foot { gap: 5px; padding-right: 52px; }
  .hw-t { font-size: 30px; }
  .hw-s { font-size: 15px; line-height: 1.4; }
  .hw-go { right: 16px; bottom: 18px; width: 38px; height: 38px; }
  .hw-go svg { width: 15px; height: 15px; }
  /* the banner stacks; the shelf splits into rows of two, so nothing hides off to the side */
  .tb-sec { padding-top: 72px; }
  .tb { flex-direction: column; align-items: center; gap: 18px; padding: 22px 0; }
  .tb-roll { width: 100%; }
  .tb-set { gap: 40px; padding-right: 40px; }
  .tb-set img { height: calc(var(--h, 24px) * .85); }
  #built .lp-head { margin-bottom: 8px; }
  .sh { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 18px; }
  .sh-art { height: 150px; }
  .sh-art .st-folder { width: min(70%, 112px); }
  .sh-name { margin-top: 16px; font-size: 17.5px; }
  .sh-name svg { display: none; }
  .sh-item:nth-child(odd) .sh-plank { margin: 0 -9px 0 -6px; border-radius: 4px 0 0 4px; }
  .sh-item:nth-child(even) .sh-plank { margin: 0 -6px 0 -9px; border-radius: 0 4px 4px 0; }

  .foot-mark { margin-top: 56px; font-size: calc((100vw - 40px) / 3.1); }
}
@media (max-width: 420px) { .nav-cta { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .art, .rot-caret, .nav-sheet, .sheet-rise { animation: none; }
  /* the logos stand still and wrap instead of rolling */
  .tb-track { animation: none; width: auto; }
  .tb-roll { -webkit-mask-image: none; mask-image: none; }
  .tb-set { flex-wrap: wrap; row-gap: 22px; padding-right: 0; }
  .tb-set + .tb-set { display: none; }
  .nav-hi { transition: none; }
}


/* ---------------------------------------------------------------- "Then make it stick": Practice, Interview, Tracks
   A bento of three posters in the "how" language: Practice wide on top, Interview tall on the right, Tracks wide
   underneath. Paper in ink, one orange part each (a due problem, the next round, where you are on the route). */
.mo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: minmax(400px, auto) minmax(360px, auto); gap: 16px; }
.mo {
  position: relative; display: grid; padding: 26px 26px 22px; border-radius: 18px; background: var(--pc); color: #1D1C1A;
  box-shadow: inset 0 0 0 1px rgba(29, 28, 26, .06); transition: transform .25s var(--ease), box-shadow .25s var(--ease); overflow: hidden;
}
.mo:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px rgba(29, 28, 26, .08), 0 2px 4px rgba(60, 48, 30, .08), 0 18px 34px rgba(60, 48, 30, .12); }
.mo:hover .hw-go svg { transform: translateX(2px); }
.mo .hw-foot { align-self: end; }
.mo-stage { position: relative; display: grid; place-items: center; min-width: 0; }
.mo-k { display: block; margin-bottom: 10px; font: 600 10.5px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #6E6A62; }

/* Practice: today's set, and a run against the clock tucked beside it */
.mo-practice { grid-column: 1 / 3; grid-row: 1; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 20px; }
.mo-practice .hw-foot { grid-column: 1; grid-row: 1; }
.mo-practice .mo-stage { grid-column: 2; grid-row: 1; padding: 6px 20px 34px 0; }
.mo-today { max-width: 300px; padding: 18px 20px 18px; }
.mo-li { position: relative; display: flex; align-items: center; gap: 11px; padding: 9px 0; border-top: 1px solid rgba(29, 28, 26, .12); font-size: 13.5px; line-height: 1.3; }
.mo-li i { flex: none; width: 9px; height: 9px; border-radius: 50%; box-shadow: inset 0 0 0 1.6px #1D1C1A; }
.mo-li.is-due i { background: #FF5A1F; box-shadow: none; transition: transform .45s cubic-bezier(.3, 1.6, .5, 1) .35s; }
.mo-start { display: grid; place-items: center; height: 38px; margin-top: 12px; border-radius: 10px; background: #1D1C1A; color: #FCFBF8; font-size: 13.5px; font-weight: 500; }
.mo-run { position: absolute; right: 0; bottom: 6px; width: 168px; max-width: none; padding: 14px 16px 14px; }
.mo-time { display: block; font: 500 34px/1 var(--mono); letter-spacing: -.02em; }
.mo-score { display: flex; justify-content: space-between; margin-top: 10px; font-size: 12px; color: #4A4741; }
.mo-score span { color: #8E8A82; }

/* Interview: three role folders fanned like a hand, and the role's rounds on paper in front */
.mo-interview { grid-column: 3; grid-row: 1 / 3; grid-template-rows: minmax(0, 1fr) auto; }
.mo-interview .mo-stage { align-content: center; gap: 0; padding: 10px 0 30px; }
.mo-fan { position: relative; width: 250px; height: 180px; }
.mo-fold { position: absolute; bottom: 0; width: 118px; transition: transform .4s var(--ease); }
.mo-fold .st-folder { width: 100%; height: auto; filter: drop-shadow(0 10px 14px rgba(60, 48, 30, .16)); }
.mo-fold.f1 { left: 2px; transform: rotate(-12deg) translateY(10px); }
.mo-fold.f2 { left: 66px; transform: rotate(-2deg) translateY(-6px); z-index: 1; }
.mo-fold.f3 { left: 128px; transform: rotate(9deg) translateY(4px); z-index: 2; }
.mo-interview:hover .mo-fold.f1 { transform: rotate(-16deg) translate(-8px, 8px); }
.mo-interview:hover .mo-fold.f3 { transform: rotate(13deg) translate(8px, 0); }
.mo-rounds { z-index: 3; max-width: 264px; margin-top: -26px; padding: 16px 18px 12px; }
.mo-rounds .sc-h { margin-bottom: 8px; font-size: 22px; }
.mo-rd { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid rgba(29, 28, 26, .12); font-size: 13px; }
.mo-pips { display: inline-flex; gap: 3px; }
.mo-pips i { width: 11px; height: 4px; border-radius: 3px; background: rgba(29, 28, 26, .16); }
.mo-pips i.on { background: #1D1C1A; }
.mo-rd.is-next { font-weight: 600; }
.mo-rd.is-next .mo-pips i:not(.on):first-of-type, .mo-rd.is-next .mo-pips i.on + i:not(.on) { background: #FF5A1F; transition: background-color .4s .5s; }

/* Tracks: the AI route's folders standing on a plank, the one you're on lifted with a ribbon */
.mo-tracks { grid-column: 1 / 3; grid-row: 2; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 20px; }
.mo-tracks .hw-foot { grid-column: 1; grid-row: 1; }
.mo-tracks .mo-stage { grid-column: 2; grid-row: 1; align-content: end; padding: 10px 6px 26px 0; }
.mo-shelf { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); align-items: end; gap: 6px; width: 100%; }
.mo-sf { position: relative; display: block; transition: transform .35s cubic-bezier(.2, .8, .2, 1.1); transition-delay: calc(var(--i) * 30ms); }
.mo-sf .st-folder { width: 100%; height: auto; }
.mo-sf:not(.is-done):not(.is-here) { filter: saturate(.7); opacity: .82; }
.mo-sf.is-here { transform: translateY(-16px) rotate(-4deg); z-index: 1; }
.mo-sf.is-here .st-folder { filter: drop-shadow(0 12px 14px rgba(60, 48, 30, .22)); }
.mo-tracks:hover .mo-sf { transform: translateY(-4px); }
.mo-tracks:hover .mo-sf.is-here { transform: translateY(-20px) rotate(-2deg); }
.mo-mark { position: absolute; right: 14%; top: -6px; width: 12px; height: 34px; background: #FF5A1F; box-shadow: 0 0 0 1.4px #1D1C1A; clip-path: polygon(-12% -10%, 112% -10%, 112% 100%, 50% 80%, -12% 100%); transition: height .7s var(--ease) .3s; }
.mo-sf.is-done::after { content: ""; position: absolute; right: -2px; bottom: -2px; width: 16px; height: 16px; border-radius: 50%; background: #1D1C1A url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%23FCFBF8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; }
.mo-plank { display: block; width: calc(100% + 32px); height: 16px; margin: 0 -16px; border-top: 2px solid #1D1C1A; background: linear-gradient(rgba(29, 28, 26, .1), transparent); }

/* held back until on screen (home.js) */
.is-wait .mo-li.is-due i { transform: scale(0); }
.is-wait .mo-mark { height: 0; }
.is-wait .mo-rd.is-next .mo-pips i { background: rgba(29, 28, 26, .16); }

@media (max-width: 1100px) {
  .mo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; }
  .mo-practice, .mo-tracks { grid-column: 1 / -1; grid-row: auto; }
  .mo-interview { grid-column: 1 / -1; grid-row: auto; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); grid-template-rows: auto; gap: 20px; }
  .mo-interview .hw-foot { grid-column: 1; grid-row: 1; }
  .mo-interview .mo-stage { grid-column: 2; grid-row: 1; }
}
@media (max-width: 720px) {
  .mo-grid { grid-template-columns: minmax(0, 1fr); }
  .mo, .mo-practice, .mo-interview, .mo-tracks { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; padding: 22px 20px 20px; }
  .mo .mo-stage { grid-column: 1; grid-row: 1; padding: 6px 0 26px; }
  .mo .hw-foot { grid-column: 1; grid-row: 2; }
  .mo-practice .mo-stage { padding-right: 0; padding-bottom: 60px; }
  .mo-run { right: 4px; bottom: 0; width: 150px; }
  .mo-today { max-width: 270px; margin-right: 40px; }
  .mo-shelf { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 10px; }
  .mo-plank { display: none; }
}
/* v2 placement: the run card sits clear of the arrow; Tracks' shelf spans the card; bigger role folders. */
.mo-practice .mo-stage { display: block; position: relative; min-height: 330px; padding: 0; }
.mo-today { position: absolute; left: 4%; top: 22px; width: 300px; }
.mo-run { right: 4%; bottom: auto; top: 158px; }
.mo-tracks { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
.mo-tracks .mo-stage { grid-column: 1; grid-row: 1; padding: 34px 8px 30px; }
.mo-tracks .hw-foot { grid-column: 1; grid-row: 2; }
.mo-shelf { gap: 12px; padding: 0 12px; }
.mo-fan { width: 300px; height: 216px; }
.mo-fold { width: 142px; }
.mo-fold.f2 { left: 80px; } .mo-fold.f3 { left: 154px; }
.mo-rounds { max-width: 290px; width: 100%; }
@media (max-width: 1100px) {
  .mo-tracks { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .mo-practice .mo-stage { min-height: 330px; }
  .mo-today { left: 0; width: min(280px, 86%); }
  .mo-run { right: 0; top: 190px; }
  .mo-fan { width: 260px; height: 190px; } .mo-fold { width: 122px; } .mo-fold.f2 { left: 66px; } .mo-fold.f3 { left: 132px; }
  .mo-tracks .mo-stage { padding: 20px 0 22px; }
  .mo-shelf { padding: 0; }
}
.mo-today { left: 0; width: 300px; }
.mo-run { right: 0; top: 128px; }
@media (max-width: 720px) { .mo-today { width: min(270px, 80%); } .mo-run { top: 196px; } }

/* ---------------------------------------------------------------- phones, v2 (user, 2026-11-03: "a bit confusing")
   The hero stays as it was (user, 2026-11-03: full first screen, text in the middle). Every poster reads words
   first (number, title, line, arrow), then its drawing, a little smaller. "How a lesson works" is numbered 01 to 04. */
.hw-n { display: block; margin-bottom: 4px; font: 600 11px var(--mono); letter-spacing: .14em; opacity: .55; }
@media (max-width: 720px) {

  .hw-grid { gap: 12px; }
  .hw, .mo { display: flex; flex-direction: column; min-height: 0; padding: 20px 20px 18px; }
  .hw .hw-foot, .mo .hw-foot { order: -1; padding-right: 56px; }
  .hw .hw-go, .mo .hw-go { top: 18px; bottom: auto; right: 18px; }
  .hw .hw-t, .mo .hw-t { font-size: 30px; }
  .hw-stage { padding: 18px 6px 6px; }
  .hw .sc-card { max-width: 290px; }
  .mo .mo-stage { padding: 18px 0 4px; }
  .mo-practice .mo-stage { min-height: 300px; }
  .mo-interview .mo-stage { padding-bottom: 8px; }
  .mo-tracks .mo-stage { padding: 22px 0 6px; }
}