/* ============================================================
   ROADCREW — DESIGN SYSTEM
   Concept: Interstate Signage. The visual language of American
   road infrastructure — route shields, lane stripes, mile
   markers, reflective sheen, hazard chevrons — applied to a
   bright, high-contrast conversion surface.
   Shared by index.html (drivers) and carriers.html (fleets).
   ============================================================ */

:root{
  /* surface */
  --paper:#FFFFFF;
  --bg:#EFF4FA;
  --bg-2:#E3EDF7;
  --navy:#081422;
  --navy-2:#0E2135;
  --navy-3:#16324D;

  /* type */
  --ink:#08131F;
  --body:#42556B;
  --muted:#78899F;
  --faint:#A9B8CA;

  /* brand */
  --blue:#1487E0;
  --blue-dk:#0A5FB8;
  --blue-dp:#064A93;
  --blue-hi:#4FADF7;
  --blue-wash:#E6F2FE;

  /* signal */
  --amber:#F0A020;
  --amber-dk:#C87C0A;
  --amber-wash:#FEF4E4;
  --ok:#0E8F55;

  --line:#D5E2F0;
  --line-2:#BCD1E7;

  --display:"Barlow Condensed",'Arial Narrow',sans-serif;
  --body-f:"Barlow",-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  --shell:1200px;
  --callbar:0px;

  --sh-1:0 1px 2px rgba(8,19,31,.05), 0 2px 8px rgba(8,19,31,.04);
  --sh-2:0 4px 12px rgba(8,19,31,.07), 0 12px 32px rgba(8,19,31,.08);
  --sh-3:0 8px 20px rgba(8,19,31,.10), 0 24px 60px rgba(8,19,31,.13);
  --sh-blue:0 10px 30px rgba(20,135,224,.34);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--body);
  font-family:var(--body-f);font-size:16px;line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  padding-bottom:var(--callbar);
}
img{max-width:100%;display:block}
a{color:var(--blue-dk);text-decoration:none}
::selection{background:var(--blue);color:#fff}

/* asphalt grain — sits over everything, barely there */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.5;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4'/></filter><rect width='160' height='160' filter='url(%23g)' opacity='.032'/></svg>");
}

.shell{width:100%;max-width:var(--shell);margin:0 auto;padding-left:22px;padding-right:22px}
section{position:relative;z-index:2}

/* ══════════════════════ SIGNATURE ELEMENTS ══════════════════════ */

/* hazard chevron rule — diagonal safety striping */
.hazard{
  height:7px;width:100%;
  background:repeating-linear-gradient(115deg,
    var(--blue) 0 14px, var(--blue-dp) 14px 28px);
}
.hazard.amber{background:repeating-linear-gradient(115deg,
  var(--amber) 0 14px, var(--amber-dk) 14px 28px)}

/* lane-stripe divider */
.lane{
  height:2px;width:100%;position:relative;overflow:hidden;
  background:repeating-linear-gradient(90deg,
    var(--line-2) 0 26px, transparent 26px 52px);
}
.lane::after{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,
    var(--blue) 0 26px, transparent 26px 52px);
  animation:lane-run 2.4s linear infinite;
}
@keyframes lane-run{to{transform:translateX(52px)}}

/* interstate route shield */
.shield{
  position:relative;display:block;width:100%;aspect-ratio:1/1.04;
  max-width:150px;margin:0 auto;
}
.shield svg{width:100%;height:100%;display:block;filter:drop-shadow(0 6px 14px rgba(8,19,31,.16))}
.shield .sh-body{fill:var(--paper);stroke:var(--navy);stroke-width:5}
.shield .sh-crown{fill:var(--navy)}
.shield-txt{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;padding:6% 19% 4%;
}
.shield-txt .t{
  font-family:var(--display);font-weight:800;font-style:italic;
  font-size:clamp(18px,4.2vw,24px);line-height:.9;color:var(--ink);
  text-transform:uppercase;letter-spacing:-.01em;
  width:100%;text-align:center;overflow-wrap:break-word;
}
.shield-txt .s{
  font-size:8.4px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);font-weight:700;margin-top:6px;text-align:center;
  line-height:1.3;width:100%;overflow-wrap:break-word;hyphens:auto;
}

