/* Dapple — dapple.surf
   Built from the Figma frames "Concept A — Dappled Light" (1440) and
   "A — Dappled Light · mobile" (390). Mobile values apply below 700px. */

@font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url(assets/fonts/instrument-serif.woff2) format("woff2"); }
@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url(assets/fonts/instrument-serif-italic.woff2) format("woff2"); }
@font-face { font-family: "DM Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(assets/fonts/dm-mono-400.woff2) format("woff2"); }
@font-face { font-family: "DM Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url(assets/fonts/dm-mono-500.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 600; font-display: swap; src: url(assets/fonts/inter-var.woff2) format("woff2"); }

:root {
  --sunlight: #FDF5E2;
  --sunlight-deep: #F1E2BD;
  --moss: #3A5A40;
  --sage: #A8C3A4;
  --canopy: #304436;
  --canopy-deep: #1C2820;
  --honey: #E4BC7F;
  --ink: #17201A;
  --ink-rgb: 23 32 26;
  --sun-rgb: 253 245 226;

  --serif: "Instrument Serif", "New York", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, sans-serif;
  --mono: "DM Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --gutter: max(80px, calc((100% - 1280px) / 2));
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--sunlight); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
em { font-style: italic; }
:focus-visible { outline: 2px solid var(--moss); outline-offset: 3px; border-radius: 6px; }

.m { display: none; }

/* ---------- shared ---------- */

.eyebrow { font-family: var(--mono); font-weight: 500; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--moss); line-height: 1.3; }

.btn { display: inline-flex; align-items: center; justify-content: center; padding: 17px 28px; border-radius: 999px; font-size: 17px; font-weight: 600; line-height: 1.2; white-space: nowrap; transition: transform .15s ease, filter .15s ease; }
.btn:hover { filter: brightness(1.06); }
.btn:active { transform: scale(.98); }
.btn-moss { background: var(--moss); color: var(--sunlight); }
.btn-honey { background: var(--honey); color: var(--canopy-deep); }
.btn-ghost { box-shadow: inset 0 0 0 1.5px rgb(var(--ink-rgb) / .25); color: var(--ink); }

.phone { --w: 300px; width: var(--w); aspect-ratio: 300 / 646; padding: calc(var(--w) * .0333); border-radius: calc(var(--w) * .18); background: #0E120F; box-shadow: inset 0 0 0 2px #5B6158, 0 40px 80px -10px rgb(var(--ink-rgb) / .28); }
.phone img { width: 100%; height: 100%; object-fit: cover; border-radius: calc(var(--w) * .15); }

.blob, .fleck { position: absolute; border-radius: 50%; }
.fleck { aspect-ratio: 10 / 7; background: rgb(255 255 255 / .7); filter: blur(8px); }

/* ---------- hero ---------- */

.hero { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--sunlight), var(--sunlight-deep)); }
.hero-light { position: absolute; inset: 0 0 auto 0; aspect-ratio: 1440 / 1180; pointer-events: none; }
.hero-light .b1 { left: -11.1%; top: 35.6%; width: 52.8%; height: 47.5%; background: rgb(228 188 127 / .55); filter: blur(70px); }
.hero-light .b2 { left: 68.1%; top: 5.1%; width: 44.4%; height: 50.8%; background: rgb(168 195 164 / .55); filter: blur(75px); }
.hero-light .b3 { left: 29.2%; top: 15.3%; width: 43.1%; height: 27.1%; background: rgb(255 255 255 / .8); filter: blur(55px); }
.hero-light .b4 { left: 72.2%; top: 64.4%; width: 38.9%; height: 35.6%; background: rgb(228 188 127 / .45); filter: blur(65px); }
.hero-light .b5 { left: 8.3%; top: -6.8%; width: 29.2%; height: 30.5%; background: rgb(168 195 164 / .35); filter: blur(60px); }
.hero-light .f1 { left: 18.1%; top: 25.4%; width: 4.17%; }
.hero-light .f2 { left: 81.9%; top: 35.6%; width: 3.06%; }
.hero-light .f3 { left: 13.9%; top: 72.9%; width: 4.86%; }
.hero-light .f4 { left: 87.5%; top: 83.1%; width: 3.61%; }
.hero-light .f5 { left: 44.4%; top: 10.2%; width: 2.5%; }
.hero-light .f6 { left: 61.1%; top: 47.5%; width: 2.78%; }

