/* ==========================================================================
   Say In Bulbs - landing page styles
   Design tokens come from design_handoff_landing_page/tokens.json.
   Never hardcode a new hex here: add a token to :root and use it.
   ========================================================================== */

/* --- Self-hosted fonts (latin subset, from Google Fonts) ------------------ */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/archivo-latin-var.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/dm-mono-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/dm-mono-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Tokens -------------------------------------------------------------- */

:root {
  /* colour */
  --page-bg: #100f0e;
  --band-bg: #141312;
  --card: #191816;
  --card-border: #262421;
  --hairline: #1f1d1b;
  /* a faint ring around the dark brand mark on the dark page */
  --mark-edge: rgba(255, 255, 255, 0.1);
  --input-border: #2c2a27;
  --input-border-hover: #4a4642;
  --sign-bg: #000;
  --text-primary: #f2efea;
  --text-body: #b8b2aa;
  --text-muted: #a09a92;
  --text-dim: #8f8981;
  --text-label: #6f6a64;
  --text-faint: #332f2c;
  --text-meter: #7d776f;
  --text-pro: #cdc7bf;
  --accent: #ffb020;
  --accent-hover: #ffc250;
  --accent-link-hover: #ffc961;
  --accent-ink: #17140c;
  --accent-tint: rgba(255, 176, 32, 0.12);
  --led-amber: #ffb020;
  --led-red: #ff3b30;
  --led-green: #35e07a;
  --led-cyan: #3ad8ff;
  --led-magenta: #ff4fd8;
  --btn-ghost-border: #3a3733;

  /* layout */
  --maxw: 1120px;
  --gutter: 32px;
  --pad-sm: 72px;
  --pad-md: 84px;
  --pad-lg: 96px;

  /* radius */
  --r-pill: 999px;
  --r-button: 16px;
  --r-icon-sm: 12px;
  /* the brand mark: iOS app-icon corner ratio (~22%) at 40px */
  --r-mark: 9px;
  --r-sign: 14px;
  --r-card: 18px;
  --r-card-lg: 22px;
  --r-card-xl: 24px;
  --r-cta: 30px;
  --r-phone: 46px;
  --r-phone-inner: 38px;

  /* type */
  --font-sans: 'Archivo', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, 'Apple Color Emoji', 'Segoe UI Emoji', monospace;

  /* effects */
  --phone-shadow: 0 44px 90px rgba(0, 0, 0, 0.65), 0 0 0 2px #2a2826,
    0 0 120px rgba(255, 176, 32, 0.12);
  --pro-ring: inset 0 0 0 1px var(--accent), 0 0 60px rgba(255, 176, 32, 0.08);
  --card-ring: inset 0 0 0 1px var(--card-border);

  /* the hero phone is scaled as a whole so the rotated marquee keeps clipping */
  --phone-scale: 1;
  --h1-size: 68px;
}

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

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

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

