/* VP Systems — v2, ice-glass. Theme values come from :root custom properties
   injected by build.js. Brand laws: attended (reacts to you) · unhurried
   (no urgency) · precise (mono numbers) · spacious · signature move = a soft
   glow when something notices you. One cool color family, frosted surfaces. */

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

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

body {
  background: var(--light-bg);
  color: var(--light-text);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ---------- the ice field: soft glass blobs the frosted panels blur ---------- */
.ice-backdrop {
  position: fixed;
  inset: -30% 0;  /* bleed so the parallax drift never shows an edge */
  z-index: -1;
  pointer-events: none;
  will-change: transform;
  background:
    radial-gradient(640px 540px at 12% 16%, rgba(110, 231, 255, 0.34), transparent 65%),
    radial-gradient(740px 660px at 86% 28%, rgba(120, 150, 255, 0.24), transparent 60%),
    radial-gradient(560px 520px at 28% 76%, rgba(110, 231, 255, 0.22), transparent 60%),
    radial-gradient(700px 620px at 76% 92%, rgba(140, 170, 225, 0.26), transparent 60%),
    linear-gradient(180deg, #f2f7fc 0%, #e2ecf6 55%, #ecf3fa 100%);
}
.ice-backdrop::after {
  /* the same grain as the hero, so soft gradients never band */
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 240px 240px;
  opacity: 0.03;
}

/* the frosted-glass material every light surface is made of:
   a lit top edge, a faint cyan rim, a cool drop shadow */
.card, .calc-panel, .pillar, .loop-rail, .tl-rail, .faq-list, .msg p {
  background: rgba(255, 255, 255, 0.42);
  backdrop-filter: blur(22px) saturate(1.35);
  -webkit-backdrop-filter: blur(22px) saturate(1.35);
  border: 1px solid rgba(255, 255, 255, 0.75);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9),
              0 0 0 1px rgba(130, 190, 230, 0.22),
              0 18px 44px -22px rgba(30, 80, 130, 0.38);
}

/* panes of glass: every panel carries a second, dimmer pane floating
   behind it — the offset is what reads as depth */
.card, .calc-panel, .pillar, .loop-rail, .tl-rail, .faq-list { position: relative; }
.card::before, .calc-panel::before, .pillar::before,
.loop-rail::before, .tl-rail::before, .faq-list::before {
  content: "";
  position: absolute;
  inset: 0;
  transform: translate(12px, 12px);
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow: 0 14px 30px -22px rgba(30, 80, 130, 0.3);
  z-index: -1;
  pointer-events: none;
}

.mono { font-family: var(--font-mono); }

/* ---------- topbar + nav ---------- */
.topbar {
  display: block;
  text-decoration: none;
  transition: color 0.3s ease;
  background: var(--dark-bg);
  color: var(--dark-muted);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  padding: 0.55rem 1rem;
  border-bottom: 1px solid var(--dark-line);
}

.topbar:hover { color: var(--dark-accent); }

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 1rem clamp(1.25rem, 4vw, 3rem);
  background: color-mix(in srgb, var(--dark-bg) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--dark-line);
}

.nav-logo {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
  color: var(--dark-text);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.nav-logo-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--dark-accent);
  box-shadow: 0 0 10px 2px color-mix(in srgb, var(--dark-accent) 65%, transparent);
}

.nav-links { display: flex; gap: 1.6rem; margin-inline: auto; }
.nav-links a {
  color: var(--dark-muted);
  text-decoration: none;
  font-size: 0.9rem;
  padding: 0.35rem 0.1rem;
  border-bottom: 1px solid transparent;
  transition: color 0.35s ease, border-color 0.35s ease, text-shadow 0.35s ease;
}
.nav-links a:hover, .nav-links a:focus-visible {
  color: var(--dark-text);
  border-bottom-color: var(--dark-accent);
  text-shadow: 0 0 14px color-mix(in srgb, var(--dark-accent) 55%, transparent);
}

.nav-ctas { display: flex; gap: 0.7rem; }