@media (prefers-reduced-motion: no-preference) {
  .fleck { animation: drift 18s ease-in-out infinite alternate; }
  .f2, .f5 { animation-duration: 23s; animation-delay: -6s; }
  .f3, .f6 { animation-duration: 27s; animation-delay: -11s; }
  @keyframes drift { from { transform: translate(0, 0); opacity: .75; } to { transform: translate(18px, -12px); opacity: 1; } }
}

.nav { position: relative; display: flex; align-items: center; justify-content: space-between; height: 72px; margin: 20px var(--gutter) 0; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--serif); font-size: 32px; line-height: 1; }
.brand img { width: 36px; height: 36px; border-radius: 9px; }
.nav-links { display: flex; gap: 36px; }
.nav-links a { font-size: 15px; font-weight: 500; color: rgb(var(--ink-rgb) / .7); }
.nav-links a:hover { color: var(--ink); }
.menu { display: none; }

.hero-copy { position: relative; display: flex; flex-direction: column; align-items: center; gap: 28px; max-width: 1100px; margin: 58px auto 0; padding: 0 24px; text-align: center; }
.badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px 8px 14px; border-radius: 999px; background: rgb(255 255 255 / .6); box-shadow: inset 0 0 0 1px rgb(58 90 64 / .2); color: var(--moss); font-size: 14px; font-weight: 500; line-height: 1.2; }
.badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--moss); }
.hero h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(54px, 8.2vw, 118px); line-height: .94; letter-spacing: -.015em; }
.hero h1 em, .idea-text em { color: var(--moss); }
.lede { max-width: 640px; font-size: 20px; line-height: 1.5; color: rgb(var(--ink-rgb) / .72); }
.ctas { display: flex; gap: 12px; }
.fine { font-size: 14px; color: rgb(var(--ink-rgb) / .55); white-space: pre; }

.stage { position: relative; height: min(480px, 33.3vw); margin-top: 46px; }
.stage .phone { position: absolute; left: 50%; transform-origin: 50% 50%; }
.p-centre { --w: min(345px, 24vw); top: 0; transform: translateX(-50%); }
.p-left { --w: min(285px, 19.8vw); top: min(100px, 6.9vw); transform: translateX(calc(-50% - min(285px, 19.8vw))) rotate(-7deg); }
.p-right { --w: min(285px, 19.8vw); top: min(80px, 5.6vw); transform: translateX(calc(-50% + min(285px, 19.8vw))) rotate(7deg); }

/* ---------- the idea ---------- */

.idea { display: flex; flex-direction: column; align-items: center; gap: 32px; padding: 150px var(--gutter) 120px; text-align: center; }
.idea-text { max-width: 1080px; font-family: var(--serif); font-size: clamp(34px, 4vw, 58px); line-height: 1.08; letter-spacing: -.005em; }
.picker { display: flex; gap: 4px; padding: 6px; border-radius: 999px; background: rgb(255 255 255 / .75); box-shadow: inset 0 0 0 1px rgb(58 90 64 / .12); }
.picker li { padding: 10px 20px; border-radius: 999px; font-size: 15px; font-weight: 500; line-height: 1.2; color: rgb(var(--ink-rgb) / .7); }
.picker li.on { background: var(--moss); color: var(--sunlight); font-weight: 600; }
.note { font-size: 16px; color: rgb(var(--ink-rgb) / .6); }

