/* ============================================================
   CONVERSION - audience switcher, ROI tools, lookup, waitlists
   Loaded after enhancements.css. Pure additions.
   ============================================================ */

/* ---------- Nav active state (shared across all pages) ---------- */
.nav-link.active,
.nav-link[aria-current="page"] {
  color: var(--tap-ink);
  font-weight: 700;
}
.nav-link.active::after,
.nav-link[aria-current="page"]::after {
  content: "";
  display: block;
  position: absolute;
  bottom: -2px;
  left: 4px;
  right: 4px;
  height: 2px;
  background: var(--tap-orange);
  border-radius: 2px;
}
.nav-link {
  position: relative;
}

/* ---------- Audience switcher (hero) ---------- */
.audience-bar {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid var(--tap-line);
  border-radius: 999px;
  padding: 4px;
  margin: 0 0 18px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.audience-pill {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--tap-ink-2);
  padding: 7px 14px;
  border-radius: 999px;
  white-space: nowrap;
  transition: all 160ms var(--ease);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.audience-pill:hover { color: var(--tap-ink); background: rgba(0, 0, 0, 0.03); }
.audience-pill[aria-selected="true"] {
  background: var(--tap-ink);
  color: #fff;
  font-weight: 600;
}
.audience-pill[aria-selected="true"]:hover { background: var(--tap-ink); }
.audience-pill .ap-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--tap-orange);
  flex: none;
}
.audience-pill[data-aud="supplier"] .ap-dot { background: var(--tap-blue); }
.audience-pill[data-aud="wholesaler"] .ap-dot { background: var(--tap-pink); }
.audience-pill[data-aud="pos"]      .ap-dot { background: var(--tap-teal); }
.audience-pill[data-aud="media"]    .ap-dot { background: var(--tap-magenta); }
.audience-pill[data-aud="investor"] .ap-dot { background: var(--tap-olive); }

/* Hero eyebrow accent — tinted to match the active audience dot.
   Default is retailer/orange (which is also the page's first paint state). */
.hero-copy > .eyebrow { color: var(--tap-orange); }
body[data-audience="retailer"]   .hero-copy > .eyebrow { color: var(--tap-orange); }
body[data-audience="supplier"]   .hero-copy > .eyebrow { color: var(--tap-blue); }
body[data-audience="wholesaler"] .hero-copy > .eyebrow { color: var(--tap-pink); }
body[data-audience="pos"]        .hero-copy > .eyebrow { color: var(--tap-teal); }

/* Hero swappable content fades on switch */
.hero-copy .swap { transition: opacity 220ms var(--ease); }
.hero-copy.is-swapping .swap { opacity: 0; }

