/* Tokens and rules are explained in ../DESIGN.md */
:root {
  --ochre: #C28C33;
  --cobalt: #2457F5;
  --chalk: #F7F8FA;
  --carbon: #141619;
  --stone: #E4E7EE;
  --wood: #B08455;
  --graphite: #515A66;
  --shadow: rgba(20, 22, 25, .3);
  --stiff: cubic-bezier(.72, 0, .18, 1);
  --snap: cubic-bezier(.3, 1.45, .5, 1);
  --gutter: max(20px, env(safe-area-inset-left, 0px));
  --edge: max(var(--gutter), calc((100vw - 1120px) / 2));
  --sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}

@font-face {
  font-family: "Archivo";
  src: url("/fonts/archivo-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }
.wait *, .wait *::before, .wait *::after { animation-play-state: paused !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--stone); color: var(--carbon); font: 400 18px/1.45 var(--sans); overflow-x: clip; }
h1, h2, p, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-underline-offset: 3px; }
canvas { display: block; }
i { font-style: normal; }
:focus-visible { outline: 3px solid var(--carbon); outline-offset: 3px; }
.cobalt :focus-visible, .peel:focus-visible { outline-color: var(--chalk); }

.poster { font-weight: 800; line-height: .98; letter-spacing: -.035em; text-wrap: balance; }
h2.poster { font-size: clamp(38px, 8vw, 76px); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: var(--gutter); top: -80px; z-index: 30; padding: 12px 16px; background: var(--carbon); color: var(--chalk); }
.skip:focus { top: 12px; }

/* Buttons are two sheets: the face, and a backing it lifts off and slams onto */
.act {
  position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 20px; border: 0; border-radius: 2px; background: none; color: var(--chalk);
  font: 600 16px/1 var(--sans); text-decoration: none; cursor: pointer; transition: transform .16s var(--snap);
}
.act::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 2px; background: var(--carbon); }
.act::after { content: ""; position: absolute; inset: 0; z-index: -2; border-radius: 2px; background: var(--act-back, var(--cobalt)); transform: translate(5px, 6px); transition: transform .16s var(--snap); }
.act:hover { transform: translate(-2px, -3px) rotate(-.8deg); }
.act:hover::after { transform: translate(8px, 10px) rotate(.8deg); }
.act:active { transform: translate(5px, 6px); transition-duration: .05s; }
.act:active::after { transform: none; transition-duration: .05s; }
.act[disabled] { opacity: .6; cursor: default; }
.cobalt { --act-back: var(--ochre); }

.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  min-height: 44px; padding: 8px 14px; border: 2px solid currentColor; border-radius: 2px; background: transparent; color: inherit;
  font: 600 15px/1.15 var(--sans); cursor: pointer; transition: transform .16s var(--snap), background-color .12s, color .12s;
}
.chip:hover { transform: translateY(-2px); }
.chip:active { transform: translateY(1px); }
.chip[aria-pressed="true"] { background: var(--carbon); border-color: var(--carbon); color: var(--chalk); }
.cobalt .chip[aria-pressed="true"] { background: var(--chalk); border-color: var(--chalk); color: var(--cobalt); }

/* A sheet in the stack. Each one slides up over the last, which sinks back under it. */
.band { position: sticky; top: 0; overflow: clip; min-height: 100vh; min-height: 100svh; display: grid; align-content: center; padding: clamp(72px, 10vw, 112px) var(--edge); box-shadow: 0 -8px 0 var(--shadow); transform-origin: 50% 100%; }
.chalk { background: var(--chalk); }
.cobalt { background: var(--cobalt); color: var(--chalk); }
.ochre { background: var(--ochre); }
.stone { background: var(--stone); }
.wood { background-color: var(--wood); background-image: repeating-linear-gradient(92deg, rgba(20, 22, 25, .05) 0 2px, transparent 2px 11px, rgba(255, 255, 255, .05) 11px 13px, transparent 13px 31px); }
.off canvas, .off .float, .off .shape, .off .note, .off .carried { visibility: hidden; }
.shade { position: absolute; inset: 0; z-index: 9; background: var(--carbon); opacity: 0; pointer-events: none; }
.wrap { position: relative; z-index: 1; width: 100%; max-width: 1120px; margin: 0 auto; }
.split { display: grid; gap: 40px; align-items: center; }
.split > * { min-width: 0; }
.prose { display: grid; gap: 16px; max-width: 60ch; }
.float { position: absolute; top: 12%; right: -12%; width: min(70vw, 620px); height: auto; pointer-events: none; opacity: .09; will-change: transform; }
.float path { fill: currentColor; }
.chalk .float { color: var(--cobalt); }
.cobalt .float { color: var(--chalk); left: -14%; right: auto; }
.ochre .float { color: var(--carbon); }