.sound-toggle {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--dark-muted);
  background: transparent;
  border: 1px solid var(--dark-line);
  border-radius: 999px;
  padding: 0.5rem 0.85rem;
  cursor: pointer;
  transition: color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.sound-toggle:hover, .sound-toggle[aria-pressed="true"] {
  color: var(--dark-accent);
  border-color: var(--dark-accent);
  box-shadow: 0 0 14px 0 color-mix(in srgb, var(--dark-accent) 30%, transparent);
}
.no-js .sound-toggle { display: none; }

.nav-burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: 0;
  padding: 0.6rem;
  cursor: pointer;
}
.nav-burger span {
  width: 22px; height: 2px;
  background: var(--dark-text);
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu[hidden] { display: none; }
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--dark-bg) 96%, transparent);
  backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.6rem;
  padding: 2rem;
}
.mobile-menu a:not(.btn) {
  color: var(--dark-text);
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 600;
}

/* ---------- buttons: they glow when they notice you ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: none;
  border-radius: 999px;
  padding: 0.65rem 1.35rem;
  min-height: 44px;
  transition: box-shadow 0.4s ease, transform 0.4s ease, background 0.4s ease;
}
.btn-lg { padding: 0.85rem 1.8rem; font-size: 1rem; }
.btn-xl { padding: 1.05rem 2.4rem; font-size: 1.1rem; }

/* dark-context buttons (nav, hero) */
.hero .btn-solid, .nav .btn-solid, .mobile-menu .btn-solid {
  background: var(--dark-accent);
  color: var(--dark-bg);
}
.hero .btn-solid:hover, .nav .btn-solid:hover {
  box-shadow: 0 0 28px 4px color-mix(in srgb, var(--dark-accent) 45%, transparent);
  transform: translateY(-1px);
}
.hero .btn-ghost, .nav .btn-ghost, .mobile-menu .btn-ghost {
  color: var(--dark-text);
  border: 1px solid var(--dark-line);
  background: transparent;
}
.hero .btn-ghost:hover, .nav .btn-ghost:hover {
  border-color: var(--dark-accent);
  box-shadow: 0 0 18px 0 color-mix(in srgb, var(--dark-accent) 30%, transparent);
}

/* light-context buttons: glacial blue, not black */
main > .section .btn-solid {
  background: linear-gradient(135deg, #2fb6ea, #0d7fb8);
  color: #ffffff;
  box-shadow: 0 10px 26px -14px rgba(13, 127, 184, 0.7);
}
main > .section .btn-solid:hover {
  box-shadow: 0 0 30px 2px color-mix(in srgb, var(--light-accent) 45%, transparent);
  transform: translateY(-1px);
}


/* a light sweep crosses buttons on hover */
.btn { position: relative; overflow: hidden; }
.btn::before {
  content: "";
  position: absolute;
  top: 0; left: -70%;
  width: 45%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.35), transparent);
  transform: skewX(-20deg);
  transition: left 0.55s ease;
  pointer-events: none;
}
.btn:hover::before { left: 130%; }
.reduced .btn::before { display: none; }

.btn:focus-visible, a:focus-visible, summary:focus-visible, input:focus-visible, button:focus-visible {
  outline: 2px solid var(--light-accent);
  outline-offset: 3px;
}
.hero a:focus-visible, .nav a:focus-visible, .nav-burger:focus-visible {
  outline-color: var(--dark-accent);
}

/* ---------- hero (the one dark act) ---------- */
.hero {
  position: relative;
  background: var(--dark-bg);
  color: var(--dark-text);
  overflow: hidden;
}
/* it notices you: a faint light follows the cursor (app.js drives --mx/--my) */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(560px circle at var(--mx, 60%) var(--my, 35%),
              rgba(110, 231, 255, 0.07), transparent 65%);
  pointer-events: none;
}
.reduced .hero::before, .no-js .hero::before { display: none; }

.hero-inner {
  max-width: 1100px;
  margin-inline: auto;
  padding: clamp(4.5rem, 11vh, 8rem) clamp(1.25rem, 4vw, 3rem) calc(240px + 3.5rem);
}

.hero-h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.7rem, 6.5vw, 5.6rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  max-width: 18ch;
}

.hero-quote {
  margin-top: 2.6rem;
  padding-left: 1.2rem;
  border-left: 2px solid var(--dark-line);
}
.hero-quote p {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  color: var(--dark-text);
  opacity: 0.92;
}
.hero-quote cite {
  display: block;
  font-style: normal;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dark-muted);
  opacity: 0.7;
  margin-top: 0.6rem;
}

