/* Why Not Drive booking app.
   The look of whynotdrive.com.au (site/css/reel.css) carried into a plain,
   traditional booking flow: navy band with the stretchy stacked mark, Anton
   headlines with the hard drop, cream dotted ground, outlined cards with the
   navy lift, one fat amber button. Mobile first. Fonts self hosted. */
@font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/anton-latin-400.woff2') format('woff2');}
@font-face{font-family:'Modak';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/modak-latin-400.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url('/assets/fonts/inter-latin-var.woff2') format('woff2');}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:200 800;font-display:swap;src:url('/assets/fonts/bricolage-latin-var.woff2') format('woff2');}

:root{
  color-scheme:light;
  --navy:#0b1c33; --navy-2:#10264a; --navy-3:#061021;
  --cream:#f5e9d2; --cream-2:#ecd9b4; --tan:#e2c48c; --paper:#fff; --paper-warm:#fffaf0;
  --orange:#ff8a1e; --orange-deep:#b85a07; --amber:#ffb547; --red:#df3f28; --blue:#1f83cf;
  --ink:#1a2333; --ink-soft:#4a5468; --line:#d9ccb2; --field:#74839a;
  --green:#157a44; --green-soft:#e3f3e9; --warn:#7a4f00; --warn-soft:#fff3d1; --err:#a8261a; --err-soft:#fdeceb;
  --slam:"Anton","Bricolage Grotesque",Impact,"Arial Narrow",sans-serif;
  --display:"Bricolage Grotesque","Inter",system-ui,sans-serif;
  --body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --lift:0 6px 0 var(--navy);
  --ring:0 0 0 3px var(--navy);
  --ease:cubic-bezier(.2,.8,.2,1); --pop:cubic-bezier(.16,1.45,.3,1);
  --gutter:max(16px,env(safe-area-inset-left));
}
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
@media (max-width:859px){html{scroll-padding-bottom:96px;}}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;overflow-x:clip;color:var(--ink);font:400 1rem/1.55 var(--body);-webkit-font-smoothing:antialiased;
  background-color:var(--cream);background-image:radial-gradient(rgb(184 120 40 / .2) 1.5px,transparent 1.9px);background-size:14px 14px;}
img,svg{display:block;max-width:100%;}
a{color:var(--navy);text-underline-offset:3px;text-decoration-thickness:1.5px;}
a:hover{color:var(--orange-deep);}
:focus-visible{outline:3px solid var(--navy);outline-offset:3px;}
p{margin:0 0 .9rem;}
.skip{position:absolute;left:-999px;top:8px;z-index:100;background:var(--orange);color:var(--navy);font-weight:800;padding:.7rem 1rem;border-radius:999px;}
.skip:focus{left:8px;}

/* ---------- type ---------- */
h1,h2,h3{color:var(--navy);margin:0 0 .6rem;text-wrap:balance;}
h1{font:400 clamp(2.5rem,7.2vw,4.1rem)/.92 var(--slam);text-transform:uppercase;letter-spacing:.004em;margin:.4rem 0 1.1rem;
  text-shadow:.02em .02em 0 var(--tan),.04em .04em 0 var(--tan),.06em .06em 0 var(--tan);}
h2{font:800 1.3rem/1.2 var(--display);letter-spacing:-.015em;}
h3{font:700 1.05rem/1.3 var(--display);}
.lead{font-size:1.06rem;font-weight:500;}
.hint,.fineprint{color:var(--ink-soft);font-size:.9rem;}
.hint svg,.secure svg{display:inline-block;width:1.05em;height:1.05em;vertical-align:-.15em;margin-right:.2em;color:var(--navy);}

/* ---------- the test mode banner: roadworks tape ---------- */
.mode-banner{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.35rem .6rem;padding:.6rem var(--gutter) .55rem;
  background:var(--navy-3);color:var(--cream);font-size:.84rem;line-height:1.4;text-align:center;}
.mode-banner::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;background:repeating-linear-gradient(-45deg,var(--amber) 0 10px,var(--navy-3) 10px 20px);}
.mode-chip{flex:none;background:var(--amber);color:var(--navy);font:800 .82rem/1 var(--display);padding:.38em .75em;border-radius:6px;transform:rotate(-2deg);box-shadow:0 2px 0 rgb(0 0 0 / .4);}

/* ---------- the navy band: header and the road ---------- */
.band{position:relative;isolation:isolate;overflow:hidden;color:var(--cream);background:var(--navy);}
.band::before{content:"";position:absolute;z-index:-2;left:-60%;right:-60%;top:-240%;bottom:-240%;
  background:repeating-conic-gradient(from 0deg at 18% 50%,#10264a 0 7.5deg,var(--navy) 7.5deg 15deg);}
.band::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse 90% 140% at 12% 0%,transparent 0 30%,rgb(6 16 33 / .78) 100%);}
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:72rem;margin:0 auto;padding:12px var(--gutter) 10px;}
.logo{display:inline-flex;text-decoration:none;padding:4px 6px 6px 2px;border-radius:12px;-webkit-user-drag:none;}
.top .wn-mark--sm{font-size:2.7rem;filter:drop-shadow(.02em .04em 0 rgb(0 0 0 / .45));}
.top-nav{display:flex;gap:8px;}
.top-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 1rem;white-space:nowrap;border-radius:999px;text-decoration:none;
  background:var(--cream);color:var(--navy);font:700 .92rem/1 var(--body);box-shadow:0 3px 0 rgb(0 0 0 / .4);transition:transform .15s var(--ease);}
