/* Envini Energie-Check – auto-running showcase of the ENDKUNDEN/Autopilot app.
   Replicates the customer journey of the old a/3d4e4c28 app in a new Envini look.
   Palette from the Vision-Deck. No framework, no backend, no external URLs. */
:root{
  --brand:#64a9e4; --brand2:#2f6fae;
  --envini:#ffc22e; --envini2:#ffb300; --envini-soft:rgba(255,194,46,.14);
  --ok:#22c55e; --ok-soft:rgba(34,197,94,.14);
  --muted:#94a3b8; --line:rgba(148,163,184,.18);
  --panel:rgba(255,255,255,.055); --panel2:#0a1424;
  --bg1:#060d1c; --bg2:#0b1830; --bg3:#0f2547;
  --radius:18px; --shadow:0 30px 70px rgba(3,10,25,.55);
  /* in-app (screen) light-ish surface for contrast against dark shell */
  --sc-bg:#0e1a30; --sc-card:#132340; --sc-line:rgba(148,163,184,.22);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Inter','Segoe UI',system-ui,Arial,sans-serif;color:#e8eef7;background:#04070f;
  min-height:100vh;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
.bg{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(circle at 12% 8%, rgba(100,169,228,.15), transparent 42%),
    radial-gradient(circle at 88% 92%, rgba(255,194,46,.10), transparent 46%),
    linear-gradient(155deg,var(--bg1),var(--bg2) 55%,var(--bg3))}
.wrap{width:min(1120px,100%);margin-inline:auto;padding-inline:24px}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--envini);color:#111;padding:10px 16px;font-weight:800;z-index:20}
.skip-link:focus{left:0}

/* Topbar */
.topbar{padding:18px 0}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none}
.brand-mark{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;
  background:var(--envini-soft);border:1px solid rgba(255,194,46,.3);overflow:hidden}
.brand-mark img{width:28px;height:28px;object-fit:contain}
.brand-name{font-size:18px;font-weight:800;letter-spacing:-.01em}
.brand-sub{font-size:12px;font-weight:700;color:#9fc6ee;padding:3px 9px;border-radius:999px;
  background:rgba(100,169,228,.12);border:1px solid rgba(100,169,228,.28)}
