/* Layout concept: the site alternates the app's two materials. Cover sections (wine red, gold) carry
   the voice; paper bands (guilloche) carry the proof. Stamps and screenshots sit on top like objects. */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--cover-deep); }
body { margin: 0; font: 400 var(--t-body)/1.55 var(--f-body); color: var(--on-cover); background: var(--cover); }
h1, h2, h3, p, figure, ol, ul { margin: 0; }
img { max-width: 100%; display: block; }
main { overflow-x: clip; } /* rotated stamps may poke a few px past the edge */
a { color: inherit; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { max-width: 72rem; margin-inline: auto; padding-inline: max(1rem, 4vw); }
.cover { background: var(--cover); color: var(--on-cover); }
.paper-band { background-color: var(--paper); background-image: var(--guilloche-tile); color: var(--paper-ink); }
section { padding-block: var(--s-8); }
section[id] { scroll-margin-top: 3.5rem; } /* clears the sticky header */

.eyebrow { font: 600 var(--t-label)/1 var(--f-body); letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin-bottom: var(--s-4); }
.eyebrow--ink { color: var(--pass-red); }
h1, h2 { font-family: var(--f-display); font-weight: 600; letter-spacing: .005em; text-wrap: balance; line-height: 1.02; }
h1 { font-size: var(--t-hero); }
h1 span { display: block; } /* one sentence per line; each wraps on its own when narrow */
h2 { font-size: var(--t-h2); }
h3 { font: 600 var(--t-h3)/1.1 var(--f-display); }
.section-title { max-width: 22ch; }
.lead { font-size: var(--t-lead); color: var(--on-cover-muted); max-width: 34rem; }
.lead-small { color: var(--on-cover-muted); max-width: 32rem; margin-top: var(--s-4); }

/* ---------- Header ---------- */
.top { position: sticky; top: 0; z-index: 10; padding-top: env(safe-area-inset-top, 0px);
  background: color-mix(in srgb, var(--cover) 92%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--cover-line); }
.top-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding-block: .85rem; }
.top-logo { display: block; }
.top-logo img { height: 40px; width: auto; }
.top-nav { display: flex; gap: var(--s-6); font: 500 1.05rem/1 var(--f-body); }
.top-nav a { text-decoration: none; color: var(--on-cover-muted); padding-block: .5rem; }
.top-nav a:hover { color: var(--gold); }
@media (max-width: 40rem) { .top-nav { display: none; } .top-logo img { height: 34px; } }

/* ---------- Hero ---------- */
.hero { padding-block: var(--s-7) var(--s-8); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--s-7); align-items: center; }
.hero-copy { display: grid; gap: var(--s-5); min-width: 0; }
.hero-copy .eyebrow { margin-bottom: 0; }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-5); margin-top: var(--s-2); }
.store-badge { display: inline-flex; align-items: center; gap: .6rem; padding: .55rem 1.1rem .55rem .9rem; border-radius: var(--r-button);
  background: var(--gold); color: #2A0A12; font: 600 1.15rem/1 var(--f-body); }
.store-badge svg { width: 1.6rem; height: 1.6rem; fill: currentColor; }
.store-badge small { display: block; font: 500 .7rem/1.1 var(--f-body); }
.link-quiet { color: var(--on-cover-muted); text-underline-offset: 4px; font-weight: 500; }
.link-quiet:hover { color: var(--gold); }
@media (max-width: 56rem) { .hero-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-7); } .hero { padding-top: var(--s-6); } }

