/* ==========================================================================
   Adcellerate — design system
   Layout language, type scale, component shapes and spacing rebuilt from the
   reference product-tour page: warm paper ground, serif display headings with
   a coloured emphasis clause, monospace kickers, soft-bordered cards that
   alternate light and near-black, browser-chrome frames around live screens.
   The accent is Adcellerate green rather than the reference's purple. It is a
   single token: change --accent / --accent-soft / --accent-light and the whole
   page follows.
   ========================================================================== */

:root{
  --bg:#F4F8FF;            /* warm paper ground */
  --panel:#FFFFFF;
  --panel-2:#F8FAFF;       /* card fill, one step off white */
  --grey:#E6EEFC;          /* recessed panel */
  --dark:#03101D;          /* near-black ink and dark cards */
  --dark-2:#021221;        /* deeper black for terminals */

  --ink:#0A1A3C;
  --body:#3E4D6B;
  --muted:#566482;         /* darkened from the reference's #66749A: the mono kickers are
                              10.5px, and the lighter grey misses the small-text contrast floor */
  --soft:#66749A;          /* grey serif sub-headline, darkened for the same reason */

  --line:rgba(10,26,60,.11);
  --line-soft:rgba(10,26,60,.06);
  --line-dark:rgba(255,255,255,.1);

  /* Brand green. --accent is darkened from the #0055FF brand value so it holds
     contrast as small text on paper; --accent-bright is the true brand green and
     is only ever used as a fill with white on top. */
  --accent:#0055FF;        /* text-safe green: clears 4.5:1 on both paper and the pale green wash */
  --accent-bright:#0055FF;
  --accent-soft:#E8F0FF;
  --accent-light:#8CB2FF;  /* accent on dark grounds */
  --aqua:#CFE0FF;          /* the brand pastel, used for the offer callout */

  --warn:#566482;

  --serif:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --sans:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  /* Site-wide, because a single orphaned word on a last line is a typesetting bug
     wherever it happens, not just in the hero. text-wrap is inherited, so this is
     the one place to set it; headings that want even line lengths override with
     balance below. Do not remove it and then patch orphans string by string. */
  text-wrap:pretty;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4,p{ margin:0; }

/* Gambetta (Fontshare, free for commercial use), self-hosted from assets/fonts. */
/* The display face applies to the heading elements AND to the .h1/.h2/.h3 classes,
   because several headings are divs so they do not steal the document outline. */
.serif,h1,h2,h3,.h1,.h2,.h3,.hood-h,.offer-h,.lede-serif,.strip .v,.kpi b,.gate .v,.closer{
  font-family:var(--serif);
  letter-spacing:-.012em;
  color:var(--ink);
}
b,strong{ font-weight:500; }

.in{ max-width:1180px; margin:0 auto; }

/* ---------- kicker ---------- */
.k{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--muted);
}
.k.is-a{ color:var(--accent); }
.k.is-l{ color:var(--accent-light); }

/* ---------- headings ---------- */
.h1{ font-weight:600; font-size:65px; line-height:1.06; text-wrap:balance; }
.h1 b{ font-weight:600; color:var(--accent); }
.h2{ font-weight:500; font-size:60px; line-height:1.08; text-wrap:balance; }
.h2 b{ font-weight:500; color:var(--accent); }
.h3{ font-weight:500; font-size:30px; line-height:1.15; }
.h3 b{ font-weight:500; color:var(--accent); }

.lede{ font-size:17px; line-height:1.6; color:var(--body); }
.lede-serif{
  font-family:var(--serif); font-weight:500; font-size:26px; line-height:1.3; letter-spacing:-.01em; color:var(--soft);
  text-wrap:pretty;
}
.sub{ font-size:18px; line-height:1.55; color:var(--body); }
.fine{ font-size:13px; line-height:1.5; color:var(--body); }
.dim{ color:var(--muted); }

/* ---------- contour ground ---------- */
/* Painted as a masked background rather than an <img> so it can sit under
   content without a stacking-context of its own. */
