/* ─────────────────────────────────────────────────────────────
   Self-hosted webfonts, copied byte-for-byte from the app
   (loreluna-app/public/fonts + src/fonts.css) so the landing page
   and the product render in the same two faces.

   No font host is contacted: these blocks are the app's own
   declarations with the url() targets rewritten from the app's
   absolute "/fonts/..." to "fonts/..." relative to THIS stylesheet,
   which is what lets the same file work both at the site root and
   under /v8-sternenhimmel-luxe/. Same weights, same styles, same
   font-display: swap, same unicode-range values.

   Licences (SIL OFL 1.1) and provenance ship next to the binaries in
   fonts/OFL-*.txt and fonts/PROVENANCE.md.
   ───────────────────────────────────────────────────────────── */

@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/cormorant-garamond-v21-latin-ext-italic.woff2") format("woff2");
  /* latin-ext */
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/cormorant-garamond-v21-latin-italic.woff2") format("woff2");
  /* latin */
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/cormorant-garamond-v21-latin-ext-italic.woff2") format("woff2");
  /* latin-ext */
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/cormorant-garamond-v21-latin-italic.woff2") format("woff2");
  /* latin */
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/cormorant-garamond-v21-latin-ext-normal.woff2") format("woff2");
  /* latin-ext */
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/cormorant-garamond-v21-latin-normal.woff2") format("woff2");
  /* latin */
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/cormorant-garamond-v21-latin-ext-normal.woff2") format("woff2");
  /* latin-ext */
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/cormorant-garamond-v21-latin-normal.woff2") format("woff2");
  /* latin */
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/cormorant-garamond-v21-latin-ext-normal.woff2") format("woff2");
  /* latin-ext */
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/cormorant-garamond-v21-latin-normal.woff2") format("woff2");
  /* latin */
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/atkinson-hyperlegible-next-v7-latin-ext-italic.woff2") format("woff2");
  /* latin-ext */
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/atkinson-hyperlegible-next-v7-latin-italic.woff2") format("woff2");
  /* latin */
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/atkinson-hyperlegible-next-v7-latin-ext-normal.woff2") format("woff2");
  /* latin-ext */
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/atkinson-hyperlegible-next-v7-latin-normal.woff2") format("woff2");
  /* latin */
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/atkinson-hyperlegible-next-v7-latin-ext-normal.woff2") format("woff2");
  /* latin-ext */
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/atkinson-hyperlegible-next-v7-latin-normal.woff2") format("woff2");
  /* latin */
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/atkinson-hyperlegible-next-v7-latin-ext-normal.woff2") format("woff2");
  /* latin-ext */
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/atkinson-hyperlegible-next-v7-latin-normal.woff2") format("woff2");
  /* latin */
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/atkinson-hyperlegible-next-v7-latin-ext-normal.woff2") format("woff2");
  /* latin-ext */
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/atkinson-hyperlegible-next-v7-latin-normal.woff2") format("woff2");
  /* latin */
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ─────────────────────────────────────────────────────────────
   LoreLuna · v8 Sternenhimmel Luxe
   The Sternenhimmel concept (v1) built with the Luxe plate
   language (v3): engraved lettering, hairline rules, no cards.

   2026-08-21 alignment pass: every token below now comes from the
   product itself (loreluna-app/src/index.css @theme, src/fonts.css,
   src/components/ui.tsx, src/components/VoiceStage.tsx), so the
   landing page and the app read as one surface. The composition,
   the copy and the structure are unchanged; only the tokens moved.

   Palette   night-deep #212329 · night #2A2C33 · night-hi #34363F
             gold #C8A56A · gold-lit #EBD3A0 · ivory #EDE6DA
   Type      Cormorant Garamond (display) / Atkinson Hyperlegible
             Next (body + engraved utility), both self-hosted
   Geometry  plate 22px · button 18px · quiet 16px · chip 12px
   ───────────────────────────────────────────────────────────── */

