/* ============================================================================
   Marketing landing page — Sketch D, "Night Sky"
   Public, logged-out home (marketing#home). Scoped entirely under .ns-page
   so nothing leaks into the app. Dark-first; .ns-page[data-theme="day"]
   flips the palette to the daytime tablet. The data-theme attribute is set
   server-side from the visitor's local hour (see MarketingController).
   Ported verbatim from design_handoff_marketing_landing/sketch-d.css; the
   only additions are the .ns-slot image placeholders at the bottom (the
   prototype used a custom <image-slot> element we don't ship).
   ============================================================================ */

.ns-page {
  --serif: 'EB Garamond', 'Garamond', serif;
  --sans:  'Inter', system-ui, sans-serif;
  --dev:   'Tiro Devanagari Sanskrit', serif;

  /* night defaults — but the theme attribute will flip them on day */
  --paper:    #0a0f0c;
  --paper-2:  #11150f;
  --paper-3:  #1a1f17;
  --ink:      #efe7d0;
  --ink-soft: #b2a98f;
  --ink-faded:#7a7361;
  --rule:     rgba(239, 231, 208, 0.22);
  --rule-soft:rgba(239, 231, 208, 0.10);
  --accent:   #c9a227;
  --gold:     #d4a93f;

  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.65;
  width: 100%;
  min-height: 100%;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.ns-page[data-theme="day"] {
  --paper:    #f4efe6;
  --paper-2:  #ece6d8;
  --paper-3:  #e1d9c5;
  --ink:      #1f1d18;
  --ink-soft: #4a463d;
  --ink-faded:#7d7666;
  --rule:     rgba(31, 29, 24, 0.20);
  --rule-soft:rgba(31, 29, 24, 0.10);
  --accent:   #3d4c32;
  --gold:     #b8881c;
}

/* Star field — gold dots scattered across the whole page surface. Plain
   absolutely-positioned divs so they stay circular at any aspect ratio
   (the previous SVG version stretched the circles into long bars on
   tall artboards). */
.ns-stars {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0;
}
.ns-stars span {
  position: absolute;
  background: var(--gold);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.ns-page[data-theme="day"] .ns-stars { opacity: .55; }

/* ── Top chrome ──────────────────────────────────────────── */
.ns-top {
  position: sticky; top: 0;
  z-index: 10;
  height: 72px;
  padding: 0 56px;
  /* Solid (no backdrop-filter): a blur on this sticky nav forces Chrome onto
     main-thread scrolling, repainting the whole page every scroll frame. */
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ns-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; line-height: 1; }
.ns-brand-om { font-family: var(--dev); color: var(--gold); font-size: 26px; line-height: 1; }
/* Wordmark rides the app-wide logo face (.ld-name in shared.css): Spectral,
   upright, slightly tightened — not the page's italic Garamond. */
.ns-brand-name { font-family: "Spectral", var(--serif); font-style: normal; font-size: 18px; letter-spacing: -.005em; color: var(--ink); }
.ns-nav { display: flex; gap: 40px; justify-self: center; }
.ns-nav a {
  font-family: var(--serif); font-style: italic; font-size: 16px;
  color: var(--ink-soft); text-decoration: none;
}
.ns-nav a:hover { color: var(--ink); }
.ns-begin {
  justify-self: end;
  font-family: var(--serif); font-style: italic; font-size: 16px;
  color: var(--gold); text-decoration: none;
  border: 1px solid var(--gold);
  padding: 10px 22px;
  transition: background .15s, color .15s;
}
.ns-begin:hover { background: var(--gold); color: var(--paper); }
.ns-top-end { display: flex; align-items: center; gap: 26px; }
/* Quiet member wayfinding — must never compete with .ns-begin. */
.ns-signin {
  font-family: var(--serif); font-style: italic; font-size: 15px;
  color: var(--ink-soft); text-decoration: none;
  transition: color .15s;
}
.ns-signin:hover { color: var(--ink); }

/* ── Main ────────────────────────────────────────────────── */
.ns-main {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  align-items: center;
  padding: 0 56px 80px;
}

/* ── Hero ────────────────────────────────────────────────── */
.ns-hero {
  position: relative;
  width: 100%;
  max-width: 920px;
  padding: 96px 0 88px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
}
.ns-hero-tag {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 56px;
}
.ns-hero-wheel {
  width: 520px;
  max-width: 100%;
  margin: 0 auto 48px;
}
.ns-wheel { width: 100%; height: auto; display: block; }

.ns-hero-headline {
  display: flex; flex-direction: column;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 50px;
  line-height: 1.16;
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 0 0 28px;
  text-wrap: balance;
}
.ns-hero-line + .ns-hero-line { margin-top: 4px; }

.ns-hero-sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: 19px;
  line-height: 1.62;
  color: var(--ink-soft);
  max-width: 620px;
  margin: 0 auto;
  text-wrap: pretty;
}
.ns-hero-cta {
  margin-top: 44px;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}

/* ── CTA ─────────────────────────────────────────────────── */
.ns-cta {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 24px;
  color: var(--gold);
  text-decoration: none;
  padding: 18px 44px;
  border: 1px solid var(--gold);
  background: transparent;
  transition: background .15s, color .15s;
}
.ns-cta:hover {
  background: var(--gold);
  color: var(--paper);
}
.ns-price {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--ink-faded);
  margin: 0;
}

