/* =========================================================
   Landing-page framework
   Distilled from 6 brand clones. Import this + a brand.css
   that overrides :root custom properties. That's it.
   ========================================================= */

/* ----- 1. Tokens (override in brand.css) ----- */

:root {
  /* Color roles (6 semantic slots + line + optional accent) */
  --ink:           #111111;
  --ink-soft:      #555555;
  --bg:            #ffffff;
  --surface:       #f7f5f3;
  --brand:         #2f9146;
  --brand-hover:   #1d6931;
  --brand-deep:    #0f5c34;
  --line:          #e9e6df;
  --accent:        var(--brand);   /* override only if brand has a 2nd color */
  --star:          #f5b30a;
  --danger:        #d4362c;
  --ok:            #18a16b;

  /* Fonts (override in brand.css) */
  --font-display:  "Inter", system-ui, sans-serif;
  --font-sans:     "Inter", system-ui, sans-serif;

  /* Radii (one brand knob, applied everywhere) */
  --radius:        8px;
  --radius-pill:   999px;

  /* Button text — override in brand.css when primary is a light tone
     (mint, coral, orange, lime) so white text doesn't fail AA contrast. */
  --btn-primary-text: #fff;

  /* Layout */
  --container:     1280px;
  --pad:           32px;

  /* Type scale */
  --fs-h1:         64px;
  --fs-h1-lh:      1.05;
  --fs-h2:         48px;
  --fs-h2-lh:      1.08;
  --fs-h3:         22px;
  --fs-body:       16px;
  --fs-meta:       13px;
  --tracking-tight: -0.02em;

  /* Motion */
  --t-fast:        .15s ease;
  --t-mid:         .25s ease;
}

/* ----- 2. Reset ----- */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; overflow-x: clip; }
body {
  background: var(--bg);
  color: var(--ink);
  font: 400 var(--fs-body)/1.5 var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; border: 0; cursor: pointer; background: none; color: inherit; }
img, svg, video { display: block; max-width: 100%; }
h1, h2, h3, h4, h5, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; }

/* ----- 3. Layout primitives ----- */

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

.section {
  padding: 96px 0;
}
.section--surface { background: var(--surface); }
.section--dark    { background: var(--brand-deep); color: #fff; }
.section--dark h1, .section--dark h2, .section--dark h3 { color: #fff; }
.section--brand   { background: var(--brand); color: var(--ink); }

.grid   { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
/* Grid children must not blow out 1fr tracks; aspect-ratio min-content can otherwise force columns wider than viewport (e.g., .split__media at narrow viewports). */
.split > * { min-width: 0; }
.split--reverse .split__media { order: 2; }

.stack   { display: flex; flex-direction: column; gap: 16px; }
.row     { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }

/* ----- 4. Typography ----- */

.h1, h1 {
  font: 500 var(--fs-h1)/var(--fs-h1-lh) var(--font-display);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
}
.h2, h2, .section-title {
  font: 500 var(--fs-h2)/var(--fs-h2-lh) var(--font-display);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
  max-width: 760px;
}
.section-title { margin-bottom: 40px; }
.section-title:has(+ .section-sub) { margin-bottom: 0; }
.h2--center, .section-title--center { margin-inline: auto; text-align: center; }
@media (max-width: 640px) {
  .section-title { margin-bottom: 28px; }
}
.h3, h3 {
  font: 600 var(--fs-h3)/1.2 var(--font-display);
  color: var(--ink);
}
.sub, .section-sub {
  font-size: 18px;
  color: var(--ink-soft);
  max-width: 640px;
  margin: 16px 0 40px;
  line-height: 1.5;
}
.sub--center { margin-inline: auto; text-align: center; }
.meta { font-size: var(--fs-meta); color: var(--ink-soft); letter-spacing: .02em; }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 16px;
}
.pill-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  background: var(--accent);
  color: var(--ink);
  font-weight: 700;
  font-size: 13px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 20px;
}

/* ----- 5. Buttons (two tiers + invert for dark bg) ----- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 24px;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn--primary { background: var(--brand); color: var(--btn-primary-text); }
.btn--primary:hover { background: var(--brand-hover); color: var(--btn-primary-text); }
.btn--ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
.btn--ghost:hover { background: var(--ink); color: #fff; }
.btn--invert { background: #fff; color: var(--ink); }
.btn--invert:hover { background: var(--surface); }
.btn--dark { background: var(--brand-deep); color: #fff; }
.btn--dark:hover { background: color-mix(in oklab, var(--brand-deep) 80%, black); color: #fff; }
.btn--lg { height: 56px; padding: 0 32px; font-size: 17px; }
.btn--block { width: 100%; }
.btn--pill { border-radius: var(--radius-pill); }

/* ----- 6. Utility bar (optional top strip) ----- */

.bar {
  background: var(--brand-deep);
  color: #fff;
  font-size: 13px;
  padding: 10px 0;
  text-align: center;
}
.bar a { color: #fff; }
.bar a:hover { text-decoration: underline; }

/* ----- 7. Header ----- */

.header {
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 20;
}
.header__inner {
  height: 72px;
  display: flex;
  align-items: center;
  gap: 32px;
}
.brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--brand-deep);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.nav { display: flex; gap: 24px; font-size: 15px; font-weight: 500; }
.nav a { color: var(--ink); padding: 8px 0; }
.nav a:hover { color: var(--brand); }
.header__right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.icon-btn {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--ink);
  transition: background var(--t-fast);
}
.icon-btn:hover { background: var(--surface); }

