/* ==========================================================================
   Lumini — Design System
   "the lively little light on your desk that grows up with you."

   Single, hand-written, framework-free stylesheet.
   Organized by section:
     1.  Design tokens (:root custom properties)
     2.  Modern reset
     3.  Base typography & elements
     4.  Layout utilities (.container, .section, grids, .stack)
     5.  Header + navigation (desktop bar + mobile panel)
     6.  Buttons
     7.  Hero
     8.  Section heading group (eyebrow / heading / lede)
     9.  Cards & feature/icon items
     10. Spark / glow motif
     11. Pills / badges
     12. FAQ / disclosure (<details>)
     13. Forms (fields, states) + waitlist & contact blocks
     14. Footer
     15. Reveal-on-scroll helper
     16. Reduced-motion + focus-visible (accessibility)

   All color is paired with text/shape so color is never the sole signal.
   ========================================================================== */

/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */
:root {
  /* --- Color: warm light theme ------------------------------------------ */
  /* Backgrounds (cream / off-white) */
  --color-bg:            #FFFBF3; /* page background, warm cream */
  --color-bg-soft:       #FBF3E4; /* subtly tinted section background */
  --color-surface:       #FFFFFF; /* cards, raised surfaces */
  --color-surface-warm:  #FDF6EA; /* warm raised surface (alt card) */

  /* Ink (warm dark text) */
  --color-ink:           #2A2620; /* primary text, warm near-black */
  --color-ink-soft:      #5A5247; /* secondary text */
  --color-ink-muted:     #8A8073; /* muted / captions / placeholders */

  /* Signature accent — Lumini's amber/gold "glow" */
  --color-accent:        #F5A623; /* primary accent (the light) */
  --color-accent-strong: #E08A00; /* hover / pressed accent */
  --color-accent-soft:   #FFE9C2; /* tint backgrounds, glow halos */
  --color-glow-hi:       #FFD37A; /* bright inner glow */

  /* Calm secondary accent — a soft teal for balance/trust */
  --color-secondary:        #3E8E84; /* calm teal */
  --color-secondary-strong: #2F6F67;
  --color-secondary-soft:   #DCEEEB;

  /* Feedback colors (paired with icons/text in markup) */
  --color-success:      #2E7D5B;
  --color-success-soft: #DEF1E8;
  --color-error:        #C0492B;
  --color-error-soft:   #FBE3DC;

  /* Borders / hairlines */
  --color-border:       #ECE2D2;
  --color-border-strong:#DDD0BB;

  /* Focus ring */
  --color-focus:        #E08A00;

  /* --- Typography ------------------------------------------------------- */
  --font-heading: "Baloo 2", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Fluid-ish type scale (rem). Headings get a clamp() in section 3. */
  --text-xs:   0.78rem;   /* 12.5px */
  --text-sm:   0.875rem;  /* 14px   */
  --text-base: 1rem;      /* 16px   */
  --text-lg:   1.125rem;  /* 18px   */
  --text-xl:   1.375rem;  /* 22px   */
  --text-2xl:  1.75rem;   /* 28px   */
  --text-3xl:  2.25rem;   /* 36px   */
  --text-4xl:  3rem;      /* 48px   */

  --leading-tight: 1.15;
  --leading-snug:  1.3;
  --leading-base:  1.65;

  --weight-normal:   400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* --- Spacing scale (8px base) ----------------------------------------- */
  --space-1:  0.25rem;  /* 4  */
  --space-2:  0.5rem;   /* 8  */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-5:  1.5rem;   /* 24 */
  --space-6:  2rem;     /* 32 */
  --space-7:  3rem;     /* 48 */
  --space-8:  4rem;     /* 64 */
  --space-9:  6rem;     /* 96 */

  /* --- Radii ------------------------------------------------------------ */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   18px;
  --radius-xl:   28px;
  --radius-pill: 999px;

  /* --- Shadows (warm-tinted) -------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(74, 56, 20, 0.06);
  --shadow-md: 0 6px 18px rgba(74, 56, 20, 0.08);
  --shadow-lg: 0 18px 48px rgba(74, 56, 20, 0.12);
  /* Signature warm "glow" shadow — used on the spark + primary CTA */
  --shadow-glow: 0 0 0 1px rgba(245, 166, 35, 0.15),
                 0 8px 30px rgba(245, 166, 35, 0.35);

  /* --- Layout ----------------------------------------------------------- */
  --container-max: 1120px;
  --container-narrow: 760px;
  --container-pad: var(--space-5);

  /* --- Motion ----------------------------------------------------------- */
  --transition-fast: 150ms ease;
  --transition-base: 220ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);

  /* z-index ladder */
  --z-header: 50;
  --z-nav-panel: 60;
}

