/* Service Scope: the public product page (welcome.html). Standalone: it does not load base.css or the app's tokens.
   Motion rules: everything that moves uses transform/opacity; reduced-motion gets a static equivalent of each (see the media blocks). */
:root{
  --navy:#12427A; --deep:#0B2D55; --blue:#1B7FD4; --blue-ink:#0F62AD; --brass:#F2A93B;
  --ground:#F2F5F9; --panel:#fff; --ink:#0F1E33; --muted:#4A5B72; --line:#CBD5E1;
  --amber:#FFB020; --amber-ink:#7A5200; --green-ink:#226B33;
  --on-dark:#E8F0FB; --on-dark-muted:#C5D8F2; --live:#4DB2FF;
  --display:'Barlow Semi Condensed','Barlow',system-ui,sans-serif;
  --text:'Barlow',system-ui,-apple-system,'Segoe UI',sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{--ground:#0A1424;--panel:#111E33;--ink:#E8EEF7;--muted:#A9B8CC;--line:#2A3B57;--blue-ink:#8CBBFF;--amber-ink:#FFD27A;--green-ink:#7FD69A}
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;font:400 17px/1.55 var(--text);background:var(--ground);color:var(--ink);overflow-x:clip}
h1,h2,h3{font-family:var(--display);font-weight:600;letter-spacing:-.005em;line-height:1.08;margin:0;text-wrap:balance}
p{margin:0}
a{color:var(--blue-ink)}
:focus-visible{outline:3px solid var(--live);outline-offset:2px;border-radius:4px}
.wrap{max-width:1120px;margin:0 auto;padding:0 16px}
.skip{position:absolute;left:12px;top:-60px;background:#fff;color:#0F1E33;padding:10px 16px;border-radius:6px;z-index:10;font-weight:600}
.skip:focus{top:12px}

/* navy field sections alternate with light ones */
.dark{background:var(--deep);color:#fff;--ink:#fff;--muted:var(--on-dark-muted);--line:rgba(255,255,255,.24);--blue-ink:#8CBBFF}
.dark a{color:#9CCBFF}
section{padding:clamp(56px,9vw,120px) 0}
.sec-head{max-width:40em;margin-bottom:clamp(24px,4vw,44px)}
.sec-head h2{font-size:clamp(32px,4.6vw,56px)}
.sec-head p{margin-top:14px;color:var(--muted);font-size:19px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 22px;border-radius:8px;font:600 17px var(--text);text-decoration:none;border:2px solid transparent;cursor:pointer}
.btn-primary{background:#fff;color:var(--navy)}
.btn-primary:hover{background:#E6F0FC}
.btn-ghost{color:#fff;border-color:rgba(255,255,255,.45)}
.btn-ghost:hover{background:rgba(255,255,255,.1)}
.dark a.btn-primary{color:var(--navy)}
.top .wrap{position:relative}
.dark a.btn-ghost{color:#fff}
.btn-solid{background:var(--navy);color:#fff}
.btn-solid:hover{background:var(--deep)}
@media (prefers-color-scheme:dark){.btn-solid{background:#1B7FD4}.btn-solid:hover{background:#2B8FE4}}

/* ================= hero ================= */
.top{position:relative;overflow:hidden;padding:0}
.top::before{content:"";position:absolute;inset:0;background:radial-gradient(1000px 520px at 8% -10%,#12427A 0%,rgba(18,66,122,0) 70%);pointer-events:none}
.bar{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 0}
/* the lockup: mark left, name, byline under the name (brand guide: name in Archivo semi-expanded 700, never tracked out or uppercased) */
.lockup{display:inline-grid;grid-template-columns:auto auto;grid-template-rows:auto auto;column-gap:12px;align-items:center;text-decoration:none;color:#fff!important}
.lk-mark{grid-row:1 / span 2;width:40px;height:40px;display:block}
.lk-name{font:700 22px/1 'Archivo',var(--display);font-stretch:112.5%;letter-spacing:-.01em;color:#fff}
.lk-by{font:500 12px/1.3 var(--text);color:var(--on-dark-muted);white-space:nowrap}
.lockup .lk-name{grid-column:2}.lockup .lk-by{grid-column:2}
.m-lockup{display:none}
@media (max-width:640px){.lockup .lk-by{display:none}.lockup .lk-mark{grid-row:1}}
.bar nav{display:flex;align-items:center;gap:20px}
.bar nav a{color:var(--on-dark-muted);text-decoration:none;font-weight:500}
.bar nav a:hover{color:#fff}
.bar nav a.btn{min-height:40px;padding:0 16px;font-size:16px;color:#fff}
@media (max-width:640px){.bar nav a:not(.btn){display:none}}
.hero{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:24px;align-items:center;padding:clamp(20px,4vw,48px) 0 clamp(28px,5vw,48px)}
.hero-copy{position:relative;z-index:1}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* the pain, in a fixed-ops leader's words, then the promise */
.pains{list-style:none;margin:0 0 clamp(18px,3vw,30px);padding:0;display:grid;gap:4px;font:500 clamp(19px,2.3vw,26px)/1.25 var(--display);color:var(--on-dark-muted)}
.pains li{position:relative;padding-left:22px}
.pains li::before{content:"";position:absolute;left:0;top:.5em;width:10px;height:10px;border-radius:50%;background:var(--amber)}
@media (prefers-reduced-motion:no-preference){
  .pains li{opacity:0;transform:translateX(-10px);animation:pain-in .5s ease-out forwards}
  .pains li:nth-child(1){animation-delay:.1s}.pains li:nth-child(2){animation-delay:.3s}.pains li:nth-child(3){animation-delay:.5s}
  .pains li:nth-child(4){animation-delay:.7s}.pains li:nth-child(5){animation-delay:.9s}
  .mega .ln span{animation-delay:1.25s}.mega .ln:nth-child(3) span{animation-delay:1.4s}
}
@keyframes pain-in{to{opacity:1;transform:none}}
.mega{font-size:clamp(46px,8.2vw,112px);line-height:.92;letter-spacing:-.02em;font-weight:600}
.mega .ln{display:block;overflow:hidden;padding:.04em 0 .1em;margin-bottom:-.1em}
.mega .ln span{display:block;transform:translateY(105%);animation:ln-in 1s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes ln-in{to{transform:none}}
.hero .lede{margin-top:20px;font-size:clamp(19px,2.2vw,25px);color:#fff;font-weight:500;max-width:30em}
.price-line{margin-top:10px;font-size:19px;color:var(--on-dark)}
.price-line b{color:#fff;font-weight:700}
.trust{list-style:none;margin:26px 0 0;padding:16px 0 0;border-top:1px solid rgba(255,255,255,.22);display:flex;flex-wrap:wrap;gap:6px 22px;font-size:15.5px;color:var(--on-dark)}
.trust li{position:relative;padding-left:20px}
.trust li::before{content:"";position:absolute;left:0;top:.42em;width:11px;height:6px;border-left:2px solid #7FD69A;border-bottom:2px solid #7FD69A;transform:rotate(-45deg)}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

/* the scope: a radar sweep that finds the cars; the brass blip rides its leading edge */
.scope{position:relative;width:100%;max-width:380px;aspect-ratio:1;justify-self:center;border-radius:50%;
  background:radial-gradient(circle,rgba(27,127,212,.18),rgba(27,127,212,0) 70%)}
.scope .ring{position:absolute;border-radius:50%;border:1px solid rgba(140,187,255,.35)}
.scope .r1{inset:0}.scope .r2{inset:17%}.scope .r3{inset:34%}
.scope .cross{position:absolute;background:rgba(140,187,255,.22)}
.scope .cross.h{left:0;right:0;top:50%;height:1px}.scope .cross.v{top:0;bottom:0;left:50%;width:1px}
.sweep{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,rgba(77,178,255,0) 0deg,rgba(77,178,255,0) 250deg,rgba(77,178,255,.5) 360deg);
  animation:sweep 6s linear infinite;will-change:transform}
.sweep .blip{position:absolute;left:50%;top:-6px;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:var(--brass);box-shadow:0 0 0 4px rgba(242,169,59,.28),0 0 18px 4px rgba(242,169,59,.6)}
@keyframes sweep{to{transform:rotate(360deg)}}
.scope .mark{position:absolute;left:50%;top:50%;width:46%;height:46%;margin:-23% 0 0 -23%}
.scope-wrap{justify-self:center;width:100%;max-width:380px;text-align:center}
.scope-name{margin-top:16px;display:grid;gap:6px;justify-items:center}
.scope-name .lk-name{font-size:34px}
.scope-name .lk-by{font-size:14px}
.scope .car{position:absolute;width:12px;height:12px;margin:-6px;border-radius:50%;background:var(--live);opacity:.2;animation:ping 6s linear infinite}
.scope .car.risk{background:var(--amber)}
@keyframes ping{0%{opacity:1;transform:scale(1.7)}35%{opacity:.25;transform:none}100%{opacity:.2;transform:none}}
/* positions (percent of the scope) and the delay that makes each light as the sweep passes: angle/360 x 6s */
.scope .car.c1{left:50%;top:14%;animation-delay:-.1s}
.scope .car.c2{left:78%;top:26%;animation-delay:-4.9s}
.scope .car.c3{left:88%;top:58%;animation-delay:-4.2s}
.scope .car.c4{left:63%;top:84%;animation-delay:-3.3s}
.scope .car.c5{left:28%;top:80%;animation-delay:-2.2s}
.scope .car.c6{left:15%;top:42%;animation-delay:-1.1s}
@media (max-width:860px){
  .hero{grid-template-columns:minmax(0,1fr)}
  .scope-wrap{display:none}
  .m-lockup{display:grid;grid-template-columns:auto auto;column-gap:14px;align-items:center;margin-bottom:22px}
  .m-lockup img{grid-row:1 / span 2;width:72px;height:72px}
  .m-lockup .lk-name{font-size:30px;align-self:end}.m-lockup .lk-by{align-self:start}
}
.proof{padding:clamp(8px,2vw,16px) 0 clamp(36px,6vw,72px)}
.proof-h{font-size:clamp(22px,2.6vw,30px);margin-bottom:14px}
@media (prefers-reduced-motion:reduce){
  .mega .ln span{transform:none;animation:none}
  .sweep{animation:none;transform:rotate(48deg)}
  .scope .car{animation:none;opacity:.9;transform:none}
}

/* the live board */
.board{position:relative;margin-top:clamp(8px,2vw,24px);border:1px solid rgba(255,255,255,.2);border-radius:14px;background:rgba(6,16,32,.55);overflow:hidden}
.board-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.14);font-size:15px;color:var(--on-dark-muted)}
.board-head b{color:#fff;font-weight:600}
.live{display:inline-flex;align-items:center;gap:8px}
.live i{width:9px;height:9px;border-radius:50%;background:var(--live);box-shadow:0 0 0 0 rgba(77,178,255,.6)}
@media (prefers-reduced-motion:no-preference){.live i{animation:pulse 2.4s infinite}}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(77,178,255,0)}100%{box-shadow:0 0 0 0 rgba(77,178,255,0)}}
.tally{font-variant-numeric:tabular-nums}
.tally b{display:inline-block;min-width:3.4em;text-align:right}
.strip{position:relative;min-height:44px;display:flex;align-items:center;gap:10px;padding:8px 16px;font-weight:600;font-size:15px;border-bottom:1px solid rgba(255,255,255,.14);color:var(--on-dark-muted);transition:background-color .4s}
.strip .txt{transition:opacity .25s,transform .25s}
.strip .txt.swap{opacity:0;transform:translateY(4px)}
.strip .ico{flex:none;width:10px;height:10px;border-radius:50%;background:var(--live)}
.strip.risk{background:rgba(255,176,32,.16);color:#FFD27A}
.strip.risk .ico{background:var(--amber);animation:blink 1s infinite}
.strip.alert{background:rgba(255,176,32,.26);color:#FFE2A8}
.strip.alert .ico{background:var(--amber)}
.strip.ok{background:rgba(127,214,154,.16);color:#A8E8BC}
.strip.ok .ico{background:#7FD69A}
@keyframes blink{50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.strip.risk .ico{animation:none}.strip,.strip .txt{transition:none}}
.phases{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));min-height:208px}
.phase{padding:12px 10px;border-left:1px solid rgba(255,255,255,.12);display:flex;flex-direction:column;gap:8px}
.phase:first-child{border-left:0}
.phase h3{font:600 15px var(--display);color:var(--on-dark-muted);display:flex;justify-content:space-between}
.phase h3 span{color:#fff;font-variant-numeric:tabular-nums}
.car-card{background:#12427A;border:1px solid #2F6AB3;border-radius:8px;padding:8px 10px;font-size:14px;line-height:1.3;color:#fff;will-change:transform}
.car-card b{display:block;font:600 16px var(--display);font-variant-numeric:tabular-nums}
.car-card small{color:var(--on-dark-muted);font-size:13px}
.car-card.risk{background:#4a3500;border-color:var(--amber);animation:risk 1.1s ease-in-out infinite}
.car-card.risk::after{content:"Promise at risk";display:block;font-weight:600;font-size:13px;color:#FFD27A;margin-top:2px}
@keyframes risk{50%{box-shadow:0 0 0 5px rgba(255,176,32,.32)}}
@media (prefers-reduced-motion:reduce){.car-card.risk{animation:none;box-shadow:0 0 0 4px rgba(255,176,32,.32)}}
.board-foot{padding:12px 16px;border-top:1px solid rgba(255,255,255,.14);font-size:14px;color:var(--on-dark-muted)}
@media (max-width:860px){
  .phases{grid-template-columns:minmax(0,1fr);min-height:0}
  .phase{border-left:0;border-top:1px solid rgba(255,255,255,.12);flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px 12px;min-height:62px}
  .phase:first-child{border-top:0}
  .phase h3{width:9.5em;flex:none}
  .car-card{flex:1 1 150px;max-width:230px}
}

/* ================= the per-store model ================= */
.roi{background:var(--ground)}
.assume{display:inline-block;margin:0 0 24px;padding:8px 14px;border-left:4px solid var(--amber);background:var(--panel);color:var(--ink);font-size:16px;border-radius:0 8px 8px 0}
.roi-grid{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:clamp(20px,4vw,48px);align-items:start}
.roi-form{display:grid;gap:20px}
.roi-form fieldset{margin:0;border:1px solid var(--line);border-radius:14px;background:var(--panel);padding:18px clamp(16px,2.5vw,26px) 22px;min-width:0}
.roi-form legend{padding:0 8px;font:600 21px var(--display)}
.fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px 18px;margin-top:6px}
.fields label{display:grid;gap:6px;font-weight:600;font-size:16px}
.roi-form input[type=number]{width:100%;min-height:46px;padding:0 12px;font:600 19px var(--text);border:1px solid #8393A8;border-radius:8px;background:var(--panel);color:var(--ink);font-variant-numeric:tabular-nums}
.hint{color:var(--muted);font-size:15.5px;margin-top:4px}
.lever{margin-top:18px}
.lever-top{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.lever-top label{font-weight:600}
.lever-top output{font:600 22px var(--display);color:var(--blue-ink);font-variant-numeric:tabular-nums}
.lever input[type=range]{width:100%;margin:8px 0 2px;accent-color:#1B7FD4;height:28px}
.amt{font-weight:600;color:var(--ink);white-space:nowrap}
.lever:target{outline:3px solid var(--live);outline-offset:6px;border-radius:6px}

/* the ledger: cost against earnings, kept in view while the inputs change */
.ledger{position:sticky;top:16px;background:var(--deep);color:#fff;border-radius:16px;padding:clamp(18px,2.5vw,28px);box-shadow:0 24px 56px rgba(11,35,70,.28)}
.ledger h3{font-size:19px;color:var(--on-dark-muted);font-weight:500}
.l-big{margin-top:6px;font:600 clamp(48px,6.4vw,72px)/1 var(--display);font-variant-numeric:tabular-nums}
.l-big small{display:block;margin-top:6px;font:500 17px var(--text);color:var(--on-dark-muted)}
.bars{margin-top:20px;display:grid;gap:12px}
.bar-name{display:block;font-size:14px;color:var(--on-dark-muted);margin-bottom:4px}
.track{position:relative;height:26px;background:rgba(255,255,255,.1);border-radius:6px;overflow:hidden}
/* each segment is full width and placed with translateX + scaleX, so the bars animate on the compositor */
.seg{position:absolute;inset:0;transform-origin:left center;transform:scaleX(0);transition:transform .5s cubic-bezier(.3,.7,.2,1)}
@media (prefers-reduced-motion:reduce){.seg{transition:none}}
.s1{background:#4DB2FF}.s2{background:#1B7FD4}.s3{background:#8CBBFF}.s4{background:#7FD69A}
.seg.fee{background:var(--brass)}
.legend{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:1fr;gap:6px;font-size:14px;color:var(--on-dark)}
.legend li{display:flex;align-items:center;gap:7px}
.legend i{width:11px;height:11px;border-radius:3px;display:inline-block;flex:none}
.legend b{font-variant-numeric:tabular-nums;margin-left:auto}
.sums{margin:18px 0 0;display:grid;grid-template-columns:1fr auto;gap:8px 14px;border-top:1px solid rgba(255,255,255,.2);padding-top:14px}
.sums dt{color:var(--on-dark)}
.sums dd{margin:0;text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
.sums .strong{font-size:22px}
.sums .neg{color:#FFB4AE}
.sums [hidden]{display:none}
.breakeven{margin-top:14px;padding:12px 14px;background:rgba(255,255,255,.1);border-radius:10px;font-weight:500}
.fine{margin-top:12px;font-size:13.5px;color:var(--on-dark-muted)}
.how{margin-top:28px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px clamp(16px,2.5vw,26px)}
.how summary{cursor:pointer;font:600 20px var(--display)}
.how ol{margin:14px 0 0;padding-left:22px;color:var(--muted);display:grid;gap:8px}
.how li{padding-left:4px}
@media (max-width:900px){
  .roi-grid{grid-template-columns:minmax(0,1fr)}
  .ledger{position:static;order:-1}
}

/* ================= levers: big type on a navy field ================= */
.levers-list{margin:0;border-top:1px solid var(--line)}
.lev{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:12px clamp(20px,5vw,64px);padding:clamp(22px,3.5vw,36px) 0;border-bottom:1px solid var(--line);align-items:baseline}
.lev dt{font:600 clamp(28px,4vw,46px)/1.02 var(--display);letter-spacing:-.01em}
.lev dd{margin:0;color:var(--muted);font-size:18px}
.lev dd a{display:inline-block;margin-top:8px;font-weight:600}
@media (max-width:760px){.lev{grid-template-columns:minmax(0,1fr)}}

/* ================= roles ================= */
.roles{display:grid;grid-template-columns:260px minmax(0,1fr);gap:28px;align-items:start}
.role-list{display:flex;flex-direction:column;border-left:2px solid var(--line)}
.role-list button{all:unset;box-sizing:border-box;cursor:pointer;padding:11px 16px;margin-left:-2px;border-left:2px solid transparent;font:600 18px var(--display);color:var(--muted)}
.role-list button:hover{color:var(--ink)}
.role-list button[aria-selected=true]{color:var(--blue-ink);border-left-color:var(--blue)}
.role-list button:focus-visible{outline:3px solid var(--live);outline-offset:-3px}
.role-panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:clamp(20px,3vw,32px);min-height:260px}
.role-panel h3{font-size:28px}
.role-panel .sub{color:var(--muted);margin-top:6px}
.role-panel ul{margin:18px 0 0;padding:0;list-style:none;display:grid;gap:12px}
.role-panel li{padding-left:22px;position:relative}
.role-panel li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:9px;border-radius:50%;background:var(--blue)}
@media (prefers-reduced-motion:no-preference){.role-panel.in{animation:panel-in .35s ease-out}}
@keyframes panel-in{from{opacity:0;transform:translateY(6px)}}
@media (max-width:760px){
  .roles{grid-template-columns:minmax(0,1fr)}
  .role-list{flex-direction:row;flex-wrap:wrap;border-left:0;gap:4px 8px}
  .role-list button{margin:0;border:1px solid var(--line);border-radius:999px;padding:7px 14px;font-size:16px}
  .role-list button[aria-selected=true]{background:var(--navy);border-color:var(--navy);color:#fff}
}

/* ================= a car's day: a token travels the rail as you scroll ================= */
.story-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:clamp(24px,5vw,72px);align-items:start}
.steps{position:relative;list-style:none;margin:0;padding:0;counter-reset:s;max-width:700px}
.steps li{counter-increment:s;position:relative;padding:0 0 clamp(40px,8vh,88px) 72px;opacity:.5;transition:opacity .35s}
.steps li.on{opacity:1}
.steps li::before{content:counter(s);position:absolute;left:0;top:-2px;width:36px;height:36px;border-radius:50%;background:var(--deep);border:2px solid #4D7DB4;color:#fff;display:grid;place-items:center;font:600 18px var(--display);z-index:1}
.steps li.on::before{background:var(--blue);border-color:var(--blue)}
.steps li:last-child{padding-bottom:0}
.steps::before{content:"";position:absolute;left:17px;top:18px;bottom:var(--rail-b,18px);width:2px;background:rgba(255,255,255,.22)}
.steps h3{font-size:clamp(24px,3vw,32px)}
.steps p{color:var(--muted);margin-top:6px;font-size:18px}
.token{position:absolute;left:-5px;top:0;width:46px;height:46px;border-radius:50%;border:3px solid var(--brass);box-shadow:0 0 0 6px rgba(242,169,59,.18),0 0 22px rgba(242,169,59,.45);z-index:2;pointer-events:none;will-change:transform}
.token::after{content:"";position:absolute;left:50%;top:-9px;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:var(--brass)}
@media (prefers-reduced-motion:reduce){.steps li{transition:none}}
/* the pinned screen for the role that has the car */
.pin{position:sticky;top:max(16px,calc(50vh - 190px))}
.pin-box{position:relative;height:380px}
.mini{position:absolute;left:0;right:0;top:0;opacity:0;transform:translateY(8px);transition:opacity .35s,transform .35s;pointer-events:none}
.mini.on{opacity:1;transform:none}
.mini .frame{background:#F2F5F9;color:#0F1E33;border-radius:18px;overflow:hidden;box-shadow:0 24px 56px rgba(2,10,24,.45)}
.mini .fh{display:flex;justify-content:space-between;gap:8px;padding:12px 16px;background:var(--navy);color:#fff;font:600 17px var(--display)}
.mini .fh span{color:var(--on-dark-muted);font:500 14px var(--text)}
.mini .rows{padding:14px;display:grid;gap:10px}
.mini .row{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #CBD5E1;border-radius:10px;padding:12px;font-weight:500;font-size:16px}
.mini .row i{flex:none;width:10px;height:10px;border-radius:50%;background:#1B7FD4}
.mini .row.warn i{background:#FFB020}
.mini .row.go{border-color:#1B7FD4;box-shadow:0 0 0 3px rgba(27,127,212,.18)}
.mini .note{padding:0 16px 14px;font-size:13.5px;color:#4A5B72}
@media (prefers-reduced-motion:reduce){.mini{transition:none}}
@media (max-width:900px){.story-grid{grid-template-columns:minmax(0,1fr)}.pin{display:none}}
@media (max-width:480px){.steps li{padding-left:60px}.steps li::before{width:32px;height:32px}.steps::before{left:15px}.token{left:-7px}}

/* ================= the customer's page, updating live ================= */
.two{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:clamp(24px,5vw,64px);align-items:center}
.two h2{font-size:clamp(32px,4.6vw,56px)}
.two p{margin-top:14px;color:var(--muted);font-size:19px}
.two ul{margin:16px 0 0;padding-left:20px;color:var(--muted)}
.two li{margin-top:6px}
.phone{background:var(--deep);border-radius:30px;padding:14px;box-shadow:0 24px 56px rgba(11,35,70,.3);justify-self:center;width:100%;max-width:320px;position:relative}
.screen{background:#F2F5F9;color:#0F1E33;border-radius:20px;padding:18px 16px;display:grid;gap:12px;font-size:15px;overflow:hidden;position:relative}
.screen .vh{font:600 20px var(--display)}
.screen .pill{display:inline-block;background:#E6F0FC;color:#0F62AD;border-radius:999px;padding:3px 10px;font-weight:600;font-size:14px;justify-self:start}
.prog{display:flex;gap:4px}
.prog i{position:relative;height:6px;flex:1;border-radius:3px;background:#CBD5E1;overflow:hidden}
.prog i::after{content:"";position:absolute;inset:0;background:#1B7FD4;transform:scaleX(0);transform-origin:left;transition:transform .6s cubic-bezier(.3,.7,.2,1)}
.prog i.on::after{transform:none}
.screen .note{background:#fff;border:1px solid #CBD5E1;border-radius:10px;padding:10px 12px;min-height:64px}
.fade{transition:opacity .25s}
.fade.swap{opacity:0}
.screen small{color:#4A5B72}
.notif{position:absolute;left:10px;right:10px;top:10px;z-index:2;background:#0B2D55;color:#fff;border-radius:12px;padding:9px 12px;font-size:13.5px;font-weight:500;transform:translateY(-140%);opacity:0;transition:transform .4s cubic-bezier(.3,.7,.2,1),opacity .3s}
.notif.show{transform:none;opacity:1}
@media (prefers-reduced-motion:reduce){.prog i::after,.fade,.notif{transition:none}}
@media (max-width:760px){.two{grid-template-columns:minmax(0,1fr)}}

/* ================= the rest: plain rows on navy ================= */
.defs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px;margin:0}
.defs div{padding:22px 0;border-top:1px solid var(--line)}
.defs dt{font:600 24px var(--display)}
.defs dd{margin:6px 0 0;color:var(--muted)}
@media (max-width:760px){.defs{grid-template-columns:minmax(0,1fr)}}

/* ================= pricing ================= */
.pricing .sec-head p{color:var(--on-dark-muted)}
.price-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,56px);align-items:start}
.price-big{font:600 clamp(60px,10vw,112px)/1 var(--display);font-variant-numeric:tabular-nums}
.price-big small{display:block;margin-top:6px;font-size:.22em;font-weight:500;color:var(--on-dark-muted)}
.price-note{margin-top:10px;color:var(--on-dark)}
.tiers{list-style:none;margin:24px 0 0;padding:0;border-top:1px solid rgba(255,255,255,.2)}
.tiers li{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.2)}
.tiers span:last-child{font-weight:600;font-variant-numeric:tabular-nums}
.calc{background:#fff;color:#0F1E33;border-radius:14px;padding:clamp(20px,3vw,30px)}
.calc label{font-weight:600;display:block}
.calc .row{display:flex;gap:14px;align-items:center;margin-top:10px}
.calc input[type=number]{width:96px;min-height:46px;font:600 20px var(--text);padding:0 10px;border:1px solid #8393A8;border-radius:8px;color:#0F1E33;background:#fff}
.calc input[type=range]{flex:1;min-width:0;accent-color:#12427A}
.calc dl{margin:22px 0 0;display:grid;grid-template-columns:1fr auto;gap:8px 16px}
.calc dt{color:#4A5B72}
.calc dd{margin:0;text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.calc .total{border-top:1px solid #CBD5E1;padding-top:12px;margin-top:6px;font-size:22px}
.calc dt.total{color:#0F1E33}
.calc dt a{color:#0F4F8F}
.calc .msg{margin-top:14px;font-size:15px;color:#4A5B72;min-height:1.5em}
.calc .btn{margin-top:18px;width:100%}
@media (max-width:760px){.price-grid{grid-template-columns:minmax(0,1fr)}}

footer{padding:28px 0 40px;color:var(--muted);font-size:15px}
footer .wrap{display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between}

/* ================= questions ================= */
.faq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(24px,5vw,64px)}
.qa{padding:22px 0;border-top:1px solid var(--line)}
.qa h3{font-size:clamp(21px,2.2vw,26px)}
.qa p{margin-top:8px;color:var(--muted)}
@media (max-width:760px){.faq{grid-template-columns:minmax(0,1fr)}}