/* Persona accent recolor on H1 */
.hero h1 .accent[data-aud="retailer"] { color: var(--tap-orange); }
.hero h1 .accent[data-aud="supplier"] { color: var(--tap-blue); }
.hero h1 .accent[data-aud="wholesaler"] { color: var(--tap-pink); }
.hero h1 .accent[data-aud="pos"]      { color: var(--tap-teal); }
.hero h1 .accent[data-aud="media"]    { color: var(--tap-magenta); }
.hero h1 .accent[data-aud="investor"] { color: #6B7A1E; }

/* The trailing full stop (h1Post) is wrapped in its own .dot span and
   sits OUTSIDE the .accent span, so it stays ink-coloured by default.
   Tint that last dot to follow the audience accent so the sentence
   closes on the accent colour (e.g. the "." after "Live answers"). */
.hero h1 > .dot:last-child { color: var(--tap-orange); }
body[data-audience="supplier"]   .hero h1 > .dot:last-child { color: var(--tap-blue); }
body[data-audience="wholesaler"] .hero h1 > .dot:last-child { color: var(--tap-pink); }
body[data-audience="pos"]        .hero h1 > .dot:last-child { color: var(--tap-teal); }
body[data-audience="media"]      .hero h1 > .dot:last-child { color: var(--tap-magenta); }
body[data-audience="investor"]   .hero h1 > .dot:last-child { color: #6B7A1E; }

/* ============================================================
   PERSONA THEMING - when body[data-audience] is set, retint the
   audience-connected surfaces in the hero (CTA buttons, Hank's
   chat bubble, live pill, eyebrow). Retailer = orange (default,
   no override needed). Supplier = blue. POS provider = teal.
   Scoped to the hero so it doesn't leak into product sections
   that have their own product identity (Retail+, Supply+, etc).
   ============================================================ */

/* ---- Supplier (blue, Supply+) ---- */
body[data-audience="supplier"] .hero .btn-primary,
body[data-audience="supplier"] .hero-ctas .btn-primary {
  background: var(--tap-blue);
  color: #fff;
}
body[data-audience="supplier"] .hero .btn-primary:hover,
body[data-audience="supplier"] .hero-ctas .btn-primary:hover {
  background: #0A5894;
}
body[data-audience="supplier"] .hero .eyebrow,
body[data-audience="supplier"] .hero-meta-num .unit { color: var(--tap-blue); }
body[data-audience="supplier"] .hero .eyebrow::before { background: var(--tap-blue) !important; }
/* The Ask Hank widget is retinted per audience further down
   (see "Hank widget rebrand by audience"). */
body[data-audience="supplier"] .sticky-cta .sticky-cta-dot {
  background: var(--tap-blue);
  box-shadow: 0 0 0 4px rgba(14,115,187,0.18);
}
body[data-audience="supplier"] .sticky-cta .btn-primary {
  background: var(--tap-blue);
}

/* ---- Wholesaler (pink, Collectives) ---- */
body[data-audience="wholesaler"] .hero .btn-primary,
body[data-audience="wholesaler"] .hero-ctas .btn-primary {
  background: var(--tap-pink);
  color: #fff;
}
body[data-audience="wholesaler"] .hero .btn-primary:hover,
body[data-audience="wholesaler"] .hero-ctas .btn-primary:hover {
  background: #9F2D72;
}
body[data-audience="wholesaler"] .hero .eyebrow,
body[data-audience="wholesaler"] .hero-meta-num .unit { color: var(--tap-pink); }
body[data-audience="wholesaler"] .hero .eyebrow::before { background: var(--tap-pink) !important; }
body[data-audience="wholesaler"] .sticky-cta .sticky-cta-dot {
  background: var(--tap-pink);
  box-shadow: 0 0 0 4px rgba(195,60,142,0.18);
}
body[data-audience="wholesaler"] .sticky-cta .btn-primary {
  background: var(--tap-pink);
}

/* ---- POS provider (teal) ---- */
body[data-audience="pos"] .hero .btn-primary,
body[data-audience="pos"] .hero-ctas .btn-primary {
  background: var(--tap-teal);
  color: #fff;
}
body[data-audience="pos"] .hero .btn-primary:hover,
body[data-audience="pos"] .hero-ctas .btn-primary:hover {
  background: var(--tap-teal-deep);
}
body[data-audience="pos"] .hero .eyebrow,
body[data-audience="pos"] .hero-meta-num .unit { color: var(--tap-teal); }
body[data-audience="pos"] .hero .eyebrow::before { background: var(--tap-teal) !important; }
body[data-audience="pos"] .sticky-cta .sticky-cta-dot {
  background: var(--tap-teal);
  box-shadow: 0 0 0 4px rgba(13,142,142,0.18);
}
body[data-audience="pos"] .sticky-cta .btn-primary {
  background: var(--tap-teal);
}

/* ---- Hank widget rebrand by audience (homepage hero) ----
   The Ask Hank widget is a Retail+ surface, so it stays orange for the
   retailer (default) and POS personas. For supplier and wholesaler we
   retint the entire widget to the matching product palette - Supply+
   blue, Collectives magenta - by re-pointing the orange token family
   and the Hank avatar gradient within the widget only. This is the same
   mechanism the Supply+ / Collectives pages use, scoped to
   .hero .preview.ask-hank so it never leaks into the rest of the page. */
body[data-audience="supplier"] .hero .preview.ask-hank {
  --tap-orange: #0E73BB;
  --tap-orange-deep: #0A5894;
  --tap-orange-light: #EAF2FA;
  --tap-orange-subtle: #F5F9FD;
  --tap-orange-bubble: #EAF2FA;
  --tap-grad-hank: linear-gradient(135deg, #0E73BB, #0A5894);
  --tap-shadow-orange: 0 2px 8px rgba(14,115,187,0.30);
}
body[data-audience="wholesaler"] .hero .preview.ask-hank {
  --tap-orange: #C33C8E;
  --tap-orange-deep: #9F2D72;
  --tap-orange-light: #FBEAF3;
  --tap-orange-subtle: #FDF5F9;
  --tap-orange-bubble: #FBEEF5;
  --tap-grad-hank: linear-gradient(135deg, #C33C8E, #9F2D72);
  --tap-shadow-orange: 0 2px 8px rgba(195,60,142,0.30);
}
/* A handful of widget accents are hardcoded orange rather than tokenised;
   re-point those within the retinted personas so nothing reads orange. */
body[data-audience="supplier"] .hero .preview.ask-hank .ask-head-avatar { box-shadow: 0 1px 3px rgba(14,115,187,0.30); }
body[data-audience="wholesaler"] .hero .preview.ask-hank .ask-head-avatar { box-shadow: 0 1px 3px rgba(195,60,142,0.30); }
body[data-audience="supplier"] .hero .preview.ask-hank .ask-send:hover { background: rgba(14,115,187,0.18); }
body[data-audience="wholesaler"] .hero .preview.ask-hank .ask-send:hover { background: rgba(195,60,142,0.18); }
body[data-audience="supplier"] .hero .preview.ask-hank .ask-demo-hank-body { border-color: rgba(14,115,187,0.12); }
body[data-audience="wholesaler"] .hero .preview.ask-hank .ask-demo-hank-body { border-color: rgba(195,60,142,0.12); }

/* Smooth the cross-fade so the retint reads as one motion with
   the existing copy-swap animation. */
body[data-audience] .hero .btn-primary,
body[data-audience] .hero .bubble.assistant,
body[data-audience] .hero .mini-bubble.assistant,
body[data-audience] .hero .ask-send,
body[data-audience] .hero .ask-live-pill,
body[data-audience] .hero .ask-suggest,
body[data-audience] .hero .ask-hero-avatar,
body[data-audience] .sticky-cta .btn-primary {
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}

/* ---- H1 underline accent: track the active persona on the
   homepage hero. The base rule in enhancements.css paints the
   underline orange; these overrides retint per audience. ---- */
body[data-audience="supplier"] .hero h1 .accent::after {
  background: linear-gradient(90deg, rgba(14,115,187,0.32), rgba(14,115,187,0));
}
body[data-audience="wholesaler"] .hero h1 .accent::after {
  background: linear-gradient(90deg, rgba(195,60,142,0.32), rgba(195,60,142,0));
}
body[data-audience="pos"] .hero h1 .accent::after {
  background: linear-gradient(90deg, rgba(13,142,142,0.32), rgba(13,142,142,0));
}

/* ---- Hero stat strip: the `.em` unit token follows audience.
   Default is orange; supplier = blue, pos = teal. ---- */
body[data-audience="supplier"]   .hero-stat-strip > div .num .em { color: var(--tap-blue); }
body[data-audience="wholesaler"] .hero-stat-strip > div .num .em { color: var(--tap-pink); }
body[data-audience="pos"]        .hero-stat-strip > div .num .em { color: var(--tap-teal); }

/* ============================================================
   POS PARTNERS PAGE - teal theming via data-product="pos-partners".
   Sets the same product-theming custom properties used by
   product.css (--p-color, --p-grad, etc) plus targeted overrides
   for surfaces unique to Partners.html. The page doesn't load
   product.js, so we set the vars statically here.
   ============================================================ */
body[data-product="pos-partners"] {
  --p-color: #0D8E8E;
  --p-color-deep: #086464;
  --p-color-tint: #E0F3F3;
  --p-color-bubble: #EBF7F7;
  --p-grad: linear-gradient(135deg, #14B8B8, #086464);
}

/* Primary buttons across the POS partners page pick up the teal
   gradient, matching what product.css does on dedicated product
   pages. */
body[data-product="pos-partners"] .btn-primary {
  background: var(--p-grad);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08), 0 2px 6px rgba(13,142,142,0.30);
  color: #fff;
}
body[data-product="pos-partners"] .btn-primary:hover {
  filter: brightness(1.05);
}

/* Inline accent text-color overrides scattered through Partners.html
   were already swapped to var(--tap-teal); this catches any future
   uses of var(--tap-purple) inside the POS partners scope as a
   safety net. */
body[data-product="pos-partners"] [style*="--tap-purple"] {
  color: var(--tap-teal) !important;
}

/* ---------- Interactive Hank composer in hero ---------- */
.ask-composer.is-live {
  background: #fff;
  border-color: var(--tap-line-strong);
  cursor: text;
  transition: border-color 150ms var(--ease), box-shadow 150ms var(--ease);
}
.ask-composer.is-live:focus-within {
  border-color: var(--tap-orange);
  box-shadow: 0 0 0 3px rgba(242,122,46,0.10);
}
.ask-composer-real {
  border: none;
  background: transparent;
  outline: none;
  flex: 1;
  font: inherit;
  font-size: 13px;
  color: var(--tap-ink);
  padding: 0;
}
.ask-composer-real::placeholder { color: var(--tap-ink-3); }
.ask-send.is-active {
  background: var(--tap-grad-hank);
  color: #fff;
  border-radius: 8px;
  width: 30px; height: 30px;
  box-shadow: var(--tap-shadow-orange);
  display: grid; place-items: center;
  transition: transform 120ms var(--ease);
}
.ask-send.is-active:hover { transform: translateY(-1px); }
.ask-send.is-active:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.ask-send.is-active svg { width: 14px; height: 14px; stroke: #fff; fill: none; }

/* "Live" status pill in ask-head when Hank is wired */
.ask-live-pill {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tap-green);
  background: rgba(5,150,105,0.10);
  border: 1px solid rgba(5,150,105,0.20);
  border-radius: 999px;
  padding: 2px 7px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 6px;
}
.ask-live-pill::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--tap-green);
  animation: pulse 2s var(--ease) infinite;
}

/* ============================================================
   SIZED-TO-YOU - homepage persona-aware tools section
   ============================================================ */
.sized {
  padding: var(--pad-y) var(--pad-x);
  max-width: var(--maxw);
  margin: 0 auto;
}
.sized-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
  margin-bottom: 40px;
}
.sized-head h2 {
  font-size: var(--type-h2);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.028em;
  margin: 14px 0 0;
}
.sized-head p {
  font-size: 17px;
  color: var(--tap-ink-2);
  margin: 14px 0 0;
  max-width: 460px;
  line-height: 1.5;
}

/* Compact persona tab strip above the tool */
.sized-tabs {
  display: inline-flex;
  background: var(--tap-bg-warm);
  border: 1px solid var(--tap-line);
  border-radius: 10px;
  padding: 4px;
  gap: 2px;
  margin-bottom: 0;
}
.sized-tab {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--tap-ink-2);
  padding: 8px 14px;
  border-radius: 7px;
  white-space: nowrap;
  transition: all 140ms var(--ease);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.sized-tab::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--tap-ink-3);
  flex: none;
  transition: background 140ms var(--ease);
}
.sized-tab[data-tool="retailer"]::before { background: var(--tap-orange); }
.sized-tab[data-tool="supplier"]::before { background: var(--tap-blue); }
.sized-tab[data-tool="wholesaler"]::before { background: var(--tap-pink); }
.sized-tab[data-tool="pos"]::before      { background: var(--tap-teal); }
.sized-tab:hover { color: var(--tap-ink); }
.sized-tab[aria-selected="true"] {
  background: #fff;
  color: var(--tap-ink);
  font-weight: 700;
  box-shadow: var(--tap-shadow-sm);
}

