/* ============================================================
   FREENY DEMO — application styles
   Light, rounded, consumer-mobility feel. Mobile-first.
   ============================================================ */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--page);color:var(--text);
  font-family:var(--font-body);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:6px}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--s4)}
@media(min-width:768px){.container{padding:0 var(--s5)}}

.display{font-family:var(--font-display);font-weight:800;letter-spacing:-.022em;line-height:1.1}
.mono{font-family:var(--font-mono)}
.muted{color:var(--text-muted)}
.tnum{font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

h1,h2,h3,h4{letter-spacing:-.022em;line-height:1.15;margin:0}

/* ---------- demo banner ---------- */
.demobar{background:var(--primary);color:#fff;text-align:center;
  font-size:13px;padding:9px var(--s4);line-height:1.45;font-weight:500}
.demobar b{color:var(--gold-fill)}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:60;background:var(--chrome);
  backdrop-filter:saturate(160%) blur(12px);border-bottom:1px solid var(--line)}
.hdr-in{display:flex;align-items:center;gap:var(--s4);height:68px}
.hdr-in > a{display:flex;align-items:center;min-height:var(--tap);flex:none}
.brand{display:flex;flex-direction:column;justify-content:center;line-height:1;flex:none}
.brand .wm{font-weight:800;font-size:23px;letter-spacing:-.03em;color:var(--text)}
.brand .rule{display:none}
.brand .desc{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:700;margin-top:3px}
.nav{display:none;margin-left:auto;align-items:center;gap:2px;min-width:0;overflow:hidden}
@media(min-width:1180px){.nav{display:flex}}
.nav a{padding:10px 11px;font-size:14.5px;font-weight:500;color:var(--text-2);border-radius:var(--r-pill);
  min-height:var(--tap);display:inline-flex;align-items:center;white-space:nowrap;flex:none;
  transition:color .15s,background .15s}
.nav a:hover{color:var(--text);background:var(--surface-2)}
.nav a.on{color:var(--text);background:var(--surface-2);font-weight:600}
.hdr-cta{margin-left:auto;display:flex;align-items:center;gap:var(--s2)}
@media(min-width:1180px){.hdr-cta{margin-left:var(--s3)}}
.burger{display:inline-flex;align-items:center;justify-content:center;width:var(--tap);height:var(--tap);
  background:var(--surface-2);border:0;border-radius:var(--r-pill);cursor:pointer}
@media(min-width:1180px){.burger{display:none}}
.burger span{display:block;width:18px;height:2px;background:var(--text);position:relative;border-radius:2px}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:18px;height:2px;background:var(--text);border-radius:2px}
.burger span::before{top:-6px}.burger span::after{top:6px}

.drawer{position:fixed;inset:0;z-index:80;background:rgba(12,18,24,.4);display:none}
.drawer.open{display:block}
.drawer-p{position:absolute;top:0;right:0;bottom:0;width:min(330px,88vw);background:var(--surface);
  padding:var(--s4);overflow-y:auto;display:flex;flex-direction:column;gap:2px;box-shadow:var(--shadow-3)}
.drawer-p a{padding:14px 14px;min-height:var(--tap);display:flex;align-items:center;
  border-radius:var(--r-sm);font-size:17px;font-weight:500}
.drawer-p a:hover{background:var(--surface-2)}
.drawer-p a.on{background:var(--surface-2);font-weight:600}

.lang{display:flex;gap:2px;background:var(--surface-2);border-radius:var(--r-pill);padding:2px;flex:none}
.lang button{background:none;border:0;padding:0 12px;height:44px;border-radius:var(--r-pill);
  font-size:13px;font-weight:600;color:var(--text-muted);cursor:pointer;text-transform:uppercase;letter-spacing:.03em}
.lang button.on{background:var(--surface);color:var(--text);box-shadow:var(--shadow-1)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  min-height:var(--tap);padding:13px 24px;border-radius:var(--r-pill);border:1.5px solid transparent;
  font-size:16px;font-weight:600;cursor:pointer;letter-spacing:-.01em;
  transition:transform .12s,background .15s,border-color .15s,box-shadow .15s;text-align:center;line-height:1.25}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--primary);color:var(--on-primary);box-shadow:var(--shadow-1)}
.btn-primary:hover{background:var(--primary-hi);box-shadow:var(--shadow-2)}
.btn-accent{background:var(--accent);color:var(--on-accent);box-shadow:var(--shadow-1)}
.btn-accent:hover{background:var(--accent-hi)}
.btn-ghost{background:var(--surface);border-color:var(--line-2);color:var(--text)}
.btn-ghost:hover{border-color:var(--text-muted);background:var(--surface-2)}
.btn-quiet{background:var(--surface-2);color:var(--text-muted)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn-block{width:100%}
.btn-sm{min-height:44px;padding:10px 18px;font-size:15px}

/* ---------- chips ---------- */
.chip{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:var(--r-pill);
  font-size:13px;font-weight:600;white-space:nowrap;letter-spacing:-.005em}
.chip-avail{color:var(--ok);background:var(--ok-soft)}
.chip-reserved{color:var(--warn);background:var(--warn-soft)}
.chip-out{color:var(--bad);background:var(--bad-soft)}
.chip-black{color:#4A3406;background:var(--gold-fill)}
.chip-plain{color:var(--text-2);background:var(--surface-2)}
.dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}

/* ---------- hero ---------- */
.hero{padding:var(--s7) 0 var(--s6);background:var(--surface);border-bottom:1px solid var(--line)}
.hero-grid{display:grid;gap:var(--s6)}
@media(min-width:960px){.hero-grid{grid-template-columns:1.02fr .98fr;align-items:center;gap:var(--s7)}}
.hero h1{font-size:clamp(33px,5.6vw,52px);letter-spacing:-.035em;line-height:1.06;
  margin:0 0 var(--s4);text-wrap:balance;font-weight:800}
.hero .lede{font-size:19px;color:var(--text-2);margin:0 0 var(--s5);max-width:44ch;line-height:1.55}
.hero .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;
  color:var(--accent);background:var(--accent-soft);padding:7px 14px;border-radius:var(--r-pill);margin:0 0 var(--s4)}
.hero-cta{display:flex;flex-wrap:wrap;gap:var(--s3);margin-bottom:var(--s5)}
.hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4);
  border-top:1px solid var(--line);padding-top:var(--s5)}
.hero-stats .v{font-weight:800;font-size:27px;line-height:1;letter-spacing:-.03em}
.hero-stats .k{font-size:14px;color:var(--text-muted);margin-top:6px;line-height:1.35}

.reassure{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s5);margin-top:var(--s5)}
.reassure span{display:flex;align-items:center;gap:8px;font-size:15px;color:var(--text-2)}
.reassure .ic{width:20px;height:20px;border-radius:50%;background:var(--accent-soft);color:var(--accent);
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;flex:none}

/* ---------- sections ---------- */
.sect{padding:var(--s7) 0}
.sect.alt{background:var(--surface)}
.sect-h{margin:0 0 var(--s5);max-width:64ch}
.sect-h .eyebrow{display:inline-block;font-size:14px;font-weight:700;color:var(--accent);margin:0 0 var(--s3)}
.sect-h h2{font-size:clamp(25px,4.2vw,36px);letter-spacing:-.03em;line-height:1.12;margin:0 0 var(--s3);font-weight:800}
.sect-h p{color:var(--text-2);margin:0;font-size:18px;line-height:1.55}

/* ---------- tier ladder ---------- */
.ladder{display:grid;gap:var(--s3)}
@media(min-width:860px){.ladder{grid-template-columns:repeat(3,1fr)}}
.rung{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:var(--s5);
  display:flex;flex-direction:column;gap:var(--s3);box-shadow:var(--shadow-1)}