/* ── Inscription (§ HEADER §) ───────────────────────────── */
.ns-inscription {
  display: flex; align-items: center; justify-content: center;
  gap: 16px;
  margin-bottom: 40px;
  color: var(--gold);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.ns-inscr-rule {
  flex: 0 0 96px;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--gold), transparent);
  display: inline-block;
  opacity: .8;
}
.ns-inscr-glyph {
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  opacity: .9;
}
.ns-inscr-text {
  font-family: var(--sans);
  letter-spacing: .04em;
  font-weight: 500;
}

/* ── Section ─────────────────────────────────────────────── */
.ns-section {
  width: 100%;
  max-width: 720px;
  padding: 96px 0 0;
  display: flex; flex-direction: column;
}
.ns-h2 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 40px;
  line-height: 1.22;
  letter-spacing: -.005em;
  color: var(--ink);
  margin: 0 0 36px;
  text-align: center;
  text-wrap: balance;
}
.ns-h2-italic { font-style: italic; }

.ns-blocks {
  display: flex; flex-direction: column; gap: 22px;
}
.ns-p {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.72;
  color: var(--ink);
  margin: 0;
  text-wrap: pretty;
}
.ns-p.has-dropcap::first-letter {
  font-family: var(--serif);
  font-weight: 500;
  font-style: italic;
  font-size: 4.6em;
  line-height: .82;
  float: left;
  padding: .08em .14em 0 0;
  color: var(--gold);
}

.ns-subhead {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 24px;
  line-height: 1.35;
  color: var(--ink);
  margin: 32px 0 12px;
  text-align: center;
  text-wrap: balance;
}

/* ── Pull quote ──────────────────────────────────────────── */
.ns-pull {
  margin: 56px auto;
  padding: 32px 0;
  text-align: center;
  max-width: 580px;
  display: flex; flex-direction: column; align-items: center; gap: 24px;
}
/* Tighter top — used for the cosmic-design quote that sits right above
   the sky wheel, so the ❋ doesn't float so far below the paragraph. */
.ns-pull.ns-pull-tight { margin-top: 32px; }
.ns-pull-glyph {
  font-size: 18px;
  color: var(--gold);
  opacity: .85;
}
.ns-pull blockquote {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 28px;
  line-height: 1.4;
  color: var(--gold);
  margin: 0;
  text-wrap: balance;
}

