/* Balanik v2 — piece 1: nav + hero + pain.
   Builds on base.css tokens and primitives only (.im-*). No raw hex.
   Page type (outside the mocks) uses only the scale tokens: 76 (H1) · 48 (H2) · 36 (bar figures) ·
   17 (subhead, body, nav, buttons) · 13 (eyebrow, captions, labels); display weights 300 and 500.
   Inside the floating UI mocks: 11–14px and a 48px headline figure, as allowed for pictures of the app. */

/* ---------------------------------------------------------------- skip link */
.hn-skip {
  position: absolute; left: 16px; top: -64px; z-index: 100;
  display: inline-flex; align-items: center; height: 40px; padding: 0 16px;
  background: var(--paper); color: var(--violet); border-radius: var(--r-pill); box-shadow: var(--shadow-soft);
  font: 500 var(--t-body)/1 var(--font);
}
.hn-skip:focus { top: 14px; }

/* ---------------------------------------------------------------- nav */
.hn {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 85%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--mist);
}
.hn__bar { position: relative; display: flex; align-items: center; height: 68px; }
.hn__brand { display: flex; align-items: center; flex: none; border-radius: 8px; }
.hn__brand:hover { text-decoration: none; }
.hn__lockup { height: 30px; width: auto; }
.hn__mark { display: none; width: 32px; height: 32px; }

.hn__links { display: flex; align-items: center; gap: 32px; margin-left: 56px; }
.hn__links a { color: var(--ink); font: 500 var(--t-body)/1 var(--font); padding: 8px 0; transition: color .25s var(--ease); }
.hn__links a:hover { color: var(--violet); text-decoration: none; }

.hn__act { position: relative; display: flex; align-items: center; margin-left: auto; }
.hn__demo { white-space: nowrap; transition: margin-right .35s var(--ease); }
/* The nav pill only shows once the hero pill has scrolled away (hero.js), so a viewport never
   holds two. The ghost demo link slides left to make room for it. */
.hn__pill {
  position: absolute; right: 0; top: 50%; translate: 0 -50%; white-space: nowrap;
  transition: background .25s var(--ease), transform .25s var(--ease), opacity .3s var(--ease), visibility 0s linear 0s;
}
.hn--cta .hn__demo { margin-right: var(--pw, 230px); }
.js .hn:not(.hn--cta) .hn__pill { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s var(--ease), visibility 0s linear .2s; }

.hn__toggle {
  display: none; place-items: center; width: 44px; height: 44px; margin-left: 12px; margin-right: -8px;
  border: 0; border-radius: var(--r-pill); background: transparent; color: var(--ink); cursor: pointer;
  transition: background .25s var(--ease);
}
.hn__toggle:hover { background: var(--lilac); }
.hn__toggle svg path { transition: transform .3s var(--ease); transform-origin: 11px 11px; }
.hn__toggle[aria-expanded="true"] .hn__t1 { transform: translateY(3px) rotate(45deg); }
.hn__toggle[aria-expanded="true"] .hn__t2 { transform: translateY(-3px) rotate(-45deg); }

.hn__panel { position: absolute; left: 0; right: 0; top: 100%; background: var(--paper); border-bottom: 1px solid var(--mist); box-shadow: var(--shadow-soft); }
.hn__panel[hidden] { display: none; }
.hn__panel nav { display: flex; flex-direction: column; padding-top: 8px; padding-bottom: 16px; }
.hn__panel a { color: var(--ink); font: 500 var(--t-body)/1 var(--font); padding: 18px 0; border-bottom: 1px solid var(--mist); }
.hn__panel a:last-child { border-bottom: 0; }
.hn__panel a:hover { text-decoration: none; color: var(--violet); }