/* ==========================================================================
   2. MODERN RESET
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
body {
  min-height: 100svh;
  line-height: var(--leading-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, picture, svg, video, canvas {
  display: block;
  max-width: 100%;
  height: auto;
}
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
:where(h1, h2, h3, h4) { overflow-wrap: break-word; }
p { overflow-wrap: break-word; }

/* ==========================================================================
   3. BASE TYPOGRAPHY & ELEMENTS
   ========================================================================== */
body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-ink);
  background: var(--color-bg);
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  color: var(--color-ink);
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
}
h1 { font-size: clamp(2.25rem, 6vw, var(--text-4xl)); }
h2 { font-size: clamp(1.75rem, 4.5vw, var(--text-3xl)); }
h3 { font-size: var(--text-xl); line-height: var(--leading-snug); }
h4 { font-size: var(--text-lg); }

p { color: var(--color-ink-soft); }
a:not(.btn) { color: var(--color-accent-strong); }
a:not(.btn):hover { color: var(--color-ink); }

strong, b { font-weight: var(--weight-semibold); color: var(--color-ink); }

/* Inline link with underline on hover, for body copy */
.link {
  color: var(--color-accent-strong);
  text-decoration: underline;
  text-decoration-color: var(--color-accent-soft);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--transition-fast), color var(--transition-fast);
}
.link:hover { color: var(--color-ink); text-decoration-color: currentColor; }

/* Visually-hidden (for accessible labels / skip link target text) */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* Skip link — appears on keyboard focus */
.skip-link {
  position: absolute;
  left: var(--space-4); top: -100%;
  z-index: 100;
  background: var(--color-ink);
  color: var(--color-bg);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  transition: top var(--transition-fast);
}
.skip-link:focus { top: var(--space-4); }

/* ==========================================================================
   4. LAYOUT UTILITIES
   ========================================================================== */

/* Centered content column with side padding */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
/* Narrow variant for prose-heavy / form sections */
.container--narrow { max-width: var(--container-narrow); }

/* Vertical section rhythm */
.section {
  padding-block: var(--space-8);
}
@media (min-width: 768px) {
  .section { padding-block: var(--space-9); }
}
/* Tonal section backgrounds */
.section--soft  { background: var(--color-bg-soft); }
.section--warm  { background: var(--color-surface-warm); }

/* Auto-fit responsive grid. Set --grid-min to tune column floor. */
.grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-min, 260px), 100%), 1fr));
}
.grid--2 { --grid-min: 320px; }
.grid--3 { --grid-min: 260px; }

/* Explicit two-column split that stacks on mobile (e.g. text + visual) */
.split {
  display: grid;
  gap: var(--space-6);
  align-items: center;
}
@media (min-width: 880px) {
  .split { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
  .split--reverse > :first-child { order: 2; }
}

/* Vertical rhythm helper: even spacing between flow children.
   Tune with --stack-gap on the element. */
.stack { display: flex; flex-direction: column; }
.stack > * + * { margin-top: var(--stack-gap, var(--space-4)); }
.stack--sm { --stack-gap: var(--space-2); }
.stack--lg { --stack-gap: var(--space-6); }

/* Horizontal cluster (wraps) — for button rows, tag rows */
.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}
.cluster--center { justify-content: center; }

.text-center { text-align: center; }
.measure { max-width: 60ch; }
.measure--narrow { max-width: 48ch; }
.mx-auto { margin-inline: auto; }

/* ==========================================================================
   5. HEADER + NAVIGATION
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: color-mix(in srgb, var(--color-bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 64px;
}

/* Brand / logo lockup */
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: var(--text-xl);
  color: var(--color-ink);
}
.brand:hover { color: var(--color-ink); }
.brand svg, .brand img { height: 28px; width: auto; }