/* ----- 8. Hero (three shapes) ----- */

.hero { padding: 96px 0; background: var(--surface); }
.hero--plain { background: var(--bg); }

.hero--split .hero__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.hero--split .hero__media {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius);
  background: var(--surface) center/cover;
}

.hero--fullbleed {
  position: relative;
  padding: 128px 0;
  color: #fff;
  background: var(--brand-deep) center/cover;
  overflow: hidden;
}
.hero--fullbleed::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg,
    color-mix(in oklab, var(--brand-deep) 92%, transparent) 0%,
    color-mix(in oklab, var(--brand-deep) 55%, transparent) 60%,
    transparent 100%);
  pointer-events: none;
}
.hero--fullbleed .hero__inner { position: relative; z-index: 1; }
.hero--fullbleed h1 { color: #fff; }

.hero--card { background: var(--surface); padding: 20px 20px 64px; }
.hero--card .hero__inner {
  background: linear-gradient(82deg, var(--brand-deep) -18%, var(--brand) 112%);
  border-radius: 24px;
  padding: 84px 80px;
  color: #fff;
  display: grid;
  grid-template-columns: 1fr 500px;
  gap: 48px;
  align-items: center;
  overflow: hidden;
}
.hero--card h1 { color: #fff; }
.hero--card .hero__media {
  align-self: stretch;
  background: center/cover;
  border-radius: var(--radius);
  min-height: 520px;
}

.hero__sub { color: inherit; opacity: .88; max-width: 520px; margin-bottom: 32px; }

/* H1 in-line accent: italicize one pivot word + optional hand-drawn marker SVG */
.hero__accent {
  font-style: italic;
  color: var(--brand);
  position: relative;
  white-space: nowrap;
}
.hero__accent--marker::after {
  content: "";
  position: absolute;
  left: -8px; right: -8px; top: 6px; bottom: -4px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 80' fill='none'><path d='M 18 40 C 18 10, 60 5, 100 8 C 170 12, 195 20, 192 48 C 188 72, 120 74, 60 70 C 20 66, 12 55, 22 42' stroke='%23eb6424' stroke-width='3.5' stroke-linecap='round'/></svg>") center/100% 100% no-repeat;
  pointer-events: none;
  transform: rotate(-1.2deg);
  z-index: -1;
}
.hero__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; }
.hero__note { font-size: 13px; opacity: .8; }

/* Inline trust row inside hero (below CTA) */
.hero-trust {
  display: flex; gap: 32px; flex-wrap: wrap;
  margin-top: 24px;
  font-size: 14px;
  color: inherit;
  opacity: .9;
}
.hero-trust > div { display: inline-flex; align-items: center; gap: 10px; }
.hero-trust svg { flex: 0 0 20px; }

/* ----- 8b. Hero — quote-gate (form IS the hero; Register A lead-gen) -----
   Dark hero with an optional photo underlay + gradient fade, split 2-col on
   desktop (copy left, form right), stacked on mobile. Pair with .quote-form
   or .quote-form--bare inside .hero__inner.

   Set the photo via inline background-image (NOT a CSS variable — url()
   inside a var() resolves relative to framework.css, not the HTML):
     <section class="hero hero--quote-gate"
              style="background-image: url('assets/hero.png')">
   Omit the inline style for a solid-color hero.
   ---------------------------------------------------------------------- */

.hero--quote-gate {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 96px 0;
  background-color: var(--brand-deep);
  background-position: center 35%;
  background-size: cover;
  background-repeat: no-repeat;
  color: #fff;
}
.hero--quote-gate::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(95deg,
    color-mix(in oklab, var(--brand-deep) 97%, transparent) 0%,
    color-mix(in oklab, var(--brand-deep) 88%, transparent) 45%,
    color-mix(in oklab, var(--brand-deep) 62%, transparent) 100%);
  pointer-events: none;
}
.hero--quote-gate .container { position: relative; }
.hero--quote-gate h1 { color: #fff; }
.hero--quote-gate .hero__sub { color: rgba(255,255,255,.86); max-width: 560px; opacity: 1; }
.hero--quote-gate .eyebrow { color: var(--accent); }
.hero--quote-gate .hero__inner {
  display: grid;
  grid-template-columns: 1.05fr 470px;
  gap: 56px;
  align-items: center;
}
.hero--quote-gate .hero-trust {
  color: rgba(255,255,255,.92);
  margin-top: 28px;
}
.hero--quote-gate .hero-trust svg { color: var(--accent); }

/* Quote form card — white-on-dark (Sunrun pattern, default).
   For a transparent form directly on the dark bg, add .quote-form--bare. */
.quote-form {
  background: #fff;
  color: var(--ink);
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 24px 60px rgba(0,0,0,.28);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.quote-form__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  color: var(--ink);
  margin: 0;
}
.quote-form__sub {
  font-size: 14px;
  color: var(--ink-soft);
  margin: -6px 0 8px;
}
.quote-form__field { display: flex; flex-direction: column; gap: 6px; }
.quote-form__row   { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.quote-form label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink-soft);
}
.quote-form input,
.quote-form select {
  width: 100%;
  height: 52px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font: inherit;
  color: var(--ink);
  background: #fff;
}
.quote-form input:focus,
.quote-form select:focus {
  outline: 2px solid var(--brand);
  outline-offset: -1px;
}
.quote-form .btn { width: 100%; margin-top: 4px; height: 56px; font-size: 17px; }
.quote-form__fine {
  font-size: 12px;
  color: var(--ink-soft);
  margin: 8px 0 0;
  text-align: center;
  line-height: 1.5;
}