@media (max-width: 959px) {
  .hn__links { display: none; }
  .hn__toggle { display: grid; }
}
@media (max-width: 639px) {
  .hn__demo { display: none; }
  .hn__pill { position: static; translate: none; min-height: 40px; padding: 11px 18px; }
  .js .hn:not(.hn--cta) .hn__pill { display: none; }
  /* when the pill shows, the lockup gives way to the mark so logo, pill and menu fit at 375px */
  .hn--cta .hn__lockup { display: none; }
  .hn--cta .hn__mark { display: block; }
  .hn__lockup { height: 26px; }
}

/* ---------------------------------------------------------------- hero layout */
.hero { padding: 72px 0 0; overflow-x: clip; scroll-margin-top: 68px; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 650px) minmax(0, 1fr); gap: 24px; align-items: center; }

.hero__eyebrow { margin: 0 0 20px; }
.hero__title { max-width: 650px; }
.hero__sub { margin-top: 28px; max-width: 520px; }
.hero__cta { margin-top: 36px; }
.hero__price { margin: 18px 0 0; max-width: 440px; font: 500 var(--t-small)/1.38 var(--font); letter-spacing: .01em; color: var(--fog); }

/* launch offer pill (launch-only): sun badge = celebration, struck real previous price, the launch price */
.hero__launch {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 24px 0 0; padding: 6px 16px 6px 6px;
  background: var(--paper); border: 1px solid var(--mist); border-radius: var(--r-pill); box-shadow: var(--shadow-soft);
  font: 500 var(--t-small)/1.2 var(--font); letter-spacing: .01em; color: var(--storm);
}
.hero__badge { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: var(--r-pill); background: var(--sun); color: var(--sun-ink); font-weight: 500; }
.hero__was { color: var(--fog); text-decoration-thickness: 1.5px; }
.hero__save { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: var(--r-pill); background: var(--mint); color: var(--mint-ink); font-weight: 500; }
.hero__now { font: 500 var(--t-h3)/1 var(--font); letter-spacing: -.01em; color: var(--ink); font-variant-numeric: tabular-nums; }
.hero__until { color: var(--storm); }
.hero__launch + .hero__price { margin-top: 14px; }

/* works with: one quiet line, under a hairline */
.hero__works {
  margin: 64px 0 0; padding-top: 24px; border-top: 1px solid var(--mist);
  font: 500 var(--t-small)/1.38 var(--font); letter-spacing: .01em; color: var(--fog);
}

/* ---------------------------------------------------------------- the offer: what you get (three cards) */
.offer { padding: 64px 0 0; }
.offer__eyebrow { margin: 0 0 20px; }
.offer__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.offer__item { background: var(--paper); border: 1px solid var(--mist); border-radius: var(--r-card); padding: 32px; }
.offer__item .im-badge { margin-bottom: 20px; }
.offer__item .im-h3 { text-wrap: balance; }
.offer__item .im-body { margin-top: 10px; text-wrap: pretty; }
.offer__item--trial { border-color: var(--violet); box-shadow: 0 0 0 3px var(--lilac); }
.offer__noads { margin: 20px 0 0; font-size: var(--t-small); line-height: 1.45; font-weight: 500; letter-spacing: .01em; color: var(--storm); }
@media (max-width: 959px) { .offer__grid { grid-template-columns: 1fr; gap: 16px; } .offer__item { padding: 24px; } }

/* ---------------------------------------------------------------- the stage: two floating product cards */
.hero__stage { margin: 0; position: relative; }
.hs { position: relative; width: 510px; height: 500px; margin-left: auto; }

.hc {
  position: absolute; background: var(--paper); border-radius: var(--r-card); box-shadow: var(--shadow-float);
  rotate: var(--r, 0deg); color: var(--storm);
}
.hc p { margin: 0; }
.hc .im-sample { flex: none; }