/* One persona tool at a time */
.sized-tool { display: none; }
.sized-tool.is-active { display: block; }

/* "Sized to you" is a retailer-only section. Hide entirely when a non-retailer
   audience is active so suppliers / wholesalers / POS providers don't see the
   retailer ROI calc (it isn't built for them). Scoped to the affirmative
   non-retailer states so the section still shows on initial paint before the
   audience switcher initialises. */
body[data-audience="supplier"] #sized,
body[data-audience="wholesaler"] #sized,
body[data-audience="pos"] #sized {
  display: none;
}

/* Header above each tool - title + supporting paragraph.
   When placed inside .roi-grid (or any 2-column tool grid)
   the rule below makes it span both columns and separates
   it from the controls with a hairline. */
.tool-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 640px;
}
.tool-head h3 {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.018em;
  line-height: 1.2;
  margin: 0;
  color: var(--tap-ink);
}
.tool-head p {
  font-size: 14px;
  color: var(--tap-ink-2);
  line-height: 1.55;
  margin: 0;
}
.roi-grid > .tool-head,
.cov-grid > .tool-head,
.partner-grid > .tool-head {
  grid-column: 1 / -1;
}

/* ---------- RETAILER: ROI calculator (inline mini) ---------- */
.roi-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 32px;
  background: var(--tap-card);
  border: 1px solid var(--tap-line);
  border-radius: 18px;
  padding: 32px;
  box-shadow: var(--tap-shadow-md);
  align-items: stretch;
}
.roi-inputs {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.roi-inputs > .tool-head {
  padding-bottom: 22px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--tap-line);
  max-width: none;
}
.roi-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.roi-field-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.roi-field-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tap-ink-2);
}
.roi-field-val {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--tap-ink);
  font-variant-numeric: tabular-nums;
}
.roi-field-val .unit {
  font-size: 13px;
  font-weight: 500;
  color: var(--tap-ink-3);
  margin-left: 4px;
  letter-spacing: 0;
}
.roi-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--tap-orange) 0%, var(--tap-orange) var(--p, 30%), var(--tap-bg-warm) var(--p, 30%), var(--tap-bg-warm) 100%);
  outline: none;
}
.roi-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--tap-orange);
  box-shadow: var(--tap-shadow-orange);
  cursor: grab;
}
.roi-slider::-moz-range-thumb {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--tap-orange);
  box-shadow: var(--tap-shadow-orange);
  cursor: grab;
}
.roi-output {
  display: flex;
  flex-direction: column;
  background: linear-gradient(135deg, #1a1410, #2a2520);
  color: #fff;
  border-radius: 14px;
  padding: 28px;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}
.roi-output::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 100% 0%, rgba(242,122,46,0.18), transparent 50%);
  pointer-events: none;
}
.roi-output-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-bottom: 14px;
  position: relative;
}
.roi-output-num {
  font-size: 64px;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 0.98;
  background: linear-gradient(135deg, #F8C29A, #F27A2E);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  font-variant-numeric: tabular-nums;
  position: relative;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  column-gap: 2px;
  row-gap: 6px;
}
.roi-output-num .pre {
  font-size: 36px;
  vertical-align: baseline;
  font-weight: 700;
  margin-right: 0;
}
.roi-output-num .suf {
  flex-basis: 100%;
  font-size: 13.5px;
  font-weight: 500;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.01em;
  -webkit-text-fill-color: rgba(255,255,255,0.55);
  margin-left: 0;
  margin-top: 4px;
  font-variant-numeric: normal;
}
.roi-output-sub {
  font-size: 14px;
  color: rgba(255,255,255,0.72);
  margin-top: 14px;
  line-height: 1.5;
  position: relative;
}
.roi-output-breakdown {
  margin-top: 22px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 24px;
  font-size: 13px;
  position: relative;
}
.roi-output-breakdown div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.roi-output-breakdown span:first-child {
  color: rgba(255,255,255,0.55);
}
.roi-output-breakdown span:last-child {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #fff;
}
/* Gross subtotal / subscription deduction / net - full-width summary rows */
.roi-output-breakdown .roi-br-line {
  grid-column: 1 / -1;
  gap: 16px;
}
.roi-br-gross { margin-top: 6px; }
.roi-br-gross span:first-child { color: rgba(255,255,255,0.78); font-weight: 600; }
.roi-br-deduct span:first-child,
.roi-br-deduct span:last-child { color: rgba(255,255,255,0.58); font-weight: 500; }
.roi-br-net { border-bottom: none; padding-top: 2px; }
.roi-br-net span:first-child { color: #fff; font-weight: 700; }
.roi-br-net span:last-child { font-size: 16px; }
.roi-output-cta {
  margin-top: 24px;
  position: relative;
}
.roi-output-cta a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  color: var(--tap-ink);
  padding: 12px 20px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 14px;
  transition: transform 120ms var(--ease);
}
.roi-output-cta a:hover { transform: translateY(-1px); }
.roi-fine {
  font-size: 11px;
  color: var(--tap-ink-3);
  margin-top: 14px;
  text-align: center;
}
.roi-fine a { text-decoration: underline; }

/* ---------- SUPPLIER: coverage lookup ---------- */
.cov-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  background: var(--tap-card);
  border: 1px solid var(--tap-line);
  border-radius: 18px;
  padding: 32px;
  box-shadow: var(--tap-shadow-md);
}
.cov-search-side {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.cov-search-head {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.cov-search-sub {
  font-size: 14px;
  color: var(--tap-ink-2);
  line-height: 1.5;
}
.cov-input-wrap {
  position: relative;
  background: var(--tap-bg);
  border: 1px solid var(--tap-line-strong);
  border-radius: 12px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: border-color 150ms, box-shadow 150ms;
}
.cov-input-wrap:focus-within {
  border-color: var(--tap-blue);
  box-shadow: 0 0 0 3px rgba(14,115,187,0.10);
  background: #fff;
}
.cov-input-wrap svg { width: 16px; height: 16px; color: var(--tap-ink-3); flex: none; }
.cov-input {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  font: inherit;
  font-size: 15px;
  padding: 16px 0;
  color: var(--tap-ink);
}
.cov-input::placeholder { color: var(--tap-ink-3); }
.cov-pop {
  position: absolute;
  top: calc(100% + 6px);
  left: 0; right: 0;
  background: #fff;
  border: 1px solid var(--tap-line-strong);
  border-radius: 12px;
  box-shadow: var(--tap-shadow-lg);
  padding: 6px;
  z-index: 10;
  max-height: 280px;
  overflow-y: auto;
  display: none;
}
.cov-pop.is-open { display: block; }
.cov-pop-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
}
.cov-pop-row:hover, .cov-pop-row.is-focused { background: var(--tap-bg-warm); }
.cov-pop-row-name { font-weight: 600; flex: 1; }
.cov-pop-row-meta { font-size: 11px; color: var(--tap-ink-3); }
.cov-popular-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tap-ink-3);
  margin-bottom: 6px;
}
.cov-popular-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.cov-popular-chip {
  font-size: 12.5px;
  padding: 5px 10px;
  background: var(--tap-bg-warm);
  border-radius: 999px;
  color: var(--tap-ink-2);
  transition: background 120ms;
  cursor: pointer;
}
.cov-popular-chip:hover { background: rgba(14,115,187,0.08); color: var(--tap-blue); }