:root{
  /* Ground. The app's warm-night triple (--color-night-deep /
     --color-night / --color-night-hi); v8's blue-black void and its
     blue-shifted sky gradients are gone. */
  --void:      #212329;
  --night:     #2A2C33;
  --night-hi:  #34363F;
  --veil:      #2A2C33;

  /* Gold. --gold is already the app's --color-gold, unchanged since
     v1. The rest are the app's own steps: the button gradient stops
     and the focus-ring gold. */
  --gold:      #C8A56A;
  --gold-lit:  #EBD3A0;
  --gold-hi:   #F0DCB0;
  --gold-deep: #BC9856;
  --gold-ink:  #231C0E;   /* ink on a gold ground, app PrimaryAction */

  /* Text. The app's --color-paper-on-night and its two muted steps. */
  --ivory:     #EDE6DA;
  --ivory-hi:  #F4EEE2;   /* display headings, app HomeScreen h1 */
  --nebel:     #C2BAA9;   /* secondary prose, app Eyebrow/meta */
  --dusk:      #B9B2A4;   /* captions and footer, app TopBar meta */

  /* Hairlines stay gold: they are the page's structural device and
     gold is the app's one accent. The two --edge tokens are the
     app's own border values, used wherever a real control or plate
     needs an edge (buttons, chips, framed panels). */
  --hairline:    rgba(200,165,106,.26);
  --hairline-s:  rgba(200,165,106,.14);
  --edge:        rgba(237,230,218,.46);
  --edge-soft:   rgba(154,145,128,.40);

  --display: "Cormorant Garamond",Georgia,serif;
  --body: "Atkinson Hyperlegible Next",system-ui,sans-serif;

  --ease: cubic-bezier(.16,.84,.28,1);

  /* Geometry, from the app: --radius-plate plus the three arbitrary
     radii its buttons use (PrimaryAction 18, QuietButton 16, chips 12). */
  --r-plate: 22px;
  --r-btn:   18px;
  --r-quiet: 16px;
  --r-chip:  12px;

  --shell:  1180px;
  --gutter: clamp(1.4rem, 5.5vw, 4.5rem);
  --band:   clamp(4.75rem, 11vw, 9rem);
  /* Atkinson is a wide face; 46ch of it is a longer physical line than
     46ch of Avenir was, so the measure tightens to keep the same feel. */
  --measure: 42ch;

  /* one type scale, used everywhere. Cormorant Garamond sets smaller
     on the body than Didot did, so the display steps grew slightly. */
  --t-hero:    clamp(3.1rem, 8.8vw, 6rem);
  --t-h2:      clamp(2.15rem, 5.6vw, 3.7rem);
  --t-h3:      1.3rem;
  --t-lead:    clamp(1.14rem, 2.1vw, 1.36rem);
  --t-body:    1.1875rem;   /* 19px floor — the app's floor, same reason */
  --t-small:   1.03rem;
  --t-engrave: .78rem;
}

*,*::before,*::after{ box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  /* The page must never pan sideways. `clip` wins where supported: unlike
     `hidden` it does not create a scroll container, so position:fixed and
     vertical scrolling are untouched. `hidden` is the pre-Safari-16 fallback. */
  overflow-x:hidden;
  overflow-x:clip;
}
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--void);
  color:var(--ivory);
  font-synthesis-weight:none;
  font-family:var(--body);
  font-size:var(--t-body);
  line-height:1.68;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  overflow-x:clip;
}
svg{ display:block; max-width:100%; }
a{ color:inherit; }

/* ── The sky, fixed behind every section ─────────────────── */
.nightsky{
  position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;
  /* the moon and edge stars bleed past the box on purpose, so the clip is
     enforced rather than incidental */
  contain:paint;
  max-width:100vw;
  /* The app's own sky, from VoiceStage.tsx: a cool lift over the warm
     night triple. The landing scrolls, so the second gradient is
     stretched down the page instead of ending at one phone height. */
  background:
    radial-gradient(76% 30% at 50% 12%, rgba(96,100,118,.30) 0%, rgba(96,100,118,.13) 46%, rgba(96,100,118,0) 78%),
    radial-gradient(150% 108% at 50% 4%, var(--night-hi) 0%, var(--night) 46%, var(--void) 100%);
}
/* The app's fine grain overlay, same values, same blend mode. */
.nightsky::after{
  content:""; position:absolute; inset:0;
  opacity:.5; mix-blend-mode:overlay;
  background-image:radial-gradient(rgba(255,255,255,.04) .5px, transparent .6px);
  background-size:3px 3px;
}
/* The moon glow. On v8's near-black void its 68% cut-off was invisible;
   on the app's lifted warm ground the same falloff drew a visible disc
   edge across the page, so it is fainter and runs all the way out. */
