@charset "UTF-8";
/* ==========================================================================
   Rimdal — public site
   --------------------------------------------------------------------------
   Every colour below is a token from docs/art/MASTER_PALETTE.md, which is the
   source of truth for all illustration work in the product. Nothing here is
   eyeballed: the site uses the app's palette so that the site and the app look
   like the same thing, because they are.

   The two typefaces are the app's own, bundled from /fonts:
     Atkinson Hyperlegible Next — the interface, drawn for legibility
     Literata                   — the book voice, used here for headings
   ========================================================================== */

@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  src: url('../fonts/AtkinsonHyperlegibleNext-VF.woff') format('woff');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  src: url('../fonts/AtkinsonHyperlegibleNext-Italic-VF.woff') format('woff');
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Literata';
  src: url('../fonts/Literata-VF.woff') format('woff');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Literata';
  src: url('../fonts/Literata-Italic-VF.woff') format('woff');
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* --- palette tokens (MASTER_PALETTE.md) --- */
  --ink:          #1F2540;   /* neutral.ink   */
  --paper:        #FBFCF8;   /* neutral.paper */
  --indigo:       #4C6EF5;   /* ground.indigo */
  --indigo-deep:  #33418F;   /* ground.indigo.deep */
  --indigo-soft:  #A9B8F8;   /* ground.indigo.soft */
  --purple-deep:  #4C426A;   /* ground.purple.deep */
  --purple-soft:  #C0B6D7;   /* ground.purple.soft */
  --amber:        #F5B301;   /* lumi.amber — the brightest point of any scene */
  --glow:         #FFD666;   /* lumi.glow  */
  --warm:         #FF8A5B;   /* warm.accent */
  --mascot:       #9CACF5;   /* mascot.body */
  --cream:        #E0D3B8;   /* subject.cream */

  /* --- derived surfaces --- */
  --night:        #161C33;
  --night-2:      #232C51;
  --ink-70:       rgba(31, 37, 64, 0.72);
  --paper-70:     rgba(251, 252, 248, 0.76);
  /* 0.64, not 0.58: at 0.58 this lands on 4.15:1 against the lightest stop of
     the night gradient (#33418F) and misses AA. Measured by site/contrast.py. */
  --paper-55:     rgba(251, 252, 248, 0.64);
  --hairline:     rgba(31, 37, 64, 0.12);
  --hairline-lt:  rgba(251, 252, 248, 0.16);

  --font-ui:   'Atkinson Hyperlegible Next', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-book: 'Literata', Georgia, 'Times New Roman', serif;

  --r-sm: 12px;
  --r:    18px;
  --r-lg: 28px;
  --r-xl: 40px;

  --wrap: 1160px;
  --gut: clamp(1.25rem, 4vw, 2.5rem);

  --shadow-sm: 0 2px 10px rgba(31, 37, 64, 0.08);
  --shadow:    0 12px 34px rgba(31, 37, 64, 0.14);
  --shadow-lg: 0 26px 70px rgba(10, 14, 30, 0.42);
}

/* --------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}
body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { font-family: var(--font-book); font-weight: 620; line-height: 1.14; letter-spacing: -0.015em; margin: 0; text-wrap: balance; }
p { margin: 0 0 1.05em; text-wrap: pretty; }
a { color: inherit; }
ul, ol { margin: 0; padding: 0; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.wrap--narrow { max-width: 780px; }
.muted { color: var(--ink-70); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--amber); color: var(--ink);
  padding: .85rem 1.25rem; border-radius: 0 0 var(--r-sm) 0; font-weight: 700;
}
.skip-link:focus { left: 0; }

:where(a, button, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--amber);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Draft-language preview only: the untranslated markers are long unbreakable
   strings, and without this they overflow every box on the page. Never applied
   to a published language. */
.page--draft { overflow-wrap: anywhere; }

/* --------------------------------------------------------------- topbar */
.topbar {
  position: sticky; top: 0; z-index: 60;
  background: rgba(22, 28, 51, 0.92);
  backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid var(--hairline-lt);
  color: var(--paper);
}
.topbar__inner { display: flex; align-items: center; gap: 1rem; min-height: 72px; }

.wordmark { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; margin-right: auto; }
.wordmark__mark { width: 44px; height: 44px; filter: drop-shadow(0 3px 10px rgba(245, 179, 1, .35)); }
.wordmark__text {
  font-family: var(--font-book); font-weight: 700; font-size: 1.4rem;
  letter-spacing: -0.02em; color: var(--paper);
}
.wordmark--footer .wordmark__text { font-size: 1.55rem; }