.cov-result {
  background: var(--tap-bg-warm);
  border-radius: 14px;
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 260px;
  justify-content: center;
  border: 1px solid var(--tap-line);
}
.cov-result-empty {
  text-align: center;
  color: var(--tap-ink-3);
  font-size: 14px;
}
.cov-result-empty svg { width: 36px; height: 36px; margin-bottom: 12px; opacity: 0.5; }
.cov-result-name {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.2;
}
.cov-result-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  width: max-content;
}
.cov-result-status.live {
  background: rgba(5,150,105,0.10);
  color: var(--tap-green);
  border: 1px solid rgba(5,150,105,0.20);
}
.cov-result-status.partial {
  background: rgba(217,119,6,0.08);
  color: var(--tap-warning);
  border: 1px solid rgba(217,119,6,0.20);
}
.cov-result-status.notyet {
  background: rgba(0,0,0,0.04);
  color: var(--tap-ink-2);
  border: 1px solid var(--tap-line);
}
.cov-result-status::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
}
.cov-result-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.cov-result-stat {
  background: #fff;
  border: 1px solid var(--tap-line);
  border-radius: 10px;
  padding: 14px;
}
.cov-result-stat-num {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.cov-result-stat-num .unit { font-size: 13px; color: var(--tap-ink-3); font-weight: 500; }
.cov-result-stat-lbl {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tap-ink-3);
  margin-top: 6px;
}
.cov-result-line {
  font-size: 13.5px;
  color: var(--tap-ink-2);
  line-height: 1.5;
}
.cov-result-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  background: var(--tap-blue);
  color: #fff;
  padding: 10px 16px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 13px;
}
.cov-result-cta:hover { background: #0c63a3; }

/* ---------- POS: partner program preview ---------- */
.partner-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  background: var(--tap-card);
  border: 1px solid var(--tap-line);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--tap-shadow-md);
}
.partner-econ {
  background: linear-gradient(135deg, #0D8E8E, #064848);
  color: #fff;
  padding: 32px;
  position: relative;
  overflow: hidden;
}
.partner-econ::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 100% 100%, rgba(195,60,142,0.30), transparent 50%);
  pointer-events: none;
}
.partner-econ-head {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  position: relative;
}
.partner-econ-num {
  font-size: 72px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  margin: 16px 0 8px;
  font-variant-numeric: tabular-nums;
  position: relative;
}
.partner-econ-num .pct { font-size: 36px; color: rgba(255,255,255,0.55); font-weight: 500; }
.partner-econ-sub {
  font-size: 14px;
  color: rgba(255,255,255,0.72);
  line-height: 1.5;
  position: relative;
  max-width: 280px;
}
.partner-econ-list {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
}
.partner-econ-list li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 13.5px;
  color: rgba(255,255,255,0.85);
}
.partner-econ-list li::before {
  content: "";
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--tap-orange);
  flex: none;
  transform: translateY(-2px);
}
.partner-detail {
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.partner-detail h3 {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0;
  line-height: 1.2;
}
.partner-stages {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.partner-stage {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  background: var(--tap-bg-warm);
  border-radius: 10px;
}
.partner-stage-num {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--tap-ink);
  color: #fff;
  display: grid; place-items: center;
  font-size: 12px;
  font-weight: 700;
}
.partner-stage-name {
  font-size: 13.5px;
  font-weight: 600;
}
.partner-stage-time {
  font-size: 12px;
  color: var(--tap-ink-3);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.partner-cta-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 4px;
}

/* ---------- MEDIA: press kit preview ---------- */
.press-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 24px;
  background: var(--tap-card);
  border: 1px solid var(--tap-line);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--tap-shadow-md);
}
.press-fact {
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  border-right: 1px solid var(--tap-line);
}
.press-fact h3 {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0;
}
.press-fact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.press-fact-cell {
  background: var(--tap-bg-warm);
  border-radius: 10px;
  padding: 14px;
}
.press-fact-cell-num {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.press-fact-cell-lbl {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tap-ink-3);
  margin-top: 6px;
}
.press-quotes {
  background: var(--tap-bg-warm);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  justify-content: space-between;
}
.press-quote-card {
  background: #fff;
  border-radius: 10px;
  padding: 16px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--tap-ink);
  border: 1px solid var(--tap-line);
}
.press-quote-attrib {
  display: block;
  font-size: 11.5px;
  color: var(--tap-ink-3);
  margin-top: 8px;
  letter-spacing: 0.02em;
}
.press-contact-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(0,0,0,0.06);
  font-size: 13px;
}
.press-contact-row strong { font-weight: 700; }

