/* Phospho — site stylesheet
   Dark, calm, system font stack, phosphor-teal accent.
   No frameworks, no external requests.
   Palette comes from /tokens.css (assets/brand/tokens.css — the brand kit,
   extracted from the shipped mark; see docs/brand.md). This file only maps
   the site's local names onto those tokens. */

/* ─── Reset & base ─────────────────────────────────────────────────────── */

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

:root {
  /* Site aliases over the brand tokens (loaded from /tokens.css).
     --accent (#19e0c8 phosphor teal) and the text scale come straight from
     tokens.css; the two derived values below are site-local. */
  --accent-dim:    #0fa893;                    /* deepened teal — borders, eyebrow (6.44:1 on dark --bg #0c0d1f) */
  --accent-soft:   rgba(25, 224, 200, 0.16);   /* halo/fill tint (decorative only) */

  --bg:            var(--surface-base);    /* "Screen"    — page background */
  --bg-surface:    var(--surface-raised);  /* "Midnight"  — cards, panels   */
  --bg-raised:     var(--surface-high);    /* "Afterglow" — code, chrome    */
  --border:        var(--border-subtle);
  --border-mid:    var(--border-strong);

  --text:          var(--text-primary);
  --text-mid:      var(--text-secondary);
  --text-dim:      var(--text-muted);

  --radius: var(--radius-md);   /* site shorthand for the standard 10px step; -sm/-lg resolve from tokens.css */

  --max-w:         760px;   /* the one content width — the screen panel (main) caps at 800px */

  /* ── Liquid glass — material tokens (site-local; derived from tokens.css) ──
     Blur/saturate are documented as tokens but written as LITERALS in the
     backdrop-filter declarations (the @supports gate further down): Safari
     (incl. 18) can fail to resolve var() inside (-webkit-)backdrop-filter and
     computes 'none' (mdn/browser-compat-data #25914). Keep them in sync. */
  --glass-blur:     14px;
  --glass-saturate: 140%;

  /* Chrome scrim — the header's glass face. Derives from --surface-void, so
     it adapts to light mode by itself. AA backstop verified analytically
     (sRGB compositing; worst case = the cyan strip #6cb8ed at .82 passing
     under the header wings, no blur attenuation; computed at the historical
     .82 opacity — strips now run .6 + edge falloff, strictly safer):
       dark  → composite ≈ #131d2c: --text-secondary 9.07:1, --text-primary 14.96:1
       light → composite ≈ #d5d9ee: --text-secondary 6.65:1, --text-primary 12.71:1
     Floor is 82% void — never go below it. */
  --glass-tint: color-mix(in srgb, var(--surface-void) 84%, transparent);

  /* 1px hairline. Derives from --text-primary, so it auto-flips:
     bezel-white on dark, ink on light. */
  --glass-edge: color-mix(in srgb, var(--text-primary) 18%, transparent);

  /* The 1px light/dark edge pair: specular top rim + dark under-edge. The
     specular stays pure white — it is light, not paint. Both get explicit
     light-mode overrides (a specular must not auto-flip dark, an under-edge
     must not auto-flip light). */
  --glass-rim-spec:  rgba(255, 255, 255, 0.30);
  --glass-rim-under: color-mix(in srgb, var(--surface-void) 40%, transparent);
  --glass-rim: inset 0 1px 0 var(--glass-rim-spec),
               inset 0 -1px 0 var(--glass-rim-under);

  /* Depth. Void's channels as a literal, NOT a var() derivation: in light
     mode --surface-void goes light, and a shadow must never go light. */
  --glass-shadow: 0 24px 60px rgba(6, 6, 15, 0.55);

  /* Faint cousin of the rim for the OPAQUE cards (.step / .feature-card) —
     same edge grammar, zero translucency. ≈ the shipped rgba(255,255,255,.05). */
  --glass-rim-faint: inset 0 1px 0 color-mix(in srgb, var(--text-primary) 5%, transparent);
}

html {
  font-size: 17px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 80px;   /* anchor targets clear the sticky header instead of hiding under it */
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  min-height: 100vh;
}

/* Pages that float on the light field — --surface-void is just the base
   behind the canvas. index and unlock both opt in via body.landing; the
   legal pages keep the default page surface. */