/* Desktop nav links */
.nav {
  display: none;
  align-items: center;
  gap: var(--space-2);
}
.nav__link {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--color-ink-soft);
  font-weight: var(--weight-medium);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.nav__link:hover { color: var(--color-ink); background: var(--color-accent-soft); }
.nav__link[aria-current="page"] {
  color: var(--color-ink);
  background: var(--color-accent-soft);
}

/* Right-side actions (CTA on desktop) */
.header__actions { display: none; align-items: center; gap: var(--space-3); }

/* Hamburger toggle (mobile only) */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: var(--radius-sm);
  color: var(--color-ink);
  transition: background var(--transition-fast);
}
.nav-toggle:hover { background: var(--color-accent-soft); }
.nav-toggle svg { width: 24px; height: 24px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

/* Mobile slide-down panel */
.nav-panel {
  position: fixed;
  inset: 64px 0 auto 0;
  z-index: var(--z-nav-panel);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
  padding: var(--space-5) var(--container-pad) var(--space-6);
  display: none;
}
.nav-panel.is-open { display: block; }
.nav-panel__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.nav-panel__link {
  display: block;
  padding: var(--space-3) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  color: var(--color-ink);
  transition: background var(--transition-fast);
}
.nav-panel__link:hover { background: var(--color-accent-soft); }
.nav-panel__link[aria-current="page"] { background: var(--color-accent-soft); }
.nav-panel__cta { margin-top: var(--space-4); }
.nav-panel__cta .btn { width: 100%; }

/* Desktop breakpoint: show inline nav, hide hamburger + panel */
@media (min-width: 880px) {
  .nav,
  .header__actions { display: flex; }
  .nav-toggle { display: none; }
  .nav-panel { display: none !important; }
}

/* ==========================================================================
   6. BUTTONS
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: var(--text-base);
  line-height: 1.1;
  text-align: center;
  border: 1.5px solid transparent;
  transition: transform var(--transition-fast),
              background var(--transition-fast),
              border-color var(--transition-fast),
              box-shadow var(--transition-fast),
              color var(--transition-fast);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn svg { width: 1.1em; height: 1.1em; }

/* Primary — the glowing amber CTA */
.btn--primary {
  background: var(--color-accent);
  color: #3A2A06;
  box-shadow: var(--shadow-glow);
}
.btn--primary:hover { background: var(--color-accent-strong); color: #fff; }

/* Ghost — outlined, calm */
.btn--ghost {
  background: transparent;
  color: var(--color-ink);
  border-color: var(--color-border-strong);
}
.btn--ghost:hover { background: var(--color-surface); border-color: var(--color-accent); }

/* Secondary — calm teal solid */
.btn--secondary {
  background: var(--color-secondary);
  color: #fff;
}
.btn--secondary:hover { background: var(--color-secondary-strong); }

/* Sizes */
.btn--lg { padding: var(--space-4) var(--space-6); font-size: var(--text-lg); }
.btn--sm { padding: var(--space-2) var(--space-4); font-size: var(--text-sm); }
.btn--block { width: 100%; }

/* ==========================================================================
   7. HERO
   ========================================================================== */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-8) var(--space-9);
}
/* Soft radial glow wash behind hero content */
.hero::before {
  content: "";
  position: absolute;
  top: -20%; left: 50%;
  width: min(720px, 110%);
  aspect-ratio: 1;
  transform: translateX(-50%);
  background: radial-gradient(circle at center,
              var(--color-accent-soft) 0%,
              rgba(255, 233, 194, 0) 60%);
  pointer-events: none;
  z-index: 0;
}
.hero > .container { position: relative; z-index: 1; }
.hero__eyebrow { margin-bottom: var(--space-4); }
.hero h1 { margin-bottom: var(--space-4); }
.hero__lede {
  font-size: var(--text-lg);
  color: var(--color-ink-soft);
  max-width: 52ch;
  margin-bottom: var(--space-6);
}
.hero__actions { margin-bottom: var(--space-4); }
.hero__note {
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}

/* ==========================================================================
   8. SECTION HEADING GROUP (eyebrow / heading / lede)
   ========================================================================== */