/* ---------- INVESTOR: traction snapshot ---------- */
.inv-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  background: var(--tap-card);
  border: 1px solid var(--tap-line);
  border-radius: 18px;
  padding: 32px;
  box-shadow: var(--tap-shadow-md);
}
.inv-traction {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  grid-auto-rows: 1fr;
}
.inv-stat {
  background: var(--tap-bg-warm);
  border-radius: 12px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
}
.inv-stat-num {
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.inv-stat-num .unit { font-size: 16px; color: var(--tap-ink-3); font-weight: 500; }
.inv-stat-num.olive { color: #6B7A1E; }
.inv-stat-num.orange { color: var(--tap-orange); }
.inv-stat-lbl {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tap-ink-3);
}
.inv-stat-spark {
  height: 24px;
  display: block;
  opacity: 0.5;
}
.inv-narrative {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.inv-narrative h3 {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0;
  line-height: 1.2;
}
.inv-narrative p {
  font-size: 14px;
  color: var(--tap-ink-2);
  line-height: 1.55;
  margin: 0;
}
.inv-round-card {
  margin-top: auto;
  background: var(--tap-ink);
  color: #fff;
  border-radius: 12px;
  padding: 18px 20px;
}
.inv-round-eye {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-bottom: 6px;
}
.inv-round-line { font-size: 15px; font-weight: 600; }
.inv-round-line strong { color: var(--tap-orange); }
.inv-round-meta { font-size: 12px; color: rgba(255,255,255,0.55); margin-top: 4px; }

/* ---------- SHOPPERS: waitlist for general public ---------- */
.shop-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  background: var(--tap-card);
  border: 1px solid var(--tap-line);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--tap-shadow-md);
}
.shop-pitch {
  background: linear-gradient(135deg, #14B279, #059669);
  color: #fff;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}
.shop-pitch::before {
  content: "Sh";
  position: absolute;
  right: -20px; bottom: -40px;
  font-size: 280px;
  font-weight: 800;
  letter-spacing: -0.06em;
  color: rgba(255,255,255,0.06);
  line-height: 1;
  pointer-events: none;
}
.shop-pitch-eye {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.75);
  position: relative;
}
.shop-pitch h3 {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin: 0;
  position: relative;
}
.shop-pitch p {
  font-size: 15px;
  color: rgba(255,255,255,0.88);
  line-height: 1.5;
  margin: 0;
  max-width: 320px;
  position: relative;
}
.shop-pitch-meta {
  font-size: 12.5px;
  color: rgba(255,255,255,0.65);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  position: relative;
}
.shop-form {
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  justify-content: center;
}
.shop-form-label {
  font-size: 14px;
  color: var(--tap-ink-2);
  line-height: 1.5;
}
.shop-form-input {
  display: flex;
  background: var(--tap-bg);
  border: 1px solid var(--tap-line-strong);
  border-radius: 10px;
  padding: 4px 4px 4px 14px;
  align-items: center;
}
.shop-form-input:focus-within { border-color: var(--tap-green); box-shadow: 0 0 0 3px rgba(5,150,105,0.10); background: #fff; }
.shop-form-input input {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  font: inherit;
  font-size: 14px;
  padding: 12px 0;
}
.shop-form-input button {
  background: var(--tap-ink);
  color: #fff;
  padding: 10px 16px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 13px;
  transition: background 120ms;
}
.shop-form-input button:hover { background: #000; }
.shop-form.sent .shop-form-input { display: none; }
.shop-form-success {
  display: none;
  background: rgba(5,150,105,0.08);
  border: 1px solid rgba(5,150,105,0.20);
  border-radius: 10px;
  padding: 14px;
  font-size: 14px;
  color: var(--tap-green);
}
.shop-form.sent .shop-form-success { display: block; }
.shop-tally {
  font-size: 12px;
  color: var(--tap-ink-3);
  display: flex;
  align-items: center;
  gap: 8px;
}
.shop-tally strong { color: var(--tap-ink); font-weight: 700; }
.shop-tally::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--tap-green);
  animation: pulse 2s var(--ease) infinite;
}

/* ============================================================
   TRUST LINE - single line above footer
   ============================================================ */
.trust-line {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 24px var(--pad-x);
  border-top: 1px solid var(--tap-line);
  border-bottom: 1px solid var(--tap-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--tap-ink-2);
}
.trust-line-items {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
}
.trust-line-item {
  display: flex;
  align-items: center;
  gap: 8px;
}
.trust-line-item svg {
  width: 14px; height: 14px;
  color: var(--tap-green);
  flex: none;
}
.trust-line-link {
  font-weight: 700;
  color: var(--tap-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.trust-line-link:hover { color: var(--tap-orange); }

/* ============================================================
/* ============================================================
   PRICE-FROM ANCHOR (homepage) - styles live in enhancements.css
   so the headline + 2-column layout sits above the legacy rules.
   The old pill-on-a-row treatment was kept here historically;
   removed when the section gained a proper headline block.
   ============================================================ */

/* ============================================================
   ARTICLE CALLOUT - embeddable promo card inside long-form copy
   Used in NewsArticle.html and any other content surface to
   cross-link to the Economic Impact Report or a deep asset.
   ============================================================ */
.article-callout {
  background: linear-gradient(135deg, #14110D, #2a2520);
  color: #fff;
  border-radius: 16px;
  padding: 28px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 22px;
  align-items: center;
  margin: 32px 0;
  position: relative;
  overflow: hidden;
}
.article-callout::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 100% 0%, rgba(242,122,46,0.20), transparent 50%);
  pointer-events: none;
}
.article-callout-ic {
  width: 56px; height: 56px;
  border-radius: 12px;
  background: rgba(242,122,46,0.16);
  color: var(--tap-orange);
  display: grid; place-items: center;
  position: relative;
  flex: none;
}
.article-callout-ic svg { width: 24px; height: 24px; }
.article-callout-body { position: relative; }
.article-callout-eyebrow {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-bottom: 6px;
}
.article-callout-h {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.25;
  margin: 0 0 6px;
}
.article-callout-h .em {
  background: linear-gradient(135deg, #F8C29A, #F27A2E);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
.article-callout-p {
  font-size: 13.5px;
  color: rgba(255,255,255,0.72);
  line-height: 1.55;
  margin: 0;
}
.article-callout-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  color: var(--tap-ink);
  padding: 11px 18px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 13.5px;
  white-space: nowrap;
  flex: none;
  position: relative;
  transition: transform 120ms var(--ease);
}
.article-callout-cta:hover { transform: translateY(-1px); }
.article-callout-cta svg { width: 12px; height: 12px; }

@media (max-width: 700px) {
  .article-callout { grid-template-columns: 1fr; text-align: left; }
  .article-callout-ic { width: 40px; height: 40px; }
  .article-callout-cta { justify-self: start; }
}

/* Share toast (for copy-link) */
.article-share-toast {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--tap-green);
  padding-top: 8px;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 160ms var(--ease), transform 160ms var(--ease);
  pointer-events: none;
  letter-spacing: 0.02em;
}
.article-share-toast.is-visible { opacity: 1; transform: translateY(0); }

/* ============================================================
   THE MODEL - EconomicImpactReport headline section (homepage)
   Full-bleed dark band, big range, three pillars, CTAs.
   ============================================================ */
.model-section {
  background: var(--tap-bg-warm);
  color: var(--tap-ink);
  position: relative;
  overflow: hidden;
  padding: 72px 0 64px;
  margin: 0;
  border-top: 1px solid var(--tap-line);
  border-bottom: 1px solid var(--tap-line);
}
.model-section::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 800px 400px at 100% 0%, rgba(242,122,46,0.06), transparent 60%),
    radial-gradient(ellipse 700px 360px at 0% 100%, rgba(161,170,30,0.05), transparent 60%);
  pointer-events: none;
}
.model-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad-x);
  position: relative;
}
.model-head {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 40px;
  align-items: stretch;
  margin-bottom: 40px;
}
.model-head-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  align-self: center;
  max-width: 560px;
}