body {
  margin: 0;
  background: var(--page-bg);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
p {
  margin: 0;
  text-wrap: pretty;
}

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

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

a:hover {
  color: var(--accent-link-hover);
}

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

:target {
  scroll-margin-top: 24px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10;
  padding: 12px 18px;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
  border-radius: 0 0 var(--r-icon-sm) 0;
}

.skip-link:focus {
  left: 0;
  color: var(--accent-ink);
}

/* --- Layout primitives --------------------------------------------------- */

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.band {
  background: var(--band-bg);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}

.band + .band {
  border-top: 0;
}

.rule-top {
  border-top: 1px solid var(--hairline);
}

.section {
  padding-top: var(--pad-sm);
  padding-bottom: var(--pad-sm);
}

.section--md {
  padding-top: var(--pad-md);
  padding-bottom: var(--pad-md);
}

.section--lg {
  padding-top: var(--pad-lg);
  padding-bottom: var(--pad-lg);
}

.stack {
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.head {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-label);
}

h1 {
  font-size: var(--h1-size);
  line-height: 0.98;
  letter-spacing: -0.03em;
  font-weight: 700;
}

h2 {
  font-size: 36px;
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.02em;
}

h2.h2--sm {
  font-size: 30px;
}

.lead {
  font-size: 19px;
  line-height: 1.55;
  color: var(--text-body);
  max-width: 460px;
}

.lead--intro {
  font-size: 17px;
  max-width: 520px;
  color: var(--text-muted);
}

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

.btn {
  display: inline-block;
  border-radius: var(--r-button);
  padding: 17px 26px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn--primary {
  background: var(--accent);
  color: var(--accent-ink);
}

.btn--primary:hover {
  background: var(--accent-hover);
  color: var(--accent-ink);
}

.btn--secondary {
  border: 1px solid var(--input-border);
  color: var(--text-body);
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 400;
  padding: 17px 24px;
}

.btn--secondary:hover {
  border-color: var(--input-border-hover);
  color: var(--text-primary);
}

.btn--ghost {
  border: 1px solid var(--btn-ghost-border);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 400;
  padding: 17px 28px;
}

.btn--ghost:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.btn-row--center {
  justify-content: center;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

/* --- LED colour modifiers ------------------------------------------------
   Set the per-instance LED tokens without a style attribute, so the CSP can
   keep style-src at 'self' with no 'unsafe-inline'.
   -------------------------------------------------------------------------- */

.led-amber {
  --led: var(--led-amber);
  --led-soft: rgba(255, 176, 32, 0.33);
}

.led-red {
  --led: var(--led-red);
  --led-soft: rgba(255, 59, 48, 0.33);
}

.led-green {
  --led: var(--led-green);
  --led-soft: rgba(53, 224, 122, 0.33);
}

.led-cyan {
  --led: var(--led-cyan);
  --led-soft: rgba(58, 216, 255, 0.33);
}

.led-magenta {
  --led: var(--led-magenta);
  --led-soft: rgba(255, 79, 216, 0.33);
}

/* --- Dot-matrix overlay -------------------------------------------------- */

.dots {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 38%, #000 44%);
  background-size: var(--cell) var(--cell);
}

/* --- Marquee ------------------------------------------------------------- */

@keyframes pb-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

.marquee {
  display: inline-block;
  white-space: pre;
  padding-left: 100%;
  font-family: var(--font-mono);
  font-weight: 500;
  line-height: 1;
  animation: pb-marquee var(--marquee-dur) linear infinite;
  will-change: transform;
}

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

.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 26px;
  padding-bottom: 26px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-primary);
}

.brand:hover {
  color: var(--text-primary);
}

/* The app icon itself, not a lookalike built from text: the header, the
   App Store listing and the home screen show the same mark. Rendered from
   the app's 1024px master at 2x and 3x so it stays sharp. iOS rounds an
   icon's corners at about 22% of its width; the hairline ring keeps a dark
   icon from dissolving into the dark page. */
.brand__mark {
  flex: none;
  display: block;
  width: 40px;
  height: 40px;
  border-radius: var(--r-mark);
  box-shadow: 0 0 0 1px var(--mark-edge);
}

.brand__name {
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.01em;
}

.nav {
  display: flex;
  align-items: center;
  gap: 26px;
  font-family: var(--font-mono);
  font-size: 13px;
}

.nav a {
  color: var(--text-muted);
}

.nav a:hover {
  color: var(--text-primary);
}

.nav__cta {
  border: 1px solid var(--accent);
  border-radius: var(--r-pill);
  padding: 9px 16px;
  color: var(--accent);
}

.nav a.nav__cta:hover {
  color: var(--accent-ink);
  background: var(--accent);
}

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

.hero {
  padding-top: 48px;
  padding-bottom: 84px;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 64px;
  align-items: center;
}

.hero__copy {
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.hero__lit {
  color: var(--accent);
  text-shadow: 0 0 26px rgba(255, 176, 32, 0.45);
}

.trust {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-label);
}

.trust__sep {
  color: var(--text-faint);
}

.phone-slot {
  display: flex;
  justify-content: center;
}

.phone-scale {
  height: calc(660px * var(--phone-scale));
  width: calc(320px * var(--phone-scale));
}

.phone {
  position: relative;
  width: 320px;
  height: 660px;
  border-radius: var(--r-phone);
  background: #0b0a09;
  padding: 9px;
  box-shadow: var(--phone-shadow);
  transform: scale(var(--phone-scale));
  transform-origin: top left;
}

.phone__screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: var(--r-phone-inner);
  overflow: hidden;
  background: var(--sign-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  --cell: 10px;
}

.phone__rail {
  width: 640px;
  height: 300px;
  flex: none;
  transform: rotate(90deg);
  display: flex;
  align-items: center;
  overflow: hidden;
}

.phone__rail .marquee {
  --marquee-dur: 11s;
  font-size: 172px;
  color: var(--accent);
  text-shadow: 0 0 26px var(--accent), 0 0 70px rgba(255, 176, 32, 0.4);
}

.phone__screen .dots {
  z-index: 1;
}

/* --- Use-case cards ------------------------------------------------------ */

.cards-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.use {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 26px;
  border-radius: var(--r-card-lg);
  background: var(--card);
  box-shadow: var(--card-ring);
  min-width: 0;
}

.use__sign {
  position: relative;
  height: 86px;
  border-radius: var(--r-sign);
  background: var(--sign-bg);
  overflow: hidden;
  display: flex;
  align-items: center;
  min-width: 0;
  --cell: 6px;
}

.use__sign .marquee {
  --marquee-dur: 9s;
  font-size: 42px;
  color: var(--led);
  text-shadow: 0 0 12px var(--led), 0 0 34px var(--led-soft);
}

.use__title {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.use__body {
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-muted);
}

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

.how {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 64px;
  align-items: center;
}

.how__copy {
  display: flex;
  flex-direction: column;
  gap: 34px;
}

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

.step {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  counter-increment: step;
}

.step::before {
  content: counter(step);
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent-tint);
  border: 1px solid var(--accent);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.step__text {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.step__title {
  font-size: 18px;
  font-weight: 600;
}

.step__body {
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-muted);
  max-width: 340px;
}

.shot {
  position: relative;
  border-radius: 26px;
  background: var(--band-bg);
  box-shadow: var(--card-ring);
  padding: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 460px;
}

.shot img {
  display: block;
  width: 100%;
  max-width: 320px;
  height: auto;
  border-radius: var(--r-card);
}

/* --- Feature grid -------------------------------------------------------- */

.cards-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.feature {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 22px;
  border-radius: var(--r-card);
  background: var(--card);
  box-shadow: var(--card-ring);
}

.feature__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--led);
  box-shadow: 0 0 10px var(--led);
}

