/* Cosmic Atlas v3.1 — production homepage skin.
   Loaded ONLY on "/" (see scripts/lib/pages.py page_home / render_page
   extra_head). Ported from the accepted docs/design/cosmic-atlas-poc-v3.1.html
   prototype — see CLAUDE.md section 104.3 and docs/design/COSMIC_ATLAS_SPEC.md.

   Every selector below is scoped under .cosmic-home so this stylesheet can
   never change the shared header/footer or any other page — those keep
   using tokens.css/base.css/components.css exactly as before. Spacing and
   font tokens reuse the existing --space-*, --font-sans and --font-mono
   custom properties from tokens.css (values already match); only genuinely new
   tokens (colours, the display typeface, this page's own content width)
   get new, atlas-prefixed names so nothing here can shadow a sitewide
   token for other pages. */

:root {
  --atlas-canvas: #FAFAFB;
  --atlas-canvas-2: #F3F1FA;
  --atlas-surface: #FFFFFF;
  --atlas-ink: #0B0E14;
  --atlas-ink-muted: #4B5566;
  --atlas-border-subtle: #E3E6EC;
  --atlas-border-strong: #7A8492;
  --atlas-deep-space: #0A0818;
  --atlas-deep-space-2: #1E1640;
  --atlas-nebula-2: #3B2A78;
  --atlas-hero-text: #F4F2FF;
  --atlas-hero-text-muted: #B7AFDD;
  --atlas-accent-indigo: #4B3DF0;
  --atlas-accent-indigo-dark: #372BC2;
  --atlas-accent-warm: #F0B93D;
  --atlas-data-panel-bg: #F1F3F7;

  --font-display: 'Fraunces', Georgia, serif;

  --atlas-content-width: 1360px;
  --atlas-content-width-prose: 66ch;
}

.cosmic-home { overflow-x: hidden; }

.cosmic-home :focus-visible { outline: 3px solid var(--atlas-accent-indigo); outline-offset: 2px; }

.cosmic-home .full-bleed { width: 100%; }
.cosmic-home .wrap { max-width: var(--atlas-content-width); margin-inline: auto; padding-inline: var(--space-md); }
.cosmic-home .prose { max-width: var(--atlas-content-width-prose); }

.cosmic-home ul { margin: 0; padding: 0; list-style: none; }

.cosmic-home h1, .cosmic-home h2, .cosmic-home h3 {
  font-family: var(--font-display); font-weight: 600; line-height: 1.1;
  margin: 0 0 var(--space-sm); letter-spacing: -0.01em; text-wrap: balance;
  color: var(--atlas-ink);
}
.cosmic-home h1 { font-size: clamp(2.25rem, 5vw, 4rem); font-weight: 500; }
.cosmic-home h2 { font-size: clamp(1.6rem, 3vw, 2.25rem); }
.cosmic-home h3 { font-size: 1.15rem; font-family: var(--font-sans); font-weight: 700; }
.cosmic-home p { margin: 0 0 var(--space-sm); color: var(--atlas-ink-muted); }