/* Headings: words rise out of a fold, and an ink line writes itself underneath */
.w { display: inline-block; overflow: clip; overflow-clip-margin: .14em; padding-bottom: .12em; margin-bottom: -.12em; vertical-align: top; }
.w > span { display: inline-block; }
[data-rise] { position: relative; }
.js-rise .w > span { transform: translateY(140%) rotate(3deg); transition: transform .7s var(--stiff); transition-delay: calc(var(--i) * 55ms); }
.js-rise.in .w > span { transform: none; }
.scrawl { position: absolute; left: 0; top: calc(100% + 8px); width: min(260px, 60%); height: 22px; overflow: visible; pointer-events: none; }
.scrawl path { fill: none; stroke: var(--ink-line, var(--cobalt)); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .8s .55s var(--stiff); }
.in > .scrawl path { stroke-dashoffset: 0; }
.cobalt { --ink-line: var(--ochre); }
.ochre { --ink-line: var(--carbon); }
.prose h2 + p { margin-top: 18px; }

/* Cards land on the page like something put down */
.js-in[data-in] { opacity: 0; transform: translateY(46px) rotate(2.4deg) scale(.96); transition: transform .7s var(--snap), opacity .22s; }
.js-in[data-in].in { opacity: 1; transform: none; }
.card { --face: #fff; position: relative; isolation: isolate; color: var(--carbon); }
.card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--face); }
.back { position: absolute; inset: 0; z-index: -2; background: rgba(20, 22, 25, .2); transform: translate(7px, 9px); }

/* The pen tip that follows the writing */
.nib { position: absolute; left: 0; top: 0; width: 0; height: 0; opacity: 0; pointer-events: none; transition: opacity .12s; z-index: 4; }
.nib.on { opacity: 1; }
.nib::before { content: ""; position: absolute; left: -6px; bottom: 0; width: 12px; height: 54px; background: var(--carbon); clip-path: polygon(50% 100%, 12% 72%, 12% 0, 88% 0, 88% 72%); transform-origin: 50% 100%; transform: rotate(32deg); }
.nib.light::before { background: var(--chalk); }

/* 1. The hero */
.hero { height: 100vh; height: 100svh; min-height: 560px; padding: 0; display: block; background: var(--cobalt); color: var(--chalk); box-shadow: none; }
.hero > canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: pan-y; }
.under { position: absolute; inset: auto 0 0; padding: 24px var(--edge); pointer-events: none; }
.under .poster { font-size: clamp(38px, 10.5vw, 76px); max-width: 13ch; }

.sheet { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 20px var(--edge); overflow: hidden; background: var(--ochre); color: var(--carbon); box-shadow: 0 7px 0 var(--shadow); transition: transform .8s var(--stiff); }
.hero.lifted .sheet { transform: translateY(-77%) rotate(-1.1deg); }
.hero.hint:not(.lifted) .sheet { animation: nudge 1.5s var(--stiff); }
@keyframes nudge { 0%, 100% { transform: none; } 45%, 58% { transform: translateY(-11%) rotate(-.8deg); } }

.sheet > canvas#hero-top { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; touch-action: pan-y; cursor: crosshair; }
.shape { --size: min(96vw, 92vh); position: absolute; top: 3%; right: calc(var(--size) * -.3); width: var(--size); height: auto; overflow: visible; pointer-events: none; will-change: transform; }
.shape g path { fill: var(--chalk); }
.s0 { fill: rgba(20, 22, 25, .34) !important; transform: translate(9px, 12px); }
.s2 { fill: var(--cobalt) !important; transform: translate(-3.5%, 3.5%); }
.reveal { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw-on 1.25s .15s var(--stiff) forwards; }
@keyframes draw-on { to { stroke-dashoffset: 0; } }