.navtoggle {
  display: none; align-items: center; gap: .5rem;
  background: transparent; border: 1px solid var(--hairline-lt);
  color: var(--paper); font: inherit; font-weight: 600;
  padding: .5rem .85rem; border-radius: 999px; cursor: pointer;
}
.navtoggle__bars { display: inline-grid; gap: 4px; }
.navtoggle__bars span { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; }

/* The nav holds two children once a second language exists — the links and the
   switcher — so it has to be a row itself, not just its list. */
.nav { display: flex; align-items: center; }
.nav__list { display: flex; align-items: center; gap: .35rem; list-style: none; }
.nav__list a {
  display: block; padding: .5rem .7rem; border-radius: 999px;
  text-decoration: none; font-weight: 600; font-size: .95rem;
  color: var(--paper-70); transition: color .18s, background-color .18s;
}
.nav__list a:hover { color: var(--paper); background: rgba(251, 252, 248, .1); }

/* Language switcher. Emitted only when a visitor could actually reach more than
   one language, so it is absent while Swedish is the only published one. */
.langswitch { margin-left: .5rem; padding-left: .75rem; border-left: 1px solid var(--hairline-lt); }
.langswitch ul { display: flex; gap: .15rem; list-style: none; }
.langswitch a {
  display: block; padding: .4rem .6rem; border-radius: 999px;
  text-decoration: none; font-size: .88rem; font-weight: 600;
  color: var(--paper-70); transition: color .18s, background-color .18s;
}
.langswitch a:hover { color: var(--paper); background: rgba(251, 252, 248, .1); }
.langswitch a[aria-current] { color: var(--ink); background: var(--glow); }

@media (max-width: 900px) {
  .langswitch {
    margin: .75rem 0 0; padding: .75rem 0 0;
    border-left: 0; border-top: 1px solid var(--hairline-lt);
  }
  .langswitch ul { gap: .4rem; }
  .langswitch a { padding: .5rem .9rem; border: 1px solid var(--hairline-lt); font-size: .95rem; }
  .navtoggle { display: inline-flex; }
  .nav {
    position: absolute; inset: 72px 0 auto; display: none;
    background: var(--night); border-bottom: 1px solid var(--hairline-lt);
    padding: .5rem var(--gut) 1.1rem;
  }
  .nav.is-open { display: block; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__list a { padding: .85rem .25rem; border-bottom: 1px solid var(--hairline-lt); border-radius: 0; font-size: 1.05rem; }
}

/* --------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; gap: .7rem;
  padding: .95rem 1.5rem; border-radius: 999px;
  font-weight: 700; font-size: 1.02rem; text-decoration: none;
  border: 2px solid transparent; cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.btn--store { padding: .78rem 1.6rem; text-align: left; }
.btn__glyph { width: 26px; height: 26px; flex: none; }
.btn__stack { display: block; }
.btn__label { display: block; line-height: 1.2; }
.btn__sub { display: block; font-size: .74rem; font-weight: 500; opacity: .8; letter-spacing: .01em; line-height: 1.3; margin-top: 2px; }

.btn--primary { background: var(--amber); color: var(--ink); box-shadow: 0 10px 30px rgba(245, 179, 1, .34); }
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(245, 179, 1, .42); }

.btn--ghost { background: rgba(251, 252, 248, .07); color: var(--paper); border-color: var(--hairline-lt); }
.btn--ghost:hover { background: rgba(251, 252, 248, .13); }

.btn--secondary { background: var(--ink); color: var(--paper); }
.btn--secondary:hover { transform: translateY(-2px); box-shadow: var(--shadow); }

.btn--text { background: transparent; color: inherit; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; padding-inline: .5rem; }
.btn--text:hover { text-decoration-color: var(--amber); }

/* An App Store button with nowhere to go yet. It keeps the shape of the real
   thing and says what is true, rather than linking somewhere that does not
   exist. See build.py app_store_cta(). */
.btn.is-pending { cursor: default; }
.btn--primary.is-pending {
  background: rgba(245, 179, 1, .16); color: var(--paper);
  border-color: rgba(245, 179, 1, .55); box-shadow: none;
}
.btn--ghost.is-pending { color: var(--paper-70); }
.page--home .btn--primary.is-pending .btn__sub,
.page--policy .btn--primary.is-pending .btn__sub { opacity: .95; }

.section--paper .btn--primary.is-pending {
  background: rgba(31, 37, 64, .05); color: var(--ink);
  border-color: rgba(31, 37, 64, .28);
}

/* --------------------------------------------------------------- hero */
.hero {
  position: relative; overflow: hidden; color: var(--paper);
  background:
    radial-gradient(120% 90% at 78% 8%, rgba(245, 179, 1, .20) 0%, rgba(245, 179, 1, 0) 52%),
    radial-gradient(90% 70% at 12% 100%, rgba(76, 110, 245, .32) 0%, rgba(76, 110, 245, 0) 60%),
    linear-gradient(168deg, var(--night) 0%, #1B2444 46%, var(--indigo-deep) 100%);
  padding-block: clamp(3rem, 8vw, 6rem) clamp(3.5rem, 9vw, 7rem);
}
.hero__inner {
  display: grid; gap: clamp(2.5rem, 6vw, 4.5rem);
  grid-template-columns: 1fr; align-items: center; position: relative; z-index: 2;
}
@media (min-width: 980px) { .hero__inner { grid-template-columns: 1.05fr .95fr; } }

.eyebrow {
  font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--glow); margin: 0 0 1rem;
}
.eyebrow--dark { color: var(--indigo-deep); }

.hero__title { font-size: clamp(2.35rem, 5.4vw, 3.6rem); margin-bottom: 1.2rem; }
.glow-text {
  color: var(--glow);
  text-shadow: 0 0 34px rgba(255, 214, 102, .42);
}
.hero__lede { font-size: clamp(1.08rem, 1.7vw, 1.24rem); color: var(--paper-70); max-width: 34em; margin-bottom: 2rem; }

.hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.25rem; margin-bottom: 2.2rem; }

