/* Rifqa × Mathwaa co-brand: Rifqa ink + sun, Mathwaa plum + copper + cream */
:root{
  /* shared launch palette */
  --ink:#201E26; --ink2:#2A2832; --line:#3A3844; --cream:#F7F4EC; --dim:#B9B5AE; --grey:#8C8A94;
  --sun:#F6C516; --sun2:#FFD93D; --err:#FF8A73; --ok:#7EE0A1;
  --bg:var(--ink); --card:var(--ink2); --text:var(--cream); --muted:var(--dim);
  /* legacy names used below, mapped to the new scheme */
  --plum:var(--ink2); --plum2:#34313D; --copper:var(--sun); --sand:var(--cream); --stone:var(--grey);
  --fun:'Baloo Bhaijaan 2','Readex Pro',system-ui,sans-serif;
  --body:'Readex Pro',system-ui,-apple-system,'Segoe UI',Tahoma,sans-serif;
  --r:18px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;background:var(--bg);color:var(--text)}
body{font-family:var(--body);font-size:16px;line-height:1.7;overflow-x:hidden}
img{max-width:100%}
a{color:var(--copper)}

/* top bar */
.top{position:sticky;top:0;z-index:20;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px max(16px,env(safe-area-inset-right)) 10px max(16px,env(safe-area-inset-left));
  background:color-mix(in srgb,var(--ink) 88%,transparent);backdrop-filter:blur(10px)}
