/* ═══════════════════════════════════════════════════════════════════════
   ModelSpin — "Optical Glass" design system. THIS FILE IS THE SYSTEM;
   the tokens below are the only authoritative copy of them.
   Lineage documented in DESIGN-RESEARCH.md. It began as site/design-b.html,
   a self-contained mock-up that was deleted once this file superseded it —
   by then 9 of the 15 tokens the two shared had drifted apart, and a second
   file claiming to define the same system is worse than no second file.

   · Raycast   — depth from a ramp of near-identical tinted greys + blur
                 rather than borders; gradient EDGE MASKS so panel content
                 fades at the boundary; positive micro-tracking on small text.
   · Resend    — gradient sweeps behind display type; a grain layer over the
                 dark ground; large fluid clamp() display sizes.
   · Railway   — every "black" is violet-tinted, so accent gradients read as
                 emerging from the ground rather than sitting on it.

   Contrast: every text/surface pair in this file is verified ≥ 4.5:1 against
   its COMPOSITED background (glass alpha flattened over the page ground),
   except large display type which is held ≥ 3:1 per WCAG 1.4.3.
   ═══════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  /* ── grey ramp: violet-tinted darks (Railway) ───────────────────── */
  --b900: #07070c;   /* page ground            */
  --b800: #0b0a12;   /* recessed              */
  --b700: #111019;   /* panel base            */
  --b600: #181723;   /* raised panel          */
  --b500: #1f1d2c;   /* highest surface       */

  /* ── ink ────────────────────────────────────────────────────────── */
  --fg:   #f2f1f6;   /* 17.4:1 on b900        */
  --fg2:  #cdcbd8;   /* 11.4:1 on b900        */
  --dim:  #9f9cb1;   /*  7.6:1 on ground · 4.8:1 worst-case (glass over peak glow) */

  /* ── accent ─────────────────────────────────────────────────────── */
  --brass:  #e0b45c;
  --brass2: #f2e3bd;
  --violet: #a78bff;
  --cyan:   #6fdcf5;
  --rose:   #f0938f;
  --ink-on-accent: #150f1c;

  /* ── glass ──────────────────────────────────────────────────────── */
  --glass:      linear-gradient(180deg, rgba(255,255,255,.062), rgba(255,255,255,.022));
  --glass-flat: rgba(255,255,255,.05);
  --glass-brd:  rgba(255,255,255,.10);
  --glass-brd-hi: rgba(255,255,255,.20);
  --glass-blur: blur(22px);
  --edge: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.02) 42%, rgba(255,255,255,0));
  --wash: linear-gradient(180deg, rgba(167,139,255,.09), transparent 62%);

  /* ── type ───────────────────────────────────────────────────────── */
  --sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  /* ── rhythm ─────────────────────────────────────────────────────── */
  --s1: 8px;  --s2: 16px; --s3: 24px; --s4: 32px;
  --s5: 48px; --s6: 48px;
  --r-sm: 11px; --r: 14px; --r-lg: 18px; --r-xl: 22px;
  --nav-h: 62px;
  --ease: cubic-bezier(.22,.61,.36,1);

  /* ── vertical rhythm: sections, seams, closing CTA ────────────────
     A <section> pays --pad-section-y top and bottom. Where two sections
     met, both used to pay in full and the seam cost 132px; now the lower
     one pays only --pad-seam there, so a seam is one step plus a nudge.
     The closing CTA collapses harder: the section above it drops to
     --pad-seam too and the band owns the rest, so its heading lands
     ~56px under the content instead of ~198px. Change these, not the
     paddings on the rules below — that is the point of the tokens. */
  --pad-section-y:  66px;
  --pad-seam:       24px;
  --pad-cta-top:    32px;
  --pad-cta-bot:    40px;
  --gap-cta-title:  10px;   /* CTA h2 -> subline   (was 14) */
  --gap-cta-sub:    18px;   /* CTA subline -> buttons (was 24) */
  --pad-footer-y:   38px;
  /* the page header on pricing/about/faq — the gap under the nav, and the
     drop to the first section. Last hold-out that was hard-coded. */
  --pad-page-top:   36px;
  --pad-page-bot:   36px;
}

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 14px); }