.hero__trust { display: flex; flex-wrap: wrap; gap: .55rem .7rem; list-style: none; }
.hero__trust li {
  font-size: .85rem; font-weight: 600; color: var(--paper-70);
  border: 1px solid var(--hairline-lt); border-radius: 999px; padding: .35rem .85rem;
}
.hero__trust li::before { content: "✓"; color: var(--glow); margin-right: .45rem; font-weight: 800; }

/* stars */
.hero__sky, .cta__sky { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.star { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: var(--glow); opacity: .55; box-shadow: 0 0 8px 2px rgba(255, 214, 102, .35); }
.star--a { top: 12%; left: 8%; }
.star--b { top: 24%; left: 26%; width: 2px; height: 2px; opacity: .4; }
.star--c { top: 9%; left: 47%; }
.star--d { top: 38%; left: 4%; width: 2px; height: 2px; opacity: .35; }
.star--e { top: 62%; left: 17%; }
.star--f { top: 18%; left: 66%; width: 2px; height: 2px; opacity: .45; }
.star--g { top: 72%; left: 38%; width: 2px; height: 2px; opacity: .3; }
.star--h { top: 46%; left: 58%; opacity: .3; }

/* phone mock */
.hero__art { position: relative; display: flex; flex-direction: column; align-items: center; }
.phone {
  position: relative; margin: 0; width: min(340px, 82vw);
  border-radius: 42px; padding: 12px;
  background: linear-gradient(160deg, rgba(251, 252, 248, .22), rgba(251, 252, 248, .05));
  box-shadow: var(--shadow-lg), inset 0 0 0 1px rgba(251, 252, 248, .18);
}
.phone__screen { position: relative; border-radius: 32px; overflow: hidden; background: var(--night); }
.phone__screen > img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 42%; }
.phone__text {
  padding: 1.15rem 1.25rem 1.4rem;
  background: linear-gradient(180deg, rgba(22, 28, 51, 0) 0%, var(--night) 13%);
  margin-top: -30px; position: relative;
}
.phone__line { font-family: var(--font-book); font-size: 1.16rem; line-height: 1.72; margin: 0; color: var(--paper-55); }
.w { transition: color .2s; }
.w--read { color: var(--paper); }
.w--now {
  color: var(--ink); background: var(--glow); border-radius: 7px;
  padding: 1px 7px; box-shadow: 0 0 22px rgba(255, 214, 102, .55); font-weight: 600;
}

/* Sigel rides the progress line and leaves a trail behind — the same idea as in
   the app, where the line is interrupted under the figure rather than drawn
   behind it. */