.rung.top{border-color:var(--gold-fill);box-shadow:var(--shadow-2)}
.rung .n{font-size:13px;font-weight:700;color:var(--text-muted);display:flex;align-items:center;gap:8px}
.rung.top .n{color:var(--gold)}
.rung h3{font-size:22px;font-weight:800;letter-spacing:-.028em}
.rung .price{font-size:20px;font-weight:700;letter-spacing:-.02em}
.rung .price span{font-size:15px;font-weight:500;color:var(--text-muted)}
.rung p{margin:0;color:var(--text-2);font-size:16px;flex:1;line-height:1.5}

/* ---------- vehicle cards ---------- */
.fleet-grid{display:grid;gap:var(--s4)}
@media(min-width:640px){.fleet-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.fleet-grid{grid-template-columns:repeat(3,1fr)}}
.vcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow-1);
  transition:box-shadow .18s,transform .18s}
.vcard:hover{box-shadow:var(--shadow-2);transform:translateY(-2px)}
.vcard-img{aspect-ratio:16/10;background:var(--inset);display:flex;align-items:center;
  justify-content:center;position:relative;overflow:hidden}
.vcard-img img{width:100%;height:100%;object-fit:cover;display:block}
.vcard-img .ph{font-size:13px;color:var(--text-muted)}
.vcard-badges{position:absolute;top:var(--s3);left:var(--s3);display:flex;gap:6px;flex-wrap:wrap;z-index:2}
.vcard-b{padding:var(--s4);display:flex;flex-direction:column;gap:var(--s3);flex:1}
.vcard-b h3{font-size:19px;font-weight:700;letter-spacing:-.025em}
.vspecs{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s3);font-size:14.5px;color:var(--text-muted)}
.vspecs span{display:flex;align-items:center;gap:5px}
.vprice{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s2);
  border-top:1px solid var(--line);padding-top:var(--s3);margin-top:auto}
.vprice .p{font-size:24px;font-weight:800;letter-spacing:-.03em}
.vprice .p small{font-size:14px;font-weight:500;color:var(--text-muted);letter-spacing:0}
.vprice .dep{font-size:13.5px;color:var(--text-muted);text-align:right;line-height:1.4}

/* ---------- filters ---------- */
.filters{display:flex;flex-wrap:wrap;gap:var(--s2);margin-bottom:var(--s5);align-items:center}
.fbtn{min-height:46px;padding:11px 18px;background:var(--surface);border:1.5px solid var(--line);
  border-radius:var(--r-pill);font-size:15px;font-weight:600;color:var(--text-2);cursor:pointer;transition:all .15s}
.fbtn:hover{border-color:var(--line-2);background:var(--surface-2)}
.fbtn.on{background:var(--primary);border-color:var(--primary);color:#fff}
.fcount{margin-left:auto;font-size:15px;color:var(--text-muted)}

/* ---------- forms ---------- */
.field{margin-bottom:var(--s5)}
.field label{display:block;font-size:15.5px;font-weight:600;color:var(--text);margin-bottom:var(--s2)}
.field .req{color:var(--bad)}
.field input,.field select,.field textarea{
  width:100%;min-height:var(--tap);padding:13px 16px;background:var(--surface);
  border:1.5px solid var(--line-2);border-radius:var(--r-sm);font-size:16.5px;color:var(--text);
  transition:border-color .15s,box-shadow .15s}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--accent);outline:none;box-shadow:0 0 0 3px var(--accent-soft)}
.field textarea{min-height:120px;resize:vertical;padding-top:13px}
.field .help{font-size:14.5px;color:var(--text-muted);margin-top:var(--s2);line-height:1.5}
.field .err{font-size:14.5px;color:var(--bad);margin-top:var(--s2);display:none;font-weight:500}
.field.bad input,.field.bad select{border-color:var(--bad)}
.field.bad .err{display:block}
.row2{display:grid;gap:var(--s4)}
@media(min-width:600px){.row2{grid-template-columns:1fr 1fr}}

.radios{display:grid;gap:var(--s2)}
.radio{display:flex;align-items:flex-start;gap:var(--s3);padding:16px;background:var(--surface);
  border:1.5px solid var(--line-2);border-radius:var(--r-sm);cursor:pointer;min-height:var(--tap);
  transition:border-color .15s,background .15s,box-shadow .15s}
.radio:hover{border-color:var(--text-muted)}
.radio.on{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 1px var(--accent)}
.radio input{width:22px;height:22px;min-height:0;margin:1px 0 0;flex:none;accent-color:var(--accent)}
.radio .rt{display:block;font-size:16.5px;line-height:1.4;font-weight:600}
.radio .rs{display:block;font-size:14.5px;color:var(--text-muted);margin-top:3px;line-height:1.45;font-weight:400}

/* yes/no pair */
.yesno{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2)}
.yesno .radio{justify-content:center;align-items:center;text-align:center}

/* ---------- booking wizard ---------- */
.wiz{padding:var(--s5) 0 var(--s9)}
.steps{display:flex;gap:6px;margin-bottom:var(--s5)}
.step{flex:1;display:flex;flex-direction:column;gap:7px}
.step .bar{height:5px;background:var(--line);border-radius:var(--r-pill);transition:background .3s}
.step.done .bar{background:var(--accent)}
.step.now .bar{background:var(--primary)}
.step .lb{font-size:11.5px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500}
.step.now .lb{color:var(--text);font-weight:700}
@media(max-width:640px){.step .lb{display:none}.step.now .lb{display:block;font-size:13px}}

.wiz-h{margin-bottom:var(--s5)}
.wiz-h .sn{font-size:14.5px;color:var(--accent);font-weight:700;margin:0 0 var(--s2)}
.wiz-h h2{font-size:clamp(26px,4.6vw,36px);margin:0 0 var(--s3);letter-spacing:-.032em;font-weight:800}
.wiz-h p{color:var(--text-2);margin:0;max-width:56ch;font-size:17.5px;line-height:1.55}
.wiz-body{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:var(--s5);box-shadow:var(--shadow-1)}
.wiz-nav{display:flex;gap:var(--s3);margin-top:var(--s5);flex-wrap:wrap}
.wiz-nav .btn{flex:1;min-width:140px}
.wiz-layout{display:grid;gap:var(--s5)}
@media(min-width:980px){.wiz-layout{grid-template-columns:1fr 340px;align-items:start}}

/* sticky mobile action bar — the Uber/Lyft pattern */
.stickybar{position:sticky;bottom:0;z-index:50;background:var(--chrome);
  backdrop-filter:blur(10px);border-top:1px solid var(--line);padding:var(--s3) var(--s4);
  margin:var(--s5) calc(var(--s4) * -1) 0;display:flex;align-items:center;gap:var(--s3);
  box-shadow:0 -4px 20px rgba(16,24,32,.07)}
.stickybar .sbinfo{flex:1;min-width:0}
.stickybar .sbinfo .a{font-size:19px;font-weight:800;letter-spacing:-.03em}
.stickybar .sbinfo .b{font-size:13.5px;color:var(--text-muted)}
.stickybar .btn{flex:none;min-width:150px}
@media(min-width:980px){.stickybar{display:none}}

