/* Lead Tide site styles
   Palette: deep ocean night, teal tide, pale morning foam, one warm signal (ember) for urgency. */

:root {
  --ink-950: #061018;
  --ink-900: #0a1a26;
  --ink-800: #0f2638;
  --ink-700: #16364d;
  --ink-600: #22506b;

  --tide-700: #146b73;
  --tide-600: #1a858c;
  --tide-500: #22a3a6;
  --tide-300: #7fd5d2;
  --tide-100: #d6f0ee;

  --foam-50: #f6f9f9;
  --foam-100: #eef3f4;
  --foam-200: #dde6e8;
  --foam-300: #c3d0d4;

  --morning: #ffd9a3;

  --signal-600: #c7501b;
  --signal-500: #f0702f;
  --signal-300: #ffb088;

  --text-dark: #10212e;
  --text-mid: #4c6170;
  --text-light: #f3f7f8;
  --text-light-mid: #a9bcc6;

  --font-display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;

  --radius-sm: 6px;
  --radius: 12px;
  --radius-lg: 20px;

  --container: 1120px;
  --gutter: 20px;

  /* Layered elevation: a contact shadow, a short ambient one, a long soft one, and an inner top highlight. */
  --shadow-card:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 1px 1px rgba(6, 16, 24, 0.04),
    0 2px 4px rgba(6, 16, 24, 0.05),
    0 10px 20px -6px rgba(6, 16, 24, 0.10),
    0 28px 48px -18px rgba(6, 16, 24, 0.18);
  --shadow-card-hover:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 1px 1px rgba(6, 16, 24, 0.04),
    0 4px 8px rgba(6, 16, 24, 0.06),
    0 16px 28px -8px rgba(6, 16, 24, 0.14),
    0 40px 64px -20px rgba(6, 16, 24, 0.24);
  --shadow-dark:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 1px 1px rgba(0, 0, 0, 0.3),
    0 8px 16px -4px rgba(0, 0, 0, 0.35),
    0 32px 64px -20px rgba(0, 0, 0, 0.65);
  --shadow-glass:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    inset 0 -1px 0 rgba(0, 0, 0, 0.25),
    0 12px 32px -12px rgba(0, 0, 0, 0.6);

  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --header-h: 64px;
}

/* ---------- Reset and base ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  color: var(--text-dark);
  /* Night navy behind everything: the header and the overscroll areas match the hero and footer. */
  background: var(--ink-950);
  -webkit-font-smoothing: antialiased;
}
main { background: var(--foam-50); }

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.1rem, 2rem + 3.2vw, 4.2rem); font-weight: 800; letter-spacing: -0.03em; }
h2 { font-size: clamp(1.7rem, 1.4rem + 1.8vw, 2.6rem); }
h3 { font-size: 1.25rem; }

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

a { color: var(--tide-700); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--tide-600); }

:focus-visible {
  outline: 3px solid var(--signal-500);
  outline-offset: 3px;
  border-radius: 4px;
}

ul { padding-left: 1.2em; }

.nowrap { white-space: nowrap; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute;
  left: 12px; top: -60px;
  background: var(--signal-500);
  color: var(--ink-950);
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  z-index: 100;
  text-decoration: none;
}
.skip-link:focus { top: 12px; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.kicker {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tide-600);
  margin-bottom: 14px;
}
.band--night .kicker { color: var(--tide-300); }

.lede {
  font-size: 1.15rem;
  color: var(--text-mid);
  max-width: 58ch;
}
.band--night .lede { color: var(--text-light-mid); }

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
  padding: 14px 22px;
  min-height: 48px;
  border-radius: 10px;
  border: 2px solid transparent;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  transition: transform 160ms var(--ease-out), background-color 160ms ease, border-color 160ms ease, box-shadow 220ms var(--ease-out), color 160ms ease;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: translateY(1px) scale(0.985); transition-duration: 60ms; }

/* Primary: a lit, physical button. Top highlight, a contact shadow, and an ember glow that brightens on hover. */
.btn--primary {
  background: linear-gradient(180deg, #ff8a4a 0%, var(--signal-500) 55%, #e8631f 100%);
  color: var(--ink-950);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -1px 0 rgba(0, 0, 0, 0.12),
    0 1px 2px rgba(6, 16, 24, 0.3),
    0 8px 20px -8px rgba(240, 112, 47, 0.55);
}
.btn--primary:hover {
  background: linear-gradient(180deg, #ff9a62 0%, #ff7d3d 55%, #ef6a26 100%);
  color: var(--ink-950);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 0 rgba(0, 0, 0, 0.12),
    0 2px 4px rgba(6, 16, 24, 0.3),
    0 14px 32px -8px rgba(240, 112, 47, 0.75);
}
.btn--primary:active {
  transform: translateY(1px) scale(0.985);
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.18),
    0 1px 1px rgba(6, 16, 24, 0.3),
    0 4px 10px -6px rgba(240, 112, 47, 0.5);
}

.btn--ghost {
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-light);
  border-color: rgba(255, 255, 255, 0.26);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.btn--ghost:hover {
  border-color: rgba(127, 213, 210, 0.7);
  background: rgba(127, 213, 210, 0.08);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 10px 24px -12px rgba(34, 163, 166, 0.5);
}

.btn--dark {
  background: var(--ink-900);
  color: var(--text-light);
  box-shadow: var(--shadow-dark);
}
.btn--dark:hover { background: var(--ink-700); color: #fff; }

.btn--sm { padding: 0 16px; min-height: 40px; font-size: 0.92rem; }
.btn--lg { padding: 17px 28px; min-height: 56px; font-size: 1.08rem; }
@media (max-width: 480px) { .hero__actions .btn, .cta-final__actions .btn { width: 100%; } }

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(6, 16, 24, 0.72);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  transition: background-color 240ms ease, box-shadow 240ms ease, border-color 240ms ease;
}
.site-header.is-scrolled {
  background: rgba(6, 16, 24, 0.94);
  border-bottom-color: rgba(255, 255, 255, 0.09);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04), 0 10px 30px -18px rgba(0, 0, 0, 0.8);
}
.site-header .container {
  display: flex;
  align-items: center;
  gap: 12px;
  height: var(--header-h);
}

/* Logo lockup: 28px mark, wordmark a touch smaller so the mark and the caps share one optical weight. */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text-light);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.2rem;
  line-height: 1;
  letter-spacing: -0.02em;
  transition: color 160ms ease;
}
.logo:hover { color: #fff; }
.logo svg { width: 28px; height: 28px; flex: none; overflow: visible; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35)); }
.logo span { padding-top: 1px; }
.logo-mark { fill: currentColor; }