/* ── Bryan signature ─────────────────────────────────────── */
.ns-signature {
  margin-top: 56px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.ns-sig-portrait {
  margin: 6px 0 18px;
}
.ns-sig-portrait image-slot {
  display: block;
  border: 1px solid var(--gold);
}
.ns-sig-mark {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 12px;
}
.ns-sig-line {
  width: 36px; height: 1px; background: var(--gold); opacity: .7;
}
.ns-sig-diamond {
  width: 5px; height: 5px;
  background: var(--gold);
  transform: rotate(45deg);
}
.ns-sig-name {
  font-family: var(--serif);
  font-style: italic;
  font-size: 24px;
  color: var(--ink);
  margin: 0;
}
.ns-sig-title {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 4px 0 16px;
}
.ns-sig-lineage {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.ns-sig-lineage li {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: var(--ink-faded);
}

/* ── FAQ ────────────────────────────────────────────────── */
.ns-qa {
  list-style: none; padding: 0; margin: 0;
  width: 100%;
  border-top: 1px solid var(--rule);
}
.ns-qa li {
  padding: 28px 0;
  border-bottom: 1px solid var(--rule);
}
.ns-q {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
  color: var(--ink);
  margin: 0 0 12px;
}
.ns-a {
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0;
}

/* ── Offering constellation (centerpiece) ───────────────── */
.ns-offering { max-width: 840px; }
.ns-offering-intro {
  text-align: center;
  font-style: italic;
  color: var(--ink-soft);
  max-width: 600px;
  margin: 0 auto 64px;
  font-size: 17px;
}

.ns-constellation {
  position: relative;
  padding: 40px 0;
  background: linear-gradient(
    180deg,
    transparent 0,
    var(--paper-2) 8%,
    var(--paper-2) 92%,
    transparent 100%
  );
  border-top: 1px solid var(--gold);
  border-bottom: 1px solid var(--gold);
}
.ns-cn-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column;
  position: relative;
}
/* Dashed vertical spine that runs through the centres of the circles.
   Drawn as a single ::before so it threads continuously behind every
   row, with the circles overlaying it (opaque background masks the
   dash at each circle). The 36px = 64px column / 2 -- centre of the
   circle column. */
.ns-cn-list::before {
  content: "";
  position: absolute;
  left: 36px;
  top: 32px;
  bottom: 32px;
  border-left: 1px dashed var(--gold);
  opacity: .55;
}
.ns-cn-item {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 28px;
  align-items: start;
  padding: 22px 32px 22px 0;
  position: relative;
}
/* Top-align the numeral circle with the item title (rather than the
   row's vertical center). The small top offset seats the numeral on the
   title's cap-height instead of its line-box top. */
.ns-cn-meta {
  display: flex; align-items: flex-start; justify-content: center;
  position: relative;
  padding-top: 2px;
}
/* The circle — opaque background masks the dashed spine where it
   would otherwise pass through. Devanagari numeral centered inside. */
.ns-cn-circle {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1.5px solid var(--gold);
  background: var(--paper-2);
  display: flex; align-items: center; justify-content: center;
  position: relative;
  z-index: 1;
}
.ns-cn-num {
  font-family: 'Tiro Devanagari Sanskrit', var(--serif);
  font-style: normal;
  font-size: 20px;
  line-height: 1;
  color: var(--gold);
  letter-spacing: 0;
}
.ns-cn-title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
  color: var(--ink);
  margin: 0 0 6px;
}
.ns-cn-sub {
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
}
.ns-offering-price {
  font-family: var(--serif);
  font-style: italic;
  font-size: 24px;
  color: var(--gold);
  text-align: center;
  margin: 48px 0 0;
}

/* ── Promise ────────────────────────────────────────────── */
.ns-seal {
  font-family: var(--serif);
  font-style: italic;
  font-size: 24px;
  color: var(--gold);
  text-align: center;
  margin: 48px 0 0;
}

/* ── Final CTA ──────────────────────────────────────────── */
.ns-final {
  align-items: center;
  padding: 144px 0 0;
  gap: 28px;
}
.ns-final-mark {
  display: flex; align-items: center; gap: 12px;
}
.ns-final-line-rule {
  width: 80px; height: 1px; background: var(--gold);
}
.ns-final-diamond {
  width: 7px; height: 7px;
  background: var(--gold);
  transform: rotate(45deg);
}
.ns-final-line {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 48px;
  line-height: 1.18;
  color: var(--ink);
  text-align: center;
  margin: 16px 0 12px;
  text-wrap: balance;
}

/* ── Footer ───────────────────────────────────────────────
   Centered single column — brand, links, colophon, and the fine-print
   line all stack down the middle with one uniform gap, so nothing reads
   ragged the way a spread-to-edges row did. */
.ns-foot {
  margin-top: 120px;
  padding: 28px 56px 30px;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faded);
  background: var(--paper);
  position: relative;
  z-index: 2;
}
.ns-foot-brand { display: inline-flex; align-items: center; gap: 10px; }
.ns-foot-name { font-family: var(--serif); font-style: italic; text-transform: none; font-size: 16px; color: var(--ink-soft); letter-spacing: 0; }
.ns-foot-links { display: inline-flex; gap: 22px; }
.ns-foot-links a { color: var(--ink-soft); text-decoration: none; }
.ns-foot-links a:hover { color: var(--ink); }
.ns-foot-colophon { font-family: var(--serif); font-style: italic; font-size: 13px; text-transform: none; letter-spacing: 0; color: var(--ink-faded); }

/* Footer fine print — regulatory CYA line. One centered italic line,
   part of the same centered column. */
.ns-foot-fine {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.5;
  color: var(--ink-faded);
  max-width: 760px;
  margin: 2px 0 0;
}

/* ── Direction D · centered hero variant (rides on .ns-page) ─────
   Vedic Man at the top — the central illustration of the offer —
   then tagline, two italic lines, sub, CTA. The rest of the page
   (sections, constellation offering, FAQs, decision, footer, star
   field) is whatever NightSkyDirection renders below. */
.ns-d-hero {
  width: 100%;
  max-width: 980px;
  padding: 40px 0 24px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
}
.ns-d-vman-wrap {
  width: 620px;
  max-width: 100%;
  margin: 0 auto 28px;
}
.ns-vman { width: 100%; height: auto; display: block; }
.ns-d-line {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 50px;
  line-height: 1.14;
  letter-spacing: -.012em;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}
