/* ═══ FONT ═══ self-hosted variable Inter, one file, zero external requests ═══ */
@font-face{
  font-family:'InterLocal';
  src:url('/fonts/inter.woff2') format('woff2-variations'),
      url('/fonts/inter.woff2') format('woff2');
  font-weight:100 900; font-style:normal; font-display:swap;
}

/* ═══ TOKENS ═══ official SBI + FASTag palette ═══ */
:root{
  --base:#FFFFFF; --base-alt:#F2FBFF; --base-alt2:#DCF3FF;
  --navy:#0010B0; --navy-2:#E4F7FF; --navy-3:#0A2ED0;
  --blue:#0010B0; --blue-lift:#2C46E0; --blue-deep:#000B82; --blue-pale:#E4F7FF;
  --saffron:#F88808; --saffron-deep:#9C4E00; --saffron-lift:#FFA33D; --saffron-pale:#FFF2E0;
  --green:#38B038; --green-lift:#63D163; --green-pale:#E6F7E6; --green-deep:#1F6B22;
  --red:#D34437; --red-pale:#FDF0EF;
  --ink:#0A1018; --ink-2:#414B5A; --ink-3:#5A6675;
  --on-navy:#0A1018; --on-navy-2:#31465F; --on-navy-3:#5A6675;
  --line:#CDEBF9; --line-2:#AEDFF4; --line-navy:rgba(0,16,176,.16);

  /* depth: one light source top-left, shadows fall down-right */
  --e1-shadow:0 1px 2px rgba(11,18,32,.05), 0 2px 6px rgba(11,18,32,.04);
  --e2-shadow:0 2px 4px rgba(11,18,32,.06), 0 8px 20px rgba(11,18,32,.07);
  --e3-shadow:0 4px 8px rgba(11,18,32,.07), 0 18px 44px rgba(11,18,32,.10);

  --r-s:8px; --r-m:14px; --r-l:20px; --r-xl:28px;
  --ease:cubic-bezier(.16,1,.3,1);
  --t-state:180ms; --t-reveal:420ms; --t-hero:900ms;
  --shell:1200px; --gut:24px;
  /* gradient grounds */
  --grad-navy:linear-gradient(165deg,#DFF6FF 0%,#B4E9FF 45%,#82DFFF 100%);
  --grad-blue:linear-gradient(135deg,#0010B0,#2C46E0);
  --grad-warm:linear-gradient(135deg,#9C4E00,#C96A00);
  --grad-go:linear-gradient(135deg,#1A5A1C,#237523);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0; background:var(--base); color:var(--ink);
  font-family:'InterLocal',-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  font-size:16px; line-height:1.65; font-weight:400;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img,svg{max-width:100%; height:auto; display:block}
a{color:var(--blue); text-decoration:none}
h1,h2,h3,h4{margin:0; line-height:1.12; letter-spacing:-.028em; font-weight:800}
p{margin:0}
table{border-collapse:collapse; width:100%}
:focus-visible{outline:3px solid var(--blue-lift); outline-offset:2px; border-radius:4px}

.shell{max-width:var(--shell); margin:0 auto; padding:0 var(--gut)}
.skip{position:absolute; left:-9999px; top:0; background:#fff; color:var(--navy);
  padding:12px 18px; z-index:200; border-radius:0 0 var(--r-s) 0; font-weight:600}
.skip:focus{left:0}

/* ═══ HEADER ═══ */
.hdr{position:sticky; top:0; z-index:60; background:rgba(255,255,255,.93);
  border-bottom:1px solid var(--line-2); backdrop-filter:saturate(140%) blur(10px)}
.hdr-in{display:flex; align-items:center; gap:16px; height:64px}
.lock{display:flex; align-items:center; gap:11px; margin-right:auto}
.lock img{width:30px; height:30px; border-radius:7px}
.lock-txt{display:flex; flex-direction:column; line-height:1}
.lock-sbi{font-size:15px; font-weight:800; color:var(--navy); letter-spacing:.14em}
.lock-fas{font-size:12px; font-weight:600; letter-spacing:.055em; margin-top:3px}
.lock-fas i{font-style:normal; color:#FF7A2E}
.lock-fas b{font-weight:600; color:#5FCB64}
.nav{display:none; gap:22px; margin-right:24px}
.nav a{color:var(--on-navy-2); font-size:14px; font-weight:500; transition:color var(--t-state) var(--ease)}
.nav a:hover{color:var(--navy)}
@media(min-width:1060px){.nav{display:flex}}

/* ═══ BUTTONS ═══ */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:inherit; font-size:15px; font-weight:600; letter-spacing:-.005em;
  padding:12px 22px; border-radius:var(--r-s); border:1px solid transparent; cursor:pointer;
  transition:transform var(--t-state) var(--ease), box-shadow var(--t-state) var(--ease), background var(--t-state) var(--ease), border-color var(--t-state) var(--ease);
  white-space:nowrap}
.btn svg{width:17px; height:17px; flex:none}
.btn-go{background:var(--green); color:#fff; box-shadow:0 2px 4px rgba(11,18,32,.10), 0 8px 20px rgba(67,160,71,.26)}
.btn-go:hover{background:#3C9140; transform:translateY(-1px); box-shadow:0 4px 8px rgba(11,18,32,.12), 0 14px 32px rgba(67,160,71,.34)}
.btn-ghost{background:#fff; color:var(--navy); border-color:var(--line-2)}
.btn-ghost:hover{background:var(--blue-pale); border-color:var(--blue)}
.btn-sm{padding:9px 17px; font-size:14px}
.btn-lg{padding:15px 28px; font-size:16px}

/* ═══ HERO ═══ */
.hero{position:relative; overflow:hidden; background:var(--grad-navy); color:var(--on-navy); padding:60px 0 68px; text-align:center}
.hero::before{content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(900px 480px at 14% -6%, rgba(255,255,255,.88), transparent 62%),
             radial-gradient(760px 420px at 98% 108%, rgba(21,101,192,.10), transparent 66%)}
.hero-grid{position:relative; display:grid; gap:44px; align-items:center}
@media(min-width:1000px){.hero{padding:80px 0 88px} .hero-grid{grid-template-columns:1.04fr .96fr; gap:54px}}
.kicker{display:inline-flex; align-items:center; gap:9px; font-size:11.5px; font-weight:600;
  letter-spacing:.15em; text-transform:uppercase; color:var(--navy); background:rgba(255,255,255,.8);
  border:1px solid var(--line-navy); padding:7px 14px; border-radius:100px; margin-bottom:22px}
.kicker .dot{width:6px; height:6px; border-radius:50%; background:var(--green); flex:none}
.hero h1{font-size:clamp(38px,6.6vw,68px); font-weight:900; letter-spacing:-.04em; line-height:1.0; color:var(--navy)}
.hero h1 .amp{color:var(--blue); display:block}
.hero-sub{margin-top:20px; max-width:47ch; font-size:clamp(16px,1.7vw,18.5px); line-height:1.66; color:var(--on-navy-2)}
.hero-cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:30px}
.hero-note{margin-top:18px; font-size:13px; color:var(--on-navy-2); display:flex; align-items:center; gap:8px}
.hero-note svg{width:15px; height:15px; flex:none; color:var(--green)}

/* ═══ 2.5D STAGE ═══ perspective object #1 ═══ */
.stage{position:relative; perspective:1200px; perspective-origin:50% 40%; height:400px;
  border-radius:var(--r-xl); background:linear-gradient(178deg,#DFF6FF 0%,#AEE7FF 55%,#82DFFF 100%);
  border:1px solid var(--line-2);
  box-shadow:0 4px 8px rgba(0,16,176,.10), 0 24px 58px rgba(0,16,176,.16), inset 0 1px 0 rgba(255,255,255,.8);
  overflow:hidden}
.road{position:absolute; left:-32%; right:-32%; bottom:-14%; height:74%;
  transform:rotateX(66deg); transform-origin:50% 100%;
  background:repeating-linear-gradient(90deg, transparent 0 11%, rgba(255,255,255,.28) 11% 11.8%, transparent 11.8% 23%),
             linear-gradient(180deg,#8A96A8 0%,#6E7B8E 100%);
  border-top:1px solid rgba(255,255,255,.55)}
.road::after{content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(174,231,255,.95) 0%, transparent 52%)}
.dash{position:absolute; left:50%; width:5px; margin-left:-2.5px; background:#FFFFFF; border-radius:3px; opacity:.9}
.gantry{position:absolute; left:7%; right:7%; top:18%; height:15px; border-radius:4px;
  background:linear-gradient(180deg,#8FA0B5,#5B6B80); box-shadow:0 3px 7px rgba(13,71,161,.28), 0 12px 26px rgba(13,71,161,.20)}
.leg{position:absolute; top:18%; width:11px; height:52%; border-radius:3px;
  background:linear-gradient(90deg,#8496AC,#57667B); box-shadow:0 3px 8px rgba(13,71,161,.24)}
.leg.l{left:7%} .leg.r{right:7%}
.reader{position:absolute; left:50%; top:calc(18% + 15px); margin-left:-25px; width:50px; height:15px;
  border-radius:0 0 5px 5px; background:linear-gradient(180deg,#5D6E85,#3A465A); box-shadow:0 3px 8px rgba(13,71,161,.28)}
/* the only looping animation on the page */
.beam{position:absolute; left:50%; margin-left:-78px; top:calc(18% + 28px); width:156px; height:150px;
  background:linear-gradient(180deg, rgba(0,16,176,.46) 0%, rgba(0,16,176,.14) 46%, transparent 86%);
  clip-path:polygon(38% 0,62% 0,100% 100%,0 100%); animation:scan 3.4s var(--ease) infinite; transform-origin:50% 0}
@keyframes scan{0%,68%,100%{opacity:0; transform:scaleY(.42)} 12%{opacity:1; transform:scaleY(1)} 52%{opacity:.85; transform:scaleY(1)}}
.plate{position:absolute; right:6%; top:9%; background:var(--green); color:#fff; font-size:11px;
  font-weight:700; letter-spacing:.11em; padding:7px 12px; border-radius:5px;
  border:1.5px solid rgba(255,255,255,.62); box-shadow:0 3px 7px rgba(0,0,0,.34), 0 10px 24px rgba(0,0,0,.26);
  text-align:center; line-height:1.32}
.plate small{display:block; font-size:8.5px; font-weight:600; opacity:.9; letter-spacing:.07em}

/* the car, rear three-quarter — perspective object #2 */
.car{position:absolute; left:50%; bottom:9%; margin-left:-108px; width:216px; transform:translateZ(58px)}
.car-roof{width:63%; height:44px; margin:0 auto; border-radius:22px 22px 0 0;
  background:linear-gradient(176deg,#2B3A56 0%,#1B2739 100%);
  border:1px solid rgba(255,255,255,.13); border-bottom:0; position:relative;
  box-shadow:0 -2px 6px rgba(0,0,0,.28)}
.glass{position:absolute; left:8%; right:8%; top:24%; bottom:0;
  border-radius:13px 13px 0 0;
  background:linear-gradient(172deg, rgba(126,178,240,.32), rgba(126,178,240,.06));
  border:1px solid rgba(255,255,255,.17); border-bottom:0}
.tag{position:absolute; left:50%; top:34%; margin-left:-24px; width:48px; height:29px; border-radius:4px;
  background:linear-gradient(140deg,#FFFFFF,#E7EEF9); box-shadow:0 2px 4px rgba(0,0,0,.34), 0 7px 16px rgba(0,0,0,.30);
  display:flex; align-items:center; justify-content:center; gap:2px; transform:translateZ(16px); z-index:3}
.tag s{width:10px; height:4px; border-radius:1px; text-decoration:none; display:block}
.tag s.o{background:#F88808} .tag s.g{background:#38B038}
.car-body{position:relative; height:76px; border-radius:16px 16px 12px 12px;
  background:linear-gradient(176deg,#22304A 0%,#151F2E 100%);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 6px 12px rgba(0,0,0,.42), 0 26px 52px rgba(0,0,0,.44), inset 0 1px 0 rgba(255,255,255,.10)}
.arch{position:absolute; bottom:-7px; width:54px; height:26px; border-radius:26px 26px 0 0;
  background:#0C131F; border:1px solid rgba(255,255,255,.10); border-bottom:0}
.arch.l{left:6px} .arch.r{right:6px}
.tail{position:absolute; top:19px; width:40px; height:11px; border-radius:5px;
  background:linear-gradient(180deg,#F2695C,#C02E22); box-shadow:0 0 14px 2px rgba(226,87,76,.5)}
.tail.l{left:14px} .tail.r{right:14px}
.numplate{position:absolute; left:50%; margin-left:-39px; bottom:13px; width:78px; height:19px;
  border-radius:3px; background:#F3F5EF; border:1px solid #C9CEC2;
  display:grid; place-items:center; font-size:8px; font-weight:700; color:#16202F;
  letter-spacing:.03em; white-space:nowrap; overflow:hidden}
.lamp{position:absolute; left:50%; margin-left:-5px; bottom:-16px; width:10px; height:10px; border-radius:50%;
  background:var(--green); box-shadow:0 0 14px 4px rgba(67,160,71,.72); animation:lampOn 3.4s var(--ease) infinite}
@keyframes lampOn{0%,50%{opacity:.16} 62%,88%{opacity:1} 100%{opacity:.16}}

/* ═══ FACTS STRIP ═══ */
.facts{background:var(--base-alt2); border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2)}
.facts-in{display:grid; grid-template-columns:1fr}
@media(min-width:820px){.facts-in{grid-template-columns:repeat(3,1fr)}}
.fact{padding:22px 0; display:flex; gap:13px; align-items:flex-start}
@media(min-width:820px){.fact{padding:24px 28px; border-left:1px solid var(--line-2)} .fact:first-child{border-left:0; padding-left:0}}
.fact-ic{width:34px; height:34px; border-radius:9px; flex:none; display:grid; place-items:center;
  background:#fff; border:1px solid var(--line-2)}
.fact-ic svg{width:17px; height:17px}
.fact b{display:block; color:var(--navy); font-size:14.5px; font-weight:700; line-height:1.4}
.fact span{display:block; color:var(--on-navy-2); font-size:13px; line-height:1.55; margin-top:3px}

/* ═══ SECTIONS ═══ */
.sec{padding:72px 0}
.sec-alt{background:var(--base-alt); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.sec-navy{background:var(--grad-navy); color:var(--ink)}
.sec-hd{max-width:62ch; margin-bottom:40px}
.sec-n{display:inline-block; font-size:12px; font-weight:700; letter-spacing:.13em; color:var(--blue); margin-bottom:12px}
.sec-navy .sec-n{color:var(--blue)}
.sec-hd h2{font-size:clamp(28px,3.9vw,44px); color:var(--navy); letter-spacing:-.034em; font-weight:900}
.sec-navy .sec-hd h2{color:var(--navy)}
.sec-hd p{margin-top:15px; font-size:17px; color:var(--ink-2); line-height:1.68}
.sec-navy .sec-hd p{color:var(--on-navy-2)}

.grid3{display:grid; gap:20px}
@media(min-width:760px){.grid3{grid-template-columns:repeat(3,1fr)}}
.grid2{display:grid; gap:20px}
@media(min-width:800px){.grid2{grid-template-columns:repeat(2,1fr)}}
.card{background:#fff; border:1px solid var(--line-2); border-radius:var(--r-l);
  box-shadow:var(--e2-shadow); padding:26px;
  transition:transform var(--t-state) var(--ease), box-shadow var(--t-state) var(--ease)}
.card:hover{transform:translateY(-3px); box-shadow:var(--e3-shadow)}
.card-ic{width:46px; height:46px; border-radius:12px; display:grid; place-items:center; margin-bottom:17px;
  background:linear-gradient(145deg,#E8F1FD,#D6E6FA); border:1px solid #CBDFF8}
.card-ic svg{width:22px; height:22px; color:var(--blue)}
.card h3{font-size:18.5px; color:var(--navy); margin-bottom:9px}
.card p{font-size:14.8px; color:var(--ink-2); line-height:1.66}

.steps{display:grid; gap:2px; background:var(--line); border:1px solid var(--line-2);
  border-radius:var(--r-l); overflow:hidden; box-shadow:var(--e2-shadow)}
@media(min-width:900px){.steps{grid-template-columns:repeat(4,1fr)}}
.step{background:#fff; padding:26px 22px}
.step-n{font-size:13px; font-weight:700; color:#fff; width:30px; height:30px; border-radius:8px;
  display:grid; place-items:center; background:var(--blue); margin-bottom:15px}
.step h3{font-size:16.5px; color:var(--navy); margin-bottom:8px}
.step p{font-size:14.2px; color:var(--ink-2); line-height:1.62}

/* ═══ RULE CARDS (2026) ═══ */
.rules{display:grid; gap:16px}
@media(min-width:720px){.rules{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.rules{grid-template-columns:repeat(3,1fr)}}
.rule{background:#fff; border:1px solid var(--line-2); border-left:4px solid var(--blue);
  border-radius:var(--r-m); padding:22px; box-shadow:var(--e1-shadow)}
.rule.warn{border-left-color:var(--saffron)}
.rule.stop{border-left-color:var(--red)}
.rule.good{border-left-color:var(--green)}
.rule-tag{display:inline-block; font-size:10.5px; font-weight:700; letter-spacing:.11em;
  text-transform:uppercase; padding:4px 9px; border-radius:100px; margin-bottom:11px;
  background:var(--blue-pale); color:var(--blue-deep)}
.rule.warn .rule-tag{background:var(--saffron-pale); color:#A63C00}
.rule.stop .rule-tag{background:var(--red-pale); color:#A32B20}
.rule.good .rule-tag{background:var(--green-pale); color:var(--green-deep)}
.rule h3{font-size:17px; color:var(--navy); margin-bottom:7px; letter-spacing:-.018em}
.rule p{font-size:14.3px; color:var(--ink-2); line-height:1.64}

/* ═══ PASSES ═══ */
.pass{background:#fff; border:1px solid var(--line-2); border-radius:var(--r-l);
  box-shadow:var(--e2-shadow); overflow:hidden; display:flex; flex-direction:column}
.pass-top{padding:26px; border-bottom:1px solid var(--line)}
.pass-top.a{background:linear-gradient(150deg,#EDF4FD,#DEEBFB)}
.pass-top.b{background:linear-gradient(150deg,#EBF7EC,#DCF0DE)}
.pass-kind{font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3)}
.pass-price{font-size:clamp(30px,4vw,40px); font-weight:700; letter-spacing:-.032em; color:var(--navy); margin-top:6px; line-height:1}
.pass-price small{font-size:15px; font-weight:600; color:var(--ink-3); letter-spacing:0}
.pass-body{padding:24px 26px 26px}
.pass-body ul{margin:0; padding:0; list-style:none; display:grid; gap:11px}
.pass-body li{display:flex; gap:10px; font-size:14.6px; color:var(--ink-2); line-height:1.58}
.pass-body li svg{width:16px; height:16px; flex:none; margin-top:3px; color:var(--green)}
.pass-body li.no svg{color:var(--ink-3)}

/* ═══ TABLE ═══ */
.tbl-wrap{border:1px solid var(--line-2); border-radius:var(--r-l); overflow:hidden;
  box-shadow:var(--e2-shadow); background:#fff}
.tbl-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch}
caption{text-align:left; padding:18px 20px 0; font-size:13px; color:var(--ink-3)}
th{background:var(--blue); color:#fff; text-align:left; font-size:11.5px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; padding:14px 20px; white-space:nowrap}
td{padding:15px 20px; font-size:14.8px; border-top:1px solid var(--line); white-space:nowrap}
tbody tr:hover{background:#FAFCFF}
td.vc{font-weight:700; color:var(--navy)}
.swatch{display:inline-flex; align-items:center; gap:9px}
.swatch i{width:13px; height:13px; border-radius:4px; display:block; border:1px solid rgba(11,18,32,.16); flex:none}
td.mut{color:var(--ink-3)}

/* ═══ MLFF TIMELINE ═══ */
.tl{display:grid; gap:0; border-left:2px solid var(--line-2); margin-left:7px; padding-left:0}
.tl-i{position:relative; padding:0 0 26px 26px}
.tl-i:last-child{padding-bottom:0}
.tl-i::before{content:''; position:absolute; left:-8px; top:5px; width:14px; height:14px; border-radius:50%;
  background:var(--green); border:3px solid #fff; box-shadow:0 0 0 1px var(--line-2)}
.tl-i.future::before{background:var(--on-navy-3)}
.tl-d{font-size:11.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--blue)}
.tl-i h3{font-size:17px; color:var(--navy); margin:5px 0 6px}
.tl-i p{font-size:14.4px; color:var(--on-navy-2); line-height:1.62}

/* ═══ CHANNELS ═══ */
.chan{display:grid; gap:16px}
@media(min-width:680px){.chan{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.chan{grid-template-columns:repeat(4,1fr)}}
.ch{background:#fff; border:1px solid var(--line-2); border-radius:var(--r-m); padding:22px; box-shadow:var(--e1-shadow)}
.ch-ic{width:40px; height:40px; border-radius:11px; display:grid; place-items:center; margin-bottom:14px;
  background:var(--blue-pale); border:1px solid #D3E5FA}
.ch-ic svg{width:19px; height:19px; color:var(--blue)}
.ch h3{font-size:16px; color:var(--navy); margin-bottom:7px}
.ch p{font-size:14px; color:var(--ink-2); line-height:1.6}

/* ═══ CALCULATOR ═══ */
.calc{display:grid; gap:20px}
@media(min-width:900px){.calc{grid-template-columns:.86fr 1.14fr; gap:26px}}
.calc-in{background:#fff; border:1px solid var(--line-2); border-radius:var(--r-l); box-shadow:var(--e3-shadow); padding:26px}
.calc-in label{display:block; font-size:13px; font-weight:600; color:var(--navy); margin-bottom:11px}
.field{display:flex; align-items:center; border:1px solid var(--line); border-radius:var(--r-s);
  background:var(--base-alt); overflow:hidden;
  transition:border-color var(--t-state) var(--ease), box-shadow var(--t-state) var(--ease)}
.field:focus-within{border-color:var(--blue); box-shadow:0 0 0 3px rgba(21,101,192,.14); background:#fff}
.field span{padding:0 4px 0 15px; font-size:17px; font-weight:600; color:var(--ink-3)}
.field input{flex:1; border:0; background:transparent; outline:none; width:100%; font-family:inherit;
  font-size:20px; font-weight:600; color:var(--navy); padding:13px 15px 13px 4px; font-variant-numeric:tabular-nums}
.field input::-webkit-outer-spin-button,.field input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
.field input[type=number]{-moz-appearance:textfield}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px}
.chip{font-family:inherit; font-size:13px; font-weight:600; color:var(--blue); background:var(--blue-pale);
  border:1px solid #D3E5FA; border-radius:100px; padding:7px 14px; cursor:pointer;
  transition:background var(--t-state) var(--ease), color var(--t-state) var(--ease), border-color var(--t-state) var(--ease)}
.chip:hover{background:var(--blue); color:#fff; border-color:var(--blue)}
.calc-out{display:grid; gap:14px; align-content:start}
@media(min-width:560px){.calc-out{grid-template-columns:1fr 1fr}}
.out{border-radius:var(--r-l); padding:22px; border:1px solid transparent}
.out-fas{background:linear-gradient(150deg,#EBF7EC,#DDF0DF); border-color:#C3E3C6}
.out-upi{background:#fff; border-color:var(--line-2); box-shadow:var(--e1-shadow)}
.out-save{grid-column:1/-1; background:linear-gradient(135deg,#000B82,#0A2ED0); color:#fff; border-color:#000B82;
  box-shadow:0 4px 8px rgba(11,18,32,.14), 0 18px 44px rgba(0,32,91,.26)}
.out-lb{font-size:11.5px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-3)}
.out-save .out-lb{color:#DCEEFF} .out-fas .out-lb{color:var(--green-deep)}
.out-v{font-size:clamp(25px,3.3vw,33px); font-weight:700; letter-spacing:-.03em; margin-top:8px; line-height:1.1}
.out-fas .out-v{color:#1F6B25} .out-upi .out-v{color:var(--ink)} .out-save .out-v{color:#fff}
.out-sm{font-size:13px; color:var(--ink-2); margin-top:6px; line-height:1.5}
.out-save .out-sm{color:#E4F3FF}
.calc-note{font-size:12.5px; color:var(--ink-3); margin-top:16px; line-height:1.6}

/* ═══ FAQ ═══ */
.faq{max-width:900px; border:1px solid var(--line-2); border-radius:var(--r-l);
  overflow:hidden; background:#fff; box-shadow:var(--e2-shadow)}
.q{border-top:1px solid var(--line)}
.q:first-child{border-top:0}
.q-btn{width:100%; display:flex; align-items:center; gap:16px; text-align:left; background:none;
  border:0; cursor:pointer; font-family:inherit; padding:20px 24px; font-size:16px; font-weight:600;
  color:var(--navy); line-height:1.5; transition:background var(--t-state) var(--ease); list-style:none}
.q-btn::-webkit-details-marker{display:none}
.q-btn:hover{background:#FAFCFF}
.q-btn > span:first-child{flex:1 1 auto; min-width:0}
.q-ic{width:26px; height:26px; border-radius:7px; flex:0 0 26px; display:grid; place-items:center;
  background:var(--blue-pale); border:1px solid #D3E5FA; color:var(--blue);
  transition:transform var(--t-state) var(--ease), background var(--t-state) var(--ease)}
.q-ic svg{width:14px; height:14px}
.q[open] .q-ic{transform:rotate(45deg); background:var(--blue); color:#fff; border-color:var(--blue)}
.q-body{padding:0 24px 22px 66px; font-size:15px; color:var(--ink-2); line-height:1.72}
@media(max-width:560px){.q-body{padding-left:24px}}

/* ═══ CLOSE ═══ */
.close{position:relative; overflow:hidden; background:var(--grad-navy); color:var(--ink); padding:72px 0 34px; text-align:center}
.close::before{content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(760px 400px at 50% -18%, rgba(255,255,255,.92), transparent 66%)}
.close-in{position:relative; max-width:680px; margin:0 auto}
.close h2{font-size:clamp(29px,4.3vw,47px); letter-spacing:-.036em; line-height:1.06; font-weight:900; color:var(--navy)}
.close p{margin-top:17px; font-size:17.5px; color:var(--on-navy-2); line-height:1.62}
.close-cta{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:30px}
.phone{display:inline-flex; align-items:center; gap:11px; margin-top:24px;
  font-size:clamp(21px,3vw,27px); font-weight:800; color:var(--navy); font-variant-numeric:tabular-nums}
.phone svg{width:22px; height:22px; color:var(--green-deep); flex:none}
.indep{margin-top:40px; padding-top:22px; border-top:1px solid var(--line-2);
  font-size:12px; color:var(--on-navy-3); line-height:1.66; max-width:680px; margin-left:auto; margin-right:auto}
.updated{margin-top:12px; font-size:11.5px; color:var(--on-navy-3); letter-spacing:.04em}

.float{position:fixed; right:18px; bottom:18px; z-index:70; width:54px; height:54px; border-radius:50%;
  background:var(--green); display:grid; place-items:center;
  box-shadow:0 4px 10px rgba(11,18,32,.24), 0 12px 32px rgba(67,160,71,.4);
  transition:transform var(--t-state) var(--ease)}
.float:hover{transform:scale(1.07)}
.float svg{width:27px; height:27px; color:#fff}

/* ═══ REVEAL ═══ visible by default; hidden only once JS can un-hide it ═══ */
.js-rv .rv{opacity:0; transform:translateY(12px)}
.js-rv .rv.in{opacity:1; transform:none;
  transition:opacity var(--t-reveal) var(--ease), transform var(--t-reveal) var(--ease)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
  .rv{opacity:1 !important; transform:none !important}
  .beam,.lamp{animation:none; opacity:.8}
}
@media print{.hdr,.float,.hero-cta,.close-cta{display:none}}

/* ═══════════════ ARTICLE PAGES ═══════════════ */
.crumb{background:var(--base-alt);border-bottom:1px solid var(--line);padding:13px 0}
.crumb ol{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px}
.crumb li{display:flex;align-items:center;gap:8px;color:var(--ink-3)}
.crumb li+li::before{content:'/';color:var(--line-2)}
.crumb a{color:var(--blue);font-weight:500}
.crumb [aria-current]{color:var(--ink-2)}

.phero{background:var(--grad-navy);color:var(--ink);padding:52px 0 56px;position:relative;overflow:hidden}
.phero::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(820px 440px at 12% -10%,rgba(255,255,255,.88),transparent 62%)}
.phero-in{position:relative;max-width:820px}
.phero .eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:11.5px;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;color:var(--navy);background:#fff;
  border:1px solid var(--line-2);padding:7px 14px;border-radius:100px;margin-bottom:20px}
.phero .eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--green);flex:none}
.phero h1{font-size:clamp(32px,5vw,53px);letter-spacing:-.038em;line-height:1.05;font-weight:900;color:var(--navy)}
.phero .lede{margin-top:18px;font-size:clamp(16px,1.6vw,18.5px);line-height:1.66;color:var(--on-navy-2);max-width:62ch}
.phero .meta{margin-top:22px;font-size:12.5px;color:var(--on-navy-3);letter-spacing:.03em}

.prose{padding:56px 0}
.prose-in{max-width:760px}
.prose h2{font-size:clamp(23px,2.9vw,31px);color:var(--navy);margin-top:44px;letter-spacing:-.026em}
.prose h2:first-of-type{margin-top:0}
.prose h3{font-size:19px;color:var(--navy);margin-top:30px}
.prose p{margin-top:16px;font-size:16.8px;line-height:1.75;color:var(--ink-2)}
.prose ul,.prose ol{margin-top:16px;padding-left:0;list-style:none;display:grid;gap:11px}
.prose ul li,.prose ol li{display:flex;gap:11px;font-size:16.4px;line-height:1.68;color:var(--ink-2)}
.prose ul li::before{content:'';flex:none;width:7px;height:7px;border-radius:50%;background:var(--blue);margin-top:11px}
.prose ol{counter-reset:s}
.prose ol li{counter-increment:s}
.prose ol li::before{content:counter(s);flex:none;width:23px;height:23px;border-radius:7px;background:var(--navy);
  color:#fff;font-size:12px;font-weight:700;display:grid;place-items:center;margin-top:5px}
.prose strong{color:var(--ink);font-weight:600}
.prose a{font-weight:500;border-bottom:1px solid rgba(21,101,192,.3)}
.prose .tbl-wrap{margin-top:24px}

.callout{margin-top:26px;border:1px solid var(--line-2);border-left:4px solid var(--blue);
  border-radius:var(--r-m);background:#fff;padding:20px 22px;box-shadow:var(--e1-shadow)}
.callout.warn{border-left-color:var(--saffron)}
.callout.stop{border-left-color:var(--red)}
.callout.good{border-left-color:var(--green)}
.callout b{display:block;color:var(--navy);font-size:15.5px;margin-bottom:5px}
.callout p{margin-top:0;font-size:15.2px}

.related{background:var(--base-alt);border-top:1px solid var(--line);padding:52px 0}
.related h2{font-size:clamp(24px,3.1vw,34px);color:var(--navy);margin-bottom:26px;font-weight:900;letter-spacing:-.032em}
.rel-grid{display:grid;gap:14px}
@media(min-width:700px){.rel-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1020px){.rel-grid{grid-template-columns:repeat(3,1fr)}}
.rel{display:block;background:#fff;border:1px solid var(--line-2);border-radius:var(--r-m);
  padding:19px 21px;box-shadow:var(--e1-shadow);
  transition:transform var(--t-state) var(--ease),box-shadow var(--t-state) var(--ease)}
.rel:hover{transform:translateY(-2px);box-shadow:var(--e2-shadow)}
.rel b{display:block;color:var(--navy);font-size:16px;font-weight:600;letter-spacing:-.012em}
.rel span{display:block;color:var(--ink-3);font-size:13.6px;line-height:1.55;margin-top:5px}

/* ═══════════════ v3 — LOCKUP, CHIPS, BADGES, COUNTERS, MOTION ═══════════════ */

/* the real SBI + FASTag lockup, in a white card that hides its baked background */
.lockup{display:inline-block;background:#fff;border-radius:14px;padding:10px 16px;
  box-shadow:0 4px 10px rgba(0,0,0,.22),0 16px 40px rgba(0,0,0,.24);line-height:0}
.lockup img{height:38px;width:auto;display:block}
.hdr .lockup{padding:6px 11px;border-radius:10px;box-shadow:0 2px 6px rgba(0,0,0,.2)}
.hdr .lockup img{height:26px}
@media(max-width:520px){.hdr .lockup img{height:22px}}

/* hero centring */
.hero-grid.centred{grid-template-columns:1fr;text-align:center;justify-items:center}
.hero .hero-sub{margin-left:auto;margin-right:auto}
.hero .hero-cta{justify-content:center}
.hero h1 .amp{display:inline}
.hero h1 br{display:block;content:""}
.tint-blue{color:var(--blue)}
.tint-green{color:var(--green-deep)}
.tint-saffron{color:var(--saffron)}

/* trust chips — social proof row */
.chips-row{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-bottom:22px}
.tchip{display:inline-flex;align-items:center;gap:8px;background:#fff;
  border:1px solid var(--line-2);padding:8px 15px;border-radius:100px;
  font-size:13px;font-weight:600;color:var(--ink-2);letter-spacing:.01em;
  box-shadow:0 1px 2px rgba(13,71,161,.07)}
.tchip svg{width:14px;height:14px;flex:none}
.tchip b{font-weight:800;color:var(--navy)}

/* badge pills on cards */
.badges{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px}
.badge{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:800;
  letter-spacing:.09em;text-transform:uppercase;padding:5px 11px;border-radius:100px;
  color:#fff;position:relative;overflow:hidden}
.badge svg{width:11px;height:11px;flex:none}
.badge.hot{background:var(--grad-warm)}
.badge.go{background:var(--grad-go)}
.badge.info{background:var(--grad-blue)}
.badge.dark{background:var(--navy)}
/* one restrained shimmer, badges only */
.badge.hot::after{content:'';position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.42),transparent);
  animation:shimmer 3.6s var(--ease) infinite}
@keyframes shimmer{0%{left:-120%}55%,100%{left:130%}}

/* stats band with counters */
.stats{background:var(--base-alt2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:44px 0}
.stats-in{display:grid;gap:26px;text-align:center}
@media(min-width:620px){.stats-in{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.stats-in{grid-template-columns:repeat(4,1fr)}}
.stat{position:relative}
@media(min-width:980px){.stat+.stat::before{content:'';position:absolute;left:-13px;top:14%;bottom:14%;width:1px;background:var(--line-2)}}
.stat-v{font-size:clamp(32px,4.4vw,46px);font-weight:900;letter-spacing:-.038em;line-height:1;
  color:var(--navy);font-variant-numeric:tabular-nums}
.stat-v .u{font-size:.52em;font-weight:800;color:var(--blue);letter-spacing:-.01em}
.stat-l{margin-top:9px;font-size:13.5px;font-weight:600;color:var(--ink-2);line-height:1.5}
.stat-s{margin-top:3px;font-size:12px;color:var(--ink-3)}

/* comparison table emphasis */
tbody tr.hi{background:var(--green-pale)}
tbody tr.hi:hover{background:#DFF2E0}
td.good{color:var(--green-deep);font-weight:600}
td.bad{color:#A32B20;font-weight:600}

/* section eyebrow gets colour variants */
.sec-n.warm{color:var(--saffron)}
.sec-n.go{color:var(--green-deep)}

/* neat legal strip, replaces the grey paragraph slab */
.legal{margin-top:34px;padding-top:20px;border-top:1px solid var(--line-2)}
.legal-line{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:7px 14px;
  font-size:12.5px;color:var(--on-navy-2)}
.legal-line span{display:inline-flex;align-items:center;gap:7px}
.legal-line span+span::before{content:'';width:4px;height:4px;border-radius:50%;background:var(--line-2)}
.legal details{margin-top:12px}
.legal summary{display:inline-flex;align-items:center;gap:7px;cursor:pointer;list-style:none;
  font-size:12px;font-weight:700;color:var(--navy);background:#fff;
  border:1px solid var(--line-2);padding:6px 13px;border-radius:100px;
  transition:background var(--t-state) var(--ease)}
.legal summary::-webkit-details-marker{display:none}
.legal summary:hover{background:var(--blue-pale)}
.legal summary svg{width:12px;height:12px;transition:transform var(--t-state) var(--ease)}
.legal details[open] summary svg{transform:rotate(180deg)}
.legal-body{max-width:720px;margin:14px auto 0;font-size:12.5px;line-height:1.7;
  color:var(--on-navy-2);text-align:left;
  background:#fff;border:1px solid var(--line-2);border-radius:var(--r-m);padding:16px 18px}
.legal-stamp{margin-top:14px;font-size:11.5px;color:var(--on-navy-3);letter-spacing:.04em}

/* nav underline on hover */
.nav a{position:relative;padding-bottom:3px}
.nav a::after{content:'';position:absolute;left:0;right:100%;bottom:0;height:2px;
  background:var(--green-lift);border-radius:2px;transition:right var(--t-state) var(--ease)}
.nav a:hover::after,.nav a[aria-current]::after{right:0}

/* buttons get a touch more presence */
.btn-go{background:var(--grad-go)}
.btn-go:hover{background:linear-gradient(135deg,#2A6E2F,#54BE59)}
.btn-pri{background:var(--grad-blue)}

@media (prefers-reduced-motion:reduce){
  .badge.hot::after{animation:none;display:none}
  .nav a::after{transition:none}
}

/* ═══ scroll progress ═══ one thin line, top of viewport ═══ */
.prog{position:fixed;top:0;left:0;height:3px;width:100%;z-index:90;
  transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--green-lift),var(--saffron-lift));
  will-change:transform}
@media (prefers-reduced-motion:reduce){.prog{display:none}}

/* counters hold their width so the row never jitters while counting */
.ctr{font-variant-numeric:tabular-nums;display:inline-block;min-width:1ch}

/* icon tiles get a soft pulse as they reveal — finite, once */
.js-rv .card.in .card-ic,.js-rv .ch.in .ch-ic{animation:pop var(--t-hero) var(--ease) both}
@keyframes pop{0%{transform:scale(.86);opacity:0}60%{transform:scale(1.04);opacity:1}100%{transform:scale(1);opacity:1}}
@media (prefers-reduced-motion:reduce){.js-rv .card.in .card-ic,.js-rv .ch.in .ch-ic{animation:none}}

/* ═══════════════ SPECIFICITY + CONTRAST FIXES ═══════════════
   These component classes sit on <p> elements inside containers that also
   style bare <p>. `.step p` (0,1,1) was beating `.step-n` (0,1,0), so the
   step chips rendered dark-grey-on-blue and the section eyebrows inherited
   the 17px intro size. Scoping them to two classes restores the intent. */
.step p.step-n{
  color:#fff; font-size:13px; font-weight:800; line-height:1;
  width:30px; height:30px; margin-bottom:15px;
}
.sec-hd p.sec-n{
  font-size:12px; font-weight:800; letter-spacing:.13em;
  line-height:1; margin:0 0 12px;
}
/* saffron on white is 3.79:1 — too light for a 12px label. Deepen it. */
.sec-n.warm{color:#9C4E00}
.sec-n.go{color:#1F6B22}
/* white on the lighter half of --grad-blue is 3.68:1 at 10.5px. Deepen. */
.badge.info{background:linear-gradient(135deg,#000B82,#0A2ED0)}
.badge.go{background:linear-gradient(135deg,#1A5A1C,#237523)}
.badge.hot{background:linear-gradient(135deg,#9C4E00,#C96A00)}

/* white on --grad-go measured 2.06:1 — the CTA is the most important text on
   the page, so the green is deepened until it passes rather than lightened. */
.btn-go{background:linear-gradient(135deg,#1A5A1C,#237523)}
.btn-go:hover{background:linear-gradient(135deg,#175317,#227022)}
.float{background:linear-gradient(135deg,#1A5A1C,#237523)}

/* ═══════════════ DARK ANCHOR BANDS ═══════════════
   The page was reading as one flat light wash. Three sections now go deep —
   stats, the MLFF timeline and the closing CTA — so the eye gets a rhythm of
   light, tint, dark down the page. The deep blue is the sampled SBI #0010B0
   taken darker, not a new hue. */
:root{
  --grad-deep:linear-gradient(165deg,#00075C 0%,#000E96 44%,#0A1FC0 100%);
  --on-deep:#FFFFFF;
  --on-deep-2:#BFD4FF;
  --on-deep-3:#94AEEA;
  --line-deep:rgba(255,255,255,.17);
}

/* ── the band itself ─────────────────────────────────────────────── */
.stats.dark,
.sec-navy,
.close{
  background:var(--grad-deep);
  color:var(--on-deep);
  border-top:0; border-bottom:0;
}
.stats.dark{border-top:1px solid #000E96; border-bottom:1px solid #000E96}

/* a soft light bloom so the bands are not dead flat */
.stats.dark{position:relative; overflow:hidden}
.stats.dark::before,
.sec-navy::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(760px 420px at 12% -14%, rgba(130,223,255,.22), transparent 62%);
}
.sec-navy{position:relative; overflow:hidden}
.stats.dark .shell,.sec-navy .shell{position:relative}
.close::before{
  background:radial-gradient(780px 420px at 50% -20%, rgba(130,223,255,.24), transparent 66%);
}

/* ── type inside a dark band ─────────────────────────────────────── */
.stats.dark .stat-v{color:#fff}
.stats.dark .stat-v .u{color:#82DFFF}
.stats.dark .stat-l{color:var(--on-deep-2)}
.stats.dark .stat-s{color:var(--on-deep-3)}
@media(min-width:980px){.stats.dark .stat+.stat::before{background:var(--line-deep)}}

.sec-navy .sec-hd h2{color:#fff}
.sec-navy .sec-hd p{color:var(--on-deep-2)}
.sec-navy .sec-n{color:#82DFFF}
.sec-navy .tl{border-left-color:var(--line-deep)}
.sec-navy .tl-i::before{border-color:#000E96; box-shadow:0 0 0 1px rgba(255,255,255,.28)}
.sec-navy .tl-i.future::before{background:var(--on-deep-3)}
.sec-navy .tl-d{color:#82DFFF}
.sec-navy .tl-i h3{color:#fff}
.sec-navy .tl-i p{color:var(--on-deep-2)}

.close h2{color:#fff}
.close p{color:var(--on-deep-2)}
.close .phone{color:#fff}
.close .phone svg{color:#63D163}
.close .legal{border-top-color:var(--line-deep)}
.close .legal-line{color:var(--on-deep-2)}
.close .legal-line span+span::before{background:var(--on-deep-3)}
.close .legal summary{color:#fff; background:rgba(255,255,255,.12); border-color:var(--line-deep)}
.close .legal summary:hover{background:rgba(255,255,255,.2)}
.close .legal-body{background:rgba(0,0,0,.22); border-color:var(--line-deep); color:var(--on-deep-2)}
.close .legal-body strong{color:#fff}
.close .legal-stamp{color:var(--on-deep-3)}
.close .btn-ghost{background:transparent; color:#fff; border-color:rgba(255,255,255,.4)}
.close .btn-ghost:hover{background:rgba(255,255,255,.12); border-color:#fff}
/* .sec-navy .sec-hd p (0,2,1) was beating .sec-navy .sec-n (0,2,0) */
.sec-navy .sec-hd p.sec-n{color:#82DFFF}

/* ═══════════════ DARK HEADER + MOVING TICKER ═══════════════ */
.hdr{
  background:linear-gradient(100deg,#00075C 0%,#000E96 52%,#0A1FC0 100%) !important;
  border-bottom:1px solid rgba(255,255,255,.14) !important;
}
.hdr .lock-sbi{color:#fff}
.hdr .lock img{border-radius:8px; box-shadow:0 2px 6px rgba(0,0,0,.28)}
.nav a{color:#BFD4FF}
.nav a:hover{color:#fff}
.nav a::after{background:#82DFFF}

/* slim announcement strip, continuously moving */
.ticker{
  position:sticky; top:64px; z-index:55;
  background:#82DFFF; color:#00075C;
  border-bottom:1px solid rgba(0,7,92,.18);
  overflow:hidden; height:34px; display:flex; align-items:center;
}
.ticker-track{
  display:flex; gap:0; white-space:nowrap; will-change:transform;
  animation:marquee 34s linear infinite;
}
.ticker-track:hover{animation-play-state:paused}
.ticker-seq{display:flex; align-items:center; flex:none}
.ticker-seq b{
  display:inline-flex; align-items:center; gap:9px;
  font-size:12.5px; font-weight:700; letter-spacing:.02em; padding:0 22px;
}
.ticker-seq b::before{
  content:''; width:6px; height:6px; border-radius:50%;
  background:#00075C; flex:none; opacity:.55;
}
@keyframes marquee{from{transform:translateX(0)} to{transform:translateX(-50%)}}
@media(max-width:560px){.ticker{height:30px} .ticker-seq b{font-size:11.5px; padding:0 16px}}

/* the dark bands drift very slowly so they are not static slabs */
.stats.dark::before,.sec-navy::before,.close::before{
  background-size:180% 180%;
  animation:drift 26s var(--ease) infinite alternate;
}
@keyframes drift{from{background-position:0% 0%} to{background-position:100% 60%}}

/* the WhatsApp button breathes, with an expanding ring */
.float{animation:breathe 4.4s var(--ease) infinite}
@keyframes breathe{0%,100%{transform:scale(1)} 50%{transform:scale(1.06)}}
.float::after{
  content:''; position:absolute; inset:0; border-radius:50%;
  border:2px solid rgba(99,209,99,.65);
  animation:ring 2.8s var(--ease) infinite;
}
@keyframes ring{0%{transform:scale(1);opacity:.75} 70%,100%{transform:scale(1.7);opacity:0}}
.float:hover{animation:none; transform:scale(1.09)}

/* the tag being read throws a ring of its own */
.tag::after{
  content:''; position:absolute; inset:-6px; border-radius:8px;
  border:2px solid rgba(0,16,176,.55);
  animation:tagping 3.4s var(--ease) infinite;
}
@keyframes tagping{0%,42%{transform:scale(.8);opacity:0} 58%{transform:scale(1);opacity:.9} 100%{transform:scale(1.5);opacity:0}}

/* buttons nudge their icon on hover */
.btn svg{transition:transform var(--t-state) var(--ease)}
.btn:hover svg{transform:translateX(2px) scale(1.06)}

/* timeline entries arrive from the left */
.js-rv .tl-i{opacity:0; transform:translateX(-14px)}
.js-rv .tl.in .tl-i{opacity:1; transform:none;
  transition:opacity var(--t-reveal) var(--ease), transform var(--t-reveal) var(--ease)}
.js-rv .tl.in .tl-i:nth-child(2){transition-delay:90ms}
.js-rv .tl.in .tl-i:nth-child(3){transition-delay:180ms}
.js-rv .tl.in .tl-i:nth-child(4){transition-delay:270ms}

/* table rows lift a touch */
tbody tr{transition:background var(--t-state) var(--ease), transform var(--t-state) var(--ease)}
tbody tr:hover{transform:translateX(2px)}

/* stat values tick up with a slight rise */
.js-rv .stat.in .stat-v{animation:riseIn var(--t-hero) var(--ease) both}
@keyframes riseIn{from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none}}

/* ═══════════════ COMPACT FOOTER ═══════════════ */
.close{padding:48px 0 26px !important}
.close h2{font-size:clamp(23px,3vw,32px) !important}
.close .close-lead{display:none}
.close-cta{margin-top:22px !important; gap:10px}
.close .phone{margin-top:18px; font-size:clamp(20px,2.6vw,25px)}
.close .legal{margin-top:26px; padding-top:16px}
.close .legal-line{font-size:11.5px; gap:5px 11px}
.close .legal details{margin-top:9px}
.close .legal summary{font-size:11px; padding:5px 11px}
.close .legal-body{margin-top:11px; font-size:11.8px; line-height:1.62; padding:13px 15px}
.close .legal-stamp{margin-top:10px; font-size:11px}

@media (prefers-reduced-motion:reduce){
  .ticker-track{animation:none; transform:none}
  .stats.dark::before,.sec-navy::before,.close::before{animation:none}
  .float,.float::after,.tag::after{animation:none}
  .float::after{display:none}
  .js-rv .tl-i{opacity:1; transform:none}
  .js-rv .stat.in .stat-v{animation:none}
  tbody tr:hover{transform:none}
  .btn:hover svg{transform:none}
}