/* summary rail */
.summary{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:var(--s5);position:sticky;top:84px;box-shadow:var(--shadow-1)}
.summary h4{font-size:15px;color:var(--text-muted);margin:0 0 var(--s4);font-weight:600}
.sum-img{aspect-ratio:16/10;background:var(--inset);border-radius:var(--r-sm);margin-bottom:var(--s4);
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.sum-img img{width:100%;height:100%;object-fit:cover;display:block}
.sum-row{display:flex;justify-content:space-between;gap:var(--s3);padding:11px 0;
  border-bottom:1px solid var(--line);font-size:15.5px}
.sum-row:last-child{border-bottom:0}
.sum-row .k{color:var(--text-muted)}
.sum-row .v{font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
.sum-total{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3);
  margin-top:var(--s4);padding-top:var(--s4);border-top:2px solid var(--line)}
.sum-total .k{font-size:16px;font-weight:600}
.sum-total .v{font-size:28px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums}

/* result panels */
.qres{padding:var(--s4) var(--s5);border-radius:var(--r);margin-top:var(--s4);display:none;border:1px solid}
.qres.show{display:block}
.qres h4{font-size:19px;margin:0 0 var(--s2);font-weight:700;letter-spacing:-.025em}
.qres p{margin:0;font-size:16px;line-height:1.55;color:var(--text-2)}
.qres ul{margin:var(--s2) 0 0;padding-left:20px;font-size:16px;color:var(--text-2)}
.qres li{margin-bottom:6px}
.qres.pass{border-color:#B6E0CE;background:var(--ok-soft)} .qres.pass h4{color:var(--ok)}
.qres.fail{border-color:#F0C6C0;background:var(--bad-soft)} .qres.fail h4{color:var(--bad)}
.qres.warn{border-color:#EAD9AC;background:var(--warn-soft)} .qres.warn h4{color:var(--warn)}

/* upload */
.drop{border:2px dashed var(--line-2);border-radius:var(--r);padding:var(--s5) var(--s4);
  text-align:center;cursor:pointer;transition:border-color .15s,background .15s;background:var(--inset);
  margin-bottom:var(--s3);display:block}
.drop:hover{border-color:var(--accent);background:var(--accent-soft)}
.drop.has{border-style:solid;border-color:var(--accent);background:var(--accent-soft)}
.drop .t{font-size:16.5px;font-weight:600;margin-bottom:5px}
.drop .s{font-size:14.5px;color:var(--text-muted)}
.drop input{display:none}

/* signature */
.sigwrap{border:1.5px solid var(--line-2);border-radius:var(--r-sm);background:#fff;position:relative;touch-action:none}
/* the pad stays white in dark mode on purpose: the ink is dark */
.sigwrap.signed{border-color:var(--accent)}
.sigwrap canvas{display:block;width:100%;height:180px;border-radius:var(--r-sm);cursor:crosshair}
.sigwrap .hint{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  pointer-events:none;font-size:15.5px;color:#9AA5AD}
.sigwrap.signed .hint{display:none}

/* acknowledgements */
.ack{display:flex;gap:var(--s3);padding:var(--s4);background:var(--surface);
  border:1.5px solid var(--line-2);border-radius:var(--r-sm);margin-bottom:var(--s3);
  cursor:pointer;align-items:flex-start;transition:border-color .15s,background .15s}
.ack:hover{border-color:var(--text-muted)}
.ack.on{border-color:var(--accent);background:var(--accent-soft)}
.ack input{width:24px;height:24px;flex:none;margin:1px 0 0;accent-color:var(--accent)}
.ack .at{font-size:16px;line-height:1.5}
.ack .at b{font-weight:700}

/* ---------- confirmation ---------- */
.conf{text-align:center;padding:var(--s7) 0 var(--s8)}
.conf .tick{width:84px;height:84px;border-radius:50%;background:var(--accent);
  display:flex;align-items:center;justify-content:center;margin:0 auto var(--s5);color:#fff;font-size:40px;
  box-shadow:var(--shadow-2)}
.conf h1{font-size:clamp(30px,5.6vw,44px);margin:0 0 var(--s3);letter-spacing:-.035em;font-weight:800}
.conf .ref{font-family:var(--font-mono);font-size:20px;color:var(--text-2);
  background:var(--surface-2);display:inline-block;padding:9px 20px;border-radius:var(--r-pill);margin-bottom:var(--s5)}
.conf-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:var(--s5);text-align:left;max-width:580px;margin:0 auto var(--s5);box-shadow:var(--shadow-1)}
.conf-card h4{font-size:15px;color:var(--text-muted);margin:0 0 var(--s3);font-weight:600}

/* ---------- portal ---------- */
.portal-grid{display:grid;gap:var(--s4)}
@media(min-width:920px){.portal-grid{grid-template-columns:1.4fr 1fr}}
.pcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:var(--s5);box-shadow:var(--shadow-1)}
.pcard h3{font-size:20px;margin:0 0 var(--s4);font-weight:700;letter-spacing:-.025em}
.pay-row{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);
  padding:13px 0;border-bottom:1px solid var(--line);font-size:16px}
.pay-row:last-child{border-bottom:0}
.pay-row .d{font-size:14px;color:var(--text-muted)}
.pay-row .a{font-weight:700;font-variant-numeric:tabular-nums}
.meter{height:10px;background:var(--surface-2);border-radius:var(--r-pill);overflow:hidden;margin:var(--s3) 0}
.meter i{display:block;height:100%;background:var(--accent);border-radius:var(--r-pill)}

/* ---------- ops dashboard ---------- */
.ops-kpi{display:grid;gap:var(--s3);margin-bottom:var(--s5)}
@media(min-width:560px){.ops-kpi{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.ops-kpi{grid-template-columns:repeat(4,1fr)}}
.kbox{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:var(--s5);box-shadow:var(--shadow-1)}
.kbox .k{font-size:14.5px;color:var(--text-muted);margin-bottom:var(--s2);font-weight:500}
.kbox .v{font-weight:800;font-size:34px;line-height:1;letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.kbox .d{font-size:14px;color:var(--text-muted);margin-top:8px;line-height:1.45}
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);box-shadow:var(--shadow-1)}
table{border-collapse:collapse;width:100%;min-width:640px;font-size:15.5px}
th,td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--line)}
thead th{background:var(--surface-2);font-size:14px;color:var(--text-muted);font-weight:600;white-space:nowrap}
tbody th{font-weight:600}
td.num{font-variant-numeric:tabular-nums;white-space:nowrap}
tbody tr:last-child td,tbody tr:last-child th{border-bottom:0}

/* ---------- calculator ---------- */
.calc-grid{display:grid;gap:var(--s5)}
@media(min-width:920px){.calc-grid{grid-template-columns:1fr 1fr;align-items:start}}
.calc-out{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:var(--s5);box-shadow:var(--shadow-2);position:sticky;top:84px}
.calc-line{display:flex;justify-content:space-between;gap:var(--s3);padding:13px 0;
  border-bottom:1px solid var(--line);font-size:16px}
.calc-line .v{font-weight:600;font-variant-numeric:tabular-nums}
.calc-line.neg .v{color:var(--bad)}
.calc-net{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3);
  margin-top:var(--s4);padding-top:var(--s4);border-top:2px solid var(--line)}
.calc-net .k{font-size:19px;font-weight:700;letter-spacing:-.025em}
.calc-net .v{font-size:38px;font-weight:800;letter-spacing:-.038em;font-variant-numeric:tabular-nums;color:var(--accent)}
input[type=range]{width:100%;accent-color:var(--accent);min-height:auto;padding:0;background:none;border:0;height:32px}

/* ---------- content ---------- */
.prose{max-width:70ch}
.prose p{margin:0 0 var(--s4);font-size:18px;line-height:1.65;color:var(--text-2)}
.prose h3{font-size:22px;margin:var(--s6) 0 var(--s3);font-weight:700;letter-spacing:-.025em;color:var(--text)}
.prose ul{padding-left:22px;margin:0 0 var(--s4)}
.prose li{margin-bottom:9px;font-size:18px;color:var(--text-2);line-height:1.6}

