/* CoolWrist storefront, v03: the colder look. One shared stylesheet, no build step.
   Icy palette: deep ink and navy, glacier blue-white, frost gray. Light is the default;
   a dark scheme follows the visitor's setting. Dark bands stay dark in both. */

:root {
  /* Cold palette */
  --ink: #07131C;            /* Deepest ground */
  --navy: #0D2233;           /* Dark band ground, body text on light */
  --navy-2: #13324A;         /* Raised dark surface */
  --glacier: #EAF3F8;        /* Light ground */
  --frost-gray: #C9D6DE;     /* Light panel edge, secondary ground */
  --ice: #A9CFE3;            /* Accent on dark */
  --steel: #2F6485;          /* Accent on light, 5.8:1 on glacier */

  /* Semantic tokens, light scheme */
  --bg: var(--glacier);
  --bg-alt: #DCE9F0;
  --text: var(--navy);
  --text-soft: #3A5366;
  --accent: var(--steel);
  --panel: rgba(255, 255, 255, 0.62);
  --panel-solid: #F6FAFC;
  --line: rgba(13, 34, 51, 0.16);
  --field: #FFFFFF;
  --focus: var(--steel);
  /* Section depth: palette blues only. Steel text on band-b is 4.59:1, navy 11.6:1. */
  --band-a: #D3E6F1;
  --band-b: #C6DEEC;
  --wash: rgba(47, 100, 133, 0.09);
  /* Primary button ground and label; flips in the dark scheme so the pill stays visible. */
  --btn-bg: var(--navy);
  --btn-fg: var(--glacier);
  /* Sticky header glass: near solid over the light hero, see-through over dark grounds. */
  --header-glass: rgba(13, 34, 51, 0.93);
  /* Hero follows the theme: light glacier veil over the frost photo, navy text. */
  --hero-veil: linear-gradient(180deg, rgba(234, 243, 248, 0.88), rgba(234, 243, 248, 0.92));
  --hero-text: var(--navy);
  --hero-soft: #2C4558;
  --hero-accent: var(--steel);
  --hero-link: var(--navy);

  /* Type */
  --font: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --step-hero: clamp(2.6rem, 1.5rem + 4.6vw, 5rem);
  --step-h2: clamp(2rem, 1.3rem + 3vw, 3.6rem);
  --step-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem);
  --step-body: clamp(1.02rem, 0.98rem + 0.2vw, 1.15rem);

  /* Shape */
  --r-pill: 999px;
  --r-card: 20px;
  --r-photo: 24px;

  /* Layout */
  --gutter: clamp(16px, 4vw, 48px);
  --max: 1200px;
  --header-h: 64px;
}

@media (min-width: 900px) {
  :root { --header-h: 76px; }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: var(--ink);
    --bg-alt: #0B1B28;
    --text: #EAF3F8;
    --text-soft: #B7C8D3;
    --accent: var(--ice);
    --panel: rgba(255, 255, 255, 0.06);
    --panel-solid: #10283A;
    --line: rgba(169, 207, 227, 0.22);
    --field: #0F2434;
    --focus: var(--ice);
    --band-a: #0B1B28;
    --band-b: #0F2536;
    --wash: rgba(169, 207, 227, 0.07);
    --btn-bg: var(--glacier);
    --btn-fg: var(--ink);
    --header-glass: rgba(7, 19, 28, 0.66);
    --hero-veil: linear-gradient(180deg, rgba(7, 19, 28, 0.58), rgba(7, 19, 28, 0.7));
    --hero-text: #F4FAFD;
    --hero-soft: #C3D3DD;
    --hero-accent: var(--ice);
    --hero-link: #F4FAFD;
  }
}
:root[data-theme="dark"] {
  --bg: var(--ink);
  --bg-alt: #0B1B28;
  --text: #EAF3F8;
  --text-soft: #B7C8D3;
  --accent: var(--ice);
  --panel: rgba(255, 255, 255, 0.06);
  --panel-solid: #10283A;
  --line: rgba(169, 207, 227, 0.22);
  --field: #0F2434;
  --focus: var(--ice);
  --band-a: #0B1B28;
  --band-b: #0F2536;
  --wash: rgba(169, 207, 227, 0.07);
  --btn-bg: var(--glacier);
  --btn-fg: var(--ink);
  --header-glass: rgba(7, 19, 28, 0.66);
  --hero-veil: linear-gradient(180deg, rgba(7, 19, 28, 0.58), rgba(7, 19, 28, 0.7));
  --hero-text: #F4FAFD;
  --hero-soft: #C3D3DD;
  --hero-accent: var(--ice);
  --hero-link: #F4FAFD;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 16px);
  background-color: var(--bg);
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--step-body);
  line-height: 1.6;
  color: var(--text);
  background-color: var(--bg);
  background-image:
    radial-gradient(1000px 560px at 92% -6%, rgba(169, 207, 227, 0.32), transparent 62%),
    radial-gradient(760px 480px at -10% 42%, rgba(120, 170, 200, 0.16), transparent 64%);
  background-repeat: no-repeat;
  overflow-x: clip;
}

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

