/* Sales deck slides: shared by index.html (pay per meeting, /), fixed.html (fixed price, /fixed)
   and revops.html (Inbound, CRM & RevOps, /revops; its own components are at the end of this file).
   Page chrome (nav, footer, tokens) comes from assets/ad-pages.css, which is a copy of
   integration/gtm_radar_shared/assets/. This file lives only here. */
:root{--wrap:1280px}  /* nav and footer line up with the slides */
.deck{max-width:var(--wrap); margin:0 auto; padding:14px var(--pad) 0; display:flex; flex-direction:column; gap:22px}
.slide{--u:1cqw; position:relative; width:100%; aspect-ratio:16/9; container-type:inline-size; overflow:hidden;
  border:1px solid var(--line); border-radius:14px; background:var(--bg-2); scroll-margin-top:84px; color:var(--muted)}
.slide::before{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(50% 46% at 50% 58%, #151813 0%, rgba(8,8,7,0) 100%)}
.in{position:absolute; inset:0; padding:calc(var(--u)*4.3) calc(var(--u)*5.2) calc(var(--u)*6.1); display:flex; flex-direction:column}
.sfoot{position:absolute; left:calc(var(--u)*5.2); right:calc(var(--u)*5.2); bottom:calc(var(--u)*2.2);
  display:flex; justify-content:space-between; align-items:center; font-family:var(--sans); font-size:calc(var(--u)*1.2); color:var(--muted)}
.wm{display:flex; align-items:center; gap:calc(var(--u)*.7); color:var(--ink); font-weight:500; font-size:calc(var(--u)*1.3); letter-spacing:-.02em}
.wm img{height:calc(var(--u)*1.9); width:calc(var(--u)*1.9)}

.slabel{font-family:var(--sans); font-size:calc(var(--u)*1.2); font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted-2); margin-bottom:calc(var(--u)*1.3)}
.slide h1{font-size:calc(var(--u)*5.7); line-height:1.02; letter-spacing:-.04em; text-wrap:balance}
.slide h2{font-size:calc(var(--u)*3.5); line-height:1.07; letter-spacing:-.032em; max-width:27ch; text-wrap:balance}
.slede{font-size:calc(var(--u)*1.8); line-height:1.45; color:var(--muted); margin-top:calc(var(--u)*1.9); max-width:32ch}
.ts{font-family:var(--sans); font-size:calc(var(--u)*1.2); line-height:1.45}
.tb{font-size:calc(var(--u)*1.5); line-height:1.42}
.tm{font-size:calc(var(--u)*1.85); line-height:1.25; letter-spacing:-.015em}
.i1{color:var(--ink)} .i2{color:var(--ink-2)} .ac{color:var(--accent)}
.stage{flex:1; min-height:0; display:flex; flex-direction:column; justify-content:center; margin-top:calc(var(--u)*2.1); gap:calc(var(--u)*1.5)}
.pan{border:1px solid var(--line); border-radius:calc(var(--u)*1); min-width:0;
  background:linear-gradient(180deg,var(--card) 0%,var(--card-2) 100%)}
.pan.on{border-color:rgba(0,229,255,.4); background:linear-gradient(180deg,#0b1718 0%,#0c0c0b 100%)}
.pad{padding:calc(var(--u)*1.8) calc(var(--u)*2)}
.g2,.g3,.g4,.g5{display:grid; gap:calc(var(--u)*1.4)}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))} .g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))} .g5{grid-template-columns:repeat(5,minmax(0,1fr))}
.stag{display:inline-flex; align-items:center; padding:calc(var(--u)*.5) calc(var(--u)*1.3); border-radius:99px; white-space:nowrap;
  border:1px solid rgba(0,229,255,.4); background:rgba(0,229,255,.08); color:var(--accent);
  font-family:var(--sans); font-size:calc(var(--u)*1.3); font-weight:500}
.schip{display:inline-flex; align-items:center; padding:calc(var(--u)*.45) calc(var(--u)*1.1); border-radius:99px; white-space:nowrap;
  border:1px solid var(--line-2); background:rgba(255,255,255,.02); color:var(--ink-2); font-family:var(--sans); font-size:calc(var(--u)*1.2)}
.rn{font-family:var(--sans); font-size:calc(var(--u)*1.2); letter-spacing:.1em; color:var(--muted-2)}
.snum{font-family:var(--tight); font-weight:400; color:var(--ink); letter-spacing:-.035em; line-height:1; font-variant-numeric:tabular-nums}