/* card 1: what you keep today */
.hc--keep { --r: -2deg; left: 14px; top: 40px; width: 430px; padding: 24px 26px 22px; z-index: 2; }
.hc__head { display: flex; align-items: center; gap: 10px; }
.hc__head .im-sample { margin-left: auto; }
.hc__mark { width: 26px; height: 26px; flex: none; }
.hc__who { display: flex; flex-direction: column; gap: 2px; line-height: 1.2; }
.hc__who b { font: 500 14px/1.2 var(--font); color: var(--ink); }
.hc__who > span { font: 500 12px/1.2 var(--font); color: var(--fog); font-variant-numeric: tabular-nums; }
.hc__label { margin-top: 24px !important; font: 500 13px/1.3 var(--font); color: var(--storm); }
.hc__label span { color: var(--fog); }
.hc__figrow { position: relative; margin-top: 4px; }
.hc__fig { position: relative; z-index: 1; display: inline-block; font: 500 48px/1.12 var(--font); letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums; transform-origin: 0 60%; }
.hc__lead { margin-top: 10px !important; }

.hc__racehead { display: flex; align-items: center; gap: 16px; margin-top: 20px; font: 500 12px/1 var(--font); color: var(--fog); }
.hc__race { position: relative; margin-top: 10px; height: 92px; }
.race { width: 100%; height: 100%; overflow: visible; }
.race line, .race path { fill: none; vector-effect: non-scaling-stroke; }
.race__zero { stroke: var(--mist); stroke-width: 1; }
.race .race__area { fill: var(--lilac); stroke: none; transition: opacity .3s var(--ease); }
.race__ghost { stroke: var(--haze); stroke-width: 2; stroke-dasharray: 5 5; }
.race__today { stroke: var(--violet); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.race__mk {
  position: absolute; left: var(--x); top: var(--y); width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px;
  border-radius: 50%; background: var(--violet); box-shadow: 0 0 0 3px var(--paper);
  transition: left .7s var(--ease), top .7s var(--ease), opacity .3s var(--ease);
}
.race__mk--y { width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; background: var(--paper); box-shadow: inset 0 0 0 2px var(--haze), 0 0 0 2px var(--paper); }
.hc__key { display: inline-flex; align-items: center; gap: 7px; }
.key { display: inline-block; width: 16px; }
.key--now { height: 3px; border-radius: 2px; background: var(--violet); }
.key--prev { height: 0; border-top: 2px dashed var(--haze); }

/* the sale beat, kept quiet: a soft mint halo behind the figure and a small lift of the number */
.hc__burst { position: absolute; left: 80px; top: 50%; width: 0; height: 0; z-index: 0; pointer-events: none; }
.hc__burst::before { content: ""; position: absolute; left: -40px; top: -40px; width: 80px; height: 80px; border-radius: 50%; background: var(--mint); opacity: 0; }
.hc__burst.is-pop::before { animation: hero-halo .8s var(--ease) both; }
.hc__fig.is-pop { animation: hero-fig .6s var(--ease-pop) both; }
@keyframes hero-halo { 0% { opacity: .7; transform: scale(.4); } 100% { opacity: 0; transform: scale(1.5); } }
@keyframes hero-fig { 0% { transform: scale(1); } 40% { transform: scale(1.04); } 100% { transform: scale(1); } }

/* card 2: the new-order toast */
.hc--toast {
  --r: 1.5deg; left: 132px; top: 382px; width: 360px; z-index: 4;
  display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-areas: "badge h tag" "badge s v";
  align-items: center; gap: 6px 12px; padding: 14px 16px 14px 18px;
  opacity: 0; translate: 0 16px; scale: .96;
  transition: opacity .3s var(--ease), translate .55s var(--ease-pop), scale .55s var(--ease-pop);
}
.hc--toast.is-in { opacity: 1; translate: 0 0; scale: 1; }
.no-js .hc--toast { opacity: 1; translate: none; scale: none; }
.toast__tag { grid-area: tag; justify-self: end; }
.toast__badge { grid-area: badge; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--mint); color: var(--mint-ink); }
.toast__badge svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.toast__h { grid-area: h; min-width: 0; font: 500 14px/1.2 var(--font); color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.toast__s { grid-area: s; min-width: 0; font: 500 12px/1.2 var(--font); color: var(--fog); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.toast__v { grid-area: v; justify-self: end; font: 500 16px/1 var(--font); color: var(--ink); font-variant-numeric: tabular-nums; }

/* stickers: two of the products that sell; each pops when its own order lands */
.stk {
  position: absolute; border-radius: 50%; object-fit: cover; border: 3px solid var(--paper);
  box-shadow: var(--shadow-soft); rotate: var(--r, 0deg); background: var(--lilac);
}
.stk--harbor { --r: -5deg; left: 424px; top: 6px; width: 108px; height: 108px; z-index: 3; }
.stk--tide   { --r: 6deg;  left: 26px; top: 378px; width: 92px; height: 92px; z-index: 5; }
.stk.is-pop { animation: hero-stk .7s var(--ease-pop) both; }
@keyframes hero-stk { 0% { scale: 1; } 40% { scale: 1.08; } 100% { scale: 1; } }

/* rewind between loops: the figures dip, reset, and come back (not a product event, so it is quiet) */
.hc__fig, .hc__lead, .race__today, .hs [data-h="clock"] { transition: opacity .3s var(--ease); }
.hs.is-rewind .hc__fig, .hs.is-rewind .hc__lead, .hs.is-rewind .race__today, .hs.is-rewind .race__mk,
.hs.is-rewind .race__area, .hs.is-rewind [data-h="clock"] { opacity: .15; }
.hs.is-snap .race__mk { transition: opacity .3s var(--ease); }

/* ---------------------------------------------------------------- pain: $1, split */
.pain { padding: var(--section) 0; scroll-margin-top: 68px; }
/* Section seam: when another piece follows (the assembled page), that piece's top padding is the one
   rhythm gap, so this band drops its own bottom padding instead of stacking on it. */
main:has(+ section, + main) > .pain:last-child { padding-bottom: 0; }
.pain:has(+ .im-section) { padding-bottom: 0; }

.pain__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 24px 96px; align-items: start; }
.pain__title { max-width: 560px; text-wrap: balance; }
.pain__body { max-width: 440px; }

.pain__fig { position: relative; margin: var(--head-gap, 48px) 0 0; padding: 40px 40px 36px; background: var(--paper); border: 1px solid var(--mist); border-radius: var(--r-card); }
.pain__tag { position: absolute; top: 16px; right: 16px; }
/* the two ends of the story: what WooCommerce shows, what Balanik shows */
.pain__ends { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.pain__end { display: flex; flex-direction: column; gap: 4px; margin: 0; font: 500 var(--t-small)/1.38 var(--font); letter-spacing: .01em; color: var(--fog); }
.pain__end b { font: 500 var(--t-num)/1.1 var(--font); letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.pain__end--kept { text-align: right; }
.pain__end--kept b { color: var(--mint-ink); }

/* the bar: one violet "sales" block that splits into August's ledger */
.pain__bar { position: relative; display: flex; gap: 3px; height: 56px; margin-top: 24px; }
.pain__sales { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; padding-left: 20px; border-radius: 12px;
  background: var(--violet); color: #fff; font: 500 var(--t-body)/1 var(--font); font-variant-numeric: tabular-nums;
  transition: opacity .5s var(--ease) .15s; pointer-events: none; }
.pain__seg { flex: var(--w) 1 0; min-width: 0; border-radius: 12px; background: var(--coral); cursor: pointer;
  transition: background .25s var(--ease), transform .25s var(--ease), opacity .25s var(--ease); }

.pain__seg--kept { background: var(--mint); }
.pain__bar.is-split .pain__sales { opacity: 0; }
/* one line picked: it lifts, the rest step back */
.pain__bar.has-pick .pain__seg { opacity: .45; }
.pain__bar.has-pick .pain__seg.is-on { opacity: 1; transform: translateY(-4px); }
.pain__seg:not(.pain__seg--kept).is-on { background: #F6B8B8; }

.pain__read { display: flex; align-items: baseline; gap: 12px; min-height: 40px; margin: 20px 0 0; color: var(--storm); }
.pain__read > b { flex: none; font: 500 var(--t-num)/1.1 var(--font); letter-spacing: -.02em; color: var(--coral-ink); font-variant-numeric: tabular-nums; }
.pain__read.is-kept > b { color: var(--mint-ink); }
.pain__read strong { font-weight: 500; color: var(--ink); }

.pain__legend { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--mist); }
.pain__chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 14px; border: 1px solid var(--mist); border-radius: var(--r-pill);
  background: var(--paper); color: var(--storm); font: 500 var(--t-small)/1 var(--font); letter-spacing: .01em; cursor: pointer;
  transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease); -webkit-tap-highlight-color: transparent; }
.pain__chip::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--coral); }
.pain__chip--kept::before { background: var(--mint); }
.pain__chip i { font-style: normal; color: var(--fog); font-variant-numeric: tabular-nums; }
.pain__chip:hover { border-color: var(--violet-mist); }
.pain__chip.is-on { background: var(--lilac); border-color: var(--lilac); color: var(--violet); }
.pain__chip.is-on i { color: var(--violet); }
.pain__chip:focus-visible { border-radius: var(--r-pill); }
.no-js .pain__sales { display: none; }
@media (prefers-reduced-motion: reduce) { .pain__sales { display: none; } }