.site-nav {
  display: none;
  align-items: center;
  gap: 2px;
  margin-left: auto;
  margin-right: 8px;
}
.site-nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 12px;
  border-radius: 9px;
  color: rgba(246, 249, 249, 0.74);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1;
  transition: color 160ms ease, background-color 160ms ease;
}
.site-nav a::after {
  content: "";
  position: absolute;
  left: 12px; right: 12px; bottom: 4px;
  height: 2px;
  border-radius: 2px;
  background: var(--tide-300);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 200ms var(--ease-out), opacity 160ms ease;
  opacity: 0;
}
.site-nav a:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
.site-nav a:hover::after { transform: scaleX(1); opacity: 0.9; }
.site-nav a.is-active { color: #fff; }
.site-nav a.is-active::after { transform: scaleX(1); opacity: 1; }
.site-nav a:focus-visible { color: #fff; }

.site-header__cta { flex: none; }

/* Hamburger (mobile only) */
.nav-toggle {
  display: inline-grid;
  place-items: center;
  width: 44px; height: 44px;
  margin-right: -10px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text-light);
  cursor: pointer;
  flex: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 160ms ease;
}
.nav-toggle:hover, .nav-toggle[aria-expanded="true"] { background: rgba(255, 255, 255, 0.08); }
.nav-toggle__bars { display: block; width: 22px; height: 16px; position: relative; }
.nav-toggle__bars i {
  position: absolute; left: 0; right: 0;
  height: 2px; border-radius: 2px;
  background: currentColor;
  transition: transform 220ms var(--ease-out), opacity 120ms ease, top 220ms var(--ease-out);
}
.nav-toggle__bars i:nth-child(1) { top: 0; }
.nav-toggle__bars i:nth-child(2) { top: 7px; }
.nav-toggle__bars i:nth-child(3) { top: 14px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(1) { top: 7px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(2) { opacity: 0; transform: scaleX(0.4); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(3) { top: 7px; transform: rotate(-45deg); }

/* Mobile panel: always in the DOM, slides down under the bar, hidden from focus and pointer until open. */
@media (max-width: 759px) {
  .site-header .container { position: relative; }
  .site-header__cta { margin-left: auto; }
  .site-nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    position: absolute;
    left: 0; right: 0; top: 100%;
    margin: 0;
    padding: 6px 10px 12px;
    background: rgba(6, 16, 24, 0.97);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 24px 40px -20px rgba(0, 0, 0, 0.7);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity 200ms var(--ease-out), transform 240ms var(--ease-out), visibility 0s linear 240ms;
  }
  .site-nav.is-open {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    transition: opacity 200ms var(--ease-out), transform 240ms var(--ease-out), visibility 0s;
  }
  .site-nav a {
    height: auto;
    padding: 14px 12px;
    font-size: 1.08rem;
    border-radius: 10px;
    color: rgba(246, 249, 249, 0.88);
    border-bottom: 0;
  }
  .site-nav a::after { display: none; }
  .site-nav a:hover, .site-nav a:focus-visible, .site-nav a.is-active { background: rgba(255, 255, 255, 0.07); color: #fff; }
  .site-nav a.is-active { box-shadow: inset 3px 0 0 var(--tide-300); }
  /* Without script, show the links as a plain row under the logo instead of hiding them */
  .no-js .site-header .container { flex-wrap: wrap; height: auto; padding-top: 10px; padding-bottom: 10px; row-gap: 4px; }
  .no-js .site-nav { position: static; display: flex; flex-direction: row; flex-wrap: wrap; flex-basis: 100%; order: 3; gap: 4px; margin: 0; padding: 0; background: none; border: 0; box-shadow: none; visibility: visible; opacity: 1; transform: none; pointer-events: auto; }
  .no-js .site-nav a { font-size: 0.9rem; padding: 8px 10px; }
  .no-js .nav-toggle { display: none; }
}
@media (min-width: 760px) {
  .site-nav { display: flex; }
  .nav-toggle { display: none; }
  .site-header .container { gap: 16px; }
}
.band { scroll-margin-top: 72px; }

/* ---------- Bands (sections) ---------- */

/* Vertical rhythm: one band scale for the whole site. 40px on phones, 56px from 768px.
   Bands that start with a wave edge add roughly the edge height on top so the wave overlaps
   the previous band's colour rather than opening a gap. */
.band { position: relative; padding: 40px 0; }
.band--night {
  background:
    radial-gradient(800px 400px at 10% 0%, rgba(34, 163, 166, 0.10), transparent 60%),
    linear-gradient(180deg, var(--ink-900) 0%, #0b1d2a 100%);
  color: var(--text-light);
  isolation: isolate;
  overflow: hidden;
}
.band--night > .container { position: relative; z-index: 2; }
.band--night h1, .band--night h2, .band--night h3 { color: #fff; }
.band--night a { color: var(--tide-300); }
.band--deep { background: var(--ink-950); }
/* Pale bands carry a faint dot grid and one soft teal wash so the field reads as a surface, not a blank. */
.band--day, .band--day-alt {
  background-color: var(--foam-50);
  background-image:
    radial-gradient(720px 360px at 100% 0%, rgba(34, 163, 166, 0.075), transparent 70%),
    radial-gradient(circle at 1px 1px, rgba(16, 33, 46, 0.065) 1px, transparent 1.6px);
  background-size: auto, 22px 22px;
  background-position: 0 0, 0 0;
}
.band--day-alt {
  background-color: var(--foam-100);
  background-image:
    radial-gradient(720px 360px at 0% 100%, rgba(34, 163, 166, 0.075), transparent 70%),
    radial-gradient(circle at 1px 1px, rgba(16, 33, 46, 0.065) 1px, transparent 1.6px);
}

/* The ambient 3D mesh canvas (assets/tide.js) sits under everything in a night band. */
.tide-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  z-index: 0;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 88%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 88%, transparent 100%);
}

/* The tide edge: a wave line between night and morning. */
.tide-edge {
  position: absolute;
  left: 0; right: 0;
  top: -1px;
  height: 24px;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}
.tide-edge svg { width: 100%; height: 100%; }
.tide-edge path { fill: #0b1d2a; }
.tide-edge--deep path { fill: var(--ink-950); }
.tide-edge--to-night path { fill: var(--foam-100); }
.band--has-edge { padding-top: 60px; }

@media (min-width: 768px) {
  .band { padding: 56px 0; }
  .band--has-edge { padding-top: 88px; }
  .tide-edge { height: 36px; }
}

/* Two-column sections: heading column left, content right, tops aligned. The heading column
   stays in view while the longer column scrolls so neither half reads as empty. */
.split { display: grid; gap: 28px; align-items: start; }
.split__head { min-width: 0; }
.split__body { min-width: 0; }
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 64px; }
  .split__head { position: sticky; top: 96px; }
}

/* ---------- Hero ---------- */

.hero {
  background:
    radial-gradient(900px 500px at 85% -10%, rgba(34, 163, 166, 0.22), transparent 60%),
    radial-gradient(700px 400px at -10% 110%, rgba(34, 163, 166, 0.12), transparent 60%),
    linear-gradient(180deg, var(--ink-950) 0%, #07131d 60%, var(--ink-900) 100%);
  /* Sits under the translucent header so the bar shows the hero through it. */
  margin-top: calc(-1 * var(--header-h));
  padding-top: calc(var(--header-h) + 48px);
  padding-bottom: 72px;
  overflow: hidden;
  isolation: isolate;
}
.hero .container { position: relative; z-index: 2; }
.hero__kicker { color: var(--tide-300); margin-bottom: 18px; }
.hero h1 { max-width: 15ch; margin-bottom: 20px; }
.hero__sub {
  font-size: 1.15rem;
  color: var(--text-light-mid);
  max-width: 54ch;
  margin-bottom: 36px;
}
.hero__sub strong { color: var(--text-light); font-weight: 600; }

.hero__grid { display: grid; gap: 44px; }
@media (min-width: 900px) {
  .hero { padding-top: calc(var(--header-h) + 72px); padding-bottom: 96px; }
  .hero__grid { grid-template-columns: 1.15fr 0.85fr; align-items: center; gap: 48px; }
}

.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; }
/* Hairline rows: short items as muted text divided by a 1px foam rule. The row is pulled left
   by one item's padding and clipped, so the first item on each wrapped line shows no rule. */
.hero__fineprint,
.demo__meta {
  display: flex;
  flex-wrap: wrap;
  row-gap: 6px;
  margin-left: -14px;
  overflow: hidden;
  color: var(--text-light-mid);
}
.hero__fineprint span,
.demo__meta span {
  padding: 0 14px;
  margin-left: -1px;
  line-height: 1.3;
  border-left: 1px solid rgba(246, 249, 249, 0.18);
  white-space: nowrap;
}
.hero__fineprint { font-size: 0.92rem; }

/* ---- 3D stage: phone mockup behind, demo card floating in front ---- */

.hero__stage {
  position: relative;
  perspective: 1400px;
  perspective-origin: 60% 40%;
  --rx: 0deg;
  --ry: 0deg;
  --phone-w: 236px;
  --phone-h: 484px;
}
.hero__glow {
  position: absolute;
  inset: -10% -20%;
  background: radial-gradient(closest-side at 65% 40%, rgba(34, 163, 166, 0.28), rgba(34, 163, 166, 0.06) 55%, transparent 75%);
  filter: blur(10px);
  pointer-events: none;
  z-index: 0;
}

/* Mobile: phone centered, demo card tucked over its bottom edge. */
.phone {
  position: relative;
  z-index: 1;
  width: var(--phone-w);
  height: var(--phone-h);
  margin: 0 auto;
  transform-style: preserve-3d;
  transform: rotateY(calc(-14deg + var(--ry))) rotateX(calc(6deg + var(--rx))) rotateZ(-1deg);
  transition: transform 140ms linear;
  will-change: transform;
}
.phone__float { width: 100%; height: 100%; transform-style: preserve-3d; }
@media (prefers-reduced-motion: no-preference) {
  .phone__float { animation: phone-float 7s ease-in-out infinite; }
}
@keyframes phone-float {
  0%, 100% { transform: translateY(0) translateZ(0); }
  50% { transform: translateY(-9px) translateZ(6px); }
}
.phone__frame {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 40px;
  padding: 9px;
  background: linear-gradient(160deg, #1c2f3f 0%, #0b1824 45%, #05101a 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 rgba(0, 0, 0, 0.6),
    inset 1px 0 0 rgba(255, 255, 255, 0.06),
    0 2px 2px rgba(0, 0, 0, 0.3),
    0 12px 24px -8px rgba(0, 0, 0, 0.5),
    0 48px 80px -24px rgba(0, 0, 0, 0.8),
    -24px 40px 80px -30px rgba(34, 163, 166, 0.35);
}
/* Side buttons */
.phone__frame::before, .phone__frame::after {
  content: "";
  position: absolute;
  width: 3px;
  border-radius: 2px;
  background: #223a4d;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.phone__frame::before { right: -3px; top: 120px; height: 58px; }
.phone__frame::after { left: -3px; top: 96px; height: 34px; }
.phone__screen {
  position: relative;
  height: 100%;
  border-radius: 32px;
  overflow: hidden;
  padding: 14px 16px 16px;
  background:
    radial-gradient(360px 240px at 50% 0%, rgba(34, 163, 166, 0.28), transparent 70%),
    linear-gradient(180deg, #0e2232 0%, var(--ink-900) 50%, #071420 100%);
  color: var(--text-light);
  font-size: 12px;
  line-height: 1.4;
  display: flex;
  flex-direction: column;
}
/* Glass reflection across the screen */
.phone__screen::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(112deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.03) 28%, transparent 45%);
  pointer-events: none;
}
.phone__status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  padding: 0 4px;
}
.phone__signal { display: inline-flex; align-items: flex-end; gap: 2px; height: 10px; }
.phone__signal i { width: 3px; background: #fff; border-radius: 1px; }
.phone__signal i:nth-child(1) { height: 4px; }
.phone__signal i:nth-child(2) { height: 6px; }
.phone__signal i:nth-child(3) { height: 8px; }
.phone__signal i:nth-child(4) { height: 10px; }
.phone__example {
  position: absolute;
  top: 34px; right: 16px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--signal-300);
  border: 1px solid rgba(255, 176, 136, 0.45);
  padding: 2px 6px;
  border-radius: 4px;
}
.phone__call {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 22px 0 14px;
}
.phone__ring {
  position: relative;
  width: 56px; height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(160deg, var(--tide-500), var(--tide-700));
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 10px 24px -8px rgba(34, 163, 166, 0.8);
  margin-bottom: 12px;
}
.phone__ring svg { width: 24px; height: 24px; position: relative; z-index: 1; }
.phone__ring i {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(127, 213, 210, 0.7);
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .phone__ring i { animation: ring-out 2.4s ease-out infinite; }
  .phone__ring i:nth-child(2) { animation-delay: 1.2s; }
}
@keyframes ring-out {
  0% { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(2.1); opacity: 0; }
}
.phone__caller {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.02em;
  color: #fff;
}
.phone__from { color: var(--text-light-mid); font-size: 11px; margin-top: 2px; }

.phone__seq { display: flex; flex-direction: column; gap: 8px; }
/* Dim call controls at the foot of the screen (the demo card sits over this part on desktop) */
.phone__controls {
  margin-top: auto;
  display: flex;
  justify-content: center;
  gap: 18px;
  padding-top: 10px;
}
.phone__controls i {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.phone__controls i:nth-child(2) { background: rgba(240, 112, 47, 0.75); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 6px 14px -6px rgba(240, 112, 47, 0.8); }
.phone__chip {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(127, 213, 210, 0.14);
  color: var(--tide-300);
  border: 1px solid rgba(127, 213, 210, 0.3);
}
.phone__chip i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.phone__chip--urgent {
  align-self: stretch;
  justify-content: center;
  white-space: nowrap;
  background: linear-gradient(180deg, rgba(240, 112, 47, 0.95), rgba(199, 80, 27, 0.95));
  color: #fff;
  border-color: rgba(255, 176, 136, 0.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 8px 20px -8px rgba(240, 112, 47, 0.8);
  padding: 8px 10px;
  font-size: 10.5px;
}
.phone__bubble {
  margin: 0;
  max-width: 88%;
  padding: 8px 10px;
  border-radius: 12px;
  font-size: 11.5px;
  line-height: 1.38;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 4px 12px -6px rgba(0, 0, 0, 0.5);
}
.phone__bubble--ai {
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.08);
  border-bottom-left-radius: 4px;
  color: var(--text-light);
}
.phone__bubble--caller {
  align-self: flex-end;
  background: linear-gradient(180deg, var(--tide-600), var(--tide-700));
  border-bottom-right-radius: 4px;
  color: #fff;
}

/* The screen plays a 14s loop: answered, AI greets, caller speaks, emergency rings through. Static when motion is reduced. */
@media (prefers-reduced-motion: no-preference) {
  .phone__step { animation: phone-step 14s linear infinite both; }
  .phone__step--1 { animation-delay: -13s; }
  .phone__step--2 { animation-delay: -11.6s; }
  .phone__step--3 { animation-delay: -9.2s; }
  .phone__step--4 { animation-delay: -7s; }
}
@keyframes phone-step {
  0%   { opacity: 0; transform: translateY(8px) scale(0.98); }
  3%   { opacity: 1; transform: translateY(0) scale(1); }
  92%  { opacity: 1; transform: translateY(0) scale(1); }
  96%  { opacity: 0; transform: translateY(-4px) scale(0.98); }
  100% { opacity: 0; transform: translateY(8px) scale(0.98); }
}

/* Demo card: a glass panel floating in front of the phone. */
.demo {
  position: relative;
  z-index: 2;
  margin-top: -40px;
  background: linear-gradient(160deg, rgba(22, 54, 77, 0.92), rgba(10, 26, 38, 0.96));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(127, 213, 210, 0.26);
  border-radius: var(--radius-lg);
  padding: 26px 24px 24px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3),
    0 2px 2px rgba(0, 0, 0, 0.25),
    0 20px 40px -16px rgba(0, 0, 0, 0.7),
    0 48px 96px -32px rgba(0, 0, 0, 0.8);
  transform: rotateY(calc(var(--ry) * 0.45)) rotateX(calc(var(--rx) * 0.45)) translateZ(0);
  transition: transform 140ms linear;
  overflow: hidden;
}
.demo::before {
  content: "";
  position: absolute;
  left: 24px; top: 0;
  width: 56px; height: 3px;
  background: var(--signal-500);
  border-radius: 0 0 3px 3px;
  box-shadow: 0 0 14px rgba(240, 112, 47, 0.8);
}
/* Soft light sweep along the top edge */
.demo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.07), transparent 40%);
  pointer-events: none;
}
.demo > * { position: relative; z-index: 1; }
.demo__label {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tide-300);
  margin: 0 0 8px;
}
.demo__number {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.9rem, 1.4rem + 2.6vw, 2.5rem);
  letter-spacing: -0.02em;
  color: #fff;
  text-decoration: none;
  margin: 0 0 10px;
  user-select: all;
  -webkit-user-select: all;
  text-shadow: 0 2px 12px rgba(127, 213, 210, 0.25);
  transition: color 160ms ease, text-shadow 160ms ease;
}
.demo__number:hover { color: var(--tide-300); text-shadow: 0 2px 20px rgba(127, 213, 210, 0.55); }
.demo__hint {
  color: var(--text-light-mid);
  margin: 0 0 18px;
  font-size: 1.02rem;
}
.demo__hint em { color: var(--morning); font-style: normal; font-weight: 600; }
.demo__meta {
  font-size: 0.86rem;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin-right: -14px;
}
.demo__meta span { padding: 0 12px; }

