/* Fonopop holding page. Tokens mirror packages/tokens (docs/18-design-system.md): Riso light, Blacklight dark. */
@font-face { font-family: "Archivo"; src: url("/assets/fonts/archivo-var-latin.woff") format("woff");
  font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap; }

/* ---------- themes ---------- */
:root {
  --bg: #F7F7F4; --surface: #FFFFFF; --fill: #EFF0F3; --fill-2: #E3E5EB;
  --ink: #16204F; --ink-2: #4A5689; --line: #E2E4EA; --line-strong: #C5CADB; --link: #0071B5;
  --overprint: multiply; --mis-blue: #0078BF; --chaos-blue: #0078BF;
  --ground: rgba(22, 32, 79, .22); --header: rgba(247, 247, 244, .9);
  --band: #14112B; --band-ink: #F1F0FF; --band-ink-2: #B7B3DA;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #14112B; --surface: #1C1838; --fill: #211C42; --fill-2: #312A63;
    --ink: #F1F0FF; --ink-2: #B7B3DA; --line: #35305C; --line-strong: #4D467E; --link: #4FB3F5;
    --overprint: screen; --mis-blue: #4FB3F5; --chaos-blue: #2F9BE8;
    --ground: rgba(3, 2, 14, .55); --header: rgba(20, 17, 43, .88);
    --band: #0D0B1F; --band-ink: #F1F0FF; --band-ink-2: #B7B3DA;
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.07'/%3E%3C/svg%3E");
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #14112B; --surface: #1C1838; --fill: #211C42; --fill-2: #312A63;
  --ink: #F1F0FF; --ink-2: #B7B3DA; --line: #35305C; --line-strong: #4D467E; --link: #4FB3F5;
  --overprint: screen; --mis-blue: #4FB3F5; --chaos-blue: #2F9BE8;
  --ground: rgba(3, 2, 14, .55); --header: rgba(20, 17, 43, .88);
  --band: #0D0B1F; --band-ink: #F1F0FF; --band-ink-2: #B7B3DA;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.07'/%3E%3C/svg%3E");
  color-scheme: dark;
}
/* the same in both themes: prints are paper, inks are inks, text on an ink fill is deep ink */
:root {
  --print: #FFFDF8; --print-line: #ECE9DF; --on-fill: #16204F;
  --pink: #FF48B0; --yellow: #FFE800; --blue: #0078BF; --green: #00A95C; --orange: #FF6C2F;
  --r-sm: 8px; --r-md: 12px; --r-lg: 20px;
  --page-x: 16px;
  --font: "Archivo", "Noto Sans", system-ui, sans-serif;
  --cord: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='20' viewBox='0 0 24 20'%3E%3Cpath d='M-24.0 2.8 L-24.4 2.8 L-24.7 3.0 L-25.0 3.2 L-25.3 3.4 L-25.6 3.8 L-25.8 4.2 L-26.0 4.6 L-26.2 5.2 L-26.2 5.8 L-26.2 6.4 L-26.2 7.1 L-26.0 7.8 L-25.8 8.5 L-25.6 9.2 L-25.2 10.0 L-24.8 10.8 L-24.2 11.5 L-23.6 12.2 L-23.0 12.9 L-22.2 13.6 L-21.4 14.2 L-20.6 14.8 L-19.6 15.4 L-18.6 15.8 L-17.6 16.2 L-16.5 16.6 L-15.4 16.8 L-14.3 17.0 L-13.2 17.2 L-12.0 17.2 L-10.8 17.2 L-9.7 17.0 L-8.6 16.8 L-7.5 16.6 L-6.4 16.2 L-5.4 15.8 L-4.4 15.4 L-3.4 14.8 L-2.6 14.2 L-1.8 13.6 L-1.0 12.9 L-0.4 12.2 L0.2 11.5 L0.8 10.8 L1.2 10.0 L1.6 9.2 L1.8 8.5 L2.0 7.8 L2.2 7.1 L2.2 6.4 L2.2 5.8 L2.2 5.2 L2.0 4.6 L1.8 4.2 L1.6 3.8 L1.3 3.4 L1.0 3.2 L0.7 3.0 L0.4 2.8 L0.0 2.8 L-0.4 2.8 L-0.7 3.0 L-1.0 3.2 L-1.3 3.4 L-1.6 3.8 L-1.8 4.2 L-2.0 4.6 L-2.2 5.2 L-2.2 5.8 L-2.2 6.4 L-2.2 7.1 L-2.0 7.8 L-1.8 8.5 L-1.6 9.2 L-1.2 10.0 L-0.8 10.8 L-0.2 11.5 L0.4 12.2 L1.0 12.9 L1.8 13.6 L2.6 14.2 L3.4 14.8 L4.4 15.4 L5.4 15.8 L6.4 16.2 L7.5 16.6 L8.6 16.8 L9.7 17.0 L10.8 17.2 L12.0 17.2 L13.2 17.2 L14.3 17.0 L15.4 16.8 L16.5 16.6 L17.6 16.2 L18.6 15.8 L19.6 15.4 L20.6 14.8 L21.4 14.2 L22.2 13.6 L23.0 12.9 L23.6 12.2 L24.2 11.5 L24.8 10.8 L25.2 10.0 L25.6 9.2 L25.8 8.5 L26.0 7.8 L26.2 7.1 L26.2 6.4 L26.2 5.8 L26.2 5.2 L26.0 4.6 L25.8 4.2 L25.6 3.8 L25.3 3.4 L25.0 3.2 L24.7 3.0 L24.4 2.8 L24.0 2.8 L23.6 2.8 L23.3 3.0 L23.0 3.2 L22.7 3.4 L22.4 3.8 L22.2 4.2 L22.0 4.6 L21.8 5.2 L21.8 5.8 L21.8 6.4 L21.8 7.1 L22.0 7.8 L22.2 8.5 L22.4 9.2 L22.8 10.0 L23.2 10.8 L23.8 11.5 L24.4 12.2 L25.0 12.9 L25.8 13.6 L26.6 14.2 L27.4 14.8 L28.4 15.4 L29.4 15.8 L30.4 16.2 L31.5 16.6 L32.6 16.8 L33.7 17.0 L34.8 17.2 L36.0 17.2 L37.2 17.2 L38.3 17.0 L39.4 16.8 L40.5 16.6 L41.6 16.2 L42.6 15.8 L43.6 15.4 L44.6 14.8 L45.4 14.2 L46.2 13.6 L47.0 12.9 L47.6 12.2 L48.2 11.5 L48.8 10.8 L49.2 10.0 L49.6 9.2 L49.8 8.5 L50.0 7.8 L50.2 7.1 L50.2 6.4 L50.2 5.8 L50.2 5.2 L50.0 4.6 L49.8 4.2 L49.6 3.8 L49.3 3.4 L49.0 3.2 L48.7 3.0 L48.4 2.8 L48.0 2.8' fill='none' stroke='%23FF48B0' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
@media (min-width: 640px) { :root { --page-x: 28px; } }
@media (min-width: 1024px) { :root { --page-x: 40px; } }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--bg); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; font-family: var(--font); font-size: 16px; line-height: 24px; font-weight: 450; color: var(--ink);
  background: var(--bg) var(--grain); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden;
  transition: background-color 240ms ease, color 240ms ease; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
