/* Start page + intro. Full-bleed, no app chrome: the first minute should feel like a game's title screen. */
body.start-mode .topbar,body.start-mode .sidebar,body.start-mode #mobile-nav,body.start-mode .experience-status{display:none!important}
body.start-mode #main{padding:0!important;max-width:none}
body.start-mode{background:#fff}

/* ---------- hero ---------- */
.start-hero{position:relative;min-height:100svh;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;padding:12px 16px 20px;
  background:radial-gradient(120% 60% at 50% 18%,#FFF1B8 0,#fff 62%)}
.start-top{position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px}
.start-brand{font-size:20px!important;text-decoration:none;color:var(--ink)}
.start-skip{font:700 14px var(--font-display);color:var(--blue-ink,#0A66C2);text-decoration:none;padding:12px 4px;min-height:44px;display:inline-flex;align-items:center}
.start-blob{position:absolute;z-index:-1;border-radius:50%;filter:blur(40px);opacity:.55;pointer-events:none}
.start-blob--a{width:260px;height:260px;background:#FFD60A;left:-80px;top:60px;animation:blob-a 14s var(--in-out) infinite}
.start-blob--b{width:220px;height:220px;background:#7FE8F5;right:-70px;top:220px;opacity:.4;animation:blob-b 17s var(--in-out) infinite}
.start-blob--c{width:200px;height:200px;background:#FFB3D4;left:30%;bottom:-60px;opacity:.35;animation:blob-a 19s var(--in-out) infinite reverse}
@keyframes blob-a{50%{translate:60px 40px;scale:1.15}}
@keyframes blob-b{50%{translate:-50px 60px;scale:.9}}

.start-show{position:relative;margin:0 auto;width:min(100%,460px)}
.start-copy{position:relative;z-index:2;display:flex;flex-direction:column;gap:12px;text-align:center;margin-top:-4px}

/* kinetic headline: every word rises into place, then "smil" gets underlined by hand */
.start-title{margin:0;font:800 clamp(34px,10.4vw,68px)/1.02 var(--font-display);letter-spacing:-.02em;color:var(--ink)}
.kl{display:block}
.kw{display:inline-block;animation:word-rise .8s var(--spring) both;animation-delay:calc(var(--w) * 70ms + 250ms)}
.kl:nth-child(2) .kw{animation-delay:calc(var(--w) * 70ms + 520ms)}
@keyframes word-rise{from{opacity:0;translate:0 .55em;rotate:4deg;filter:blur(4px)}}
.kw-smile{position:relative;color:#1F2328}
.kw-smile svg{position:absolute;left:-2%;bottom:-.22em;width:104%;height:.4em;overflow:visible}
.kw-smile path{fill:none;stroke:var(--accent,#FFD60A);stroke-width:7;stroke-linecap:round;stroke-dasharray:140;stroke-dashoffset:140;animation:draw .7s 1.25s var(--out) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.start-lead{margin:0 auto;max-width:36ch;color:var(--muted);font-size:16px;line-height:1.5;animation:fade-up .7s .9s var(--out) both}
@keyframes fade-up{from{opacity:0;translate:0 12px}}
.start-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.start-chips li{display:inline-flex;align-items:center;gap:5px;padding:7px 12px;border-radius:999px;background:#fff;border:2px solid var(--line);box-shadow:0 2px 0 var(--line);
  font:600 14px var(--font-body,inherit);animation:pop-in .5s var(--spring) both}
.start-chips li:nth-child(1){animation-delay:1.05s}.start-chips li:nth-child(2){animation-delay:1.15s}.start-chips li:nth-child(3){animation-delay:1.25s}
.start-chips b{font:800 15px var(--font-display)}

/* topic ticker: an endless, quiet conveyor of what you'll learn */
.start-ticker{overflow:hidden;margin:2px -16px;-webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);animation:fade-up .7s 1.3s var(--out) both}
.start-ticker > div{display:flex;gap:8px;width:max-content;animation:ticker 36s linear infinite}
.start-ticker span{padding:5px 11px;border-radius:999px;background:#F3F5F7;color:#3E454D;font:700 13px var(--font-display);white-space:nowrap}
.start-ticker span:nth-child(3n){background:#FFEFAD}.start-ticker span:nth-child(4n){background:#E3FAFD}
@keyframes ticker{to{translate:-50% 0}}

.start-actions{display:flex;flex-direction:column;gap:10px;margin-top:6px;animation:fade-up .7s 1.4s var(--out) both}
.start-cta{position:relative;overflow:hidden;isolation:isolate;display:flex;align-items:center;justify-content:center;min-height:58px;border-radius:18px;
  background:var(--accent,#FFD60A);color:#1F2328;font:800 19px var(--font-display);text-decoration:none;border:0;
  box-shadow:0 5px 0 var(--accent-shadow,#C9A200);animation:cta-breathe 2.6s 2.2s var(--in-out) infinite}
.start-cta::after{content:"";position:absolute;inset:-30% auto -30% -40%;width:28%;z-index:-1;background:linear-gradient(100deg,transparent,rgba(255,255,255,.8),transparent);transform:skewX(-18deg);animation:shine 3.6s 2s var(--in-out) infinite}
.start-cta:active{translate:0 4px;box-shadow:0 1px 0 var(--accent-shadow,#C9A200);animation:none}
@keyframes cta-breathe{0%,100%{scale:1}50%{scale:1.025}}
.start-ghost{display:flex;align-items:center;justify-content:center;min-height:52px;border-radius:18px;background:#fff;border:2px solid var(--line);box-shadow:0 4px 0 var(--line);
  color:var(--ink);font:800 16px var(--font-display);text-decoration:none}
.start-fine{margin:0;color:var(--muted);font-size:13px}

/* ---------- the glow-up machine ---------- */
.gu{position:relative;width:min(84vw,400px);aspect-ratio:1/1;margin:0 auto;isolation:isolate}
.gu-rays{position:absolute;inset:-8%;z-index:-2;border-radius:50%;opacity:.8;
  background:repeating-conic-gradient(from 0deg,rgba(255,214,10,.55) 0 9deg,transparent 9deg 24deg);
  -webkit-mask:radial-gradient(closest-side,#000 20%,transparent 70%);mask:radial-gradient(closest-side,#000 20%,transparent 70%);animation:spot-turn 30s linear infinite}
.gu.is-done .gu-rays{animation-duration:12s;opacity:1}
.gu-ring{position:absolute;left:6%;right:6%;bottom:13%;height:17%;z-index:-1;border-radius:50%;
  background:radial-gradient(closest-side,#fff 0,#F4F7F9 70%,#E5E9ED 100%);border:3px solid #fff;box-shadow:0 10px 0 -2px #DDE3E8,0 18px 30px rgba(31,35,40,.12)}
.gu-ring::after{content:"";position:absolute;inset:10%;border-radius:50%;border:2px dashed rgba(31,35,40,.12);animation:spot-turn 16s linear infinite}
.gu.is-done .gu-ring{box-shadow:0 10px 0 -2px #DDE3E8,0 0 0 6px rgba(255,214,10,.5),0 18px 40px rgba(155,196,42,.35)}
.gu-stage{position:absolute;inset:0}
.gu-car,.gu-before,.gu-after{position:absolute;inset:0}
.gu img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.gu-car{isolation:isolate}
.gu-after{clip-path:inset(0 100% 0 0)}
.gu-car.is-restoring .gu-after{animation:wipe .95s var(--in-out) forwards}
.gu-car.is-restored .gu-after{clip-path:none;animation:none}
.gu-car.is-restored .gu-before{opacity:0;transition:opacity .2s}
@keyframes wipe{to{clip-path:inset(0 0 0 0)}}
.gu-scan{position:absolute;top:10%;bottom:14%;left:0;width:10px;margin-left:-5px;border-radius:8px;opacity:0;z-index:50;
  background:linear-gradient(#fff,#FFD60A 30%,#9BFF3A 70%,#fff);box-shadow:0 0 18px 6px rgba(255,214,10,.85),0 0 40px 14px rgba(255,255,255,.7)}
.gu-car.is-restoring .gu-scan{animation:scan .95s var(--in-out) forwards}
@keyframes scan{0%{left:4%;opacity:0}12%{opacity:1}88%{opacity:1}100%{left:96%;opacity:0}}
.gu-car.is-in{animation:drive-in .75s var(--spring) both}
@keyframes drive-in{from{translate:70% 0;opacity:0;rotate:-3deg}60%{rotate:1.5deg}}
.gu-car.is-out{animation:drive-out .5s cubic-bezier(.55,0,.8,.2) forwards}
@keyframes drive-out{to{translate:-90% 0;opacity:0;rotate:-2deg}}
.gu-car.is-cough .gu-before{animation:cough .7s linear}
@keyframes cough{0%,100%{transform:none}10%,30%,50%{transform:translate(1%,-.6%) rotate(.6deg)}20%,40%,60%{transform:translate(-1%,.6%) rotate(-.6deg)}75%{transform:translateY(-1.2%)}}
.gu-car.is-landed{animation:land .6s var(--spring)}
@keyframes land{0%{scale:1 1}35%{scale:1.04 .95}100%{scale:1 1}}
.gu .gu-hidden{opacity:0}
.gu .gu-pop{animation:gu-pop .6s var(--spring)}
@keyframes gu-pop{0%{opacity:0;scale:1.18;translate:0 -3%;filter:brightness(2.4)}55%{opacity:1;filter:brightness(1.35)}100%{scale:1;translate:0 0;filter:none}}
.gu .mybil-neon{transition:opacity .3s}
.gu .fx-puffs{left:14%;top:62%}

.gu-label{position:absolute;left:50%;bottom:0;translate:-50% 0;display:flex;align-items:center;gap:8px;white-space:nowrap;padding:7px 14px;border-radius:999px;
  background:#fff;border:2px solid var(--line);box-shadow:0 3px 0 var(--line);font:800 14px var(--font-display);color:var(--ink);z-index:60}
.gu-from{color:var(--muted);text-decoration:line-through 2px rgba(31,35,40,.35);transition:color .3s}
.gu-arrow{color:var(--muted)}
.gu-to{opacity:.25;transition:opacity .3s}
.gu.is-done .gu-to{opacity:1;color:var(--acid-text,#2F6F00);animation:pop-in .5s var(--spring)}
.gu.is-done .gu-label{border-color:var(--accent-shadow,#C9A200);box-shadow:0 3px 0 var(--accent-shadow,#C9A200)}

/* the cast floats around the machine */
.start-cast{position:absolute;inset:0;pointer-events:none;z-index:3}
.sc{position:absolute;width:23%;animation:pop-in .6s var(--spring) both}
.sc .cast{display:block}.sc .cast-img{width:100%!important;filter:drop-shadow(0 6px 6px rgba(31,35,40,.16))}
.sc--1{left:-2%;top:56%;animation-delay:.5s}.sc--2{left:0;top:4%;width:19%;animation-delay:.65s}
.sc--3{right:-1%;top:52%;width:18%;animation-delay:.8s}.sc--4{right:2%;top:2%;width:18%;animation-delay:.95s}
.sc > .cast{animation:float 4.2s var(--in-out) infinite}
.sc--2 > .cast{animation-duration:3.4s;animation-delay:-1s}.sc--3 > .cast{animation-duration:4.8s;animation-delay:-2s}.sc--4 > .cast{animation-duration:3.8s;animation-delay:-.5s}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -10px}}

/* ---------- intro steps ---------- */
.start-step{min-height:100svh;display:flex;flex-direction:column;padding:8px 16px 16px;max-width:560px;margin:0 auto;animation:step-in .45s var(--out)}
@keyframes step-in{from{opacity:0;translate:28px 0}}
.step-top{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:10px;min-height:56px}
.step-back{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;color:var(--muted);font:800 22px var(--font-display);text-decoration:none}
.step-bar{position:relative;height:14px;border-radius:999px;background:#E9ECEF;overflow:hidden}
.step-bar i{position:absolute;inset:0;border-radius:999px;background:var(--good,#58CC02);transform-origin:0 50%;scale:var(--to) 1;animation:bar-grow .7s var(--spring)}
.step-bar i::after{content:"";position:absolute;left:8px;right:8px;top:3px;height:3px;border-radius:3px;background:rgba(255,255,255,.4)}
@keyframes bar-grow{from{scale:var(--from) 1}}
.step-skip{font:700 14px var(--font-display);color:var(--blue-ink,#0A66C2);text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.step-body{flex:1;display:flex;flex-direction:column;gap:14px;padding:12px 0}
.step-talk{display:flex;align-items:flex-end;gap:10px}
.step-talk .cast-img{width:96px!important}
.step-bubble{position:relative;flex:1;margin:0 0 18px;padding:12px 14px;border-radius:18px 18px 18px 6px;background:#fff;border:2px solid var(--line);box-shadow:0 3px 0 var(--line);
  font-size:17px;line-height:1.4;min-height:3.6em;animation:bubble-in .5s .15s var(--spring) both;transform-origin:0 100%}
.step-options{display:flex;flex-direction:column;gap:10px}
.step-option{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:62px;padding:12px 16px;border-radius:18px;text-align:left;
  background:#fff;border:2px solid var(--line);box-shadow:0 4px 0 var(--line);color:var(--ink);animation:reveal .45s var(--out) backwards;animation-delay:calc(var(--i) * 70ms + 450ms)}
.step-option strong{font:800 17px var(--font-display)}.step-option small{color:var(--muted);font-size:14px}
.step-option.is-on{border-color:#1CB0F6;background:#E8F7FF;box-shadow:0 4px 0 #1899D6}
.step-option.is-on small{color:#0B5E87}
.step-option.is-on::before{content:"";position:absolute;inset:-2px;border-radius:18px;border:2px solid #1CB0F6;animation:ring-out .5s var(--out) forwards;pointer-events:none}
@keyframes ring-out{from{opacity:1;scale:1}to{opacity:0;scale:1.06}}
.step-note{margin:0;color:var(--muted);font-size:15px}
.step-foot{position:sticky;bottom:0;padding:12px 0 calc(8px + env(safe-area-inset-bottom));background:linear-gradient(transparent,#fff 30%)}
.step-eyebrow{margin:6px 0 0}
.step-title{margin:0;font:800 clamp(26px,7.6vw,40px)/1.08 var(--font-display);letter-spacing:-.01em}
.step-title span{display:block;color:var(--muted)}
.step-garage{position:relative;padding:8px 0 4px;border-radius:24px;background:#fff;border:2px solid var(--line);box-shadow:0 4px 0 var(--line)}
.step-garage .gu{width:min(78vw,340px)}
.step-replay{display:block;margin:6px auto 4px;min-height:44px;padding:0 16px;border-radius:999px;border:2px solid var(--line);background:#fff;font:700 14px var(--font-display);color:var(--ink)}
.step-earn{display:flex;gap:12px;align-items:center;padding:14px 16px;border-radius:18px;background:#fff;border:2px solid var(--line);box-shadow:0 4px 0 var(--line);animation:reveal .5s .6s var(--out) backwards}
.step-earn strong{display:block;font:800 17px var(--font-display)}.step-earn small{color:var(--muted);font-size:14px}
.step-earn-icon{animation:bolt-glint 3s 1s var(--in-out) infinite}

/* plan ready: checks draw themselves one after another */
.plan-hero{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:8px}
.plan-hero .cast{justify-content:center}.plan-hero .cast-img{width:150px!important}
.plan-title{text-align:center}
.plan-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.plan-list li{display:grid;grid-template-columns:44px 1fr 28px;align-items:center;gap:12px;padding:12px 14px;border-radius:18px;background:#fff;border:2px solid var(--line);box-shadow:0 4px 0 var(--line);
  animation:reveal .5s var(--out) backwards;animation-delay:calc(var(--i) * 260ms + 500ms)}
.plan-list strong{display:block;font:800 16px var(--font-display)}.plan-list small{color:var(--muted);font-size:14px}
.plan-ico{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:#F3F5F7;font-size:22px}
.plan-check{width:28px;height:28px}
.plan-check path{fill:none;stroke:var(--good,#58CC02);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:24;stroke-dashoffset:24;animation:draw .45s var(--out) forwards;animation-delay:calc(var(--i) * 260ms + 850ms)}

.fx-confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:200}

/* ---------- wide screens: copy left, machine right ---------- */
@media (min-width:900px){
  .start-hero{padding:20px 48px}
  .start-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);grid-template-rows:auto 1fr;column-gap:48px}
  .start-top{grid-column:1 / -1}
  .start-copy{grid-column:1;grid-row:2;align-self:center;text-align:left;margin:0}
  .start-show{grid-column:2;grid-row:2;align-self:center;width:min(100%,600px)}
  .gu{width:min(100%,560px)}
  .start-lead{margin:0}.start-chips{justify-content:flex-start}
  .start-actions{flex-direction:row;flex-wrap:wrap;align-items:center}.start-cta{padding:0 34px}.start-ghost{padding:0 24px}.start-fine{flex-basis:100%}
  .start-ticker{margin:2px 0}
}
@media (max-width:360px){.start-title{font-size:32px}.start-lead{font-size:15px}.step-option{min-height:56px}}

/* Min bil: the dream-build button and modal */
/* the dream-build button: the brand button (yellow in the dark theme, white in the light one) with a sparkle on an ink coin */
.mybil-dream{--dream-coin:#1F2328;--dream-spark:#FFD60A;display:flex;align-items:center;justify-content:center;gap:10px;margin:14px auto 0;min-height:50px;padding:0 22px 0 7px;border-radius:999px;border:0;
  background:var(--accent,#FFD60A);color:var(--accent-ink,#1F2328);font:800 16px var(--font-display);box-shadow:0 4px 0 var(--accent-shadow,#C9A200);
  transition:translate .12s,box-shadow .12s}
.mybil-dream:hover{translate:0 -1px;box-shadow:0 5px 0 var(--accent-shadow,#C9A200)}
.mybil-dream:active{translate:0 3px;box-shadow:0 1px 0 var(--accent-shadow,#C9A200)}
.mybil-dream-ico{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--dream-coin);color:var(--dream-spark)}
.mybil-dream-ico svg{width:20px;height:20px;fill:currentColor;animation:dream-twinkle 3.2s var(--in-out) infinite}
.mybil-dream-ico svg .s{transform-origin:18.5px 5.5px;animation:dream-twinkle 3.2s 1.1s var(--in-out) infinite}
@keyframes dream-twinkle{0%,70%,100%{scale:1;rotate:0deg}80%{scale:1.22;rotate:20deg}90%{scale:.94;rotate:-6deg}}
@media (prefers-reduced-motion:reduce){.mybil-dream-ico svg,.mybil-dream-ico svg .s{animation:none}}
.dream-modal .gu{width:min(76vw,380px)}

.step-first{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:18px;background:#FFF8EC;border:2px solid #F3DDB8;box-shadow:0 4px 0 #F3DDB8;animation:reveal .5s .45s var(--out) backwards}
.step-first img{width:64px;height:64px;object-fit:contain;flex:none;animation:idle-wobble 3.4s var(--in-out) infinite}
.step-first strong{display:block;font:800 16px var(--font-display)}.step-first small{color:var(--muted);font-size:14px}
/* cars drive in and out of the machine: never let that widen the page */
.step-garage,.dream-modal{overflow:hidden}
.start-step,.start-hero{overflow-x:clip}

/* ---------- v2: a calm showroom instead of yellow rays and blobs ---------- */
.start-hero{background:linear-gradient(180deg,#E9EEF3 0,#F3F6F9 38%,#FBFCFD 64%,#fff 100%)}
.start-blob{display:none}
/* studio floor: a fine perspective grid that fades into the distance, and soft light from above */
.start-show{isolation:isolate}
.start-show::before{content:"";position:absolute;left:-40%;right:-40%;bottom:4%;height:46%;z-index:-3;pointer-events:none;
  background:repeating-linear-gradient(90deg,rgba(31,35,40,.075) 0 1px,transparent 1px 44px),repeating-linear-gradient(0deg,rgba(31,35,40,.075) 0 1px,transparent 1px 44px);
  transform:perspective(420px) rotateX(64deg);transform-origin:50% 100%;
  -webkit-mask:radial-gradient(60% 90% at 50% 100%,#000 25%,transparent 75%);mask:radial-gradient(60% 90% at 50% 100%,#000 25%,transparent 75%)}
.start-show::after{content:"";position:absolute;left:5%;right:5%;top:-6%;height:80%;z-index:-2;pointer-events:none;
  background:radial-gradient(55% 60% at 50% 30%,rgba(255,255,255,.95),rgba(255,255,255,0) 70%)}
/* the machine: no rays, a neutral turntable with a soft contact shadow */
.gu-rays{display:none}
.gu-ring{background:radial-gradient(closest-side,#FFFFFF 0,#F1F4F7 65%,#E3E8ED 100%);border:2px solid rgba(255,255,255,.9);
  box-shadow:0 8px 0 -2px #D5DCE3,0 22px 34px -8px rgba(31,35,40,.18)}
.gu-ring::after{border:1.5px solid rgba(31,35,40,.08)}
.gu.is-done .gu-ring{box-shadow:0 8px 0 -2px #D5DCE3,0 22px 34px -8px rgba(31,35,40,.18),0 0 0 4px rgba(255,214,10,.45)}
/* the restore: a soft-edged reveal sweeping across, with a brief white glint on the car itself */
.gu-scan{display:none!important}
.gu-after{clip-path:none;-webkit-mask-image:linear-gradient(90deg,#000 42%,transparent 58%);mask-image:linear-gradient(90deg,#000 42%,transparent 58%);
  -webkit-mask-size:260% 100%;mask-size:260% 100%;-webkit-mask-position:100% 0;mask-position:100% 0;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.gu-car.is-restoring .gu-after{animation:reveal-soft 1s var(--in-out) forwards}
@keyframes reveal-soft{to{-webkit-mask-position:0 0;mask-position:0 0}}
.gu-car.is-restored .gu-after{-webkit-mask-image:none;mask-image:none;animation:glint .7s ease-out}
@keyframes glint{0%{filter:brightness(1.25) saturate(1.1)}100%{filter:none}}
/* Keglen keeps the car company on the right */
.sc--kegle{position:absolute;right:-2%;top:50%;width:22%;animation:pop-in .6s .7s var(--spring) both}
.sc--kegle > .cast{animation:float 4.4s var(--in-out) infinite}
/* intro step 3 and the dream modal share the calmer stage */
.step-garage{background:linear-gradient(180deg,#EEF2F6,#fff 75%)!important}
/* showroom backdrop: a studio wall meets the floor in a soft horizon, faded at the edges so it never reads as a box */
.gu::before{content:"";position:absolute;inset:-4% -16% 4% -16%;z-index:-3;pointer-events:none;
  background:linear-gradient(180deg,#D9E1E9 0,#E9EEF3 52%,#DCE3EA 61%,#EEF2F5 62%,#F6F8FA 100%);
  -webkit-mask:radial-gradient(52% 54% at 50% 56%,#000 55%,transparent 100%);mask:radial-gradient(52% 54% at 50% 56%,#000 55%,transparent 100%)}
.start-show::before{background:repeating-linear-gradient(90deg,rgba(31,35,40,.11) 0 1px,transparent 1px 44px),repeating-linear-gradient(0deg,rgba(31,35,40,.11) 0 1px,transparent 1px 44px)}
.step-garage .gu::before,.dream-modal .gu::before{inset:-2% -8% 2% -8%}

/* ---------- v4: poster style, straight from the style reference ----------
   A flat, saturated colour field and a flat organic colour blob under the vehicle. No place, no props,
   no outlines on the background: the vehicle and the type carry the image. The colours follow the vehicle. */
.gu[data-active="scooter"]{--poster:#22D3EE;--blob:#9B3FD6}
.gu[data-active="smallcar"]{--poster:#FFD43B;--blob:#FF5FA2}
.gu[data-active="bigcar"]{--poster:#4DD9AC;--blob:#FF5FA2}
.gu[data-active="racecar"]{--poster:#FF6FB0;--blob:#7B2CBF}
.start-hero:has(.gu[data-active="scooter"]),.step-garage:has(.gu[data-active="scooter"]),.dream-modal:has(.gu[data-active="scooter"]){--poster:#22D3EE}
.start-hero:has(.gu[data-active="smallcar"]),.step-garage:has(.gu[data-active="smallcar"]),.dream-modal:has(.gu[data-active="smallcar"]){--poster:#FFD43B}
.start-hero:has(.gu[data-active="bigcar"]),.step-garage:has(.gu[data-active="bigcar"]),.dream-modal:has(.gu[data-active="bigcar"]){--poster:#4DD9AC}
.start-hero:has(.gu[data-active="racecar"]),.step-garage:has(.gu[data-active="racecar"]),.dream-modal:has(.gu[data-active="racecar"]){--poster:#FF6FB0}
.start-hero{background:var(--poster,#22D3EE)!important;transition:background-color .7s var(--in-out)}
body.start-mode{background:#fff}
.start-hero .start-top{background:none!important}
.step-garage{background:var(--poster,#22D3EE)!important;border-color:#1F2328!important;box-shadow:0 4px 0 #1F2328!important;transition:background-color .7s var(--in-out)}
.dream-modal{background:var(--poster,#22D3EE);border-radius:20px;padding:8px 0 4px;transition:background-color .7s var(--in-out)}
.gu::before,.start-show::before,.start-show::after{display:none!important}
/* the blob: flat, borderless, slightly irregular, breathing very slowly */
.gu-ring{left:0;right:0;bottom:9%;height:24%;background:var(--blob,#9B3FD6)!important;border:0!important;box-shadow:none!important;
  border-radius:46% 54% 41% 59% / 58% 46% 54% 42%;transition:background-color .7s var(--in-out);animation:blob 9s var(--in-out) infinite}
.gu-ring::after{display:none}
.gu.is-done .gu-ring{box-shadow:none!important}
@keyframes blob{50%{border-radius:55% 45% 58% 42% / 44% 58% 42% 56%;scale:1.03 .97}}
/* type and button speak the same language as the art: ink and a thick black outline */
.start-hero .start-lead{color:#1F2328}
.start-hero .kw-smile{color:#1F2328}
.start-hero .kw-smile path{stroke:#fff}
.start-cta{border:3px solid #1F2328!important;box-shadow:0 5px 0 #1F2328!important}
.start-cta:active{box-shadow:0 1px 0 #1F2328!important}
.start-hero .start-skip{color:#1F2328;text-decoration:underline;text-underline-offset:3px}
.gu-label{border-color:#1F2328;box-shadow:0 3px 0 #1F2328}

/* ---------- v5: the poster fades to white (Drivly-style), and a tone-on-tone workshop + road sits behind the car ---------- */
@property --poster{syntax:'<color>';inherits:true;initial-value:#22D3EE}
.start-hero,.step-garage,.dream-modal{transition:--poster .8s var(--in-out)}
.start-hero{background:linear-gradient(180deg,var(--poster) 0,color-mix(in oklab,var(--poster) 70%,#fff) 34%,color-mix(in oklab,var(--poster) 22%,#fff) 56%,#fff 74%)!important}
@media (min-width:900px){
  .start-hero{background:radial-gradient(70% 90% at 72% 42%,var(--poster) 0,color-mix(in oklab,var(--poster) 60%,#fff) 38%,color-mix(in oklab,var(--poster) 16%,#fff) 64%,#fff 86%)!important}
}
.step-garage,.dream-modal{background:linear-gradient(180deg,var(--poster) 0,color-mix(in oklab,var(--poster) 45%,#fff) 100%)!important}
/* the scene: flat shapes in darker tones of the poster colour, no outlines, faded at the edges */
.gu-scene{position:absolute;inset:-4% -6% 0 -6%;width:112%;height:104%;z-index:-2;pointer-events:none;overflow:visible;
  -webkit-mask:radial-gradient(64% 62% at 50% 52%,#000 58%,transparent 100%);mask:radial-gradient(64% 62% at 50% 52%,#000 58%,transparent 100%)}
.sc-open{fill:color-mix(in oklab,var(--poster) 82%,#0B1020)}
.sc-door{fill:color-mix(in oklab,var(--poster) 70%,#0B1020)}
.sc-slat{fill:none;stroke:color-mix(in oklab,var(--poster) 58%,#0B1020);stroke-width:4}
.sc-road{fill:color-mix(in oklab,var(--poster) 48%,#151A24)}
.sc-dashes path{fill:color-mix(in oklab,var(--poster) 30%,#fff);animation:dash-run 1.3s linear infinite}
.sc-dashes path:nth-child(2){animation-delay:-.43s}.sc-dashes path:nth-child(3){animation-delay:-.86s}
@keyframes dash-run{0%{opacity:0;translate:0 -6px}25%{opacity:1}100%{opacity:1;translate:0 10px}}
.sc-open,.sc-door,.sc-slat,.sc-road,.sc-dashes path{transition:fill .8s var(--in-out),stroke .8s var(--in-out)}
/* the blob now reads as the vehicle's shadow on the road */
.gu-ring{bottom:10%;height:20%;opacity:.95}
/* the type now sits on the pale end of the gradient: "smil." is ink with the yellow underline */
.start-hero .kw-smile{color:#1F2328}
.start-hero .kw-smile path{stroke:var(--accent,#FFD60A)}


/* no coloured blob: just a soft contact shadow so the vehicle stands on the road */
.gu-ring{background:radial-gradient(closest-side,rgba(11,16,32,.38),rgba(11,16,32,.16) 55%,rgba(11,16,32,0))!important;
  left:12%;right:12%;bottom:12%;height:9%;border-radius:50%!important;animation:none!important;opacity:1}
/* same visual size and the same ground line for every vehicle (sizes from manifest bboxes) */
.gu-car[data-base="scooter"] :is(.gu-before,.gu-after){transform-origin:50% 88.3%;scale:0.771;translate:0 -8.3%}
.gu-car[data-base="smallcar"] :is(.gu-before,.gu-after){transform-origin:50% 78.4%;scale:0.951;translate:0 1.6%}
.gu-car[data-base="bigcar"] :is(.gu-before,.gu-after){transform-origin:50% 74.4%;scale:1.060;translate:0 5.6%}
.gu-car[data-base="racecar"] :is(.gu-before,.gu-after){transform-origin:50% 68.7%;scale:1.220;translate:0 11.3%}
.gu-ring{bottom:15.5%!important}
/* Keglen stands on the floor in front of the vehicle, with its own little shadow */
.sc--kegle{top:auto!important;bottom:5%;right:6%;width:19%;z-index:4}
.sc--kegle::after{content:"";position:absolute;left:8%;right:8%;bottom:-2%;height:12%;z-index:-1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(11,16,32,.34),rgba(11,16,32,0))}
.sc--kegle > .cast{animation:none}
@media (min-width:900px){.sc--kegle{bottom:7%;right:8%;width:16%}}
/* the scooter keeps its original size and place; the cars grow to match it on the scooter's ground line */
.gu-car[data-base="scooter"] :is(.gu-before,.gu-after){scale:1;translate:0 0}
.gu-car[data-base="smallcar"] :is(.gu-before,.gu-after){transform-origin:50% 78.4%;scale:1.205;translate:0 9.9%}
.gu-car[data-base="bigcar"] :is(.gu-before,.gu-after){transform-origin:50% 74.4%;scale:1.213;translate:0 13.9%}
.gu-car[data-base="racecar"] :is(.gu-before,.gu-after){transform-origin:50% 68.7%;scale:1.349;translate:0 19.6%}
.gu-ring{bottom:7.5%!important}
/* phones: breathing room between the vehicle and the title */
@media (max-width:899px){.start-hero .start-copy{margin-top:26px}}
@media (max-width:899px) and (max-height:700px){.start-hero .start-copy{margin-top:16px}}
@media (max-width:899px) and (max-height:620px){.start-hero .gu{width:min(72vw,340px)}}

/* the glow-up label's "from ... to": a drawn chevron in an asphalt disc, not a text arrow */
.gu-arrow{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#1F2328;vertical-align:-4px;margin:0 2px}
.gu-arrow svg{width:13px;height:13px;fill:none;stroke:#FFD60A;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}

/* ---- The intro after the design manual (Figma: Forside, Knapper, Svarkort, Kort, Fremskridt) ----
   The first screen is the manual's cover: signal yellow with white signal stripes and grit, the big ExtraBold
   headline, and the dark button, which the manual keeps for yellow surfaces. The steps are white app pages
   with the manual's components: a yellow progress bar on a grey track, answer cards, cards and the yellow button. */
body.start-mode .start-hero{background:repeating-linear-gradient(118deg,rgba(255,255,255,.24) 0 56px,rgba(255,255,255,0) 56px 132px),var(--grain-ink) 0 0/200px 200px,#FFD60A!important}
body.start-mode .start-hero .start-cta{background:#1F2328!important;color:#FFFFFF!important;border:0!important;box-shadow:0 4px 0 rgba(0,0,0,.5)!important;font:700 18px var(--font-display)}
body.start-mode .start-hero .start-cta:active{translate:0 4px;box-shadow:none!important}
body.start-mode .start-kicker{display:block;width:max-content;max-width:100%;margin:0 auto 10px;padding:6px 12px;border-radius:999px;background:#1F2328;color:#FFD60A;font:800 12px/1.2 var(--font-display);letter-spacing:.08em;text-transform:uppercase}
/* the steps: white pages */
body.start-mode .step-bar{height:12px;background:#E3E5E8}
body.start-mode .step-bar i{background:#FFD60A;box-shadow:inset 0 -3px 0 #E8BC00}
body.start-mode .step-bar i::after{background:rgba(255,255,255,.55)}
/* answer cards (Svarkort): white with a 2 px edge; chosen is light yellow with a yellow edge */
body.start-mode .step-option{background:#FFFFFF;border:2px solid #E3E5E8;box-shadow:0 4px 0 #E3E5E8;border-radius:18px;padding:16px 18px}
body.start-mode .step-option.is-on{background:#FFF6C7;border-color:#E8BC00;box-shadow:0 4px 0 #C9A200}
/* cards (Kort): 2 px Asfalt 200 edge and a 0 4 0 shadow in the same colour */
body.start-mode :is(.step-first,.step-earn,.plan-list li){background:#FFFFFF;border:2px solid #E3E5E8;box-shadow:0 4px 0 #E3E5E8;border-radius:18px}
/* the steps' button is the primary yellow button */
body.start-mode .step-foot .start-cta{background:#FFD60A!important;color:#1F2328!important;border:0!important;box-shadow:0 4px 0 #C9A200!important;font:700 18px var(--font-display)}
body.start-mode .step-foot .start-cta:active{translate:0 4px;box-shadow:none!important}
@media (min-width:900px){body.start-mode .start-kicker{margin-left:0}}

/* ---- Min bil: try on before buying, and "Bland min bil" ---- */
/* the dice: a yellow die with ink pips in the ink coin */
.mybil-dream-ico svg rect{fill:var(--dream-spark)}
.mybil-dream-ico svg circle.s{fill:var(--dream-coin);animation:none}
.mybil-dream[data-mybil-shuffle]:active .mybil-dream-ico svg{animation:dice-roll .5s var(--out)}
@keyframes dice-roll{from{rotate:-200deg;scale:.7}}
/* locked: the price under the name, a padlock feel through the muted coin */
.mybil-dream.is-locked{min-height:56px;padding-right:24px;text-align:left}
.mybil-dream.is-locked > span:last-child{display:flex;flex-direction:column;line-height:1.15}
.mybil-dream.is-locked small{display:flex;align-items:center;gap:4px;margin-top:2px;font:700 12px var(--font-text);opacity:.85}
.mybil-dream:disabled{opacity:.6;cursor:not-allowed;box-shadow:none;translate:none}
/* the bar under the car while you try something on */
.mybil-try{display:flex;align-items:center;gap:10px;margin:12px auto 0;max-width:520px;padding:8px 8px 8px 16px;border-radius:18px;background:#1F2328;color:#FFFFFF;box-shadow:0 4px 0 #000;animation:reveal .3s var(--out)}
.mybil-try-text{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.15}
.mybil-try-text small{font:800 11px/1.2 var(--font-display);letter-spacing:.1em;text-transform:uppercase;color:#FFD60A}
.mybil-try-text strong{font:800 17px/1.2 var(--font-display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mybil-try-buy{display:inline-flex;align-items:center;gap:6px;min-height:46px;padding:0 18px;border:0;border-radius:14px;background:var(--gloss),#FFD60A;color:#1F2328;font:700 16px var(--font-display);box-shadow:0 4px 0 #C9A200;cursor:pointer;white-space:nowrap}
.mybil-try-buy:active{translate:0 4px;box-shadow:none}
.mybil-try-buy:disabled{background:#3A434C;color:#C2CCD6;box-shadow:none;cursor:not-allowed}
.mybil-try-off{display:grid;place-items:center;flex:none;width:46px;height:46px;border:0;border-radius:14px;background:#3A434C;color:#FFFFFF;cursor:pointer}
.mybil-try-off svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
/* the part you try on: a dashed yellow edge, so it reads as "not bought yet" */
.mybil-item.is-trying{outline:3px dashed #E8BC00;outline-offset:-3px}
/* the dice roll: the car shakes on its springs */
.mybil-stage.is-shuffled .mybil-rig{animation:shuffle-shake .8s var(--spring)}
@keyframes shuffle-shake{15%{translate:-6px 0;rotate:-2deg}30%{translate:6px -4px;rotate:2deg}45%{translate:-4px 0;rotate:-1deg}60%{translate:3px -2px;rotate:.5deg}}
@media (prefers-reduced-motion:reduce){.mybil-try{animation:none}.mybil-stage.is-shuffled .mybil-rig{animation:none}}