/* ============================================================
   Anchor pullout - dark callout beside the headline. Carries
   the largest piece of type in the section. All parts of the
   number (currency, digits, k unit) render at the same colour
   and weight - they're information, not decoration.
   ============================================================ */
.model-anchor {
  background: #14130F;
  color: #fff;
  border-radius: 20px;
  padding: 40px 40px 32px;
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(20,19,15,0.22);
  min-height: 100%;
  justify-content: center;
}
.model-anchor::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(700px 320px at 90% -10%, rgba(191,201,38,0.22), transparent 60%),
    radial-gradient(500px 320px at 0% 110%, rgba(161,170,30,0.10), transparent 60%);
  pointer-events: none;
}
.model-anchor::after {
  /* Left accent bar in the brand olive - the section's accent colour */
  content: "";
  position: absolute;
  left: 0; top: 32px; bottom: 32px;
  width: 4px;
  background: var(--tap-olive);
  border-radius: 0 4px 4px 0;
}
.model-anchor > * { position: relative; }

.model-anchor-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tap-olive);
  margin-bottom: 18px;
}
.model-anchor-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--tap-olive);
  box-shadow: 0 0 0 0 rgba(191,201,38,0.45);
  animation: tap-anchor-pulse 2.2s ease-out infinite;
}
@keyframes tap-anchor-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(191,201,38,0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(191,201,38,0); }
  100% { box-shadow: 0 0 0 0   rgba(191,201,38,0); }
}

.model-anchor-num {
  font-size: clamp(88px, 11vw, 144px);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 0.92;
  color: #fff;
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: baseline;
  margin: 0 0 18px;
}
.model-anchor-num .cur,
.model-anchor-num .k {
  font-size: 0.42em;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
  opacity: 0.85;
}
.model-anchor-num .cur { margin-right: 8px; align-self: flex-start; padding-top: 0.08em; }
.model-anchor-num .k   { margin-left: 4px;  align-self: flex-end;   padding-bottom: 0.10em; }
.model-anchor-num .big { display: inline-block; }
.model-anchor-num .dot {
  font-size: 0.55em;
  font-weight: 800;
  color: var(--tap-olive);
  margin: 0 0.02em;
  vertical-align: baseline;
}

.model-anchor-label {
  font-size: 15px;
  font-weight: 600;
  color: rgba(255,255,255,0.78);
  line-height: 1.35;
  letter-spacing: -0.005em;
  max-width: 22ch;
}
.model-anchor-precise {
  margin: -10px 0 16px;
  font-size: 13.5px;
  font-weight: 600;
  color: rgba(255,255,255,0.62);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}
.model-plan-note {
  margin: 20px 0 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--tap-ink-3);
  max-width: 72ch;
}

.model-anchor-foot {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.10);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  color: rgba(255,255,255,0.52);
  font-variant-numeric: tabular-nums;
}
.model-anchor-foot a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #fff;
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.01em;
  transition: color 120ms var(--ease);
}
.model-anchor-foot a:hover { color: var(--tap-olive); }
.model-anchor-foot a svg { width: 11px; height: 11px; transition: transform 150ms var(--ease); }
.model-anchor-foot a:hover svg { transform: translateX(3px); }
.model-head .eyebrow {
  color: var(--tap-ink-3);
  margin-bottom: 16px;
  display: block;
}
.model-head h2 {
  font-size: var(--type-h2);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.028em;
  margin: 0;
  text-wrap: balance;
  color: var(--tap-ink);
}
.model-head h2 .em {
  color: var(--tap-olive);
  font-style: italic;
  font-weight: 700;
}
.model-head-right {
  font-size: 19px;
  color: var(--tap-ink-2);
  line-height: 1.5;
  padding-bottom: 0;
  margin-top: 4px;
  max-width: 560px;
}
.model-head-right strong { color: var(--tap-ink); font-weight: 700; }

/* ============================================================
   Anchor block - one big number (Moderate), range underneath,
   supporting paragraph. This is the section's centerpiece and
   carries the largest piece of type on the page (after hero).
   The currency token and unit suffix render at the same weight
/* ============================================================
   Supplier monetisation upside - single subordinate line.
   Sits beneath the scenarios; quieter than the cards above.
   ============================================================ */
.model-upside-line {
  font-size: 14px;
  color: var(--tap-ink-2);
  line-height: 1.5;
  margin: 0 0 40px;
  max-width: 760px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
}
.model-upside-line strong {
  color: var(--tap-ink);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.model-upside-line .cur,
.model-upside-line .k {
  color: var(--tap-ink);
  font-weight: 700;
}
.model-upside-tag {
  display: inline-flex;
  align-items: center;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tap-ink-3);
  padding: 3px 8px;
  border: 1px solid var(--tap-line-strong);
  border-radius: 999px;
  white-space: nowrap;
}

/* ============================================================
   Three scenarios - Conservative / Moderate (primary) / Aggressive.
   ============================================================ */
.model-scenarios {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 40px;
}
.model-scenario {
  background: var(--tap-card);
  border: 1px solid var(--tap-line);
  border-radius: 14px;
  padding: 24px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.model-scenario.is-primary {
  background: #FFF;
  border-color: var(--tap-olive);
  box-shadow:
    0 0 0 1px var(--tap-olive) inset,
    0 12px 28px rgba(161,170,30,0.18);
  transform: translateY(-4px);
}
.model-scenario-label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--tap-ink-3);
  display: flex;
  align-items: center;
  gap: 8px;
}
.model-scenario.is-primary .model-scenario-label {
  color: var(--tap-olive);
}
.model-scenario-flag {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  background: var(--tap-olive);
  color: #fff;
  padding: 2px 7px 2px;
  border-radius: 999px;
  text-transform: uppercase;
}
.model-scenario-num {
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -0.028em;
  line-height: 1;
  color: var(--tap-ink);
  font-variant-numeric: tabular-nums;
  margin: 2px 0 4px;
}
.model-scenario.is-primary .model-scenario-num {
  font-size: 52px;
}
.model-scenario-num .cur {
  font-size: 0.55em;
  font-weight: 700;
  color: var(--tap-ink);
  margin-right: 2px;
}
.model-scenario-num .k {
  font-size: 0.55em;
  font-weight: 700;
  color: var(--tap-ink);
  margin-left: 1px;
}
.model-scenario-desc {
  font-size: 13.5px;
  color: var(--tap-ink-2);
  line-height: 1.5;
  margin: 0;
}