.cosmic-home .btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.85rem 1.5rem; border-radius: 8px; font-weight: 600; font-size: 0.95rem;
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
}
.cosmic-home .btn-sm { padding: 0.55rem 1rem; font-size: 0.85rem; border-radius: 6px; }
.cosmic-home .btn-primary { background: var(--atlas-accent-indigo); color: #fff; }
.cosmic-home .btn-primary:hover { background: var(--atlas-accent-indigo-dark); text-decoration: none; }
.cosmic-home .btn-warm { background: var(--atlas-accent-warm); color: var(--atlas-ink); }
.cosmic-home .btn-warm:hover { filter: brightness(0.94); text-decoration: none; }
.cosmic-home .btn-ghost { background: transparent; color: var(--atlas-ink); border-color: var(--atlas-border-strong); }
.cosmic-home .btn-ghost:hover { border-color: var(--atlas-accent-indigo); color: var(--atlas-accent-indigo); text-decoration: none; }
.cosmic-home .btn-ghost-dark { background: transparent; color: var(--atlas-hero-text); border-color: rgba(244,242,255,0.4); }
.cosmic-home .btn-ghost-dark:hover { border-color: var(--atlas-hero-text); text-decoration: none; }

.cosmic-home .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.cosmic-home .data-label {
  font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em;
  font-size: 0.7rem; font-weight: 600;
}

/* ================= SCENE base ================= */
.cosmic-home .scene { padding-block: var(--space-2xl); position: relative; }
.cosmic-home .scene__head { max-width: var(--atlas-content-width-prose); margin-bottom: var(--space-lg); }
.cosmic-home .scene__head .data-label { display: block; margin-bottom: var(--space-xs); }

/* ---- SCENE 1: HERO (deep space) ---- */
.cosmic-home .scene--hero {
  background:
    radial-gradient(ellipse 900px 500px at 80% 10%, rgba(240,185,61,0.10), transparent 60%),
    radial-gradient(ellipse 1200px 800px at 15% 100%, var(--atlas-deep-space-2), transparent 70%),
    var(--atlas-deep-space);
  color: var(--atlas-hero-text);
  overflow: hidden;
  padding-block: var(--space-2xl) var(--space-xl);
}
.cosmic-home .starfield {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
  background-image:
    radial-gradient(1px 1px at 10% 20%, #fff, transparent),
    radial-gradient(1px 1px at 80% 15%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 60% 70%, #fff, transparent),
    radial-gradient(1px 1px at 30% 80%, #fff, transparent),
    radial-gradient(1px 1px at 90% 60%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 45% 30%, #fff, transparent),
    radial-gradient(1px 1px at 20% 55%, #fff, transparent),
    radial-gradient(1px 1px at 70% 85%, #fff, transparent);
  background-repeat: no-repeat;
}
.cosmic-home .scene--hero .orbits { position: absolute; inset: 0; pointer-events: none; display: flex; align-items: center; justify-content: flex-end; }
.cosmic-home .scene--hero .orbits svg { opacity: 0.35; width: min(70vw, 900px); height: auto; transform: translateX(20%); }
.cosmic-home .orbit-ring { animation: cosmic-home-spin 260s linear infinite; transform-origin: 500px 500px; }
.cosmic-home .orbit-ring--rev { animation-duration: 380s; animation-direction: reverse; }
@keyframes cosmic-home-spin { to { transform: rotate(360deg); } }

.cosmic-home .hero__inner { position: relative; z-index: 1; max-width: 44rem; }
.cosmic-home .hero__eyebrow { display: inline-flex; align-items: center; gap: 0.5em; color: var(--atlas-accent-warm); margin-bottom: var(--space-sm); }
.cosmic-home .hero__eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--atlas-accent-warm); }
.cosmic-home .scene--hero h1 { color: var(--atlas-hero-text); }
.cosmic-home .hero__sub { color: var(--atlas-hero-text-muted); font-size: 1.1rem; max-width: 40ch; }
.cosmic-home .hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-lg); }
.cosmic-home .hero__readout { display: flex; flex-wrap: wrap; gap: var(--space-lg); margin-top: var(--space-xl); padding-top: var(--space-md); border-top: 1px solid rgba(244,242,255,0.15); }
.cosmic-home .hero__readout-item .data-label { color: var(--atlas-hero-text-muted); display: block; margin-bottom: 0.3rem; }
.cosmic-home .hero__readout-item .mono { color: var(--atlas-hero-text); font-size: 1.02rem; }

/* ---- SCENE 2: PRODUCT DISCOVERY (light, gradient into nebula) ---- */
.cosmic-home .scene--discovery { background: linear-gradient(180deg, var(--atlas-canvas) 0%, var(--atlas-canvas) 70%, var(--atlas-canvas-2) 100%); }
.cosmic-home .scene--discovery .scene__head .data-label { color: var(--atlas-accent-indigo); }

.cosmic-home .discovery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-md); }
.cosmic-home .discovery-card {
  display: flex; flex-direction: column; gap: var(--space-xs);
  text-decoration: none; color: var(--atlas-ink);
  background: var(--atlas-surface);
  border: 1px solid var(--atlas-border-subtle);
  border-radius: 14px;
  padding: var(--space-md);
  min-height: 190px;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}
.cosmic-home .discovery-card:hover, .cosmic-home .discovery-card:focus-visible {
  transform: translateY(-3px);
  border-color: var(--atlas-accent-indigo);
  box-shadow: 0 14px 34px rgba(11,14,20,0.09);
  text-decoration: none;
}
.cosmic-home .discovery-card__glyph { width: 34px; height: 34px; color: var(--atlas-accent-indigo); }
.cosmic-home .discovery-card h3 { margin: 0; font-size: 1.2rem; }
.cosmic-home .discovery-card p { margin: 0; font-size: 0.95rem; flex-grow: 1; }
.cosmic-home .discovery-card__dest {
  display: flex; align-items: center; gap: 0.4em;
  color: var(--atlas-accent-indigo-dark);
  padding-top: var(--space-xs); margin-top: 0.1rem;
  border-top: 1px solid var(--atlas-border-subtle);
}
.cosmic-home .discovery-card__dest::after { content: "→"; margin-left: auto; }

/* ---- SCENE 3: COSMIC SCALE (atmospheric nebula) — the signature scene ---- */
.cosmic-home .scene--scale {
  background: radial-gradient(ellipse 1400px 900px at 50% 0%, var(--atlas-nebula-2), var(--atlas-deep-space-2) 55%, var(--atlas-deep-space) 100%);
  color: var(--atlas-hero-text);
  overflow: hidden;
  position: relative;
}
.cosmic-home .scene--scale .scene__head .data-label { color: var(--atlas-accent-warm); }
.cosmic-home .scene--scale h2 { color: var(--atlas-hero-text); }
.cosmic-home .scene--scale .scene__head p { color: var(--atlas-hero-text-muted); }
.cosmic-home .scene--scale .starfield { opacity: 0.35; }

/* Journey list: full-width rows, alternating sides on desktop, always a
   plain single column on narrow screens. Each row is a native <details>
   so name, price, and full details work with zero JavaScript. A
   background SVG "thread" connects the stops; horizontal separators are
   barely-there — the thread carries continuity, not a row-per-row rule. */
.cosmic-home .cosmic-journey { position: relative; margin-top: var(--space-lg); }
.cosmic-home .cosmic-journey__thread { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: 0.55; overflow: visible; }
.cosmic-home .cosmic-journey__list { position: relative; z-index: 1; display: flex; flex-direction: column; }

.cosmic-home .cosmic-stop { position: relative; }
.cosmic-home .cosmic-stop::after {
  content: ""; display: block; height: 1px; margin: 0 auto;
  width: min(50%, 22rem);
  background: linear-gradient(to right, transparent, rgba(244,242,255,0.12), transparent);
}
.cosmic-home .cosmic-stop:last-child::after { display: none; }
.cosmic-home .cosmic-stop summary {
  display: flex; align-items: center; gap: var(--space-md);
  list-style: none; cursor: pointer; padding-block: 0.85rem;
}
.cosmic-home .cosmic-stop summary::-webkit-details-marker { display: none; }
.cosmic-home .cosmic-stop summary:hover .cosmic-stop__name,
.cosmic-home .cosmic-stop summary:focus-visible .cosmic-stop__name { color: var(--atlas-accent-warm); }

.cosmic-home .cosmic-stop__glyph {
  position: relative; flex-shrink: 0;
  width: var(--size); height: var(--size);
  display: flex; align-items: center; justify-content: center;
}
.cosmic-home .cosmic-stop__glyph svg { width: 100%; height: 100%; overflow: visible; }

.cosmic-home .cosmic-stop__intro { flex: 1 1 auto; min-width: 0; }
.cosmic-home .cosmic-stop__name {
  display: block; font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.05rem, 0.95rem + 0.8vw, 1.5rem);
  line-height: 1.15;
  transition: color 140ms ease;
}
.cosmic-home .cosmic-stop__price {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-size: 0.8rem; color: var(--atlas-hero-text-muted); margin-top: 0.15rem;
}
.cosmic-home .cosmic-stop__chevron {
  flex-shrink: 0; color: var(--atlas-hero-text-muted);
  transition: transform 160ms ease;
}
.cosmic-home .cosmic-stop[open] .cosmic-stop__chevron { transform: rotate(90deg); }