.brands{display:flex;align-items:center;gap:12px}
.brands img{height:34px;width:auto;display:block}
.brands .rifqa{height:38px}
.brands .x{color:var(--sun);font:800 22px var(--fun)}
.toform{font:700 15px var(--fun);text-decoration:none;color:var(--ink);background:var(--sun);padding:6px 16px;border-radius:999px;
  box-shadow:0 4px 0 #b38d06;transition:transform .15s}
.toform:active{transform:translateY(3px);box-shadow:0 1px 0 #b38d06}

/* hero */
.hero{position:relative;overflow:hidden;color:var(--cream);
  background:radial-gradient(110% 80% at 80% 0%,#34313D 0%,var(--ink) 60%,#18161D 100%);
  padding:44px 16px 0;display:grid;gap:8px}
.hero::before{content:"";position:absolute;inset:0;opacity:.22;pointer-events:none;
  background-image:radial-gradient(var(--stone) 1px,transparent 1.4px);background-size:22px 22px}
.hero-copy{position:relative;max-width:760px;margin:0 auto;text-align:center}
.kicker{display:inline-flex;align-items:center;gap:8px;margin:0 0 6px;padding:4px 14px;border-radius:999px;
  background:rgba(246,197,22,.08);border:1px solid rgba(246,197,22,.35);color:var(--sun);font-weight:500;font-size:14px}
.kicker .dot{width:8px;height:8px;border-radius:50%;background:var(--sun);animation:blink 1.4s infinite}
h1{font-family:var(--fun);font-weight:800;font-size:clamp(34px,7vw,64px);line-height:1.15;margin:6px 0 10px;text-wrap:balance}
h1 .hl{color:var(--sun);display:inline-block;animation:pop .9s cubic-bezier(.2,1.6,.4,1) .2s both}
.lead{margin:0 auto 14px;max-width:620px;color:var(--dim);font-size:clamp(15px,2.4vw,18px)}
.lead b{color:var(--cream)}
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:6px}
.chips span{font-size:13.5px;padding:6px 12px;border-radius:999px;background:var(--ink2);border:1px solid var(--line);color:var(--cream)}

/* scene */
.scene{position:relative;height:260px;margin:0 -16px;color:#15131A}
.sun{position:absolute;top:18px;left:12%;width:70px;height:70px;border-radius:50%;background:var(--sun);
  box-shadow:0 0 0 14px rgba(246,197,22,.14),0 0 0 30px rgba(246,197,22,.06);animation:float 6s ease-in-out infinite}
.skyline{position:absolute;bottom:62px;left:0;width:100%;height:170px;opacity:.95}
.skyline .windows rect{animation:blink 3s infinite}
.skyline .windows rect:nth-child(3n){animation-delay:.8s}.skyline .windows rect:nth-child(4n){animation-delay:1.7s}
.road{position:absolute;bottom:0;left:0;right:0;height:64px;background:#121016;border-top:4px solid var(--line)}
.lane{position:absolute;top:28px;left:0;width:200%;height:6px;
  background:repeating-linear-gradient(90deg,var(--sun) 0 38px,transparent 38px 76px);animation:lane 1.1s linear infinite}
.pin{position:absolute;bottom:78px;display:flex;flex-direction:column;align-items:center;font:700 13px var(--fun);color:var(--cream)}
.pin span{background:var(--cream);color:var(--ink);padding:2px 10px;border-radius:10px;margin-bottom:4px;white-space:nowrap}
.pin::after{content:"";width:16px;height:16px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--sun);border:3px solid var(--ink)}
.pin-home{right:6%;animation:bob 2.4s ease-in-out infinite}
.pin-uni{left:6%;animation:bob 2.4s ease-in-out .8s infinite}
.bus-wrap{position:absolute;bottom:22px;width:210px;animation:drive 9s linear infinite}
.bus{width:100%;display:block;animation:bump .45s ease-in-out infinite alternate;filter:drop-shadow(0 8px 6px rgba(0,0,0,.35))}
.wheel{animation:spin .6s linear infinite}
.puff{position:absolute;bottom:14px;right:-10px;width:12px;height:12px;border-radius:50%;background:rgba(247,244,236,.45);animation:puff 1.2s ease-out infinite}
.puff.p2{animation-delay:.4s}.puff.p3{animation-delay:.8s}

@keyframes drive{0%{right:-240px}100%{right:calc(100% + 40px)}}
@keyframes bump{to{transform:translateY(-3px) rotate(-.6deg)}}
@keyframes spin{to{transform:rotate(-360deg)}}
@keyframes lane{to{transform:translateX(76px)}}
@keyframes puff{0%{opacity:.8;transform:translate(0,0) scale(.6)}100%{opacity:0;transform:translate(26px,-14px) scale(1.8)}}
@keyframes float{50%{transform:translateY(-8px)}}
@keyframes bob{50%{transform:translateY(-6px)}}
@keyframes blink{50%{opacity:.35}}
@keyframes pop{0%{transform:scale(.4) rotate(-6deg);opacity:0}100%{transform:none;opacity:1}}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:980px;margin:-28px auto 0;padding:0 16px;position:relative;z-index:2}
.step{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px 16px 12px;box-shadow:0 12px 30px rgba(0,0,0,.35)}
.step b{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:12px;background:var(--sun);color:var(--ink);font:800 18px var(--fun)}
.step h3{font:700 19px var(--fun);margin:8px 0 2px;color:var(--cream)}
.step p{margin:0;color:var(--muted);font-size:14.5px}

/* form */
.form-sec{max-width:720px;margin:34px auto 40px;padding:0 16px;scroll-margin-top:70px}
.card{background:var(--card);border:1px solid var(--line);border-radius:28px;padding:26px 22px;box-shadow:0 20px 50px rgba(0,0,0,.4);position:relative;overflow:hidden}
.card::before{content:"";position:absolute;inset:0 0 auto 0;height:6px;background:linear-gradient(90deg,var(--sun2),var(--sun))}
.card h2{font:800 30px var(--fun);margin:4px 0 0;color:var(--cream)}
.wave{display:inline-block;animation:wave 2s ease-in-out infinite;transform-origin:70% 70%}
@keyframes wave{10%,30%{transform:rotate(14deg)}20%{transform:rotate(-8deg)}40%{transform:none}}
.sub{margin:2px 0 16px;color:var(--muted);font-size:14.5px}
.sub i,.field i,.terms i{color:var(--err);font-style:normal}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;min-width:0}
.field>span{font-weight:500;font-size:15px}
input[type=text],input[type=tel],input[type=date],select,textarea{width:100%;font:inherit;font-size:16px;color:var(--text);background:var(--ink);
  border:2px solid var(--line);border-radius:16px;padding:11px 14px;outline:none;transition:border-color .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{border-color:var(--copper);box-shadow:0 0 0 4px rgba(246,197,22,.18)}
.field.bad input,.field.bad select,.field.bad textarea{border-color:var(--err)}
textarea{resize:vertical}
.err{display:none;color:var(--err);font-size:13px;font-style:normal}
.bad .err,.err.show{display:block}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.seg label{cursor:pointer}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg span{display:block;text-align:center;padding:12px;border-radius:16px;border:2px solid var(--line);font:700 16px var(--fun);transition:all .15s}
.seg input:checked+span{background:var(--sun);border-color:var(--sun);color:var(--ink);transform:translateY(-2px);box-shadow:0 4px 0 #b38d06}
.seg input:focus-visible+span{outline:3px solid var(--copper);outline-offset:2px}
.dayhint{color:var(--muted);font-size:13px;margin-top:-4px}
.days{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.days label{cursor:pointer}
.days input{position:absolute;opacity:0;pointer-events:none}
.days span{display:block;text-align:center;padding:9px 2px;border-radius:14px;border:2px dashed var(--line);font:700 14px var(--fun);color:var(--muted);transition:all .15s;text-decoration:line-through}
.days input:checked+span{background:var(--sun);border:2px solid var(--sun);color:var(--ink);text-decoration:none}
.days input:focus-visible+span{outline:3px solid var(--copper);outline-offset:2px}
@media (max-width:520px){.days{grid-template-columns:repeat(4,1fr)}}
.locrow{display:flex;gap:8px}
.locrow input{flex:1;min-width:0}
.pinbtn{flex:none;font:700 15px var(--fun);border:2px solid var(--sun);background:transparent;color:var(--sun);border-radius:16px;padding:0 14px;cursor:pointer}
.pinbtn:hover{background:var(--sun);color:var(--ink)}
.coords{color:var(--ok);font-size:13px;min-height:0}
.coords:empty{display:none}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.terms{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:16px;background:rgba(246,197,22,.08);border:1px solid rgba(246,197,22,.35);font-size:14.5px;cursor:pointer}
.terms input{width:22px;height:22px;margin-top:3px;accent-color:var(--sun);flex:none}
.terms+.err{margin:6px 4px 0}
.submit{margin-top:18px;width:100%;display:flex;align-items:center;justify-content:center;gap:10px;font:800 21px var(--fun);
  color:var(--ink);background:var(--sun);border:0;border-radius:var(--r);padding:14px;cursor:pointer;box-shadow:0 6px 0 #b38d06;transition:transform .12s,box-shadow .12s}
.submit:hover .mini-bus{transform:translateX(-8px)}
.submit:active{transform:translateY(4px);box-shadow:0 2px 0 #b38d06}
.submit[disabled]{opacity:.7;cursor:wait}
.submit.loading .mini-bus{animation:go .7s linear infinite}
@keyframes go{0%{transform:translateX(16px)}100%{transform:translateX(-16px)}}
.mini-bus{display:inline-block;transition:transform .2s;transform:scaleX(-1)}
.formmsg{min-height:1.2em;margin:10px 0 0;text-align:center;font-size:14.5px;color:var(--err)}

.done{text-align:center}
.done-road{position:relative;height:56px;margin:4px 0 8px;border-bottom:5px dashed var(--sun);overflow:hidden}
.done-bus{position:absolute;bottom:2px;font-size:40px;animation:away 2.6s ease-in forwards;transform:scaleX(-1)}
@keyframes away{0%{right:-60px}60%{right:45%}100%{right:120%}}
.again{font:700 16px var(--fun);border:2px solid var(--sun);background:transparent;color:var(--sun);border-radius:999px;padding:6px 18px;cursor:pointer;margin-top:6px}

/* footer */
.foot{text-align:center;padding:24px 16px 40px;color:var(--muted);font-size:14px;background:#18161D;border-top:1px solid var(--line)}
.foot p{color:var(--dim);margin:8px 0 0}
.foot a{color:var(--sun)}
.brands.small{justify-content:center}
.brands.small img{height:28px}

/* modals */
.modal{position:fixed;inset:0;z-index:50;background:rgba(10,9,12,.7);display:flex;align-items:flex-end;justify-content:center;padding:0}
.modal[hidden]{display:none}
.sheet{background:var(--card);width:100%;max-width:760px;border-radius:26px 26px 0 0;padding:14px 14px max(14px,env(safe-area-inset-bottom));
  animation:up .25s ease-out;max-height:94vh;display:flex;flex-direction:column}
@keyframes up{from{transform:translateY(40px);opacity:0}}
@media (min-width:720px){.modal{align-items:center;padding:24px}.sheet{border-radius:26px}}
.sheet-head{display:flex;justify-content:space-between;align-items:center;font:700 19px var(--fun);padding:2px 4px 6px}
.x-btn{border:0;background:var(--ink);color:var(--text);width:36px;height:36px;border-radius:50%;font-size:16px;cursor:pointer}
.hint{margin:0 4px 8px;color:var(--muted);font-size:14px}
#map{height:min(58vh,460px);border-radius:18px;border:2px solid var(--line)}
.sheet-foot{display:flex;gap:10px;margin-top:10px}
.sheet-foot .ok{flex:1;font:800 18px var(--fun);border:0;background:var(--sun);color:var(--ink);border-radius:16px;padding:8px;cursor:pointer}
.sheet-foot .ghost{font:700 15px var(--fun);border:2px solid var(--line);background:transparent;color:var(--text);border-radius:16px;padding:8px 12px;cursor:pointer}
.terms-body{overflow:auto;padding:0 6px;font-size:15px}
.terms-body li{margin-bottom:8px}
.muted{color:var(--muted);font-size:13.5px}

/* responsive */
@media (max-width:720px){
  .steps{grid-template-columns:1fr;margin-top:-20px}
  .grid{grid-template-columns:1fr;gap:0}
  .scene{height:220px}
  .bus-wrap{width:160px}
  .brands img{height:26px}.brands .rifqa{height:30px}
  .card{padding:22px 16px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.bus-wrap{right:30%}}

/* hero co-brand lockup (big logos) */
.hero-logos{display:flex;align-items:center;justify-content:center;gap:clamp(14px,3vw,28px);margin:0 auto 18px;padding:14px 22px;width:fit-content;max-width:100%;
  background:rgba(247,244,236,.04);border:1px solid var(--line);border-radius:24px}
.hero-logos img{display:block;width:auto;height:clamp(54px,9vw,92px)}
.hero-logos .mathwaa-big{height:clamp(46px,7.6vw,78px)}
.hero-logos .x{font:800 clamp(26px,4vw,40px) var(--fun);color:var(--sun)}
/* fixed city */
.city{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 14px;border-radius:16px;background:var(--ink);border:2px dashed var(--line);color:var(--cream);font-weight:500}
.city small{color:var(--grey);font-size:12.5px}
.grid.two-times{grid-template-columns:1fr 1fr}
@media (max-width:720px){.grid.two-times{grid-template-columns:1fr 1fr;gap:10px}}

/* launch highlight line */
.launch{display:block;width:fit-content;max-width:100%;margin:0 auto 12px;padding:8px 18px;border-radius:999px;
  background:var(--sun);color:var(--ink);font:700 clamp(15px,2.6vw,19px) var(--fun);box-shadow:0 0 0 0 rgba(246,197,22,.55);animation:launchPulse 2.2s ease-out infinite}
.launch b{font-weight:800}
@keyframes launchPulse{0%{box-shadow:0 0 0 0 rgba(246,197,22,.55)}70%{box-shadow:0 0 0 14px rgba(246,197,22,0)}100%{box-shadow:0 0 0 0 rgba(246,197,22,0)}}

/* header: centred, bigger co-brand logos */
.top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding-top:12px;padding-bottom:12px}
.top .brands{justify-self:center;gap:16px}
.top .brands img{height:44px}
.top .brands .rifqa{height:52px}
.top .brands .x{font-size:28px}
.top .toform{justify-self:end}
.skyline{color:#121016;opacity:1}
@media (max-width:720px){
  .top{grid-template-columns:0 auto 1fr;gap:8px}
  .top .brands{justify-self:center;gap:10px}
  .top .brands img{height:32px}.top .brands .rifqa{height:38px}.top .brands .x{font-size:22px}
  .toform{font-size:13px;padding:5px 11px}
}

/* skyline v2: full Riyadh landmarks visible */
.scene{height:320px}
.skyline{height:250px;bottom:62px;color:#3A3744}
.skyline .windows rect,.skyline .windows circle{opacity:.9}
@media (max-width:720px){.scene{height:270px}.skyline{height:200px}}
/* mobile header: logos truly centred */
@media (max-width:720px){
  .top{grid-template-columns:1fr auto 1fr;gap:6px;padding-left:12px;padding-right:12px}
  .top .brands{gap:8px}
  .top .brands img{height:27px}.top .brands .rifqa{height:33px}.top .brands .x{font-size:18px}
  .toform{font-size:12px;padding:4px 10px;white-space:nowrap}
}

/* place search in map sheet */
.search{display:flex;gap:8px;margin:2px 0 6px}
.search input{flex:1;min-width:0;font:inherit;font-size:16px;color:var(--text);background:var(--ink);border:2px solid var(--line);border-radius:14px;padding:9px 12px;outline:none}
.search input:focus{border-color:var(--sun)}
.search button{flex:none;font:700 15px var(--fun);border:0;background:var(--sun);color:var(--ink);border-radius:14px;padding:0 14px;cursor:pointer}
.results{list-style:none;margin:0 0 8px;padding:4px;max-height:190px;overflow:auto;background:var(--ink);border:1px solid var(--line);border-radius:14px}
.results li{padding:8px 10px;border-radius:10px;cursor:pointer;font-size:14px;line-height:1.5}
.results li:hover,.results li:focus{background:var(--ink2);outline:none}
.results li b{display:block;color:var(--cream);font-weight:600}
.results li small{color:var(--grey)}
.results .empty{cursor:default;color:var(--dim)}
.pinbtn{font-size:14px;padding:0 10px}
@media (max-width:520px){#map{height:min(46vh,380px)}}

.results .attrib{font-size:12px;text-align:left;color:var(--grey)}

/* start date: shown only when "pick a date" is chosen */
input[hidden]{display:none}
.field .seg+input[type=date]{margin-top:8px}
input[type=date]{color-scheme:dark}
.start-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:560px){.start-grid{grid-template-columns:1fr;gap:0}}
/* ride type: two choices with a one-line hint each */
.seg.ride label span{display:flex;flex-direction:column;align-items:center;line-height:1.35}
.seg.ride small{font-size:12px;font-weight:400;opacity:.8;margin-top:2px}

/* ---- 4-step form (Figma: Rifqa x Mathwaa Registration UX). Light surface, Readex Pro for UI, Baloo for headings. ---- */
.wiz{--w-ink:#201E26;--w-muted:#6F6A78;--w-line:#DDD5C6;--w-bg:#F7F4EC;--w-sun:#F6C516;--w-soft:#FDF3CF;--w-err:#B03A3A;--w-errs:#F6DEDB;
  color-scheme:light;position:relative;background:var(--w-bg);color:var(--w-ink);border-radius:24px;padding:24px 20px 20px;box-shadow:0 24px 60px rgba(0,0,0,.35);font-family:var(--body)}
.wiz [hidden]{display:none!important}
.wiz h2{font:700 26px/1.3 var(--fun);margin:0 0 18px;color:var(--w-ink);outline:0}
.wiz h3{font:700 18px/1.4 var(--fun);margin:18px 0 8px;color:var(--w-ink)}
.wiz-head{margin-bottom:20px}
.wiz-count{margin:0 0 8px;font-size:14px;font-weight:500;color:var(--w-ink)}
.wiz-bar{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.wiz-bar i{height:6px;border-radius:3px;background:var(--w-line);transition:background .25s}
.wiz-bar i.on{background:var(--w-sun)}
.wiz .field{gap:8px;margin-bottom:22px}
.wiz .q,.wiz .field>span.q{font:700 17px/1.4 var(--fun);color:var(--w-ink)}
.wiz .help{display:block;font-size:13px;line-height:1.5;color:var(--w-muted)}
.wiz .help:empty{display:none}
.wiz .err{color:var(--w-err);font-size:13px;line-height:1.5}
.wiz input[type=text],.wiz input[type=tel],.wiz input[type=date],.wiz select,.wiz textarea{width:100%;min-height:52px;font:400 16px var(--body);color:var(--w-ink);background:#fff;
  border:1.5px solid var(--w-line);border-radius:12px;padding:12px 14px;transition:border-color .15s,box-shadow .15s}
.wiz input::placeholder,.wiz textarea::placeholder{color:var(--w-muted)}
.wiz input:focus,.wiz select:focus,.wiz textarea:focus{outline:0;border-color:var(--w-ink);box-shadow:0 0 0 3px rgba(246,197,22,.45)}
.wiz .field.bad input,.wiz .field.bad select,.wiz .field.bad textarea{border-color:var(--w-err);background:var(--w-errs)}
.wiz .chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-start;margin:0}
.chip,.chip-r span{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:8px 14px;font:500 14px/1.3 var(--body);color:var(--w-ink);background:#fff;
  border:1.5px solid var(--w-line);border-radius:12px;cursor:pointer;transition:background .15s,border-color .15s,transform .1s}
.chip:hover,.chip-r:hover span{border-color:var(--w-ink)}
.chip:active,.chip-r:active span{transform:scale(.97)}
.chip[aria-pressed=true],.chip-r input:checked+span{background:var(--w-sun);border-color:var(--w-sun);font-weight:600}
.chip:focus-visible,.chip-r input:focus-visible+span,.ride-card input:focus-visible+.ride-in,.wnext:focus-visible,.wback:focus-visible,.wiz .submit:focus-visible,.invite:focus-visible,.again:focus-visible,.wiz summary:focus-visible{outline:3px solid var(--w-ink);outline-offset:2px}
.chip-r{cursor:pointer}
.chip-r input{position:absolute;opacity:0;pointer-events:none}
.field.bad .chips .chip:not([aria-pressed=true]),.field.bad .chip-r input:not(:checked)+span{border-color:var(--w-err)}
.other{margin-top:2px}
.wiz .locrow{gap:8px}
.wiz .pinbtn{min-height:52px;font:600 14px var(--body);color:var(--w-ink);background:#fff;border:1.5px solid var(--w-ink);border-radius:12px;padding:0 12px;white-space:nowrap}
.wiz .pinbtn:hover{background:var(--w-sun);border-color:var(--w-sun);color:var(--w-ink)}
.wiz .coords{color:#2F7A55;font-size:13px}
.wiz .days{gap:6px}
.wiz .days span{min-height:44px;display:flex;align-items:center;justify-content:center;font:500 13px var(--body);color:var(--w-muted);background:#fff;border:1.5px solid var(--w-line);border-radius:12px;text-decoration:none}
.wiz .days input:checked+span{background:var(--w-sun);border-color:var(--w-sun);color:var(--w-ink)}
.ride{display:grid;gap:10px}
.ride-card{cursor:pointer;display:block}
.ride-card input{position:absolute;opacity:0;pointer-events:none}
.ride-in{display:flex;align-items:center;gap:14px;padding:16px;background:#fff;border:1.5px solid var(--w-line);border-radius:16px;transition:background .15s,border-color .15s}
.ride-card input:checked+.ride-in{background:var(--w-soft);border:2px solid var(--w-sun);padding:15.5px}
.ride-in svg{flex:none;width:30px;height:30px;fill:none;stroke:var(--w-ink);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ride-tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.ride-tx b{font:700 18px/1.3 var(--fun)}
.ride-tx small{font-size:13px;line-height:1.5;color:var(--w-muted)}
.wiz input[type=date]{margin-top:2px}
.notes{margin-bottom:18px;font-size:14px}
.notes summary{cursor:pointer;color:var(--w-muted);font-weight:500;padding:6px 0;min-height:32px}
.notes textarea{margin-top:6px}
.notes-count{display:block;margin-top:4px;color:var(--w-muted);font-size:12px;text-align:end}
.wiz .terms{background:#fff;border:1.5px solid var(--w-line);border-radius:12px;color:var(--w-ink);font-size:14px;line-height:1.6;padding:12px 14px}
.wiz .terms a{color:var(--w-ink);font-weight:600;text-decoration:underline}
.wiz .terms input{accent-color:var(--w-ink);width:22px;height:22px}
.wiz .formmsg{min-height:0;margin:10px 0 0;color:var(--w-err);font-size:14px;font-weight:500}
.wiz .formmsg:empty{display:none}
.wnav{position:sticky;bottom:0;z-index:5;display:flex;gap:10px;margin:14px -20px 0;padding:12px 20px;background:var(--w-bg);border-top:1px solid var(--w-line)}
.wnext,.wiz .submit{flex:1;min-height:52px;margin:0;display:flex;align-items:center;justify-content:center;font:600 16px var(--body);color:var(--w-ink);background:var(--w-sun);border:0;border-radius:14px;cursor:pointer;box-shadow:none;transition:filter .15s,transform .1s}
.wnext:hover,.wiz .submit:hover{filter:brightness(.96)}
.wnext:active,.wiz .submit:active{transform:scale(.99);box-shadow:none}
.wback{min-height:52px;padding:0 18px;font:500 15px var(--body);color:var(--w-ink);background:transparent;border:1.5px solid var(--w-line);border-radius:14px;cursor:pointer}
.wnote{margin:6px 0 0;text-align:center;font-size:13px;color:var(--w-muted)}
.done-ok{display:grid;place-items:center;width:60px;height:60px;border-radius:50%;background:#DDEFE5;margin-bottom:12px}
.done-ok svg{width:30px;height:30px;fill:none;stroke:#2F7A55;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.wiz.done{text-align:right}
.sum{margin:0;background:#fff;border:1px solid var(--w-line);border-radius:14px;padding:4px 14px}
.sum div{display:flex;justify-content:space-between;gap:14px;padding:10px 0;border-top:1px solid var(--w-line)}
.sum div:first-child{border-top:0}
.sum dt{flex:none;font-size:13px;color:var(--w-muted)}
.sum dd{margin:0;font-size:14px;font-weight:500;text-align:left}
.nexts{margin:0 0 18px;padding:0 20px 0 0;font-size:14px;line-height:1.9}
.invite{display:flex;align-items:center;justify-content:center;min-height:52px;font:600 16px var(--body);color:var(--w-ink);background:var(--w-sun);border-radius:14px;text-decoration:none}
.wiz .again{display:block;margin:12px auto 0;font:500 14px var(--body);color:var(--w-muted);background:transparent;border:0;text-decoration:underline;padding:8px 12px}
@media (min-width:640px){.wiz{padding:32px 32px 24px}.wnav{margin:14px -32px 0;padding:12px 32px;border-radius:0 0 24px 24px}.ride{grid-template-columns:1fr 1fr}.ride-in{height:100%}}
@media (prefers-reduced-motion:reduce){.wiz *{transition:none!important}}
/* hero start button */
.hero-cta{display:flex;align-items:center;justify-content:center;width:min(100%,340px);min-height:54px;margin:20px auto 6px;font:600 17px var(--body);color:var(--ink);background:var(--sun);border-radius:14px;text-decoration:none;transition:filter .15s}
.hero-cta:hover{filter:brightness(.96)}
.hero-cta:focus-visible{outline:3px solid var(--cream);outline-offset:2px}
.hero-note{margin:0;text-align:center;font-size:13px;color:var(--muted)}

/* ---- ZAT-112 additions (local/portable build) ---- */
.wheel-a{transform-origin:58px 90px}
.wheel-b{transform-origin:184px 90px}

/* Consent/preview gate. hidden must win over the display rule below. */
.preview-banner[hidden],.search[hidden],.field[hidden]{display:none!important}
.preview-banner{margin:0;padding:10px 16px;background:var(--sun);color:var(--ink);
  font:700 14px/1.5 var(--body);text-align:center;border-bottom:2px solid var(--ink)}
.preview-banner a{color:var(--ink);font-weight:800}
.wiz .preview-note{margin:0 0 14px;padding:10px 12px;border-radius:12px;background:#FFF6D6;
  border:1.5px solid #E5B800;color:#5A4300;font-size:13px;line-height:1.6}
.wiz .preview-note[hidden]{display:none!important}
.wiz .submit[disabled],.wiz .wnext[disabled]{opacity:.6;cursor:not-allowed}
.terms .pending-tag{display:inline-block;margin-inline-start:6px;padding:1px 8px;border-radius:999px;
  background:var(--sun);color:var(--w-ink,#201E26);font-size:11px;font-weight:700;vertical-align:middle}
.terms-body .pending-note{margin:0 0 12px;padding:10px 12px;border-radius:12px;
  background:#FFF6D6;border:1.5px solid #E5B800;color:#5A4300;font-size:13.5px;line-height:1.6}