/* --bare: form sits directly on the dark hero bg (SoFi pattern) */
.quote-form--bare {
  background: transparent;
  color: #fff;
  padding: 0;
  box-shadow: none;
}
.quote-form--bare .quote-form__title { color: #fff; }
.quote-form--bare .quote-form__sub   { color: rgba(255,255,255,.75); }
.quote-form--bare label              { color: rgba(255,255,255,.86); }
.quote-form--bare input,
.quote-form--bare select {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.22);
  color: #fff;
}
.quote-form--bare input::placeholder { color: rgba(255,255,255,.5); }
.quote-form--bare select option { background: var(--brand-deep); color: #fff; }

/* ----- 9. Trust strip (separate section) ----- */

.trust-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 32px;
  align-items: center;
  justify-items: center;
}
.trust-strip__item {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 20px;
  color: var(--ink-soft);
  opacity: .85;
  letter-spacing: .02em;
  text-align: center;
}

/* ----- 10. Stats (3-4 big numbers) ----- */

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  text-align: center;
}
.stat__num {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 48px;
  line-height: 1;
  color: var(--brand-deep);
  margin: 0 0 8px;
  letter-spacing: var(--tracking-tight);
}
.stat__label {
  font-size: 15px;
  color: var(--ink-soft);
  max-width: 240px;
  margin: 0 auto;
}

/* ----- 10b. Dark stats band (variant — stats on brand-deep bg with a photo) ----- */