.demo-flag{display:inline-flex;align-items:center;gap:8px;padding:6px 13px;border-radius:999px;
  background:var(--envini-soft);border:1px solid rgba(255,194,46,.34);color:#ffd873;
  font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.demo-flag .dot{width:7px;height:7px;border-radius:50%;background:var(--envini);box-shadow:0 0 10px var(--envini)}

/* Stage layout */
.stage{padding:14px 0 44px}
.stage-inner{display:grid;grid-template-columns:250px 1fr;
  grid-template-areas:'pilot board' 'controls board';
  grid-template-rows:auto 1fr;gap:16px 30px;align-items:start}
.pilot{grid-area:pilot}
.board{grid-area:board}
.stage-inner>.pilot-controls{grid-area:controls;align-self:start}

/* Pilot column */
.pilot{position:relative;display:flex;flex-direction:column;gap:14px}
.pilot-top{position:relative;display:flex;justify-content:center;padding-top:6px}
.pilot-glow{position:absolute;top:0;width:150px;height:150px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,194,46,.3),transparent 66%);filter:blur(4px)}
.pilot-img{position:relative;width:132px;height:132px;object-fit:contain;
  filter:drop-shadow(0 16px 34px rgba(255,180,0,.34));animation:float 4s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.pilot-bubble{position:relative;background:var(--panel2);border:1px solid rgba(255,194,46,.28);
  border-radius:14px;padding:13px 15px;font-size:13.5px;line-height:1.45;color:#eef4fb;
  box-shadow:0 14px 30px rgba(3,10,25,.4);min-height:64px}
.pilot-bubble::before{content:'';position:absolute;top:-8px;left:34px;width:14px;height:14px;
  background:var(--panel2);border-left:1px solid rgba(255,194,46,.28);border-top:1px solid rgba(255,194,46,.28);transform:rotate(45deg)}
.bubble-txt{display:block;animation:bubbleIn .35s ease}
@keyframes bubbleIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

.chapters{list-style:none;display:grid;gap:6px;margin-top:2px}
.chapters li{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:11px;
  background:var(--panel2);border:1px solid var(--line);opacity:.5;
  transition:opacity .3s,border-color .3s,background .3s}
.chapters li.active{opacity:1;border-color:rgba(255,194,46,.45);background:var(--envini-soft)}
.chapters li.done{opacity:1;border-color:rgba(34,197,94,.35)}
.chapters .c-ic{font-size:15px;flex:none}
.chapters .c-tx{font-size:12.5px;font-weight:700;color:#dbe6f5}
.chapters li.done .c-tx::after{content:' ✓';color:#86efac}

.pilot-controls{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.mini-btn{border:1px solid var(--line);background:rgba(255,255,255,.06);color:#cdd9e8;
  border-radius:10px;padding:10px 14px;font:800 13px/1 'Inter','Segoe UI',sans-serif;cursor:pointer;
  text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:7px;
  transition:border-color .2s,background .2s}
.mini-btn:hover{border-color:rgba(255,194,46,.5);color:#fff}
.mini-btn.ghost{background:transparent}

/* Board */
.board{background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:26px}
.board-head{margin-bottom:18px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;padding:5px 12px;border-radius:999px;
  background:rgba(100,169,228,.12);border:1px solid rgba(100,169,228,.3);
  font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#9fc6ee}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--brand);box-shadow:0 0 12px var(--brand)}
.board h1{margin-top:12px;font-size:clamp(22px,3vw,30px);line-height:1.1;font-weight:800;letter-spacing:-.015em}
.board-sub{margin-top:8px;max-width:560px;font-size:14.5px;line-height:1.5;color:#b6c4d8}

/* Phone frame */
.phone{width:min(390px,100%);margin:0 auto;background:#02060f;
  border:1px solid rgba(148,163,184,.28);border-radius:38px;padding:12px;
  box-shadow:0 40px 90px rgba(3,10,25,.6),inset 0 0 0 2px rgba(255,255,255,.03);position:relative}
.phone-notch{position:absolute;top:12px;left:50%;transform:translateX(-50%);
  width:120px;height:22px;background:#02060f;border-radius:0 0 14px 14px;z-index:3}
.screen{background:var(--sc-bg);border-radius:28px;overflow:hidden;height:600px;position:relative;
  display:flex;flex-direction:column}

.app-bar{display:flex;align-items:center;justify-content:space-between;padding:16px 16px 10px;
  border-bottom:1px solid var(--sc-line);flex:none}
.app-brand{display:inline-flex;align-items:center;gap:7px;font-weight:800;font-size:14px}
.app-brand img{width:20px;height:20px}
.app-tag{font-size:11px;font-weight:700;color:#9fc6ee;padding:3px 9px;border-radius:999px;
  background:rgba(100,169,228,.14);border:1px solid rgba(100,169,228,.28)}

/* Views – one focus step at a time; states cross-transform in place.
   Each view is layered; the incoming one slides+fades in over the outgoing,
   so on mobile the flow reads as ONE transforming work area, not a page stack. */
.view{position:absolute;inset:49px 0 0 0;overflow:hidden;padding:0;
  display:flex;flex-direction:column}
.view[hidden]{display:none !important}
/* incoming */
.view.in-now{opacity:1;transform:none;animation:viewIn .55s cubic-bezier(.22,.61,.36,1)}
/* outgoing – kept visible briefly, layered under the incoming, then hidden by JS */
.view.out-now{opacity:0;transform:translateY(-12px) scale(.985);z-index:0;
  pointer-events:none;animation:viewOut .42s cubic-bezier(.4,0,.7,.2) forwards}
.view.in-now{z-index:1}
@keyframes viewIn{from{opacity:0;transform:translateY(16px) scale(.99)}to{opacity:1;transform:none}}
@keyframes viewOut{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-12px) scale(.985)}}
.app-hero{padding:20px 18px 16px;background:linear-gradient(135deg,rgba(100,169,228,.16),rgba(255,194,46,.08));border-bottom:1px solid var(--sc-line)}
.app-hero.sm{padding:16px 18px 14px}
.app-hero.center{text-align:center}
.app-badge{display:inline-block;background:var(--envini-soft);border:1px solid rgba(255,194,46,.34);
  color:#ffd873;padding:5px 11px;border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.03em;margin-bottom:10px}
.app-hero h2{font-size:19px;line-height:1.2;font-weight:800}
.app-hero p{margin-top:7px;font-size:13px;color:#b6c4d8;line-height:1.5}
.app-body{padding:16px 18px;overflow:auto;flex:1}

/* Fields / buttons (in-app) */
.fld{display:block;margin-bottom:12px}
.fld>span{display:block;font-size:12px;font-weight:700;color:var(--muted);margin-bottom:5px}
.fld input{width:100%;padding:11px 12px;border:1px solid var(--sc-line);border-radius:11px;
  font-size:14px;background:#0a1424;color:#eef4fb}
.fld.ro{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 12px;border:1px solid var(--sc-line);border-radius:11px;background:#0a1424;margin-bottom:12px}
.fld.ro>span{margin:0;font-size:12px}
.fld.ro>b{font-size:13.5px;font-variant-numeric:tabular-nums}
.app-btn{width:100%;border:0;border-radius:12px;padding:14px;font-size:15px;font-weight:800;cursor:pointer;
  background:linear-gradient(120deg,var(--envini),var(--envini2));color:#241a00;
  box-shadow:0 12px 24px rgba(255,180,0,.26);transition:transform .05s,box-shadow .2s,opacity .2s}
.app-btn.ghost{background:rgba(255,255,255,.06);color:#cdd9e8;border:1px solid var(--sc-line);box-shadow:none}
.app-btn:disabled{opacity:.45;box-shadow:none;cursor:default}
.app-btn.pressed{transform:scale(.97)}
.or{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:12px;margin:14px 0}
.or::before,.or::after{content:'';flex:1;height:1px;background:var(--sc-line)}
.trust{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:14px}
.trust span{font-size:11.5px;color:var(--muted)}

/* Upload */
.drop{border:2px dashed rgba(148,163,184,.4);border-radius:16px;padding:26px 16px;text-align:center;
  background:#0a1424;transition:border-color .25s,background .25s,transform .25s}
.drop.drag{border-color:var(--envini);background:var(--envini-soft);transform:translateY(-2px)}
.drop-ic{font-size:34px;margin-bottom:8px}
.drop b{display:block;font-size:15px}
.drop span{display:block;font-size:12.5px;color:var(--muted);margin-top:3px}
.filerow{display:flex;align-items:center;gap:11px;margin-top:12px;padding:11px 13px;
  border:1px solid var(--sc-line);border-radius:12px;background:#0a1424;animation:bubbleIn .3s ease}
.filerow .fic{font-size:18px}.filerow .fname{flex:1;font-size:13px;font-weight:600}
.filerow .fok{color:#86efac;font-weight:900}
#v-upload .app-btn{margin-top:14px}

/* Analysis */
#v-proc{padding:20px 18px}
.scanner{position:relative;width:110px;height:138px;margin:8px auto 20px}
.doc{position:absolute;inset:0;background:#f4f6fb;border-radius:10px;overflow:hidden;box-shadow:0 14px 30px rgba(3,10,25,.5)}
.doc::before{content:"";position:absolute;left:14px;right:14px;top:18px;height:7px;border-radius:4px;background:#cbd5e1;
  box-shadow:0 16px 0 #cbd5e1,0 32px 0 #cbd5e1,0 48px 0 #e2e8f0,0 64px 0 #e2e8f0,0 80px 0 #e2e8f0}
.scanline{position:absolute;left:0;right:0;height:3px;top:0;
  background:linear-gradient(90deg,transparent,var(--envini),transparent);
  box-shadow:0 0 14px 2px rgba(255,194,46,.7);animation:scan 1.4s ease-in-out infinite}
@keyframes scan{0%{top:6%}50%{top:92%}100%{top:6%}}
.spark{position:absolute;top:-12px;right:-8px;font-size:20px;animation:pop 1.4s ease-in-out infinite}
@keyframes pop{0%,100%{transform:scale(.8);opacity:.5}50%{transform:scale(1.15);opacity:1}}
.proc-steps{list-style:none;display:flex;flex-direction:column;gap:10px}
.proc-steps li{display:flex;align-items:center;gap:11px;padding:11px 13px;border:1px solid var(--sc-line);
  border-radius:12px;background:#0a1424;opacity:.45;transition:opacity .35s,border-color .35s,background .35s;font-size:13.5px;font-weight:600}
.proc-steps li .pd{width:24px;height:24px;flex:none;border-radius:50%;display:grid;place-items:center;
  font-size:12px;font-weight:800;background:rgba(148,163,184,.2);color:var(--muted);transition:background .35s,color .35s}
.proc-steps li.active{opacity:1;border-color:rgba(255,194,46,.45);background:var(--envini-soft)}
.proc-steps li.active .pd{background:var(--envini);color:#241a00}
.proc-steps li.done{opacity:1;border-color:rgba(34,197,94,.35)}
.proc-steps li.done .pd{background:var(--ok);color:#04240f}

/* Results */
#v-results{overflow:auto}
.res-head{padding:16px 18px 8px;text-align:center}
.confetti{font-size:26px}
.res-head h2{font-size:16px;line-height:1.25;margin-top:4px}
.res-head h2 b{color:#86efac}
.cur{margin-top:8px;display:inline-block;font-size:12px;color:var(--muted);background:#0a1424;
  border:1px solid var(--sc-line);border-radius:999px;padding:6px 13px}
.cur b{color:#eef4fb}
.tariffs{display:flex;flex-direction:column;gap:11px;padding:8px 18px 18px;min-width:0}
.tariff{border:1px solid var(--sc-line);border-radius:15px;padding:14px;background:var(--sc-card);
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:5px 12px;align-items:center;
  min-width:0;opacity:0;transform:translateY(14px)}
.tariff>div{min-width:0}
.tariff.in{opacity:1;transform:none;animation:rise .45s ease}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.tariff.best{border-color:rgba(255,194,46,.5);box-shadow:0 10px 26px rgba(255,180,0,.14)}
.t-badge{grid-column:1/-1;justify-self:start;font-size:10.5px;font-weight:800;letter-spacing:.03em;
  padding:3px 9px;border-radius:999px;background:rgba(100,169,228,.14);color:#9fc6ee}
.tariff.best .t-badge{background:var(--envini);color:#241a00}
.t-name{font-weight:800;font-size:14.5px;overflow-wrap:anywhere}
.t-prov{font-size:12px;color:var(--muted)}
.t-right{text-align:right;min-width:0}
.t-save{font-size:18px;font-weight:900;color:#86efac;line-height:1.05;white-space:nowrap}
.t-save small{display:block;font-size:10.5px;font-weight:600;color:var(--muted);white-space:normal}
.t-cost{font-size:11.5px;color:var(--muted);margin-top:2px;white-space:nowrap}
.t-feat{grid-column:1/-1;display:flex;gap:6px;flex-wrap:wrap;margin-top:3px}
.t-feat span{font-size:10.5px;color:var(--muted);background:#0a1424;border:1px solid var(--sc-line);border-radius:7px;padding:3px 7px}
.t-cta{grid-column:1/-1;margin-top:8px;border:0;border-radius:11px;padding:10px;font-weight:800;font-size:13px;
  background:rgba(100,169,228,.16);color:#9fc6ee;cursor:pointer}
.tariff.best .t-cta{background:linear-gradient(120deg,var(--envini),var(--envini2));color:#241a00}

/* Detail */
#v-detail{overflow:auto}
.det-head{padding:18px 18px 16px;background:linear-gradient(135deg,rgba(100,169,228,.16),rgba(255,194,46,.08));border-bottom:1px solid var(--sc-line)}
.det-badge{display:inline-block;background:rgba(255,194,46,.18);color:#ffd873;padding:5px 11px;border-radius:999px;font-size:11px;font-weight:800;margin-bottom:10px}
.det-ai{font-size:12px;color:#9fc6ee}
.det-prov{font-size:12.5px;color:var(--muted);margin-top:6px}
.det-head h2{font-size:22px;line-height:1.1;margin:2px 0 12px}
.det-save{background:rgba(255,255,255,.06);border-radius:13px;padding:12px 14px;display:flex;align-items:baseline;gap:9px}
.det-save b{font-size:26px;font-weight:900;color:#86efac}
.det-save span{font-size:12px;color:var(--muted)}
.cmp{width:calc(100% - 36px);margin:14px 18px;border-collapse:collapse}
.cmp td{padding:9px 6px;font-size:13px;border-bottom:1px solid var(--sc-line);text-align:right}
.cmp td:first-child{text-align:left;color:var(--muted)}
.cmp .neu{color:#8ec5f6;font-weight:800}
.cmp tr.total td{font-weight:900;font-size:14px;border-bottom:0;border-top:2px solid var(--sc-line)}
.cmp .save{color:#86efac;font-size:11px;display:block}
.det-form{padding:4px 18px 18px}
.apopt{display:flex;gap:11px;align-items:flex-start;border:2px solid rgba(255,194,46,.45);border-radius:14px;
  padding:13px 14px;margin:4px 0 14px;background:var(--envini-soft);cursor:default}
.apopt-check{width:22px;height:22px;flex:none;border-radius:6px;background:var(--envini);color:#241a00;
  display:grid;place-items:center;font-weight:900;font-size:14px}
.apopt b{font-size:13.5px}.apopt small{display:block;color:var(--muted);font-size:12px;line-height:1.45;margin-top:3px}

/* Autopilot */
#v-autopilot{overflow:auto}
.ap-bot{font-size:38px}
.rules{display:grid;gap:9px;margin-bottom:14px}
.rule{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 13px;
  border:1px solid var(--sc-line);border-radius:12px;background:#0a1424;font-size:13px}
.rule b{color:#ffd873;font-weight:800}
.rule .tog{width:40px;height:22px;border-radius:999px;background:var(--envini);position:relative;flex:none}
.rule .tog::before{content:'';position:absolute;width:16px;height:16px;border-radius:50%;background:#241a00;top:3px;right:3px}
.rule .tog.off{background:rgba(148,163,184,.35)}
.rule .tog.off::before{left:3px;right:auto;background:#eef4fb}
.sig{margin:6px 0 14px}
.sig-label{font-size:12px;font-weight:700;color:var(--muted);display:block;margin-bottom:6px}
.sig-pad{width:100%;height:80px;border:2px dashed rgba(148,163,184,.4);border-radius:12px;background:#0a1424}
#sigPath{stroke-dasharray:1;stroke-dashoffset:1}
#sigPath.draw{animation:sign 1.6s ease forwards}
@keyframes sign{to{stroke-dashoffset:0}}
.ap-done{text-align:center;margin-top:16px;padding-top:16px;border-top:1px solid var(--sc-line);animation:bubbleIn .4s ease}
.ap-pill{display:inline-flex;align-items:center;gap:7px;background:var(--ok-soft);color:#86efac;
  border:1px solid rgba(34,197,94,.4);border-radius:999px;padding:6px 13px;font-weight:800;font-size:12.5px}
.ap-check{font-size:40px;margin:8px 0 4px}
.ap-done b{font-size:16px;display:block}
.ap-done p{font-size:12.5px;color:var(--muted);line-height:1.5;margin-top:6px}

/* Account */
#v-account{overflow:auto}
.acc-cards{display:grid;grid-template-columns:1fr 1fr 1fr;gap:9px;margin-bottom:14px}
.acc-card{border:1px solid var(--sc-line);border-radius:13px;padding:12px 11px;background:#0a1424}
.acc-card .k{font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:700;display:block}
.acc-card .v{font-size:17px;font-weight:900;margin-top:5px;color:#ffd873}
.acc-card .v.ok{color:#86efac;font-size:15px}
.ls-list{display:grid;gap:10px}
.ls-item{border:1px solid var(--sc-line);border-radius:13px;padding:13px 14px;background:var(--sc-card)}
.ls-top{display:flex;align-items:center;gap:10px}
.ls-ic{width:34px;height:34px;flex:none;border-radius:10px;display:grid;place-items:center;font-size:17px;background:#0a1424}
.ls-t{font-weight:800;font-size:13.5px}
.ls-s{font-size:11.5px;color:var(--muted)}
.ls-ap{margin-left:auto;font-size:10.5px;font-weight:800;padding:3px 9px;border-radius:999px}
.ls-ap.on{background:var(--ok-soft);color:#86efac}
.ls-ap.check{background:var(--envini-soft);color:#ffd873}
.ls-meta{display:flex;justify-content:space-between;gap:10px;margin-top:10px;padding-top:10px;border-top:1px solid var(--sc-line);font-size:12px}
.ls-meta .save{color:#86efac;font-weight:800}

.fic-note{margin-top:16px;font-size:12px;color:var(--muted);text-align:center;line-height:1.5;max-width:560px;margin-inline:auto}

/* Responsive */
@media (max-width:860px){
  .stage-inner{grid-template-columns:1fr;gap:18px}
  .pilot{flex-direction:column}
  .pilot-top{padding-top:2px}
  .pilot-img{width:100px;height:100px}
  .chapters{grid-template-columns:1fr 1fr}
  .pilot-controls{flex-direction:row}
  .pilot-controls .mini-btn{flex:1}
}

/* ---- Mobile: ONE focused, transforming work area (no stacked sections) ----
   Below 720px the demo reorganizes into a compact vertical rail:
   [compact pilot + bubble] → [horizontal step strip] → [the phone as the hero]
   → [controls]. The chapter list becomes a slim progress strip, the board
   heading collapses, and the phone screen fills the viewport so the eye stays
   on the single transforming screen while states cross-fade in place. */
@media (max-width:720px){
  .stage{padding:8px 0 28px}
  .stage-inner{display:flex;flex-direction:column;gap:12px}

  /* Pilot block = the full top dock. Its own children reorder here:
     avatar+bubble on one row, chapter strip full-width below, controls last.
     (Controls are moved visually AFTER the phone via order on .stage-inner
     children isn't possible – so we keep them compact at the dock bottom.) */
  .pilot{order:1;display:grid;
    grid-template-columns:52px 1fr;
    grid-template-areas:'av bub' 'strip strip';
    gap:10px 12px;align-items:center}
  .pilot-top{grid-area:av;padding:0;justify-content:flex-start}
  .pilot-glow{width:60px;height:60px;top:-4px;left:-4px}
  .pilot-img{width:52px;height:52px}
  .pilot-bubble{grid-area:bub;min-height:0;padding:10px 13px;font-size:13px}
  .pilot-bubble::before{display:none}

  /* chapter list -> horizontal, swipe-free progress strip (full width row) */
  .chapters{grid-area:strip;display:flex;gap:7px;overflow-x:auto;padding:2px 0 4px;margin:0;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .chapters::-webkit-scrollbar{display:none}
  .chapters li{flex:0 0 auto;padding:7px 11px;border-radius:999px;gap:6px;opacity:.42}
  .chapters li.active{transform:none}
  .chapters .c-tx{font-size:11.5px;white-space:nowrap}
  /* on the strip, show only the active/done labels fully; others just the icon */
  .chapters li:not(.active):not(.done) .c-tx{display:none}

  /* board: heading collapses so the phone is the hero */
  .board{order:2;background:transparent;border:0;padding:0;border-radius:0}
  .board-head{margin-bottom:10px;text-align:center}
  .board .eyebrow{display:none}
  .board h1{margin-top:0;font-size:19px}
  .board-sub{margin:6px auto 0;font-size:13px;max-width:none}

  /* the phone fills the width and grows to a comfortable app height */
  .phone{width:100%;max-width:420px;padding:10px;border-radius:32px}
  .screen{height:min(72vh,620px);border-radius:26px}

  /* controls: own stage item, sits right under the phone */
  .stage-inner>.pilot-controls{order:3;display:flex;flex-direction:row;gap:8px;margin-top:2px}
  .stage-inner>.pilot-controls .mini-btn{flex:1}

  .fic-note{order:4;margin-top:12px;font-size:11.5px}
}
@media (max-width:520px){
  .wrap{padding-inline:12px}
  .brand-sub,.demo-flag .dot{display:none}
  .demo-flag{padding:5px 10px;font-size:10px}
  .acc-cards{grid-template-columns:1fr 1fr 1fr;gap:6px}
  .acc-card{padding:10px 8px}
  .acc-card .v{font-size:15px}
  .board h1{font-size:18px}

  /* ---- Results slide: on narrow phones the name/price two-column grid
     squeezed the price ("273,85 €" broke onto its own line and ran off the
     edge). Restack the card to a single readable column: name+provider on
     top, the savings figure as its own full-width row underneath. ---- */
  .res-head{padding:14px 16px 6px}
  .res-head h2{font-size:15px}
  .tariffs{padding:8px 14px 16px;gap:10px}
  .tariff{grid-template-columns:1fr;padding:13px;gap:7px 0}
  .tariff .t-right{grid-column:1/-1;text-align:left;display:flex;align-items:baseline;
    gap:8px 10px;flex-wrap:wrap;
    padding-top:8px;margin-top:2px;border-top:1px solid var(--sc-line)}
  .tariff .t-save{font-size:20px}
  .tariff .t-save small{display:inline;font-size:11px;margin-left:4px}
  .tariff .t-cost{margin-top:0}
  .tariff .t-feat{margin-top:1px}
  .tariff .t-feat span{font-size:10px;padding:3px 6px}
}
/* very small phones: keep the screen usable */
@media (max-width:380px){
  .screen{height:min(74vh,560px)}
  .app-hero h2{font-size:17px}
  .res-head h2{font-size:14px}
  .tariff .t-save{font-size:18px}
}
@media (prefers-reduced-motion:reduce){
  .pilot-img{animation:none}.scanline{animation:none;opacity:.4}.spark{animation:none}
  .view{animation:none}.tariff{animation:none;opacity:1;transform:none}
  #sigPath.draw{animation:none;stroke-dashoffset:0}
}