.nightsky__moon{
  position:absolute; top:-22vw; right:-20vw;
  width:78vw; height:78vw;
  /* The radius is pinned to half the box and the centre is the box
     centre, so the gradient reaches full transparency exactly at the
     inscribed circle. With v8's off-centre `circle at 38% 38%` it did
     not: the element clipped it while it still carried alpha, which on
     the app's lifted ground drew a hard disc edge across the page. */
  background:radial-gradient(circle 39vw at 50% 50%,
    rgba(240,220,176,.05) 0%,
    rgba(240,220,176,.026) 34%,
    rgba(240,220,176,.009) 62%,
    rgba(240,220,176,0) 100%);
}
/* The app's canvas paints plain stars in --color-paper-on-night at .9
   alpha and gold stars in --color-gold; the same two inks here. */
.star{ position:absolute; border-radius:50%; background:var(--ivory); opacity:var(--o,.5); will-change:opacity, transform; }
.star--gold{ background:var(--gold); }
@keyframes twinkle{
  0%,100%{ opacity:var(--o); transform:scale(1); }
  50%    { opacity:calc(var(--o) * .22); transform:scale(.7); }
}

/* ── Layout primitives ───────────────────────────────────── */
.shell{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--gutter); }
main, .masthead, .foot{ position:relative; z-index:1; }
.band{ padding-block:var(--band); }
.band--tight{ padding-block:clamp(3.5rem,8vw,6rem); }

/* ── Type ────────────────────────────────────────────────── */
/* Cormorant Garamond is a light-bodied face; the app runs its display
   headings at 500 (HomeScreen, OwnerArchiveView) and its wordmark at
   600, so the landing uses the same two weights instead of 400. */
h1,h2,h3{ font-family:var(--display); font-weight:500; margin:0; }
h1{ font-size:var(--t-hero); line-height:1; letter-spacing:-.008em; color:var(--ivory-hi); }
h2{ font-size:var(--t-h2); line-height:1.06; letter-spacing:-.006em; max-width:19ch; color:var(--ivory-hi); }
h3{ font-size:var(--t-h3); line-height:1.3; letter-spacing:.005em; }
p{ margin:0; max-width:var(--measure); }

.lead{ font-size:var(--t-lead); line-height:1.62; color:var(--ivory); max-width:38ch; }
.dim{ color:var(--nebel); }

/* the engraved utility voice: every eyebrow, caption and plate marking */
/* The app's Eyebrow is uppercase 600 at 0.14em on an 18px meta size.
   Atkinson is wider than Avenir was, so v8's 0.3em would now read as
   scattered; the tracking follows the app instead. */
.eyebrow{
  font-size:var(--t-engrave); font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold); margin:0; max-width:none;
}

/* ── Hairline rule with a chapter label ──────────────────── */
.rule{ display:grid; grid-template-columns:auto 1fr; align-items:center; gap:1.4rem; }
.rule::after{ content:""; height:1px; background:var(--hairline); }
.rule .eyebrow{ white-space:nowrap; }
.rule + *{ margin-top:clamp(2.6rem,5.5vw,3.8rem); }

/* ── Buttons ─────────────────────────────────────────────── */
/* The app's PrimaryAction, value for value: 18px radius, weight 700,
   sentence case, the three-stop gold gradient, the gold drop glow and
   the inset white hairline. v8's sharp 2px uppercase plate CTA is what
   this replaces — the button a visitor presses here and the button
   they press one click later are now the same object.
   The app has no hover (it is a touch surface and uses whileTap); a
   pointer surface needs one, so hover lifts the gradient rather than
   inverting it, which a gradient cannot do cleanly. */
.cta{
  display:inline-flex; align-items:center; justify-content:center; gap:.7rem;
  min-height:58px; padding:1rem 2rem;
  font-family:var(--body); font-size:1.05rem; font-weight:700;
  letter-spacing:.2px; text-decoration:none;
  border-radius:var(--r-btn); border:none;
  background:linear-gradient(180deg,var(--gold-hi) 0%, var(--gold) 60%, var(--gold-deep) 100%);
  color:var(--gold-ink); cursor:pointer;
  box-shadow:0 14px 30px -12px rgba(200,165,106,.6), 0 0 0 1px rgba(255,255,255,.25) inset;
  transition:filter .35s var(--ease), box-shadow .35s var(--ease), transform .35s var(--ease);
}
.cta:hover{
  filter:brightness(1.06);
  box-shadow:0 18px 36px -12px rgba(200,165,106,.72), 0 0 0 1px rgba(255,255,255,.32) inset;
  transform:translateY(-1px);
}
.cta:active{ transform:translateY(0) scale(.985); }
.cta svg path{ fill:var(--gold-ink); }
.cta--sm{
  min-height:52px; padding:.85rem 1.5rem; font-size:.98rem;
  border-radius:var(--r-quiet);
}
@media (prefers-reduced-motion: reduce){
  .cta:hover, .cta:active{ transform:none; }
}