.ns-d-line + .ns-d-line { margin-top: 4px; }
.ns-d-sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 28px auto 0;
  max-width: 580px;
  text-wrap: pretty;
}
.ns-d-cta-row {
  margin-top: 28px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}

/* ── Inline wheel inside WHY I BUILT THIS ────────────────────────
   Sits centered as its own block between the prose paragraph and
   the "Our life paths may seem random" pull quote. Smaller than
   the hero — it's an illustration to the quote, not the centerpiece. */
/* The live /today sky wheel embedded as an illustration. All .sky-*
   rules below are ported verbatim from home#dashboard's wheel styles
   (twinkle, graha breath, halo pulse, bloom rest-state, loading) and
   scoped under .ns-sky. marketing.css only loads on the marketing
   layout, so they can't reach any other page. */
.ns-sky {
  display: flex; justify-content: center;
  width: 100%;
  /* Margins are size-independent so the gap stays uniform as the wheel
     resizes. (A fixed *negative* bottom margin pulled a constant px into a
     variable-size wheel — fine on the big desktop wheel, but it overlapped
     the bottom rashi labels once the wheel shrank.) A small pull up under
     the pull quote, a small clear gap above the paragraph below. */
  margin: -16px 0 16px;
}
.ns-sky .sky-arc-canvas {
  width: 100%;
  display: flex; align-items: center; justify-content: center;
  isolation: isolate;
}
/* The interactive-sky controller sizes the wheel via its .sky-wheel-root
   wrapper <div> (inline max-width up to ~820px) and lets the inner <svg>
   fill it. On this marketing surface that renders far larger than the hero
   figure, so cap the wrapper to the V-man's width (620px) — the wheel then
   matches the hero composition. Leave the controller's "div sizes, svg
   fills it" model intact. */
.ns-sky .sky-wheel-root { max-width: 620px !important; }
.ns-sky .sky-arc-canvas svg {
  shape-rendering: geometricPrecision;
  /* Living illustration, not interactive — strip hover tooltips + the
     click-to-open-modal affordance the wheel carries on /today. */
  pointer-events: none;
}
.ns-sky .sky-arc-canvas svg text { shape-rendering: auto; }

/* Loading placeholder — pulsing ॐ in a slow gold ring, replaced by the
   SVG on first render. */
.ns-sky .sky-arc-loading {
  position: relative;
  width: 320px; max-width: 100%; aspect-ratio: 1 / 1;
  margin: 0 auto;
  display: flex; align-items: center; justify-content: center;
}
.ns-sky .sky-arc-loading-ring {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(201, 162, 39, 0.18);
  border-top-color: #c9a227;
  animation: skyArcRingSpin 3.2s linear infinite;
}
.ns-sky .sky-arc-loading-om {
  font-family: 'Tiro Devanagari Sanskrit', serif;
  font-size: 72px; line-height: 1; color: #c9a227;
  animation: skyArcOmPulse 2.6s ease-in-out infinite;
  will-change: opacity, transform;
}
@keyframes skyArcRingSpin { to { transform: rotate(360deg); } }
@keyframes skyArcOmPulse {
  0%, 100% { opacity: .55; transform: scale(.96); }
  50%      { opacity: 1;   transform: scale(1.04); }
}