.feature__title {
  font-size: 16px;
  font-weight: 600;
}

.feature__body {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-dim);
}

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

.plans {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.plan {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 32px;
  border-radius: var(--r-card-xl);
  background: var(--card);
  box-shadow: var(--card-ring);
}

.plan--pro {
  box-shadow: var(--pro-ring);
}

.plan__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.plan__name {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--text-label);
}

.plan--pro .plan__name {
  color: var(--accent);
}

.plan__price {
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.plan__price small {
  margin-left: 6px;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-dim);
}

.meter {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: var(--r-button);
  background: var(--sign-bg);
}

.meter__value {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 26px;
  line-height: 1;
  color: var(--accent);
  text-shadow: 0 0 14px var(--accent);
}

.meter__label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--text-meter);
  line-height: 1.5;
}

.ticks {
  display: flex;
  flex-direction: column;
  gap: 11px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ticks li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-muted);
}

.ticks li::before {
  content: '\2713';
  color: var(--led-green);
  flex: none;
}

.plan--pro .ticks li {
  color: var(--text-pro);
}

.plan--pro .ticks li::before {
  color: var(--accent);
}

.plan__note {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-label);
}

.fineprint {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.7;
  color: var(--text-label);
  max-width: 620px;
}

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

@keyframes pb-blink {
  0%,
  49% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0.45;
  }
}

.cta {
  position: relative;
  border-radius: var(--r-cta);
  background: var(--sign-bg);
  overflow: hidden;
  padding: 72px 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  text-align: center;
  --cell: 9px;
  /* bulb pitch of the headline itself, independent of the panel texture */
  --sign-cell: 4px;
}

.cta .dots {
  z-index: 2;
}

.cta__sign {
  position: relative;
  /* above the panel grid: the letters carry their own bulbs, so a second
     lattice on top of them would only moire against this one */
  z-index: 3;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 46px;
  line-height: 1.1;
  letter-spacing: 0.02em;
  color: var(--accent);
  text-shadow: 0 0 10px var(--accent);
  animation: pb-blink 1.6s steps(1, end) infinite;
}

/* Build the letters OUT of bulbs rather than punching black holes through
   them: a lit dot lattice painted inside the glyph outlines. Subtracting a
   grid from vector type leaves ragged stems, because a 46px DM Mono stem is
   thinner than one cell and can fall entirely in a gap. */
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .cta__sign {
    color: transparent;
    background-image: radial-gradient(circle at center, var(--accent) 38%, transparent 46%);
    background-size: var(--sign-cell) var(--sign-cell);
    -webkit-background-clip: text;
    background-clip: text;
    text-shadow: none;
    filter: drop-shadow(0 0 5px rgba(255, 176, 32, 0.85))
      drop-shadow(0 0 18px rgba(255, 176, 32, 0.35));
  }
}