p, h1, h2, h3, ol, ul, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; border-radius: 6px; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.wrap { width: 100%; max-width: calc(1200px + var(--page-x) * 2); margin: 0 auto; padding: 0 var(--page-x); }
.skip { position: absolute; left: 8px; top: -60px; z-index: 200; padding: 10px 14px; border-radius: var(--r-md); background: var(--ink); color: var(--bg); font-weight: 650; text-decoration: none; }
.skip:focus { top: 8px; }

/* ---------- logo: a speech bubble with eyes, its blue outline printed out of register ---------- */
.logo { display: inline-flex; align-items: center; gap: 9px; color: var(--ink); text-decoration: none; line-height: 1; }
.logo__mark { width: 38px; height: 38px; flex: none; overflow: visible; }
.logo__word { width: auto; height: 24px; margin-top: 3px; overflow: visible; }
.mk-body { fill: var(--pink); }
.mk-line { fill: none; stroke: var(--mis-blue); stroke-width: 3.2; stroke-linejoin: round; mix-blend-mode: var(--overprint); }
.mk-eye { fill: #FFFFFF; }
.mk-pupil { fill: var(--on-fill); }
.logo--sm .logo__mark { width: 30px; height: 30px; }
.logo--sm .logo__word { height: 19px; }
@media (prefers-reduced-motion: no-preference) {
  .logo .mk-pupils { transition: transform 260ms cubic-bezier(.2,.8,.2,1); }
  .logo:hover .mk-pupils { transform: translate(1.6px, -1.2px); }
}

/* ---------- buttons: pills; only the primary carries the misregistered outline ---------- */
.btn { --fill: var(--pink); --text: var(--on-fill); --border: transparent; --mx: 3px; --my: 3px;
  position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 24px; border: 1.5px solid var(--border); border-radius: 999px; background: var(--fill); color: var(--text);
  font: inherit; font-size: 16px; font-weight: 650; font-stretch: 102%; line-height: 1; white-space: nowrap; text-decoration: none; cursor: pointer;
  transition: transform 160ms cubic-bezier(.2,.8,.2,1), background-color 160ms; -webkit-tap-highlight-color: transparent; }
.btn--primary::after { content: ""; position: absolute; inset: -1.5px; z-index: -1; border-radius: inherit; border: 2px solid var(--mis-blue);
  transform: translate(var(--mx), var(--my)); mix-blend-mode: var(--overprint); transition: transform 160ms cubic-bezier(.2,.8,.2,1); }
.btn--primary:hover { --mx: 5px; --my: 5px; }
.btn:active { transform: scale(.98); transition-duration: 90ms; }
.btn--primary:active::after { transform: translate(0, 0); transition-duration: 90ms; }
.btn--outline { --fill: transparent; --text: var(--ink); --border: var(--line-strong); }
.btn--outline:hover { --fill: var(--fill); }
.btn--sm { height: 40px; padding: 0 18px; font-size: 15px; }
.btn--lg { height: 56px; padding: 0 30px; font-size: 17px; }

/* ---------- header ---------- */
.top { position: sticky; top: 0; z-index: 30; border-bottom: 1px solid transparent; transition: border-color 200ms, background-color 200ms; }
.top.is-scrolled { border-bottom-color: var(--line); background: var(--header); -webkit-backdrop-filter: saturate(1.2) blur(10px); backdrop-filter: saturate(1.2) blur(10px); }
.top__in { display: flex; align-items: center; gap: 8px; height: 68px; }
.top__nav { display: none; margin-left: auto; gap: 4px; }
.top__nav a { padding: 8px 14px; border-radius: 999px; font-weight: 650; font-size: 15px; color: var(--ink-2); text-decoration: none; }
.top__nav a:hover { background: var(--fill); color: var(--ink); }
.theme { display: grid; place-items: center; width: 40px; height: 40px; margin-left: auto; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--ink); cursor: pointer; }
.theme:hover { background: var(--fill); }
.theme svg { width: 20px; height: 20px; }
.theme__sun { display: none; }
:root[data-theme="dark"] .theme__sun { display: block; }
:root[data-theme="dark"] .theme__moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme__sun { display: block; }
  :root:not([data-theme="light"]) .theme__moon { display: none; }
}
.top__cta { margin-left: 4px; }
@media (min-width: 720px) { .top__nav { display: flex; } .theme { margin-left: 4px; } .top__in { height: 76px; } }