.wordmark { position: relative; z-index: 2; display: block; width: max-content; pointer-events: none; animation: rise-in .5s .9s var(--stiff) backwards; }
.wordmark svg { display: block; height: 26px; width: auto; }
@keyframes rise-in { from { opacity: 0; transform: translateY(14px); } }
.hero-foot { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; pointer-events: none; }
.hero-foot .poster { font-size: clamp(42px, min(12.5vw, 10.5vh), 92px); max-width: 9ch; }
.hero-foot .w > span { animation: word-up .7s var(--stiff) backwards; }
.hero-foot .w:nth-child(1) > span { animation-delay: .7s; }
.hero-foot .w:nth-child(2) > span { animation-delay: .77s; }
.hero-foot .w:nth-child(3) > span { animation-delay: .84s; }
.hero-foot .w:nth-child(4) > span { animation-delay: .91s; }
.hero-foot .w:nth-child(5) > span { animation-delay: .98s; }
@keyframes word-up { from { transform: translateY(140%) rotate(3deg); } }
.hero-foot .act { pointer-events: auto; --act-back: var(--cobalt); animation: slam 0.45s 1.25s var(--snap) backwards; }
@keyframes slam { from { opacity: 0; transform: translateY(-16px) scale(1.12); } }

#hint { position: absolute; right: 6px; bottom: 118px; z-index: 2; width: 126px; height: 82px; pointer-events: none; transition: opacity .25s; }
.hero.lifted #hint { opacity: 0; }

