/* ═══════════════════════════════════════════════════════════
   PixelPoynt Pilot Program
   Design language locked in DESIGN.md — read it before editing.
   ═══════════════════════════════════════════════════════════ */

/* ── Fonts ─────────────────────────────────────────────── */
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("/assets/fonts/instrument-serif-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/assets/fonts/jetbrains-mono.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

/* ── Tokens ────────────────────────────────────────────── */
:root {
  --ink:        #0b1f3a;
  --ink-deep:   #08152e;
  --brand-navy: #1b5283;
  --brand-blue: #3f8ac9;
  /* #2f6bff (sampled from the live site) measured at exactly 4.50:1
     for white button text — passing on a rounding coin-flip. Nudged
     darker to 5.42:1 so it holds up under any auditor. */
  --blue:       #2a5fe6;
  --blue-dark:  #1c46b8;
  /* --brand-blue is 4.48:1 on --ink, so dark sections get a lighter
     sibling (7.7:1) rather than reusing the light-ground value. */
  --brand-blue-on-dark: #7ab8e8;
  --teal:       #1fd1b6;
  --paper:      #ffffff;
  --paper-2:    #f7f9fc;
  --tint:       #e6eefb;
  --muted:      #5b6b82;
  /* For secondary text sitting over the hero photograph. --muted only
     reaches ~4.1-4.5:1 against the lightest parts of that image, which
     is a coin-flip at best. Measured from rendered pixels, not theory. */
  --muted-on-photo: #4d5c72;
  --line:       rgba(11, 31, 58, .10);
  --line-2:     rgba(11, 31, 58, .16);

  --on-dark:        #ffffff;
  --on-dark-muted:  #a9bfd9;
  --line-dark:      rgba(255, 255, 255, .14);

  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --mono:  "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --wrap: 1180px;
  --gutter: clamp(20px, 5vw, 40px);
  --section-y: clamp(72px, 10vw, 132px);

  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 30px;

  --shadow-sm: 0 1px 2px rgba(8,21,46,.06), 0 4px 12px rgba(8,21,46,.04);
  --shadow-md: 0 2px 4px rgba(8,21,46,.06), 0 12px 32px rgba(8,21,46,.08);
  --shadow-lg: 0 4px 8px rgba(8,21,46,.06), 0 24px 64px rgba(8,21,46,.10);

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ── Reset ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv05" 1, "ss03" 1;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
ul, ol { list-style: none; padding: 0; }

a { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--blue-dark); }

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 3px;
}
.section-dark :focus-visible,
.site-footer :focus-visible { outline-color: #ffffff; }

::selection { background: var(--ink); color: #fff; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: #fff;
  padding: 14px 22px; border-radius: 0 0 var(--r-sm) 0;
  font-weight: 600; text-decoration: none;
}
.skip-link:focus { left: 0; color: #fff; }

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

/* ── Typography primitives ─────────────────────────────── */
.h2 {
  font-size: clamp(1.9rem, 1.15rem + 2.6vw, 3.15rem);
  line-height: 1.1;
  letter-spacing: -.032em;
  font-weight: 640;
  text-wrap: balance;
}
.h2 em, .hero-title em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -.005em;
  padding-inline: .04em;
}
.h2-light { color: var(--on-dark); }

.lead {
  font-size: clamp(1.08rem, 1rem + .4vw, 1.28rem);
  line-height: 1.55;
  color: var(--ink);
}

.eyebrow {
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand-navy);
  display: inline-flex;
  align-items: center;
  gap: .5em;
}
.eyebrow-light { color: var(--brand-blue-on-dark); }
.brace {
  font-family: var(--mono);
  color: var(--brand-blue);
  font-weight: 400;
  opacity: .85;
}

.section { padding-block: var(--section-y); }
.section-alt { background: var(--paper-2); border-block: 1px solid var(--line); }
.section-dark {
  color: var(--on-dark);
  /* Isometric wireframes of page layouts — the brand's own blueprint
     motif as a photograph. Scrimmed hard so the step copy keeps its
     8.8:1 contrast. */
  background-color: var(--ink);
  background-image:
    linear-gradient(180deg, rgba(11, 31, 58, .90) 0%, rgba(11, 31, 58, .95) 100%),
    url("/assets/img/blueprint-dark.webp");
  background-size: auto, cover;
  background-position: center, center;
  background-repeat: no-repeat;
}
.section-dark .brace, .site-footer .brace { color: var(--brand-blue-on-dark); }

.section-head { max-width: 62ch; margin-bottom: clamp(36px, 5vw, 60px); }
.section-head .eyebrow { margin-bottom: 18px; }
.section-head .h2 { margin-bottom: 18px; }
.section-sub { color: var(--muted); font-size: 1.08rem; max-width: 54ch; }
.section-sub-light { color: var(--on-dark-muted); }

/* ── Buttons ───────────────────────────────────────────── */
.btn {
  --btn-bg: var(--blue);
  --btn-fg: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 13px 26px;
  font-weight: 590;
  font-size: .97rem;
  letter-spacing: -.01em;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease),
              background-color .22s var(--ease);
}
.btn-primary { box-shadow: 0 1px 2px rgba(31,79,208,.24), 0 8px 22px rgba(47,107,255,.24); }
.btn-primary:hover {
  background: var(--blue-dark);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(31,79,208,.24), 0 14px 34px rgba(47,107,255,.30);
}
.btn-primary:active { transform: translateY(0); }