/* ---------- hero ---------- */
.hero { padding: 48px 0 40px; overflow: hidden; }
.hero__grid { display: grid; gap: 12px; align-items: center; }
.hero__title { font-size: clamp(38px, calc((100vw - 32px) / 7.7), 72px); line-height: .94; font-weight: 900; font-stretch: 120%; letter-spacing: -0.035em; white-space: nowrap; }
.hero__title .mis { display: block; }
.mis { position: relative; display: inline-block; }
.mis__ink { position: relative; }
.mis__pink { position: absolute; inset: 0; color: var(--pink); mix-blend-mode: var(--overprint); pointer-events: none; user-select: none;
  transform: translate(-0.045em, -0.032em); white-space: nowrap; }
.lede { margin-top: 24px; max-width: 34em; font-size: 18px; line-height: 28px; color: var(--ink-2); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero__note { display: flex; align-items: center; gap: 12px; margin-top: 28px; font-size: 14px; line-height: 20px; color: var(--ink-2); }
.stack { display: flex; flex: none; }
.stack img { width: 34px; height: 34px; border-radius: 50%; background: var(--surface); box-shadow: 0 0 0 2px var(--bg); object-fit: cover; }
.stack img + img { margin-left: -9px; }
.stack--sm img { width: 30px; height: 30px; box-shadow: 0 0 0 2px var(--fill); }

/* the crew: three mutants on the paper */
.crew { position: relative; width: min(100%, 560px); margin: 16px auto 0; aspect-ratio: 1 / .78; container-type: inline-size; }
.crew__m { position: absolute; height: auto; user-select: none; -webkit-user-drag: none; }
.crew__m--p { width: 50%; left: 25%; bottom: 7%; z-index: 3; --tilt: -3deg; --d: 0s; }
.crew__m--y { width: 37%; left: 4%; bottom: 23%; z-index: 2; --tilt: -9deg; --d: -1.8s; }
.crew__m--g { width: 35%; right: 3%; bottom: 25%; z-index: 2; --tilt: 8deg; --d: -3.4s; }
.crew__m { transform: rotate(var(--tilt)); }
.crew__m--g { transform: scaleX(-1) rotate(var(--tilt)); }
.crew__shadow { position: absolute; height: 5%; border-radius: 50%; background: radial-gradient(closest-side, var(--ground), transparent); }
.crew__shadow--p { width: 40%; left: 30%; bottom: 4%; }
.crew__shadow--y { width: 28%; left: 8%; bottom: 21%; }
.crew__shadow--g { width: 26%; right: 7%; bottom: 23%; }
.bubble { position: absolute; z-index: 4; padding: .55em .9em .6em; border-radius: 999px; background: var(--surface); border: 1px solid var(--line);
  font-size: clamp(13px, 3.1cqw, 17px); font-weight: 750; font-stretch: 104%; line-height: 1.1; white-space: nowrap; color: var(--ink); }
.bubble::after { content: ""; position: absolute; width: 12px; height: 12px; background: var(--surface); border: 1px solid var(--line); border-top: 0; border-left: 0; }
.bubble--1 { left: 8%; top: 3%; transform: rotate(-4deg); background: var(--yellow); border-color: var(--yellow); color: var(--on-fill); }
.bubble--1::after { left: 26%; bottom: -6px; transform: rotate(45deg); background: var(--yellow); border-color: var(--yellow); }
.bubble--2 { right: 2%; top: 12%; transform: rotate(3deg); }
.bubble--2::after { right: 30%; bottom: -6px; transform: rotate(45deg); }

@media (min-width: 640px) { .hero { padding: 72px 0 48px; } }
@media (min-width: 1024px) {
  .hero { padding: 96px 0 56px; }
  .hero__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 24px; }
  .hero__title { font-size: clamp(60px, 6.25vw, 92px); }
  .crew { margin: 0 0 0 auto; }
}