/* mile-marker section label */
.marker{
  display:inline-flex;align-items:stretch;overflow:hidden;border-radius:5px;
  box-shadow:var(--sh-1);margin-bottom:14px;
}
.marker .mm{
  background:var(--navy);color:#fff;font-family:var(--display);font-weight:700;
  font-size:12px;letter-spacing:.06em;padding:5px 9px;display:grid;place-items:center;
}
.marker .lb{
  background:var(--paper);color:var(--blue-dk);font-size:10.5px;font-weight:800;
  letter-spacing:.2em;text-transform:uppercase;padding:5px 13px;display:grid;place-items:center;
}

/* oversized outlined numeral */
.ghost{
  font-family:var(--display);font-weight:800;font-style:italic;
  -webkit-text-stroke:2px var(--line-2);color:transparent;
  line-height:.78;user-select:none;pointer-events:none;
}

/* scrolling marquee */
.ticker{
  background:var(--navy);overflow:hidden;position:relative;
  border-top:1px solid var(--navy-3);border-bottom:1px solid var(--navy-3);
}
.ticker-run{display:flex;width:max-content;animation:tick 34s linear infinite}
.ticker span{
  font-family:var(--display);font-weight:700;font-style:italic;
  font-size:17px;letter-spacing:.05em;text-transform:uppercase;
  color:#7B94AE;padding:11px 0;white-space:nowrap;display:flex;align-items:center;
}
.ticker span b{color:var(--blue-hi);font-weight:700}
.ticker span i{
  display:inline-block;width:5px;height:5px;border-radius:50%;
  background:var(--blue);margin:0 22px;flex:none;font-style:normal;
}
@keyframes tick{to{transform:translateX(-50%)}}

/* reflective sheen used on primary buttons */
.sheen{position:relative;overflow:hidden}
.sheen::after{
  content:"";position:absolute;top:0;left:-60%;width:32%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.36),transparent);
  transform:skewX(-22deg);animation:sheen 3.6s ease-in-out infinite;
}
@keyframes sheen{0%{left:-60%}55%{left:132%}100%{left:132%}}

/* ══════════════════════ HEADER ══════════════════════ */
/* the whole masthead travels together */
.navstack{position:sticky;top:0;z-index:60}
.topbar{
  background:rgba(255,255,255,.93);
  backdrop-filter:saturate(170%) blur(14px);-webkit-backdrop-filter:saturate(170%) blur(14px);
  border-bottom:1px solid var(--line);
}

/* ── audience switch ──────────────────────────────────────────────────
   Two audiences, two funnels. Below 900px the inline nav is gone, so
   this segmented control carries the whole site structure: always
   visible, one tap, and it announces that a carrier path exists to a
   fleet owner who landed on the driver page.                        */
.switch{
  display:grid;grid-template-columns:1fr 1fr;
  background:rgba(255,255,255,.96);
  backdrop-filter:saturate(170%) blur(14px);-webkit-backdrop-filter:saturate(170%) blur(14px);
  border-bottom:1px solid var(--line);
}
.switch a{
  position:relative;display:flex;align-items:center;justify-content:center;
  padding:12px 8px 12px;
  font-family:var(--display);font-weight:700;font-size:17px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  -webkit-tap-highlight-color:transparent;
  transition:color .16s ease, background .16s ease;
}
.switch a + a{border-left:1px solid var(--line)}
.switch a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:transparent;
}
.switch a.on{color:var(--ink);background:var(--blue-wash)}
.switch a.on::after{
  background:repeating-linear-gradient(115deg,var(--blue) 0 8px, var(--blue-dp) 8px 16px);
}
.switch a:active{background:var(--bg-2)}
@media(min-width:900px){ .switch{display:none} }


/* anchor targets must clear the sticky masthead, or "Apply now" scrolls
   the form underneath it and the driver sees a header instead of a field */
