/* =============================================================================
   SOUL PILOT — SURFACE 1 STYLES
   frontend/css/surface1.css

   All Surface 1 (public marketing) styles. Hero section, manifest section,
   journey pillars, lineage cells, About Soul Pilot, the Horizon offer
   section, benediction coda, marketing footer, and the splash overrides
   that surface.js + shells/splash.js cooperate on.

   Renamed from surface.css on 2026-05-14 — symmetry with surface2.css and
   surface3.css. The two orphan "Surface 2" and "Surface 3" stub blocks at
   the file tail (`.threshold-form-chamber`, `.threshold-input`,
   `.return-note`) were dropped in the same pass; both were unused C1-era
   prototype rules with zero JS or HTML consumers. The long-absence return
   note feature was never built; if it ever lands, four lines of CSS get
   re-added in surface3.css alongside the JS that renders it.

   Loaded last in the app.html link chain so specificity wins for Surface 1.

   Source of truth for the Surface 1 styles below:
     reference/html/claude-design/claude-design-splash-1.html
   v2 copy overrides:
     docs/design/splash-1_text_revisions_v2.md
   Structural ruling layer:
     docs/design/surfaces-gap-inventory.md (Integration section)

   Eyebrow color on Surface 1: Daljeet 2026-04-24 call — wordmark + hero
   eyebrow + section eyebrows all use var(--gold-mid) on S1 for continuity
   with the reference's gold register. This supersedes the prior "horizon-
   blue for S1" reading of feedback_eyebrow_color_register.md.

   Marketing-register body type: 18-20px / 1.5 across .s1-* prose rules.
   This is distinct from the chamber-register 17px / 1.25 (tokens.css
   --type-body-size / --type-body-line) — Surface 1 readers are prospects
   skimming, not initiates contemplating. Do NOT consume the body-type
   tokens here.
   ============================================================================= */




/* =============================================================================
   S1 · STAGE + AMBIENT WORLD HOST
   The /index.html page mounts its own ambient world (starfield + aurora +
   horizon) via ambientWorld.js on DOMContentLoaded. Styles for #world and
   its three sub-layers live in shell.css; this section just paints the
   page body container and the horizontal-scroll guard.
   ============================================================================= */

body.surface-1 {
  background: var(--ocean-void);
  color: var(--parchment-mid);
  overflow-x: hidden;
}

body.surface-1 a { color: inherit; text-decoration: none; }


/* =============================================================================
   SPLASH OVERRIDES — S1 + S2 (top-anchored wordmark)
   Both Surface 1 (marketing landing) and Surface 2 (threshold_1 welcome
   arrival) anchor the splash wordmark/eyebrow/tagline to the upper third
   of the viewport rather than centering it over the astrolabe.

   History: S1 landed this register on 2026-04-24 (Daljeet — centered read
   too busy in the middle of the animation; top-aligned read too detached;
   landed between the two). E.1.a (2026-04-29) extends the same register to
   S2 so the two splash surfaces read symmetric in their wordmark
   positioning — the variable + keyframe were renamed from `--s1-sword-top`
   / `s1-sword-in` to `--splash-sword-top` / `splash-sword-in` to reflect
   the now-shared scope.

   The .sword node is hoisted out of .splash-instrument in splash.js so it
   can position relative to #splash (the viewport-filling overlay) — see
   shells/splash.js lines 386–408. Per-surface positioning is therefore
   purely a CSS concern.
   ============================================================================= */

/* ── Tunable: padding from the viewport top to the top edge of the .sword
      block. Single knob — adjust this value to shift the whole wordmark/
      tagline up or down as one unit. 0vh = top of viewport; 50vh = the
      top edge lands at the viewport center (block sits below the center). */
body.surface-1 #splash,
body.surface-2 #splash {
  --splash-sword-top: 24vh;
}

body.surface-1 #splash .sword,
body.surface-2 #splash .sword {
  top: var(--splash-sword-top);
  left: 50%;
  transform: translateX(-50%);
  animation: splash-sword-in 2s 3.2s var(--ease-unfurl) forwards;
}

/* Override the default fadeInUp keyframe (which ends at translate(-50%,
   -50%) for a centered register) with a small top-anchored slide-in that
   resolves at translate(-50%, 0) — matches the resting transform. */
@keyframes splash-sword-in {
  0%   { opacity: 0; transform: translate(-50%, -12px); }
  100% { opacity: 1; transform: translate(-50%, 0); }
}


/* =============================================================================
   S1 · MARKETING HEADER (Shell 1 top chrome)
   Reference: splash-1.html lines 132–145 (.topnav).
   v2 nav order: How It Works · The Journey · The Tradition · Begin Your Journey.
   Eyebrow colors shift to horizon-blue per surface-register.
   ============================================================================= */

.marketing-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px clamp(24px, 4vw, 56px);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: linear-gradient(180deg, rgba(5, 7, 14, 0.72), rgba(5, 7, 14, 0));
  border-bottom: 1px solid rgba(201, 168, 76, 0.06);
  transition: background 300ms, border-bottom-color 300ms;
}
.marketing-header.scrolled {
  background: rgba(5, 7, 14, 0.82);
  border-bottom-color: rgba(201, 168, 76, 0.12);
}

.marketing-header-inner {
  display: contents;
}

.header-brand {
  display: flex;
  align-items: center;
  gap: 20px;
}
/* Brand glyph + wordmark — matches the threshold-header treatment on
   Surface 2 (shell.css §body.surface-2 .threshold-header-glyph /
   .threshold-header-word). The S1 marketing header and the S2 threshold
   header share the same brand register so the crossing reads continuous.
   Values here intentionally mirror those rules; update in tandem. */