body {
  background: var(--b900);
  color: var(--fg);
  font: 400 15.5px/1.65 var(--sans);
  letter-spacing: .2px;            /* Raycast: positive micro-tracking */
  padding-top: var(--nav-h);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  position: relative;
}

/* ambient key lights — fixed, behind everything */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(760px 760px at 88% -6%,  rgba(167,139,255,.20), transparent 66%),
    radial-gradient(620px 620px at -8% 42%,  rgba(111,220,245,.10), transparent 66%),
    radial-gradient(680px 680px at 78% 104%, rgba(224,180,92,.11),  transparent 66%);
}
/* grain — Resend's texture layer, sits above ambient, below content */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: .17; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
body > * { position: relative; z-index: 1; }

a { color: var(--brass2); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; border-radius: 4px; }
img, svg, video { max-width: 100%; display: block; }

.wrap { max-width: 1140px; margin: 0 auto; padding: 0 26px; }

/* ── type scale ──────────────────────────────────────────────────── */
h1 {
  font: 700 clamp(40px, 6.4vw, 74px)/1.02 var(--sans);
  letter-spacing: -.042em; text-wrap: balance;
}
/* gradient-swept display type (Resend) */
h1 em {
  font-style: normal;
  background: linear-gradient(100deg, var(--brass) 0%, var(--brass2) 32%, var(--violet) 78%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
h2 {
  font: 700 clamp(27px, 3.5vw, 41px)/1.14 var(--sans);
  letter-spacing: -.035em; margin-bottom: 12px; text-wrap: balance;
}
h3 { font: 600 17px/1.32 var(--sans); letter-spacing: -.024em; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 14px; border-radius: 999px;
  background: var(--glass-flat); border: 1px solid var(--glass-brd);
  backdrop-filter: blur(10px);
  font: 500 11px/1 var(--mono); letter-spacing: .16em;
  color: var(--fg2); text-transform: uppercase; margin-bottom: 18px;
}
.eyebrow b { color: var(--brass); font-weight: 500; }
.lede { color: var(--fg2); font-size: 16.5px; max-width: 44em; margin: -4px 0 28px; }
/* 20px at desktop so the hero pitch still outranks the formats rule under
   it; the 1.1rem floor holds the phone at the 17.5px this always was, and
   the vw term only starts lifting past ~1100px. */
.sub  { color: var(--fg2); font-size: clamp(1.1rem, 1.6vw, 1.25rem); line-height: 1.6; max-width: 31em; margin: 18px 0 var(--s4); }

/* ── nav ─────────────────────────────────────────────────────────── */
nav {
  position: fixed; inset: 0 0 auto 0; z-index: 30; height: var(--nav-h);
  background: rgba(7,7,12,.66);
  backdrop-filter: blur(18px) saturate(1.5);
  border-bottom: 1px solid rgba(255,255,255,.07);
}
/* The nav runs full width while everything else stays in the 1140 column.
   .nav-in never centred its contents — the mark is the first flex item and
   .nav-links takes margin-left:auto — so the mark's inset came entirely from
   the shared .wrap column, which above 1140px pushes it 230px in at 1600.
   Scoped to nav on purpose: .wrap is shared by the hero, the CTA band and the
   footer, and they keep the column. Below 1140px this rule changes nothing,
   because the column is already narrower than its max-width there.
   Trade-off taken knowingly: the mark no longer lines up with the h1 beneath
   it on the marketing pages. On /app there is no column below the nav at all,
   and the mark now agrees with the control panel at left:14 instead of
   floating 240px to its right. */
nav .wrap { max-width: none; }
.nav-in { display: flex; align-items: center; gap: var(--s3); height: var(--nav-h); }
.mark { font: 500 14.5px/1 var(--mono); letter-spacing: .18em; color: var(--fg); white-space: nowrap; }
.mark:hover { text-decoration: none; }
.mark b { color: var(--brass); font-weight: 500; }
/* Aperture mark, inline SVG so it scales with the type and takes its colour
   from .mark b above via fill="currentColor". Sized in em for the same
   reason; the negative vertical-align drops it onto the wordmark's baseline. */
/* display:inline-block overrides the `img, svg, video { display: block }`
   reset above — as a block the mark drops onto its own line and
   vertical-align stops applying. */
.mark b svg { display: inline-block; width: 1.5em; height: 1.5em; vertical-align: -0.35em; }
.nav-links { display: flex; align-items: center; gap: var(--s3); margin-left: auto; }
.nav-links a:not(.btn) { color: var(--dim); font-size: 15.5px; transition: color .18s var(--ease); }
.nav-links a:not(.btn):hover { color: var(--fg); text-decoration: none; }
.nav-links a[aria-current] { color: var(--fg); }

/* ── buttons ─────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 22px; border-radius: var(--r);
  font: 500 13.5px/1 var(--sans); letter-spacing: .2px;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease),
              border-color .22s var(--ease), background .22s var(--ease);
  white-space: nowrap;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn-gold {
  color: var(--ink-on-accent);
  background: linear-gradient(180deg, var(--brass2), var(--brass));
  box-shadow: 0 1px 0 rgba(255,255,255,.42) inset, 0 10px 30px rgba(224,180,92,.22);
}
.btn-gold:hover { box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 16px 40px rgba(224,180,92,.32); }
.btn-ghost {
  border: 1px solid var(--glass-brd); background: var(--glass-flat);
  backdrop-filter: blur(10px); color: var(--fg);
}
.btn-ghost:hover { border-color: var(--glass-brd-hi); background: rgba(255,255,255,.08); }
.btn-sm { padding: 10px 18px; font-size: 13.5px; border-radius: var(--r-sm); }
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; }

/* ── glass surface (shared by card / price / look / band) ────────── */
.card, .price, .look, .band, .frame, .step, details {
  position: relative;
  border-radius: var(--r-lg);
  background: var(--glass);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-brd);
  overflow: hidden;
}
/* top edge highlight */
.card::before, .price::before, .look::before, .band::before,
.frame::before, .step::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: var(--edge); z-index: 2;
}
/* Raycast edge-mask: violet wash fading out before the panel bottom */
.card::after, .price::after, .look::after, .band::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--wash);
  -webkit-mask: linear-gradient(180deg, #000 55%, transparent);
          mask: linear-gradient(180deg, #000 55%, transparent);
}

/* ── hero ────────────────────────────────────────────────────────── */
.hero {
  display: grid; grid-template-columns: 1.06fr .94fr;
  /* Bottom pays a full section step like any other block: the seam rule below
     collapses the other half of the boundary, so this no longer stacks. It was
     trimmed to 40px when it did — see the note on the seam rule. */
  gap: var(--s5); align-items: center; padding: 36px 0 var(--pad-section-y);
}
.formats {
  margin-top: 32px; padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.07);
  /* Twice the 12px it used to be at desktop, floored at 16px so the vw term
     never takes it back below body size on a phone. Mono tracking eases from
     .1em to .04em on the way up — at 24px the old value ran the second line
     out of the hero column. Leading is tight (1.3) to keep the two lines
     reading as one block rather than two stacked paragraphs. */
  font: 500 clamp(1rem, 2.2vw, 1.5rem)/1.3 var(--mono);
  letter-spacing: .04em; color: var(--dim); text-wrap: balance;
}
.formats b, .formats .private { display: block; }
.formats b { color: var(--fg2); font-weight: 500; }
.formats .private { color: var(--brass); }