.hero-gist { margin-top: 2.4rem; display: flex; flex-direction: column; gap: 0.45rem; }
.hero-gist p {
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  color: var(--dark-text);
}

.hero-ctas { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2.6rem; }


/* film grain over the dark act + the fade — kills gradient banding */
.hero .grain, .enter-gate .grain {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 240px 240px;
  opacity: 0.05;
}

/* the single dark→light transition */
.hero-fade {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 240px;
  background: linear-gradient(to bottom,
    transparent 0%,
    color-mix(in srgb, var(--light-bg) 8%, transparent) 25%,
    color-mix(in srgb, var(--light-bg) 30%, transparent) 50%,
    color-mix(in srgb, var(--light-bg) 65%, transparent) 72%,
    color-mix(in srgb, var(--light-bg) 90%, transparent) 88%,
    var(--light-bg) 100%);
  pointer-events: none;
}

/* ---------- light sections ---------- */
.section {
  max-width: 1100px;
  margin-inline: auto;
  padding: clamp(4.5rem, 9vh, 7rem) clamp(1.25rem, 4vw, 3rem);
}

.h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.9rem, 4vw, 3.1rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
  /* steel headline: the cool-metal gradient from the glass reference */
  background: linear-gradient(165deg, #3d5c7e 0%, #0d1c2e 55%, #2c4a68 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.18rem;
  letter-spacing: -0.01em;
}
.sub { color: var(--light-muted); max-width: 38rem; margin-top: 1.1rem; }
.center { text-align: center; margin-inline: auto; }
.center-row { display: flex; flex-wrap: wrap; gap: 1.4rem; justify-content: center; margin-top: 2.4rem; }
.accent-word { color: var(--light-accent); }

.link-cta {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--light-text);
  text-decoration: none;
  border-bottom: 1px solid var(--light-line);
  padding-bottom: 2px;
  transition: border-color 0.35s ease, color 0.35s ease;
}
.link-cta:hover { border-color: var(--light-accent); color: var(--light-accent); }
.link-cta-primary { color: var(--light-accent); border-color: var(--light-accent); }

/* loop rail — a single glass slab holding the rows */
.loop-rail { list-style: none; margin-top: 3rem; border-radius: calc(var(--radius) * 1.25); padding: 0.4rem 1.6rem; }
.loop-rail .loop-row:last-child { border-bottom: 0; }
.loop-row {
  display: grid;
  grid-template-columns: 3.2rem 10rem 1fr;
  gap: 1.4rem;
  align-items: start;
  padding: 1.9rem 0.25rem;
  border-bottom: 1px solid var(--light-line);
  transition: background 0.4s ease;
}
.loop-tags { display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; }
.loop-row:hover { background: color-mix(in srgb, var(--light-accent) 4%, transparent); }
.loop-n { color: var(--light-muted); font-size: 0.85rem; }
.chip {
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--light-muted);
  border: 1px solid var(--light-line);
  border-radius: 999px;
  padding: 0.3rem 0.65rem;
  white-space: nowrap;
  justify-self: start;
}
.loop-body p { color: var(--light-muted); margin-top: 0.3rem; }
.stamp {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--light-accent);
  text-shadow: 0 0 12px color-mix(in srgb, var(--light-accent) 40%, transparent);
  white-space: nowrap;
  min-height: 1em;
}
/* console cursor while the readout types */
.stamp.typing::after {
  content: "▮";
  margin-left: 2px;
  animation: cursorBlink 0.7s step-end infinite;
}
@keyframes cursorBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* category cards */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
  margin-top: 3rem;
}
/* four offerings read as a 2x2 block; three across would leave an orphan */
.card-grid--four { grid-template-columns: repeat(2, 1fr); }
.card {
  border-radius: var(--radius);
  padding: 1.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  transition: box-shadow 0.45s ease, transform 0.45s ease, border-color 0.45s ease;
  scroll-margin-top: 90px;
}
.card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--light-accent) 40%, var(--light-line));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--light-accent) 25%, transparent),
              0 14px 44px -18px color-mix(in srgb, var(--light-accent) 45%, transparent);
}
.card-top { display: flex; justify-content: space-between; align-items: center; }
.card-n { color: var(--light-muted); font-size: 0.8rem; }
.badge {
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border: 1px solid var(--light-line);
  border-radius: 999px;
  padding: 0.3rem 0.7rem;
  color: var(--light-muted);
}
.badge-start {
  color: var(--light-accent);
  border-color: color-mix(in srgb, var(--light-accent) 50%, transparent);
  background: color-mix(in srgb, var(--light-accent) 7%, transparent);
}
.card-icon { width: 26px; height: 26px; color: var(--light-accent); }
.card-icon svg { width: 100%; height: 100%; }
.card p { color: var(--light-muted); }
.card-bullet {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--light-text);
  margin-top: auto;
  padding-top: 0.6rem;
}
.dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--light-accent);
  box-shadow: 0 0 8px 1px color-mix(in srgb, var(--light-accent) 60%, transparent);
}