#top,#apply,#talk,#faq,:target{scroll-margin-top:124px}
@media(min-width:900px){ #top,#apply,#talk,#faq,:target{scroll-margin-top:86px} }
.topbar-in{
  max-width:var(--shell);margin:0 auto;padding:8px 22px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.brand{display:flex;align-items:center;gap:11px;min-width:0}
.brand-chip{
  width:46px;height:46px;border-radius:11px;background:#fff;flex:none;
  display:grid;place-items:center;overflow:hidden;border:1px solid var(--line);
}
.brand-chip img{width:112%;max-width:none}
.brand-txt{display:flex;flex-direction:column;line-height:1}
.brand-name{
  font-family:var(--display);font-weight:800;font-style:italic;
  font-size:24px;letter-spacing:.01em;color:var(--ink);
}
.brand-name b{color:var(--blue);font-weight:800}
.brand-sub{
  font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);font-weight:700;margin-top:3px;white-space:nowrap;
}
.nav{display:none;align-items:center;gap:26px}
@media(min-width:900px){ .nav{display:flex} }
.nav a{
  font-family:var(--display);font-weight:700;font-size:16px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--body);transition:color .15s;position:relative;
}
.nav a::after{
  content:"";position:absolute;left:0;right:100%;bottom:-5px;height:2px;
  background:var(--blue);transition:right .22s ease;
}
.nav a:hover{color:var(--ink)}
.nav a:hover::after{right:0}
.nav a.on{color:var(--blue-dk)}
.nav a.on::after{right:0}
.top-call{
  display:inline-flex;align-items:center;gap:8px;flex:none;
  font-family:var(--display);font-weight:700;font-size:19px;
  color:#fff;background:linear-gradient(135deg,var(--blue),var(--blue-dk));
  padding:9px 16px;border-radius:9px;white-space:nowrap;box-shadow:var(--sh-blue);
  transition:transform .16s ease, box-shadow .16s ease;
}
.top-call:hover{transform:translateY(-1px);box-shadow:0 14px 34px rgba(20,135,224,.44)}
.top-call svg{width:16px;height:16px;fill:#fff;flex:none}
.top-call .lbl{display:none}
@media(min-width:900px){ .top-call .lbl{display:inline} }

/* ══════════════════════ HERO ══════════════════════ */
.hero{position:relative;overflow:hidden;background:var(--paper)}
.hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero-bg::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(72% 52% at 86% 2%, rgba(20,135,224,.16), transparent 60%),
    radial-gradient(58% 44% at 0% 98%, rgba(6,74,147,.10), transparent 64%),
    linear-gradient(180deg,#FFFFFF 0%, #F8FBFF 52%, #EAF2FB 100%);
}
/* receding lane perspective */
.hero-road{
  position:absolute;right:-6%;bottom:-2%;width:74%;height:88%;
  opacity:.5;pointer-events:none;
}
@media(max-width:979px){ .hero-road{width:130%;right:-30%;opacity:.32} }
.hero-in{position:relative;z-index:2;padding-top:38px;padding-bottom:50px}

.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-size:10.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:var(--blue-dk);border:1px solid var(--line-2);border-radius:100px;
  padding:6px 15px;background:var(--blue-wash);box-shadow:var(--sh-1);
}
.eyebrow i{
  width:6px;height:6px;border-radius:50%;background:var(--blue);flex:none;
  box-shadow:0 0 0 4px rgba(20,135,224,.2);animation:pulse 2.2s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.8)}}

h1{
  font-family:var(--display);font-weight:800;font-style:italic;
  font-size:clamp(42px,11vw,78px);line-height:.9;letter-spacing:-.008em;
  color:var(--ink);margin:20px 0 0;text-transform:uppercase;
}
h1 .hl{
  background:linear-gradient(96deg,var(--blue-hi),var(--blue) 40%,var(--blue-dp));
  -webkit-background-clip:text;background-clip:text;color:transparent;display:inline-block;
}
.sub{font-size:clamp(15.5px,4vw,19.5px);color:var(--body);max-width:46ch;margin:18px 0 0;line-height:1.55}
.sub b{color:var(--ink);font-weight:600}

/* big promise slab */
.promise{
  display:flex;align-items:stretch;margin:26px 0 0;border-radius:14px;overflow:hidden;
  background:var(--paper);border:1px solid var(--line);box-shadow:var(--sh-2);max-width:520px;
}
.promise .n{
  background:linear-gradient(160deg,var(--navy-2),var(--navy));
  color:#fff;font-family:var(--display);font-weight:800;font-style:italic;
  font-size:42px;line-height:1;display:grid;place-items:center;padding:0 18px;flex:none;
  position:relative;
}
.promise .n::after{
  content:"";position:absolute;right:0;top:0;bottom:0;width:4px;
  background:repeating-linear-gradient(180deg,var(--blue) 0 8px, var(--blue-dp) 8px 16px);
}
.promise .c{padding:14px 17px}
.promise p{margin:0;font-size:13.8px;line-height:1.45;color:var(--body)}
.promise p b{color:var(--ink);display:block;font-weight:700;font-size:15.5px;margin-bottom:2px}