body.landing {
  background: var(--surface-void);   /* base behind the light-field canvas */
}

/* The generative light field — one looping ribbon of streamed colour, rendered
   to a fixed canvas (light-field.js), behind all content; the glass panels
   refract it as the page scrolls past. */
#bg-field {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  display: block;
  pointer-events: none;
}

.landing {
  overflow-x: clip;                 /* the 100vw canvas must never cause h-scroll */
}

/* The content column floats on the light field — no opaque panel. */
.landing main {
  position: relative;
  z-index: 0;                       /* above the canvas (z-index:-1) */
  max-width: 800px;
  margin-inline: auto;
  /* No opaque panel — content floats directly on the light field; the
     section/card glass refracts it. */
}

/* ─── Layout helpers ────────────────────────────────────────────────────── */

.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
}

section {
  padding: 64px 0;
}

/* ─── Typography ────────────────────────────────────────────────────────── */

h1 {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 600;             /* brand.md §4 display spec (was 700) */
  letter-spacing: -0.02em;      /* brand.md §4 (was -0.03em) — less crowded */
  line-height: 1.15;
  color: var(--text);
}

h2 {
  font-size: clamp(1.25rem, 3vw, 1.6rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-bottom: 32px;
}

h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
}

p {
  color: var(--text-mid);
  margin-bottom: 1em;
}

p:last-child {
  margin-bottom: 0;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

strong {
  color: var(--text);
  font-weight: 600;
}

code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.875em;
  background: var(--bg-raised);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-sm);
  padding: 0.1em 0.4em;
  color: var(--accent);
}

/* ─── Site header / nav ─────────────────────────────────────────────────── */

.site-header {
  position: sticky;                 /* stays available through the long scroll → Buy is always one click away */
  top: 0;
  z-index: 10;                      /* above the screen panel (main, z-index:0) and strips (-1) */
  background: var(--surface-void);  /* solid fallback — the glass face is applied under the @supports gate below */
  border-bottom: 1px solid var(--border);
  padding: 18px 0;
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.site-logo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 1.05rem;
  font-weight: var(--wordmark-weight, 600);   /* brand.md §4: semibold, never all-caps */
  letter-spacing: var(--wordmark-tracking, -0.02em);
  color: var(--text);
  text-decoration: none;
}

.site-logo img {
  width: 22px;
  height: 22px;
  border-radius: 5px;   /* ≈ the mark's own 22.5% corner ratio at this size */
  display: block;
}

.site-logo:hover {
  text-decoration: none;
  color: var(--accent);
}

.site-nav {
  display: flex;
  gap: 24px;
  align-items: center;
  font-size: 0.9rem;
}

.site-nav a {
  color: var(--text-mid);
  white-space: nowrap;   /* nav labels never wrap mid-phrase ("How it / works") */
}

.site-nav a:hover {
  color: var(--text);
  text-decoration: none;
}

/* ─── Hero ──────────────────────────────────────────────────────────────── */

.hero {
  padding: 80px 0 64px;
  position: relative;
  isolation: isolate;               /* own stacking context so the monitor bloom sits behind content */
  /* No background and no clip — the screen panel's surface flows through
     continuously, and the monitor bloom is free to bleed into the section below. */
}

.hero > .container {
  position: relative;
  z-index: 1;                       /* hero content sits above the cast glow */
}

/* ─── Liquid-glass hero ───────────────────────────────────────────────────────
   The icon is layered glass over light, not a flat fill. The hero rebuilds that:
   a vivid icon-palette LIGHT layer (.hero::before), the monitor as a frosted
   GLASS panel (translucent + backdrop-blur) so colour refracts THROUGH it, with
   a specular rim, a gloss streak, and a drop shadow for depth. A readability
   scrim keeps the headline legible. Slow + Reduce-Motion-safe; never flashes. */

/* The hero "monitor" wrapper — centres the app icon over the light field. */
.hero-monitor {
  position: relative;
  margin: 48px 0;   /* --space-12: air between the CTA row and the icon */
}

/* Hero product visual = the real app icon (Icon Composer glass): a desktop
   monitor glowing with streamed colour — the product in one image. Floats
   gently on the light field with just its own drop shadow. */