.cosmic-home .cosmic-stop__detail {
  padding-bottom: var(--space-md); padding-left: calc(var(--size, 64px) + var(--space-md));
  max-width: 30rem;
}
.cosmic-home .cosmic-stop__detail p { color: var(--atlas-hero-text-muted); font-size: 0.92rem; }
.cosmic-home .cosmic-stop__detail p strong { color: var(--atlas-hero-text); }
.cosmic-home .cosmic-stop__specs {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.3rem 1.5rem; margin: var(--space-xs) 0; padding: 0;
}
.cosmic-home .cosmic-stop__specs div { font-family: var(--font-mono); font-size: 0.8rem; color: var(--atlas-hero-text-muted); }

/* All real billing cycles for this product — never invented, never a
   computed monthly-equivalent, never a savings badge. */
.cosmic-home .cosmic-stop__cycles { list-style: none; margin: var(--space-xs) 0; padding: 0; border-top: 1px solid rgba(244,242,255,0.12); }
.cosmic-home .cosmic-stop__cycles li {
  display: flex; justify-content: space-between; gap: 1rem;
  padding-block: 0.35rem; border-bottom: 1px solid rgba(244,242,255,0.08);
  font-family: var(--font-mono); font-size: 0.82rem;
}
.cosmic-home .cosmic-stop__cycles .cycle-name { color: var(--atlas-hero-text-muted); text-transform: capitalize; }
.cosmic-home .cosmic-stop__cycles .cycle-amount { color: var(--atlas-hero-text); font-variant-numeric: tabular-nums; }
.cosmic-home .cosmic-stop__setup { font-size: 0.78rem; color: var(--atlas-hero-text-muted); margin-top: 0.4rem !important; }