.incl{display:grid;gap:var(--s3)}
@media(min-width:760px){.incl{grid-template-columns:1fr 1fr}}
.incl-col{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:var(--s5);box-shadow:var(--shadow-1)}
.incl-col h3{font-size:20px;margin:0 0 var(--s4);font-weight:700;letter-spacing:-.025em;display:flex;align-items:center;gap:10px}
.incl-col ul{list-style:none;padding:0;margin:0}
.incl-col li{padding:12px 0 12px 32px;border-bottom:1px solid var(--line);position:relative;font-size:16px;line-height:1.5;color:var(--text-2)}
.incl-col li:last-child{border-bottom:0}
.incl-col li::before{position:absolute;left:0;top:12px;width:20px;height:20px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800}
.incl-col.yes li::before{content:"✓";background:var(--ok-soft);color:var(--ok)}
.incl-col.no li::before{content:"!";background:var(--warn-soft);color:var(--warn)}

/* ---------- reviews ----------
   Cards are a masonry-free 3-up grid: the quotes are wildly different
   lengths and equal-height cards would leave one two-thirds empty. */
.stars{display:inline-flex;align-items:center;gap:2px;line-height:0}
.trust{display:grid;gap:var(--s4);align-items:start}
@media(min-width:760px){.trust{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1080px){.trust{grid-template-columns:repeat(3,1fr)}}
.tcard{background:var(--surface);border:1px solid var(--line);padding:var(--s5);
  border-radius:var(--r);box-shadow:var(--shadow-1);margin:0;
  display:flex;flex-direction:column;gap:var(--s3)}
.tcard blockquote{margin:0;font-size:16.5px;line-height:1.62;color:var(--text-2)}
.tcard.compact blockquote{font-size:15px;line-height:1.55}
.tcard .who{font-size:14px;color:var(--text-muted);display:flex;align-items:center;
  gap:10px;margin-top:auto;padding-top:var(--s2)}
.tcard .who-t{display:flex;flex-direction:column;min-width:0}
.tcard .who-t b{color:var(--text-2);font-weight:700;font-size:14.5px}
.tcard .who-t i{font-style:normal;font-size:12.5px;color:var(--text-muted)}
.tcard .av{width:34px;height:34px;border-radius:50%;background:var(--surface-2);color:var(--text-2);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;flex:none}

/* The aggregate badge. Reads as evidence, so it is bordered and clickable
   rather than sitting as loose text. */
.gbadge{display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  background:var(--surface);border:1px solid var(--line-2);border-radius:999px;
  padding:7px 14px;font-size:13.5px;color:var(--text-muted);
  min-height:44px;box-sizing:border-box;transition:border-color .18s ease,background .18s ease}
.gbadge:hover,.gbadge:focus-visible{border-color:var(--accent);background:var(--surface-2)}
.gbadge b{color:var(--text);font-size:15.5px;font-weight:800}
.gbadge span{white-space:nowrap}
.gbadge.solo{margin-top:var(--s4)}

.gnote{margin:var(--s5) 0 0;font-size:12.5px;line-height:1.6;color:var(--text-muted);max-width:76ch}
.gnote a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}

/* Booking-step strip: one quote and the badge, nothing else. It sits at
   the moment of hesitation, so it must not become another thing to read. */
.tstrip{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s4);
  background:var(--inset);border:1px solid var(--line);border-radius:var(--r);
  padding:var(--s4);margin-bottom:var(--s5)}
.tstrip .q{flex:1 1 260px;min-width:0;margin:0;font-size:14.5px;line-height:1.55;color:var(--text-2)}
.tstrip .q cite{display:block;font-style:normal;font-size:12.5px;color:var(--text-muted);margin-top:4px}

/* ---------- footer ---------- */
.ftr{background:var(--surface);border-top:1px solid var(--line);padding:var(--s7) 0 var(--s5)}
.ftr-grid{display:grid;gap:var(--s5);margin-bottom:var(--s5)}
@media(min-width:760px){.ftr-grid{grid-template-columns:1.5fr 1fr 1fr 1fr}}
.ftr h5{font-size:15px;color:var(--text);margin:0 0 var(--s3);font-weight:700}
.ftr a,.ftr p{color:var(--text-muted);font-size:15.5px;display:block;margin-bottom:2px;line-height:1.5}
.ftr a{min-height:var(--tap);display:flex;align-items:center}
.ftr a:hover{color:var(--text)}
.ftr-btm{border-top:1px solid var(--line);padding-top:var(--s4);font-size:14.5px;
  color:var(--text-muted);display:flex;flex-wrap:wrap;gap:var(--s3);justify-content:space-between}

/* ---------- gate ---------- */
.gate{position:fixed;inset:0;z-index:200;background:var(--page);display:flex;
  align-items:center;justify-content:center;padding:var(--s5)}
.gate-box{max-width:420px;width:100%;text-align:center;background:var(--surface);
  padding:var(--s7) var(--s5);border-radius:var(--r-lg);box-shadow:var(--shadow-3);border:1px solid var(--line)}
.gate-box .wm{font-weight:800;font-size:36px;letter-spacing:-.035em;margin-bottom:4px}
.gate-box .rule{display:none}
.gate-box .desc{font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:var(--accent);
  font-weight:700;margin-bottom:var(--s6)}
.gate-box p{color:var(--text-2);font-size:16.5px;margin-bottom:var(--s4)}
.gate-box input{width:100%;min-height:var(--tap);padding:14px 16px;background:var(--surface);
  border:1.5px solid var(--line-2);border-radius:var(--r-sm);font-size:17px;text-align:center;
  letter-spacing:.14em;margin-bottom:var(--s3);color:var(--text)}
.gate-err{color:var(--bad);font-size:15px;min-height:24px;font-weight:500}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:150;
  background:var(--primary);color:#fff;border-radius:var(--r-pill);
  padding:14px 24px;font-size:15.5px;font-weight:500;
  max-width:92vw;text-align:center;box-shadow:var(--shadow-3)}