.hero-icon {
  display: block;
  width: min(300px, 62%);
  height: auto;
  margin: 8px auto 0;
  filter: drop-shadow(0 22px 48px rgba(6, 6, 15, 0.55));
  animation: hero-icon-float 9s ease-in-out infinite;
  will-change: transform;
}

@keyframes hero-icon-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}

/* (The hero bloom was removed — the light-field ribbon behind the page is the
   colour source now; the icon sits on it with just its own glow + drop shadow.) */

/* Legibility over the light field: the bare hero/heading text and the glass
   panels get a soft shadow so copy reads wherever the ribbon's bright parts
   pass behind it. */
.landing .hero-eyebrow,
.landing .hero h1,
.landing .hero-tagline,
.landing main h2,
.step, .feature-card, .limits-card, .pricing-card, .notice {
  text-shadow: 0 1px 3px rgba(6, 6, 15, 0.62);
}

.hero-eyebrow {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);   /* muted, not teal — teal is reserved for interactive elements */
  margin-bottom: 18px;
}

.hero h1 {
  margin-bottom: 20px;
  line-height: 1.2;   /* a touch looser than the global 1.15 — the hero wraps to two lines */
}

.hero-tagline {
  font-size: clamp(1rem, 2vw, var(--text-lg));  /* cap at the brand lead-paragraph step */
  color: var(--text-mid);
  max-width: 560px;
  margin-bottom: 36px;
  line-height: var(--leading-normal);           /* 1.55 — token-true */
}

.hero-tagline p {
  font-size: inherit;
  line-height: inherit;
  margin-bottom: 0;     /* the container owns the 36px gap to the CTA row */
}

.hero-tagline p + p {
  margin-top: 10px;     /* air between the what-it-is / terms pair */
}

.hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

/* ─── Buttons ───────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: var(--radius);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  border: none;
  transition: opacity 0.15s, box-shadow 0.15s;
  line-height: 1;
}

.btn--primary {
  background: var(--accent);
  color: var(--accent-contrast);
  box-shadow: 0 0 18px var(--accent-soft);
}

.btn--primary:hover {
  opacity: 0.88;
  text-decoration: none;
  box-shadow: 0 0 28px var(--accent-soft);
}

.btn--secondary {
  background: var(--bg-raised);
  color: var(--text);
  border: 1px solid var(--border-mid);
}

.btn--secondary:hover {
  background: var(--surface-high);
  text-decoration: none;
}

.btn--ghost {
  background: transparent;
  color: var(--text-mid);
  padding: 11px 16px;
}

.btn--ghost:hover {
  color: var(--text);
  text-decoration: none;
}

/* Outline = a demoted primary (the nav Buy), so it doesn't fight the hero CTA. */
.btn--outline {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent-dim);
}

.btn--outline:hover {
  background: var(--accent-soft);
  text-decoration: none;
}

/* Button modifiers — replace per-call inline styles with classes. */
.btn--sm {
  padding: 7px 16px;
  font-size: 0.85rem;
}

.btn--full {
  width: 100%;
  justify-content: center;
}

/* ─── Keyboard focus ────────────────────────────────────────────────────────
   One designed focus ring for the whole site (there was none — every CTA relied
   on the UA default, which over the teal fill fails WCAG 2.2 SC 2.4.11). The
   teal accent reads on dark surfaces; on the teal primary button the ring would
   vanish into the fill, so it switches to the bezel-white text colour there. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.btn--primary:focus-visible {
  outline-color: var(--text);
}

/* ─── Placeholder / notice banners ─────────────────────────────────────── */

.notice {
  background: var(--bg-surface);
  border: 1px solid var(--border-mid);
  border-left: 3px solid var(--accent-dim);
  border-radius: var(--radius);
  padding: 14px 18px;
  font-size: 0.875rem;
  color: var(--text-mid);
  margin-bottom: 24px;
}

.notice strong {
  color: var(--text);
}

/* ─── How it works ──────────────────────────────────────────────────────── */

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 24px;
}

.step {
  background: var(--bg-surface);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--glass-rim-faint), var(--glass-shadow);   /* faint top edge + lifted-panel depth — the header's glass grammar, no translucency */
}

.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent-soft);
  border: 1px solid var(--accent-dim);
  color: var(--accent);
  font-size: 0.85rem;
  font-weight: 700;
  margin-bottom: 14px;
}

