/* pages/drivers.css — the BCR Driver page (#4304), on top of story.css. The phone frame and its screens are
   authored, generic iPhone-style mockups (dark; the footer says every name and figure is fictional); pages/drivers.js builds the status
   bars, steppers, tab bars and photo silhouettes and drives the screens. Every hidden-until-played state is either
   authored in its final state in the HTML (drivers.js resets it when the stage plays) or sits under html.story,
   so the page reads in full with JavaScript off or the engine blocked. */

/* ---------- labels: coming soon, planned ---------- */
.soon{display:inline-flex;align-items:center;gap:7px;font:600 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--good);
  border:1px solid oklch(0.78 0.16 165 / .4);background:oklch(0.78 0.16 165 / .10);border-radius:999px;padding:4px 10px;white-space:nowrap}
.soon .dot{width:6px;height:6px}
.plan{display:inline-flex;align-items:center;gap:6px;font:600 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--v-amber);
  border:1px solid rgba(251,191,36,.4);background:rgba(251,191,36,.10);border-radius:999px;padding:3px 9px;white-space:nowrap;vertical-align:middle}
.ch .eyebrow .plan{margin-left:4px}
.head .lede .plan{font-size:9px;padding:2px 7px}
.tag-plan{position:absolute;z-index:4}
.hero .eyebrow{flex-wrap:wrap;row-gap:8px}

/* the How rows stagger by --i, the notify lede sits under its heading */
#how .srow:nth-child(1),#faq .srow:nth-child(1){--i:0}
#how .srow:nth-child(2),#faq .srow:nth-child(2){--i:1}
#how .srow:nth-child(3),#faq .srow:nth-child(3){--i:2}
#how .srow:nth-child(4),#faq .srow:nth-child(4){--i:3}
.notify__lede{margin-top:14px}

