/* ============================================================
   WELDECK — HOMEPAGE   (all color/type/space via tokens.css)
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; }
p { margin: 0 0 var(--s2); }
h1,h2,h3,h4 { margin: 0 0 var(--s2); line-height: 1.14; color: var(--ink-strong); font-family: var(--font-display); font-weight: 500; letter-spacing: -0.015em; }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.4rem); }
h3 { font-size: clamp(1.15rem, 2.2vw, 1.35rem); }
.hl { background: var(--accent); color: var(--ink-strong); padding: 0 .14em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.wrap        { max-width: var(--wrap);        margin: 0 auto; padding: 0 var(--s3); }
.wrap-narrow { max-width: var(--wrap-narrow); margin: 0 auto; padding: 0 var(--s3); }
.section { padding: 60px 0; }
.kicker {
  font-size: var(--fs-tiny); font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 var(--s2);
}
.src { font-size: var(--fs-tiny); color: var(--muted); }
.lede { font-size: clamp(1.05rem, 1.7vw, 1.18rem); color: var(--muted); max-width: 50ch; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 24px; border-radius: var(--r-btn);
  font-weight: 700; font-size: 1rem; line-height: 1;
  text-decoration: none; border: 0; cursor: pointer;
  transition: transform 120ms var(--ease), background 120ms var(--ease);
  min-height: 48px;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--accent); color: var(--accent-ink); }
.btn--primary:hover { background: var(--accent-down); }
.btn--ghost { background: transparent; color: inherit; padding: 14px 8px; }
.btn--ghost::after {
  content: "\2192"; display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink);
  font-size: 1rem; transition: transform 160ms var(--ease);
}
.btn--ghost:hover::after { transform: translateX(3px); }
.btn--dark { background: var(--ink-strong); color: var(--surface); }
/* utility action — never the accent, which is reserved for the primary CTA */
.btn--outline { background: transparent; color: var(--ink-strong); border: 1.5px solid var(--line); }
.btn--outline:hover { border-color: var(--ink-strong); background: var(--paper); }
.btn--dark:hover { background: var(--navy); }

/* ---------- 1. NAV ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.nav__inner { display: flex; align-items: center; gap: var(--s3); padding-top: 14px; padding-bottom: 14px; }
.logo { display: inline-flex; align-items: center; text-decoration: none; }
.logo__img { display: block; height: 26px; width: auto; max-width: 46vw; object-fit: contain; }
.nav__links { display: flex; gap: var(--s3); list-style: none; margin: 0 0 0 auto; padding: 0; }
.nav__links a { text-decoration: none; font-size: var(--fs-small); font-weight: 700; color: var(--muted); }
.nav__links a:hover { color: var(--ink-strong); }
.nav .btn { margin-left: var(--s2); }
@media (max-width: 880px) {
  .logo__img { height: 22px; }
  .nav__links { display: none; }
  .nav .btn { margin-left: auto; padding: 11px 14px; font-size: 0.8125rem; white-space: nowrap; }
}

/* ---------- 2. HERO ---------- */
.hero { padding: 56px 0; }
.hero h1 {
  font-size: clamp(2.3rem, 5.4vw, 3.7rem);
  line-height: 1.08;
  max-width: 20ch;
  margin-bottom: var(--s2);
}
.hero .lede { margin-bottom: var(--s3); }
.cta-pair { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s3); }
.hero__meta { display: flex; flex-wrap: wrap; gap: 10px var(--s3); font-size: var(--fs-small); color: var(--muted); }
.hero__meta span { display: inline-flex; align-items: center; gap: 8px; }
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); display: inline-block; }

/* ---------- 2b. HERO VISUAL — the search loop ---------- */
.hero__grid {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--s3) var(--s4);
  grid-template-areas: "copy visual" "cta visual" "meta visual"; align-items: start;
}
.hero__copy { grid-area: copy; }
.hero__cta { grid-area: cta; }
.hero__visual { grid-area: visual; align-self: center; }
.hero__meta { grid-area: meta; }
.hero__visual { position: relative; max-width: 430px; justify-self: center; width: 100%; }
.phone {
  background: var(--surface); border: 1px solid var(--line); border-radius: 20px;
  padding: var(--s2); box-shadow: 0 18px 44px -24px rgba(28,23,18,.28);
}
.phone__bar {
  display: flex; align-items: center; gap: 10px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: 10px 16px; font-size: var(--fs-small); font-weight: 700; color: var(--ink);
  margin-bottom: var(--s2);
}
.phone__bar svg { color: var(--muted); flex: none; }
.phone__stage { display: grid; }
.serp { grid-area: 1 / 1; display: grid; gap: 10px; align-content: start; }
.rrow {
  display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; align-items: center;
  border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px;
  background: var(--surface); position: relative;
}
.rrow__star { font-weight: 700; color: var(--ink-strong); font-size: var(--fs-small); grid-row: 1 / 3; align-self: center; white-space: nowrap; }
.rrow__name { font-size: var(--fs-small); font-weight: 700; color: var(--ink); }
.rrow__meta { font-size: var(--fs-tiny); color: var(--muted); grid-column: 2; }
.rrow--ghost { border-style: dashed; background: transparent; animation: ghostpulse 2.2s ease-in-out infinite alternate; }
.rrow--ghost .rrow__name { color: var(--muted); grid-column: 1 / -1; text-align: center; font-weight: 700; }
@keyframes ghostpulse { from { opacity: .45; } to { opacity: .95; } }
.rrow--you { border: 1.5px solid var(--accent-line); background: color-mix(in srgb, var(--accent-line) 10%, var(--surface)); }
.rrow--you .rrow__star { color: var(--accent-text); }
.rrow--you .rrow__tag {
  position: absolute; top: -10px; right: 12px;
  background: var(--accent-line); color: #fff;
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 3px 10px; border-radius: var(--r-pill);
}
.rrow--dim { opacity: .5; }
.phone__cap { margin: var(--s2) 0 2px; text-align: center; font-size: var(--fs-tiny); color: var(--muted); }
/* the loop: search state <-> fixed state */
.serp--before { animation: serpBefore 10s var(--ease) infinite; }
.serp--after  { animation: serpAfter 10s var(--ease) infinite; opacity: 0; }
/* the two states never overlap — one clears before the other arrives */
@keyframes serpBefore {
  0%, 42%  { opacity: 1; transform: none; }
  46%, 92% { opacity: 0; transform: translateY(-8px); }
  96%,100% { opacity: 1; transform: none; }
}
@keyframes serpAfter {
  0%, 46%  { opacity: 0; transform: translateY(10px); }
  50%, 88% { opacity: 1; transform: none; }
  92%,100% { opacity: 0; transform: translateY(10px); }
}
/* floating stat chips */
.fchip {
  position: absolute; z-index: 2;
  background: var(--navy); color: var(--on-navy);
  font-size: var(--fs-tiny); font-weight: 700;
  padding: 9px 14px; border-radius: 12px;
  box-shadow: 0 10px 26px -14px rgba(28,23,18,.5);
  animation: chipfloat 6s ease-in-out infinite alternate;
}
.fchip em { display: block; font-style: normal; font-weight: 400; color: var(--on-navy-muted); font-size: 10.5px; margin-top: 1px; }
.fchip--1 { top: -18px; right: -10px; }
.fchip--2 { bottom: 72px; left: -26px; animation-delay: 3s; }
@keyframes chipfloat { from { transform: translateY(-4px); } to { transform: translateY(5px); } }
@media (max-width: 960px) {
  .hero__grid { grid-template-columns: 1fr; grid-template-areas: "copy" "visual" "cta" "meta"; gap: var(--s3); }
  .hero__visual {
    max-width: 420px; justify-self: stretch;
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: start;
  }
  .phone { grid-column: 1 / -1; padding: 10px; }
  .phone__bar { padding: 9px 14px; margin-bottom: 10px; }
  .serp { gap: 8px; }
  .rrow { padding: 8px 12px; gap: 1px 10px; }
  .rrow__name { font-size: var(--fs-tiny); }
  .rrow__meta { font-size: 11px; }
  .rrow--you .rrow__tag { top: -8px; right: 10px; font-size: 9.5px; padding: 2px 8px; }
  .phone__cap { margin: 10px 0 0; }
  /* chips stop floating over the results and sit under the card */
  .fchip {
    position: static; animation: none; box-shadow: none;
    padding: 8px 12px; line-height: 1.25;
  }
}
@media (prefers-reduced-motion: reduce) {
  .serp--before { animation: none !important; opacity: 0 !important; }
  .serp--after { animation: none !important; opacity: 1 !important; transform: none !important; }
  .fchip, .rrow--ghost { animation: none !important; }
}

/* ---------- 3. RESEARCH STRIP ---------- */
.research { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 28px 0; }
.research__head { font-weight: 700; color: var(--ink-strong); margin-bottom: var(--s2); font-size: 1rem; }
.research__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s2); }
.research__grid p { margin: 0; font-size: var(--fs-tiny); color: var(--muted); }
.research__grid strong { display: block; color: var(--ink-strong); margin-bottom: 4px; }
.research__foot { margin-top: var(--s2); font-size: var(--fs-tiny); color: var(--muted); font-style: italic; }
@media (max-width: 880px) { .research__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .research__grid { grid-template-columns: 1fr; } }

/* ---------- Dark sections base ---------- */
/* section 01 — warm tinted panel (was dark) */
.shiftsec { background: linear-gradient(180deg, #f4efe4 0%, #efe9dc 100%); color: var(--ink); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.shiftsec h2, .shiftsec h3 { color: var(--ink-strong); }
.shiftsec .lede, .shiftsec .src { color: var(--muted); }

/* ---------- 4. THE SHIFT ---------- */
.shift__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--s4); align-items: center; }
.shift__beats { display: grid; gap: var(--s2); margin-top: var(--s3); }
.shift__beats p { margin: 0; color: var(--muted); max-width: 52ch; font-size: var(--fs-small); }
.shift__beats strong { display: block; color: var(--ink-strong); font-size: 1.08rem; margin-bottom: 4px; }
.shift__src { margin-top: var(--s3); }
/* D1 — the 6% -> 45% bars */
.d1 { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--s3); }
.d1__bars { display: flex; align-items: flex-end; gap: var(--s3); height: 170px; }
.d1__bar { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.d1__fill { border-radius: 8px 8px 4px 4px; transform-origin: bottom; transform: scaleY(0); transition: transform 700ms var(--ease) 150ms; }
.d1__bar--then .d1__fill { height: 13%; background: #d5cec0; }
.d1__bar--now  .d1__fill { height: 100%; background: var(--accent-line); }
.d1.in .d1__fill { transform: scaleY(1); }
.d1__num { font-weight: 700; letter-spacing: var(--track-display); color: var(--ink-strong); margin: 0 0 6px; }
.d1__bar--now .d1__num { font-size: clamp(2.2rem, 4vw, 3rem); color: var(--accent-text); }
.d1__bar--then .d1__num { font-size: 1.4rem; color: var(--muted); }
.d1__label { font-size: var(--fs-tiny); color: var(--muted); margin-top: 10px; }
.d1__caption { margin: var(--s3) 0 0; font-size: var(--fs-small); color: var(--muted); }
@media (max-width: 880px) { .shift__grid { grid-template-columns: 1fr; gap: var(--s4); } .d1__bars { height: 200px; } }

/* G4 — AI answer box */
.g4 { margin-top: var(--s2); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--s2); max-width: 420px; }
.g4__row { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); color: var(--ink); font-size: var(--fs-small); }
.g4__row .g4__ava { width: 26px; height: 26px; border-radius: 8px; background: var(--tile); flex: none; }
.g4__row--head { color: var(--muted); font-size: var(--fs-tiny); border-bottom-style: dashed; }
.g4__cut { border-top: 2px dashed #d5cec0; margin-top: var(--s2); padding-top: var(--s2); }
.g4__row--ghost { opacity: .35; border-bottom: 0; }
.g4__cutlabel { font-size: var(--fs-tiny); color: var(--muted); margin: 6px 0 0; }

/* ---------- 5. THE EVIDENCE ---------- */
.evidence { background: var(--surface); padding: 48px 0; }
.evidence__intro { max-width: 58ch; color: var(--muted); font-size: var(--fs-small); margin-bottom: 0; }
.evidence__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s2); margin: var(--s3) 0; }
.finding {
  border: 0; border-radius: var(--r-card);
  padding: var(--s3); background: var(--tile);
}
.finding p.finding__num, .finding__num { font-family: var(--font-display); font-size: clamp(2.1rem, 3.8vw, 3rem); font-weight: 500; letter-spacing: -0.02em; color: var(--ink-strong); line-height: 1; margin-bottom: var(--s2); }
.finding h3 { margin-bottom: 8px; font-size: 1.05rem; }
.finding p { font-size: var(--fs-tiny); color: var(--muted); margin: 0; }
.finding p + p { margin-top: var(--s2); }
.finding em.note { display: block; margin-top: var(--s2); font-size: var(--fs-small); color: var(--ink); }
.finding--wide { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; gap: var(--s3); align-items: center; padding: var(--s2) var(--s3); }
.evidence__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; }
.evidence__close { max-width: 58ch; margin: 0; font-size: var(--fs-small); }
@media (max-width: 820px) { .evidence__grid { grid-template-columns: 1fr; } .finding--wide { grid-template-columns: 1fr; } .plan__list { grid-template-columns: 1fr; } }