/* ---------- features ---------- */

.features { padding: 40px var(--gutter) 140px; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 48px; }
.section-head > div { display: flex; flex-direction: column; gap: 16px; }
.features h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(44px, 5vw, 72px); line-height: .96; letter-spacing: -.01em; }
.aside { max-width: 420px; font-size: 18px; line-height: 1.5; color: rgb(var(--ink-rgb) / .65); }

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px 24px; }
.card { padding: 22px 22px 32px; border-radius: 32px; background: rgb(255 255 255 / .72); box-shadow: inset 0 0 0 1px rgb(58 90 64 / .1); }
.card h3 { margin: 22px 10px 8px; font-size: 22px; font-weight: 600; line-height: 1.25; }
.card > p { margin: 0 10px; font-size: 16px; line-height: 1.5; color: rgb(var(--ink-rgb) / .65); }

.vignette { position: relative; height: 270px; overflow: hidden; border-radius: 22px; background: rgb(241 226 189 / .6); }
.vignette.short { height: 220px; }
.tiny { font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: rgb(var(--ink-rgb) / .5); }

.archive { position: absolute; left: 24px; right: 24px; top: 26px; display: flex; flex-direction: column; gap: 8px; }
.archive .row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 16px; background: #fff; }
.archive .row b { display: block; font-size: 14px; font-weight: 600; line-height: 1.25; }
.archive .row i { display: block; font-style: normal; font-size: 12px; line-height: 1.25; color: rgb(var(--ink-rgb) / .5); }
.mono { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; font-size: 15px; font-weight: 600; }
.m-moss { background: var(--moss); color: var(--sunlight); }
.m-honey { background: var(--honey); }
.m-sage { background: var(--sage); }
.restore { font-size: 12px; font-weight: 500; color: var(--moss); }

.v-swipe .ghost-tab, .v-swipe .current-tab { position: absolute; left: 50%; width: 200px; height: 190px; border-radius: 20px; }
.v-swipe .ghost-tab { top: 30px; background: rgb(255 255 255 / .55); }
.v-swipe .g-left { transform: translateX(calc(-50% - 143px)); }
.v-swipe .g-right { transform: translateX(calc(-50% + 143px)); }
.v-swipe .current-tab { top: 20px; transform: translateX(-50%); object-fit: cover; object-position: top; box-shadow: 0 12px 24px rgb(25 38 25 / .2); }
.toolbar { position: absolute; left: 50%; top: 212px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border-radius: 999px; background: rgb(255 255 255 / .94); box-shadow: 0 6px 16px rgb(25 38 25 / .15); font-size: 14px; font-weight: 500; white-space: nowrap; }
.toolbar .arrow { color: var(--moss); font-size: 15px; }

.v-reader .phone { --w: 246px; position: absolute; left: 50%; top: 26px; transform: translateX(-50%); }