/* ---------------------------------------------------------------- tablet: stack, stage centred */
@media (max-width: 1179px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .hero__copy { max-width: 640px; }
  .hs { margin: 0 auto; }
}
@media (max-width: 959px) {
  .pain__head { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------- mobile: cards flow, gently tilted */
@media (max-width: 767px) {
  .hero { padding-top: 40px; }
  .hero__eyebrow { margin-bottom: 16px; }
  .hero__sub { margin-top: 20px; }
  .hero__cta { margin-top: 28px; gap: 18px 24px; }
  .hero__grid { gap: 40px; }
  .hero__works { margin-top: 48px; padding-top: 20px; }

  /* keep card, then the toast tucked under it with the mug sticker peeking out */
  .hs { width: auto; height: auto; display: grid; grid-template-columns: minmax(0, 1fr); padding: 8px 4px 12px; }
  .hc, .stk { position: relative; left: auto; top: auto; min-width: 0; grid-column: 1; }
  .hc--keep { --r: -1.5deg; grid-row: 1; width: auto; padding: 18px 18px 16px; }
  .hc__fig { font-size: 40px; }
  .hc__who > span { font-size: 11px; white-space: nowrap; }
  .hc__race { height: 80px; }
  .hc__label { margin-top: 18px !important; }
  .hc--toast { --r: 1.5deg; grid-row: 2; width: auto; margin: -14px 0 0 48px; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "h tag" "s v"; padding-left: 30px; }
  .toast__badge { display: none; }
  .stk--tide { grid-row: 2; align-self: center; justify-self: start; width: 70px; height: 70px; margin: -14px 0 0 -4px; }
  .stk--harbor { display: none; }

  .pain__fig { padding: 56px 20px 24px; }
  .pain__ends { padding-right: 0; }
  .pain__bar { height: 44px; gap: 2px; }
  .pain__sales { padding-left: 14px; font-size: var(--t-small); }
  .pain__read { flex-direction: column; gap: 4px; min-height: 96px; }
}

/* sale pill wraps to two lines on phones: a rounded box instead of a pill, with even padding */
@media (max-width: 560px) {
  .hero__launch {
    border-radius: 20px;
    padding: 10px 14px;
  }
}

/* ============ Funnel 4 · ad spend sync (2026-10-03) ============ */
.ads { padding: 0; }
.ads__head { max-width: 720px; margin: 0 0 36px; }
.ads__sub { margin-top: 18px !important; }
.ads__src .im-h3 a { color: var(--ink); text-decoration: none; }
.ads__src .im-h3 a:hover { color: var(--violet); }

/* sources on the left, the plugin's ad-spend card on the right */
.ads__body { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 32px 72px; align-items: start; }
.ads__src { list-style: none; margin: 0; padding: 40px 0 0; display: grid; gap: 28px; }
.ads__src li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 20px; align-items: start; }
.ads__src .im-body { margin-top: 6px; text-wrap: pretty; }
.ads__demo { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }

.ads-card { width: 100%; margin: 0; padding: 24px 28px 24px; background: var(--paper); border-radius: var(--r-card); box-shadow: var(--shadow-float); transform: rotate(-1deg); }
.ads-card.im-reveal.is-in { transform: rotate(-1deg); }
.ads-card__head { display: flex; align-items: center; gap: 12px; }
.ads-card__head .im-sample { margin-left: auto; }
.ads-card__who { display: flex; flex-direction: column; gap: 2px; margin: 0; font: 500 var(--t-small)/1.3 var(--font); color: var(--fog); }
.ads-card__who b { font-size: var(--t-body); font-weight: 500; color: var(--ink); }
.ads-card__label { margin: 22px 0 6px; font: 500 var(--t-small)/1.3 var(--font); letter-spacing: .01em; color: var(--fog); }
.ads-card__figrow { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.ads-card__fig { font: 500 var(--t-num)/1.1 var(--font); letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.ads-card__of { font: 500 var(--t-small)/1 var(--font); color: var(--fog); }
.ads-card__plus { align-self: center; opacity: 0; transform: translateY(6px) scale(.9); transition: opacity .3s var(--ease), transform .45s var(--ease-pop); }
.ads-card__plus.is-in { opacity: 1; transform: none; }
.ads-card__meter { height: 8px; margin-top: 14px; border-radius: var(--r-pill); background: var(--mist); overflow: hidden; }
.ads-card__meter i { display: block; width: var(--p); height: 100%; border-radius: inherit; background: var(--violet); transition: width .8s var(--ease); }

.ads-card__rows { list-style: none; margin: 20px 0 0; padding: 0; }
.ads-card__rows li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 0; border-top: 1px solid var(--mist); }
.ads-card__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--haze); }
.ads-card__rows li.is-on .ads-card__dot { background: var(--mint-ink); box-shadow: 0 0 0 4px var(--mint); }
.ads-card__rows li.is-busy .ads-card__dot { background: var(--violet); box-shadow: 0 0 0 4px var(--lilac); animation: ads-pulse 1s var(--ease) infinite; }
.ads-card__src { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ads-card__src b { font: 500 var(--t-body)/1.3 var(--font); color: var(--ink); }
.ads-card__src small { font: 500 var(--t-small)/1.3 var(--font); color: var(--fog); }
.ads-card__rows li:not(.is-on):not(.is-busy) .ads-card__src b { color: var(--fog); }
.ads-card__amt { font: 500 var(--t-body)/1 var(--font); color: var(--ink); font-variant-numeric: tabular-nums; }
.ads-card__rows li:not(.is-on):not(.is-busy) .ads-card__amt { color: var(--haze); }
.ads-card__mer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 4px; padding: 14px 16px; border-radius: 12px; background: var(--cloud);
  font: 500 var(--t-small)/1.3 var(--font); color: var(--fog); }