.phone__track { position: relative; height: 34px; margin-top: 1rem; }
.phone__trail {
  position: absolute; left: 0; top: 50%; width: 62%; height: 3px; margin-top: -1.5px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(255, 214, 102, .1) 0%, var(--glow) 88%);
}
.phone__sigel {
  position: absolute; left: 58%; top: 50%; width: 62px;
  transform: translate(0, -58%) scaleX(-1);
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .5));
}
.phone__caption { margin: 1.35rem auto 0; font-size: .88rem; color: var(--paper-55); text-align: center; max-width: 32ch; }

/* --------------------------------------------------------------- sections */
.section { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.section--paper { background: var(--paper); color: var(--ink); }
.section--night {
  color: var(--paper);
  background:
    radial-gradient(80% 60% at 85% 0%, rgba(245, 179, 1, .13) 0%, rgba(245, 179, 1, 0) 55%),
    linear-gradient(180deg, var(--indigo-deep) 0%, var(--night) 100%);
}
.section--dusk {
  color: var(--paper);
  background:
    radial-gradient(70% 60% at 10% 10%, rgba(192, 182, 215, .18) 0%, rgba(192, 182, 215, 0) 60%),
    linear-gradient(180deg, var(--purple-deep) 0%, #3B3455 100%);
}

.section__head { max-width: 44rem; margin-bottom: clamp(2.2rem, 5vw, 3.4rem); }
.section__head h2 { font-size: clamp(1.85rem, 3.6vw, 2.75rem); margin-bottom: 1rem; }
.section__lede { font-size: clamp(1.02rem, 1.4vw, 1.14rem); margin: 0; }
.section--paper .section__lede { color: var(--ink-70); }
.section--night .section__lede, .section--dusk .section__lede { color: var(--paper-70); }
.section__action { margin: clamp(2rem, 4vw, 3rem) 0 0; }

/* --------------------------------------------------------------- steps */
.steps { display: grid; gap: 1.25rem; list-style: none; grid-template-columns: 1fr; counter-reset: s; }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } }
.step {
  position: relative; background: #fff; border: 1px solid var(--hairline);
  border-radius: var(--r-lg); padding: 2.4rem 1.6rem 1.7rem;
  box-shadow: var(--shadow-sm);
}
.step__num {
  position: absolute; top: -22px; left: 1.5rem;
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--amber); color: var(--ink);
  font-family: var(--font-book); font-weight: 800; font-size: 1.3rem;
  box-shadow: 0 8px 20px rgba(245, 179, 1, .34);
}
.step h3 { font-size: 1.28rem; margin-bottom: .6rem; }
.step p { margin: 0; color: var(--ink-70); font-size: .99rem; }

.callout {
  display: flex; gap: 1.4rem; align-items: flex-start; flex-wrap: wrap;
  margin-top: clamp(2rem, 4vw, 3rem);
  background: linear-gradient(135deg, rgba(255, 214, 102, .2), rgba(156, 172, 245, .16));
  border: 1px solid rgba(245, 179, 1, .35);
  border-radius: var(--r-lg); padding: 1.7rem;
}
.callout__sigel { width: 84px; flex: none; }
.callout__title { font-size: 1.25rem; margin-bottom: .55rem; }
.callout p { margin: 0; color: var(--ink-70); }
.callout > div { flex: 1 1 18rem; }

/* --------------------------------------------------------------- gallery */
/* Six 1:1 illustrations. The column counts are the divisors of six, so the grid
   is always exactly full — 2×3, then 3×2. An orphaned last row reads as a
   loading failure, which is exactly how the first build looked. */
.gallery { display: grid; gap: .9rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px) { .gallery { grid-template-columns: repeat(3, 1fr); gap: 1.1rem; } }
.gallery__item { margin: 0; border-radius: var(--r); overflow: hidden; background: var(--night-2); box-shadow: var(--shadow); }
.gallery__item img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; transition: transform .5s ease; }
.gallery__item:hover img { transform: scale(1.04); }
.gallery__note { margin: 1rem 0 0; font-size: .88rem; color: var(--paper-55); }

.titles { margin-top: clamp(2.5rem, 5vw, 3.75rem); border-top: 1px solid var(--hairline-lt); padding-top: clamp(2rem, 4vw, 2.75rem); }
.titles--first { margin-top: 0; border-top: 0; padding-top: 0; margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }

.booktrack {
  border-top: 1px solid var(--hairline-lt);
  padding-top: clamp(2rem, 4vw, 2.75rem);
  margin-bottom: clamp(1.5rem, 3vw, 2rem);
  max-width: 46em;
}
.booktrack__head { font-size: 1.35rem; margin-bottom: .8rem; }
.booktrack__lede { margin: 0; color: var(--paper-70); }
.booktrack__lede strong { color: var(--glow); font-weight: 700; }
.titles__head { font-size: 1.35rem; margin-bottom: 1.25rem; }
.titles__list { display: flex; flex-wrap: wrap; gap: .65rem; list-style: none; margin-bottom: 1.4rem; }
.titles__list li {
  font-family: var(--font-book); font-size: 1rem;
  background: rgba(251, 252, 248, .07); border: 1px solid var(--hairline-lt);
  border-radius: 999px; padding: .5rem 1.05rem; color: var(--paper);
}
.titles__note { margin: 0; color: var(--paper-70); max-width: 46em; font-size: .97rem; }

/* --------------------------------------------------------------- cards */
.cards { display: grid; gap: 1.1rem; grid-template-columns: 1fr; }
@media (min-width: 700px) { .cards { grid-template-columns: repeat(2, 1fr); } }
.card {
  background: #fff; border: 1px solid var(--hairline); border-radius: var(--r-lg);
  padding: 1.6rem; box-shadow: var(--shadow-sm);
}
.card h3 { font-size: 1.18rem; margin-bottom: .55rem; }
.card p { margin: 0; color: var(--ink-70); font-size: .99rem; }
.card--accent { background: linear-gradient(145deg, var(--ink), var(--indigo-deep)); border-color: transparent; color: var(--paper); }
.card--accent h3 { color: var(--glow); }
.card--accent p { color: var(--paper-70); }

.honesty {
  margin-top: clamp(2rem, 4vw, 3rem);
  border-left: 5px solid var(--warm);
  background: rgba(255, 138, 91, .07);
  border-radius: 0 var(--r) var(--r) 0;
  padding: 1.6rem 1.7rem .4rem;
}
.honesty__title { font-size: 1.22rem; margin-bottom: .7rem; }
/* Emphasis in a heading, borrowed from the UI italic rather than the book one.
   Measured: an <em> here was the page's only Literata-italic glyph run, and it
   pulled a 900 KB font file for a single word. Atkinson italic is already
   loaded for body emphasis, so this costs nothing. */
.stress { font-family: var(--font-ui); font-style: italic; font-weight: 700; letter-spacing: -0.005em; }
.honesty p { color: var(--ink-70); }

/* --------------------------------------------------------------- split */
.split { display: grid; gap: 1.5rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .split { grid-template-columns: 1.35fr .9fr; gap: 2.5rem; } }

.deflist { margin: 0; }
.deflist dt {
  font-family: var(--font-book); font-weight: 700; font-size: 1.12rem;
  color: var(--glow); margin-top: 1.4rem;
}
.deflist dt:first-child { margin-top: 0; }
.deflist dd { margin: .35rem 0 0; color: var(--paper-70); }

.split__aside {
  background: rgba(251, 252, 248, .07); border: 1px solid var(--hairline-lt);
  border-radius: var(--r-lg); padding: 1.7rem;
}
.split__aside h3 { font-size: 1.2rem; margin-bottom: .7rem; }
.split__aside p { color: var(--paper-70); }
.split__foot { margin: 0; font-size: .93rem; padding-top: .9rem; border-top: 1px solid var(--hairline-lt); }

/* --------------------------------------------------------------- privacy grid */
.privacy-grid { display: grid; gap: 1.1rem; grid-template-columns: 1fr; list-style: none; }
@media (min-width: 720px) { .privacy-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .privacy-grid { grid-template-columns: repeat(3, 1fr); } }
.privacy-grid li {
  background: #fff; border: 1px solid var(--hairline); border-radius: var(--r);
  padding: 1.4rem 1.4rem 1.1rem; box-shadow: var(--shadow-sm);
}
.privacy-grid h3 { font-size: 1.08rem; margin-bottom: .5rem; }
.privacy-grid h3::before { content: "●"; color: var(--amber); margin-right: .5rem; font-size: .7em; vertical-align: .18em; }
.privacy-grid p { margin: 0; color: var(--ink-70); font-size: .96rem; }
.privacy-grid .muted { display: block; margin-top: .5rem; font-size: .9rem; }