.step h3 {
  margin-bottom: 6px;
}

/* ─── Features grid ─────────────────────────────────────────────────────── */

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}

.feature-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-lg);
  padding: 22px;
  box-shadow: var(--glass-rim-faint), var(--glass-shadow);   /* faint top edge + lifted-panel depth — the header's glass grammar, no translucency */
}

/* A tinted icon chip — same recipe as the step-number / unlock-step circles
   (accent-soft fill + accent-dim edge + teal glyph), so the feature icons read
   as part of the system instead of OS emoji fighting the palette. */
.feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  background: var(--accent-soft);
  border: 1px solid var(--accent-dim);
  color: var(--accent);
  margin-bottom: 14px;
}

.feature-icon svg {
  width: 22px;
  height: 22px;
  display: block;
}

.feature-card h3 {
  margin-bottom: 6px;
}

/* ─── Limits / honesty section ──────────────────────────────────────────── */

.limits-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px 32px;
}

.limits-card + .limits-card {
  margin-top: 16px;
}

.limits-card--warning {
  border-left: 3px solid #c89000;   /* amber stays amber — warning semantics */
  background: rgba(200, 144, 0, 0.06);
}

.limits-card h3 {
  margin-bottom: 10px;
}

/* ─── Pricing card ──────────────────────────────────────────────────────── */

.pricing-card {
  background: var(--bg-surface);
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius-lg);
  padding: 36px;
  max-width: 440px;
  margin-inline: auto;              /* centred in the column — not stranded left at the buy moment */
  box-shadow: 0 0 40px var(--accent-soft);
}

.pricing-price {
  font-size: 2.8rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 4px;
}

.pricing-price sup {
  font-size: 1.4rem;
  vertical-align: super;
  letter-spacing: 0;
}

.pricing-note {
  font-size: 0.85rem;
  color: var(--text-dim);
  margin-bottom: 20px;
}

.pricing-list {
  list-style: none;
  margin-bottom: 28px;
}

.pricing-list li {
  padding: 7px 0;
  font-size: 0.9rem;
  color: var(--text-mid);
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 10px;
}

.pricing-list li:last-child {
  border-bottom: none;
}

.check {
  color: var(--accent);
  flex-shrink: 0;
}

/* ─── Steps list (unlock page) ──────────────────────────────────────────── */

.unlock-steps {
  counter-reset: step;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 24px 0;
}

