/* ===========================================================================
   Ascendia — public site
   ---------------------------------------------------------------------------
   The palette is NOT invented. Every value below is lifted from the app's own
   theme so the site and the product are visibly the same object:
     gold   #FFD166  = spaces.goals.dark        (the orb's warm heart)
     aurora #4FE0A6  = ascent.rimNight          (the night aurora)
     sky    #5AD1E6  = ascent.edge[1]           (the corona's outer band)
   Cognito is documented in the app as "the Summit Light" — a near-white core
   with a gold heart suspended in an aurora corona. That is the hero, and the
   canvas in index.html breathes on the same 6s cadence as the real orb.

   DELIBERATELY SINGLE-THEME. This is a dark alpine pre-dawn; a light variant
   would be a different product. Per the design rules, that means every colour
   is painted explicitly and nothing is left to inherit from a host ground.
   =========================================================================== */

:root {
  --night:    #06100E;   /* ground — green-biased, never neutral black */
  --night-2:  #0B1A17;   /* raised surface */
  --night-3:  #12241F;   /* hairline / border */
  --core:     #FFFFFF;
  --gold:     #FFD166;
  --aurora:   #4FE0A6;
  --sky:      #5AD1E6;
  --mist:     #A8BDB6;   /* body text — grey biased toward the accent */
  --mist-dim: #6E837C;   /* captions */

  --measure: 62ch;
  --gap-xs: 8px;  --gap-s: 16px;  --gap-m: 28px;
  --gap-l: 56px;  --gap-xl: 104px;

  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans:  "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--night);
  color: var(--mist);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.wrap { width: min(1080px, 100% - 44px); margin-inline: auto; }
.narrow { width: min(var(--measure), 100% - 44px); margin-inline: auto; }

/* ── type ────────────────────────────────────────────────────────────────── */
h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 550;
  color: var(--core);
  text-wrap: balance;
  margin: 0;
  font-variation-settings: "SOFT" 0, "WONK" 0;
  letter-spacing: -0.015em;
}
h1 { font-size: clamp(2.6rem, 7vw, 4.6rem); line-height: 1.02; }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); line-height: 1.12; }
h3 { font-size: 1.12rem; line-height: 1.3; font-weight: 600; }
p  { margin: 0; }

.eyebrow {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mist-dim);
}
.lede { font-size: clamp(1.05rem, 2vw, 1.24rem); color: var(--mist); }
strong { color: var(--core); font-weight: 600; }

a { color: var(--aurora); text-decoration-color: color-mix(in srgb, var(--aurora) 40%, transparent); text-underline-offset: 3px; }
a:hover { color: var(--core); }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--sky); outline-offset: 3px; border-radius: 3px;
}

/* ── layout rhythm ───────────────────────────────────────────────────────── */
section { padding-block: var(--gap-xl); }
.stack   { display: flex; flex-direction: column; gap: var(--gap-m); }
.stack-s { display: flex; flex-direction: column; gap: var(--gap-s); }

/* ── header ──────────────────────────────────────────────────────────────── */
.site-head {
  position: sticky; top: 0; z-index: 20;
  backdrop-filter: blur(14px);
  background: color-mix(in srgb, var(--night) 82%, transparent);
  border-bottom: 1px solid var(--night-3);
}
.site-head .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--gap-s); padding-block: 15px;
}
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--serif); font-size: 1.16rem; font-weight: 600;
  color: var(--core); text-decoration: none; letter-spacing: -0.01em;
}
.brand-dot {
  width: 11px; height: 11px; border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #fff 0%, var(--gold) 42%, var(--aurora) 76%, transparent 100%);
  box-shadow: 0 0 14px color-mix(in srgb, var(--aurora) 55%, transparent);
}
.site-nav { display: flex; gap: var(--gap-m); font-size: 0.92rem; }
.site-nav a { color: var(--mist); text-decoration: none; }
.site-nav a:hover { color: var(--core); }
@media (max-width: 640px) { .site-nav { display: none; } }

/* ── hero ────────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  /* The canvas fills this box exactly. It used to be oversized with negative
     insets to bleed the glow off-screen, which set clientWidth to 0 (so the
     canvas never painted) AND pushed the document 112px wider than the
     viewport. The off-centre placement is done inside the paint instead. */
  overflow: hidden;
  padding-block: clamp(80px, 14vh, 150px) var(--gap-xl);
}
#summit {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 0; pointer-events: none;
}
.hero .wrap { position: relative; z-index: 1; }
.hero h1 { max-width: 15ch; }
.hero .lede { max-width: 46ch; margin-top: var(--gap-m); }

.cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: var(--gap-l); align-items: center; }
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--sans); font-size: 0.96rem; font-weight: 600;
  padding: 13px 24px; border-radius: 100px; text-decoration: none;
  border: 1px solid transparent; transition: transform .18s ease, background .18s ease;
}
.btn-primary { background: var(--core); color: var(--night); }
.btn-primary:hover { background: var(--gold); color: var(--night); transform: translateY(-1px); }
.btn-ghost { border-color: var(--night-3); color: var(--mist); }
.btn-ghost:hover { border-color: var(--aurora); color: var(--core); }
@media (prefers-reduced-motion: reduce) { .btn:hover { transform: none; } }

/* ── the claim strip ─────────────────────────────────────────────────────── */
.claims { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1px;
  background: var(--night-3); border: 1px solid var(--night-3); border-radius: 14px; overflow: hidden; }
.claim { background: var(--night); padding: 26px 24px; }
.claim .n { font-family: var(--serif); font-size: 1.9rem; color: var(--core); display: block; line-height: 1; }
.claim .t { font-size: 0.9rem; color: var(--mist-dim); margin-top: 9px; display: block; }

/* ── rooms ───────────────────────────────────────────────────────────────── */
.rooms { display: grid; grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); gap: 14px; }
.room {
  background: var(--night-2); border: 1px solid var(--night-3);
  border-radius: 14px; padding: 24px; display: flex; flex-direction: column; gap: 9px;
}
.room .k { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--aurora); }
.room p { font-size: 0.94rem; color: var(--mist); }

/* ── media slot (owner supplies art later) ───────────────────────────────── */
.slot {
  border: 1px dashed var(--night-3); border-radius: 16px;
  background:
    radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--aurora) 7%, transparent), transparent 70%),
    var(--night-2);
  display: grid; place-items: center; text-align: center;
  padding: clamp(48px, 12vw, 110px) 24px; gap: 10px;
}
.slot .eyebrow { color: var(--mist-dim); }
.slot p { font-size: 0.9rem; color: var(--mist-dim); max-width: 34ch; }

/* ── pricing ─────────────────────────────────────────────────────────────── */
.prices { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.price { border: 1px solid var(--night-3); border-radius: 16px; padding: 30px; background: var(--night-2); }
.price.featured { border-color: color-mix(in srgb, var(--gold) 45%, transparent); }
.price .amt { font-family: var(--serif); font-size: 2.5rem; color: var(--core); line-height: 1; }
.price .per { font-size: 0.9rem; color: var(--mist-dim); }
.price .note { font-size: 0.88rem; color: var(--mist-dim); margin-top: 14px; }
.tag {
  display: inline-block; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--gold);
  border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent);
  padding: 3px 9px; border-radius: 100px; margin-bottom: 14px;
}

/* ── footer ──────────────────────────────────────────────────────────────── */
.site-foot { border-top: 1px solid var(--night-3); padding-block: var(--gap-l); margin-top: var(--gap-xl); }
.site-foot .wrap { display: flex; flex-wrap: wrap; gap: var(--gap-m); justify-content: space-between; align-items: flex-start; }
.foot-links { display: flex; flex-wrap: wrap; gap: var(--gap-m); font-size: 0.9rem; }
.foot-links a { color: var(--mist); text-decoration: none; }
.foot-links a:hover { color: var(--core); }
.foot-note { font-size: 0.84rem; color: var(--mist-dim); max-width: 40ch; }

/* ── legal / document pages ──────────────────────────────────────────────── */
.doc { padding-block: var(--gap-l) var(--gap-xl); }
.doc h1 { font-size: clamp(2rem, 5vw, 3rem); margin-bottom: var(--gap-s); }
.doc h2 { font-size: 1.3rem; margin-top: var(--gap-l); margin-bottom: 10px; }
.doc h3 { margin-top: var(--gap-m); margin-bottom: 6px; color: var(--core); }
.doc p, .doc li { font-size: 1rem; }
.doc ul { padding-left: 1.15em; margin: 10px 0; }
.doc li { margin-bottom: 7px; }
.doc .updated { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--mist-dim); }
.callout {
  border: 1px solid var(--night-3); border-left: 2px solid var(--aurora);
  background: var(--night-2); border-radius: 0 12px 12px 0;
  padding: 20px 22px; margin: var(--gap-m) 0;
}
.callout p { font-size: 0.96rem; }

table { width: 100%; border-collapse: collapse; font-size: 0.94rem; margin: var(--gap-s) 0; }
.table-scroll { overflow-x: auto; }
th, td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--night-3); vertical-align: top; }
th { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--mist-dim); }
td strong { color: var(--core); }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--core); color: var(--night); padding: 10px 16px; border-radius: 0 0 8px 0; z-index: 50;
}
.skip:focus { left: 0; }