.header-logo {
  width: 24px;
  height: 24px;
  color: var(--gold-whisper);
  filter: drop-shadow(0 0 8px rgba(242, 228, 184, 0.35));
}
.header-wordmark {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.25em;
  color: var(--gold-whisper);
  text-transform: uppercase;
  text-shadow: 0 0 18px rgba(242, 228, 184, 0.25);
}

.marketing-nav {
  display: flex;
  gap: 36px;
  align-items: center;
}
.marketing-nav .nav-link {
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--parchment-mid);
  transition: color 200ms;
}
.marketing-nav .nav-link:hover,
.marketing-nav .nav-link:focus-visible {
  color: var(--gold-bright);
  outline: none;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 18px;
}
.nav-cta {
  font-family: var(--font-heading);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-mid);
  padding: 10px 20px;
  border: 1px solid rgba(201, 168, 76, 0.35);
  border-radius: 2px;
  transition: all 250ms;
}
.nav-cta:hover,
.nav-cta:focus-visible {
  background: rgba(201, 168, 76, 0.08);
  border-color: var(--gold-mid);
  color: var(--gold-bright);
  outline: none;
}
/* Header auth lanes — Sign In | Sign Up. Sized down + tightened 2026-04-25
   (font-size 11px → 10px, letter-spacing 0.22em → 0.16em) to set them off
   from the marketing-nav links visually — the smaller, denser type reads
   as a different category (functional UI) without changing the parchment-
   deep color register. Pipe divider sized to match. (D.8 retired the prior
   .nav-cta "Begin Your Journey" header button; "Begin" lives in the page
   body now and the hero CTA carries the marketing weight.) */
.nav-auth-link {
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--parchment-deep);
  transition: color 200ms;
}
.nav-auth-link:hover,
.nav-auth-link:focus-visible {
  color: var(--gold-bright);
  outline: none;
}
.nav-auth-divider {
  font-family: var(--font-ui);
  font-size: 10px;
  color: rgba(201, 168, 76, 0.35);
  user-select: none;
  pointer-events: none;
}


/* =============================================================================
   S1 · MARKETING HEADER — HAMBURGER BUTTON + SLIDE-DOWN MOBILE PANEL
   Below the 900px breakpoint (set in the media query at the bottom of this
   block), the desktop nav + auth-actions hide and a hamburger button takes
   the right slot of the header bar. Clicking it slides down a panel
   anchored to the bottom edge of the header that contains all five links
   (3 nav + 2 auth) per Daljeet 2026-04-25.

   ARIA contract:
     button.nav-hamburger        aria-expanded="true|false"
                                 aria-controls="nav-mobile-panel"
                                 aria-label flips "Open menu"/"Close menu"
     nav#nav-mobile-panel        aria-hidden="true|false"
   JS contract: surface1.js _wireHamburger() owns toggle + outside-click +
   Escape + resize-past-breakpoint behavior. CSS just paints state.
   ============================================================================= */

/* Hamburger button — hidden by default (desktop), revealed in the 900px
   media query below. Sized 28×28 to match the touch-target conventions
   on a marketing header. Three bars morph into an X when aria-expanded. */
.nav-hamburger {
  display: none;
  position: relative;
  width: 28px;
  height: 28px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--gold-mid);
  transition: color 200ms;
}
.nav-hamburger:hover,
.nav-hamburger:focus-visible {
  color: var(--gold-bright);
  outline: none;
}
.nav-hamburger-bar {
  position: absolute;
  left: 4px;
  right: 4px;
  height: 1.5px;
  background: currentColor;
  transition: transform 280ms var(--ease-unfurl), top 280ms var(--ease-unfurl), opacity 200ms;
}
.nav-hamburger-bar:nth-child(1) { top: 8px; }
.nav-hamburger-bar:nth-child(2) { top: 13.25px; }
.nav-hamburger-bar:nth-child(3) { top: 18.5px; }

/* Open-state X morph: top rotates +45° to center, middle fades out,
   bottom rotates -45° to center. */
.nav-hamburger[aria-expanded="true"] .nav-hamburger-bar:nth-child(1) {
  top: 13.25px;
  transform: rotate(45deg);
}
.nav-hamburger[aria-expanded="true"] .nav-hamburger-bar:nth-child(2) {
  opacity: 0;
}
.nav-hamburger[aria-expanded="true"] .nav-hamburger-bar:nth-child(3) {
  top: 13.25px;
  transform: rotate(-45deg);
}

/* Mobile panel — hidden by default (desktop), revealed in the media
   query below. Position: absolute drops it directly below the header
   bar (top: 100% of .marketing-header). Atmospheric backdrop matches
   the header's blur; subtle gold rim along the bottom edge. */
.nav-mobile-panel {
  display: none;
}

@media (max-width: 1099px) {
  /* Hide the desktop nav + auth-actions; reveal the hamburger button.
     Breakpoint raised 2026-04-25 from 899px → 1099px — at the prior
     breakpoint the four-link nav (Lineage / Experience / Journey /
     Horizon) plus Sign In | Sign Up was getting compressed in the
     900–1100px range. The hamburger now takes over earlier so the
     desktop arrangement only renders when there's real breathing room. */
  .marketing-nav { display: none; }
  .header-actions { display: none; }
  .nav-hamburger { display: block; }

  /* Reveal the mobile panel structure but keep it offscreen until JS
     sets aria-hidden="false". The default-closed state uses a small
     translateY offset + opacity 0 + pointer-events:none for accessibility
     (clicks fall through when invisible). */
  .nav-mobile-panel {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(8, 12, 22, 0.94);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(201, 168, 76, 0.18);
    padding: 24px clamp(24px, 4vw, 56px) 32px;
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    transition: transform 280ms var(--ease-unfurl), opacity 240ms;
  }
  .nav-mobile-panel[aria-hidden="false"] {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  .nav-mobile-list {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .nav-mobile-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(201, 168, 76, 0.22), transparent);
    margin: 16px 0;
  }
  .nav-mobile-link {
    display: block;
    padding: 12px 0;
    font-family: var(--font-heading);
    font-size: 14px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--parchment-light);
    transition: color 200ms;
  }
  .nav-mobile-link:hover,
  .nav-mobile-link:focus-visible {
    color: var(--gold-bright);
    outline: none;
  }
  /* Auth links sit in a quieter typographic register — UI font, smaller,
     parchment-deep — so they read as a different category from the
     section nav above the divider. */
  .nav-mobile-link.nav-mobile-auth {
    font-family: var(--font-ui);
    font-size: 12px;
    letter-spacing: 0.24em;
    color: var(--parchment-deep);
  }
  .nav-mobile-link.nav-mobile-auth:hover,
  .nav-mobile-link.nav-mobile-auth:focus-visible {
    color: var(--gold-bright);
  }
}


