/* Beltari landing — dark cover page for `/`. Self-contained: the cream
   style.css serves the inner content pages.

   DESIGN SCALE — everything rides Fibonacci / golden ratio:
   • Spacing (gaps, margins, padding, radii): Fibonacci px — 8/13/21/34/55/89/144.
   • Type ladder: 13 / 17 / 21 / 34 / 55 / 89. The upper steps 21→34→55→89 are
     golden-ratio jumps (×1.618 ≈ adjacent Fibonacci); 17 is the Apple-HIG body
     reading size between 13 and 21. Section heads 34, hero 55 (= 34×φ).
   • Body line-height = φ (1.618); headings 1.1–1.15.

   The section visuals are headline-less App Store composites (black canvas,
   white glow halo), so the page background must stay pure black. */
:root {
  --fg: #fff;
  --muted: rgba(255, 255, 255, 0.66);
  --subtle: rgba(255, 255, 255, 0.38);
  --hairline: rgba(255, 255, 255, 0.18);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: #000;
  color: var(--fg);
  line-height: 1.618; /* φ */
}
img { max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }

.landing > * { padding-left: 21px; padding-right: 21px; }

/* ---- Topbar brand (sticky) ---- */
.topbar {
  position: sticky; top: 0; z-index: 10;
  padding-top: 13px; padding-bottom: 16px;
  /* Calendar-screen top fade (TonightView.topFade): smoothstep curve
     (3t²−2t³ sampled at 7 points) from opaque black down to transparent,
     so scrolling content dissolves into black instead of cutting hard
     against a flat band. Brand row sits in the opaque upper portion. */
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 1.000) 0%,
    rgba(0, 0, 0, 0.896) 20%,
    rgba(0, 0, 0, 0.648) 40%,
    rgba(0, 0, 0, 0.500) 50%,
    rgba(0, 0, 0, 0.352) 60%,
    rgba(0, 0, 0, 0.104) 80%,
    rgba(0, 0, 0, 0.000) 100%
  );
}
.topbar-inner {
  max-width: 1080px; margin: 0 auto;
  display: flex; align-items: center; gap: 13px;
}
.topbar-brand {
  display: inline-flex; align-items: center; gap: 13px;
  color: inherit; text-decoration: none;
}
.topbar-brand img { border-radius: 8px; }
.wordmark { font-size: 21px; font-weight: 700; letter-spacing: -0.01em; }

/* ---- Hero ---- */
/* Flex column on mobile so the screenshot can lead (order:-1) with the copy
   below, matching the feature scenes' screenshot-on-top / text-below stacking.
   The <h1> stays first in the DOM (SEO); only the visual order changes. Desktop
   re-declares `display: grid` (below), where the same order:-1 puts the image
   in the left column. */
.hero { display: flex; flex-direction: column; text-align: center; padding-top: 34px; padding-bottom: 24px; }
.hero h1 { font-size: 55px; line-height: 1.1; max-width: 15ch; margin: 0 auto 21px; }
.hero .promo { font-size: 21px; color: var(--muted); max-width: 34em; margin: 0 auto 34px; }
.badge { display: inline-block; }
.badge img { display: block; }
.hero-img { order: -1; display: block; max-width: 330px; margin: 0 auto 34px; }
.hero-img img { width: 100%; }

/* ---- Feature scenes ---- */
.scene {
  max-width: 1080px; margin: 0 auto 89px;
  display: grid; grid-template-columns: 1fr; gap: 34px; align-items: center;
}
.scene:first-of-type { margin-top: 34px; } /* breathing room from the hero */
.scene picture { display: block; max-width: 330px; margin: 0 auto; }
/* Mobile: copy is centred under the stacked screenshot, matching the hero and
   privacy panel. Desktop re-aligns it left beside the phone (below). */
.scene-copy { text-align: center; }
.scene-copy h2 { font-size: 34px; margin-bottom: 13px; }
.scene-copy p { font-size: 17px; color: var(--muted); max-width: 34em; margin: 0 auto; }

/* ---- Privacy — screenshot-like horizontal panel ---- */
/* A single wide landscape rectangle holding the privacy copy, carrying the
   feature-scene phones' visual language (white glow halo + dark night-sky
   gradient with a faint star scatter) rather than a portrait device frame.
   Closes the page as one clean panel. */
