/* Blind Draft site. Palette and textures come from the app (Theme.swift) and its App Store artwork:
   cream paper base, clay and olive paper bands, sage, ink and forest sections, joined by torn paper edges.
   One designed palette for every viewer; the bands carry the contrast. Each band redefines the colour tokens
   so components inside it adapt. Fonts are self-hosted (latin subsets). */

@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("/assets/fonts/bricolage-grotesque.woff2") format("woff2"); }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("/assets/fonts/geist.woff2") format("woff2"); }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 400 500; font-display: swap; src: url("/assets/fonts/geist-mono.woff2") format("woff2"); }
@font-face { font-family: "Patrick Hand"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/patrick-hand.woff2") format("woff2"); }

:root {
  --bg: #f4ede0; --surface: #fbf6ec; --raised: #fffcf5; --ink: #231e17; --ink-2: #5c5244; --muted: #85796a; --line: #ddd1bb;
  --forest: #2e3925; --forest-2: #3d4a31; --on-forest: #eef0e6; --on-forest-2: rgba(238, 240, 230, 0.75); --mint: #8fb4a1;
  --accent: #b45b39; --accent-soft: rgba(180, 91, 57, 0.1);
  --btn: #2e3925; --btn-hover: #3d4a31; --btn-ink: #eef0e6;
  --shadow: 0 1px 0 rgba(35, 30, 23, 0.04), 0 24px 48px -28px rgba(60, 45, 25, 0.35);
  --sage-bg: #dfe5d5; --olive: #74745a; --clay: #9f452b; --cream: #e6d9c2; --cream-ink: #2a2419; --cream-line: rgba(120, 100, 70, 0.16);
  --footer-bg: #1d1b16;
  --display: "Bricolage Grotesque", "Avenir Next", system-ui, sans-serif;
  --body: "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", monospace;
  --hand: "Noteworthy", "Patrick Hand", cursive;
  --torn: polygon(0.00% 21.1px, 1.56% 7.2px, 3.13% 4.5px, 4.69% 6.2px, 6.25% 13.6px, 7.81% 5.7px, 9.38% 7.6px, 10.94% 17.6px, 12.50% 11.7px, 14.06% 14.8px, 15.63% 16.3px, 17.19% 10.3px, 18.75% 7.2px, 20.31% 9.3px, 21.88% 15.1px, 23.44% 6.6px, 25.00% 14.4px, 26.56% 4.6px, 28.13% 13.9px, 29.69% 3.5px, 31.25% 7.4px, 32.81% 14.6px, 34.38% 11.3px, 35.94% 12.2px, 37.50% 13.3px, 39.06% 8.2px, 40.63% 14.7px, 42.19% 3.5px, 43.75% 7.9px, 45.31% 15.1px, 46.88% 4.2px, 48.44% 13.9px, 50.00% 11.9px, 51.56% 15.0px, 53.13% 8.2px, 54.69% 21.6px, 56.25% 11.4px, 57.81% 12.4px, 59.38% 7.2px, 60.94% 15.4px, 62.50% 13.8px, 64.06% 14.4px, 65.63% 16.7px, 67.19% 13.4px, 68.75% 6.9px, 70.31% 5.9px, 71.88% 10.0px, 73.44% 6.1px, 75.00% 8.3px, 76.56% 18.9px, 78.13% 8.7px, 79.69% 5.5px, 81.25% 12.6px, 82.81% 13.1px, 84.38% 16.0px, 85.94% 3.5px, 87.50% 14.8px, 89.06% 8.0px, 90.63% 14.6px, 92.19% 7.8px, 93.75% 3.9px, 95.31% 9.4px, 96.88% 14.7px, 98.44% 11.5px, 100.00% 4.1px, 100% 100%, 0% 100%);
  --torn-b: polygon(0% 0%, 100% 0%, 100.00% calc(100% - 4.1px), 98.44% calc(100% - 11.5px), 96.88% calc(100% - 14.7px), 95.31% calc(100% - 9.4px), 93.75% calc(100% - 3.9px), 92.19% calc(100% - 7.8px), 90.63% calc(100% - 14.6px), 89.06% calc(100% - 8.0px), 87.50% calc(100% - 14.8px), 85.94% calc(100% - 3.5px), 84.38% calc(100% - 16.0px), 82.81% calc(100% - 13.1px), 81.25% calc(100% - 12.6px), 79.69% calc(100% - 5.5px), 78.13% calc(100% - 8.7px), 76.56% calc(100% - 18.9px), 75.00% calc(100% - 8.3px), 73.44% calc(100% - 6.1px), 71.88% calc(100% - 10.0px), 70.31% calc(100% - 5.9px), 68.75% calc(100% - 6.9px), 67.19% calc(100% - 13.4px), 65.63% calc(100% - 16.7px), 64.06% calc(100% - 14.4px), 62.50% calc(100% - 13.8px), 60.94% calc(100% - 15.4px), 59.38% calc(100% - 7.2px), 57.81% calc(100% - 12.4px), 56.25% calc(100% - 11.4px), 54.69% calc(100% - 21.6px), 53.13% calc(100% - 8.2px), 51.56% calc(100% - 15.0px), 50.00% calc(100% - 11.9px), 48.44% calc(100% - 13.9px), 46.88% calc(100% - 4.2px), 45.31% calc(100% - 15.1px), 43.75% calc(100% - 7.9px), 42.19% calc(100% - 3.5px), 40.63% calc(100% - 14.7px), 39.06% calc(100% - 8.2px), 37.50% calc(100% - 13.3px), 35.94% calc(100% - 12.2px), 34.38% calc(100% - 11.3px), 32.81% calc(100% - 14.6px), 31.25% calc(100% - 7.4px), 29.69% calc(100% - 3.5px), 28.13% calc(100% - 13.9px), 26.56% calc(100% - 4.6px), 25.00% calc(100% - 14.4px), 23.44% calc(100% - 6.6px), 21.88% calc(100% - 15.1px), 20.31% calc(100% - 9.3px), 18.75% calc(100% - 7.2px), 17.19% calc(100% - 10.3px), 15.63% calc(100% - 16.3px), 14.06% calc(100% - 14.8px), 12.50% calc(100% - 11.7px), 10.94% calc(100% - 17.6px), 9.38% calc(100% - 7.6px), 7.81% calc(100% - 5.7px), 6.25% calc(100% - 13.6px), 4.69% calc(100% - 6.2px), 3.13% calc(100% - 4.5px), 1.56% calc(100% - 7.2px), 0.00% calc(100% - 21.1px));
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.6 var(--body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 600; letter-spacing: -0.025em; text-wrap: balance; margin: 0; }
p { margin: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; }
img { max-width: 100%; height: auto; display: block; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
[hidden] { display: none !important; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 16px; top: 8px; z-index: 50; background: var(--raised); padding: 8px 12px; }

.wrap { max-width: 1200px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
@media (min-width: 760px) { .wrap { padding-left: max(32px, env(safe-area-inset-left, 0px)); padding-right: max(32px, env(safe-area-inset-right, 0px)); } }
.section { padding-block: 112px 0; }
@media (max-width: 759px) { .section { padding-block: 80px 0; } }
.eyebrow { font: 500 0.75rem/1.2 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin-bottom: 18px; }
.h2 { font-size: clamp(2rem, 4vw, 3.1rem); line-height: 1.06; }
.lead { font-size: 1.15rem; color: var(--ink-2); max-width: 54ch; margin-top: 18px; }
.link-arrow { font-weight: 600; text-decoration: none; color: var(--ink); display: inline-flex; gap: 8px; align-items: center; }
.link-arrow span { transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1); }
.link-arrow:hover span { transform: translateX(4px); }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; border-radius: 999px; border: 0; background: var(--btn); color: var(--btn-ink); font: 600 1rem var(--body); text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), background 0.2s; }
.btn:hover { background: var(--btn-hover); color: var(--btn-ink); }
.btn:active { transform: translateY(1px) scale(0.99); }
.btn-primary { background: var(--btn); color: var(--btn-ink); }
.btn-mint, .btn-mint:hover { color: #14180f; }
.btn-mint { background: var(--mint); }
.btn-mint:hover { background: #a3c4b2; }
.btn-cream, .btn-cream:hover { color: #2b1d14; }
.btn-cream { background: #fbf3e4; }
.btn-cream:hover { background: #fff8ec; }
.btn-ghost, .btn-ghost:hover { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn-ghost:hover { box-shadow: inset 0 0 0 1.5px var(--ink-2); }
.btn-sm, .btn-small { min-height: 40px; padding: 0 18px; font-size: 0.92rem; }
.btn-large { min-height: 56px; padding: 0 30px; font-size: 1.05rem; }
.btn .apple { width: 1.15em; height: 1.15em; fill: currentColor; margin-top: -0.15em; flex: none; }
.btn-sm .apple { width: 1.05em; height: 1.05em; }

/* ---------- Paper textures (cut from the App Store artwork, mirrored to tile) ---------- */
.tex-olive { background: linear-gradient(rgba(112, 113, 84, 0.58), rgba(112, 113, 84, 0.58)), var(--olive) url("/assets/olive.jpg") repeat center / 1020px auto; }
.tex-clay { background: linear-gradient(rgba(156, 68, 42, 0.5), rgba(156, 68, 42, 0.5)), var(--clay) url("/assets/clay.jpg") repeat center / 960px auto; }
.tex-cream { background-color: var(--cream); background-image: repeating-linear-gradient(to bottom, transparent 0 33px, var(--cream-line) 33px 34px), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .38 0 0 0 0 .28 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* Torn edges: the section above shows through as torn paper. Every colour change uses the same 30px edge. */
.torn-edge-bottom::after, .top-band::after, .sec-olive::after, .sec-ink::after, .closing-band::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 30px; z-index: 1; pointer-events: none; clip-path: var(--torn); }
.sec-olive::before, .sec-ink::before, .sec-sage::before, .closing-band::before, .footer:not(.after-clay)::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 30px; z-index: 1; pointer-events: none; clip-path: var(--torn-b); }

/* ---------- Top band: header plus the page head, on clay (home) or olive (every other page) ---------- */
.top-band { position: relative; --ink: #fbf3e4; --ink-2: rgba(251, 243, 228, 0.86); --muted: rgba(251, 243, 228, 0.62); --line: rgba(251, 243, 228, 0.26); --accent: #f6d2b8; --btn: #fbf3e4; --btn-hover: #fff8ec; --btn-ink: #2b1d14; color: var(--ink); padding-bottom: 40px; }
.top-band.tex-olive { --accent: #f3d9b4; }
.top-band::after { background: var(--bg); }
.top-band.slim { padding-bottom: 36px; }
.nav { display: flex; align-items: center; gap: 28px; height: 72px; }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 650 1.12rem var(--display); letter-spacing: -0.02em; color: var(--ink); }
.logo img { width: 30px; height: 30px; border-radius: 8px; }
.nav-links { display: none; gap: 26px; margin-left: auto; }
.nav-links a { text-decoration: none; color: var(--ink-2); font-size: 0.95rem; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--ink); }
.nav-links a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 6px; }
.nav .btn { margin-left: auto; }
@media (min-width: 900px) { .nav-links { display: flex; } .nav .btn { margin-left: 6px; } }

.page-head { padding-block: 32px 40px; max-width: 900px; }
.page-head h1 { font-size: clamp(2.3rem, 5vw, 3.8rem); line-height: 1.04; margin-top: 14px; }
.page-head .eyebrow { margin: 22px 0 0; }
.page-head .lead { font-size: 1.22rem; margin-top: 18px; max-width: 58ch; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; font: 500 0.78rem var(--mono); color: var(--muted); }
.crumbs li + li::before { content: "/"; margin-right: 8px; }
.crumbs a { text-decoration: none; color: var(--muted); }
.crumbs a:hover { color: var(--ink); }
.byline { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 24px; font-size: 0.9rem; color: var(--ink-2); }
.byline a { color: var(--ink); text-decoration: none; font-weight: 500; }

/* ---------- Home hero ---------- */
.hero { display: grid; gap: 48px; align-items: center; padding-block: 40px 48px; }
@media (min-width: 980px) { .hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 64px; padding-block: 56px 72px; } }
.hero h1 { font-size: clamp(2.6rem, 4.8vw, 4.2rem); line-height: 1.02; letter-spacing: -0.04em; font-weight: 650; text-wrap: initial; }
.hero h1 .l1, .hero h1 .l2 { display: block; }
.hero h1 .l1 { text-wrap: balance; color: rgba(251, 243, 228, 0.55); filter: blur(0.045em); transition: filter 1s cubic-bezier(0.16, 1, 0.3, 1), color 1s; }
.hero h1.typing .l1 { color: var(--ink); filter: none; }
.hero h1.typing .l1.past { color: rgba(251, 243, 228, 0.55); filter: blur(0.045em); }
.hero h1 .c { visibility: hidden; }
.hero h1 .c.in { visibility: visible; }
.hero h1 .caret { display: inline-block; width: 0.06em; height: 0.82em; margin-left: 0.04em; vertical-align: -0.04em; background: var(--ink); animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.hero .lead { font-size: 1.2rem; margin-top: 26px; max-width: 34ch; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 36px; }
.hero-qr { display: none; align-items: center; gap: 16px; margin-top: 32px; padding: 12px 18px 12px 12px; border: 1px solid var(--line); border-radius: 22px; background: rgba(251, 243, 228, 0.12); width: fit-content; }
.hero-qr img { width: 84px; height: 84px; border-radius: 12px; background: #fff; padding: 5px; }
.hero-qr b { display: block; font: 600 1rem var(--display); letter-spacing: -0.01em; color: var(--ink); }
.hero-qr span { color: var(--ink-2); font-size: 0.9rem; line-height: 1.4; max-width: 24ch; display: block; }
@media (min-width: 980px) and (hover: hover) { .hero-qr { display: flex; } }

/* Three real iPhones on one circle; site.js turns it a third of the way every few seconds. */
.hero-fan { position: relative; height: 640px; perspective: 1600px; }
.fan { position: absolute; inset: 0; perspective: 1600px; transform: rotateX(calc(var(--rx, 0) * 1deg)) rotateY(calc(var(--ry, 0) * 1deg)); transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.fan .slot { position: absolute; left: 50%; top: 50%; width: 250px; z-index: 1; }
.fan .slot.left { transform: translate(-50%, -50%) translateX(-58%) translateZ(-140px) rotateY(24deg) rotateZ(-7deg); }
.fan .slot.right { transform: translate(-50%, -50%) translateX(58%) translateZ(-140px) rotateY(-24deg) rotateZ(7deg); z-index: 2; }
.fan .slot.front { transform: translate(-50%, -50%) translateZ(40px); z-index: 3; }
.fan.orbit .slot { will-change: transform, opacity; }
.fan .slot .iphone { max-width: none; will-change: transform; backface-visibility: hidden; animation: drift 7s ease-in-out infinite; }
.fan .slot.left .iphone { animation-duration: 8.5s; animation-delay: -2s; }
.fan .slot.right .iphone { animation-duration: 9.5s; animation-delay: -5s; }
.fan .slot::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: -5%; height: 7%; border-radius: 50%; background: radial-gradient(closest-side, rgba(50, 15, 5, 0.4), transparent); filter: blur(6px); pointer-events: none; }
.hero-fan::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: 2%; height: 60px; background: radial-gradient(50% 50% at 50% 50%, rgba(50, 15, 5, 0.35), transparent 70%); filter: blur(8px); pointer-events: none; }
@keyframes drift { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-14px) rotate(0.8deg); } }
@media (max-width: 979px) { .hero-fan { height: 520px; } .fan .slot { width: 210px; } }
@media (max-width: 520px) { .hero-fan { height: 430px; margin-inline: -16px; overflow: hidden; } .fan .slot { width: 170px; } }

/* Real iPhone 17 Pro frame (from the App Store screenshot kit) over a full screenshot.
   Screen opening: 1206 x 2622 at (72, 69) in the 1350 x 2760 frame. */
.iphone { position: relative; z-index: 1; width: 100%; max-width: 270px; aspect-ratio: 1350 / 2760; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.35)); }
.iphone .screen { position: absolute; left: 5.333%; top: 2.5%; width: 89.333%; height: 95%; object-fit: cover; border-radius: 13.5% / 6.2%; }
.iphone .frame { position: absolute; inset: 0; width: 100%; height: 100%; }
.fan .slot .iphone { filter: none; }
.float { display: grid; place-items: center; perspective: 1400px; padding-block: 24px 40px; position: relative; }
.float::after { content: ""; position: absolute; left: 30%; right: 30%; bottom: 6px; height: 28px; border-radius: 50%; background: radial-gradient(closest-side, rgba(20, 24, 16, 0.28), transparent); filter: blur(6px); pointer-events: none; }

/* ---------- Fact strip ---------- */
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 24px; padding-block: 36px 28px; border-bottom: 1px solid var(--line); }
@media (min-width: 860px) { .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.facts b { display: block; font: 600 1.02rem var(--display); letter-spacing: -0.01em; }
.facts span { color: var(--muted); font-size: 0.92rem; }

/* ---------- Coloured bands ---------- */
.band { position: relative; padding-block: 112px; margin-top: 112px; }
.band + .band, .band + .closing-band { margin-top: 0; }
@media (max-width: 759px) { .band { padding-block: 80px; margin-top: 80px; } }
.sec-olive { --ink: #f6efdc; --ink-2: rgba(246, 239, 220, 0.86); --muted: rgba(246, 239, 220, 0.62); --line: rgba(246, 239, 220, 0.26); --surface: rgba(246, 239, 220, 0.1); --accent: #f3bc9f; color: var(--ink); }
.sec-olive::before, .sec-ink::after, .sec-olive::after, .sec-sage::before { background: var(--bg); }
.sec-sage { background-color: var(--sage-bg); --surface: #e9eee1; --raised: #f8faf4; --line: #c4ceb8; --muted: #6f7864; }
.sec-ink { background: #1d1b16; --ink: #f1ead9; --ink-2: #c7bea9; --muted: #8f8675; --line: #3c372e; --accent: #d58460; color: var(--ink); }
.sec-ink::before { background: var(--sage-bg); }

/* ---------- Blind modes: one paragraph, three ways to hide it ---------- */
.modes { display: grid; gap: 40px; align-items: center; }
@media (min-width: 980px) { .modes { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 72px; } }
.mode-list { display: grid; border-top: 1px solid var(--line); margin-top: 32px; }
.mode { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; align-items: baseline; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--line); padding: 22px 0; cursor: pointer; color: var(--ink); }
.mode h3 { font-size: 1.45rem; line-height: 1.15; color: var(--muted); transition: color 0.25s; }
.mode .tag { font: 500 0.72rem var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.mode p { grid-column: 1 / -1; color: var(--ink-2); font-size: 0.98rem; max-width: 48ch; display: none; padding-top: 6px; }
.mode[aria-selected="true"] h3, .mode:hover h3 { color: var(--ink); }
.mode[aria-selected="true"] .tag { color: var(--accent); }
.mode[aria-selected="true"] p { display: block; }
.mode-more { margin-top: 18px; font-size: 0.92rem; color: var(--muted); }
.mode-more a { color: var(--ink); }
.paper { position: relative; padding: 46px 34px 36px; box-shadow: 0 30px 50px -30px rgba(40, 30, 15, 0.45); color: var(--cream-ink); clip-path: var(--torn); }
@media (min-width: 900px) { .paper { padding: 56px 52px 48px; } }
.paper .head { display: flex; justify-content: space-between; font: 500 0.72rem var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: rgba(42, 36, 25, 0.6); padding-bottom: 18px; border-bottom: 1px solid rgba(120, 100, 70, 0.3); margin-bottom: 22px; }
.paper .head span:last-child { color: #9f452b; }
.para { font: 1.35rem/34px var(--hand); color: var(--cream-ink); min-height: 12.4em; }
.para span { display: block; transition: filter 0.5s ease-out, opacity 0.5s ease-out; }
.para i { font-style: normal; }
.para[data-mode="blur"] span:not(:last-child) { filter: blur(4.5px); opacity: 0.45; }
.para[data-mode="invisible"] span:not(:last-child), .para[data-mode="last"] span:not(:last-child) { opacity: 0; }
.para[data-mode="invisible"] span:last-child .done { opacity: 0; }
.para .done { transition: opacity 0.5s ease-out; }
.para span:last-child::after { content: ""; display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; vertical-align: -0.16em; background: #9f452b; animation: caret 1s steps(1) infinite; }
.private-band { margin-top: 24px; display: grid; gap: 18px 40px; align-items: center; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); padding: 26px 30px; text-decoration: none; color: inherit; }
@media (min-width: 900px) { .private-band { grid-template-columns: auto minmax(0, 1fr) auto; } }
.private-band h3 { font-size: 1.35rem; }
.private-band p { color: var(--ink-2); font-size: 0.98rem; max-width: 70ch; }
.private-band .go { font: 600 1.3rem var(--display); color: var(--accent); }

/* ---------- Momentum ---------- */
.momentum { display: grid; gap: 48px; align-items: center; }
@media (min-width: 980px) { .momentum { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; } }
.momentum .float .iphone { max-width: 270px; transform: rotateY(-14deg) rotateZ(3deg); animation: drift 8s ease-in-out infinite; }
.momentum ul { list-style: none; padding: 0; margin: 32px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 28px; max-width: 440px; }
.momentum li b { display: block; font: 600 1.05rem var(--display); }
.momentum li span { color: var(--muted); font-size: 0.93rem; }

/* ---------- Prompt cards ---------- */
.prompt-grid { display: grid; gap: 16px; margin-top: 44px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 680px) { .prompt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .prompt-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.prompt-card { background: var(--raised); border-radius: 22px; padding: 26px; text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 10px; min-height: 230px; box-shadow: var(--shadow); transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1); }
.prompt-card:hover { transform: translateY(-3px); }
.prompt-card .n { font: 500 0.78rem var(--mono); color: var(--muted); }
.prompt-card h3 { font-size: 1.35rem; line-height: 1.15; }
.prompt-card p { color: var(--ink-2); font-size: 0.95rem; }
.prompt-card q { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); font: 1.12rem/1.4 var(--hand); color: var(--ink); quotes: "\201C" "\201D"; }

/* ---------- Manifesto (ink band) ---------- */
.manifesto { padding-block: 128px; overflow: hidden; }
.manifesto .wrap { max-width: 860px; text-align: center; }
.manifesto h2 { font-size: clamp(2.3rem, 5.4vw, 4.2rem); line-height: 1.02; color: var(--ink); }
.manifesto h2 .fade { color: var(--muted); filter: blur(3px); transition: filter 0.9s ease-out; }
.manifesto.seen h2 .fade { filter: blur(0); }
.manifesto p { color: var(--ink-2); font-size: 1.1rem; max-width: 62ch; margin: 28px auto 0; text-align: left; }
.manifesto .link-arrow { margin-top: 28px; }

/* ---------- Rows (scenarios, related) ---------- */
.rows { margin-top: 48px; border-top: 1px solid var(--line); }
.row { display: grid; gap: 8px 40px; padding-block: 30px; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; align-items: baseline; }
@media (min-width: 900px) { .row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) auto; } }
.row h3 { font-size: clamp(1.35rem, 2.4vw, 1.75rem); line-height: 1.15; }
.row p { color: var(--ink-2); }
.row .go { font: 600 1.4rem var(--display); color: var(--accent); transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1); }
.row:hover .go { transform: translateX(6px); }

/* ---------- Tables ---------- */
.table, .table-wrap { margin-top: 44px; overflow-x: auto; border-radius: 22px; border: 1px solid var(--line); background: var(--raised); }
.prose .table, .prose .table-wrap { margin-top: 1.4em; }
.table table, .table-wrap table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 0.97rem; line-height: 1.45; }
.table th, .table td, .table-wrap th, .table-wrap td { text-align: left; padding: 16px 20px; vertical-align: top; }
.table thead th, .table-wrap thead th { font: 500 0.76rem var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); }
.table tbody tr:nth-child(even) td, .table-wrap tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--surface) 70%, transparent); }
.table td:first-child, .table-wrap td:first-child { font-weight: 500; }
.table th:nth-child(2), .table td:nth-child(2) { background: color-mix(in srgb, var(--mint) 16%, transparent) !important; font-weight: 600; }
.table td:not(:first-child):not(:nth-child(2)) { color: var(--ink-2); }
.table-more { margin-top: 22px; }