/* 1 cover */
.s-cover::after{content:""; position:absolute; left:50%; top:-34%; width:90%; height:90%; transform:translateX(-50%); pointer-events:none;
  background:radial-gradient(closest-side, rgba(0,229,255,.14), rgba(0,229,255,.03) 55%, transparent 75%); filter:blur(24px)}
.cover{display:grid; grid-template-columns:1.08fr .92fr; gap:calc(var(--u)*4.4); align-items:center; padding-bottom:calc(var(--u)*5); z-index:1}
.tags{display:flex; gap:calc(var(--u)*.8); flex-wrap:wrap; margin-top:calc(var(--u)*3)}
.cal{padding:calc(var(--u)*1.6)}
.cal-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:calc(var(--u)*1.2)}
.cal-grid{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:calc(var(--u)*.6)}
.cal-day{text-align:center; font-family:var(--sans); color:var(--muted); font-size:calc(var(--u)*1.2); padding-bottom:calc(var(--u)*.3)}
.slot{min-height:calc(var(--u)*3.5); border-radius:calc(var(--u)*.6); background:#121211; border:1px solid var(--line)}
.slot.b{background:#1a1a19; border-color:var(--line-2)}
.slot.m{border-color:rgba(0,229,255,.45); background:rgba(0,229,255,.08); padding:calc(var(--u)*.5) calc(var(--u)*.6);
  font-family:var(--sans); font-size:calc(var(--u)*1.2); font-weight:500; line-height:1.2; color:var(--accent);
  box-shadow:0 0 calc(var(--u)*1.4) rgba(0,229,255,.12)}
.slot.m small{display:block; font-size:1em; font-weight:400; color:var(--ink-2); margin-top:.15em}

/* 2 fit */
.fit{display:flex; flex-direction:column; gap:calc(var(--u)*1.4)}
.fit{padding:calc(var(--u)*2.2) calc(var(--u)*2.4)}
.fit .row{display:flex; align-items:center; gap:calc(var(--u)*1.2); font-size:calc(var(--u)*2.05)}
.fit > p{font-size:calc(var(--u)*1.5); font-family:var(--sans); font-weight:500; letter-spacing:.14em; text-transform:uppercase; font-size:calc(var(--u)*1.2)}
.ico{flex:none; width:calc(var(--u)*2.5); height:calc(var(--u)*2.5); border-radius:calc(var(--u)*.6); display:grid; place-items:center;
  background:#171716; border:1px solid var(--line-2)}
.ico svg{width:52%; height:52%}
.pan.on .ico{border-color:rgba(0,229,255,.4); background:rgba(0,229,255,.08)}

/* 3 results */
.case{overflow:hidden; display:flex; flex-direction:column}
.case button{all:unset; cursor:pointer; position:relative; display:block; aspect-ratio:16/9; background:#000 center/cover no-repeat}
.case button:focus-visible{outline:2px solid var(--accent); outline-offset:-2px}
.play{position:absolute; right:calc(var(--u)*.9); bottom:calc(var(--u)*.9); width:calc(var(--u)*3.1); height:calc(var(--u)*3.1); border-radius:50%;
  background:var(--accent); display:grid; place-items:center; box-shadow:0 0 0 calc(var(--u)*.55) rgba(0,229,255,.16); transition:.24s ease}
.case button:hover .play{transform:scale(1.07); box-shadow:0 0 0 calc(var(--u)*.8) rgba(0,229,255,.22)}
.play svg{width:36%; height:36%; margin-left:8%}
.case iframe{display:block; width:100%; aspect-ratio:16/9; border:0; background:#000}
.case .cap{padding:calc(var(--u)*1.4) calc(var(--u)*1.5) calc(var(--u)*1.6); display:flex; flex-direction:column; gap:calc(var(--u)*.9); flex:1}
.case .lgbox{height:calc(var(--u)*2.1); display:flex; align-items:center}
.case .lg{width:auto; opacity:.9}
.case .snum{font-size:calc(var(--u)*2.35); line-height:1.05}

/* 4 compare */
.cmp{display:grid; grid-template-columns:minmax(0,1fr) calc(var(--u)*3.4) minmax(0,1fr); gap:calc(var(--u)*.8) 0; align-items:stretch}
.cmp .h{font-family:var(--sans); font-size:calc(var(--u)*1.2); font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted-2); padding:0 calc(var(--u)*1.6) calc(var(--u)*.2)}
.cmp .h.ac{color:var(--accent)}
.cmp .old,.cmp .new{border-radius:calc(var(--u)*.9); padding:calc(var(--u)*1.3) calc(var(--u)*1.6); font-size:calc(var(--u)*1.6); display:flex; align-items:center; border:1px solid var(--line)}
.cmp .old{background:var(--card-2); color:var(--muted)}
.cmp .new{border-color:rgba(0,229,255,.45); background:rgba(0,229,255,.05); color:var(--ink)}
.cmp .ar{display:flex; align-items:center; justify-content:center; color:var(--accent-dim)}
.cmp .ar svg{width:calc(var(--u)*1.6)}

/* 5 steps */
.step{padding:calc(var(--u)*1.6); display:flex; flex-direction:column; gap:calc(var(--u)*.8)}
.step .tm{color:var(--ink)}
.step.on .rn{color:var(--accent)}
.step.on .tb{color:var(--ink-2)}
.builtin{display:flex; flex-wrap:wrap; align-items:center; gap:calc(var(--u)*.7)}
.builtin .slabel{width:100%; margin:0}

/* 6 timeline */
.tl{display:grid; grid-template-columns:1fr 1.4fr 2.2fr 1.2fr; gap:calc(var(--u)*.7)}
.ph .bar{height:calc(var(--u)*1.1); border-radius:99px; background:#2a2a29; margin-bottom:calc(var(--u)*1.4)}
.ph.on .bar{background:linear-gradient(90deg,rgba(0,229,255,.25),var(--accent)); box-shadow:0 0 calc(var(--u)*1.4) rgba(0,229,255,.45)}
.ph.go .bar{background:repeating-linear-gradient(90deg,#2a2a29 0 calc(var(--u)*1.3),transparent calc(var(--u)*1.3) calc(var(--u)*2))}
.ph .snum{font-size:calc(var(--u)*2.7); margin-top:calc(var(--u)*.6)}
.ph.on .snum{color:var(--accent)}
.yours{display:flex; align-items:center; gap:calc(var(--u)*2.4); padding:calc(var(--u)*1.5) calc(var(--u)*2)}
.yours .items{display:flex; gap:calc(var(--u)*.8); flex-wrap:wrap}

/* 7 table */
.tbl{display:grid; grid-template-columns:1fr 1fr 1fr 1.05fr; padding:calc(var(--u)*.6) calc(var(--u)*.8) calc(var(--u)*.8) calc(var(--u)*1.6)}
.tbl > div{padding:calc(var(--u)*1.05) calc(var(--u)*1.4); font-size:calc(var(--u)*1.5); display:flex; align-items:center; color:var(--ink-2)}
.tbl .hd{font-family:var(--sans); font-weight:500; font-size:calc(var(--u)*1.4); color:var(--ink); padding-top:calc(var(--u)*1.2); padding-bottom:calc(var(--u)*1.2)}
.tbl .rh{font-family:var(--sans); color:var(--muted); font-size:calc(var(--u)*1.3); padding-left:0}
.tbl .ln{box-shadow:inset 0 -1px 0 var(--line)}
.tbl .ad{background:rgba(0,229,255,.05); color:var(--ink); box-shadow:inset 1px 0 0 rgba(0,229,255,.4), inset -1px 0 0 rgba(0,229,255,.4)}
.tbl .ad.ln{box-shadow:inset 1px 0 0 rgba(0,229,255,.4), inset -1px 0 0 rgba(0,229,255,.4), inset 0 -1px 0 rgba(0,229,255,.14)}
.tbl .ad.hd{gap:calc(var(--u)*.7); border-radius:calc(var(--u)*.9) calc(var(--u)*.9) 0 0; color:var(--accent);
  box-shadow:inset 1px 0 0 rgba(0,229,255,.4), inset -1px 0 0 rgba(0,229,255,.4), inset 0 1px 0 rgba(0,229,255,.4), inset 0 -1px 0 rgba(0,229,255,.14)}
.tbl .ad.hd img{height:calc(var(--u)*1.7); width:calc(var(--u)*1.7)}
.tbl .ad.last{border-radius:0 0 calc(var(--u)*.9) calc(var(--u)*.9);
  box-shadow:inset 1px 0 0 rgba(0,229,255,.4), inset -1px 0 0 rgba(0,229,255,.4), inset 0 -1px 0 rgba(0,229,255,.4)}

/* 7 in the fixed-price deck: the two offers side by side */
.tbl.c3{grid-template-columns:1fr 1.15fr 1.05fr}

/* 8 faq */
.faq .pan{padding:calc(var(--u)*1.6) calc(var(--u)*1.8)}
.faq .q{font-size:calc(var(--u)*1.75); letter-spacing:-.015em; line-height:1.25; color:var(--ink); margin-bottom:calc(var(--u)*.7)}
.faq .pan.on .tb{color:var(--ink-2)}

/* 9 pricing */
.price{padding:calc(var(--u)*1.7) calc(var(--u)*2)}
.price .snum{font-size:calc(var(--u)*4.2)}
.price .snum small{font-family:var(--sans); font-size:calc(var(--u)*1.3); letter-spacing:0; color:var(--muted); margin-left:calc(var(--u)*.5)}
.price .tb{margin-top:calc(var(--u)*.9)}
.price.on .tb{color:var(--ink-2)}
.ptbl{display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; padding:calc(var(--u)*.4) calc(var(--u)*1.8); border:1px solid var(--line);
  border-radius:calc(var(--u)*.9); background:var(--well)}
.ptbl > div{padding:calc(var(--u)*.8) 0; font-family:var(--sans); font-size:calc(var(--u)*1.4); color:var(--ink-2); font-variant-numeric:tabular-nums; box-shadow:inset 0 -1px 0 var(--line)}
.ptbl > div:nth-last-child(-n+4){box-shadow:none}
.ptbl .rh{color:var(--muted)}
.ptbl .hd{color:var(--ink); font-weight:500}

/* 9 in the fixed-price deck: what is due in which month */
.pay{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)) minmax(0,1.15fr); gap:calc(var(--u)*.7)}
.pay > div{display:flex; flex-direction:column; gap:calc(var(--u)*.35); padding:calc(var(--u)*1) calc(var(--u)*1.3);
  border:1px solid var(--line); border-radius:calc(var(--u)*.9); background:var(--well)}
.pay .k{font-family:var(--sans); font-size:calc(var(--u)*1.2); color:var(--muted)}
.pay .v{font-family:var(--tight); font-size:calc(var(--u)*2.2); line-height:1.1; letter-spacing:-.03em; color:var(--ink); font-variant-numeric:tabular-nums}
.pay .sum{border-color:rgba(0,229,255,.4); background:rgba(0,229,255,.05)}
.pay .sum .v{color:var(--accent)}

/* 10 roi */
.roi{display:grid; grid-template-columns:1.08fr 1fr; gap:calc(var(--u)*2.4); align-items:stretch}
.hero{padding:calc(var(--u)*2) calc(var(--u)*2.4); display:flex; flex-direction:column; gap:calc(var(--u)*1);
  box-shadow:0 0 0 calc(var(--u)*.45) rgba(0,229,255,.04), 0 calc(var(--u)*2) calc(var(--u)*4.6) calc(var(--u)*-2.4) rgba(0,229,255,.45)}
.hero .bigx{font-size:calc(var(--u)*7.4); letter-spacing:-.045em}
.hero .bigx .x{color:var(--accent)}
.cta{align-self:flex-start; margin-top:auto; display:inline-flex; align-items:center; gap:calc(var(--u)*.7); border-radius:99px; text-decoration:none;
  background:var(--accent); color:var(--on-accent); font-family:var(--sans); font-weight:600; font-size:calc(var(--u)*1.35);
  padding:calc(var(--u)*.85) calc(var(--u)*1.8); transition:.2s ease}
.cta:hover{background:#5cf0ff}
.cta span{font-weight:500; opacity:.75}
.sens{display:grid; grid-template-columns:1.25fr 1fr 1fr 1fr; gap:calc(var(--u)*.6)}
.sens > div{border-radius:calc(var(--u)*.8); padding:calc(var(--u)*1.05) calc(var(--u)*.6); display:flex; align-items:center; font-family:var(--sans)}
.sens .c{justify-content:center; border:1px solid var(--line); background:var(--card-2); font-family:var(--tight);
  font-size:calc(var(--u)*2.3); letter-spacing:-.03em; color:var(--ink); font-variant-numeric:tabular-nums}
.sens .c.hit{border-color:rgba(0,229,255,.45); background:rgba(0,229,255,.08); color:var(--accent)}
.sens .hd{justify-content:center; text-align:center; color:var(--muted); font-size:calc(var(--u)*1.2); padding-top:0; padding-bottom:calc(var(--u)*.2)}
.sens .rh{color:var(--muted); font-size:calc(var(--u)*1.25); padding-left:0}
.side{display:flex; flex-direction:column; justify-content:center; gap:calc(var(--u)*1.2)}
.nextstep{padding-top:calc(var(--u)*1.3); border-top:1px solid var(--line)}

.hint-bar{text-align:center; font-family:var(--sans); color:var(--muted); font-size:13px; padding-top:6px}
.hint-bar kbd{font:inherit; padding:1px 7px; border:1px solid var(--line-2); border-radius:6px; color:var(--ink-2)}
#present{display:inline-flex}
.px{display:none}

/* ---------- present: one slide, full screen ---------- */
body.present{overflow:hidden}
body.present .nav,body.present .foot,body.present .sky,body.present .hint-bar{display:none}
body.present .deck{position:fixed; inset:0; z-index:100; max-width:none; padding:0; display:block; background:var(--bg)}
body.present .slide{display:none; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(100vw, calc(100vh * 16 / 9)); border-radius:0; border-color:transparent; cursor:pointer}
body.present .slide.cur{display:block}
body.present .px{display:grid; place-items:center; position:fixed; right:14px; top:14px; z-index:101; width:36px; height:36px; border-radius:50%;
  border:1px solid var(--line-2); background:rgba(16,16,15,.7); color:var(--ink-2); font-family:var(--sans); font-size:18px; opacity:.35; transition:.2s ease}
body.present .px:hover,body.present .px:focus-visible{opacity:1; border-color:rgba(0,229,255,.5); color:#fff}

/* ---------- phone: slides reflow instead of shrinking to unreadable type ---------- */
@media (max-width:760px){
  #present,.hint-bar{display:none}
  .deck{padding-top:6px; gap:14px}
  .slide{--u:9px; aspect-ratio:auto; container-type:normal; border-radius:12px}
  .in{position:relative; inset:auto; padding:26px 18px 60px}
  .sfoot{left:18px; right:18px; bottom:18px; font-size:12px}
  .wm{font-size:14px; gap:7px} .wm img{width:18px; height:18px}
  .slabel,.ts,.cal-day,.rn,.schip,.cmp .h{font-size:12px}
  .slide h1{font-size:36px}
  .slide h2{font-size:26px}
  .slede{font-size:17px; max-width:none}
  .tb,.cmp .old,.cmp .new,.tbl > div,.ptbl > div,.cta,.stag{font-size:15px}
  .tm,.faq .q,.fit .row{font-size:18px}
  .fit{padding:18px} .fit > p{font-size:12px}
  .cover,.g2,.g3,.g5,.roi,.tl{grid-template-columns:minmax(0,1fr)}
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cover{padding-bottom:60px; gap:28px}
  .slot.m{font-size:11px; padding:5px}
  .slot{min-height:34px}
  .cmp{grid-template-columns:minmax(0,1fr); gap:6px}
  .cmp .h{display:none}
  .cmp .ar{transform:rotate(90deg); height:16px}
  .cmp .new{margin-bottom:10px}
  .case .snum{font-size:22px} .case .lgbox{height:22px} .case .lg{max-height:20px}
  .play{width:34px; height:34px; right:8px; bottom:8px}
  .tscroll{overflow-x:auto; margin:0 -18px; padding:0 18px 8px}
  .tbl{min-width:620px}
  .tbl > div{font-size:14px; padding:9px 10px}
  .tbl .rh,.tbl .hd{font-size:13px}
  .tbl .ad.hd img{width:16px; height:16px}
  .yours{flex-direction:column; align-items:flex-start; gap:12px}
  .ph .snum{font-size:26px}
  .tl{gap:22px}
  .price .snum{font-size:38px} .price .snum small{font-size:12px}
  .ptbl{grid-template-columns:1.5fr 1fr 1fr 1fr; padding:4px 14px}
  .ptbl > div{font-size:14px; padding-right:8px}
  .cta{align-self:stretch; justify-content:center} .cta span{display:none} .cta::after{content:"↗"; opacity:.75}
  .hero .bigx{font-size:62px}
  .sens .c{font-size:20px}
  .sens .hd,.sens .rh{font-size:12px}
  .stage{margin-top:20px; gap:14px}
  .ico{width:26px; height:26px}
  .tbl.c3{min-width:0; grid-template-columns:.9fr 1.1fr 1fr; padding-left:12px}
  .pay{grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px}
  .pay > div{padding:10px 12px; gap:3px}
  .pay .sum{grid-column:1 / -1}
  .pay .k{font-size:12px} .pay .v{font-size:20px}
}
@media (max-width:420px){ .g4{grid-template-columns:minmax(0,1fr)} }

/* ---------- print / save as PDF: one slide per 16:9 page ---------- */
@page{size:13.333in 7.5in; margin:0}
@media print{
  *{-webkit-print-color-adjust:exact; print-color-adjust:exact}
  html,body{background:var(--bg)}
  .hint-bar,.px{display:none !important}
  .deck{max-width:none; padding:0; gap:0}
  .slide{width:13.333in; height:7.5in; aspect-ratio:auto; border:0; border-radius:0; break-after:page; break-inside:avoid}
}

/* ---------- revops.html: own components ---------- */
.slide h2.wide{max-width:36ch}   /* headlines with a set line break */
/* 1 cover: one inbound lead moving through the system */
.flow{padding:calc(var(--u)*1.6); display:flex; flex-direction:column; gap:calc(var(--u)*.7)}
.flow .cal-top{margin-bottom:calc(var(--u)*.5)}
.fl{display:grid; grid-template-columns:calc(var(--u)*3.4) minmax(0,1fr); gap:calc(var(--u)*1.2); align-items:center;
  padding:calc(var(--u)*.85) calc(var(--u)*1); border:1px solid var(--line); border-radius:calc(var(--u)*.8); background:#121211}
.fl .b{height:calc(var(--u)*3.4); border-radius:calc(var(--u)*.7); display:grid; place-items:center; background:#1a1a19; border:1px solid var(--line-2);
  font-family:var(--sans); font-size:calc(var(--u)*1.5); font-weight:500; color:var(--ink-2); font-variant-numeric:tabular-nums}
.fl .t{display:block; font-size:calc(var(--u)*1.55); line-height:1.25; color:var(--ink)}
.fl .s{display:block; font-family:var(--sans); font-size:calc(var(--u)*1.2); line-height:1.35; color:var(--muted); margin-top:.15em}
.fl.on{border-color:rgba(0,229,255,.45); background:rgba(0,229,255,.08); box-shadow:0 0 calc(var(--u)*1.4) rgba(0,229,255,.12)}
.fl.on .b{border-color:rgba(0,229,255,.45); background:rgba(0,229,255,.1); color:var(--accent)}
.fl.on .t{color:var(--accent)} .fl.on .s{color:var(--ink-2)}

/* 4 crm: before and after, and the points next to it */
.bars{padding:calc(var(--u)*1.8) calc(var(--u)*2); display:flex; flex-direction:column; gap:calc(var(--u)*1.5); justify-content:center}
.bars .cal-top{margin-bottom:0}
.bar-r .k{display:flex; justify-content:space-between; align-items:baseline; gap:calc(var(--u)*1); font-family:var(--sans);
  font-size:calc(var(--u)*1.3); color:var(--ink-2); margin-bottom:calc(var(--u)*.6)}
.bar-r .k b{flex:none; font-weight:500; color:var(--accent); font-variant-numeric:tabular-nums}
.bar-r .k b i{font-style:normal; font-weight:400; color:var(--muted)}
.track{position:relative; height:calc(var(--u)*.9); border-radius:99px; background:#1f1f1e; overflow:hidden}
.track span{position:absolute; left:0; top:0; bottom:0; border-radius:99px}
.track .now{background:linear-gradient(90deg,rgba(0,229,255,.3),var(--accent))}
.track .was{background:#4a4a48}
.bars .stag{align-self:flex-start}
.pts{display:flex; flex-direction:column; justify-content:center; gap:calc(var(--u)*1.7)}
.pts .row{display:flex; align-items:center; gap:calc(var(--u)*1.2); font-size:calc(var(--u)*1.9); line-height:1.28; letter-spacing:-.012em; color:var(--ink)}
.pts .ico{border-color:rgba(0,229,255,.4); background:rgba(0,229,255,.08)}

/* 5 reporting: one line from signal to deal */
.trace{padding:calc(var(--u)*1.5) calc(var(--u)*1.8); display:flex; flex-direction:column; gap:calc(var(--u)*1.1)}
.chain{display:flex; align-items:center; gap:calc(var(--u)*.8)}
.chain .n{padding:calc(var(--u)*.7) calc(var(--u)*1.35); border:1px solid var(--line-2); border-radius:calc(var(--u)*.8); background:#141413;
  font-size:calc(var(--u)*1.6); color:var(--ink); white-space:nowrap}
.chain .n.on{border-color:rgba(0,229,255,.45); background:rgba(0,229,255,.08); color:var(--accent)}
.chain .a{flex:1 1 calc(var(--u)*1.5); min-width:calc(var(--u)*1.5); display:flex; align-items:center; color:var(--accent-dim)}
.chain .a::before{content:""; flex:1; height:1px; background:currentColor; opacity:.55; margin-right:calc(var(--u)*-.55)}
.chain .a svg{flex:none; width:calc(var(--u)*.9)}

/* 6 proof: video left, result and quote right */
.cases2{display:flex; flex-direction:column; gap:calc(var(--u)*1.2)}
.case2{display:grid; grid-template-columns:calc(var(--u)*22.4) minmax(0,1fr); flex-direction:row}
.case2 button{aspect-ratio:auto; min-height:calc(var(--u)*12.6); background-position:left center}   /* 16:9 at the column width, taller if the text is */
.case2 iframe{aspect-ratio:auto; height:100%; min-height:calc(var(--u)*12.6)}
.case2 .cap{display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1fr); gap:calc(var(--u)*2.2); align-items:center;
  padding:calc(var(--u)*1.2) calc(var(--u)*1.9)}
.case2 .res{display:flex; flex-direction:column; gap:calc(var(--u)*.7)}
.case2 .snum{font-size:calc(var(--u)*2.3)}
.case2 .quote{font-size:calc(var(--u)*1.5); line-height:1.4; color:var(--ink-2); padding-left:calc(var(--u)*1.6); border-left:1px solid var(--line-2)}
.case2 .quote cite{display:block; font-style:normal; font-family:var(--sans); font-size:calc(var(--u)*1.2); color:var(--muted); margin-top:.5em}

/* 8 next step: three steps, the strip, the call */
.glance{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:calc(var(--u)*.7)}
.glance > div{display:flex; flex-direction:column; gap:calc(var(--u)*.45); padding:calc(var(--u)*1) calc(var(--u)*1.3);
  border:1px solid var(--line); border-radius:calc(var(--u)*.9); background:var(--well)}
.glance .k{font-family:var(--sans); font-size:calc(var(--u)*1.2); font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2)}
.glance .v{font-size:calc(var(--u)*1.4); line-height:1.35; color:var(--ink-2)}
.closing{display:flex; align-items:center; gap:calc(var(--u)*1.8)}
.closing .cta{margin:0; align-self:center; flex:none}

@media (max-width:760px){
  .fl{grid-template-columns:34px minmax(0,1fr); gap:12px; padding:9px 10px}
  .fl .b{height:34px; font-size:14px}
  .fl .t{font-size:15px} .fl .s{font-size:12px}
  .bars{padding:18px; gap:16px}
  .bar-r .k{font-size:13px}
  .track{height:8px}
  .pts{gap:16px} .pts .row{font-size:17px; align-items:flex-start}
  .trace{padding:16px}
  .chain{flex-wrap:wrap; gap:6px} .chain .n{font-size:14px; padding:7px 11px}
  .chain .a{flex:none; min-width:0} .chain .a::before{display:none} .chain .a svg{width:9px}
  .case2{grid-template-columns:minmax(0,1fr)}
  .case2 button,.case2 iframe{aspect-ratio:16/9; min-height:0; height:auto}
  .case2 .cap{grid-template-columns:minmax(0,1fr); gap:14px; padding:14px 16px 16px}
  .case2 .quote{font-size:15px; padding-left:14px} .case2 .quote cite{font-size:12px}
  .glance{grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px}
  .glance > div{padding:10px 12px}
  .glance .k{font-size:12px} .glance .v{font-size:14px}
  .closing{flex-direction:column; align-items:stretch; gap:14px}
  .closing .cta{align-self:stretch}
}