.top-nav a:hover{color:var(--navy);transform:translateY(-1px) rotate(-1deg);}
.top-nav a:active{transform:translateY(2px);box-shadow:0 1px 0 rgb(0 0 0 / .4);}
.top-nav a:focus-visible{outline-color:var(--orange);}
.logo:focus-visible{outline-color:var(--orange);}

@media (max-width:719px){
  .mode-banner{justify-content:flex-start;text-align:left;flex-wrap:nowrap;font-size:.76rem;line-height:1.35;padding-top:.5rem;padding-bottom:.6rem;}
  .top{padding-top:10px;}
  .top .wn-mark--sm{font-size:2.35rem;}
  .top-nav{gap:6px;}
  .top-nav a{padding:0 .8rem;font-size:.86rem;}
}
@media (min-width:1000px){.top .wn-mark--sm{font-size:3.2rem;}.top{padding-top:14px;}}
/* the road: booking steps as stops, the car parked on the current one */
.trip{max-width:72rem;margin:0 auto;padding:4px var(--gutter) 18px;}
.trip-now{margin:0 0 6px;font:600 .9rem/1.3 var(--body);color:rgb(245 233 210 / .85);}
.trip-now strong{color:var(--amber);font:400 1.25rem/1 var(--slam);text-transform:uppercase;letter-spacing:.02em;margin-left:.15em;}
.steps{--road-y:22px;position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));}
.steps::before,.steps::after{content:"";position:absolute;top:calc(var(--road-y) - 8px);height:16px;left:calc(50% / var(--n));border-radius:8px;}
.steps::before{right:calc(50% / var(--n));background:repeating-linear-gradient(90deg,rgb(245 233 210 / .55) 0 12px,transparent 12px 24px) center / 100% 2px no-repeat,#22385c;box-shadow:inset 0 2px 0 rgb(0 0 0 / .3);}
.steps::after{width:calc((100% - 100% / var(--n)) * var(--i) / (var(--n) - 1));background:repeating-linear-gradient(90deg,var(--navy) 0 12px,transparent 12px 24px) center / 100% 2px no-repeat,linear-gradient(180deg,var(--amber),var(--orange));}
.steps li{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;text-align:center;}
.stop{position:relative;z-index:1;display:grid;place-items:center;height:44px;}
.stop>span,.done .stop svg{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;}
.next .stop>span{background:var(--navy);color:var(--cream);font:800 .82rem/1 var(--body);box-shadow:0 0 0 2.5px rgb(245 233 210 / .55);}
.done .stop svg{background:var(--cream);color:var(--navy);padding:6px;box-shadow:0 0 0 2.5px var(--orange);}
.now .stop svg{width:62px;height:auto;margin-top:-10px;filter:drop-shadow(0 3px 0 rgb(0 0 0 / .35));}
.lbl{font:600 .8rem/1.2 var(--body);color:rgb(245 233 210 / .78);}
.done .lbl{color:var(--cream);}
.now .lbl{color:var(--amber);font-weight:800;}
@media (max-width:719px){
  .lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
  .steps{--road-y:20px;}
  .now .stop svg{width:52px;}
  .stop>span,.done .stop svg{width:26px;height:26px;}
}
@media (min-width:720px){.trip-now{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}.trip{padding-top:8px;}}
@media (prefers-reduced-motion:no-preference){
  .now .stop svg{animation:car-in .9s var(--pop) both;}
  @keyframes car-in{from{transform:translateX(-46px) rotate(-3deg);opacity:0;}to{transform:none;opacity:1;}}
}

/* ---------- page ---------- */
main{flex:1;width:100%;max-width:72rem;margin:0 auto;padding:22px var(--gutter) 56px;}
.page-title{margin-top:.2rem;}
.narrow{max-width:38rem;}
.card{position:relative;background:var(--paper);border-radius:22px;padding:20px;margin:0 0 22px;box-shadow:0 0 0 3px var(--navy),var(--lift);}
.card>:last-child{margin-bottom:0;}
@media (min-width:720px){.card{padding:26px 28px;}}

/* forms: conventional, large, labelled */
label{display:block;margin:0 0 16px;color:var(--navy);font:700 .95rem/1.35 var(--body);}
input,select,textarea{display:block;width:100%;margin-top:6px;min-height:52px;padding:.75rem .85rem;font:500 1rem/1.3 var(--body);color:var(--ink);
  background:var(--paper);border:2px solid var(--field);border-radius:12px;transition:border-color .15s,box-shadow .15s;}
select{appearance:none;-webkit-appearance:none;padding-right:2.6rem;background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%230b1c33' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right .8rem center / 18px no-repeat;}
textarea{min-height:6rem;resize:vertical;}
input::placeholder{color:#7b8496;}
input:hover,select:hover,textarea:hover{border-color:var(--navy);}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 4px var(--amber);}
input:user-invalid{border-color:var(--err);}
fieldset{border:0;margin:0 0 20px;padding:0;min-width:0;}
legend{padding:0;margin:0 0 12px;color:var(--navy);font:800 1.2rem/1.2 var(--display);}
.grid2{display:grid;grid-template-columns:1fr;gap:0 16px;}
@media (min-width:560px){.grid2{grid-template-columns:1fr 1fr;}}

.choice{position:relative;display:flex;gap:14px;align-items:flex-start;margin:0 0 10px;padding:14px 16px;border:2px solid var(--line);border-radius:16px;background:var(--paper);cursor:pointer;font-weight:400;transition:border-color .15s,box-shadow .15s,background .15s;}
.choice:hover{border-color:var(--navy);}
.choice:has(input:checked){border-color:var(--navy);background:var(--paper-warm);box-shadow:0 4px 0 var(--navy);}
.choice:has(input:focus-visible){box-shadow:0 0 0 4px var(--amber);}
.choice input,.check input{flex:none;width:24px;height:24px;min-height:0;margin:1px 0 0;padding:0;accent-color:var(--navy);box-shadow:none;}
.choice span{display:grid;gap:3px;}
.choice strong{color:var(--navy);font:700 1rem/1.3 var(--body);}
.choice small{color:var(--ink-soft);font-size:.9rem;line-height:1.45;}
.check{display:flex;gap:12px;align-items:flex-start;padding:6px 0;font:400 .94rem/1.5 var(--body);color:var(--ink);}
.consents{margin:4px 0 8px;padding:14px 16px;border-radius:16px;background:var(--paper-warm);border:2px dashed var(--line);}

/* the button: fat, amber, with the lift */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.5em;width:100%;min-height:54px;padding:.85em 1.5em;
  border:0;border-radius:999px;cursor:pointer;text-decoration:none;text-align:center;
  font:800 1.1rem/1.15 var(--display);letter-spacing:-.005em;color:var(--navy);
  background:linear-gradient(180deg,#ffa043,var(--orange) 55%,#f47c0e);
  box-shadow:0 5px 0 var(--orange-deep),0 10px 22px rgb(11 28 51 / .18),inset 0 2px 0 rgb(255 255 255 / .35);
  transition:transform .14s var(--ease),box-shadow .14s var(--ease);-webkit-tap-highlight-color:transparent;}
.btn:hover{color:var(--navy);transform:translateY(-2px);}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--orange-deep),0 3px 8px rgb(11 28 51 / .2);}
.btn:focus-visible{outline:3px solid var(--navy);outline-offset:4px;}
.btn:disabled{opacity:.6;cursor:progress;transform:none;}
.btn-ghost{background:var(--paper);color:var(--navy);box-shadow:0 0 0 2.5px var(--navy),0 5px 0 2.5px var(--navy);}
.btn-ghost:active{box-shadow:0 0 0 2.5px var(--navy),0 1px 0 2.5px var(--navy);}
.btn-go{margin-top:10px;}
@media (min-width:720px){.btn{width:auto;}.btn-go{min-width:18rem;}}