@media (min-width: 900px) {
  .hero__stage {
    height: 672px;
    --phone-w: 250px;
    --phone-h: 512px;
  }
  .phone {
    position: absolute;
    right: 8px; top: 0;
    margin: 0;
  }
  .demo {
    position: absolute;
    left: 0; bottom: 0;
    width: min(372px, 86%);
    margin: 0;
    padding: 22px 22px 20px;
    transform: rotateY(calc(var(--ry) * 0.45)) rotateX(calc(var(--rx) * 0.45)) translateZ(60px);
  }
}
@media (min-width: 1100px) {
  .hero__stage { --phone-w: 262px; --phone-h: 536px; height: 696px; }
  .phone { right: 0; }
}
@media (max-width: 899px) {
  .hero__stage { padding-top: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .phone, .demo { transition: none; }
  .phone { transform: rotateY(-14deg) rotateX(6deg) rotateZ(-1deg); }
  .demo { transform: none; }
}

/* Hero tide: three wave layers at different depths, drifting at different speeds. */
.hero__tide {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 70px;
  pointer-events: none;
  z-index: 1;
}
.hero__tide svg { position: absolute; left: 0; bottom: 0; width: 200%; height: 100%; }
.hero__tide path { fill: none; stroke-width: 1.5; }
.hero__tide-far { opacity: 0.28; filter: blur(0.6px); }
.hero__tide-far path { stroke: var(--tide-700); stroke-width: 2; }
.hero__tide-mid { opacity: 0.55; }
.hero__tide-mid path { stroke: var(--tide-500); }
.hero__tide-near { opacity: 0.4; }
.hero__tide-near path { stroke: var(--tide-300); }
@media (prefers-reduced-motion: no-preference) {
  .hero__tide-far { animation: tide-drift 64s linear infinite; }
  .hero__tide-mid { animation: tide-drift 40s linear infinite; }
  .hero__tide-near { animation: tide-drift 26s linear infinite reverse; }
}
@keyframes tide-drift {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------- Audio players ---------- */

.samples { display: grid; gap: 16px; margin-top: 28px; }
@media (min-width: 720px) { .samples { grid-template-columns: 1fr 1fr; gap: 20px; } }

.player {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px 16px;
  align-items: center;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 16px;
  padding: 18px 18px 16px;
  box-shadow: var(--shadow-glass);
  transition: transform 240ms var(--ease-out), box-shadow 240ms var(--ease-out), border-color 240ms ease;
}
.player::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.06), transparent 45%);
  pointer-events: none;
}
.player--playing {
  border-color: rgba(127, 213, 210, 0.35);
  box-shadow: var(--shadow-glass), 0 0 0 1px rgba(127, 213, 210, 0.12), 0 24px 48px -20px rgba(34, 163, 166, 0.45);
}
@media (hover: hover) {
  .player:hover { transform: translateY(-2px); border-color: rgba(255, 255, 255, 0.14); }
}
.player audio { display: none; }
.no-js .player audio { display: block; grid-column: 1 / -1; width: 100%; }
.no-js .player__btn, .no-js .player__wave, .no-js .player__time { display: none; }