/* =============================================================================
   S1 · SECTION-END CUE CHAIN — Recover · Reimagine · Reorient · Remember
   Four cues form a chain that walks the user through the page's inner-
   movement arc. Each cue heralds what the next section invites. The
   shared "re-" prefix names what the page itself enacts: a return.

   The hero owns the FIRST cue ("Recover") via the existing .scroll-cue
   class (hero-scoped, position: absolute at the bottom edge of the
   100vh hero). The three subsequent cues use .s1-section-cue (inline
   at the bottom of each section's content).

   Visual: identical for the first three (cap word + 44px gradient line
   + slow pulse animation). The fourth cue (Remember → Horizon) carries
   the .is-still modifier — pulse animation removed. The other three
   beckon forward; this one waits quietly. The elevation is in the
   absence of urgency — the user is being asked to fall inward, not
   pulled onward.

   Markup contract:
     <a class="s1-section-cue [is-still]"
        href="#next-section"
        data-cta="section-cue"
        aria-label="{verb} — continue to The {Section}">
       <span class="cap">{Verb}</span>
       <span class="line" aria-hidden="true"></span>
     </a>

   Smooth-scroll wiring lives in surface1.js _wireSecondaryCTAs (the
   .s1-section-cue selector is in the selector list).
   ============================================================================= */

.s1-section-cue {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 64px auto 0;
  padding-bottom: 24px;
  width: max-content;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}
.s1-section-cue:hover .cap,
.s1-section-cue:focus-visible .cap {
  color: var(--gold-bright);
  outline: none;
}
.s1-section-cue .cap {
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--parchment-deep);
  transition: color 200ms;
}
.s1-section-cue .line {
  width: 1px;
  height: 44px;
  background: linear-gradient(180deg, var(--horizon-bright), transparent);
  animation: s1-cue-pulse 3s ease-in-out infinite;
}
/* .is-still — terminal cue (Remember → Horizon) drops the pulse animation.
   Three cues beckon; the fourth waits. */
.s1-section-cue.is-still .line {
  animation: none;
}

/* Experience section uses a 2-col grid (.s1-manifest); the cue must
   span both columns to sit centered across the section. */
.s1-manifest .s1-section-cue {
  grid-column: 1 / -1;
}


/* =============================================================================
   S1 · HERO SECTION (full-viewport arrival)
   Reference: splash-1.html lines 147–189 + 405–468.
   v2 copy: §3 (eyebrow / headline / lede / CTAs / scroll cue).
   ============================================================================= */

.s1-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 140px clamp(24px, 5vw, 80px) 110px;
  max-width: 1720px;
  margin: 0 auto;
}

/* Hero rise cascade is gated on body.splash-done so the content lands
   after the landing ceremony completes, not while the user is watching
   the splash overlay. Daljeet 2026-04-24: "let it come in clean and
   ceremoniously." All s1-rise animations start paused (animation-play-state:
   paused) and resume when splash.js removes/re-adds the class. */
.s1-hero .hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 36px;
  opacity: 0;
  animation: s1-rise 1.4s 0.4s var(--ease-unfurl) forwards;
  animation-play-state: paused;
}
.s1-hero .hero-eyebrow .line {
  height: 1px;
  width: 48px;
  background: var(--gold-mid);
  opacity: 0.55;
}
.s1-hero .hero-eyebrow span {
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--gold-mid);
}

.s1-hero .hero-title {
  font-family: var(--font-display);
  font-size: 56px;
  line-height: 1.1;
  color: var(--gold-whisper);
  letter-spacing: -0.005em;
  max-width: 18ch;
  margin-bottom: 40px;
  font-weight: 700;
  opacity: 0;
  animation: s1-rise 1.6s 0.7s var(--ease-unfurl) forwards;
  animation-play-state: paused;
}
.s1-hero .hero-title em {
  font-style: italic;
  font-family: var(--font-body);
  color: var(--parchment-pale);
  font-weight: 400;
}

.s1-hero .hero-lede {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.5;
  color: var(--parchment-mid);
  max-width: 56ch;
  margin-bottom: 20px;
  opacity: 0;
  animation: s1-rise 1.4s 1s var(--ease-unfurl) forwards;
  animation-play-state: paused;
}
.s1-hero .hero-lede:last-of-type {
  margin-bottom: 56px;
}
.s1-hero .hero-lede em {
  font-style: italic;
  color: var(--parchment-light);
}

.s1-hero .hero-actions {
  display: flex;
  gap: 20px;
  align-items: center;
  flex-wrap: wrap;
  opacity: 0;
  animation: s1-rise 1.4s 1.3s var(--ease-unfurl) forwards;
  animation-play-state: paused;
}