/* trust pillars — quieter than the cards */
.trust-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.6rem 3rem;
  margin-top: 3rem;
}
.pillar { border-radius: var(--radius); padding: 1.5rem 1.6rem; }
.pillar p { color: var(--light-muted); margin-top: 0.5rem; }

/* timeline */
.disclaimer {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--light-muted);
  margin-top: 0.9rem;
}
.tl-rail { margin-top: 3rem; border-radius: calc(var(--radius) * 1.25); padding: 0.4rem 1.6rem; }
.tl-rail .tl-row:last-child { border-bottom: 0; }
.tl-row {
  display: grid;
  grid-template-columns: 6.2rem 1fr 11rem;
  gap: 1.6rem;
  padding: 2rem 0.25rem;
  border-bottom: 1px solid var(--light-line);
  align-items: start;
  transition: background 0.4s ease;
}
.tl-row:hover { background: color-mix(in srgb, var(--light-accent) 4%, transparent); }
.tl-time { color: var(--light-muted); font-size: 0.85rem; padding-top: 0.2rem; }
.tl-body .chip { margin-bottom: 0.7rem; }
.tl-body h3 { margin-bottom: 0.35rem; }
.tl-body p { color: var(--light-muted); }
.tl-stat { display: flex; flex-direction: column; align-items: flex-start; gap: 0.15rem; }
.tl-stat-label {
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  color: var(--light-accent);
}
.tl-stat-n { font-size: 2rem; font-weight: 700; line-height: 1; }
.tl-row.in .tl-stat-n { animation: statPop 0.5s cubic-bezier(0.2, 1.4, 0.4, 1) backwards; animation-delay: 0.45s; }
@keyframes statPop {
  from { opacity: 0; transform: scale(1.6); }
  to   { opacity: 1; transform: scale(1); }
}
.reduced .tl-row.in .tl-stat-n { animation: none; }
.tl-stat-sub { font-size: 0.82rem; color: var(--light-muted); }

/* calculator */
.calc-panel {
  border-radius: calc(var(--radius) * 1.5);
  padding: clamp(2rem, 5vw, 3.5rem);
}
.calc-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  margin-top: 2.5rem;
}
.calc-field { display: flex; flex-direction: column; gap: 0.7rem; }
.calc-label { font-weight: 600; font-size: 0.95rem; }
.calc-val { font-size: 1.5rem; font-weight: 700; color: var(--light-accent); }

input[type="range"] { accent-color: var(--light-accent); width: 100%; height: 40px; cursor: pointer; }

.calc-result {
  margin-top: 2.8rem;
  padding-top: 2.4rem;
  border-top: 1px solid var(--light-line);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.6rem;
}
.calc-result-label { color: var(--light-muted); font-size: 0.95rem; }
.calc-number {
  font-size: clamp(3rem, 8vw, 5.2rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--light-text);
  text-shadow: 0 0 34px color-mix(in srgb, var(--light-accent) 35%, transparent);
  transition: filter 0.9s ease, opacity 0.9s ease;
}
/* while dragging, the treasure stays hidden */
.calc-number.pending { filter: blur(12px); opacity: 0.4; }
/* before both questions are answered it is hidden completely: a half-answered
   number on a screen in a meeting is worse than no number */