/* hero media panel + drifting key light */
/* 16:9 matches the demo export, so the loop plays uncropped — a 4:3
   panel would cover-crop the model's tail at its broadside. */
.frame { aspect-ratio: 16 / 9; box-shadow: 0 30px 70px rgba(0,0,0,.55); }
.frame-vid {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; z-index: 2;
}
.frame::after {                        /* the key light */
  content: ""; position: absolute; inset: -10%; z-index: 3; pointer-events: none;
  border-radius: 50%; filter: blur(58px); mix-blend-mode: screen;
  background: radial-gradient(circle at 34% 26%, rgba(255,240,210,.26), transparent 58%);
  animation: keylight 11s ease-in-out infinite;
}
@keyframes keylight {
  0%, 100% { transform: translate(-5%, -3%); }
  50%      { transform: translate(6%, 4%); }
}
.frame-cap {
  position: absolute; left: 14px; bottom: 12px; z-index: 4;
  font: 500 10.5px/1 var(--mono); letter-spacing: .2em;
  color: var(--fg2); text-transform: uppercase;
  background: rgba(7,7,12,.72); padding: 6px 9px; border-radius: 6px;
  backdrop-filter: blur(6px);
}

/* ── sections ────────────────────────────────────────────────────── */
section { padding: var(--pad-section-y) 0; }
/* Two stacked sections each paid a full step; the boundary only needs one. */
section + section { padding-top: var(--pad-seam); }
/* The home hero is a <header>, not a <section>, so the rule above never fired
   at the hero -> first-section boundary: that seam paid a full step on BOTH
   sides while every seam below it paid one, and the hero's bottom padding had
   been trimmed to 40px to hide it. This is the actual cause, so it is fixed
   here and the hero pays a normal step again.
   `~` not `+`: the reduced-motion <script> for the hero video sits between the
   two, and an adjacent-sibling selector stops at it. Scoped through .hero so
   it cannot reach pricing/about/faq, which have no hero and open on a
   .page-head handled by the rule below. */