.player__btn {
  position: relative;
  width: 54px; height: 54px;
  border-radius: 50%;
  border: 0;
  background: linear-gradient(180deg, #3cc0c2 0%, var(--tide-500) 50%, var(--tide-600) 100%);
  color: var(--ink-950);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -2px 0 rgba(0, 0, 0, 0.2),
    0 2px 2px rgba(0, 0, 0, 0.3),
    0 10px 20px -8px rgba(34, 163, 166, 0.8);
  transition: background 160ms ease, transform 140ms var(--ease-out), box-shadow 160ms var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.player__btn:hover {
  background: linear-gradient(180deg, #8fdedb 0%, var(--tide-300) 50%, var(--tide-500) 100%);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -2px 0 rgba(0, 0, 0, 0.18),
    0 3px 4px rgba(0, 0, 0, 0.3),
    0 16px 28px -10px rgba(34, 163, 166, 0.9);
}
.player__btn:active, .player--playing .player__btn {
  transform: translateY(1px) scale(0.97);
  box-shadow:
    inset 0 3px 6px rgba(0, 0, 0, 0.3),
    inset 0 -1px 0 rgba(255, 255, 255, 0.15),
    0 1px 1px rgba(0, 0, 0, 0.3),
    0 6px 14px -8px rgba(34, 163, 166, 0.6);
}
.player__btn svg { width: 20px; height: 20px; }
.player__btn .icon-pause { display: none; }
.player--playing .player__btn .icon-play { display: none; }
.player--playing .player__btn .icon-pause { display: block; }
.player__btn:disabled { background: var(--ink-600); color: var(--text-light-mid); cursor: not-allowed; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); transform: none; }

.player__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; }
.player__title { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: #fff; }
.player__tag {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tide-300);
  white-space: nowrap;
}
.player__tag--signal { color: var(--signal-300); }

.player__wave {
  grid-column: 1 / -1;
  position: relative;
  height: 44px;
}
.player__bars { position: absolute; inset: 0; display: flex; align-items: center; gap: 3px; }
.player__bars span {
  flex: 1;
  background: var(--ink-600);
  border-radius: 2px;
  min-width: 2px;
}
.player__bars--fill { width: 0%; overflow: hidden; }
.player__bars--fill span { background: var(--tide-300); box-shadow: 0 0 6px rgba(127, 213, 210, 0.6); }
.player__bars--fill { display: flex; }
.player__bars--fill span { flex: none; }

.player__seek {
  position: absolute;
  inset: 0;
  width: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.player__seek:focus-visible { opacity: 1; }

.player__time {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  font-size: 0.84rem;
  color: var(--text-light-mid);
  font-variant-numeric: tabular-nums;
}
.player__status {
  grid-column: 1 / -1;
  font-size: 0.92rem;
  color: var(--text-light-mid);
  display: none;
  margin: 0;
  padding-top: 12px;
  border-top: 1px dashed rgba(255, 255, 255, 0.12);
}
.player__status a { color: var(--morning); font-weight: 600; }
.player--missing .player__status { display: block; }
.player--missing .player__wave, .player--missing .player__time { display: none; }
.player--missing .player__btn { background: var(--ink-700); color: var(--text-light-mid); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); }
.player--missing { border-style: dashed; border-color: rgba(255, 255, 255, 0.16); }

/* ---------- How it works ---------- */

.steps {
  display: grid;
  gap: 20px;
  margin-top: 32px;
  counter-reset: step;
}
@media (min-width: 800px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 24px; } }

.step {
  position: relative;
  padding: 22px 22px 22px;
  background: #fff;
  border: 1px solid var(--foam-200);
  border-top: 0;
  border-radius: 14px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: transform 260ms var(--ease-out), box-shadow 260ms var(--ease-out);
}
.step::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 4px;
  background: var(--step-accent, var(--foam-300));
  box-shadow: 0 1px 10px -2px var(--step-accent, transparent);
}
@media (hover: hover) {
  .step:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); }
}
.step__time {
  display: inline-block;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 2px 6px -2px rgba(6, 16, 24, 0.4);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--ink-900);
  color: var(--text-light);
  margin-bottom: 14px;
}
.step--2 .step__time { background: var(--signal-500); color: var(--ink-950); }
.step--3 .step__time { background: var(--morning); color: var(--ink-950); }
.step--1 { --step-accent: var(--ink-900); }
.step--2 { --step-accent: var(--signal-500); }
.step--3 { --step-accent: var(--morning); }
.step h3 { font-size: 1.3rem; }
.step h3::before {
  counter-increment: step;
  content: counter(step) ". ";
  color: var(--tide-600);
}
.step p { color: var(--text-mid); }