/* ============================================================
   Payback callout - the section's most quotable line. Sits
   between the pillar cards and the credibility footer.
   ============================================================ */
.model-payback {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 16px;
  align-items: center;
  background: linear-gradient(135deg, rgba(161,170,30,0.10), rgba(161,170,30,0.04));
  border: 1px solid rgba(161,170,30,0.30);
  border-radius: 14px;
  padding: 22px 24px;
  margin-bottom: 32px;
}
.model-payback-mark {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--tap-olive);
  color: #fff;
}
.model-payback-mark svg { width: 20px; height: 20px; }
.model-payback-h {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.018em;
  line-height: 1.2;
  color: var(--tap-ink);
  margin-bottom: 4px;
}
.model-payback-p {
  font-size: 14px;
  color: var(--tap-ink-2);
  line-height: 1.5;
}
.model-payback-p strong {
  color: var(--tap-ink);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.model-payback-p .cur { font-variant-numeric: tabular-nums; }

/* ============================================================
   Three pillars (existing, now sitting between scenarios and
   the payback callout - no copy changes from prior version).
   ============================================================ */
.model-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}
.model-pillar {
  background: var(--tap-card);
  border: 1px solid var(--tap-line);
  border-radius: 14px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.model-pillar-ic {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: rgba(161,170,30,0.16);
  color: var(--tap-olive);
  display: grid;
  place-items: center;
}
.model-pillar-ic svg { width: 16px; height: 16px; }
.model-pillar-h {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.012em;
  color: var(--tap-ink);
}
.model-pillar-p {
  font-size: 13.5px;
  color: var(--tap-ink-2);
  line-height: 1.6;
  flex: 1;
}
.model-pillar-stat {
  font-size: 14px;
  font-weight: 700;
  color: var(--tap-olive);
  letter-spacing: -0.005em;
  font-variant-numeric: tabular-nums;
}

/* CTA row + byline */
.model-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding-top: 24px;
  border-top: 1px solid var(--tap-line);
}
.model-byline {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 13px;
  color: var(--tap-ink-2);
  line-height: 1.4;
}
.model-byline-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--tap-bg-warm);
  flex: none;
}
.model-byline-avatar img { width: 100%; height: 100%; object-fit: cover; }
.model-byline-meta-wrap { display: flex; flex-direction: column; gap: 2px; }
.model-byline strong { color: var(--tap-ink); font-weight: 700; display: block; font-size: 14px; }
.model-byline-meta { color: var(--tap-ink-3); font-size: 12px; font-variant-numeric: tabular-nums; }
.model-ctas { display: flex; gap: 10px; flex-wrap: wrap; }
.model-ctas .btn-primary {
  background: linear-gradient(135deg, #BFC926, #A1AA1E);
  color: #fff;
  box-shadow: 0 8px 24px rgba(161,170,30,0.32);
}

/* Eyebrow tick + text in the model section override the
   sibling nth-of-type rotation in enhancements.css so the
   olive accent system reads end-to-end. */
.model-section .eyebrow { color: var(--tap-ink-3); }
.model-section .eyebrow::before { background: var(--tap-olive) !important; }
.model-ctas .btn-on-dark {
  background: var(--tap-card);
  color: var(--tap-ink);
  border: 1px solid var(--tap-line-strong);
}
.model-ctas .btn-on-dark:hover { background: var(--tap-bg-warm); }

@media (max-width: 980px) {
  .model-section { padding: 48px 0 44px; }
  .model-head { grid-template-columns: 1fr; gap: 24px; align-items: start; margin-bottom: 32px; }
  .model-head-text { max-width: none; align-self: start; }
  .model-head h2 { font-size: 40px; }
  .model-anchor { padding: 24px 24px 22px; }
  .model-pillars { grid-template-columns: 1fr; }
  .model-upside-line { font-size: 13.5px; }
  .model-payback { grid-template-columns: 1fr; gap: 12px; padding: 20px; }
  .model-foot { flex-direction: column; align-items: stretch; }
}
.cmp-hero {
  padding: 80px var(--pad-x) 56px;
  max-width: var(--maxw);
  margin: 0 auto;
}
.cmp-hero h1 {
  font-size: var(--type-h1);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.035em;
  margin: 16px 0 24px;
  max-width: 880px;
  text-wrap: balance;
}
.cmp-hero p {
  font-size: 21px;
  color: var(--tap-ink-2);
  line-height: 1.45;
  max-width: 680px;
  margin: 0;
}
.cmp-table-wrap {
  max-width: var(--maxw);
  margin: 0 auto 96px;
  padding: 0 var(--pad-x);
}
.cmp-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--tap-card);
  border: 1px solid var(--tap-line);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--tap-shadow-md);
}
.cmp-table thead th {
  background: var(--tap-bg-warm);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tap-ink-2);
  padding: 18px 20px;
  text-align: left;
  border-bottom: 1px solid var(--tap-line);
}
.cmp-table thead th.cmp-tap {
  background: var(--tap-ink);
  color: #fff;
  position: relative;
}
.cmp-table thead th.cmp-tap::before {
  content: "tapestry";
  display: block;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.012em;
  text-transform: none;
  color: var(--tap-orange);
  margin-bottom: 4px;
}
.cmp-table tbody td {
  padding: 18px 20px;
  font-size: 14px;
  border-bottom: 1px solid var(--tap-line);
  vertical-align: top;
  color: var(--tap-ink);
  line-height: 1.5;
}
.cmp-table tbody td:first-child {
  font-weight: 700;
  color: var(--tap-ink);
  background: var(--tap-bg-warm);
  width: 22%;
}
.cmp-table tbody td.cmp-tap-cell {
  background: rgba(242,122,46,0.04);
  font-weight: 500;
}
.cmp-table tbody td.cmp-tap-cell strong { color: var(--tap-orange-deep); }
.cmp-row-h {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tap-ink-3);
  background: var(--tap-bg) !important;
}
.cmp-row-h td { padding: 14px 20px !important; font-size: 11.5px !important; font-weight: 700 !important; }

@media (max-width: 980px) {
  .cmp-table { font-size: 13px; }
  .cmp-table tbody td:first-child { width: 30%; }
}

/* ============================================================
   PARTNERS / PRESS / INVESTORS - shared page shell
   ============================================================ */
