/* ==========================================================================
   SoluneFit — site.css
   One stylesheet for the whole site. No frameworks, no build step.
   Concept: a day that turns into night, with fitness as the pulse through both.
   Palette roles + contrast numbers are documented in /docs/brand.md
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Grounds — midnight indigo family */
  --ink:        #080B1C;  /* deepest, page edges + footer */
  --ground:     #0C1029;  /* default page ground */
  --raised:     #151A38;  /* cards, panels */
  --raised-2:   #1C2246;  /* hover / nested */

  /* Ink on dark */
  --text:       #EDEBFA;  /* 15.93:1 on --ground  (AAA) */
  --muted:      #A7ACD4;  /*  8.46:1 on --ground  (AAA) */
  --muted-hi:   #B6BBDE;  /*  9.94:1 on --ground  (AAA) */

  /* SOLAR — day, energy, warmth */
  --solar:      #FFB25C;  /* 10.50:1 on --ground  (AAA) */
  --solar-hi:   #FFC978;
  --coral:      #FF8A6B;  /*  8.11:1 on --ground  (AAA) */

  /* LUNAR — night, rest, recovery */
  --lunar:      #C9CBF5;  /* 11.90:1 on --ground  (AAA) */
  --lunar-deep: #8E93D8;  /* decorative / borders only */

  /* FITNESS — the pulse. Used sparingly: CTAs + the heartbeat line */
  --fit:        #4FE3B0;  /* 11.54:1 on --ground  (AAA) */
  --fit-hi:     #6FEFC2;

  /* Hairlines + glass */
  --line:       rgba(201, 203, 245, 0.14);
  --line-hi:    rgba(201, 203, 245, 0.28);
  --glass:      rgba(12, 16, 41, 0.72);

  /* Type */
  --display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino,
             Georgia, "Times New Roman", serif;
  --text-face: "Manrope", ui-sans-serif, system-ui, -apple-system,
             "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
          "Liberation Mono", monospace;

  /* Type scale (fluid) */
  --step--1: clamp(0.84rem, 0.81rem + 0.14vw, 0.92rem);
  --step-0:  clamp(1rem,    0.96rem + 0.2vw,  1.09rem);
  --step-1:  clamp(1.18rem, 1.10rem + 0.38vw, 1.38rem);
  --step-2:  clamp(1.42rem, 1.25rem + 0.78vw, 1.85rem);
  --step-3:  clamp(1.72rem, 1.40rem + 1.40vw, 2.5rem);
  --step-4:  clamp(2.05rem, 1.50rem + 2.40vw, 3.35rem);
  --step-5:  clamp(2.45rem, 1.45rem + 4.10vw, 4.5rem);

  /* Space */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;   --sp-6: 2rem;     --sp-7: 3rem;     --sp-8: 4.5rem;
  --sp-9: 7rem;

  --measure: 65ch;
  --wrap: 72rem;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --radius: 18px;
  --radius-sm: 10px;

  --ease: cubic-bezier(0.22, 0.68, 0.32, 1);
  color-scheme: dark;
}

/* --------------------------------------------------------------------------
   2. Reset / base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font-family: var(--text-face);
  font-size: var(--step-0);
  line-height: 1.65;
  font-weight: 400;
  letter-spacing: 0.005em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Starfield: fixed, decorative, cheap. Pure CSS radial gradients. */