/* Desktop: alternate sides for editorial rhythm — a journey, not a chart axis */
@media (min-width: 900px) {
  .cosmic-home .cosmic-stop:nth-of-type(even) summary { flex-direction: row-reverse; text-align: right; }
  .cosmic-home .cosmic-stop:nth-of-type(even) .cosmic-stop__price { flex-direction: row-reverse; }
  .cosmic-home .cosmic-stop:nth-of-type(even) .cosmic-stop__detail { padding-left: 0; padding-right: calc(var(--size, 64px) + var(--space-md)); margin-left: auto; text-align: right; }
  .cosmic-home .cosmic-stop:nth-of-type(even) .cosmic-stop__specs { justify-items: end; }
  .cosmic-home .cosmic-stop:nth-of-type(even) .cosmic-stop__cycles li { flex-direction: row-reverse; }
}
@media (max-width: 640px) {
  .cosmic-home .cosmic-journey__thread { display: none; }
  .cosmic-home .cosmic-stop summary { gap: var(--space-sm); }
  .cosmic-home .cosmic-stop__detail { padding-left: 0; max-width: none; }
}

.cosmic-home .scale-footnote { color: var(--atlas-hero-text-muted); font-size: 0.85rem; max-width: var(--atlas-content-width-prose); margin-top: var(--space-lg); }

/* ---- SCENE 4: FACTS / INFRASTRUCTURE (light, data-readout accents) ---- */
.cosmic-home .scene--facts { background: var(--atlas-canvas); }
.cosmic-home .scene--facts .scene__head .data-label { color: var(--atlas-accent-indigo); }
/* Independent tiles with real gaps, not a shared-grid-background trick —
   an uneven last row just leaves empty page background, never an
   exposed "hole." */
.cosmic-home .fact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-sm); }
.cosmic-home .fact-card {
  background: var(--atlas-surface); padding: var(--space-md);
  border: 1px solid var(--atlas-border-subtle); border-radius: 10px;
  box-shadow: 0 1px 2px rgba(11,14,20,0.04);
}
.cosmic-home .fact-card .data-label { color: var(--atlas-ink-muted); display: block; margin-bottom: 0.4rem; }
.cosmic-home .fact-card__value { font-family: var(--font-mono); font-size: 1.05rem; font-variant-numeric: tabular-nums; color: var(--atlas-ink); }
.cosmic-home .fact-card__note { font-size: 0.75rem; color: var(--atlas-ink-muted); }

/* ---- SCENE 5: SUPPORT / FINAL CTA (dark bookend) ---- */
.cosmic-home .scene--closing { background: var(--atlas-deep-space); color: var(--atlas-hero-text); }
.cosmic-home .scene--closing .scene__head .data-label { color: var(--atlas-accent-warm); }
.cosmic-home .scene--closing h2 { color: var(--atlas-hero-text); }
.cosmic-home .scene--closing p { color: var(--atlas-hero-text-muted); }
.cosmic-home .closing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-md); margin-bottom: var(--space-lg); }
.cosmic-home .closing-card {
  position: relative; overflow: hidden;
  border: 1px solid rgba(244,242,255,0.15); border-radius: 12px; padding: var(--space-md);
  background: radial-gradient(120px 120px at 100% 0%, rgba(240,185,61,0.08), transparent 70%);
  transition: border-color 160ms ease;
}
.cosmic-home .closing-card:hover { border-color: rgba(240,185,61,0.35); }
/* A thin orbit ring frames each icon, echoing the Cosmic Scale motif — a
   navigation marker, not a dashboard icon tile. */
.cosmic-home .closing-card__orbit {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(240,185,61,0.3);
  margin-bottom: var(--space-sm);
}
.cosmic-home .closing-card__glyph { width: 20px; height: 20px; color: var(--atlas-accent-warm); opacity: 0.95; }
.cosmic-home .closing-card h3 { color: var(--atlas-hero-text); font-size: 1rem; }
.cosmic-home .closing-card p { font-size: 0.9rem; margin-bottom: var(--space-xs); }
.cosmic-home .closing-card a { color: var(--atlas-accent-warm); font-weight: 600; text-decoration: none; }
.cosmic-home .closing-cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); padding-top: var(--space-lg); border-top: 1px solid rgba(244,242,255,0.15); }
.cosmic-home .closing-cta h2 { margin: 0; font-size: 1.6rem; }

@media (max-width: 640px) {
  .cosmic-home .wrap { padding-inline: var(--space-sm); }
  .cosmic-home .scene { padding-block: var(--space-xl); }
  .cosmic-home .scene--hero .orbits { display: none; }
}