/* ---------- search ---------- */
.search-head .lede{max-width:46ch;font-size:1.05rem;color:var(--ink);margin:-.2rem 0 1.1rem;}
.search-grid{display:grid;grid-template-columns:1fr;gap:0 14px;align-items:end;}
.search-grid label{margin-bottom:14px;}
.f-go{margin:2px 0 4px;}
@media (min-width:560px){.search-grid{grid-template-columns:1fr 1fr;}.f-go{grid-column:1 / -1;}}
@media (min-width:1000px){.search-grid{grid-template-columns:repeat(4,minmax(0,1fr));}.f-go{grid-column:1 / -1;justify-self:end;min-width:16rem;}}
.results{display:grid;gap:26px;margin:6px 0 26px;}

.car{display:grid;grid-template-columns:1fr;gap:0;padding:0;overflow:visible;margin:0;}
.car-art{position:relative;display:grid;place-items:center;min-height:150px;padding:18px 22px 10px;border-radius:19px 19px 0 0;isolation:isolate;overflow:hidden;
  background:repeating-conic-gradient(from 0deg at 50% 92%,var(--cream) 0 7.5deg,#f9f0df 7.5deg 15deg);}
.car-art::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 50% 90%,transparent 30%,rgb(236 217 180 / .7) 100%);}
.car-art .car-svg{width:min(230px,80%);}
.car-info{padding:18px 20px 6px;min-width:0;}
.car h2{margin:0 0 4px;font:400 2.3rem/.95 var(--slam);text-transform:uppercase;letter-spacing:.01em;}
.examples{color:var(--ink-soft);margin:0 0 12px;}
.specs{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px;padding:0;}
.specs li{display:inline-flex;align-items:center;gap:6px;padding:6px 12px 6px 9px;border-radius:999px;background:var(--cream);color:var(--navy);font:700 .86rem/1 var(--body);}
.specs svg{width:18px;height:18px;flex:none;}
.market{display:flex;gap:8px;align-items:flex-start;margin:0 0 6px;color:var(--navy);font:600 .9rem/1.4 var(--body);}
.market svg{flex:none;width:20px;height:20px;color:var(--green);margin-top:1px;}
details{margin:6px 0;}
summary{display:inline-flex;align-items:center;gap:8px;min-height:44px;cursor:pointer;color:var(--navy);font:700 .95rem/1.2 var(--body);list-style:none;}
summary::-webkit-details-marker{display:none;}
summary::before{content:"+";display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--navy);color:var(--cream);font:800 1rem/1 var(--body);transition:transform .2s var(--ease);}
details[open]>summary::before{content:"\2212";}
summary:hover{color:var(--orange-deep);}
.car-buy{display:grid;align-content:center;gap:4px;padding:16px 20px 22px;border-top:3px dashed var(--line);}
.price{margin:0;color:var(--ink-soft);font:600 .95rem/1 var(--body);white-space:nowrap;}
.price span{font:400 2.9rem/1 var(--slam);color:var(--navy);letter-spacing:.01em;margin-right:.1em;}
.perday{margin:0 0 12px;color:var(--ink-soft);font-size:.9rem;}
.car-buy .btn{width:100%;}
.car.chosen{box-shadow:0 0 0 3px var(--navy),0 0 0 7px var(--orange),0 12px 0 3px var(--navy);}
.car-flag{position:absolute;z-index:2;top:-14px;right:18px;margin:0;padding:.3em .6em .25em;border:3px solid currentColor;border-radius:6px;background:var(--cream);color:var(--orange-deep);
  font:400 1.15rem/1 var(--slam);text-transform:uppercase;letter-spacing:.04em;transform:rotate(4deg);box-shadow:0 3px 0 rgb(0 0 0 / .18);}
