/* ==========================================================================
   Caribou — caribou.you
   Hand-written stylesheet. No framework, no build step.
   Design system per plan §4. Dark is default; light via prefers-color-scheme.
   All text/background token pairs target WCAG AA 4.5:1 in both themes.
   ========================================================================== */

/* ---- Fonts: self-hosted, Latin subset, variable. No third-party requests. -- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/font/inter.woff2') format('woff2');
}
@font-face {
  font-family: 'Inconsolata';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('/font/inconsolata.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/font/fraunces.woff2') format('woff2');
}

/* ---- Design tokens — warm & natural. Light is default; dark via media. ---- */
:root {
  /* Color — warm light (default): bone paper, pine green, gold */
  --bg: #f7f2e8;
  --surface: #efe7d6;
  --surface-raised: #fffdf7;
  --border: #e4dac4;
  --text: #2c2721;
  --text-secondary: #6a6153;
  --accent: #1f5a44;
  --accent-strong: #1f5a44;
  --accent-contrast: #ffffff;
  --gold: #8f6410;
  --gold-soft: #ddbb6a;
  --shadow: 0 18px 44px rgb(60 45 20 / 0.12);
  --focus: #1f5a44;

  /* Type */
  --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-display: 'Fraunces', Georgia, 'Times New Roman', 'Times', serif;
  --font-mono: 'Inconsolata', ui-monospace, 'Cascadia Code', 'SF Mono', Menlo, Consolas, monospace;

  /* Scale */
  --step-display: clamp(2.5rem, 6vw, 4.25rem);
  --step-h2: clamp(1.75rem, 3.5vw, 2.5rem);
  --step-h3: 1.25rem;
  --step-body: 1.0625rem;
  --step-small: 0.875rem;

  /* Layout & shape — softer radii read warmer/friendlier than the app's 4px */
  --maxw: 1120px;
  --prose: 72ch;
  --radius-control: 6px;
  --radius-card: 16px;

  /* Spacing (4px scale) */
  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-6: 1.5rem;   --s-8: 2rem;     --s-12: 3rem;    --s-16: 4rem;
  --section-pad: clamp(4rem, 10vw, 7rem);
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Warm charcoal dark: brown-black, sage/pine, warm gold */
    --bg: #17130d;
    --surface: #1f1a13;
    --surface-raised: #262019;
    --border: #3a3227;
    --text: #f1e9da;
    --text-secondary: #b3a890;
    --accent: #7bbf9f;
    --accent-strong: #2c7d5c;
    --accent-contrast: #ffffff;
    --gold: #d9b25e;
    --gold-soft: #e8ca86;
    --shadow: 0 20px 55px rgb(0 0 0 / 0.5);
    --focus: #7bbf9f;
  }
}

/* ---- Reset / base -------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5rem; /* clears the sticky header on anchor jumps */
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
body {
  font-family: var(--font-sans);
  font-size: var(--step-body);
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-synthesis: none;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration: underline; }
strong, b { font-weight: 600; }
p { text-wrap: pretty; }
code, kbd, samp, pre { font-family: var(--font-mono); }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Headings — Fraunces (warm serif) for the display sizes; Inter for small UI titles.
   text-wrap: balance evens out ragged line breaks (fixes hero orphans). */
h1, h2, h3, h4 { line-height: 1.15; font-weight: 600; letter-spacing: -0.01em; text-wrap: balance; }
h1, h2 { font-family: var(--font-display); letter-spacing: -0.015em; }
h1 { font-size: var(--step-display); line-height: 1.05; }
h2 { font-size: var(--step-h2); line-height: 1.1; }
h3 { font-size: var(--step-h3); }

/* ---- Utilities ----------------------------------------------------------- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--s-6); }
.section { padding-block: var(--section-pad); scroll-margin-top: 5rem; }
.section--alt { background: var(--surface); }
.section__head { max-width: 60ch; margin-bottom: var(--s-8); }
.section__head p { color: var(--text-secondary); margin-top: var(--s-3); }
.muted { color: var(--text-secondary); }
.small { font-size: var(--step-small); }
.lead { font-size: 1.1875rem; color: var(--text-secondary); }
.center { text-align: center; }

/* Spacing utilities (avoid inline style attributes — strict CSP has no
   'unsafe-inline' for style-src). */