/* The hero iPhone: titanium frame, the screenshots swipe inside the screen */
.hero-phone { display: grid; justify-items: center; gap: var(--s-4); min-width: 0; }
.iphone { position: relative; width: min(19rem, 78vw); aspect-ratio: 720 / 1565; padding: .6rem; border-radius: 3.1rem;
  background: linear-gradient(145deg, #3A3134, #120D0F 40%, #2A2225);
  box-shadow: 0 50px 70px -30px rgba(10, 2, 4, .85), 0 0 0 1.5px rgba(255, 255, 255, .14), inset 0 0 0 2px rgba(255, 255, 255, .08); }
.iphone::before { content: ""; position: absolute; right: -3px; top: 27%; width: 3px; height: 13%; border-radius: 0 3px 3px 0; background: #2A2225; }
.iphone-screen { height: 100%; border-radius: 2.55rem; overflow-x: auto; overflow-y: hidden; display: flex;
  scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; background: var(--cover-deep); }
.iphone-screen::-webkit-scrollbar { display: none; }
.iphone-screen:focus-visible { outline-offset: 6px; border-radius: 2.55rem; }
.iphone-screen img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; scroll-snap-align: center; scroll-snap-stop: always; user-select: none; -webkit-user-drag: none; }
.hero-caption { font: 600 1.3rem/1.2 var(--f-display); color: var(--on-cover); text-align: center; min-height: 1.3em; }
.hero-dots { display: flex; gap: .2rem; }
.hero-dots button { width: 2rem; height: 2rem; border: 0; padding: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.hero-dots button::after { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--on-cover-muted); opacity: .45; transition: opacity .2s, background .2s, scale .2s; }
.hero-dots button[aria-current="true"]::after { background: var(--gold); opacity: 1; scale: 1.25; }

/* Paper sheet (legal pages) */
.paper { background-color: var(--paper); background-image: var(--guilloche-tile); color: var(--paper-ink); border-radius: var(--r-paper); box-shadow: var(--shadow-paper); }

/* Stamps */
.stamp { width: 100%; height: 100%; max-width: 170px; overflow: visible; display: block; }
.stamp text { font-family: var(--f-display); font-weight: 700; fill: currentColor; stroke: none; }
.stamp text.st-date { font-family: var(--f-mono); font-weight: 500; }
.stamp text.st-sub { font-family: var(--f-body); font-weight: 600; }
.stamp .st-f { fill: currentColor; stroke: none; }
.stamp--ink, .stamp--pale { mix-blend-mode: multiply; transform: rotate(var(--rot, 0deg)); }
.stamp-box .stamp { transform: rotate(var(--rot, 0deg)); }
.stamp--ghost { color: var(--paper-ink); opacity: .66; }
.stamp--ghost.stamp--strong { color: var(--pass-red); opacity: 1; }
/* ---------- Rule ---------- */
.rule-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-7); align-items: center; }
.rule-copy { display: grid; gap: var(--s-4); }
.rule-copy .eyebrow { margin-bottom: 0; }
.rule-copy p { color: var(--paper-muted); max-width: 34rem; }
.rule-stamps { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); }
.rule-stamps figure { display: grid; gap: var(--s-3); justify-items: center; text-align: center; }
.stamp-box { width: min(100%, 13rem); aspect-ratio: 1; }
.stamp-box .stamp { max-width: none; }
.rule-stamps b { display: block; font: 600 1.2rem/1.1 var(--f-display); }
.rule-stamps span { font-size: var(--t-small); color: var(--paper-muted); }
@media (max-width: 52rem) { .rule-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Phones ---------- */
.phone { border-radius: var(--r-phone); padding: .45rem; background: #0E0A0B; box-shadow: 0 30px 50px -20px rgba(10, 2, 4, .7), inset 0 0 0 1.5px rgba(255, 255, 255, .12); max-width: 17rem; }
.phone img { border-radius: calc(var(--r-phone) - .45rem); width: 100%; height: auto; }
.phone--tilt { rotate: -3deg; }

/* ---------- Steps (a real sequence, so numbered) ---------- */
.steps { list-style: none; padding: 0; margin-top: var(--s-7); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-7) var(--s-6); }
.steps li { display: grid; gap: var(--s-4); align-content: start; }
.steps .phone { margin-bottom: var(--s-2); }
.steps h3 { display: flex; align-items: baseline; gap: .6rem; }
.step-no { font: 500 .9rem/1 var(--f-mono); color: var(--gold); }
.steps p { color: var(--on-cover-muted); }
@media (max-width: 56rem) { .steps { grid-template-columns: minmax(0, 1fr); max-width: 30rem; } .steps .phone { max-width: 15rem; } }

/* ---------- Memories ---------- */
.memories-grid { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-8); align-items: center; }
.memories-copy { display: grid; gap: var(--s-4); }
.memories-copy .eyebrow { margin-bottom: 0; }
.memories-copy p { color: var(--paper-muted); max-width: 34rem; }
@media (max-width: 52rem) { .memories-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); } .memories .phone { order: 2; max-width: 15rem; } }

/* ---------- Badges ---------- */
.badges-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-8); align-items: center; }
.seal-list { list-style: none; padding: 0; margin-top: var(--s-6); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); max-width: 32rem; }
.seal-list li { display: flex; align-items: center; gap: var(--s-3); }
.seal-list b { display: block; font: 600 1.15rem/1.1 var(--f-display); }
.seal-list small { color: var(--on-cover-muted); font-size: var(--t-small); }
.seal { width: 3.4rem; height: 3.4rem; flex: none; }
.seal-track { fill: none; stroke: var(--gold); stroke-opacity: .3; stroke-width: 1.5; }
.seal-prog { fill: none; stroke: var(--gold); stroke-width: 3; }
.seal-icon { stroke: var(--gold); opacity: .75; }
.seal--done .seal-fill { fill: var(--gold); }
.seal--done .seal-ring { fill: none; stroke: var(--cover-deep); stroke-width: 1; stroke-opacity: .6; }
.seal--done .seal-icon { stroke: var(--cover-deep); opacity: 1; }
@media (max-width: 52rem) { .badges-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); } .badges .phone { max-width: 15rem; } }
@media (max-width: 26rem) { .seal-list { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Promises ---------- */
.promise-list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); }
.promise-list li { display: grid; gap: var(--s-2); padding-top: var(--s-4); border-top: 2px solid var(--paper-ink); }
.promise-list p { color: var(--paper-muted); }
@media (max-width: 52rem) { .promise-list { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Closing & footer ---------- */
.closing { display: grid; justify-items: center; gap: var(--s-5); text-align: center; padding-block: var(--s-8); }
.closing-logo { width: min(14rem, 60vw); height: auto; }
.closing p { color: var(--on-cover-muted); font-size: var(--t-lead); }
.foot { padding-block: var(--s-5) calc(var(--s-5) + env(safe-area-inset-bottom, 0px)); background: var(--cover-deep); color: var(--on-cover-muted); font-size: var(--t-small); }
.foot-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-4); }
.foot nav { display: flex; flex-wrap: wrap; gap: var(--s-5); }
.foot a { text-underline-offset: 3px; }
.foot a:hover { color: var(--gold); }

/* ---------- Legal and support pages: paper sheet on the cover ---------- */
.doc-band { padding-block: var(--s-7) var(--s-8); }
.doc { max-width: 44rem; margin-inline: auto; padding: var(--s-7) clamp(1.25rem, 5vw, 3.5rem); }
.doc h1 { font-size: var(--t-h2); margin-bottom: var(--s-5); }
.doc h2 { font: 600 1.45rem/1.15 var(--f-display); margin: var(--s-6) 0 var(--s-3); }
.doc p, .doc address, .doc ul { margin-bottom: var(--s-4); color: var(--paper-ink); }
.doc ul { padding-left: 1.2rem; }
.doc address { font-style: normal; }
.doc a { color: var(--pass-red); text-underline-offset: 3px; }
.doc .meta { color: var(--paper-muted); font-size: var(--t-small); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
}