.v-spaces .chips { position: absolute; left: 24px; top: 36px; display: flex; gap: 8px; }
.chips span { padding: 10px 18px; border-radius: 999px; background: #fff; font-size: 15px; font-weight: 600; line-height: 1.2; }
.chips span.on { background: var(--moss); color: var(--sunlight); }
.minis { position: absolute; left: 24px; top: 96px; display: flex; gap: 10px; }
.minis img { width: 98px; height: 100px; object-fit: cover; object-position: top; border-radius: 14px; box-shadow: inset 0 0 0 1px rgb(58 90 64 / .12); outline: 1px solid rgb(58 90 64 / .12); outline-offset: -1px; }

.mic { position: absolute; left: 50%; top: 36px; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; gap: 2px; width: 84px; height: 84px; border-radius: 50%; background: var(--moss); }
.mic i { width: 5px; border-radius: 3px; background: var(--sunlight); }
.mic i:nth-child(1) { height: 22px; } .mic i:nth-child(2) { height: 34px; } .mic i:nth-child(3) { height: 18px; }
.mic i:nth-child(4) { height: 40px; } .mic i:nth-child(5) { height: 26px; } .mic i:nth-child(6) { height: 14px; }
.spoken { position: absolute; left: 0; right: 0; top: 142px; text-align: center; font-family: var(--serif); font-style: italic; font-size: 26px; line-height: 1.2; }

.address { position: absolute; left: 22px; top: 50px; display: inline-flex; gap: 8px; max-width: calc(100% - 22px); padding: 14px 20px; border-radius: 999px; background: #fff; font-size: 15px; font-weight: 500; line-height: 1.2; white-space: nowrap; overflow: hidden; }
.address s { font-weight: 400; color: rgb(var(--ink-rgb) / .35); }
.toast { position: absolute; left: 50%; top: 130px; transform: translateX(-50%); padding: 12px 18px; border-radius: 999px; background: var(--ink); color: var(--sunlight); font-size: 14px; font-weight: 600; line-height: 1.2; white-space: nowrap; }

/* ---------- privacy ---------- */

.privacy { padding: 130px var(--gutter) 140px; background: var(--canopy-deep); color: var(--sunlight); }
.privacy .eyebrow { color: var(--honey); }
.privacy h2 { max-width: 1040px; margin-top: 20px; font-family: var(--serif); font-weight: 400; font-size: clamp(42px, 5vw, 72px); line-height: 1; letter-spacing: -.01em; }
.privacy h2 em { color: var(--honey); }
.pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin-top: 56px; }
.pillars li { display: flex; flex-direction: column; gap: 14px; }
.pillars li::before { content: ""; width: 40px; height: 2px; background: var(--honey); }
.pillars .num { font-family: var(--mono); font-size: 13px; color: var(--honey); line-height: 1.3; }
.pillars h3 { font-size: 21px; font-weight: 600; line-height: 1.25; }
.pillars p { font-size: 16px; line-height: 1.5; color: rgb(var(--sun-rgb) / .68); }

/* ---------- AI ---------- */

.ai { display: flex; align-items: center; gap: 80px; padding: 140px var(--gutter); }
.ai-copy { flex: 1; display: flex; flex-direction: column; gap: 22px; }
.ai h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(44px, 4.7vw, 68px); line-height: .98; letter-spacing: -.01em; }
.ai .body { max-width: 520px; font-size: 18px; line-height: 1.52; color: rgb(var(--ink-rgb) / .7); }
.assure { display: flex; flex-direction: column; gap: 12px; }
.assure li { display: flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 500; color: rgb(var(--ink-rgb) / .8); }
.assure li::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--moss); }