.unlock-steps li {
  counter-increment: step;
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.unlock-steps li::before {
  content: counter(step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent-soft);
  border: 1px solid var(--accent-dim);
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 700;
  margin-top: 2px;
}

.unlock-steps li p {
  margin: 0;
}

/* ─── Legal pages ───────────────────────────────────────────────────────── */

.legal-body {
  max-width: 680px;
}

.legal-body h2 {
  font-size: 1.1rem;
  margin-top: 40px;
  margin-bottom: 10px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

.legal-body h2:first-of-type {
  margin-top: 24px;
  padding-top: 0;
  border-top: none;
}

.legal-body ul,
.legal-body ol {
  padding-left: 1.4em;
  margin-bottom: 1em;
  color: var(--text-mid);
}

.legal-body li {
  margin-bottom: 0.4em;
}

.legal-draft-banner {
  background: rgba(200, 144, 0, 0.08);
  border: 1px solid rgba(200, 144, 0, 0.35);
  border-left: 3px solid #c89000;
  border-radius: var(--radius);
  padding: 14px 18px;
  font-size: 0.875rem;
  color: #d9a51a;   /* lifted amber — ≥4.5:1 on the tinted background */
  margin-bottom: 32px;
}

/* Legal-page text helpers — replace the repeated inline styles on the
   "Last updated" line and the controller/seller entity block. */
.legal-updated {
  color: var(--text-dim);
  font-size: 0.875rem;
  margin: 8px 0 32px;
}

.legal-entity {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin: 16px 0;
  font-size: 0.9rem;
}

/* ─── Site footer ───────────────────────────────────────────────────────── */

.site-footer {
  border-top: 1px solid var(--border);
  padding: 40px 0;
  margin-top: 0;
}

.site-footer .container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  font-size: 0.85rem;
}

.footer-links a {
  color: var(--text-dim);
}

.footer-links a:hover {
  color: var(--text-mid);
  text-decoration: none;
}

.footer-legal {
  font-size: 0.78rem;
  color: var(--text-dim);
  line-height: 1.55;
}

.footer-legal p {
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

/* ─── Light-mode overrides for site-local tokens ───────────────────────── */
/* tokens.css handles surface/text/accent in light mode; --accent-dim is a
   site-local alias not defined in tokens.css, so it needs its own override.
   #0fa893 = 2.71:1 on light --bg #f2f4fa (fails WCAG AA).
   #0a6f60 = 5.53:1 on #f2f4fa, 5.05:1 on #e7eaf3 (clears AA on all light surfaces).
   Dark mode value #0fa893 = 6.44:1 on dark --bg #0c0d1f — left unchanged. */
/* Opt-in only, like the tokens' light palette: the site never follows the OS
   scheme (the canvas/glass layers are fixed-dark — see tokens.css header). */
:root[data-color-scheme="light"] {
  --accent-dim: #0a6f60;  /* 5.53:1 on #f2f4fa — WCAG AA compliant */

  /* Liquid glass: --glass-tint and --glass-edge adapt by themselves (they
     derive from --surface-void / --text-primary). These three cannot: */
  --glass-rim-spec:  rgba(255, 255, 255, 0.70);   /* real specular on light glass  */
  --glass-rim-under: color-mix(in srgb, var(--text-primary) 12%, transparent); /* ink */
  --glass-shadow:    0 24px 60px rgba(20, 22, 43, 0.18);   /* ink-toned, soft */
}

/* The outline button sits on the glass header: as transparent-bg text it would
   inherit the header's composite worst case (~4.3:1 in light mode — under AA).
   An opaque face restores it: #0a6f60 on --surface-high #fff = 6.1:1. */
:root[data-color-scheme="light"] .btn--outline { background: var(--surface-high); }

/* ─── Liquid glass — base (solid fallback) layer ──────────────────────────
   One token-driven recipe. NEUTRAL by design: the material adds no hue of its
   own — the only colour seen through it is the light field already behind it
   (brand.md: colour is emitted light, not paint). Applied to the sticky header
   and the content panels (.step / .feature-card / .limits-card / .pricing-card
   / .notice): they all sit over the light-field ribbon, whose filaments give
   the displacement lens (liquid-glass.js) real edges to refract. .glass is the
   canonical recipe as a utility; the live surfaces consume the same tokens. */
.glass {
  background: var(--surface-raised);        /* solid fallback */
  border: 1px solid var(--border-mid);      /* fallback edge (no color-mix) */
  border-radius: var(--radius-lg);
}

/* ─── Result photo (how-it-works) ───────────────────────────────────────── */

.result-photo {
  margin: 48px auto 0;
  max-width: 880px;
}

.result-photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
}

.result-photo figcaption {
  margin-top: 12px;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.9rem;
}

/* ─── Liquid glass — enhancement gate ─────────────────────────────────────
   Translucency only where it can actually render. The color-mix() clause
   matters: Safari 9–16.1 and Firefox 103–112 support backdrop-filter but NOT
   color-mix — without the clause, background: var(--glass-tint) would be
   invalid at computed-value time there and the header would render TRANSPARENT
   (text over raw content). With it, those engines keep the solid fallback.
   Everything outside this block is opaque and AA on its own. */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px)))
      and (background: color-mix(in srgb, red 50%, transparent)) {

  .glass,
  .site-header {
    background: var(--glass-tint);
    /* literals, not var(): see the --glass-blur token note (Safari) */
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
  }

  .glass {
    border-color: var(--glass-edge);
    box-shadow: var(--glass-rim), var(--glass-shadow);
  }

  /* Content panels = clear glass over the light field: the ribbon reads through
     and the lens (liquid-glass.js) refracts it (overriding this blur with its
     own near-zero blur on Chromium; this blur is the non-lens fallback). The
     56% tint + the text-shadow above keep copy legible. */
  .step,
  .feature-card,
  .limits-card,
  .pricing-card,
  .notice {
    background: color-mix(in srgb, var(--surface-void) 56%, transparent);
    border-color: var(--glass-edge);
    box-shadow: var(--glass-rim);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    backdrop-filter: blur(14px) saturate(150%);
  }

  /* The warning limits-card keeps its amber wash ON TOP of the glass tint — the
     neutral 56% void rule above would otherwise erase the warning semantic,
     leaving only the amber border-left. Composite amber over the same tint. */
  .limits-card--warning {
    background: color-mix(in srgb, #c89000 12%,
                color-mix(in srgb, var(--surface-void) 56%, transparent));
  }

}