/* --------------------------------------------------------------- faq */
.faq { display: grid; gap: .7rem; }
.faq__item {
  background: rgba(251, 252, 248, .06); border: 1px solid var(--hairline-lt);
  border-radius: var(--r); overflow: hidden;
}
.faq__item summary {
  cursor: pointer; list-style: none; padding: 1.1rem 3rem 1.1rem 1.3rem;
  font-weight: 700; font-size: 1.04rem; position: relative;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: ""; position: absolute; right: 1.3rem; top: 50%;
  width: 10px; height: 10px; margin-top: -6px;
  border-right: 2.5px solid var(--glow); border-bottom: 2.5px solid var(--glow);
  transform: rotate(45deg); transition: transform .22s ease;
}
.faq__item[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq__item[open] { background: rgba(251, 252, 248, .1); }
.faq__body { padding: 0 1.3rem .35rem; }
.faq__body p { color: var(--paper-70); }
.faq__body a { color: var(--glow); }

/* --------------------------------------------------------------- final cta */
.cta {
  position: relative; overflow: hidden; text-align: center; color: var(--paper);
  padding-block: clamp(3.5rem, 8vw, 6rem);
  background:
    radial-gradient(70% 90% at 50% 0%, rgba(245, 179, 1, .26) 0%, rgba(245, 179, 1, 0) 58%),
    linear-gradient(180deg, var(--night) 0%, var(--indigo-deep) 100%);
}
.cta__inner { position: relative; z-index: 2; }
.cta__sigel { width: 128px; margin: 0 auto 1.4rem; filter: drop-shadow(0 14px 34px rgba(0, 0, 0, .45)); }
.cta__title { font-size: clamp(1.9rem, 4vw, 2.9rem); margin-bottom: 1rem; }
.cta__lede { color: var(--paper-70); font-size: 1.08rem; margin-bottom: 2rem; }
.cta__actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.5rem; }
.cta__fine { margin: 0; font-size: .92rem; color: var(--paper-55); }
.cta__fine a { color: var(--glow); }

/* --------------------------------------------------------------- page heads */
.pagehead {
  color: var(--paper); padding-block: clamp(2.75rem, 7vw, 4.5rem) clamp(2.25rem, 5vw, 3.25rem);
  background:
    radial-gradient(80% 90% at 80% 0%, rgba(245, 179, 1, .16) 0%, rgba(245, 179, 1, 0) 58%),
    linear-gradient(160deg, var(--night) 0%, var(--indigo-deep) 100%);
}
.pagehead h1 { font-size: clamp(2rem, 4.6vw, 3rem); margin-bottom: 1rem; }
.pagehead__lede { color: var(--paper-70); font-size: 1.08rem; max-width: 40em; }
.pagehead__meta { margin: 0; font-size: .9rem; color: var(--paper-55); }

/* --------------------------------------------------------------- policy */
.policy-layout { display: grid; gap: 2.5rem; padding-block: clamp(2.5rem, 6vw, 4rem); grid-template-columns: 1fr; }
/* A grid item defaults to min-width:auto, so it refuses to shrink below its
   content's min-content width. The policy tables carry min-width:30rem, which
   floored this column at 480px and made the whole PAGE scroll sideways on a
   phone — the table scrolled in its own box, but the box could not get smaller.
   Measured at 390px: scrollWidth 502 vs viewport 375. */
.policy-layout > * { min-width: 0; }
@media (min-width: 1000px) {
  .wrap.wrap--narrow.policy-layout { max-width: 1060px; grid-template-columns: 230px 1fr; gap: 3.5rem; }
  .policy-toc { position: sticky; top: 96px; align-self: start; }
}
.policy-toc__head { font-size: .82rem; text-transform: uppercase; letter-spacing: .09em; color: var(--ink-70); margin-bottom: .85rem; font-family: var(--font-ui); }
.policy-toc ol { list-style: none; display: grid; gap: .1rem; counter-reset: toc; }
.policy-toc li { counter-increment: toc; }
.policy-toc a { display: block; padding: .4rem .6rem; border-radius: 8px; text-decoration: none; font-size: .93rem; color: var(--ink-70); border-left: 2px solid var(--hairline); }
.policy-toc a:hover { color: var(--ink); background: rgba(76, 110, 245, .08); border-left-color: var(--indigo); }