.answer { flex: none; width: 580px; display: flex; flex-direction: column; gap: 20px; padding: 32px; border-radius: 32px; background: #fff; box-shadow: 0 30px 60px -10px rgb(25 38 25 / .14); }
.answer .tiny { font-size: 12px; color: var(--moss); }
.answer .q { font-family: var(--serif); font-size: 40px; line-height: 1.05; }
.answer .a { font-size: 17px; line-height: 1.55; color: rgb(var(--ink-rgb) / .82); }
.sources { display: flex; flex-wrap: wrap; gap: 8px; }
.sources > span { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 12px; background: var(--sunlight); font-size: 13px; font-weight: 500; color: rgb(var(--ink-rgb) / .75); }
.sources i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: var(--moss); color: var(--sunlight); font-style: normal; font-size: 11px; font-weight: 600; }
.answer hr { width: 100%; height: 1px; margin: 0; border: 0; background: rgb(var(--ink-rgb) / .08); }
.follow { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.follow span { padding: 10px 16px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgb(58 90 64 / .25); color: var(--moss); font-size: 14px; font-weight: 500; line-height: 1.2; }

/* ---------- beta ---------- */

.beta { padding: 0 var(--gutter) 120px; }
.beta-card { position: relative; display: flex; justify-content: space-between; align-items: flex-start; min-height: 520px; padding: 76px 124px 76px 80px; overflow: hidden; border-radius: 44px; background: var(--moss); color: var(--sunlight); }
.beta-light { position: absolute; inset: 0; pointer-events: none; }
.beta-light .c1 { left: 64.1%; top: -23.1%; width: 40.6%; height: 80.8%; background: rgb(228 188 127 / .45); filter: blur(60px); }
.beta-light .c2 { left: -9.4%; top: 61.5%; width: 40.6%; height: 73.1%; background: rgb(168 195 164 / .4); filter: blur(60px); }
.beta-light .c3 { left: 43.75%; top: 73.1%; width: 32.8%; height: 38.5%; background: rgb(228 188 127 / .18); filter: blur(40px); }
.beta-copy { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; max-width: 640px; }
.beta .eyebrow { color: var(--honey); }
.beta h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(52px, 5.8vw, 84px); line-height: .95; letter-spacing: -.01em; }
.beta .body { max-width: 560px; font-size: 18px; line-height: 1.52; color: rgb(var(--sun-rgb) / .8); }
.beta .req { font-size: 14px; color: rgb(var(--sun-rgb) / .62); }
.qr-card { position: relative; flex: none; display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 24px; padding: 28px; border-radius: 28px; background: var(--sunlight); color: var(--ink); }
.qr-card img { width: 168px; height: 168px; border-radius: 16px; background: #fff; }
.qr-card p { width: 200px; text-align: center; font-size: 14px; font-weight: 500; line-height: 1.4; color: rgb(var(--ink-rgb) / .75); }

/* ---------- footer ---------- */

.footer { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 36px var(--gutter); border-top: 1px solid rgb(var(--ink-rgb) / .08); font-size: 14px; color: rgb(var(--ink-rgb) / .55); }
.footer .brand { font-size: 24px; color: var(--ink); }
.footer .brand img { width: 28px; height: 28px; border-radius: 7px; }
.footer ul { display: flex; gap: 28px; }
.footer a:hover { color: var(--ink); }

/* ---------- document pages (privacy, acknowledgements) ---------- */

.doc-top { position: relative; overflow: hidden; padding-bottom: 72px; background: linear-gradient(180deg, var(--sunlight), var(--sunlight-deep)); }
.doc-top .hero-light { aspect-ratio: 1440 / 700; }
.doc-head { position: relative; max-width: 760px; margin: 88px auto 0; padding: 0 24px; }
.doc-head h1 { margin-top: 16px; font-family: var(--serif); font-weight: 400; font-size: clamp(54px, 7vw, 96px); line-height: .96; letter-spacing: -.015em; }
.doc-head .lede { margin-top: 24px; max-width: none; }
.doc-head .updated { margin-top: 20px; font-size: 14px; color: rgb(var(--ink-rgb) / .55); }

.doc { max-width: 760px; margin: 0 auto; padding: 72px 24px 120px; }
.doc section + section { margin-top: 64px; }
.doc h2 { margin-bottom: 18px; font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 3.4vw, 44px); line-height: 1.05; letter-spacing: -.01em; }
.doc h3 { margin: 28px 0 8px; font-size: 19px; font-weight: 600; line-height: 1.3; }
.doc p, .doc li { font-size: 17px; line-height: 1.65; color: rgb(var(--ink-rgb) / .8); }
.doc p + p, .doc p + ul, .doc ul + p { margin-top: 14px; }
.doc ul.bullets li { position: relative; padding-left: 22px; }
.doc ul.bullets li + li { margin-top: 8px; }
.doc ul.bullets li::before { content: ""; position: absolute; left: 2px; top: .68em; width: 7px; height: 7px; border-radius: 50%; background: var(--moss); }
.doc a:not(.btn) { color: var(--moss); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.doc strong { font-weight: 600; color: var(--ink); }
.doc code { font-family: var(--mono); font-size: .88em; }

.summary { padding: 28px 32px; border-radius: 28px; background: rgb(255 255 255 / .72); box-shadow: inset 0 0 0 1px rgb(58 90 64 / .1); }
.summary ul.bullets li { color: var(--ink); }

.flows { margin-top: 8px; border-radius: 24px; overflow: hidden; box-shadow: inset 0 0 0 1px rgb(var(--ink-rgb) / .1); }
.flows .flow { display: grid; grid-template-columns: 200px 1fr; gap: 24px; padding: 22px 26px; }
.flows .flow + .flow { border-top: 1px solid rgb(var(--ink-rgb) / .08); }
.flows .flow:nth-child(odd) { background: rgb(255 255 255 / .55); }
.flows dt { font-weight: 600; font-size: 16px; line-height: 1.45; }
.flows dt span { display: block; margin-top: 4px; font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--moss); }
.flows dd { margin: 0; font-size: 16px; line-height: 1.6; color: rgb(var(--ink-rgb) / .8); }