.mt-4 { margin-top: var(--s-4); }
.mt-6 { margin-top: var(--s-6); }
.mt-8 { margin-top: var(--s-8); }
.mt-12 { margin-top: var(--s-12); }
.ml-auto { margin-left: auto; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--s-4); top: -3rem;
  background: var(--accent-strong); color: var(--accent-contrast);
  padding: var(--s-2) var(--s-4); border-radius: var(--radius-control);
  z-index: 100; transition: top 150ms ease-out;
}
.skip-link:focus { top: var(--s-4); }

/* ---- Buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font: inherit; font-weight: 600; line-height: 1;
  padding: 0.75rem 1.25rem; border-radius: var(--radius-control);
  border: 1px solid transparent; cursor: pointer;
  text-decoration: none; white-space: nowrap;
  transition: background 150ms ease-out, border-color 150ms ease-out, transform 150ms ease-out;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn--accent { background: var(--accent-strong); color: var(--accent-contrast); }
/* Darken on hover and keep white text — readable contrast in both themes. */
.btn--accent:hover { background: color-mix(in srgb, var(--accent-strong) 86%, #000); color: var(--accent-contrast); }
.btn--ghost { background: transparent; color: var(--text); border-color: var(--border); }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn--sm { padding: 0.5rem 0.85rem; font-size: var(--step-small); }

/* ---- Header / nav -------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  /* Opaque on purpose. A translucent background + backdrop-filter: blur() on a
     sticky header re-rasterizes everything behind the bar on every scroll
     frame — it pegs CPU/GPU and makes scrolling and anchor smooth-scroll janky.
     A solid background composites for free. */
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.nav { display: flex; align-items: center; gap: var(--s-6); height: 4rem; }
.brand { display: inline-flex; align-items: center; gap: var(--s-3); font-weight: 600; color: var(--text); text-decoration: none; letter-spacing: -0.01em; }
.brand:hover { text-decoration: none; }
.brand img { width: 28px; height: 28px; }
.brand span { font-size: 1.125rem; }
.nav__links { display: flex; gap: var(--s-6); margin-left: auto; }
.nav__links a { color: var(--text-secondary); text-decoration: none; font-size: 0.9375rem; }
.nav__links a:hover { color: var(--text); }
.nav__actions { display: flex; align-items: center; gap: var(--s-3); margin-left: var(--s-6); }
.nav__icon { display: inline-flex; color: var(--text-secondary); }
.nav__icon:hover { color: var(--text); }
.nav__icon svg { width: 22px; height: 22px; }

/* On narrow screens the anchor links collapse away (pure CSS, no hamburger). */
@media (max-width: 720px) {
  .nav__links { display: none; }
  .nav__actions { margin-left: auto; }
}

/* ---- Hero ---------------------------------------------------------------- */
.hero { padding-block: clamp(3rem, 8vw, 6rem); }
.hero__grid { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; grid-template-columns: 1fr; }
@media (min-width: 900px) { .hero__grid { grid-template-columns: 1.05fr 1fr; } }
.hero__title { max-width: 14ch; }
.hero__subhead { margin-top: var(--s-6); max-width: 46ch; font-size: 1.1875rem; color: var(--text-secondary); }
.hero__ctas { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-8); }
.hero__meta { margin-top: var(--s-6); font-size: var(--step-small); color: var(--text-secondary); }

/* ---- Screenshot frame ---------------------------------------------------- */
.frame {
  border: 1px solid var(--border); border-radius: var(--radius-card);
  background: var(--surface-raised); box-shadow: var(--shadow);
  overflow: hidden;
}
.frame__bar { display: flex; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--border); background: var(--surface); }
.frame__bar span { width: 10px; height: 10px; border-radius: 50%; background: var(--border); }

/* Every capture renders at one shared height and takes whatever width its own
   aspect ratio asks for, so the row of frames lines up however the shots were
   cropped. Overrides the base img reset (max-width:100%, height:auto). */
.frame img { display: block; height: var(--shot-h); width: auto; max-width: none; }

/* The frame is the enlarge trigger, so it is a real <button> — keyboard and
   screen-reader support come free, and no JS is involved. */
button.frame { display: block; width: fit-content; padding: 0; font: inherit; color: inherit; cursor: zoom-in; transition: border-color 150ms ease-out; }
button.frame:hover { border-color: var(--accent); }

/* ---- Trust strip --------------------------------------------------------- */
.trust { border-block: 1px solid var(--border); background: var(--surface); }
.trust__row {
  display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-8);
  padding-block: var(--s-6); align-items: center; justify-content: center;
  font-size: var(--step-small);
}
.trust__row a, .trust__row span { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--text-secondary); text-decoration: none; }
.trust__row a:hover { color: var(--text); }
.trust__row svg { width: 16px; height: 16px; color: var(--accent); flex: none; }