.car.unavailable .car-art{filter:grayscale(1);opacity:.6;}
.car.unavailable .sold{margin:0;font-weight:600;color:var(--ink-soft);}
/* the real yard photo for a class: the car in the real yard, the drawn car kept as a badge */
.car-art--photo{padding:0;min-height:0;aspect-ratio:4 / 3;background:var(--navy);}
.car-art--photo::after{display:none;}
.car-art--photo picture,.car-art--photo img{display:block;width:100%;height:100%;}
.car-art--photo img{object-fit:cover;}
.car-badge{position:absolute;right:10px;bottom:10px;width:84px;padding:4px 6px 0;border-radius:12px;background:var(--cream);box-shadow:0 0 0 2px var(--navy),0 3px 0 var(--navy);transform:rotate(-3deg);}
.car-badge .car-svg{display:block;width:100%;}
.car-real{position:absolute;left:10px;bottom:12px;margin:0;padding:.3em .55em .25em;border:2px solid var(--navy);border-radius:5px;background:var(--cream);color:var(--navy);font:400 .9rem/1 var(--slam);text-transform:uppercase;letter-spacing:.04em;transform:rotate(-3deg);box-shadow:0 2px 0 rgb(0 0 0 / .25);}
.car.chosen .car-art--photo{background-color:var(--navy);}
@media (min-width:860px){
  .car{grid-template-columns:250px minmax(0,1fr) 250px;}
  .car-art{border-radius:19px 0 0 19px;min-height:100%;padding:18px;}
  .car-art .car-svg{width:100%;}
  .car-art--photo{aspect-ratio:auto;padding:0;}
  .car-art--photo picture{position:absolute;inset:0;}
  .car-info{padding:22px 24px 16px;}
  .car-buy{border-top:0;border-left:3px dashed var(--line);padding:22px 24px;}
}

/* ---------- step pages: the trip ticket beside the form ---------- */
.step-layout{display:grid;grid-template-columns:1fr;gap:0 32px;align-items:start;}
.step-main{min-width:0;}
@media (min-width:960px){
  .step-layout{grid-template-columns:minmax(0,1fr) 22rem;}
  .step-side{grid-column:2;grid-row:1;position:sticky;top:20px;}
  .step-main{grid-column:1;grid-row:1;}
}
.summary{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:14px 16px;margin:0 0 24px;padding:18px 20px 20px;border-radius:22px;
  background:var(--navy);color:var(--cream);box-shadow:0 0 0 3px var(--navy),0 6px 0 3px var(--navy-3);}
.summary div{min-width:0;}
.summary dt{margin:0 0 2px;color:rgb(245 233 210 / .72);font:600 .8rem/1.2 var(--body);}
.summary dd{margin:0;color:var(--cream);font:700 .98rem/1.35 var(--body);}
.s-car{grid-column:1 / -1;display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:10px;padding-bottom:12px;border-bottom:2px dashed rgb(245 233 210 / .25);}
.s-car dd{font:400 1.25rem/1.05 var(--slam);text-transform:uppercase;letter-spacing:.02em;color:var(--cream);}
.s-art{grid-column:2;grid-row:1 / span 2;width:96px;}
.s-out,.s-in{position:relative;}
.s-in{padding-left:14px;border-left:2px dashed rgb(245 233 210 / .3);}
.s-out dd,.s-in dd{font-size:.94rem;}
.s-where{grid-column:1 / -1;}
.s-where dd{font-weight:600;font-size:.94rem;}

@media (max-width:559px){
  .summary{gap:10px 12px;padding:14px 16px 16px;margin-bottom:20px;}
  .s-car{padding-bottom:10px;}
  .s-art{width:74px;}
  .s-car dd{font-size:1.12rem;}
  .summary dd{font-size:.9rem;}
}
/* price table */
.breakdown{width:100%;border-collapse:collapse;margin:6px 0 14px;font-size:.96rem;}
.breakdown td{padding:.55rem 0;border-bottom:1.5px solid var(--line);vertical-align:top;}
.breakdown .num{text-align:right;white-space:nowrap;padding-left:1rem;font-variant-numeric:tabular-nums;}
.breakdown .total td{padding:.75rem 0;border-top:3px solid var(--navy);border-bottom:3px solid var(--navy);color:var(--navy);font:800 1.12rem/1.2 var(--display);}
.breakdown .muted td{color:var(--ink-soft);font-size:.9rem;}

/* messages */
.alert,.ok,.warn{border-radius:14px;padding:.8rem 1rem .8rem 1.1rem;margin:0 0 18px;border-left:6px solid;}
.alert{background:var(--err-soft);color:var(--err);border-color:var(--err);font-weight:600;}
.alert ul{margin:0;padding-left:1.1rem;}
.alert p:last-child{margin-bottom:0;}
.ok{background:var(--green-soft);color:var(--green);border-color:var(--green);font-weight:600;}
.warn{background:var(--warn-soft);color:var(--warn);border-color:var(--amber);font-weight:600;}
.pill{display:inline-flex;align-items:center;padding:.4em .8em;border-radius:999px;background:var(--navy);color:var(--cream);font:700 .82rem/1 var(--body);white-space:nowrap;}

/* licence check */
.howto{list-style:none;padding:0;margin:0 0 18px;display:grid;gap:12px;counter-reset:how;}
.howto li{counter-increment:how;display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;padding:12px 14px;border-radius:16px;background:var(--paper-warm);border:2px solid var(--line);font-weight:600;color:var(--navy);}
.howto-art{position:relative;width:56px;}
.howto-art::after{content:counter(how);position:absolute;top:-10px;left:-8px;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--orange);color:var(--navy);font:800 .8rem/1 var(--body);box-shadow:0 2px 0 var(--orange-deep);}
ol.plain:not(.howto){padding-left:1.2rem;}