.quiet{
  display:inline-block;
  font-size:.95rem; letter-spacing:.02em; text-decoration:none; color:var(--ivory);
  padding-bottom:.35rem; font-weight:600;
  background-image:linear-gradient(var(--gold),var(--gold));
  background-repeat:no-repeat; background-position:0 100%; background-size:1.6rem 1px;
  transition:background-size .5s var(--ease);
}
.quiet:hover{ background-size:100% 1px; }

/* Inline link inside running prose. `.quiet` is a standalone link object (its
   gold stub grows on hover and it never wraps); inside a sentence it needs a
   plain underline that breaks across lines like the text around it. */
.ilink{
  color:var(--gold-lit);
  text-decoration:underline;
  text-decoration-color:var(--hairline);
  text-underline-offset:.24em;
}
.ilink:hover{ text-decoration-color:var(--gold); }

/* The app's mandatory focus ring, exactly: 3px #EBD3A0, offset 3, r6. */
:focus-visible{ outline:3px solid var(--gold-lit); outline-offset:3px; border-radius:6px; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:99;
  background:var(--gold); color:var(--gold-ink);
  padding:.85rem 1.4rem; font-size:.86rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; text-decoration:none;
  border-radius:var(--r-chip);
}
.skip:focus{ left:var(--gutter); top:.75rem; }

/* ── Masthead ────────────────────────────────────────────── */
.masthead__row{
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  padding-block:clamp(1.5rem,3.5vw,2.4rem);
  border-bottom:1px solid var(--hairline-s);
}
/* The app's wordmark (TopBar.tsx): Cormorant Garamond 600 at 24px,
   0.3px tracking, sentence case, #F3ECDF, 10px from the BrandMark.
   v8 set it uppercase at 0.42em, which is a different mark from the
   one every signed-in screen shows. It is now the same one. */
.wordmark{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--display); font-size:1.5rem; font-weight:600;
  letter-spacing:.3px; text-transform:none;
  text-decoration:none; color:#F3ECDF;
}
.wordmark svg{ flex:none; }
/* ── Language switch ─────────────────────────────────────
   Sits in the masthead row, outside .mast-nav, so it stays visible
   below 1080px where the section nav is hidden. Two hairline chips,
   the current one lit. Nothing here loads or measures anything. */
.lang-switch{
  display:inline-flex; align-items:center; gap:.1rem;
  border:1px solid var(--hairline); border-radius:var(--r-chip);
  padding:.18rem; margin-left:auto;
}
.lang-switch a{
  display:inline-block;
  padding:.36rem .62rem; border-radius:9px;
  font-family:var(--body); font-size:.7rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  text-decoration:none; color:var(--dusk);
  transition:color .35s var(--ease), background .35s var(--ease);
}
.lang-switch a:hover{ color:var(--gold); }
.lang-switch a[aria-current="true"]{
  color:var(--gold-ink); background:var(--gold); cursor:default;
}
@media (min-width:1080px){ .lang-switch{ margin-left:0; } }

.mast-nav{ display:none; align-items:center; gap:1.55rem; }
@media (min-width:1240px){ .mast-nav{ gap:2.1rem; } }
.mast-nav a{
  white-space:nowrap;
  font-size:.8rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  text-decoration:none; color:var(--nebel); transition:color .35s var(--ease);
}
.mast-nav a:hover{ color:var(--gold); }
@media (min-width:1080px){ .mast-nav{ display:flex; } }
/* The nav's last item is the access CTA: same engraved voice, gold and boxed. */
/* The app's chip geometry (12px radius, its --ll-quiet border and
   ground), so the nav's access control matches the app's TopBar chip. */
.mast-nav__cta{
  color:var(--gold-lit) !important;
  border:1px solid var(--edge);
  border-radius:var(--r-chip);
  background:rgba(247,242,234,.075);
  padding:.7rem 1.1rem;
  transition:background .35s var(--ease), border-color .35s var(--ease);
}
.mast-nav__cta:hover{
  border-color:rgba(237,230,218,.6);
  background:rgba(247,242,234,.12);
  color:var(--gold-hi) !important;
}

