/* Dark Confidence sales page. One dark page; the myths section is the single deliberate switch
   to paper (the book's own reading surface). Gloock = display, Schibsted Grotesk = reading,
   Martian Mono = data only. One accent: the book's red. All corners square. */
:root {
  --bg: oklch(15% 0.008 25); --bg2: oklch(19% 0.01 25); --text: oklch(93% 0.014 75); --soft: oklch(74% 0.014 55); --mute: oklch(60% 0.012 45);
  --line: oklch(29% 0.012 25); --red: oklch(56% 0.205 25); --redhi: oklch(63% 0.21 25);
  --paper: oklch(95.5% 0.01 70); --ink: oklch(20% 0.012 25); --inkmute: oklch(46% 0.014 40); --pline: oklch(85% 0.012 55);
  --gutter: clamp(20px, 5vw, 72px); --wrap: 1240px;
  --ease: cubic-bezier(.16, 1, .3, 1);
}
* { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 17px/1.65 "Schibsted Grotesk", system-ui, sans-serif; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, p { margin: 0; }
h2 { font: 400 clamp(32px, 4.4vw, 56px)/1.08 "Gloock", serif; letter-spacing: -.005em; text-wrap: balance; }
h2 em, h1 em { font-style: normal; color: var(--redhi); }
/* One left edge for everything: the gutter grows to centre a --wrap column on wide screens. */
section, footer { --edge: max(var(--gutter), calc((100% - var(--wrap)) / 2)); padding: clamp(80px, 12vw, 160px) var(--edge); }
.kicker, .brand { font: 500 12px/1 "Schibsted Grotesk", sans-serif; letter-spacing: .24em; text-transform: uppercase; color: var(--mute); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── button: one label, one intent, everywhere ─────────────── */
.btn { display: inline-flex; align-items: center; gap: 18px; padding: 18px 26px; min-height: 56px; background: var(--red); color: var(--text); font: 600 16px/1 "Schibsted Grotesk", sans-serif; letter-spacing: .02em; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background .3s var(--ease), transform .2s var(--ease); }
.btn:hover { background: var(--redhi); transform: translateY(-1px); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--text); outline-offset: 4px; }
.btn .price { font: 500 15px/1 "Martian Mono", monospace; padding-left: 18px; border-left: 1px solid oklch(93% 0.014 75 / .35); }
.btn[aria-disabled="true"] { cursor: default; }
.btn-sm { min-height: 44px; padding: 12px 18px; font-size: 14px; } .btn-sm .price { font-size: 13px; padding-left: 14px; }

/* ── hero: asymmetric split, copy left, plate right ─────────── */
.hero { min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; padding: 0 0 0 var(--gutter); overflow: hidden; }
.hero-copy { padding: 96px 0; max-width: 620px; }
.hero h1 { font: 400 clamp(64px, 9vw, 140px)/.92 "Gloock", serif; letter-spacing: -.015em; margin: 28px 0 28px; }
.hero h1 em { display: block; padding-bottom: .06em; }
.lede { font-size: clamp(19px, 1.6vw, 22px); line-height: 1.45; color: var(--soft); max-width: 26ch; margin-bottom: 40px; }
.hero-art { margin: 0; height: 100dvh; position: relative; }
.hero-art img { width: 100%; height: 100%; object-fit: cover; object-position: 38% 50%; }
.hero-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--bg), transparent 28%); pointer-events: none; }
@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; padding: 0; }
  .hero-art { grid-row: 1; height: 58dvh; }
  .hero-art::after { background: linear-gradient(0deg, var(--bg), transparent 40%); }
  .hero-art img { object-position: 50% 42%; }
  .hero-copy { padding: 0 var(--gutter) 64px; margin-top: -72px; position: relative; z-index: 1; }
  .hero h1 { margin-top: 20px; }
}

/* ── thesis: manifesto type + three plain statements ────────── */
.thesis h2 { max-width: 18ch; }
.thesis-body { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin-top: 72px; color: var(--soft); }
.thesis-body b { display: block; color: var(--text); font-weight: 600; margin-bottom: 6px; }
@media (max-width: 860px) { .thesis-body { grid-template-columns: 1fr; gap: 28px; margin-top: 48px; } }

