/* ==========================================================================
   Escape Velocity — website base: reset, typography, layout primitives, utilities
   Requires tokens.css.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 1.5rem);
  background: var(--bg);
}
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;               /* nothing may create sideways scroll */
}
img, svg, picture, video { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul[role="list"], ol[role="list"], .list-reset { list-style: none; padding: 0; margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--brand); text-underline-offset: .18em; text-decoration-thickness: .08em; }
a:hover { color: var(--brand-ink); }
table { border-collapse: collapse; }
::selection { background: color-mix(in srgb, var(--g1) 38%, transparent); }

/* ---- headings ---- */
.display, .h1 {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  font-weight: 760;
  text-wrap: balance;
}
.h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: 1.08;
  letter-spacing: var(--ls-h2);
  font-weight: 740;
  text-wrap: balance;
}
.h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-h3);
  font-weight: 700;
  text-wrap: balance;
}
.lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.small { font-size: var(--fs-small); }
.muted { color: var(--ink-2); }
.faint { color: var(--ink-3); }
.eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: var(--fs-xs); font-weight: 680; letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
  color: var(--brand);
}
.eyebrow::before {
  content: ""; width: .55rem; height: .55rem; border-radius: 50%;
  background: var(--thrust-diag); box-shadow: 0 0 12px color-mix(in srgb, var(--g2) 70%, transparent);
}
/* gradient emphasis inside headlines: <em class="grad">…</em> */
.grad, .display em, .h2 em {
  font-style: normal;
  background: var(--thrust-text);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  padding-right: .04em;          /* keeps italics/descenders from clipping */
}
.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
p + p { margin-top: 1em; }
.prose p, .prose li { text-wrap: pretty; }

/* ---- layout primitives ---- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--wide { max-width: var(--container-wide); }
.container--narrow { max-width: 50rem; }
.section { position: relative; padding-block: var(--section-y); }
.section--tint { background: var(--bg-soft); }
.section--flush-top { padding-top: 0; }
/* Two bands that share a background have no visible edge, so they must not stack two full paddings. */
.section:not(.section--tint):not(.privacy) + .section:not(.section--tint):not(.privacy),
.section--tint + .section--tint,
.section:not(.section--tint):not(.privacy) + .cta-section,
.proof + .section:not(.section--tint):not(.privacy) { padding-top: calc(var(--section-y) * .5); }
.stack > * + * { margin-top: var(--stack, 1rem); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--gap, .75rem); align-items: center; }
.center { text-align: center; margin-inline: auto; }

.section-head { max-width: 44rem; margin-bottom: clamp(1.25rem, 1rem + 1.2vw, 2rem); }
.section-head > * + * { margin-top: .75rem; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }

/* ---- accessibility ---- */
.sr-only {
  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;
}
.skip-link {
  position: fixed; top: .75rem; left: .75rem; z-index: var(--z-skip);
  padding: .7rem 1rem; border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink); border: 2px solid var(--focus);
  transform: translateY(-200%); transition: transform var(--dur-2) var(--ease);
  font-weight: 650; text-decoration: none;
}
.skip-link:focus { transform: none; }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}
:where(a, button, summary, [tabindex]):focus:not(:focus-visible) { outline: none; }
/* Form fields always show the ring while focused (mouse, touch or keyboard), including the sub-fields and picker button
   inside time and date inputs, where :focus-visible is not reliable. */
:where(input, select, textarea):is(:focus, :focus-within) { outline: 3px solid var(--focus); outline-offset: 3px; }

/* ---- atmosphere helpers (used by HERO, CTA-BAND, PRIVACY, FOOTER) ----
   .atmos            nebula glow (violet top-right, cyan bottom-left) painted on the element itself
   .atmos::before    starfield  (dark only, opacity from --star-op)
   .atmos::after     film grain (very subtle, both modes)                                        */
.atmos {
  position: relative; isolation: isolate;
  background-color: var(--bg);
  background-image:
    radial-gradient(1100px 620px at 88% -10%, var(--glow-1), transparent 62%),
    radial-gradient(900px 520px at -4% 104%, var(--glow-2), transparent 62%);
}
.atmos::before, .atmos::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1; }
.atmos::before {
  opacity: var(--star-op);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='520'%3E%3Cg fill='%23fff'%3E%3Ccircle cx='30' cy='60' r='1.1' opacity='.8'/%3E%3Ccircle cx='120' cy='210' r='.8' opacity='.5'/%3E%3Ccircle cx='210' cy='40' r='1.3' opacity='.7'/%3E%3Ccircle cx='300' cy='150' r='.9' opacity='.55'/%3E%3Ccircle cx='390' cy='80' r='1.1' opacity='.75'/%3E%3Ccircle cx='470' cy='230' r='.8' opacity='.5'/%3E%3Ccircle cx='60' cy='330' r='1' opacity='.65'/%3E%3Ccircle cx='170' cy='420' r='1.2' opacity='.7'/%3E%3Ccircle cx='260' cy='300' r='.7' opacity='.45'/%3E%3Ccircle cx='350' cy='400' r='1.1' opacity='.7'/%3E%3Ccircle cx='450' cy='470' r='.9' opacity='.55'/%3E%3Ccircle cx='500' cy='350' r='1.2' opacity='.7'/%3E%3Ccircle cx='90' cy='480' r='.8' opacity='.5'/%3E%3Ccircle cx='330' cy='500' r='.7' opacity='.45'/%3E%3Ccircle cx='430' cy='20' r='.8' opacity='.5'/%3E%3Ccircle cx='15' cy='180' r='.9' opacity='.6'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 520px 520px;
  -webkit-mask-image: linear-gradient(#000 55%, transparent 100%); mask-image: linear-gradient(#000 55%, transparent 100%);
}
.atmos::after {
  opacity: var(--grain-op); mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

/* ---- reduced motion: everything settles instantly ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}

/* ---- print: plain and ink-friendly ---- */
@media print {
  .nav, .footer, .cta-band, .theme-toggle, .skip-link { display: none !important; }
  body { background: #fff; color: #000; }
}