.btn-ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  border-color: var(--line-2);
}
.btn-ghost:hover {
  color: var(--ink);
  border-color: var(--ink);
  background: rgba(11,31,58,.03);
  transform: translateY(-2px);
}

.btn-sm { padding: 9px 18px; font-size: .875rem; }
.btn-lg { padding: 16px 32px; font-size: 1.02rem; }

/* ── Header ────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,.82);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), background-color .3s var(--ease);
}
.site-header.is-stuck {
  border-bottom-color: var(--line);
  background: rgba(255,255,255,.92);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 72px;
}
.logo img { width: 172px; height: auto; }
.header-right { display: flex; align-items: center; gap: 20px; }

.header-counter {
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .06em;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: .45em;
  white-space: nowrap;
}
.header-counter [data-slots-remaining] { color: var(--ink); font-weight: 600; }

/* ── Hero ──────────────────────────────────────────────── */
.hero {
  position: relative;
  padding-top: clamp(56px, 8vw, 96px);
  padding-bottom: clamp(64px, 8vw, 104px);
  /* A Piedmont main street under a heavy white veil — the audience,
     not a client. The scrim is deliberately strong: every hero
     measurement below still has to clear WCAG AA on the navy type,
     so the photograph reads as atmosphere rather than subject. */
  background-color: var(--paper-2);
  background-image:
    linear-gradient(180deg,
      rgba(255, 255, 255, .965)   0%,
      rgba(255, 255, 255, .955)  38%,
      rgba(255, 255, 255, .920)  64%,
      rgba(246, 249, 253, .930) 100%),
    url("/assets/img/hero-mainstreet.webp");
  background-size: auto, cover;
  background-position: center, center 68%;
  background-repeat: no-repeat;
  overflow: hidden;
  isolation: isolate;
}
/* blueprint grid — the page is literally a wireframe of itself */
.hero-grid {
  position: absolute;
  inset: -1px;
  z-index: -1;
  background-image:
    linear-gradient(to right, rgba(27,82,131,.09) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(27,82,131,.09) 1px, transparent 1px);
  background-size: 68px 68px;
  -webkit-mask-image: radial-gradient(115% 78% at 50% 26%, #000 18%, transparent 72%);
  mask-image: radial-gradient(115% 78% at 50% 26%, #000 18%, transparent 72%);
}
.hero-inner { text-align: center; display: flex; flex-direction: column; align-items: center; }

.hero-title {
  font-size: clamp(2.25rem, .95rem + 4.6vw, 4.1rem);
  line-height: 1.05;
  letter-spacing: -.042em;
  font-weight: 660;
  margin-top: 22px;
  /* No max-width: the <br> owns the break so the two sentences sit on
     their own lines. A ch-based cap fought it into four lines. */
  text-wrap: pretty;
}
.hero-lead {
  margin-top: 26px;
  max-width: 58ch;
  font-size: clamp(1.06rem, .98rem + .48vw, 1.3rem);
  line-height: 1.6;
  color: var(--muted-on-photo);
}
.hero-actions {
  margin-top: 38px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}

/* ── Slot counter ──────────────────────────────────────── */
.counter {
  margin-top: 52px;
  width: min(100%, 480px);
  background: rgba(255,255,255,.72);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 22px 26px 24px;
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  text-align: left;
}
.counter-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}
.counter-label {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.counter-value {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  font-size: 1.02rem;
}
.counter-value strong { font-size: 1.45rem; font-weight: 600; letter-spacing: -.02em; }
.counter-of { color: var(--muted); }

.counter-track {
  height: 7px;
  border-radius: 99px;
  background: rgba(27,82,131,.13);
  overflow: hidden;
}
.counter-fill {
  height: 100%;
  width: 0;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--brand-blue), var(--blue));
  transition: width 1.1s var(--ease);
}
.counter-note {
  margin-top: 14px;
  font-size: .88rem;
  line-height: 1.5;
  color: var(--muted-on-photo);
}
.counter.is-full .counter-fill { background: linear-gradient(90deg, #8a97ab, #5b6b82); }

/* ── Trust strip ───────────────────────────────────────── */
.trust-strip {
  margin-top: 54px;
  padding-top: 34px;
  border-top: 1px solid var(--line);
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.trust-strip li { display: flex; flex-direction: column; gap: 4px; }
.trust-strip strong {
  font-size: clamp(1.3rem, 1.05rem + .8vw, 1.72rem);
  font-weight: 640;
  letter-spacing: -.03em;
  color: var(--ink);
}
.trust-strip span { font-size: .84rem; color: var(--muted-on-photo); line-height: 1.4; }

/* ── The honest reason ─────────────────────────────────── */
.reason-layout {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: clamp(32px, 6vw, 80px);
  align-items: start;
}
.reason-aside { position: sticky; top: 108px; }
.reason-aside .eyebrow { margin-bottom: 28px; }
.signature { border-left: 2px solid var(--brand-blue); padding-left: 18px; }
.signature-name {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.9rem;
  line-height: 1.1;
  color: var(--ink);
  margin-bottom: 6px;
}
.signature-role { font-size: .86rem; color: var(--muted); line-height: 1.5; }

.reason-body { max-width: 64ch; }
.reason-body .h2 { margin-bottom: 26px; }
.reason-body p + p { margin-top: 20px; }
.reason-body .lead { margin-bottom: 20px; }
.reason-body p:not(.lead) { color: var(--muted); }
.reason-kicker {
  margin-top: 30px !important;
  padding: 20px 24px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--teal);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  color: var(--ink) !important;
  font-weight: 500;
}

/* ── What you get ──────────────────────────────────────── */
.get-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}
.get-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 28px 26px;
  box-shadow: var(--shadow-sm);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.get-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.get-icon {
  width: 26px; height: 26px;
  color: var(--brand-blue);
  margin-bottom: 16px;
  transition: color .25s var(--ease), transform .25s var(--ease);
}
.get-card:hover .get-icon { color: var(--blue); transform: translateY(-1px); }

.get-card h3 {
  font-size: 1.06rem;
  font-weight: 620;
  letter-spacing: -.018em;
  margin-bottom: 10px;
}
.get-card p { color: var(--muted); font-size: .95rem; line-height: 1.6; }

.no-strings {
  margin-top: 34px;
  padding: 26px 30px;
  background: var(--ink);
  color: var(--on-dark);
  border-radius: var(--r-lg);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 30px;
}
.no-strings-label { font-size: 1rem; font-weight: 500; }
.no-strings-label em { font-family: var(--serif); font-size: 1.15em; }
.no-strings-list { display: flex; flex-wrap: wrap; gap: 10px; }
.no-strings-list li {
  font-family: var(--mono);
  font-size: .76rem;
  letter-spacing: .02em;
  padding: 7px 14px;
  border: 1px solid var(--line-dark);
  border-radius: 999px;
  color: var(--on-dark-muted);
}

/* ── Fit columns ───────────────────────────────────────── */
.fit-figure {
  margin: 0 0 26px;
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.fit-figure img {
  width: 100%;
  aspect-ratio: 21 / 8;
  object-fit: cover;
  object-position: center 62%;
}
.fit-figure figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 44px 30px 22px;
  /* Dark ramp behind the caption so it holds contrast over any part
     of the photograph, not just the parts that happen to be dim. */
  background: linear-gradient(180deg, rgba(8, 21, 46, 0) 0%, rgba(8, 21, 46, .82) 62%);
  color: #fff;
  font-size: .95rem;
  line-height: 1.5;
  max-width: 62ch;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}

.fit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 22px;
}
.fit-col {
  border-radius: var(--r-lg);
  padding: 34px 32px;
  border: 1px solid var(--line);
}
.fit-yes { background: var(--paper-2); border-color: rgba(31,209,182,.34); }
.fit-no  { background: var(--paper-2); }