/* ── the number: a poster ───────────────────────────────────── */
.number { background: var(--bg2); padding-block: clamp(96px, 14vw, 180px); }
.number .big { font: 400 clamp(140px, 30vw, 380px)/.82 "Gloock", serif; color: var(--redhi); letter-spacing: -.03em; margin: 28px 0 40px; }
/* Gloock draws U+2212 as a long hairline; a short, heavy bar reads as a minus at poster size. */
.number .minus { display: inline-block; width: .32em; height: .07em; background: currentColor; vertical-align: .3em; margin-right: .06em; }
.num-line { font-size: clamp(20px, 2.2vw, 28px); line-height: 1.4; max-width: 30ch; }
.num-line em { color: var(--text); }
.src { font-size: 14px; color: var(--mute); margin-top: 28px; }

/* ── inside: bento of real page crops ───────────────────────── */
.inside h2 { margin-bottom: 64px; }
.bento { display: grid; grid-template-columns: 1.25fr 1fr; grid-template-areas: "study figure" "myth figure"; gap: 28px 40px; }
.bento figure { margin: 0; } .b-study { grid-area: study; } .b-figure { grid-area: figure; } .b-myth { grid-area: myth; }
.bento img { width: 100%; outline: 1px solid var(--line); }
.bento figcaption { font-size: 15px; color: var(--soft); margin-top: 14px; max-width: 46ch; }
@media (max-width: 860px) { .bento { grid-template-columns: 1fr; grid-template-areas: "study" "figure" "myth"; gap: 40px; } }

/* ── atlas: one large plate leading, two supporting (a different family from the bento above) ── */
.atlas { background: var(--bg2); }
.atlas h2 { max-width: 16ch; }
.atlas-lede { color: var(--soft); max-width: 46ch; margin: 20px 0 64px; font-size: 18px; }
.atlas-grid { display: grid; grid-template-columns: 1.2fr 1fr; grid-template-areas: "brain face" "brain posture"; gap: 56px 56px; align-items: start; }
.fig-brainmap { grid-area: brain; } .fig-facemap { grid-area: face; } .fig-posturemap { grid-area: posture; }
@media (max-width: 860px) { .atlas-grid { grid-template-columns: 1fr; grid-template-areas: "brain" "face" "posture"; gap: 56px; } }

/* ── charts: a rail of real figures. Grid on desktop, swipeable scroll-snap row on mobile ── */
.charts h2 { max-width: 18ch; }
.charts-lede { color: var(--soft); max-width: 48ch; margin: 20px 0 56px; font-size: 18px; }
.chart-rail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.chart-rail > div { min-width: 0; }
.chart-rail:focus-visible { outline: 2px solid var(--redhi); outline-offset: 8px; }
@media (max-width: 860px) {
  .chart-rail { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 16px; margin-inline: calc(-1 * var(--edge)); padding: 0 var(--edge) 12px; scrollbar-width: thin; }
  .chart-rail > div { flex: 0 0 84%; scroll-snap-align: start; }
}

/* ── paper: the one switch, the myths as a printed page ─────── */
.paper { background: var(--paper); color: var(--ink); }
.paper h2 { margin-bottom: 56px; }
.myths { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 64px; }
.myths li { display: grid; grid-template-columns: 1fr auto; gap: 10px 16px; align-items: start; }
.m-claim { font: 400 22px/1.3 "Gloock", serif; color: var(--inkmute); text-decoration: line-through; text-decoration-color: oklch(56% 0.205 25 / .65); text-decoration-thickness: 1px; }
.stamp { font: 500 11px/1 "Martian Mono", monospace; letter-spacing: .08em; color: var(--red); border: 1px solid var(--red); padding: 7px 8px; transform: rotate(-3deg); white-space: nowrap; }
.m-truth { grid-column: 1 / -1; font-size: 16px; line-height: 1.55; color: var(--ink); max-width: 44ch; }
@media (max-width: 760px) { .myths { grid-template-columns: 1fr; gap: 36px; } }