/* Night to morning line: a recessed track, a gradient that fills as you scroll, a lit marker. */
.nightline {
  --p: 1;
  margin-top: 40px;
  position: relative;
  padding: 10px 0;
}
.nightline__track {
  position: relative;
  height: 14px;
  border-radius: 8px;
  background: linear-gradient(180deg, #0a1a26 0%, #16364d 100%);
  box-shadow:
    inset 0 2px 5px rgba(0, 0, 0, 0.55),
    inset 0 -1px 0 rgba(255, 255, 255, 0.08),
    0 1px 0 rgba(255, 255, 255, 0.9),
    0 6px 14px -8px rgba(6, 16, 24, 0.5);
}
.nightline__fill {
  position: absolute;
  inset: 3px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--ink-700) 0%, var(--ink-600) 30%, var(--signal-500) 50%, var(--tide-500) 72%, var(--morning) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 0 12px rgba(240, 112, 47, 0.25);
  transform: scaleX(var(--p));
  transform-origin: left center;
  transition: transform 120ms linear;
}
.nightline__tick {
  position: absolute;
  top: 50%;
  width: 6px; height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 0 0 1px rgba(6, 16, 24, 0.5);
}
.nightline__tick--1 { left: 0.6%; }
.nightline__tick--2 { left: 50%; }
.nightline__tick--3 { left: 99.4%; }
.nightline__marker {
  position: absolute;
  top: 50%;
  left: calc(var(--p) * 100%);
  width: 24px; height: 24px;
  margin: -12px 0 0 -12px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff 0%, var(--morning) 45%, var(--signal-500) 100%);
  box-shadow:
    inset 0 -2px 3px rgba(199, 80, 27, 0.5),
    0 0 0 3px rgba(255, 255, 255, 0.9),
    0 2px 4px rgba(6, 16, 24, 0.4),
    0 0 24px 4px rgba(240, 112, 47, 0.55);
  transition: left 120ms linear;
}
@media (prefers-reduced-motion: no-preference) {
  .nightline__marker::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid rgba(240, 112, 47, 0.6);
    animation: ring-out 2s ease-out infinite;
  }
}
.nightline__labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.82rem;
  color: var(--text-mid);
  margin-top: 10px;
  font-variant-numeric: tabular-nums;
}
.nightline__labels b { color: var(--text-dark); font-weight: 600; }
.nightline__labels span { flex: 1; }
.nightline__labels span:nth-child(2) { text-align: center; }
.nightline__labels span:last-child { text-align: right; }
@media (max-width: 599px) {
  .nightline__labels { font-size: 0.76rem; gap: 8px; }
  .nightline__labels b { display: block; }
}

/* ---------- Email card ---------- */

.summary-grid { display: grid; gap: 28px; align-items: start; }
@media (min-width: 900px) {
  .summary-grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 64px; }
  .summary-grid__text { position: sticky; top: 96px; }
}
/* What the email holds, pulled from the step and signature copy, so the text column fills its row. */
.summary-list { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 8px; }
.summary-list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid var(--foam-200);
  box-shadow: 0 1px 1px rgba(6, 16, 24, 0.04), 0 4px 10px -6px rgba(6, 16, 24, 0.12);
  font-size: 0.95rem;
  color: var(--text-dark);
}
.summary-list li svg { width: 18px; height: 18px; flex: none; color: var(--tide-600); margin-top: 3px; }
/* While the card loops (script adds .is-animated), items start muted and light up as their part of the email appears. */
.summary-grid.is-animated .summary-list li {
  color: var(--text-mid);
  transition: color 320ms ease, border-color 320ms ease, box-shadow 320ms ease;
}
.summary-grid.is-animated .summary-list li svg {
  color: var(--foam-300);
  transform: scale(0.8);
  transition: color 320ms ease, transform 360ms var(--ease-out);
}
.summary-grid.is-animated .summary-list li.is-lit {
  color: var(--text-dark);
  border-color: rgba(34, 163, 166, 0.4);
  box-shadow: 0 1px 1px rgba(6, 16, 24, 0.04), 0 4px 10px -6px rgba(6, 16, 24, 0.12), 0 0 0 3px rgba(34, 163, 166, 0.08);
}
.summary-grid.is-animated .summary-list li.is-lit svg { color: var(--tide-600); transform: none; }

.email {
  position: relative;
  background: #fff;
  border: 1px solid var(--foam-200);
  border-radius: 14px;
  box-shadow: var(--shadow-card), 0 60px 90px -40px rgba(6, 16, 24, 0.3);
  overflow: hidden;
  transition: transform 500ms var(--ease-out), box-shadow 500ms var(--ease-out);
}
@media (min-width: 900px) {
  .summary-grid { perspective: 1600px; }
  .email { transform: rotateY(-6deg) rotateX(2deg); transform-origin: left center; }
  @media (hover: hover) {
    .email:hover { transform: rotateY(0) rotateX(0) translateY(-2px); box-shadow: var(--shadow-card-hover), 0 70px 100px -40px rgba(6, 16, 24, 0.35); }
  }
}
@media (prefers-reduced-motion: reduce) { .email { transition: none; } }
.email__example {
  position: absolute;
  top: 14px; right: 14px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--signal-600);
  background: #fff3ea;
  border: 1px solid #ffd7c0;
  padding: 4px 8px;
  border-radius: 4px;
}
.email__head {
  padding: 20px 22px 16px;
  border-bottom: 1px solid var(--foam-200);
  font-size: 0.9rem;
  color: var(--text-mid);
}
.email__head dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; }
.email__head dt { font-weight: 600; color: var(--text-dark); }
.email__head dd { margin: 0; overflow-wrap: anywhere; }
.email__subject {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--text-dark);
  margin-top: 12px;
  padding-right: 90px;
}
.email__body { padding: 20px 22px 24px; font-size: 0.98rem; }
.email__body p { margin-bottom: 14px; }
.email__list { list-style: none; padding: 0; margin: 0 0 16px; }
.email__list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  padding: 12px 0;
  border-top: 1px solid var(--foam-200);
}
.email__list li:first-child { border-top: 0; padding-top: 0; }
.email__badge {
  align-self: start;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 7px;
  border-radius: 4px;
  background: var(--tide-100);
  color: var(--tide-700);
  margin-top: 2px;
  white-space: nowrap;
}
.email__badge--urgent { background: #fff3ea; color: var(--signal-600); }
.email__meta { color: var(--text-mid); font-size: 0.9rem; }
.email__sig { color: var(--text-mid); font-size: 0.9rem; }

/* The loop (script adds .email--play). Hidden parts keep their place in the layout: only opacity and
   a small translate change, so the card is always its final height. Under reduced motion the global
   rule zeroes these transitions and the script never adds the class, so the finished email shows. */
.email--play .email__step {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 420ms var(--ease-out), transform 520ms var(--ease-out);
}
.email--play .email__step.is-on { opacity: 1; transform: none; }
.email--play.email--out .email__step { opacity: 0; transform: none; transition: opacity 520ms ease; }
.email--play.email--reset .email__step { transition: none; }

/* ---------- Will / Won't ---------- */

.rules { display: grid; gap: 20px; margin-top: 32px; }
@media (min-width: 760px) { .rules { grid-template-columns: 1fr 1fr; gap: 24px; } }

.rule-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--foam-200);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: transform 260ms var(--ease-out), box-shadow 260ms var(--ease-out);
}
@media (hover: hover) {
  .rule-list:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); }
}
.rule-list__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  padding: 18px 22px;
  border-bottom: 1px solid var(--foam-200);
  display: flex;
  align-items: center;
  gap: 10px;
}
/* Colour accent as a 4px bar along the card's top edge, matching the step cards, instead of a glowing dot. */
.rule-list__title { box-shadow: inset 0 4px 0 var(--tide-500); padding-top: 22px; }
.rule-list--wont .rule-list__title { box-shadow: inset 0 4px 0 var(--signal-500); }
.rule-list li { padding: 13px 22px; border-top: 1px solid var(--foam-100); display: flex; gap: 12px; align-items: flex-start; }
.rule-list li svg { width: 20px; height: 20px; flex: none; margin-top: 3px; }
.rule-list--will li svg { color: var(--tide-600); }
.rule-list--wont li svg { color: var(--signal-600); }

/* ---------- Reviews ---------- */

.band--reviews {
  background:
    radial-gradient(900px 420px at 90% 100%, rgba(34, 163, 166, 0.14), transparent 60%),
    radial-gradient(700px 360px at 0% 30%, rgba(34, 163, 166, 0.08), transparent 60%),
    linear-gradient(180deg, var(--ink-950) 0%, var(--ink-900) 100%);
}

/* One lead quote, two supporting cards. Stacked on small screens, lead left and the pair stacked right from 860px. */
.reviews { margin: 28px 0 0; display: grid; gap: 16px; }
@media (min-width: 860px) {
  .reviews {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 20px;
  }
  .review--lead { grid-row: 1 / 3; }
}