/* Scroll cue — absolute bottom of hero. Pushed lower so it sits clear of
   the CTA button row above it (Daljeet 2026-04-24: scroll cue was
   violating the Explore the Course button). */
.s1-hero .scroll-cue {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  opacity: 0;
  animation: s1-fade-in 1.2s 2.2s forwards;
  animation-play-state: paused;
  /* Anchor — clickable (data-cta="scroll-first-section"). */
  cursor: pointer;
}
.s1-hero .scroll-cue:hover .cap,
.s1-hero .scroll-cue:focus-visible .cap {
  color: var(--gold-bright);
  outline: none;
}

/* Splash-done release: when splash.js adds body.splash-done the cascade
   begins. Until then all five elements are opacity:0 + transform offset. */
body.splash-done .s1-hero .hero-eyebrow,
body.splash-done .s1-hero .hero-title,
body.splash-done .s1-hero .hero-lede,
body.splash-done .s1-hero .hero-actions,
body.splash-done .s1-hero .scroll-cue {
  animation-play-state: running;
}
.s1-hero .scroll-cue .cap {
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--parchment-deep);
}
.s1-hero .scroll-cue .line {
  width: 1px;
  height: 44px;
  background: linear-gradient(180deg, var(--horizon-bright), transparent);
  animation: s1-cue-pulse 3s ease-in-out infinite;
}

/* Ambient rotating chart on the right (desktop only) — decorative. */
.s1-hero .hero-chart {
  position: absolute;
  right: -8vw;
  top: 50%;
  transform: translateY(-50%);
  width: min(72vh, 68vw);
  aspect-ratio: 1 / 1;
  pointer-events: none;
  opacity: 0;
  animation: s1-chart-in 3s 1.2s var(--ease-unfurl) forwards;
  z-index: 0;
}
.s1-hero .hero-chart svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 80px rgba(201, 168, 76, 0.08));
}
.s1-hero .hero-chart .inner-rot {
  transform-origin: center;
  animation: s1-slow-rotate 180s linear infinite;
}

/* Zodiac glyphs injected by surface1.js from zodiacGlyphs.js. Paths
   inherit fill from this rule (source SVGs' hardcoded fill is stripped
   at the data-module level). Opacity matches the surrounding ring /
   axis register so glyphs sit in the same ambient layer as the rest of
   the decorative chart. */
.s1-hero .hero-chart #s1-hero-glyphs {
  fill: var(--gold-mid);
  opacity: 0.78;
}
.s1-hero .hero-chart #s1-hero-glyphs path {
  /* `stroke: none` so the inherited `.inner-rot` stroke setting (used
     by the concentric rings) doesn't accidentally outline glyph shapes. */
  stroke: none;
}

@media (max-width: 900px) {
  .s1-hero .hero-chart { display: none; }
}


/* =============================================================================
   SHARED BUTTONS (marketing surface)
   Primary = gold gradient (the ceremonial CTA; surface-1 eyebrow register
   is horizon-blue but the *action* colour stays gold because CTAs are where
   the user crosses the gate. Reference-faithful.)
   Ghost   = horizon-rimmed outline button.
   ============================================================================= */

.s1-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 18px 36px;
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  border-radius: 2px;
  transition: all 250ms var(--ease-unfurl);
  cursor: pointer;
  border: none;
}

/* Primary CTA text: dark ocean-void against gold-gradient background for
   legible contrast. Daljeet 2026-04-24 — earlier default of ocean-deep
   was rendering as light gray in some ambient/atmospheric overlays; using
   the deeper ocean-void + bolder weight locks it in. */
.s1-btn.s1-btn-primary {
  background: linear-gradient(135deg, var(--gold-mid), var(--gold-bright));
  color: var(--ocean-void);
  font-weight: 700;
  box-shadow: 0 6px 30px rgba(201, 168, 76, 0.22);
}
.s1-btn.s1-btn-primary:hover,
.s1-btn.s1-btn-primary:focus-visible {
  background: linear-gradient(135deg, var(--gold-bright), var(--gold-whisper));
  color: var(--ocean-void);
  box-shadow: 0 8px 40px rgba(201, 168, 76, 0.4);
  transform: translateY(-1px);
  outline: none;
}

.s1-btn-ghost {
  background: transparent;
  padding: 17px 28px;
  color: var(--parchment-light);
  border: 1px solid rgba(201, 168, 76, 0.32);
}
.s1-btn-ghost:hover,
.s1-btn-ghost:focus-visible {
  border-color: var(--gold-mid);
  color: var(--gold-bright);
  background: rgba(201, 168, 76, 0.04);
  outline: none;
}


/* =============================================================================
   S1 · SECTION SCAFFOLD (shared by 01/02/03)
   ============================================================================= */

.s1-section {
  position: relative;
  padding: 140px clamp(24px, 5vw, 80px);
  max-width: 1720px;
  margin: 0 auto;
}

.s1-section-eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
}
/* Eyebrow label sits flush — the numeric span (.num "01 —" / "02 —" etc.)
   was retired 2026-04-25 since sections are sequential by position and
   the numerals weren't earning their keep. The .num CSS rule is removed
   entirely; the .label is now the full eyebrow. */
.s1-section-eyebrow .label {
  font-family: var(--font-heading);
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-mid);
}


/* =============================================================================
   S1 · SECTION 01 — HOW IT WORKS
   Inherits old S1.10 manifest editorial component wholesale (per
   feedback_component_reorder_model.md): 2-col grid with rotating
   Astrolab21 wheel on the left and editorial on the right.
   Reference: splash-1.html lines 212–227 + 520–551.
   v2 copy: §4 (section label / headline / intro / body).
   No blockquote in the v2 pass — Ptolemy quote from the reference is
   removed because v2 pivots the tradition voice to Porphyry (§6, Section 03).
   ============================================================================= */