/* agreement */
.doc{max-height:58vh;overflow:auto;margin:0 0 14px;padding:4px 20px 8px;border-radius:14px;background:var(--paper-warm);border:2px solid var(--navy);font-size:.94rem;line-height:1.6;}
.doc:focus-visible{outline:4px solid var(--amber);outline-offset:2px;}
.doc h2{font-size:1.08rem;margin-top:1.1rem;}
.doc h3{font-size:.98rem;margin:1rem 0 .3rem;}
.doc table{width:100%;border-collapse:collapse;}
.doc td{padding:.35rem 0;border-bottom:1px solid var(--line);}
.doc .num{text-align:right;}
.hash{word-break:break-all;font-size:.78rem;}
.sign{margin-top:18px;padding-top:18px;border-top:3px dashed var(--line);}
.sig{font:700 1.2rem/1.2 var(--display);}

/* pay */
.bond-note{padding:12px 14px;border-radius:14px;background:var(--cream);color:var(--navy);font-size:.94rem;}
#payment-element{margin:0 0 16px;}
.secure{margin-top:14px;}
.card form+.hint,.card form+p{margin-top:16px;}
.due strong{font:400 1.6rem/1 var(--slam);color:var(--navy);}

/* waiting: a little road that keeps rolling */
.road-wait{height:16px;margin:4px 0 16px;border-radius:8px;background:repeating-linear-gradient(90deg,var(--cream) 0 14px,transparent 14px 28px) center / 200% 2px repeat-x,#22385c;}
@media (prefers-reduced-motion:no-preference){.road-wait{animation:roll 1.2s linear infinite;}@keyframes roll{to{background-position:-28px 50%,0 0;}}}

/* ---------- confirmed: the one loud moment ---------- */
.booked{position:relative;isolation:isolate;overflow:hidden;display:grid;justify-items:center;text-align:center;gap:10px;margin:4px 0 30px;padding:30px 20px 34px;border-radius:26px;
  background:#f58516;box-shadow:0 0 0 3px var(--navy),0 8px 0 3px var(--navy);}
.booked::before{content:"";position:absolute;inset:-60%;z-index:-2;background:repeating-conic-gradient(from 0deg at 50% 50%,#ff9a2e 0 7.5deg,#f07a12 7.5deg 15deg);}
.booked::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 50% 45%,transparent 0 30%,rgb(140 52 0 / .5) 100%);}
.booked h1{margin:0;color:var(--cream);font-size:clamp(3.2rem,12vw,6.6rem);
  text-shadow:.012em .012em 0 var(--navy),.024em .024em 0 var(--navy),.036em .036em 0 var(--navy),.048em .05em 0 var(--navy),.06em .066em 0 var(--navy);}
.booked .ref{margin:0;padding:.35em .7em .3em;border:3px solid var(--navy);border-radius:8px;background:var(--cream);color:var(--navy);font:700 1rem/1.2 var(--body);transform:rotate(-3deg);box-shadow:0 4px 0 rgb(0 0 0 / .25);}
.booked .ref strong{font:400 1.5rem/1 var(--slam);letter-spacing:.04em;margin-left:.2em;}
.booked-car{width:min(220px,58%);}
@media (prefers-reduced-motion:no-preference){.booked-car{animation:drive-in 1.1s var(--pop) .1s both;}@keyframes drive-in{from{transform:translateX(-120%) rotate(-4deg);}to{transform:none;}}}
.confirm-grid{display:grid;gap:0 26px;}
@media (min-width:860px){.confirm-grid{grid-template-columns:1fr 1fr;align-items:start;}}
.confirm-grid .summary{margin-bottom:16px;}
.code-box{margin:0 0 18px;padding:14px 16px;text-align:center;border:3px dashed var(--navy);border-radius:16px;background:var(--cream);color:var(--navy);font-weight:700;}
.code-box strong{display:block;margin-top:4px;font:400 2.8rem/1 var(--slam);letter-spacing:.14em;color:var(--navy);}

/* ---------- account and documents ---------- */
.booking .car-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;margin-bottom:14px;}
.booking .car-head h2{margin:0;font:400 1.9rem/1 var(--slam);letter-spacing:.03em;}
.booking details{border-top:2px dashed var(--line);padding-top:4px;margin:0;}
.booking details form{margin:8px 0 14px;}
.booking .summary{margin-bottom:16px;}
.doc-page h2{font-size:1.12rem;margin-top:1.4rem;}
.doc-page{max-width:48rem;}
.invoice{max-width:48rem;}
.invoice .summary{background:var(--paper-warm);color:var(--ink);box-shadow:0 0 0 2px var(--line);}
.invoice .summary dt{color:var(--ink-soft);}
.invoice .summary dd{color:var(--navy);}
.stack form{margin:0 0 12px;}
.stack .btn{width:100%;}

/* ---------- phones: the bottom bar, like the main site's ---------- */
.dock{position:fixed;z-index:40;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:10px;padding:8px;border-radius:24px;
  background:var(--navy);box-shadow:0 0 0 2px rgb(245 233 210 / .25),0 18px 40px rgb(6 16 33 / .45);
  transform:translateY(160%);visibility:hidden;transition:transform .3s var(--ease),visibility 0s linear .3s;}
.dock.is-on{transform:none;visibility:visible;transition:transform .35s var(--pop),visibility 0s;}
.dock .btn{flex:1;min-height:52px;font-size:1.05rem;}
.dock-note{margin:0 4px 0 10px;color:var(--cream);font:700 .9rem/1.2 var(--body);}
.dock[hidden]{display:none;}
@media (min-width:860px){.dock{display:none;}}
body.has-dock .foot{padding-bottom:110px;}

/* ---------- footer ---------- */
.foot{position:relative;margin-top:auto;padding:34px var(--gutter) 40px;background:var(--navy-3);color:rgb(245 233 210 / .86);font-size:.92rem;}
.foot::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:repeating-linear-gradient(90deg,var(--orange) 0 26px,var(--navy-3) 26px 40px);opacity:.9;}
.foot-in{max-width:72rem;margin:0 auto;display:grid;gap:22px;grid-template-columns:1fr;}
.foot p{margin:0 0 4px;}
.foot-head{color:var(--cream);font:400 1.3rem/1 var(--slam)!important;text-transform:uppercase;letter-spacing:.03em;margin-bottom:8px!important;}
.foot a{color:var(--cream);}
.foot a:hover{color:var(--amber);}
.foot a:focus-visible{outline-color:var(--amber);}
.foot-logo{display:inline-flex;justify-self:start;text-decoration:none;}
.wn-mark--foot{font-size:2.3rem;filter:drop-shadow(.02em .04em 0 rgb(0 0 0 / .5));}
.foot-links{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 18px;}
.foot-links a{display:inline-flex;align-items:center;min-height:44px;font-weight:600;}
@media (min-width:860px){.foot-in{grid-template-columns:auto 1fr 1.3fr;align-items:center;gap:40px;}.foot-links{justify-content:flex-end;}}

