/* ═══════════════════════════════════════════════════════════════════════════════════
   VYVE FORM UI — the shared look used by every application and booking flow.
   Lifted verbatim from apply.html, which is the page the rest are being brought up to.
   Loaded AFTER each page's own <style>, so it wins without those styles being deleted.
   ═══════════════════════════════════════════════════════════════════════════════════ */
/* ── APPLICATION WIZARD ────────────────────────────────────────────────────────────
   One question set at a time. Same fields, same names, same submit handler — only the
   presentation changed, so the Supabase write and both tracking pixels are untouched. */
.wiz-progress{margin-bottom:30px;}
.wiz-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px;}
.wiz-now{font-family:"Bebas Neue",sans-serif;font-size:23px;letter-spacing:1px;color:#fff;line-height:1;}
.wiz-of{font-family:"Space Mono",monospace;font-size:9px;letter-spacing:1.6px;color:rgba(255,255,255,.35);text-transform:uppercase;white-space:nowrap;}
.wiz-track{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;}
.wiz-seg{height:3px;border-radius:2px;background:rgba(255,255,255,.12);overflow:hidden;}
.wiz-seg span{display:block;height:100%;width:0;background:var(--red);transition:width .4s cubic-bezier(.16,1,.3,1);}
.wiz-seg.done span,.wiz-seg.on span{width:100%;}
.step{animation:wizIn .3s cubic-bezier(.16,1,.3,1);}
@keyframes wizIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
.wiz-nav{display:flex;gap:12px;align-items:center;margin-top:28px;}
.wiz-back{background:transparent;border:1px solid rgba(255,255,255,.16);color:rgba(255,255,255,.7);
  padding:15px 22px;border-radius:3px;font-family:"DM Sans",sans-serif;font-size:12px;font-weight:700;
  letter-spacing:1.2px;text-transform:uppercase;cursor:pointer;transition:all .2s;}
.wiz-back:hover{border-color:rgba(255,255,255,.4);color:#fff;}
.wiz-next{flex:1;background:var(--red);border:none;color:#fff;padding:16px;border-radius:3px;
  font-family:"DM Sans",sans-serif;font-size:13px;font-weight:700;letter-spacing:2px;text-transform:uppercase;
  cursor:pointer;transition:all .2s;}
.wiz-next:hover{background:var(--red2);box-shadow:0 6px 24px rgba(232,0,29,.35);}
.wiz-nav .submit-btn{margin-top:0;flex:1;}
/* the car they came in for */
.veh-picked[hidden]{display:none!important;}
.step[hidden]{display:none!important;}
.wiz-nav [hidden]{display:none!important;}
.veh-picked{display:flex;align-items:center;gap:14px;background:rgba(232,0,29,.08);border:1px solid rgba(232,0,29,.28);
  border-radius:8px;padding:14px 18px;margin-bottom:24px;}
.vp-l{font-family:"Space Mono",monospace;font-size:8.5px;letter-spacing:1.8px;color:#FF6376;text-transform:uppercase;}
.vp-v{font-family:"Bebas Neue",sans-serif;font-size:20px;letter-spacing:.8px;color:#fff;flex:1;line-height:1;}
.vp-c{font-size:11px;color:rgba(255,255,255,.55);text-decoration:underline;white-space:nowrap;}
.vp-c:hover{color:#fff;}
@media(max-width:560px){
  .wd-t{display:none;}
  .wiz-line{top:15px;left:16px;right:16px;}
  .wiz-progress{grid-template-columns:repeat(4,1fr);margin-bottom:28px;}
  .wiz-nav{flex-direction:column-reverse;align-items:stretch;}
  .wiz-back{width:100%;}
  .veh-picked{flex-wrap:wrap;gap:8px;}
}

/* ── APPLICATION PANEL, LIGHT ──────────────────────────────────────────────────────
   The sheet and every control inside it read on white. Kept as an override block so the
   original dark form styles stay intact for any other page that borrows them. */
.form-card{background:#fff;border:1px solid rgba(0,0,0,.06);
  box-shadow:0 30px 80px rgba(0,0,0,.16),0 4px 14px rgba(0,0,0,.06);
  backdrop-filter:none;-webkit-backdrop-filter:none;}
/* Questions read as questions — the old 11px grey label was fine on a dark panel but
   disappears on white, and it is the thing people actually have to read. */
.form-card .flabel{color:#15151a;font-size:14.5px;font-weight:600;line-height:1.45;margin-bottom:10px;letter-spacing:-.1px;}
.form-card .flabel .req{color:var(--red);font-weight:700;}
/* A field has to look like a field on white — a solid border and a tinted fill, not a
   hairline that vanishes. Larger type too; these get filled in on phones. */
.form-card .finput,.form-card .fselect,.form-card .ftext{
  background-color:#f7f7f9;border:1.5px solid #d5d5de;border-radius:8px;color:#0a0a0a;
  font-size:15px;padding:14px 16px;transition:border-color .15s,background-color .15s,box-shadow .15s;}
.form-card .finput:hover,.form-card .fselect:hover,.form-card .ftext:hover{border-color:#b8b8c4;}
.form-card .ffield{margin-bottom:22px;}
.form-card .finput:focus,.form-card .fselect:focus,.form-card .ftext:focus{
  border-color:var(--red);background-color:#fff;box-shadow:0 0 0 4px rgba(232,0,29,.10);}
.form-card .finput::placeholder,.form-card .ftext::placeholder{color:#b4b4bc;}
.form-card .fselect{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23888' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 17px center;background-size:12px 8px;
  padding-right:44px;}
.form-card .fselect option{background:#fff;color:#0a0a0a;}
.form-card .form-note{color:#9a9aa2;}
.form-card .radio-group{gap:10px;}
.form-card .radio-opt label{background:#f7f7f9;border:1.5px solid #d5d5de;border-radius:10px;
  color:#3a3a42;font-size:14px;font-weight:600;padding:14px 10px;}
.form-card .radio-opt label:hover{border-color:#b8b8c4;background:#f2f2f5;}
.form-card .radio-opt input:checked+label{background:var(--red);border-color:var(--red);color:#fff;
  box-shadow:0 4px 14px rgba(232,0,29,.28);}
@media(max-width:420px){.form-card .radio-opt label{font-size:13px;padding:13px 6px;}}
.form-card .wiz-now{color:#0a0a0a;}
.form-card .wiz-of{color:#a0a0a8;}
.form-card .wiz-seg{background:rgba(0,0,0,.10);}
.form-card .wiz-back{border-color:rgba(0,0,0,.16);color:#5a5a60;}
.form-card .wiz-back:hover{border-color:#0a0a0a;color:#0a0a0a;}
.form-card .veh-picked{background:rgba(232,0,29,.06);border-color:rgba(232,0,29,.22);}
.form-card .vp-l{color:var(--red);}
.form-card .vp-v{color:#0a0a0a;}
.form-card .vp-c{color:#8a8a92;}
.form-card .vp-c:hover{color:#0a0a0a;}
/* checkbox rows and any inline agreement text inside the panel */
.form-card label,.form-card p{color:#5a5a60;}
.form-card b{color:#0a0a0a;}

/* ── APPLICATION SHEET ─────────────────────────────────────────────────────────────
   Modelled on the admin profile modal: a generously rounded white panel with real space
   inside it, centred on a plain ground with nothing competing for attention. */
.form-card{max-width:720px;margin:0 auto;background:#fff;
  border:1px solid rgba(0,0,0,.06);border-radius:24px;padding:44px 48px 40px;
  box-shadow:0 24px 64px rgba(0,0,0,.13),0 2px 8px rgba(0,0,0,.04);
  backdrop-filter:none;-webkit-backdrop-filter:none;}
.form-card .wiz-progress{margin-bottom:36px;}
.form-card .wiz-head{margin-bottom:14px;}
.form-card .wiz-now{font-size:26px;}
.form-card .frow{gap:18px;}
.form-card .ffield{margin-bottom:24px;}
.form-card .finput,.form-card .fselect,.form-card .ftext{border-radius:10px;padding:15px 17px;}
.form-card .wiz-nav{margin-top:34px;}
.form-card .wiz-next,.form-card .submit-btn{border-radius:10px;padding:17px;}
.form-card .wiz-back{border-radius:10px;}
.form-card .veh-picked{border-radius:12px;}
.form-card .form-note{margin-top:18px;}
@media(max-width:640px){
  .form-card{padding:30px 22px 28px;border-radius:18px;}
  .form-card .wiz-now{font-size:22px;}
}
/* ── VYVE TYPE v2 ── */

@font-face{font-family:'Utendo';src:url('fonts/Utendo-Regular.ttf') format('truetype');font-weight:400 500;font-display:swap;}
@font-face{font-family:'Utendo';src:url('fonts/Utendo-Bold.ttf') format('truetype');font-weight:600 900;font-display:swap;}
:root{--font-display:var(--vyve-font);--font-body:var(--vyve-font);--vyve-font:'Inter','Helvetica Neue',Helvetica,system-ui,-apple-system,'Segoe UI',Arial,sans-serif;}
body{font-family:var(--font-body)!important;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
button,input,select,textarea{font-family:var(--font-body)!important;}

/* hero + card */
.ah-title{font-family:var(--font-display)!important;letter-spacing:-.015em!important;line-height:1!important;font-weight:800!important;}
.ah-tag{font-family:var(--font-body)!important;font-weight:700;letter-spacing:.14em!important;}
.ah-sub{font-size:15.5px!important;line-height:1.6!important;}
.apply-hero{text-align:center;}
.apply-hero .ah-sub{margin-left:auto;margin-right:auto;max-width:520px;}
.form-card{border-radius:22px!important;}
.fsec{font-family:var(--font-display)!important;font-size:22px!important;letter-spacing:-.02em!important;text-transform:none!important;font-weight:700!important;}
.wiz-now{font-family:var(--font-display)!important;letter-spacing:-.02em!important;font-weight:700!important;}
.wiz-of{font-family:var(--font-body)!important;letter-spacing:.04em!important;font-weight:600;}
.flabel{font-family:var(--font-body)!important;font-size:14px!important;letter-spacing:0!important;text-transform:none!important;font-weight:600!important;margin-bottom:8px!important;line-height:1.35;}
/* 16px inputs: anything smaller makes iOS Safari zoom the page on focus */
.finput,.fselect,.ftext{font-size:16px!important;min-height:52px;border-radius:12px!important;padding:14px 16px!important;}
.ftext{min-height:110px;}
.radio-group{gap:8px!important;}
.radio-opt label{min-height:52px;display:flex!important;align-items:center;justify-content:center;border-radius:12px!important;font-size:15px!important;font-weight:600;}
.wiz-next,.submit-btn,.wiz-back{min-height:56px;border-radius:14px!important;font-size:15px!important;letter-spacing:.02em!important;text-transform:none!important;font-weight:700!important;}
.wiz-seg{height:5px!important;border-radius:99px!important;}

/* success */
.success-msg{padding:28px 8px 12px!important;}
.sx-check{position:relative;width:132px;height:132px;margin:0 auto 18px;}
.sx-check svg{position:relative;width:100%;height:100%;overflow:visible;}
.sx-halo{fill:none;stroke:rgba(232,0,29,.18);stroke-width:4;transform-origin:60px 60px;transform:scale(.6);opacity:0;}
.sx-fill{fill:#E8001D;transform-origin:60px 60px;transform:scale(0);}
.sx-tick{fill:none;stroke:#fff;stroke-width:8;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:70;stroke-dashoffset:70;}
.sx-burst{position:absolute;inset:0;}
.sx-burst i{position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px;border-radius:50%;background:#E8001D;opacity:0;transform:rotate(var(--a)) translateY(0);}
.sx-burst i:nth-child(even){background:#F7979F;width:6px;height:6px;margin:-3px;}
.success-msg.show .sx-fill{animation:sxPop .55s cubic-bezier(.34,1.56,.64,1) .05s forwards;}
.success-msg.show .sx-halo{animation:sxHalo 1.1s ease-out .35s forwards;}
.success-msg.show .sx-tick{animation:sxTick .45s cubic-bezier(.65,0,.35,1) .45s forwards;}
.success-msg.show .sx-burst i{animation:sxBurst .8s cubic-bezier(.16,1,.3,1) .5s forwards;}
.success-msg.show .sx-check{animation:sxBob 3.4s ease-in-out 1.6s infinite;}
.success-msg.show .sx-eyebrow,.success-msg.show .success-title,.success-msg.show .success-text,.success-msg.show .sx-steps li,.success-msg.show .sx-actions{opacity:0;animation:sxUp .6s cubic-bezier(.16,1,.3,1) forwards;}
.success-msg.show .sx-eyebrow{animation-delay:.7s}.success-msg.show .success-title{animation-delay:.78s}.success-msg.show .success-text{animation-delay:.86s}
.success-msg.show .sx-steps li:nth-child(1){animation-delay:.98s}.success-msg.show .sx-steps li:nth-child(2){animation-delay:1.06s}.success-msg.show .sx-steps li:nth-child(3){animation-delay:1.14s}
.success-msg.show .sx-actions{animation-delay:1.26s}
@keyframes sxPop{to{transform:scale(1)}}
@keyframes sxHalo{0%{opacity:.9;transform:scale(.7)}100%{opacity:0;transform:scale(1.35)}}
@keyframes sxTick{to{stroke-dashoffset:0}}
@keyframes sxBurst{0%{opacity:1;transform:rotate(var(--a)) translateY(0)}100%{opacity:0;transform:rotate(var(--a)) translateY(-78px)}}
@keyframes sxBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes sxUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.success-msg.show *{animation-duration:.01s!important;animation-delay:0s!important;animation-iteration-count:1!important}}
/* the form card is white — success copy must be dark */
.form-card .success-title{color:#0a0a0a!important;}
.form-card .success-text{color:#5a5a60!important;}
.form-card .sx-steps span{color:#5a5a60;opacity:1;}
.form-card .sx-steps strong{color:#0a0a0a;}
.form-card .sx-link{color:#0a0a0a;}
.sx-eyebrow{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#E8001D;margin-bottom:6px;}
.success-title{font-family:var(--font-display)!important;font-size:44px!important;letter-spacing:-.02em!important;font-weight:800!important;line-height:1!important;margin-bottom:12px!important;}
.success-text{font-size:16px!important;line-height:1.6!important;margin:0 auto 22px!important;}
.sx-steps{list-style:none;margin:0 auto 24px;padding:0;max-width:420px;text-align:left;display:flex;flex-direction:column;gap:10px;}
.sx-steps li{display:flex;gap:14px;align-items:flex-start;padding:14px 16px;border-radius:16px;background:rgba(232,0,29,.05);border:1px solid rgba(232,0,29,.14);}
.sx-steps b{flex-shrink:0;width:28px;height:28px;border-radius:50%;background:#E8001D;color:#fff;font-size:13px;display:flex;align-items:center;justify-content:center;}
.sx-steps span{font-size:14px;line-height:1.5;opacity:.8;}
.sx-steps strong{display:block;font-size:15px;opacity:1;margin-bottom:1px;}
.sx-actions{display:flex;flex-direction:column;align-items:center;gap:12px;max-width:420px;margin:0 auto;}
.sx-btn{display:flex;align-items:center;justify-content:center;width:100%;min-height:56px;border-radius:14px;background:#E8001D;color:#fff!important;text-decoration:none;font-weight:700;font-size:16px;box-shadow:0 10px 24px -10px rgba(232,0,29,.6);}
.sx-link{font-size:14px;font-weight:600;color:inherit;opacity:.65;text-decoration:none;padding:8px;}

/* phone-first layout */
@media(max-width:768px){
  .apply-hero{padding:88px 22px 22px!important;}
  .ah-tag{font-size:11px!important;margin-bottom:8px!important;}
  .ah-title{font-size:clamp(30px,9vw,38px)!important;}
  .ah-sub{font-size:14px!important;line-height:1.55!important;margin-top:8px!important;max-width:330px!important;}
  .form-card{padding-top:20px!important;}
  .wiz-now{font-size:20px!important;}
  .wiz-of{font-size:11px!important;}
  .fsec{font-size:18px!important;}
  .flabel{font-size:13.5px!important;}
  /* "Applying for" — one clean row: label over name, Change on the right */
  .veh-picked{display:grid!important;grid-template-columns:1fr auto;grid-template-rows:auto auto;column-gap:10px;row-gap:2px;padding:12px 14px!important;margin-bottom:18px!important;align-items:center;}
  .vp-l{grid-column:1;font-family:var(--font-body)!important;font-size:11px!important;letter-spacing:.1em!important;font-weight:700;}
  .vp-v{grid-column:1;font-family:var(--font-display)!important;font-size:17px!important;letter-spacing:0!important;font-weight:700;line-height:1.2!important;}
  .vp-c{grid-column:2;grid-row:1 / span 2;font-size:13px!important;font-weight:600;}
  .apply-body{padding:0 0 40px!important;}
  .apply-layout{max-width:none!important;}
  .form-card{border-radius:24px 24px 0 0!important;padding:24px 18px 110px!important;border-left:none!important;border-right:none!important;box-shadow:none!important;}
  .frow{gap:0!important;}
  .ffield{margin-bottom:16px!important;}
  .radio-group{flex-wrap:wrap;}
  .radio-opt{flex:1 1 30%;}
  /* Continue/Back pinned to the thumb zone, clear of the home indicator */
  .wiz-nav{position:fixed;left:0;right:0;bottom:0;z-index:60;margin:0!important;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:rgba(255,255,255,.96);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 -8px 24px rgba(0,0,0,.08);flex-direction:row!important;align-items:stretch!important;gap:10px!important;}
  .wiz-back{width:auto!important;flex:0 0 30%;}
  .form-note{margin-top:20px!important;}
  .success-title{font-size:38px!important;}
}


/* ── NAME ALIASES ──────────────────────────────────────────────────────────────────
   Older pages call the same controls something else (rs-* on the booking flow, uz-* on
   the host application). Mapping the names here restyles them without rewriting a
   thousand lines of markup — and without touching their JS, which looks up ids. */
.rs-ffield,.uz-field{margin-bottom:22px;}
.rs-flabel,.uz-label,.sl{font-family:var(--font-body)!important;font-size:14px!important;letter-spacing:0!important;
  text-transform:none!important;font-weight:600!important;margin-bottom:8px!important;line-height:1.35;color:#15151a;}
.rs-flabel .req,.uz-label .req,.uz-req{color:#E8001D;font-weight:700;}
.rs-finput,.rs-fselect,.rs-ftext,.uz-input,.uz-select{
  background-color:#f7f7f9;border:1.5px solid #d5d5de;color:#0a0a0a;
  font-size:16px!important;min-height:52px;border-radius:12px!important;padding:14px 16px!important;
  transition:border-color .15s,background-color .15s,box-shadow .15s;width:100%;}
.rs-finput:hover,.rs-fselect:hover,.rs-ftext:hover,.uz-input:hover,.uz-select:hover{border-color:#b8b8c4;}
.rs-finput:focus,.rs-fselect:focus,.rs-ftext:focus,.uz-input:focus,.uz-select:focus{
  border-color:#E8001D;background-color:#fff;box-shadow:0 0 0 4px rgba(232,0,29,.10);outline:none;}
.rs-finput::placeholder,.rs-ftext::placeholder,.uz-input::placeholder{color:#b4b4bc;}
.rs-ftext{min-height:110px;}

/* Step rail, old markup (.step/.step-dot/.step-label) — kept working, restyled.
   Scoped to .vyve-rail so it cannot collide with the wizard's own .step panels. */
.vyve-rail{display:flex;align-items:center;gap:0;margin-bottom:28px;}
.vyve-rail .step{flex:1;display:flex;flex-direction:column;align-items:center;gap:7px;position:relative;animation:none;}
.vyve-rail .step::before{content:'';position:absolute;top:15px;left:-50%;width:100%;height:3px;border-radius:99px;
  background:rgba(0,0,0,.10);z-index:0;}
.vyve-rail .step:first-child::before{display:none;}
.vyve-rail .step.done::before,.vyve-rail .step.on::before{background:#E8001D;}
.vyve-rail .step-dot{position:relative;z-index:1;width:31px;height:31px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;background:#ececf1;color:#8a8a92;font-size:13px;font-weight:700;
  transition:background .25s,color .25s,transform .25s;}
.vyve-rail .step.on .step-dot{background:#E8001D;color:#fff;transform:scale(1.08);box-shadow:0 6px 18px -6px rgba(232,0,29,.7);}
.vyve-rail .step.done .step-dot{background:#0a0a0a;color:#fff;}
.vyve-rail .step-label{font-size:11.5px;font-weight:600;color:#8a8a92;text-align:center;line-height:1.2;}
.vyve-rail .step.on .step-label{color:#0a0a0a;}
@media(max-width:560px){
  .vyve-rail .step-label{font-size:10px;}
  .vyve-rail .step-dot{width:27px;height:27px;font-size:12px;}
  .vyve-rail .step::before{top:13px;}
}


/* Booking/reservation step rails (.steps / .rs-steps) — same rail, modern look. */
/* These two flows have a summary sidebar, so the rail spans the whole wrap —
   centring it on the form column alone would leave it visibly off-axis. */
#stepsBar,#rsStepsBar{display:flex;align-items:flex-start;gap:0;margin:0 0 28px;position:relative;}
#stepsBar .step,#rsStepsBar .rs-step{flex:1;display:flex;flex-direction:column;align-items:center;gap:7px;
  position:relative;animation:none;}
#stepsBar .step::before,#rsStepsBar .rs-step::before{content:'';position:absolute;top:15px;left:-50%;width:100%;
  height:3px;border-radius:99px;background:rgba(0,0,0,.10);z-index:0;}
#stepsBar .step:first-child::before,#rsStepsBar .rs-step:first-child::before{display:none;}
#stepsBar .step.done::before,#stepsBar .step.active::before,
#rsStepsBar .rs-step.done::before,#rsStepsBar .rs-step.active::before{background:#E8001D;}
/* The next step's connector is later in the DOM, so at equal depth it painted over the
   previous dot — the red line appeared to run through the circle. The dots sit above it. */
#stepsBar .step-dot,#rsStepsBar .rs-step-dot{position:relative;z-index:2;width:31px;height:31px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;background:#ececf1;border:none;color:#8a8a92;
  font-size:13px;font-weight:700;transition:background .25s,color .25s,transform .25s;}
#stepsBar .step.active .step-dot,#rsStepsBar .rs-step.active .rs-step-dot{
  background:#E8001D;color:#fff;transform:scale(1.08);box-shadow:0 6px 18px -6px rgba(232,0,29,.7);}
#stepsBar .step.done .step-dot,#rsStepsBar .rs-step.done .rs-step-dot{background:#0a0a0a;color:#fff;}
#stepsBar .step-label,#rsStepsBar .rs-step-label{font-family:var(--font-body,inherit);font-size:11.5px;
  font-weight:600;color:#8a8a92;text-align:center;line-height:1.2;}
#stepsBar .step.active .step-label,#rsStepsBar .rs-step.active .rs-step-label{color:#0a0a0a;}
@media(max-width:560px){
  #stepsBar .step-label,#rsStepsBar .rs-step-label{font-size:9.5px;}
  #stepsBar .step-dot,#rsStepsBar .rs-step-dot{width:27px;height:27px;font-size:12px;}
  #stepsBar .step::before,#rsStepsBar .rs-step::before{top:13px;}
}

/* The animated confirmation, reused wherever a flow finishes. These containers are shown
   by each page's own JS, so the .show class is added alongside display:block. */
.success-screen.show .sx-fill,.rs-success-screen.show .sx-fill{animation:sxPop .55s cubic-bezier(.34,1.56,.64,1) .05s forwards;}
.success-screen.show .sx-halo,.rs-success-screen.show .sx-halo{animation:sxHalo 1.1s ease-out .35s forwards;}
.success-screen.show .sx-tick,.rs-success-screen.show .sx-tick{animation:sxTick .45s cubic-bezier(.65,0,.35,1) .45s forwards;}
.success-screen.show .sx-burst i,.rs-success-screen.show .sx-burst i{animation:sxBurst .8s cubic-bezier(.16,1,.3,1) .5s forwards;}
.success-screen.show .sx-check,.rs-success-screen.show .sx-check{animation:sxBob 3.4s ease-in-out 1.6s infinite;}
.success-screen .success-title,.rs-success-screen .rs-success-title{color:#0a0a0a;}


/* Panel headings across the older flows read as headings, not Bebas all-caps. */
.panel-title,.rs-panel-title,.wstep-title,.side-summary-title,.rs-summary-title{
  font-family:var(--font-display,inherit)!important;letter-spacing:-.02em!important;
  text-transform:none!important;font-weight:700!important;line-height:1.1!important;}
.panel-sub,.rs-panel-sub,.wstep-sub{font-size:14.5px!important;line-height:1.55!important;}


/* Buttons in the older flows — same shape and weight as the wizard's Continue. */
.btn-next,.btn-back,.rs-btn-next,.rs-btn-back,.wbtn{
  min-height:56px;border-radius:14px!important;font-family:var(--font-body,inherit)!important;
  font-size:15px!important;letter-spacing:.02em!important;text-transform:none!important;font-weight:700!important;}
.btn-next,.rs-btn-next,.wbtn-next{box-shadow:0 10px 24px -10px rgba(232,0,29,.6);}


/* Host application rail (.progress/.pstep) */
/* The rail lines up with the card under it, and the connector sits BEFORE each dot —
   otherwise the last step trails a grey line off into nothing. */
#progress{display:flex;align-items:flex-start;max-width:720px;margin:0 auto 26px;}
#progress .pstep{flex:1;display:flex;flex-direction:column;align-items:center;gap:7px;position:relative;}
#progress .pline{position:absolute;top:15px;left:-50%;width:100%;height:3px;border-radius:99px;
  background:rgba(0,0,0,.10);z-index:0;}
#progress .pstep:first-child .pline{display:none;}
#progress .pstep.done .pline,#progress .pstep.active .pline{background:#E8001D;}
#progress .pstep-dot{position:relative;z-index:1;width:31px;height:31px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;background:#ececf1;border:none;color:#8a8a92;font-size:13px;
  font-weight:700;font-family:var(--font-body,inherit);transition:background .25s,color .25s,transform .25s;}
#progress .pstep.active .pstep-dot{background:#E8001D;color:#fff;transform:scale(1.08);
  box-shadow:0 6px 18px -6px rgba(232,0,29,.7);}
#progress .pstep.done .pstep-dot{background:#0a0a0a;color:#fff;}
#progress .pstep-label{font-family:var(--font-body,inherit);font-size:11.5px;font-weight:600;color:#8a8a92;
  text-align:center;letter-spacing:0;text-transform:none;line-height:1.2;}
#progress .pstep.active .pstep-label{color:#0a0a0a;}
@media(max-width:560px){
  #progress .pstep-label{font-size:9.5px;}
  #progress .pstep-dot{width:27px;height:27px;font-size:12px;}
  #progress .pline{top:13px;}
}
/* The host card is white now, so its own headings and helper text have to be dark. */
.form-card .wstep-title{color:#0a0a0a;}
.form-card .wstep-sub,.form-card .form-note,.form-card .uz-hint{color:#5a5a60;}
.form-card .wbtn-back{background:transparent;border:1px solid rgba(0,0,0,.16);color:#5a5a60;}
.form-card .wbtn-back:hover{border-color:#0a0a0a;color:#0a0a0a;}
.form-card .uz-box,.form-card .upload-zone{background:#f7f7f9;border:1.5px dashed #d5d5de;border-radius:12px;color:#5a5a60;}


/* Page heroes on the booking flows — same voice as the application hero. */
.bh-title,.rh-title,.res-title{font-family:var(--font-display,inherit)!important;letter-spacing:-.015em!important;
  line-height:1!important;font-weight:800!important;text-transform:none!important;}
.bh-tag,.rh-tag,.res-tag{font-family:var(--font-body,inherit)!important;font-weight:700!important;
  letter-spacing:.14em!important;}
.bh-sub,.rh-sub,.res-sub{font-size:15.5px!important;line-height:1.6!important;max-width:520px;margin-left:auto;margin-right:auto;}
@media(max-width:768px){
  .bh-title,.rh-title,.res-title{font-size:clamp(30px,9vw,38px)!important;}
  .bh-sub,.rh-sub,.res-sub{font-size:14px!important;max-width:330px!important;}
}


/* ── LIGHT-CARD FALLOUT ────────────────────────────────────────────────────────────
   These were written for the old dark panel and are white text. On the white card they
   were invisible — present, readable by a screen reader, and blank to everyone else. */
.form-card .ow-opt-label{color:#0a0a0a;}
.form-card .ow-opt-sub{color:#667085;}
.form-card .uz-sec{color:#667085;}
.form-card .uz-name,.form-card .uz-title{color:#0a0a0a;}
.form-card .uz-hint,.form-card .uz-sub{color:#667085;}
.form-card strong{color:#0a0a0a;}
.form-card .ffield span,.form-card .flabel span{color:#8a8a92;}
.form-card .flabel .req,.form-card .req{color:#E8001D;}
/* Ownership choices read as cards on white, the way the radio options do elsewhere. */
/* .ow-opt is itself the <label>; the radio lives inside it. */
.form-card .ow-radio{display:grid;gap:10px;}
.form-card .ow-opt{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center;
  background:#f7f7f9;border:1.5px solid #d5d5de;border-radius:12px;padding:14px 12px;cursor:pointer;
  transition:border-color .16s,background .16s;}
.form-card .ow-opt:hover{border-color:#b8b8c4;}
.form-card .ow-opt input{position:absolute;opacity:0;pointer-events:none;}
.form-card .ow-opt.selected{background:rgba(232,0,29,.06);border-color:#E8001D;box-shadow:0 0 0 3px rgba(232,0,29,.08);}
.form-card .ow-opt-label{font-size:15px;font-weight:700;}
.form-card .ow-opt-sub{font-size:12.5px;}
/* Upload tiles */
.form-card .uz,.form-card .uz-box{background:#f7f7f9;border:1.5px dashed #d5d5de;border-radius:12px;color:#475467;}
.form-card .uz.done,.form-card .uz-box.done{background:rgba(18,168,112,.06);border-color:rgba(18,168,112,.45);border-style:solid;}
.form-card .uz-prog{color:#667085;}
/* The success panel lives on white too. */
.form-card .success-msg strong,.success-msg .sstep-t strong{color:#0a0a0a;}
.form-card .success-msg,.form-card .sstep-t{color:#475467;}

/* The rail was sitting tight under the hero. Give it room to breathe. */
#progress{margin-top:14px;}
@media(min-width:761px){ #progress{margin-top:26px;} }


/* The progress bar sits on the light page, outside the white card, so it needs the light
   treatment the card's own copy of these rules would have given it. */
.apply-body .wiz-progress{padding-top:18px;margin-bottom:22px;}
.apply-body .wiz-now{color:#0a0a0a;font-size:20px;}
.apply-body .wiz-of{color:#8a8a92;}
.apply-body .wiz-track{grid-template-columns:repeat(6,1fr);}
.apply-body .wiz-seg{background:rgba(0,0,0,.10);}
.apply-body .wiz-seg.done span,.apply-body .wiz-seg.on span{background:#E8001D;}
@media(max-width:560px){
  /* The card goes full-bleed on a phone, so the bar above it needs its own gutter or the
     labels sit on the screen edge. */
  .apply-body .wiz-progress{padding:14px 18px 0;}
  .apply-body .wiz-now{font-size:18px;}
  .apply-body .wiz-of{font-size:10px;}
}