.s1-manifest {
  position: relative;
  padding: 140px clamp(24px, 5vw, 80px);
  max-width: 1720px;
  margin: 0 auto;
  display: grid;
  /* Grid ratio 2026-04-25: art column gets 1fr (smaller), text column
     gets 2fr (larger). The simplified Experience graphic is just cross +
     reticule (no wheel, no rotation) — it doesn't need full-width visual
     weight here, and the smaller scale leaves more room for the editorial
     and helps the section land in fewer scroll-frames. */
  grid-template-columns: 1fr 2fr;
  gap: 100px;
  /* Top-justify all cells (2026-04-25). Art sits at top of col 1, blockquote
     follows below it in col 1 row 2; editorial spans col 2 across both rows.
     The two columns share their top edge for visual balance. */
  align-items: start;
}

/* Explicit grid placement: art = col 1 row 1, copy = col 2 spanning rows
   1–2, blockquote = col 1 row 2 (under art). At mobile (single column),
   the explicit grid-row + grid-column rules below in the @media block
   re-flow them as art → editorial → blockquote per reading-flow priority. */
.s1-manifest-art {
  position: relative;
  aspect-ratio: 1 / 1;
  grid-column: 1;
  grid-row: 1;
}
.s1-manifest-copy {
  grid-column: 2;
  grid-row: 1 / 3;
}
.s1-manifest-quote {
  grid-column: 1;
  grid-row: 2;
}

/* Shared visual primitives — .center-star and .s1-reticule appear in both
   the simplified Experience scope (this section) and the full Horizon
   composition (.s1-offer-art scope). Comma-separated selectors keep one
   source of truth for sizing and base styling; rotation logic is scoped
   only to the .s1-offer-art .s1-art-rotor (Horizon-only) since Experience
   is now static. */
.s1-manifest-art .center-star,
.s1-offer-art .center-star {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 32%;
  color: var(--gold-whisper);
  filter: drop-shadow(0 0 40px rgba(232, 201, 122, 0.5));
}
.s1-manifest-art .s1-reticule,
.s1-offer-art .s1-reticule {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.s1-manifest-art .s1-reticule .reticule-svg,
.s1-offer-art .s1-reticule .reticule-svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Experience-only — the simplified reticule (no wheel around it) renders
   small inside its viewBox by default, leaving the cell mostly empty.
   Scale the .s1-reticule HTML wrapper 2× so the planets + axes fill more
   of the cell visually. Horizon's reticule keeps its native sizing
   because it sits over the wheel image which provides its own frame.

   Important: the scale applies to the HTML wrapper (.s1-reticule), NOT
   the SVG <g> inside it (.reticule-rotor). Same reason as the earlier
   rotation fix at Horizon — applying transforms to SVG <g> elements with
   transform-origin: center is browser-inconsistent (the bounding box
   center can resolve differently depending on whether text glyph metrics
   are included), which displaces the visible content off-center from the
   cross. HTML transform-origin: center is reliably 50% 50% of the
   element's CSS box. */
.s1-manifest-art .s1-reticule {
  transform: scale(2);
  transform-origin: center;
}

.s1-manifest-copy .s1-section-eyebrow {
  margin-bottom: 26px;
}
.s1-manifest-copy h2 {
  font-family: var(--font-display);
  font-size: clamp(32px, 3vw, 64px);
  line-height: 1.1;
  color: var(--gold-whisper);
  margin-bottom: 24px;
  letter-spacing: -0.005em;
  font-weight: 400;
}
.s1-manifest-copy h2 em {
  font-style: italic;
  font-family: var(--font-body);
  color: var(--parchment-pale);
  font-weight: 400;
}
.s1-manifest-copy .lede {
  font-family: var(--font-body);
  font-size: 20px;
  line-height: 1.25;
  color: var(--parchment-mid);
  margin-bottom: 20px;
  max-width: 54ch;
}
.s1-manifest-copy .lede em {
  font-style: italic;
  color: var(--parchment-light);
}
.s1-manifest-copy .body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  color: var(--parchment-deep);
  max-width: 54ch;
}

/* Ptolemy's manifest quote — historical voice retained per Daljeet
   (restored after a mistaken removal in D.1; reference-faithful).
   Position 2026-04-25: relocated to grid column 1, row 2 (under the art)
   from its prior position inside .s1-manifest-copy. The margin-top now
   gives breathing room from the art image above (in desktop layout) or
   from the editorial copy above (at mobile, after the reflow puts it
   third in the single-column flow). */
/* When the quote lives inside the flex col-left, the column's gap already
   provides spacing — zero the margin-top so it doesn't double-stack. */
.s1-offer-col-left .s1-manifest-quote {
  margin-top: 28px;
}

.s1-manifest-quote {
  margin-top: 40px;
  padding: 22px 0 22px 28px;
  border-left: 1px solid rgba(201, 168, 76, 0.38);
  font-family: var(--font-body);
  font-size: 20px;
  font-style: italic;
  color: var(--parchment-light);
  line-height: 1.5;
  max-width: 46ch;
}
.s1-manifest-quote cite {
  display: block;
  margin-top: 16px;
  font-style: normal;
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.3em;
  color: var(--parchment-deep);
  text-transform: uppercase;
}

@media (max-width: 1024px) {
  .s1-manifest {
    grid-template-columns: 1fr;
    gap: 64px;
  }
  /* Mobile reflow: art → editorial → blockquote (option a, reading-flow
     priority per Daljeet 2026-04-25). Explicit grid-row assignments
     override the desktop placement. */
  .s1-manifest-art {
    max-width: 520px;
    margin: 0 auto;
    width: 100%;
    grid-column: 1;
    grid-row: 1;
  }
  .s1-manifest-copy {
    grid-column: 1;
    grid-row: 2;
  }
  .s1-manifest-quote {
    grid-column: 1;
    grid-row: 3;
  }
}