.fit-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.18rem;
  font-weight: 640;
  letter-spacing: -.022em;
  margin-bottom: 22px;
}
.fit-icon {
  flex: none;
  width: 26px; height: 26px;
  border-radius: 50%;
  position: relative;
}
.fit-icon-yes { background: var(--teal); }
.fit-icon-yes::after {
  content: "";
  position: absolute; left: 8px; top: 6px;
  width: 7px; height: 12px;
  border: solid var(--ink-deep);
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(43deg);
}
.fit-icon-no { background: rgba(11,31,58,.14); }
.fit-icon-no::before, .fit-icon-no::after {
  content: "";
  position: absolute; left: 7px; top: 12px;
  width: 12px; height: 2.5px;
  background: var(--ink);
  border-radius: 2px;
}
.fit-icon-no::before { transform: rotate(45deg); }
.fit-icon-no::after  { transform: rotate(-45deg); }

.fit-list li {
  position: relative;
  padding-left: 26px;
  color: var(--muted);
  font-size: .98rem;
  line-height: 1.6;
}
.fit-list li + li { margin-top: 14px; }
.fit-list li::before {
  content: "";
  position: absolute;
  left: 4px; top: .62em;
  width: 8px; height: 1.5px;
  background: var(--line-2);
}
.fit-list strong { color: var(--ink); font-weight: 620; }
.fit-list em { font-style: italic; color: var(--ink); }

.fit-footnote {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: .9rem;
  color: var(--muted);
  line-height: 1.6;
}

/* ── Steps ─────────────────────────────────────────────── */
.steps { display: grid; gap: 14px; }
.step {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 26px 28px;
  border: 1px solid var(--line-dark);
  border-radius: var(--r-md);
  background: rgba(255,255,255,.035);
}
.step-num {
  font-family: var(--mono);
  font-size: .92rem;
  font-weight: 500;
  color: var(--brand-blue-on-dark);
  letter-spacing: .04em;
  padding-top: .22em;
}
.step-body h3 {
  font-size: 1.18rem;
  font-weight: 620;
  letter-spacing: -.022em;
  color: var(--on-dark);
  margin-bottom: 8px;
}
.step-body p { color: var(--on-dark-muted); font-size: .98rem; line-height: 1.62; }
.step-body strong { color: var(--on-dark); font-weight: 620; }