.cta__body {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}

.cta__sub {
  max-width: 420px;
  font-size: 17px;
  line-height: 1.55;
  color: var(--text-body);
}

/* Apple's badge artwork is used as supplied - size it, never recolour or crop it.
   Apple's minimum on-screen height is 40px. */
.store-badge {
  display: inline-block;
  line-height: 0;
  border-radius: 9px;
}

.store-badge img {
  height: 54px;
  width: auto;
}

.cta__note {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--text-label);
}

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

.foot {
  padding-top: 34px;
  padding-bottom: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-label);
}

.foot__links {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
}

.foot a {
  color: var(--text-label);
}

.foot a:hover {
  color: var(--text-primary);
}

/* --- Cookie consent bar --------------------------------------------------
   Hidden in the markup and revealed by analytics.js, so with JS off it never
   appears - and analytics never loads either. `[hidden]` needs the explicit
   rule below because `display: flex` would otherwise win over it. */

.cookie-bar {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 40;
  margin: 0 auto;
  max-width: var(--maxw);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px;
  padding: 20px 24px;
  border: 1px solid var(--card-border);
  border-radius: var(--r-card);
  background: var(--card);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
}

.cookie-bar[hidden] {
  display: none;
}

.cookie-bar__text {
  flex: 1 1 320px;
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-muted);
}

.cookie-bar__text strong {
  color: var(--text-primary);
  font-weight: 700;
}

.cookie-bar__acts {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.cookie-bar .btn {
  padding: 13px 22px;
  font-size: 14px;
  cursor: pointer;
}

@media (max-width: 560px) {
  .cookie-bar {
    padding: 18px;
  }

  .cookie-bar__acts {
    width: 100%;
  }

  .cookie-bar .btn {
    flex: 1 1 auto;
    text-align: center;
  }
}

/* --- Legal / support subpages -------------------------------------------- */

.doc {
  max-width: 720px;
  padding-top: 56px;
  padding-bottom: 96px;
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.doc h1 {
  font-size: 40px;
  line-height: 1.05;
}

.doc h2 {
  font-size: 22px;
  margin-top: 14px;
}

.doc p,
.doc li {
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-body);
}

.doc ul {
  margin: 0;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.doc__meta {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-label);
}

/* --- Responsive ---------------------------------------------------------- */

@media (max-width: 1024px) {
  .hero,
  .how {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .hero__copy,
  .how__copy {
    max-width: 620px;
  }

  .phone-slot,
  .shot {
    order: 2;
  }

  .cards-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 860px) {
  .cards-3 {
    grid-template-columns: 1fr;
  }

  .use__sign .marquee {
    font-size: 36px;
  }
}

@media (max-width: 720px) {
  :root {
    --gutter: 20px;
    --pad-sm: 56px;
    --pad-md: 56px;
    --pad-lg: 56px;
    --h1-size: 44px;
    --phone-scale: 0.8125; /* 320 -> 260 */
  }

  h2 {
    font-size: 28px;
  }

  h2.h2--sm {
    font-size: 26px;
  }

  .lead {
    font-size: 17px;
  }

  .nav {
    gap: 16px;
  }

  .nav__hide {
    display: none;
  }

  .plans {
    grid-template-columns: 1fr;
  }

  .plan--pro {
    order: -1; /* Pro first when stacked */
  }

  .cards-4 {
    grid-template-columns: 1fr;
  }

  .cta {
    padding: 48px 24px;
    /* hold the desktop stroke-to-bulb ratio as the headline shrinks to 30px */
    --sign-cell: 3px;
  }

  .cta__sign {
    font-size: 30px;
  }

  .foot {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  .shot {
    padding: 20px;
    min-height: 0;
  }

  .doc h1 {
    font-size: 32px;
  }
}

@media (max-width: 400px) {
  :root {
    --phone-scale: 0.7;
  }
}

/* --- Motion & accessibility ---------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .marquee {
    animation: none;
    padding-left: 0;
    width: 100%;
    text-align: center;
  }

  /* Static sizes chosen so the full phrase fits its panel without scrolling. */
  .phone__rail .marquee {
    font-size: 84px;
    line-height: 1.15;
    white-space: normal;
  }

  .use__sign .marquee {
    font-size: 32px;
    white-space: normal;
  }

  .cta__sign {
    animation: none;
    opacity: 1;
  }
}