/* Star twinkle */
@keyframes sky-twinkle { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.ns-sky .sky-star { animation: sky-twinkle 4.5s ease-in-out infinite; }

/* Graha breath + halo pulse — guna-staggered periods per body. Sprite radius
   is fixed in the shared interactive-sky controller, so the base scale is
   tuned here (marketing-only, /today untouched) to land the discs near the
   hero V-man's planet size (~50px) on the 620px desktop wheel. The ≤820px
   block below — matching the wheel's own resize breakpoint — re-tunes the
   scale for the smaller (≤500px) wheel so the discs stay ~50px there too,
   instead of ballooning into "basketballs". */
@keyframes sky-breath { 0%, 100% { transform: scale(0.84); } 50% { transform: scale(0.96); } }
@keyframes sky-halo-pulse { 0%, 100% { transform: scale(0.90); opacity: .45; } 50% { transform: scale(1.12); opacity: 1; } }
.ns-sky .sky-graha,
.ns-sky .sky-luminary {
  transform-box: fill-box; transform-origin: center;
  animation: sky-breath var(--breath, 7s) ease-in-out infinite;
}
.ns-sky .sky-graha__halo,
.ns-sky .sky-luminary__glow {
  animation: sky-halo-pulse var(--shimmer, 9s) ease-in-out infinite;
  transform-box: fill-box; transform-origin: center;
}
.ns-sky .sky-graha--sa { --breath: 11s;   --shimmer: 13s;   }
.ns-sky .sky-graha--ra { --breath: 10s;   --shimmer: 12s;   }
.ns-sky .sky-graha--ke { --breath: 10.5s; --shimmer: 12.5s; }
.ns-sky .sky-graha--ma { --breath: 5s;    --shimmer: 6.5s;  }
.ns-sky .sky-graha--me { --breath: 4s;    --shimmer: 5.5s;  }
.ns-sky .sky-graha--ve { --breath: 6s;    --shimmer: 7.5s;  }
.ns-sky .sky-graha--ju      { --breath: 8s;   --shimmer: 9s;    }
.ns-sky .sky-luminary--sun  { --breath: 8.5s; --shimmer: 10.5s; }
.ns-sky .sky-luminary--moon { --breath: 7s;   --shimmer: 9.5s;  }

/* Bloom rest-state — leader lines + anchor dots stay hidden (the
   hover/tap bloom that would reveal them is disabled here). */
.ns-sky .sky-graha-bloom { transform: translate(0, 0); }
.ns-sky .sky-graha-leader,
.ns-sky .sky-graha-anchor { opacity: 0; pointer-events: none; }

/* Hide the moon's bhava-sector highlight here. On /today it anchors the eye
   and invites a tap on the moon, but this wheel is a non-interactive
   illustration, so the solid wedge just reads as a stray artefact. */
.ns-sky .sky-moon-bhava-glow { display: none; }

/* Re-enable hover on the graha sprites only (the SVG itself stays
   pointer-events:none) so each shows a name tooltip — matching the hero
   V-man. Click opens nothing here: openGraha() no-ops without a sky-modal
   outlet, which this page doesn't have. */
.ns-sky .sky-graha,
.ns-sky .sky-luminary { pointer-events: auto; }

/* ≤820px matches the wheel's own resize breakpoint (.sky-wheel-root drops to
   min(94vw,500px) here). The wheel stays a healthy ~500px — not phone-tiny
   like /today — so the discs need only a gentle up-scale to hold ~50px,
   not the dramatic boost /today uses (which read as oversized basketballs). */
@media (max-width: 820px) {
  @keyframes sky-breath {
    0%, 100% { transform: scale(1.00); }
    50%      { transform: scale(1.12); }
  }
  @keyframes sky-halo-pulse {
    0%, 100% { transform: scale(0.95); opacity: .45; }
    50%      { transform: scale(1.15); opacity: 1; }
  }
  .ns-sky .sky-rashi text:nth-of-type(1) { font-size: 13px; letter-spacing: .14em; }
  .ns-sky .sky-rashi text:nth-of-type(2) { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .ns-sky .sky-star,
  .ns-sky .sky-graha,
  .ns-sky .sky-graha__halo,
  .ns-sky .sky-luminary,
  .ns-sky .sky-luminary__glow { animation: none !important; }
  .ns-sky .sky-arc-loading-ring { animation: none; }
  .ns-sky .sky-arc-loading-om   { animation: none; opacity: 1; transform: none; }
}

/* ── D-only value-amplifier bands ──────────────────────────────
   Portrait band, kit flatlay band, nine-seats band — each inserts
   between sections to raise perceived value without changing the
   PDF copy. */
.ns-band {
  width: 100%;
  max-width: 720px;
  padding: 80px 0 0;
  display: flex; flex-direction: column;
}
.ns-band-eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 20px;
}
.ns-band-eyebrow-center { text-align: center; margin-bottom: 24px; }

/* 1 · Portrait band — image-left / text-right two-column pair, with the
   whole pair centered within the band (rather than flush-left). Columns
   size to content and justify-content centers them; text stays
   left-aligned inside its column. */
.ns-band-portrait .ns-band-inner {
  display: grid;
  grid-template-columns: 280px auto;
  gap: 40px;
  align-items: center;
  justify-content: center;
}
.ns-band-portrait image-slot {
  display: block;
  border: 1px solid var(--gold);
}
.ns-band-portrait-meta { padding-left: 0; }
.ns-band-portrait-name {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 36px;
  color: var(--ink);
  margin: 0 0 18px;
}
.ns-band-portrait-line {
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  color: var(--ink-soft);
  margin: 0 0 6px;
}

/* Bryan's Vow — small italic block beneath the credentials list */
.ns-band-vow {
  margin: 24px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid var(--gold);
  display: flex; flex-direction: column; gap: 8px;
}
.ns-band-vow-mark {
  font-family: var(--serif);
  font-size: 14px;
  color: var(--gold);
  opacity: .9;
  margin-left: 6px;
}
.ns-band-vow-text {
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
  text-wrap: pretty;
}
.ns-band-vow-attr {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: var(--ink-soft);
  margin: 0;
}

/* 2 · Kit / Letter / Chart band */
.ns-band-kit {
  align-items: center;
  text-align: center;
  padding: 24px 0 8px;
  max-width: 100%;
}
.ns-band-kit-grid {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.ns-band-kit-grid.is-3 {
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.ns-band-kit-grid image-slot {
  display: block;
}

/* Each tile in the 3-up grid has a fixed-aspect frame so The Kit, The
   Letter and Your Chart line up at identical size regardless of
   which is a synthetic SVG and which is an <image-slot>. */
.ns-band-tile-frame {
  width: 100%;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--gold);
  background: var(--paper-2);
  position: relative;
  overflow: hidden;
}
.ns-band-tile-frame > image-slot,
.ns-band-tile-frame > image-slot * {
  display: block;
  width: 100% !important;
  height: 100% !important;
  box-sizing: border-box;
}
.ns-band-tile-frame > svg {
  width: 100%; height: 100%;
  padding: 24px;
  box-sizing: border-box;
}
.ns-band-tile {
  display: flex; flex-direction: column;
}
.ns-band-tile-cap {
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  color: var(--ink);
  margin: 14px 0 0;
  text-align: center;
}
.ns-band-kit-cap {
  margin-top: 18px;
  display: flex; align-items: center; justify-content: center; gap: 16px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  color: var(--ink-soft);
}
.ns-band-diamond {
  width: 5px; height: 5px; background: var(--gold);
  transform: rotate(45deg); display: inline-block;
}

/* Birth chart card — wrapper class kept for legacy callers, but the
   chart now renders inside .ns-band-tile-frame so the three kit/letter/
   chart tiles share one frame system. */

/* ── Year arc ribbon ─────────────────────────────────────────── */
.ns-band-arc {
  align-items: center;
  padding: 40px 0;
}
.ns-d-arc {
  width: 100%;
  max-width: 760px;
  margin: 18px auto 0;
  padding: 20px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.ns-d-arc svg { width: 100%; height: auto; display: block; }

/* ── Wax seal medallion ───────────────────────────────────────── */
.ns-d-seal {
  width: 160px;
  margin: 32px auto 12px;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .25));
}
.ns-d-seal svg { width: 100%; height: auto; display: block; }

/* ── Testimonials band ───────────────────────────────────────── */
.ns-band-voices {
  align-items: center;
  text-align: center;
}
.ns-band-voices-tag {
  font-family: var(--serif);
  font-style: italic;
  font-size: 19px;
  color: var(--ink-soft);
  max-width: 560px;
  margin: 0 auto 40px;
}
/* Retreats band's framing line is a full paragraph, not a one-line
   tagline — set it roman so it reads easily and restores the page's
   italic-heading / roman-body contrast (the VOICES band's short tagline
   stays italic). */
#retreats .ns-band-voices-tag { font-style: normal; max-width: 620px; }
.ns-d-videos {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-bottom: 56px;
}
.ns-d-video {
  margin: 0;
  display: flex; flex-direction: column;
}
.ns-d-video image-slot,
.ns-d-video .ns-d-vid-player {
  display: block;
  border: 1px solid var(--gold);
  background: #000;
}
/* Real testimonial player — fills the same framed 16:9 slot as the
   placeholders. preload="none" keeps it off the page-load critical path. */
.ns-d-video .ns-d-vid-player {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.ns-d-video figcaption {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 14px;
  text-align: left;
}
.ns-d-vid-name {
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  color: var(--ink);
}
.ns-d-vid-meta {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
/* One-line result quote pulled from each clip, so the proof lands for
   scanners who don't press play. */
.ns-d-vid-quote {
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink);
  margin: 0 0 8px;
  text-wrap: pretty;
}
/* Proof echo — a single testimonial line dropped beside the price and the
   final CTA, where doubt peaks. */
.ns-proof-echo {
  font-family: var(--serif);
  font-style: italic;
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink);
  text-align: center;
  max-width: 560px;
  margin: 28px auto 0;
  text-wrap: pretty;
}
.ns-proof-echo cite {
  display: block;
  font-style: normal;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 10px;
}
/* A lone clip (the single student video until a second lands) would sit in
   the left half of the 2-col grid — center it so it reads as intentional.
   Reverts automatically once a second video is added. */
.ns-d-videos > .ns-d-video:only-child {
  grid-column: 1 / -1;
  max-width: 620px;
  margin: 0 auto;
}

/* Quote tablets */
.ns-d-quotes {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.ns-d-quote {
  margin: 0;
  padding: 28px 24px 24px;
  border-top: 1px solid var(--gold);
  border-bottom: 1px solid var(--gold);
  background: var(--paper-2);
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
  text-align: left;
}
.ns-d-quote-mark {
  font-family: var(--serif);
  color: var(--gold);
  font-size: 16px;
  opacity: .8;
}
.ns-d-quote-text {
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
  flex: 1;
  text-wrap: pretty;
  outline: none;
}
.ns-d-quote-text:focus {
  background: rgba(255, 255, 255, .04);
  border-radius: 4px;
}
.ns-d-quote-attr {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: var(--ink-soft);
  margin: 0;
}
.ns-d-quote-attr span { letter-spacing: .005em; }

/* ── Letter excerpt band ─────────────────────────────────────── */
.ns-band-letter {
  align-items: center;
  text-align: center;
}
.ns-band-letter-tag {
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  color: var(--ink-soft);
  max-width: 580px;
  margin: 0 auto 32px;
}
.ns-d-letter-frame {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
}
.ns-d-letter-frame image-slot {
  display: block;
  border: 1px solid var(--gold);
  background: var(--paper-2);
}
.ns-band-letter-foot {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-faded);
  margin: 18px 0 0;
}

/* 3 · Nine seats band */
.ns-band-seats {
  align-items: center;
  text-align: center;
}
.ns-band-seats-line {
  font-family: var(--serif);
  font-style: italic;
  font-size: 20px;
  line-height: 1.5;
  color: var(--ink);
  max-width: 580px;
  margin: 0 auto 36px;
  text-wrap: balance;
}
.ns-band-seats-grid {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 14px;
  max-width: 720px;
  width: 100%;
  margin: 0 auto;
}
.ns-band-seat {
  aspect-ratio: 1 / 1;
  border: 1px solid var(--rule);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px;
  background: var(--paper-2);
  transition: border-color .15s, background .15s;
}
.ns-band-seat.is-filled {
  background: var(--gold);
  border-color: var(--gold);
}
.ns-band-seat.is-filled .ns-band-seat-num { color: var(--paper); }
.ns-band-seat.is-filled .ns-band-seat-state { color: var(--paper); opacity: .85; }
.ns-band-seat-num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  color: var(--ink);
  line-height: 1;
}
.ns-band-seat-state {
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.ns-band-seats-closed {
  font-family: var(--serif);
  font-style: italic;
  font-size: 20px;
  color: var(--gold);
  margin: 36px 0 0;
}

/* ── Image placeholders ──────────────────────────────────────────
   The prototype used a custom <image-slot> drop target for the six
   user-uploaded images (portrait, kit, Letter mockup, Letter excerpt,
   two testimonial videos). Until those assets land we render a styled
   placeholder — a gold-bordered frame with an italic serif caption —
   so the page reads intact. Swap these for ActiveStorage <img>/<video>
   when Bryan delivers the media. */
.ns-slot {
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  box-sizing: border-box;
  border: 1px solid var(--gold);
  background: var(--paper-2);
  color: var(--ink-soft);
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  line-height: 1.5;
  padding: 18px;
}
.ns-slot-portrait { width: 280px; height: 350px; border-radius: 6px; }
.ns-slot-fill {
  position: absolute; inset: 0;
  border: none; background: transparent;
}
.ns-d-video .ns-slot { width: 100%; aspect-ratio: 16 / 9; background: #000; color: #b2a98f; }
.ns-d-letter-frame .ns-slot { width: 100%; aspect-ratio: 16 / 11; }

/* ── Responsive ──────────────────────────────────────────────────
   Collapse the multi-column bands and trim the oversized type so the
   page holds on phones. Matches the prototype's single-column intent
   below the desktop breakpoint. */
@media (max-width: 820px) {
  .ns-top { padding: 0 24px; gap: 12px; }
  /* Hold the bar to one line — wrapped labels overflow its fixed 72px height. */
  .ns-brand-name, .ns-signin, .ns-begin { white-space: nowrap; }
  .ns-top-end { gap: 14px; }
  .ns-begin { padding: 8px 14px; }
  .ns-main { padding: 0 24px 64px; }
  .ns-foot, .ns-foot-fine { padding-left: 24px; padding-right: 24px; }
  .ns-foot { flex-direction: column; gap: 16px; text-align: center; }

  .ns-d-line { font-size: 30px; }
  .ns-hero-headline { font-size: 36px; }
  .ns-h2 { font-size: 30px; }
  .ns-final-line { font-size: 34px; }

  /* The hero's negative margins are desktop-tuned; on mobile the figure is
     smaller, so those negatives crowd the H1 and sub-headline against it.
     Relax them here (overriding the inline desktop values) so the hero
     breathes on phones. */
  .ns-d-vman-wrap { width: min(100vw, 500px); margin-top: 0 !important; margin-bottom: -32px !important; }

  /* The live-sky wheel's desktop negative margins (esp. -62px bottom) pull
     the next paragraph up over the wheel on mobile, where the wheel is
     smaller. Relax them, and pull the wheel in a touch so the rim labels
     (Taurus/Gemini/Cancer …) clear the screen edge. */
  .ns-sky .sky-wheel-root { max-width: min(94vw, 500px) !important; }

  /* CTA block: the desktop Apply button is oversized on a phone; shrink it,
     give the price a little more breathing room above it, and cut the huge
     hero-bottom + section-top void (88px + 96px) down to a sane mobile gap. */
  .ns-cta { font-size: 20px; padding: 14px 30px; }
  .ns-d-cta-row { gap: 16px; }
  .ns-section { padding-top: 56px; }

  .ns-band-portrait .ns-band-inner { grid-template-columns: 1fr; justify-items: center; }
  .ns-band-portrait-meta { padding-left: 0; text-align: center; }
  .ns-band-portrait .ns-band-eyebrow { text-align: center; }

  .ns-band-kit-grid.is-3 { grid-template-columns: 1fr; }
  .ns-d-videos { grid-template-columns: 1fr; }
  .ns-d-quotes { grid-template-columns: 1fr; }
  .ns-band-seats-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ── § THE CLOSE § — one composed urgency + CTA object (Direction A) ──── */
.ns-close-wrap {
  max-width: 620px; margin: 0 auto; padding: 84px 40px 76px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.ns-close-glyph { display: block; }
.ns-close-synthesis {
  margin: 22px 0 0; font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: 24px; line-height: 1.4; color: var(--gold); max-width: 540px; text-wrap: pretty;
}
.ns-close-rule { margin-top: 44px; width: 200px; height: 1px; background: var(--gold); opacity: 0.32; }
.ns-close-ledger {
  margin: 36px 0 0; font-family: var(--sans); font-size: 11px; letter-spacing: 0.36em;
  font-weight: 600; text-transform: uppercase; color: var(--gold);
}
.ns-close-dots { margin-top: 18px; display: flex; gap: 16px; align-items: center; justify-content: center; flex-wrap: wrap; }
.ns-close-subline { margin: 16px 0 0; font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--ink-soft); }
.ns-close-flat { margin: 36px 0 0; font-family: var(--serif); font-style: italic; font-size: 16px; line-height: 1.6; color: var(--ink-soft); max-width: 460px; }
.ns-close-headline {
  margin: 64px 0 28px; font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: 44px; line-height: 1.1; color: var(--ink); letter-spacing: -0.005em;
}
.ns-close-cta {
  background: var(--gold); color: var(--paper); border: none;
  padding: 20px 44px 18px; display: inline-flex; flex-direction: column; align-items: center; gap: 4px;
  min-width: 360px; max-width: 100%; box-sizing: border-box; text-decoration: none;
  box-shadow: 0 1px 0 rgba(0,0,0,0.05), 0 14px 28px -18px rgba(120,80,15,0.45);
  transition: transform 200ms ease;
}
.ns-close-cta:active { transform: translateY(1px); }
.ns-close-cta-label { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 26px; letter-spacing: 0.005em; }
.ns-close-cta-price { font-family: var(--sans); font-size: 10.5px; letter-spacing: 0.28em; font-weight: 600; text-transform: uppercase; opacity: 0.78; }
.ns-close-proof { margin-top: 28px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ns-close-quote { margin: 0; font-family: var(--serif); font-style: italic; font-size: 16px; color: var(--ink-soft); max-width: 460px; text-wrap: pretty; }
.ns-close-cite { margin: 0; font-family: var(--sans); font-size: 10px; letter-spacing: 0.32em; font-weight: 500; text-transform: uppercase; color: var(--ink-faded); }

@media (max-width: 640px) {
  .ns-close-wrap { padding: 56px 22px 60px; }
  .ns-close-synthesis { font-size: 21px; }
  .ns-close-headline { font-size: 32px; margin: 48px 0 24px; }
  .ns-close-cta { min-width: 0; width: 100%; }
  .ns-close-dots { gap: 10px; }
}

/* Very small phones: the sticky bar can't fit brand + sign-in + Begin at
   full size, so trim type and drop the "Member?" prefix. */
@media (max-width: 480px) {
  .ns-top { padding: 0 16px; }
  .ns-brand-om { font-size: 22px; }
  .ns-brand-name { font-size: 16px; }
  .ns-signin { font-size: 13px; }
  .ns-signin-q { display: none; }
  .ns-begin { font-size: 14px; padding: 7px 12px; }
}