.step-key {
  background: linear-gradient(180deg, rgba(31,209,182,.12), rgba(31,209,182,.05));
  border-color: rgba(31,209,182,.42);
  padding-block: 32px;
}
.step-key .step-num { color: var(--teal); }
.step-flag {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 10px;
}
.step-key .step-body h3 { font-size: 1.32rem; }

/* ── Work gallery ──────────────────────────────────────── */
.work-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 26px;
}
.work-card { display: flex; flex-direction: column; gap: 16px; }

.browser {
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--line-2);
  background: var(--paper);
  box-shadow: var(--shadow-md);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.work-card:hover .browser { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.browser-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 13px;
  background: linear-gradient(180deg, #f4f7fb, #eaeff6);
  border-bottom: 1px solid var(--line);
}
.browser-bar span {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: rgba(11,31,58,.16);
}
.browser-view {
  aspect-ratio: 16 / 11;
  background: repeating-linear-gradient(-45deg, #f4f7fb 0 12px, #eef3f9 12px 24px);
  display: grid;
  place-items: center;
}
.browser-view img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.ph-note {
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
  line-height: 1.7;
}
.work-meta h3 {
  font-size: 1.05rem;
  font-weight: 620;
  letter-spacing: -.02em;
  margin-bottom: 5px;
}
.work-meta p { color: var(--muted); font-size: .92rem; line-height: 1.55; }
.is-placeholder .work-meta { opacity: .55; }

/* ── Reviews ───────────────────────────────────────────── */
.reviews { margin-top: clamp(48px, 6vw, 76px); padding-top: 44px; border-top: 1px solid var(--line); }
.reviews-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 28px;
  font-size: .95rem;
  color: var(--muted);
}
.stars { color: #f0a92b; letter-spacing: .1em; font-size: 1rem; }

.review-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}
.review {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 26px 26px 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
}
.review blockquote {
  font-size: .96rem;
  line-height: 1.62;
  color: var(--ink);
  text-wrap: pretty;
}
.review-by { font-size: .84rem; line-height: 1.45; }
.review-by strong { display: block; font-weight: 620; color: var(--ink); }
.review-by span { color: var(--muted); }

/* ── FAQ ───────────────────────────────────────────────── */
/* Two columns, echoing the "why free" section: a sticky heading on
   the left instead of 600px of dead space beside the accordion. */
.faq-layout {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(32px, 6vw, 76px);
  align-items: start;
}
.faq-aside { position: sticky; top: 108px; margin-bottom: 0; }
.faq-aside .section-sub { margin-top: 18px; font-size: .96rem; }

.faq { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 24px 44px 24px 0;
  position: relative;
  font-size: 1.08rem;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--ink);
  transition: color .2s var(--ease);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--blue); }