/* ── Hero ────────────────────────────────────────────────── */
.hero{ padding-block:clamp(3.5rem,9vw,7rem) clamp(4.5rem,10vw,8rem); }
.hero__grid{ display:grid; gap:clamp(3rem,7vw,4.5rem); }
@media (min-width:940px){
  .hero__grid{ grid-template-columns:minmax(0,1.02fr) minmax(0,.92fr); align-items:center; gap:clamp(3rem,6vw,5rem); }
}
.hero h1{ margin-top:1.7rem; }
.hero h1 em{ font-style:italic; color:var(--gold-lit); text-shadow:0 0 38px rgba(235,211,160,.4); }
.hero .lead{ margin-top:1.9rem; }
.hero__actions{ margin-top:clamp(2.4rem,5vw,3.2rem); display:flex; flex-wrap:wrap; align-items:center; gap:1.4rem 2.4rem; }
.hero__note{ margin-top:1.8rem; font-size:.92rem; color:var(--dusk); max-width:34ch; }

/* ── Constellation drawings ──────────────────────────────── */
.chart{ width:100%; height:auto; }
.cs-line{
  fill:none; stroke:var(--gold); stroke-width:1; stroke-opacity:.6;
  stroke-linecap:round; vector-effect:non-scaling-stroke;
}
.cs-line--faint{ stroke-opacity:.3; }
.cs-node{ transform-box:fill-box; transform-origin:center; }
/* Atkinson sets wider than Avenir at the same size, and these labels
   are laid out against fixed SVG coordinates, so the size and the
   tracking come down to keep every name inside its viewBox. */
.engraved{
  font-family:var(--body); font-size:11.5px; font-weight:600;
  letter-spacing:1.1px; text-transform:uppercase;
  fill:var(--ivory); fill-opacity:.85;
}
.engraved--gold{ fill:var(--gold-lit); fill-opacity:1; }
.engraved--sm{ font-size:9.5px; letter-spacing:1px; fill:var(--dusk); fill-opacity:1; }

/* below 780px SVG lettering would render under 8px, so it is replaced by
   real HTML text underneath the drawing */
.cs-lbl{ display:none; }
@media (min-width:780px){ .cs-lbl{ display:block; } }
.chart-cap{
  margin-top:1.8rem; padding-top:1.2rem; border-top:1px solid var(--hairline-s);
  max-width:none;
}
.chart-cap b{
  display:block; font-size:var(--t-engrave); font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--gold-lit);
}
.chart-cap span{
  display:block; margin-top:.5rem;
  font-size:.68rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--dusk);
}
@media (min-width:780px){ .chart-cap{ display:none; } }

/* ── So funktioniert's ───────────────────────────────────── */
.steps{ display:grid; gap:clamp(2.8rem,6vw,3.4rem); }
@media (min-width:820px){ .steps{ grid-template-columns:repeat(3,1fr); gap:clamp(2.4rem,4vw,3.4rem); } }
.step{ position:relative; display:grid; gap:1.05rem; align-content:start; }
.step__num{
  font-family:var(--display); font-size:clamp(2.1rem,4.4vw,2.9rem);
  line-height:1; color:var(--gold); letter-spacing:.04em;
}
/* the hairline under each numeral continues as a dotted constellation link
   into the next step — one device doing the work of two */
.step__line{ position:relative; height:1px; background:var(--hairline); margin-block:.3rem .5rem; }
.step:not(:last-child) .step__line::after{
  content:""; position:absolute; left:0; top:0;
  width:2px; height:calc(100% + 1.4rem);
  background-image:radial-gradient(circle, rgba(200,165,106,.55) 1px, transparent 1.5px);
  background-size:2px 9px; background-repeat:repeat-y;
  transform:translateY(1px);
  display:none;
}
@media (min-width:820px){
  .step:not(:last-child) .step__line::after{
    display:block;
    left:auto; right:calc(-1 * clamp(2.4rem,4vw,3.4rem)); top:0;
    width:clamp(2.4rem,4vw,3.4rem); height:2px;
    background-size:9px 2px; background-repeat:repeat-x;
  }
}
.step p{ font-size:var(--t-small); color:var(--nebel); max-width:34ch; }

/* ── Two-column blocks ───────────────────────────────────── */
.split{ display:grid; gap:clamp(2.8rem,7vw,4.5rem); align-items:center; }
@media (min-width:940px){
  .split{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(3.5rem,7vw,5.5rem); }
  .split--flip .split__visual{ order:-1; }
}
.split__copy > * + *{ margin-top:1.6rem; }
.split__visual{ width:100%; max-width:400px; margin-inline:auto; }
.visual-cap{
  margin:1.6rem auto 0; text-align:center;
  font-size:.7rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  line-height:1.9; color:var(--dusk); max-width:30ch;
}