/* ---------- the reveal: one finished chain, links joined by a phone cord ---------- */
.reveal { position: relative; margin-top: 48px; padding: 22px 0 22px; border-radius: var(--r-lg); background: var(--fill); }
.reveal__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; padding: 0 20px; }
.reveal__who { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0; }
@media (min-width: 640px) { .reveal__who { flex-direction: row; align-items: center; gap: 14px; } }
.reveal__title { font-size: 24px; line-height: 28px; font-weight: 850; font-stretch: 112%; letter-spacing: -0.02em; }
.reveal__meta { margin-top: 2px; font-size: 14px; line-height: 20px; color: var(--ink-2); }

.chaos { display: flex; align-items: center; gap: 16px; }
.chaos__num { position: relative; flex: none; width: 2.05em; height: 56px; font-size: 60px; line-height: 56px; font-weight: 900; font-stretch: 62%; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.chaos__num span { position: absolute; left: 0; top: 0; mix-blend-mode: var(--overprint); }
.chaos__b { color: var(--chaos-blue); }
.chaos__p { color: var(--pink); transform: translate(9px, -3px); }
.chaos__side { width: 190px; }
.chaos__bar { display: block; height: 8px; border-radius: 99px; background: var(--fill-2); overflow: hidden; }
.chaos__bar span { display: block; width: 92%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--chaos-blue), var(--pink)); }
.chaos__note { margin-top: 8px; font-size: 13px; line-height: 18px; color: var(--ink-2); }