body::before {
  content: "";
  position: fixed;
  inset: -10%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.55;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 18%, rgba(201,203,245,0.9), transparent 60%),
    radial-gradient(1.1px 1.1px at 28% 62%, rgba(201,203,245,0.7), transparent 60%),
    radial-gradient(1.6px 1.6px at 41% 9%,  rgba(255,201,120,0.7), transparent 60%),
    radial-gradient(1.1px 1.1px at 55% 41%, rgba(201,203,245,0.75), transparent 60%),
    radial-gradient(1.3px 1.3px at 68% 78%, rgba(201,203,245,0.6), transparent 60%),
    radial-gradient(1.2px 1.2px at 79% 26%, rgba(201,203,245,0.8), transparent 60%),
    radial-gradient(1.5px 1.5px at 91% 57%, rgba(79,227,176,0.55), transparent 60%),
    radial-gradient(1px 1px   at 6% 84%,   rgba(201,203,245,0.6), transparent 60%),
    radial-gradient(1px 1px   at 35% 93%,  rgba(201,203,245,0.5), transparent 60%),
    radial-gradient(1.2px 1.2px at 62% 14%, rgba(201,203,245,0.7), transparent 60%),
    radial-gradient(1px 1px   at 86% 88%,  rgba(201,203,245,0.55), transparent 60%),
    radial-gradient(1.3px 1.3px at 19% 44%, rgba(255,178,92,0.4), transparent 60%);
  animation: twinkle 9s var(--ease) infinite alternate;
}
@keyframes twinkle { from { opacity: 0.38; } to { opacity: 0.7; } }

/* Everything sits above the starfield */
.skip, header, main, footer { position: relative; z-index: 1; }

img, svg { max-width: 100%; height: auto; display: block; }

/* --------------------------------------------------------------------------
   3. Typography
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin: 0 0 var(--sp-4);
  font-variation-settings: "SOFT" 20, "WONK" 1;
}
h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); letter-spacing: -0.012em; }
h4 { font-size: var(--step-1); letter-spacing: -0.008em; }

p, li { text-wrap: pretty; }
p { margin: 0 0 var(--sp-4); }

a { color: var(--fit); text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
a:hover { color: var(--fit-hi); }

strong { font-weight: 700; color: var(--text); }
small { font-size: var(--step--1); }

.lede {
  font-size: var(--step-1);
  color: var(--muted-hi);
  line-height: 1.55;
  max-width: 52ch;
}

.eyebrow {
  font-family: var(--text-face);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lunar);
  margin: 0 0 var(--sp-4);
  display: flex;
  align-items: center;
  gap: 0.7em;
}
.eyebrow::before {
  content: "";
  width: 1.9rem; height: 2px; flex: none; border-radius: 2px;
  background: linear-gradient(90deg, var(--solar), var(--lunar));
}
.eyebrow--fit { color: var(--fit); }
.eyebrow--fit::before { background: linear-gradient(90deg, var(--fit), var(--lunar)); }
.eyebrow--solar { color: var(--solar); }
.eyebrow--solar::before { background: linear-gradient(90deg, var(--coral), var(--solar)); }

.sun-word {
  background: linear-gradient(100deg, var(--solar-hi), var(--coral) 55%, var(--lunar));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* Fallback for engines without background-clip:text */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .sun-word { color: var(--solar); background: none; }
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   4. Layout helpers
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: 54rem; }
.prose { max-width: var(--measure); }
.section { padding-block: clamp(3.5rem, 9vw, var(--sp-9)); }
.section--tight { padding-block: clamp(2.5rem, 6vw, var(--sp-8)); }
.stack > * + * { margin-top: var(--sp-4); }
.center { text-align: center; margin-inline: auto; }

/* Warm -> cool section divider */
.rule {
  height: 1px;
  border: 0;
  margin: 0;
  background: linear-gradient(90deg,
    transparent, rgba(255,178,92,0.55) 18%, rgba(255,138,107,0.5) 38%,
    rgba(142,147,216,0.5) 66%, rgba(79,227,176,0.4) 84%, transparent);
}
.rule--cool {
  background: linear-gradient(90deg,
    transparent, rgba(142,147,216,0.5) 30%, rgba(201,203,245,0.45) 55%, transparent);
}

/* --------------------------------------------------------------------------
   5. Skip link + focus
   -------------------------------------------------------------------------- */
.skip {
  position: absolute;
  left: var(--sp-4); top: -6rem;
  z-index: 200;
  background: var(--fit);
  color: var(--ink);
  font-weight: 700;
  padding: 0.7rem 1.1rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: top 0.18s var(--ease);
}
.skip:focus { top: var(--sp-4); color: var(--ink); }