/* ---------- 6. THE GAP — "your street" ---------- */
.gap__head { max-width: 64ch; margin-bottom: var(--s3); }
.gap__head h2 { max-width: 22ch; margin-bottom: 10px; }
.gap__lede { color: var(--muted); font-size: var(--fs-small); margin: 0; }

/* the street */
.street { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 22px 18px 0; margin-bottom: var(--s3); overflow: hidden; }
.street__row { display: grid; grid-template-columns: repeat(10, 1fr); gap: 10px; align-items: end; }
.sh { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.sh svg { width: 100%; max-width: 84px; height: auto; display: block; overflow: visible; }
.sh__tag { font-size: 10.5px; font-weight: 700; color: var(--muted); white-space: nowrap; }
/* dark shop */
.sh__wall { fill: #e6e0d4; stroke: #cfc8ba; stroke-width: 1.2; }
.sh__awn { fill: #d6cfc0; }
.sh__stripe { stroke: #c5bdad; stroke-width: 2; fill: none; }
.sh__win { fill: #d9d3c6; stroke: #c5bdad; stroke-width: 1; transition: fill 420ms var(--ease), filter 420ms var(--ease); }
.sh__door { fill: #cfc8ba; }
.sh__sign { fill: #d9d3c6; }
/* lit shop — lights come on in sequence after reveal */
.street.in .sh--lit .sh__wall, .street--you-on .sh--you .sh__wall { fill: #fbf7ef; stroke: #d9cfb8; }
.street.in .sh--lit .sh__awn,  .street--you-on .sh--you .sh__awn  { fill: var(--accent-line); }
.street.in .sh--lit .sh__stripe, .street--you-on .sh--you .sh__stripe { stroke: rgba(255,255,255,.55); }
.street.in .sh--lit .sh__win,  .street--you-on .sh--you .sh__win  { fill: #ffd978; stroke: #e9b84a; filter: drop-shadow(0 0 6px rgba(255,200,80,.75)); }
.street.in .sh--lit .sh__door, .street--you-on .sh--you .sh__door { fill: var(--ink-strong); }
.street.in .sh--lit .sh__sign, .street--you-on .sh--you .sh__sign { fill: var(--ink-strong); }
.street.in .sh--lit .sh__tag,  .street--you-on .sh--you .sh__tag  { color: var(--accent-text); }
.street.in .sh--lit:nth-child(1) .sh__win { transition-delay: 100ms; }
.street.in .sh--lit:nth-child(3) .sh__win { transition-delay: 260ms; }
.street.in .sh--lit:nth-child(4) .sh__win { transition-delay: 420ms; }
.street.in .sh--lit:nth-child(6) .sh__win { transition-delay: 580ms; }
.street.in .sh--lit:nth-child(8) .sh__win { transition-delay: 740ms; }
.street.in .sh--lit:nth-child(10) .sh__win { transition-delay: 900ms; }
/* "You" — the one that stays dark until the reader flips the switch */
.sh--you .sh__tag { color: var(--ink-strong); font-size: 11.5px; }
.sh--you::before {
  content: ""; position: absolute; inset: -8px -6px 18px;
  border: 1.5px dashed #b8b0a1; border-radius: 12px; pointer-events: none;
  transition: border-color 300ms var(--ease);
}
.street--you-on .sh--you::before { border-color: var(--accent-line); border-style: solid; }
.street:not(.street--you-on) .sh--you .sh__win { animation: askpulse 1.8s ease-in-out infinite alternate; }
@keyframes askpulse { from { fill: #d9d3c6; } to { fill: #efe9dc; } }
/* the road, with customers walking past — they only stop at lit shops in the reader's head */
.street__road { position: relative; height: 26px; margin: 12px -18px 0; background: #3b352d; border-top: 3px solid #cfc8ba; overflow: hidden; }
.street__road::after { content: ""; position: absolute; left: 0; right: 0; top: 11px; border-top: 2px dashed rgba(255,255,255,.35); }
.walker { position: absolute; top: 7px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px rgba(255,255,255,.5); animation: walk 9s linear infinite; }
.walker.w2 { animation-delay: -3s; background: #fff; }
.walker.w3 { animation-delay: -6s; }
@keyframes walk { from { left: -12px; } to { left: 102%; } }
/* once "You" is switched on, customers pause at your door (shop 7 sits at ~65% of the road) */
.street--you-on .walker { animation-name: walkstop; }
@keyframes walkstop {
  0%   { left: -12px; opacity: 1; }
  58%  { left: 64%;   opacity: 1; }
  66%  { left: 65%;   opacity: 1; transform: scale(1.5); }
  78%  { left: 65%;   opacity: 0; transform: scale(.6) translateY(-10px); }
  100% { left: 65%;   opacity: 0; }
}
.street--you-on .sh--you .sh__tag::after { content: " · open"; color: var(--accent-text); }

/* the ask */
.gap__ask { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: var(--s2) var(--s3); margin-bottom: 10px; }
.gap__q { font-weight: 700; color: var(--ink-strong); }
.seg2--light { display: inline-flex; gap: 4px; padding: 4px; border-radius: var(--r-pill); margin: 0; background: var(--tile); }
.seg2--light .chip span { background: transparent; border: 0; padding: 9px 16px; font-size: var(--fs-small); color: var(--muted); border-radius: var(--r-pill); }
.seg2--light .chip input:checked + span { background: var(--ink-strong); color: #fff; }
.gap__out { margin: 0; font-size: var(--fs-small); color: var(--ink); }
.gap .src { margin: 0; }
@media (max-width: 880px) {
  .street__row { grid-template-columns: repeat(5, 1fr); gap: 8px 6px; }
  .sh__tag { font-size: 9.5px; }
  .gap__ask { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .walker { animation: none !important; display: none; }
  .sh--you .sh__win { animation: none !important; }
  .sh__win { transition: none !important; }
}

/* ---------- 7. THE LOSS — the quiet leak (light) ---------- */
.loss {
  color: var(--ink);
  /* dotted engineering grid on warm off-white, with a spotlight behind the stage */
  background-color: #f6f2ea;
  background-image:
    radial-gradient(60% 55% at 50% 42%, rgba(255,255,255,.9) 0%, rgba(255,255,255,0) 70%),
    radial-gradient(#d6cfc0 1.1px, transparent 1.1px);
  background-size: auto, 22px 22px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.loss h2 { color: var(--ink-strong); max-width: 26ch; margin-bottom: 8px; }
.loss__kicker { color: var(--accent-text); }
.loss__lede { color: var(--muted); font-size: 1.02rem; margin-bottom: var(--s3); }
.loss {
  --loss-1: #b8760a;  /* search lane   */
  --loss-2: #d1553a;  /* click lane    */
  --loss-3: #2b74b8;  /* referral lane */
  --loss-win: #17864a; /* the competitor's green */
}
.lossviz { width: 100%; height: auto; display: block; margin: 0 auto var(--s3); }
.section.loss { padding: 52px 0; }
.lossviz--wide {
  max-width: 700px; padding: 14px 12px 6px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 20px;
  box-shadow: 0 24px 60px -36px rgba(28,23,18,.35);
}
.lossviz--tall { display: none; }
.lossviz text { font-family: var(--font); font-size: 16px; font-weight: 700; fill: var(--ink); }
.lossviz .sub { font-size: 15px; font-weight: 400; }
.srcpill rect { fill: var(--paper); stroke: var(--line); stroke-width: 1.5; }
.srcpill .ic  { fill: none; stroke: var(--muted); stroke-width: 2.5; stroke-linecap: round; }
.srcpill .icf { fill: var(--muted); }
/* lanes keep their own colour; a soft underglow gives depth on the light ground */
.lane { fill: none; stroke-width: 3.5; stroke-linecap: round; }
.l1 { stroke: var(--loss-1); } .fd1 { fill: var(--loss-1); }
.l2 { stroke: var(--loss-2); } .fd2 { fill: var(--loss-2); }
.l3 { stroke: var(--loss-3); } .fd3 { fill: var(--loss-3); }
.lane-glow {
  fill: none; stroke-width: 11; opacity: .16; stroke-linecap: round;
  stroke-dasharray: 16 18; animation: lanemarch 1.6s linear infinite;
}
@keyframes lanemarch { to { stroke-dashoffset: -34; } }
.lg1 { stroke: var(--loss-1); } .lg2 { stroke: var(--loss-2); } .lg3 { stroke: var(--loss-3); }
.laneg { opacity: 1; transition: opacity 240ms var(--ease); }
.loss.has-active .laneg { opacity: .5; }
.loss.has-active .laneg.active { opacity: 1; }
.laneg.active .lane-glow { opacity: .38; }
/* the empty road to you — dashes crawl so the emptiness is noticed */
.lane--you { stroke: #b8b0a1; stroke-width: 2; stroke-dasharray: 7 7; animation: roadcrawl 1.4s linear infinite; }
@keyframes roadcrawl { to { stroke-dashoffset: -14; } }
/* flowing customers */
.fdot {
  r: 7.5; opacity: 0; stroke: #fff; stroke-width: 2.5;
  filter: drop-shadow(0 2px 5px rgba(28,23,18,.28));
  animation: flowdot var(--dur, 4s) linear infinite; animation-delay: var(--del, 0s);
}
@keyframes flowdot {
  0%   { offset-distance: 0%;   opacity: 0; }
  8%   { opacity: 1; }
  82%  { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}
.fdot--ghost { fill: #a8a091; animation-name: flowghost; }
@keyframes flowghost {
  0%   { offset-distance: 0%;  opacity: 0; }
  12%  { opacity: .9; }
  55%  { offset-distance: 52%; opacity: 0; }
  100% { offset-distance: 52%; opacity: 0; }
}
/* the competitor: green, glowing, thriving */
.node-else .main { fill: rgba(23,134,74,.14); stroke: var(--loss-win); stroke-width: 2.5; }
.node-else .glowring { fill: none; stroke: var(--loss-win); stroke-width: 14; opacity: .2; animation: glowpulse 2s ease-in-out infinite alternate; }
.node-else .t { fill: var(--ink-strong); font-size: 21px; }
.node-else .sub { fill: var(--loss-win); }
@keyframes glowpulse { from { opacity: .12; } to { opacity: .45; } }
.node-you rect { fill: var(--paper); stroke: #b8b0a1; stroke-width: 1.5; stroke-dasharray: 6 6; }
.node-you .t { fill: var(--muted); font-size: 21px; }
.node-you .sub { fill: #a8a091; }
/* stories: white cards, colour-coded to their lane */
.loss__stories { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); }
.loss__story {
  position: relative; border-radius: var(--r-card); padding: 16px;
  background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--lc, var(--line));
  cursor: pointer; transition: border-color 240ms var(--ease), box-shadow 240ms var(--ease), transform 240ms var(--ease);
}
.loss__story[data-lane="1"] { --lc: var(--loss-1); }
.loss__story[data-lane="2"] { --lc: var(--loss-2); }
.loss__story[data-lane="3"] { --lc: var(--loss-3); }
.loss__story:focus-visible { outline: 3px solid var(--lc); outline-offset: 2px; }
.loss__story.active { border-color: var(--lc); transform: translateY(-3px); box-shadow: 0 12px 30px -14px var(--lc); }
.loss__story strong { display: block; color: var(--ink-strong); font-size: .95rem; margin-bottom: 6px; letter-spacing: -0.01em; }
.loss__story p { margin: 0; color: var(--muted); font-size: var(--fs-tiny); }
.loss__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: var(--s3); margin-top: var(--s3); }
.loss__coda { color: var(--muted); max-width: 48ch; margin: 0; font-size: var(--fs-small); }
@media (max-width: 880px) {
  .lossviz--wide { display: none; }
  .lossviz--tall {
    display: block; max-width: 420px; margin-inline: auto; padding: 12px 10px 4px;
    background: var(--surface); border: 1px solid var(--line); border-radius: 18px;
    box-shadow: 0 20px 50px -34px rgba(28,23,18,.35);
  }
  .lossviz--tall text { font-size: 15px; }
  .lossviz--tall .node-else .t, .lossviz--tall .node-you .t { font-size: 20px; }
  .loss__stories { grid-template-columns: 1fr; }
  .loss__foot { flex-direction: column; align-items: flex-start; }
}
@supports not (offset-path: path("M0,0 L1,1")) { .fdot { display: none; } }

/* ---------- 8. OBJECTION KILLER — rented vs owned ---------- */
.section.objection { padding: 48px 0; background: var(--surface); }
.objection .kicker { margin-bottom: 8px; }
.objection h2 {
  font-style: italic; font-weight: 400; color: var(--ink-strong);
  max-width: 30ch; font-size: clamp(1.45rem, 3.2vw, 2.05rem); margin-bottom: 8px;
}
.objection__lede { color: var(--muted); max-width: 60ch; font-size: var(--fs-small); margin-bottom: var(--s3); }
.objection__layout { display: grid; grid-template-columns: 1.15fr .85fr; gap: var(--s3); align-items: stretch; margin-bottom: var(--s3); }
.objection__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.obj {
  position: relative; padding: 16px 16px 16px 16px;
  background: var(--tile); border: 1px solid var(--line); border-radius: 14px;
  display: flex; flex-direction: column; gap: 6px;
}
.obj__logo { height: 26px; display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.obj__logo img { height: 22px; width: auto; display: block; }
.obj__logo img[src*="justdial"] { height: 18px; }
.obj__logo img[src*="instagram"] { height: 22px; }
.obj__logo--dim img { filter: grayscale(1); opacity: .45; }
.obj__year { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; color: var(--muted); background: var(--tile); border-radius: 999px; padding: 2px 8px; }
.obj strong { display: block; color: var(--ink-strong); font-size: .98rem; line-height: 1.3; }
.obj p { margin: 0; color: var(--muted); font-size: var(--fs-tiny); }
/* the look-first chart */
.look {
  margin: 0; background: var(--tile); color: var(--ink); border: 1px solid var(--line); border-radius: 16px;
  padding: var(--s3); display: flex; flex-direction: column; justify-content: center;
}
.look__title { margin: 0 0 14px; font-family: var(--font-display); font-weight: 500; font-size: 1.15rem; color: var(--ink-strong); }
.look__rows { display: grid; gap: 12px; }
.look__row { display: grid; grid-template-columns: 96px 1fr 48px; align-items: center; gap: 10px; font-size: var(--fs-tiny); }
.look__lbl { color: var(--ink); font-weight: 700; }
.look__track { height: 14px; border-radius: 7px; background: var(--surface); overflow: hidden; }
.look__fill { height: 100%; border-radius: 7px; background: var(--accent-line); transform-origin: left; transform: scaleX(0); transition: transform 800ms var(--ease) 120ms; width: calc(var(--w) * 100%); }
.look__fill--dim { background: #c9c2b4; }
.look__row--dim .look__lbl, .look__row--dim .look__val { color: var(--muted); }
.look.in .look__fill { transform: scaleX(1); }
.look__val { font-family: var(--font-display); font-weight: 500; font-size: 1.15rem; color: var(--ink-strong); text-align: right; font-variant-numeric: tabular-nums; }
.look__cap { margin: 14px 0 0; font-size: 11px; line-height: 1.45; color: var(--muted); }
.objection__coda { border-top: 1px solid var(--line); padding-top: var(--s2); max-width: 60ch; margin: 0; font-size: var(--fs-small); }
@media (max-width: 880px) {
  .objection__layout { grid-template-columns: 1fr; }
  .objection__grid { grid-template-columns: 1fr; }
  .look__row { grid-template-columns: 84px 1fr 44px; }
}
@media (prefers-reduced-motion: reduce) { .look__fill { transform: scaleX(1) !important; transition: none !important; } }

/* ---------- 9. CALCULATOR — dark instrument panel ---------- */
.section.calc { padding: 34px 0; background: var(--paper); }
.calc__head { max-width: 62ch; margin-bottom: 12px; }
.calc__head h2 { margin-bottom: 10px; }
.calc__sub { color: var(--muted); font-size: var(--fs-small); margin: 0; }

.dash {
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); box-shadow: 0 18px 44px -30px rgba(28,23,18,.35);
  border-radius: 24px; padding: var(--s3);
  display: grid; grid-template-columns: .9fr 1.1fr; gap: var(--s3) var(--s4);
  --range-rest: var(--line);
}
.dash fieldset {
  margin: 0 0 var(--s3); padding: 6px 14px 14px;
  border: 1px solid var(--navy-line); border-radius: 14px;
}
.dash fieldset legend { padding: 0 8px; margin-left: -8px; }
fieldset { min-width: 0; }
.dash__lbl {
  display: block; font-family: var(--font); font-size: .72rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; color: var(--on-navy-muted);
  margin-bottom: 10px; padding: 0;
}
.dash .q { margin-bottom: var(--s2); }
.q-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s2); margin-bottom: 4px; }
.q-val--dash { font-family: var(--font-display); font-weight: 500; font-size: 1.3rem; color: var(--ink-strong); font-variant-numeric: tabular-nums; white-space: nowrap; }
.q-help--dash { font-size: var(--fs-tiny); color: var(--muted); margin: 4px 0 0; }

/* chips on the dark panel: compact */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.chip span {
  display: inline-block; padding: 8px 14px; border-radius: var(--r-pill);
  border: 1.5px solid var(--line); background: var(--surface);
  font-size: .875rem; font-weight: 700; color: var(--muted); cursor: pointer;
  transition: background 140ms var(--ease), border-color 140ms var(--ease), color 140ms var(--ease);
}
.chip input:checked + span { border-color: var(--ink-strong); background: var(--ink-strong); color: #fff; }
.chip input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }
.chips--dash .chip span { background: var(--surface); border-color: var(--line); color: var(--ink); }
.chips--dash .chip input:checked + span { background: var(--ink-strong); border-color: var(--ink-strong); color: #fff; }

/* sliders */
input[type="range"] {
  width: 100%; height: 8px; margin: 16px 0 6px; appearance: none; cursor: pointer;
  border-radius: 4px; background: var(--range-rest, var(--line));
}
input[type="range"]::-webkit-slider-runnable-track { height: 8px; border-radius: 4px; background: transparent; }
input[type="range"]::-webkit-slider-thumb {
  appearance: none; width: 28px; height: 28px; border-radius: 50%;
  background: var(--accent); border: 5px solid var(--surface);
  box-shadow: 0 1px 5px rgba(0,0,0,.4); margin-top: -10px;
  transition: transform 120ms var(--ease);
}
input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.15); }
input[type="range"]:focus-visible::-webkit-slider-thumb { outline: 3px solid var(--accent); outline-offset: 2px; }
input[type="range"]::-moz-range-track { height: 8px; border-radius: 4px; background: var(--range-rest, var(--line)); }
input[type="range"]::-moz-range-progress { height: 8px; border-radius: 4px; background: var(--accent); }
input[type="range"]::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: var(--accent); border: 5px solid var(--surface); }

/* the chart */
.dash__charthead { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.leg { display: flex; gap: 14px; font-size: 11px; font-weight: 700; color: var(--muted); }
.leg span { display: inline-flex; align-items: center; gap: 6px; }
.leg__dot { width: 14px; height: 3px; border-radius: 2px; display: inline-block; }
.leg__dot--base { background: #c9c2b4; }
.leg__dot--grow { background: var(--accent-line); }
.chwrap { position: relative; touch-action: none; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 6px 4px 0; max-width: 460px; margin-inline: auto; }
#chart { width: 100%; height: auto; display: block; }
.ch-grid line { stroke: var(--line); stroke-width: 1; opacity: .9; }
.ch-ticks text { font-family: var(--font); font-size: 10.5px; font-weight: 700; fill: var(--muted); }
.ch-base { fill: none; stroke: #b8b0a1; stroke-width: 1.5; stroke-dasharray: 5 5; }
.ch-line { fill: none; stroke: var(--accent-line); stroke-width: 3; stroke-linecap: round; }
.ch-guide { stroke: #b8b0a1; stroke-width: 1; stroke-dasharray: 3 3; }
.ch-cursor { fill: var(--ink-strong); stroke: var(--surface); stroke-width: 2.5; }
.ch-pay { fill: var(--accent-line); stroke: var(--surface); stroke-width: 2.5; }
.ch-end { font-family: var(--font); font-size: 12px; font-weight: 700; fill: var(--accent-text); }
.ch-tip {
  position: absolute; transform: translateX(-50%); pointer-events: none;
  background: var(--ink-strong); color: #fff; font-size: var(--fs-tiny); font-weight: 700;
  padding: 6px 10px; border-radius: 8px; white-space: nowrap; box-shadow: 0 4px 14px rgba(28,23,18,.25);
}
.ch-hint { font-size: var(--fs-tiny); color: var(--muted); text-align: center; margin: 4px 0 0; transition: opacity 240ms var(--ease); }

/* stat tiles */
.dash__stats {
  display: grid; grid-template-columns: 1.25fr 1fr .9fr; gap: var(--s2);
  border-top: 1px solid var(--line); padding-top: var(--s2); margin-top: var(--s2);
}
.stat__lbl { display: block; font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.stat__val { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.4rem, 2.4vw, 1.9rem); color: var(--ink-strong); line-height: 1.05; font-variant-numeric: tabular-nums; }
.stat--hero .stat__val { color: var(--accent-text); font-size: clamp(1.6rem, 2.6vw, 2rem); }
.stat__plus { font-weight: 500; margin-right: 2px; }
.statpulse { display: inline-block; }
.statpulse.pulse { animation: respulse 360ms var(--ease); }
@keyframes respulse { 40% { transform: scale(1.05); } }

.res-note--dash { font-size: var(--fs-tiny); color: var(--muted); margin: 10px 0; }
.dash__cta { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.res-wa--dash { color: var(--muted); font-size: var(--fs-small); }

/* assumptions drawer, dark */
.assump--dash { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: var(--s2); margin: 0; }
details.assump summary { font-size: var(--fs-small); font-weight: 700; cursor: pointer; }
.assump--dash summary { color: var(--ink-strong); }
.assump--dash .arow { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); padding: 8px 0; border-bottom: 1px dashed var(--line); font-size: var(--fs-tiny); color: var(--muted); }
.assump--dash .arow input { width: 72px; font: inherit; padding: 4px 8px; border: 1px solid var(--line); border-radius: 6px; text-align: right; background: var(--paper); color: var(--ink-strong); }

/* mobile mini result */
.calc__mini { display: none; }
@media (max-width: 880px) {
  .dash { grid-template-columns: 1fr; padding: var(--s3) var(--s2); }
  .dash fieldset { padding: 2px 10px 10px; }
  .chips--dash { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .chips--dash .chip { min-width: 0; }
  .chips--dash .chip span {
    display: block; width: 100%; text-align: center;
    padding: 11px 6px; font-size: .8125rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .chip--span { grid-column: 1 / -1; }
  .q-val--dash { font-size: 1.15rem; }
  .dash__stats { grid-template-columns: 1fr 1fr; gap: var(--s3) var(--s2); }
  .stat--hero { grid-column: 1 / -1; }
  .stat--hero .stat__val { font-size: 2.2rem; }
  .calc__mini {
    display: flex; justify-content: space-between; align-items: center; gap: var(--s2);
    position: sticky; bottom: 12px; z-index: 30;
    background: var(--ink-strong); color: #fff; border-radius: var(--r-card);
    padding: 14px 18px; margin-top: var(--s3);
    font-weight: 700; font-variant-numeric: tabular-nums;
  }
  .calc__mini .lbl { font-size: var(--fs-tiny); font-weight: 400; color: #b9bfca; display: block; }
}

/* ---------- 10 & 15. THE PLANS ---------- */
.plans__intro { max-width: 62ch; font-size: var(--fs-small); margin-bottom: 0; }
.section.plans { padding: 36px 0; background: var(--surface); }
.plans h2 { margin-bottom: 8px; }
.plans__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); margin: 14px 0 12px; align-items: stretch; }
.plan {
  border: 1.5px solid var(--line); border-radius: var(--r-card);
  background: var(--paper); padding: var(--s3);
  display: flex; flex-direction: column; gap: 10px;
}
.plan__glyph { height: 34px; margin-bottom: 2px; }
.plan__glyph svg { height: 100%; width: auto; }
.plan h3 { font-size: 1.4rem; margin: 0; }
.plan__for { font-size: var(--fs-tiny); color: var(--muted); margin: 0; }
.plan__pitch { font-size: var(--fs-tiny); color: var(--muted); margin: 0; }
.plan__list { list-style: none; margin: 6px 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; }
.plan__list li { display: grid; grid-template-columns: 18px 1fr; gap: 8px; font-size: var(--fs-tiny); }
.plan__list .tick { color: var(--accent-text); font-weight: 700; }
.plan__list .todo { color: var(--muted); font-style: italic; }
.plan__pricebox {
  margin-top: auto; border: 1px solid var(--line); border-radius: 12px;
  padding: 12px var(--s2); background: var(--surface);
}
.plan__price { font-family: var(--font-display); font-size: 2rem; font-weight: 500; letter-spacing: -0.02em; color: var(--ink-strong); line-height: 1; margin: 0; }
.plan__terms { font-size: var(--fs-tiny); color: var(--muted); margin: 6px 0 0; }
.plan__delivery { font-size: var(--fs-tiny); font-weight: 700; color: var(--ink-strong); margin: 6px 0 0; }
.plan .btn { justify-content: center; margin-top: 8px; padding: 12px 20px; }
.plans__unsure { font-size: var(--fs-tiny); color: var(--muted); max-width: 72ch; margin: 0; }
@media (max-width: 820px) { .plans__grid { grid-template-columns: 1fr; } .plan__list { grid-template-columns: 1fr; } }

/* ---------- 11. WHAT'S IN BOTH ---------- */
.both { background: var(--tint); color: var(--ink); padding: var(--s3) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.both p { margin: 0; font-size: var(--fs-small); text-align: center; }
.both strong { color: var(--ink-strong); }

/* ---------- 12. HOW IT WORKS ---------- */
.how { background: var(--surface); }
.how__steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); margin-top: var(--s3); counter-reset: step; position: relative; }
.how__step { position: relative; padding-top: var(--s3); }
.how__step::before {
  counter-increment: step; content: counter(step);
  position: absolute; top: -14px; left: 0;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink);
  font-weight: 700; display: grid; place-items: center;
}
.how__step strong { display: block; color: var(--ink-strong); margin: var(--s2) 0 6px; font-size: 1.08rem; }
.how__step p { margin: 0; color: var(--muted); font-size: var(--fs-small); }
@media (max-width: 820px) { .how__steps { grid-template-columns: 1fr; gap: var(--s4); } }

/* ---------- 13. GUARANTEE ---------- */
.guarantee { background: var(--tint); }
.guarantee .wrap-narrow { text-align: center; }
.guarantee h2 { max-width: 22ch; margin-inline: auto; }
.guarantee p { max-width: 52ch; margin: 0 auto; color: var(--ink); }

/* ---------- 14. THE HUMAN ---------- */
.human__grid { display: grid; grid-template-columns: 280px 1fr; gap: var(--s4); align-items: center; }
.human__photo {
  aspect-ratio: 1; border-radius: var(--r-card);
  background: var(--line); display: grid; place-items: center;
  color: var(--muted); font-size: var(--fs-tiny); text-align: center; padding: var(--s2);
}
.human__legal { font-size: var(--fs-tiny); color: var(--muted); margin-top: var(--s3); }
@media (max-width: 820px) { .human__grid { grid-template-columns: 1fr; } .human__photo { max-width: 320px; } }

/* ---------- 16. FOUR QUESTIONS ---------- */
.faq { background: var(--surface); }
.faq__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3) var(--s4); margin: var(--s3) 0; }
.faq__grid strong { display: block; color: var(--ink-strong); margin-bottom: 6px; font-size: 1.05rem; }
.faq__grid p { margin: 0; color: var(--muted); font-size: var(--fs-small); max-width: 48ch; }
@media (max-width: 820px) { .faq__grid { grid-template-columns: 1fr; } }

/* ---------- 17. FOOTER ---------- */
.footer { background: var(--ink-strong); color: #a9adb6; padding: var(--s5) 0; font-size: var(--fs-small); }
.footer a { color: #d6d9df; text-decoration: none; }
.footer a:hover { text-decoration: underline; }
.footer__row { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); margin-bottom: var(--s2); }
.footer__legal { font-size: var(--fs-tiny); color: #7c818c; }

/* ---------- Reveal motion ---------- */
.reveal, .rgroup > * {
  opacity: 0; transform: translateY(12px);
  transition: opacity var(--t-reveal) var(--ease), transform var(--t-reveal) var(--ease);
}
.reveal.in, .rgroup.in > * { opacity: 1; transform: none; }
.rgroup.in > :nth-child(2) { transition-delay: var(--stagger); }
.rgroup.in > :nth-child(3) { transition-delay: calc(var(--stagger) * 2); }
.rgroup.in > :nth-child(4) { transition-delay: calc(var(--stagger) * 3); }
.rgroup.in > :nth-child(5) { transition-delay: calc(var(--stagger) * 4); }
/* hero reveals on load, no scroll trigger */
.load-in { opacity: 0; transform: translateY(12px); animation: loadin 420ms var(--ease) forwards; }
.load-in--late { animation-delay: 200ms; }
@keyframes loadin { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .rgroup > *, .load-in { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
  .d1__fill { transform: none !important; transition: none !important; }
  .g2 .shop--on path.body { transition: none !important; }
  .d3__fill { transition: none !important; }
  .fdot { animation: none !important; display: none; }
  .node-else .glowring { animation: none !important; opacity: .35; }
  .lane--you { animation: none !important; }
  .lane-glow { animation: none !important; stroke-dasharray: none; }
}

/* CTA microcopy — answers the real friction ("will you take my number?") */
.cta-note { font-size: var(--fs-small); color: var(--muted); margin: calc(var(--s2) * -1) 0 var(--s4); }

/* ---------- icon system + chronology + closer (polish pass, 20 Aug) ---------- */
.kicker b { color: var(--accent-text); font-weight: 700; margin-right: 6px; letter-spacing: 0; }
.shiftsec .kicker, .loss .kicker { color: var(--muted); }
.shiftsec .kicker b, .loss .kicker b { color: var(--accent-text); }
.mic, .obj__ic, .guarantee__ic { stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mic { width: 16px; height: 16px; color: var(--accent-text); flex: none; }
.hero__meta span { display: inline-flex; align-items: center; gap: 8px; }
.guarantee__ic { width: 40px; height: 40px; color: var(--accent-text); margin: 0 auto var(--s2); display: block; }
.closer { background: linear-gradient(180deg, #f4efe4 0%, #efe9dc 100%); color: var(--ink); border-top: 1px solid var(--line); padding: 56px 0; }
.closer__in { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; }
.closer h2 { color: var(--ink-strong); margin-bottom: 6px; }
.closer p { margin: 0; color: var(--muted); font-size: var(--fs-small); }
.closer__btns { display: flex; gap: var(--s2); flex-wrap: wrap; }
@media (max-width: 880px) {
  .closer__in { flex-direction: column; align-items: stretch; text-align: center; }
  .closer__btns { flex-direction: column; }
  .closer .btn { justify-content: center; }
}

/* ---------- design-example mocks + source icons (20 Aug realism pass) ---------- */
.sic { width: 15px; height: 15px; stroke: var(--accent-down); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -2px; margin-right: 7px; }
.research__grid .sic { display: inline-block; }

/* skeleton lines shared by all mocks */
.msk { display: block; height: 7px; border-radius: 4px; background: var(--line); margin: 6px 0; }
.msk--t { height: 10px; background: #cfc8ba; }

/* the hero browser frame — a website design example */
.browser { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 18px 44px -24px rgba(28,23,18,.28); overflow: hidden; }
.browser__bar { display: flex; align-items: center; gap: 5px; padding: 9px 12px; border-bottom: 1px solid var(--line); background: var(--paper); }
.browser__bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.browser__bar i:first-child { background: #e8927c; }
.browser__url { margin-left: 8px; font-size: 11px; font-weight: 700; color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; }
.browser__body { padding: 12px 14px 14px; }
.ms__nav { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.ms__logo { width: 14px; height: 14px; border-radius: 4px; background: var(--ink-strong); }
.ms__name { font-family: var(--font-display); font-weight: 500; font-size: 13px; color: var(--ink-strong); }
.ms__cta { margin-left: auto; background: var(--accent-line); color: #fff; font-size: 10px; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
.ms__hero { display: grid; grid-template-columns: 1.2fr .8fr; gap: 10px; align-items: center; margin-bottom: 10px; }
.ms__btn { display: block; width: 64px; height: 16px; border-radius: 999px; background: var(--accent-line); margin-top: 9px; }
.ms__img { aspect-ratio: 4/3; border-radius: 10px; background: var(--tile); display: grid; place-items: center; }
.ms__img svg { width: 22px; height: 22px; stroke: var(--muted); fill: none; stroke-width: 2; }
.ms__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; }
.ms__tile { border: 1px solid var(--line); border-radius: 8px; padding: 8px; }
.ms__tile svg { width: 14px; height: 14px; stroke: var(--accent-text); fill: none; stroke-width: 2; margin-bottom: 4px; }
.ms__map { display: flex; align-items: center; gap: 8px; background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.ms__map svg { width: 14px; height: 14px; stroke: var(--muted); fill: none; stroke-width: 2; flex: none; }
.ms__map .msk { margin: 0; }
.ms__call { margin-left: auto; font-size: 10px; font-weight: 700; color: #fff; background: var(--accent-line); border-radius: 999px; padding: 3px 9px; }

/* SERP card overlays the browser corner on desktop */
.hero__visual { padding-bottom: 64px; }
.hero__visual .phone { position: absolute; right: -12px; bottom: 0; width: 57%; padding: 10px; }
.hero__visual .phone .rrow { padding: 7px 10px; }
.hero__visual .phone .rrow__name { font-size: 12px; }
.hero__visual .phone .rrow__meta { font-size: 10.5px; }
.hero__visual .phone .rrow__star { font-size: 12px; }
.hero__visual .phone .phone__bar { padding: 7px 12px; font-size: 12px; margin-bottom: 8px; }
.hero__visual .phone .phone__cap { display: none; }
.fchip--1 { top: -14px; left: -14px; right: auto; }
.fchip--2 { display: none; }

/* plan-card thumbnails */
.thumbwrap { display: flex; height: 62px; margin-bottom: 4px; }
.thumb { width: 92px; background: var(--surface); border: 1.5px solid var(--ink); border-radius: 8px; overflow: hidden; flex: none; }
.thumb__bar { display: flex; gap: 3px; padding: 4px 6px; border-bottom: 1px solid var(--line); background: var(--paper); }
.thumb__bar i { width: 4px; height: 4px; border-radius: 50%; background: var(--line); }
.thumb__body { padding: 6px 8px; }
.thumb__body .msk { height: 5px; margin: 4px 0; }
.thumb__body .msk--t { height: 7px; }
.thumb__btn { display: block; width: 26px; height: 8px; border-radius: 999px; background: var(--accent-line); margin-top: 5px; }
.thumbwrap--stack .thumb + .thumb { margin-left: -66px; transform: translateY(6px) rotate(3deg); z-index: -1; opacity: .55; }
.thumbwrap--stack .thumb + .thumb + .thumb { transform: translateY(12px) rotate(6deg); opacity: .3; }
.thumbwrap--stack { position: relative; z-index: 0; }

@media (max-width: 960px) {
  .hero__visual { padding-bottom: 0; display: block; }
  .hero__visual .phone { position: static; width: 100%; margin-top: 8px; padding: var(--s2); }
  .hero__visual .phone .phone__cap { display: block; }
  .fchip--1 { position: static; display: inline-block; margin-top: 8px; }
  .fchip--2 { display: inline-block; position: static; margin: 8px 0 0 6px; }
}

/* ---------- source wordmarks (nominative citation lockups) ---------- */
.wm { display: inline-flex; align-items: center; vertical-align: -1px; margin-right: 6px; }
.wm__txt {
  color: var(--ink-strong);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.wm--serif .wm__txt { font-family: var(--font-display); font-weight: 500; font-size: 1.02em; }
.wm--sans  .wm__txt { font-weight: 700; letter-spacing: .01em; }
.wm--gov   .wm__txt { font-family: var(--font-display); font-weight: 500; font-size: .98em; }
/* real logo files — normalised by height, greyscale so they read as one system */
.wm__img {
  height: 26px; width: auto; display: block;
  object-fit: contain; object-position: left center;
  opacity: 1;
  transition: transform 180ms var(--ease);
}
.wm:hover .wm__img { transform: translateY(-1px); }
.research__grid .wm__img { height: 26px; }

/* optical balance: wide wordmarks need less height than compact marks to read
   as the same visual weight. Aspect ratios here run 2.5:1 (KPMG) to 6.4:1 (NASSCOM). */
.wm__img[src*="harvard"]  { height: 25px; }
.wm__img[src*="google"]   { height: 23px; }
.wm__img[src*="kpmg"]     { height: 24px; }
.wm__img[src*="mckinsey"] { height: 19px; }
.wm__img[src*="stanford"] { height: 19px; }
.wm__img[src*="deloitte"] { height: 17px; }
.wm__img[src*="nasscom"]  { height: 16px; }
.finding__src .wm__img[src*="harvard"]  { height: 21px; }
.finding__src .wm__img[src*="google"]   { height: 19px; }
.finding__src .wm__img[src*="kpmg"]     { height: 20px; }
.finding__src .wm__img[src*="mckinsey"] { height: 16px; }
.finding__src .wm__img[src*="stanford"] { height: 17px; }
.finding__src .wm__img[src*="deloitte"] { height: 15px; }
.finding__src .wm__img[src*="nasscom"]  { height: 14px; }
.finding .wm__img { height: 17px; max-width: 104px; }
/* inline marks inside a running paragraph sit on the text baseline */
.finding .wm { vertical-align: -4px; margin-right: 5px; }
/* two marks on one finding sit side by side */
.finding .wm + .wm { margin-left: 2px; }
/* research strip: wordmark on its own line above the finding */
.research__grid .wm { display: flex; align-items: center; height: 30px; margin: 0 0 8px; }
.research__grid .wm__txt { font-size: .95rem; }

.footer__disclosure {
  font-size: 11.5px; line-height: 1.55; color: #8e8578;
  max-width: 84ch; margin: 0 0 var(--s2);
  padding-top: var(--s2); border-top: 1px solid #33302b;
}

/* ---------- source marks: dedicated citation slot, never inside running text ---------- */
.finding { display: flex; flex-direction: column; }
.finding--wide { display: grid; }
.finding__src {
  display: flex; align-items: center; flex-wrap: wrap; gap: 14px;
  margin-top: auto; padding-top: 12px;
  border-top: 1px solid rgba(28,23,18,.10);
}
.finding__src .wm__img { width: auto; opacity: 1; }
.wm__txt--src {
  font-family: var(--font-display); font-weight: 500; font-size: .82rem;
  color: var(--ink-strong); white-space: nowrap;
}
.finding--wide .finding__src { margin-top: 12px; }
.finding em.note { margin-bottom: 12px; }
@media (max-width: 820px) {
  .finding__src { gap: 12px; }
  .finding__src .wm__img { height: 17px; }
}

/* ---------- evidence: per-study mini charts (before -> after) ---------- */
/* Charts sit on a white card inside the warm tile — ink + saffron on white, no dark boxes,
   so the section stays in the light register between two dark neighbours. */
.finding h3 { margin-bottom: 10px; }
.viz { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px 8px; margin-bottom: 10px; }
.viz svg { width: 100%; height: auto; display: block; overflow: visible; }
.viz--wide { align-self: stretch; display: flex; align-items: center; min-width: 260px; }
.viz__big { font-family: var(--font-display); font-weight: 500; font-size: 22px; fill: var(--accent-text); }
.viz__lbl { font-family: var(--font); font-size: 10.5px; font-weight: 700; fill: var(--muted); }
.viz__tag { font-family: var(--font); font-size: 10.5px; font-weight: 700; }
.viz__tag--hot { fill: var(--accent-text); }
.viz__tag--dim { fill: var(--muted); }
.viz__track { fill: var(--tile); }
.viz__bar { transform-box: fill-box; transform-origin: left center; transform: scaleX(0); transition: transform 820ms var(--ease); }
.viz__bar--dim { fill: #c9c2b4; transition-delay: 80ms; }
.viz__bar--hot { fill: var(--accent-line); transition-delay: 260ms; }
.stars path { fill: var(--line); transition: fill 300ms var(--ease); }
.stars path.st5 { transition-delay: 700ms; }
.viz__axis { stroke: var(--line); stroke-width: 1; }
.viz__line { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1100ms var(--ease); }
.viz__line--dim { stroke: #c9c2b4; transition-delay: 80ms; }
.viz__line--hot { stroke: var(--accent-line); transition-delay: 220ms; }
.viz__ring-bg { fill: none; stroke: var(--tile); stroke-width: 9; }
.viz__ring { fill: none; stroke: var(--accent-line); stroke-width: 9; stroke-linecap: round; stroke-dasharray: 0 100; transition: stroke-dasharray 1000ms var(--ease) 150ms; }
.viz__ringnum { font-family: var(--font-display); font-weight: 500; font-size: 17px; fill: var(--ink-strong); }
/* animate on reveal */
.evidence__grid.in .viz__bar { transform: scaleX(1); }
.evidence__grid.in .stars path { fill: #c9c2b4; }
.evidence__grid.in .stars path.st5 { fill: var(--accent-line); }
.evidence__grid.in .viz__line { stroke-dashoffset: 0; }
.evidence__grid.in .viz__ring { stroke-dasharray: 43 100; }
.finding--wide { grid-template-columns: 300px 1fr; align-items: center; }
.finding--wide .viz { margin-bottom: 0; width: 100%; }
@media (max-width: 820px) { .finding--wide { grid-template-columns: 1fr; } .viz--wide { min-width: 0; } }
@media (prefers-reduced-motion: reduce) {
  .viz__bar { transform: scaleX(1) !important; transition: none !important; }
  .viz__line { stroke-dashoffset: 0 !important; transition: none !important; }
  .viz__ring { stroke-dasharray: 43 100 !important; transition: none !important; }
  .stars path { transition: none !important; }
}

/* ---------- header: logo left, navigation cluster right ---------- */
.nav__inner > nav { margin-left: auto; }
.nav__links { margin: 0; }
.nav .btn { margin-left: var(--s3); }

/* ---------- loss: light section, dark stage (overrides the light-stage rules above) ---------- */
.section.loss {
  background-color: var(--surface);
  background-image: radial-gradient(#e3ddd0 1px, transparent 1px);
  background-size: 22px 22px;
}
.lossviz--wide, .lossviz--tall {
  background: var(--navy); border-color: var(--navy-line);
  box-shadow: 0 28px 60px -30px rgba(28,23,18,.55);
}
.loss {
  --loss-1: #e9ab2f;  /* search lane — warm gold, distinct from the CTA saffron */
  --loss-2: #ff7a59;  /* click lane */
  --loss-3: #62b6ff;  /* referral lane */
  --loss-win: #4ade80;/* the competitor's green */
}
.lossviz text { fill: var(--on-navy); }
.lossviz .sub { fill: var(--on-navy-muted); }
.srcpill rect { fill: var(--navy-2); stroke: var(--navy-line); }
.srcpill .ic  { stroke: var(--on-navy-muted); }
.srcpill .icf { fill: var(--on-navy-muted); }
.lane-glow { opacity: .14; }
.laneg.active .lane-glow { opacity: .34; }
.loss.has-active .laneg { opacity: .38; }
.lane--you { stroke: #6a6359; }
.fdot { stroke: var(--navy); filter: drop-shadow(0 0 6px rgba(255,255,255,.22)); }
.fdot--ghost { fill: #8e877b; }
.node-else .main { fill: rgba(74,222,128,.12); stroke: var(--loss-win); }
.node-else .glowring { stroke: var(--loss-win); }
.node-else .t { fill: #fff; }
.node-else .sub { fill: var(--loss-win); }
.node-you rect { fill: rgba(255,255,255,.03); stroke: #6a6359; }
.node-you .t { fill: var(--on-navy-muted); }
.node-you .sub { fill: #8e877b; }
/* story cards lift off the white section */
.loss__story { background: var(--paper); }
.loss__story.active { background: var(--surface); }

/* ============================================================
   THEME v4 — clean professional (Microsoft/Azure reference)
   Appended last on purpose: these win by source order.
   ============================================================ */

/* type: one sans family, hierarchy by weight */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; letter-spacing: var(--track-display); line-height: 1.12; }
h2 { font-size: clamp(1.75rem, 3.4vw, 2.5rem); }
.hero h1 { font-size: clamp(2.4rem, 5.2vw, 3.9rem); font-weight: 700; line-height: 1.06; letter-spacing: -0.03em; }
.hl { background: var(--hl); color: var(--ink-strong); }
.lede { font-size: clamp(1.05rem, 1.6vw, 1.2rem); }
.kicker { color: var(--muted); }
.kicker b { color: var(--accent-text); }

/* buttons: rectangular, one blue */
.btn { border-radius: var(--r-btn); padding: 13px 22px; font-weight: 600; min-height: 46px; }
.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-down); }
.btn--dark { background: var(--ink-strong); color: #fff; }
.btn--outline { background: #fff; color: var(--ink-strong); border: 1px solid var(--line); }
.btn--ghost { color: var(--accent-text); font-weight: 600; padding: 13px 4px; }
.btn--ghost::after { content: "\203A"; background: none; color: var(--accent-text); width: auto; height: auto; font-size: 1.3rem; line-height: 1; margin-left: 2px; }
.link { display: inline-flex; align-items: center; gap: 4px; color: var(--accent-text); font-weight: 600; text-decoration: none; font-size: var(--fs-small); }
.link:hover { text-decoration: underline; }
.link span { font-size: 1.25rem; line-height: 1; }

/* nav */
.nav__actions { display: flex; align-items: center; gap: var(--s3); margin-left: var(--s3); }
.nav__link { color: var(--ink); font-weight: 600; font-size: var(--fs-small); text-decoration: none; }
.nav__link:hover { color: var(--accent-text); }
.nav .btn { margin-left: 0; padding: 11px 18px; }
@media (max-width: 880px) { .nav__link { display: none; } .nav__actions { margin-left: auto; } }

/* surfaces: strictly white / light grey / tint — textures retired */
.section.loss { background-color: var(--paper); background-image: none; }
.shiftsec { background: var(--paper); border: 0; }
.closer { background: var(--paper); border-top: 1px solid var(--line); }
.both { background: var(--tint); border: 0; }
.guarantee { background: var(--tint); }
.evidence, .section.objection, .section.plans, .how, .faq { background: var(--surface); }
.section.calc, .gap, .human { background: var(--paper); }
.research { background: var(--surface); }

/* cards: one style */
.finding, .obj, .loss__story, .plan, .d1, .look, .dash, .street, .phone, .browser, .viz, .chwrap, .finding__src {
  box-shadow: none;
}
.finding { background: var(--surface); border: 1px solid var(--line); }
.evidence .finding { background: var(--paper); border: 0; }
.plan { background: var(--surface); border: 1px solid var(--line); }
.plan__pricebox { background: var(--paper); }
.obj { background: var(--paper); border: 0; }
.look { background: var(--paper); border: 0; }
.dash { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); }
.chwrap { background: var(--paper); border: 0; }
.d1, .g4 { background: var(--surface); border: 1px solid var(--line); }
.street { background: var(--surface); border: 1px solid var(--line); }
.loss__story { background: var(--surface); }
.loss__story.active { box-shadow: 0 8px 24px -16px rgba(0,0,0,.25); }
.phone { box-shadow: 0 16px 40px -24px rgba(0,0,0,.3); }
.browser { box-shadow: 0 16px 40px -24px rgba(0,0,0,.25); }

/* selected states are blue-tinted, not black */
.chips--dash .chip input:checked + span,
.seg2--light .chip input:checked + span { background: var(--accent); border-color: var(--accent); color: #fff; }
.chip input:checked + span { background: var(--accent); border-color: var(--accent); color: #fff; }
.tab[aria-selected="true"] { background: var(--accent); }
.rrow--you { border-color: var(--accent-line); background: var(--accent-soft); }
.rrow--you .rrow__star { color: var(--accent-text); }
.rrow--you .rrow__tag { background: var(--accent); color: #fff; }
.ms__cta, .ms__call, .ms__btn, .thumb__btn { background: var(--accent); color: #fff; }
.ms__tile svg { stroke: var(--accent-text); }
.mic, .guarantee__ic { color: var(--accent-text); }
.plan__list .tick { color: var(--accent-text); }
.fchip { background: var(--ink-strong); }

/* data keeps blue; stars keep gold (semantic) */
.stars path, .evidence__grid.in .stars path.st5 { fill: var(--gold); }
.evidence__grid.in .stars path { fill: #d6d6d2; }
.evidence__grid.in .stars path.st5 { fill: var(--gold); }
.rrow__star { color: var(--gold); }
.sh__tag { color: var(--muted); }
.street.in .sh--lit .sh__tag, .street--you-on .sh--you .sh__tag { color: var(--gold); }
.street.in .sh--lit .sh__awn, .street--you-on .sh--you .sh__awn { fill: var(--accent); }
.street--you-on .sh--you::before { border-color: var(--accent); }
.walker { background: var(--accent); }
.street__road { background: #2a2a2a; border-top-color: #d6d6d2; }

/* loss stage on grey band */
.lossviz--wide, .lossviz--tall { background: var(--navy); border-color: var(--navy-line); box-shadow: 0 24px 56px -32px rgba(0,0,0,.5); }
.loss { --loss-1: #f0b429; --loss-2: #ff7a59; --loss-3: #5aa9ff; --loss-win: #4ade80; }

/* image placeholders: real dimensions, obvious, swap-ready */
.ph {
  position: relative; overflow: hidden; border-radius: var(--r-card);
  background:
    repeating-linear-gradient(135deg, rgba(0,0,0,.025) 0 10px, transparent 10px 20px),
    linear-gradient(160deg, #e9e9e5, #d9d9d4);
  display: grid; place-items: center; text-align: center;
  color: var(--muted); font-size: var(--fs-tiny); font-weight: 600; line-height: 1.4;
}
.ph span { padding: 12px; max-width: 24ch; }
.ph::before { content: ""; width: 28px; height: 22px; border: 2px solid currentColor; border-radius: 4px; opacity: .45; margin-bottom: -6px; }
.ph--4x3 { aspect-ratio: 4 / 3; }
.ph--16x9 { aspect-ratio: 16 / 9; }
.ph--sm { margin-bottom: 14px; }
.ph--sm span { font-size: 11.5px; }

/* hero carousel */
.hero__visual { padding-bottom: 0; }
.carousel { position: relative; border-radius: var(--r-card); overflow: hidden; aspect-ratio: 4 / 3; background: var(--tile); }
.carousel__track, .ph--slide { position: absolute; inset: 0; }
.ph--slide { opacity: 0; transition: opacity 700ms var(--ease); border-radius: 0; }
.ph--slide.is-active { opacity: 1; }
.carousel__ctl { position: absolute; left: 14px; bottom: 12px; display: flex; align-items: center; gap: 8px; z-index: 3; }
.carousel__dot { width: 8px; height: 8px; border-radius: 50%; border: 0; background: rgba(0,0,0,.28); cursor: pointer; padding: 0; transition: transform 160ms var(--ease), background 160ms var(--ease); }
.carousel__dot.is-active { background: var(--accent); transform: scale(1.25); }
.carousel__pause { width: 24px; height: 24px; border-radius: 50%; border: 0; background: rgba(255,255,255,.85); cursor: pointer; display: grid; place-items: center; margin-left: 4px; }
.carousel__pause span { width: 8px; height: 10px; border-left: 3px solid var(--ink-strong); border-right: 3px solid var(--ink-strong); box-sizing: border-box; }
.carousel__pause.is-paused span { width: 0; height: 0; border: 0; border-left: 9px solid var(--ink-strong); border-top: 6px solid transparent; border-bottom: 6px solid transparent; margin-left: 3px; }
.hero__visual .phone { position: absolute; right: -10px; bottom: -18px; width: 56%; z-index: 2; }
.fchip--1 { top: -12px; left: -12px; }
@media (max-width: 960px) {
  .hero__visual .phone { position: static; width: 100%; margin-top: 10px; }
  .fchip--1, .fchip--2 { position: static; display: inline-block; margin: 8px 6px 0 0; }
}

/* shift: chart + image side by side in the right column */
.shiftsec .shift__grid > div:last-child { display: grid; gap: var(--s2); }

/* guarantee split */
.guarantee__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); align-items: center; }
.guarantee__grid h2 { max-width: 20ch; margin-bottom: 10px; }
.guarantee__grid p { margin-bottom: var(--s2); max-width: 46ch; }
.guarantee__ic { margin: 0 0 var(--s2); }
@media (max-width: 880px) { .guarantee__grid { grid-template-columns: 1fr; } }

/* how it works: image cards */
.how__steps { gap: var(--s3); }
.how__step { padding-top: 0; }
.how__step::before { position: static; display: inline-grid; margin: 0 0 8px; width: 32px; height: 32px; font-size: var(--fs-small); background: var(--accent); color: #fff; }
.how__step strong { margin: 4px 0 4px; }

/* closer split */
.closer__in { display: grid; grid-template-columns: 1fr 1.2fr auto; gap: var(--s4); align-items: center; }
.closer__img { max-width: 300px; }
@media (max-width: 960px) { .closer__in { grid-template-columns: 1fr; } .closer__img { max-width: none; } }

/* footer: light, columned */
.footer { background: var(--paper); color: var(--ink); border-top: 1px solid var(--line); padding: var(--s5) 0 var(--s4); }
.footer a { color: var(--ink); }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--s4); margin-bottom: var(--s4); }
.footer__brand .logo { margin-bottom: 10px; }
.footer__brand .logo__img { height: 24px; }
.footer__brand p { margin: 0; color: var(--muted); font-size: var(--fs-small); max-width: 34ch; }
.footer h4 { font-size: var(--fs-small); margin: 0 0 12px; color: var(--ink-strong); }
.footer__grid a { display: block; font-size: var(--fs-small); color: var(--muted); text-decoration: none; margin-bottom: 8px; }
.footer__grid a:hover { color: var(--accent-text); text-decoration: underline; }
.footer__row { display: none; }
.footer__disclosure { color: var(--muted); border-top: 1px solid var(--line); padding-top: var(--s3); margin-bottom: 0; }
.footer__legal { color: var(--muted); }
@media (max-width: 880px) { .footer__grid { grid-template-columns: 1fr 1fr; } .footer__brand { grid-column: 1 / -1; } .footer__brand p { max-width: none; } }

/* calculator accents */
.ch-line { stroke: var(--accent-line); }
.ch-end { fill: var(--accent-text); }
.ch-pay { fill: var(--accent); stroke: #fff; }
.stat--hero .stat__val { color: var(--accent-text); }
input[type="range"]::-webkit-slider-thumb { background: var(--accent); border-color: #fff; }
input[type="range"]::-moz-range-thumb { background: var(--accent); border-color: #fff; }
/* .viz__ring is deliberately NOT in this list: it is a stroked arc, and the
   fill here would override its fill:none and paint it as a solid disc.
   Its stroke is already var(--accent-line) where it is defined. */
.leg__dot--grow, .look__fill, .d1__bar--now .d1__fill, .viz__bar--hot { background: var(--accent-line); stroke: var(--accent-line); fill: var(--accent-line); }
.viz__line--hot { stroke: var(--accent-line); }
.viz__big, .viz__tag--hot { fill: var(--accent-text); }
.d1__bar--now .d1__num { color: var(--accent-text); }

/* v4 fix batch (post-review) */
.hero__visual .phone { width: 48%; right: -8px; bottom: -14px; }
.guarantee .wrap, .guarantee__grid { text-align: left; }
.guarantee__grid p { margin-inline: 0; }
/* residual warm greys -> neutral */
.msk { background: #e3e3df; }
.msk--t { background: #cfcfca; }
.d1__bar--then .d1__fill { background: #d6d6d2; }
.g4__cut { border-top-color: #d6d6d2; }
.viz__bar--dim { fill: #c9c9c5; }
.viz__line--dim { stroke: #c9c9c5; }
.look__fill--dim { background: #c9c9c5; }
.evidence__grid.in .stars path { fill: #d6d6d2; }
.ch-base, .ch-guide { stroke: #b5b5b0; }
.sh__wall { fill: #e6e6e2; stroke: #cfcfca; }
.sh__awn { fill: #d6d6d2; }
.sh__stripe { stroke: #c5c5c0; }
.sh__win { fill: #d9d9d5; stroke: #c5c5c0; }
.sh__door, .sh__sign { fill: #cfcfca; }
.street.in .sh--lit .sh__wall, .street--you-on .sh--you .sh__wall { fill: #fff; stroke: #d6d6d2; }
.sh--you::before { border-color: #b5b5b0; }

/* no yellow highlights: emphasis becomes a blue underline accent */
.hl {
  background: none; color: var(--ink-strong); padding: 0;
  text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: .14em; text-underline-offset: .12em;
}
.gold { color: var(--accent-text); }
@media (max-width: 960px) {
  .hero__visual .phone { position: static; width: 100%; margin-top: 10px; }
}

/* ---------- soft blue gradient surface (owner liked it) ---------- */
:root {
  --grad-blue: linear-gradient(160deg, #eaf1ff 0%, #f4f7fe 48%, #e6eefd 100%);
  --grad-hero: radial-gradient(70% 60% at 88% 8%, #dfe9ff 0%, rgba(223,233,255,0) 60%),
               radial-gradient(50% 40% at 8% 95%, #eaf1ff 0%, rgba(234,241,255,0) 60%),
               linear-gradient(180deg, #f9fbff 0%, #f3f6fd 100%);
}
.hero { background: var(--grad-hero); }
.guarantee, .both { background: var(--grad-blue); }
.closer { background: var(--grad-blue); border-top: 0; }
.section.loss { background: var(--grad-blue); }
/* cards on the gradient stay crisp */
.loss__story { background: var(--surface); border-color: #dfe6f5; }
.closer__img { box-shadow: 0 12px 30px -20px rgba(25,87,214,.35); }
.browser { border-color: #dfe6f5; }

/* footer bottom bar: legal left, address right */
.footer__bottom {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--s2) var(--s4);
  flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: var(--s3); margin-top: var(--s3);
}
.footer__bottom .footer__legal { margin: 0; }
.footer__legal strong { color: var(--ink-strong); font-weight: 600; }
.footer__addr { font-style: normal; font-size: var(--fs-tiny); color: var(--muted); line-height: 1.6; margin: 0; text-align: right; }
@media (max-width: 880px) { .footer__bottom { flex-direction: column; } .footer__addr { text-align: left; } }
.footer__addr a { color: var(--accent-text); text-decoration: none; }
.footer__addr a:hover { text-decoration: underline; }
.human__legal a { color: var(--accent-text); text-decoration: none; }
.human__legal a:hover { text-decoration: underline; }

/* real photography in the image slots */
.ph { background: var(--tile); }
.ph:has(.ph__img)::before { display: none; }
.ph__img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }
.ph--slide .ph__img { border-radius: 0; }

/* "Starting from" eyebrow above the price */
.plan__from {
  display: block; font-size: var(--fs-tiny); font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 2px;
}

/* ---------- PRICING v2 — built for skimmers ---------- */
.plans__intro { max-width: 60ch; font-size: var(--fs-body); margin-bottom: var(--s3); }
/* align-items:start so each card is only as tall as its content. Stretching them
   to equal height made the shorter card absorb the difference as dead space
   above its button, because .pk__cta uses margin-top:auto. */
.pk__grid { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: var(--s3); margin-bottom: var(--s3); }
.pk {
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  padding: var(--s3); display: flex; flex-direction: column; gap: 18px;
}
.pk__head { display: flex; align-items: center; gap: 16px; }
.pk__num {
  flex: none; width: 72px; height: 72px; border-radius: 14px;
  background: var(--accent-soft); color: var(--accent-text);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-weight: 700; font-size: 2rem; line-height: 1; letter-spacing: -0.03em;
}
.pk__num small { font-size: .66rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; margin-top: 3px; }
.pk__title { margin: 0 0 4px; font-size: 1.45rem; }
.pk__for { margin: 0; color: var(--muted); font-size: var(--fs-small); }
/* price: the first thing a skimmer hunts for, so it sits high and large */
.pk__price { display: grid; gap: 2px; padding: 16px 18px; border-radius: 12px; background: var(--paper); }
.pk__from { font-size: var(--fs-tiny); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.pk__amount { font-size: clamp(2.2rem, 3.6vw, 2.9rem); font-weight: 700; letter-spacing: -0.03em; color: var(--ink-strong); line-height: 1.05; }
.pk__gst { font-size: var(--fs-tiny); color: var(--muted); }
.pk__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pk__stats > div { display: flex; align-items: center; gap: 8px; font-size: var(--fs-small); color: var(--muted); padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; }
.pk__stats b { color: var(--ink-strong); font-weight: 600; }
.pk__ic { width: 18px; height: 18px; flex: none; stroke: var(--accent-text); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pk__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.pk__list li { display: flex; gap: 12px; align-items: flex-start; font-size: var(--fs-small); color: var(--muted); line-height: 1.5; }
.pk__list li .pk__ic { margin-top: 3px; width: 20px; height: 20px; }
.pk__list b { color: var(--ink-strong); font-weight: 600; }
.pk__cta { justify-content: center; margin-top: auto; padding: 15px 22px; font-size: 1rem; }
.pk__fine { margin: 0; font-size: 11.5px; line-height: 1.5; color: var(--muted); }
.pk__fine .todo { font-style: italic; }
.pk__help {
  display: grid; grid-template-columns: auto 1fr 1fr; gap: 10px var(--s3); align-items: center;
  padding: 14px 18px; border-radius: 12px; background: var(--paper); font-size: var(--fs-small); color: var(--muted);
}
.pk__help strong { color: var(--ink-strong); }
.pk__help b { color: var(--accent-text); font-weight: 600; }
.pk__help em { color: var(--ink-strong); }
@media (max-width: 880px) {
  .pk__grid { grid-template-columns: 1fr; }
  .pk__help { grid-template-columns: 1fr; }
  .pk__stats { grid-template-columns: 1fr; }
}
.section.plans { padding: 40px 0; }
.plans h2 { margin-bottom: 6px; }
.plans__intro { margin-bottom: 18px; font-size: var(--fs-small); }
.pk { gap: 14px; padding: 20px; }
.pk__price { padding: 12px 16px; }
.pk__amount { font-size: clamp(2rem, 3.2vw, 2.5rem); }
.pk__stats > div { padding: 8px 12px; white-space: nowrap; }
.pk__list { gap: 10px; }
.pk__grid { margin-bottom: 16px; }
.how { background: var(--paper); }
.how .ph { background: var(--tile); }

/* ---------- PRICING v3 — final conversion block ---------- */
.pk__anchor { font-size: var(--fs-tiny); color: var(--muted); margin-top: 6px; padding-top: 8px; border-top: 1px dashed var(--line); }
.pk__anchor b { color: var(--ink-strong); }
.pk__lbl { margin: 4px 0 0; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.pk__list { gap: 9px; }
.pk__not { margin: 0; font-size: var(--fs-tiny); color: var(--muted); line-height: 1.5; padding: 10px 12px; background: var(--paper); border-radius: 8px; }
.pk__not b { color: var(--ink-strong); }
.pk__pay { display: flex; align-items: center; gap: 8px; margin: -4px 0 0; font-size: 11.5px; color: var(--muted); justify-content: center; text-align: center; }
.pk__pay .pk__ic { width: 14px; height: 14px; }
.pk__guar { font-size: var(--fs-tiny); line-height: 1.55; color: var(--ink); background: var(--accent-soft); border-radius: 10px; padding: 12px 14px; }
.pk__guar b { color: var(--accent-text); }
.pk__fine { display: none; }

/* price anchor strip */
.anchor { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 12px; margin: var(--s3) 0; }
.anchor__col { border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; background: var(--surface); }
.anchor__col p { margin: 6px 0 0; font-size: var(--fs-tiny); color: var(--muted); line-height: 1.5; }
.anchor__lbl { display: block; font-size: var(--fs-tiny); font-weight: 600; color: var(--muted); }
.anchor__price { display: block; font-size: 1.35rem; font-weight: 700; letter-spacing: -0.02em; color: var(--ink-strong); margin-top: 2px; }
.anchor__col--dim { background: var(--paper); }
.anchor__col--dim .anchor__price { color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(0,0,0,.25); text-decoration-thickness: 2px; }
.anchor__col--us { border: 2px solid var(--accent); }
.anchor__col--us .anchor__lbl, .anchor__col--us .anchor__price { color: var(--accent-text); }

/* after you pay + scope */
.after { display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--s3); margin-bottom: var(--s3); }
.after > div { background: var(--paper); border-radius: 12px; padding: 18px 20px; }
.after ol, .after ul { margin: 10px 0 0; padding-left: 20px; font-size: var(--fs-small); color: var(--muted); display: grid; gap: 8px; }
.after ol b { color: var(--ink-strong); }
.after p { margin: 8px 0 0; font-size: var(--fs-small); color: var(--muted); }
.after__note { color: var(--ink-strong) !important; font-weight: 600; }

/* trust bar */
.trustbar { display: flex; flex-wrap: wrap; gap: 10px var(--s3); justify-content: center; font-size: var(--fs-tiny); color: var(--muted); padding-top: var(--s2); border-top: 1px solid var(--line); }
.trustbar span { display: inline-flex; align-items: center; gap: 6px; }
.trustbar a { color: var(--accent-text); text-decoration: none; }
.trustbar .pk__ic { width: 14px; height: 14px; }

/* the section is the checkout now — it may exceed one viewport */
.section.plans { padding: 56px 0; }

/* order dialog */
.order { border: 0; border-radius: 16px; padding: 0; width: min(560px, calc(100vw - 32px)); box-shadow: 0 30px 80px -30px rgba(0,0,0,.45); }
.order::backdrop { background: rgba(20,20,20,.55); }
.order__form { padding: 28px 28px 24px; position: relative; }
.order__close { position: absolute; top: 12px; right: 14px; width: 36px; height: 36px; border: 0; background: var(--paper); border-radius: 50%; font-size: 1.4rem; line-height: 1; cursor: pointer; color: var(--muted); }
.order__form h3 { margin: 4px 0 6px; font-size: 1.45rem; }
.order__sub { margin: 0 0 16px; color: var(--muted); font-size: var(--fs-small); }
.order__pkg { border: 0; padding: 0; margin: 0 0 16px; }
.order__pkg .chip span { font-size: var(--fs-small); }
.order__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.order__grid label { display: grid; gap: 5px; font-size: var(--fs-tiny); font-weight: 600; color: var(--ink-strong); }
.order__grid input, .order__grid textarea { font: inherit; font-size: var(--fs-small); padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); }
.order__grid input:focus, .order__grid textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.order__wide { grid-column: 1 / -1; }
.order__opt { font-weight: 400; color: var(--muted); }
.order__submit { width: 100%; justify-content: center; margin-top: 16px; }
.order__fine { margin: 10px 0 0; font-size: 11.5px; color: var(--muted); line-height: 1.5; }
.order__done { margin: 12px 0 0; font-size: var(--fs-small); color: var(--ink); background: var(--accent-soft); border-radius: 8px; padding: 10px 12px; }
.order__done a { color: var(--accent-text); }
.order__done--warn { background: #fff4e5; }
.order__gst { text-transform: uppercase; }
.order__gst::placeholder { text-transform: none; }
.order__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.order__submit[disabled] { opacity: .6; cursor: progress; }
.order__form--sent .order__step { display: none; }

/* Step 2 — itemised quote card */
.quote { border: 1px solid var(--line); border-radius: var(--r-btn); margin: 2px 0 4px; background: #fff; overflow: hidden; }
.quote__row { display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.quote__row:last-child { border-bottom: 0; }
/* rows the listing package hides — display beats the [hidden] UA rule */
.quote__row[hidden] { display: none; }
.quote__row--opt { grid-template-columns: auto 1fr auto; cursor: pointer; }
.quote__row b { display: block; font-size: var(--fs-small); color: var(--ink-strong); line-height: 1.35; }
.quote__row small { display: block; font-size: var(--fs-tiny); color: var(--muted); line-height: 1.4; }
.quote__row--pkg { align-items: start; }
.quote__inc { list-style: none; margin: 7px 0 1px; padding: 0; display: grid; gap: 4px; }
.quote__inc li { position: relative; padding-left: 17px; font-size: var(--fs-tiny); color: var(--muted); line-height: 1.45; }
.quote__inc li::before {
  content: ""; position: absolute; left: 1px; top: .34em; width: 9px; height: 5px;
  border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}
.quote__row data { font-size: var(--fs-small); font-weight: 700; color: var(--ink-strong); font-variant-numeric: tabular-nums; white-space: nowrap; }
.quote__row data s { color: var(--muted); font-weight: 400; margin-right: 6px; }
.quote__tag { display: inline-block; margin-left: 6px; padding: 1px 6px; border: 1px solid var(--line); border-radius: 3px; background: var(--paper); font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); vertical-align: 1.5px; }
.quote__pick input { width: 18px; height: 18px; accent-color: var(--accent); display: block; cursor: pointer; }
.quote__stepper { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--r-btn); overflow: hidden; }
.quote__stepper button { width: 28px; height: 28px; border: 0; background: var(--paper); color: var(--ink-strong); font-size: 1rem; line-height: 1; cursor: pointer; }
.quote__stepper button:hover { background: var(--line); }
.quote__stepper .quote__num {
  width: 44px; min-width: 44px; padding: 0; border: 0; background: none; font: inherit;
  text-align: center; font-size: var(--fs-small); font-weight: 700; color: var(--ink-strong);
  font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield;
}
.quote__stepper .quote__num::-webkit-outer-spin-button,
.quote__stepper .quote__num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.quote__stepper .quote__num:focus { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 4px; }
.quote__row--total { background: var(--paper); border-top: 1px solid var(--line); }
.quote__row--total b { font-size: 1.02rem; }
.quote__row--total data { font-size: 1.15rem; }
.quote__row--save { background: var(--accent-soft); border-top: 1px solid var(--accent); }
.quote__row--save b { color: var(--accent-text); font-size: 1.02rem; }
.quote__row--save small { color: var(--accent-text); opacity: .85; }
.quote__row--save data { color: var(--accent-text); font-size: 1.15rem; }
.order__back { display: block; width: 100%; margin: 10px 0 0; padding: 6px; border: 0; background: none; color: var(--muted); font: inherit; font-size: var(--fs-small); cursor: pointer; }
.order__back:hover { color: var(--ink-strong); }
@media (max-width: 880px) {
  .anchor { grid-template-columns: 1fr; }
  .after { grid-template-columns: 1fr; }
  .order__grid { grid-template-columns: 1fr; }
  .order__form { padding: 22px 18px 18px; }
}

/* order dialog — rectangular chips, close button clear of the kicker */
.order { border-radius: 10px; }
.order__pkg .chip span { border-radius: var(--r-btn); }
.order__close { border-radius: var(--r-btn); top: 10px; right: 10px; width: 32px; height: 32px; }
.order__form .kicker { padding-right: 44px; }
@media (max-width: 640px) {
  .order__form { padding: 22px 18px 18px; }
  .order__grid { grid-template-columns: 1fr; }
}

/* ===== SHIFT v2 — era timeline + photo with floating chart ===== */
.shiftsec .shift__grid { grid-template-columns: 1fr 1fr; gap: var(--s4); align-items: center; }
.shiftsec .shift__grid > div:last-child { display: block; }
.shiftsec h2 { max-width: 18ch; }
.era { list-style: none; margin: var(--s3) 0 0; padding: 0; display: grid; }
.era__step { position: relative; padding: 0 0 22px 34px; }
.era__step::before { content: ""; position: absolute; left: 7px; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--surface); border: 2px solid var(--line-strong, #c8c8c4); box-sizing: border-box; }
.era__step::after { content: ""; position: absolute; left: 11px; top: 20px; bottom: -2px; width: 2px; background: var(--line); }
.era__step:last-child { padding-bottom: 0; }
.era__step:last-child::after { display: none; }
.era__step--now::before { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 5px var(--accent-soft); }
.era__when { display: block; font-size: var(--fs-tiny); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
.era__step--now .era__when { color: var(--accent-text); }
.era__step strong { display: block; color: var(--ink-strong); font-size: 1.08rem; margin-bottom: 3px; }
.era__step p { margin: 0; color: var(--muted); font-size: var(--fs-small); max-width: 44ch; }
.era__step p b { color: var(--ink-strong); font-weight: 600; }
.shift__visual { position: relative; padding-bottom: 72px; }
.shift__photo { margin: 0; }
.d1--float { position: absolute; left: -12px; bottom: 0; width: min(300px, 78%); padding: 18px 20px 16px; box-shadow: 0 24px 48px -24px rgba(0,0,0,.35); }
.d1--float .d1__bars { height: 120px; gap: var(--s2); }
.d1--float .d1__bar--now .d1__num { font-size: 2.1rem; }
.d1--float .d1__bar--then .d1__num { font-size: 1.15rem; }
.d1__title { margin: 0 0 10px; font-size: var(--fs-small); font-weight: 600; color: var(--ink-strong); }
.d1--float .d1__caption { margin-top: 12px; font-size: 11.5px; }
@media (max-width: 880px) {
  .shiftsec .shift__grid { grid-template-columns: 1fr; }
  .shift__visual { padding-bottom: 0; }
  .d1--float { position: static; width: auto; margin-top: var(--s2); box-shadow: none; }
}

/* ===== FAQ v2 — answer-first cards ===== */
.faq__head { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--s3); }
.faq__head h2 { margin: 0; }
/* FAQ — click to open. Built on <details>/<summary>, so it works with no JS and
   is keyboard- and screen-reader-operable for free. name="faq" closes the others
   on open where supported, and simply allows several open where it is not.
   One column: in a grid, opening one answer would resize its whole row. */
.faq .faq__grid { grid-template-columns: 1fr; gap: 10px; margin: 0; }
.qa { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-card); padding: 0; }
.qa[open] { background: var(--surface); border-color: var(--accent); }
.faq .qa__q {
  margin: 0; padding: 15px 20px; font-weight: 600; color: var(--ink-strong); font-size: 1.02rem;
  cursor: pointer; display: flex; align-items: center; gap: 16px; list-style: none;
}
.faq .qa__q::-webkit-details-marker { display: none; }
.faq .qa__q:hover { color: var(--accent-text); }
.faq .qa__q:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--r-card); }
/* chevron: a rotated corner, so no icon file and no extra markup */
.faq .qa__q::after {
  content: ""; flex: none; margin-left: auto; width: 8px; height: 8px; margin-top: -4px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(45deg); transition: transform .18s ease;
}
.qa[open] .qa__q::after { transform: rotate(-135deg); margin-top: 2px; }
/* the row is full width; the answer keeps a reading measure so lines do not run
   to ~140 characters on a wide screen */
.faq .qa__a { margin: 0; padding: 0 20px 17px; color: var(--muted); font-size: var(--fs-small); line-height: 1.55; max-width: 90ch; }
.faq .qa__a strong { color: var(--accent-text); font-weight: 700; }
@media (max-width: 640px) { .faq .qa__q { padding: 14px 16px; } .faq .qa__a { padding: 0 16px 15px; } }
.d1--float .d1__bar { justify-content: flex-end; }
.d1--float .d1__fill { flex: 0 0 auto; height: auto; }
.d1--float .d1__bar--then .d1__fill { height: 8px; }
.d1--float .d1__bar--now  .d1__fill { height: 62px; }
@media (max-width: 880px) {
  .d1--float { max-width: none; margin-left: 0; margin-right: 0; padding: 18px 20px 16px; }
  .d1--float .d1__bars { height: 110px; }
  .d1--float .d1__bar--now .d1__fill { height: 56px; }
  .d1__title { margin-bottom: 14px; }
  .d1--float .d1__bar--now .d1__num { font-size: 2rem; }
}
.d1--float .d1__bars { height: auto; align-items: flex-end; }
.d1--float .d1__bar { height: auto; }
.d1--float .d1__num { line-height: 1; }


/* ============================================================
   MOBILE DENSITY  (<=880px)
   Tightens vertical rhythm and fixes small-screen defects.
   Appended last so it wins over earlier same-specificity rules.
   ============================================================ */
@media (max-width: 880px) {
  /* --- section rhythm: ~40% less dead space between blocks --- */
  .section            { padding: 34px 0; }
  .research           { padding: 18px 0; }
  .evidence           { padding: 30px 0; }
  .section.loss       { padding: 30px 0; }
  .section.objection  { padding: 30px 0; }
  .section.calc       { padding: 24px 0; }
  .section.plans      { padding: 30px 0; }
  .closer             { padding: 34px 0; }
  .footer             { padding: 36px 0 24px; }

  /* --- hero: pull the headline up, close the gap to the visual --- */
  .section#top        { padding: 26px 0 34px; }

  /* --- legibility: nothing below 11px for a 45+ reader --- */
  .rrow__tag, .sh__tag { font-size: 11px; }
  .rrow__meta, .obj__year, .d1__caption { font-size: 11.5px; }

  /* --- tap targets: carousel controls were 8-24px --- */
  .carousel__dot { position: relative; }
  .carousel__dot::after {
    content: ""; position: absolute; left: 50%; top: 50%;
    width: 44px; height: 44px; transform: translate(-50%,-50%);
  }
  .carousel__pause { width: 36px; height: 36px; }

  /* --- calculator: sticky result bar was covering the last option --- */
  .dash { padding-bottom: 84px; }

  /* --- heading rhythm: headlines carried desktop-sized air --- */
  .sec__head, .calc__head { margin-bottom: var(--s2); }
  .kicker { margin-bottom: 6px; }
  h2 { margin-bottom: 10px; }
  .sec__sub, .calc__sub, .plans__intro { margin-bottom: var(--s2); }
}

/* ===== Order step 2 — fit the whole quote + CTA on a phone screen ===== */
.order__fine-short { display: none; }
@media (max-width: 640px) {
  .order { max-height: calc(100dvh - 20px); }
  .order__form { max-height: calc(100dvh - 20px); overflow-y: auto; overscroll-behavior: contain; padding: 16px 14px 0; }
  #order-step2 .kicker { font-size: 10px; letter-spacing: .06em; }
  #order-step2 h3 { font-size: 1.18rem; margin: 3px 0 4px; }
  #order-step2 .order__sub { display: none; }
  #order-step2 .quote { margin-top: 0; }
  #order-step2 .quote__row { padding: 9px 11px; gap: 2px 12px; }
  #order-step2 .quote__row b { font-size: 12.5px; }
  #order-step2 .quote__row small { font-size: 11px; line-height: 1.35; }
  #order-step2 .quote__row data { font-size: 13px; }
  #order-step2 .quote__inc { margin: 5px 0 0; gap: 2px; }
  #order-step2 .quote__inc li { font-size: 11px; line-height: 1.35; padding-left: 15px; }
  #order-step2 .quote__inc li::before { top: .3em; width: 8px; height: 4px; }
  #order-step2 .quote__row--total b, #order-step2 .quote__row--save b { font-size: 13.5px; }
  #order-step2 .quote__row--total data, #order-step2 .quote__row--save data { font-size: 1.02rem; }
  #order-step2 .quote__stepper button { width: 26px; height: 26px; }
  #order-step2 .quote__stepper .quote__num { width: 40px; min-width: 40px; }
  /* CTA stays reachable even on short screens */
  #order-step2 .order__foot { position: sticky; bottom: 0; background: #fff; padding: 8px 0 12px; margin-top: 2px; }
  #order-step2 .order__submit { margin-top: 0; }
  #order-step2 .order__back { margin: 4px 0 0; padding: 2px; }
  #order-step2 .order__fine { margin-top: 6px; }
  .order__fine-long { display: none; }
  .order__fine-short { display: inline; }
}
/* short phones: the savings breakdown gives up its detail so nothing clips */
@media (max-width: 640px) and (max-height: 720px) {
  #order-step2 .quote__row--save small { display: none; }
  #order-step2 .quote__row { padding: 8px 11px; }
  #order-step2 .order__fine { display: none; }
}