.reveal__track { position: relative; margin-top: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 20px; scrollbar-width: none; }
.reveal__track::-webkit-scrollbar { display: none; }
.strip { position: relative; display: flex; gap: 34px; width: max-content; padding: 18px 20px 22px; }
/* the cord: drawn behind the links, so it only shows in the gaps between them */
.strip::before { content: ""; position: absolute; z-index: 0; left: 70px; right: 70px; top: 38%; height: 20px;
  background: var(--cord) repeat-x 0 0 / 24px 20px; }
.tile { position: relative; z-index: 1; flex: 0 0 172px; scroll-snap-align: start; padding: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  transform: translateY(var(--y)) rotate(var(--r)); transition: transform 240ms cubic-bezier(.2,.8,.2,1); }
.tile:hover { transform: translateY(0) rotate(0); }
.tile:nth-child(1) { --r: -1.5deg; --y: 0px; --i: 0; }
.tile:nth-child(2) { --r: 1.5deg; --y: 8px; --i: 1; }
.tile:nth-child(3) { --r: -3deg; --y: -4px; --i: 2; }
.tile:nth-child(4) { --r: 4deg; --y: 12px; --i: 3; }
.tile:nth-child(5) { --r: -5.5deg; --y: 2px; --i: 4; }
.tile__n { position: absolute; z-index: 2; top: -10px; left: -8px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--line); color: var(--ink); font-size: 13px; font-weight: 750; font-variant-numeric: tabular-nums; }
.print { position: relative; display: grid; place-items: center; aspect-ratio: 1; padding: 12px; overflow: hidden;
  background: var(--print); border-radius: var(--r-sm); border: 1px solid var(--print-line); container-type: inline-size; color: var(--on-fill); }
.doodle { width: 92%; height: 92%; }
.print--caption { place-items: end start; padding: 14px; }
.print--caption p { font-size: 14.5cqw; line-height: 1.04; font-weight: 850; letter-spacing: -0.02em; text-wrap: balance; }
.quote { position: absolute; top: 4cqw; left: 9cqw; font-size: 34cqw; line-height: 1; font-weight: 900; font-stretch: 70%; }
.quote span { position: absolute; top: 0; left: 0; mix-blend-mode: multiply; }
.quote span:first-child { color: var(--blue); }
.quote span:last-child { color: var(--pink); transform: translate(-.05em, -.04em); }
.tile__meta { display: flex; align-items: center; gap: 6px; padding: 8px 2px 1px; font-size: 13px; line-height: 18px; font-weight: 650; color: var(--ink-2); }
.tile__meta img { width: 22px; height: 22px; border-radius: 50%; background: var(--fill); }
.fmt { display: grid; place-items: center; width: 22px; height: 22px; margin-left: auto; border-radius: 6px; color: var(--on-fill); font-size: 11px; font-weight: 850; }
.fmt svg { width: 14px; height: 14px; }
.fmt--write { background: var(--green); }
.fmt--draw { background: var(--yellow); }
.sticker { position: absolute; z-index: 2; top: 16px; right: 14px; padding: 5px 10px; border-radius: 6px; background: var(--yellow); color: var(--on-fill);
  font-size: 13px; font-weight: 850; line-height: 16px; transform: rotate(5deg); }