/* when-delivery / when-hotel fields: shown by rent.js, always visible without JS */
.js .when-delivery,.js .when-hotel{display:none;}
.js .show-delivery .when-delivery,.js .show-hotel .when-hotel{display:block;padding:14px 16px 2px;margin:-2px 0 12px;border-radius:16px;background:var(--paper-warm);border:2px dashed var(--line);}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms!important;}}
@media print{.band,.foot,.dock,.mode-banner,.skip{display:none!important;}body{background:#fff;}.card{box-shadow:none;border:1px solid #999;}}

/* ===== Why Not wordmark, from why_not_drive_logo.html ===== */
.wn-mark{--wn-navy:#0b1c33;--wn-navy-deep:#071426;--wn-otop:#ffd06a;--wn-ohi:#ffa838;--wn-o:#ff8a1e;--wn-odeep:#fb7d12;--wn-cream:#fff3d8;--wn-speed:2.55s;
  display:inline-flex;align-items:flex-end;justify-content:center;gap:.02em;white-space:nowrap;line-height:.74;letter-spacing:-.058em;
  font-family:"Modak",system-ui,sans-serif;user-select:none;-webkit-user-select:none;transform:rotate(-1.4deg);filter:drop-shadow(.018em .035em 0 rgba(7,20,38,.18));}
.wn-mark--sm{font-size:2.3rem;}
.wn-word{display:inline-flex;white-space:nowrap;}
.wn-word+.wn-word{margin-left:.12em;}
.wn-letter{position:relative;display:inline-block;transform:rotate(var(--r,0deg)) translateY(var(--y,0)) scaleX(var(--sx,1));margin:0 -.01em;padding:.03em;}
.wn-nudge{position:relative;display:inline-block;transition:transform 110ms cubic-bezier(.22,.75,.28,1);will-change:transform;}
.wn-jiggle{position:relative;display:inline-block;transform-origin:50% 78%;animation:wn-soft-jiggle var(--wn-speed) ease-in-out infinite;animation-delay:var(--delay,0s);}
.wn-rim,.wn-body{display:block;font:inherit;line-height:inherit;}
.wn-rim{position:relative;z-index:0;color:var(--wn-navy);-webkit-text-stroke:.13em var(--wn-navy);text-shadow:.018em .018em 0 var(--wn-navy-deep),-.008em .014em 0 var(--wn-navy-deep);}
.wn-body{position:absolute;inset:0;z-index:1;color:transparent;background:linear-gradient(180deg,var(--wn-otop) 0%,var(--wn-ohi) 28%,var(--wn-o) 62%,var(--wn-odeep) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-stroke:.042em var(--wn-cream);}
.wn-word+.wn-word--sub{margin-left:.22em;}
.wn-word--sub{font-size:.64em;}
.wn-word--sub .wn-body{background:linear-gradient(180deg,#4aa3e0 0%,#1f83cf 28%,#0066b3 62%,#024f92 100%);-webkit-background-clip:text;background-clip:text;}
.wn-mark--stack{flex-wrap:wrap;justify-content:flex-end;}
.wn-mark--stack .wn-subline{flex-basis:100%;display:inline-flex;justify-content:flex-end;margin-top:-.12em;padding-right:.04em;width:0;min-width:100%;box-sizing:border-box;}
.wn-mark--stack .wn-word--sub{font-size:.66em;}
@keyframes wn-soft-jiggle{0%,100%{transform:scale(1,1) skewX(0) rotate(0)}18%{transform:scale(1.04,.96) skewX(-2.2deg) rotate(-.45deg)}38%{transform:scale(.97,1.03) skewX(1.65deg) rotate(.28deg)}58%{transform:scale(1.024,.982) skewX(-1deg) rotate(-.16deg)}78%{transform:scale(.992,1.012) skewX(.55deg) rotate(.08deg)}}
.wn-letter.is-active .wn-jiggle,.wn-letter.poked .wn-jiggle{animation:wn-poke .74s cubic-bezier(.2,.75,.25,1) both;}
@keyframes wn-poke{0%{transform:scale(1,1) skewX(0) rotate(0)}13%{transform:scale(1.28,.72) skewX(-10deg) rotate(-2deg)}30%{transform:scale(.76,1.22) skewX(8deg) rotate(1.6deg)}48%{transform:scale(1.15,.86) skewX(-5deg) rotate(-1deg)}64%{transform:scale(.94,1.08) skewX(2.4deg) rotate(.5deg)}82%{transform:scale(1.035,.965) skewX(-1deg) rotate(-.2deg)}100%{transform:scale(1,1) skewX(0) rotate(0)}}
/* grab and drag stretch, wired by /js/wordmark.js */
.wn-mark--interactive .wn-letter{touch-action:none;cursor:grab;}
.wn-mark--interactive .wn-letter:active{cursor:grabbing;}
.logo{-webkit-user-drag:none;}
/* /confirmed celebration, run by /js/celebrate.js */
.wn-mark.wn-pop{animation:wn-pop .9s cubic-bezier(.16,1.6,.3,1) both;transform-origin:50% 80%;}
@keyframes wn-pop{0%{transform:rotate(-1.4deg) scale(1,1)}22%{transform:rotate(-1.4deg) scale(1.22,.82)}46%{transform:rotate(-1.4deg) scale(.9,1.14)}70%{transform:rotate(-1.4deg) scale(1.05,.97)}100%{transform:rotate(-1.4deg) scale(1,1)}}
.wn-burst{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:50;}
.wn-bit{position:absolute;width:10px;height:6px;margin:-3px 0 0 -5px;background:var(--c);border-radius:2px;opacity:0;animation:wn-fly 1.5s cubic-bezier(.15,.7,.3,1) var(--d,0s) both;}
.wn-roundel{width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:radial-gradient(circle,var(--c) 0 32%,#fff3d8 33% 52%,var(--c) 53%);box-shadow:0 0 0 1.5px #0b1c33;}
@keyframes wn-fly{0%{opacity:1;transform:translate(0,0) rotate(0) scale(.4)}70%{opacity:1}100%{opacity:0;transform:translate(var(--dx),calc(var(--dy) + 140px)) rotate(var(--rot)) scale(1)}}
@media (prefers-reduced-motion:reduce){.wn-jiggle{animation:none;}.wn-nudge{transition:none;}.wn-mark.wn-pop{animation:none;}.wn-burst{display:none;}}

/* 23 Oct demo round: friendly notes, the chosen class, the live price panel */
.notice{margin:0 0 18px;padding:12px 16px;border-radius:16px;background:var(--warn-soft);border:2px solid var(--amber);color:var(--navy);font:600 .95rem/1.45 var(--body);}
.notice p{margin:0;}
.notice p+p{margin-top:6px;}
.car.chosen{position:relative;background:var(--paper-warm);box-shadow:0 0 0 3px var(--navy),0 0 0 8px var(--orange),0 14px 0 4px var(--navy);}
.car.chosen .car-art{background-color:var(--amber);}
.car.chosen .car-flag{top:-18px;left:18px;right:auto;padding:.32em .7em .26em;font-size:1.35rem;color:var(--cream);background:var(--orange-deep);border-color:var(--navy);transform:rotate(-4deg);box-shadow:0 4px 0 var(--navy);}
.car.chosen.unavailable .car-art{filter:none;opacity:1;background-color:var(--cream-2);}
#your-pick{scroll-margin-top:24px;}
.choice small.trip-price{color:var(--navy);font-weight:700;}
.js .no-js,html:not(.js) .js-only{display:none;}
.side-total{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:2px 12px;margin:-8px 0 24px;padding:14px 20px;border-radius:18px;background:var(--paper);box-shadow:0 0 0 3px var(--navy),0 6px 0 3px var(--navy);}
.side-total span{color:var(--ink-soft);font:700 .9rem/1.2 var(--body);}
.side-total strong{grid-row:span 2;font:400 2.3rem/1 var(--slam);color:var(--navy);letter-spacing:.01em;}
.side-total small{color:var(--ink-soft);font-size:.8rem;}
.breakdown--live tr[hidden]{display:none;}
.bump{animation:wn-bump .45s var(--pop);}
@keyframes wn-bump{0%{transform:scale(1);}40%{transform:scale(1.12);color:var(--orange-deep);}100%{transform:scale(1);}}
.breakdown td.bump{animation:wn-flash .6s var(--ease);}
@keyframes wn-flash{0%,100%{color:inherit;}35%{color:var(--orange-deep);}}
.side-total strong.bump,.dock-note strong.bump{display:inline-block;transform-origin:right center;}
.dock-note strong{font:400 1.35rem/1 var(--slam);letter-spacing:.02em;margin-left:.2em;}
@media (max-width:859px){.side-total{margin-top:-10px;}}
@media (prefers-reduced-motion:reduce){.bump{animation:none;}}
.car-buy .btn{white-space:nowrap;padding-left:12px;padding-right:12px;}
.car-buy .btn-long{font-size:.95rem;letter-spacing:-.005em;}

/* ---------- going back: back links, finished steps as links (2026-10-23) ---------- */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-top:12px;}
.actions .btn-go{margin-top:0;}
.back-link{display:inline-flex;align-items:center;gap:.45em;min-height:44px;min-width:44px;padding:0 16px;border-radius:999px;
  color:var(--navy);font:700 1rem/1.2 var(--display);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px;
  transition:background .15s,color .15s;-webkit-tap-highlight-color:transparent;}
.back-link span[aria-hidden]{font-size:1.15em;text-decoration:none;display:inline-block;transition:transform .15s var(--ease);}
.back-link:hover{background:var(--cream);color:var(--navy);}
.back-link:hover span[aria-hidden]{transform:translateX(-3px);}
.back-link:focus-visible{outline:3px solid var(--navy);outline-offset:2px;background:var(--cream);}
@media (max-width:719px){
  .actions{flex-direction:column-reverse;align-items:stretch;gap:8px;}
  .actions .back-link{justify-content:center;}
}
.pay-back{margin:14px 0 0;}
.back-note{margin:-.4rem 0 1rem;}
.locked .actions{margin-top:18px;}
.locked strong{white-space:nowrap;}
@media (max-width:719px){.locked .actions{flex-direction:column;gap:14px;}}

/* the phone step bar: Back beside "Step 2 of 6" */
.trip-now{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.trip-back{min-height:44px;padding:0 14px;color:var(--cream);text-decoration:none;font:700 .95rem/1 var(--body);
  background:rgb(245 233 210 / .1);box-shadow:inset 0 0 0 2px rgb(245 233 210 / .4);}
.trip-back:hover,.trip-back:focus-visible{background:var(--amber);color:var(--navy);box-shadow:none;}
.trip-back:focus-visible{outline:3px solid var(--cream);outline-offset:2px;}
@media (min-width:720px){.trip-back{display:none;}}

/* finished stops on the road are links back to that step; stops ahead are not */
.step-link{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:44px;padding:0 4px 2px;border-radius:14px;color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent;}
.step-link .stop svg{transition:box-shadow .15s,transform .15s var(--ease);}
.step-link:hover .stop svg,.step-link:focus-visible .stop svg{box-shadow:0 0 0 2.5px var(--amber),0 0 0 7px rgb(255 181 71 / .35);transform:translateY(-2px);}
.step-link:hover .lbl,.step-link:focus-visible .lbl{color:var(--amber);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;}
.step-link:focus-visible{outline:3px solid var(--amber);outline-offset:3px;}
@media (min-width:720px){.step-link .lbl{text-decoration:underline;text-decoration-color:rgb(245 233 210 / .4);text-underline-offset:3px;}}
@media (prefers-reduced-motion:reduce){.back-link span[aria-hidden],.step-link .stop svg{transition:none;}}

/* ---------- simulated licence check (demo): each outcome is a full width card ---------- */
.mock-idv .lead{max-width:60ch;margin-bottom:18px;line-height:1.55;}
.outcome-head{margin:0 0 12px;font:800 1.2rem/1.2 var(--display);}
.outcomes{display:grid;gap:14px;}
.outcome{margin:0;}
.outcome-btn{position:relative;display:grid;gap:4px;width:100%;min-height:64px;margin:0;padding:14px 48px 15px 18px;text-align:left;cursor:pointer;
  border:0;border-radius:18px;background:var(--paper);color:var(--navy);box-shadow:0 0 0 2.5px var(--navy),0 4px 0 2.5px var(--navy);
  font:inherit;transition:transform .14s var(--ease),box-shadow .14s var(--ease),background .14s;-webkit-tap-highlight-color:transparent;}
.outcome-btn strong{font:800 1.08rem/1.25 var(--display);color:var(--navy);}
.outcome-btn small{font:400 .93rem/1.5 var(--body);color:var(--ink-soft);}
.outcome-btn--go{background:linear-gradient(180deg,#ffa043,var(--orange) 55%,#f47c0e);box-shadow:0 0 0 2.5px var(--navy),0 4px 0 2.5px var(--orange-deep);}
.outcome-btn--go small{color:var(--navy);}
.outcome-arrow{position:absolute;right:18px;top:50%;transform:translateY(-50%);font:800 1.3rem/1 var(--display);}
.outcome-btn:hover{transform:translateY(-2px);background:var(--paper-warm);}
.outcome-btn--go:hover{background:linear-gradient(180deg,#ffa94f,#ff9530 55%,#f47c0e);}
.outcome-btn:active{transform:translateY(3px);box-shadow:0 0 0 2.5px var(--navy),0 1px 0 2.5px var(--navy);}
.outcome-btn:focus-visible{outline:3px solid var(--navy);outline-offset:4px;}
@media (min-width:720px){.outcome-btn{padding:16px 56px 17px 22px;}}

/* ---------- form problems: the message sits beside the field, the summary links to it ---------- */
.field-error{display:flex;gap:.45em;align-items:flex-start;margin:8px 0 0;color:var(--err);font:700 .92rem/1.4 var(--body);}
.field-error::before{content:"!";flex:none;display:inline-grid;place-items:center;width:1.3em;height:1.3em;margin-top:.03em;border-radius:50%;background:var(--err);color:#fff;font:800 .8rem/1 var(--body);}
.field-error[hidden]{display:none;}
input[aria-invalid="true"],select[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:var(--err);background-color:var(--err-soft);}
input[aria-invalid="true"]:focus,select[aria-invalid="true"]:focus,textarea[aria-invalid="true"]:focus{border-color:var(--err);box-shadow:0 0 0 4px rgb(168 38 26 / .25);}
.choice:has(input[aria-invalid="true"]:checked){border-color:var(--err);box-shadow:0 4px 0 var(--err);}
.check:has(input[aria-invalid="true"]) input{outline:2px solid var(--err);outline-offset:2px;}
.consents .field-error,.sign .field-error{margin:-2px 0 8px 36px;}
fieldset>.field-error{margin:4px 0 0;}
.error-summary{scroll-margin-top:16px;}
.error-summary:focus{outline:3px solid var(--navy);outline-offset:3px;}
.error-summary-lead{margin:0 0 6px;}
.error-summary a{color:var(--err);text-decoration:underline;text-underline-offset:2px;}
.error-summary a:hover{color:var(--navy);}