/* ─── Reduce Transparency — the material collapses to opaque ──────────────
   MUST stay after the @supports block in source order: same specificity, last
   declaration wins. Browsers without this media feature skip it and keep the
   glass — which is independently AA-safe, so the guard fails safe both ways.
   (The light field is page scenery behind the content, not an overlay over it
   — intentionally not collapsed here.) */
@media (prefers-reduced-transparency: reduce) {
  .site-header {
    background: var(--surface-void);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .glass {
    background: var(--surface-raised);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .step, .feature-card, .limits-card, .pricing-card, .notice {
    background: var(--surface-raised);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  /* Keep the warning amber when glass collapses — opaque amber over the raised
     surface so the §-limits warning still reads. */
  .limits-card--warning {
    background: color-mix(in srgb, #c89000 12%, var(--surface-raised));
  }
}

/* ─── Glass-on-glass guard ────────────────────────────────────────────────
   A .notice nested inside the glass .pricing-card stays opaque (HIG: content
   inside a glass container is solid, never glass-on-glass — two stacked
   backdrop-filters each blur a flattened snapshot of the other, dimming both).
   liquid-glass.js also skips the displacement lens for a pricing-card-nested
   notice. Standalone .notice banners keep their glass. Unconditional — higher
   specificity (0,2,0) than .notice, and this IS the fallback (no @supports). */
.pricing-card .notice {
  background: var(--surface-raised);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* ─── Reduced motion ────────────────────────────────────────────────────────
   Phospho honors system Reduce Motion in-app; the site matches. The lit wall
   stays (a still, soft cast of colour), but nothing breathes or sweeps. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-icon { animation: none; }
}

/* ─── Responsive ────────────────────────────────────────────────────────── */

@media (max-width: 600px) {
  section {
    padding: 44px 0;
  }

  .hero {
    padding: 48px 0 44px;
  }

  .pricing-card {
    padding: 24px;
  }

  .limits-card {
    padding: 20px;
  }

  /* Narrow header: let the nav wrap onto its own line under the logo instead
     of clipping the Buy CTA off-screen (the container has overflow: clip
     ancestry via body, so there's no horizontal scroll to save it). */
  .site-header {
    padding: 12px 0;
  }

  .site-header .container {
    flex-wrap: wrap;
    row-gap: 8px;
  }

  .site-nav {
    gap: 14px;
    row-gap: 8px;
    flex-wrap: wrap;
    font-size: 0.85rem;
  }
}

/* ── Contact form ───────────────────────────────────────────────────────── */

.contact { max-width: 640px; }
.contact-lead { color: var(--text-secondary); margin-bottom: 28px; }
.contact-form { display: grid; gap: 18px; }
.contact-row { display: grid; gap: 6px; }
.contact-row label { font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); }
.contact-hint { font-weight: 400; color: var(--text-muted); }
.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  padding: 11px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--border-strong);
  background: var(--surface-raised);
  color: var(--text-primary);
  font: inherit;
  font-size: 0.95rem;
}
.contact-form textarea { resize: vertical; min-height: 160px; }
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}
.contact-form ::placeholder { color: var(--text-muted); }
/* Honeypot: off-screen, not display:none — some bots skip hidden inputs. */
.contact-trap { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
/* The spam check speaks up only while it is working or after it has failed, so
   this line appears and disappears rather than holding space. */
.contact-proof { font-size: var(--text-sm); color: var(--text-muted); margin: 0; }
.contact-proof--failed { color: var(--danger); }
.contact-privacy { font-size: var(--text-xs); color: var(--text-muted); }
.contact-context { font-size: var(--text-sm); color: var(--text-secondary); }
.contact-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.contact-status { font-size: var(--text-sm); color: var(--text-secondary); }
.contact-sent, .contact-failed { margin-top: 22px; }
.contact-failed { border-color: var(--danger); }
.contact-alt { margin-top: 32px; font-size: var(--text-sm); color: var(--text-muted); }