.reveal__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 32px; margin: 4px 20px 0; padding-top: 16px; border-top: 1px solid var(--line); }
.reveal__fact { display: flex; align-items: center; gap: 10px; font-size: 14px; line-height: 20px; color: var(--ink); }
.reveal__fact img { width: 26px; height: auto; flex: none; }
.reveal__fact strong { font-weight: 750; }
.reveal__fact--quiet { display: block; color: var(--ink-2); }
.reveal__fact--quiet strong { color: var(--ink); }

@media (min-width: 1024px) {
  .reveal { margin-top: 64px; padding: 30px 0 26px; }
  .reveal__head, .reveal__foot { padding-left: 32px; padding-right: 32px; }
  .reveal__foot { margin: 6px 32px 0; padding-left: 0; padding-right: 0; }
  .reveal__title { font-size: 28px; line-height: 32px; }
  .reveal__track { margin-top: 24px; overflow: visible; }
  .strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 40px; width: auto; padding: 18px 32px 26px; }
  .strip::before { left: 12%; right: 12%; }
  .tile { flex: none; }
  .chaos__num { height: 64px; font-size: 68px; line-height: 64px; }
}

/* ---------- sections ---------- */
.section { padding: 64px 0; }
.section--tight { padding-top: 8px; }
.h2 { font-size: 34px; line-height: 38px; font-weight: 850; font-stretch: 112%; letter-spacing: -0.025em; }
.h3 { font-size: 20px; line-height: 26px; font-weight: 750; font-stretch: 104%; letter-spacing: -0.01em; }
.section__lede { margin-top: 12px; max-width: 36em; font-size: 18px; line-height: 28px; color: var(--ink-2); }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); }
@media (min-width: 640px) { .section { padding: 96px 0; } .section--tight { padding-top: 8px; } .h2 { font-size: 44px; line-height: 48px; } }

.steps { display: grid; gap: 16px; margin-top: 36px; }
.step { position: relative; padding: 24px 24px 28px; }
.step__obj { width: auto; height: 120px; margin: 0 0 18px; }
.step__n { position: absolute; top: 20px; right: 20px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--fill); font-weight: 800; font-variant-numeric: tabular-nums; }
.step p { margin-top: 8px; color: var(--ink-2); }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .step { padding: 28px 28px 32px; } .step__obj { height: 140px; } }

.feats { display: grid; gap: 28px; margin-top: 36px; }
.feat { display: grid; grid-template-columns: 76px 1fr; gap: 18px; align-items: start; align-content: start; }
.feat img { width: 76px; height: 76px; object-fit: contain; object-position: left bottom; }
.feat p { margin-top: 6px; color: var(--ink-2); }
@media (min-width: 900px) { .feats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; } .feat { grid-template-columns: 1fr; gap: 16px; } .feat img { width: 104px; height: 96px; } }

.safety { display: grid; gap: 32px; }
.rules { display: grid; border-top: 1px solid var(--line); }
.rules li { display: grid; grid-template-columns: 14px 1fr; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); color: var(--ink-2); }
.rules strong { color: var(--ink); font-weight: 750; }
.rules__dot { width: 12px; height: 12px; margin-top: 6px; border-radius: 3px; background: var(--green); }
.rules li:nth-child(2) .rules__dot { background: var(--blue); }
.rules li:nth-child(3) .rules__dot { background: var(--yellow); }
.rules li:nth-child(4) .rules__dot { background: var(--pink); }
@media (min-width: 900px) { .safety { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 64px; align-items: start; } }