.hero ~ section:first-of-type { padding-top: var(--pad-seam); }
/* .page-head closes with its own bottom padding, so the section under it
   adds nothing. (Replaces the inline padding-top:0 the pages carried.) */
.page-head + section { padding-top: 0; }
.center { text-align: center; }
.center .lede, .center > p { margin-left: auto; margin-right: auto; }
.center .ratios { justify-content: center; }
.center .looks { text-align: left; }

.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); }

.card { padding: var(--s4) var(--s3); transition: transform .22s var(--ease), border-color .22s var(--ease); }
.card:hover { transform: translateY(-3px); border-color: var(--glass-brd-hi); }
.card h3 { margin-bottom: 10px; }
.card p { color: var(--fg2); font-size: 14.5px; }
.k {
  display: block; margin-bottom: var(--s2);
  font: 500 10.5px/1 var(--mono); letter-spacing: .2em;
  color: var(--brass); text-transform: uppercase;
}

/* ── environment panels ──────────────────────────────────────────── */
/* Four across, one per environment in the app. At <=920px this drops to
   two, which makes it a 2x2 rather than leaving an orphan on row two. */
.looks { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s2); }
.look .sw { height: 118px; position: relative; }
.look .sw::after {
  content: ""; position: absolute; left: 50%; top: 52%;
  width: 52px; height: 52px; transform: translate(-50%,-50%); border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, rgba(255,255,255,.95), rgba(255,255,255,.18) 42%, rgba(0,0,0,.55) 78%);
  box-shadow: 0 10px 18px rgba(0,0,0,.5);
}
/* straight off the Daylight rig in App.jsx: the cool sky fill panel
   (0xcfe2ff) over the room colour (0x8fa3b8). */