/* =============================================================================
   S1 · SECTION 02 — THE JOURNEY
   Inherits old S1.9 pillars component wholesale: 3-card bordered grid.
   Reference: splash-1.html lines 197–210 + 470–518.
   v2 copy: §5 (section label / headline / intro + 3 cards renamed
   I · Your Chart / II · Your Journey / III · Your Crew).
   ============================================================================= */

.s1-journey-header {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 72px;
}
.s1-journey-header h2 {
  font-family: var(--font-heading);
  font-size: clamp(32px, 3vw, 64px);
  line-height: 1.1;
  color: var(--gold-whisper);
  font-weight: 700;
  letter-spacing: -0.005em;
}
.s1-journey-header h2 em {
  font-style: italic;
  font-family: var(--font-body);
  color: var(--parchment-pale);
  font-weight: 400;
}
.s1-journey-header p {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.5;
  color: var(--parchment-mid);
  max-width: 48ch;
  /* Upright body default per feedback_italic_usage_policy.md
     (italic reserved for emphasis / declarative lifts only). */
}
.s1-journey-header p em {
  font-style: italic;
  color: var(--parchment-light);
}

.s1-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  border: 1px solid rgba(201, 168, 76, 0.12);
  background: rgba(201, 168, 76, 0.08);
}
.s1-pillar {
  position: relative;
  padding: 56px 44px;
  background: rgba(13, 18, 32, 0.88);
  min-height: 360px;
  display: flex;
  flex-direction: column;
}
.s1-pillar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201, 168, 76, 0.38), transparent);
  opacity: 0;
  transition: opacity 500ms;
}
.s1-pillar:hover::before {
  opacity: 1;
}

.s1-pillar-num {
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.3em;
  color: var(--gold-mid);
  text-transform: uppercase;
  margin-bottom: 32px;
}
.s1-pillar-icon {
  width: 48px;
  height: 48px;
  color: var(--gold-mid);
  margin-bottom: 28px;
  opacity: 0.85;
}
.s1-pillar h3 {
  font-family: var(--font-heading);
  font-size: 16px;
  letter-spacing: 0.12em;
  color: var(--parchment-light);
  text-transform: uppercase;
  margin-bottom: 18px;
  line-height: 1.1;
  font-weight: 500;
}
.s1-pillar p {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.25;
  color: var(--parchment-mid);
}
.s1-pillar p em {
  font-style: italic;
  color: var(--parchment-light);
}

@media (max-width: 1024px) {
  .s1-journey-header {
    gap: 20px;
    margin-bottom: 56px;
  }
}
@media (max-width: 860px) {
  .s1-pillars { grid-template-columns: 1fr; }
}


/* =============================================================================
   S1 · SECTION 03 — THE TRADITION
   Inherits old S1.10b #lineage 4-cell grid wholesale.
   Reference: splash-1.html lines 553–580 + 925–933 (inline cell CSS).
   v2 copy: §6 (section label / headline / intro + 4 cards
   Hellenistic Roots / Porphyry's Insight / Symbolic Translation / Living Use).
   Ptolemy emphasis in the reference is replaced by Porphyry per brief §6.
   ============================================================================= */

.s1-tradition-header {
  margin-bottom: 52px;
  max-width: 920px;
}
.s1-tradition-header h2 {
  font-family: var(--font-heading);
  font-size: clamp(32px, 3vw, 64px);
  line-height: 1.1;
  color: var(--gold-whisper);
  margin-bottom: 24px;
  max-width: 26ch;
  font-weight: 700;
  letter-spacing: -0.005em;
}
.s1-tradition-header h2 em {
  font-style: italic;
  font-family: var(--font-body);
  color: var(--parchment-pale);
  font-weight: 400;
}
.s1-tradition-header .intro {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.5;
  color: var(--parchment-mid);
  max-width: 56ch;
}
.s1-tradition-header .intro em {
  font-style: italic;
  color: var(--parchment-light);
}

.s1-lineage-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(201, 168, 76, 0.1);
  border: 1px solid rgba(201, 168, 76, 0.12);
}
.s1-lineage-cell {
  padding: 36px 32px;
  background: rgba(13, 18, 32, 0.85);
  min-height: 240px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.s1-lineage-cell .lin-date {
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.3em;
  color: var(--gold-mid);
  text-transform: uppercase;
}
.s1-lineage-cell .lin-title {
  font-family: var(--font-heading);
  font-size: 16px;
  letter-spacing: 0.12em;
  color: var(--parchment-light);
  text-transform: uppercase;
  line-height: 1.1;
  font-weight: 500;
}
.s1-lineage-cell .lin-body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.25;
  color: var(--parchment-mid);
}
.s1-lineage-cell .lin-body strong {
  color: var(--parchment-light);
  font-weight: 700;
}
.s1-lineage-cell .lin-body em {
  font-style: italic;
  color: var(--parchment-light);
}

@media (max-width: 1024px) {
  .s1-lineage-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .s1-lineage-grid { grid-template-columns: 1fr; }
}

/* =============================================================================
   S1 · ABOUT SOUL PILOT — personal statement section (added May 12 2026)
   Single-column layout; max-width prose column centered under the heading.
   Heading mirrors .s1-tradition-header typographic register.
   ============================================================================= */