/* ---- Card grids ---------------------------------------------------------- */
.grid { display: grid; gap: var(--s-6); }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
@media (min-width: 700px) { .grid--2 { grid-template-columns: 1fr 1fr; } .grid--3 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }

.card {
  background: var(--surface-raised); border: 1px solid var(--border);
  border-radius: var(--radius-card); padding: var(--s-8);
  box-shadow: 0 1px 2px rgb(60 45 20 / 0.04), 0 12px 28px rgb(60 45 20 / 0.05);
}
.section--alt .card { background: var(--surface-raised); }
.card h3 { margin-bottom: var(--s-3); }
.card p { color: var(--text-secondary); }
.card__icon { color: var(--accent); margin-bottom: var(--s-4); }
.card__icon svg { width: 28px; height: 28px; }

.badge {
  display: inline-block; font-size: 0.75rem; font-weight: 600; line-height: 1;
  padding: 0.3em 0.6em; border-radius: 999px; letter-spacing: 0.01em;
  color: var(--accent); border: 1px solid var(--accent);
  vertical-align: middle; margin-left: var(--s-2);
}
.note {
  margin-top: var(--s-4); padding: var(--s-4) var(--s-6);
  border-left: 3px solid var(--accent); background: var(--surface-raised);
  border-radius: 0 var(--radius-control) var(--radius-control) 0;
  color: var(--text-secondary); font-size: var(--step-small);
}
.principle-close { margin-top: var(--s-8); max-width: 60ch; color: var(--text-secondary); }

/* ---- Supported assets ---------------------------------------------------- */
.asset-group { margin-top: var(--s-8); }
.asset-group h3 { font-size: 1rem; color: var(--text-secondary); font-weight: 600; margin-bottom: var(--s-4); }
.coins { display: flex; flex-wrap: wrap; gap: var(--s-6); }
.coin { display: flex; align-items: center; gap: var(--s-3); }
/* Coin logos render as-shipped: never clipped, masked, or border-radiused (§4.3). */
.coin img { width: 40px; height: 40px; object-fit: contain; border-radius: 0; }
.coin span { font-weight: 500; }
.coin small { display: block; color: var(--text-secondary); font-size: 0.8125rem; font-weight: 400; }
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }
.chip {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: var(--step-small); padding: 0.35rem 0.7rem;
  border: 1px solid var(--border); border-radius: 999px; color: var(--text-secondary);
}
.chip img { width: 18px; height: 18px; object-fit: contain; }
/* Curated cards carry a chip row at the top instead of an icon. */
.card > .chips:first-child { margin-top: 0; margin-bottom: var(--s-4); }

/* Demoted full asset list — native <details>, zero JS. */
.asset-all { margin-top: var(--s-12); border-top: 1px solid var(--border); }
.asset-all > summary {
  cursor: pointer; list-style: none; padding-top: var(--s-8);
  font-weight: 600; color: var(--accent);
  display: inline-flex; align-items: center; gap: var(--s-2);
}
.asset-all > summary::-webkit-details-marker { display: none; }
.asset-all > summary::after { content: "\203A"; font-size: 1.25em; line-height: 1; transition: transform 200ms ease-out; }
.asset-all[open] > summary::after { transform: rotate(90deg); }
.asset-all > summary:hover { text-decoration: underline; }
.asset-all__inner > .asset-group:first-child { margin-top: var(--s-6); }

/* ---- Screenshot gallery (CSS scroll-snap, zero JS) -----------------------
   Figures are sized by height, not width: --shot-h fixes every capture to the
   same height and each one is then as wide as its aspect ratio makes it. Flex
   rather than grid auto-columns, because the columns are deliberately unequal
   (the wide desktop shots are ~2.18:1, the send dialog ~1.19:1). The clamp
   keeps the shots from towering over a phone screen — tap to enlarge is what
   makes the detail readable there. */
.gallery {
  --shot-h: clamp(200px, 26vw, 360px);
  display: flex; align-items: start;
  gap: var(--s-6); overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: var(--s-4); scroll-padding-inline: var(--s-6);
}
.gallery:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.gallery > figure { flex: none; scroll-snap-align: start; }
.gallery figcaption { margin-top: var(--s-3); max-width: 52ch; font-size: var(--step-small); color: var(--text-secondary); }

/* ---- Lightbox -----------------------------------------------------------
   The [popover] attribute carries this on its own: click-outside dismisses,
   Escape closes, and it renders in the top layer above everything. No script,
   so the page stays zero-JS and the CSP still needs no script-src. The UA
   default for [popover] is position:fixed; inset:0; margin:auto — that is what
   centers it, so don't override those. */