.fadein{animation:fi .3s ease both}
@keyframes fi{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------- sourced claims (driver playbook) ---------- */
.cite{display:inline-flex;align-items:center;justify-content:center;min-width:13px;height:13px;
  padding:0 3px;margin-inline-start:2px;border-radius:3px;background:var(--surface-2);
  color:var(--text-muted);font-size:9px;font-weight:700;vertical-align:super;
  line-height:1;text-decoration:none;font-variant-numeric:tabular-nums;opacity:.75}
.cite:hover{opacity:1}
.cite:hover{background:var(--accent-soft);color:var(--accent)}
.cite:target,.cite.on{background:var(--accent);color:var(--on-accent)}

.srclist{counter-reset:src;list-style:none;padding:0;margin:0}
.srclist li{counter-increment:src;display:grid;grid-template-columns:16px 1fr;gap:6px;
  padding:4px 0;font-size:11.5px;line-height:1.4;color:var(--text-muted)}
.srclist li::before{content:counter(src);font-weight:700;color:var(--text-muted);
  font-variant-numeric:tabular-nums;font-size:10px;padding-top:1px}
.srclist a{color:var(--text-2);word-break:break-word;text-decoration:underline;
  text-decoration-color:var(--line-2);text-underline-offset:2px}
.srclist a:hover{color:var(--accent);text-decoration-color:var(--accent)}
.srclist .meta{color:var(--text-muted);font-size:11px}
.srclist li:target{background:var(--accent-soft);border-radius:4px;
  outline:3px solid var(--accent-soft)}

/* the whole block collapses — citations are for checking, not for reading */
.srcwrap{margin-top:20px;border-top:1px solid var(--line);padding-top:10px}
.srcwrap > summary{cursor:pointer;list-style:none;font-size:12px;color:var(--text-muted);
  display:flex;align-items:center;gap:6px;padding:4px 0;font-weight:600}
.srcwrap > summary::-webkit-details-marker{display:none}
.srcwrap > summary::after{content:'▾';font-size:10px;opacity:.6}
.srcwrap[open] > summary::after{content:'▴'}
.srcwrap > summary:hover{color:var(--text-2)}
.srcwrap > div{padding-top:8px}

.tag{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:var(--r-pill);
  font-size:12px;font-weight:600;background:var(--surface-2);color:var(--text-2);
  margin-inline-end:6px}
.tag.verified{background:var(--tag-ok-bg,var(--surface-2));color:var(--tag-ok-fg,var(--text-2))}
.tag.reported{background:var(--tag-rep-bg,var(--surface-2));color:var(--tag-rep-fg,var(--text-muted))}

.playbook-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:var(--s5);box-shadow:var(--shadow-1);margin-bottom:2px}
.playbook-card h3{font-size:19px;font-weight:800;letter-spacing:-.026em;margin:0 0 var(--s3)}
.playbook-card p{margin:0 0 var(--s3);color:var(--text-2);font-size:16px;line-height:1.6}
.playbook-card p:last-child{margin-bottom:0}
.whenbar{display:flex;align-items:center;gap:2px;margin:var(--s3) 0}
.whenbar i{flex:1;height:26px;border-radius:3px;background:var(--surface-2);position:relative}
.whenbar i[data-h="1"]{background:color-mix(in srgb,var(--accent) 25%,var(--surface-2))}
.whenbar i[data-h="2"]{background:color-mix(in srgb,var(--accent) 55%,var(--surface-2))}
.whenbar i[data-h="3"]{background:var(--accent)}
.whenlabels{display:flex;justify-content:space-between;font-size:11.5px;color:var(--text-muted)}

/* ---------- airport demand tool ---------- */
.ap-picker{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:18px}
.ap-btn{display:flex;flex-direction:column;align-items:center;gap:2px;padding:14px 8px;
  min-height:var(--tap);background:var(--surface);border:1.5px solid var(--line-2);
  border-radius:var(--r);cursor:pointer;transition:all .15s;text-align:center}
.ap-btn b{font-size:19px;font-weight:800;letter-spacing:-.02em}
.ap-btn span{font-size:12.5px;color:var(--text-muted);line-height:1.25}
.ap-btn i{font-size:11.5px;color:var(--text-muted);font-style:normal}
.ap-btn:hover{border-color:var(--text-muted)}
.ap-btn.on{background:var(--accent-soft);border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.ap-btn.on b{color:var(--accent)}

.ap-hero{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:var(--s5);margin-bottom:14px;box-shadow:var(--shadow-1)}
.ap-heronum .ap-lab{display:block;font-size:14px;color:var(--text-muted);margin-bottom:4px}
.ap-heronum b{display:block;font-size:clamp(40px,11vw,58px);font-weight:800;
  letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.ap-heronum .ap-sub{display:block;font-size:15px;color:var(--text-muted);margin-top:6px}
.ap-verdict{display:flex;align-items:center;gap:9px;margin-top:16px;padding:11px 14px;
  border-radius:var(--r-sm);background:var(--surface-2);font-size:15px;font-weight:600;color:var(--text-2)}
.ap-verdict.peak{background:var(--accent-soft);color:var(--accent)}
.ap-verdict.quiet{background:var(--surface-2);color:var(--text-muted)}

.ap-chart{display:flex;align-items:flex-end;gap:2px;height:110px;padding:0;margin:0 0 6px}
.ap-bar{flex:1;background:var(--surface-2);border:0;border-radius:3px 3px 0 0;cursor:pointer;
  padding:0;min-width:0;transition:background .15s}
.ap-bar:hover{background:var(--line-2)}
.ap-bar.on{background:var(--accent)}
.ap-axis{display:flex;justify-content:space-between;font-size:11.5px;color:var(--text-muted)}
.ap-hint{font-size:13px;color:var(--text-muted);margin:6px 0 20px}

.ap-cards{display:grid;grid-template-columns:1fr;gap:8px;margin-bottom:16px}
@media(min-width:620px){.ap-cards{grid-template-columns:repeat(3,1fr)}}
.ap-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:var(--s4)}
.ap-card .k{display:flex;align-items:center;gap:7px;font-size:13.5px;color:var(--text-muted);margin-bottom:6px}
.ap-card b{display:block;font-size:26px;font-weight:800;letter-spacing:-.03em;
  line-height:1;font-variant-numeric:tabular-nums}
.ap-card i{display:block;font-size:12.5px;color:var(--text-muted);font-style:normal;margin-top:5px}

.ap-note{display:flex;gap:11px;padding:14px 16px;background:var(--surface-2);
  border-radius:var(--r);margin-bottom:16px;color:var(--text-2)}
.ap-note svg{flex:none;margin-top:2px;color:var(--text-muted)}
.ap-note p{margin:0;font-size:15px;line-height:1.55}

.ap-refresh{margin-bottom:16px}
.ap-refresh .btn{width:100%}
.ap-refresh p{font-size:13.5px;margin:9px 0 0;line-height:1.5}

.ap-details{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:14px 16px;margin-bottom:8px}
.ap-details summary{cursor:pointer;font-weight:700;font-size:16px;list-style:none}
.ap-details summary::-webkit-details-marker{display:none}
.ap-details > div{margin-top:12px}
.ap-details p{font-size:15px;line-height:1.6;color:var(--text-2);margin:0 0 12px}
.ap-details p:last-child{margin-bottom:0}

/* ---------- drop-off timing / Re-Match ---------- */
.ap-drop{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:var(--s4);margin-bottom:16px;box-shadow:var(--shadow-1)}
.ap-drophead{display:flex;gap:11px;align-items:flex-start;margin-bottom:14px}
.ap-drophead svg{flex:none;margin-top:2px;color:var(--accent)}
.ap-drophead b{display:block;font-size:16.5px;font-weight:700;letter-spacing:-.02em;margin-bottom:3px}
.ap-drophead span{font-size:14.5px;color:var(--text-muted);line-height:1.5}
.ap-dropwins{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}
.ap-dropwin{padding:12px 6px;background:var(--surface-2);border:1.5px solid transparent;
  border-radius:var(--r-sm);cursor:pointer;text-align:center;min-height:var(--tap)}
.ap-dropwin b{display:block;font-size:17px;font-weight:800;letter-spacing:-.02em}
.ap-dropwin i{display:block;font-size:12px;color:var(--text-muted);font-style:normal;margin-top:3px}
.ap-dropwin.on{border-color:var(--accent);background:var(--accent-soft)}
.ap-dropwin.on b{color:var(--accent)}
.ap-rematch{display:flex;gap:10px;padding:12px 13px;border-radius:var(--r-sm);align-items:flex-start}
.ap-rematch svg{flex:none;margin-top:2px}
.ap-rematch b{display:block;font-size:15px;font-weight:700;margin-bottom:3px}
.ap-rematch span{font-size:14px;line-height:1.55}
.ap-rematch.yes{background:var(--tag-ok-bg,var(--surface-2));color:var(--tag-ok-fg,var(--text-2))}
.ap-rematch.no{background:var(--surface-2);color:var(--text-muted)}
.ap-rematch.no b{color:var(--text-2)}

/* ================= rental agreement =================
   A contract is a reference document, not an article: people arrive looking
   for one clause. So it gets a sticky index, anchored articles, and the
   figures pulled into one table — the reading order is "find", not "start". */
.ag-bar{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s4);align-items:center;
  justify-content:space-between;background:var(--inset);border:1px solid var(--line);
  border-radius:var(--r);padding:var(--s4);margin-bottom:var(--s5)}