.section-head {
  margin-bottom: var(--space-7);
}
.section-head .lede {
  margin-top: var(--space-3);
  font-size: var(--text-lg);
  color: var(--color-ink-soft);
}
/* Eyebrow: small caps-y label, often paired with a spark dot */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-strong);
}

/* ==========================================================================
   9. CARDS & FEATURE / ICON ITEMS
   ========================================================================== */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.card--hover:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.card--warm { background: var(--color-surface-warm); }
.card__title { margin-bottom: var(--space-2); }
.card__text { color: var(--color-ink-soft); }

/* Feature / icon item: stroke icon in a soft tile + title + text */
.feature {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.feature__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  border-radius: var(--radius-md);
  background: var(--color-accent-soft);
  color: var(--color-accent-strong);
  flex-shrink: 0;
}
.feature__icon svg { width: 24px; height: 24px; }
.feature__title { margin: 0; }
.feature__text { color: var(--color-ink-soft); margin: 0; }

/* Inline-icon variant: icon beside text */
.feature--row { flex-direction: row; align-items: flex-start; gap: var(--space-4); }

/* ==========================================================================
   10. SPARK / GLOW MOTIF
   Lumini's signature light. Reusable as a decorative dot/orb.
   Usage: <span class="spark" aria-hidden="true"></span>
   Sizes via modifier; pulses gently (disabled under reduced motion).
   ========================================================================== */
.spark {
  display: inline-block;
  width: var(--spark-size, 12px);
  height: var(--spark-size, 12px);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%,
              var(--color-glow-hi) 0%,
              var(--color-accent) 55%,
              var(--color-accent-strong) 100%);
  box-shadow: 0 0 calc(var(--spark-size, 12px) * 0.8) rgba(245, 166, 35, 0.6),
              0 0 calc(var(--spark-size, 12px) * 1.8) rgba(245, 166, 35, 0.3);
  animation: spark-pulse 2.8s ease-in-out infinite;
}
.spark--sm { --spark-size: 8px; }
.spark--lg { --spark-size: 20px; }
.spark--xl { --spark-size: 40px; }

/* A larger standalone orb (e.g. hero visual). Decorative only. */
.orb {
  position: relative;
  width: var(--orb-size, 200px);
  height: var(--orb-size, 200px);
  border-radius: 50%;
  margin-inline: auto;
  background: radial-gradient(circle at 38% 34%,
              var(--color-glow-hi) 0%,
              var(--color-accent) 48%,
              var(--color-accent-strong) 100%);
  box-shadow: var(--shadow-glow), var(--shadow-lg);
  animation: spark-pulse 3.6s ease-in-out infinite;
}
/* Concentric gentle ring around the orb */
.orb::after {
  content: "";
  position: absolute;
  inset: -18%;
  border-radius: 50%;
  border: 2px solid var(--color-accent-soft);
  opacity: 0.7;
}

@keyframes spark-pulse {
  0%, 100% { filter: brightness(1);    transform: scale(1); }
  50%      { filter: brightness(1.12); transform: scale(1.04); }
}

/* ==========================================================================
   11. PILLS / BADGES
   ========================================================================== */
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  background: var(--color-accent-soft);
  color: var(--color-accent-strong);
  border: 1px solid transparent;
}
.pill--secondary { background: var(--color-secondary-soft); color: var(--color-secondary-strong); }
.pill--outline   { background: transparent; border-color: var(--color-border-strong); color: var(--color-ink-soft); }
.pill svg { width: 1em; height: 1em; }

/* ==========================================================================
   12. FAQ / DISCLOSURE (native <details>)
   ========================================================================== */
.faq { display: flex; flex-direction: column; gap: var(--space-3); }
.disclosure {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  overflow: hidden;
}
.disclosure[open] { border-color: var(--color-border-strong); box-shadow: var(--shadow-sm); }
.disclosure > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  font-size: var(--text-lg);
  color: var(--color-ink);
  cursor: pointer;
  list-style: none;
}
.disclosure > summary::-webkit-details-marker { display: none; }
/* Chevron icon rotates on open */
.disclosure > summary::after {
  content: "";
  flex-shrink: 0;
  width: 12px; height: 12px;
  border-right: 2px solid var(--color-accent-strong);
  border-bottom: 2px solid var(--color-accent-strong);
  transform: rotate(45deg);
  transition: transform var(--transition-base);
}
.disclosure[open] > summary::after { transform: rotate(-135deg); }
.disclosure__body {
  padding: 0 var(--space-5) var(--space-5);
  color: var(--color-ink-soft);
}