/* ── The story plate (the one interactive moment) ────────── */
/* The app's plate geometry (--radius-plate 22px) and its warm night
   ground, instead of v8's 2px hairline frame on a blue-black panel. */
.story{
  background:linear-gradient(168deg, rgba(52,54,63,.88), rgba(33,35,41,.88));
  border:1px solid var(--edge-soft);
  border-radius:var(--r-plate);
  padding:clamp(1.4rem,3.4vw,2.2rem);
  box-shadow:0 18px 40px -22px rgba(0,0,0,.55), 0 1px 0 rgba(255,255,255,.06) inset;
}
.story__head{ display:flex; align-items:flex-start; gap:.9rem; }
.story__head svg{ flex:none; margin-top:.45rem; }
.story__title{ font-size:1.42rem; }
.story__meta{
  margin-top:.55rem; font-size:.68rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--dusk); max-width:none;
}
.wave{ width:100%; height:78px; margin:1.7rem 0 1.4rem; }
.wave line{ stroke:rgba(200,165,106,.42); stroke-width:1.4; stroke-linecap:round; vector-effect:non-scaling-stroke; transition:stroke .2s ease; }
.wave line.lit{ stroke:var(--gold-lit); }
/* The three stages of a story, as hairline rows under the engraved wave.
   Replaces the former example card (a fictional narrator with a fictional
   quote), which the page no longer carries. */
.story__flow{
  margin:.2rem 0 0; padding:0; list-style:none;
  counter-reset:flow;
  border-top:1px solid var(--hairline-s);
}
.story__flow li{
  counter-increment:flow;
  display:grid; grid-template-columns:auto 1fr; gap:0 1rem; align-items:baseline;
  /* the row text is one <span>, so the numeral and the text are the only two cells */
  padding:.95rem .2rem;
  border-bottom:1px solid var(--hairline-s);
  font-size:var(--t-small); line-height:1.6; color:var(--nebel);
}
.story__flow li::before{
  content:counter(flow, upper-roman);
  font-family:var(--display); font-size:1.25rem; line-height:1;
  color:var(--gold); min-width:1.6em;
}
.story__flow b{ color:var(--ivory-hi); font-weight:500; }

/* ── The engraved sky plate ──────────────────────────────── */
.plate-wrap{ margin-top:clamp(3rem,6vw,4.4rem); }
.plate{
  width:100%;
  background:var(--veil);
  border:1px solid var(--edge-soft);
  border-radius:var(--r-plate);
  padding:clamp(.6rem,1.6vw,1.1rem);
  box-shadow:0 18px 40px -22px rgba(0,0,0,.55);
}
.plate svg{ width:100%; height:auto; }
.plate-list{
  list-style:none; margin:2.2rem 0 0; padding:0;
  border-top:1px solid var(--hairline-s);
}
.plate-list li{
  display:flex; align-items:baseline; gap:1rem;
  padding:.9rem .2rem;
  border-bottom:1px solid var(--hairline-s);
  font-size:var(--t-small); letter-spacing:.01em;
}
.plate-list li::before{
  content:""; flex:0 0 auto; width:5px; height:5px;
  margin-top:.62em; border-radius:50%; background:var(--gold);
}
@media (min-width:780px){ .plate-list{ display:none; } }
.plate-foot{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:.8rem 2rem;
  margin-top:1.5rem;
  font-size:.7rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--dusk);
}

/* ── Three hairline columns ──────────────────────────────── */
.cols{ display:grid; gap:2.4rem; margin-top:clamp(3rem,6vw,4rem); }
@media (min-width:820px){ .cols{ grid-template-columns:repeat(3,1fr); gap:clamp(2rem,4vw,3.2rem); } }
.col{ border-top:1px solid var(--hairline); padding-top:1.4rem; }
.col h3{ font-size:1.18rem; }
.col p{ margin-top:.75rem; font-size:var(--t-small); color:var(--nebel); max-width:34ch; }

/* ── Vertrauen ───────────────────────────────────────────── */
.trust{ margin-top:clamp(2.6rem,5vw,3.4rem); }
.trust__row{
  display:grid; gap:.5rem 2.5rem; grid-template-columns:1fr;
  padding-block:1.6rem;
  border-top:1px solid var(--hairline-s);
}
.trust__row:last-child{ border-bottom:1px solid var(--hairline-s); }
@media (min-width:760px){ .trust__row{ grid-template-columns:minmax(0,16rem) minmax(0,1fr); align-items:baseline; } }
.trust__row h3{ color:var(--gold-lit); }
.trust__row p{ color:var(--nebel); font-size:var(--t-small); max-width:56ch; }