.sw-daylight { background: linear-gradient(180deg,#cfe2ff,#8fa3b8); }
.sw-studio { background: linear-gradient(180deg,#d8d8dc,#6f7076); }
.sw-golden { background: linear-gradient(180deg,#f0c489,#7a4f28); }
.sw-neon   { background: linear-gradient(180deg,#2b2350,#0f1a34); }
.look span {
  display: block; padding: 13px 15px; position: relative; z-index: 2;
  font: 500 11px/1 var(--mono); letter-spacing: .14em;
  color: var(--fg2); text-transform: uppercase;
}

/* ── aspect ratios ───────────────────────────────────────────────── */
.ratios { display: flex; align-items: flex-end; gap: var(--s3); flex-wrap: wrap; }
.ratio { text-align: center; }
.ratio i {
  display: block; border-radius: var(--r-sm);
  border: 1px solid var(--glass-brd);
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), transparent 34%),
    linear-gradient(160deg, rgba(167,139,255,.42), rgba(224,180,92,.16) 62%, rgba(255,255,255,.05));
  backdrop-filter: blur(8px);
  transition: border-color .22s var(--ease), box-shadow .22s var(--ease);
}
.ratio:hover i { border-color: var(--glass-brd-hi); }
.ratio.r169 i { width: 172px; height: 97px; }
.ratio.r43  i { width: 136px; height: 102px; }
.ratio.r11  i { width: 108px; height: 108px; }
.ratio.r34  i { width: 86px;  height: 115px; }
.ratio.r916 i { width: 66px;  height: 117px; }
.ratio b { display: block; margin-top: 13px; font: 500 12.5px/1 var(--mono); letter-spacing: .06em; color: var(--fg); }
.ratio em { display: block; margin-top: 5px; font: 400 10.5px/1.4 var(--mono); font-style: normal; color: var(--dim); }
.ratio.hot i { border-color: rgba(224,180,92,.52); box-shadow: 0 0 34px rgba(224,180,92,.16); }
.ratio.hot b { color: var(--brass); }

/* ── steps ───────────────────────────────────────────────────────── */
.steps { counter-reset: s; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); }
.step { counter-increment: s; padding: var(--s4) var(--s3); }
.step h3 { margin-bottom: 8px; }
.step p { color: var(--fg2); font-size: 14.5px; }
.step h3::before {
  content: counter(s, decimal-leading-zero);
  display: inline-grid; place-items: center;
  width: 30px; height: 30px; border-radius: 50%; margin-bottom: 14px;
  font: 500 11.5px/1 var(--mono); color: var(--brass);
  background: rgba(224,180,92,.13); border: 1px solid rgba(224,180,92,.36);
}
.step h3 { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }

/* ── privacy band ────────────────────────────────────────────────── */
.band {
  padding: var(--s6) var(--s5);
  display: grid; grid-template-columns: 1.2fr .8fr; gap: var(--s5); align-items: center;
  border-radius: var(--r-xl);
}
.band h2 { margin-bottom: 14px; }
.band p { color: var(--fg2); }
.trace {
  position: relative; z-index: 2;
  font: 500 13px/2.5 var(--mono); letter-spacing: .05em; color: var(--fg2);
  border: 1px solid var(--glass-brd); border-radius: var(--r);
  background: var(--b800); padding: var(--s3);
}
.trace .no { color: var(--rose); margin-right: 10px; }
.trace b {
  color: var(--brass); font-weight: 600;
  display: inline-block; margin-top: 8px; padding-top: 10px;
  border-top: 1px solid var(--glass-brd);
}

/* ── cta band ────────────────────────────────────────────────────── */
/* The band owns the whole closing rhythm: its own section contributes
   nothing, and the section above it collapses to a seam. Without :has()
   support the seam rule is simply dropped and the gap falls back to a full
   step above the band — looser, never broken. */
.cta-sec { padding: 0; }
section:has(+ .cta-sec) { padding-bottom: var(--pad-seam); }
.cta-band { text-align: center; padding: var(--pad-cta-top) 0 var(--pad-cta-bot); }
.cta-band h2 { margin-bottom: var(--gap-cta-title); }
.cta-band p { color: var(--fg2); margin-bottom: var(--gap-cta-sub); }
.cta-band .cta-row { justify-content: center; }
.cta-band .lede { margin: 0 auto var(--gap-cta-sub); }

/* ── page head (pricing / about / faq) ───────────────────────────── */
.page-head { padding: var(--pad-page-top) 0 var(--pad-page-bot); }
.page-head h1 { font-size: clamp(36px, 5vw, 60px); }
.page-head .lede { margin-top: 18px; margin-bottom: 0; }

/* ── pricing ─────────────────────────────────────────────────────── */
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); align-items: stretch; }
.price { padding: 24px var(--s3); display: flex; flex-direction: column; }
.price > *:not(.tag) { position: relative; z-index: 2; }
.price.hot {
  border-color: rgba(224,180,92,.5);
  box-shadow: 0 0 0 1px rgba(224,180,92,.18), 0 24px 60px rgba(0,0,0,.5);
}
.price.hot::after { background: linear-gradient(180deg, rgba(224,180,92,.13), transparent 62%); }
.price .tag {
  position: absolute; top: 14px; right: var(--s3); z-index: 3;
  background: linear-gradient(180deg, var(--brass2), var(--brass));
  color: var(--ink-on-accent);
  font: 700 10px/1 var(--mono); letter-spacing: .16em;
  padding: 6px 10px; border-radius: 6px; text-transform: uppercase;
}
.price .amt { font: 700 44px/1 var(--sans); letter-spacing: -.035em; margin: 14px 0 4px; color: var(--fg); }
.price .per { color: var(--dim); font-size: 13px; min-height: 2.6em; }
.price ul { list-style: none; margin: var(--s3) 0; flex: 1; }
.price li {
  padding: 10px 0 10px 22px; font-size: 14.5px; color: var(--fg2);
  border-bottom: 1px solid rgba(255,255,255,.06); position: relative;
}
.price li::before { content: "◆"; position: absolute; left: 0; top: 11px; color: var(--brass); font-size: 8px; line-height: 1.9; }
.price li b { color: var(--fg); font-weight: 600; }
.price li:last-child { border-bottom: none; }
.price .btn { width: 100%; }
.fine { color: var(--dim); font-size: 13.5px; max-width: 52em; margin-top: 24px; line-height: 1.7; }

/* ── faq ─────────────────────────────────────────────────────────── */
.faq-list { max-width: 62em; display: flex; flex-direction: column; gap: 10px; }
details { padding: 2px var(--s3); transition: border-color .22s var(--ease); }
details:hover { border-color: var(--glass-brd-hi); }
details[open] { background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.026)); }
summary {
  cursor: pointer; padding: 15px 0 15px 26px; position: relative; z-index: 2;
  font: 600 16px/1.45 var(--sans); letter-spacing: -.018em; color: var(--fg);
  list-style: none; transition: color .18s var(--ease);
}
summary:hover { color: var(--brass); }
summary::-webkit-details-marker { display: none; }
summary::before {
  content: "◆"; position: absolute; left: 0; top: 17px;
  color: var(--brass); font-size: 9px; transition: transform .22s var(--ease);
}
details[open] summary::before { transform: rotate(45deg); }
details p { color: var(--fg2); padding: 0 0 16px 26px; max-width: 48em; position: relative; z-index: 2; }

/* ── prose (about) ───────────────────────────────────────────────── */
.prose { max-width: 40em; }
.prose p { color: var(--fg2); margin-bottom: var(--s3); font-size: 16.5px; }
/* trailing margins stack onto the section boundary below — pure dead space */
.prose p:last-child, .prose > :last-child { margin-bottom: 0; }
.faq-list > :last-child { margin-bottom: 0; }
.prose p b, .prose p strong { color: var(--fg); font-weight: 600; }
/* Links inside body copy carry their own underline. The global `a` is brass2
   on fg2 prose — a luminance step too small to read as a link when it sits
   mid-sentence rather than in nav, where position does the signalling. The
   404 page's recovery links are the case that needs it. */
.prose p a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.pull {
  position: relative; margin: 26px 0; padding: 20px var(--s3) 20px var(--s4);
  border-radius: var(--r-lg); color: var(--fg); font-size: 18px; line-height: 1.6;
  background: var(--glass); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-brd); border-left: 2px solid var(--brass);
}