.credit { padding: 28px 32px; border-radius: 28px; background: rgb(255 255 255 / .72); box-shadow: inset 0 0 0 1px rgb(58 90 64 / .1); }
.credit + .credit { margin-top: 16px; }
.doc h2 + .credit, .doc p + .credit { margin-top: 24px; }
.credit h3 { margin: 0; font-size: 21px; }
.credit .meta { margin-top: 4px; font-size: 15px; color: rgb(var(--ink-rgb) / .6); }
.credit details { margin-top: 14px; }
.credit summary { cursor: pointer; font-size: 15px; font-weight: 500; color: var(--moss); }
.credit pre { margin: 12px 0 0; padding: 18px 20px; border-radius: 16px; background: var(--sunlight); font-family: var(--mono); font-size: 12.5px; line-height: 1.6; white-space: pre-wrap; color: rgb(var(--ink-rgb) / .8); }

/* ---------- in between: tablets and small laptops ---------- */

@media (max-width: 1099px) {
  :root { --gutter: 48px; }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .pillars { grid-template-columns: repeat(2, 1fr); gap: 40px 32px; }
  .ai { flex-direction: column; align-items: stretch; gap: 56px; }
  .answer { width: auto; max-width: 580px; }
  .beta-card { padding: 64px 56px; gap: 40px; }
  .nav-links { gap: 24px; }
}

/* ---------- mobile (Figma: 390 frame) ---------- */