a { color: var(--accent); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--text); }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 6px;
}
.band-dark :focus-visible, .site-header :focus-visible, .site-footer :focus-visible { outline-color: var(--ice); }

h1, h2, h3 {
  margin: 0 0 0.5em;
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-weight: 800;
  text-wrap: balance;
}
h1 { font-size: var(--step-hero); }
h2 { font-size: var(--step-h2); }
h3 { font-size: var(--step-h3); letter-spacing: -0.01em; line-height: 1.2; font-weight: 700; }
p { margin: 0 0 1em; max-width: 62ch; text-wrap: pretty; }

.skip-link {
  position: absolute;
  left: 12px;
  top: -100px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--ink);
  color: var(--glacier);
  border-radius: var(--r-pill);
  font-weight: 700;
}
.skip-link:focus { top: 12px; color: var(--glacier); }

.wrap {
  width: 100%;
  max-width: calc(var(--max) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- Dark bands: always dark, crisp light text ---------- */

.band-dark {
  --text: #EAF3F8;
  --text-soft: #C3D3DD;
  --accent: var(--ice);
  --panel: rgba(255, 255, 255, 0.08);
  --panel-solid: #10283A;
  --line: rgba(169, 207, 227, 0.26);
  --field: #0F2434;
  background:
    radial-gradient(900px 480px at 88% -10%, rgba(169, 207, 227, 0.22), transparent 62%),
    linear-gradient(180deg, var(--navy) 0%, var(--ink) 100%);
  color: var(--text);
}
.band-dark a { color: var(--ice); }
.band-dark a:hover { color: #fff; }
.band-dark .lede, .band-dark p { color: var(--text-soft); }
.band-dark h1, .band-dark h2, .band-dark h3 { color: #F4FAFD; }

/* Photo backgrounds sit under a dark overlay (about 0.6) so text stays readable. */
.band-photo {
  position: relative;
  isolation: isolate;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--ink);
}
.band-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(7, 19, 28, 0.58), rgba(7, 19, 28, 0.7));
}
.bg-vapor { background-image: url("assets/photos/vapor-macro-1600.webp"); }
.bg-frost { background-image: url("assets/photos/frost-detail-900.webp"); }
.bg-keyboard { background-image: url("assets/photos/full-size-keyboard-fit-900.webp"); }

/* ---------- Frosted glass ---------- */

.glass {
  background: var(--panel-solid);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .glass {
    background: var(--panel);
    -webkit-backdrop-filter: blur(16px) saturate(1.25);
    backdrop-filter: blur(16px) saturate(1.25);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 18px 40px -26px rgba(7, 19, 28, 0.55);
  }
}

/* ---------- Sticky header: frosted ink, light text ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-h);
  background-color: rgba(7, 19, 28, 0.94);
  border-bottom: 1px solid rgba(169, 207, 227, 0.18);
  color: #EAF3F8;
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .site-header {
    background-color: var(--header-glass);
    -webkit-backdrop-filter: blur(16px) saturate(1.3);
    backdrop-filter: blur(16px) saturate(1.3);
  }
}
.site-header .wrap {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
  text-decoration: none;
  color: #EAF3F8;
}
.brand { position: relative; }
.brand-wordmark { width: clamp(112px, 28vw, 160px); height: auto; }
/* Crossfade: both logos share one box, so nothing moves when the header goes compact. */
.brand-mark { position: absolute; left: 0; top: 50%; width: 32px; height: 32px; margin-top: -16px; }
.brand-wordmark, .brand-mark { transition: opacity 0.28s ease, transform 0.28s ease; }
.brand-mark { opacity: 0; transform: scale(0.9); }
.site-header.is-compact .brand-wordmark { opacity: 0; transform: scale(0.96); }
.site-header.is-compact .brand-mark { opacity: 1; transform: none; }

.header-right { display: flex; align-items: center; gap: 10px; }
.nav-desktop { display: none; }
.nav-desktop ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 0; }
.nav-desktop a {
  white-space: nowrap;
  display: block;
  padding: 0.55em 1.2em;
  border-radius: var(--r-pill);
  color: #DCE8EF;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
}
.nav-desktop a:hover, .nav-desktop a[aria-current="page"] { background: rgba(169, 207, 227, 0.16); color: #fff; }
@media (min-width: 1100px) { .nav-desktop { display: block; } .nav-mobile { display: none; } }

.nav-mobile { position: relative; }
.nav-mobile summary {
  list-style: none;
  cursor: pointer;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0.55em 1.2em;
  border-radius: var(--r-pill);
  border: 1.5px solid rgba(169, 207, 227, 0.5);
  color: #EAF3F8;
  font-weight: 700;
  font-size: 0.92rem;
}
.nav-mobile summary::-webkit-details-marker { display: none; }
.nav-mobile ul {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  width: min(260px, calc(100vw - 32px));
  margin: 0;
  padding: 10px;
  list-style: none;
  background: var(--navy);
  border: 1px solid rgba(169, 207, 227, 0.3);
  border-radius: var(--r-card);
}
.nav-mobile a { display: block; padding: 12px 14px; color: #EAF3F8; text-decoration: none; font-weight: 600; border-radius: 12px; }
.nav-mobile a:hover { background: rgba(169, 207, 227, 0.16); }

.top-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 80px; pointer-events: none; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 0.55em 1.2em;
  border-radius: var(--r-pill);
  border: 2px solid var(--navy);
  font: inherit;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.btn-primary { background: var(--btn-bg); border-color: var(--btn-bg); color: var(--btn-fg); }
.btn-primary:hover { background: var(--ice); border-color: var(--ice); color: var(--ink); }
.band-dark .btn-primary, .site-header .btn-primary { background: var(--glacier); border-color: var(--glacier); color: var(--ink); }
.band-dark .btn-primary:hover, .site-header .btn-primary:hover { background: var(--ice); border-color: var(--ice); color: var(--ink); }

.btn-buy { padding-right: 0.55em; white-space: nowrap; }
.btn-buy .price {
  font-size: 0.78rem;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: var(--r-pill);
  border: 1.5px solid currentColor;
  letter-spacing: 0.02em;
}
.site-header .btn-buy { min-height: 44px; padding: 0.55em 0.55em 0.55em 1.2em; }
@media (max-width: 420px) { .site-header .btn-buy .price { display: none; } .site-header .btn-buy { padding-right: 1.2em; } }

.text-link {
  font-weight: 700;
  color: var(--text);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--accent);
  text-underline-offset: 0.3em;
}
.band-dark .text-link { color: #F4FAFD; }
.text-link:hover { text-decoration-color: var(--text); }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 28px; }

/* ---------- Pending-content markers ---------- */

.ph {
  position: relative;
  border: 2px dashed var(--accent);
  border-radius: var(--r-card);
  background: var(--panel);
  padding: 20px;
  color: var(--text);
}
.ph-label {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--ice);
  padding: 4px 10px;
  border-radius: var(--r-pill);
  margin-bottom: 10px;
}
.ph-note { display: block; font-size: 0.95rem; color: var(--text-soft); max-width: 48ch; }
.ph-token {
  display: inline-block;
  font-size: 0.85em;
  font-weight: 700;
  padding: 1px 8px;
  border: 1.5px dashed var(--accent);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
  line-height: 1.5;
}
.btn .price { background: transparent; color: inherit; border-color: currentColor; }