/* ── footer ──────────────────────────────────────────────────────── */
footer { border-top: 1px solid rgba(255,255,255,.07); padding: var(--pad-footer-y) 0; margin-top: var(--pad-seam); }
.foot { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.foot a { color: var(--dim); font-size: 14px; transition: color .18s var(--ease); }
.foot a:hover { color: var(--fg); text-decoration: none; }
.foot .spacer { margin-left: auto; }
.foot .note { color: var(--dim); font: 500 11.5px/1 var(--mono); letter-spacing: .1em; }

/* ── responsive ──────────────────────────────────────────────────── */
@media (max-width: 920px) {
  .hero { grid-template-columns: 1fr; gap: var(--s5); padding-top: var(--s6); }
  .grid3, .steps, .price-grid { grid-template-columns: 1fr; }
  .band { grid-template-columns: 1fr; padding: var(--s5) var(--s3); }
  .looks { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  :root {
    --s6: 40px;
    --pad-section-y: 52px; --pad-seam: 18px;
    --pad-cta-top: 26px;   --pad-cta-bot: 32px;
  }
  .nav-links { gap: 15px; }
  .nav-links a:not(.btn) { display: none; }
  .ratios { gap: var(--s2); }
  .ratio.r169 i { width: 118px; height: 66px; }
  .ratio.r43  i { width: 96px;  height: 72px; }
  .ratio.r11  i { width: 76px;  height: 76px; }
  .ratio.r34  i { width: 62px;  height: 83px; }
  .ratio.r916 i { width: 48px;  height: 85px; }
  .cta-row .btn { flex: 1 1 100%; }
}

/* ── reduced motion ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .frame::after { animation: none; transform: translate(0, 0); }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}