.review {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 24px 22px 20px;
  border-radius: 18px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: var(--shadow-glass);
  overflow: hidden;
  transition: transform 260ms var(--ease-out), border-color 260ms ease, box-shadow 260ms var(--ease-out);
}
/* Soft light along the top edge, like the other glass panels */
.review::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.06), transparent 45%);
  pointer-events: none;
}
/* Large opening quote mark, set behind the text */
.review::before {
  content: "\201C";
  position: absolute;
  left: 16px; top: 8px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 6.5rem;
  line-height: 1;
  color: rgba(127, 213, 210, 0.14);
  pointer-events: none;
}
.review > * { position: relative; z-index: 1; }
@media (hover: hover) {
  .review:hover {
    transform: translateY(-3px);
    border-color: rgba(127, 213, 210, 0.32);
    box-shadow: var(--shadow-glass), 0 24px 48px -20px rgba(34, 163, 166, 0.35);
  }
}

.review__rating {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}
.review__stars { width: 108px; height: 20px; color: var(--morning); filter: drop-shadow(0 0 6px rgba(255, 217, 163, 0.35)); }
.review__rating b {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--morning);
  letter-spacing: -0.01em;
  padding-top: 1px;
}
.review__quote { margin: 0 0 20px; }
.review__quote p { color: var(--text-light); font-size: 1.02rem; line-height: 1.55; }
.review__meta {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 14px;
  font-size: 0.86rem;
  color: var(--text-light-mid);
}
.review__tag {
  display: inline-block;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(127, 213, 210, 0.1);
  border: 1px solid rgba(127, 213, 210, 0.26);
  color: var(--tide-300);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  line-height: 1.3;
}
.review__meta time { font-variant-numeric: tabular-nums; white-space: nowrap; margin-left: auto; }

/* The lead quote: bigger type, a brighter panel, a teal edge glow. */
.review--lead {
  padding: 30px 26px 24px;
  background: linear-gradient(160deg, rgba(34, 163, 166, 0.16), rgba(255, 255, 255, 0.03) 60%, rgba(255, 255, 255, 0.02));
  border-color: rgba(127, 213, 210, 0.26);
  box-shadow: var(--shadow-glass), 0 30px 60px -30px rgba(34, 163, 166, 0.45);
}
.review--lead::before { font-size: 9rem; left: 18px; top: 6px; color: rgba(127, 213, 210, 0.16); }
.review--lead .review__rating { margin-bottom: 26px; }
.review--lead .review__quote { margin: auto 0; padding: 6px 0 28px; }
.review--lead .review__quote p {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.3rem, 1rem + 1.3vw, 1.95rem);
  line-height: 1.28;
  letter-spacing: -0.015em;
  color: #fff;
  text-wrap: pretty;
}
@media (min-width: 860px) {
  .review--lead { padding: 38px 36px 30px; }
}

/* Proof bar: who, the numbers, and the link to the source. */
.reviews__proof {
  margin-top: 24px;
  display: grid;
  gap: 20px;
  padding: 22px 22px;
  border-radius: 18px;
  background: linear-gradient(160deg, rgba(22, 54, 77, 0.6), rgba(10, 26, 38, 0.7));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: var(--shadow-glass);
  position: relative;
  overflow: hidden;
}
.reviews__proof::before {
  content: "";
  position: absolute;
  left: 22px; top: 0;
  width: 56px; height: 3px;
  background: var(--signal-500);
  border-radius: 0 0 3px 3px;
  box-shadow: 0 0 14px rgba(240, 112, 47, 0.8);
}
.reviews__proof > * { position: relative; }

/* ---------- Credential badge (About page founder block, and the reviews proof bar) ---------- */

/* A compact pill: a small hexagon mark in the signal colour, the credential name over its dates, and a Verify link. */
.cred {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  padding: 8px 12px 8px 10px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--foam-200);
  box-shadow: 0 1px 1px rgba(6, 16, 24, 0.04), 0 4px 10px -6px rgba(6, 16, 24, 0.14);
  color: var(--text-dark);
  line-height: 1.25;
}
.cred__mark {
  width: 26px; height: 26px;
  flex: none;
  color: var(--signal-500);
  filter: drop-shadow(0 2px 6px rgba(240, 112, 47, 0.45));
}
.cred__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cred__text b { font-family: var(--font-display); font-weight: 700; font-size: 0.92rem; }
.cred__text span { font-size: 0.76rem; color: var(--text-mid); }
.cred__verify {
  flex: none;
  margin-left: 4px;
  padding: 4px 9px;
  border-radius: 7px;
  border: 1px solid var(--foam-200);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--tide-700);
  text-decoration: none;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}
.cred__verify:hover { background: rgba(34, 163, 166, 0.08); border-color: rgba(34, 163, 166, 0.4); color: var(--tide-700); }
.cred--sm { gap: 8px; padding: 5px 8px 5px 7px; }
.cred--sm .cred__mark { width: 22px; height: 22px; }
.cred--sm .cred__text b { font-size: 0.84rem; }
.cred--sm .cred__text span { font-size: 0.7rem; }
.cred--sm .cred__verify { padding: 3px 7px; font-size: 0.7rem; }
/* On the night proof bar: glass instead of white. */
.reviews__proof .cred {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  color: #fff;
}
.reviews__proof .cred__text span { color: var(--text-light-mid); }
.reviews__proof .cred__verify { color: var(--tide-300); border-color: rgba(127, 213, 210, 0.3); }
.reviews__proof .cred__verify:hover { background: rgba(127, 213, 210, 0.1); border-color: rgba(127, 213, 210, 0.6); color: #fff; }
@media (max-width: 379px) {
  .cred { flex-wrap: wrap; border-radius: 16px; }
  .cred__verify { margin-left: 32px; }
}

.reviews__stats {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.reviews__stats > div {
  display: flex;
  flex-direction: column-reverse;
  gap: 2px;
  padding-left: 14px;
  border-left: 2px solid rgba(127, 213, 210, 0.35);
  min-width: 0;
}
.reviews__stats dt {
  white-space: nowrap;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-light-mid);
}
.reviews__stats dd {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.55rem;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #fff;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-shadow: 0 2px 16px rgba(127, 213, 210, 0.2);
}
.reviews__link { width: 100%; }
.reviews__link::after {
  content: "";
  width: 7px; height: 7px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  margin-left: 2px;
  opacity: 0.8;
}
@media (max-width: 419px) {
  .reviews__stats { grid-template-columns: 1fr 1fr; }
  .reviews__stats > div:last-child { grid-column: 1 / -1; }
  .reviews__stats dd { font-size: 1.4rem; }
}
@media (min-width: 760px) {
  /* One row when it fits; the link drops to a second row, right-aligned, when it does not. */
  .reviews__proof {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px 24px;
    padding: 22px 24px;
  }
  .reviews__proof .cred { flex: none; }
  .reviews__stats { display: flex; flex: 1 1 auto; gap: 14px; }
  .reviews__stats > div { padding-left: 10px; }
  .reviews__link { width: auto; flex: none; margin-left: auto; padding: 0 16px; min-height: 42px; font-size: 0.95rem; }
}
.reviews__note {
  margin: 14px 0 0;
  font-size: 0.86rem;
  color: var(--text-light-mid);
  opacity: 0.85;
}

/* ---------- Avatar (About page founder block) ---------- */

.avatar {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  overflow: hidden;
  background: linear-gradient(160deg, var(--ink-700), var(--ink-950));
}
.avatar img { width: 100%; height: 100%; object-fit: cover; position: relative; z-index: 1; }
.avatar__initials {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--tide-300);
}
.avatar--sm {
  width: 52px; height: 52px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(127, 213, 210, 0.45), 0 0 0 5px rgba(10, 26, 38, 0.9), 0 8px 18px -8px rgba(0, 0, 0, 0.7);
}
.avatar--sm .avatar__initials { font-size: 1.3rem; }

/* ---------- Pricing ---------- */

.pricing { display: grid; gap: 28px; align-items: start; }
@media (min-width: 900px) { .pricing { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 64px; } }