:focus-visible {
  outline: 3px solid var(--fit-hi);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--text-face);
  font-size: var(--step-0);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1;
  padding: 0.95em 1.45em;
  border-radius: 999px;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.18s var(--ease), background 0.18s var(--ease),
              border-color 0.18s var(--ease), color 0.18s var(--ease);
}
.btn:hover { transform: translateY(-2px); }

.btn--primary {
  background: var(--fit);
  color: var(--ink);          /* 11.54:1 — AAA */
}
.btn--primary:hover { background: var(--fit-hi); color: var(--ink); }

.btn--ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--line-hi);
}
.btn--ghost:hover { border-color: var(--lunar); color: var(--text); background: rgba(201,203,245,0.06); }

.btn__dot {
  width: 0.5em; height: 0.5em; border-radius: 50%;
  background: currentColor; flex: none;
}

/* --------------------------------------------------------------------------
   7. Status pill ("In development")
   -------------------------------------------------------------------------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--solar);
  background: rgba(255,178,92,0.10);
  border: 1px solid rgba(255,178,92,0.34);
  padding: 0.42em 0.95em;
  border-radius: 999px;
}
.pill__dot {
  width: 0.45em; height: 0.45em; border-radius: 50%;
  background: var(--solar); flex: none;
  animation: pulse-dot 2.4s var(--ease) infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.45; transform: scale(0.75); }
}
.pill--lunar { color: var(--lunar); background: rgba(201,203,245,0.09); border-color: rgba(201,203,245,0.3); }
.pill--lunar .pill__dot { background: var(--lunar); }
.pill--fit { color: var(--fit); background: rgba(79,227,176,0.09); border-color: rgba(79,227,176,0.32); }
.pill--fit .pill__dot { background: var(--fit); }

/* --------------------------------------------------------------------------
   8. Nav — sticky, translucent, checkbox mobile menu (works without JS)
   -------------------------------------------------------------------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--glass);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--line);
}
.nav__in {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 0.7rem var(--gutter);
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
}
.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--text);
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.22rem;
  letter-spacing: -0.02em;
  margin-right: auto;
}
.nav__brand:hover { color: var(--text); }
.nav__brand img { height: 56px; width: auto; }
.nav__brand b { font-weight: 600; color: var(--fit); }

/* The checkbox itself: off-screen but focusable */
.nav__cb {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
  margin: 0;
}
.nav__burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  padding: 0 10px;
  border: 1px solid var(--line-hi);
  border-radius: 12px;
  cursor: pointer;
  flex: none;
}
.nav__burger span {
  display: block;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform 0.22s var(--ease), opacity 0.22s var(--ease);
}
.nav__cb:focus-visible ~ .nav__burger {
  outline: 3px solid var(--fit-hi);
  outline-offset: 3px;
}
.nav__cb:checked ~ .nav__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__cb:checked ~ .nav__burger span:nth-child(2) { opacity: 0; }
.nav__cb:checked ~ .nav__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav__menu {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 1.6vw, 1.5rem);
}
.nav__menu a {
  color: var(--muted-hi);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.96rem;
  padding: 0.5rem 0.2rem;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.nav__menu a:hover { color: var(--text); border-bottom-color: var(--solar); }
.nav__menu a[aria-current="page"] { color: var(--text); border-bottom-color: var(--fit); }
.nav__menu .btn { color: var(--ink); border-bottom: 0; padding: 0.7em 1.15em; font-size: 0.92rem; }
.nav__menu .btn:hover { color: var(--ink); border-bottom-color: transparent; }

@media (min-width: 62rem) {
  .nav__burger { display: none; }
  /* the checkbox is opacity:0 but still focusable — take it out of the
     tab order entirely once the burger it drives is gone */
  .nav__cb { display: none; }
}
@media (max-width: 61.999rem) {
  .nav__menu {
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s var(--ease);
  }
  .nav__menu a {
    padding: 0.85rem 0.25rem;
    border-bottom: 1px solid var(--line);
    font-size: 1.05rem;
  }
  .nav__menu .btn { margin: 0.9rem 0 0.4rem; justify-content: center; }
  .nav__cb:checked ~ .nav__menu { max-height: 30rem; }
}

/* --------------------------------------------------------------------------
   9. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3rem, 8vw, 6rem) clamp(3rem, 8vw, 5.5rem);
  background:
    radial-gradient(90rem 44rem at 82% -18%, rgba(255,178,92,0.20), transparent 62%),
    radial-gradient(70rem 40rem at 6% 8%,   rgba(142,147,216,0.20), transparent 60%),
    radial-gradient(50rem 30rem at 50% 118%, rgba(79,227,176,0.13), transparent 65%);
}
.hero__grid {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
}
@media (min-width: 62rem) {
  .hero__grid { grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); }
}
.hero h1 { margin-top: var(--sp-4); }
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}
.hero__meta {
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-6);
  font-size: var(--step--1);
  color: var(--muted);
}
.hero__meta span { display: inline-flex; align-items: center; gap: 0.5em; }
.hero__meta i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--lunar);
  font-style: normal; flex: none;
}
.hero__meta span:nth-child(1) i { background: var(--solar); }
.hero__meta span:nth-child(3) i { background: var(--fit); }

.hero__art { position: relative; }

/* Animated hero pieces */
.arc-dash { stroke-dasharray: 3 7; animation: arc-drift 14s linear infinite; }
@keyframes arc-drift { to { stroke-dashoffset: -200; } }

.pulse-line {
  stroke-dasharray: 460;
  stroke-dashoffset: 460;
  animation: pulse-draw 4.6s var(--ease) infinite;
}
@keyframes pulse-draw {
  0%   { stroke-dashoffset: 460; }
  45%  { stroke-dashoffset: 0; }
  75%  { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: -460; opacity: 0.15; }
}
.sun-core { transform-origin: center; animation: breathe 7s var(--ease) infinite alternate; }
@keyframes breathe { from { opacity: 0.85; } to { opacity: 1; } }

/* --------------------------------------------------------------------------
   10. Pillars
   -------------------------------------------------------------------------- */
.pillars {
  display: grid;
  gap: var(--sp-5);
  margin-top: var(--sp-7);
}
@media (min-width: 48rem) { .pillars { grid-template-columns: repeat(3, 1fr); } }

.pillar {
  position: relative;
  padding: var(--sp-6) var(--sp-5) var(--sp-6);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(21,26,56,0.9), rgba(12,16,41,0.6));
  border: 1px solid var(--line);
  overflow: hidden;
  transition: transform 0.25s var(--ease), border-color 0.25s var(--ease);
}
.pillar:hover { transform: translateY(-4px); border-color: var(--line-hi); }
.pillar::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--accent, var(--lunar));
}
.pillar::after {
  content: "";
  position: absolute; right: -30%; top: -40%;
  width: 20rem; height: 20rem; border-radius: 50%;
  background: radial-gradient(circle, var(--glow, rgba(201,203,245,0.14)), transparent 62%);
  pointer-events: none;
}
.pillar--day   { --accent: linear-gradient(90deg, var(--solar), var(--coral)); --glow: rgba(255,178,92,0.16); }
.pillar--night { --accent: linear-gradient(90deg, var(--lunar-deep), var(--lunar)); --glow: rgba(142,147,216,0.18); }
.pillar--fit   { --accent: linear-gradient(90deg, var(--fit), var(--lunar)); --glow: rgba(79,227,176,0.14); }