.refusal { max-width: 1080px; margin: 0 auto 89px; }
.refusal-card {
  border-radius: 34px;
  padding: 55px 34px;
  text-align: center;
  background:
    radial-gradient(1.5px 1.5px at 12% 24%, rgba(255, 255, 255, 0.55), transparent 60%),
    radial-gradient(1px 1px at 27% 72%, rgba(255, 255, 255, 0.45), transparent 60%),
    radial-gradient(2px 2px at 7% 60%, rgba(255, 255, 255, 0.50), transparent 60%),
    radial-gradient(1px 1px at 48% 12%, rgba(255, 255, 255, 0.40), transparent 60%),
    radial-gradient(1.5px 1.5px at 73% 82%, rgba(255, 255, 255, 0.50), transparent 60%),
    radial-gradient(1px 1px at 90% 28%, rgba(255, 255, 255, 0.45), transparent 60%),
    radial-gradient(2px 2px at 95% 64%, rgba(255, 255, 255, 0.55), transparent 60%),
    radial-gradient(1px 1px at 62% 20%, rgba(255, 255, 255, 0.40), transparent 60%),
    linear-gradient(180deg, #070a13 0%, #0c1120 40%, #141d36 100%);
  box-shadow: 0 0 34px rgba(255, 255, 255, 0.12),
              0 0 89px rgba(255, 255, 255, 0.06);
}
.refusal-card h2 { font-size: 34px; margin-bottom: 13px; }
.refusal-card p { font-size: 17px; color: var(--muted); max-width: 50em; margin: 0 auto; }

/* ---- Final CTA ---- */
.cta { text-align: center; margin: 0 auto 89px; }
.cta p { font-size: 21px; margin-bottom: 21px; }

/* ---- Footer ---- */
footer { border-top: 1px solid var(--hairline); padding: 34px 21px 55px; text-align: center; }
footer nav { display: flex; gap: 21px; justify-content: center; flex-wrap: wrap; margin-bottom: 13px; }
footer a { font-size: 13px; color: var(--muted); text-decoration: none; }
footer a:hover { color: var(--fg); }
footer p { font-size: 13px; color: var(--subtle); }
footer .trademark { margin-top: 8px; font-size: 11px; }

/* ---- Desktop >= 840px ---- */
@media (min-width: 840px) {
  /* Two-column hero: phone left, copy right — tagline, badge, and the
     screenshot all share the fold (same image-left flag as the inner pages). */
  .hero {
    display: grid; grid-template-columns: auto 1fr; gap: 55px;
    align-items: center; max-width: 1080px; margin: 0 auto;
    text-align: left; padding-top: 8px;
  }
  .hero-img { order: -1; }
  .hero h1 { max-width: 12ch; margin: 0 0 21px; }
  .hero .promo { margin: 0 0 34px; max-width: 30em; }
  .hero-img { max-width: 377px; margin: 0; }
  /* Interlocked zig-zag: two columns, but BOTH the phone and its copy hug the
     centre line (justify-self) so the caption sits right beside its OWN
     screenshot — only the 55px gap between them — instead of the phone drifting
     to the outer edge with a wide void to the text. Phones cluster near centre,
     alternating side via `order`, and overlap 144px (fib) vertically; copies
     sit tight on the opposite side of centre. The copy is LEFT-aligned in every
     scene (no mirrored right-align). */
  .scene { grid-template-columns: 1fr 1fr; gap: 55px; }
  /* margin:0 resets the mobile `auto` margins — otherwise grid auto-margins
     override justify-self and re-centre the phone in its column. */
  .scene picture { max-width: 377px; justify-self: end; margin: 0; }
  .scene-copy { justify-self: start; max-width: 30em; text-align: left; }
  /* Flipped: phone to the right, copy to the left — copy still hugs the centre
     (flush against the phone) but stays left-aligned like every other scene. */
  .scene--flip picture { order: 2; justify-self: start; }
  .scene--flip .scene-copy { justify-self: end; }
  /* Pull each scene up 233 (fib) over the 89 base margin-bottom → 144 (fib)
     overlap, the phones slotting past each other near the centre line. */
  .scene + .scene { margin-top: -233px; }
  /* First scene interlocks up into the hero's empty lower-right: the hero's tall
     camera phone (left) makes its row taller than the short copy+badge (right),
     leaving a ~236px void below the badge. Pull the first scene up 144 (fib) so
     its right-side phone rises into that void (→ ~58px gap to the badge). Safe:
     the scene's LEFT copy is centred well below the hero phone's lower edge, and
     the phone stays clear of the badge. Cascades to later scenes (whole stack
     shifts up once). Desktop only — mobile stacks with no void. */
  .scene:first-of-type { margin-top: -144px; }
}