.price-card {
  background: linear-gradient(160deg, var(--ink-800) 0%, var(--ink-900) 55%, var(--ink-950) 100%);
  color: var(--text-light);
  border: 1px solid rgba(127, 213, 210, 0.18);
  border-radius: var(--radius-lg);
  padding: 30px 26px 28px;
  box-shadow: var(--shadow-dark), 0 60px 100px -40px rgba(6, 16, 24, 0.6);
  position: relative;
  overflow: hidden;
}
.price-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(118deg, rgba(255, 255, 255, 0.08), transparent 38%);
  pointer-events: none;
}
.price-card::after {
  content: "";
  position: absolute;
  right: -60px; bottom: -80px;
  width: 220px; height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(34, 163, 166, 0.35), transparent 70%);
  pointer-events: none;
}
.price-card h3 { color: #fff; font-size: 1.1rem; margin-bottom: 20px; }
.price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.price-row__label { color: var(--text-light-mid); }
.price-row__value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.9rem;
  letter-spacing: -0.02em;
  color: #fff;
  white-space: nowrap;
  text-shadow: 0 2px 16px rgba(127, 213, 210, 0.2);
}
.price-row__value small { font-size: 0.95rem; font-weight: 600; color: var(--text-light-mid); margin-left: 3px; }
.price-card__note {
  margin: 10px 0 22px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  color: var(--text-light-mid);
  font-size: 0.92rem;
}
.price-card__note b { color: var(--text-light); }
.price-card .btn { width: 100%; }
.price-card__trial {
  margin-top: 12px;
  text-align: center;
  font-size: 0.88rem;
  color: var(--text-light-mid);
}

.included { list-style: none; padding: 0; margin: 24px 0 0; }
.included li { padding: 10px 0; border-top: 1px solid var(--foam-200); display: flex; gap: 12px; }
.included li svg { width: 20px; height: 20px; flex: none; color: var(--tide-600); margin-top: 3px; }

/* ---------- FAQ ---------- */

.faq { margin-top: 0; }
.faq details {
  border-top: 1px solid var(--foam-300);
}
.faq details:last-child { border-bottom: 1px solid var(--foam-300); }
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 56px 18px 12px;
  margin: 0 -12px;
  border-radius: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  position: relative;
  transition: background-color 160ms ease, color 160ms ease;
  -webkit-tap-highlight-color: transparent;
}
.faq summary::-webkit-details-marker { display: none; }
/* Chevron in a small raised disc that turns when open */
.faq summary::before {
  content: "";
  position: absolute;
  right: 12px; top: 50%;
  width: 30px; height: 30px;
  margin-top: -15px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--foam-200);
  box-shadow: 0 1px 2px rgba(6, 16, 24, 0.08), 0 4px 10px -4px rgba(6, 16, 24, 0.2);
  transition: background-color 200ms ease, border-color 200ms ease, transform 200ms var(--ease-out);
}
.faq summary::after {
  content: "";
  position: absolute;
  right: 23px; top: 50%;
  width: 8px; height: 8px;
  margin-top: -6px;
  border-right: 2px solid var(--tide-600);
  border-bottom: 2px solid var(--tide-600);
  transform: rotate(45deg);
  transition: transform 240ms var(--ease-out), border-color 200ms ease;
}
.faq details[open] summary::before { background: var(--ink-900); border-color: var(--ink-900); }
.faq details[open] summary::after { transform: translateY(4px) rotate(225deg); border-color: var(--tide-300); }
.faq summary:hover { color: var(--tide-700); background: rgba(34, 163, 166, 0.06); }
.faq summary:hover::before { transform: scale(1.06); }
.faq details[open] summary { color: var(--ink-900); }
.faq .faq__body { padding: 2px 0 22px; color: var(--text-mid); max-width: 64ch; }
@media (prefers-reduced-motion: no-preference) {
  .faq details[open] .faq__body { animation: faq-open 320ms var(--ease-out) both; }
}
@keyframes faq-open {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

/* ---------- About page ---------- */

/* The story column: the page title and three short paragraphs, kept to a reading width. */
.about-story { max-width: 68ch; }
.about-story h1 { font-size: clamp(2rem, 1.6rem + 2vw, 3rem); }
.about-story h2 { font-size: 1.35rem; margin-top: 1.8em; }
.about-story p { color: var(--text-mid); }
.about-story .lede { color: var(--text-dark); }

/* The founder card: name, credential pill, two sentences, and the proof line. */
.about__text h2 { font-size: 1.5rem; margin-bottom: 12px; }
.about__text .cred { margin: 2px 0 16px; }
.about__proof { font-size: 0.95rem; }
.about__proof b { color: var(--text-dark); font-weight: 600; }

/* A white card on the pale band, centred, so the short bio does not sit alone at the left edge. */
.about {
  display: grid;
  gap: 20px;
  align-items: center;
  grid-template-columns: auto 1fr;
  max-width: 880px;
  margin: 0 auto;
  padding: 22px 22px;
  background: #fff;
  border: 1px solid var(--foam-200);
  border-radius: 18px;
  box-shadow: var(--shadow-card);
}
@media (min-width: 600px) { .about { padding: 30px 34px; } }
/* Phones: photo above the text, since a side column leaves the text too narrow inside the card. */
@media (max-width: 599px) {
  .about { grid-template-columns: 1fr; justify-items: start; gap: 16px; }
  .about__photo { --size: 96px; border-radius: 22px; }
  .about__photo .avatar__initials { font-size: 2rem; }
}
/* The portrait: softly rounded, a foam ring, and the layered card shadow. */
.about__photo {
  --size: 112px;
  width: var(--size); height: var(--size);
  border-radius: 26px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 0 0 4px #fff,
    0 0 0 5px var(--foam-200),
    0 2px 4px rgba(6, 16, 24, 0.08),
    0 12px 24px -8px rgba(6, 16, 24, 0.22),
    0 32px 56px -20px rgba(6, 16, 24, 0.3);
  margin: 5px;
}
.about__photo .avatar__initials { font-size: 2.4rem; }
.about__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), inset 0 -24px 32px -24px rgba(6, 16, 24, 0.35);
  pointer-events: none;
  z-index: 2;
}
@media (min-width: 600px) {
  .about { gap: 32px; }
  .about__photo { --size: 150px; border-radius: 32px; }
  .about__photo .avatar__initials { font-size: 3.2rem; }
}
.about__text h2 { font-size: 1.5rem; }
.about__text p { color: var(--text-mid); }
.about__text p:first-of-type { color: var(--text-dark); }

/* ---------- Final CTA ---------- */

.cta-final { text-align: left; }
.cta-final h2 { max-width: 18ch; }
.cta-panel {
  position: relative;
  padding: 34px 26px;
  border-radius: 22px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(127, 213, 210, 0.2);
  box-shadow: var(--shadow-glass), 0 40px 80px -30px rgba(0, 0, 0, 0.7);
  overflow: hidden;
}
.cta-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(600px 300px at 100% 0%, rgba(34, 163, 166, 0.22), transparent 60%),
    linear-gradient(118deg, rgba(255, 255, 255, 0.06), transparent 40%);
  pointer-events: none;
}
.cta-panel > * { position: relative; }
@media (min-width: 768px) { .cta-panel { padding: 56px 56px; } }
.cta-final .lede { margin-bottom: 28px; }
.cta-final__actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.cta-final__phone { color: var(--text-light-mid); font-size: 0.95rem; }
.cta-final__phone a { color: #fff; font-weight: 600; }

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

.site-footer {
  background: var(--ink-950);
  color: var(--text-light-mid);
  padding: 48px 0 40px;
  font-size: 0.92rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.site-footer .container { display: grid; gap: 28px; }
@media (min-width: 760px) {
  .site-footer .container { grid-template-columns: 1fr auto; align-items: start; column-gap: 64px; }
  .site-footer__tiny { grid-column: 1 / -1; }
}
.site-footer .logo { font-size: 1.1rem; margin-bottom: 14px; }
.site-footer__line { max-width: 44ch; margin-bottom: 14px; }
.site-footer address { font-style: normal; line-height: 1.6; }
.site-footer a { color: var(--text-light); }
.site-footer a:hover { color: var(--tide-300); }
.site-footer__nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; }
.site-footer__nav a { text-decoration: none; font-weight: 500; padding: 2px 0; }
.site-footer__nav a:hover { text-decoration: underline; }
@media (min-width: 760px) { .site-footer__nav { grid-template-columns: 1fr; text-align: right; } }
.site-footer__tiny {
  margin: 0;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.82rem;
  opacity: 0.75;
}

/* ---------- Mobile call bar ---------- */

.demo-bar {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  gap: 10px;
  align-items: center;
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(6, 16, 24, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 -12px 30px -16px rgba(0, 0, 0, 0.8);
  transform: translateY(0);
  transition: transform 260ms var(--ease-out);
}
.demo-bar--hidden { transform: translateY(110%); }
.demo-bar__call {
  flex: 1 1 auto;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
  line-height: 1;
}
.demo-bar__call svg { width: 22px; height: 22px; flex: none; color: var(--morning); }
.demo-bar__call small {
  display: block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tide-300);
  margin-bottom: 4px;
}
.demo-bar__btn { flex: none; }
@media (max-width: 759px) {
  .demo-bar { display: flex; }
  body.has-demo-bar { padding-bottom: 76px; }
}

/* ---------- Setup call ---------- */

.setup { list-style: none; padding: 0; margin: 32px 0 0; display: grid; gap: 16px; counter-reset: none; }
@media (min-width: 800px) { .setup { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.setup__step {
  position: relative;
  background: #fff;
  border: 1px solid var(--foam-200);
  border-radius: 14px;
  box-shadow: var(--shadow-card);
  padding: 22px 22px 20px;
  display: flex;
  flex-direction: column;
  transition: transform 260ms var(--ease-out), box-shadow 260ms var(--ease-out);
}
@media (hover: hover) {
  .setup__step:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); }
}
.setup__num {
  display: inline-grid;
  place-items: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--ink-700), var(--ink-900));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 4px 10px -4px rgba(6, 16, 24, 0.6);
  color: var(--morning);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  margin-bottom: 16px;
}
.setup__step h3 { font-size: 1.15rem; margin-bottom: 8px; }
.setup__step p { color: var(--text-mid); font-size: 0.98rem; margin-bottom: 16px; }
.setup__time {
  margin-top: auto;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tide-600);
}
.setup__note { margin-top: 20px; color: var(--text-mid); max-width: 60ch; }