.calc-number.waiting { filter: blur(16px); opacity: 0.28; }
.reduced .calc-number, .no-js .calc-number { transition: none; filter: none; opacity: 1; }

/* an unanswered slider says so instead of showing a value nobody chose */
.calc-val.untouched {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--light-muted);
  opacity: 0.65;
}
.calc-assumption {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--light-accent);
  background: color-mix(in srgb, var(--light-accent) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--light-accent) 35%, transparent);
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
}
.calc-note { color: var(--light-muted); margin-top: 0.4rem; }
.calc-result .btn { margin-top: 1.4rem; }

/* faq */
.faq-list { margin-top: 2.6rem; max-width: 46rem; border-radius: calc(var(--radius) * 1.25); padding: 0.4rem 1.5rem; }
.faq-list .faq-item:last-child { border-bottom: 0; }
.faq-item { border-bottom: 1px solid var(--light-line); }
.faq-item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  cursor: pointer;
  list-style: none;
  padding: 1.35rem 0.25rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  min-height: 44px;
  transition: color 0.3s ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--light-accent); }
.faq-mark { color: var(--light-accent); font-size: 1.2rem; transition: transform 0.3s ease; }
.faq-item[open] .faq-mark { transform: rotate(45deg); }
.faq-item p { color: var(--light-muted); padding: 0 2.5rem 1.4rem 0.25rem; }

/* final cta */
.final { padding-bottom: clamp(5rem, 11vh, 8rem); }
.final-h { font-size: clamp(2.3rem, 5vw, 4rem); }

/* footer */
.footer {
  border-top: 1px solid var(--light-line);
  padding: 3.5rem clamp(1.25rem, 4vw, 3rem) 2.5rem;
  max-width: 1100px;
  margin-inline: auto;
  color: var(--light-muted);
  font-size: 0.92rem;
}
.footer-cols { display: flex; flex-wrap: wrap; gap: 3rem 5rem; }
.footer-col { display: flex; flex-direction: column; gap: 0.55rem; }
.footer-col h4 {
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 0.4rem;
  font-weight: 500;
}
.footer-col a { color: var(--light-muted); text-decoration: none; transition: color 0.3s ease; }
.footer-col a:hover { color: var(--light-text); }
.footer-brand { margin-left: auto; align-items: flex-end; text-align: right; }
.footer-logo { font-family: var(--font-display); font-weight: 800; color: var(--light-text); font-size: 1.1rem; }
.footer-base {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-top: 3rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--light-line);
  font-size: 0.8rem;
}
.footer-address { font-style: italic; opacity: 0.75; }
.footer-close { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; }

/* ---------- reveal on scroll — alive in BOTH directions ---------- */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.8s ease var(--stagger, 0ms), transform 0.8s ease var(--stagger, 0ms);
}
.reveal.in { opacity: 1; transform: none; }
.no-js .reveal, .reduced .reveal { opacity: 1; transform: none; transition: none; }
/* cards keep their own transition list so the hover glow/lift is never delayed */
.card.reveal {
  transition: opacity 0.7s ease, transform 0.5s ease, box-shadow 0.45s ease, border-color 0.45s ease;
}
/* hover lift must outrank .reveal.in's transform reset */
.card-grid .card.reveal.in:hover, .no-js .card:hover { transform: translateY(-2px); }
/* pressed: the card travels down like a keyboard key */
.card-grid .card.reveal.in:active, .no-js .card:active {
  transform: translateY(3px);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--light-accent) 30%, transparent),
              0 3px 10px -6px color-mix(in srgb, var(--light-accent) 50%, transparent);
  transition-duration: 0.07s;
}
.reduced .card:active { transform: none; }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .nav-links, .nav-ctas { display: none; }
  .sound-toggle {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--dark-muted);
  background: transparent;
  border: 1px solid var(--dark-line);
  border-radius: 999px;
  padding: 0.5rem 0.85rem;
  cursor: pointer;
  transition: color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.sound-toggle:hover, .sound-toggle[aria-pressed="true"] {
  color: var(--dark-accent);
  border-color: var(--dark-accent);
  box-shadow: 0 0 14px 0 color-mix(in srgb, var(--dark-accent) 30%, transparent);
}
.no-js .sound-toggle { display: none; }