/* ── Closing ─────────────────────────────────────────────── */
.final h2{ max-width:15ch; }
.final .lead{ margin-top:1.8rem; }
.final__actions{ margin-top:clamp(2.4rem,5vw,3.2rem); display:flex; flex-wrap:wrap; align-items:center; gap:1.4rem 2.4rem; }
.final__fine{ margin-top:2rem; font-size:.92rem; color:var(--dusk); max-width:38ch; }

/* ── Footer ──────────────────────────────────────────────── */
.foot{ padding-bottom:clamp(2.5rem,5vw,3.5rem); }
.foot__inner{
  border-top:1px solid var(--hairline-s);
  padding-top:2.2rem;
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline;
  gap:1.4rem 2.5rem;
}
.foot__links{ display:flex; flex-wrap:wrap; gap:1.4rem 2.2rem; }
.foot__links a{
  font-size:.72rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  text-decoration:none; color:var(--dusk); transition:color .35s var(--ease);
}
.foot__links a:hover{ color:var(--gold); }
.foot__note{ font-size:.72rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--dusk); }

/* ── Motion ──────────────────────────────────────────────── */
.js .rv{ opacity:0; transform:translateY(20px); }
.js .rv.in{ opacity:1; transform:none; }
.rv{ transition:opacity 1s var(--ease), transform 1s var(--ease); }

.js .draw{ stroke-dasharray:1; stroke-dashoffset:1; }
.js .rv.in .draw{ stroke-dashoffset:0; transition:stroke-dashoffset 2.8s var(--ease) .3s; }
.js .draw--late{ transition-delay:1.4s !important; }
.js .pop{ opacity:0; }
.js .rv.in .pop{ opacity:1; transition:opacity 1.2s var(--ease) 1.4s; }

@keyframes breathe{ 0%,100%{ opacity:.3 } 50%{ opacity:.66 } }
.halo{ animation:breathe 7.5s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ opacity:1 } 50%{ opacity:.55 } }
.cs-node{ animation:pulse 6s ease-in-out infinite; }

.orbit{ transform-box:view-box; transform-origin:160px 170px; }
@keyframes turn{ to{ transform:rotate(360deg) } }
.orbit-1{ animation:turn 90s linear infinite; }
.orbit-2{ animation:turn 140s linear infinite reverse; }
.orbit-3{ animation:turn 200s linear infinite; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .js .rv{ opacity:1; transform:none; }
  .js .draw{ stroke-dashoffset:0; }
  .js .pop{ opacity:1; }
  .halo{ opacity:.48; }
  .star{ animation:none !important; }
  .orbit{ animation:none !important; }
}

/* ── Für wen (audience) ──────────────────────────────────── */
.who{ display:grid; gap:2.4rem; margin-top:clamp(2.6rem,5vw,3.6rem); }
@media (min-width:820px){ .who{ grid-template-columns:repeat(3,1fr); gap:2.6rem; } }
.who__item{ border-top:1px solid var(--hairline); padding-top:1.4rem; }
.who__item .eyebrow{ color:var(--gold); }
.who__item h3{ margin-top:.9rem; font-size:1.18rem; }
.who__item p{ margin-top:.75rem; font-size:var(--t-small); color:var(--nebel); max-width:36ch; }

/* ── Autorenstimme: the consent-gated block ──────────────── */
.consent{
  margin-top:clamp(2.8rem,6vw,4rem);
  border:1px solid var(--edge-soft);
  border-radius:var(--r-plate);
  background:rgba(52,54,63,.62);
  padding:clamp(1.7rem,4vw,2.6rem);
}
.consent h3{ color:var(--gold-lit); font-size:1.3rem; }
.consent > p{ margin-top:1rem; color:var(--nebel); font-size:var(--t-small); max-width:62ch; }
.consent__list{ margin:1.6rem 0 0; padding:0; list-style:none; display:grid; gap:.95rem; }
.consent__list li{
  position:relative; padding-left:1.5rem;
  font-size:var(--t-small); color:var(--nebel); max-width:60ch;
}
.consent__list li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:6px; height:6px; background:var(--gold); transform:rotate(45deg);
}
.consent__list b{ color:var(--ivory); font-weight:500; }