/* ---------- FAQ ---------- */
.faq-grid { display: grid; gap: 32px; }
@media (min-width: 980px) { .faq-grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 80px; } .faq-grid > :first-child { position: sticky; top: 40px; align-self: start; } }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-child { border-top: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; padding-block: 22px; font: 600 1.12rem var(--display); letter-spacing: -0.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 400 1.5rem/1 var(--body); color: var(--accent); transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--ink-2); padding-bottom: 22px; max-width: 62ch; }

/* ---------- Closing band (clay), the end of every page ---------- */
.closing-band { position: relative; margin-top: 112px; padding-block: 104px 96px; overflow: hidden; --ink: #f6efdc; --ink-2: rgba(246, 239, 220, 0.84); --muted: rgba(246, 239, 220, 0.66); color: var(--ink); }
.band + .closing-band { margin-top: 0; }
.closing-band::before { background: var(--bg); }
.sec-sage + .closing-band::before { background: var(--sage-bg); }
.closing-band::after { background: var(--footer-bg); }
.closing { display: grid; gap: 40px; align-items: center; position: relative; z-index: 2; }
@media (min-width: 900px) { .closing { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 64px; } }
.closing h2 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); line-height: 1.04; max-width: 15ch; }
.closing p { color: var(--ink-2); font-size: 1.15rem; margin-top: 20px; max-width: 42ch; }
.closing .cta-row { display: flex; flex-wrap: wrap; gap: 20px 28px; align-items: center; margin-top: 32px; }
.closing .qr { display: none; align-items: center; gap: 14px; color: var(--ink-2); font-size: 0.9rem; line-height: 1.4; }
.closing .qr img { width: 76px; height: 76px; border-radius: 12px; background: #fff; padding: 5px; }
.closing .qr b { display: block; color: var(--ink); font: 600 0.98rem var(--display); }
@media (min-width: 1024px) and (hover: hover) { .closing .qr { display: flex; } }
.closing .float .iphone { max-width: 260px; transform: rotateY(16deg) rotateZ(-4deg); animation: drift 7.5s ease-in-out infinite; }
.closing .float::after { background: radial-gradient(closest-side, rgba(40, 14, 6, 0.45), transparent); }

/* ---------- Footer (forest) ---------- */
.footer { position: relative; background: var(--footer-bg); --ink: #f1ead9; --ink-2: #c7bea9; --muted: #8f8675; --line: #3c372e; color: var(--ink); padding-block: 64px 36px; }
.footer:not(.after-clay) { margin-top: 112px; padding-top: 88px; }
.footer:not(.after-clay)::before { background: var(--bg); }
.foot-cta { display: grid; gap: 24px; align-items: center; padding-bottom: 40px; border-bottom: 1px solid var(--line); }
@media (min-width: 900px) { .foot-cta { grid-template-columns: minmax(0, 1fr) auto; } }
.foot-line { font: 650 clamp(1.5rem, 3vw, 2.1rem)/1.1 var(--display); letter-spacing: -0.03em; margin-top: 18px; max-width: 22ch; }
.foot-act { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.foot-qr { display: none; align-items: center; gap: 12px; color: var(--muted); font-size: 0.85rem; line-height: 1.4; max-width: 190px; }
.foot-qr img { width: 72px; height: 72px; border-radius: 10px; background: #fff; padding: 5px; flex: none; }
@media (min-width: 1024px) and (hover: hover) { .foot-qr { display: flex; } }
.foot-main { display: flex; flex-wrap: wrap; gap: 8px 26px; padding-block: 18px; border-bottom: 1px solid var(--line); }
.foot-main a { color: var(--ink-2); text-decoration: none; font-size: 0.98rem; }
.foot-main a:hover { color: var(--ink); }
.foot-main a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--mint); }
.frow { padding-block: 22px 18px; border-bottom: 1px solid var(--line); }
.frow-h { display: inline-block; font: 600 0.74rem var(--body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); text-decoration: none; margin-bottom: 8px; }
.frow-h:hover { color: var(--mint); }
.frow-links { display: grid; gap: 0 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.frow-links a { color: var(--ink-2); text-decoration: none; font-size: 0.93rem; line-height: 1.4; padding-block: 6px; }
.frow-links a:hover { color: var(--ink); }
@media (min-width: 760px) { .frow-links { grid-template-columns: repeat(3, 190px); } }
@media (min-width: 1100px) { .frow-links { grid-template-columns: repeat(6, 175px); } }
.foot-base { border-top: 0 !important; }
.foot-base a { text-decoration: none; }
.foot-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 0.85rem; color: var(--muted); }
.foot-base nav { display: flex; gap: 20px; }
.foot-base a { color: var(--muted); text-decoration: none; }
.foot-base a:hover { color: var(--ink); }

/* ---------- Article pages ---------- */
.g-body { display: grid; gap: 40px; grid-template-columns: minmax(0, 1fr); padding-top: 40px; }
.g-body > * { min-width: 0; }
@media (min-width: 1040px) { .g-body { grid-template-columns: 220px minmax(0, 720px); gap: 72px; } .g-body.no-toc { grid-template-columns: minmax(0, 760px); } .toc { position: sticky; top: 32px; align-self: start; } }
.toc p { font: 600 0.85rem var(--body); margin-bottom: 14px; }
.toc ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.toc a { color: var(--muted); text-decoration: none; font-size: 0.92rem; line-height: 1.35; display: block; }
.toc a:hover, .toc a.on { color: var(--ink); }
@media (max-width: 1039px) { .toc { border: 1px solid var(--line); border-radius: 22px; padding: 22px; } }
.g-main > * + * { margin-top: 32px; }
.answer { background: var(--raised); border-radius: 22px; padding: 26px 28px; box-shadow: var(--shadow); }
.answer b { display: block; font: 500 0.75rem var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }
.answer p { font-size: 1.12rem; line-height: 1.65; }
.prose { font-size: 1.08rem; line-height: 1.75; color: var(--ink); }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); line-height: 1.12; margin-top: 2.2em; scroll-margin-top: 24px; }
.prose h3 { font-size: 1.25rem; margin-top: 1.8em; }
.prose a { color: var(--ink); text-decoration-color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: 0.5em; }
.prose li::marker { color: var(--accent); font-weight: 600; }
.prose blockquote { margin: 1.5em 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--accent); font-style: italic; color: var(--ink-2); }
.prose code { font-family: var(--mono); font-size: 0.86em; background: var(--surface); border: 1px solid var(--line); padding: 1px 6px; border-radius: 6px; }
.prose hr { border: 0; border-top: 1px dashed var(--line); margin: 2em 0; }
.box { border-radius: 22px; padding: 22px 26px; background: var(--raised); border: 1px solid var(--line); }
.box > * + * { margin-top: 0.8em; }
.box-title { font: 500 0.75rem var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.box-verdict { background: var(--forest); color: var(--on-forest); border: 0; --ink: #eef0e6; }
.box-verdict .box-title { color: var(--mint); }
.box-tip { border-style: dashed; }
.inline-cta { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; align-items: center; background: var(--forest); color: var(--on-forest); border-radius: 22px; padding: 24px 26px; margin-block: 2em; }
.inline-cta img { width: 48px; height: 48px; border-radius: 12px; grid-row: span 2; }
.inline-cta b { font: 600 1.15rem var(--display); }
.inline-cta span { color: var(--on-forest-2); font-size: 0.95rem; line-height: 1.5; }
.inline-cta .btn { grid-column: 1 / -1; justify-self: start; margin-top: 12px; }
@media (min-width: 680px) { .inline-cta { grid-template-columns: auto 1fr auto; } .inline-cta .btn { grid-column: 3; grid-row: 1 / span 2; margin: 0; } }
.sources { font-size: 0.92rem; color: var(--muted); border-top: 1px solid var(--line); padding-top: 18px; }
.sources h2 { font-size: 1.1rem; margin-bottom: 8px; }
.sources ul { padding-left: 1.1em; margin: 0; }
.sources a { color: var(--ink-2); }
.related { margin-top: 96px; }
.related .rows { margin-top: 28px; }
.page-prose { max-width: 760px; padding-top: 40px; }

/* Prompt lists on prompt pages */
.prompt-list h2 { font-size: clamp(1.5rem, 2.6vw, 1.9rem); margin-bottom: 12px; }
.prompt-list ol { list-style: none; padding: 0; margin: 0; counter-reset: prompt; border-top: 1px solid var(--line); }
.prompt-list li { counter-increment: prompt; display: grid; grid-template-columns: 2.4em 1fr; gap: 2px 8px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.prompt-list li::before { content: counter(prompt); font: 500 0.8rem var(--mono); color: var(--muted); padding-top: 0.35em; }
.prompt-list li span { font: 1.18rem/1.45 var(--hand); }
.prompt-go { grid-column: 2; font-weight: 600; font-size: 0.9rem; color: var(--accent); text-decoration: none; justify-self: start; }
.prompt-go::after { content: " →"; }
@media (min-width: 640px) { .prompt-list li { grid-template-columns: 2.4em 1fr auto; align-items: baseline; } .prompt-go { grid-column: auto; } }

/* Index pages */
.index-body { padding-top: 40px; }
.cards { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 680px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.card { display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 24px 26px 26px; border-radius: 22px; background: var(--raised); box-shadow: var(--shadow); text-decoration: none; color: inherit; transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1); }
.card:hover { transform: translateY(-3px); }
.card .tag { font: 500 0.74rem var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.card .ct { font: 600 1.3rem/1.18 var(--display); letter-spacing: -0.02em; }
.card .cd { color: var(--ink-2); font-size: 0.95rem; line-height: 1.5; }
.hub-tool { max-width: 760px; margin-bottom: 56px; }
.hub-tool > .h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: 8px; }
.hub-how { margin-top: 40px; }
.sitemap-grid { display: grid; gap: 8px 40px; padding-top: 32px; }
@media (min-width: 760px) { .sitemap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .sitemap-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sitemap-grid h2 { font-size: 1.4rem; margin: 1.2em 0 0.4em; }
.sitemap-grid h2 a { text-decoration: none; }
.sitemap-grid ul { padding-left: 1.1em; margin: 0; }
.sitemap-grid li + li { margin-top: 6px; }

/* ---------- Free tool widgets ---------- */
.tool { padding: 24px 22px 26px; background: var(--raised); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow); }
@media (min-width: 640px) { .tool { padding: 30px 32px 32px; } }
.tool-setup { display: grid; gap: 18px; }
.tool-setup:tool-form-active { outline: 2px dashed var(--accent); outline-offset: 6px; }
.field-row { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.tool label { display: grid; gap: 6px; font: 500 0.74rem var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.tool label.check { display: flex; align-items: center; gap: 8px; align-self: end; min-height: 48px; }
.field-hint { text-transform: none; letter-spacing: 0; color: var(--muted); }
.field-inline { display: flex; gap: 8px; }
.field-inline input { flex: 1; min-width: 0; }
.tool input[type=text], .tool input[type=number], .tool input[type=date], .tool select { font: 1rem/1.3 var(--body); letter-spacing: 0; text-transform: none; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; min-height: 48px; padding: 8px 12px; width: 100%; }
.tool input:focus-visible, .tool select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.tool-setup > .btn { justify-self: start; }
.tool-note { font-size: 0.88rem; color: var(--muted); }
.tool-note a { color: var(--ink-2); }
.tool-note .btn { margin-top: 10px; }
.chip { font: 500 0.88rem var(--body); background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; margin: 4px 4px 0 0; cursor: pointer; }
.chip:hover { border-color: var(--ink-2); }
.tool-presets { font-size: 0.92rem; color: var(--ink-2); }
.calc-out, .goal-out { margin-top: 22px; }
.calc-out p + p, .goal-out p + p { margin-top: 10px; }
.goal-big { font: 650 clamp(1.8rem, 4vw, 2.4rem)/1.1 var(--display); letter-spacing: -0.03em; margin-bottom: 10px; }
.goal-big .scribble { color: var(--accent); }
.goal-error { color: var(--accent); }
.goal-out .table-wrap { margin-top: 16px; }

/* Writing pad: same writing page as the app */
.pad-session { background: #1d1b16; color: #f1ead9; border-radius: 18px; padding: 18px; }
.pad-bar { display: flex; justify-content: space-between; align-items: center; font: 1.05rem var(--hand); color: #a89e8a; margin-bottom: 10px; }
.pad-bar b { color: #f1ead9; font-weight: 400; }
.pad-finish { font: 1rem var(--hand); background: none; border: 1px solid #5d6b5f; color: var(--mint); border-radius: 999px; padding: 2px 14px; cursor: pointer; }
.pad-prompt { font: 1.15rem var(--hand); margin: 0 0 10px; text-decoration: underline; text-decoration-color: #d58460; text-underline-offset: 5px; }
.pad-page { position: relative; height: min(52vh, 440px); background: #1a1915; border-radius: 12px; border: 1px solid #2c2a24; }
.pad-mirror, .pad-input { position: absolute; inset: 0; margin: 0; padding: 18px 20px; border: 0; border-radius: 12px; font: 1.3rem/1.7 var(--hand); letter-spacing: 0.005em; white-space: pre-wrap; overflow-wrap: break-word; word-break: normal; overflow: hidden auto; scrollbar-width: none; }
.pad-mirror { overflow: hidden; color: #f1ead9; pointer-events: none; }
.pad-input { background: transparent; color: transparent; caret-color: var(--mint); resize: none; outline: none; }
.pad-input::-webkit-scrollbar { display: none; }
.pad-input::selection { background: transparent; }
.pad-past { color: transparent; text-shadow: 0 0 9px rgba(241, 234, 217, 0.5); }
.pad-progress { height: 4px; background: #33312a; border-radius: 4px; margin-top: 12px; overflow: hidden; }
.pad-progress span { display: block; height: 100%; width: 0; background: var(--mint); transition: width 0.25s linear; }
.pad-reveal h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); margin: 4px 0 14px; }
.pad-draft { white-space: pre-wrap; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; max-height: 60vh; overflow: auto; font: 1.15rem/1.6 var(--hand); }
.pad-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 4px; }
.pad-warning { font-size: 0.92rem; color: var(--accent); margin-top: 8px; }
.pad-app { display: grid; gap: 18px; align-items: center; margin-top: 26px; padding: 24px 26px; background: var(--forest); color: var(--on-forest); border-radius: 22px; }
.pad-app p { color: var(--on-forest-2); font-size: 0.98rem; }
.pad-app .cta-inline-title { color: var(--on-forest); font: 600 1.2rem var(--display); margin-bottom: 4px; }
.pad-app .btn { background: var(--mint); color: #14180f; margin-top: 12px; }
.pad-app-qr { display: none; align-items: center; gap: 12px; font-size: 0.88rem; line-height: 1.35; color: var(--on-forest-2); }
.pad-app-qr img { border-radius: 10px; background: #fff; padding: 4px; }
@media (min-width: 760px) and (hover: hover) { .pad-app { grid-template-columns: 1fr auto; } .pad-app-qr { display: flex; flex-direction: column; text-align: center; max-width: 130px; } }

/* Prompt generator */
.prompt-out { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 12px; }
.prompt-out li { background: var(--surface); border-radius: 16px; border: 1px solid var(--line); padding: 16px 18px; }
.prompt-text { font: 1.4rem/1.3 var(--hand); margin-bottom: 6px; }
.prompt-meta { font-size: 0.9rem; color: var(--muted); }
.prompt-meta a { color: var(--ink-2); }

/* Sprint timer */
.timer-face { text-align: center; padding: 18px 0 6px; }
.timer-time { font: 600 clamp(4rem, 12vw, 6rem)/1 var(--display); letter-spacing: -0.04em; margin-bottom: 14px; font-variant-numeric: tabular-nums; }
.timer-controls { display: flex; justify-content: center; gap: 10px; }
.timer-result { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; margin-top: 10px; }
.timer-result label { flex: 1; min-width: 180px; }
.timer-result p { flex-basis: 100%; font: 600 1.1rem var(--display); margin-top: 4px; }
.timer-log h3 { margin-top: 1.2em; font-size: 1.15rem; }

/* ---------- Sticky app banner (articles) ---------- */
.app-banner { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 30; display: flex; align-items: center; gap: 12px; max-width: 460px; margin: 0 auto; padding: 10px 12px; background: #1d1b16; color: #f1ead9; border-radius: 18px; box-shadow: 0 12px 40px -10px rgba(0, 0, 0, 0.5); transform: translateY(160%); transition: transform 0.35s ease-out; }
.app-banner.show { transform: none; }
.app-banner img { border-radius: 10px; }
.app-banner-meta { display: flex; flex-direction: column; line-height: 1.2; margin-right: auto; }
.app-banner-name { font: 600 1rem var(--display); }
.app-banner-sub { font-size: 0.8rem; color: #a89e8a; }
.app-banner-close { background: none; border: 0; color: #8f8675; font-size: 1.4rem; cursor: pointer; padding: 4px 6px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .manifesto h2 .fade { filter: none; }
}

/* Home: the facts sit on the clay hero, and the clay tears straight into the olive modes band. */
.home .top-band { padding-bottom: 56px; }
.home .top-band::after { background: linear-gradient(rgba(112, 113, 84, 0.58), rgba(112, 113, 84, 0.58)), var(--olive) url("/assets/olive.jpg") repeat center / 1020px auto; }
.home .top-band .facts { border-top: 1px solid var(--line); border-bottom: 0; padding-block: 28px 0; }
.home .top-band .facts span { color: var(--ink-2); }
.home #modes { margin-top: 0; }
.home #modes::before { display: none; }
.home .hero { padding-bottom: 8px; }
@media (min-width: 980px) { .home .hero { padding-bottom: 16px; } }

/* ---------- Phones: centre what people scan, keep long reading text left-aligned ---------- */
@media (max-width: 759px) {
  /* Hero */
  .hero { text-align: center; justify-items: center; }
  .hero h1 .l1, .hero h1 .l2 { text-wrap: balance; }
  .hero .lead { margin-inline: auto; }
  .hero-actions { justify-content: center; flex-direction: column; gap: 18px; }
  .home .top-band .facts { text-align: center; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 16px; }
  .facts b { font-size: 0.98rem; }
  .facts span { font-size: 0.86rem; line-height: 1.45; }

  /* Section intros: eyebrow, heading and lead */
  .section > .wrap > .eyebrow, .section > .wrap > .h2, .modes > div:first-child > .h2, .modes > div:first-child > .lead,
  .momentum > div:first-child > .h2, .momentum > div:first-child > .lead, .faq-grid > div:first-child { text-align: center; }
  .modes > div:first-child > .lead, .momentum > div:first-child > .lead, .faq-grid .lead { margin-inline: auto; }
  .mode-more { text-align: center; }
  .momentum ul { margin-inline: auto; text-align: center; }
  .table-more { text-align: center; }

  /* Manifesto: short enough to read centred */
  .manifesto p { text-align: center; }

  /* Linked rows and the privacy band: the whole block is the link, so the lone arrow goes */
  .row .go, .private-band .go { display: none; }
  .private-band { text-align: center; }

  /* Closing band */
  .closing { text-align: center; justify-items: center; }
  .closing h2, .closing p { margin-inline: auto; }
  .closing .cta-row { justify-content: center; }

  /* Page heads on inner pages */
  .page-head { text-align: center; }
  .page-head .lead { margin-inline: auto; }
  .crumbs ol, .byline { justify-content: center; }

  /* Footer */
  .foot-cta { text-align: center; justify-items: center; }
  .foot-main { justify-content: center; gap: 8px 18px; }
  .foot-line { margin-inline: auto; }
  .foot-act { justify-content: center; }
  .foot-base { justify-content: center; text-align: center; }
}
@media (max-width: 759px) {
  .hero-fan { width: 100%; justify-self: stretch; }
  .crumbs li[aria-current="page"] { display: none; }
  .crumbs li:nth-last-child(2)::after { content: ""; }
}
.foot-rows + .foot-base { margin-top: 0; }
.app-banner-qr { display: none; width: 52px; height: 52px; border-radius: 8px; background: #fff; padding: 3px; }
@media (min-width: 900px) and (hover: hover) { .app-banner-qr { display: block; } .app-banner { max-width: 520px; } }