.nav-burger { display: flex; }
  .hero-inner { padding-top: 3rem; }
  .loop-row { grid-template-columns: 2.6rem 1fr; }
  .loop-tags { grid-column: 2; flex-direction: row; align-items: center; flex-wrap: wrap; }
  .loop-body { grid-column: 2; }
  .card-grid, .trust-grid, .calc-controls { grid-template-columns: 1fr; }
  .tl-row { grid-template-columns: 1fr; gap: 0.8rem; }
  .tl-stat { flex-direction: row; align-items: baseline; gap: 0.6rem; }
  .footer-brand { margin-left: 0; align-items: flex-start; text-align: left; }
}

/* ---------- detail pages ---------- */
.nav-links a.active {
  color: var(--dark-text);
  border-bottom-color: var(--dark-accent);
}

.hero--page .hero-inner {
  padding: clamp(3rem, 7vh, 5rem) clamp(1.25rem, 4vw, 3rem) calc(240px + 2rem);
}
.hero-h1--page { font-size: clamp(2.2rem, 4.5vw, 3.8rem); }
.hero-gist-single {
  margin-top: 1.4rem;
  max-width: 36rem;
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  color: var(--dark-muted);
}

.card-more {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--light-accent);
  text-decoration: none;
  margin-top: 0.4rem;
  transition: opacity 0.3s ease;
}
.card-more:hover { opacity: 0.7; }
/* the whole card is the link — the card-more anchor stretches over it */
.card-more::after { content: ""; position: absolute; inset: 0; }

/* the conversation player — lines type themselves in like a live console */
.convo {
  max-width: 640px;
  margin-top: 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.msg { display: flex; flex-direction: column; gap: 0.3rem; max-width: 85%; }
.convo-chat .msg.from-agent { align-self: flex-end; align-items: flex-end; }
.msg .who {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--light-muted);
}
.convo-chat .msg.from-agent .who { color: var(--light-accent); }
.msg p {
  border-radius: var(--radius);
  padding: 0.85rem 1.1rem;
  min-height: 1.4em;
}
.convo-chat .msg.from-agent p {
  border-color: color-mix(in srgb, var(--light-accent) 35%, var(--light-line));
  box-shadow: 0 0 24px -12px color-mix(in srgb, var(--light-accent) 45%, transparent);
}
.convo-log .msg { max-width: 100%; flex-direction: row; gap: 1rem; align-items: baseline; }
.convo-log .msg .who { min-width: 5.2rem; white-space: nowrap; }
.convo-log .msg p { flex: 1; }
.msg.pending { visibility: hidden; }
.msg p.typing-line::after {
  content: "▮";
  margin-left: 2px;
  color: var(--light-accent);
  animation: cursorBlink 0.7s step-end infinite;
}
.convo-stamps {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 0.8rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--light-line);
}
.no-js .msg.pending, .reduced .msg.pending { visibility: visible; }

/* after the number lands, the CTA beckons — two gentle pulses, then rest */
@keyframes beckon {
  0%, 100% { transform: none; }
  18% { transform: translateY(-3px) scale(1.045); box-shadow: 0 0 36px 6px color-mix(in srgb, var(--light-accent) 55%, transparent); }
  40% { transform: none; }
  62% { transform: translateY(-2px) scale(1.03); box-shadow: 0 0 26px 4px color-mix(in srgb, var(--light-accent) 40%, transparent); }
}
.calc-cta.beckon { animation: beckon 1.5s ease 0.15s 1; }
.reduced .calc-cta.beckon { animation: none; }

/* ---------- the excuse cycle + the answer that surfaces ---------- */
.hero-quote-line { min-height: 2.4em; }
.hero-cycle { color: var(--dark-accent); }
.hero-cycle.dimming { transition: opacity 0.25s ease; opacity: 0.3; }
.hero-cycle-cursor {
  display: inline-block;
  width: 2px;
  margin-left: 2px;
  background: var(--dark-accent);
  height: 1em;
  vertical-align: text-bottom;
  animation: cursorBlink 0.8s step-end infinite;
}
.reduced .hero-cycle-cursor, .no-js .hero-cycle-cursor { display: none; }