.ads-card__mer b { color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }
.ads-card__mer .im-chip { margin-left: auto; }
.ads-card__merlabel { width: 100%; }
@keyframes ads-pulse { 50% { box-shadow: 0 0 0 7px var(--lilac); } }

/* demo control: same chip as the live view's "Land a sample sale" */
.ads__sync { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 20px 0 16px; border: 0; border-radius: var(--r-pill);
  background: var(--lilac); color: var(--violet); font: 500 var(--t-body)/1 var(--font); white-space: nowrap; cursor: pointer;
  transition: background .25s var(--ease), transform .2s var(--ease); -webkit-tap-highlight-color: transparent; }
.ads__sync:hover { background: var(--violet-mist); }
.ads__sync:active { transform: scale(.98); }
.ads__sync:focus-visible { border-radius: var(--r-pill); }
.ads__sync[disabled] { cursor: not-allowed; color: var(--storm); transform: none; }
.ads__sync svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.ads__sync[disabled] svg { animation: ads-spin 1s linear infinite; }
@keyframes ads-spin { to { transform: rotate(360deg); } }
@media (max-width: 1023px) { .ads__body { grid-template-columns: minmax(0, 1fr); } .ads__src { padding-top: 0; } .ads-card { transform: none; } .ads-card.im-reveal.is-in { transform: none; } }
@media (max-width: 767px) { .ads-card { padding: 20px 18px; } .ads-card__mer .im-chip { margin-left: 0; } }