/* ---------- Straight talk ---------- */

.straight { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.straight li {
  display: grid;
  gap: 4px 24px;
  padding: 18px 0;
  border-top: 1px solid var(--foam-300);
}
.straight li:first-child { border-top: 0; padding-top: 0; }
.straight li:last-child { padding-bottom: 0; }
@media (min-width: 700px) { .straight li { grid-template-columns: 13rem 1fr; align-items: start; } }
.straight h3 { font-size: 1.1rem; margin: 0; }
.straight p { color: var(--text-mid); margin: 0; }

/* ---------- Generic page (privacy, 404, calculator) ---------- */

.page { padding: 40px 0 56px; }
@media (min-width: 768px) { .page { padding: 56px 0 72px; } }
.page h1 { font-size: clamp(2rem, 1.6rem + 2vw, 3rem); }
.prose { max-width: 68ch; }
.prose h2 { font-size: 1.35rem; margin-top: 2em; }
.prose p, .prose li { color: var(--text-mid); }
.prose p:first-of-type { color: var(--text-dark); }
.prose .meta { font-size: 0.9rem; color: var(--text-mid); margin-bottom: 2em; }

.notfound { min-height: 60vh; display: grid; align-content: center; }
.notfound__code {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(5rem, 4rem + 8vw, 10rem);
  line-height: 0.9;
  letter-spacing: -0.05em;
  color: var(--tide-300);
  margin-bottom: 16px;
}
.notfound p { max-width: 44ch; }
.notfound__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.notfound__links { list-style: none; padding: 0; margin: 32px 0 0; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 0.95rem; }
.notfound__links a { color: var(--text-light-mid); }
.notfound__links a:hover { color: #fff; }

/* ---------- Calculator ---------- */

.calc { display: grid; gap: 28px; margin-top: 32px; }
@media (min-width: 900px) { .calc { grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; } }

.calc__inputs {
  background: #fff;
  border: 1px solid var(--foam-200);
  border-radius: 14px;
  box-shadow: var(--shadow-card);
  padding: 8px 22px 22px;
}
.field { padding: 18px 0; border-top: 1px solid var(--foam-100); }
.field:first-child { border-top: 0; }
.field__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.field__head > div:first-child { flex: 1 1 0; min-width: 0; }
.field__head .field__num { flex: none; }
.field label { font-weight: 600; }
.field__hint { font-size: 0.8rem; color: var(--text-mid); display: block; margin-top: 2px; }
.field__num {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-variant-numeric: tabular-nums;
}
.field__num input {
  width: 92px;
  font: inherit;
  font-weight: 600;
  padding: 8px 10px;
  border: 1.5px solid var(--foam-300);
  border-radius: var(--radius-sm);
  text-align: right;
  color: var(--text-dark);
  background: var(--foam-50);
}
.field__num input:focus { border-color: var(--tide-500); outline: none; box-shadow: 0 0 0 3px rgba(34, 163, 166, 0.25); }
.field__num span { color: var(--text-mid); font-size: 0.95rem; }
.field__num--money input { padding-left: 22px; }
.field__num--money { position: relative; }
.field__num--money::before { content: "$"; position: absolute; left: 10px; color: var(--text-mid); pointer-events: none; }

.field input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 28px;
  background: transparent;
  margin: 10px 0 0;
  cursor: pointer;
}
.field input[type="range"]::-webkit-slider-runnable-track {
  height: 6px; border-radius: 3px; background: var(--foam-300); box-shadow: inset 0 1px 2px rgba(6, 16, 24, 0.18);
}
.field input[type="range"]::-moz-range-track {
  height: 6px; border-radius: 3px; background: var(--foam-300); box-shadow: inset 0 1px 2px rgba(6, 16, 24, 0.18);
}
.field input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px; height: 24px;
  margin-top: -9px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--tide-500), var(--tide-700));
  border: 3px solid #fff;
  box-shadow: 0 1px 2px rgba(6, 16, 24, 0.3), 0 6px 12px -4px rgba(6, 16, 24, 0.4);
}
.field input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--tide-600);
  border: 3px solid #fff;
  box-shadow: 0 1px 4px rgba(6, 16, 24, 0.3);
}
.field input[type="range"]:focus-visible { outline: none; }
.field input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(240, 112, 47, 0.45); }
.field input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px rgba(240, 112, 47, 0.45); }

.calc__result {
  position: relative;
  background: linear-gradient(160deg, var(--ink-800) 0%, var(--ink-900) 55%, var(--ink-950) 100%);
  color: var(--text-light);
  border: 1px solid rgba(127, 213, 210, 0.18);
  border-radius: var(--radius-lg);
  padding: 28px 26px;
  box-shadow: var(--shadow-dark), 0 60px 100px -40px rgba(6, 16, 24, 0.6);
  overflow: hidden;
}
.calc__result::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(118deg, rgba(255, 255, 255, 0.08), transparent 38%);
  pointer-events: none;
}
.calc__result > * { position: relative; }
.calc__big { text-shadow: 0 2px 24px rgba(255, 176, 136, 0.35); }
@media (min-width: 900px) { .calc__result { position: sticky; top: 84px; } }
.calc__result .kicker { color: var(--tide-300); }
.calc__headline { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 18px; }
.calc__row {
  padding: 12px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  color: var(--text-light-mid);
}
.calc__row b { font-family: var(--font-display); font-size: 1.35rem; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }
.calc__big {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.6rem, 2rem + 3vw, 4rem);
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--signal-300);
  margin: 4px 0 0;
  font-variant-numeric: tabular-nums;
}
.calc__per { color: var(--text-light-mid); margin: 0; font-size: 1.05rem; }
.calc__formula { margin-top: 20px; font-size: 0.86rem; color: var(--text-light-mid); }
.calc__formula code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.82rem; color: var(--tide-300); }
.calc__cta { margin-top: 24px; display: grid; gap: 10px; }
.calc__cta .btn { width: 100%; }
.calc__cta p { font-size: 0.86rem; color: var(--text-light-mid); text-align: center; }

.calc__note { margin-top: 28px; font-size: 0.9rem; color: var(--text-mid); max-width: 60ch; }

/* Live region for the result that updates but stays visually small */
.calc__live { font-size: 0.86rem; color: var(--text-light-mid); margin-top: 14px; }
.calc__live:empty { display: none; }

/* ---------- Scroll reveal ----------
   The script adds .js-reveal to <html> and .reveal to targets only when motion is allowed and
   IntersectionObserver exists. Without script, nothing is hidden. */
.js-reveal .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 480ms var(--ease-out), transform 560ms var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.js-reveal .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js-reveal .reveal { opacity: 1; transform: none; transition: none; }
}