.s1-about-header {
  margin-bottom: 40px;
  max-width: 920px;
}
.s1-about-header h2 {
  font-family: var(--font-heading, 'Cinzel', serif);
  font-size: clamp(32px, 3vw, 64px);
  line-height: 1.1;
  color: var(--parchment-pale);
  font-weight: 700;
  letter-spacing: -0.005em;
}
.s1-about-header h2 em {
  font-style: italic;
  font-family: var(--font-body, 'Lora', Georgia, serif);
  color: var(--parchment-pale);
  font-weight: 400;
}
.s1-about-body {
  display: grid;
  grid-template-columns: 7fr 3fr;
  gap: 72px;
  align-items: start;
}
.s1-about-col-text p {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.5;
  color: var(--parchment-mid);
  margin-bottom: 20px;
}
.s1-about-col-text p em {
  font-style: italic;
  color: var(--parchment-light);
}
.s1-about-col-text p i {
  font-style: italic;
}
.s1-about-actions {
  margin-top: 36px;
}
.s1-about-col-image {
  position: sticky;
  top: 88px;  /* clears the fixed marketing header */
}
.s1-about-portrait {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--ocean-rim);
}
@media (max-width: 768px) {
  .s1-about-body {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .s1-about-col-image {
    position: static;
    max-width: 300px;
    order: -1;  /* portrait above prose; CTA stays last inside col-text */
  }
}


/* =============================================================================
   S1 · SECTION 04 — THE HORIZON (final public section / commitment beat)
   Two-column body layout (2026-04-25): text on the LEFT, full chart
   composition on the RIGHT. The orientation flip from Experience (which
   has art on the left) gives Horizon its own distinct rhythm. The H2 and
   CTA span the full section width above and below the two-column body.
   The full composition (wheel + ring overlays + reticule + center star,
   rotating in shared rotor) was relocated here from Experience as the
   page's culminating visual artifact — what the user is being asked to
   take up. Mobile collapses to single-column with the art above the body.
   ============================================================================= */

.s1-offer {
  position: relative;
  padding: 140px clamp(24px, 5vw, 80px) 72px;
  max-width: 1440px;
  margin: 0 auto;
  /* Left-justified 2026-04-25 (was centered). The Horizon now reads as
     a "second hero" — left-aligned narrative flow that matches the
     navigational rhythm of the explanatory sections above (Lineage,
     Experience, Journey are all left-aligned). The centered register
     made Horizon feel set apart from the page's flow. */
}

/* Eyebrow inherits base .s1-section-eyebrow styling (left-aligned, no
   override needed now that the section is left-justified). */
.s1-offer .s1-section-eyebrow {
  margin-bottom: 26px;
}

.s1-offer h2 {
  font-family: var(--font-heading);
  font-size: clamp(32px, 3vw, 64px);
  line-height: 1.1;
  color: var(--gold-whisper);
  margin-bottom: 24px;
  letter-spacing: -0.005em;
  font-weight: 700;
}
.s1-offer h2 em {
  font-style: italic;
  font-family: var(--font-body);
  color: var(--parchment-pale);
  font-weight: 400;
}

/* Two-column body (revised 2026-04-25):
   Column 1 (col-left): Beat 1 (3 paragraphs) on top, chart below.
   Column 2 (col-right): Beat 2 + Beat 3 (6 paragraphs) + CTA left-
   aligned. Top-justify the columns so they share the upper edge; the
   chart's square frame in col 1 plus 3 paragraphs sits closer in height
   to col 2's 6 paragraphs + CTA than the prior split did, giving better
   column balance. The whole section is left-justified (no longer
   centered) to match the navigational rhythm of the other sections. */
.s1-offer-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
  margin-bottom: 56px;
  text-align: left;
}

/* Column wrappers — vertical flex columns with consistent 40px gap
   between children. col-left stacks Beat 1 + chart (text-first order
   per 2026-04-25 revision); col-right stacks Beat 2+3 + CTA. At mobile
   they unwrap via display:contents so children flatten into the body's
   single-column grid in DOM order: Beat 1 → chart → Beat 2 → Beat 3 →
   CTA. */
.s1-offer-col-left,
.s1-offer-col-right {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
/* CTA in col-right left-aligns to match the section's left-justified
   register. Other sections don't have CTAs at this depth, so this is
   the ground-truth for what a left-aligned CTA looks like in the page. */
.s1-offer-col-left .s1-offer-actions {
  align-self: flex-start;
}

/* Text columns — paragraphs flow naturally within their wrapper.
   The shared .s1-offer-text class carries the base paragraph styling;
   .s1-offer-text-1 and .s1-offer-text-2 modifiers identify position
   without diverging style. */
.s1-offer-text p {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.5;
  color: var(--parchment-mid);
  margin: 0 0 20px 0;
  text-align: left;
}
.s1-offer-text p:last-child {
  margin-bottom: 0;
}
.s1-offer-text p em {
  font-style: italic;
  color: var(--parchment-light);
}

/* Declarative lift — italic + parchment-light prose, mirrors the
   .threshold-prose-invitation / .threshold-prose-lift device from
   thresholds.css (italic per feedback_italic_usage_policy.md;
   parchment-light for the one-step-brighter color register). Reserved
   for sentences that earn the lift — typically the closing line of a
   beat or a rhetorical pivot. Used sparingly: applied to three lines
   in the Horizon body (Beat 1 closer, Beat 2 bridge, Beat 3 closing
   question) so each beat has one moment that visually pivots out of
   the upright default. <em> inside a lifted paragraph picks up gold-
   whisper + 600 weight to keep product names lifted within the
   already-lifted line — mirrors the threshold device's <strong>
   treatment, applied here to <em> to stay consistent with the page's
   existing emphasis convention. */
.s1-offer-text p.s1-prose-lift {
  color: var(--parchment-light);
  font-style: italic;
}
.s1-offer-text p.s1-prose-lift em {
  color: var(--gold-whisper);
  font-weight: 600;
}

/* Art column — square host for the full composition (rotor + wheel +
   reticule + ring overlays + center star). Aspect-ratio 1/1 keeps the
   chart geometric integrity regardless of column width. align-self:
   flex-start aligns the art to the column's left edge to match the
   section's left-justified register. */
.s1-offer-art {
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 600px;
  align-self: flex-start;
}
.s1-offer-art .s1-art-rotor {
  position: absolute;
  inset: 0;
  transform-origin: center;
  animation: s1-slow-rotate 240s linear infinite;
}
.s1-offer-art .s1-art-rotor .wheel-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0.9;
  filter: drop-shadow(0 0 60px rgba(201, 168, 76, 0.1));
}
.s1-offer-art .ring-overlay {
  position: absolute;
  inset: 18%;
  border: 1px solid rgba(201, 168, 76, 0.25);
  border-radius: 50%;
}
.s1-offer-art .ring-overlay.thin {
  inset: 30%;
  border-color: rgba(201, 168, 76, 0.15);
}

