/* ==========================================================================
   Spinny Tune - client demo
   Flat, light, Material. The page only goes dark while the customer is
   actually playing. No gradients, no glows except the one on the machine,
   no trust badges, no guarantee seals.
   Brand blue is #2744F6, sampled from the TuneZilla mark in the dealer pack.
   ========================================================================== */

:root{
  --page:#EDF1F8;
  --surface:#FFFFFF;
  --border:#DCE3ED;
  --border-soft:#E7ECF3;
  --well:#F4F7FB;
  --heading:#19242A;
  --body:#535355;
  --muted:#8A9199;

  --brand:#2744F6;
  --brand-dark:#1B33C9;
  --brand-wash:#EEF1FE;
  --brand-line:#C7D0FC;

  --green:#2BC38C;
  --green-dark:#22A676;
  --green-ink:#14855F;
  --green-wash:#EAF9F3;
  --green-line:#B9EBD8;

  --amber:#B7791F;
  --amber-wash:#FEF6E7;
  --amber-line:#F3DFB4;

  --shadow:0 1px 3px rgba(16,24,40,.08);
  --shadow-lift:0 6px 20px rgba(16,24,40,.10);

  /* Play mode - a dark blue-grey, never black, never navy. */
  --play:#141C26;
  --play-surface:#1B2531;
  --play-well:#161E28;
  --play-border:#2A3644;
  --play-text:#F2F5F9;
  --play-muted:#93A0AF;

  /* The end of a set of spins, and only that (Q47). */
  --gold:#F5B82E;
  --gold-deep:#D99A12;
  --gold-light:#FFE9A0;
  --gold-text:#FFD76A;
  --gold-ink:#3A2A00;

  --sans:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --slab:"Clarendon Text Pro",Bitter,"Roboto Slab",Rockwell,Georgia,serif;

  --cell:112px;
  --reel-h:236px;
  --reel-w:188px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--page);color:var(--body);
  font-family:var(--sans);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{color:var(--heading);margin:0;font-weight:700;line-height:1.15}