.policy { max-width: 44rem; font-size: 1.03rem; }
.policy h2 { font-size: 1.5rem; margin: 2.6rem 0 .9rem; padding-top: .4rem; }
.policy h2:first-of-type { margin-top: 0; }
.policy h3 { font-size: 1.16rem; margin: 1.9rem 0 .6rem; }
.policy p { color: var(--ink-70); }
.policy strong { color: var(--ink); }
.policy ul { padding-left: 1.15rem; margin-bottom: 1.1rem; }
.policy li { margin-bottom: .5rem; color: var(--ink-70); }
.policy hr { border: 0; border-top: 1px solid var(--hairline); margin: 2.4rem 0; }
/* The policy autolinks a full Apple URL. Unbroken, it pushed 2px past the
   viewport on a 390px phone and made the whole page scrollable sideways. */
.policy a { color: var(--indigo-deep); text-underline-offset: 3px; overflow-wrap: anywhere; }
.policy code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em; background: rgba(76, 110, 245, .1); padding: .1em .4em; border-radius: 5px; }
.policy__note {
  margin: 1.5rem 0; padding: 1.15rem 1.35rem .25rem;
  background: rgba(255, 214, 102, .16); border-left: 4px solid var(--amber);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.policy__source { font-size: .9rem; color: var(--ink-70); font-style: italic; }

.table-scroll { overflow-x: auto; margin: 1.25rem 0 1.6rem; border: 1px solid var(--hairline); border-radius: var(--r-sm); }
.policy table { border-collapse: collapse; width: 100%; font-size: .95rem; min-width: 30rem; }
.policy th, .policy td { text-align: left; padding: .8rem 1rem; border-bottom: 1px solid var(--hairline); vertical-align: top; }
.policy thead th { background: rgba(76, 110, 245, .08); font-family: var(--font-ui); font-size: .84rem; text-transform: uppercase; letter-spacing: .05em; }
.policy tbody tr:last-child td { border-bottom: 0; }

/* --------------------------------------------------------------- plain pages */
.plainpage { padding-block: clamp(2.5rem, 6vw, 4rem); }
.plainpage__block { margin-bottom: 2.5rem; }
.plainpage__block h2 { font-size: 1.42rem; margin-bottom: .8rem; }
.plainpage__block p { color: var(--ink-70); }
.plainpage a { color: var(--indigo-deep); text-underline-offset: 3px; }
.contact__mail { font-family: var(--font-book); font-size: 1.25rem; font-weight: 600; }

.notice {
  background: rgba(76, 110, 245, .08); border: 1px solid rgba(76, 110, 245, .28);
  border-radius: var(--r); padding: 1.35rem 1.5rem .35rem; margin-bottom: 2.5rem;
}
.notice p { color: var(--ink-70); }
.notice--pending { background: rgba(255, 138, 91, .09); border-color: rgba(255, 138, 91, .4); }

/* --------------------------------------------------------------- footer */
.footer { background: var(--night); color: var(--paper); padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; }
.footer__grid { display: grid; gap: 2.25rem; grid-template-columns: 1fr; }
@media (min-width: 700px) { .footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1.1fr; gap: 2.5rem; } }
.footer__blurb { color: var(--paper-70); max-width: 26em; margin: 1rem 0 .6rem; }
.footer__market { margin: 0; font-size: .9rem; color: var(--paper-55); }
.footer__head { font-family: var(--font-ui); font-size: .82rem; text-transform: uppercase; letter-spacing: .09em; color: var(--glow); margin-bottom: .9rem; }
.footer__col ul { list-style: none; display: grid; gap: .5rem; }
.footer__col a { color: var(--paper-70); text-decoration: none; font-size: .97rem; }
.footer__col a:hover { color: var(--paper); text-decoration: underline; text-underline-offset: 4px; }
.footer__col--cta .btn { margin-top: .2rem; font-size: .92rem; padding: .7rem 1.15rem; }
.footer__col--cta .btn__label { white-space: nowrap; }

.footer__legal {
  margin-top: 2.75rem; padding-top: 1.75rem; border-top: 1px solid var(--hairline-lt);
  font-size: .88rem; color: var(--paper-55);
}
.footer__legal p { margin: 0 0 .5rem; }
.footer__legal a { color: var(--paper-70); }
.footer__disclaimer { font-size: .82rem; opacity: .8; }