.ph-photo { display: flex; flex-direction: column; justify-content: flex-end; border-radius: var(--r-photo); overflow: hidden; }
.ratio-4x3 { aspect-ratio: 4 / 3; }
.ratio-4x5 { aspect-ratio: 4 / 5; }
.ratio-16x9 { aspect-ratio: 16 / 9; }
.ratio-1x1 { aspect-ratio: 1 / 1; }

.stripe-note { margin-top: 16px; max-width: 460px; }
.stripe-note .ph { padding: 12px 16px; }
.stripe-note .ph-label { margin-bottom: 6px; }
.stripe-note .ph-note { font-size: 0.88rem; }
.stripe-note:target .ph { border-style: solid; box-shadow: 0 0 0 4px rgba(169, 207, 227, 0.3); }
.section.stripe-end { padding-block: 0 clamp(40px, 6vw, 72px); }

/* ---------- Photos ---------- */

.photo {
  margin: 0;
  position: relative;
  border-radius: var(--r-photo);
  overflow: hidden;
  background: var(--navy);
  border: 1px solid var(--line);
  box-shadow: 0 30px 60px -36px rgba(7, 19, 28, 0.7);
}
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo .badge { position: absolute; top: 16px; left: 16px; z-index: 2; }
.frame { padding: 10px; border-radius: calc(var(--r-photo) + 10px); }
.frame .photo { box-shadow: none; }
.gallery { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); margin-top: 32px; }
.gallery .photo img { aspect-ratio: 1 / 1; }
.gallery.wide .photo img { aspect-ratio: 4 / 3; }