.faq-item summary::after,
.faq-item summary::before {
  content: "";
  position: absolute;
  right: 6px; top: 50%;
  background: var(--brand-navy);
  border-radius: 2px;
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.faq-item summary::before { width: 15px; height: 2px; transform: translateY(-50%); }
.faq-item summary::after  { width: 2px; height: 15px; right: 12.5px; transform: translateY(-50%); }
.faq-item[open] summary::after { transform: translateY(-50%) rotate(90deg); opacity: 0; }
.faq-answer { padding: 0 8% 28px 0; }
.faq-answer p { color: var(--muted); font-size: .99rem; line-height: 1.68; }
.faq-answer p + p { margin-top: 14px; }

/* ── Application ───────────────────────────────────────── */
.apply-section { background: linear-gradient(180deg, var(--paper) 0%, var(--tint) 100%); }
.apply-shell {
  max-width: 820px;
  margin-inline: auto;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: clamp(30px, 5vw, 56px);
  box-shadow: var(--shadow-lg);
  position: relative;
}
/* brace framing — the form is the thing being contained */
.apply-shell::before, .apply-shell::after {
  content: "";
  position: absolute;
  width: 22px;
  height: 52px;
  border: 2px solid var(--brand-blue);
  opacity: .5;
  pointer-events: none;
}
.apply-shell::before {
  top: -2px; left: -2px;
  border-right: 0; border-bottom: 0;
  border-radius: var(--r-xl) 0 0 0;
}
.apply-shell::after {
  bottom: -2px; right: -2px;
  border-left: 0; border-top: 0;
  border-radius: 0 0 var(--r-xl) 0;
}

.apply-head { margin-bottom: 38px; }
.apply-head .eyebrow { margin-bottom: 16px; }
.apply-head .h2 { margin-bottom: 14px; }

.fieldset { border: 0; padding: 0; }
.fieldset + .fieldset { margin-top: 38px; padding-top: 34px; border-top: 1px solid var(--line); }
.legend {
  font-size: 1.02rem;
  font-weight: 620;
  letter-spacing: -.018em;
  margin-bottom: 22px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.legend-num {
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 500;
  color: var(--brand-blue);
  background: var(--tint);
  padding: 4px 9px;
  border-radius: 6px;
  letter-spacing: .04em;
}

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

/* Stack spacing applies ONLY to direct children of a fieldset.
   Scoped deliberately: unscoped `.field + .field` also matched the
   two fields sitting side by side inside a .row and pushed the
   second one 18px down, knocking every pair out of alignment. */
.fieldset > .row + .row,
.fieldset > .row + .field,
.fieldset > .field + .field,
.fieldset > .field + .choice-group,
.fieldset > .row + .choice-group,
.fieldset > .choice-group + .field { margin-top: 18px; }

.field { display: flex; flex-direction: column; }
.field label {
  font-size: .87rem;
  font-weight: 560;
  color: var(--ink);
  margin-bottom: 7px;
  letter-spacing: -.005em;
}
.req { color: var(--blue); }

.field input,
.field select,
.field textarea {
  width: 100%;
  background: var(--paper-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  font-size: .96rem;
  color: var(--ink);
  transition: border-color .18s var(--ease), background-color .18s var(--ease),
              box-shadow .18s var(--ease);
}
.field textarea { resize: vertical; min-height: 92px; line-height: 1.55; }
.field select { appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%235b6b82' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 11px;
  padding-right: 38px;
}
.field input::placeholder, .field textarea::placeholder { color: #93a3b8; }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  background: var(--paper);
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(47,107,255,.16);
}
.field.has-error input,
.field.has-error select,
.field.has-error textarea { border-color: #d64545; background: #fff7f7; }
.field.has-error input:focus,
.field.has-error select:focus,
.field.has-error textarea:focus { box-shadow: 0 0 0 3px rgba(214,69,69,.16); }

.hint { font-size: .8rem; color: var(--muted); margin-top: 6px; line-height: 1.5; }
.hint em { font-family: var(--mono); font-style: normal; font-size: .95em; }
.hint.is-warn { color: #a9591b; }
.err { font-size: .8rem; color: #c33b3b; margin-top: 6px; font-weight: 500; }

.choice-group { border: 0; padding: 0; margin: 0; }
.choice-legend {
  font-size: .87rem;
  font-weight: 560;
  color: var(--ink);
  margin-bottom: 11px;
  max-width: 52ch;
  line-height: 1.5;
}
.choices { display: flex; gap: 10px; }
.choice { cursor: pointer; }
.choice input { position: absolute; opacity: 0; width: 0; height: 0; }
.choice-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 92px;
  padding: 11px 22px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--paper-2);
  font-size: .93rem;
  font-weight: 550;
  transition: all .18s var(--ease);
}
.choice:hover .choice-box { border-color: var(--brand-blue); }
.choice input:checked + .choice-box {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
.choice input:focus-visible + .choice-box {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

/* honeypot — off-screen, never display:none (bots skip those) */
.hp {
  position: absolute !important;
  left: -9999px !important;
  top: auto;
  width: 1px; height: 1px;
  overflow: hidden;
}

.form-status {
  padding: 15px 18px;
  border-radius: var(--r-sm);
  font-size: .93rem;
  line-height: 1.55;
  margin-bottom: 26px;
  border: 1px solid;
}
.form-status.is-error { background: #fff5f5; border-color: #f0c2c2; color: #a12626; }
.form-status.is-info  { background: var(--tint); border-color: #bed3f5; color: #1a3f7a; }

.form-foot {
  margin-top: 34px;
  padding-top: 30px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.btn-submit { min-width: 240px; }
.btn-submit[disabled] { opacity: .62; cursor: progress; transform: none; }
.spinner {
  display: none;
  width: 15px; height: 15px;
  border: 2px solid rgba(255,255,255,.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
.is-sending .spinner { display: block; }
@keyframes spin { to { transform: rotate(360deg); } }

.form-legal { font-size: .82rem; color: var(--muted); line-height: 1.55; max-width: 52ch; }

/* Thanks state */
.thanks { text-align: center; padding-block: 18px; }
/* Focus is moved here programmatically so screen readers land on the
   confirmation. That's an announcement, not keyboard navigation, so
   suppress the ring — it read as a stray blue box around the panel. */
.thanks:focus, .thanks:focus-visible { outline: none; }
.thanks-mark {
  width: 62px; height: 62px;
  border-radius: 50%;
  background: var(--teal);
  margin: 0 auto 26px;
  position: relative;
  animation: pop .5s var(--ease) both;
}
.thanks-mark::after {
  content: "";
  position: absolute; left: 22px; top: 15px;
  width: 15px; height: 27px;
  border: solid var(--ink-deep);
  border-width: 0 3.5px 3.5px 0;
  transform: rotate(43deg);
}
@keyframes pop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.thanks .h2 { margin-bottom: 16px; }
.thanks-body { color: var(--muted); max-width: 46ch; margin-inline: auto; font-size: 1.02rem; }
.thanks-meta { margin-top: 24px; font-size: .9rem; color: var(--muted); }

/* ── Footer ────────────────────────────────────────────── */
.site-footer {
  background: var(--ink-deep);
  color: var(--on-dark-muted);
  padding-block: clamp(48px, 6vw, 72px);
}
.footer-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, .9fr);
  gap: 40px;
  align-items: start;
}
.footer-logo { width: 168px; filter: brightness(0) invert(1); opacity: .92; }
.footer-desc { margin-top: 18px; font-size: .9rem; line-height: 1.65; max-width: 38ch; }
.footer-nav { display: flex; flex-direction: column; gap: 10px; }
.footer-nav a {
  color: var(--on-dark-muted);
  text-decoration: none;
  font-size: .9rem;
  width: fit-content;
  transition: color .18s var(--ease);
}
.footer-nav a:hover { color: #fff; }
.footer-contact { text-align: right; }
.footer-phone {
  font-family: var(--mono);
  font-size: 1.02rem;
  color: #fff;
  text-decoration: none;
  letter-spacing: -.01em;
}
.footer-phone:hover { color: var(--teal); }
.footer-copy { margin-top: 14px; font-size: .8rem; opacity: .8; }

/* ── Reveal ────────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  animation: rise .8s var(--ease) forwards;
  animation-delay: calc(var(--d, 0) * 90ms);
}
/* stagger steps — kept as classes, not inline styles, so the page
   can ship a strict CSP with no 'unsafe-inline' in style-src */
.r1 { --d: 1; }
.r2 { --d: 2; }
.r3 { --d: 3; }
.r4 { --d: 4; }
.r5 { --d: 5; }
@keyframes rise { to { opacity: 1; transform: none; } }

/* ── Responsive ────────────────────────────────────────── */
@media (max-width: 900px) {
  .reason-layout, .faq-layout { grid-template-columns: 1fr; }
  .reason-aside { position: static; display: flex; flex-direction: column; gap: 20px; }
  .faq-aside { position: static; margin-bottom: 36px; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-contact { text-align: left; }
}

@media (max-width: 720px) {
  body { font-size: 16px; }
  .header-counter { display: none; }
  .logo img { width: 148px; }

  /* Tap targets — measured at 390px and raised past the WCAG 2.2
     24x24 floor, with comfortable thumb room on the ones that matter. */
  .logo { display: flex; align-items: center; min-height: 44px; }
  .btn-sm { padding: 12px 18px; }
  .footer-nav { gap: 2px; }
  .footer-nav a { padding-block: 10px; }
  .footer-phone { display: inline-block; padding-block: 11px; }
  .thanks-meta a { display: inline-block; padding: 10px 4px; }
  .trust-strip { grid-template-columns: 1fr 1fr; gap: 22px 18px; }
  .hero-actions { width: 100%; flex-direction: column; }
  .hero-actions .btn { width: 100%; }
  .step { grid-template-columns: 1fr; gap: 4px; padding: 24px 22px; }
  .step-num { padding-top: 0; margin-bottom: 4px; }
  .no-strings { flex-direction: column; align-items: flex-start; }
  .faq-answer { padding-right: 0; }
  .choices { width: 100%; }
  .choice { flex: 1; }
  .choice-box { width: 100%; }
  .btn-submit { width: 100%; }
  .footer-inner { grid-template-columns: 1fr; gap: 32px; }
}

@media (max-width: 400px) {
  .trust-strip { grid-template-columns: 1fr; }
}

/* ── Reduced motion ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ── Print ─────────────────────────────────────────────── */
@media print {
  .site-header, .hero-actions, .hero-grid, .form-foot { display: none; }
  body { font-size: 11pt; }
  .section-dark, .site-footer { background: #fff !important; color: #000 !important; }
}

/* ═══════════════════════════════════════════════════════════
   STEP 2 — optional add-ons, thank-you
   ═══════════════════════════════════════════════════════════ */

/* Room for the fixed summary bar so it never covers content. */
.addons-page { padding-bottom: 168px; }

.addons-head { padding-bottom: clamp(40px, 5vw, 56px); }

/* ── Confirmation ──────────────────────────────────────── */
.received { display: flex; gap: 22px; align-items: flex-start; margin-bottom: 34px; }
.received-mark {
  flex: none;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--teal);
  position: relative;
  margin-top: 4px;
}
.received-mark::after {
  content: "";
  position: absolute; left: 16px; top: 11px;
  width: 11px; height: 20px;
  border: solid var(--ink-deep);
  border-width: 0 3px 3px 0;
  transform: rotate(43deg);
}
.received .h2 { margin-bottom: 10px; }
.received-sub { color: var(--muted); font-size: 1.05rem; max-width: 56ch; line-height: 1.6; }
.received-ref { display: block; margin-top: 8px; font-size: .92rem; }
.received-ref strong { font-family: var(--mono); color: var(--ink); letter-spacing: .02em; }

/* ── "This is optional" banner ─────────────────────────── */
.optional-banner {
  border: 1px solid rgba(31,209,182,.4);
  background: linear-gradient(180deg, rgba(31,209,182,.09), rgba(31,209,182,.03));
  border-radius: var(--r-lg);
  padding: 26px 30px;
  margin-bottom: 26px;
}
.optional-banner-title {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand-navy);
  display: inline-flex;
  gap: .5em;
  margin-bottom: 14px;
}
.optional-banner p { color: var(--ink); font-size: 1rem; line-height: 1.62; max-width: 68ch; }
.optional-banner-skip { margin-top: 14px; font-size: .95rem; color: var(--muted) !important; }
/* Padded so the skip link clears the 24px tap-target floor. It is the
   honest exit from this page and must never be the fiddly option. */
.optional-banner-skip a { display: inline-block; padding: 6px 2px; }

/* ── Included-free reminder ────────────────────────────── */
.included {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 24px 28px;
  background: var(--paper-2);
}
.included-title {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
  font-weight: 500;
}
.included-list { display: flex; flex-wrap: wrap; gap: 10px 26px; }
.included-list li {
  position: relative;
  padding-left: 24px;
  font-size: .93rem;
  color: var(--muted);
}
.included-list li::before {
  content: "";
  position: absolute;
  left: 3px; top: .32em;
  width: 12px; height: 7px;
  border: solid var(--teal);
  border-width: 0 0 2.5px 2.5px;
  transform: rotate(-45deg);
}
.included-list strong { color: var(--ink); }

/* ── Add-on groups ─────────────────────────────────────── */
.addon-group { border: 0; padding: 0; margin: 0; }
.addon-group + .addon-group { margin-top: clamp(40px, 5vw, 60px); }
.addon-group-head { padding: 0; margin-bottom: 20px; display: block; }
.addon-group-head .eyebrow { margin-bottom: 12px; }
.addon-group-title {
  display: block;
  font-size: clamp(1.3rem, 1.1rem + .7vw, 1.65rem);
  font-weight: 640;
  letter-spacing: -.026em;
  color: var(--ink);
  margin-bottom: 8px;
}
.addon-group-blurb {
  display: block;
  color: var(--muted);
  font-size: .98rem;
  line-height: 1.6;
  max-width: 62ch;
}

.choice-cards { display: grid; gap: 10px; }
.choice-cards + .addon-card { margin-top: 10px; }

.addon-card {
  display: flex;
  align-items: center;
  gap: 18px;
  background: var(--paper);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  padding: 20px 24px;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease),
              background-color .18s var(--ease);
}
.addon-card + .addon-card { margin-top: 10px; }
.addon-toggle, .addon-radio { cursor: pointer; }
.addon-toggle:hover, .addon-radio:hover { border-color: var(--brand-blue); }
.addon-card.is-selected {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(42,95,230,.12);
  background: #fbfcff;
}

.addon-main { flex: 1 1 auto; min-width: 0; display: block; }
.addon-name {
  display: block;
  font-size: 1.02rem;
  font-weight: 620;
  letter-spacing: -.018em;
  color: var(--ink);
  margin-bottom: 5px;
}
.addon-desc {
  display: block;
  color: var(--muted);
  font-size: .91rem;
  line-height: 1.55;
  max-width: 62ch;
}
.addon-desc em { color: var(--ink); font-style: italic; }

.addon-price {
  flex: none;
  font-family: var(--mono);
  font-size: 1.02rem;
  font-weight: 500;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
.addon-per { display: block; font-size: .68rem; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; margin-top: 2px; }

/* Checkbox / radio indicators */
.addon-toggle input, .addon-radio input {
  position: absolute; opacity: 0; width: 0; height: 0;
}
.addon-check {
  flex: none;
  width: 22px; height: 22px;
  border: 1.5px solid var(--line-2);
  border-radius: 6px;
  background: var(--paper-2);
  position: relative;
  transition: all .16s var(--ease);
}
.addon-check-round { border-radius: 50%; }
.addon-toggle input:checked + .addon-check,
.addon-radio input:checked + .addon-check {
  background: var(--blue);
  border-color: var(--blue);
}
.addon-toggle input:checked + .addon-check::after {
  content: "";
  position: absolute; left: 7px; top: 3px;
  width: 6px; height: 11px;
  border: solid #fff;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(43deg);
}
.addon-radio input:checked + .addon-check::after {
  content: "";
  position: absolute; inset: 5px;
  border-radius: 50%;
  background: #fff;
}
.addon-toggle input:focus-visible + .addon-check,
.addon-radio input:focus-visible + .addon-check {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

/* ── Quantity stepper ──────────────────────────────────── */
.addon-control { flex: none; display: flex; align-items: center; gap: 18px; }
.stepper {
  display: flex;
  align-items: center;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--paper-2);
}
.stepper-btn {
  width: 44px; height: 44px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color .15s var(--ease);
}
.stepper-btn:hover:not([disabled]) { background: var(--tint); }
.stepper-btn[disabled] { opacity: .35; cursor: not-allowed; }
.stepper-input {
  width: 54px; height: 44px;
  border: 0;
  border-inline: 1px solid var(--line-2);
  background: var(--paper);
  text-align: center;
  font-family: var(--mono);
  font-size: .98rem;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
.stepper-input::-webkit-outer-spin-button,
.stepper-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper-input:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }

/* ── Fixed summary bar ─────────────────────────────────── */
.summary {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  background: rgba(255,255,255,.93);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-top: 1px solid var(--line-2);
  box-shadow: 0 -8px 32px rgba(8,21,46,.09);
  padding-block: 16px 12px;
  padding-bottom: max(12px, env(safe-area-inset-bottom));
}
.summary-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.summary-total { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.summary-label {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.summary-value {
  font-size: 1.6rem;
  font-weight: 640;
  letter-spacing: -.03em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.summary-count { font-size: .86rem; color: var(--muted); }
.summary-actions { display: flex; align-items: center; gap: 12px; }
.summary-fine {
  max-width: var(--wrap);
  margin: 8px auto 0;
  padding-inline: var(--gutter);
  font-size: .78rem;
  color: var(--muted);
}
[data-checkout][disabled] { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
#addons-form.is-sending ~ * [data-checkout] .spinner,
.is-sending .spinner { display: block; }

/* ── Thank-you ─────────────────────────────────────────── */
.done-section { padding-block: clamp(56px, 8vw, 104px); }
.done { max-width: 640px; margin-inline: auto; text-align: center; }
.done .h2 { margin-bottom: 16px; }
.done-body { color: var(--muted); font-size: 1.06rem; line-height: 1.62; }
.done-ref { margin-top: 18px; font-size: .92rem; color: var(--muted); }
.done-ref strong { font-family: var(--mono); color: var(--ink); }

.done-paid {
  margin-top: 34px;
  padding: 26px 30px;
  border: 1px solid rgba(31,209,182,.4);
  background: linear-gradient(180deg, rgba(31,209,182,.09), rgba(31,209,182,.03));
  border-radius: var(--r-lg);
  text-align: left;
}
.done-paid-title { font-size: 1.1rem; font-weight: 640; letter-spacing: -.02em; margin-bottom: 10px; }
.done-paid p { color: var(--muted); font-size: .96rem; line-height: 1.6; }
.done-paid p + p { margin-top: 12px; }
.done-paid-refund strong { color: var(--ink); }

.done-next {
  margin-top: 34px;
  padding-top: 30px;
  border-top: 1px solid var(--line);
  text-align: left;
}
.done-next-title {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  margin-bottom: 18px;
}
.done-steps { display: grid; gap: 14px; }
.done-steps li {
  display: flex;
  gap: 14px;
  align-items: baseline;
  color: var(--muted);
  font-size: .98rem;
  line-height: 1.55;
}
.done-steps span {
  flex: none;
  font-family: var(--mono);
  font-size: .78rem;
  color: var(--brand-blue);
  width: 22px;
}
.done-meta { margin-top: 30px; font-size: .9rem; color: var(--muted); }

.no-strings-foot {
  flex-basis: 100%;
  margin-top: 6px;
  font-size: .88rem;
  line-height: 1.6;
  color: var(--on-dark-muted);
  max-width: 72ch;
}
.no-strings-foot strong { color: var(--on-dark); }

/* ── Responsive ────────────────────────────────────────── */
@media (max-width: 780px) {
  .addons-page { padding-bottom: 208px; }
  .addon-card { flex-wrap: wrap; gap: 12px 16px; padding: 18px 18px; }
  .addon-toggle .addon-main, .addon-radio .addon-main { flex: 1 1 calc(100% - 130px); }
  .addon-control { width: 100%; justify-content: space-between; }
  .summary-inner { flex-direction: column; align-items: stretch; gap: 10px; }
  .summary-actions { width: 100%; }
  .summary-actions .btn { flex: 1; padding-inline: 14px; }
  .included-list { flex-direction: column; gap: 9px; }
}

@media (max-width: 480px) {
  .received { gap: 14px; }
  /* Buttons stay side by side rather than stacking: stacked plus the
     fine print pushed the bar to 252px, a third of a phone screen. */
  .summary { padding-block: 12px 8px; }
  .summary-value { font-size: 1.35rem; }
  .summary-actions .btn { font-size: .9rem; padding: 13px 10px; }
  .summary-fine { font-size: .72rem; margin-top: 6px; line-height: 1.4; }
  .addons-page { padding-bottom: 176px; }
}

/* ── Add-on group illustrations ────────────────────────────
   Placed beside the group heading, into space that was empty on
   desktop, so they cost no extra scrolling on the way to checkout.

   They are CSS backgrounds on decorative spans, NOT <img> — an <img>
   set to display:none is still downloaded, which made phone users
   pay 75KB for four pictures they never see. A background-image
   inside a display:none rule is never fetched at all.

   aria-hidden because the group heading beside them already says
   what each one depicts; alt text would just be noise. */
.addon-group-head {
  display: block;
  width: 100%;
}
.addon-group-text { display: block; min-width: 0; }
.addon-group-art { display: none; }

@media (min-width: 861px) {
  .addon-group-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 28px;
    align-items: center;
  }
  .addon-group-art {
    display: block;
    width: 100%;
    aspect-ratio: 760 / 426;
    justify-self: end;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    /* The drawings arrive on a ~rgb(240,242,247) ground, darker than
       the page, which showed as a hard grey rectangle. brightness
       clips that ground to white (240 x 1.0625 = 255) and multiply
       then erases it, leaving the linework on the page. Measured. */
    filter: brightness(1.07);
    mix-blend-mode: multiply;
  }
  .addon-group-art--scope   { background-image: url("/assets/img/addon-scope.webp"); }
  .addon-group-art--local   { background-image: url("/assets/img/addon-local.webp"); }
  .addon-group-art--content { background-image: url("/assets/img/addon-content.webp"); }
  .addon-group-art--growth  { background-image: url("/assets/img/addon-growth.webp"); }
}

@media (min-width: 861px) and (max-width: 980px) {
  .addon-group-head { grid-template-columns: minmax(0, 1fr) 220px; gap: 20px; }
}