.ag-meta b{display:block;font-size:16px;font-weight:800;letter-spacing:-.01em}
.ag-meta span{font-size:13px;color:var(--text-muted)}
.ag-actions{display:flex;flex-wrap:wrap;gap:10px}
.ag-actions .btn{display:inline-flex;align-items:center;gap:7px;min-height:44px}

.ag-cols{display:grid;gap:var(--s5)}
@media(min-width:1000px){.ag-cols{grid-template-columns:236px 1fr;align-items:start}}
.ag-toc{display:none}
@media(min-width:1000px){
  .ag-toc{display:block;position:sticky;top:84px;background:var(--surface);
    border:1px solid var(--line);border-radius:var(--r);padding:var(--s4);
    max-height:calc(100vh - 120px);overflow-y:auto}
  .ag-toc b{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
    color:var(--text-muted);margin-bottom:10px}
  .ag-toc ol{margin:0;padding-inline-start:20px;font-size:13.5px;line-height:1.45}
  .ag-toc li{margin-bottom:8px}
  .ag-toc a{color:var(--text-2);text-decoration:none}
  .ag-toc a:hover{color:var(--accent);text-decoration:underline}
  .ag-tocfig{display:block;margin-top:12px;padding-top:12px;border-top:1px solid var(--line);
    font-size:13px;color:var(--accent);font-weight:600;text-decoration:none}
}
.ag-doc{min-width:0}
.ag-art{scroll-margin-top:90px;padding-top:var(--s5);margin-top:var(--s5);border-top:2px solid var(--accent)}
.ag-art:first-child{border-top:0;margin-top:0;padding-top:0}
.ag-art h3{font-size:23px;font-weight:800;letter-spacing:-.02em;margin:0 0 var(--s3)}
.ag-n{display:block;font-size:11px;letter-spacing:.17em;text-transform:uppercase;
  color:var(--accent);font-weight:700;margin-bottom:6px}
.ag-sum{background:var(--inset);border-radius:var(--r-sm);padding:var(--s4);margin-bottom:var(--s4)}
.ag-sumlab{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:800;color:var(--accent)}
.ag-sum p{margin:7px 0;font-size:16px;line-height:1.6;color:var(--text-2)}
.ag-sum i{font-style:normal;font-size:12.5px;color:var(--text-muted)}
.ag-sec{margin-bottom:var(--s4)}
.ag-sec h4{font-size:15.5px;font-weight:700;margin:0 0 6px;color:var(--text)}
.ag-sec p{margin:0 0 10px;font-size:15.5px;line-height:1.65;color:var(--text-2)}
.ag-list{margin:8px 0;padding-inline-start:22px}
.ag-list li{margin:5px 0;font-size:15px;line-height:1.55;color:var(--text-2)}
@media(min-width:760px){.ag-list.cols{column-count:2;column-gap:32px}}
.ag-list.cols li{break-inside:avoid}
.ag-note{display:flex;gap:11px;align-items:flex-start;background:var(--warn-soft);
  border:1px solid var(--warn);border-inline-start-width:4px;border-radius:var(--r-sm);
  padding:var(--s3) var(--s4);margin:var(--s3) 0;color:var(--warn)}
.ag-note svg{flex:none;margin-top:2px}
.ag-note b{display:block;margin-bottom:4px;font-size:14.5px}
.ag-note p{margin:0;font-size:14px;line-height:1.55}
.ag-rates{margin-bottom:var(--s5)}
.ag-ratehead{display:flex;flex-wrap:wrap;gap:4px var(--s3);align-items:baseline;margin-bottom:10px}
.ag-ratehead b{font-size:16.5px;font-weight:800}
.ag-ratehead span{font-size:13px;color:var(--text-muted)}
.ag-foot{margin-top:var(--s6);padding-top:var(--s4);border-top:1px solid var(--line);
  font-size:13.5px;line-height:1.6;color:var(--text-muted);max-width:80ch}
@media print{
  .demobar,.hdr,.ftr,.ag-bar,.ag-toc,.m-tabs,.m-hdr{display:none !important}
  .ag-cols{grid-template-columns:1fr}
  .ag-art{page-break-inside:auto} .ag-art h3{page-break-after:avoid}
}

/* ================= the person ================= */
.team{display:grid;gap:var(--s5)}
@media(min-width:860px){.team{grid-template-columns:300px 1fr;align-items:start}}
.team-card{margin:0;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-1)}
.team-img{background:var(--inset);display:flex;align-items:flex-end;justify-content:center;
  aspect-ratio:3/4;overflow:hidden}
.team-img img{width:100%;height:100%;object-fit:contain;object-position:bottom;display:block}
.team-card figcaption{padding:var(--s4);display:flex;flex-direction:column;gap:8px}
.team-card b{font-size:19px;font-weight:800;letter-spacing:-.02em}
.team-role{font-size:12.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--accent);font-weight:700}
.team-card p{margin:0;font-size:15px;line-height:1.6;color:var(--text-2)}
.team-card .btn{align-self:flex-start;display:inline-flex;align-items:center;gap:7px;min-height:44px}
.team-why{display:flex;flex-direction:column;gap:var(--s4)}
.why-row{display:flex;gap:14px;align-items:flex-start;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r);padding:var(--s4)}
.why-ic{flex:none;width:42px;height:42px;border-radius:10px;background:var(--inset);
  color:var(--accent);display:grid;place-items:center}
.why-row b{display:block;font-size:16.5px;font-weight:700;margin-bottom:5px;letter-spacing:-.01em}
.why-row p{margin:0;font-size:15px;line-height:1.6;color:var(--text-2)}

/* ================= the live booking engine ================= */
.hq-warn{display:flex;gap:13px;align-items:flex-start;background:var(--warn-soft);
  border:1px solid var(--warn);border-inline-start-width:4px;border-radius:var(--r);
  padding:var(--s4);margin-bottom:var(--s5);color:var(--warn)}
.hq-warn svg{flex:none;margin-top:2px}
.hq-warn b{display:block;font-size:16px;margin-bottom:5px}
.hq-warn p{margin:0 0 12px;font-size:15px;line-height:1.6}
.hq-steps{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 var(--s4);padding:0}
.hq-steps li{display:flex;align-items:center;gap:8px;background:var(--surface);
  border:1px solid var(--line);border-radius:999px;padding:6px 14px 6px 6px;
  font-size:13.5px;color:var(--text-2);white-space:nowrap}
.hq-steps span{width:24px;height:24px;border-radius:50%;background:var(--accent);
  color:var(--on-accent);display:grid;place-items:center;font-size:12px;font-weight:800;flex:none}
.hq-frame{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r);
  overflow:hidden;box-shadow:var(--shadow-1)}