.lightbox { padding: 0; border: 0; background: transparent; overflow: visible; }
.lightbox img {
  display: block; width: auto; height: auto;
  max-width: 90vw; max-height: 90vh;      /* full size, capped against the viewport */
  border-radius: var(--radius-card); box-shadow: var(--shadow);
}
/* Blur here is the one deliberate exception to the no-blur-on-fixed rule: this
   backdrop exists only while the lightbox is open, so it is not re-rasterizing
   on every scroll frame the way the sticky header did. Literal warm-charcoal
   rather than a token — ::backdrop inheritance is uneven across engines, and a
   dark scrim is right in both themes. */
.lightbox::backdrop { background: rgb(23 19 13 / 0.72); backdrop-filter: blur(10px); }

.lightbox__close {
  position: absolute; top: var(--s-3); right: var(--s-3);
  display: grid; place-content: center; width: 40px; height: 40px; padding: 0;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); color: var(--text); cursor: pointer;
  transition: border-color 150ms ease-out, color 150ms ease-out;
}
.lightbox__close:hover { border-color: var(--accent); color: var(--accent); }
.lightbox__close svg { width: 20px; height: 20px; }

/* Fade in rather than hard-cutting a full-screen overlay. If an engine lacks
   allow-discrete/@starting-style the transition is simply dropped and
   :popover-open still wins on specificity, so it opens instantly at full
   opacity — never stuck invisible. */
@media (prefers-reduced-motion: no-preference) {
  .lightbox, .lightbox::backdrop {
    opacity: 0;
    transition: opacity 160ms ease-out, display 160ms allow-discrete, overlay 160ms allow-discrete;
  }
  .lightbox:popover-open, .lightbox:popover-open::backdrop { opacity: 1; }
  @starting-style {
    .lightbox:popover-open, .lightbox:popover-open::backdrop { opacity: 0; }
  }
}

/* ---- Privacy-of-site strip ----------------------------------------------- */
.privacy-strip { display: grid; gap: var(--s-6); }
@media (min-width: 780px) { .privacy-strip { grid-template-columns: repeat(3, 1fr); } }
.privacy-strip .card__icon { margin-bottom: var(--s-3); }

/* ---- FAQ (native details/summary) --------------------------------------- */
.faq { max-width: var(--prose); }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary {
  cursor: pointer; list-style: none; padding: var(--s-6) 0;
  font-weight: 600; font-size: 1.0625rem; display: flex; justify-content: space-between; gap: var(--s-4);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; color: var(--accent); font-weight: 400; font-size: 1.5rem; line-height: 1;
  transition: transform 200ms ease-out;
}
.faq details[open] summary::after { content: "\2212"; } /* minus */
.faq details > *:not(summary) { padding-bottom: var(--s-6); color: var(--text-secondary); max-width: 68ch; }

/* ---- Footer -------------------------------------------------------------- */
.site-footer { border-top: 1px solid var(--border); background: var(--surface); padding-block: var(--section-pad) var(--s-12); }
.footer-grid { display: grid; gap: var(--s-8); grid-template-columns: 1fr 1fr; }
@media (min-width: 820px) { .footer-grid { grid-template-columns: 1.4fr repeat(4, 1fr); } }
.footer-brand p { color: var(--text-secondary); font-size: var(--step-small); margin-top: var(--s-4); max-width: 34ch; }
.footer-col h4 { font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-secondary); margin-bottom: var(--s-4); font-weight: 600; }
.footer-col ul { list-style: none; padding: 0; display: grid; gap: var(--s-3); }
.footer-col a { color: var(--text); text-decoration: none; font-size: 0.9375rem; }
.footer-col a:hover { color: var(--accent); }
.footer-bottom {
  margin-top: var(--s-12); padding-top: var(--s-6); border-top: 1px solid var(--border);
  display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6); align-items: center;
  color: var(--text-secondary); font-size: var(--step-small);
}
.footer-bottom .priv-line { margin-left: auto; }