/* ── ledger: one featured number, three supporting ──────────── */
.stats { list-style: none; padding: 0; margin-top: 40px; display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; align-items: end; }
.stats li { display: grid; gap: 6px; }
.stats b { font: 400 clamp(40px, 4.4vw, 64px)/1 "Gloock", serif; color: var(--text); }
.stats li:first-child b { font-size: clamp(64px, 8vw, 120px); color: var(--redhi); }
.stats span { font-size: 15px; color: var(--soft); }
.stats i { font-style: normal; font: 400 12px "Martian Mono", monospace; color: var(--mute); }
.ledger .note { margin-top: 56px; color: var(--mute); font-size: 15px; }
@media (max-width: 860px) { .stats { grid-template-columns: 1fr 1fr; } .stats li:first-child { grid-column: 1 / -1; } }

/* ── contents: grouped by part, no row rules ────────────────── */
.contents h2 { margin-bottom: 56px; }
.parts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 72px; }
.part h3 { margin: 0 0 18px; font: 500 12px/1 "Schibsted Grotesk", sans-serif; letter-spacing: .24em; text-transform: uppercase; color: var(--redhi); }
.part ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; }
.part li { display: grid; grid-template-columns: 42px 1fr; gap: 12px; }
.part .cn { font: 400 15px/1.6 "Martian Mono", monospace; color: var(--mute); }
.part b { display: block; font: 400 21px/1.3 "Gloock", serif; font-weight: 400; }
.part .cd { display: block; font-size: 15px; color: var(--soft); }
@media (max-width: 760px) { .parts { grid-template-columns: 1fr; gap: 44px; } }

/* ── offer ──────────────────────────────────────────────────── */
.offer { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: clamp(40px, 8vw, 120px); align-items: center; }
.offer-cover { width: 100%; outline: 1px solid var(--line); }
.offer h2 { margin-bottom: 32px; }
.specs { list-style: none; padding: 0; margin: 0 0 40px; display: grid; gap: 10px; color: var(--soft); }
.specs li::before { content: "+"; color: var(--redhi); font-family: "Martian Mono", monospace; margin-right: 12px; }
.seal { font-size: 14px; color: var(--mute); margin-top: 16px; }
.price s { font-weight: 400; opacity: .55; margin-right: 8px; text-decoration: none; position: relative; }
/* The strike is drawn, not a text-decoration, so it can be struck through on load (see motion). */
.price s::after { content: ""; position: absolute; left: -2px; right: -2px; top: 50%; height: 1.5px; background: currentColor; transform-origin: left; }
.launch { font-size: 15px; color: var(--redhi); margin-top: 18px; }
@media (max-width: 760px) { .offer { grid-template-columns: 1fr; } .offer-cover { max-width: 220px; } }