.pillar__icon { width: 46px; height: 46px; margin-bottom: var(--sp-4); }
.pillar h3 { margin-bottom: var(--sp-3); }
.pillar p { color: var(--muted-hi); margin-bottom: 0; }
.pillar__list {
  list-style: none;
  margin: var(--sp-4) 0 0;
  padding: 0;
  font-size: var(--step--1);
  color: var(--muted);
}
.pillar__list li {
  padding-left: 1.25em;
  position: relative;
  margin-bottom: 0.4em;
}
.pillar__list li::before {
  content: "";
  position: absolute; left: 0; top: 0.62em;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--lunar-deep);
}

/* Feedback loop strip */
.loop {
  margin-top: var(--sp-6);
  padding: var(--sp-5);
  border-radius: var(--radius);
  border: 1px dashed var(--line-hi);
  background: rgba(12,16,41,0.5);
  display: grid;
  gap: var(--sp-4);
}
@media (min-width: 52rem) { .loop { grid-template-columns: repeat(3, 1fr); } }
.loop p { margin: 0; color: var(--muted-hi); font-size: var(--step--1); }
.loop b { color: var(--text); display: block; font-size: var(--step-0); margin-bottom: 0.2em; font-family: var(--display); font-weight: 600; }

/* --------------------------------------------------------------------------
   11. Steps ("how it adapts")
   -------------------------------------------------------------------------- */