/* ── Zugang (access / pricing) ───────────────────────────── */
.access{ display:grid; gap:clamp(2.4rem,6vw,4rem); margin-top:clamp(2.4rem,5vw,3.4rem); }
@media (min-width:940px){ .access{ grid-template-columns:1.15fr .85fr; align-items:start; } }
.access__price{ border-top:1px solid var(--hairline); padding-top:1.5rem; }
.access__price dl{ margin:1.3rem 0 0; display:grid; gap:1.1rem; }
.access__price dt{
  font-size:var(--t-engrave); font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; color:var(--gold);
}
.access__price dd{ margin:.4rem 0 0; font-size:var(--t-small); color:var(--nebel); max-width:38ch; }

/* ── FAQ ─────────────────────────────────────────────────── */
.faq{ margin-top:clamp(2.6rem,5vw,3.4rem); max-width:70ch; }
.faq__item{ border-top:1px solid var(--hairline-s); }
.faq__item:last-child{ border-bottom:1px solid var(--hairline-s); }
.faq__item summary{
  cursor:pointer; list-style:none;
  display:flex; align-items:flex-start; justify-content:space-between; gap:1.5rem;
  padding:1.35rem 0; min-height:48px;
  font-family:var(--display); font-size:1.38rem; font-weight:500; line-height:1.3; color:var(--ivory-hi);
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary:hover{ color:var(--gold-lit); }
.faq__sign{ flex:none; position:relative; width:13px; height:13px; margin-top:.42em; }
.faq__sign::before,
.faq__sign::after{
  content:""; position:absolute; left:0; top:6px; width:13px; height:1px;
  background:var(--gold); transition:transform .35s var(--ease);
}
.faq__sign::after{ transform:rotate(90deg); }
.faq__item[open] .faq__sign::after{ transform:rotate(0deg); }
.faq__item p{
  margin:0 0 1.5rem; padding-right:2.5rem;
  font-size:var(--t-small); color:var(--nebel); max-width:60ch;
}
.faq__item p + p{ margin-top:-.6rem; }
@media (prefers-reduced-motion: reduce){
  .faq__sign::before, .faq__sign::after{ transition:none; }
}

/* ── Legal / document pages (impressum, datenschutz, agb) ─── */
.doc{ max-width:74ch; padding-block:clamp(3rem,7vw,5rem) clamp(3.5rem,8vw,6rem); }
.doc h1{ font-size:clamp(2.3rem,6vw,3.6rem); line-height:1.02; }
.doc__meta{
  margin-top:1.6rem; font-size:var(--t-engrave); font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--dusk);
}
.doc__lead{ margin-top:2rem; font-size:var(--t-lead); line-height:1.6; color:var(--ivory); max-width:50ch; }
.doc__notice{
  margin-top:2.4rem; border:1px solid var(--edge-soft); border-radius:var(--r-plate);
  background:rgba(52,54,63,.62); padding:1.5rem 1.6rem;
}
.doc__notice p{ margin:0; font-size:var(--t-small); color:var(--nebel); }
.doc__notice ul{ margin:1rem 0 0; padding-left:1.2rem; }
.doc__notice li{ font-size:.98rem; color:var(--nebel); margin-top:.5rem; }
.doc section{ margin-top:clamp(2.6rem,6vw,3.6rem); }
.doc section h2{ font-size:clamp(1.5rem,3.4vw,2rem); max-width:32ch; line-height:1.14; }
.doc section h2 + p{ margin-top:1.2rem; }
.doc section p{ font-size:var(--t-small); line-height:1.7; color:var(--nebel); max-width:66ch; }
.doc section p + p{ margin-top:1rem; }
.doc address{ font-style:normal; color:var(--ivory); }
.doc a:not(.cta):not(.quiet):not(.wordmark){
  color:var(--gold-lit);
  text-decoration:underline;
  text-decoration-color:var(--hairline);
  text-underline-offset:.24em;
}
.doc a:not(.cta):not(.quiet):not(.wordmark):hover{ text-decoration-color:var(--gold); }
/* Open judgment items, marked so nobody mistakes a draft value for a real one.
   Deliberately NOT nowrap: a long bracket must wrap on a 360px screen. */
.doc .ph{
  color:var(--gold-lit);
  font-family:var(--body); font-weight:600;
}
.doc__back{ margin-top:clamp(3rem,6vw,4rem); }

/* Visually hidden, still announced. Used where a chapter's heading is carried
   visually by the engraved rule label and would otherwise skip a level. */
.vh{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}