/* ---------- Badges ---------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 10px;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--ice);
  background: rgba(7, 19, 28, 0.55);
  color: #EAF3F8;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.2;
}
.badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ice); box-shadow: 0 0 0 3px rgba(169, 207, 227, 0.3); }

/* ---------- Sections ---------- */

.section { padding-block: clamp(64px, 9vw, 128px); }
.section-tight { padding-block: clamp(48px, 6vw, 88px); }
.band-ice { background: linear-gradient(180deg, var(--band-a), var(--band-b)); }
/* More color: a steel wash on the open sections, and a steel top edge on the cards. */
.problem, .guarantee { background: linear-gradient(180deg, transparent, var(--wash)); }
.step, .faq details, .cta-card { border-top: 3px solid var(--accent); }

.eyebrow {
  display: block;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}
.lede { font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem); color: var(--text-soft); }

.grid-2 { display: grid; gap: clamp(32px, 5vw, 72px); align-items: center; }
@media (min-width: 900px) {
  .grid-2 { grid-template-columns: 1fr 1fr; }
  .grid-2.lead-wide { grid-template-columns: 1.1fr 0.9fr; }
  .grid-2.flip > :first-child { order: 2; }
}

/* Hero */
.hero { padding-block: clamp(40px, 7vw, 110px); }
.hero h1 .second { display: block; color: var(--hero-accent); }
/* The hero reads the hero tokens, so it follows the theme; the other dark bands stay dark. */
.hero.band-photo::before { background: var(--hero-veil); }
.hero h1 { color: var(--hero-text); }
.hero p { color: var(--hero-soft); }
.hero .lede { margin-top: 20px; color: var(--hero-text); }
.hero .text-link { color: var(--hero-link); text-decoration-color: var(--hero-accent); }
.hero .text-link:hover { text-decoration-color: var(--hero-link); }
.proof-line { margin-top: 22px; font-size: 0.95rem; }

.problem h2 { max-width: 16ch; margin-bottom: 0.7em; }
.problem p { font-size: clamp(1.1rem, 1rem + 0.45vw, 1.3rem); }

/* Freeze, slide, swap */
.steps { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 18px; counter-reset: step; }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step { counter-increment: step; padding: 14px 14px 28px; border-radius: var(--r-card); }
.step .photo { margin-bottom: 22px; }
.step .photo img { aspect-ratio: 4 / 3; }
.step-word { display: block; padding-inline: 12px; font-size: clamp(2.6rem, 2rem + 2.6vw, 4rem); font-weight: 800; letter-spacing: -0.04em; line-height: 0.95; margin-bottom: 14px; }
.step-word::before { content: "0" counter(step); display: block; font-size: 0.8rem; letter-spacing: 0.16em; font-weight: 800; color: var(--accent); margin-bottom: 14px; }
.step p { margin: 0; padding-inline: 12px; color: var(--text-soft); }