h1{font-size:56px;line-height:1.06;letter-spacing:-.02em}
h2{font-size:38px;letter-spacing:-.015em}
h3{font-size:22px}
h4{font-size:18px}
p{margin:0}
img{max-width:100%;display:block}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
button,select,input,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid rgba(39,68,246,.35);outline-offset:2px;border-radius:6px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.container{width:min(1560px,100%);margin:0 auto;padding:0 40px}
.section{padding:82px 0}
.section-head{margin-bottom:38px}
.eyebrow{font-size:13px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.lead{font-size:20px;max-width:70ch;margin-top:14px}

/* ---------------------------------------------------------------- buttons */
.btn{
  border:1px solid transparent;border-radius:9px;height:50px;padding:0 24px;
  font-weight:650;font-size:16px;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  transition:background .16s ease,border-color .16s ease,color .16s ease;text-decoration:none;
}
.btn:hover{text-decoration:none}
.btn-brand{background:var(--brand);color:#fff}
.btn-brand:hover{background:var(--brand-dark)}
.btn-green{background:var(--green);color:#fff}
.btn-green:hover{background:var(--green-dark)}
.btn-outline{background:#fff;border-color:var(--border);color:var(--heading)}
.btn-outline:hover{background:var(--well)}
.btn-green-outline{background:#fff;border-color:var(--green);color:var(--green-ink)}
.btn-green-outline:hover{background:var(--green-wash)}
.btn-full{width:100%}
.btn-lg{height:56px;padding:0 30px;font-size:17px}
.btn[disabled],.btn.is-disabled{opacity:.45;cursor:not-allowed;pointer-events:none}

/* ---------------------------------------------------------------- header */
.site-header{position:sticky;top:0;z-index:40;background:#fff;border-bottom:1px solid var(--border)}
.nav{height:84px;display:flex;align-items:center;gap:30px}
.brandmark{display:flex;align-items:center;text-decoration:none;flex:0 0 auto}
.brandmark:hover{text-decoration:none}
.brand-logo{
  height:66px;width:auto;display:block;
  /* No alpha channel in the source, but the backdrop is pure white, so
     multiply removes it against the white header and keeps the artwork. */
  mix-blend-mode:multiply;
}
.brand-logo-still{display:none}
@media (prefers-reduced-motion:reduce){
  .brandmark video{display:none}
  .brand-logo-still{display:block}
}
.navlinks{display:flex;gap:28px;flex:1;justify-content:center}
.navlinks a{font-size:14px;font-weight:600;letter-spacing:.04em;color:var(--body);text-transform:uppercase}
.navlinks a:hover,.navlinks a.is-here{color:var(--brand);text-decoration:none}
.nav-actions{display:flex;align-items:center;gap:20px;white-space:nowrap}
.nav-actions .login{font-size:15px;color:var(--body);font-weight:500}
.nav-actions .btn{height:44px;padding:0 20px;font-size:15px}
/* With the links folded away (below 1040px) nothing else pushes these right. */
.nav-actions{margin-left:auto}

/* The menu button, and the log in item only the folded menu shows (phones). */
.nav-toggle{
  display:none;align-items:center;justify-content:center;flex:0 0 44px;width:44px;height:44px;padding:0;
  background:#fff;border:1px solid var(--border);border-radius:10px;color:var(--heading);cursor:pointer;
}
.nav-toggle:hover{background:var(--well)}
.nav-toggle svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.nav-toggle-close,.nav.is-open .nav-toggle-open{display:none}
.nav.is-open .nav-toggle-close{display:block}
.navlinks .nav-login{display:none}

/* The six steps live inside the header, not on a bar of their own. */
/* `safe center` matters here, not styling: a centred flex row that overflows
   pushes its first item to a negative offset that no amount of scrolling can
   reach, so on a phone "01 Car Select" simply could not be seen. `safe` falls
   back to start-alignment the moment the strip is wider than the screen. */
.stepstrip{height:38px;display:flex;align-items:center;justify-content:center;justify-content:safe center;gap:6px;border-top:1px solid #F1F4F8;overflow-x:auto;scrollbar-width:none}
.stepstrip::-webkit-scrollbar{display:none}
.step{
  font-size:12.5px;font-weight:600;color:#7C858F;padding:4px 11px;border-radius:999px;
  white-space:nowrap;text-decoration:none;display:inline-flex;align-items:center;gap:6px;
}
.step.is-done{color:var(--green-ink)}
.step.is-done:hover{background:var(--green-wash);text-decoration:none}
.step.is-active{background:var(--brand);color:#fff}
.step.is-active:hover{text-decoration:none}
.step.is-locked{color:#B4BBC4;pointer-events:none}
.step .tick{width:13px;height:13px}

/* ---------------------------------------------------------------- hero */
.hero{min-height:calc(100vh - 122px);display:flex;align-items:center;padding:56px 0 80px}
.hero-inner{width:100%;text-align:center}
.hero-sub{font-size:20px;margin:16px auto 38px;max-width:680px}
.hero-foot{font-size:15px;color:var(--muted);margin-top:20px}

/* ------------------------------------------------------------- the machine */
.machine-wrap{display:flex;justify-content:center}
.machine{
  position:relative;width:100%;background:var(--surface);
  border:1px solid var(--border);border-radius:22px;box-shadow:var(--shadow);
  padding:26px 34px 28px;text-align:left;
  transition:transform .26s ease,box-shadow .26s ease,border-color .26s ease,background .3s ease;
}
.machine.is-live{cursor:pointer}

/* The one glow on the page: the client asked for it here and only here.
   Dimitri, Figma, ~12 Sep: "make this box have a "breathing effect" soft
   glow". It already breathed, but at 6-16% opacity nobody could see it. Now it
   swells from a faint rim to a soft blue glow and settles back, one breath
   every 4.8s. */
@keyframes halo{
  from{box-shadow:var(--shadow), 0 0 0 0 rgba(39,68,246,.08), 0 0 10px 0 rgba(39,68,246,.10)}
  to  {box-shadow:var(--shadow), 0 0 0 5px rgba(39,68,246,.10), 0 0 44px 12px rgba(39,68,246,.30)}
}
.machine.is-live,
.machine.is-demo{animation:halo 2.4s ease-in-out infinite alternate}

@keyframes haloWin{
  from{box-shadow:var(--shadow), 0 0 0 6px rgba(43,224,126,.22)}
  to  {box-shadow:var(--shadow), 0 0 36px 13px rgba(43,224,126,.32)}
}
.machine.is-win{border-color:var(--green);animation:haloWin .8s ease-in-out infinite alternate}

.machine.is-live:hover,.machine.is-live:focus-visible{
  animation:none;transform:scale(1.02);border-color:var(--brand);
  box-shadow:var(--shadow-lift), 0 0 32px 11px rgba(39,68,246,.20);
}

.machine-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:0 2px 14px;border-bottom:1px solid var(--border-soft);margin-bottom:18px;
}
.machine-title{font-size:13.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.machine-cap{font-size:13.5px;color:var(--muted)}
.machine-body{display:flex;align-items:center;gap:16px}

.well{
  flex:1;height:calc(var(--reel-h) + 24px);background:var(--well);
  border:1px solid var(--border);border-radius:14px;
  display:flex;align-items:center;justify-content:center;gap:8px;padding:12px;
}
.reel{
  position:relative;height:var(--reel-h);flex:1 1 var(--reel-w);min-width:0;
  background:#fff;border:1px solid var(--border-soft);border-radius:10px;overflow:hidden;
}
.reel::before,.reel::after{
  content:"";position:absolute;left:0;right:0;height:1px;background:#EDF1F8;z-index:2;pointer-events:none;
}
.reel::before{top:calc((var(--reel-h) - var(--cell)) / 2)}
.reel::after{bottom:calc((var(--reel-h) - var(--cell)) / 2)}

.strip{
  position:absolute;left:0;right:0;top:0;
  display:flex;flex-direction:column;align-items:center;
  transform:translateY(var(--rest,0px));will-change:transform;
}
.digit{
  height:var(--cell);min-height:var(--cell);width:100%;
  display:flex;align-items:center;justify-content:center;
  /* Derived from the cell, so a reel never has to be resized in two places. */
  font-family:var(--slab);font-size:calc(var(--cell) * .76);
  font-weight:700;line-height:1;color:var(--heading);
}
/* At rest only the live row is solid; its neighbours sit back so the eye
   goes to the number. While the reels are turning there is no live row on
   screen, so that same dimming would make a spinning reel look like an
   empty window - every face comes up instead. */
.reel .digit{opacity:.22}
.reel .digit.is-live{opacity:1}
.machine.is-spinning .reel .digit{opacity:.82}
.machine.is-spinning .reel .digit.is-live{opacity:1}
/* The TZ mark rides the reels, as the client's sketch asks. It counts as
   nothing, so it is only ever a decorative face between digits. */
.digit img{width:.62em;height:auto;opacity:.9}

.dot{
  width:15px;height:15px;border-radius:50%;background:var(--heading);
  flex:0 0 15px;align-self:center;margin:38px 10px 0;
}
.pct{
  font-family:var(--slab);font-size:50px;font-weight:600;line-height:1;
  color:var(--muted);align-self:center;margin:22px 0 0 14px;flex:0 0 auto;
}

.lever{
  position:relative;width:66px;flex:0 0 66px;height:calc(var(--reel-h) + 24px);
  background:var(--well);border:1px solid var(--border);border-radius:14px;
  display:flex;justify-content:center;align-items:flex-start;padding-top:13px;
  pointer-events:none;
}
.lever-rail{
  position:absolute;top:15px;bottom:15px;left:50%;transform:translateX(-50%);
  width:16px;border-radius:999px;background:#E4EAF2;
}
.lever-knob{
  position:relative;width:36px;height:36px;border-radius:50%;
  background:#C3CCD9;border:3px solid #fff;box-shadow:var(--shadow);
  transition:transform .2s ease-out,background .2s ease-out;
}
/* Positive selectors only: a :not() on the ancestor does not reliably
   invalidate descendant styles when the class is toggled by script. */
.machine.is-live .lever-knob,
.machine.is-demo .lever-knob{background:var(--brand)}
.machine.is-live .lever{pointer-events:auto;cursor:grab}
.machine.is-live .lever:active{cursor:grabbing}
.machine.is-live:hover .lever-knob{transform:translateY(calc(var(--reel-h) - 40px));background:var(--brand-dark)}

@keyframes pull{
  0%  {transform:translateY(0)}
  30% {transform:translateY(calc(var(--reel-h) - 40px))}
  100%{transform:translateY(0)}
}
@keyframes bob{
  0%,86%,100%{transform:translateY(0)}
  93%{transform:translateY(14px)}
}
.machine.is-live .lever-knob{animation:bob 6s ease-in-out infinite}
.machine.is-live:hover .lever-knob{animation:none}
.machine.is-spinning .lever .lever-knob{animation:pull .75s cubic-bezier(.3,.9,.3,1)}

.lock-chip{
  display:flex;align-items:center;justify-content:center;gap:8px;width:max-content;max-width:100%;
  margin:20px auto 0;padding:10px 20px;border-radius:999px;text-align:center;
  background:var(--well);border:1px solid var(--border);color:var(--muted);font-size:15px;
}
.lock-chip svg{width:16px;height:16px;flex:0 0 16px}
.lock-chip.is-win{color:var(--green-ink);background:var(--green-wash);border-color:var(--green-line);font-weight:600}
.lock-chip.is-under{color:var(--brand-dark);background:var(--brand-wash);border-color:var(--brand-line)}
.lock-chip.is-cta{color:var(--brand-dark);background:var(--brand-wash);border-color:var(--brand-line);font-weight:600}
/* Dimitri, Figma, ~12 Sep: the week's spins in "this blue box". Each figure
   keeps its label; on a narrow box whole figures wrap, never half of one. */
.lock-chip.is-stats{color:var(--brand-dark);background:var(--brand-wash);border-color:var(--brand-line)}
.lock-chip.is-stats > span{display:flex;flex-wrap:wrap;justify-content:center;column-gap:14px;row-gap:2px}
.lock-chip .stat-when{font-weight:650}
.lock-chip .stat{white-space:nowrap}
.lock-chip .stat b{font-weight:650}


/* Attract mode: the reels breathe, then nudge and settle once a cycle. */
@keyframes idle{
  0%  {transform:translateY(calc(var(--rest) - 3px))}
  28% {transform:translateY(calc(var(--rest) + 3px))}
  60% {transform:translateY(calc(var(--rest) - 3px))}
  69% {transform:translateY(calc(var(--rest) + 26px))}
  77% {transform:translateY(calc(var(--rest) - 9px))}
  84% {transform:translateY(calc(var(--rest) + 3px))}
  100%{transform:translateY(calc(var(--rest) - 3px))}
}
.machine.is-live .strip{animation:idle 6s ease-in-out infinite}
.machine.is-live .reel:nth-child(2) .strip{animation-delay:.32s}
.machine.is-live .reel:nth-child(4) .strip{animation-delay:.64s}
.machine.is-live .reel:nth-child(5) .strip{animation-delay:.96s}

@keyframes spin{
  from{transform:translateY(var(--start))}
  to{transform:translateY(var(--rest))}
}
.machine.is-spinning .reel .strip{
  animation:spin var(--dur) cubic-bezier(.13,.72,.14,1) both;animation-delay:0s;
}

/* ---------------------------------------------------------------- selector */
.selector{
  width:100%;margin:26px auto 0;background:#fff;
  border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);
  padding:16px;display:grid;grid-template-columns:repeat(4,1fr) auto;gap:12px;
}
.selector select,.field select,.field input,.field textarea{
  height:58px;font-size:16px;border:1px solid var(--border);border-radius:9px;background:#fff;
  padding:0 14px;color:var(--heading);width:100%;
}
.selector select{
  appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238A9199' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 14px center;
}
.selector select:disabled{background-color:#F7F9FC;color:var(--muted)}
.selector .btn{height:58px;padding:0 30px}

/* Each field carries its own icon on the left. The select keeps the arrow
   on the right, so the padding has to make room on both sides. */
.sel{position:relative;display:block}
.sel > svg{
  position:absolute;left:16px;top:50%;transform:translateY(-50%);
  width:20px;height:20px;color:var(--muted);pointer-events:none;z-index:1;
}
.sel select{padding-left:46px}
/* A field that is not open yet has its icon sit back with the label. */
.sel:has(select:disabled) > svg{opacity:.45}
.sel:has(select:not(:disabled)) > svg{color:var(--brand)}

/* ---------------------------------------------------------------- cards */
.card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:32px}
.card-tight{padding:24px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
/* A grid column is never narrower than its widest word or picture unless told
   so; without this one long car name made a whole column wider than a phone. */
.grid-2 > *,.grid-3 > *,.grid-4 > *{min-width:0}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.stack{display:flex;flex-direction:column;gap:16px}

.buy-grid{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:stretch}
.or-badge{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;
  width:46px;height:46px;border-radius:50%;background:#fff;border:1px solid var(--border);
  display:grid;place-items:center;font-size:12.5px;font-weight:700;color:#7D8791;
}
.buy-card{position:relative;background:#fff;border:1px solid var(--border);border-radius:16px;padding:36px;display:flex;flex-direction:column}
.buy-card.is-play{border:2px solid var(--brand)}
.buy-card.is-play.is-ready{animation:halo 2.4s ease-in-out infinite alternate}

/* The play box IS the machine, so it carries the reel geometry. The reels
   are smaller here than on a full-width card, and the digit size is derived
   from the cell so every breakpoint stays in proportion by itself. */
.buy-card.is-play.machine{
  --cell:84px; --reel-h:176px; --reel-w:124px;
  padding:28px 30px 30px;background:var(--surface);box-shadow:var(--shadow);
}
.play-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:18px}
.play-head .card-kicker{margin:0}
.play-cap{font-size:14px;color:var(--muted);white-space:nowrap}
.buy-card.is-play .well{height:calc(var(--reel-h) + 20px);padding:10px;gap:6px}
.buy-card.is-play .lever{width:52px;flex-basis:52px;height:calc(var(--reel-h) + 20px);padding-top:10px}
.buy-card.is-play .lever-knob{width:30px;height:30px}
.buy-card.is-play .lever-rail{width:13px}
.buy-card.is-play .dot{width:11px;height:11px;flex-basis:11px;margin:26px 6px 0}
.buy-card.is-play .pct{font-size:36px;margin:16px 0 0 9px}
.buy-card.is-play .lock-chip{margin-top:16px;font-size:14px}

/* On the dark stage the box grows and the reels grow with it. */
body.is-playing .buy-card.is-play.machine{
  --cell:112px; --reel-h:236px; --reel-w:188px;
  width:100%;padding:30px 34px 32px;
}
body.is-playing .buy-card.is-play .pct{font-size:50px}
body.is-playing .buy-card.is-play .dot{width:15px;height:15px;flex-basis:15px}
body.is-playing .buy-card.is-play .lever{width:66px;flex-basis:66px}
body.is-playing .buy-card.is-play .lever-knob{width:36px;height:36px}
.card-kicker{font-size:13px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
/* Dimitri, Figma, ~12 Sep: "standard discount larger font". The standard box's
   label only; "Play for it" keeps the approved 13px. 26px, Davinder's size.
   At 26px the two words run to 12.3 times the font size, which is wider than
   the box on a phone (under ~410px) and on a small tablet (~870-980px), where
   it would break onto two lines. There it shrinks with the box instead, to
   7.9% of the box's width, and stays on one. The box's width comes from the
   grid, never from its content, so measuring against it is safe. */
.buy-card[data-box="standard"]{container-type:inline-size}
.buy-card[data-box="standard"] .card-kicker{font-size:26px;font-size:min(26px,7.9cqi)}
/* Dimitri, Figma, ~12 Sep: "Increase size of play for it text and change to I
   feel lucky (up to 99% off)". Davinder: the same size as the standard label,
   so it uses the same rule. The container here is the head row, not the play
   box: the machine's reels decide how wide that box must be, and a size
   container would stop them doing so. The head row is exactly the box's inner
   width, which in the two-column row matches the standard box's, so the two
   labels come out the same size. The label is longer: where it cannot fit, it
   breaks before the bracket, and the status line drops underneath. */
.play-head{container-type:inline-size;flex-wrap:wrap;row-gap:6px}
.play-head .card-kicker{font-size:26px;font-size:min(26px,7.9cqi)}
.kicker-aside{white-space:nowrap}
.play-cap:empty{display:none}
/* Under 580px the play box has less side padding than the standard box (16px
   against 24px, and a 2px border against 1px), so its head row is 14px wider.
   Taking that off keeps the two labels the same size on a phone too. */
@media (max-width:580px){
  .play-head .card-kicker{font-size:min(26px,calc((100cqi - 14px) * .079))}
}
.price{font-family:var(--slab);font-size:44px;font-weight:700;color:var(--heading);line-height:1.1}
.prices{margin:12px 0 0;font-size:18px}
.old{color:var(--muted);text-decoration:line-through;margin-right:10px}
/* Dimitri, Figma, ~12 Sep: the saving in dollars beside the two prices. A
   flex row so that on a narrow box the pill drops to its own line whole,
   flush left, rather than splitting or starting indented. */
.prices{display:flex;flex-wrap:wrap;align-items:center;column-gap:10px;row-gap:8px}
.prices .old{margin-right:0}
.prices .save{
  padding:3px 11px;border-radius:999px;background:var(--green-wash);color:var(--green-ink);
  font-size:15px;font-weight:650;line-height:1.5;white-space:nowrap;
}
.ticks{list-style:none;padding:0;margin:22px 0 28px;font-size:16px}
.ticks li{margin:11px 0;padding-left:28px;position:relative}
.ticks li::before{
  content:"";position:absolute;left:4px;top:7px;width:7px;height:12px;
  border:solid var(--green);border-width:0 2.5px 2.5px 0;transform:rotate(45deg);
}
.buy-card .btn{margin-top:auto}
.buy-note{margin:18px 0 28px;font-size:17px}
.is-inert{opacity:.55;pointer-events:none}

/* ------------------------------------------------- the blurred discount
   The discount section rides along on every step of the wizard, sitting
   under a translucent blur until its own step arrives. Slide 2 of the
   client's sketches asks for exactly this: "semi-transparent overlay /
   small blur over this section to guide customer thru steps." */
.veiled{position:relative}
/* The guide card and the blur are one state. Both wrappers stay in the DOM all
   the way through the flow (see "the single-page flow" below), so the card has
   to be absent rather than merely transparent on the steps that are not veiled
   — it is absolutely positioned and would otherwise sit over the live boxes. */
.discount-section .veil-note{display:none}
.veiled .veiled-inner{
  filter:blur(3.5px);opacity:.5;pointer-events:none;user-select:none;
  transition:filter .3s ease,opacity .3s ease;
}
.veil-note{position:absolute;inset:0;display:grid;place-items:center;z-index:5;padding:20px}
/* Dimitri, Figma, ~12 Sep: "this is kind of small text." Up a size all round,
   badge 12→13px, title 22→28px, line 15→18px, and the card wider to carry it.
   A little smaller on a phone, where the card has less room. */
.veil-card{
  background:#fff;border:1px solid var(--border);border-radius:16px;
  padding:32px 40px;box-shadow:var(--shadow-lift);text-align:center;max-width:560px;
}
.veil-card .veil-step{
  display:inline-block;background:var(--brand-wash);color:var(--brand-dark);
  border:1px solid var(--brand-line);border-radius:999px;padding:6px 14px;
  font-size:13px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;margin-bottom:14px;
}
.veil-card h3{font-size:28px;margin-bottom:10px}
.veil-card p{font-size:18px;line-height:1.55;color:var(--body);text-wrap:pretty}
@media (max-width:580px){
  .veil-card{padding:24px 22px}
  .veil-card h3{font-size:24px}
  .veil-card p{font-size:16px}
}

/* ------------------------------------------------------------ step pages */
/* Both always sit on a .container, so they set only top and bottom: a shorthand
   here zeroed the container's side padding and put every page flush against the
   screen edge from 1041px up to about 1780px. */
.step-head{padding-top:52px;padding-bottom:8px}
.step-badge{
  display:inline-flex;align-items:center;gap:8px;background:var(--brand-wash);color:var(--brand-dark);
  border:1px solid var(--brand-line);border-radius:999px;padding:6px 14px;
  font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:16px;
}
.step-body{padding-top:34px;padding-bottom:90px}
.step-nav{display:flex;justify-content:space-between;gap:16px;margin-top:38px;flex-wrap:wrap}

/* The vehicle bar that rides along every step once a car is chosen. */
.vehicle-bar{
  display:flex;align-items:center;gap:22px;background:#fff;border:1px solid var(--border);
  border-radius:16px;padding:18px 24px;box-shadow:var(--shadow);flex-wrap:wrap;
}
.vehicle-bar img{width:150px;border-radius:10px;flex:0 0 150px}
/* The make's mark in the box a car photo used to take (Dimitri, ~12 Sep: "a
   vector of the brand selected"). A logo where Simple Icons has one, else the
   make's name set as type, so every make fills the box the same way. */
.vehicle-bar .vb-mark{
  width:150px;flex:0 0 150px;aspect-ratio:3/2;border-radius:10px;
  background:var(--well);border:1px solid var(--border-soft);
  display:grid;place-items:center;
}
/* Each SVG's viewBox is cropped to its artwork and carries its own size, so a
   wide mark (Audi, Jeep, Mini) and a round one (VW, BMW) read at the same
   weight: wide ones run to 92px across, tall ones to 56px high. */
.vehicle-bar .vb-mark img{width:auto;height:auto;max-width:92px;max-height:56px;flex:none;border-radius:0}
.vehicle-bar .vb-mark.is-type span{
  padding:0 12px;text-align:center;font-size:17px;font-weight:800;line-height:1.15;
  letter-spacing:-.01em;color:var(--heading);
}
.vehicle-bar .vb-main{flex:1;min-width:220px}
.vehicle-bar h3{margin-bottom:3px}
.vehicle-bar .vb-meta{font-size:14px;color:var(--muted)}
.vehicle-bar .vb-right{display:flex;align-items:center;gap:14px;flex-wrap:wrap}

/* Option rows - ECU / TCU / flasher */
.option{
  display:flex;align-items:center;gap:18px;background:#fff;border:1px solid var(--border);
  border-radius:14px;padding:20px 22px;cursor:pointer;transition:border-color .15s ease,background .15s ease;
}
.option:hover{border-color:var(--brand-line);background:var(--brand-wash)}
.option.is-picked{border-color:var(--brand);background:var(--brand-wash);box-shadow:0 0 0 1px var(--brand)}
.option input{width:20px;height:20px;accent-color:var(--brand);flex:0 0 20px;cursor:pointer}
.option .opt-main{flex:1;min-width:0}
.option .opt-name{display:block;font-weight:650;color:var(--heading);font-size:17px}
.option .opt-sub{display:block;font-size:14px;color:var(--muted);margin-top:3px}
.option .opt-price{font-family:var(--slab);font-weight:700;font-size:22px;color:var(--heading);white-space:nowrap}
.option img{width:96px;border-radius:8px;flex:0 0 96px}

.note{
  background:var(--amber-wash);border:1px solid var(--amber-line);color:var(--amber);
  border-radius:12px;padding:16px 20px;font-size:15px;
}
.note-blue{background:var(--brand-wash);border-color:var(--brand-line);color:var(--brand-dark)}

/* The credit link, inside the lock note (Q49): the short link with Copy, and a
   one-field form that emails it. Each button stays beside its field down to a
   360px phone. */
.credit-link{margin-top:14px;padding-top:14px;border-top:1px solid rgba(0,0,0,.08)}
.cl-head{font-weight:650;color:var(--heading);margin-bottom:10px}
.cl-head span{display:block;font-weight:400;font-size:14px;color:var(--body)}
.cl-wait{color:var(--body)}
.cl-row,.cl-mail{display:flex;flex-wrap:wrap;align-items:center;gap:10px;max-width:640px}
.cl-row{margin-bottom:10px}
/* Too long for the box, it is cut from the front ("…/c/TMK4PF"), never the
   code at the end. The text starts and ends with letters, so rtl only moves
   the ellipsis; it does not reorder the characters. */
.cl-url{
  flex:1 1 150px;min-width:0;height:44px;line-height:42px;padding:0 14px;
  background:#fff;border:1px solid var(--border);border-radius:9px;
  font-family:ui-monospace,Consolas,monospace;font-size:15px;color:var(--brand-dark);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;direction:rtl;text-align:left;
}
.cl-mail input{
  flex:1 1 150px;min-width:0;height:44px;padding:0 14px;
  /* 16px, not 15: under 16 an iPhone zooms the whole page in when it is tapped. */
  background:#fff;border:1px solid var(--border);border-radius:9px;font:inherit;font-size:16px;color:var(--heading);
}
.cl-mail input:focus{outline:2px solid var(--brand-line);border-color:var(--brand)}
.cl-btn{height:44px;padding:0 20px;font-size:15px;min-width:96px}
.cl-msg{margin-top:8px;font-size:14px;color:var(--green-ink)}
.cl-msg:empty{display:none}
.cl-msg.is-bad{color:#B42318}

/* A passing message, e.g. arriving from a credit link. */
.toast{
  position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:140;
  width:max-content;max-width:calc(100vw - 32px);padding:14px 20px;border-radius:12px;
  background:var(--heading);color:#fff;font-size:15px;box-shadow:var(--shadow-lift);
  transition:opacity .5s ease;
}
.toast.is-out{opacity:0}

/* ---------------------------------------------------------------- summary */
.summary{background:#fff;border:1px solid var(--border);border-radius:16px;padding:28px;position:sticky;top:130px}
.sum-row{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--border-soft);font-size:16px}
.sum-row:last-of-type{border-bottom:0}
.sum-row .sum-label{color:var(--body)}
/* Values may wrap: "2021 Alfa Romeo Giulia Quadrifoglio" on one line was wider
   than the Order card on a phone, and took the whole column off screen. */
.sum-row .sum-val{font-weight:600;color:var(--heading);text-align:right}
.sum-row.is-none .sum-val{color:var(--muted);font-weight:400;font-style:italic}
.sum-row.is-discount .sum-val{color:var(--green-ink)}
/* Step 6's last line (Q51): what the customer kept, set apart in green. */
.sum-row.is-saved{margin-top:8px;padding:12px 14px;border:0;border-radius:10px;background:var(--green-wash)}
.sum-row.is-saved .sum-label{color:var(--green-ink);font-weight:650}
.sum-row.is-saved .sum-val{color:var(--green-ink);font-size:18px;font-weight:800}
.sum-total{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-top:16px;padding-top:18px;border-top:2px solid var(--border)}
.sum-total .sum-val{font-family:var(--slab);font-size:34px;font-weight:700;color:var(--heading)}

.field{margin-bottom:16px}
.field label{display:block;font-size:14px;font-weight:600;color:var(--heading);margin-bottom:7px}
.field textarea{height:auto;padding:12px 14px;min-height:96px;resize:vertical}
.field .hint{font-size:13px;color:var(--muted);margin-top:6px}
.checkline{display:flex;align-items:flex-start;gap:12px;font-size:15px;margin:22px 0}
.checkline input{width:20px;height:20px;accent-color:var(--brand);flex:0 0 20px;margin-top:2px}

/* ---------------------------------------------------------------- order */
.progress-track{position:relative;height:12px;background:var(--well);border:1px solid var(--border);border-radius:999px;overflow:hidden}
.progress-fill{position:absolute;inset:0 auto 0 0;background:var(--green);border-radius:999px;transition:width .5s ease}
.progress-legend{display:flex;justify-content:space-between;font-size:13px;color:var(--muted);margin-top:10px}

.checklist{list-style:none;padding:0;margin:0}
.checklist li{display:flex;align-items:flex-start;gap:14px;padding:16px 0;border-bottom:1px solid var(--border-soft)}
.checklist li:last-child{border-bottom:0}
.checklist .mark{
  width:24px;height:24px;border-radius:50%;flex:0 0 24px;display:grid;place-items:center;
  border:2px solid var(--border);color:transparent;margin-top:1px;
}
.checklist li.is-done .mark{background:var(--green);border-color:var(--green);color:#fff}
.checklist li.is-now .mark{border-color:var(--brand);color:var(--brand)}
.checklist .mark svg{width:13px;height:13px}
.checklist .ck-main{flex:1;min-width:0}
.checklist .ck-name{display:block;font-weight:600;color:var(--heading)}
.checklist li.is-todo .ck-name{color:var(--muted);font-weight:500}
.checklist .ck-sub{display:block;font-size:14px;color:var(--muted);margin-top:3px}
.checklist .ck-time{font-size:13px;color:var(--muted);white-space:nowrap}

.tune-box{background:var(--well);border:1px solid var(--border);border-radius:12px;padding:18px 20px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.tune-box code{font-family:ui-monospace,Consolas,monospace;font-size:14px;color:var(--brand-dark);background:#fff;border:1px solid var(--border);border-radius:7px;padding:8px 12px;flex:1;min-width:min(220px,100%);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------------------------------------------------------------- content */
.step-card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:34px}
.step-card svg{width:30px;height:30px;color:var(--brand);margin-bottom:18px}
.step-num{font-size:13px;font-weight:700;color:var(--muted);letter-spacing:.07em}
/* Dimitri, Figma, ~12 Sep: "Step1 text should be larger … its very small. I
   suggest moving it to the same line as the glyph." The number now sits beside
   the icon at 18px, up from 13px, which is still smaller than the card's 22px
   title. Cards without a number (How it works, "kept honest") are unchanged. */
.step-top{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.step-top svg{margin-bottom:0;flex:0 0 auto}
.step-top .step-num{font-size:18px;line-height:1.2}
/* Dimitri, Figma, ~12 Sep: the FlashZilla shipping line under step 3 — a second
   short paragraph, set a little apart so it reads as its own fact. */
.step-card .step-note{margin-top:10px;font-size:15px}

/* Dimitri, Figma, ~12 Sep: "Already received your flasher and tune credits?"
   under the three steps. A strip the width of the row, and all of it is the
   link, so a phone gets a target the size of a card rather than two words. */
.next-steps{
  display:flex;align-items:center;gap:18px;margin-top:28px;padding:22px 28px;
  background:#fff;border:1px solid var(--border);border-radius:16px;color:var(--body);
  transition:border-color .16s ease,box-shadow .16s ease;
}
.next-steps:hover{text-decoration:none;border-color:var(--brand-line);box-shadow:var(--shadow-lift)}
.next-steps-icon{flex:0 0 48px;height:48px;border-radius:12px;background:var(--brand-wash);color:var(--brand);display:grid;place-items:center}
.next-steps-icon svg{width:24px;height:24px}
.next-steps-text{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.next-steps-text strong{color:var(--heading);font-size:18px}
.next-steps-link{font-weight:600;color:var(--brand)}
.next-steps:hover .next-steps-link{text-decoration:underline}
.next-steps-arrow{flex:0 0 22px;width:22px;height:22px;color:var(--brand);transition:transform .16s ease}
.next-steps:hover .next-steps-arrow{transform:translateX(3px)}
@media (max-width:580px){
  .next-steps{padding:18px;gap:14px}
  .next-steps-icon{flex-basis:40px;height:40px}
  .next-steps-text strong{font-size:16px}
}
/* The strip lands here: below the masthead, not under it. */
#how-it-is-used{scroll-margin-top:104px}
.vehicle{background:#fff;border:1px solid var(--border);border-radius:14px;overflow:hidden}
.vehicle img{aspect-ratio:3/2;object-fit:cover;width:100%}
.vehicle .v-body{padding:18px 20px}
.vehicle strong{display:block;color:var(--heading);font-size:17px}
.vehicle span{display:block;color:var(--muted);font-size:14px;margin:5px 0 12px}
/* 24px tall at least, so it is a fair target for a thumb. */
.vehicle .v-body a{display:inline-block;padding:2px 0}

.faq{background:#fff;border:1px solid var(--border);border-radius:16px;overflow:hidden}
details{border-bottom:1px solid var(--border);padding:0 28px}
details:last-child{border-bottom:0}
summary{list-style:none;cursor:pointer;padding:24px 40px 24px 0;color:var(--heading);font-weight:650;font-size:18px;position:relative}
summary::-webkit-details-marker{display:none}
summary::after{
  content:"";position:absolute;right:6px;top:31px;width:10px;height:10px;
  border-right:2px solid #7D8791;border-bottom:2px solid #7D8791;
  transform:rotate(45deg);transition:transform .18s ease;
}
details[open] summary::after{transform:rotate(-135deg);top:36px}
details p{margin:0 0 24px;font-size:17px;max-width:72ch}

/* ---------------------------------------------------------------- footer */
footer{background:#fff;border-top:1px solid var(--border);padding:56px 0 30px;margin-top:auto}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px}
footer h4{font-size:15px;margin-bottom:14px}
footer a{display:block;color:#69727C;font-size:15px;margin:9px 0}
footer a:hover{color:var(--brand)}
.footer-brand p{font-size:15px;color:var(--muted);max-width:34ch;margin-top:12px}
.dealer-mark{margin-top:22px;display:flex;align-items:center;gap:16px}
.dealer-mark img{height:88px;width:auto}
.dealer-mark span{font-size:14px;color:var(--muted);max-width:24ch}
/* Dimitri, Figma, ~12 Sep: contact details under the Support links. Set off
   from the links above by a hairline so they read as details, not pages. */
.footer-contact{list-style:none;padding:16px 0 0;margin:16px 0 0;border-top:1px solid var(--border-soft);display:grid;gap:10px}
.footer-contact li{display:flex;align-items:flex-start;gap:9px;font-size:15px;line-height:1.45;color:#69727C}
.footer-contact svg{width:16px;height:16px;flex:0 0 16px;margin-top:2px;color:var(--brand)}
footer .footer-contact a{display:inline-block;min-height:24px;margin:0;overflow-wrap:anywhere}
.copy{margin-top:40px;padding-top:24px;border-top:1px solid var(--border);font-size:14px;color:var(--muted);display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.copy img{height:20px;width:auto;opacity:.75}
.copy-links{display:flex;align-items:center;gap:20px}
.copy-links button{
  border:1px solid var(--border);background:#fff;color:var(--body);
  border-radius:8px;padding:7px 14px;font-size:13px;font-weight:600;
}
.copy-links button:hover{background:var(--well);color:var(--brand);border-color:var(--brand-line)}

/* ---------------------------------------------------------------- play mode */
/* Machine, tally, result. If a short window cannot fit all three, the stage
   scrolls rather than cutting the top off. */
.stage{
  position:fixed;inset:0;z-index:100;background:var(--play);
  display:flex;flex-direction:column;align-items:center;justify-content:safe center;gap:26px;
  padding:24px;overflow-y:auto;opacity:0;visibility:hidden;transition:opacity .32s ease,visibility .32s;
}
body.is-playing{overflow:hidden}
body.is-playing .stage{opacity:1;visibility:visible}
body.is-playing .site-header,
body.is-playing main,
body.is-playing footer{opacity:0;pointer-events:none;transition:opacity .28s ease}
.stage-slot{width:min(1120px,90vw);transform:scale(1.04);transform-origin:center}
.stage .machine{cursor:default}
.stage .machine:hover{transform:none;box-shadow:var(--shadow)}

/* The play box carries three classes now, so every play-mode override has
   to match that or the light card wins on specificity and the machine
   stays white on the dark stage. */
body.is-playing .buy-card.is-play.machine{
  animation:none;background:var(--play-surface);border-color:var(--play-border);box-shadow:none;
}
body.is-playing .play-head{border-bottom:1px solid var(--play-border);padding-bottom:14px}
body.is-playing .play-head .card-kicker,
body.is-playing .play-cap,
/* You are already playing - the button that got you here is noise. */
body.is-playing .buy-card.is-play [data-act="play"]{display:none}
body.is-playing .well{background:var(--play-well);border-color:var(--play-border)}
body.is-playing .reel{background:var(--play-surface);border-color:var(--play-border)}
body.is-playing .reel::before,body.is-playing .reel::after{background:var(--play-border)}
body.is-playing .digit{color:var(--play-text)}
body.is-playing .dot{background:var(--play-text)}
body.is-playing .pct{color:var(--play-muted)}
body.is-playing .lock-chip{display:none}
body.is-playing .lever{background:var(--play-well);border-color:var(--play-border)}
body.is-playing .lever-rail{background:var(--play-border)}
body.is-playing .lever-knob{border-color:var(--play-surface)}

.stage-result{text-align:center;color:var(--play-text);min-height:120px}
.outcome{font-size:25px;margin-bottom:8px}
.outcome-sub{font-size:17px;color:var(--play-muted);margin-bottom:24px}

/* --------------------------------------------------------- the win moment
   Play mode is the one place the client asked for casino energy, so a win
   is loud here and nowhere else. A roll that loses stays calm and blue -
   nobody should be congratulated for not winning. */
.stage.is-win .buy-card.is-play.machine{
  border-color:var(--green);
  box-shadow:0 0 0 3px rgba(43,224,126,.34), 0 0 80px 22px rgba(43,224,126,.26);
  animation:winThrob 1.1s ease-in-out infinite alternate;
}
@keyframes winThrob{
  from{box-shadow:0 0 0 3px rgba(43,224,126,.30), 0 0 60px 16px rgba(43,224,126,.20)}
  to  {box-shadow:0 0 0 3px rgba(43,224,126,.42), 0 0 100px 30px rgba(43,224,126,.34)}
}
.stage.is-win .digit.is-live{color:#69F0B2}
.stage.is-win .dot{background:#69F0B2}

@keyframes riseIn{
  from{opacity:0;transform:translateY(18px) scale(.96)}
  to  {opacity:1;transform:none}
}
.result-in{animation:riseIn .42s cubic-bezier(.2,.9,.25,1) both}

/* The one-roll result (kicker, big figure, before/after price) was replaced by
   the final result screen (Q48); only the calm kicker is still used there. */
.hold-kicker{
  display:inline-flex;align-items:center;gap:10px;
  background:rgba(39,68,246,.16);border:1px solid rgba(39,68,246,.45);color:#8EA6FF;
  border-radius:999px;padding:8px 18px;font-size:14px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;margin-bottom:16px;
}

/* Confetti: forty small squares, no library, cleaned up when it lands. */
.confetti{position:fixed;inset:0;pointer-events:none;z-index:110;overflow:hidden}
.confetti i{
  position:absolute;top:-24px;width:9px;height:14px;border-radius:2px;opacity:0;
  animation:fall var(--d) cubic-bezier(.25,.6,.4,1) var(--delay) forwards;
}
@keyframes fall{
  0%  {opacity:0;transform:translateY(-20px) rotate(0deg)}
  8%  {opacity:1}
  85% {opacity:1}
  100%{opacity:0;transform:translateY(102vh) rotate(var(--spin))}
}
.stage-close{position:fixed;right:26px;top:20px;width:44px;height:44px;border:0;border-radius:10px;background:transparent;color:var(--play-text);font-size:26px;line-height:1}
.stage-close:hover{background:var(--play-surface)}

/* ------------------------------------------------------------ three spins
   Dimitri, Figma, step 4: "3 Spins. Tabulate each result after each spin,
   and then pick the highest one at the end. the final credit amount should be
   animated, (turn into a golden thing and then float to the total, adding a
   discount)". Gold marks the end of the set and nothing else: the spin that
   counts, its credit, and the button that sends it to the total. The coin is
   the one gradient on the site - "golden" asked for more than a flat fill. */
.stage:not(.is-gold) .machine.is-live{cursor:pointer}

/* The tally: a column per spin, a header cell over a figure cell. */
.tally{border-collapse:separate;border-spacing:10px 0;table-layout:fixed;width:min(600px,100%)}
.tally th,.tally td{
  background:var(--play-surface);border:1px solid var(--play-border);text-align:center;
  transition:opacity .45s ease,background-color .45s ease,border-color .45s ease,color .45s ease;
}
.tally th{
  position:relative;border-bottom:0;border-radius:12px 12px 0 0;padding:11px 6px 0;
  font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--play-muted);
}
.tally td{
  border-top:0;border-radius:0 0 12px 12px;padding:0 6px 12px;
  font-family:var(--slab);font-size:30px;font-weight:700;line-height:1.3;color:var(--play-text);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.tally td span{display:inline-block}
.tally td.is-empty{color:var(--play-border)}
.tally td.is-new span{animation:tallyIn .55s cubic-bezier(.2,.9,.25,1.3) both}
@keyframes tallyIn{from{opacity:0;transform:translateY(10px) scale(.8)}to{opacity:1;transform:none}}
.tally th.is-lead,.tally td.is-lead{border-color:rgba(105,240,178,.5)}
.tally td.is-lead{color:#69F0B2}
.tally th.is-best,.tally td.is-best{background:rgba(245,184,46,.14);border-color:var(--gold)}
.tally th.is-best,.tally td.is-best{color:var(--gold-text)}
.tally th.is-best::before{
  content:"Best";position:absolute;left:50%;top:-11px;transform:translateX(-50%);
  padding:2px 9px;border-radius:999px;background:var(--gold);color:var(--gold-ink);
  font-size:11px;letter-spacing:.1em;
}
.tally .is-out{opacity:.42}

/* Between spins: the one that just landed, and how many are left. */
.spin-line{font-size:22px;color:var(--play-text);margin-bottom:4px}
.spin-line strong{font-family:var(--slab);font-size:28px}
.spin-tag{
  display:inline-block;vertical-align:.25em;margin-left:8px;padding:3px 10px;border-radius:999px;
  background:rgba(105,240,178,.14);border:1px solid rgba(105,240,178,.42);color:#69F0B2;
  font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
}
.spin-sub{font-size:16px;color:var(--play-muted);margin-bottom:20px}

/* The end of the set, beat one: the highest is picked on the machine. */
.gold-kicker{
  display:inline-flex;align-items:center;gap:10px;
  background:rgba(245,184,46,.14);border:1px solid rgba(245,184,46,.5);color:var(--gold-text);
  border-radius:999px;padding:8px 18px;font-size:14px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;margin-bottom:14px;
}
.stage.is-gold .buy-card.is-play.machine{
  border-color:var(--gold);animation:none;
  box-shadow:0 0 0 3px rgba(245,184,46,.3), 0 0 80px 20px rgba(245,184,46,.2);
}
.stage.is-gold .digit.is-live{color:var(--gold-text)}
.stage.is-gold .dot{background:var(--gold-text)}
.stage.is-gold .machine .lever{pointer-events:none}
.stage.is-gold .machine .lever-knob{background:var(--gold);transform:none;animation:none}

/* Beat two, the final result screen (Q48). Dimitri: "Final result: Best of
   3: XX.XX% (you did better than average, or worse than average) Roll1:
   Roll2: Roll3:". The machine and the running tally make way for one card
   that says exactly that, then the credit. */
.stage.is-final .stage-slot,
.stage.is-final .tally{display:none}
.final-card{
  width:min(520px,100%);margin:0 auto;padding:30px 36px 32px;
  background:var(--play-surface);border:1px solid var(--play-border);border-radius:22px;
}
.final-card.is-win{border-color:var(--gold);box-shadow:0 0 0 3px rgba(245,184,46,.22), 0 0 70px 16px rgba(245,184,46,.15)}
.final-best{font-size:24px;line-height:1.15;color:var(--play-text);margin-bottom:10px}
.final-best strong{font-family:var(--slab);font-size:60px;font-weight:700;letter-spacing:-.02em;margin-left:4px;vertical-align:-.1em}
.final-card.is-win .final-best strong{color:var(--gold-text)}
.final-vs{display:inline-block;padding:5px 14px;border-radius:999px;font-size:15px;font-weight:650;margin-bottom:6px}
.final-vs.is-up{background:rgba(105,240,178,.12);border:1px solid rgba(105,240,178,.42);color:#69F0B2}
.final-vs.is-down{background:rgba(147,160,175,.12);border:1px solid rgba(147,160,175,.38);color:var(--play-text)}
.final-avg{font-size:14px;color:var(--play-muted);margin-bottom:16px}
.final-rolls{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.final-rolls th,.final-rolls td{padding:8px 14px;border-top:1px solid var(--play-border)}
.final-rolls tr:last-child th,.final-rolls tr:last-child td{border-bottom:1px solid var(--play-border)}
.final-rolls th{text-align:left;font-size:15px;font-weight:600;color:var(--play-muted)}
.final-rolls td{text-align:right;font-family:var(--slab);font-size:22px;font-weight:700;color:var(--play-text);white-space:nowrap}
.final-rolls tr.is-best th,.final-rolls tr.is-best td{background:rgba(245,184,46,.12);color:var(--gold-text)}
.final-tag{
  display:inline-block;vertical-align:.2em;margin-left:8px;padding:2px 9px;border-radius:999px;
  background:var(--gold);color:var(--gold-ink);font-family:var(--sans);font-size:12px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
}
.final-note{font-size:15px;color:var(--play-muted);margin-top:12px}

/* The credit: it lands as a plain figure, then turns into gold. */
.credit{margin:20px 0 20px}
.coin{
  position:relative;isolation:isolate;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;
  padding:9px 24px;border-radius:999px;
  font-family:var(--slab);font-size:26px;font-weight:700;line-height:1.2;color:var(--gold-ink);
  box-shadow:0 0 0 2px rgba(255,233,160,.45), 0 8px 30px rgba(245,184,46,.42);
}
.coin::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:linear-gradient(135deg,var(--gold-light) 0%,var(--gold) 48%,var(--gold-deep) 100%);
}
.coin::after{
  content:"";position:absolute;top:0;bottom:0;left:-70%;width:45%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.75),transparent);transform:skewX(-20deg);
}
.credit .coin{animation:coinPop .8s .45s cubic-bezier(.2,.9,.25,1.25) both}
.credit .coin::before{animation:coinGold .8s .45s ease both}
.coin::after{animation:glint 1.1s 1.15s ease-in-out both}
@keyframes coinPop{
  0%  {color:var(--play-text);box-shadow:none;transform:scale(1)}
  55% {transform:scale(1.16)}
  100%{color:var(--gold-ink);transform:scale(1)}
}
@keyframes coinGold{from{opacity:0}to{opacity:1}}
@keyframes glint{from{left:-70%}to{left:125%}}
/* In flight: fixed to the window, placed by app.js. */
.coin.is-flying{position:fixed;left:0;top:0;z-index:130;pointer-events:none;will-change:transform}
.coin.is-flying::after{animation:glint .9s .1s ease-in-out both}

.btn-gold{background:var(--gold);color:var(--gold-ink)}
.btn-gold:hover{background:#FFC844}

@media (max-height:860px){
  body.is-playing .buy-card.is-play.machine{--cell:88px;--reel-h:184px;--reel-w:150px}
  .stage{gap:18px}
  .stage-slot{transform:none}
  .final-card{padding:24px 32px 26px}
  .final-best strong{font-size:52px}
  .credit{margin:16px 0}
}
@media (max-width:580px){
  .stage{gap:16px;padding:60px 16px 24px}
  .stage-slot{width:100%}
  body.is-playing .buy-card.is-play.machine{--cell:62px;--reel-h:132px;--reel-w:64px;padding:18px 14px 20px}
  body.is-playing .buy-card.is-play .pct{font-size:24px;margin-left:6px}
  body.is-playing .buy-card.is-play .dot{width:9px;height:9px;flex-basis:9px;margin:18px 4px 0}
  body.is-playing .buy-card.is-play .lever{width:34px;flex-basis:34px}
  body.is-playing .buy-card.is-play .lever-knob{width:24px;height:24px}
  .tally{border-spacing:6px 0}
  .tally th{font-size:12px;letter-spacing:.06em}
  .tally td{font-size:21px}
  .spin-line{font-size:18px}
  .spin-line strong{font-size:22px}
  .spin-sub{font-size:15px}
  .final-card{padding:22px 18px 24px}
  .final-best{font-size:20px}
  .final-best strong{font-size:44px}
  .final-rolls th,.final-rolls td{padding:7px 10px}
  .final-rolls td{font-size:20px}
  .coin{font-size:22px}
}
/* The smallest phones: four 64px reels, the dot, the % and the lever came to
   322px, and a 320px screen leaves 288 once the stage has its margins. */
@media (max-width:360px){
  body.is-playing .buy-card.is-play.machine{--cell:52px;--reel-h:112px;--reel-w:52px;padding:16px 12px 18px}
  body.is-playing .buy-card.is-play .pct{font-size:20px;margin-left:4px}
}

/* ---------------------------------------------------------------- modal */
.modal{position:fixed;inset:0;z-index:120;background:rgba(16,24,40,.55);display:none;align-items:center;justify-content:center;padding:24px}
.modal.is-open{display:flex}
.modal-card{background:#fff;border-radius:18px;width:min(520px,100%);min-width:0;max-height:92vh;overflow:auto;padding:32px}
.modal-card h3{margin-bottom:6px}
.modal-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:20px}
.modal-close{border:0;background:transparent;font-size:26px;line-height:1;color:var(--muted);width:36px;height:36px;border-radius:8px}
.modal-close:hover{background:var(--well)}
.pay-total{display:flex;justify-content:space-between;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--border-soft);margin-bottom:20px}
.pay-total strong{font-family:var(--slab);font-size:30px;color:var(--heading)}
.promo{display:flex;justify-content:space-between;font-size:15px;color:var(--green-ink);padding-bottom:14px}
.card-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
/* Or the two fields keep their natural input width and push the popup past a 320px screen. */
.card-row > *{min-width:0}
/* Helcim's window, as the demo draws it (Q50): who the receipt goes to, and
   the processor named in the footer beside a lock. */
.pay-receipt{font-size:14px;color:var(--muted);margin:-4px 0 18px}
.pay-receipt:empty{display:none}
.pay-paypal-note{font-size:15px;color:var(--body);background:var(--well);border:1px solid var(--border-soft);border-radius:10px;padding:14px 16px;margin-bottom:18px}
.pay-foot{font-size:13px;color:var(--muted);text-align:center;margin-top:18px}
.pay-by{display:inline-flex;align-items:center;gap:5px;font-weight:600;color:var(--body)}
.pay-by svg{width:14px;height:14px;flex:0 0 14px}

/* ------------------------------------------------- the single-page flow
   The approved demo was six HTML files; WordPress serves the same six steps
   from one URL, which is what section 0 of the screen-flow spec asks for. That
   turns each former page into a panel and each page's discount block into a
   slot the one real section is moved into. Everything below is the glue for
   that difference — the panels reuse .step-head / .step-body unchanged, so the
   steps look exactly as they were signed off. */
.step-panel[hidden]{display:none}

/* Where the discount section sits on each step. On step 1 it is inside the
   centred hero above the selector (slide 1), so it has to opt back out of the
   centring; everywhere else it follows the step body. */
.discount-slot{text-align:left}
/* Below the selector now (Dimitri, 11 Sep), so the space is above it. */
[data-slot="car"]{margin:46px 0 0}
[data-slot="units"],[data-slot="flasher"]{margin-top:56px}
.vehicle-bar-slot:not(:empty){margin-bottom:34px}
.step-body > .note{margin-top:30px}
/* The tunes, itemised on the right of the vehicle bar (Dimitri, ~12 Sep: "this
   should be larger, and show both ECU, and TCU tune total"). One row per line,
   label left and amount right in tabular figures, all rows as wide as the
   widest so the amounts line up; the total is set off by a single rule and set
   larger (22px, where the old one-line total was 17px). On a phone it runs the
   full width of the bar, like a receipt. */
.vb-tunes{display:grid;row-gap:3px;min-width:220px}
.vb-line{display:flex;justify-content:space-between;align-items:baseline;gap:22px}
.vb-line span{font-size:15px;color:var(--muted)}
.vb-line strong{font-size:16px;font-weight:650;color:var(--heading);font-variant-numeric:tabular-nums}
.vb-line.is-total{margin-top:6px;padding-top:7px;border-top:1px solid var(--border-soft)}
.vb-line.is-total span{font-weight:650;color:var(--heading)}
.vb-line.is-total strong{font-size:22px;font-weight:800}
/* The locked discount, on its own line before the total (Q47). It opens up
   when the gold chip from the stage lands, and both figures catch the gold
   for a moment before settling to their own colours. */
.vb-line.is-discount{max-height:34px;overflow:hidden;transition:max-height .45s ease,opacity .45s ease}
.vb-line.is-discount strong{color:var(--green-ink)}
.vb-line.is-pending{max-height:0;opacity:0}
.vb-line.is-landing strong,
.vb-line.is-total strong.is-landing{animation:goldLand 1.8s ease-out}
@keyframes goldLand{
  0%,25%{color:var(--gold-deep);text-shadow:0 0 16px rgba(245,184,46,.85)}
  100%{text-shadow:0 0 0 rgba(245,184,46,0)}
}
@media (max-width:580px){
  .vehicle-bar .vb-right{flex:1 1 100%}
  .vb-tunes{flex:1 1 100%}
}
.muted-inline{color:var(--muted)}

/* ------------------------------------------------------------- nav menus
   The masthead and footer fall back to hard-coded links when no menu is
   assigned; with a real menu WordPress wraps the same links in a list. These
   rules make the two render identically, so assigning a menu in wp-admin
   cannot change the design. */
.navlinks,.footer-links{list-style:none;padding:0;margin:0}
.navlinks li,.footer-links li{margin:0}
.navlinks .current-menu-item > a{color:var(--brand)}
footer .footer-links a{margin:9px 0}

/* ---------------------------------------------------------- the step nav
   Dimitri, 11 Sep: "Side Nav, where the currently selected text is larger, and
   as the user goes to next step it shrinks".

   Two layouts from one piece of markup. On a wide screen the six steps are a
   column down the left of the page, the current one set large. Below 1280px
   there is no left column to spare, so they fold back into the horizontal strip
   the approved build had, pinned under the masthead.

   The steps are buttons, not links as in the static build — they move the panel
   rather than change the URL. `.step` above sets no background or border because
   a link has neither, so a button has to be told to give up the ones the browser
   hands it, or every step renders as a grey pill. */
.step{background:transparent;border:0;padding:4px 11px}
.step-mark{display:inline-flex;align-items:center;gap:5px}

/* The tick only appears once the step is behind the customer. */
.step .tick{display:none}
.step.is-done .tick{display:inline-block}

/* Narrow: the strip is its own bar now, not part of the masthead, so it brings
   its own ground and pins itself where the masthead ends. */
.st-flow > .stepstrip{
  position:sticky;top:84px;z-index:30;background:#fff;
  border-top:0;border-bottom:1px solid var(--border);
}

@media (min-width:1280px){
  .st-flow{
    --sidenav-w:216px;
    display:grid;grid-template-columns:var(--sidenav-w) minmax(0,1fr);align-items:start;
  }
  .st-flow > .stepstrip{grid-column:1;grid-row:1}
  .st-flow > :not(.stepstrip){grid-column:2}
  /* The side nav is the left gutter here, so the panels keep only the right one. */
  .st-flow .step-head,.st-flow .step-body{padding-left:0}

  .st-flow > .stepstrip{
    top:112px;height:auto;z-index:1;
    flex-direction:column;align-items:flex-start;justify-content:flex-start;
    gap:2px;padding:56px 0 56px 34px;
    background:transparent;border:0;overflow:visible;
  }

  .stepstrip .step{
    position:relative;min-height:48px;padding:0 14px 0 0;gap:14px;
    border-radius:12px;font-size:14px;font-weight:600;
  }
  .stepstrip .step:hover{background:transparent}

  /* The dot. Numbered while ahead, ticked once done, filled while current. */
  .stepstrip .step-mark{
    width:30px;height:30px;flex:0 0 30px;justify-content:center;gap:0;
    border-radius:50%;background:#fff;border:2px solid var(--border);
    font-size:12px;font-weight:700;color:#B4BBC4;
    transition:background .3s ease,border-color .3s ease,color .3s ease,box-shadow .3s ease;
  }
  .stepstrip .step.is-done .step-n{display:none}
  .stepstrip .step.is-done .step-mark{background:var(--green);border-color:var(--green);color:#fff}
  .stepstrip .step.is-done .tick{width:14px;height:14px}
  .stepstrip .step.is-active .step-mark{
    background:var(--brand);border-color:var(--brand);color:#fff;
    box-shadow:0 0 0 5px var(--brand-wash);
  }

  /* The size change is the whole point of the comment, so it is animated: the
     step being left shrinks while the next one grows, in the same frame. The
     line-height is pinned below the dot's height so the rows never change size
     and the connecting lines stay put. */
  .stepstrip .step-label{
    font-size:14px;line-height:1.15;
    transition:font-size .38s cubic-bezier(.2,.8,.2,1),color .3s ease;
  }
  .stepstrip .step.is-active{background:transparent;color:var(--heading)}
  .stepstrip .step.is-active .step-label{font-size:23px;font-weight:800;letter-spacing:-.01em}
  .stepstrip .step.is-done{color:var(--green-ink)}
  .stepstrip .step.is-done:hover .step-label{text-decoration:underline}
  .stepstrip .step.is-locked{color:#B4BBC4}

  /* The line from each dot to the next; green once that step is behind you. */
  .stepstrip .step:not(:last-child)::after{
    content:"";position:absolute;left:14px;top:calc(50% + 15px);
    width:2px;height:20px;border-radius:2px;background:var(--border);
    transition:background .3s ease;
  }
  .stepstrip .step.is-done:not(:last-child)::after{background:var(--green)}

  /* The masthead no longer carries the strip, so the hero only has the nav
     bar above it rather than nav bar plus strip. */
  .st-flow .hero{min-height:calc(100vh - 84px)}
}

/* ------------------------------------------------------------ hero copy
   Dimitri, Figma, 12 Sep: his title and sub-text, no eyebrow, and the word
   TuneZilla in the title drawn as the logo.

   The logo is sized off the heading rather than in pixels, so it follows h1
   through every breakpoint. Its lettering is 81 of the drawing's 133.4 units
   tall, so 1.196em makes the letters .727em — Inter's cap height — and they
   stand as tall as the heading's capitals. -.11em puts the drawing's baseline
   on the text's. The rhombus rises above the capitals, as it does in the logo;
   the negative top margin stops it pushing the lines apart. */
.hero h1{text-wrap:balance}
.tz-wordmark{display:inline-block;width:7.077em;height:1.196em;vertical-align:-.11em;margin-top:-.2em}
/* The logo and its neighbours break as one ("Love TuneZilla Tunes / but hate
   MSRP?"). Under 481px the group is wider than the screen, so it may wrap. */
@media (min-width:481px){.tz-phrase{white-space:nowrap}}
.hero-sub{text-wrap:pretty}
.hero-sub a{font-weight:600;white-space:nowrap}

/* Dimitri, Figma, ~12 Sep: the compatibility disclaimer under the vehicle
   count. Small print, but in body colour: the muted grey of the count line
   above is 2.8:1 on this ground, too faint for words a customer is meant to
   read; this is 6.8:1. */
.hero-disclaimer{max-width:720px;margin:10px auto 0;font-size:13.5px;line-height:1.55;color:var(--body);text-wrap:pretty}
.hero-disclaimer a{font-weight:600;white-space:nowrap}

/* "Learn more" jumps here. Land the heading below whatever is pinned to the
   top: the masthead, plus the step bar under 1280px. */
#how{scroll-margin-top:84px}
@media (max-width:1279px){#how{scroll-margin-top:122px}}
@media (max-width:580px){#how{scroll-margin-top:108px}}

/* Home page sections below the hero. */
.card-img{border-radius:10px;margin-bottom:18px}
.section .card h3{margin-bottom:8px}

/* Step 2 — ECU / TCU */
.unit-grid{align-items:start}
.checkout-grid{grid-template-columns:1.25fr 1fr;align-items:start}
.progress-grid{grid-template-columns:1.3fr 1fr;align-items:start}
.unit-head{font-size:26px;margin-bottom:6px}
.unit-sub{color:var(--muted);margin-bottom:20px}

/* Step 3 — the flasher. The demo styled these two inline; they are a component
   here because the picked state has to survive a re-render. */
.flasher-grid{align-items:stretch}
.flasher-card{cursor:pointer;display:flex;flex-direction:column;gap:18px;transition:border-color .18s ease,background .18s ease}
.flasher-card img{border-radius:12px}
.flasher-card:hover{border-color:var(--brand-line)}
.flasher-card.is-picked{border-color:var(--brand);background:var(--brand-wash)}
.flasher-body{display:flex;align-items:flex-start;gap:14px}
.flasher-body input{width:20px;height:20px;accent-color:var(--brand);flex:0 0 20px;margin-top:4px;cursor:pointer}
.flasher-body p{margin-top:6px}
.flasher-price{font-size:32px;margin-top:14px}

/* Step 5 — checkout */
.summary-vehicle{font-size:15px;color:var(--muted);margin:-4px 0 18px}
.pay-stack{margin-top:6px}

/* Step 6 — order progress */
.progress-card{margin-bottom:26px}
.progress-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap;margin-bottom:22px}
.progress-head h3{margin-top:6px}
.progress-to{text-align:right}
.progress-to p:last-child{margin-top:6px;color:var(--heading);font-weight:600}
.progress-truck{margin-top:14px;position:relative;height:26px}
.progress-truck svg{width:26px;height:26px;position:absolute;left:0;transition:left .5s ease}
.tune-box .carrier{font-weight:600;color:var(--heading)}
.link-label{font-size:15px;font-weight:600;color:var(--heading);margin-bottom:8px}

/* ------------------------------------------------------- the content pages
   How it works, FAQ, FlashZilla, contact, track order and anything the client
   writes in the editor. The demo carried this spacing as inline styles on each
   page; named here instead, because six templates repeating the same numbers is
   how they drift apart. */
.prose-col > * + *{margin-top:16px}
.prose-col > h2 + p{margin-top:16px}
.prose-col .note,.prose-col .btn,.prose-col .ticks{margin-top:24px}
.card-head{margin-bottom:16px}
.card p + .btn,.card p + .stack{margin-top:20px}
.card-media{padding:0;overflow:hidden}
.card-centre{text-align:center}
.card-centre h3{margin-bottom:10px}
.card-centre p{margin-bottom:22px}
.sum-gap{height:22px}
.ticks-flush{margin-bottom:0}
.legal-note{margin-bottom:40px}
.legal-body{max-width:80ch}
.prose > * + *{margin-top:18px}
.prose h2{font-size:24px;margin-top:34px}
.prose h3{margin-top:28px}
.prose ul,.prose ol{padding-left:22px}
.prose li{margin:8px 0}

.hiw-hero{padding-bottom:34px}
.hiw-hero img{border-radius:18px;width:100%}
.hiw-body{padding-top:20px}
.hiw-steps,.hiw-rule,.hiw-honest,.fz-lead,.fz-use{margin-bottom:70px}
.hiw-rule,.fz-lead{align-items:start}
.hiw-flasher,.fz-use{align-items:center}
.hiw-honest > .lead{margin-bottom:30px}
.hiw-honest > .grid-3 + .note{margin-top:26px}

.faq-head{font-size:26px;margin-bottom:20px}
.faq{margin-bottom:46px}

.fz-price{margin:12px 0 18px}
.fz-cta{gap:12px;margin-top:8px}

.track-grid,.contact-grid{align-items:start}
.contact-grid{grid-template-columns:1.2fr 1fr}
.track-miss,.contact-sent{margin-top:20px}
.contact-cta{margin-top:20px}
.contact-mark{height:26px;width:auto;margin-top:18px}
#t-cur-num{margin:8px 0 12px}

/* ------------------------------------------------------------- WooCommerce
   functions.php drops Woo's own stylesheet, because its presentation is
   replaced wholesale on the pages we design. The account pages are the ones we
   do not design — Woo owns that markup — so its form furniture is mapped onto
   this design's fields and buttons rather than left bare. */
/* WordPress and WooCommerce mark visually-hidden text with this class and rely
   on their own stylesheets to hide it. Those sheets are dequeued above, so the
   rule has to live here — without it every required field reads "* Required"
   out loud on screen. Same declarations as .sr-only. */
.screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.screen-reader-text:focus{position:static;width:auto;height:auto;margin:0;clip:auto}

.woocommerce a{color:var(--brand-dark)}
/* Woo's password-reveal toggle is drawn entirely by its own sprite; with that
   sheet gone it is an empty grey box, and the field works without it. */
.woocommerce .show-password-input{display:none}

.woocommerce form .form-row{display:block;margin:0 0 16px}
.woocommerce form .form-row label{display:block;font-size:14px;font-weight:600;color:var(--heading);margin-bottom:7px}
.woocommerce form .form-row .required{color:var(--muted);text-decoration:none;border:0}
.woocommerce .input-text,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea{
  width:100%;height:52px;padding:0 16px;font:inherit;font-size:16px;
  color:var(--heading);background:#fff;border:1px solid var(--border);border-radius:12px;
}
.woocommerce form .form-row textarea{height:auto;padding:12px 16px;min-height:96px}
.woocommerce .input-text:focus,.woocommerce form .form-row select:focus{outline:2px solid var(--brand-line);outline-offset:1px}
.woocommerce .password-input{display:block;position:relative}
.woocommerce .show-password-input{position:absolute;right:14px;top:17px;cursor:pointer;color:var(--muted)}

/* A single sign-in form has no business being 1,500px wide just because the
   page container is. */
.woocommerce form.login,.woocommerce form.register,.woocommerce form.lost_reset_password{max-width:520px}
.woocommerce form .form-row-wide{width:100%}
.woocommerce-form-login__rememberme{
  display:inline-flex!important;align-items:center;gap:9px;font-weight:400!important;
  color:var(--body);margin:4px 0 18px;
}
.woocommerce-form-login__rememberme input{width:19px;height:19px;accent-color:var(--brand);margin:0}

.woocommerce .button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button{
  display:inline-flex;align-items:center;justify-content:center;height:52px;padding:0 26px;
  font:inherit;font-size:16px;font-weight:650;border:1px solid transparent;border-radius:12px;
  background:var(--brand);color:#fff;cursor:pointer;text-decoration:none;
}
.woocommerce .button:hover{background:var(--brand-dark);color:#fff;text-decoration:none}

.woocommerce-LostPassword{margin:16px 0 0;font-size:15px}
.woocommerce-privacy-policy-text{font-size:14px;color:var(--muted)}

/* Woo's own notices, in this palette rather than its default green bar. */
.woocommerce-message,.woocommerce-info,.woocommerce-error{
  list-style:none;margin:0 0 22px;padding:16px 20px;border-radius:12px;font-size:15px;
  background:var(--brand-wash);border:1px solid var(--brand-line);color:var(--brand-dark);
}
.woocommerce-error{background:var(--amber-wash);border-color:var(--amber-line);color:var(--amber)}

/* Two-column login / register, one column once there is no room for two. */
.woocommerce .col2-set{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.woocommerce .col2-set .col-1,.woocommerce .col2-set .col-2{width:auto;float:none}
@media (max-width:860px){.woocommerce .col2-set{grid-template-columns:1fr}}

/* The signed-in account menu. Woo prints a bare bulleted list with links 20px
   tall; these are pills instead, each a fair tap target, wrapping on a phone. */
.woocommerce-MyAccount-navigation ul{list-style:none;margin:0 0 26px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.woocommerce-MyAccount-navigation a{
  display:inline-flex;align-items:center;min-height:40px;padding:0 16px;
  background:#fff;border:1px solid var(--border);border-radius:999px;
  font-size:15px;font-weight:600;color:var(--heading);text-decoration:none;
}
.woocommerce-MyAccount-navigation a:hover{background:var(--well);text-decoration:none}
.woocommerce-MyAccount-navigation .is-active a{background:var(--brand-wash);border-color:var(--brand-line);color:var(--brand-dark)}

/* ------------------------------------------------------------- sign in
   page-templates/account.php, signed out. Form on the left, the car on the
   right, filling the screen under the masthead — the shape people expect of a
   sign-in page. Below 960px the picture goes and the form takes the width. */
.auth{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  min-height:calc(100vh - 85px);background:var(--surface);
}
.auth-panel{display:flex;align-items:center;justify-content:center;padding:56px 40px}
.auth-card{width:100%;max-width:440px}

.auth-head{margin-bottom:32px}
.auth-head h1{font-size:40px;letter-spacing:-.02em;margin-bottom:10px}
.auth-head p{font-size:17px;color:var(--body)}

.auth-form{max-width:none}
.auth-field{margin-bottom:18px}
.auth-field label{display:block;font-size:14px;font-weight:600;color:var(--heading);margin-bottom:8px}
.auth-input{position:relative;display:block}
/* z-index is not decoration here. WooCommerce's script wraps every password
   input in `span.password-input` (for its show/hide toggle), and that span is
   positioned — so, coming later in the document, it painted straight over the
   icon. The email field has no wrapper, which is why only it had an icon. */
.auth-input svg{
  position:absolute;left:16px;top:50%;transform:translateY(-50%);z-index:2;
  width:19px;height:19px;color:var(--muted);pointer-events:none;transition:color .2s ease;
}

/* Woo's show/hide password toggle. Its script supplies the button and flips
   `display-password` on it; all it was missing was something to look at. */
.auth .auth-input .password-input{display:block;position:relative}
.auth .auth-input .password-input input{padding-right:54px}
.auth .auth-input .show-password-input{
  display:block;position:absolute;right:10px;top:50%;transform:translateY(-50%);z-index:2;
  width:36px;height:36px;padding:0;border:0;border-radius:9px;cursor:pointer;
  background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A9199' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center/20px no-repeat;
  transition:background-color .2s ease;
}
.auth .auth-input .show-password-input:hover{background-color:var(--well)}
.auth .auth-input .show-password-input:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
.auth .auth-input .show-password-input.display-password{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232744F6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.9 5.2A10.4 10.4 0 0 1 12 5c6.4 0 10 7 10 7a17.6 17.6 0 0 1-2.2 3.1M6.6 6.6A17.4 17.4 0 0 0 2 12s3.6 7 10 7a9.8 9.8 0 0 0 5.4-1.6'/%3E%3Cpath d='M9.9 9.9a3 3 0 0 0 4.2 4.2'/%3E%3Cpath d='m2 2 20 20'/%3E%3C/svg%3E");
}
.auth .auth-input input{
  width:100%;height:54px;padding:0 16px 0 46px;font:inherit;font-size:16px;color:var(--heading);
  background:#fff;border:1px solid var(--border);border-radius:12px;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.auth .auth-input input:not([type="checkbox"]):focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-wash)}
.auth-input:focus-within svg{color:var(--brand)}
.auth .auth-input input::placeholder{color:#AAB2BC}

/* Remember me and the reset link share a row; the button gets its own. */
.auth-row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:4px 0 24px}
/* margin:0 undoes the older `.woocommerce-form-login__rememberme` rule, whose
   bottom margin pushed Remember me above Forgot password in this row. */
.auth .auth-row .auth-check{display:inline-flex;align-items:center;gap:10px;margin:0;font-size:15px;color:var(--body);cursor:pointer}
.auth-check input{width:18px;height:18px;margin:0;accent-color:var(--brand);cursor:pointer}
.auth-link{font-size:15px;font-weight:600;color:var(--brand)}
.auth-link:hover{color:var(--brand-dark)}
.auth-submit{height:56px;font-size:17px;box-shadow:0 8px 20px -8px rgba(39,68,246,.55)}

.auth-divider{display:flex;align-items:center;gap:14px;margin:32px 0 18px;color:var(--muted);font-size:14px}
.auth-divider::before,.auth-divider::after{content:"";flex:1;height:1px;background:var(--border)}
.auth-note{font-size:15px;color:var(--body);margin-bottom:16px}

/* Woo prints its errors above the form; keep them inside the card's width. */
.auth .woocommerce-error,.auth .woocommerce-message,.auth .woocommerce-info{margin:0 0 22px}

.auth-visual{position:relative;overflow:hidden;background:var(--play)}
.auth-visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:55% 50%}
.auth-visual::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,28,38,0) 38%,rgba(20,28,38,.55) 64%,rgba(20,28,38,.92) 100%);
}
.auth-visual-copy{position:absolute;left:56px;right:56px;bottom:56px;z-index:1;color:#fff}
.auth-visual-kicker{
  display:inline-block;font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);
  margin-bottom:16px;
}
.auth-visual-title{font-size:34px;font-weight:800;line-height:1.12;letter-spacing:-.015em;margin-bottom:18px;max-width:18ch}
.auth-visual ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.auth-visual li{position:relative;padding-left:28px;font-size:16px;color:rgba(255,255,255,.88)}
.auth-visual li::before{
  content:"";position:absolute;left:0;top:3px;width:18px;height:18px;border-radius:50%;
  background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/12px no-repeat;
}

@media (max-width:960px){
  .auth{grid-template-columns:1fr}
  .auth-visual{display:none}
  .auth-panel{padding:48px 24px 64px}
}
@media (max-width:580px){
  .auth{min-height:calc(100vh - 71px)}
  .auth-head h1{font-size:32px}
  .auth-row{flex-wrap:wrap}
}

/* The public order-status page reuses step 6's furniture; these are the two
   states only a real order can reach — a stalled job, and a carrier link. */
.checklist li.is-blocked .mark{border-color:var(--amber-line);background:var(--amber-wash);color:var(--amber)}
.checklist li.is-blocked .ck-name{color:var(--amber)}
.ck-track{display:inline-block;margin-top:8px;font-size:14px;color:var(--brand-dark)}
.tune-box code a{color:inherit;text-decoration:none}
.tune-box code a:hover{text-decoration:underline}

/* The masthead badge on the public order-status page. */
.live-dot{display:inline-flex;align-items:center;gap:9px;font-size:14px;font-weight:600;color:var(--green-ink)}
.live-dot > span{width:9px;height:9px;border-radius:50%;background:var(--green);animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* ---------------------------------------------------------------- layout */
body{min-height:100vh;display:flex;flex-direction:column}
main{flex:1}

/* ---------------------------------------------------------------- responsive */
@media (max-width:1320px){
  .buy-card.is-play.machine{--cell:74px;--reel-h:158px;--reel-w:106px}
  .buy-card.is-play .pct{font-size:31px}
}
@media (max-width:1200px){
  .navlinks{gap:20px}
  .navlinks a{font-size:13px}
  h1{font-size:48px}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:1040px){
  /* The links fold behind the menu button and open as a panel under the bar.
     The bar is sticky, so the panel scrolls itself when it is taller than the
     screen that is left (a phone on its side). */
  .nav-toggle{display:inline-flex}
  .navlinks{
    display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;
    max-height:calc(100vh - 84px);max-height:calc(100dvh - 84px);overflow-y:auto;
    padding:6px 28px 14px;background:#fff;border-bottom:1px solid var(--border);
    box-shadow:0 18px 30px -18px rgba(16,24,40,.28);
  }
  .nav.is-open .navlinks{display:flex}
  .navlinks a{display:block;padding:14px 0;font-size:15px}
  .navlinks li + li{border-top:1px solid var(--border-soft)}
  .selector{grid-template-columns:repeat(2,1fr)}
  .selector .btn{grid-column:1/-1}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .container{padding:0 28px}
  .buy-card.is-play.machine{--cell:68px;--reel-h:146px;--reel-w:96px}
  .buy-card.is-play .pct{font-size:28px}
  .summary{position:static}
}
@media (max-width:860px){
  /* Belt and braces for engines without `safe` alignment. */
  .stepstrip{justify-content:flex-start;padding:0 16px}
  /* One column now, so the play box gets the full width back. */
  .buy-card.is-play.machine{--cell:86px;--reel-h:180px;--reel-w:128px}
  .buy-card.is-play .pct{font-size:34px}
  h1{font-size:38px}
  h2{font-size:30px}
  body{font-size:16px}
  .hero-sub{font-size:18px}
  .buy-grid,.grid-2,.grid-3{grid-template-columns:1fr}
  .or-badge{position:static;transform:none;margin:0 auto}
  .stage-slot{transform:scale(1)}
  .section{padding:60px 0}
  .price{font-size:36px}
}
@media (max-width:580px){
  .nav{height:70px;gap:12px}
  /* Logo, button and menu button only: "Log in" moves into the menu. */
  .nav-actions{gap:8px}
  .nav-actions .login{display:none}
  .nav-actions .btn{padding:0 14px;font-size:14px}
  .navlinks{padding:4px 20px 12px;max-height:calc(100vh - 70px);max-height:calc(100dvh - 70px)}
  .navlinks .nav-login{display:block}
  /* A tune: radio, photo and name on the first line, the price under the name.
     In one row the four no longer fit, and the price ran off the screen. */
  .option{display:grid;grid-template-columns:20px 64px minmax(0,1fr);column-gap:14px;row-gap:4px;padding:16px}
  .option input{grid-column:1;grid-row:1 / span 2}
  .option img{grid-column:2;grid-row:1 / span 2;width:64px}
  .option .opt-main{grid-column:3;grid-row:1}
  .option .opt-price{grid-column:3;grid-row:2;font-size:19px}
  .st-flow > .stepstrip{top:70px}
  .brand-logo{height:52px}
  .buy-card.is-play.machine{--cell:58px;--reel-h:122px;--reel-w:64px;padding:20px 16px 22px}
  h1{font-size:31px}
  .buy-card.is-play .pct{font-size:22px;margin-left:6px}
  .buy-card.is-play .dot{width:9px;height:9px;flex-basis:9px;margin:18px 4px 0}
  .buy-card.is-play .lever{width:34px;flex-basis:34px}
  .buy-card.is-play .lever-knob{width:24px;height:24px}
  .buy-card.is-play .lever-rail{width:10px}
  .well{gap:6px;padding:10px}
  .lever{width:36px;flex-basis:36px}
  .lever-knob{width:26px;height:26px}
  .lever-rail{width:11px}
  .selector,.grid-4{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .container{padding:0 20px}
  .card,.buy-card,.step-card{padding:24px}
  .vehicle-bar img{width:100%;flex-basis:auto}
  .vehicle-bar .vb-mark{width:100%;flex-basis:auto;aspect-ratio:auto;height:96px}
  .card-row{grid-template-columns:1fr}
  /* Expiry and CVV are short: side by side even on a phone, so Pay stays in view. */
  #pay-modal .card-row{grid-template-columns:1fr 1fr}
  .modal{padding:12px}
  .modal-card{padding:24px 20px}
  .modal-head{margin-bottom:12px}
  .pay-total{padding:12px 0;margin-bottom:14px}
  .pay-total strong{font-size:26px}
}
/* 320-360px: logo, "Continue order" and the menu button came to 18px more than
   the bar has, so the logo gives a little and the gaps close up. */
@media (max-width:360px){
  .nav{gap:10px}
  .brand-logo{height:44px}
  .nav-actions{gap:6px}
  .nav-actions .btn{padding:0 12px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  /* With animations switched off (an OS setting, common on Windows) the glow
     cannot breathe, so it stays lit at half strength instead of vanishing. */
  .buy-card.is-play.machine.is-ready,
  .buy-card.is-play.machine.is-live{box-shadow:var(--shadow), 0 0 0 4px rgba(39,68,246,.08), 0 0 32px 8px rgba(39,68,246,.2)}
}