/* ── faq ────────────────────────────────────────────────────── */
.faq { background: var(--bg2); }
.faq h2 { margin-bottom: 40px; }
.faq-list { max-width: 760px; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 24px; padding: 22px 0; font-size: 18px; font-weight: 500; min-height: 44px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 400 20px/1 "Martian Mono", monospace; color: var(--redhi); transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:focus-visible { outline: 2px solid var(--redhi); outline-offset: 4px; }
.faq details p { padding: 0 0 24px; color: var(--soft); max-width: 62ch; }

footer { padding-block: 56px; border-top: 1px solid var(--line); }
.fine { font-size: 13px; color: var(--mute); margin-top: 8px; } .unset { color: var(--redhi); }

/* ── sticky buy bar: appears once the hero CTA scrolls away ─── */
.buybar { position: fixed; z-index: 10; left: 0; right: 0; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px var(--gutter); background: oklch(15% 0.008 25 / .94); border-bottom: 1px solid var(--line); transform: translateY(-100%); transition: transform .4s var(--ease); }
.buybar.on { transform: none; }
.bb-title { font: 400 20px/1 "Gloock", serif; white-space: nowrap; } .bb-title em { font-style: normal; color: var(--redhi); }

/* ── motion (2026-10-12, owner: "not flat, not cluttered"). One load sequence, then quiet.
   Every move carries meaning: the plate settles (the scene), the copy rises in reading order,
   the sample pages are dealt onto the table (there is something to see), and the old price is
   struck through in front of the reader (the discount is real and happening now). Below the fold,
   things settle in once as they arrive, perks one after another. Nothing loops, nothing on scroll
   position, transform + opacity only, and none of it runs under reduced motion. ── */
@media (prefers-reduced-motion: no-preference) {
  .hero-copy > * { animation: rise .9s var(--ease) both; }
  .hero-copy > :nth-child(2) { animation-delay: .08s; } .hero-copy > :nth-child(3) { animation-delay: .16s; } .hero-copy > :nth-child(4) { animation-delay: .24s; }
  .hero-art img { animation: settle 2.2s var(--ease) both; }
  /* backwards, not both: a filled end-state would override the hover lift for good */
  .hero .peek-page { animation: deal .7s var(--ease) backwards; }
  .hero .peek-page:nth-child(1) { animation-delay: .34s; } .hero .peek-page:nth-child(2) { animation-delay: .4s; } .hero .peek-page:nth-child(3) { animation-delay: .46s; }
  .hero .peek-page:nth-child(4) { animation-delay: .52s; } .hero .peek-page:nth-child(5) { animation-delay: .58s; }
  .hero .price s::after { animation: strike .5s 1.05s var(--ease) both; }
  .reveal.pre { opacity: 0; transform: translateY(28px); }
  .reveal { transition: opacity .9s var(--ease), transform .9s var(--ease); }
  .perks li.reveal:nth-child(2) { transition-delay: .1s; } .perks li.reveal:nth-child(3) { transition-delay: .2s; }
  .peek-view[open] { animation: pop .35s var(--ease); }
  .peek-view[open]::backdrop { animation: fade .35s var(--ease); }
}
@keyframes rise { from { opacity: 0; transform: translateY(22px); } }
@keyframes fade { from { opacity: 0; } }
@keyframes settle { from { opacity: 0; transform: scale(1.045); } }
@keyframes deal { from { opacity: 0; transform: translateY(14px) rotate(-4deg); } }
@keyframes strike { from { transform: scaleX(0); } }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.98); } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .buybar { transition: none; } }

/* The sticky bar is narrow on phones: keep the real price, drop the struck-through one there. */
@media (max-width: 480px) { .buybar .price s { display: none; } .bb-title { font-size: 17px; } }

/* ── native figures (built from the book by build-figs.mjs, recoloured for the dark page) ── */
.fig { margin: 0; border-top: 1px solid var(--line); padding-top: 14px; }
.fig svg { width: 100%; height: auto; display: block; }
.fig-no { font: 600 11px/1 "Schibsted Grotesk", sans-serif; letter-spacing: .24em; text-transform: uppercase; color: var(--redhi); margin: 0 0 8px; }
.fig-no span { color: var(--mute); }
.fig-title { font: 400 21px/1.25 "Gloock", serif; margin: 0 0 18px; color: var(--text); text-wrap: balance; }
.fig figcaption { font-size: 14px; line-height: 1.55; color: var(--mute); margin-top: 16px; border-top: 1px solid var(--line); padding-top: 12px; }
.fig figcaption em { font-style: italic; }
.fig figcaption .src { display: block; margin-top: 6px; color: var(--soft); font-weight: 500; }
.brainmap { position: relative; } .brainmap img { width: 100%; display: block; }
.brainmap svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.regions { list-style: none; padding: 0; margin: 18px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; }
.regions li { display: grid; grid-template-columns: 22px 1fr; gap: 4px; font-size: 14px; line-height: 1.45; color: var(--soft); margin: 0; }
.regions .rn { font: 500 13px/1.5 "Martian Mono", monospace; color: var(--redhi); } .regions b { color: var(--text); font-weight: 600; }
@media (max-width: 520px) { .regions { grid-template-columns: 1fr; } }

/* Engraved emblem icons on the three thesis points (ivory on transparent, drawn by icons.mjs). */
.t-icon { display: block; width: 104px; height: 104px; object-fit: contain; object-position: left bottom; margin-bottom: 20px; opacity: .92; }