@media(min-width:980px){
  .hero-in{
    display:grid;grid-template-columns:1fr 468px;column-gap:56px;
    align-items:start;padding-top:60px;padding-bottom:74px;
  }
  .hero-copy h1{font-size:clamp(54px,5.4vw,76px)}
}

/* ══════════════════════ FORM ══════════════════════ */
.formwrap{margin-top:30px}
@media(min-width:980px){ .formwrap{margin-top:2px} }
.form-card{
  background:var(--paper);border:1px solid var(--line);border-radius:18px;
  padding:0 0 18px;position:relative;overflow:hidden;box-shadow:var(--sh-3);
}
.form-top{
  background:linear-gradient(160deg,var(--navy-2),var(--navy));
  padding:19px 20px 17px;position:relative;
}
.form-top::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:5px;
  background:repeating-linear-gradient(115deg,var(--blue) 0 12px, var(--blue-dp) 12px 24px);
}
.form-top h2{
  font-family:var(--display);font-weight:800;font-style:italic;text-transform:uppercase;
  font-size:28px;line-height:1;color:#fff;margin:0;
}
.form-top p{margin:7px 0 0;font-size:13px;color:#93AAC4;line-height:1.45}
.form-body{padding:18px 18px 0}

.grid{display:grid;gap:13px;margin-top:14px}
.grid:first-child{margin-top:0}
@media(min-width:560px){ .g2{grid-template-columns:1fr 1fr} }

.field{display:flex;flex-direction:column;gap:6px}
.field > label,.field .flabel{
  font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
}
.field .req{color:var(--blue)}
.field .opt{color:var(--faint);letter-spacing:.05em;font-weight:600}
input[type=text],input[type=tel],input[type=email],input[type=number],select,textarea{
  width:100%;font-family:var(--body-f);font-size:16.5px;font-weight:500;
  color:var(--ink);background:#FAFCFF;border:1px solid var(--line-2);border-radius:10px;
  padding:13px 14px;outline:none;-webkit-appearance:none;appearance:none;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
textarea{min-height:88px;resize:vertical;line-height:1.5}
select{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2378899F'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat:no-repeat;background-position:right 11px center;background-size:22px;padding-right:40px;
}
input::placeholder,textarea::placeholder{color:#A9B8CA}
input:focus,select:focus,textarea:focus{border-color:var(--blue);background:#fff;box-shadow:0 0 0 3px rgba(20,135,224,.16)}
input.bad,select.bad,textarea.bad{border-color:#C6402D;box-shadow:0 0 0 3px rgba(198,64,45,.13)}
input[type=number]{-moz-appearance:textfield}
input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{position:relative}
.chip input{position:absolute;opacity:0;width:0;height:0}
.chip span{
  display:inline-block;cursor:pointer;user-select:none;font-size:13px;font-weight:600;
  color:var(--body);border:1px solid var(--line-2);border-radius:100px;padding:9px 15px;
  background:#FAFCFF;transition:all .15s ease;
}
.chip input:checked + span{
  color:#fff;border-color:var(--blue-dp);
  background:linear-gradient(135deg,var(--blue),var(--blue-dk));box-shadow:0 4px 12px rgba(20,135,224,.3);
}
.chip input:focus-visible + span{box-shadow:0 0 0 3px rgba(20,135,224,.3)}

.consent{margin-top:14px;padding:13px 14px;border-radius:11px;background:#F5F9FE;border:1px solid var(--line)}
.consent.bad{border-color:#C6402D;box-shadow:0 0 0 3px rgba(198,64,45,.12)}
.consent label{display:flex;gap:11px;align-items:flex-start;cursor:pointer}
.consent input{flex:none;width:22px;height:22px;margin:1px 0 0;accent-color:var(--blue);cursor:pointer}
.consent .t{font-size:11.4px;line-height:1.5;color:var(--muted)}
.consent .t b{color:var(--ink);font-weight:600}

.submit{
  width:100%;margin-top:14px;cursor:pointer;
  font-family:var(--display);font-weight:800;font-style:italic;text-transform:uppercase;
  font-size:25px;letter-spacing:.02em;color:#fff;
  background:linear-gradient(135deg,var(--blue),var(--blue-dk));
  border:0;border-radius:11px;padding:17px 20px;box-shadow:var(--sh-blue);
  transition:transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.submit:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(20,135,224,.48)}
.submit:active{transform:translateY(0)}
.submit[disabled]{filter:grayscale(.45) brightness(.94);cursor:wait}

.microtrust{display:flex;flex-wrap:wrap;gap:5px 15px;margin-top:12px;font-size:11.4px;color:var(--muted);justify-content:center}
.microtrust span{display:inline-flex;align-items:center;gap:5px}
.microtrust svg{width:13px;height:13px;fill:var(--ok);flex:none}

.formerr{
  display:none;margin-top:12px;padding:11px 13px;border-radius:10px;
  background:#FDECE9;border:1px solid #F0C0B7;color:#9E3020;font-size:13px;line-height:1.45;
}
.formerr.show{display:block}

.done{display:none;text-align:center;padding:26px 18px 20px}
.done.show{display:block;animation:pop .45s cubic-bezier(.2,.9,.3,1.3)}
@keyframes pop{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}
.done .tick{
  width:66px;height:66px;margin:0 auto 14px;border-radius:50%;
  background:linear-gradient(135deg,#17B26E,var(--ok));display:grid;place-items:center;
  box-shadow:0 10px 26px rgba(14,143,85,.3);
}
.done .tick svg{width:32px;height:32px;fill:#fff}
.done h3{
  font-family:var(--display);font-weight:800;font-style:italic;text-transform:uppercase;
  font-size:32px;color:var(--ink);margin:0 0 8px;line-height:1;
}
.done p{margin:0 auto;max-width:38ch;font-size:14.5px;color:var(--body);line-height:1.55}
.done .cta{
  display:inline-flex;align-items:center;gap:8px;margin-top:18px;
  font-family:var(--display);font-weight:700;font-size:21px;color:#fff;
  background:linear-gradient(135deg,var(--blue),var(--blue-dk));padding:12px 22px;border-radius:10px;
}
.done .cta svg{width:17px;height:17px;fill:#fff}

/* ══════════════════════ STAT BAND ══════════════════════ */
.statband{background:var(--navy);position:relative;overflow:hidden}
.statband::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(60% 130% at 82% 0%, rgba(20,135,224,.24), transparent 62%);
}
.statband-in{
  max-width:var(--shell);margin:0 auto;padding:0 22px;position:relative;z-index:2;
  display:grid;grid-template-columns:repeat(2,1fr);
}
@media(min-width:800px){ .statband-in{grid-template-columns:repeat(4,1fr)} }
.st{padding:20px 12px;text-align:center;border-right:1px solid rgba(255,255,255,.08)}
.st:nth-child(2n){border-right:0}
@media(min-width:800px){
  .st{border-right:1px solid rgba(255,255,255,.08)}
  .st:nth-child(2n){border-right:1px solid rgba(255,255,255,.08)}
  .st:last-child{border-right:0}
}
.st:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.08)}
@media(min-width:800px){ .st:nth-child(-n+2){border-bottom:0} }
.st .k{font-family:var(--display);font-weight:800;font-style:italic;font-size:34px;color:var(--blue-hi);line-height:1}
.st .v{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#8AA2BC;font-weight:700;margin-top:7px}

/* ══════════════════════ SECTIONS ══════════════════════ */
.sec{padding-top:62px;padding-bottom:62px}
.sec.tight{padding-top:0}
.sec-hd{margin-bottom:32px;max-width:62ch}
.sec-hd h2{
  font-family:var(--display);font-weight:800;font-style:italic;text-transform:uppercase;
  font-size:clamp(32px,7.4vw,50px);line-height:.95;color:var(--ink);margin:0;letter-spacing:-.004em;
}
.sec-hd h2 em{font-style:italic;color:var(--blue-dk)}
.sec-hd p{margin:14px 0 0;color:var(--body);font-size:16px;line-height:1.62}

/* offset benefit grid — deliberately staggered */
.bens{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:640px){ .bens{grid-template-columns:1fr 1fr} }
@media(min-width:1000px){
  .bens{grid-template-columns:repeat(3,1fr)}
  .bens .ben:nth-child(3n+2){transform:translateY(26px)}
}
.ben{
  background:var(--paper);border:1px solid var(--line);border-radius:14px;
  padding:22px 20px 20px;position:relative;overflow:hidden;box-shadow:var(--sh-1);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.ben::before{
  content:"";position:absolute;left:0;top:0;width:100%;height:4px;
  background:repeating-linear-gradient(115deg,var(--blue) 0 10px, var(--blue-dp) 10px 20px);
  transform:scaleX(0);transform-origin:left;transition:transform .3s ease;
}
.ben:hover{transform:translateY(-5px);box-shadow:var(--sh-2);border-color:var(--line-2)}
@media(min-width:1000px){ .bens .ben:nth-child(3n+2):hover{transform:translateY(21px)} }
.ben:hover::before{transform:scaleX(1)}
.ben .ic{
  width:44px;height:44px;border-radius:11px;margin-bottom:14px;display:grid;place-items:center;
  background:var(--blue-wash);border:1px solid var(--line-2);
}
.ben .ic svg{width:23px;height:23px;fill:none;stroke:var(--blue-dk);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ben h3{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:21px;color:var(--ink);margin:0 0 7px;letter-spacing:.02em}
.ben p{margin:0;font-size:14.2px;color:var(--body);line-height:1.58}

/* route shields row */
.shields{display:grid;gap:18px;grid-template-columns:repeat(2,1fr)}
@media(min-width:760px){ .shields{grid-template-columns:repeat(4,1fr)} }
.shields .sh-item{transition:transform .22s ease}
.shields .sh-item:hover{transform:translateY(-6px)}

/* steps with ghost numerals */
.steps{display:grid;gap:16px}
@media(min-width:860px){ .steps{grid-template-columns:repeat(3,1fr)} }
.step{
  background:var(--paper);border:1px solid var(--line);border-radius:14px;
  padding:26px 22px 22px;position:relative;overflow:hidden;box-shadow:var(--sh-1);
}
.step .gn{position:absolute;top:-4px;right:12px;font-size:88px}
.step h3{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:22px;color:var(--ink);margin:0 0 9px;letter-spacing:.02em;position:relative}
.step p{margin:0;font-size:14.2px;color:var(--body);line-height:1.6;position:relative}

/* pain / fix comparison */
.pf{display:grid;gap:16px}
@media(min-width:880px){ .pf{grid-template-columns:1fr 1fr} }
.pf-col{border-radius:16px;overflow:hidden;box-shadow:var(--sh-2)}
.pf-hd{padding:16px 20px;font-family:var(--display);font-weight:800;font-style:italic;text-transform:uppercase;font-size:23px;letter-spacing:.02em}
.pf-pain .pf-hd{background:linear-gradient(135deg,#3A2118,#241310);color:#FFC9AE}
.pf-fix  .pf-hd{background:linear-gradient(135deg,var(--navy-2),var(--navy));color:var(--blue-hi)}
.pf-list{background:var(--paper);padding:6px 0}
.pf-list li{
  list-style:none;display:flex;gap:12px;align-items:flex-start;
  padding:13px 20px;font-size:14.2px;line-height:1.5;border-bottom:1px solid var(--line);
}
.pf-list li:last-child{border-bottom:0}
.pf-list ul{margin:0;padding:0}
.pf-list svg{width:17px;height:17px;flex:none;margin-top:2px}
.pf-pain svg{fill:#C0563A}
.pf-fix svg{fill:var(--ok)}

/* dark feature panel */
.panel{
  border-radius:20px;overflow:hidden;position:relative;
  background:linear-gradient(155deg,var(--navy-3),var(--navy) 62%);box-shadow:var(--sh-3);
}
.panel::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(66% 88% at 94% 4%, rgba(20,135,224,.26), transparent 60%);
}
.panel-in{padding:34px 24px;position:relative;z-index:2}
@media(min-width:880px){ .panel-in{padding:48px 46px;max-width:76ch} }
.panel-in h2{
  font-family:var(--display);font-weight:800;font-style:italic;text-transform:uppercase;
  font-size:clamp(28px,6.2vw,44px);line-height:.98;color:#fff;margin:0 0 16px;
}
.panel-in p{font-size:15.4px;color:#BDD0E4;line-height:1.68;margin:0 0 14px}
.panel-in .pt{display:flex;gap:12px;align-items:flex-start;margin-top:14px}
.panel-in .pt svg{width:20px;height:20px;fill:var(--blue-hi);flex:none;margin-top:2px}
.panel-in .pt span{font-size:14.8px;color:#DAE6F3;line-height:1.5}

/* ══════════════════════ CALCULATOR ══════════════════════ */
.calc{
  border-radius:20px;overflow:hidden;box-shadow:var(--sh-3);
  background:var(--paper);border:1px solid var(--line);
}
.calc-grid{display:grid}
@media(min-width:900px){ .calc-grid{grid-template-columns:1fr 1fr} }
.calc-in{padding:26px 22px}
@media(min-width:900px){ .calc-in{padding:34px 30px} }
.calc-in h3{
  font-family:var(--display);font-weight:800;font-style:italic;text-transform:uppercase;
  font-size:26px;color:var(--ink);margin:0 0 5px;line-height:1;
}
.calc-in > p{margin:0 0 20px;font-size:13.6px;color:var(--muted);line-height:1.5}
.calc-f{margin-bottom:17px}
.calc-f .row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.calc-f label{font-size:10.5px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}
.calc-f output{font-family:var(--display);font-weight:800;font-style:italic;font-size:23px;color:var(--blue-dk);line-height:1}
input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:100px;
  background:linear-gradient(90deg,var(--blue) var(--pct,50%), var(--line-2) var(--pct,50%));
  outline:none;cursor:pointer;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:#fff;
  border:3px solid var(--blue);box-shadow:0 3px 10px rgba(8,19,31,.22);cursor:grab;
}
input[type=range]::-moz-range-thumb{
  width:22px;height:22px;border-radius:50%;background:#fff;border:3px solid var(--blue);
  box-shadow:0 3px 10px rgba(8,19,31,.22);cursor:grab;
}
input[type=range]:active::-webkit-slider-thumb{cursor:grabbing;transform:scale(1.08)}

.calc-out{
  background:linear-gradient(158deg,var(--navy-2),var(--navy) 66%);
  padding:30px 24px;position:relative;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;
}
.calc-out::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(70% 90% at 88% 6%, rgba(240,160,32,.20), transparent 62%);
}
@media(min-width:900px){ .calc-out{padding:34px 32px} }
.calc-out .lb{
  position:relative;z-index:2;font-size:10px;font-weight:800;letter-spacing:.2em;
  text-transform:uppercase;color:#8AA2BC;margin-bottom:9px;
}
.calc-out .big{
  position:relative;z-index:2;font-family:var(--display);font-weight:800;font-style:italic;
  font-size:clamp(48px,12vw,72px);line-height:.88;color:var(--amber);
  letter-spacing:-.014em;text-shadow:0 4px 24px rgba(240,160,32,.24);
}
.calc-out .per{position:relative;z-index:2;font-size:13px;color:#93AAC4;margin-top:10px}
.calc-out .split{
  position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:14px;
  margin-top:22px;padding-top:20px;border-top:1px solid rgba(255,255,255,.12);
}
.calc-out .split div .n{font-family:var(--display);font-weight:800;font-style:italic;font-size:25px;color:#fff;line-height:1}
.calc-out .split div .l{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#8AA2BC;margin-top:5px;font-weight:700}
.calc-note{
  position:relative;z-index:2;margin-top:20px;font-size:12.4px;color:#A8BDD4;line-height:1.55;
  border-left:3px solid var(--amber);padding-left:12px;
}

/* ══════════════════════ FAQ ══════════════════════ */
.faq{display:grid;gap:10px;max-width:860px}
details{
  border:1px solid var(--line);border-radius:12px;background:var(--paper);
  overflow:hidden;transition:border-color .2s ease, box-shadow .2s ease;box-shadow:var(--sh-1);
}
details[open]{border-color:var(--line-2);box-shadow:var(--sh-2)}
summary{
  cursor:pointer;list-style:none;padding:17px 48px 17px 19px;position:relative;
  font-family:var(--display);font-weight:700;font-size:20px;color:var(--ink);
  text-transform:uppercase;letter-spacing:.015em;
}
summary::-webkit-details-marker{display:none}
summary::after{
  content:"";position:absolute;right:19px;top:50%;width:11px;height:11px;
  border-right:2.5px solid var(--blue);border-bottom:2.5px solid var(--blue);
  transform:translateY(-70%) rotate(45deg);transition:transform .24s ease;
}
details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
details .ans{padding:0 19px 18px;font-size:14.6px;color:var(--body);line-height:1.66}

/* ══════════════════════ FINALE / FOOTER ══════════════════════ */
.finale{
  position:relative;overflow:hidden;text-align:center;padding:70px 0;
  background:linear-gradient(160deg,var(--navy-2),var(--navy) 60%);
}
.finale::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(70% 100% at 50% 0%, rgba(20,135,224,.26), transparent 62%);
}
.finale .shell{position:relative;z-index:2}
.finale h2{
  font-family:var(--display);font-weight:800;font-style:italic;text-transform:uppercase;
  font-size:clamp(34px,9vw,64px);line-height:.93;color:#fff;margin:0 0 16px;
}
.finale h2 .hl{
  background:linear-gradient(96deg,var(--blue-hi),var(--blue));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.finale p{margin:0 auto 28px;max-width:48ch;color:#B6CADF;font-size:16.5px}
.fbtns{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.btn{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--display);font-weight:800;font-style:italic;text-transform:uppercase;
  font-size:24px;letter-spacing:.02em;padding:16px 30px;border-radius:11px;
  transition:transform .16s ease, box-shadow .16s ease;
}
.btn svg{width:18px;height:18px;flex:none}
.btn-p{color:#fff;background:linear-gradient(135deg,var(--blue),var(--blue-dk));box-shadow:var(--sh-blue)}
.btn-p svg{fill:#fff}
.btn-s{color:#fff;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.22)}
.btn-s svg{fill:var(--blue-hi)}
.btn:hover{transform:translateY(-2px)}
.btn-p:hover{box-shadow:0 18px 44px rgba(20,135,224,.5)}

footer{background:#050D18;padding:40px 0 32px;color:#9DB2C9}
.foot{display:grid;gap:26px}
@media(min-width:800px){ .foot{grid-template-columns:1.5fr 1fr 1fr} }
.foot .brand-name{color:#fff}
.foot .brand-name b{color:var(--blue-hi)}
.foot .brand-sub{color:#7B93AC}
.foot .brand-chip{border-color:rgba(255,255,255,.18)}
.foot-brand .brand{margin-bottom:14px}
.foot p{font-size:13.6px;color:#89A0BA;line-height:1.62;margin:0 0 8px;max-width:42ch}
.foot h4{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:15px;letter-spacing:.14em;color:#fff;margin:0 0 13px}
.foot a{display:block;font-size:14px;color:#9DB2C9;margin-bottom:9px;transition:color .15s}
.foot a:hover{color:var(--blue-hi)}
.foot a.ig{display:inline-flex;align-items:center;gap:8px}
.foot a.ig svg{width:17px;height:17px;fill:currentColor;flex:none}
.legal{margin-top:30px;padding-top:22px;border-top:1px solid rgba(255,255,255,.09);font-size:11.4px;color:#6D849E;line-height:1.65}
.legal a{display:inline;color:#89A0BA}

/* sticky mobile bar */
.callbar{
  position:fixed;left:0;right:0;bottom:0;z-index:70;display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--line-2);border-top:1px solid var(--line-2);padding-bottom:env(safe-area-inset-bottom);
  box-shadow:0 -8px 24px rgba(8,19,31,.14);
}
.callbar a{
  display:flex;align-items:center;justify-content:center;gap:8px;padding:15px 8px;
  font-family:var(--display);font-weight:800;font-style:italic;font-size:19px;
  text-transform:uppercase;letter-spacing:.02em;
}
.callbar .cb-call{background:var(--paper);color:var(--ink)}
.callbar .cb-call svg{fill:var(--blue-dk)}
.callbar .cb-apply{background:linear-gradient(135deg,var(--blue),var(--blue-dk));color:#fff}
.callbar svg{width:17px;height:17px;flex:none}
@media(min-width:900px){ .callbar{display:none} }
@media(max-width:899px){ :root{--callbar:60px} }

/* the masthead carries two rows on mobile, so every pixel is rationed */
@media(max-width:899px){
  .topbar-in{padding:5px 18px}
  .brand-chip{width:34px;height:34px;border-radius:8px}
  .brand-name{font-size:19px}
  .brand-sub{font-size:7.8px;letter-spacing:.14em;margin-top:2px}
  .top-call{padding:7px 12px;border-radius:8px;font-size:17px;line-height:1}
  .top-call svg{width:15px;height:15px}
  .switch a{padding:10px 8px;font-size:16px}
  .hazard{height:5px}
}
@media(max-width:359px){
  .brand-sub{display:none}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .bens .ben:nth-child(3n+2){transform:none}
}