.hq-frame iframe{display:block;width:100%;height:1180px;border:0;background:#fff}
@media(max-width:820px){.hq-frame iframe{height:1420px}}
.agpeek{display:flex;flex-wrap:wrap;gap:12px 14px;align-items:center;background:var(--inset);
  border:1px solid var(--line);border-radius:var(--r);padding:var(--s4);margin-bottom:var(--s5)}
.agpeek svg{flex:none;color:var(--accent)}
.agpeek > div{flex:1 1 260px;min-width:0}
.agpeek b{display:block;font-size:15.5px;font-weight:700;margin-bottom:3px}
.agpeek p{margin:0;font-size:14px;line-height:1.55;color:var(--text-2)}
.agpeek .btn{min-height:44px;display:inline-flex;align-items:center}


/* ---- theme control, in the header ----
   Sits next to the language control because both are display preferences, not
   product. Segmented rather than a single cycling button: three states (light,
   dark, auto) cannot be expressed by one toggle without hiding one of them. */
/* 40px visual, 44px target. The header has exactly enough room for the nav at
   40 and not at 44, so the hit area is extended past the visual bounds rather
   than the button being grown — same rule, no cost to the nav. */
.modeswitch{border:0;background:var(--surface-2);color:var(--text-2);cursor:pointer;
  width:40px;height:40px;border-radius:999px;display:grid;place-items:center;flex:none;
  position:relative;transition:background .18s ease,color .18s ease}
.modeswitch::after{content:"";position:absolute;inset:-2px}
.modeswitch:hover{background:var(--line);color:var(--text)}

/* ---- what people search for ----
   Real answers to real queries. Two columns so it reads as content, not as a
   footer keyword dump — which is what it would be if it were a bare list. */
.seo-grid{display:grid;gap:var(--s4)}
@media(min-width:760px){.seo-grid{grid-template-columns:repeat(2,1fr)}}
.seo-row{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:var(--s4)}
.seo-row h3{margin:0 0 6px;font-size:16.5px;font-weight:700;letter-spacing:-.01em}
.seo-row p{margin:0;font-size:15px;line-height:1.6;color:var(--text-2)}
.seo-areas{margin:var(--s5) 0 0;font-size:14px;line-height:1.7;color:var(--text-muted);max-width:90ch}
.seo-areas b{color:var(--text-2)}

/* ---- language menu ---- */
.langwrap{position:relative;flex:none}
.langbtn{display:inline-flex;align-items:center;gap:6px;border:0;cursor:pointer;
  background:var(--surface-2);color:var(--text-2);height:40px;padding:0 13px;
  border-radius:999px;font:inherit;font-size:13px;position:relative;
  transition:background .18s ease,color .18s ease}
.langbtn::after{content:"";position:absolute;inset:-2px}
.langbtn:hover{background:var(--line);color:var(--text)}
.langbtn b{font-weight:700;font-size:13.5px;letter-spacing:.02em}
/* A class selector beats the UA's [hidden]{display:none}, so `display:flex`
   here left the menu permanently open over the page. Hide it explicitly. */
.langpop{position:absolute;top:calc(100% + 8px);inset-inline-end:0;z-index:80;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);
  box-shadow:var(--shadow-2);padding:5px;min-width:172px;display:flex;flex-direction:column;gap:2px}
.langpop[hidden]{display:none}
.langpop button{border:0;background:none;cursor:pointer;font:inherit;font-size:15px;
  color:var(--text-2);text-align:start;padding:0 12px;min-height:44px;border-radius:8px;
  display:flex;align-items:center;transition:background .15s ease}
.langpop button:hover{background:var(--surface-2);color:var(--text)}
.langpop button.on{background:var(--accent-soft);color:var(--accent);font-weight:700}

/* the demo must not dead-end — this is the bridge to the system that can
   actually take the booking */
.handoff{display:flex;flex-wrap:wrap;gap:12px 14px;align-items:center;text-align:start;
  background:var(--inset);border:1px solid var(--accent);border-radius:var(--r);
  padding:var(--s4);margin:0 auto var(--s5);max-width:640px}
.handoff svg{flex:none;color:var(--accent)}
.handoff > div{flex:1 1 240px;min-width:0}
.handoff b{display:block;font-size:16px;font-weight:700;margin-bottom:4px}
.handoff p{margin:0;font-size:14.5px;line-height:1.55;color:var(--text-2)}
.handoff .btn{min-height:44px;display:inline-flex;align-items:center}


/* ================= app feel =================
   Three things separate a site that feels like a site from one that feels like
   the Uber or Lyft app: navigation that lands instantly, nothing that jumps
   after paint, and touch that responds before the network does. */

/* 1 — offscreen sections are not laid out until they are near the viewport.
   The fleet page renders 22 cards; without this the browser lays out and
   paints all of them before showing the first one. */
.sect, .seo-row, .tcard, .ag-art{ content-visibility:auto }
.sect{ contain-intrinsic-size:auto 600px }
.ag-art{ contain-intrinsic-size:auto 800px }

/* 2 — reserve the space an image will occupy so nothing reflows when it
   arrives. The aspect-ratio boxes already do this; this covers the rest. */
img{ max-width:100% }

/* 3 — touch that answers immediately. No 300ms tap delay, no text-selection
   flash when a card is pressed, and a real pressed state. */
a, button, .radio, .vcard, .m-row, .m-railcard{ touch-action:manipulation }
.btn, .vcard, .m-row, .m-railcard, .seo-row, .fbtn{
  -webkit-tap-highlight-color:transparent }
.btn:active{ transform:scale(.978) }
.vcard:active, .m-row:active, .m-railcard:active{ transform:scale(.99) }
.btn, .vcard, .m-row, .m-railcard{ transition:transform .12s cubic-bezier(.2,0,.2,1),
  box-shadow .18s ease, background .18s ease, border-color .18s ease }

/* 4 — the page transition. Was a fade on every render, which reads as a
   web page reloading. A short upward settle reads as a view changing. */
.fadein{ animation:viewIn .19s cubic-bezier(.2,0,.2,1) both }
@keyframes viewIn{ from{ opacity:0; transform:translate3d(0,6px,0) } to{ opacity:1; transform:none } }

/* 5 — smooth momentum inside the horizontal rails, and no scroll chaining out
   of them into the page. */
.m-rail, .tablewrap, .ag-fees{ overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch }

@media (prefers-reduced-motion: reduce){
  .fadein{ animation:none }
  .btn:active, .vcard:active, .m-row:active, .m-railcard:active{ transform:none }
}

/* ---- driver agreement ----
   Reproduced whole, so it is denser than the rental agreement page. The Arabic
   acknowledgement is right-to-left and set in its own face. */
.dl-doc{max-width:78ch}
.dl-art{scroll-margin-top:90px;font-size:21px;font-weight:800;letter-spacing:-.02em;
  margin:var(--s6) 0 var(--s3);padding-top:var(--s4);border-top:2px solid var(--accent)}
.dl-sec{font-size:16px;font-weight:700;margin:var(--s4) 0 6px;color:var(--accent)}
.dl-sec b{color:var(--text)}
.dl-sub{font-size:15px;font-weight:800;margin:var(--s5) 0 8px;padding-bottom:6px;
  border-bottom:1px solid var(--accent);letter-spacing:.01em}
.dl-doc p{margin:0 0 11px;font-size:15.5px;line-height:1.65;color:var(--text-2)}
.dl-list{margin:8px 0 16px;padding-inline-start:22px}
.dl-list li{margin:5px 0;font-size:15px;line-height:1.55;color:var(--text-2)}
.dl-checks{margin:10px 0 18px;display:flex;flex-direction:column;gap:10px}
.dl-check{display:flex;gap:11px;align-items:flex-start;margin:0 !important;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:11px 13px;font-size:14.5px !important;line-height:1.55 !important}
.dl-check .bx{flex:none;width:17px;height:17px;border:1.6px solid var(--accent);
  border-radius:4px;margin-top:2px}
.dl-doc [dir="rtl"]{font-family:'Noto Kufi Arabic',var(--font-body);line-height:1.9;text-align:right}