/* ── the one section after the hero (owner, 2026-10-12): three benefits, four samples, the button ── */
.inside-one { padding-block: clamp(64px, 9vw, 120px); border-top: 1px solid var(--line); }
.inside-one h2 { margin-bottom: 36px; }
.perks { list-style: none; padding: 0; margin: 0 0 64px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 40px; }
.perks li { display: flex; align-items: center; gap: 16px; font-size: 17px; line-height: 1.35; color: var(--text); }
.perks img { width: 56px; height: 56px; object-fit: contain; flex: none; }
.samples { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; align-items: start; }
.samples > div { min-width: 0; }
.samples .fig-title { font-size: 17px; }
.close { margin-top: 64px; display: grid; justify-items: start; gap: 16px; }
.specs-line { font: 400 13px/1.4 "Martian Mono", monospace; color: var(--soft); letter-spacing: .02em; }
.close .seal { margin: 0; }
@media (max-width: 1000px) { .samples { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .perks { grid-template-columns: 1fr; margin-bottom: 48px; }
  .samples { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 16px; margin-inline: calc(-1 * var(--edge)); padding: 0 var(--edge) 12px; }
  .samples > div { flex: 0 0 84%; scroll-snap-align: start; }
  .close { margin-top: 48px; }
}
.regions-compact { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 16px; margin-top: 10px; }
.regions-compact li { font-size: 12.5px; grid-template-columns: 18px 1fr; }
/* The old atlas section named grid areas on .fig-brainmap; inside .samples it must flow normally. */
.samples > div { grid-area: auto; }

/* ── journal-style samples (jfigs.mjs): white plates in a swipeable rail on every screen size.
   Overrides the earlier 4-column .samples grid. ── */
.samples { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 24px; margin-inline: calc(-1 * var(--edge)); padding: 0 var(--edge) 16px; grid-template-columns: none; }
.samples > div { flex: 0 0 min(88vw, 1040px); scroll-snap-align: start; }
.jfig { background: #FFFFFF; color: #1B2030; margin: 0; padding: 22px 24px 18px; border-top: 3px solid #2B3550; height: 100%; }
.jfig-no { font: 600 11px/1 "Schibsted Grotesk", sans-serif; letter-spacing: .22em; text-transform: uppercase; color: #C8102E; margin: 0 0 6px; }
.jfig-title { font: 400 22px/1.2 "Gloock", serif; margin: 0 0 18px; color: #1B2030; }
.jpanels { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px 28px; align-items: start; }
.jp svg { width: 100%; height: auto; display: block; }
.jp-h { font: 500 14px "Schibsted Grotesk", sans-serif; color: #2B3550; margin: 0 0 8px; } .jp-h b { font-weight: 800; margin-right: 8px; font-size: 16px; }
.jp-note { font-size: 12px; line-height: 1.45; color: #5A6070; margin: 8px 0 0; }
.jlegend { list-style: none; margin: 10px 0 0; padding: 10px; border: 1px solid #C9CFD9; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; }
.jlegend li { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #2B3550; }
.jlegend .sw { width: 22px; height: 15px; flex: none; }
.jfig figcaption { font-size: 12.5px; line-height: 1.5; color: #5A6070; border-top: 1px solid #C9CFD9; margin-top: 14px; padding-top: 10px; }
.samples-hint { font-size: 13px; color: var(--mute); margin: -8px 0 16px; }

/* Engraved panels inside the journal sample plates (jfigs.mjs second pass). */
.jplate { width: 100%; height: auto; display: block; }
.jkey { list-style: none; padding: 0; margin: 10px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px; }
.jkey li { font-size: 12px; line-height: 1.4; color: #5A6070; } .jkey span { font: 500 12px "Martian Mono", monospace; color: #C8102E; margin-right: 6px; } .jkey b { color: #1B2030; font-weight: 600; }
.jlegend-line { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #2B3550; margin: 6px 0 0; } .jlegend-line .sw { width: 26px; height: 11px; }
.jseq { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 6px; }
.jseq figure { margin: 0; } .jseq figure .jplate, .jdistract { border: 1px solid #2B3550; aspect-ratio: 1; }
.jseq figcaption { font-size: 12px; color: #5A6070; text-align: center; margin-top: 4px; }
.jarrow { font-size: 18px; color: #5A6070; }
.jdistract { display: flex; flex-direction: column; align-items: center; justify-content: center; background: #F4F5F8; }
.jdistract b { font: 600 22px "Martian Mono", monospace; color: #1B2030; } .jdistract span { font-size: 11px; color: #5A6070; }
.jstats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.jstats p { margin: 0; background: #EEF1F5; padding: 7px 9px; font-size: 12px; line-height: 1.35; color: #5A6070; } .jstats b { display: block; color: #1B2030; font-weight: 700; }
.jplate image { mix-blend-mode: multiply; } /* engraving paper is a hair off-white; multiply drops the box */

/* ── Look inside (owner 2026-10-12, picked from five trials): a contact sheet ABOVE the buy button.
   Five real pages flat in a row, warm paper dimmed but never desaturated (the grey filter read as
   cheap), hairline edge and soft shadow; the label sits underneath. Hover lifts a page into full
   light; a tap opens it in the <dialog>. ── */
.peek { margin: -6px 0 34px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.peek-row { display: flex; gap: 8px; }
.peek-page { width: 46px; padding: 0; border: 0; background: var(--paper); cursor: zoom-in;
  filter: brightness(.78) sepia(.18);
  box-shadow: 0 0 0 1px oklch(100% 0 0 / .08), 0 8px 18px oklch(5% 0.005 25 / .6);
  transition: transform .5s var(--ease), filter .35s var(--ease); }
.peek-page img { width: 100%; height: auto; display: block; }
.peek-page:hover, .peek-page:focus-visible { filter: none; transform: translateY(-6px) scale(1.35); position: relative; z-index: 2; outline: none; }
.peek-page:focus-visible { box-shadow: 0 0 0 2px var(--redhi); }
.peek-label { margin: 0; cursor: pointer; font: 400 21px/1.15 "Gloock", serif; color: var(--text); }
.peek-label i { font-style: normal; color: var(--redhi); display: inline-block; transition: transform .35s var(--ease); }
.peek-label:hover i { transform: translateX(4px); }
.peek-label span { margin-left: 12px; font: 500 10.5px/1 "Martian Mono", monospace; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; color: var(--mute); }
.peek-view { border: 0; padding: 0; background: transparent; max-width: min(92vw, 560px); max-height: 94dvh; overflow: visible; }
.peek-view::backdrop { background: oklch(9% 0.006 25 / .94); }
.peek-view img { width: 100%; height: auto; max-height: 80dvh; object-fit: contain; display: block; }
.peek-cap { color: var(--text); font-size: 15px; line-height: 1.45; margin: 12px 0 0; text-align: center; }
.peek-close { position: absolute; top: -40px; right: 0; background: none; border: 0; color: var(--text); font-size: 30px; cursor: pointer; min-width: 44px; min-height: 44px; }
.peek-nav { display: flex; justify-content: center; gap: 12px; margin-top: 10px; }
.peek-nav button { min-width: 44px; min-height: 44px; background: none; border: 1px solid var(--line); color: var(--text); font-size: 18px; cursor: pointer; }
@media (max-width: 860px) { .peek { margin: -10px 0 28px; } .peek-label { font-size: 18px; } .peek-label span { font-size: 9.5px; letter-spacing: .06em; } }
@media (prefers-reduced-motion: reduce) { .peek-page { transition: none; } }

/* ── legal pages (terms / privacy / refund), rendered from offer.js by legal.js ── */
.legal-page { --edge: max(var(--gutter), calc((100% - 68ch) / 2)); padding: clamp(56px, 9vw, 112px) var(--edge); }
.doc { max-width: 68ch; color: var(--soft); }
.doc h1 { font: 400 clamp(36px, 5vw, 56px)/1.05 "Gloock", serif; color: var(--text); margin-bottom: 10px; }
.doc h2 { font: 400 24px/1.2 "Gloock", serif; color: var(--text); margin: 44px 0 10px; }
.doc p, .doc li { margin: 0 0 12px; }
.doc ul { padding-left: 1.2em; }
.doc strong { color: var(--text); font-weight: 600; }
.doc a, .legal a, .back { color: var(--text); text-underline-offset: 4px; text-decoration-color: var(--line); }
.doc .updated { font: 500 12px/1 "Martian Mono", monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); margin-bottom: 36px; }
.doc .draft { color: var(--redhi); font-weight: 600; }
.back { display: inline-block; margin-top: 48px; padding: 12px 0; font-weight: 500; }
footer .legal { display: flex; flex-wrap: wrap; gap: 4px 24px; margin-top: 14px; font-size: 13px; }
footer .legal a { display: inline-block; padding: 12px 0; color: var(--mute); }
footer .legal a:hover { color: var(--text); }