/* ---- Legal pages: prose + sticky TOC ------------------------------------- */
.legal { padding-block: var(--s-16) var(--section-pad); }
.legal__layout { display: grid; gap: var(--s-12); grid-template-columns: 1fr; }
@media (min-width: 940px) { .legal__layout { grid-template-columns: 220px minmax(0, var(--prose)); justify-content: center; gap: var(--s-16); } }
.legal__header { margin-bottom: var(--s-12); }
.legal__header h1 { font-size: clamp(2rem, 4vw, 2.75rem); }
.legal__meta { margin-top: var(--s-4); color: var(--text-secondary); font-size: var(--step-small); display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6); }
.toc { position: sticky; top: 5rem; align-self: start; font-size: var(--step-small); }
@media (max-width: 939px) { .toc { position: static; border: 1px solid var(--border); border-radius: var(--radius-card); padding: var(--s-6); } }
.toc h2 { font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-secondary); margin-bottom: var(--s-4); }
.toc ol { list-style: none; padding: 0; display: grid; gap: var(--s-2); counter-reset: toc; }
.toc a { color: var(--text-secondary); text-decoration: none; }
.toc a:hover { color: var(--accent); }
.prose { max-width: var(--prose); }
.prose h2 { font-size: 1.5rem; margin-top: var(--s-12); margin-bottom: var(--s-4); scroll-margin-top: 5rem; }
.prose h3 { font-size: 1.15rem; margin-top: var(--s-8); margin-bottom: var(--s-3); }
.prose p, .prose li { color: var(--text); }
.prose p + p { margin-top: var(--s-4); }
.prose ul, .prose ol { margin-top: var(--s-4); padding-left: 1.5rem; display: grid; gap: var(--s-2); }
.prose a { color: var(--accent); }
.draft-banner {
  background: color-mix(in srgb, var(--accent) 14%, var(--bg));
  border: 1px solid var(--accent); border-radius: var(--radius-card);
  padding: var(--s-4) var(--s-6); margin-bottom: var(--s-12); font-size: var(--step-small);
}
.draft-banner strong { color: var(--text); }
/* Conspicuous all-caps legal blocks: kept verbatim, loosened for legibility. */
.prose .legal-caps { letter-spacing: 0.015em; line-height: 1.75; }

/* ---- Download page ------------------------------------------------------- */
.os-cards { display: grid; gap: var(--s-6); grid-template-columns: 1fr; }
@media (min-width: 760px) { .os-cards { grid-template-columns: 1fr 1fr; } }
.os-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); padding: var(--s-8); }
.os-card header { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-6); }
.os-card header svg { width: 26px; height: 26px; color: var(--accent); }
.os-card h3 { font-size: 1.125rem; }
.arch { display: grid; gap: var(--s-2); }
.arch a { display: flex; justify-content: space-between; gap: var(--s-4); align-items: baseline;
  padding: var(--s-3) var(--s-4); border: 1px solid var(--border); border-radius: var(--radius-control);
  text-decoration: none; color: var(--text); background: var(--surface-raised); }
.arch a:hover { border-color: var(--accent); }
.arch .arch__name { font-weight: 600; }
.arch .arch__size { color: var(--text-secondary); font-size: var(--step-small); font-family: var(--font-mono); }

.verify { margin-top: var(--s-12); }
.code {
  background: var(--surface-raised); border: 1px solid var(--border);
  border-radius: var(--radius-card); padding: var(--s-6);
  overflow-x: auto; font-family: var(--font-mono); font-size: 0.9375rem;
  line-height: 1.6; color: var(--text);
}
.code .c { color: var(--text-secondary); } /* comment */
.kv { display: grid; gap: var(--s-1); }

/* ---- 404 ----------------------------------------------------------------- */
.error-page { min-height: 62vh; display: grid; place-content: center; text-align: center; gap: var(--s-4); padding-block: var(--section-pad); }
.error-page img { width: 72px; height: 72px; margin: 0 auto var(--s-4); }
.error-page .btn { margin-top: var(--s-4); }

/* ---- Hero illustration (brand art, not a fake screenshot) ---------------- */
.hero__art {
  border: 1px solid var(--border); border-radius: var(--radius-card);
  overflow: hidden; box-shadow: var(--shadow); background: var(--surface-raised);
  aspect-ratio: 5 / 4;
}
.hero__art svg { width: 100%; height: 100%; }

/* ---- Promises: editorial columns, not boxed cards ----------------------- */
.promises { display: grid; gap: var(--s-12); }
@media (min-width: 820px) { .promises { grid-template-columns: 1fr 1fr; gap: var(--s-16); } }
.promise { border-top: 2px solid var(--gold); padding-top: var(--s-6); }
.promise__num { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; color: var(--gold); line-height: 1; }
.promise h3 { font-family: var(--font-display); font-size: clamp(1.4rem, 2.4vw, 1.75rem); margin: var(--s-3) 0 var(--s-4); }
.promise > p { color: var(--text-secondary); }

/* ---- Motion -------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}