/* Comparison table */
.compare { width: 100%; border-collapse: separate; border-spacing: 0; margin-top: 36px; font-size: 1rem; }
.compare th, .compare td { padding: 18px 20px; text-align: left; vertical-align: top; }
.compare thead th { font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 800; }
.compare thead .col-us { background: var(--navy); color: #F4FAFD; border-radius: var(--r-card) var(--r-card) 0 0; }
.compare thead .col-them { color: var(--text-soft); }
.compare tbody th { font-weight: 700; width: 22%; border-top: 1px solid var(--line); }
.compare td { border-top: 1px solid var(--line); }
.compare td.col-us { background: var(--navy); color: #F4FAFD; font-weight: 700; border-top-color: rgba(169, 207, 227, 0.22); }
.compare tbody tr:last-child td.col-us { border-radius: 0 0 var(--r-card) var(--r-card); }
.compare td.col-them { color: var(--text-soft); }
@media (max-width: 640px) {
  .compare, .compare tbody, .compare tr, .compare th, .compare td { display: block; width: 100%; }
  .compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .compare tr { margin-bottom: 14px; border-radius: var(--r-card); overflow: hidden; border: 1px solid var(--line); background: var(--panel); }
  .compare tbody th { width: 100%; border-top: 0; padding: 14px 18px 6px; font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; }
  .compare td { border-top: 0; padding: 10px 18px 12px; }
  .compare td.col-us { border-radius: 0; }
  .compare td::before { content: attr(data-label); display: block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.8; margin-bottom: 2px; }
}

/* In the box */
.in-box { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 10px; }
.in-box li { display: flex; gap: 12px; align-items: baseline; font-weight: 600; }
.in-box li::before { content: ""; flex: 0 0 10px; height: 10px; border-radius: 3px; background: var(--accent); transform: translateY(-1px); }

.cta-band h2 { font-size: clamp(2.4rem, 1.4rem + 4.4vw, 4.8rem); max-width: 14ch; }
.cta-card { padding: clamp(24px, 4vw, 48px); max-width: 860px; }

/* Proof */
.cards { display: grid; gap: 18px; margin-top: 36px; }
@media (min-width: 860px) { .cards { grid-template-columns: repeat(3, 1fr); } }
.cards .ph { min-height: 200px; }

/* Guarantee */
.guarantee h2 { max-width: 12ch; margin: 0; }
.guarantee .wrap { display: grid; gap: 20px 72px; align-items: end; }
@media (min-width: 900px) { .guarantee .wrap { grid-template-columns: 1fr 1fr; } .guarantee .lede { margin: 0; } }

/* FAQ accordion: native details, no script needed */
.faq { margin-top: 32px; max-width: 860px; display: grid; gap: 10px; }
.faq details { border-radius: var(--r-card); padding-inline: 22px; }
.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 20px 0;
  font-weight: 700;
  font-size: clamp(1.05rem, 1rem + 0.3vw, 1.25rem);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex: 0 0 14px;
  height: 14px;
  background:
    linear-gradient(currentColor, currentColor) center / 14px 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 14px no-repeat;
  transition: transform 0.2s ease;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .answer { padding: 0 0 22px; color: var(--text-soft); }
.faq .answer p:last-child { margin-bottom: 0; }

.note { border-left: 3px solid var(--accent); padding: 4px 0 4px 20px; margin-top: 32px; max-width: 70ch; }
.note p:last-child { margin-bottom: 0; }

/* Email capture */
.capture-form { display: grid; gap: 10px; margin-top: 24px; max-width: 520px; }
.capture-form label { font-weight: 700; }
.capture-row { display: flex; flex-wrap: wrap; gap: 10px; }
.capture-row input {
  flex: 1 1 220px;
  min-width: 0;
  min-height: 52px;
  padding: 12px 18px;
  border-radius: var(--r-pill);
  border: 2px solid var(--ice);
  background: var(--field);
  color: var(--text);
  font: inherit;
}
.capture-row .btn { min-height: 52px; padding-inline: 1.5em; }
.capture-form [disabled] { opacity: 0.55; cursor: not-allowed; }
.capture-row input[aria-invalid="true"] { border-color: #F2B66D; box-shadow: 0 0 0 4px rgba(242, 182, 109, 0.28); }
.form-status { min-height: 1.6em; font-size: 0.95rem; color: var(--text-soft); margin: 0; }
.form-status[data-state="ok"] { color: var(--text); font-weight: 700; }
.form-status[data-state="error"] { color: var(--text); font-weight: 600; }
.capture-form[aria-busy="true"] .btn { opacity: 0.7; cursor: progress; }
.cf-turnstile { max-width: 520px; }
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Inner pages */
.page-title { padding-block: clamp(48px, 8vw, 112px) clamp(36px, 5vw, 72px); }
.page-title h1 { margin-bottom: 0.3em; }
.prose h2 { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.6rem); margin-top: 1.6em; }
.prose h2.flush-top, .prose .flush-top { margin-top: 0; }
.prose h3 { margin-top: 1.4em; margin-bottom: 0.4em; }
.prose-body { padding-block: clamp(40px, 6vw, 88px); }
.photo-strip { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); margin-top: 28px; }
.caption { font-size: 0.95rem; color: var(--text-soft); margin-top: 12px; }
.ship-price { font-weight: 700; }
.faq-more { margin-top: 24px; }

.not-found { min-height: 60vh; display: grid; align-content: center; }

/* ---------- Footer ---------- */

.site-footer {
  background: linear-gradient(180deg, var(--navy), var(--ink));
  color: #C3D3DD;
  padding-block: 64px 40px;
  font-size: 0.95rem;
}
.site-footer a { color: #EAF3F8; }
.site-footer a:hover { color: var(--ice); }
.footer-top { display: grid; gap: 36px; }
@media (min-width: 860px) { .footer-top { grid-template-columns: 1fr 1.4fr; align-items: start; } }
.footer-wordmark { width: 180px; margin-bottom: 18px; }
.footer-nav ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; }
@media (min-width: 600px) { .footer-nav ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.footer-nav a { text-decoration: none; font-weight: 600; }
.footer-nav a:hover { text-decoration: underline; }
.footer-legal { margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(169, 207, 227, 0.25); display: grid; gap: 14px; font-size: 0.85rem; }
.footer-legal p { max-width: 80ch; margin: 0; }
.footer-legal .badge { font-size: 0.72rem; }
.footer-meta { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; align-items: center; }
.site-footer .kaizn-credit a { color: var(--ice); }

/* ---------- Motion: settle only, content never hidden ---------- */

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .settle { animation: settle linear both; animation-timeline: view(); animation-range: entry 0% entry 45%; }
    @keyframes settle { from { transform: translateY(18px); } to { transform: none; } }
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

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

/* ---------- Mist disclaimer: a short corner chip on the mid-page "One place to buy it." band. The hero carries none (Josh, 2026-10-20 staging note: too many words above the fold). ---------- */

.mist-chip {
  margin: 0;
  padding: 10px 14px;
  font-size: 0.8rem;
  line-height: 1.4;
  font-weight: 500;
  color: #EAF3F8;
  background: rgba(7, 19, 28, 0.92);
  border-top: 1px solid rgba(169, 207, 227, 0.25);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .mist-chip { background: rgba(7, 19, 28, 0.62); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
}
.mist-corner {
  position: absolute;
  z-index: 2;
  right: var(--gutter);
  bottom: 16px;
  max-width: min(420px, calc(100% - var(--gutter) * 2));
  border: 1px solid rgba(169, 207, 227, 0.3);
  border-radius: 14px;
  color: #EAF3F8 !important;
}
.hero-photo { align-self: center; }
.hero-photo .photo { border-radius: calc(var(--r-photo) - 4px); }
.grid-2 > * { min-width: 0; }

/* Footer credit: "Built by" plus the Kaizn lockup */
.kaizn-credit { display: inline-flex; align-items: center; gap: 10px; }
.kaizn-credit a { display: inline-flex; border-radius: 6px; }
.kaizn-credit img { height: 22px; width: auto; box-shadow: 0 0 0 1px rgba(169, 207, 227, 0.35); }
.site-footer .kaizn-credit a:focus-visible { outline: 3px solid var(--ice); outline-offset: 3px; }

/* Comparison chart marks, lede sub-line, tight lists */
.compare .mark { display: inline-flex; align-items: center; justify-content: center; width: 1.5em; height: 1.5em; border-radius: 50%; font-weight: 800; font-size: 0.9rem; margin-right: 0.5em; vertical-align: middle; }
.compare .mark.yes { background: var(--ice); color: var(--ink); }
.compare .mark.no { background: transparent; color: var(--text-soft); border: 1.5px solid currentColor; }
.compare td.col-us .mark.yes { background: var(--ice); color: var(--ink); }
.compare .note-s { display: inline; font-weight: 600; }
.compare thead th { vertical-align: bottom; }
@media (min-width: 641px) { .compare tbody th { width: 22%; } }
.lede-sub { font-weight: 700; letter-spacing: 0.01em; margin-top: -0.4em; }
.in-box.tight { margin-top: 12px; }
.note .in-box { margin-top: 0; }

/* ---------- Light/dark toggle: only shown once theme.js has run ---------- */

.theme-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: var(--r-pill);
  border: 1.5px solid rgba(169, 207, 227, 0.5);
  background: transparent;
  color: #EAF3F8;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.theme-toggle:hover { background: rgba(169, 207, 227, 0.16); border-color: var(--ice); }
.theme-toggle:focus-visible { outline: 3px solid var(--ice); outline-offset: 3px; }
.theme-toggle[aria-pressed="true"] svg { transform: scaleX(-1); }
@media (min-width: 560px) { .js .theme-head { display: inline-flex; } }
.js .theme-foot { display: inline-flex; }
@media (min-width: 560px) { .js .theme-foot { display: none; } }

/* ---------- Quiet scroll motion for more of the page (pure CSS; static where unsupported) ---------- */

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .gallery .photo, .photo-strip .photo, .faq details, .cards .glass, .prose-body h2, .prose-body .note, .guarantee .lede {
      animation: settle linear both; animation-timeline: view(); animation-range: entry 0% entry 45%;
    }
    .step .photo img, .gallery .photo img, .frame .photo img { animation: lift linear both; animation-timeline: view(); animation-range: entry 0% cover 35%; }
    @keyframes lift { from { transform: scale(1.035); } to { transform: none; } }
  }
}

/* ---------- Pre-order: top strip, note beside each Buy button, spec block ---------- */

.preorder-bar { margin: 0; max-width: none; padding: 8px var(--gutter); text-align: center; font-size: 0.88rem; font-weight: 600; background: var(--navy-2); color: #EAF3F8; border-bottom: 1px solid rgba(169, 207, 227, 0.18); }
.preorder-bar strong { font-weight: 800; }
.actions .buy-note { flex: 1 1 100%; order: 5; margin: 0; max-width: 56ch; font-size: 0.9rem; }
.spec { padding: clamp(20px, 3vw, 32px); margin-top: 32px; }
.spec h3 { margin-top: 0; }
.spec dl { margin: 0; }
.spec dl > div { display: grid; gap: 4px 24px; padding: 12px 0; border-top: 1px solid var(--line); }
@media (min-width: 700px) { .spec dl > div { grid-template-columns: 200px 1fr; } }
.spec dt { font-weight: 800; }
.spec dd { margin: 0; color: var(--text-soft); }

/* ---------- Ad landing pages (desk, play, gift, black-friday, two-pack) and the printable gift card ----------
   One offer and one Buy link (/buy) per page. They reuse the hero, glass, steps, spec, faq, and band classes above.
   New here: .lp-hero (a calmer headline size for long ad hooks), .lp-grid and .lp-tile (terms tiles, the
   three-object comparison, the two-way split), .price-math, and .gc (the gift card, fixed light colors so it
   prints legibly in any theme). Inline styles are blocked by the site's CSP, so the card's print rules live here. */

.hero.lp-hero h1 { font-size: clamp(2.2rem, 1.4rem + 3.8vw, 4.1rem); }
.lp-grid { display: grid; gap: 18px; margin-top: 32px; }
@media (min-width: 860px) {
  .lp-grid.three { grid-template-columns: repeat(3, 1fr); }
  .lp-grid.two { grid-template-columns: repeat(2, 1fr); }
}
.lp-tile { padding: clamp(20px, 3vw, 32px); border-top: 3px solid var(--accent); }
.lp-tile h3 { margin-top: 0; }
.lp-tile p { margin-bottom: 0; color: var(--text-soft); }
.lp-tile.us { background: var(--navy); border-color: rgba(169, 207, 227, 0.3); border-top-color: var(--ice); }
.lp-tile.us h3 { color: #F4FAFD; }
.lp-tile.us p { color: #C3D3DD; }
.price-math { max-width: none; margin: 0 0 0.3em; font-size: clamp(1.9rem, 1.2rem + 3vw, 3.4rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; color: var(--text); }
.frame .caption { margin: 10px 8px 4px; }

.gc-page { padding-block: clamp(36px, 6vw, 80px); }
.gc-page h1 { font-size: clamp(2rem, 1.3rem + 3vw, 3.4rem); }
.gc-print { display: none; }
.js .gc-print { display: inline-flex; }
.gc-sheet { display: grid; gap: 28px; margin-top: 32px; justify-items: start; }
.gc { width: 100%; max-width: 6in; min-height: 4in; padding: clamp(18px, 4vw, 0.42in); display: grid; align-content: space-between; gap: 18px; background: #FFFFFF; color: #07131C; border: 2px solid #07131C; border-radius: 18px; }
.gc h2, .gc p, .gc li { color: #07131C; max-width: none; }
.gc h2 { font-size: clamp(1.7rem, 1.1rem + 2.6vw, 2.5rem); margin: 0; }
.gc p { margin: 0; }
.gc ol { margin: 0; padding-left: 1.3em; display: grid; gap: 6px; font-weight: 700; }
.gc-brand { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; }
.gc-fill { display: flex; align-items: flex-end; gap: 10px; font-weight: 700; }
.gc-fill .line { flex: 1; min-height: 1.7em; border-bottom: 1.5px solid #07131C; }
.gc-small { font-size: 0.82rem; }
@media print {
  @page { size: letter; margin: 0.5in; }
  html, body { background: #FFFFFF !important; background-image: none !important; }
  .site-header, .site-footer, .skip-link, .no-print { display: none !important; }
  .gc-page { padding: 0; }
  .gc-sheet { margin: 0; gap: 0.5in; }
  .gc { break-inside: avoid; border-radius: 0; }
}

/* Placeholder labels: the "Placeholder:" prefix is staging-only. The staging Worker marks <html data-staging>;
   production never carries that attribute, so the labels and their styling never render there. */
.placeholder { display: none; }
/* Staging only: every placeholder is a solid brass badge, bold uppercase, dark text. #1A1205 on #B5832A is 5.7:1 in both
   light and dark mode because the badge carries its own ground and does not take theme tokens. */
[data-staging] .placeholder { display: inline-block; font-style: normal; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.82rem; line-height: 1.3; color: #1A1205; background: #B5832A; border: 2px solid #1A1205; border-radius: 6px; padding: 3px 9px; margin-right: 6px; }
[data-staging] .placeholder-banner { display: block; font-size: 1rem; padding: 12px 16px; margin: 0 0 20px; text-align: center; }
[data-staging] .pending-block { outline: 3px dashed #B5832A; outline-offset: -3px; background: rgba(181, 131, 42, 0.12); padding: 20px; }
/* Approved About copy: shown on production, hidden on staging, where the drafts replace it. */
.prod-only { display: none; }
html:not([data-staging]) .prod-only { display: block; }
[data-staging] .spec dl > div.pending { font-style: italic; outline: 2px dashed #B5832A; outline-offset: -2px; padding: 12px 10px; background: rgba(181, 131, 42, 0.10); }

/* ---------- About: founder story ---------- */
.founder .grid-2 { align-items: center; }
.founder-story { max-width: 62ch; margin-top: clamp(28px, 4vw, 48px); }
.founder-sub { margin-top: clamp(40px, 6vw, 72px); font-size: clamp(1.2rem, 1.05rem + 0.8vw, 1.6rem); }
.founder-gallery { margin-top: 20px; margin-bottom: clamp(36px, 5vw, 56px); }
.founder-gallery .photo { display: flex; flex-direction: column; }
.founder-gallery .photo img { flex: 1; min-height: 0; aspect-ratio: 4 / 3; }

/* About: Tegan's photo */
.founder-portrait { max-width: 520px; margin-inline: auto; }
.founder-portrait .photo img { aspect-ratio: 3 / 4; object-fit: cover; object-position: 60% 30%; }