/* ============ Funnel 3 · how it works: vignettes over the four steps ============ */
.hw-steps.hw-steps--v > li { position: relative; border-top: 0; padding-top: 0; }
.hw-steps--v .hw-vis li { border-top: 0; padding-top: 0; }
.hw-vis { position: relative; height: 136px; margin-bottom: 22px; padding: 18px; background: var(--paper); border: 1px solid var(--mist); border-radius: var(--r-card);
  display: flex; flex-direction: column; justify-content: center; overflow: hidden;
  transition: border-color .5s var(--ease), box-shadow .5s var(--ease), transform .5s var(--ease); }
.hw-steps--v .hw-n { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--lilac); transition: background .4s var(--ease), color .4s var(--ease); }
/* the rail joins the numbers; it fills step by step */
.hw-steps--v > li:not(:last-child)::before,
.hw-steps--v > li:not(:last-child)::after { content: ""; position: absolute; top: 172px; left: 40px; right: -20px; height: 2px; border-radius: 2px; background: var(--mist); }
.hw-steps--v > li:not(:last-child)::after { background: var(--violet); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease) .2s; }
.hw-steps--v > li.is-lit .hw-n { background: var(--violet); color: #fff; }
.hw-steps--v > li.is-lit:not(:last-child)::after { transform: none; }
.hw-steps--v > li.is-lit .hw-vis { border-color: var(--violet-mist); box-shadow: var(--shadow-soft); transform: translateY(-2px); }

.hw-plug { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.hw-plug__name { display: flex; flex-direction: column; gap: 2px; font: 500 var(--t-small)/1.3 var(--font); color: var(--fog); }
.hw-plug__name b { color: var(--ink); font-weight: 500; }
.hw-toggle { width: 40px; height: 24px; border-radius: var(--r-pill); background: var(--haze); position: relative; transition: background .35s var(--ease); }
.hw-toggle i { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(31, 31, 71, .2); transition: transform .35s var(--ease-pop); }
.is-lit .hw-toggle { background: var(--mint-ink); }
.is-lit .hw-toggle i { transform: translateX(16px); }

.hw-costs, .hw-src { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.hw-costs li, .hw-src li { display: flex; justify-content: space-between; align-items: center; gap: 8px; font: 500 var(--t-small)/1.2 var(--font); color: var(--fog); white-space: nowrap; }
.hw-costs b { color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }
.hw-costs li { opacity: .35; transform: translateX(-6px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.is-lit .hw-costs li { opacity: 1; transform: none; }
.is-lit .hw-costs li:nth-child(2) { transition-delay: .12s; }
.is-lit .hw-costs li:nth-child(3) { transition-delay: .24s; }
.hw-src li span { color: var(--ink); }
.hw-src em { font-style: normal; height: 22px; padding: 0 9px; display: inline-flex; align-items: center; border-radius: var(--r-pill); background: var(--cloud); color: var(--fog); }
.is-lit .hw-src li.is-on em { background: var(--mint); color: var(--mint-ink); }

.hw-vis--kept { gap: 4px; }
.hw-kept__tag { position: absolute; top: 12px; right: 12px; }
.hw-kept__label { font: 500 var(--t-small)/1.3 var(--font); color: var(--fog); }
.hw-kept__fig { font: 500 var(--t-num)/1.1 var(--font); letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.hw-kept__chips { display: flex; flex-wrap: wrap; gap: 6px; }

.no-js .hw-steps--v > li .hw-n { background: var(--violet); color: #fff; }
@media (prefers-reduced-motion: reduce) { .hw-steps--v > li:not(:last-child)::after { transform: none; } }
/* without the rail, each number sits beside its own text, under its own vignette */
@media (max-width: 1179px) {
  .hw-steps--v > li::before, .hw-steps--v > li::after { display: none; }
  .hw-steps.hw-steps--v { row-gap: 40px; }
  .hw-steps.hw-steps--v > li { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 14px; align-items: start; }
  .hw-steps--v > li > .hw-vis { grid-column: 1 / -1; margin-bottom: 16px; }
  .hw-steps.hw-steps--v > li > p { margin: 2px 0 0; }
}
@media (max-width: 767px) { .hw-vis { height: auto; min-height: 112px; } }
.ads__points { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 40px; }
.ads__points li { position: relative; padding-left: 32px; color: var(--storm); }
.ads__points li::before { content: ""; position: absolute; left: 0; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--mint); }
.ads__points li::after { content: ""; position: absolute; left: 7px; top: 7px; width: 5px; height: 9px; border-right: 2px solid var(--mint-ink); border-bottom: 2px solid var(--mint-ink); transform: rotate(45deg); }
@media (max-width: 767px) { .ads__points { grid-template-columns: minmax(0, 1fr); } }

/* ============ the numbers board (#board): an Overview mock, Saltmarsh's August vs July ============ */
.bd__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; }
.bd__sub { margin-top: 18px; color: var(--storm); }
.bd__fig { margin: 0; }
.bd__screen { background: var(--paper); border: 1px solid var(--mist); border-radius: var(--r-card); box-shadow: var(--shadow-float); padding: 20px; }
.bd__bar { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--mist); }
.bd__tab { font: 500 15px/1 var(--font); color: var(--ink); }
.bd__period { font: 500 var(--t-small)/1 var(--font); color: var(--fog); margin-right: auto; }
.bd__label { display: block; font: 500 var(--t-small)/1.3 var(--font); color: var(--fog); }
.bd__label em { display: block; font-style: normal; font-weight: 400; }
.bd__hero { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; padding: 20px 4px 18px; }
.bd__hero .bd__label { flex-basis: 100%; }
.bd__big { font: 500 var(--t-num)/1.05 var(--font); letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.bd__tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.bd__tiles li { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px; background: var(--cloud); border: 1px solid var(--mist); border-radius: 12px; }
.bd__tiles b { font: 500 22px/1.1 var(--font); letter-spacing: -.01em; color: var(--ink); font-variant-numeric: tabular-nums; margin-top: auto; }
.bd__tiles .im-chip { height: 22px; padding: 0 8px; font-size: 12px; }
.bd__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.bd__be { font: 500 12px/1 var(--font); color: var(--fog); white-space: nowrap; }
.bd__note { margin-top: 14px; font: 400 var(--t-small)/1.5 var(--font); color: var(--fog); }
@media (max-width: 959px) { .bd__grid { grid-template-columns: minmax(0, 1fr); gap: 36px; } }
@media (max-width: 560px) {
  .bd__screen { padding: 14px; }
  .bd__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .bd__tiles li { padding: 12px; }
  .bd__tiles b { font-size: 19px; }
  .bd__bar .im-sample { display: none; }
}