/* keep the stage's side fades, but let compositions run to the bottom (phones are tall) */
.stage .art{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 90%,transparent 100%),linear-gradient(180deg,#000 95%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 90%,transparent 100%),linear-gradient(180deg,#000 95%,transparent 100%)}
html:not(.story) .stage .art{-webkit-mask-image:none;mask-image:none}

/* ---------- phone frame (authored, generic) ---------- */
.ph{position:absolute;width:268px;height:560px;border-radius:42px;background:linear-gradient(160deg,#1a2238,#0a0d18 40%,#0a0d18 60%,#182036);padding:9px;
  box-shadow:0 0 0 1px rgba(255,255,255,.08),inset 0 0 0 1.5px #05060c,0 36px 80px rgba(0,0,0,.6),0 0 60px rgba(0,224,255,.06)}
.ph::before,.ph::after{content:"";position:absolute;background:#1c2540;border-radius:2px}
.ph::before{right:-3px;top:150px;width:3px;height:64px}
.ph::after{left:-3px;top:120px;width:3px;height:92px;box-shadow:0 -40px 0 0 #1c2540}
.ph .isl{position:absolute;left:50%;top:18px;transform:translateX(-50%);width:78px;height:22px;border-radius:12px;background:#05060c;z-index:6}
.scr{position:relative;width:100%;height:100%;border-radius:34px;background:var(--v-bg);overflow:hidden;font:12px/1.4 var(--ui);color:var(--v-text);-webkit-font-smoothing:antialiased}
.sb{position:absolute;left:0;right:0;top:0;height:46px;display:flex;justify-content:space-between;align-items:flex-end;padding:0 24px 8px;font:600 13px var(--ui);z-index:5;pointer-events:none}
.sb .ic{display:flex;gap:5px;align-items:center}
.sb svg{display:block}
/* screens: stacked views, one .cur at a time. A screen that has faded out is also hidden, so its words are not
   on the page (for assistive tech, find-in-page and the contrast check) while another screen sits on top. */
.v{position:absolute;inset:0;display:flex;flex-direction:column;padding:52px 14px 14px;opacity:0;transform:translateX(26px);visibility:hidden;
  transition:opacity .45s ease,transform .5s cubic-bezier(.2,.8,.2,1),visibility 0s linear .5s;pointer-events:none}
.v.cur{opacity:1;transform:none;visibility:visible;transition-delay:0s;pointer-events:auto}
.v.lock,.v.boot{padding-top:0}
.v.tabbed{padding-bottom:70px}
.apbar{display:flex;align-items:center;gap:10px;min-height:32px;margin-bottom:10px}
.apbar .h{margin:0;font:600 17px/1.2 var(--ui);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.apbar .h.sm{font-size:15px}
.apbar .back{width:28px;height:28px;display:grid;place-items:center;color:var(--v-cyan)}
.apbar>div{min-width:0;flex:1}
.apbar .sub{display:block;color:var(--v-text2);font-size:11.5px;margin:0;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.apbar .r{margin-left:auto}
.apbar .chip{font-size:10px}
.apcard{background:var(--v-card);border:1px solid var(--v-border);border-radius:12px;padding:12px;margin-bottom:10px}
.apcard .lbl{margin-bottom:6px}
.apcard .h{display:block;margin:0 0 2px;font:600 14px/1.25 var(--ui)}
.apcard .m{color:var(--v-text2);font-size:11.5px}
.apcard.empty{text-align:center;padding:26px 14px}
.apbtn{display:flex;align-items:center;justify-content:center;gap:8px;height:48px;border-radius:12px;background:var(--v-cyan);color:#06111a;font:700 13px var(--ui);letter-spacing:.02em;border:0;width:100%;position:relative;overflow:hidden;transition:background .4s,color .4s,opacity .4s}
.apbtn.ghost{background:var(--v-card2);color:var(--v-text);border:1px solid var(--v-border-hi)}
.apbtn.ok{background:var(--v-emerald)}
.apbtn.dis{background:var(--v-card2);color:var(--v-text2);border:1px solid var(--v-border)}
.apbtn.caps{text-transform:uppercase;letter-spacing:.08em;font-size:12px}
.apbtn.slim{height:40px;margin-top:10px;font-size:12px}
.apbtn svg{flex:none}
.ap-kv{display:grid;grid-template-columns:72px minmax(0,1fr);gap:5px 10px;font-size:12px;margin:0}
.ap-kv dt{color:var(--v-text2)}.ap-kv dd{margin:0}
.ap-kv .mono{font-size:11.5px;letter-spacing:.01em}
.hint{color:var(--v-text2);font-size:11px;line-height:1.45}
.spacer{flex:1}
.rel{position:relative}
/* filters + job cards */
.filt{display:flex;gap:6px;margin-bottom:10px}
.filt span{font:600 11px var(--ui);padding:5px 10px;border-radius:999px;background:var(--v-card);border:1px solid var(--v-border);color:var(--v-text2)}
.filt span.on{background:rgba(0,224,255,.12);border-color:rgba(0,224,255,.35);color:var(--v-cyan)}
.job{background:var(--v-card);border:1px solid var(--v-border);border-radius:12px;padding:11px 12px;margin-bottom:8px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 8px}
.job b{font-size:13px}.job .m{color:var(--v-text2);font-size:11.5px;grid-column:1/-1}
.job .chip{font-size:10px}
.job .id{font:500 11px var(--ui-mono);color:var(--v-text2)}
.job.hi{border-color:rgba(0,224,255,.4);box-shadow:0 0 0 3px rgba(0,224,255,.08)}
.job .stp{grid-column:1/-1;margin-bottom:2px}
/* 6-step stepper */
.stp{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));margin:4px 0 10px;position:relative}
.stp i{display:block;position:relative;height:46px}
.stp i::before{content:"";position:absolute;left:50%;top:22px;width:100%;height:2px;background:var(--v-border);transition:background .4s}
.stp i:last-child::before{display:none}
.stp i::after{content:"";position:absolute;left:50%;top:17px;width:12px;height:12px;border-radius:50%;background:var(--v-bg);border:2px solid var(--v-border-hi);transform:translateX(-50%);transition:all .4s;box-sizing:border-box}
.stp i span{position:absolute;top:0;left:-50%;right:-50%;text-align:center;font:500 9px/1.1 var(--ui);color:var(--v-text2);letter-spacing:.01em;transition:color .4s;white-space:nowrap}
.stp i:nth-child(even) span{top:auto;bottom:0}
.stp i.done::before{background:var(--v-emerald)}
.stp i.done::after{background:var(--v-emerald);border-color:var(--v-emerald)}
.stp i.done span{color:var(--v-text2)}
.stp i.cur::after{border-color:var(--v-cyan);background:var(--v-cyan);box-shadow:0 0 0 4px rgba(0,224,255,.18),0 0 14px rgba(0,224,255,.6)}
.stp i.cur span{color:var(--v-cyan);font-weight:600}
/* tab bar (decorative: spans, not links) */
.tabs{position:absolute;left:0;right:0;bottom:0;height:64px;display:grid;grid-template-columns:repeat(2,1fr);padding:8px 10px 16px;background:rgba(14,20,34,.92);border-top:1px solid var(--v-border);backdrop-filter:blur(8px);z-index:4}
.tabs span{display:grid;justify-items:center;gap:3px;font:500 9.5px var(--ui);color:var(--v-text2)}
.tabs span.on{color:var(--v-cyan)}
.tabs svg{width:22px;height:22px}
/* lock screen + notification */
.v.lock{justify-content:flex-start;background:radial-gradient(90% 50% at 50% 0%,rgba(0,224,255,.14),transparent 60%),linear-gradient(180deg,#0b1020,#0d0d1a 60%)}
.lk-time{margin-top:88px;text-align:center;font:600 64px/1 var(--ui);letter-spacing:-.03em}
.lk-date{text-align:center;color:var(--v-text2);font-size:13px;margin-top:6px}
.notif{position:absolute;left:12px;right:12px;top:200px;background:rgba(26,35,56,.92);border:1px solid var(--v-border-hi);border-radius:16px;padding:10px 12px;display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:2px 10px;backdrop-filter:blur(12px);box-shadow:0 20px 40px rgba(0,0,0,.5);
  opacity:0;transform:translateY(-40px) scale(.96);visibility:hidden;transition:opacity .5s ease,transform .6s cubic-bezier(.2,1.1,.3,1),visibility 0s linear .6s}
.notif.on{opacity:1;transform:none;visibility:visible;transition-delay:0s}
.notif .ico{grid-row:1/3;width:34px;height:34px;border-radius:9px;background:linear-gradient(145deg,#00e0ff,#0b6fa8);display:grid;place-items:center;font:700 12px var(--ui-mono);color:#06111a}
.notif .ico.mail{background:linear-gradient(145deg,#6b9fd4,#36527a)}
.notif .ap{font:600 11px var(--ui);color:var(--v-text2)}
.notif .when{font-size:11px;color:var(--v-text2);text-align:right}
.notif .t{font-weight:600;font-size:12.5px;grid-column:2/-1}
.notif .b{font-size:11.5px;color:var(--v-text2);grid-column:2/-1}
.lk-foot{margin-top:auto;text-align:center;color:var(--v-text2);font-size:11px;padding-bottom:18px}
/* boot / login background: pulsing grid */
.v.boot{align-items:center;justify-content:center;background:#0d0d1a;overflow:hidden}
.pgrid{position:absolute;inset:-20%;background-image:linear-gradient(rgba(0,224,255,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(0,224,255,.16) 1px,transparent 1px);background-size:28px 28px;
  -webkit-mask-image:radial-gradient(60% 50% at 50% 50%,#000 20%,transparent 100%);mask-image:radial-gradient(60% 50% at 50% 50%,#000 20%,transparent 100%);animation:gridpulse 3.2s ease-in-out infinite}
@keyframes gridpulse{0%,100%{opacity:.45;transform:scale(1)}50%{opacity:1;transform:scale(1.04)}}
.wm{position:relative;font:700 clamp(16px,1.6vw,19px) 'Syncopate','Arial Black',sans-serif;letter-spacing:.22em;color:#fff;text-align:center;line-height:1.45}
.wm b{display:block;color:var(--v-cyan);text-shadow:0 0 18px rgba(0,224,255,.8);font-weight:700}
.wm small{display:block;font:500 9px var(--ui-mono);letter-spacing:.3em;color:var(--v-text2);margin-top:10px}
/* sign in: the wordmark over the pulsing grid, then the fields */
.v.login{background:#0d0d1a;overflow:hidden;padding-top:110px}
.v.login .wm{margin:0 auto}
.v.login .fld,.v.login .rel{position:relative}
.fld .em{color:var(--v-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* invite / password */
.big-ic{width:64px;height:64px;border-radius:18px;display:grid;place-items:center;margin:14px auto 12px;background:rgba(0,224,255,.1);border:1px solid rgba(0,224,255,.3);color:var(--v-cyan)}
.big-ic.sm{margin:0 auto 12px;width:48px;height:48px;border-radius:14px}
.ttl{display:block;text-align:center;font:600 20px/1.2 var(--ui);letter-spacing:-.01em;margin:0 0 6px}
.fld{background:var(--v-card);border:1px solid var(--v-border);border-radius:12px;height:46px;display:flex;align-items:center;padding:0 12px;margin-bottom:8px;font-size:13px;gap:8px}
.fld .lb{color:var(--v-text2);font-size:11px;min-width:84px}
.fld .val{font-family:var(--ui-mono);letter-spacing:.2em;color:var(--v-text)}
.fld.focus{border-color:var(--v-cyan);box-shadow:0 0 0 3px rgba(0,224,255,.12)}
.fld .ok{margin-left:auto;color:var(--v-emerald)}
/* location */
.locpill{display:inline-flex;align-self:flex-start;align-items:center;gap:7px;font:600 11px var(--ui);color:var(--v-cyan);background:rgba(0,224,255,.1);border-radius:999px;padding:5px 10px;margin-bottom:10px}
.locpill .dot{width:7px;height:7px}
.locpill.duty{color:var(--v-emerald);background:rgba(52,211,153,.12)}
/* photo grid */
.pg{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}
.tile{position:relative;aspect-ratio:4/3;border-radius:10px;border:1.5px dashed var(--v-border-hi);background:var(--v-recess);display:grid;place-items:center;overflow:hidden;color:var(--v-text2);transition:border-color .4s}
.tile .lb{position:absolute;left:8px;bottom:6px;font:600 10px var(--ui);letter-spacing:.04em;color:var(--v-text2);z-index:2}
.tile .cam{transition:opacity .3s}
.tile .pic{position:absolute;inset:0;opacity:0;transform:scale(1.08);transition:opacity .4s,transform .6s cubic-bezier(.2,.8,.2,1);background:linear-gradient(180deg,#1b2742 0%,#0f1526 55%,#0c1120 100%)}
.tile .pic svg{position:absolute;left:10%;right:10%;bottom:22%;width:80%;height:50%}
.tile .ring{position:absolute;right:6px;top:6px;width:22px;height:22px;z-index:3;opacity:0;transition:opacity .3s}
.tile .ring circle{fill:rgba(13,13,26,.7);stroke:var(--v-cyan);stroke-width:2.5;stroke-dasharray:56.5;stroke-dashoffset:56.5;transform:rotate(-90deg);transform-origin:center;transition:stroke-dashoffset 1.3s linear}
.tile .ring path{stroke:#06111a;stroke-width:2.2;fill:none;opacity:0}
.tile .fail{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:4px;background:rgba(13,13,26,.72);color:var(--v-red);font:600 10px var(--ui);text-align:center;opacity:0;transition:opacity .3s;z-index:3}
.tile.cap{border-style:solid;border-color:var(--v-border)}
.tile.cap .pic{opacity:1;transform:none}.tile.cap .cam{opacity:0}
.tile.up .ring{opacity:1}.tile.up .ring circle{stroke-dashoffset:0}
.tile.done .ring{opacity:1}
.tile.done .ring circle{stroke-dashoffset:0;fill:var(--v-emerald);stroke:var(--v-emerald);transition:fill .3s,stroke .3s}
.tile.done .ring path{opacity:1}
.tile.err{border-color:var(--v-red)}.tile.err .fail{opacity:1}.tile.err .ring{opacity:0}
.tile.q .ring circle{stroke:var(--v-amber);stroke-dashoffset:30}
.cnt{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.cnt b{font:600 13px var(--ui);white-space:nowrap}.cnt span{font:500 10.5px var(--ui-mono);color:var(--v-text2);text-align:right}
.notes{background:var(--v-card);border:1px solid var(--v-border);border-radius:12px;min-height:50px;padding:9px 12px;font-size:12px;color:var(--v-text);margin-bottom:10px;line-height:1.45}
.notes .ph-txt{color:var(--v-text2)}
.netpill{position:absolute;left:50%;top:50px;transform:translateX(-50%) translateY(-16px);font:600 10.5px var(--ui);padding:5px 11px;border-radius:999px;background:rgba(251,191,36,.14);color:var(--v-amber);border:1px solid rgba(251,191,36,.35);white-space:nowrap;z-index:6;opacity:0;transition:opacity .4s,transform .5s cubic-bezier(.2,.9,.3,1),background .4s,color .4s,border-color .4s;display:flex;gap:6px;align-items:center}
.netpill.on{opacity:1;transform:translateX(-50%)}
.netpill.ok{background:rgba(52,211,153,.14);color:var(--v-emerald);border-color:rgba(52,211,153,.35)}
/* complete */
.okring{display:block;width:84px;height:84px;margin:28px auto 14px}
.okring circle{fill:rgba(52,211,153,.12);stroke:var(--v-emerald);stroke-width:2.5}
.okring path{fill:none;stroke:var(--v-emerald);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:60;stroke-dashoffset:60;transition:stroke-dashoffset .8s ease .3s}
.v.cur .okring path{stroke-dashoffset:0}
.v.pending .okring,.v.pending .ttl{visibility:hidden}
.v.pending .okring path{stroke-dashoffset:60}
/* settings + planned */
.srw{display:flex;align-items:center;gap:10px;padding:12px 2px;border-bottom:1px solid var(--v-border);font-size:12.5px}
.srw.last{border:0}
.srw .m{display:block;color:var(--v-text2);font-size:11px}
.srw .r{margin-left:auto;color:var(--v-text2)}
.lbl.grp{margin:12px 0 2px}
.lbl.grp:first-of-type{margin-top:8px}
.tog{width:46px;height:28px;border-radius:14px;background:var(--v-card2);border:1px solid var(--v-border-hi);position:relative;margin-left:auto;transition:background .35s,border-color .35s;flex:none}
.tog::after{content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .35s cubic-bezier(.2,.9,.3,1)}
.tog.on{background:var(--v-emerald);border-color:var(--v-emerald)}.tog.on::after{transform:translateX(18px)}
.sheet{position:absolute;left:0;right:0;bottom:0;background:var(--v-card2);border-radius:28px 28px 34px 34px;padding:14px 16px 20px;border-top:1px solid var(--v-border-hi);transform:translateY(100%);transition:transform .7s cubic-bezier(.2,.9,.2,1);z-index:5}
.sheet.on{transform:none}
.sheet::before{content:"";display:block;width:36px;height:4px;border-radius:2px;background:var(--v-border-hi);margin:0 auto 12px}
.sheet .sh{display:flex;gap:10px;align-items:center;margin-bottom:6px;font-size:14px}
.sheet .big-ic{margin:0;width:38px;height:38px;border-radius:11px}
.sheet ul{margin:8px 0 14px;padding:0;list-style:none;display:grid;gap:8px;font-size:11.5px;color:var(--v-text2)}
.sheet li{display:flex;gap:8px;align-items:flex-start}.sheet li svg{flex:none;color:var(--v-emerald);margin-top:2px}
.dim{position:absolute;inset:0;background:rgba(5,6,12,.55);opacity:0;transition:opacity .5s;z-index:4}
.dim.on{opacity:1}
.hrow{position:relative;overflow:hidden;border-bottom:1px solid var(--v-border);height:54px;transition:height .45s ease,opacity .4s,border-color .4s}
.hrow .in{position:absolute;inset:0;z-index:1;display:flex;align-items:center;gap:10px;padding:0 2px;font-size:12.5px;background:var(--v-bg);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.hrow .in .m{color:var(--v-text2);font-size:11px;display:block;white-space:nowrap}
.hrow .in .r{margin-left:auto;font:500 11px var(--ui-mono);color:var(--v-text2)}
.hrow .del{position:absolute;right:0;top:0;bottom:0;width:84px;background:var(--v-red);color:#1a0505;font:700 12px var(--ui);display:grid;place-items:center;border-radius:10px;visibility:hidden}
.hrow.swipe .in{transform:translateX(-90px)}
.hrow.swipe .del{visibility:visible}
.hrow.gone{height:0;opacity:0;border-color:transparent}
.hint.okd{margin-top:10px;color:var(--v-emerald)}
.apbtn.danger{color:var(--v-red)}
/* tap ripple */
.tap{position:absolute;width:44px;height:44px;border-radius:50%;border:2px solid #fff;background:rgba(255,255,255,.35);transform:translate(-50%,-50%) scale(.2);opacity:0;pointer-events:none;z-index:9}
.tap.go{animation:tapgo .7s ease-out forwards}
@keyframes tapgo{0%{opacity:.9;transform:translate(-50%,-50%) scale(.3)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.3)}}
/* partner-portal windows: activity timeline, add-driver form, driver rows, photo thumbs */
.actl div{display:grid;grid-template-columns:62px minmax(0,1fr);gap:10px;padding:7px 0;font-size:12.5px;color:var(--v-text2);border-bottom:1px solid rgba(31,42,66,.7)}
.actl time{font:11px var(--ui-mono);color:var(--v-text2)}
.actl div b{color:var(--v-text);font-weight:600}
.pform{display:grid;gap:10px}
.pform .f{display:grid;gap:4px}
.pform .in{height:38px;border:1px solid var(--v-border-hi);border-radius:8px;background:var(--v-recess);padding:0 12px;display:flex;align-items:center;font-size:13px;color:var(--v-text)}
.pform .in.focus{border-color:var(--v-cyan);box-shadow:0 0 0 3px rgba(0,224,255,.12)}
.pbtn{height:38px;border-radius:8px;background:var(--v-cyan);color:#06111a;font:700 12px var(--ui);display:inline-flex;align-items:center;justify-content:center;padding:0 16px;letter-spacing:.02em}
.drow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;padding:10px 0;border-bottom:1px solid var(--v-border);font-size:12.5px}
.drow .m{color:var(--v-text2);font-size:11.5px;grid-column:1}
.thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:8px}
.thumbs div{aspect-ratio:4/3;border-radius:8px;border:1px dashed var(--v-border-hi);background:var(--v-recess);position:relative;overflow:hidden}
.thumbs div .pic{position:absolute;inset:0;opacity:0;transition:opacity .5s;background:linear-gradient(180deg,#1b2742 0%,#0f1526 55%,#0c1120 100%)}
.thumbs div .pic svg{position:absolute;left:10%;right:10%;bottom:22%;width:80%;height:50%}
.thumbs div.on{border-style:solid}.thumbs div.on .pic{opacity:1}
.thumbs div span{position:absolute;left:6px;bottom:4px;font:600 9px var(--ui);color:var(--v-text2);z-index:2}
.carsil{fill:none;stroke:#6b9fd4;stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round;opacity:.9}

/* ---------- hero: phone composition ---------- */
.markbox.drvbox{top:calc(50% - 4svh);right:max(16px,9vw);gap:26px;perspective:1400px}
.hph{position:relative;width:268px;height:560px;transform-style:preserve-3d;transform:rotateY(-18deg) rotateX(8deg) rotateZ(2deg);opacity:0;
  animation:phslam 1.1s cubic-bezier(.2,1.25,.3,1) forwards;animation-delay:.35s}
@keyframes phslam{0%{opacity:0;transform:rotateY(-40deg) rotateX(14deg) translateZ(420px) translateY(-60px);filter:blur(16px)}40%{opacity:1}100%{opacity:1;transform:rotateY(-18deg) rotateX(8deg) rotateZ(2deg);filter:blur(0)}}
.hph .ph{left:0;top:0}
.hph .ph::before,.hph .ph::after{display:none}
.hph .halo{position:absolute;inset:-30px;border-radius:70px;background:radial-gradient(60% 50% at 50% 50%,rgba(0,224,255,.35),transparent 70%);filter:blur(30px);opacity:0;animation:glowin 1.6s ease forwards;animation-delay:1.1s;z-index:-1}
.hph .trace{position:absolute;inset:-2px;width:calc(100% + 4px);height:calc(100% + 4px);overflow:visible;z-index:7;pointer-events:none}
.hph .trace rect{fill:none;stroke:var(--v-cyan);stroke-width:2.5;stroke-dasharray:1660;stroke-dashoffset:1660;filter:drop-shadow(0 0 6px var(--v-cyan));
  animation:trace 1.7s ease-in-out forwards,traceout 1.2s ease forwards;animation-delay:1.2s,3.6s}
.hph .glint{position:absolute;inset:0;border-radius:42px;overflow:hidden;z-index:8;pointer-events:none;mix-blend-mode:screen;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.55) 50%,transparent 60%);background-size:300% 100%;background-position:120% 0;background-repeat:no-repeat;
  animation:glint 1.3s cubic-bezier(.45,0,.2,1) forwards;animation-delay:2.6s}
/* hero screen choreography: boot wordmark → home list, then the push drops and the stepper ticks */
.hph .wm .L{display:inline-block;opacity:0;animation:slam .8s cubic-bezier(.2,1.35,.35,1) forwards;animation-delay:calc(1.3s + var(--i) * .07s)}
.hph .wm .L:nth-child(odd),.hph .wm b .L:nth-child(even){--y:-20px}
.hph .wm .L:nth-child(even),.hph .wm b .L:nth-child(odd){--y:20px}
.hph .wm small{opacity:0;animation:fadein .6s ease forwards;animation-delay:2.3s}
.hph .v.boot{opacity:1;transform:none;visibility:visible;animation:bootout .6s ease forwards;animation-delay:3.1s;z-index:3}
@keyframes bootout{to{opacity:0;visibility:hidden}}
.hph .v.home{opacity:1;transform:none;visibility:visible}
.hph .notif{animation:notifin .7s cubic-bezier(.2,1.1,.3,1) forwards,notifout .5s ease forwards;animation-delay:3.6s,6.6s;top:48px;visibility:visible}
@keyframes notifin{to{opacity:1;transform:none}}
@keyframes notifout{to{opacity:0;transform:translateY(-30px)}}
.hph .job.new{opacity:0;transform:translateY(-10px);animation:fadeup .6s ease forwards;animation-delay:4.1s}
@keyframes fadeup{to{opacity:1;transform:none}}
.hph .job.done{opacity:.75}
.hph .stp i:first-child::after{animation:tick .5s cubic-bezier(.2,1.3,.3,1) forwards;animation-delay:4.5s}
.hph .stp i:first-child span{animation:tickl .4s ease forwards;animation-delay:4.5s}
@keyframes tick{to{border-color:var(--v-cyan);background:var(--v-cyan);box-shadow:0 0 0 4px rgba(0,224,255,.18),0 0 14px rgba(0,224,255,.6)}}
@keyframes tickl{to{color:var(--v-cyan);font-weight:600}}
.marktag.dtag{letter-spacing:.26em}
@media (max-width:820px){
  .markbox.drvbox{right:auto;left:50%;top:12svh;transform:translateX(-50%) scale(.56);transform-origin:50% 0;opacity:.8}
  .hph{transform:none}
  @keyframes phslam{0%{opacity:0;transform:translateZ(300px) translateY(-40px);filter:blur(14px)}40%{opacity:1}100%{opacity:1;transform:none;filter:blur(0)}}
  .marktag.dtag{letter-spacing:.14em;font-size:10px}
}
@media (prefers-reduced-motion:reduce){
  .hph,.hph .halo,.hph .trace rect,.hph .glint,.hph .wm .L,.hph .wm small,.hph .v.boot,.hph .notif,.hph .job.new,.hph .stp i:first-child::after,.hph .stp i:first-child span,.pgrid,.tap.go{animation:none!important}
  .hph,.hph .wm .L,.hph .wm small,.hph .job.new{opacity:1}
  .hph .halo{opacity:1}.hph .trace rect{stroke-dashoffset:0;opacity:.28}
  .hph .v.boot{opacity:0;visibility:hidden}
  .hph .notif{opacity:0}
  .hph .stp i:first-child::after{border-color:var(--v-cyan);background:var(--v-cyan)}
  .hph .stp i:first-child span{color:var(--v-cyan);font-weight:600}
  .v,.notif,.stp i::before,.stp i::after,.tile,.tile *,.netpill,.tog,.tog::after,.sheet,.hrow,.hrow .in,.okring path,.dim,.apbtn{transition:none!important}
  .dot.live{animation:none}
}