.peel { position: absolute; right: 0; bottom: 0; z-index: 3; width: 116px; height: 116px; padding: 0; border: 0; background: none; color: var(--chalk); font: 600 17px/1 var(--sans); cursor: pointer; animation: peel-in .6s 1.3s var(--snap) backwards; transform-origin: 100% 100%; transition: transform .2s var(--snap); }
.peel:hover { transform: scale(1.1); }
@keyframes peel-in { from { transform: scale(0); } }
.peel i { position: absolute; inset: 0; background: var(--cobalt); clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.peel::after { content: ""; position: absolute; inset: 0; background: var(--chalk); clip-path: polygon(0 100%, 100% 0, 0 0); filter: drop-shadow(-2px -2px 0 rgba(20, 22, 25, .25)); pointer-events: none; }
.peel span { position: absolute; right: 14px; bottom: 16px; z-index: 1; white-space: nowrap; }

/* 2. Typing */
.page { display: flex; flex-direction: column; }
.page-in { position: relative; flex: 1; min-height: 280px; }
.page-in canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.lined .page-in { background-image: repeating-linear-gradient(transparent 0 42px, rgba(36, 87, 245, .2) 42px 44px); }
figcaption { padding: 10px 16px; font-size: 15px; color: var(--graphite); }
.typer { display: grid; gap: 10px; margin-top: 10px; }
.typer label { font-weight: 600; font-size: 16px; }
.typer input { width: 100%; min-height: 54px; padding: 8px 14px; border: 0; border-bottom: 4px solid var(--carbon); border-radius: 2px; background: var(--stone); color: var(--carbon); font: 500 20px/1.3 var(--sans); }
.typer input:focus-visible { outline-offset: 0; }
.typer .chips { margin-top: 2px; }
.wiping { opacity: 0; transition: opacity .22s; }

/* 3. Maths */
.board { display: grid; gap: 16px; margin-top: 28px; }
.strip { justify-self: start; min-height: 42px; padding: 8px 14px; background: var(--chalk); color: var(--carbon); font: 600 18px/1.4 var(--sans); }
.strip span { display: inline-block; white-space: pre; }
.strip span.hop { animation: letter-hop .4s var(--snap); }
@keyframes letter-hop { 45% { transform: translateY(-9px) rotate(-6deg); color: var(--cobalt); } }
.board-in { position: relative; height: clamp(230px, 36vh, 360px); }
.board-in canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* 4. The calculator */
.calc-stage { position: relative; display: grid; gap: 24px; margin-top: 28px; }
.calc-stage > * { min-width: 0; }
#calc-page .page-in { min-height: 220px; }
.calculator { --face: var(--chalk); display: grid; gap: 10px; align-self: start; width: min(100%, 340px); justify-self: center; padding: 14px; }
.lcd { display: grid; justify-items: end; align-content: end; min-height: 76px; padding: 8px 12px; background: var(--stone); overflow: hidden; }
.lcd-sum { min-height: 1.3em; font-size: 15px; color: var(--graphite); }
.lcd-now { font-size: 32px; font-weight: 800; line-height: 1.05; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.keys { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.key { --key: var(--stone); position: relative; isolation: isolate; min-height: 46px; border: 0; border-radius: 2px; background: none; color: var(--carbon); font: 700 19px/1 var(--sans); cursor: pointer; transition: transform .08s; }
.key::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 2px; background: var(--key); }
.key::after { content: ""; position: absolute; inset: 0; z-index: -2; border-radius: 2px; background: var(--carbon); transform: translateY(4px); transition: transform .08s; }
.key.op { --key: var(--cobalt); color: var(--chalk); }
.key.eq { --key: var(--ochre); }
.key:active, .key.down { transform: translateY(4px); }
.key:active::after, .key.down::after { transform: none; }
.slip { position: absolute; z-index: 8; left: 14px; right: 14px; top: 14px; min-height: 76px; border: 0; background: var(--carbon); color: var(--chalk); font: 800 32px/1 var(--sans); letter-spacing: -.02em; cursor: grab; touch-action: none; animation: slip-up .35s var(--snap); }
.slip.drag { cursor: grabbing; z-index: 40; }
@keyframes slip-up { from { transform: translateY(14px) rotate(-3deg); opacity: 0; } }

/* 5. Elements */
.slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; flex: 1; min-height: 280px; padding: 12px; background-image: radial-gradient(rgba(36, 87, 245, .3) 1.5px, transparent 2px); background-size: 19px 19px; }
.slot { display: grid; place-items: center; min-width: 0; }
.slot svg, .piece svg { width: min(100%, 92px); height: auto; overflow: visible; }
.slot path, .piece path { fill: none; stroke: var(--carbon); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.copy { animation: stamp .42s var(--snap) backwards; }
@keyframes stamp { from { opacity: 0; transform: scale(1.7) rotate(-9deg); } }
.copy.hop { animation: hop .5s var(--stiff); animation-delay: calc(var(--i) * 70ms); }
@keyframes hop { 40% { transform: translateY(-16px) rotate(-6deg) scale(1.08); } 75% { transform: translateY(2px) scale(.97); } }
.pieces { display: flex; gap: 10px; margin-top: 8px; }
.piece { flex: 1 1 0; display: grid; justify-items: center; gap: 4px; min-width: 0; padding: 10px 6px; border: 2px solid var(--carbon); border-radius: 2px; background: transparent; color: var(--carbon); font: 600 15px/1 var(--sans); cursor: pointer; transition: transform .16s var(--snap), background-color .12s; }
.piece svg { width: 52px; }
.piece:hover { transform: translateY(-3px) rotate(-1deg); }
.piece[aria-pressed="true"] { background: var(--stone); }
#change { justify-self: start; margin-top: 8px; --act-back: var(--ochre); }

/* 6. Moving things */
.app-frame { position: relative; isolation: isolate; aspect-ratio: 4 / 3; padding: 3%; border-radius: 10px; background: var(--carbon); touch-action: pan-y; }
.app-page { position: absolute; inset: 3%; border-radius: 3px; background: var(--chalk); background-image: repeating-linear-gradient(transparent 0 26px, rgba(36, 87, 245, .16) 26px 28px); }
.bar { position: absolute; left: 0; top: 0; z-index: 2; display: flex; gap: 6px; padding: 6px; border-radius: 3px; background: var(--ochre); box-shadow: 3px 4px 0 var(--shadow); cursor: grab; touch-action: none; transition: transform .45s var(--snap); }
.bar[data-shape="col"] { flex-direction: column; }
.bar b { display: block; width: 18px; height: 18px; border-radius: 50%; background: var(--carbon); }
.bar.b2 { background: var(--cobalt); }
.bar.b2 b { background: var(--chalk); }
.bar.b3 { background: var(--stone); }
.bar.b3 b { border-radius: 2px; background: var(--graphite); }
.bar.drag { z-index: 3; cursor: grabbing; box-shadow: 8px 10px 0 var(--shadow); transition: none; }

/* 7. Carrying */
.pin { height: 240vh; min-height: 240vh; padding: 0; display: block; align-content: start; }
.pin-stage { position: sticky; top: 0; display: grid; align-content: center; height: 100vh; height: 100svh; overflow: hidden; padding: 24px var(--edge); }
.carry-grid { display: grid; gap: 28px; align-items: center; }
.carry-grid > * { min-width: 0; }
.fan { position: relative; width: min(100%, 420px); aspect-ratio: 5 / 4; justify-self: center; }
.note { position: absolute; inset: 0; padding: 12px 16px; background: var(--chalk); box-shadow: 5px 6px 0 var(--shadow); font-size: 16px; will-change: transform; }
.note b { font-weight: 700; }
.note.n1 { background: #fff; }
.note.n2 { background: var(--ochre); transform: rotate(1.6deg); }
.note.n3 { background: var(--cobalt); color: var(--chalk); transform: rotate(-1.4deg); }
.void { position: absolute; left: 50%; top: 56%; width: 36%; aspect-ratio: 1; border-radius: 50%; background: var(--carbon); opacity: 0; transform: translate(-50%, -50%); }
.carried { position: absolute; left: 50%; top: 56%; z-index: 3; width: 36%; height: auto; overflow: visible; transform: translate(-50%, -50%); will-change: transform; }
.c-paper { fill: #fff; }
.c-ink { fill: none; stroke: var(--carbon); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }


/* 9. The tablet, scored down the middle so it folds open */
.folio { display: grid; perspective: 1600px; }
.f-left { position: relative; transform-style: preserve-3d; transform-origin: 50% 100%; will-change: transform; }
.f-face, .f-back { backface-visibility: hidden; -webkit-backface-visibility: hidden; background: rgba(247, 248, 250, .16); }
.f-face { position: relative; height: 100%; padding: clamp(24px, 5vw, 52px); }
.f-back { position: absolute; inset: 0; transform: rotateX(180deg); background: #9C7346; }
.f-right { display: grid; gap: 14px; padding: clamp(24px, 5vw, 52px); border-top: 3px solid rgba(20, 22, 25, .4); background: rgba(247, 248, 250, .1); }
.f-right p { max-width: 60ch; }
.folio .poster { font-size: clamp(34px, 6vw, 60px); }

/* 10. The invite */
#invite .poster { max-width: 13ch; }
.lead { margin-top: 38px; max-width: 46ch; }
.ask { display: grid; gap: 8px; margin-top: 28px; max-width: 560px; transform-origin: 50% 100%; }
.ask label { font-weight: 600; font-size: 16px; }
.ask-row { display: flex; flex-wrap: wrap; gap: 12px; }
.ask input[type="email"] { flex: 1 1 240px; min-width: 0; min-height: 48px; padding: 8px 12px; border: 0; border-radius: 2px; background: var(--chalk); color: var(--carbon); font: 400 18px/1.3 var(--sans); }
.trap { position: absolute; left: -9999px; }
.ask[hidden] { display: none; }
.ask.sent { animation: fold-away .7s var(--stiff) forwards; }
@keyframes fold-away { 50% { transform: perspective(700px) rotateX(-96deg); opacity: 1; } 100% { transform: perspective(700px) rotateX(-96deg) translateY(-160px); opacity: 0; } }
.status { min-height: 1.45em; margin-top: 12px; font-weight: 700; font-size: 18px; }
.status.stamped { animation: stamp .42s var(--snap); }
.already { margin-top: 18px; font-size: 16px; }
.bye { position: relative; width: min(100%, 460px); height: 110px; margin-top: 36px; }
.bye canvas { width: 100%; height: 100%; }

/* The small print */
.print { position: relative; z-index: 2; padding: clamp(48px, 8vw, 80px) var(--edge); font-size: 16px; box-shadow: 0 -8px 0 var(--shadow); }
.print h2 { font-size: 20px; font-weight: 800; letter-spacing: -.01em; }
.print ul { display: grid; gap: 6px; margin-top: 12px; max-width: 66ch; }
.links { display: flex; gap: 20px; margin-top: 20px; }

/* Paper tabs down the side, like the dividers in a ring binder */
.tabs { display: none; }
@media (min-width: 1100px) {
  .tabs { position: fixed; right: 0; top: 50%; z-index: 15; display: grid; gap: 4px; transform: translate(110%, -50%); transition: transform .45s var(--snap); }
  .tabs.on, .tabs:focus-within { transform: translate(0, -50%); }
  .tabs a { display: block; width: max-content; margin-left: auto; padding: 7px 8px 7px 12px; border-radius: 3px 0 0 3px; background: var(--carbon); color: var(--chalk); font: 600 14px/1 var(--sans); text-decoration: none; box-shadow: -3px 3px 0 var(--shadow); transition: transform .2s var(--snap), background-color .15s, color .15s; transform: translateX(calc(100% - 14px)); }
  .tabs a:nth-child(odd) { background: var(--ochre); color: var(--carbon); }
  .tabs a:nth-child(3n) { background: var(--chalk); color: var(--carbon); }
  .tabs a:hover, .tabs a:focus-visible { transform: none; }
  .tabs a[aria-current] { transform: translateX(calc(100% - 28px)); }
  .tabs a[aria-current]:hover, .tabs a[aria-current]:focus-visible { transform: none; }
}

/* The ink a mouse leaves, and the drop a tap leaves */
#trail { position: fixed; inset: 0; z-index: 20; width: 100%; height: 100%; pointer-events: none; }
.blot { position: fixed; z-index: 21; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; background: var(--cobalt); pointer-events: none; animation: blot .55s var(--stiff) forwards; }
@keyframes blot { from { transform: scale(.2); opacity: .9; } to { transform: scale(2.1); opacity: 0; } }

/* Plain pages: download and privacy */
.plain { background: var(--chalk); }
.plain-top { padding: 20px var(--edge); }
.plain-top a { display: block; width: max-content; }
.plain-main { padding: clamp(32px, 7vw, 72px) var(--edge) clamp(64px, 11vw, 128px); }
.plain-main .wrap { max-width: 760px; margin: 0; }
.plain-main .poster { font-size: clamp(38px, 8vw, 76px); }
.plain-main h2 { margin-top: 32px; font-size: 22px; font-weight: 800; letter-spacing: -.01em; }
.plain-main p, .plain-main ul { margin-top: 10px; max-width: 62ch; }
.plain-main ul { list-style: disc; padding-left: 22px; }
.plain-main .get { display: grid; max-width: none; margin-top: 32px; padding-left: 0; list-style: none; border-top: 2px solid var(--carbon); }
.get li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; min-height: 76px; padding: 14px 0; border-bottom: 2px solid var(--carbon); font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.missing { padding: 6px 10px; background: var(--ochre); font: 600 15px/1.2 var(--sans); }

@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; }
  .calc-stage { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 48px; align-items: center; }
  .carry-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; }
  .board { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); align-items: center; }
  .board .strip { grid-column: 1; grid-row: 1; align-self: end; }
  .board .chips { grid-column: 1; grid-row: 2; align-content: start; }
  .board-in { grid-column: 2; grid-row: 1 / span 2; height: clamp(280px, 44vh, 420px); }
  .folio { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
  .f-left { transform-origin: 100% 50%; }
  .f-back { transform: rotateY(180deg); }
  .f-right { border-top: 0; border-left: 3px solid rgba(20, 22, 25, .4); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { stroke-dashoffset: 0; }
}