/* ==========================================================================
   13. FORMS
   ========================================================================== */
.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field + .field { margin-top: var(--space-4); }

.label {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-ink);
}
.label .req { color: var(--color-error); margin-left: 2px; }

.input,
.textarea,
.select {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-base);
  color: var(--color-ink);
  background: var(--color-surface);
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.input::placeholder, .textarea::placeholder { color: var(--color-ink-muted); }
.textarea { min-height: 140px; resize: vertical; }
.select { appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235A5247' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
  padding-right: var(--space-7);
}
.input:focus,
.textarea:focus,
.select:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-soft);
}

/* Field help text */
.field__hint { font-size: var(--text-sm); color: var(--color-ink-muted); }

/* Per-field error message (hidden until JS/markup sets it). Paired with icon
   + text so error is not conveyed by color alone. */
.field__error {
  display: none;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-error);
}
.field.has-error .input,
.field.has-error .textarea,
.field.has-error .select {
  border-color: var(--color-error);
  box-shadow: 0 0 0 3px var(--color-error-soft);
}
.field.has-error .field__error { display: flex; }

/* Form-level status banners. Toggle .is-visible via JS. */
.form-status {
  display: none;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
}
.form-status.is-visible { display: flex; }
.form-status svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; }
.form-status--success { background: var(--color-success-soft); color: var(--color-success); }
.form-status--error   { background: var(--color-error-soft);   color: var(--color-error); }

/* Email-capture / waitlist block */
.waitlist {
  background: var(--color-surface-warm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-7);
  box-shadow: var(--shadow-md);
}
@media (min-width: 768px) {
  .waitlist { padding: var(--space-8); }
}
/* Inline row form: email + button side-by-side on wider screens */
.waitlist__form { margin-top: var(--space-5); }
.field-row { display: flex; flex-direction: column; gap: var(--space-3); }
@media (min-width: 560px) {
  .field-row { flex-direction: row; align-items: flex-start; }
  .field-row .field { flex: 1; }
  .field-row .btn { flex-shrink: 0; }
}
.waitlist__privacy {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.waitlist__privacy svg { width: 1em; height: 1em; flex-shrink: 0; }

/* Generic contact form container */
.form-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
}
@media (min-width: 768px) { .form-card { padding: var(--space-7); } }

/* ==========================================================================
   14. FOOTER
   ========================================================================== */
.site-footer {
  background: var(--color-bg-soft);
  border-top: 1px solid var(--color-border);
  padding-block: var(--space-8) var(--space-6);
}
.footer__grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .footer__grid { grid-template-columns: 1.5fr 1fr 1fr; gap: var(--space-7); }
}
.footer__brand .brand { margin-bottom: var(--space-3); }
.footer__tagline { color: var(--color-ink-soft); max-width: 34ch; font-size: var(--text-sm); }
.footer__col h4 {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
  margin-bottom: var(--space-3);
}
.footer__links { display: flex; flex-direction: column; gap: var(--space-2); }
.footer__links a { color: var(--color-ink-soft); font-size: var(--text-sm); }
.footer__links a:hover { color: var(--color-accent-strong); }
.footer__bottom {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: space-between;
  align-items: center;
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}

/* ==========================================================================
   15. REVEAL-ON-SCROLL HELPER
   Elements start hidden+offset; JS adds .is-visible (no-op under reduced
   motion — see section 16, where the initial hidden state is removed).
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* ==========================================================================
   16. ACCESSIBILITY — focus-visible + reduced motion
   ========================================================================== */

/* Visible keyboard focus ring across all interactive elements */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.nav__link:focus-visible,
.nav-panel__link:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Honor reduced-motion for ALL animation/transition/scroll */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  /* Reveal elements must be fully visible immediately (no fade/rise) */
  .reveal { opacity: 1; transform: none; }
}