/* ================= the contact form, in motion =================
   Freeny is a road company, so the form behaves like the road: lane markings
   run under the panel, the focused field lights like a sign catching
   headlights, and sending is a journey that arrives.

   Everything here animates transform and opacity only — the two properties
   the compositor can handle on the GPU without touching layout or paint.
   No width, no top, no box-shadow keyframes. The whole thing costs nothing,
   which is the point: it has to survive the "fast and light like Uber" test.
   The road strip is one element with a repeating-gradient, translated. */

.formwrap{position:relative;border-radius:var(--r);overflow:hidden;isolation:isolate}

/* the road: lane dashes travelling left, behind the form, very quiet */
.formwrap::before{
  content:"";position:absolute;inset:auto 0 0 0;height:3px;z-index:0;
  background:repeating-linear-gradient(90deg,
    var(--accent) 0 26px, transparent 26px 60px);
  opacity:.22;
  will-change:transform;
  animation:laneRun 2.4s linear infinite;
}
@keyframes laneRun{ from{ transform:translate3d(0,0,0) } to{ transform:translate3d(-60px,0,0) } }

/* fields rise in, staggered — a form that assembles rather than appears */
.formwrap .field{ animation:fieldIn .42s cubic-bezier(.2,.7,.2,1) both }
.formwrap .field:nth-child(1){animation-delay:.02s}
.formwrap .field:nth-child(2){animation-delay:.06s}
.formwrap .field:nth-child(3){animation-delay:.10s}
.formwrap .field:nth-child(4){animation-delay:.14s}
.formwrap .field:nth-child(5){animation-delay:.18s}
@keyframes fieldIn{ from{opacity:0;transform:translate3d(0,10px,0)} to{opacity:1;transform:none} }

/* focus: the sign catches the light. A keyline sweep, not a colour change. */
.formwrap .field{position:relative}
.formwrap .field::after{
  content:"";position:absolute;inset-inline:0;bottom:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .34s cubic-bezier(.2,.7,.2,1);
  pointer-events:none;
}
.formwrap .field:focus-within::after{transform:scaleX(1)}
.formwrap input, .formwrap textarea, .formwrap select{
  transition:transform .18s cubic-bezier(.2,0,.2,1), border-color .18s ease;
  will-change:transform;
}
.formwrap .field:focus-within input,
.formwrap .field:focus-within textarea,
.formwrap .field:focus-within select{ transform:translate3d(0,-1px,0) }

/* a field that fails shakes once — short, and never more than once */
.formwrap .field.bad input, .formwrap .field.bad textarea{
  animation:nudge .3s cubic-bezier(.36,.07,.19,.97) both }
@keyframes nudge{
  10%,90%{transform:translate3d(-2px,0,0)} 30%,70%{transform:translate3d(3px,0,0)}
  50%{transform:translate3d(-2px,0,0)} 100%{transform:none} }

/* sending: one centre line runs under the label, like road passing beneath */
.btn.sending{position:relative;overflow:hidden;pointer-events:none}
.btn.sending::after{
  content:"";position:absolute;inset-inline:0;bottom:8px;height:2px;
  background:repeating-linear-gradient(90deg,
    currentColor 0 14px, transparent 14px 34px);
  opacity:.5;
  will-change:transform; animation:laneRun .5s linear infinite;
}

/* ---- arrival: the car covers the road and the message lands ---- */

.arrived{
  padding:var(--s5) var(--s5) var(--s5);
  border:1px solid var(--accent); border-radius:var(--r);
  background:var(--accent-soft); text-align:center;
  animation:arrive .5s cubic-bezier(.2,.7,.2,1) both;
}
[data-mode="dark"] .arrived{ background:color-mix(in srgb, var(--accent) 15%, var(--surface)) }
.arrived h4{
  margin:var(--s4) 0 var(--s2); font-size:19px; font-weight:800;
  letter-spacing:-.02em; color:var(--accent);
}
.arrived p{ margin:0; font-size:15.5px; line-height:1.55; color:var(--text-2) }

/* the road the car crosses */
.arrived-road{
  position:relative; height:34px; overflow:hidden;
  border-bottom:2px solid color-mix(in srgb, var(--accent) 35%, transparent);
}
.arrived-lane{
  position:absolute; inset-inline:0; bottom:-2px; height:2px;
  background:repeating-linear-gradient(90deg,
    var(--accent) 0 20px, transparent 20px 46px);
  opacity:.45; will-change:transform;
  animation:laneRun 1.1s linear 3;   /* runs while the car passes, then rests */
}
.arrived-car{
  position:absolute; bottom:2px; inset-inline-start:0;
  width:56px; height:23px; will-change:transform;
  animation:driveBy 1.15s cubic-bezier(.35,0,.25,1) both;
}
.arrived-car .body { fill:var(--accent) }
.arrived-car .glass{ fill:color-mix(in srgb, var(--accent) 45%, var(--surface)) }
.arrived-car .wheel{ fill:var(--text) }

/* enters from off the start edge, settles just past centre */
@keyframes driveBy{
  from{ transform:translate3d(-90px,0,0) }
  to  { transform:translate3d(calc(50vw - 28px),0,0) }
}
@media(min-width:560px){
  @keyframes driveBy{
    from{ transform:translate3d(-90px,0,0) }
    to  { transform:translate3d(190px,0,0) }
  }
}

/* arrival: the confirmation lands, and the tick draws itself */
.qres.pass.show{ animation:arrive .5s cubic-bezier(.2,.7,.2,1) both }
@keyframes arrive{
  from{opacity:0;transform:translate3d(0,14px,0) scale(.985)} to{opacity:1;transform:none} }
.sent-tick{width:46px;height:46px;display:block;margin:0 auto 12px}
.sent-tick circle{
  fill:none;stroke:var(--accent);stroke-width:2.4;
  stroke-dasharray:132;stroke-dashoffset:132;
  animation:draw .5s cubic-bezier(.2,.7,.2,1) .04s forwards}
.sent-tick path{
  fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:30;stroke-dashoffset:30;
  animation:draw .3s cubic-bezier(.2,.7,.2,1) .34s forwards}
@keyframes draw{ to{ stroke-dashoffset:0 } }

@media (prefers-reduced-motion: reduce){
  .formwrap::before, .btn.sending::after{animation:none}
  /* the car still arrives, it just does not drive there */
  .arrived{animation:none}
  .arrived-lane{animation:none}
  .arrived-car{animation:none; transform:translate3d(120px,0,0)}
  .formwrap .field{animation:none}
  .formwrap .field.bad input, .formwrap .field.bad textarea{animation:none}
  .qres.pass.show{animation:none}
  .sent-tick circle, .sent-tick path{animation:none;stroke-dashoffset:0}
}

/* ================= success surfaces in dark mode =================
   In the dark theme --ok is #0A0B0A and --ok-soft is #FFD335. That pair is
   built for one thing: the "available" chip, black type on Guide Sign yellow.
   It is the yellow law expressed as tokens.

   Anything else that used them as a generic success colour therefore came out
   as a slab of yellow with near-black text on it — the contact confirmation
   did exactly that, and so did the booking qualification result. Yellow is
   reserved, and black type on a dark surface is unreadable regardless.

   Success SURFACES get a green tint mixed from the accent instead. The
   available chip is deliberately left alone: there, yellow is the point. */
[data-mode="dark"] .qres.pass{
  border-color:var(--accent);
  background:color-mix(in srgb, var(--accent) 15%, var(--surface));
}
[data-mode="dark"] .qres.pass h4{ color:var(--accent) }
[data-mode="dark"] .incl-col.yes li::before,
[data-mode="dark"] .m-ticks.yes li::before{
  background:var(--accent); color:#06110C;
}