@media (max-width: 699px) {
  :root { --gutter: 24px; }
  .d { display: none; }
  .m { display: inline; }
  br.d { display: none; }

  .eyebrow { font-size: 12px; }

  .hero-light { aspect-ratio: 390 / 935; }
  .hero-light .b1 { left: -41%; top: 59.9%; width: 107.7%; height: 36.4%; filter: blur(45px); }
  .hero-light .b2 { left: 51.3%; top: -4.3%; width: 82%; height: 34.2%; filter: blur(45px); }
  .hero-light .b3 { left: 10.3%; top: 21.4%; width: 76.9%; height: 19.3%; filter: blur(35px); }
  .hero-light .b4 { left: 61.5%; top: 81.3%; width: 76.9%; height: 27.8%; background: rgb(228 188 127 / .4); filter: blur(40px); }
  .hero-light .b5, .hero-light .f5, .hero-light .f6 { display: none; }
  .hero-light .f1 { left: 10.3%; top: 18.2%; width: 7.7%; }
  .hero-light .f2 { left: 82%; top: 32.1%; width: 6.2%; }
  .hero-light .f3 { left: 7.7%; top: 68.4%; width: 8.7%; }
  .hero-light .f4 { left: 84.6%; top: 66.3%; width: 6.7%; }
  .fleck { filter: blur(5px); }

  .nav { height: 56px; margin: 8px 16px 0; }
  .brand { gap: 8px; font-size: 28px; }
  .brand img { width: 30px; height: 30px; border-radius: 8px; }
  .nav-links, .nav-cta { display: none; }
  .menu { display: block; position: relative; }
  .menu summary { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgb(255 255 255 / .7); list-style: none; cursor: pointer; }
  .menu summary::-webkit-details-marker { display: none; }
  .menu-panel { position: absolute; right: 0; top: 52px; z-index: 10; display: flex; flex-direction: column; gap: 4px; width: 240px; padding: 12px; border-radius: 24px; background: rgb(255 255 255 / .92); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: 0 20px 40px -10px rgb(25 38 25 / .25); }
  .menu-panel a:not(.btn) { padding: 12px 14px; border-radius: 14px; font-size: 17px; font-weight: 500; }
  .menu-panel .btn { margin-top: 6px; }

  .hero-copy { gap: 20px; max-width: 390px; margin-top: 32px; padding: 0 24px; }
  .hero h1 { font-size: 54px; line-height: .96; letter-spacing: -.01em; }
  .lede { font-size: 17px; }
  .ctas { flex-direction: column; align-self: stretch; gap: 10px; }
  .fine { font-size: 13px; }

  .stage { height: 245px; margin-top: 80px; }
  .p-centre { --w: 160px; }
  .p-left { --w: 134px; top: 50px; transform: translateX(calc(-50% - 121px)) rotate(-8deg); }
  .p-right { --w: 134px; top: 50px; transform: translateX(calc(-50% + 121px)) rotate(8deg); }

  .idea { gap: 24px; padding: 88px 24px 72px; }
  .idea-text { font-size: 34px; line-height: 1.12; letter-spacing: 0; }
  .picker { gap: 2px; padding: 4px; }
  .picker li { padding: 9px 12px; font-size: 14px; }
  .note { max-width: 300px; font-size: 15px; line-height: 1.5; }

  .features { padding: 32px 24px 88px; }
  .section-head { flex-direction: column; align-items: stretch; gap: 14px; margin-bottom: 28px; }
  .section-head > div { gap: 14px; }
  .features h2 { font-size: 44px; line-height: .98; }
  .aside { font-size: 16px; }
  .cards { grid-template-columns: 1fr; gap: 20px; }
  .card { padding: 16px 16px 24px; border-radius: 28px; }
  .card h3 { margin: 18px 6px 6px; font-size: 20px; }
  .card > p { margin: 0 6px; font-size: 15px; }
  .vignette { height: 230px; border-radius: 18px; }
  .vignette.short { height: 190px; }

  .archive { left: 18px; right: 18px; top: 20px; gap: 7px; }
  .archive .row { gap: 10px; padding: 8px 12px; border-radius: 14px; }
  .archive .row b { font-size: 13px; }
  .archive .row i { font-size: 11px; }
  .mono { width: 32px; height: 32px; border-radius: 9px; font-size: 14px; }
  .v-swipe .ghost-tab, .v-swipe .current-tab { width: 188px; height: 168px; border-radius: 18px; }
  .v-swipe .ghost-tab { top: 26px; }
  .v-swipe .current-tab { top: 16px; }
  .v-swipe .g-left { transform: translateX(calc(-50% - 151px)); }
  .v-swipe .g-right { transform: translateX(calc(-50% + 151px)); }
  .toolbar { top: 180px; gap: 8px; padding: 9px 16px; font-size: 13px; }
  .toolbar .arrow { font-size: 14px; }
  .v-reader .phone { --w: 210px; top: 22px; }
  .v-spaces .chips { left: 18px; top: 24px; gap: 6px; }
  .chips span { padding: 9px 15px; font-size: 14px; }
  .minis { left: 18px; top: 80px; gap: 8px; }
  .minis img { width: 85px; height: 90px; border-radius: 12px; }
  .mic { top: 30px; width: 76px; height: 76px; gap: 3px; }
  .mic i { width: 4px; border-radius: 2px; }
  .mic i:nth-child(1) { height: 18px; } .mic i:nth-child(2) { height: 30px; } .mic i:nth-child(3) { height: 16px; }
  .mic i:nth-child(4) { height: 34px; } .mic i:nth-child(5) { height: 22px; } .mic i:nth-child(6) { height: 12px; }
  .spoken { top: 124px; font-size: 24px; }
  .address { left: 16px; top: 44px; max-width: calc(100% - 16px); gap: 6px; padding: 12px 16px; font-size: 14px; }
  .toast { top: 112px; padding: 11px 16px; font-size: 13px; }

  .privacy { padding: 80px 24px 88px; }
  .privacy h2 { margin-top: 16px; font-size: 42px; line-height: 1.02; letter-spacing: -.005em; }
  .pillars { grid-template-columns: 1fr; gap: 36px; margin-top: 36px; }
  .pillars li { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 12px; row-gap: 10px; padding-top: 20px; border-top: 1px solid rgb(var(--sun-rgb) / .14); }
  .pillars li::before { display: none; }
  .pillars .num { font-size: 12px; }
  .pillars h3 { font-size: 18px; }
  .pillars p { grid-column: 1 / -1; font-size: 15px; }

  .ai { gap: 28px; padding: 88px 24px; }
  .ai-copy { gap: 16px; }
  .ai h2 { font-size: 44px; }
  .ai .body { font-size: 16px; }
  .assure { gap: 10px; }
  .assure li { gap: 10px; font-size: 15px; }
  .assure li::before { width: 7px; height: 7px; }
  .answer { gap: 16px; padding: 24px; border-radius: 26px; box-shadow: 0 24px 48px -10px rgb(25 38 25 / .14); }
  .answer .tiny { font-size: 11px; }
  .answer .q { font-size: 32px; }
  .answer .a { font-size: 15px; }
  .sources { gap: 6px; }
  .sources > span { gap: 6px; padding: 6px 10px; border-radius: 10px; font-size: 12px; }
  .sources i { width: 18px; height: 18px; border-radius: 5px; font-size: 10px; }
  .follow span { padding: 9px 14px; font-size: 13px; }

  .beta { padding: 0 16px 72px; }
  .beta-card { display: block; min-height: 0; padding: 40px 28px; border-radius: 36px; }
  .beta-light .c1 { left: 47.5%; top: -18.4%; width: 89.4%; height: 53.2%; filter: blur(40px); }
  .beta-light .c2 { left: -33.5%; top: 67.5%; width: 89.4%; height: 53.2%; filter: blur(40px); }
  .beta-light .c3 { left: 33.5%; top: 85.9%; width: 61.5%; height: 24.5%; filter: blur(25px); }
  .beta-copy { gap: 20px; }
  .beta h2 { font-size: 52px; line-height: .96; }
  .beta .body { font-size: 16px; }
  .beta .btn { align-self: stretch; }
  .beta .req { font-size: 13px; line-height: 1.45; }
  .qr-card { display: none; }

  .doc-top { padding-bottom: 48px; }
  .doc-head { margin-top: 48px; }
  .doc { padding: 48px 24px 88px; }
  .doc section + section { margin-top: 48px; }
  .doc p, .doc li { font-size: 16px; }
  .summary, .credit { padding: 22px 22px; border-radius: 24px; }
  .flows .flow { grid-template-columns: 1fr; gap: 6px; padding: 18px 20px; }

  .footer { flex-direction: column; align-items: flex-start; gap: 14px; padding: 28px 24px 36px; }
  .footer .brand { font-size: 22px; }
  .footer .brand img { width: 26px; height: 26px; }
  .footer ul { flex-wrap: wrap; gap: 14px 20px; }
  .footer .copy { flex-basis: 100%; font-size: 13px; color: rgb(var(--ink-rgb) / .45); }
}