/* Kinetic Obsidian — aizy.fit landing.
   Only what inline styles can't express lives here: @font-face, :hover, @keyframes.
   Everything else stays inline in index.html, as exported from Claude Design. */

/* Space Grotesk is a variable font: one file covers 400-700. Self-hosted rather than
   loaded from fonts.googleapis.com — hotlinking Google Fonts ships every visitor's IP
   to Google, which we neither disclose nor have consent for as an EU controller.
   Lives under fonts/ and NOT assets/: the apex proxies /assets to the API for exercise
   media, so a font there would be proxied away instead of served. */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/space-grotesk-latin.woff2') format('woff2');
  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;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background: #000;
  color: #ffffff;
  font-family: 'Space Grotesk', sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: #c8f906; text-decoration: none; }
::selection { background: #c8f906; color: #000; }

@keyframes aizyGlow {
  0%, 100% { opacity: .35; transform: scale(1); }
  50%      { opacity: .7;  transform: scale(1.08); }
}

.hero-glow { animation: aizyGlow 4.5s ease-in-out infinite; }

/* Section bands. DESIGN.md bans sectioning with lines, so boundaries are tonal instead:
   a warm near-black bloom whose corner alternates down the page, so consecutive sections
   are told apart by where the light falls rather than by a rule between them.
   Each bloom fades to pure #000 by 60%, well inside its own box, so adjacent bands meet
   black-on-black and the seam is invisible.
   The band must be full-bleed for this to work — the 1280px cap lives on .band-inner, or
   the gradient would stop mid-viewport and draw the very edge the rule forbids. */
.band       { position: relative; }
.band-inner { max-width: 1280px; margin: 0 auto; }
.band-l     { background: radial-gradient(120% 90% at 15% 0%, #14100c 0%, #000 60%); }
.band-r     { background: radial-gradient(120% 90% at 85% 0%, #14100c 0%, #000 60%); }

/* One layout primitive for every content row: copy and screenshot pushed to opposite
   edges, vertically centred. Every section uses it unchanged — the alternation is the
   only thing that varies.

   Sizing is width-driven ONLY. The sections previously mixed axes: containers were sized
   in vh while the images inside them were sized in vw, so how much of a shot got cropped
   (or whether a gap opened beneath it) depended on the window's aspect ratio rather than
   on any decision. Nothing here sets a height, so a shot can never be clipped and never
   leaves a gap. */
.row      { display: flex; flex-wrap: wrap; align-items: center;
            justify-content: space-between; gap: clamp(24px, 4vw, 64px); }
.shot     { flex: 0 0 auto; display: block; width: clamp(240px, 30vw, 330px);
            height: auto; border: 1px solid #1c1c1c; }

/* Copy neither grows nor takes a fixed basis — it hugs its content (`flex: 0 1 auto`).
   Both wrong answers were tried:
     `flex: 1 1 380px` — grew to swallow leftover space. Text is left-aligned inside, so the
       balance flipped with the image's side: image-right read as spread, image-left bunched
       both elements left with dead space to the right.
     `flex: 0 1 460px` — fixed block, but the visible text (h2's longest line ~385px, p capped
       at 34ch ~280px) is narrower than 460, so space-between pushed the BLOCK to the margin
       while the text stopped ~75px short of it. The shot has no such slack — 330px of pixels
       reaching its own edge — so image-right sections met the margin and text-right sections
       visibly didn't.
   Hugging the content makes the block's edge the text's edge, so space-between lands copy
   and shot on the margins identically whichever side each is on. */
.row-copy { flex: 0 1 auto; min-width: min(100%, 300px); }

/* The shot sits opposite its band's bloom, so each section has light on one side and mass
   on the other. Desktop only: below the breakpoint the row wraps, and because copy always
   comes first in the DOM every section stacks copy-then-shot — one mobile order
   throughout, rather than FUEL inverting itself the way wrap-reverse used to make it. */
@media (min-width: 900px) {
  .row-flip { flex-direction: row-reverse; }
}

/* Wrapped (mobile): the shot is alone on its flex line, where space-between would leave it
   flush left. Auto margins centre it under the copy. */
@media (max-width: 899px) {
  .shot { margin-left: auto; margin-right: auto; }

  /* Centre the column's headline and body copy, matching the final CTA band. The small
     uppercase labels ("01 — TRAIN", "AIZY — AI COACH") stay left — they read as tabs on
     the section rather than as part of the centred block. */
  .row-copy, .hero-copy { text-align: center; }
  .eyebrow                { text-align: left; }
  .hero-actions           { justify-content: center; }

  /* .row-copy hugs its content by design, so on a narrow screen it would be a ~300px
     block sitting flush left — centring text inside it would centre against the block,
     not the screen. Full width here so "centred" means centred on the phone. */
  .row-copy { flex-basis: 100%; }

  /* text-align centres the lines; these paragraphs are also max-width-capped blocks with
     `margin: … 0 0` set inline, which pins the BLOCK left. Auto margins centre the block
     itself — !important because a stylesheet rule cannot otherwise beat an inline style,
     and the export puts everything inline. Scoped to this query, so desktop is untouched. */
  .row-copy p, .hero-copy p {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* The hero's top padding exists to clear the fixed nav, but the export expressed it as
     18vh — scaling with screen HEIGHT for a nav whose height never changes. The taller the
     phone, the bigger the dead space: ~72px of gap at 792px tall, ~97px at 932px.
     A fixed value instead — nav (71px) + a 37px gap — so it reads the same on every phone.
     !important because the padding shorthand is inline. Desktop keeps the vh rhythm. */
  .hero-inner { padding-top: 108px !important; }
}

/* Store buttons. The ghost variant sits on #0F0F0F with a #333 hairline; on hover the
   hairline goes Electric Sulfur rather than the fill, keeping the accent scarce. */
.btn-ghost { transition: border-color .18s ease; }
.btn-ghost:hover { border-color: #c8f906; }

.btn-primary { transition: background-color .18s ease; }
.btn-primary:hover { background: #d7ff3a; }

/* App Store / Google Play pair must match exactly. The labels differ in width, so pin a
   shared min-width and let the content sit left of it. The transparent hairline on the
   primary variant keeps its box the same size as the bordered ghost variant. */
.store-btn {
  min-width: 220px;
  box-sizing: border-box;
  justify-content: flex-start;
}
.store-btn.btn-primary { border: 1px solid transparent; }

.footer-link { transition: color .18s ease; }
.footer-link:hover { color: #c8f906; }

/* Respect reduced-motion: the hero glow is decorative and pulses indefinitely. */
@media (prefers-reduced-motion: reduce) {
  .hero-glow { animation: none; }
  * { transition: none !important; }
}

/* ------------------------------------------------------------------ *
   Legal / support pages (privacy, terms, support, delete-account).
   Long-form reading, not marketing: one narrow measure, generous line
   height, the same Obsidian palette and Space Grotesk as the landing.
   The bloom band still frames the header so these pages feel of a piece
   with the site rather than a bolted-on document.
 * ------------------------------------------------------------------ */
.legal-head { padding: clamp(120px,16vh,180px) clamp(20px,5vw,72px) clamp(32px,6vh,64px); }
.legal-head .eyebrow { font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase;
                       color: #808080; font-weight: 600; margin-bottom: clamp(16px,3vh,28px); }
.legal-head h1 { margin: 0; font-weight: 700; text-transform: uppercase; line-height: 0.9;
                 letter-spacing: -0.03em; font-size: clamp(2.5rem,9vw,5rem); }
.legal-head .updated { margin: clamp(18px,3vh,28px) 0 0; font-size: 13px; letter-spacing: 0.04em;
                       text-transform: uppercase; color: #666; }

.legal { max-width: 760px; margin: 0 auto; padding: 0 clamp(20px,5vw,72px) clamp(80px,12vh,140px);
         color: #c4c4c4; font-size: 16px; line-height: 1.7; }
.legal h2 { color: #fff; font-weight: 700; text-transform: uppercase; letter-spacing: -0.01em;
            font-size: clamp(1.4rem,3.5vw,1.9rem); line-height: 1.1; margin: clamp(44px,7vh,72px) 0 18px; }
.legal h3 { color: #fff; font-weight: 700; font-size: 1.1rem; margin: 32px 0 12px; }
.legal p  { margin: 0 0 18px; }
.legal ul, .legal ol { margin: 0 0 18px; padding-left: 22px; }
.legal li { margin: 0 0 9px; }
.legal a { color: #c8f906; }
.legal a:hover { text-decoration: underline; }
.legal strong { color: #e8e8e8; font-weight: 700; }
.legal .lead { color: #a3a3a3; font-size: 17px; }
.legal hr { border: 0; height: 1px; background: #1c1c1c; margin: clamp(40px,6vh,64px) 0; }

/* "In Short" callouts and the medical/AI disclaimers: a tonal card, no hard border —
   an elevated Obsidian surface (#141414) with a sulfur spine on the left. */
.legal .callout { background: #121212; border-left: 3px solid #c8f906; padding: 16px 20px;
                  margin: 0 0 20px; color: #b4b4b4; font-size: 15px; }
.legal .warn { background: #17090c; border-left: 3px solid #FF3366; padding: 18px 22px;
               margin: 24px 0; color: #d8c2c6; }
.legal .warn strong { color: #FF6688; }

/* The registered-entity / DSA trader block that must appear in the legal pages themselves. */
.legal .trader { background: #0f0f0f; padding: 22px 24px; margin: 28px 0; color: #a3a3a3;
                 font-size: 14px; line-height: 1.6; }
.legal .trader strong { display: block; color: #fff; margin-bottom: 6px; letter-spacing: 0.02em; }

/* CCPA category table: no vertical rules, tonal row banding only (No-Line Rule). */
.legal .tbl-wrap { overflow-x: auto; margin: 0 0 22px; }
.legal table { border-collapse: collapse; width: 100%; min-width: 520px; font-size: 14px; }
.legal th { text-align: left; color: #fff; font-weight: 700; text-transform: uppercase;
            letter-spacing: 0.06em; font-size: 12px; padding: 12px 14px; background: #141414; }
.legal td { padding: 12px 14px; vertical-align: top; color: #b4b4b4; }
.legal tbody tr:nth-child(odd) td { background: #0c0c0c; }
.legal td .yes { color: #c8f906; font-weight: 700; }
.legal td .no  { color: #777; font-weight: 700; }

/* Back-to-home affordance in the legal header. */
.legal-back { display: inline-block; margin-bottom: 20px; font-size: 12px; letter-spacing: 0.12em;
              text-transform: uppercase; color: #808080; }
.legal-back:hover { color: #c8f906; }