.steps {
  display: grid;
  gap: var(--sp-5);
  counter-reset: step;
  margin-top: var(--sp-7);
}
@media (min-width: 46rem) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 70rem) { .steps { grid-template-columns: repeat(4, 1fr); } }

.step {
  position: relative;
  padding-top: var(--sp-5);
  border-top: 2px solid var(--line-hi);
  counter-increment: step;
}
.step::before {
  content: "0" counter(step);
  font-family: var(--mono);
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  color: var(--fit);
  display: block;
  margin-bottom: var(--sp-3);
}
.step h3 { font-size: var(--step-1); margin-bottom: var(--sp-2); }
.step p { color: var(--muted); font-size: var(--step--1); margin: 0; }
.step:nth-child(1) { border-top-color: rgba(255,178,92,0.55); }
.step:nth-child(2) { border-top-color: rgba(255,138,107,0.5); }
.step:nth-child(3) { border-top-color: rgba(142,147,216,0.55); }
.step:nth-child(4) { border-top-color: rgba(79,227,176,0.5); }

/* --------------------------------------------------------------------------
   12. Generic panels / feature groups
   -------------------------------------------------------------------------- */
.panel {
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(21,26,56,0.85), rgba(12,16,41,0.55));
  padding: clamp(1.4rem, 3.5vw, 2.4rem);
}
.panel--glow {
  background:
    radial-gradient(40rem 20rem at 100% 0%, rgba(79,227,176,0.10), transparent 60%),
    linear-gradient(180deg, rgba(21,26,56,0.9), rgba(12,16,41,0.6));
}

.split {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
}
@media (min-width: 58rem) {
  .split { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .split--art-first > :first-child { order: 2; }
}

.grid-2 { display: grid; gap: var(--sp-5); }
@media (min-width: 46rem) { .grid-2 { grid-template-columns: repeat(2, 1fr); } }

.feature-group h4 {
  display: flex; align-items: baseline; gap: 0.6em;
  margin-bottom: var(--sp-3);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--line);
}
.feature-group h4 em {
  font-style: normal;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.feature-list { list-style: none; margin: 0; padding: 0; }
.feature-list li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: var(--sp-3);
  color: var(--muted-hi);
  font-size: var(--step--1);
  line-height: 1.6;
}
.feature-list li::before {
  content: "";
  position: absolute; left: 0; top: 0.52em;
  width: 9px; height: 9px;
  border-radius: 50%;
  border: 2px solid var(--fit);
}
.feature-list li b { color: var(--text); font-weight: 700; }
.feature-list--lunar li::before { border-color: var(--lunar-deep); }
.feature-list--solar li::before { border-color: var(--solar); }