/* ---------- the one band: call to action ---------- */
.cta { position: relative; isolation: isolate; overflow: hidden; background: var(--band) var(--grain); color: var(--band-ink); border-block: 1px solid var(--line); }
.cta__in { display: grid; gap: 24px; padding-top: 72px; }
.cta__title { font-size: 40px; line-height: 42px; font-weight: 900; font-stretch: 116%; letter-spacing: -0.03em; max-width: 12em; }
.cta__copy p { margin-top: 16px; max-width: 30em; font-size: 18px; line-height: 28px; color: var(--band-ink-2); }
.cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 30px; }
.cta .btn--primary::after { border-color: #4FB3F5; mix-blend-mode: screen; }
.cta__mail { font-weight: 650; color: var(--band-ink); text-underline-offset: 4px; }
.cta__crew { position: relative; height: 200px; margin: 8px auto 0; width: min(100%, 420px); }
.cta__m { position: absolute; bottom: -22px; height: auto; }
.cta__m--2 { width: 46%; left: 27%; z-index: 2; bottom: -30px; }
.cta__m--1 { width: 36%; left: 0; transform: rotate(-9deg); }
.cta__m--3 { width: 36%; right: 0; transform: rotate(9deg); }
@media (min-width: 640px) { .cta__title { font-size: 56px; line-height: 56px; } }
@media (min-width: 1024px) {
  .cta__in { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); align-items: end; padding-top: 96px; }
  .cta__copy { padding-bottom: 96px; }
  .cta__crew { height: 290px; width: min(100%, 470px); margin-right: 0; }
}

/* ---------- footer ---------- */
.foot { padding: 36px 0 44px; }
.foot__in { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
.foot__meta { font-size: 14px; line-height: 20px; color: var(--ink-2); }
.foot__links { display: flex; gap: 20px; margin-left: auto; }
.foot__links a { color: var(--ink); font-weight: 650; text-underline-offset: 3px; }
@media (max-width: 639px) { .foot__links { margin-left: 0; } }

/* ---------- 404 ---------- */
.lost { min-height: 100vh; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 16px; padding-top: 40px; padding-bottom: 40px; }
.lost img { width: 160px; height: auto; margin-bottom: 8px; transform: rotate(-8deg); }
.lost .btn { margin-top: 12px; }

/* ---------- motion: one entrance for the chain, the crew floats; all off with reduced motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  .crew__m { animation: float 5.6s ease-in-out var(--d) infinite alternate; }
  .crew__m--g { animation-name: float-flip; }
  @keyframes float { from { transform: translateY(0) rotate(var(--tilt)); } to { transform: translateY(-5%) rotate(calc(var(--tilt) + 3deg)); } }
  @keyframes float-flip { from { transform: scaleX(-1) translateY(0) rotate(var(--tilt)); } to { transform: scaleX(-1) translateY(-5%) rotate(calc(var(--tilt) + 3deg)); } }
  .crew__shadow { animation: shadow 5.6s ease-in-out infinite alternate; }
  .crew__shadow--y { animation-delay: -1.8s; } .crew__shadow--g { animation-delay: -3.4s; }
  @keyframes shadow { to { transform: scaleX(.8); opacity: .65; } }
  .mis__pink { animation: drift 5.5s ease-in-out infinite alternate; }
  @keyframes drift { to { transform: translate(-0.075em, -0.012em); } }

  .js .reveal .tile { opacity: 0; }
  .js .reveal .strip::before { clip-path: inset(0 100% 0 0); }
  .js .reveal .chaos__p { transform: translate(0, 0); }
  .js .reveal .chaos__bar span { width: 0; }
  .js .reveal.is-in .tile { animation: deal 620ms cubic-bezier(.2,.8,.2,1) calc(var(--i) * 150ms) both; }
  .js .reveal.is-in .strip::before { animation: cord 1100ms cubic-bezier(.45,.05,.3,1) 120ms both; }
  .js .reveal.is-in .chaos__p { animation: separate 1.2s cubic-bezier(.2,.8,.2,1) 900ms both; }
  .js .reveal.is-in .chaos__bar span { animation: bar 1.2s cubic-bezier(.2,.8,.2,1) 900ms both; }
  @keyframes deal { from { opacity: 0; transform: translate(-28px, 18px) rotate(0deg); } to { opacity: 1; transform: translateY(var(--y)) rotate(var(--r)); } }
  @keyframes cord { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
  @keyframes separate { from { transform: translate(0, 0); } to { transform: translate(9px, -3px); } }
  @keyframes bar { from { width: 0; } to { width: 92%; } }
}