.stats-band {
  background: var(--brand-deep);
  color: #fff;
  padding: 80px 0;
}
.stats-band__inner {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 64px;
  align-items: center;
}
.stats-band h2 { color: #fff; margin-bottom: 32px; }
.stats-band .stats {
  grid-template-columns: repeat(3, 1fr);
  color: #fff;
}
.stats-band .stat__num { color: #fff; }
.stats-band .stat__label { color: rgba(255, 255, 255, 0.72); }
.stats-band__media {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.06) center/cover;
}

/* ----- 11. Steps (3 or 4 numbered cards) ----- */

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.steps.grid-4 { grid-template-columns: repeat(4, 1fr); }
.step {
  background: var(--bg);
  border-radius: var(--radius);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  border: 1px solid var(--line);
}
.step__num {
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 700;
  color: var(--brand);
  line-height: 1;
}
.step__num--circle {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  display: grid; place-items: center;
  font-size: 20px;
}
.step h3 { margin: 0; }
.step p { color: var(--ink-soft); margin: 0; font-size: 15px; }

/* ----- 12. Features (3 or 4-up) ----- */

.features { display: grid; gap: 32px; }
.features.grid-3 { grid-template-columns: repeat(3, 1fr); }
.features.grid-4 { grid-template-columns: repeat(4, 1fr); }
.feature { display: flex; flex-direction: column; gap: 12px; }
.feature__icon {
  width: 48px; height: 48px;
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--brand);
  display: grid; place-items: center;
}
.section--dark .feature__icon { background: rgba(255,255,255,.1); color: #fff; }
.feature__icon svg { width: 22px; height: 22px; }
.feature h3 { font-size: 20px; }
.feature p { color: var(--ink-soft); font-size: 15px; margin: 0; line-height: 1.5; }
.section--dark .feature p { color: rgba(255, 255, 255, 0.78); }

/* ----- 13. Split feature (photo + copy, alternates) ----- */

.split__media {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  background: var(--surface) center/cover;
  max-width: 100%;
}
.split-feature h2 { margin-bottom: 16px; }
.split-feature p { color: var(--ink-soft); font-size: 17px; margin: 0 0 24px; }

/* Custom bullet list (used in split-feature + hero bullets) */
.check-list { list-style: none; padding: 0; display: grid; gap: 12px; margin: 0 0 24px; }
.check-list li {
  display: flex; gap: 12px; align-items: flex-start;
  font-size: 16px;
}
.check-list li::before {
  content: "";
  flex: 0 0 20px;
  width: 20px; height: 20px;
  margin-top: 2px;
  background: var(--brand);
  border-radius: 50%;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 12l5 5 10-11' stroke='white' stroke-width='3' fill='none'/></svg>") center/12px no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 12l5 5 10-11' stroke='white' stroke-width='3' fill='none'/></svg>") center/12px no-repeat;
}
.section--dark .check-list li::before { background: var(--accent); }

/* ----- 14. Product / plan cards ----- */

.products { display: grid; gap: 24px; }
.products.grid-3 { grid-template-columns: repeat(3, 1fr); }
.products.grid-4 { grid-template-columns: repeat(4, 1fr); }
.products.grid-2 { grid-template-columns: repeat(2, 1fr); }
.product {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform var(--t-mid), box-shadow var(--t-mid);
}
.product:hover { transform: translateY(-3px); box-shadow: 0 14px 28px rgba(0,0,0,.08); }
.product__media {
  aspect-ratio: 1 / 1;
  background: var(--surface) center/cover;
}
.product__body { padding: 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.product__tag {
  display: inline-block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
  color: var(--brand);
  padding: 4px 8px;
  background: var(--surface);
  border-radius: 999px;
  align-self: flex-start;
}
.product h3 { font-size: 18px; margin: 0; }
.product__price { font-size: 15px; color: var(--ink-soft); }
.product__price strong { color: var(--ink); font-weight: 700; }

/* Plan (highlight variant) */
.plan { padding: 40px 32px; }
.plan--highlight {
  border: 2px solid var(--brand);
  box-shadow: 0 8px 24px rgba(0,0,0,.04);
}
.plan__price {
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
}
.plan__price small {
  font-size: 15px; color: var(--ink-soft); font-weight: 500; margin-left: 4px;
}

/* ----- 15. Compare table ----- */

.compare {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  font-size: 15px;
  background: var(--bg);
  table-layout: fixed;
}
.compare th, .compare td {
  padding: 20px 24px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  overflow-wrap: anywhere;
}
.compare thead th {
  background: var(--bg);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  text-align: center;
}
.compare thead th.highlight {
  background: var(--brand-deep);
  color: #fff;
}
.compare tbody td { text-align: center; color: var(--ink-soft); }
.compare tbody td:first-child { text-align: left; color: var(--ink); font-weight: 500; }
.compare tbody td.ok { color: var(--brand-deep); font-weight: 600; }
.compare tr:last-child td { border-bottom: 0; }

/* Pricing-row variant of the compare table — adds tabular-nums + tfoot footnote slot */

.compare--pricing tbody td:not(:first-child) {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
.compare--pricing tfoot td {
  background: var(--surface);
  color: var(--ink-soft);
  font-size: 13px;
  text-align: left;
  padding: 16px 24px;
  border-top: 1px solid var(--line);
}

/* Brand-column spotlight — Misen / Harry's / Allbirds DTC pattern.
   Frames the brand column (col 2: after the label) in a brand-blue rounded box,
   so the recommended choice visually pops vs the competitor columns.
   Default for DTC comparison archetypes (8e/8f/8g, and 8a in DTC contexts).
   Assumes brand = col 2 (label, brand, comp1, comp2…) — the canonical DTC layout. */

.compare--spotlight {
  border: none;            /* drop the framework's 1px outer border — the spotlight IS the box */
  background: transparent;
  border-radius: 0;
  overflow: visible;       /* allow per-cell border-radius to render on tbody td:nth-child(2) */
}
.compare--spotlight thead th.highlight {
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
  border-left: 2px solid var(--brand);
  border-right: 2px solid var(--brand);
  border-top: 2px solid var(--brand);
  border-bottom: 2px solid var(--brand);
}
.compare--spotlight tbody td:nth-child(2) {
  border-left: 2px solid var(--brand);
  border-right: 2px solid var(--brand);
  background: var(--bg);
}
.compare--spotlight tbody tr:last-child td:nth-child(2) {
  border-bottom: 2px solid var(--brand);
  border-bottom-left-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
}

/* Source-link icon — small superscript ↗ next to a value, citing competitor's own page */

.compare td a.compare__src,
.compare td a.compare__src:visited {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 0.75em;
  margin-left: 4px;
  vertical-align: super;
  line-height: 1;
}
.compare td a.compare__src:hover {
  color: var(--brand);
  text-decoration: underline;
}
.compare td a.compare__src::after {
  content: " \2197";   /* ↗ — north-east arrow */
}

/* Multi-competitor / ecommerce compare extensions — distilled from 4 ecommerce clones.
   - Scroll wrapper for tables that exceed mobile width (>3 cols at 375px)
   - Semantic-table support: <th scope="row"> mirrors td:first-child styling
   - Highlighted brand row: <tr class="compare__hero-row"> for "us vs N competitors" pages
   - Directional cells: td.win (we win this row, brand color) vs td.lose (we lose, danger color) */

.compare-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 calc(var(--pad) * -1);
  padding: 0 var(--pad);
}
.compare-scroll .compare { min-width: 640px; }

.compare tbody th[scope="row"] {
  text-align: left;
  color: var(--ink);
  font-weight: 500;
  background: var(--bg);
  font-family: var(--font-sans);
  font-size: inherit;
}
.compare tbody tr.compare__hero-row th[scope="row"],
.compare tbody tr.compare__hero-row td {
  background: var(--brand);
  color: #fff;
  font-weight: 600;
}
.compare tbody tr.compare__hero-row td.ok { color: #fff; }   /* override default ok color on dark bg */

.compare tbody td.win  { color: var(--ok); font-weight: 700; }
.compare tbody td.lose { color: var(--danger); font-weight: 700; }

/* ----- 16. Testimonials (uniform 3-up OR asymmetric bento) ----- */

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

/* Bento — 1 featured large card + 3 supporting smaller cards, asymmetric */
.bento {
  display: grid;
  grid-template-columns: 1.25fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 20px;
}
.bento > :nth-child(1) { grid-row: span 2; }
.bento > :nth-child(4) { grid-column: span 2; }
.bento .testimonial__quote { font-size: 20px; }
.bento > :nth-child(1) .testimonial__quote { font-size: 26px; }
.testimonial {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  display: flex; flex-direction: column; gap: 14px;
}
.section--surface .testimonial { background: var(--bg); }
.testimonial__stars { color: var(--star); letter-spacing: 2px; font-size: 14px; }
.testimonial__quote {
  font-size: 17px;
  line-height: 1.45;
  margin: 0;
  color: var(--ink);
}
.testimonial__quote--serif {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 400;
  font-style: italic;
}
.testimonial__by { font-size: 13px; color: var(--ink-soft); margin-top: auto; }
.testimonial__by strong { display: block; color: var(--ink); font-weight: 600; font-size: 14px; margin-bottom: 2px; }

/* ----- 17. FAQ (native details) ----- */

.faq { max-width: 880px; margin: 0 auto; }
.faq details { border-bottom: 1px solid var(--line); padding: 20px 0; }
.faq summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-weight: 300;
  font-size: 26px;
  line-height: 1;
  color: var(--brand);
  transition: transform var(--t-mid);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq__body {
  padding-top: 10px;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.6;
  max-width: 720px;
}

/* ----- 18. Closing CTA band ----- */

.cta-band {
  padding: 80px 0;
  background: var(--brand-deep);
  color: #fff;
  text-align: center;
}
.cta-band--brand { background: var(--brand); color: var(--ink); }
.cta-band h2 { color: inherit; margin: 0 0 16px; max-width: 620px; margin-inline: auto; }
.cta-band p { color: inherit; opacity: .82; max-width: 520px; margin: 0 auto 28px; font-size: 17px; }

/* ----- 18b. Mission band ---------------------------------------------
   A non-urgency, non-CTA horizontal strip for donation / purpose-driven
   brands (Bombas "One purchased = one donated", TOMS, Patagonia 1% for
   the Planet, Warby Parker Buy a Pair Give a Pair). Sits directly
   below the hero so mission is first-impression, not buried. Uses
   --accent (brand's secondary / mission color) so it reads as its own
   register — not a CTA, not urgency.
   -------------------------------------------------------------------- */

.mission-band {
  padding: 64px 0;
  background: var(--accent);
  color: var(--ink);
  text-align: center;
}
.mission-band h2 {
  color: inherit;
  margin: 0 auto 12px;
  max-width: 920px;
  font-size: 40px;
}
.mission-band p {
  color: inherit;
  opacity: .82;
  max-width: 620px;
  margin: 0 auto 24px;
  font-size: 17px;
}

/* Inline newsletter input variant */
.newsletter-form {
  display: flex; gap: 12px; max-width: 520px;
  margin: 0 auto; flex-wrap: wrap; justify-content: center;
}
.newsletter-form input {
  flex: 1 1 260px;
  height: 56px;
  padding: 0 20px;
  border-radius: var(--radius-pill);
  border: 0;
  font: inherit;
  background: #fff;
  color: var(--ink);
}

/* ----- 18c. Urgency band — single-line banner ---------------------------
   Archetype #5 / CLAUDE.md §4.4: AT MOST ONE of these between hero and the
   rest of the page. Two stacked bands reads as disorienting noise. If you
   need more than one signal, move the others inline into the hero.

   Variants: --accent (default), --brand, --dark, --ok, --danger.
   ------------------------------------------------------------------------ */

.urgency-band {
  background: var(--accent);
  color: var(--ink);
  padding: 14px 0;
  font-weight: 600;
  font-size: 15px;
  text-align: center;
}
.urgency-band__inner {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.urgency-band svg { flex: 0 0 18px; width: 18px; height: 18px; }
.urgency-band--brand  { background: var(--brand);      color: var(--btn-primary-text, #fff); }
.urgency-band--dark   { background: var(--brand-deep); color: #fff; }
.urgency-band--ok     { background: var(--ok);         color: #fff; }
.urgency-band--danger { background: var(--danger);     color: #fff; }

/* ----- 19. Footer ----- */

.footer {
  background: var(--brand-deep);
  color: #fff;
  padding: 72px 0 32px;
}
.footer--surface { background: var(--surface); color: var(--ink); }
.footer__inner {
  display: grid;
  grid-template-columns: 1.3fr repeat(4, 1fr);
  gap: 48px;
}
.footer__brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  margin-bottom: 12px;
  color: inherit;
}
.footer__tag {
  font-size: 14px;
  opacity: .72;
  max-width: 260px;
  margin-bottom: 20px;
  line-height: 1.55;
}
.footer__col h4 {
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 14px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: inherit;
}
.footer__col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.footer__col a { opacity: .78; font-size: 14px; color: inherit; }
.footer__col a:hover { opacity: 1; }
.footer__legal {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid currentColor;
  border-top-color: rgba(255,255,255,.15);
  font-size: 12px;
  opacity: .55;
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
.footer--surface .footer__legal { border-top-color: var(--line); }

/* ----- 20. Small bits (avatars, stars, pills) ----- */

.avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--surface) center/cover;
  flex: 0 0 48px;
}
.stars { color: var(--star); letter-spacing: 2px; font-size: 14px; }
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  background: var(--surface);
  color: var(--brand-deep);
  font-size: 12px;
  font-weight: 600;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* Discount card (hero) */
.discount-card {
  display: inline-flex;
  gap: 16px;
  align-items: center;
  padding: 20px 24px;
  border: 2px solid var(--brand);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--ink);
  margin-bottom: 24px;
}
.discount-card strong {
  font-family: var(--font-display);
  font-size: 32px;
  color: var(--brand-deep);
}

/* Pill nav (e.g. taste/plan selector on dark bg) */
.pill-row { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.pill {
  padding: 12px 20px;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .04em;
  transition: background var(--t-fast);
}
.pill.is-active { background: var(--accent); color: var(--ink); }
.pill:hover { background: rgba(255,255,255,.26); }

/* Wreath trust badge */
.wreath { display: inline-flex; align-items: center; gap: 6px; min-width: 140px; }
.wreath__leaf { width: 24px; height: 44px; color: currentColor; opacity: .7; }
.wreath__body { text-align: center; flex: 1; }
.wreath__kicker { font-family: var(--font-display); font-weight: 700; font-size: 18px; line-height: 1.1; }
.wreath__sub { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; opacity: .78; margin-top: 2px; }

/* ----- 20b. Header phone link ------------------------------------------
   Inline phone number in the header right-side (Register A). Paired with
   .sticky-call: at ≤640 the header phone auto-hides so the row doesn't
   wrap (and the sticky-call covers the same intent).
   ------------------------------------------------------------------------ */

.header__phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--brand);
  font-weight: 600;
  font-size: 15px;
}
.header__phone svg { width: 16px; height: 16px; }

/* ----- 20c. Sticky mobile call CTA (Register A / lead-gen) --------------
   Fixed-bottom bar on mobile that captures repeat-impression phone callers.
   Shows only at ≤640. When this element exists, the body gets bottom
   padding so content clears it, AND any .header__phone auto-hides — the
   two patterns are redundant on mobile and stacking them wrecks the row.
   ------------------------------------------------------------------------ */

.sticky-call {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  display: none;
  z-index: 30;
  background: var(--brand);
  color: #fff;
  padding: 12px 16px;
  box-shadow: 0 -4px 20px rgba(0,0,0,.15);
}
.sticky-call__inner {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}
.sticky-call__label { font-weight: 600; font-size: 14px; }
.sticky-call__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  background: var(--accent);
  color: var(--ink);
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 15px;
}
.sticky-call__btn svg { width: 16px; height: 16px; }

/* ----- 21. Responsive ----- */

@media (max-width: 1024px) {
  :root {
    --pad: 24px;
    --fs-h1: 44px;
    --fs-h2: 34px;
  }
  .section { padding: 72px 0; }
  .hero { padding: 72px 0; }
  .hero--fullbleed { padding: 96px 0; }
  .hero--split .hero__inner,
  .hero--card .hero__inner,
  .hero--quote-gate .hero__inner,
  .split { grid-template-columns: 1fr; gap: 32px; }
  .hero--quote-gate { padding: 56px 0 72px; }
  .hero--card .hero__inner { padding: 48px 32px; }
  .hero--card .hero__media { aspect-ratio: 16 / 10; min-height: 0; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .steps, .features.grid-4, .testimonials { grid-template-columns: 1fr; gap: 24px; }
  .features.grid-3 { grid-template-columns: repeat(2, 1fr); }
  .products.grid-4 { grid-template-columns: repeat(2, 1fr); }
  .trust-strip { grid-template-columns: repeat(3, 1fr); }
  .footer__inner { grid-template-columns: 1fr 1fr; }
  .stats-band__inner { grid-template-columns: 1fr; gap: 40px; }
  .bento { grid-template-columns: 1fr 1fr; grid-template-rows: none; gap: 16px; }
  .bento > :nth-child(1) { grid-row: auto; grid-column: span 2; }
  .bento > :nth-child(4) { grid-column: span 2; }
  .steps.grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  :root {
    --pad: 20px;
    --fs-h1: 36px;
    --fs-h2: 28px;
    --fs-h3: 20px;
  }
  .section { padding: 56px 0; }
  .hero { padding: 56px 0; }
  .nav { display: none; }
  .header__inner { gap: 16px; }
  .features.grid-3,
  .products.grid-3,
  .products.grid-4,
  .products.grid-2,
  .bento,
  .steps.grid-4 { grid-template-columns: 1fr; }
  .bento > * { grid-column: auto !important; grid-row: auto !important; }
  .trust-strip { grid-template-columns: repeat(2, 1fr); }
  .footer__inner { grid-template-columns: 1fr; gap: 32px; }
  .footer__legal { flex-direction: column; gap: 8px; }
  .compare th, .compare td { padding: 12px 10px; font-size: 13px; }
  .compare thead th { font-size: 14px; }
  .hero--quote-gate { padding: 40px 0 56px; padding-bottom: 96px; }
  .quote-form { padding: 24px; }
  .urgency-band { font-size: 13px; padding: 12px 0; }

  /* Sticky-call reveal + ripple-effects on adjacent patterns */
  .sticky-call { display: block; }
  body:has(.sticky-call) { padding-bottom: 72px; }
  body:has(.sticky-call) .header__phone { display: none; }
}

/* ----- 22. Print / reduce motion ----- */

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0s !important; animation-duration: 0s !important; }
}

/* ----- 23. Comparison hero (vs-lockup) ----- */

.lp-vs-hero {
  padding: 96px 0 80px;
  background: var(--bg);
  text-align: center;
}
.lp-vs-hero__lockup {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-bottom: 32px;
  min-height: 56px;
}
.lp-vs-hero__lockup img {
  height: 40px;
  max-width: 220px;
  object-fit: contain;
  display: block;
}
.lp-vs-hero__vs {
  font: 600 22px/1 var(--font-display);
  color: var(--ink-soft);
  letter-spacing: 0.04em;
  text-transform: lowercase;
}
.lp-vs-hero h1 {
  font: 500 var(--fs-h1)/var(--fs-h1-lh) var(--font-display);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 16px;
  max-width: 880px;
  margin-inline: auto;
}
.lp-vs-hero__sub {
  font: 400 20px/1.45 var(--font-sans);
  color: var(--ink-soft);
  max-width: 720px;
  margin: 0 auto 32px;
}
.lp-vs-hero .btn {
  /* consume existing .btn primary; this is just a sizing hook */
  min-width: 220px;
}

@media (max-width: 640px) {
  .lp-vs-hero { padding: 64px 0 48px; }
  .lp-vs-hero__lockup { gap: 16px; }
  .lp-vs-hero__lockup img { height: 32px; max-width: 160px; }
  .lp-vs-hero__vs { font-size: 18px; }
  .lp-vs-hero__sub { font-size: 17px; }
}

/* ----- 24. When competitor wins ----- */

.lp-when-them {
  padding: 80px 0;
  background: var(--surface);
}
.lp-when-them__title {
  font: 500 var(--fs-h2)/var(--fs-h2-lh) var(--font-display);
  text-align: center;
  margin: 0 0 16px;
  max-width: 760px;
  margin-inline: auto;
  letter-spacing: var(--tracking-tight);
}
.lp-when-them__sub {
  font: 400 18px/1.5 var(--font-sans);
  color: var(--ink-soft);
  text-align: center;
  margin: 0 auto 40px;
  max-width: 640px;
}
.lp-when-them__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  max-width: 1080px;
  margin-inline: auto;
  list-style: none;
  padding: 0;
}
.lp-when-them__item {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 24px;
  text-align: left;
}
.lp-when-them__item h3 {
  font: 600 18px/1.3 var(--font-display);
  margin: 0 0 8px;
}
.lp-when-them__item p {
  font: 400 15px/1.5 var(--font-sans);
  color: var(--ink-soft);
  margin: 0;
}

@media (max-width: 1024px) {
  .lp-when-them__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .lp-when-them { padding: 56px 0; }
  .lp-when-them__list { grid-template-columns: 1fr; }
}

/* ----- 25. Switcher testimonial ----- */

.lp-switcher-card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 40px 36px;
  max-width: 720px;
  margin: 0 auto;
  position: relative;
}
.lp-switcher-card__chip {
  position: absolute;
  top: -14px;
  left: 36px;
  background: var(--brand-deep);
  color: #fff;
  font: 600 12px/1 var(--font-sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 8px 12px;
  border-radius: 999px;
}
.lp-switcher-card__quote {
  font: 400 22px/1.45 var(--font-display);
  color: var(--ink);
  margin: 12px 0 24px;
  letter-spacing: -0.01em;
}
.lp-switcher-card__quote::before { content: "\201C"; }
.lp-switcher-card__quote::after  { content: "\201D"; }
.lp-switcher-card__byline {
  display: flex;
  align-items: center;
  gap: 12px;
  font: 500 14px/1.4 var(--font-sans);
}
.lp-switcher-card__byline strong { color: var(--ink); }
.lp-switcher-card__byline span   { color: var(--ink-soft); font-weight: 400; }

@media (max-width: 640px) {
  .lp-switcher-card { padding: 32px 24px; }
  .lp-switcher-card__quote { font-size: 18px; }
}

/* ----- 26. Migration band ----- */

.lp-migration-band {
  padding: 72px 0;
  background: var(--brand-deep);
  color: #fff;
  text-align: center;
}
.lp-migration-band h2 {
  font: 500 var(--fs-h2)/var(--fs-h2-lh) var(--font-display);
  color: #fff;
  margin: 0 auto 16px;
  letter-spacing: var(--tracking-tight);
  max-width: 760px;
}
.lp-migration-band p {
  font: 400 19px/1.5 var(--font-sans);
  color: rgba(255,255,255,0.85);
  margin: 0 auto 32px;
  max-width: 640px;
}
.lp-migration-band .btn {
  background: var(--brand);
  color: var(--btn-primary-text);
}

@media (max-width: 640px) {
  .lp-migration-band { padding: 56px 0; }
  .lp-migration-band p { font-size: 17px; }
}