/* Inline note / estimate caveat */
.note {
  border-left: 3px solid var(--lunar-deep);
  padding: var(--sp-3) 0 var(--sp-3) var(--sp-4);
  margin: var(--sp-5) 0;
  color: var(--muted);
  font-size: var(--step--1);
}
.note b { color: var(--lunar); }
.note--solar { border-left-color: var(--solar); }
.note--solar b { color: var(--solar); }

/* Takeaway box for articles */
.takeaway {
  border-radius: var(--radius);
  border: 1px solid rgba(79,227,176,0.3);
  background: rgba(79,227,176,0.07);
  padding: var(--sp-5);
  margin: var(--sp-6) 0;
}
.takeaway h3 {
  font-size: var(--step-1);
  color: var(--fit);
  margin-bottom: var(--sp-3);
}
.takeaway ul { margin: 0; padding-left: 1.2em; color: var(--muted-hi); }
.takeaway li { margin-bottom: 0.45em; }
.takeaway > :last-child { margin-bottom: 0; }

/* Roadmap */
.roadmap { list-style: none; margin: var(--sp-6) 0 0; padding: 0; }
.roadmap li {
  position: relative;
  padding: 0 0 var(--sp-6) var(--sp-6);
  border-left: 1px solid var(--line-hi);
}
.roadmap li:last-child { border-left-color: transparent; padding-bottom: 0; }
.roadmap li::before {
  content: "";
  position: absolute; left: -6px; top: 0.35em;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--ground);
  border: 2px solid var(--lunar-deep);
}
.roadmap li:first-child::before { border-color: var(--fit); background: var(--fit); }
.roadmap h4 { margin-bottom: var(--sp-2); }
.roadmap p { color: var(--muted); font-size: var(--step--1); margin: 0; }

/* --------------------------------------------------------------------------
   13. Blog
   -------------------------------------------------------------------------- */
.topic { margin-top: var(--sp-8); }
.topic__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-3) var(--sp-4);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--sp-5);
}
.topic__head h2 { font-size: var(--step-3); margin: 0; }
.topic__head p { margin: 0; color: var(--muted); font-size: var(--step--1); max-width: 40ch; }

.post-card {
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(21,26,56,0.85), rgba(12,16,41,0.5));
  padding: var(--sp-5);
  transition: transform 0.22s var(--ease), border-color 0.22s var(--ease);
}
.post-card:hover { transform: translateY(-3px); border-color: rgba(79,227,176,0.45); color: inherit; }
.post-card h3 { font-size: var(--step-2); margin-bottom: var(--sp-3); }
.post-card p { color: var(--muted-hi); margin-bottom: var(--sp-4); }
.post-card__meta {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4);
  font-size: var(--step--1); color: var(--muted);
  font-family: var(--mono); letter-spacing: 0.04em;
}
.post-card__more { color: var(--fit); font-weight: 700; font-family: var(--text-face); }

.soon {
  list-style: none;
  margin: var(--sp-5) 0 0;
  padding: 0;
  display: grid;
  gap: var(--sp-2);
}
.soon li {
  display: flex;
  align-items: baseline;
  gap: 0.75em;
  color: var(--muted);
  font-size: var(--step--1);
  padding: 0.55rem 0;
  border-bottom: 1px dashed var(--line);
}
.soon li::before {
  content: "Planned";
  flex: none;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lunar-deep);
  border: 1px solid var(--line-hi);
  border-radius: 4px;
  padding: 0.1em 0.5em;
}

/* Article */
.article { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.article__head { max-width: var(--measure); margin-bottom: var(--sp-7); }
.article__head h1 { font-size: var(--step-4); }
.article__meta {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4);
  font-family: var(--mono); font-size: var(--step--1);
  color: var(--muted); letter-spacing: 0.04em;
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
}
.article__body { max-width: var(--measure); }
.article__body h2 {
  font-size: var(--step-2);
  margin-top: var(--sp-7);
  margin-bottom: var(--sp-4);
}
.article__body h3 { font-size: var(--step-1); margin-top: var(--sp-6); }
.article__body ul, .article__body ol { padding-left: 1.3em; color: var(--muted-hi); }
.article__body li { margin-bottom: 0.5em; }
.article__body p { color: var(--muted-hi); }
.article__body > p:first-of-type { font-size: var(--step-1); color: var(--text); line-height: 1.55; }