/* Mobile collapse — single column. The col wrappers go display:contents
   so all their children become direct grid children of .s1-offer-body,
   preserving DOM order as the reading order: Beat 1 → chart → Beat 2 →
   Beat 3 → CTA. Art centers horizontally on mobile (visual focal-point
   register at narrow widths); CTA inherits centering from the existing
   .s1-offer-actions justify-content: center on a cell-width container. */
@media (max-width: 860px) {
  .s1-offer-body {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  /* Col wrappers stack as natural grid rows in DOM order:
     col-left (prose → CTA) first, col-right (instrument → quote) second.
     Desired mobile order: prose → CTA → instrument → quote. ✓ */
  .s1-offer-art {
    max-width: 360px;
    margin: 0 auto;
  }
}

.s1-offer-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-top: 8px;
}

/* Support line beneath the CTA button — pricing confirmation in UI register. */
.s1-offer-support {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.03em;
  color: var(--parchment-deep);
  margin: 0;
}


/* =============================================================================
   S1 · BENEDICTION CODA
   Single-line poetic exhale between Section 04 and the footer. Preserves
   the prior Closing-Threshold H2 line ("Your life is already being
   carried by a deeper pattern") as the page's final breath. Intentionally
   minimal — no eyebrow, no heading, no action. Opacity recedes it so it
   reads as a whisper rather than a competing headline.
   ============================================================================= */

.s1-coda {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  padding: 48px clamp(24px, 5vw, 80px) 120px;
  text-align: center;
  font-family: var(--font-body);
  font-size: clamp(18px, 1.6vw, 22px);
  font-style: italic;
  color: var(--parchment-mid);
  line-height: 1.5;
  opacity: 0.72;
}
.s1-coda em {
  font-style: italic;
  color: var(--parchment-light);
  opacity: 0.95;
}


/* =============================================================================
   S1 · FOOTER
   Reference: splash-1.html lines 280–288 + 661–673.
   v2 copy: §9 (app-specific variant — About · Lexicon · Settings · Support).
   ============================================================================= */

.s1-footer {
  position: relative;
  padding: 60px clamp(24px, 5vw, 80px);
  border-top: 1px solid rgba(201, 168, 76, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1720px;
  margin: 0 auto;
  flex-wrap: wrap;
  gap: 24px;
}
.s1-footer .mark {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--gold-whisper);
}
.s1-footer .mark svg {
  width: 18px;
  height: 18px;
  color: var(--gold-whisper);
}
.s1-footer .word {
  font-family: var(--font-heading);
  font-size: 11px;
  letter-spacing: 0.32em;
  color: var(--gold-whisper);
  text-transform: uppercase;
}
.s1-footer .meta {
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--parchment-deep);
}
/* Design credit — replaces the prior .links four-anchor block. Mixed-case
   register per Daljeet 2026-04-25: surrounding text matches the .meta
   uppercase letter-spaced register; the URL link itself is lowercased and
   letter-spacing-reset so the URL reads as a URL, not as shouted UI text. */
.s1-footer .design-credit {
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--parchment-deep);
}
.s1-footer .design-credit a {
  color: inherit;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  transition: color 200ms;
}
.s1-footer .design-credit a:hover,
.s1-footer .design-credit a:focus-visible {
  color: var(--gold-bright);
  outline: none;
}


/* =============================================================================
   S1 · SHARED ANIMATIONS
   Prefixed s1- so they never collide with chamber keyframes.
   ============================================================================= */

@keyframes s1-rise {
  0%   { opacity: 0; transform: translateY(24px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes s1-fade-in  { to { opacity: 1; } }
@keyframes s1-chart-in { to { opacity: 0.75; } }
@keyframes s1-slow-rotate { to { transform: rotate(360deg); } }
@keyframes s1-cue-pulse {
  0%, 100% { opacity: 0.3; transform: scaleY(0.8); }
  50%      { opacity: 1;   transform: scaleY(1);   }
}

@media (prefers-reduced-motion: reduce) {
  .s1-hero .hero-eyebrow,
  .s1-hero .hero-title,
  .s1-hero .hero-lede,
  .s1-hero .hero-actions,
  .s1-hero .scroll-cue,
  .s1-hero .hero-chart {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .s1-hero .hero-chart  { opacity: 0.6; }
  .s1-hero .scroll-cue  { opacity: 0.6; }
  .s1-hero .scroll-cue .line { animation: none; }
  .s1-offer-art .s1-art-rotor { animation: none; }
  .s1-hero .hero-chart .inner-rot { animation: none; }

  /* Hamburger morph + slide-down panel — disable transitions; state
     changes (open/close) become instant for reduced-motion users. */
  .nav-hamburger-bar,
  .nav-mobile-panel { transition: none; }

  /* Section-end cues — disable the pulse on the line for reduced-motion
     users. The cue itself remains visible; only the animation is silenced. */
  .s1-section-cue .line { animation: none; }
}