/* Washr plan builder
 *
 * Motion rules, applied throughout:
 *   - UI feedback is 140-220ms. Anything slower feels broken.
 *   - Easing is a spring-ish cubic-bezier, never linear, never ease-in on entry.
 *   - Only transform and opacity animate. No layout properties, so no jank.
 *   - The loading screen is the one deliberate pause. Everything else is instant.
 *   - prefers-reduced-motion removes movement, never information.
 */

:root {
  --teal:   #0198B3;
  --teal-d: #017A90;
  --lime:   #C0FF72;
  --ground: #0A0A0A;
  --panel:  #131313;
  --raise:  #1A1A1A;
  --line:   #262626;
  --line-2: #343434;
  --text:   #ECECEC;
  --muted:  #8C8C8C;
  --danger: #E5695B;

  --spring: cubic-bezier(.2, .9, .3, 1);
  --snap:   cubic-bezier(.32, .72, 0, 1);
  --r:      14px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body.wz {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font-family: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
}

h1, h2, h3, .display {
  font-family: 'Archivo Black', system-ui, sans-serif;
  letter-spacing: -.02em;
  line-height: 1.08;
  margin: 0;
}

.wrap { width: 100%; max-width: 680px; margin: 0 auto; padding: 0 20px; }

/* ---------- chrome ---------- */

.topbar {
  position: sticky; top: 0; z-index: 20;
  background: rgba(10, 10, 10, .92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.topbar .wrap { display: flex; align-items: center; gap: 14px; height: 60px; }

.mark { font-family: 'Archivo Black', sans-serif; font-size: 19px; letter-spacing: -.02em; }
.mark span { color: var(--teal); }

.topbar .back {
  margin-left: auto; background: none; border: 0; color: var(--muted);
  font: inherit; font-size: 14px; cursor: pointer; padding: 8px; border-radius: 8px;
  transition: color .16s var(--spring), opacity .16s var(--spring);
}
.topbar .back:hover { color: var(--text); }
.topbar .back[hidden] { display: none; }

.progress { height: 3px; background: var(--line); overflow: hidden; }
.progress i {
  display: block; height: 100%; width: 0%;
  background: var(--teal);
  transition: width .42s var(--snap);
}

/* ---------- steps ---------- */

/* main also carries .wrap, and .wrap's padding shorthand used to beat a plain
   `main` rule, zeroing the bottom space. The fixed Continue bar then sat on top
   of "Add another car", so after the first car the button could not be seen or
   tapped on a phone. main.wrap outranks .wrap; padding-block keeps its sides. */
main.wrap { padding-block: 34px calc(132px + env(safe-area-inset-bottom)); }

.step { display: none; }
.step.is-active { display: block; animation: stepIn .34s var(--spring) both; }

@keyframes stepIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.eyebrow {
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 600; color: var(--teal); margin-bottom: 10px;
}
.step h2 { font-size: clamp(25px, 6vw, 33px); margin-bottom: 8px; }
.lede { color: var(--muted); margin: 0 0 26px; font-size: 15.5px; }

/* ---------- choice cards ---------- */

.choices { display: grid; gap: 10px; }
.choices.two { grid-template-columns: repeat(2, 1fr); }
.choices.three { grid-template-columns: repeat(3, 1fr); }

.choice {
  position: relative; display: block; width: 100%; text-align: left;
  background: var(--panel); border: 1.5px solid var(--line);
  border-radius: var(--r); padding: 15px 16px; color: var(--text);
  font: inherit; cursor: pointer;
  transition: transform .16s var(--spring), border-color .16s var(--spring), background .16s var(--spring);
}
.choice:hover { border-color: var(--line-2); }
.choice:active { transform: scale(.982); }
.choice:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

.choice[aria-pressed="true"],
.choice.is-on {
  border-color: var(--teal);
  background: rgba(1, 152, 179, .12);
}
.choice .t { font-weight: 600; display: block; }
.choice .s { color: var(--muted); font-size: 13.5px; display: block; margin-top: 2px; }

.choice .tick {
  position: absolute; top: 13px; right: 13px; width: 19px; height: 19px;
  border-radius: 50%; background: var(--teal); display: grid; place-items: center;
  opacity: 0; transform: scale(.4);
  transition: opacity .18s var(--spring), transform .28s var(--spring);
}
.choice[aria-pressed="true"] .tick, .choice.is-on .tick { opacity: 1; transform: none; }
.choice .tick svg { width: 11px; height: 11px; stroke: #04252B; stroke-width: 3.4; fill: none; }

/* day chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  border: 1.5px solid var(--line); background: var(--panel); color: var(--text);
  border-radius: 999px; padding: 9px 15px; font: inherit; font-size: 14px;
  cursor: pointer; transition: transform .14s var(--spring), border-color .14s var(--spring), background .14s var(--spring);
}
.chip:active { transform: scale(.94); }
.chip:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.chip[aria-pressed="true"] { border-color: var(--lime); background: rgba(192, 255, 114, .13); color: var(--lime); }

/* ---------- car cards ---------- */

.car {
  background: var(--panel); border: 1.5px solid var(--line);
  border-radius: 16px; padding: 16px; margin-bottom: 12px;
  animation: carIn .38s var(--spring) both;
}
@keyframes carIn {
  from { opacity: 0; transform: translateY(12px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
.car.is-leaving { animation: carOut .22s var(--snap) both; }
@keyframes carOut {
  to { opacity: 0; transform: translateY(-6px) scale(.97); }
}

.car-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.car-n {
  width: 26px; height: 26px; border-radius: 8px; background: var(--raise);
  display: grid; place-items: center; font-size: 12.5px; font-weight: 700; color: var(--muted);
  flex: none;
}
.car-head .rm {
  margin-left: auto; background: none; border: 0; color: var(--muted);
  cursor: pointer; font: inherit; font-size: 13px; padding: 6px 8px; border-radius: 8px;
  transition: color .15s var(--spring);
}
.car-head .rm:hover { color: var(--danger); }

.field { margin-bottom: 12px; }
.field label { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 6px; font-weight: 500; }

input[type="text"], input[type="email"], input[type="tel"] {
  width: 100%; background: var(--raise); border: 1.5px solid var(--line);
  border-radius: 11px; padding: 12px 14px; color: var(--text); font: inherit; font-size: 16px;
  transition: border-color .16s var(--spring), background .16s var(--spring);
}
input::placeholder { color: #5C5C5C; }
input:focus { outline: none; border-color: var(--teal); background: #1D1D1D; }

.badge {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 8px;
  font-size: 12.5px; color: var(--teal); background: rgba(1, 152, 179, .1);
  border: 1px solid rgba(1, 152, 179, .3); border-radius: 999px; padding: 4px 11px;
  animation: pop .3s var(--spring) both;
}
.badge.warn { color: #E8A33D; background: rgba(232, 163, 61, .1); border-color: rgba(232, 163, 61, .3); }
.badge button {
  background: none; border: 0; color: inherit; font: inherit; font-size: 12px;
  text-decoration: underline; cursor: pointer; padding: 0; opacity: .8;
}
@keyframes pop {
  from { opacity: 0; transform: scale(.88); }
  to   { opacity: 1; transform: none; }
}

.seg { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.seg.three { grid-template-columns: repeat(3, 1fr); }
.seg button {
  background: var(--raise); border: 1.5px solid var(--line); border-radius: 11px;
  padding: 11px 8px; color: var(--muted); font: inherit; font-size: 14px; cursor: pointer;
  transition: transform .14s var(--spring), border-color .14s var(--spring), color .14s var(--spring), background .14s var(--spring);
}
.seg button:active { transform: scale(.96); }
.seg button:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.seg button[aria-pressed="true"] { border-color: var(--teal); color: var(--text); background: rgba(1, 152, 179, .13); }
.seg button b { display: block; font-weight: 600; }
.seg button i { display: block; font-style: normal; font-size: 11.5px; opacity: .65; margin-top: 1px; }

.addcar {
  width: 100%; background: none; border: 1.5px dashed var(--line-2); border-radius: 14px;
  padding: 14px; color: var(--muted); font: inherit; font-size: 15px; cursor: pointer;
  transition: border-color .16s var(--spring), color .16s var(--spring), transform .16s var(--spring);
}
.addcar:hover { border-color: var(--teal); color: var(--teal); }
.addcar:active { transform: scale(.99); }
.addcar:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

/* suburb suggestions */
.sugg { margin-top: 8px; display: grid; gap: 6px; }
.sugg button {
  text-align: left; background: var(--raise); border: 1px solid var(--line);
  border-radius: 10px; padding: 10px 13px; color: var(--text); font: inherit; font-size: 14px;
  cursor: pointer; transition: border-color .14s var(--spring), transform .14s var(--spring);
  animation: pop .22s var(--spring) both;
}
.sugg button:hover { border-color: var(--teal); }
.sugg button:active { transform: scale(.985); }
.sugg button em { font-style: normal; color: var(--muted); font-size: 12.5px; display: block; }

.note {
  background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--teal);
  border-radius: 10px; padding: 12px 14px; font-size: 13.5px; color: var(--muted); margin-top: 14px;
}
.note strong { color: var(--text); font-weight: 600; }
.note.warn { border-left-color: #E8A33D; }

.consent { display: flex; gap: 11px; align-items: flex-start; margin-top: 16px; cursor: pointer; }
.consent input { margin: 3px 0 0; width: 17px; height: 17px; accent-color: var(--teal); flex: none; }
.consent span { font-size: 13.5px; color: var(--muted); }

.err { color: var(--danger); font-size: 13.5px; margin-top: 10px; min-height: 0; }

/* ---------- sticky footer ---------- */

.bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 25;
  background: var(--ground);
  border-top: 1px solid var(--line);
  padding: 14px 0 max(14px, env(safe-area-inset-bottom));
}
.bar .wrap { display: flex; align-items: center; gap: 14px; }
.bar .live { font-size: 13px; color: var(--muted); line-height: 1.25; }
.bar .live b { display: block; color: var(--text); font-size: 15px; font-weight: 600; }

.next {
  margin-left: auto; background: var(--teal); color: #04252B; border: 0;
  border-radius: 12px; padding: 14px 26px; font: inherit; font-weight: 700; font-size: 15.5px;
  cursor: pointer; flex: none;
  transition: transform .15s var(--spring), background .15s var(--spring), opacity .15s var(--spring);
}
.next:hover:not(:disabled) { background: #02A9C6; }
.next:active:not(:disabled) { transform: scale(.965); }
.next:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
.next:disabled { opacity: .38; cursor: not-allowed; }

/* ---------- loading ---------- */

.load {
  position: fixed; inset: 0; z-index: 60; background: var(--ground);
  display: grid; place-items: center; padding: 24px;
  animation: fadeIn .26s var(--spring) both;
}
.load[hidden] { display: none; }
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }

.load .inner { text-align: center; width: 100%; max-width: 420px; }
.load svg { width: 100%; max-width: 330px; height: auto; display: block; margin: 0 auto 26px; }
.load .say { font-size: 16px; color: var(--text); min-height: 24px; font-weight: 500; }
.load .say span { display: inline-block; animation: sayIn .34s var(--spring) both; }
@keyframes sayIn { from { opacity: 0; transform: translateY(7px) } to { opacity: 1; transform: none } }

.load .dots { display: flex; gap: 6px; justify-content: center; margin-top: 16px; }
.load .dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--line-2); animation: dot 1.2s var(--spring) infinite; }
.load .dots i:nth-child(2) { animation-delay: .16s; }
.load .dots i:nth-child(3) { animation-delay: .32s; }
@keyframes dot { 0%, 60%, 100% { background: var(--line-2); transform: none } 30% { background: var(--teal); transform: translateY(-4px) } }

/* the scene */
.wiper { transform-origin: 288px 84px; animation: wipe .72s ease-in-out infinite; }
@keyframes wipe { 0%, 100% { transform: rotate(-26deg) } 50% { transform: rotate(24deg) } }

.dude { animation: bob .72s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-2.5px) } }

.sud { opacity: 0; animation: sud 1.9s ease-out infinite; }
.sud:nth-of-type(2) { animation-delay: .5s; }
.sud:nth-of-type(3) { animation-delay: 1s; }
.sud:nth-of-type(4) { animation-delay: 1.45s; }
@keyframes sud {
  0%   { opacity: 0; transform: translate(0, 0) scale(.5); }
  22%  { opacity: .85; }
  100% { opacity: 0; transform: translate(-16px, -46px) scale(1.15); }
}

.gleam { opacity: 0; transform-origin: center; animation: gleam 1.9s var(--spring) infinite; }
.gleam:nth-of-type(2) { animation-delay: .3s; }
.gleam:nth-of-type(3) { animation-delay: .6s; }
@keyframes gleam {
  0%, 40% { opacity: 0; transform: scale(.4) rotate(0deg); }
  60%     { opacity: 1; transform: scale(1) rotate(22deg); }
  100%    { opacity: 0; transform: scale(.75) rotate(40deg); }
}

.wheel { animation: squish 1.44s ease-in-out infinite; transform-origin: center bottom; }
@keyframes squish { 0%, 100% { transform: scaleY(1) } 50% { transform: scaleY(.94) } }

/* ---------- results ---------- */

.res { display: none; }
.res.is-on { display: block; animation: stepIn .46s var(--spring) both; }

.hero {
  background: rgba(1, 152, 179, .10);
  border: 1.5px solid rgba(1, 152, 179, .42); border-radius: 20px;
  padding: 26px 22px; text-align: center; margin-bottom: 14px;
}
.hero .cap { font-size: 12px; letter-spacing: .09em; text-transform: uppercase; color: var(--teal); font-weight: 600; }
.hero .big {
  font-family: 'Archivo Black', sans-serif; font-size: clamp(44px, 13vw, 64px);
  line-height: 1; margin: 10px 0 2px; letter-spacing: -.035em;
}
.hero .per { color: var(--muted); font-size: 14.5px; }

.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 20px 0 14px; }
.compare div { background: var(--panel); border: 1px solid var(--line); border-radius: 13px; padding: 14px; text-align: center; }
.compare .k { font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.compare .v { font-family: 'Archivo Black', sans-serif; font-size: 23px; margin-top: 5px; }
.compare .was .v { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 2px; }
.compare .now .v { color: var(--lime); }

.saving {
  background: rgba(192, 255, 114, .1); border: 1.5px solid rgba(192, 255, 114, .38);
  border-radius: 14px; padding: 15px; text-align: center; margin-bottom: 20px;
}
.saving b { color: var(--lime); font-family: 'Archivo Black', sans-serif; font-size: 20px; }
.saving span { display: block; color: var(--muted); font-size: 13.5px; margin-top: 3px; }

.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 18px; margin-bottom: 14px; }
.panel h3 { font-size: 15px; margin-bottom: 12px; }

.rows { width: 100%; border-collapse: collapse; }
.rows td { padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14px; vertical-align: top; }
.rows tr:last-child td { border-bottom: 0; }
.rows td:last-child { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rows .sub { color: var(--muted); font-size: 12.5px; display: block; }
.rows .tot td { font-weight: 700; border-top: 1.5px solid var(--line-2); padding-top: 12px; }

.acts { display: grid; gap: 10px; margin-bottom: 20px; }
@media (min-width: 520px) { .acts { grid-template-columns: 1fr 1fr; } }

.btn {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  border-radius: 13px; padding: 15px 18px; font: inherit; font-weight: 700; font-size: 15.5px;
  cursor: pointer; border: 0; text-decoration: none;
  transition: transform .15s var(--spring), background .15s var(--spring), border-color .15s var(--spring);
}
.btn:active { transform: scale(.972); }
.btn:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
.btn.primary { background: var(--lime); color: #10210A; }
.btn.primary:hover { background: #CCFF8A; }
.btn.ghost { background: var(--panel); border: 1.5px solid var(--line-2); color: var(--text); }
.btn.ghost:hover { border-color: var(--teal); }
.btn svg { width: 17px; height: 17px; flex: none; }

.fine { color: var(--muted); font-size: 12.5px; line-height: 1.55; }
.fine a { color: var(--teal); }

/* ---------- modal ---------- */

.wz-modal { position: fixed; inset: 0; z-index: 9999; display: none; }
.wz-modal.is-open { display: block; }
.wz-modal .scrim {
  position: absolute; inset: 0; background: rgba(6, 6, 6, .72);
  backdrop-filter: blur(3px); animation: fadeIn .22s var(--spring) both;
}
.wz-modal .card {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(430px, calc(100vw - 32px));
  background: var(--panel); border: 1.5px solid var(--line-2); border-radius: 20px;
  padding: 28px 24px; text-align: center;
  animation: cardIn .38s var(--spring) both;
}
@keyframes cardIn {
  from { opacity: 0; transform: translate(-50%, -46%) scale(.94); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.wz-modal .x {
  position: absolute; top: 12px; right: 12px; width: 32px; height: 32px;
  background: none; border: 0; color: var(--muted); cursor: pointer; border-radius: 9px;
  font-size: 19px; line-height: 1; transition: color .15s var(--spring), background .15s var(--spring);
}
.wz-modal .x:hover { color: var(--text); background: var(--raise); }
.wz-modal h3 { font-size: 23px; margin-bottom: 9px; }
.wz-modal p { color: var(--muted); font-size: 14.5px; margin: 0 0 20px; }
.wz-modal .later {
  display: block; width: 100%; margin-top: 11px; background: none; border: 0;
  color: var(--muted); font: inherit; font-size: 13.5px; cursor: pointer; padding: 8px;
}
.wz-modal .later:hover { color: var(--text); }

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .wiper, .dude, .sud, .gleam, .wheel { animation: none !important; }
  .gleam { opacity: 1; }
}

/* ---------- print, the PDF fallback ---------- */

@media print {
  body.wz { background: #fff; color: #111; }
  .topbar, .bar, .acts, .load, .wz-modal, .step { display: none !important; }
  .res { display: block !important; }
  .hero { background: none; border: 2px solid #111; }
  .panel, .compare div { border-color: #bbb; background: none; }
  .hero .big, .compare .now .v { color: #111; }
  .saving { background: none; border-color: #111; }
  .saving b { color: #111; }
  .rows td { border-color: #ddd; }
  .fine, .rows .sub, .compare .k, .hero .per { color: #555; }
}