.disclaimer {
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--step--1);
  max-width: var(--measure);
}

.backlink {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-weight: 700; font-size: var(--step--1);
  text-decoration: none; color: var(--lunar);
}
.backlink:hover { color: var(--text); }

/* --------------------------------------------------------------------------
   14. CTA band
   -------------------------------------------------------------------------- */
.band {
  border-radius: var(--radius);
  padding: clamp(2rem, 5vw, 3.5rem);
  border: 1px solid var(--line-hi);
  background:
    radial-gradient(40rem 24rem at 12% 0%, rgba(255,178,92,0.16), transparent 62%),
    radial-gradient(40rem 24rem at 90% 110%, rgba(79,227,176,0.14), transparent 60%),
    linear-gradient(180deg, rgba(21,26,56,0.92), rgba(12,16,41,0.7));
  text-align: center;
}
.band h2 { font-size: var(--step-3); }
.band p { color: var(--muted-hi); max-width: 46ch; margin-inline: auto; }
.band .hero__cta { justify-content: center; }
.roadmap + .band { margin-top: var(--sp-8); }

/* --------------------------------------------------------------------------
   15. Footer
   -------------------------------------------------------------------------- */
.foot {
  margin-top: var(--sp-8);
  background: var(--ink);
  border-top: 1px solid var(--line);
  padding-block: var(--sp-7) var(--sp-6);
}
.foot__grid {
  display: grid;
  gap: var(--sp-6);
  margin-bottom: var(--sp-7);
}
@media (min-width: 46rem) { .foot__grid { grid-template-columns: 1.5fr 1fr 1fr; } }
.foot__brand { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--text); font-family: var(--display); font-size: 1.2rem; font-weight: 600; }
.foot__brand img { height: 52px; width: auto; }
.foot__grid p { color: var(--muted); font-size: var(--step--1); max-width: 34ch; margin-top: var(--sp-4); }
.foot h2 {
  font-family: var(--text-face);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lunar);
  margin-bottom: var(--sp-4);
}
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin-bottom: 0.6em; }
.foot ul a { color: var(--muted-hi); text-decoration: none; font-size: var(--step--1); }
.foot ul a:hover { color: var(--text); text-decoration: underline; }
.foot__legal {
  border-top: 1px solid var(--line);
  padding-top: var(--sp-5);
  display: grid;
  gap: var(--sp-4);
  color: var(--muted);
  font-size: var(--step--1);
}
.foot__legal p { margin: 0; max-width: 78ch; }
.foot__legal .med { color: var(--muted-hi); }

/* --------------------------------------------------------------------------
   16. 404
   -------------------------------------------------------------------------- */
.lost {
  min-height: 62vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding-block: var(--sp-8);
}
.lost h1 { font-size: var(--step-5); }
.lost p { color: var(--muted-hi); max-width: 46ch; margin-inline: auto; }
.lost svg { margin-inline: auto; }
.lost .eyebrow { justify-content: center; }
.lost .hero__cta { justify-content: center; border: 0; }

/* --------------------------------------------------------------------------
   17. Scroll-reveal (progressive enhancement; visible by default)
   -------------------------------------------------------------------------- */