.hero-resolution {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.3rem, 2.6vw, 1.8rem);
  letter-spacing: -0.01em;
  margin-top: 2.2rem;
}
/* the superhero rise: slow, heavy, certain — timed to the arrival sound */
/* ⚠️ THE RISE IS TIMED TO THE SOUND, NOT CHOSEN BY FEEL (Vincent, Aug 21:
   "it isn't sinking with the sound, and the timing is off").
   The arrival swell in app.js has attack 1.3s, so it PEAKS at 1.3s and decays
   to 2.5s. The old easing here was cubic-bezier(0.16, 1, 0.3, 1) over 2.4s:
   an out-expo, which sprints at the start and crawls at the end. The words
   had effectively landed while the sound was still climbing, so the two never
   hit together. Now the motion is slow off the mark and accelerates INTO the
   landing at ~1.35s, arriving exactly as the swell peaks.
   If the sound's `attack` ever changes, change these durations to match. */
.hero-answer {
  transition: opacity 1.25s cubic-bezier(0.45, 0, 0.35, 1),
              transform 1.4s cubic-bezier(0.45, 0, 0.2, 1);
}
.hero-answer.awaiting { opacity: 0; transform: translateY(46px) scale(0.972); }
.reduced .hero-answer, .no-js .hero-answer { opacity: 1; transform: none; transition: none; }

/* the home cycle lines run long; keep the quote from re-wrapping under them */
@media (max-width: 640px) {
  .hero-quote-line { min-height: 3.6em; }
}

/* ---------- the quick read: fold the long lists behind one button ---------- */
.folded { display: none !important; }

.show-more {
  display: block;
  margin: 1.4rem auto 0;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--light-accent);
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid color-mix(in srgb, var(--light-accent) 30%, transparent);
  border-radius: 999px;
  padding: 0.7rem 1.5rem;
  min-height: 44px;
  cursor: pointer;
  transition: box-shadow 0.35s ease, border-color 0.35s ease, transform 0.1s ease;
}
.show-more:hover {
  border-color: var(--light-accent);
  box-shadow: 0 0 22px -6px color-mix(in srgb, var(--light-accent) 55%, transparent);
}
/* pressed like every other key on this site */
.show-more:active { transform: translateY(2px); }
.reduced .show-more:active { transform: none; }

/* ---------- the front door: one press, then the show ---------- */
.enter-gate {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: radial-gradient(720px circle at 50% 42%,
              rgba(110, 231, 255, 0.07), transparent 62%), var(--dark-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.9s ease;
}
.enter-gate.leaving { opacity: 0; pointer-events: none; }
.enter-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  text-align: center;
  padding: 2rem;
}
.enter-logo {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.7rem, 4.5vw, 2.5rem);
  letter-spacing: -0.02em;
  color: var(--dark-text);
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
/* the ENTER key IS a key: it travels when pressed, like everything else here */
.enter-btn {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  color: var(--dark-bg);
  background: var(--dark-accent);
  border: 0;
  border-radius: 12px;
  padding: 1.05rem 3.2rem;
  margin-top: 0.6rem;
  cursor: pointer;
  box-shadow: 0 6px 0 color-mix(in srgb, var(--dark-accent) 40%, #000),
              0 0 34px 4px color-mix(in srgb, var(--dark-accent) 30%, transparent);
  transition: transform 0.1s ease, box-shadow 0.35s ease;
}
.enter-btn:hover {
  box-shadow: 0 6px 0 color-mix(in srgb, var(--dark-accent) 40%, #000),
              0 0 52px 10px color-mix(in srgb, var(--dark-accent) 45%, transparent);
}
.enter-btn:active {
  transform: translateY(4px);
  box-shadow: 0 2px 0 color-mix(in srgb, var(--dark-accent) 40%, #000),
              0 0 20px 2px color-mix(in srgb, var(--dark-accent) 30%, transparent);
}
.enter-hint { color: var(--dark-muted); font-size: 0.85rem; }
.enter-quiet {
  background: none;
  border: 0;
  border-bottom: 1px solid var(--dark-line);
  color: var(--dark-muted);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.2rem 0;
  cursor: pointer;
  transition: color 0.3s ease;
}
.enter-quiet:hover { color: var(--dark-text); }