.shell-hero {
  padding: 72px var(--pad-x) 56px;
  max-width: var(--maxw);
  margin: 0 auto;
}
.shell-hero .eyebrow { margin-bottom: 14px; }
.shell-hero h1 {
  font-size: var(--type-h1);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.035em;
  margin: 0 0 28px;
  max-width: 920px;
  text-wrap: balance;
}
.shell-hero p {
  font-size: 21px;
  color: var(--tap-ink-2);
  line-height: 1.45;
  max-width: 680px;
  margin: 0 0 28px;
}
.shell-section {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 56px var(--pad-x);
}
.shell-section.dark {
  background: linear-gradient(135deg, #1a1410, #2a2520);
  color: #fff;
  max-width: none;
  padding-left: max((100vw - var(--maxw)) / 2 + var(--pad-x), var(--pad-x));
  padding-right: max((100vw - var(--maxw)) / 2 + var(--pad-x), var(--pad-x));
}
.shell-section.warm {
  background: var(--tap-bg-warm);
  border-top: 1px solid var(--tap-line);
  border-bottom: 1px solid var(--tap-line);
  max-width: none;
  padding-left: max((100vw - var(--maxw)) / 2 + var(--pad-x), var(--pad-x));
  padding-right: max((100vw - var(--maxw)) / 2 + var(--pad-x), var(--pad-x));
}
.shell-section h2 {
  font-size: var(--type-h2);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.028em;
  margin: 0 0 32px;
}
.shell-section h2.center { text-align: center; max-width: 720px; margin: 0 auto 32px; }
.shell-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tap-ink-3);
  margin-bottom: 14px;
}
.shell-section.dark .shell-eyebrow { color: rgba(255,255,255,0.55); }

/* Press kit downloads grid */
.pk-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.pk-card {
  background: var(--tap-card);
  border: 1px solid var(--tap-line);
  border-radius: 14px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform 150ms var(--ease), box-shadow 150ms var(--ease);
}
.pk-card:hover { transform: translateY(-2px); box-shadow: var(--tap-shadow-md); }
.pk-card-ic {
  width: 36px; height: 36px;
  border-radius: 8px;
  display: grid; place-items: center;
  background: var(--tap-orange-light);
  color: var(--tap-orange-deep);
}
.pk-card-ic svg { width: 18px; height: 18px; }
.pk-card-title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.005em;
}
.pk-card-desc {
  font-size: 13px;
  color: var(--tap-ink-2);
  line-height: 1.5;
  flex: 1;
}
.pk-card-link {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--tap-ink);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.pk-card-link svg { width: 12px; height: 12px; }

/* Boilerplate copy block */
.pk-boiler {
  background: var(--tap-card);
  border: 1px solid var(--tap-line);
  border-radius: 14px;
  padding: 28px;
  font-size: 14px;
  color: var(--tap-ink-2);
  line-height: 1.6;
  position: relative;
}
.pk-boiler strong { color: var(--tap-ink); font-weight: 700; }
.pk-boiler-copy {
  position: absolute;
  top: 14px; right: 14px;
  font-size: 11px;
  font-weight: 600;
  color: var(--tap-ink-3);
  background: var(--tap-bg-warm);
  border: 1px solid var(--tap-line);
  border-radius: 999px;
  padding: 4px 10px;
  cursor: pointer;
}
.pk-boiler-copy:hover { color: var(--tap-ink); }

/* Contact card */
.pk-contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.pk-contact-card {
  background: var(--tap-card);
  border: 1px solid var(--tap-line);
  border-radius: 14px;
  padding: 22px;
}
.pk-contact-eye {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tap-ink-3);
}
.pk-contact-name { font-size: 18px; font-weight: 800; letter-spacing: -0.01em; margin: 6px 0 2px; }
.pk-contact-role { font-size: 13px; color: var(--tap-ink-2); margin-bottom: 12px; }
.pk-contact-email {
  font-size: 14px;
  font-weight: 700;
  color: var(--tap-orange);
}

/* Partner program commercials block */
.pp-commercials {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.pp-card {
  background: var(--tap-card);
  border: 1px solid var(--tap-line);
  border-radius: 16px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pp-card-eye {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tap-ink-3);
}
.pp-card-num {
  font-size: 56px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--tap-teal);
  font-variant-numeric: tabular-nums;
}
.pp-card-num .unit { font-size: 22px; color: var(--tap-ink-3); font-weight: 500; }
.pp-card-desc {
  font-size: 13.5px;
  color: var(--tap-ink-2);
  line-height: 1.5;
}

/* Partner specs table */
.pp-spec {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 24px;
}
.pp-spec-col h3 {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.012em;
  margin: 0 0 14px;
}
.pp-spec-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pp-spec-list li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--tap-ink-2);
}
.pp-spec-list li::before {
  content: "✓";
  color: var(--tap-green);
  font-weight: 700;
  flex: none;
  font-size: 13px;
  line-height: 1;
  margin-top: 4px;
}

/* Investors thesis grid - 4 numbered cards, in line with ai-loop/ai-day-step patterns */
.inv-thesis-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 8px;
}
.inv-thesis-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px 22px;
}
.inv-thesis-num {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tap-orange);
  font-variant-numeric: tabular-nums;
}
.pk-card-title.inv-thesis-title {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.018em;
  line-height: 1.25;
  color: var(--tap-ink);
  text-wrap: balance;
}
.inv-thesis-cta {
  margin-top: 32px;
}
@media (max-width: 1080px) {
  .inv-thesis-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .inv-thesis-grid { grid-template-columns: 1fr; gap: 10px; }
  .inv-thesis-card { padding: 20px 18px; }
}

/* Investors traction wall */
.inv-wall {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.inv-wall-stat {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.inv-wall-stat-eye {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.inv-wall-stat-num {
  font-size: 48px;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.inv-wall-stat-num .unit { font-size: 18px; color: rgba(255,255,255,0.55); font-weight: 500; }
.inv-wall-stat-delta {
  font-size: 12.5px;
  color: var(--tap-orange);
  font-weight: 600;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 980px) {
  .roi-grid, .cov-grid, .partner-grid, .press-grid, .inv-grid, .shop-grid {
    grid-template-columns: 1fr;
  }
  .pk-grid, .pp-commercials { grid-template-columns: 1fr 1fr; }
  .pk-contact { grid-template-columns: 1fr; }
  .pp-spec { grid-template-columns: 1fr; }
  .inv-wall { grid-template-columns: 1fr 1fr; }
  .inv-traction { grid-template-columns: 1fr 1fr; }
  .audience-bar { gap: 2px; padding: 3px; }
  .audience-pill { padding: 6px 10px; font-size: 12px; }
  .press-fact { border-right: none; border-bottom: 1px solid var(--tap-line); }
}
@media (max-width: 640px) {
  .audience-bar { width: 100%; overflow-x: auto; flex-wrap: nowrap; }
  .pk-grid, .pp-commercials, .inv-wall { grid-template-columns: 1fr; }
  .roi-output-num { font-size: 48px; }
  .roi-output-breakdown { grid-template-columns: 1fr; }
  .partner-econ-num { font-size: 56px; }
  .shop-pitch h3 { font-size: 26px; }
}