.zp{
  position:absolute; inset:0; pointer-events:none; z-index:0;
  background:url("/assets/topo.svg") center/cover no-repeat;
  opacity:.055;
}
.zp.is-a{ opacity:.10; }
.zp.is-fade{
  -webkit-mask-image:linear-gradient(100deg,transparent 26%,#000 64%);
          mask-image:linear-gradient(100deg,transparent 26%,#000 64%);
}
.rel{ position:relative; z-index:1; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--sans); font-size:15px; font-weight:400; line-height:1;
  padding:13px 22px; border-radius:7px; border:0; cursor:pointer;
  transition:background .15s ease,transform .12s ease,border-color .15s ease;
}
.btn-dark{ background:var(--dark); color:#fff; }
.btn-dark:hover{ background:#1A2D55; }
.btn-soft{ background:var(--grey); color:rgba(10,26,60,.9); }
.btn-soft:hover{ background:#DCE6FA; }
.btn-accent{ background:var(--accent-bright); color:#fff; }
.btn-accent:hover{ background:#0042CC; }
.btn-lg{ font-size:16px; padding:15px 18px; }
/* The primary ask. Sized to be the loudest element in its band. */
.btn-xl{ font-size:21px; font-weight:500; padding:22px 30px; border-radius:9px; letter-spacing:-.005em; }
.btn-ico{ flex:none; width:22px; height:22px; }
.btn-stack{ flex-direction:column; gap:5px; line-height:1.2; }
.btn-stack b{ font-weight:600; }
.btn-stack span{ font-size:12px; font-weight:500; letter-spacing:.01em; color:var(--accent-light); }

/* The CTA block. The reference wraps its button in a bordered cartouche; we do not,
   so the button reads as the only object in the space instead of a card inside a card. */
.cta-card{
  width:100%; max-width:360px; margin:30px auto 0;
  background:none; border:0; border-radius:0; padding:0; box-shadow:none;
}
.cta-card .btn{ display:flex; width:100%; }
.cta-note{ margin-top:12px; font-size:15px; font-weight:500; line-height:1.4; color:var(--accent); text-align:center; }

/* ---------- browser / app chrome ---------- */
.win{
  width:100%; background:var(--panel); border:1px solid var(--line);
  border-radius:14px; overflow:hidden; text-align:left;
  box-shadow:0 26px 60px -30px rgba(10,26,60,.4);
}
.win-bar{
  position:relative; display:flex; align-items:center; gap:7px;
  height:38px; padding:0 14px;
  background:var(--panel-2); border-bottom:1px solid var(--line);
}
.win-bar i{ width:8px; height:8px; border-radius:50%; background:rgba(10,26,60,.14); }
.win-url{
  position:absolute; left:0; right:0; text-align:center;
  font-family:var(--mono); font-size:11.5px; color:var(--muted); pointer-events:none;
}
.win-url b{ color:var(--ink); font-weight:500; }
.win-dark{ background:#0D2147; border-color:var(--line-dark); }
.win-dark .win-bar{ background:var(--dark-2); border-bottom-color:var(--line-dark); }
.win-dark .win-bar i{ background:rgba(255,255,255,.18); }
.win-dark .win-url{ color:rgba(255,255,255,.5); }
.win-dark .win-url b{ color:#fff; }


/* ---------- cards ---------- */
.card{
  background:var(--panel-2); border:1px solid var(--line);
  border-radius:16px; padding:26px 28px 28px;
}
.card.is-white{ background:var(--panel); }
.card.is-dark{ background:var(--dark); border-color:var(--dark); color:rgba(255,255,255,.72); }
/* Headings on a dark card must be recoloured by class as well as by element,
   or the .h3 divs inherit the light-ground ink and disappear into the card. */
.card.is-dark h1,.card.is-dark h2,.card.is-dark h3,
.card.is-dark .h1,.card.is-dark .h2,.card.is-dark .h3{ color:#fff; }
.card.is-dark .h1 b,.card.is-dark .h2 b,.card.is-dark .h3 b{ color:var(--accent-light); }
.card.is-dark .k{ color:var(--accent-light); }
.card.is-soft{ background:var(--accent-soft); border-color:rgba(0,85,255,.28); }
.card-b{ font-size:15.5px; line-height:1.6; color:var(--body); margin-top:12px; }
.card.is-dark .card-b{ color:rgba(255,255,255,.66); }
.card.is-dark .card-b b{ color:#fff; }
.card-b b{ color:var(--ink); }

/* ---------- sections ---------- */
.sec{ padding:96px 32px 104px; }
.sec-white{ background:var(--panel); }
.sec-paper{ background:var(--bg); }
.sec-soft{ background:var(--accent-soft); }
.sec-c{ text-align:center; }
.sec-head{ max-width:760px; margin:0 auto; }
.sec-head.is-l{ margin:0; text-align:left; }

/* ---------- split ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; text-align:left; }
.split-2{ grid-template-columns:1fr 1.15fr; }

/* ---------- pills / flow ---------- */
.flow{ display:grid; grid-template-columns:1fr 44px 1fr 44px 1fr; align-items:center; gap:8px; text-align:left; }
.node{
  display:flex; align-items:center; gap:14px;
  background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:16px 18px;
}
.node b{ display:block; font-size:15px; font-weight:500; color:var(--ink); }
.node span{ display:block; font-size:12.5px; color:var(--muted); margin-top:2px; }
.node.is-ours{ border:1.5px dashed rgba(0,85,255,.55); background:var(--accent-soft); }
.node.is-ours b{ color:var(--accent); }
.tile{
  width:44px; height:44px; border-radius:11px; flex:none;
  background:var(--accent-soft); display:inline-flex; align-items:center; justify-content:center;
}
.tile.is-ink{ background:var(--dark); }
.tile.is-accent{ background:var(--accent-bright); }
.tile.is-white{ background:#fff; border:1px solid rgba(0,85,255,.35); }
.arr{ position:relative; height:2px; }
.arr i{ position:absolute; left:4px; right:4px; top:0; border-top:1.5px dashed rgba(0,85,255,.55); }
.arr i::after{
  content:""; position:absolute; right:-1px; top:-4px; width:7px; height:7px;
  border-top:1.5px solid var(--accent); border-right:1.5px solid var(--accent); transform:rotate(45deg);
}
.arr-v{ position:relative; height:40px; width:2px; margin:0 auto; }
.arr-v i{ position:absolute; left:0; top:6px; bottom:6px; border-left:1.5px dashed rgba(0,85,255,.55); }
.arr-v i::after{
  content:""; position:absolute; bottom:-1px; left:-4px; width:7px; height:7px;
  border-bottom:1.5px solid var(--accent); border-right:1.5px solid var(--accent); transform:rotate(45deg);
}

/* ---------- checklists ---------- */
.li{
  display:flex; align-items:flex-start; gap:12px; padding:9px 0;
  font-size:16px; font-weight:500; line-height:1.45; color:var(--ink);
  border-top:1px solid rgba(10,26,60,.07);
}
.li:first-of-type{ border-top:0; }
.li i{
  width:24px; height:24px; border-radius:7px; flex:none;
  background:#fff; border:1px solid rgba(0,85,255,.3);
  display:inline-flex; align-items:center; justify-content:center;
}
.li.is-no{ font-weight:400; color:var(--body); }
.li.is-no b{ font-weight:500; color:var(--ink); }
.li.is-no i{ background:var(--panel-2); border-color:rgba(86,100,130,.35); }

/* ---------- stat strip ---------- */
.strip{ display:grid; grid-template-columns:repeat(4,1fr); }
.strip > div{ padding:26px 24px 24px; border-left:1px solid var(--line); }
.strip > div:first-child{ border-left:0; }
.strip .v{
  font-family:var(--serif); font-weight:500; font-size:38px; line-height:1.05; letter-spacing:-.02em;
  margin-top:10px; font-variant-numeric:tabular-nums;
}
.strip .is-a .v{ color:var(--accent); }
.strip .l{ margin-top:8px; font-size:12.5px; line-height:1.5; color:var(--body); }
.strip .src{ margin-top:10px; font-family:var(--mono); font-size:10px; letter-spacing:.04em; color:var(--muted); }

/* ---------- dashboard mock ---------- */
.dash{ border-radius:14px 14px 0 0; border-bottom:0; }
.dash-nav{
  display:flex; align-items:center; gap:4px; padding:8px 14px;
  border-bottom:1px solid var(--line-soft); font-size:11.5px; color:var(--body);
}
.dash-nav > span{ padding:4px 9px; border-radius:6px; white-space:nowrap; }
.dash-nav > span.is-on{ background:var(--accent-soft); color:var(--accent); font-weight:500; }
.dash-nav em{
  margin-left:auto; font-style:normal; font-family:var(--mono);
  font-size:10px; letter-spacing:.06em; color:var(--accent);
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
}
.dash-nav em i{ width:6px; height:6px; border-radius:50%; background:var(--accent-bright); }
.kpis{ display:grid; grid-template-columns:repeat(4,1fr); padding:34px 36px 30px; }
.kpis > div{ padding:0 26px; border-left:1px solid var(--line-soft); }
.kpis > div:first-child{ border-left:0; padding-left:0; }
.kpis > div:last-child{ padding-right:0; }
/* darker and a touch larger than the page's other kickers: these label the four
   headline figures, so they have to be read, not skimmed past. */
.kpis .k{ font-size:12.5px; letter-spacing:.09em; color:var(--ink); min-height:2.6em; }
.kpis b{
  display:block; font-family:var(--serif); font-weight:600; font-size:48px; line-height:1.02; letter-spacing:-.03em;
  margin-top:12px; color:var(--accent); font-variant-numeric:tabular-nums;
}
.kpis em{ display:block; font-style:normal; font-size:14px; line-height:1.45; color:var(--muted); margin-top:9px; }
/* No bottom padding. This card is the last thing in its band and the band has no
   bottom padding either, so any space here shows up as a white strip under the bars
   and reads as a gap in the section. The bars are meant to sit on the card edge. */
.chart{ padding:10px 36px 0; }
.chart .k{ display:block; margin-bottom:16px; font-size:12px; letter-spacing:.11em; }
.chart svg{ display:block; width:100%; height:155px; }
.dr{
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr .8fr; gap:12px;
  padding:9px 18px; font-size:12.5px; color:var(--ink); border-top:1px solid var(--line-soft);
}
.dr.is-h{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); background:var(--panel-2); border-top:0;
}
.dr .good{ color:var(--accent); }
.dr .bad{ color:var(--warn); }

/* ---------- terminal ---------- */
.term{ background:var(--dark); border-radius:10px; overflow:hidden; box-shadow:0 24px 50px -30px rgba(10,26,60,.5); text-align:left; }
.term-bar{ display:flex; gap:6px; padding:12px 14px; border-bottom:1px solid rgba(255,255,255,.08); }
.term-bar i{ width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.18); }
.code{ padding:18px 20px 22px; font-family:var(--mono); font-size:12px; line-height:1.75; color:rgba(244,247,255,.86); }
.code .p{ color:var(--accent-light); }
.code .d{ color:rgba(244,247,255,.5); }
.code .h{ color:#fff; font-size:13px; }
.code .ok{ color:var(--accent-light); }
.code .gap{ margin-top:12px; }
.app{ border:1px solid rgba(255,255,255,.12); border-radius:8px; padding:10px 12px 12px; background:rgba(255,255,255,.03); margin-top:2px; }
.app-h{ display:flex; align-items:center; gap:8px; color:#fff; margin-bottom:8px; }
.app-h i{ width:7px; height:7px; border-radius:50%; background:var(--accent-bright); }
.fr{ display:grid; grid-template-columns:118px 1fr 62px; gap:10px; align-items:center; margin-top:5px; }
.fr em{ font-style:normal; text-align:right; color:rgba(244,247,255,.6); }
.fb{ height:9px; background:rgba(255,255,255,.08); border-radius:999px; overflow:hidden; }
.fb i{ display:block; height:100%; background:var(--accent-light); border-radius:999px; }
.tabs{ display:inline-flex; gap:2px; background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:3px; margin-top:16px; flex-wrap:wrap; justify-content:center; }
.tab{ display:inline-flex; align-items:center; gap:7px; font-size:12px; color:var(--body); padding:7px 13px; border-radius:6px; white-space:nowrap; }
.tab i{ font-style:normal; font-family:var(--mono); font-size:10px; letter-spacing:.06em; color:var(--muted); }
.tab.is-on{ background:var(--accent-soft); color:var(--accent); }
.tab.is-on i{ color:var(--accent); }

/* ---------- recessed panel ---------- */
.hood{
  background:var(--grey); border:1px solid rgba(10,26,60,.08);
  border-radius:20px; padding:40px 36px; text-align:center;
}
.hood-h{
  font-family:var(--serif); font-weight:500; font-size:32px; line-height:1.15; letter-spacing:-.012em;
  max-width:640px; margin:12px auto 0;
}
.hood-h b{ font-weight:500; color:var(--accent); }

/* ---------- offer callout ---------- */
.offer{
  max-width:760px; margin:34px auto 0; padding:30px 28px 32px;
  background:var(--aqua); border:1px solid var(--dark); border-radius:16px;
  text-align:center; box-shadow:0 26px 60px -34px rgba(10,26,60,.45);
}
.offer .k{ color:rgba(10,26,60,.7); }
.offer-h{
  font-family:var(--serif); font-weight:400; font-size:34px; line-height:1.1; letter-spacing:-.01em; margin-top:10px;
}
.offer-s{ max-width:560px; margin:12px auto 0; font-size:16px; line-height:1.5; color:var(--ink); text-wrap:balance; }
.offer .btn{ margin-top:20px; }

/* ---------- footer ---------- */
.foot{ max-width:1180px; margin:0 auto; padding:40px 32px 36px; text-align:left; }
.foot-g{ display:grid; grid-template-columns:1.9fr repeat(3,1fr); gap:32px; }
.foot-tag{ font-size:13.5px; line-height:1.5; color:var(--body); margin-top:14px; max-width:280px; }
.foot h4{ font-family:var(--sans); font-size:12.5px; font-weight:500; color:var(--ink); margin-bottom:12px; }
.foot-l{ font-size:13px; line-height:2; }
.foot-l a{ display:block; color:var(--body); }
.foot-l a:hover{ color:var(--ink); }
.foot-fine{
  margin-top:34px; padding-top:22px; border-top:1px solid var(--line);
  font-size:12.5px; line-height:1.65; color:#566482; max-width:920px;
}
.foot-bot{
  display:flex; justify-content:space-between; align-items:center; gap:18px;
  margin-top:26px; padding-top:18px; border-top:1px solid var(--line);
  font-family:var(--mono); font-size:11.5px; color:var(--body);
}

/* ---------- logo lockup ---------- */
/* Full brand lockup, supplied at 1431x286 so it stays crisp on retina. */
.logo{ display:inline-block; }
.logo img{ height:46px; width:auto; }
.logo.is-sm img{ height:34px; }
@media (max-width:760px){ .logo img{ height:34px; } .logo.is-sm img{ height:28px; } }

.mark{ display:inline-flex; align-items:center; gap:11px; }
.mark img{ width:34px; height:34px; border-radius:9px; }
.mark span{ display:flex; flex-direction:column; line-height:1; text-align:left; }
.mark b{ font-size:19px; font-weight:600; letter-spacing:-.02em; color:var(--ink); }
.mark em{
  font-style:normal; font-family:var(--mono); font-size:9.5px; font-weight:400;
  letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-top:5px;
}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .split,.split-2{ grid-template-columns:1fr; gap:26px; }
  .strip{ grid-template-columns:1fr 1fr; }
  .strip > div:nth-child(odd){ border-left:0; }
  .strip > div:nth-child(n+3){ border-top:1px solid var(--line); }
  .flow{ grid-template-columns:1fr; gap:6px; }
  .arr{ height:24px; width:2px; margin:0 auto; }
  .arr i{ left:0; right:auto; top:3px; bottom:3px; border-top:0; border-left:1.5px dashed rgba(0,85,255,.55); }
  .arr i::after{ right:auto; left:-4px; top:auto; bottom:-1px; transform:rotate(135deg); }
  .foot-g{ grid-template-columns:1fr 1fr; gap:26px 20px; }
  .foot-g > div:first-child{ grid-column:1 / -1; }
}
@media (max-width:760px){
  .sec{ padding:64px 20px 72px; }
  /* the hero headline is three lines on a phone; the divisor is its widest line, "Or you pay nothing.", in ems plus a little air */
  .h1{ font-size:min(64px,calc((100vw - 40px) / 7.0)); white-space:nowrap; }
  /* one size for every section headline; the divisor is the widest line (in ems) plus a little air */
  .h2{ font-size:min(64px,calc((100vw - 40px) / 8.4)); }
  .h3{ font-size:24px; }
  .sub{ font-size:16px; }
  .lede-serif{ font-size:20px; }
  /* Two columns on a phone: the per-column padding and dividers that separate four
     columns on desktop make the grid uneven and clip the captions at this width. */
  .kpis{ grid-template-columns:1fr 1fr; padding:22px 20px 18px; row-gap:20px; }
  .kpis > div{ padding:0; border-left:0; }
  .kpis > div:nth-child(even){ padding-left:18px; border-left:1px solid var(--line-soft); }
  .kpis .k{ font-size:11px; letter-spacing:.09em; min-height:0; }
  .kpis b{ font-size:30px; margin-top:8px; }
  .kpis em{ font-size:12.5px; margin-top:6px; }
  .chart{ padding:6px 20px 0; }
  .chart .k{ font-size:10.5px; margin-bottom:12px; }
  .chart svg{ height:120px; }
  .dr{ grid-template-columns:1.6fr .8fr .9fr .9fr .7fr; gap:6px; padding:8px 12px; font-size:11px; }
  .dash-nav{ flex-wrap:wrap; padding:8px 10px; }
  .dash-nav em{ flex-basis:100%; margin-left:0; }
  /* The chrome label is absolutely centred, so at phone width it collides with
     the traffic-light dots. Drop the dots and let the label take the bar. */
  .win-bar i{ display:none; }
  .win-url{ position:static; text-align:center; flex:1; font-size:10.5px; padding:0 6px;
            white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .btn-xl{ font-size:18px; padding:19px 22px; }
  .offer{ padding:24px 18px 26px; }
  .offer-h{ font-size:27px; }
  .hood{ padding:28px 18px; }
  .hood-h{ font-size:24px; }
  .foot-bot{ flex-direction:column; align-items:flex-start; }
}
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } *{ transition:none!important; } }

/* ======================================================================
   THE PROGRAM CAROUSEL
   Ported from intentwave-site, src/components/sections/ProgramCarousel.tsx.
   Structure, panel graphics and behaviour are that component's. The palette
   is remapped onto this page's tokens: brand-1000 -> --ink, brand-900/70 ->
   --body, brand-600 (blue) -> --accent-bright / --accent (green), gray-10 ->
   --panel-2, and the display face is the page serif, not Open Runde.
   ====================================================================== */

/* ---- heading block ---- */
.prog-head{ display:flex; flex-direction:column; align-items:center; gap:22px; }
.prog-lede{ max-width:46ch; font-size:22px; line-height:1.45; color:var(--body); text-wrap:balance; }
.prog-cta{ margin-top:6px; gap:10px; }
.prog-cta-ic{ width:21px; height:21px; flex:none; }

/* ---- viewport + track ---- */
.prog-viewport{ position:relative; width:100%; overflow:hidden; margin-top:56px; }
.prog-track{ display:flex; gap:24px; will-change:transform; transition:transform .7s cubic-bezier(.22,1,.36,1); }
.prog-slot{ flex:none; width:80vw; max-width:960px; }
.prog-slide{
  display:grid; grid-template-columns:1fr 400px; height:530px; width:100%;
  text-align:left; font:inherit; color:inherit; cursor:pointer;
  background:var(--panel); border:1px solid var(--line); border-radius:28px; overflow:hidden;
  opacity:.35; transition:opacity .5s ease;
}
.prog-slide.is-on{ opacity:1; }
.prog-slide:hover{ opacity:.6; }
.prog-slide.is-on:hover{ opacity:1; }

/* ---- slide copy ---- */
.prog-copy{ display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:16px; padding:44px 48px; }
/* the rule separates the stat and its caption from the card's title below it */
.p-lift{ width:100%; margin:0 0 4px; padding-bottom:18px; border-bottom:1px solid rgba(10,26,60,.14); }
.p-lift-v{ margin:0; font-family:var(--serif); font-weight:700; font-size:56px; line-height:1; letter-spacing:-.035em; color:var(--accent); font-variant-numeric:tabular-nums; }
.p-lift-l{ margin:6px 0 0; font-size:16px; font-weight:500; line-height:1.35; color:var(--body); max-width:20em; }
.prog-h{
  margin:0; font-family:var(--serif); font-weight:500; font-size:40px; line-height:1.06; letter-spacing:-.025em; color:var(--ink);
  /* balance, not the inherited pretty: two of the six titles run to three lines and
     pretty still left a single word stranded on the last one. */
  text-wrap:balance;
}
.prog-b{ margin:0; max-width:28rem; font-size:19px; line-height:1.55; color:var(--body); }

/* ---- panel column ---- */
.prog-panel{ overflow-y:auto; padding:20px; background:var(--panel-2); border-left:1px solid var(--line-soft); scrollbar-width:none; }
.prog-panel::-webkit-scrollbar{ display:none; }
.p-col{ display:flex; flex-direction:column; gap:12px; height:100%; }
.p-grid2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; height:100%; }

/* ---- panel primitives ---- */
.p-card{ flex:none; background:var(--panel); border-radius:16px; box-shadow:0 0 0 1px rgba(10,26,60,.09),0 1px 2px rgba(10,26,60,.05); }
.p-pad{ padding:16px; } .p-pad-sm{ padding:12px; } .p-clip{ overflow:hidden; }
.p-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.p-head.p-top{ align-items:flex-start; }
.p-mt{ margin-top:16px; }
.p-lab{ font-size:14px; font-weight:500; color:var(--muted); }
.p-big{ margin:8px 0 0; font-size:46px; font-weight:600; letter-spacing:-.03em; line-height:1; color:var(--ink); font-variant-numeric:tabular-nums; }
.p-big.is-md{ margin-top:6px; font-size:36px; }
.p-sub{ margin:4px 0 0; font-size:14px; color:var(--muted); }
/* --muted, not --soft: at 12-14px on white the soft grey lands at 3.4-3.6:1.
   The original used a lighter grey; this page holds 4.5:1 for body text. */
.p-faint{ margin:0; font-size:12px; color:var(--muted); }
.p-status{
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap; flex:none;
  padding:4px 10px; border-radius:999px; font-size:12px; font-weight:600;
  background:var(--grey); color:var(--muted);
}
.p-status i{ display:none; }
.p-status.is-on{ background:var(--accent-soft); color:var(--accent); box-shadow:0 0 0 1px rgba(0,85,255,.18); }
.p-status.is-on i{ display:block; width:6px; height:6px; border-radius:50%; background:var(--accent); }
.p-status.is-live{ background:var(--accent-soft); color:var(--accent); box-shadow:0 0 0 1px rgba(0,85,255,.22); }
.p-status.is-live i{ display:block; width:6px; height:6px; border-radius:50%; background:var(--accent-bright); }
.p-trend{ width:13px; height:13px; }

/* avatars */
.pf{ width:40px; height:40px; border-radius:50%; object-fit:cover; background:var(--grey); }
.pf.is-lg{ width:44px; height:44px; flex:none; }
.p-faces{ display:flex; }
.p-faces .pf{ margin-left:-8px; box-shadow:0 0 0 2px var(--panel); }
.p-faces .pf:first-child{ margin-left:0; }

/* source rows */
.p-row{ flex:none; padding:12px 16px; border-radius:16px; background:rgba(230,238,252,.5); box-shadow:0 0 0 1px rgba(10,26,60,.045); }
.p-row-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:14px; }
.p-row-l{ display:flex; align-items:center; gap:8px; color:var(--body); }
.p-row-n{ font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; }
.p-ic{ width:16px; height:16px; flex:none; color:var(--accent); }
.p-bar{ margin-top:8px; height:6px; border-radius:999px; background:var(--grey); overflow:hidden; }
.p-bar i{ display:block; height:100%; border-radius:999px; background:var(--accent-bright); }

/* pushed-to footer */
.p-pushed{ margin-top:auto; padding-top:8px; display:flex; align-items:center; justify-content:space-between; font-size:14px; color:var(--muted); }
.p-marks{ display:flex; align-items:center; gap:14px; }
.p-mk{ width:24px; height:24px; flex:none; }
.p-mk-sm{ width:18px; height:18px; flex:none; }

/* meta ad mock */
.p-ad-head{ display:flex; align-items:center; gap:10px; padding:10px 14px; }
.p-ad-av{ position:relative; width:36px; height:36px; flex:none; border-radius:50%; overflow:hidden; background:var(--grey); box-shadow:0 0 0 1px rgba(10,26,60,.07); }
.p-ad-av img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.p-ad-id{ min-width:0; flex:1; line-height:1.25; }
.p-ad-name{ margin:0; font-size:14px; font-weight:600; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.p-ad-img{ position:relative; aspect-ratio:7/3; background:var(--grey); }
.p-ad-img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.p-ad-foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 14px; }
.p-chip-sm{ flex:none; padding:6px 12px; border-radius:8px; background:var(--panel-2); box-shadow:0 0 0 1px rgba(10,26,60,.07); font-size:12px; font-weight:600; color:var(--ink); }

/* row cards + stat card */
.p-rowcard{ flex:none; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px; border-radius:16px; background:rgba(230,238,252,.5); box-shadow:0 0 0 1px rgba(10,26,60,.045); }
.p-rc-t{ font-size:15px; color:var(--body); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.p-stat{ margin-top:auto; padding:16px; border-radius:16px; background:var(--accent-soft); box-shadow:0 0 0 1px rgba(0,85,255,.16); }
.p-stat-v{ margin:0; font-size:34px; font-weight:600; letter-spacing:-.025em; line-height:1; color:var(--accent); font-variant-numeric:tabular-nums; }
.p-stat-l{ margin:6px 0 0; font-size:13.5px; line-height:1.4; color:#0A2F8F; }

/* klaviyo flow */
.p-person{ display:flex; align-items:center; gap:12px; padding:12px; }
.p-flow{ position:relative; display:flex; flex-direction:column; gap:10px; padding-left:24px; }
.p-flow-line{ position:absolute; left:7px; top:16px; bottom:16px; border-left:1px dashed rgba(10,26,60,.18); }
.p-flow-item{ position:relative; }
.p-dot{ position:absolute; left:-24px; top:16px; width:15px; height:15px; border-radius:50%; background:var(--accent-bright); box-shadow:0 0 0 4px var(--panel-2); }
.p-flow-step{ font-size:14px; font-weight:600; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.p-flow-sub{ margin:2px 0 0; font-size:14px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* creative tiles */
.p-tile{ position:relative; border-radius:16px; overflow:hidden; background:var(--grey); box-shadow:0 0 0 1px rgba(10,26,60,.07); }
.p-tile img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.p-tag{ position:absolute; top:10px; left:10px; padding:4px 10px; border-radius:999px; background:rgba(255,255,255,.95); font-size:12px; font-weight:600; color:var(--ink); box-shadow:0 1px 2px rgba(10,26,60,.12); }
.p-play{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.p-play::before{ content:""; position:absolute; width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.92); box-shadow:0 4px 10px rgba(10,26,60,.18); }
.p-play-i{ position:relative; width:20px; height:20px; margin-left:2px; color:var(--ink); }

/* shopify product mock */
.p-prod{ display:flex; gap:12px; }
.p-prod-img{ position:relative; width:96px; height:96px; flex:none; border-radius:12px; overflow:hidden; background:var(--grey); }
.p-prod-img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.p-prod-id{ display:flex; flex-direction:column; justify-content:center; min-width:0; }
.p-prod-name{ margin:0; font-size:18px; font-weight:600; color:var(--ink); }
.p-prod-price{ margin:2px 0 0; font-size:15px; color:var(--muted); }
.p-buys{ margin-top:12px; display:flex; flex-direction:column; gap:8px; }
.p-shoppay{ display:flex; align-items:center; justify-content:center; height:44px; border-radius:12px; background:#5433EB; color:#fff; }
.p-sp{ height:16px; width:auto; }
.p-addcart{ display:flex; align-items:center; justify-content:center; height:44px; border-radius:12px; background:var(--panel); box-shadow:0 0 0 1px rgba(10,26,60,.12); font-size:15px; font-weight:500; color:var(--ink); }

/* attribution week bars + buyers */
.p-week{ margin-top:16px; display:flex; align-items:flex-end; gap:6px; height:56px; }
.p-week span{ flex:1; border-radius:4px 4px 0 0; background:rgba(0,85,255,.4); }
.p-week span.is-now{ background:var(--accent-bright); }
.p-buyer{ display:flex; align-items:center; gap:12px; min-width:0; }
.p-buyer-n{ font-size:15px; font-weight:500; color:var(--ink); }
.p-buyer-v{ display:flex; align-items:center; gap:6px; margin-top:2px; font-size:13px; color:var(--muted); }
.p-buyer-a{ font-size:17px; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; }

/* ---- dots + pause ---- */
.prog-nav{ display:flex; align-items:center; justify-content:center; gap:4px; margin-top:28px; }
.prog-dot{ display:flex; align-items:center; justify-content:center; width:24px; height:32px; background:none; border:0; cursor:pointer; }
.prog-dot i{ display:block; width:8px; height:8px; border-radius:999px; background:#C9D8F5; transition:width .3s ease, background .3s ease; }
.prog-dot.is-on i{ width:32px; background:var(--accent-bright); }
.prog-pause{ margin-left:8px; display:flex; align-items:center; justify-content:center; width:32px; height:32px; border:0; border-radius:50%; background:none; color:var(--soft); cursor:pointer; transition:color .2s; }
.prog-pause:hover{ color:var(--ink); }
.prog-pause svg{ width:16px; height:16px; }

/* ---- four points ---- */
.prog-points{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:48px 32px; margin-top:88px; }
.prog-point{ display:flex; flex-direction:column; align-items:center; gap:18px; padding-top:38px; border-top:1px solid rgba(10,26,60,.1); text-align:center; }
.prog-point-ic{ display:inline-flex; align-items:center; justify-content:center; padding:16px; border-radius:18px; background:var(--accent-soft); color:var(--accent); }
.prog-point-ic svg{ width:38px; height:38px; }
/* every title is now two lines and every description about the same length, so the four read as equals */
.prog-point-h{ margin:0; white-space:nowrap; min-height:2.4em; font-size:24px; font-weight:500; line-height:1.2; letter-spacing:-.01em; color:var(--ink); }
.prog-point-b{ margin:0; max-width:22em; font-size:18px; line-height:1.55; color:var(--muted); text-wrap:balance; }

/* ---- responsive ---- */
@media (max-width:1100px){
  .prog-slide{ grid-template-columns:1fr; height:auto; }
  .prog-copy{ padding:28px; gap:14px; }
  .prog-h{ font-size:30px; }
  .prog-b{ font-size:17px; max-width:none; }
  .prog-panel{ min-height:460px; border-left:0; border-top:1px solid var(--line-soft); }
  .prog-slot{ width:calc(100vw - 48px); max-width:370px; }
  .prog-track{ gap:12px; }
  .prog-points{ grid-template-columns:1fr 1fr; gap:40px 28px; margin-top:64px; }
}
@media (max-width:760px){
  .prog-lede{ font-size:18px; }
  .prog-viewport{ margin-top:36px; }
  .prog-points{ grid-template-columns:1fr; gap:34px; margin-top:52px; }
  .prog-point{ padding-top:28px; }
}
@media (prefers-reduced-motion:reduce){ .prog-track{ transition:none; } }

/* ======================================================================
   GETTING STARTED  (intentwave-site, StepsSection.tsx)
   The section pins while a runway scrolls past; each quarter of the runway
   is one step. Same behaviour as the original, written against plain sticky
   positioning instead of motion's useScroll.
   ====================================================================== */
.pill{ display:inline-flex; align-items:center; gap:8px; padding:7px 15px 7px 13px; border-radius:999px; background:var(--dark); color:#fff; font-size:13.5px; font-weight:500; letter-spacing:.01em; }
.pill-ic{ width:16px; height:16px; flex:none; }

.gs-wrap{ position:relative; }
.gs-sticky{ display:flex; align-items:center; justify-content:space-between; gap:64px; }
.gs-left{ flex:1; min-width:0; max-width:580px; }
/* title sits in the pinned left column as before: "How to win" then "with Adcellerate." so the brand name never splits */
.gs-h2{ margin:0 0 28px; }
.gs-title-m{ display:none; }
.gs-h2 .nw{ white-space:nowrap; }
.gs-pill-k{ display:inline-flex; margin-bottom:22px; }
.gs-steps{ position:relative; list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:20px; }
.gs-rail{ position:absolute; left:0; top:0; bottom:0; border-left:2px dashed rgba(10,26,60,.14); }
.step-li{ border-left:2px solid transparent; padding-left:28px; opacity:.45; transition:border-color .3s ease, opacity .3s ease; }
.step-li.is-on{ border-left-color:var(--accent-bright); opacity:1; }
.step-h{ margin:0; font-size:24px; font-weight:500; line-height:1.25; letter-spacing:-.015em; color:var(--ink); font-family:var(--sans); }
.step-btn{ display:block; text-align:left; background:none; border:0; padding:0; font:inherit; color:inherit; cursor:pointer; }
.step-n{ margin-right:12px; color:var(--soft); font-variant-numeric:tabular-nums; }
.step-b{ margin:0; max-height:0; opacity:0; overflow:hidden; font-size:19px; line-height:1.5; color:var(--muted); transition:max-height .3s ease, opacity .3s ease; }
.step-li.is-on .step-b{ max-height:9em; opacity:1; }
.step-b span{ display:block; max-width:32em; padding-top:10px; }
.gs-hint{ margin:32px 0 0; font-size:14px; color:var(--muted); }

.gs-right{ flex:none; width:50%; max-width:620px; }
.gs-skew{ position:relative; padding:32px 32px 0 0; transform:rotate(4deg) skewX(-6deg); }
.gs-skew::before{ content:""; position:absolute; top:0; right:0; bottom:32px; left:32px; border-radius:28px; background:linear-gradient(140deg,var(--accent-bright),var(--aqua)); opacity:.1; box-shadow:inset 0 0 0 1px rgba(10,26,60,.5); -webkit-mask-image:linear-gradient(to bottom,#000 50%,transparent 100%); mask-image:linear-gradient(to bottom,#000 50%,transparent 100%); }
.gs-card{ position:relative; width:100%; aspect-ratio:580/340; overflow:hidden; border-radius:28px; background:var(--panel); box-shadow:0 0 0 1px rgba(10,26,60,.1),10px 16px 14px rgba(10,26,60,.04); }
.gs-frame{ position:absolute; inset:0; opacity:0; transform:translateY(8px); pointer-events:none; transition:opacity .3s ease, transform .3s ease; }
.gs-frame.is-on{ opacity:1; transform:none; pointer-events:auto; }
.gs-pad,.gs-code{ display:flex; flex-direction:column; gap:10px; height:100%; padding:24px; }
.gs-code{ font-family:var(--mono); font-size:14px; color:var(--muted); }
.gs-bar{ display:flex; align-items:center; gap:6px; padding-bottom:8px; font-size:12px; color:var(--soft); }
.gs-bar i{ width:10px; height:10px; border-radius:50%; background:var(--grey); }
.gs-bar span{ margin-left:8px; font-family:var(--sans); font-size:13.5px; color:var(--muted); }
/* --muted, not --soft: this is still text inside the mock, and the page holds
   4.5:1 on body copy even where the original let it go lighter. */
.gs-dim{ margin:0; color:var(--muted); }
.gs-ind{ padding-left:20px; }
.gs-hit{ margin:0; padding:8px 8px 8px 20px; border-radius:12px; background:var(--accent-soft); color:#0042CC; box-shadow:0 0 0 1px rgba(0,85,255,.22); word-break:break-all; }
.gs-chips{ margin-top:auto; display:flex; flex-wrap:wrap; gap:8px; font-family:var(--sans); }
.gs-chip{ display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px; background:var(--panel); box-shadow:0 0 0 1px rgba(10,26,60,.07); font-size:13.5px; font-weight:500; color:var(--body); }
.gs-ck{ width:15px; height:15px; flex:none; color:var(--accent); }
.gs-kick{ margin:0; font-size:11.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.gs-id{ display:flex; align-items:center; gap:12px; padding:9px 16px; border-radius:16px; background:var(--panel-2); box-shadow:0 0 0 1px rgba(10,26,60,.045); }
.gs-vid{ font-family:var(--mono); font-size:13px; color:var(--muted); }
.gs-ar{ width:15px; height:15px; flex:none; color:#A9B7D4; }
.pf.is-sm{ width:32px; height:32px; }
.gs-nm{ font-size:15px; font-weight:600; color:var(--ink); }
.gs-city{ font-size:13.5px; color:var(--muted); }
.gs-ok{ margin-left:auto; width:19px; height:19px; flex:none; color:var(--accent); }
.gs-foot{ margin:auto 0 0; font-size:13.5px; color:var(--muted); }
.gs-aud{ display:flex; align-items:baseline; gap:8px; margin:4px 0 0; }
.gs-aud b{ font-size:46px; font-weight:600; letter-spacing:-.03em; line-height:1; color:var(--ink); font-variant-numeric:tabular-nums; }
.gs-aud span{ font-size:16px; color:var(--muted); }
.gs-bars{ display:flex; flex-direction:column; gap:12px; margin-top:16px; }
.gs-brow{ display:flex; align-items:center; gap:12px; font-size:15px; }
.gs-blab{ width:242px; flex:none; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gs-btrack{ flex:1; height:8px; border-radius:999px; background:var(--grey); overflow:hidden; }
.gs-btrack i{ display:block; height:100%; border-radius:999px; background:var(--accent-bright); }
.gs-bpc{ width:42px; text-align:right; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; }
.gs-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; height:100%; padding:24px; }
.gs-grid .gs-cell:last-child:nth-child(odd){ grid-column:1 / -1; }
.gs-cell{ display:flex; flex-direction:column; justify-content:space-between; padding:16px; border-radius:16px; background:var(--panel-2); box-shadow:0 0 0 1px rgba(10,26,60,.045); }
.gs-cell-top{ display:flex; align-items:center; justify-content:space-between; }
.gs-cell-n{ margin:0; font-size:16px; font-weight:600; color:var(--ink); }
.gs-cell-s{ margin:2px 0 0; font-size:13.5px; color:var(--muted); }
.gs-pills{ display:flex; justify-content:center; margin-top:20px; padding-right:16px; }
.gs-pills-in{ display:flex; align-items:center; gap:6px; padding:6px; border-radius:999px; background:rgba(10,26,60,.045); box-shadow:inset 0 0 0 1px rgba(10,26,60,.05); }
.gs-pill{ display:flex; align-items:center; justify-content:center; width:40px; height:40px; border:0; border-radius:50%; background:var(--panel); color:var(--muted); box-shadow:0 0 0 1px rgba(10,26,60,.09),0 1px 2px rgba(10,26,60,.05); cursor:pointer; transition:color .2s, box-shadow .2s; }
.gs-pill svg{ width:21px; height:21px; }
.gs-pill:hover{ box-shadow:0 0 0 1px rgba(10,26,60,.22); }
.gs-pill.is-on{ color:var(--accent); box-shadow:0 0 0 2px var(--accent-light); }

/* ======================================================================
   WHO IT'S FOR  (intentwave-site, FitSection.tsx)
   ====================================================================== */
.fit-wrap{ display:flex; align-items:center; gap:0; }
.fit-left{ flex:none; max-width:none; padding-right:56px; display:flex; flex-direction:column; align-items:flex-start; gap:22px; }
/* width/height attributes + aspect-ratio reserve the logo's space before it loads. Without
   them the line is narrower until the file arrives and the graphic beside it jumps right. */
.fit-shopify{ display:inline-block; height:.92em; width:auto; aspect-ratio:256/292; vertical-align:-.08em; margin-right:.05em; }
.fit-lede{ font-size:19px; max-width:34rem; }
.fit-cta{ gap:9px; }
.fit-cta-ic{ width:19px; height:19px; flex:none; }
.fit-right{ flex:none; -webkit-mask-image:linear-gradient(to right,#000 0%,#000 56%,transparent 96%); mask-image:linear-gradient(to right,#000 0%,#000 56%,transparent 96%); }
.fit-frame{ padding:6px; border-radius:26px; border:1px solid rgba(10,26,60,.14); background:rgba(10,26,60,.04); }
.fit-store{ display:flex; flex-direction:column; gap:24px; padding:32px; border-radius:20px; background:var(--panel); }
.fit-store-head{ display:flex; align-items:center; gap:12px; }
.fit-avatar{ position:relative; width:64px; height:64px; flex:none; border-radius:50%; overflow:hidden; background:var(--grey); box-shadow:0 0 0 1px rgba(10,26,60,.07); }
.fit-avatar img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.fit-store-name{ display:flex; align-items:center; gap:8px; font-size:20px; font-weight:500; color:var(--ink); }
.fit-plus{ display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:999px; background:#E8F0FF; color:#0055FF; font-size:11px; font-weight:600; box-shadow:0 0 0 1px rgba(0,85,255,.35); }
.fit-plus-ic{ width:12px; height:12px; }
.fit-store-meta{ margin-top:2px; font-size:13.5px; color:var(--muted); }
/* 190, not 170: the sixth qualifier line ('Founder, CMO or head of growth on the
   call') truncates at the narrower width. */
.fit-tiles{ display:grid; grid-template-columns:repeat(3,190px); grid-auto-rows:190px; gap:20px; }
.fit-qual{ grid-column:span 2; grid-row:span 2; display:flex; flex-direction:column; padding:24px; border-radius:24px; background:var(--panel); box-shadow:0 0 0 1px rgba(10,26,60,.09),0 2px 6px rgba(10,26,60,.05); }
.fit-qual-head{ display:flex; align-items:center; justify-content:space-between; }
.fit-qual-head p{ margin:0; font-size:16px; font-weight:600; color:var(--ink); }
.fit-badge{ padding:2px 9px; border-radius:999px; background:var(--accent); color:#fff; font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.fit-musts{ flex:1; display:flex; flex-direction:column; gap:8px; margin-top:16px; }
.fit-must{ display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:14px; }
.fit-must span{ color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fit-must i{ display:flex; align-items:center; justify-content:center; width:18px; height:18px; flex:none; border-radius:50%; background:var(--accent); color:#fff; }
.fit-must i svg{ width:11px; height:11px; }
.fit-qual-foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:16px; }
.fit-qual-foot > span{ font-size:13px; color:var(--muted); }
.fit-apply{ height:32px; padding:0 14px; font-size:12.5px; border-radius:8px; }
.fit-img{ position:relative; border-radius:24px; overflow:hidden; background:var(--grey); box-shadow:0 0 0 1px rgba(10,26,60,.07); }
.fit-img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* ======================================================================
   SUCCESS STORIES  (intentwave-site, SuccessStories.tsx)
   ====================================================================== */
.stories-h2{ max-width:20ch; margin:24px auto 0; }
.stories-lede{ max-width:38rem; margin:18px auto 0; font-size:19px; }
.stories{ display:grid; grid-template-columns:1fr 1fr; gap:32px; max-width:1040px; margin:56px auto 0; text-align:left; }
.story{ display:flex; padding:8px; border-radius:34px; border:1px solid rgba(10,26,60,.1); background:rgba(10,26,60,.035); }
.story-in{ display:flex; flex-direction:column; width:100%; overflow:hidden; border-radius:26px; background:var(--panel); box-shadow:0 1px 2px rgba(10,26,60,.05); }
.story-photo{ position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--grey); }
.story-photo > img:first-child{ width:100%; height:100%; object-fit:cover; }
.story-scrim{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(10,26,60,.34) 0%,rgba(10,26,60,.62) 100%); }
.story-logo{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); height:56px; width:66%; object-fit:contain; filter:brightness(0) invert(1) drop-shadow(0 6px 18px rgba(0,0,0,.35)); }
.story-body{ flex:1; display:flex; flex-direction:column; gap:28px; padding:32px; }
.story-stats{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.story-v{ margin:0; font-size:clamp(28px,3.4vw,54px); font-weight:600; letter-spacing:-.03em; line-height:1; color:var(--accent); font-variant-numeric:tabular-nums; white-space:nowrap; }
.story-l{ margin:8px 0 0; font-size:17px; line-height:1.35; color:var(--muted); }
.story-sum{ margin:0; padding-top:24px; border-top:1px solid rgba(10,26,60,.09); font-size:19px; line-height:1.55; color:var(--body); }

/* ---- responsive ---- */
@media (max-width:1100px){
  .gs-sticky{ flex-direction:column; align-items:stretch; gap:48px; }
  .gs-right{ width:100%; max-width:none; }
  .gs-skew{ transform:none; padding:0; }
  .gs-skew::before{ display:none; }
  .fit-wrap{ flex-direction:column; gap:40px; }
  .fit-left{ max-width:none; padding-right:0; align-items:center; text-align:center; }
  .fit-right{ width:100%; -webkit-mask-image:none; mask-image:none; }
  .fit-tiles{ grid-template-columns:repeat(3,minmax(0,1fr)); grid-auto-rows:140px; gap:14px; }
  .stories{ grid-template-columns:1fr; max-width:560px; gap:24px; }
}
@media (max-width:760px){
  .step-h{ font-size:20px; } .step-b{ font-size:17px; }
  .gs-blab{ width:120px; font-size:13px; white-space:normal; line-height:1.25; }
  .gs-code{ font-size:12px; } .gs-card{ aspect-ratio:auto; min-height:360px; }
  .gs-id{ gap:8px; padding:8px 12px; } .gs-city{ display:none; }
  .fit-tiles{ grid-template-columns:1fr 1fr; grid-auto-rows:120px; }
  .fit-qual{ grid-column:span 2; }
  .fit-store{ padding:20px; gap:18px; }
  .story-body{ padding:24px; gap:22px; }
  .story-stats{ gap:16px; }
  .story-sum{ font-size:17px; }
}

/* ---------- the lift band ----------
   Three outcome figures, plainly set. No browser chrome: the old block mocked up a
   report the reader has not seen, which argued nothing. A figure with the brand and
   window under it argues on its own. */
.lifts{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; max-width:1100px; margin:52px auto 0; text-align:left; }
.lift{ display:flex; flex-direction:column; padding:32px 30px 30px; border-radius:22px; background:var(--panel); box-shadow:0 0 0 1px rgba(10,26,60,.07),0 2px 8px rgba(10,26,60,.045); container-type:inline-size; }
.lift-v{
  margin:0; font-family:var(--serif); font-weight:600; font-size:46px; line-height:1; letter-spacing:-.035em;
  /* sized to the card so a figure never clips; 76px is the ceiling (20% under the
     95px these were). */
  font-size:min(76px,28cqw);
  white-space:nowrap; color:var(--accent); font-variant-numeric:tabular-nums;
}
.lift-k{ margin:16px 0 0; font-size:22px; font-weight:600; line-height:1.25; letter-spacing:-.015em; color:var(--ink); text-wrap:balance; }
.lift-b{ margin:10px 0 0; font-size:17px; line-height:1.5; color:var(--body); }
@media (max-width:900px){
  .lifts{ grid-template-columns:1fr; gap:16px; margin-top:38px; }
}
@media (max-width:760px){
  .lift{ padding:26px 24px; }
  .lift-k{ font-size:20px; }
}

/* "Built for [Shopify] brands" is meant to sit on one line, so on desktop the column is
   as wide as that line and the store graphic moves right to make room. */
@media (min-width:1400px){
  .fit-h2{ white-space:nowrap; }
  /* The column used to size itself to the heading's first line. Pin it, so the graphic
     stays where it was asked to sit even when that line gets shorter or longer. 694 is
     832 less 20% of the graphic's width (~138px), per the request to bring it back. */
  .fit-left{ width:694px; }
}
/* The graphic keeps its full size and runs off the right edge (it already fades out
   there), so the section clips rather than letting the page scroll sideways. */
#fit{ overflow-x:clip; }
/* Below 1400 the one-line heading plus the store card no longer fit side by side (the
   card's right edge starts to clip around 1360), so stack them earlier than the rest of
   the page does. */
@media (max-width:1399px){
  .fit-wrap{ flex-direction:column; gap:40px; }
  .fit-left{ padding-right:0; align-items:center; text-align:center; }
  .fit-right{ width:100%; -webkit-mask-image:none; mask-image:none; }
}

/* Two headlines that sit above the default .h2 size. These were inline styles, which
   a media query cannot override, so on a phone they stayed at 53px and 72px. */
.h2-who{ font-size:48px; }
.h2-cta{ font-size:72px; }
@media (max-width:760px){ .h2-who{ font-size:37px; } .h2-cta{ font-size:41px; } }

/* getting-started frames: brand brief and ad set-up */
.gs-kvs{ display:flex; flex-direction:column; gap:0; margin-top:4px; }
.gs-kv{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; padding:9px 0; border-bottom:1px solid rgba(10,26,60,.08); font-size:15px; }
.gs-kv:last-child{ border-bottom:0; }
.gs-kl{ color:var(--muted); flex:none; }
.gs-kvv{ font-weight:600; color:var(--ink); text-align:right; }
.gs-ads{ display:flex; flex-direction:column; gap:10px; }
.gs-ad{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px; border-radius:16px; background:var(--panel-2); box-shadow:0 0 0 1px rgba(10,26,60,.045); }
.gs-ad-t{ font-size:15px; font-weight:500; color:var(--body); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* green-filled pill variant */
.pill.is-green{ background:var(--accent); color:#fff; font-size:15px; font-weight:600; letter-spacing:.01em; padding:8px 18px; }

/* ---------- final CTA ---------- */
.btn-light{ background:#fff; color:var(--ink); }
.btn-light:hover{ background:#E8F0FF; }
.fin-sec{ padding-top:72px; }
.fin{ display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); align-items:center; gap:56px; padding:72px 68px; border-radius:36px; background:var(--dark); color:#fff; text-align:left; }
.fin-h{ margin:0; font-family:var(--serif); font-weight:500; font-size:59px; line-height:1.04; letter-spacing:-.03em; color:#fff; text-wrap:balance; }
.fin-h b{ font-weight:500; color:var(--accent-light); }
.fin-p{ margin:24px 0 0; max-width:30em; font-size:20px; line-height:1.55; color:rgba(255,255,255,.78); }
.fin-cta{ max-width:380px; margin:36px 0 0; }
.fin-cta .cta-note{ margin-top:14px; font-size:17px; font-weight:600; color:var(--accent-light); text-align:center; }
/* The steps sit straight on the dark panel: a numbered timeline, no card behind it. */
.fin-steps{ position:relative; list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:40px; }
.fin-steps::before{ content:""; position:absolute; left:27px; top:30px; bottom:30px; border-left:2px dashed rgba(140,178,255,.4); }
.fin-step{ position:relative; display:flex; align-items:flex-start; gap:26px; }
.fin-n{ position:relative; z-index:1; flex:none; display:flex; align-items:center; justify-content:center; width:56px; height:56px; border-radius:50%; background:var(--dark); box-shadow:inset 0 0 0 2px var(--accent-light); font-family:var(--mono); font-size:17px; font-weight:500; letter-spacing:.04em; color:var(--accent-light); }
.fin-st{ margin:4px 0 0; font-family:var(--serif); font-size:34px; font-weight:500; line-height:1.1; letter-spacing:-.02em; color:#fff; }
.fin-sd{ margin:10px 0 0; max-width:24em; font-size:19px; line-height:1.5; color:rgba(255,255,255,.76); }
@media (max-width:1000px){
  .fin{ grid-template-columns:1fr; gap:40px; padding:52px 40px; }
  .fin-h{ font-size:50px; }
  .fin-steps{ gap:34px; }
}
@media (max-width:760px){
  .fin-sec{ padding-top:48px; }
  .fin{ padding:36px 22px; border-radius:28px; gap:32px; }
  .fin-h{ font-size:38px; }
  .fin-p{ font-size:18px; }
  .fin-steps{ gap:30px; }
  .fin-steps::before{ left:22px; top:24px; bottom:24px; }
  .fin-n{ width:46px; height:46px; font-size:15px; }
  .fin-step{ gap:18px; }
  .fin-st{ font-size:27px; margin-top:2px; }
  .fin-sd{ font-size:17px; }
  .fin-cta{ max-width:none; }
}
/* a forced line break that only applies on wide screens; on a phone the heading reflows and balances */
@media (max-width:760px){ .br-d{ display:none; } }

/* ---------- hero background: faint flowing lines ----------
   Very low opacity so it reads as texture, not content. The band is anchored to the top
   of the section with its upper half drawn above the edge, so the section crops it; the
   lower edge fades out so the lines never end on a hard cut. */
.hero{ position:relative; overflow:hidden; }
.hero .in{ position:relative; z-index:1; }
.hero-lines{ position:absolute; left:0; top:0; width:100%; height:min(60%,460px); z-index:0; pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 40%,transparent 100%);
          mask-image:linear-gradient(to bottom,#000 0,#000 40%,transparent 100%); }

/* ---------- results cards: a large icon to the left of each stat ---------- */
.lift-top{ display:flex; align-items:center; gap:14px; }
.lift-ic{ flex:none; width:72px; height:72px; color:var(--accent); opacity:.3; }
.lift-top .lift-v{ font-size:min(76px,25cqw); }

/* plain white section: no tint and no rule lines, so it sits cleanly between the green
   results band above and the Getting started section below */
.sec-plain{ background:var(--panel); }
#program .prog-slide{ box-shadow:0 1px 2px rgba(10,26,60,.04),0 18px 40px -26px rgba(10,26,60,.22); }
@media (max-width:760px){
  .lift-ic{ width:60px; height:60px; }
}

/* ---------- brands we have worked with: a slow marquee along the bottom of the hero ---------- */
.hero .brands{ position:relative; z-index:1; margin-top:auto; padding:56px 0 40px; }
.brands-k{ margin:0 0 44px; font-family:var(--serif); font-size:14px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.brands-row{ overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 12%,#000 88%,transparent 100%);
          mask-image:linear-gradient(to right,transparent 0,#000 12%,#000 88%,transparent 100%); }
/* Four copies of the five brands in one track. Moving the track by exactly one copy (25%)
   lands on an identical frame, so the loop has no visible seam at any realistic screen width. */
.brands-track{ display:flex; align-items:center; width:max-content; margin:0; padding:0; list-style:none; animation:brands-scroll 70s linear infinite; }
.brands-track li{ flex:none; display:flex; align-items:center; padding:0 44px; }
.brands-track img{ display:block; height:26px; width:auto; filter:grayscale(1); opacity:.34; }
/* each mark sized for equal visual weight: the shield and the stacked EverScent mark carry more height */
.brands-track .b-lumara{ height:34px; } .brands-track .b-everscent{ height:46px; } .brands-track .b-diesel{ height:24px; }
.brands-track .b-hpc{ height:58px; } .brands-track .b-cc{ height:38px; }
.brand-word{ font-family:var(--sans); font-size:24px; font-weight:700; letter-spacing:.02em; color:var(--ink); opacity:.5; white-space:nowrap; }
.brand-everscent{ letter-spacing:.2em; font-size:21px; font-weight:600; text-transform:uppercase; }
.brand-hpcookers{ letter-spacing:.04em; font-size:25px; font-weight:800; text-transform:uppercase; }
.brands:hover .brands-track{ animation-play-state:paused; }
@keyframes brands-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-25%); } }
@media (max-width:760px){
  .hero .brands{ padding:44px 0 32px; }
  .brands-track li{ padding:0 30px; }
  .brands-track .b-lumara{ height:28px; } .brands-track .b-everscent{ height:38px; } .brands-track .b-diesel{ height:20px; }
  .brands-track .b-hpc{ height:48px; } .brands-track .b-cc{ height:32px; }
  .brands-k{ margin-bottom:32px; }
  .brand-word{ font-size:20px; } .brand-everscent{ font-size:17px; } .brand-hpcookers{ font-size:21px; }
}
/* no motion: show one static copy of the row instead of a moving strip */
@media (prefers-reduced-motion:reduce){
  .brands-track{ animation:none; width:auto; flex-wrap:wrap; justify-content:center; row-gap:18px; }
  .brands-track li[aria-hidden]{ display:none; }
  .brands-row{ -webkit-mask-image:none; mask-image:none; }
}

.cta-note{ text-align:center; }

/* carousel panels: graphics sit in the vertical middle of the card. margin:auto (not
   justify-content:center) so a panel taller than the card falls back to the top instead
   of clipping its first row. */
.prog-panel{ display:flex; flex-direction:column; }
.p-col{ height:auto; margin-block:auto; }
/* the image-tile slide fills the whole panel, so it stays full height */


/* "Who it's for" when it stacks (everything under 1400px): the frame spans the column, so the tiles
   stretch to fill it and the qualify card's contents scale up with them, instead of a fixed
   3 x 190px grid hugging the left edge of a wide empty frame. Capped so it never gets huge. */
@media (min-width:761px) and (max-width:1399px){
  .fit-right{ max-width:980px; margin-inline:auto; }
  .fit-tiles{ grid-template-columns:repeat(3,minmax(0,1fr)); grid-auto-rows:clamp(190px,23vw,250px); gap:18px; }
  .fit-store{ padding:32px; }
  .fit-qual{ padding:32px; }
  .fit-qual-head p{ font-size:21px; }
  .fit-badge{ font-size:12px; padding:3px 12px; }
  .fit-musts{ gap:14px; margin-top:22px; }
  .fit-must{ font-size:18px; }
  .fit-must i{ width:24px; height:24px; } .fit-must i svg{ width:14px; height:14px; }
  .fit-qual-foot > span{ font-size:16px; }
  .fit-apply{ height:40px; padding:0 18px; font-size:15px; }
  .fit-store-name{ font-size:22px; } .fit-store-meta{ font-size:15.5px; }
}

/* "You get" / "You stop" rows: 4px larger text (16 -> 20), with the tick box and row padding eased up to match */
.yesno .li{ font-size:20px; padding:11px 0; gap:14px; }
.yesno .li i{ width:26px; height:26px; margin-top:2px; }

/* solid status badges: green fill with a white check for "You get", red fill with a white cross for "You stop" */
.yesno .li i{ background:var(--accent); border-color:var(--accent); }
.yesno .li.is-no i{ background:#566482; border-color:#566482; }
.yesno .li i svg path{ stroke:#fff; stroke-width:2; }
.yesno .li i svg{ width:15px; height:15px; }

/* qualify buttons: a solid circle with the check cut out in the button's own colour */
.btn-dark .ck{ stroke:var(--dark); }
.btn-light .ck{ stroke:#fff; }


/* Mobile headlines break where we say so (m-br), so each line carries about the same number of words.
   The desktop breaks (.br-d) step aside on phones. */
.m-br{ display:none; }
@media (max-width:760px){ .m-br{ display:inline; } }

/* "Who it's for": just the qualifying points and their checks, no store mock-up around them. */
.fit-right{ -webkit-mask-image:none; mask-image:none; flex:none; width:min(100%,560px); }
.fit-list{ list-style:none; margin:0; padding:10px 34px; background:var(--panel); border-radius:28px; box-shadow:0 8px 30px rgba(10,26,60,.06); }
.fit-list li{ display:flex; align-items:center; gap:18px; padding:20px 0; border-top:1px solid rgba(10,26,60,.08); font-size:21px; font-weight:500; line-height:1.3; color:var(--ink); }
.fit-list li:first-child{ border-top:0; }
.fit-list i{ flex:none; display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:13px; background:var(--accent); color:#fff; }
.fit-list i svg{ width:24px; height:24px; }
@media (max-width:1399px){ .fit-right{ width:min(100%,640px); margin-inline:auto; } }
@media (max-width:760px){ .fit-list{ padding:6px 22px; border-radius:22px; } .fit-list li{ font-size:18px; padding:16px 0; gap:14px; } .fit-list i{ width:38px; height:38px; border-radius:11px; } .fit-list i svg{ width:21px; height:21px; } }

/* ---- phone pass ---- */
@media (max-width:760px){
  /* final panel runs a little wider than the page gutter so the headline can be bigger */
  .fin{ margin-inline:-8px; padding:44px 20px; }
  .fin-h{ font-size:min(64px,calc((100vw - 40px) / 7.6)); }
}
/* stacked final panel: headline, line, the three steps, then the button underneath them */
@media (max-width:1100px){
  .fin{ gap:0; }
  .fin-l{ display:contents; }
  .fin-h{ order:1; }
  .fin-p{ order:2; margin:20px 0 40px; }
  .fin-r{ order:3; }
  .fin-cta{ order:4; margin-top:40px; }
}

/* ---- program carousel on phones ----
   Dots move above the cards, the next and previous cards peek in from the edges so it reads as a
   swipeable row, and each graphic is a short crop instead of the full-height panel. */
@media (max-width:760px){
  #program{ display:flex; flex-direction:column; }
  #program > *{ width:100%; }
  #program .prog-nav{ order:1; margin:26px 0 0; }
  #program .prog-viewport{ order:2; margin-top:10px; }
  #program .prog-points{ order:3; }
  .prog-slot{ width:calc(100vw - 84px); max-width:340px; }
  .prog-track{ gap:10px; }
  .prog-copy{ padding:24px 22px 20px; gap:12px; }
  .p-lift{ padding-bottom:14px; }
  .p-lift-v{ font-size:46px; }
  .prog-h{ font-size:27px; }
  .prog-b{ font-size:16px; line-height:1.5; }
  .prog-panel{ min-height:0; height:212px; padding:14px; overflow:hidden; position:relative;
    -webkit-mask-image:linear-gradient(to bottom,#000 72%,transparent 100%); mask-image:linear-gradient(to bottom,#000 72%,transparent 100%); }
  .p-col > .p-row, .p-col > .p-stat{ display:none; }
  .p-col > .p-rowcard ~ .p-rowcard{ display:none; }
  .p-grid2{ grid-template-columns:1fr 1fr; grid-template-rows:1fr; height:100%; }
  .p-grid2 > .p-tile:nth-child(n+3){ display:none; }
}
@media (max-width:760px){
  .prog-slot{ display:flex; }
  .prog-slide{ height:auto; flex:1; grid-template-rows:1fr auto; }
  .p-faces .pf:nth-child(n+6){ display:none; }
}

/* ---- "How to win" on phones: the same pinned, scroll-driven stage as desktop, tightened to fit one screen ---- */
@media (max-width:760px){
  #how.sec{ padding-top:48px; padding-bottom:48px; }
  .gs-sticky{ gap:18px; }
  .gs-left{ max-width:none; }
  .gs-left > .gs-h2{ display:none; }
  .gs-title-m{ display:block; text-align:center; margin-bottom:34px; }
  .gs-title-m .gs-h2{ margin:0; }
  .gs-steps{ gap:12px; min-height:236px; }
  .step-h{ font-size:20px; }
  .step-b{ font-size:16px; line-height:1.45; }
  .gs-hint{ display:none; }
  .gs-pills{ display:none; }
  .gs-card{ aspect-ratio:auto; min-height:0; height:316px; }
  .gs-pad,.gs-code{ padding:20px; gap:9px; }
  .gs-grid{ padding:18px; gap:10px; }
  .gs-kv{ padding:6px 0; font-size:14.5px; }
}

/* "Who it's for": the qualifying list sits to the right of the text on every screen wider than a phone;
   it only drops below the text on phones. */
@media (min-width:761px) and (max-width:1399px){
  .fit-wrap{ flex-direction:row; align-items:center; gap:48px; }
  .fit-left{ flex:1 1 0; min-width:0; width:auto; max-width:none; padding-right:0; align-items:flex-start; text-align:left; }
  .fit-right{ flex:none; width:min(44%,460px); margin:0; }
  .fit-list li{ font-size:19px; padding:17px 0; }
  .fit-h2{ font-size:clamp(34px,4.4vw,60px); }
}
@media (min-width:761px) and (max-width:1000px){ .fit-h2 .br-d{ display:none; } .fit-right{ width:40%; } }

/* phones: swipe sideways through the cards (vertical scrolling stays native), and no dimming on the neighbours */
.prog-viewport{ touch-action:pan-y; }
@media (max-width:760px){
  .prog-slide, .prog-slide:hover{ opacity:1; }
}

.yn-cta{ display:flex; justify-content:center; margin-top:40px; }
@media (max-width:760px){ .yn-cta{ margin-top:28px; } .yn-cta .btn{ width:100%; } }

/* "Takes 30 secs": a small, low-opacity line under the label inside the qualify buttons. The check and the
   label share one line; the small text sits below them with a clear gap. */
.btn:has(.btn-sub){ flex-direction:column; gap:9px; }
.btn-l{ display:inline-flex; align-items:center; gap:11px; }
.fit-cta .btn-l{ gap:9px; }
.btn-sub{ font-size:.58em; font-weight:500; letter-spacing:.01em; opacity:.6; line-height:1; }
.btn-sub--bonus{ display:inline-flex; align-items:center; gap:10px; opacity:1; white-space:nowrap; }
.btn-sub--bonus .bs-t{ opacity:.6; }
.btn-sub--bonus .bs-b{ display:inline-flex; align-items:center; gap:6px; color:#0055FF; font-weight:600; }
.btn-sub--bonus svg{ width:1.15em; height:1.15em; flex:none; }
.btn-light .btn-sub--bonus .bs-b{ color:#0055FF; }
.btn-xl .btn-sub{ font-size:16.2px; }
.fit-cta .btn-sub{ font-size:13.8px; }
.btn-xl:has(.btn-sub){ padding-top:17px; padding-bottom:17px; }

/* the four feature points have no rule above them on desktop and tablet; the phone's stacked list keeps its dividers */
@media (min-width:761px){
  .prog-point{ border-top:0; padding-top:0; }
}

/* "Adcellerate" in the How to win headline: the logo's light blue running to its red */
.gs-h2 b{
  color:transparent;
  background:linear-gradient(90deg,#0055FF 0%,#8CB2FF 50%,#0055FF 100%);
  background-size:900px 100%; background-repeat:repeat-x; background-position:calc(var(--gx,0) * -1px) 0;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* black announcement bar, fixed to the top of the landing page. The body is pushed down by its height. */
:root{ --topbar-h:0px; }
.topbar{ position:fixed; top:0; left:0; right:0; z-index:200; height:var(--topbar-h); display:flex; align-items:center; justify-content:center; gap:18px;
  background:var(--dark); color:#fff; font-size:17px; font-weight:500; letter-spacing:.02em; line-height:1; padding:0 16px; white-space:nowrap; }
.topbar-main{ display:inline-flex; align-items:center; gap:9px; font-family:var(--serif); font-size:1.08em; font-weight:500; letter-spacing:0; }
.topbar-main svg{ width:1.15em; height:1.15em; flex:none; }
.topbar-sub{ opacity:.5; }
body{ padding-top:var(--topbar-h); }
@media (max-width:760px){ :root{ --topbar-h:0px; } .topbar{ font-size:16px; gap:12px; } .topbar-main{ gap:7px; } }

/* "You stop" card: plain white, no outline (the "You get" card keeps its green fill and border) */
.yesno .card:not(.is-soft){ background:#fff; border-color:transparent; box-shadow:none; }
@media (max-width:370px){ .topbar{ font-size:14px; gap:8px; } }
@media (max-width:340px){ .topbar-sub{ display:none; } }

/* ======================================================================
   IntentWave for HighLevel: additions on top of the shared system
   ====================================================================== */
.btn-accent .ck{ stroke:var(--accent-bright); }
.btn-accent.btn-xl{ border-radius:9px; }

/* logo lockup: IntentWave | HighLevel */
.lockup{ display:inline-flex; align-items:center; gap:22px; }
.lockup img{ width:auto; }
.lockup .lk-iw{ height:34px; }
.lockup .lk-hl{ height:30px; }
.lockup i{ width:1px; height:30px; background:var(--line); }
.lockup.is-sm .lk-iw{ height:28px; } .lockup.is-sm .lk-hl{ height:25px; } .lockup.is-sm i{ height:24px; }
@media (max-width:760px){ .lockup{ gap:16px; } .lockup .lk-iw{ height:28px; } .lockup .lk-hl{ height:25px; } .lockup i{ height:24px; } }

/* the second option: a text link directly under the primary button */
.btn-text{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--sans); font-size:18px; font-weight:600; line-height:1; color:var(--accent);
  padding:14px 8px; border-radius:8px;
}
.btn-text svg{ width:18px; height:18px; flex:none; transition:transform .15s ease; }
.btn-text:hover{ color:#0042CC; }
.btn-text:hover svg{ transform:translateX(3px); }
.btn-text.is-light{ color:#fff; }
.btn-text.is-light:hover{ color:var(--accent-light); }
.cta-card{ display:flex; flex-direction:column; align-items:center; gap:2px; }
.cta-card .btn-text{ align-self:center; }
.cta-offer{ margin-top:8px; font-size:17px; color:var(--muted); text-align:center; }
.cta-offer b{ color:var(--ink); font-weight:600; }
.prog-head .btn-text{ margin-top:-14px; }
.yn-cta{ flex-direction:column; align-items:center; }
.yn-card{ margin:0 auto; max-width:420px; }
.fit-card{ margin:6px 0 0; align-items:flex-start; max-width:none; width:auto; }
.fit-card .btn{ width:auto; }
.fit-card .btn-text{ align-self:flex-start; padding-left:0; }
.fin-cta .btn-text{ align-self:flex-start; padding-left:0; }
.p-marks img{ height:22px; width:auto; }
.h2-who{ line-height:1.1; }
@media (min-width:1400px){ .fit-left{ width:auto; } }

/* no stranded last word in list rows and captions */
.li span,.fit-list span,.story-l{ text-wrap:balance; }

/* ======================================================================
   THE ROAD (ported from the IntentWave site, CtaSection.tsx)
   ====================================================================== */
#program{ padding-bottom:88px; }
.road{ position:relative; margin-top:64px; text-align:left; }
.road-line{ position:absolute; top:0; left:50%; width:100px; height:2560px; margin-left:-50px; pointer-events:none; z-index:1; display:none; }
.road-line svg{ position:absolute; inset:0; overflow:visible; }
.road-node{ position:absolute; z-index:2; width:48px; height:48px; margin:-24px 0 0 -24px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-family:var(--sans); font-size:17px; font-weight:600; background:#fff; color:#0042CC; box-shadow:0 0 0 4px #fff,0 8px 18px -8px rgba(10,26,60,.35); transition:background .25s ease,color .25s ease; }
.road-node.is-on{ background:var(--accent-bright); color:#fff; }
.road-head{ position:absolute; z-index:3; left:0; top:0; width:28px; height:28px; margin:-14px 0 0 -14px; border-radius:50%; background:var(--accent-bright);
  box-shadow:0 0 0 6px rgba(0,85,255,.18),0 0 24px 6px rgba(0,85,255,.3); }
.stop{ display:flex; flex-direction:column; gap:24px; margin-bottom:72px; }
.stop-copy{ display:flex; flex-direction:column; gap:12px; text-align:left; }
.rd-k{ font-family:var(--mono); font-size:13px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); }
.rd-h{ margin:0; max-width:12em; font-family:var(--serif); font-weight:500; font-size:31px; line-height:1.1; letter-spacing:-.012em; text-wrap:balance; color:var(--ink); }
.rd-p{ margin:0; max-width:24em; font-size:18px; line-height:1.55; color:var(--body); }
.stop-gap{ display:none; }
.stop-ui{ display:flex; min-width:0; }

/* the screens: a fixed-width card framed like the site's visitor slider */
.rs{ width:100%; max-width:502px; display:flex; flex-direction:column; overflow:hidden; border-radius:24px; background:#fff; box-shadow:0 30px 60px -28px rgba(6,23,63,.35),0 0 0 1px rgba(10,26,60,.08); font-family:var(--sans); color:var(--ink); }
.rs-bar{ display:flex; align-items:center; gap:7px; height:40px; padding:0 16px; background:var(--panel-2); border-bottom:1px solid var(--line-soft); }
.rs-bar i{ width:9px; height:9px; border-radius:50%; background:rgba(10,26,60,.14); }
.rs-bar span{ margin-left:8px; font-size:13px; color:var(--muted); }
.rs-top{ display:flex; align-items:center; gap:12px; min-height:46px; padding:8px 18px; background:var(--panel-2); border-bottom:1px solid var(--line-soft); font-size:13.5px; font-weight:500; color:var(--body); }
.rs-top img{ height:20px; width:auto; }
.rs-top > span:nth-of-type(1){ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rs-faint{ font-size:12.5px; color:var(--muted); font-weight:400; }
.rs-head{ display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px; padding:16px 20px 6px; }
.rs-title{ margin:0; font-size:18px; font-weight:600; letter-spacing:-.01em; }
.rs-badges{ display:grid; }
.rs-badge{ grid-area:1/1; display:inline-flex; align-items:center; gap:5px; align-self:center; justify-self:start; padding:4px 10px; border-radius:999px; background:var(--accent-bright); color:#fff; font-size:11.5px; font-weight:600; white-space:nowrap; }
.rs-badge svg{ width:12px; height:12px; }
.rs-badge.is-gray{ background:rgba(10,26,60,.08); color:var(--muted); }
.rs-body{ display:flex; flex-direction:column; gap:12px; padding:14px 16px 18px; }
.rs-layers{ display:grid; }
.rs-card{ display:flex; align-items:center; gap:14px; padding:14px 16px; border-radius:16px; background:var(--panel-2); box-shadow:0 0 0 1px var(--line-soft); }
.rs-layers .rs-card{ grid-area:1/1; }
.rs-av{ flex:none; width:48px; height:48px; border-radius:50%; object-fit:cover; background:var(--grey); }
.rs-av.is-sk{ background:var(--grey); }
.rs-lines{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.rs-lines b{ font-size:16px; font-weight:600; }
.rs-lines span{ font-size:13.5px; color:var(--muted); }
.sk{ display:block; height:10px; border-radius:6px; background:var(--grey); }
.sk.w60{ width:60%; } .sk.w80{ width:80%; } .sk.w40{ width:40%; }
.rs-anon .rs-lines{ flex:1; gap:9px; }
.rs-tiles{ display:flex; gap:10px; }
.rs-tile{ flex:1; min-width:0; height:66px; display:flex; flex-direction:column; justify-content:center; gap:6px; padding:0 12px; border-radius:12px; background:var(--panel-2); box-shadow:0 0 0 1px var(--line-soft); }
.rs-tl{ font-size:11.5px; color:var(--muted); }
.rs-tv{ position:relative; display:block; height:18px; }
.rs-tv .sk{ position:absolute; left:0; top:4px; width:56px; height:9px; }
.rs-tv b{ position:absolute; left:0; top:0; font-size:14px; line-height:18px; font-weight:600; white-space:nowrap; }
.rs-person{ display:flex; align-items:center; gap:14px; padding:6px 4px 10px; }
.rs-person .p-status{ margin-left:auto; }
.rs-kvs{ display:flex; flex-direction:column; }
.rs-kv{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:11px 4px; border-top:1px solid var(--line-soft); font-size:14.5px; }
.rs-kv span{ color:var(--muted); }
.rs-kv b{ font-weight:600; text-align:right; }
.rs-tag{ display:inline-flex; padding:2px 9px; border-radius:999px; background:var(--accent-soft); color:var(--accent); font-size:12.5px; font-weight:600; }
.rs-note{ display:flex; align-items:center; gap:8px; padding:11px 14px; border-radius:12px; background:var(--accent-soft); color:var(--accent); font-size:14px; font-weight:600; }
.rs-note svg{ width:16px; height:16px; flex:none; }
.rs-flow{ position:relative; padding-left:44px; gap:10px; }
.rs-flow-line{ position:absolute; left:26px; top:34px; bottom:34px; border-left:2px dashed var(--accent-soft); border-left-color:rgba(0,85,255,.25); }
.rs-step{ position:relative; display:grid; grid-template-columns:1fr auto; align-items:center; gap:2px 10px; padding:12px 14px; border-radius:14px; background:var(--panel-2); box-shadow:0 0 0 1px var(--line-soft); }
.rs-step p{ margin:0; font-size:14.5px; font-weight:600; }
.rs-step > span:not(.rs-dot){ font-size:12px; color:var(--muted); }
.rs-dot{ position:absolute; left:-26px; top:50%; width:13px; height:13px; margin-top:-6px; border-radius:50%; background:var(--accent-bright); box-shadow:0 0 0 4px #fff; }
.rs-mailbody{ grid-column:1 / -1; display:flex; flex-direction:column; align-items:flex-start; gap:4px; margin-top:8px; padding:12px 14px; border-radius:12px; background:#fff; box-shadow:0 0 0 1px var(--line-soft); }
.rs-mailbody b{ font-size:15px; font-weight:600; }
.rs-mailbody span{ font-size:13px; color:var(--muted); }
.rs-mailbody em{ margin-top:6px; padding:8px 14px; border-radius:999px; background:var(--dark); color:#fff; font-style:normal; font-size:12.5px; font-weight:500; }
.rs-total{ display:flex; flex-direction:column; gap:4px; padding:10px 4px 4px; }
.rs-total span{ font-size:13.5px; color:var(--muted); }
.rs-total b{ font-family:var(--sans); font-size:46px; line-height:1; font-weight:600; letter-spacing:-.03em; color:var(--accent); font-variant-numeric:tabular-nums; }
.rs-order .rs-lines{ flex:1; }
.rs-order em{ font-style:normal; font-size:17px; font-weight:600; font-variant-numeric:tabular-nums; }
.rs-ok{ flex:none; display:flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%; background:var(--accent-bright); color:#fff; }
.rs-ok svg{ width:19px; height:19px; }
.road-cta{ margin-top:8px; display:flex; justify-content:center; }

@media (min-width:1100px){
  .road-line{ display:block; }
  .road.is-static .road-line{ display:none; }
  .road:not(.is-static) .stop{ display:grid; grid-template-columns:1fr 100px 1fr; align-items:center; gap:0; height:640px; margin-bottom:0; }
  .road:not(.is-static) .stop-gap{ display:block; order:2; }
  .road:not(.is-static) .stop-copy{ order:1; align-items:flex-end; justify-self:end; text-align:right; padding-right:32px; }
  .road:not(.is-static) .stop-ui{ order:3; justify-content:flex-start; padding-left:32px; }
  .road:not(.is-static) .stop.is-left .stop-copy{ order:3; align-items:flex-start; justify-self:start; text-align:left; padding:0 0 0 32px; }
  .road:not(.is-static) .stop.is-left .stop-ui{ order:1; justify-content:flex-end; padding:0 32px 0 0; }
  .rd-h{ font-size:40px; }
}
@media (max-width:1099px){ .road-line{ display:none; } }
@media (max-width:760px){
  #program{ display:block; padding-bottom:56px; }
  .road{ margin-top:40px; }
  .stop{ margin-bottom:56px; }
  .rd-h{ font-size:27px; }
  .rd-p{ font-size:17px; }
  .rs-total b{ font-size:38px; }
}

/* ======================================================================
   HIGHLEVEL THEME: Poppins, the navy, and the three arrow colours
   (yellow #FBBF24, blue #2896FB, green #17D94B) mixed with IntentWave blue
   ====================================================================== */
:root{ --ghl-navy:#03101D; --ghl-sky:#2896FB; --ghl-yellow:#FBBF24; --ghl-green:#17D94B; }
html{ -webkit-text-size-adjust:100%; }
body{ -webkit-tap-highlight-color:transparent; font-size:16px; }
.serif,h1,h2,h3,.h1,.h2,.h3,.hood-h,.offer-h,.lede-serif,.closer,.fin-h,.rd-h,.prog-h{ letter-spacing:-.025em; }

/* dark hero */
.hero .h1{ color:#fff; font-weight:600; font-size:54px; line-height:1.1; letter-spacing:-.03em; }
.hero .h1 b{ color:var(--ghl-sky); font-weight:600; }
.hero .sub{ color:rgba(255,255,255,.78); }
.hero .lockup i{ background:rgba(255,255,255,.28); }
.hero .btn-text{ color:#fff; }
.hero .btn-text:hover{ color:var(--ghl-sky); }
.hero .brands-k{ color:rgba(255,255,255,.55); }
.hero .brands-track img{ filter:grayscale(1) brightness(0) invert(1); opacity:.5; }
.hero-lines path{ stroke-opacity:.22 !important; }
.hero::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:4px; z-index:2; background:linear-gradient(90deg,var(--ghl-yellow),var(--ghl-sky) 50%,var(--ghl-green)); }

/* the three arrows, as colour: lift icons and kickers */
.lift:nth-child(1) .lift-ic{ color:var(--ghl-yellow); opacity:1; }
.lift:nth-child(2) .lift-ic{ color:var(--ghl-sky); opacity:1; }
.lift:nth-child(3) .lift-ic{ color:var(--ghl-green); opacity:1; }
.pill{ background:var(--ghl-navy); }
.pill.is-green{ background:var(--accent-bright); }
.fin{ background:var(--ghl-navy); position:relative; }
.fin::before{ content:""; position:absolute; left:68px; right:68px; top:0; height:4px; border-radius:0 0 4px 4px; background:linear-gradient(90deg,var(--ghl-yellow),var(--ghl-sky) 50%,var(--ghl-green)); }
.fin-h b,.fin-n,.fin-n{ color:var(--ghl-sky); }
.fin-n{ box-shadow:inset 0 0 0 2px var(--ghl-sky); }
.fin-steps::before{ border-left-color:rgba(40,150,251,.45); }

/* HighLevel-style app bars on the road screens */
.rs-top{ background:var(--ghl-navy); border-bottom:0; color:#fff; }
.rs-top .rs-faint{ color:rgba(255,255,255,.62); }
.rs-top img{ height:18px; }
.rs-bar{ background:#F1F4F9; }

/* Poppins is wider than the old face: re-size the big headings */
.h2{ font-size:46px; line-height:1.14; font-weight:600; }
.h2-who{ font-size:40px; }
.fin-h{ font-size:46px; line-height:1.1; font-weight:600; }
.closer{ font-size:40px; line-height:1.18; font-weight:500; }
.prog-lede,.lede{ font-size:18px; }
.rd-h{ font-size:34px; font-weight:600; }
.lift-v,.story-v,.p-lift-v{ font-weight:600; }
.btn,.btn-text{ font-family:var(--sans); }
.btn-xl{ font-weight:600; font-size:19px; }
.btn-sub{ font-weight:500; }
.brands-k{ font-family:var(--sans); font-weight:600; letter-spacing:.14em; }

/* phone sticky sign-up bar */
.m-bar{ display:none; }
@media (max-width:760px){
  .m-bar{ display:block; position:fixed; left:0; right:0; bottom:0; z-index:300; padding:10px 16px calc(10px + env(safe-area-inset-bottom)); background:rgba(255,255,255,.96); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); box-shadow:0 -1px 0 rgba(10,26,60,.08),0 -10px 30px -12px rgba(10,26,60,.2); transform:translateY(110%); transition:transform .3s ease; }
  .m-bar.is-on{ transform:none; }
  .m-bar .btn{ display:flex; flex-direction:column; gap:3px; width:100%; min-height:56px; padding:9px 16px; border-radius:12px; font-size:17px; font-weight:600; line-height:1.1; }
  .m-bar .btn small{ font-size:12.5px; font-weight:500; opacity:.8; }
  body{ padding-bottom:0; }

}
@media (prefers-reduced-motion:reduce){ .m-bar{ transition:none; } }

/* ---------- phone: Poppins-sized headlines (widest hand-broken line in ems, measured), touch targets ---------- */
@media (max-width:760px){
  .hero .h1{ font-size:min(54px,calc((100vw - 40px) / 8.5)); white-space:nowrap; line-height:1.12; }
  .h2{ font-size:min(46px,calc((100vw - 40px) / 9.2)); line-height:1.15; }
  .h2-who{ font-size:min(40px,calc((100vw - 40px) / 10.3)); }
  .fin-h{ font-size:min(46px,calc((100vw - 64px) / 6.9)); }
  .closer{ font-size:28px; line-height:1.22; }
  .rd-h{ font-size:26px; }
  .sub,.hero .sub{ font-size:17px; line-height:1.6; }
  .lede,.prog-lede{ font-size:17px; }
  .btn-xl{ min-height:60px; border-radius:12px; }
  .btn-text{ min-height:48px; padding:14px 10px; font-size:17px; }
  .lift-v{ font-size:min(64px,24cqw); }
  .hero{ padding:48px 20px; }
}

.fin-st,.fin-sd{ text-wrap:balance; }

.story-photo.is-plain{ background:var(--dark); }
.story-photo.is-plain .story-scrim{ display:none; }
.story-photo.is-plain .story-logo{ width:72%; height:auto; max-height:48px; }
.lift-v{ font-size:min(56px,18.5cqw); }

/* ---------- why agencies add it ---------- */
.lift .lift-top{ display:block; }
.lift .lift-ic{ width:60px; height:60px; }
.lift-k{ margin-top:18px; }
.stage-top .lifts{ margin-top:48px; }
.why-note{ display:flex; align-items:center; justify-content:center; gap:10px; max-width:640px; margin:36px auto 0; font-size:16px; line-height:1.5; color:var(--body); text-align:left; }
.why-note svg{ flex:none; width:22px; height:22px; color:var(--accent); }
.road-stops .stop:last-child{ margin-bottom:0; }
.road{ padding-bottom:8px; }

/* ---------- the flow on phones and tablets: a compact four-step list, no screens ---------- */
@media (max-width:1099px){
  .stop-ui{ display:none; }
  .road{ margin-top:36px; }
  .road-stops{ position:relative; counter-reset:step; display:flex; flex-direction:column; gap:30px; }
  .road-stops::before{ content:""; position:absolute; left:19px; top:22px; bottom:22px; width:3px; border-radius:3px; background:linear-gradient(180deg,var(--ghl-yellow),var(--ghl-sky) 50%,var(--ghl-green)); }
  .stop{ counter-increment:step; margin:0; gap:0; }
  .stop-copy{ position:relative; padding-left:64px; min-height:42px; gap:6px; }
  .stop-copy::before{ content:counter(step); position:absolute; left:0; top:0; width:42px; height:42px; border-radius:50%; background:var(--accent-bright); color:#fff; display:flex; align-items:center; justify-content:center; font-size:17px; font-weight:600; box-shadow:0 0 0 5px #fff; }
  .rd-k{ display:none; }
  .rd-h{ font-size:22px; line-height:1.25; max-width:none; }
  .rd-p{ font-size:16px; line-height:1.55; max-width:none; }
}
@media (max-width:760px){
  .why-note{ font-size:15px; align-items:flex-start; }
  .lift .lift-ic{ width:52px; height:52px; }
}

/* ---------- phone: keep it short ---------- */
@media (max-width:760px){
  .stage-top .lifts{ margin-top:32px; gap:12px; }
  .lift{ display:grid; grid-template-columns:44px 1fr; column-gap:16px; align-items:start; padding:20px 18px; }
  .lift .lift-top{ grid-row:1 / 3; }
  .lift .lift-ic{ width:40px; height:40px; }
  .lift-k{ margin:0; font-size:19px; text-align:left; }
  .lift-b{ margin:6px 0 0; font-size:16px; }
  .why-note{ margin-top:24px; }
  .story-photo{ aspect-ratio:16 / 7; }
  .story-body{ padding:20px; gap:16px; }
  .story-stats{ gap:12px; }
  .story-sum{ padding-top:16px; font-size:16px; }
  .stories{ margin-top:32px; gap:16px; }
  #results.sec{ padding-bottom:48px; }
  .fin-r{ display:none; }
  .fin-p{ margin-bottom:28px; }
  .fin-cta{ margin-top:0; }
}

/* ---------- how it works: an icon on every step ---------- */
.rd-ic{ display:inline-flex; align-items:center; justify-content:center; width:52px; height:52px; border-radius:15px; background:var(--accent-soft); color:var(--accent); margin-bottom:4px; }
.rd-ic svg{ width:28px; height:28px; }
@media (max-width:1099px){
  .road-stops{ gap:14px; }
  .road-stops::before{ display:none; }
  .stop-copy{ display:grid; grid-template-columns:52px 1fr; column-gap:16px; row-gap:2px; padding:18px; padding-left:18px; min-height:0; border-radius:20px; background:var(--panel-2); box-shadow:0 0 0 1px var(--ring); }
  .stop-copy::before{ display:none; }
  .rd-ic{ grid-row:1 / 4; margin:0; }
  .rd-k{ display:block; font-size:12px; }
  .rd-h{ font-size:20px; line-height:1.25; margin-top:1px; }
  .rd-p{ font-size:16px; margin-top:4px; }
}

/* step blocks: icon on top, not beside the text */
@media (max-width:1099px){
  .stop-copy{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; padding:20px; }
  .rd-ic{ margin:0 0 10px; }
  .rd-h{ margin-top:2px; }
}
/* ---------- step graphics (phones and tablets) ----------
   Built like the IntentWave site's feature panels: a square pale-blue panel with a soft white centre, white
   cards in Open Runde, a connector line and pill between them. Each is drawn on a 340px artboard that the
   script scales to the square, and builds in step by step when it scrolls into view. */
@font-face{ font-family:"Open Runde"; src:url("/assets/fonts/OpenRunde-Regular.woff2") format("woff2"); font-weight:400; font-display:swap; }
@font-face{ font-family:"Open Runde"; src:url("/assets/fonts/OpenRunde-Medium.woff2") format("woff2"); font-weight:500; font-display:swap; }
@font-face{ font-family:"Open Runde"; src:url("/assets/fonts/OpenRunde-Semibold.woff2") format("woff2"); font-weight:600; font-display:swap; }
@font-face{ font-family:"Open Runde"; src:url("/assets/fonts/OpenRunde-Bold.woff2") format("woff2"); font-weight:700; font-display:swap; }
.rg{ display:none; }
@media (max-width:1099px){
  .stop-copy{ padding:12px 12px 22px; }
  .stop-copy > .rd-k,.stop-copy > .rd-h,.stop-copy > .rd-p{ padding:0 8px; }
  .stop-copy .rd-ic{ display:none; }
  .rg{ display:block; position:relative; align-self:stretch; aspect-ratio:1 / 1; margin:0 0 18px; overflow:hidden; border-radius:22px; background:#D3E1FB; }
  .rg::before{ content:""; position:absolute; inset:0; background:radial-gradient(58% 52% at 50% 46%,rgba(255,255,255,.45),transparent 72%); }
  .art{ position:absolute; left:0; top:0; width:340px; height:340px; transform-origin:0 0; font-family:"Open Runde",ui-sans-serif,system-ui,sans-serif; color:#06173F; text-align:left; }
  .art img{ display:block; }
  .art b{ font-weight:600; }
  .art em{ font-style:normal; }
  .art svg{ display:block; }
  .ic{ position:absolute; overflow:hidden; border-radius:20px; background:#fff;
    box-shadow:0 0 0 1px rgba(0,0,0,.06),0 20px 20px -10px rgba(0,0,0,.07),0 10px 10px -5px rgba(0,0,0,.04),0 5px 5px -2.5px rgba(0,0,0,.03),0 2px 2px -1px rgba(0,0,0,.03); }
  .a-pl{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
  .a-pl b{ font-size:14px; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .a-pl em{ font-size:12px; line-height:1.3; color:#6F6F6F; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .bdg{ display:inline-flex; align-items:center; gap:4px; padding:3px 9px; border-radius:999px; background:#0055FF; color:#fff; font-size:11px; font-weight:600; white-space:nowrap; }
  .bdg svg{ width:11px; height:11px; }
  .bdg.is-gray{ background:rgba(0,0,0,.06); color:#6F6F6F; }
  .bdg.is-sm{ padding:2px 7px; font-size:10px; }
  .sk{ display:block; height:9px; border-radius:6px; background:#EEEEEE; }

  /* 1 · visitor profile */
  .a-bar{ display:flex; align-items:center; justify-content:space-between; height:42px; padding:0 14px; border-bottom:1px solid rgba(0,0,0,.05); }
  .a-url{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:500; color:#585858; }
  .a-url svg{ width:14px; height:14px; color:#0055FF; }
  .a-store{ display:inline-flex; align-items:center; gap:7px; font-size:11.5px; color:#585858; }
  .a-store i{ display:flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:#DFF2E1; color:#2F6B3A; font-style:normal; font-size:9.5px; font-weight:700; }
  .a-head{ display:flex; align-items:center; gap:9px; padding:12px 16px 10px; }
  .a-head > b{ font-size:16px; letter-spacing:-.01em; }
  .a-sw{ display:grid; justify-items:start; align-items:center; }
  .a-sw > *{ grid-area:1 / 1; }
  .a-box{ margin:0 12px 10px; border-radius:16px; box-shadow:0 0 0 1px rgba(0,0,0,.06); }
  .a-prof{ display:flex; align-items:center; gap:12px; padding:12px 14px; }
  .a-avw{ position:relative; flex:none; width:46px; height:46px; }
  .a-av{ width:46px; height:46px; border-radius:50%; object-fit:cover; }
  .a-avw .a-av{ position:absolute; inset:0; }
  .a-av.is-sk{ background:#EEEEEE; }
  .a-avok{ position:absolute; right:-3px; bottom:-3px; display:flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:50%; background:#0055FF; color:#fff; box-shadow:0 0 0 2px #fff; }
  .a-avok svg{ width:10px; height:10px; }
  .a-prof .a-pl{ gap:5px; }
  .a-prof .a-sw b{ font-size:15px; }
  .a-prof .a-sw em{ font-size:12px; color:#6F6F6F; }
  .a-ok{ align-self:flex-start; display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:999px; background:#ECFDF5; color:#047857; font-size:10.5px; font-weight:500; box-shadow:0 0 0 1px rgba(167,243,208,.7); }
  .a-ok svg{ width:10px; height:10px; }
  .a-list{ padding:10px 14px 4px; }
  .a-lh{ display:block; margin-bottom:4px; font-size:13px; }
  .a-it{ display:flex; align-items:center; gap:11px; padding:7px 0; }
  .a-it img{ flex:none; width:40px; height:40px; border-radius:10px; object-fit:cover; background:#F7F7F7; box-shadow:0 0 0 1px rgba(0,0,0,.05); }
  .a-it .a-pl b{ font-size:13px; }
  .a-it .a-pl em{ font-size:11.5px; }

  /* shared: top card, connector, pill */
  .a-top{ display:flex; align-items:center; gap:12px; padding:14px; }
  .a-top .a-av{ width:44px; height:44px; flex:none; }
  .a-nm{ display:flex; align-items:center; gap:7px; }
  .a-thumb{ flex:none; display:flex; width:50px; height:50px; padding:3px; border-radius:13px; border:1.5px dashed #0055FF; }
  .a-thumb img{ width:100%; height:100%; border-radius:9px; object-fit:cover; background:#F7F7F7; }
  .a-line{ position:absolute; left:169px; width:2px; background:#BDD3FF; }
  .a-pw{ position:absolute; left:0; right:0; display:flex; justify-content:center; z-index:2; }
  .a-pill{ display:inline-flex; align-items:center; gap:7px; height:28px; padding:0 12px; border-radius:999px; background:#fff; font-size:11.5px; font-weight:500; color:#06173F; box-shadow:0 0 0 1px rgba(0,0,0,.07),0 4px 10px -4px rgba(6,23,63,.18); white-space:nowrap; }
  .a-pill img{ height:12px; width:auto; }
  .a-pill svg{ width:14px; height:14px; color:#0055FF; }
  .a-tile{ flex:none; display:flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:12px; background:#EEF4FF; color:#0055FF; }
  .a-tile svg{ width:22px; height:22px; }
  .a-top .a-pl em{ font-size:11.5px; }
  .a-live{ flex:none; display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:999px; background:#ECFDF5; color:#047857; font-size:10.5px; font-weight:600; box-shadow:0 0 0 1px rgba(167,243,208,.7); }
  .a-live i{ width:6px; height:6px; border-radius:50%; background:#10B981; animation:a-pulse 1.8s ease-in-out infinite; }
  @keyframes a-pulse{ 50%{ opacity:.35; } }

  /* 2 · HighLevel contact */
  .hl-h{ display:flex; align-items:center; gap:9px; height:44px; padding:0 16px; border-bottom:1px solid rgba(0,0,0,.05); font-size:13px; font-weight:600; }
  .hl-h img{ height:15px; width:auto; }
  .hl-h span{ padding-left:9px; border-left:1px solid rgba(0,0,0,.1); }
  .hl-h em{ margin-left:auto; font-size:11.5px; font-weight:400; color:#6F6F6F; }
  .hl-row{ display:flex; align-items:center; gap:11px; padding:12px 16px 10px; }
  .hl-row .a-av{ width:40px; height:40px; }
  .hl-kv{ display:flex; align-items:center; justify-content:space-between; margin:0 16px; padding:10px 0; border-top:1px solid rgba(0,0,0,.06); font-size:12.5px; }
  .hl-kv span{ color:#6F6F6F; }
  .hl-kv b{ font-size:12.5px; }
  .a-tag{ padding:2px 9px; border-radius:999px; background:#EEF4FF; color:#0055FF; font-size:11px !important; }

  /* 3 · email */
  .m-h{ display:flex; align-items:center; gap:10px; padding:14px 16px 0; }
  .m-av{ flex:none; display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; background:#1E3A2F; color:#fff; font-size:11px; font-weight:700; }
  .m-h .a-pl b{ font-size:13px; }
  .m-h .a-pl em{ font-size:11px; }
  .m-t{ font-size:11px; color:#9F9F9F; }
  .m-s{ display:block; padding:9px 16px 11px; font-size:14px; line-height:1.3; letter-spacing:-.01em; }
  .m-body{ position:absolute; left:0; right:0; top:100px; bottom:0; padding:12px 14px 0; background:#F1F2F5; }
  .m-in{ display:flex; flex-direction:column; align-items:center; padding:14px 18px 18px; border-radius:14px 14px 0 0; background:#fff; text-align:center; }
  .m-brand{ font-size:9px; font-weight:600; letter-spacing:.3em; }
  .m-img{ display:flex; justify-content:center; width:100%; height:62px; margin-top:10px; border-radius:10px; background:#E6E4DF; }
  .m-img img{ height:100%; width:auto; object-fit:contain; }
  .m-hd{ margin-top:10px; font-size:15px; letter-spacing:-.01em; }
  .m-btn{ display:flex; align-items:center; justify-content:center; width:100%; height:36px; margin-top:11px; border-radius:999px; background:#06173F; color:#fff; font-size:12px; font-weight:500; }

  /* 4 · results */
  .a-win{ padding:16px 16px 14px; }
  .w-h{ display:flex; align-items:center; justify-content:space-between; }
  .w-h em{ font-size:12.5px; color:#6F6F6F; }
  .w-big{ display:block; margin:6px 0 10px; font-size:46px; line-height:1; font-weight:700 !important; letter-spacing:-.035em; color:#0055FF; font-variant-numeric:tabular-nums; }
  .w-row{ display:flex; align-items:center; gap:11px; padding:11px 0; border-top:1px solid rgba(0,0,0,.06); }
  .w-ic{ flex:none; display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; background:#0055FF; color:#fff; }
  .w-ic svg{ width:16px; height:16px; }
  .w-cal{ flex:none; display:flex; flex-direction:column; align-items:center; width:36px; height:38px; overflow:hidden; border-radius:9px; background:#fff; box-shadow:0 0 0 1px rgba(0,0,0,.12); font-size:15px; font-weight:700; line-height:1.15; }
  .w-cal i{ align-self:stretch; padding:1px 0; margin-bottom:2px; background:#06173F; color:#fff; font-style:normal; font-size:8px; font-weight:600; letter-spacing:.08em; text-align:center; }
  .w-r{ flex:none; display:flex; flex-direction:column; align-items:flex-end; gap:3px; }
  .w-r b{ font-size:14px; font-variant-numeric:tabular-nums; }
  .w-r i{ padding:1px 7px; border-radius:999px; font-style:normal; font-size:10px; font-weight:600; }
  .w-paid{ background:#ECFDF5; color:#047857; }
  .w-book{ background:#EEF4FF; color:#0055FF; }
  .w-btn{ display:flex; align-items:center; justify-content:center; gap:6px; height:40px; margin-top:6px; border-radius:12px; background:#06173F; color:#fff; font-size:12.5px; font-weight:500; }
  .w-btn svg{ width:14px; height:14px; }

  /* the build: hidden until the panel scrolls into view, then each piece comes in on its delay */
  .rg [data-a]{ opacity:0; transform:translateY(10px); transition:opacity .45s ease,transform .6s cubic-bezier(.22,1,.36,1); transition-delay:calc(var(--d,0) * 1s); }
  .rg [data-a="pop"]{ transform:scale(.7); }
  .rg [data-a="grow"]{ opacity:1; transform:scaleY(0); transform-origin:top; }
  .rg [data-a="out"]{ opacity:1; transform:none; }
  .rg.is-play [data-a]{ opacity:1; transform:none; }
  .rg.is-play [data-a="out"]{ opacity:0; }
}
@media (max-width:1099px) and (prefers-reduced-motion:reduce){
  .rg [data-a]{ transition:none; opacity:1; transform:none; }
  .rg [data-a="out"]{ opacity:0; }
  .a-live i{ animation:none; }
}
/* tablets: two steps per row so each square stays a sensible size */
@media (min-width:600px) and (max-width:1099px){
  .road-stops{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
}

/* ---------- 2026-10-24 pass: centred final panel, bigger step titles ---------- */
/* Final panel: one centred column, button + webinar link exactly as in the hero, the three
   setup steps as a row underneath (hidden on phones, as before). */
.fin{ grid-template-columns:1fr; justify-items:center; gap:0; text-align:center; padding:80px 64px 72px; }
.fin-l{ display:flex; flex-direction:column; align-items:center; }
.fin-h{ max-width:none; }
.fin-p{ max-width:34em; margin:20px auto 0; }
.fin-cta{ width:100%; max-width:440px; margin:36px auto 0; }
.fin-cta .btn-text{ align-self:center; padding-left:10px; }
.fin-r{ width:100%; max-width:960px; margin-top:56px; padding-top:48px; border-top:1px solid rgba(255,255,255,.12); }
.fin-steps{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; }
.fin-steps::before{ display:none; }
.fin-step{ flex-direction:column; align-items:center; gap:16px; }
.fin-st{ font-size:22px; font-weight:600; margin:0; }
.fin-sd{ font-size:17px; margin-top:8px; }
@media (max-width:1100px){
  .fin-l{ display:flex; }
  .fin-p{ margin:20px auto 0; }
  .fin-cta{ margin-top:32px; }
  .fin-r{ order:0; }
}
@media (max-width:760px){
  .fin{ padding:48px 20px 40px; }
  .fin-h{ font-size:min(46px,calc((100vw - 64px) / 9)); }
  .fin-p{ margin:16px auto 0; }
  .fin-cta{ margin-top:28px; }
}

/* step titles a size up */
.rd-h{ font-size:40px; }
@media (max-width:1099px){ .rd-h{ font-size:26px; line-height:1.2; } }
@media (max-width:760px){ .rd-h{ font-size:25px; } }

/* desktop step graphics: the window sits in a square pale-blue panel, same as the phone graphics */
.rs-sq{ display:none; }
@media (min-width:1100px){
  .rs-sq{ position:relative; display:flex; align-items:center; justify-content:center; width:min(100%,500px); aspect-ratio:1 / 1; padding:30px; border-radius:28px; background:#D3E1FB; }
  .rs-sq::before{ content:""; position:absolute; inset:0; border-radius:inherit; background:radial-gradient(58% 52% at 50% 46%,rgba(255,255,255,.45),transparent 72%); }
  .rs-sq .rs{ position:relative; max-width:100%; }
}
@media (max-width:1099px){ .rs-sq{ display:contents; } }

/* success stories on phones: no forced headline breaks; each stat is one row, figure left and label right */
@media (max-width:760px){
  .stories-h2{ max-width:none; text-wrap:balance; }
  .story-stats{ grid-template-columns:1fr; gap:0; }
  .story-stats > div{ display:grid; grid-template-columns:132px 1fr; align-items:center; column-gap:14px; padding:14px 0; border-top:1px solid rgba(10,26,60,.08); }
  .story-stats > div:first-child{ border-top:0; padding-top:0; }
  .story-v{ font-size:28px; }
  .story-l{ margin:0; font-size:15px; line-height:1.35; }
  .story-sum{ padding-top:16px; }
}

/* review fixes: step copy left-aligned on both sides of the road, no stub last lines, bigger phone step titles,
   no accent strip on the final panel, consistent section pills, 16px story labels */
@media (min-width:1100px){
  .road:not(.is-static) .stop-copy{ text-align:left; align-items:flex-start; }
}
.rd-p,.lift-b,.lede,.prog-lede,.story-sum,.fin-p,.sub,.why-note{ text-wrap:pretty; }
.fin-p{ hyphens:manual; }
.fin::before{ display:none; }
@media (max-width:760px){
  .rd-h{ font-size:28px; }
  .story-l{ font-size:16px; }
}