.js-on .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.js-on .reveal.is-in { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   18. Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .pulse-line { stroke-dashoffset: 0; }
  .js-on .reveal { opacity: 1; transform: none; }
  .btn:hover, .pillar:hover, .post-card:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   19. Print
   -------------------------------------------------------------------------- */
@media print {
  body::before, .nav, .band, .hero__art { display: none; }
  body { background: #fff; color: #111; }
  a { color: #111; }
}

/* --------------------------------------------------------------------------
   20. Signup form (email interest list)
   -------------------------------------------------------------------------- */
.signup-form { margin-top: var(--sp-6); text-align: left; max-width: 34rem; }
.signup-form.center { margin-inline: auto; }
.signup-form__field { margin-bottom: var(--sp-4); }
.signup-form__field label { display: block; font-size: var(--step--1); color: var(--muted-hi); margin-bottom: 0.4em; }
.signup-form__row { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.signup-form__input, .signup-form__field input[type="text"], .signup-form__field input[type="email"] {
  width: 100%;
  flex: 1 1 14rem;
  min-width: 0;
  padding: 0.85em 1.1em;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-hi);
  background: rgba(8,11,28,0.55);
  color: var(--text);
  font: inherit;
}
.signup-form__row .signup-form__input { border-radius: 999px; }
.signup-form__input::placeholder, .signup-form__field input::placeholder { color: var(--muted); }
.signup-form__input:focus-visible, .signup-form__field input:focus-visible { outline: 3px solid var(--fit-hi); outline-offset: 2px; }
.signup-form__check { display: flex; align-items: flex-start; gap: 0.6em; font-size: var(--step--1); color: var(--muted-hi); margin: var(--sp-4) 0; }
.signup-form__check input { margin-top: 0.25em; flex: none; }
.signup-form__note { margin-top: var(--sp-3); font-size: var(--step--1); color: var(--muted); }
.signup-form__promise { margin-top: var(--sp-3); font-size: var(--step--1); color: var(--text); }
.signup-form__status { margin-top: var(--sp-3); font-size: var(--step--1); font-weight: 700; min-height: 1.4em; }
.signup-form__status[data-state="ok"] { color: var(--fit); }
.signup-form__status[data-state="err"] { color: var(--coral); }
.hp { position: absolute; left: -5000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.counter { margin-top: var(--sp-5); font-family: var(--display); font-size: var(--step-1); color: var(--muted-hi); text-align: center; }
.counter strong { color: var(--fit); font-weight: 700; }

.privacy-note {
  margin-top: var(--sp-7);
  padding: var(--sp-5);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: rgba(21,26,56,0.5);
  color: var(--muted-hi);
  font-size: var(--step--1);
  max-width: var(--measure);
}
.privacy-note h3 { font-size: var(--step-1); margin-bottom: var(--sp-3); }
.privacy-note p { margin-bottom: var(--sp-3); }
.privacy-note p:last-child { margin-bottom: 0; }

/* wordmark in the chrome: the SVG carries its own colours */
.nav__wordmark{height:56px;width:auto;display:block}.foot__wordmark{height:52px;width:auto;display:block}
@media (max-width:420px){.nav__wordmark{height:44px}.foot__wordmark{height:44px}}

/* the name, explained, right under the headline */
.hero__name { font-family: var(--display); font-size: clamp(1.05rem, 0.95rem + 0.6vw, 1.3rem); line-height: 1.45; color: var(--lunar);
  margin: var(--sp-3) 0 var(--sp-4); max-width: 34ch; text-wrap: balance; }
.hero__name strong { font-weight: 600; background: linear-gradient(90deg, #FFD21F, #FFB000 50%, #FF7A00); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero__name em { font-style: italic; color: var(--text); }

/* --------------------------------------------------------------------------
   21. Frank box ("what we will not promise" — lucidity page)
   -------------------------------------------------------------------------- */
.frank-box {
  border-radius: var(--radius);
  border: 1px solid rgba(255,138,107,0.35);
  background: rgba(255,138,107,0.07);
  padding: var(--sp-5);
  margin: var(--sp-6) 0;
}
.frank-box h3 {
  font-size: var(--step-1);
  color: var(--coral);
  margin-bottom: var(--sp-3);
}
.frank-box ul { margin: 0; padding-left: 1.2em; color: var(--muted-hi); }
.frank-box li { margin-bottom: 0.45em; }
.frank-box > :last-child { margin-bottom: 0; }