/* QuickScope hero + close lab. Local preview only.
   Every colour is a v3/design/tokens.json value (light, dark, accentScale, vip-hi for the sticky note).
   Concept: the hero is the three-day story's split screen in one frame. Paper above the pen line, the record below it. */

@font-face{font-family:'Bricolage';font-style:normal;font-weight:200 800;font-display:swap;src:url('/fonts/bricolage-grotesque-latin-opsz-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url('/fonts/inter-latin-var-site.woff2') format('woff2')}
@font-face{font-family:'Caveat';font-style:normal;font-weight:400 700;font-display:swap;src:url('/fonts/caveat-latin-wght-normal.woff2') format('woff2')}

:root{
  --purple-200:#DAD6FE;--purple-400:#9F8DFE;--purple-600:#6E46DC;--purple-900:#342469;
  --sticky:#FFF0A6;
  --disp:'Bricolage','Inter',system-ui,sans-serif;
  --ui:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --hand:'Caveat','Segoe Print','Bradley Hand',cursive;
  --ease:cubic-bezier(.16,1,.3,1);
  --r-card:10px;--r-control:8px;--r-badge:6px;--target:48px;
  --bg:#F7F7F9;--surf:#FFFFFF;--surf-2:#F0F0F4;--line:#E6E6EC;--line-2:#858592;
  --txt:#14121F;--txt-2:#3F3F52;--dim:#6B6B7B;--dim-2:#858592;
  --accent:#6E46DC;--on-accent:#FFFFFF;--accent-bg:#EBEAFE;
  --ok:#047857;--ok-bg:#ECFDF5;--warn:#B45309;--warn-bg:#FFFBEB;
  --shadow-card:0 1px 2px rgba(20,18,31,.05);--shadow-float:0 10px 28px rgba(20,18,31,.14);
  --studio:0 50px 90px -30px rgba(52,36,105,.32),0 18px 36px -18px rgba(20,18,31,.24);
  --grid:linear-gradient(var(--line) 1px,transparent 1px) 0 0/28px 28px,linear-gradient(90deg,var(--line) 1px,transparent 1px) 0 0/28px 28px,var(--bg);
}
.night{
  --bg:#0E0E13;--surf:#16161D;--surf-2:#1E1E26;--line:#292931;--line-2:#6A6A77;
  --txt:#F4F4F8;--txt-2:#CECED7;--dim:#9A9AA8;--dim-2:#6A6A77;
  --accent:#9F8DFE;--on-accent:#14121F;--accent-bg:#29214B;
  --ok:#35C08A;--ok-bg:#10231C;--warn:#E0A030;--warn-bg:#271E10;
  --shadow-card:none;--shadow-float:0 10px 28px rgba(0,0,0,.55);
  color:var(--txt);-webkit-font-smoothing:antialiased;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--bg);color:var(--txt);font-family:var(--ui);font-size:16px;line-height:1.6;font-feature-settings:"cv05" 1,"cv08" 1;overflow-x:clip;caret-color:var(--accent)}
::selection{background:var(--purple-200);color:#14121F}
section,footer{background:var(--bg)}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--r-badge)}
.wrap{max-width:1200px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right))}
.skip{position:absolute;left:-999px;top:8px;background:#fff;color:#14121F;padding:10px 14px;border-radius:var(--r-control);z-index:100}
.skip:focus{left:16px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ic{width:24px;height:24px;flex:none;color:var(--txt)}

/* type */
.h-sec{font-family:var(--disp);font-weight:700;font-size:clamp(32px,4vw,56px);line-height:1.02;letter-spacing:-.025em;text-wrap:balance}
.lede{font-size:clamp(17px,1.35vw,19px);line-height:1.55;color:var(--txt-2);max-width:36em;text-wrap:pretty}
.lede strong{color:var(--txt);font-weight:600}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:var(--target);padding:0 22px;border-radius:var(--r-control);font-weight:600;font-size:16px;white-space:nowrap;transition:background-color .2s,border-color .2s}
.btn-primary{background:var(--accent);color:var(--on-accent)}
.btn-primary:hover{background:#5B39B9}
.night .btn-primary:hover{background:#BFB7FF}
.btn-line{border:1px solid var(--line-2);color:var(--txt)}
.btn-line:hover{border-color:var(--txt)}
.link{display:inline-flex;align-items:center;min-height:var(--target);font-weight:600;color:var(--txt);text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:6px}
.link:hover{text-decoration-color:var(--txt)}
.link-btn{font-weight:600;font-size:14px;color:var(--txt);border-bottom:1px solid var(--line-2);padding:10px 0 2px;min-height:44px}
.cta-row{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center}
.pill{display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:var(--r-badge);font:600 13px/1 var(--ui);white-space:nowrap;flex:none}
.pill.ok{background:var(--ok-bg);color:var(--ok)}

/* head */
.head{position:sticky;top:0;z-index:50;background:#FFFFFF;background:color-mix(in srgb,var(--surf) 90%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:border-color .2s}
.head.solid{border-color:var(--line)}
.head.night{background:#0E0E13;border-color:#292931}
.head .wrap{display:flex;align-items:center;gap:28px;height:68px}
.lockup{display:flex;align-items:center;gap:10px;min-height:48px;font:700 23px/1 var(--ui);letter-spacing:-.02em}
.lockup svg{width:32px;height:32px;flex:none}
.lockup .q{color:var(--txt)}.lockup .s{color:var(--accent)}
.nav{display:flex;gap:26px;margin-left:auto;font-size:15px;color:var(--txt-2)}
.nav a{display:inline-flex;align-items:center;min-height:44px}
.nav a:hover{color:var(--txt)}
.head .btn{min-height:42px;padding:0 16px;font-size:15px}
@media(max-width:860px){.nav{display:none}.head .btn{margin-left:auto;min-height:44px}.head .wrap{height:56px}}

/* ============================== HERO ============================== */
/* --line-y: where the pen line crosses the hero. Above it, grid paper; below it, a clean page. */
.hero{--pt:40px;--line-y:300px;position:relative;background:var(--surf);padding-top:var(--pt)}
.hero::before{content:"";position:absolute;left:0;right:0;top:0;height:var(--line-y);background:var(--grid)}
.pen{position:absolute;left:0;right:0;top:calc(var(--line-y) - 14px);height:28px;z-index:1;pointer-events:none}
.pen svg,.handoff-line svg{width:100%;height:100%}
.handoff-line path{fill:none;stroke:var(--txt-2);stroke-width:2.4;stroke-linecap:round;vector-effect:non-scaling-stroke}
/* the hero's line is the same torn paper edge the story uses */
.pen svg{transform:scaleY(-1);filter:drop-shadow(0 3px 3px rgba(20,18,31,.12))}
.pen path{fill:#FFFFFF;stroke:none}

.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:72px;align-items:start}
.hero-copy{position:relative;min-width:0}
.h-hero{font-family:var(--disp);font-weight:700;font-size:clamp(40px,6.3vw,94px);line-height:1;letter-spacing:-.022em}
.h-hero .above{display:flex;align-items:flex-end;height:calc(var(--line-y) - var(--pt));padding-bottom:.2em}
.h-hero .find{display:block;color:var(--accent);margin-top:.2em}

/* the viewfinder: the logo's four corner brackets close on the words, once */
.snap{position:relative;display:inline-block;padding:.04em .16em .1em}
.snap i{position:absolute;width:.32em;height:.32em;border:0 solid var(--txt)}
.snap i:nth-child(2){top:0;left:0;border-width:.055em 0 0 .055em;border-top-left-radius:.09em;--dx:-.22em;--dy:-.16em}
.snap i:nth-child(3){top:0;right:0;border-width:.055em .055em 0 0;border-top-right-radius:.09em;--dx:.22em;--dy:-.16em}
.snap i:nth-child(4){bottom:0;right:0;border-width:0 .055em .055em 0;border-bottom-right-radius:.09em;--dx:.22em;--dy:.16em}
.snap i:nth-child(5){bottom:0;left:0;border-width:0 0 .055em .055em;border-bottom-left-radius:.09em;border-color:var(--accent);--dx:-.22em;--dy:.16em}
.snap i{animation:snap .7s var(--ease) .35s both}
@keyframes snap{from{transform:translate(var(--dx),var(--dy))}}

/* one handwritten note from the old way, pinned above the line */
.hero .sticky{position:absolute;right:2%;top:6px;z-index:3;background:var(--sticky);padding:12px 16px 16px;font:500 25px/1.15 var(--hand);color:#14121F;transform:rotate(4deg);box-shadow:0 14px 26px -12px rgba(20,18,31,.35)}
.hero .x{position:relative;display:inline-block;white-space:nowrap;margin-right:.25em}
.hero .x::after{content:"";position:absolute;left:-2px;right:-2px;top:50%;height:12px;transform:translateY(-50%) rotate(-4deg);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M0 9 L4 3 L8 9 L12 3 L16 9 L20 3 L24 9' fill='none' stroke='%233F3F52' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") repeat-x 0 0/18px 12px}

/* the record it became, below the line */
.rec{display:flex;align-items:center;gap:14px;max-width:540px;margin-top:26px;padding:12px 14px;background:var(--surf);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow-float)}
.rec .ic{width:40px;height:40px;padding:8px;border-radius:var(--r-control);background:var(--surf-2)}
.rec-t{flex:1;min-width:0;display:grid;font-size:14px;line-height:1.4}
.rec-t b{font-weight:650;color:var(--txt)}
.rec-t span{color:var(--dim)}
.hero .lede{margin:26px 0 14px}
.facts{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:14px;font-weight:550;color:var(--txt-2)}
.facts span{color:var(--dim-2)}

/* the form card straddles the line: it sits on top of both worlds */
.form-card{background:var(--surf);border:1px solid var(--line);border-radius:18px;padding:28px;box-shadow:var(--studio);scroll-margin-top:96px;transition:box-shadow .4s}
.form-card.flash{box-shadow:0 0 0 4px var(--accent-bg),var(--studio)}
.form-card:focus{outline:none}
.beta{font-size:14px;color:var(--dim);margin-bottom:10px}
.fh{font:700 28px/1.1 var(--disp);letter-spacing:-.02em}
.fp{color:var(--txt-2);margin:8px 0 18px}
.field{display:grid;gap:6px;margin-bottom:12px}
.field span{font-size:14px;font-weight:600}
.field input{height:48px;border:1px solid var(--line-2);border-radius:var(--r-control);padding:0 14px;font:inherit;color:var(--txt);background:var(--surf)}
.field input::placeholder{color:var(--dim)}
.field input:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.field input.err{border-color:var(--warn)}
.ea-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.ea-submit{width:100%;margin-top:6px}
.ea-submit[aria-disabled="true"]{opacity:.7;cursor:progress}
.ea-note{min-height:1.4em;margin-top:10px;font-size:14px;color:var(--ok)}
.ea-note.err{color:var(--warn)}
.ea-consent{font-size:12.5px;color:var(--dim);line-height:1.5}
.ea-consent a,.ea-done a{color:var(--txt);text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:3px}
.ea-done{display:grid;gap:10px;justify-items:start;padding:12px 0}
.ea-done .fh:focus{outline:none}
.ea-done p{color:var(--txt-2)}

/* ---------- first scroll: the ledger ---------- */
.keeps{margin-top:120px;scroll-margin-top:90px}
.keeps-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 72px;align-items:end;margin-bottom:40px}
.keeps-head .h-sec{max-width:12em}
.ledger{display:grid;grid-template-columns:1fr 1fr;column-gap:72px;border-bottom:1px solid var(--line)}
.ledger li{display:grid;grid-template-columns:24px 196px minmax(0,1fr);gap:16px;align-items:baseline;padding:17px 0;border-top:1px solid var(--line)}
.ledger .ic{width:22px;height:22px;color:var(--accent);transform:translateY(4px)}
.ledger b{font:650 18px/1.3 var(--disp);letter-spacing:-.01em}
.ledger span{color:var(--txt-2);font-size:15.5px;line-height:1.5}

/* ---------- the hand-off into the story ---------- */
.handoff{margin-top:128px}
.handoff-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px 72px;align-items:end}
.h-hand{max-width:10em}
.people{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px 56px;margin-top:28px}
.people a{display:grid;min-height:var(--target);padding:4px 0}
.people .nm{font:700 40px/1 var(--hand);color:var(--txt)}
.people .rl{font-size:14px;color:var(--dim)}
.people a:hover .nm{color:var(--accent)}
.handoff-line{position:relative;height:96px;margin-top:40px}
.handoff-line svg{position:absolute;left:0;top:36px;height:24px}
.handoff-line .lbl{position:absolute;left:max(20px,calc(50% - 580px));font:600 23px/1 var(--hand);color:var(--txt-2)}
.handoff-line .lbl.up{top:6px}
.handoff-line .lbl.down{top:66px;color:var(--accent)}
.handoff .tear{display:block;width:100%;height:28px;margin-top:72px;background:var(--grid)}
.handoff .tear path{fill:var(--surf)}

/* placeholder for the story */
.story-ph{background:var(--grid);min-height:62vh;display:grid;place-items:center;text-align:center;padding:80px 0}
.story-ph p{font:700 44px/1.1 var(--hand);color:var(--txt-2)}
.story-ph .small{font:15px/1.5 var(--ui);color:var(--dim);margin-top:10px}

/* ---------- questions ---------- */
.sec{padding:120px 0}
.faq{background:var(--surf)}
.faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:64px;align-items:start}
.faq .lede{margin-top:20px}
.qa{border-top:1px solid var(--line)}
.qa details{border-bottom:1px solid var(--line)}
.qa summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:60px;padding:14px 0;font:650 18px/1.3 var(--ui)}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"";flex:none;width:11px;height:11px;border:solid var(--txt);border-width:0 2px 2px 0;transform:rotate(45deg) translateY(-3px)}
.qa details[open] summary::after{transform:rotate(-135deg) translateY(-3px)}
.qa details p{padding:0 0 18px;color:var(--txt-2);max-width:42em}
.qa a{color:var(--accent);font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* ---------- LAUNCH slot: pricing (hidden in beta; ?launch shows it) ---------- */
.pricing{background:var(--bg);border-top:1px solid var(--line)}
.launch-tag{display:inline-block;font:600 13px/1 var(--ui);color:var(--accent);border:1px dashed var(--accent);border-radius:var(--r-badge);padding:6px 9px;margin-bottom:20px}
.price-slot{margin-top:32px;border:2px dashed var(--line-2);border-radius:var(--r-card);min-height:240px;display:grid;place-content:center;text-align:center;padding:32px;gap:6px}
.price-slot p{font:700 26px/1.2 var(--disp)}
.price-slot .small{font:15px/1.5 var(--ui);color:var(--dim);max-width:34em}

/* ============================== CLOSE ============================== */
.close{padding:136px 0 104px}
.close-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px 72px;align-items:center}
.h-close{font-family:var(--disp);font-weight:800;font-size:clamp(52px,8.6vw,132px);line-height:.96;letter-spacing:-.022em}
.h-close>span{display:block}
.scope{position:relative;display:inline-block;padding:0 .12em;color:var(--accent)}
.scope i{position:absolute;width:.28em;height:.28em;border:0 solid var(--txt)}
.scope i:nth-child(1){top:.04em;left:-.02em;border-width:.055em 0 0 .055em;border-top-left-radius:.08em}
.scope i:nth-child(2){top:.04em;right:-.02em;border-width:.055em .055em 0 0;border-top-right-radius:.08em}
.scope i:nth-child(3){bottom:-.02em;right:-.02em;border-width:0 .055em .055em 0;border-bottom-right-radius:.08em}
.scope i:nth-child(4){bottom:-.02em;left:-.02em;border-width:0 0 .055em .055em;border-bottom-left-radius:.08em;border-color:var(--accent)}
.ends{display:grid;gap:12px;margin-top:44px;max-width:32em}
.ends li{font-size:clamp(17px,1.35vw,19px);line-height:1.5;color:var(--txt-2);padding-top:12px;border-top:1px solid var(--line)}
.ends .nm{font:700 28px/1 var(--hand);color:var(--txt);margin-right:4px}

/* the payoff, drawn in the product's light theme on the dark ground (Design System: mocks render light) */
.find-mock{--surf:#FFFFFF;--bg:#F7F7F9;--line:#E6E6EC;--line-2:#858592;--txt:#14121F;--txt-2:#3F3F52;--dim:#6B6B7B;--accent:#6E46DC;--ok:#047857;--ok-bg:#ECFDF5;--surf-2:#F0F0F4;
  background:var(--bg);color:var(--txt);border-radius:18px;padding:18px;display:grid;gap:10px;box-shadow:0 40px 80px -30px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.06)}
.find-mock .ic{color:var(--txt)}
.fm-box{display:flex;align-items:center;gap:10px;height:52px;padding:0 14px;background:var(--surf);border:1px solid var(--line-2);border-radius:var(--r-control);font-size:16px;font-weight:500}
.fm-box .ic{width:20px;height:20px;color:var(--dim)}
.fm-box span::after{content:"";display:inline-block;width:2px;height:1.15em;background:var(--accent);margin-left:2px;vertical-align:-.2em}
.fm-res{display:flex;align-items:center;gap:12px;padding:12px;background:var(--surf);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:0 1px 2px rgba(20,18,31,.05)}
.fm-res .ic{width:38px;height:38px;padding:8px;border-radius:var(--r-control);background:var(--surf-2)}
.fm-t{flex:1;min-width:0;display:grid;font-size:14px;line-height:1.4}
.fm-t b{font-weight:650}
.fm-t span{color:var(--dim)}
.fm-res.dim{background:var(--bg)}
.fm-note{font-size:13px;color:var(--dim);text-align:center;padding-top:4px}

.close-cta{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:20px 40px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:32px;margin-top:16px}
.close-line{color:var(--txt-2);max-width:30em}

/* ---------- footer (as on the live page) ---------- */
.foot{border-top:1px solid var(--line);padding:40px 0 20px;font-size:14px;color:var(--dim)}
.foot .wrap{display:grid;gap:24px}
.foot .top{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:center}
.foot nav{display:flex;gap:22px;flex-wrap:wrap;align-items:center}
.foot nav a:hover{color:var(--txt)}
.foot .link-btn{padding:0;min-height:0;border:0;font-weight:400;color:inherit}
.foot .last{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
.bascorp-badge{display:inline-flex;line-height:0;margin:12px}
.bascorp-badge img{height:36px;width:auto}
.bascorp-badge .bb-dark{display:none}
.foot.night .bascorp-badge .bb-light{display:none}
.foot.night .bascorp-badge .bb-dark{display:inline}
@media (max-width:480px){.bascorp-badge img{height:30px}.foot .last{justify-content:center;text-align:center}}

/* ============================== responsive ============================== */
@media(max-width:1180px){
  .hero-grid{grid-template-columns:minmax(0,1fr) 380px;gap:48px}
  .ledger li{grid-template-columns:24px 160px minmax(0,1fr)}
}
@media(max-width:960px){
  .hero{--pt:16px;--line-y:206px}
  .hero-grid{grid-template-columns:1fr;gap:40px}
  .h-hero{font-size:clamp(40px,10.4vw,72px)}
  .h-hero .above{padding-bottom:.18em}
  .sticky{right:4px;top:4px;font-size:19px;padding:8px 12px 11px;transform:rotate(3deg)}
  .rec{margin-top:20px}
  .keeps{margin-top:88px}
  .keeps-head,.handoff-in{grid-template-columns:1fr}
  .ledger{grid-template-columns:1fr}
  .handoff{margin-top:96px}
  .faq-grid{grid-template-columns:1fr;gap:32px}
  .sec{padding:88px 0}
  .close{padding:100px 0 80px}
  .close-grid{grid-template-columns:1fr}
}
@media(max-width:600px){
  .form-card{padding:22px;border-radius:14px}
  .ledger li{grid-template-columns:22px minmax(0,1fr);row-gap:2px;padding:15px 0}
  .ledger li span{grid-column:2}
  .people{gap:4px 28px}
  .people .nm{font-size:34px}
  .rec .pill,.fm-res .pill{display:none}
  .find-mock{padding:12px}
  .handoff-line .lbl{font-size:20px}
  .close-cta{flex-direction:column;align-items:stretch}
  .close-cta .btn{width:100%}
  .story-ph p{font-size:34px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .snap i{animation:none}
  .btn,.head,.form-card{transition:none}
}

/* review fixes 2026-10-07 */
@media(max-width:400px){.head .wrap{gap:10px}.lockup{font-size:20px;gap:8px}.lockup svg{width:28px;height:28px}.head .btn{padding:0 12px;font-size:14px}}
.foot nav a,.foot .link-btn{min-height:44px;display:inline-flex;align-items:center}

/* owner's morning view in the hero (review: sell control, not a scanner) */
.morning{max-width:520px;margin-top:26px;background:var(--surf);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow-float);padding:14px 16px}
.m-head{display:flex;justify-content:space-between;gap:10px;font-size:13px;color:var(--dim)}
.m-head b{color:var(--txt);font-weight:650}
.m-big{font-size:15px;color:var(--txt-2);margin:6px 0 8px}
.m-big b{font:700 28px/1 var(--disp);letter-spacing:-.02em;color:var(--txt);margin-right:6px}
.m-rows{border-top:1px solid var(--line)}
.m-rows li{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px solid var(--line);font-size:14px}
.m-rows li:last-child{border-bottom:0}
.m-rows .wn{color:var(--warn);font-weight:600}
.m-rows .dim{color:var(--dim)}
.jump{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:14px}
.jump a{display:inline-flex;align-items:center;min-height:44px;font-weight:600;font-size:15px;color:var(--accent);text-decoration:underline;text-underline-offset:4px}
.next{display:grid;gap:8px;margin:16px 0 4px;padding:14px 0 0;border-top:1px solid var(--line);counter-reset:n}
.next li{position:relative;padding-left:30px;font-size:13.5px;line-height:1.45;color:var(--txt-2);counter-increment:n}
.next li::before{content:counter(n);position:absolute;left:0;top:0;width:20px;height:20px;border-radius:50%;background:var(--accent-bg);color:var(--accent);font:700 12px/20px var(--ui);text-align:center}
.next b{color:var(--txt);font-weight:600}
.ends .nm{font:700 20px/1 var(--disp)!important;letter-spacing:-.01em}
/* FAQ left column: wrong shows how to fix it, right shows it was right */
.faq-head{position:sticky;top:96px}
.toasts{display:grid;gap:12px;margin-top:28px}
.toast{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-card);padding:14px 16px;box-shadow:0 1px 2px rgba(20,18,31,.05)}
.toast .t{display:flex;gap:8px;align-items:center;font-weight:650;margin-bottom:6px}
.toast p{font-size:14px;color:var(--txt-2);line-height:1.45}
.toast .how{margin-top:6px;color:var(--txt)}
.ask-us{margin-top:22px;font-size:15px;color:var(--txt-2)}
.ask-us a{display:inline-flex;min-height:44px;align-items:center;font-weight:600;color:var(--accent);text-decoration:underline;text-underline-offset:4px}
@media(max-width:960px){.faq-head{position:static}}

/* QuickScope story section (three days) and cookie choice. Loaded after hero.css. */
:root{--purple-100:#EBEAFE;--purple-200:#DAD6FE;--purple-300:#BFB7FF;--purple-400:#9F8DFE;--purple-500:#8363F2;--purple-600:#6E46DC;--purple-700:#5B39B9;
  --paper:#FFFFFF;--paper-ink:#14171B;--paper-dim:#5A6472;--paper-line:#C8CFD8;--paper-hi:#F0F2F5;--sticky:#FFF0A6;--pencil:#3F3F52}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* ===================== the three days: one camera, right → down → left (v9) ===================== */
::selection{background:var(--purple-200);color:#14121F}
:root{--ink-blue:#2C4A9A;--ink-red:#B91C1C;--ink-black:#14121F;--ink-pencil:#3F3F52;--ink-green:#047857;--calm:#F7F7F9}
.cine{position:relative;background:var(--calm)}
.cine-stage{position:sticky;top:68px;height:calc(100vh - 68px);height:calc(100svh - 68px);overflow:hidden;--split:46%}

/* the timeline: three people, one bar, sits on the paper */
.tline{position:absolute;left:50%;top:12px;transform:translateX(-50%);z-index:8;width:min(640px,calc(100% - 32px));display:grid;grid-template-columns:repeat(3,1fr);gap:6px;
  background:rgba(255,255,255,.94);border:1px solid var(--line);border-radius:12px;padding:6px;box-shadow:0 6px 18px -10px rgba(20,18,31,.3)}
.tline button{position:relative;display:flex;align-items:baseline;justify-content:center;gap:6px;min-height:40px;padding:6px 8px 10px;border-radius:8px;font-size:13px;color:var(--dim);white-space:nowrap;overflow:hidden}
.tline button b{font-weight:650;color:var(--txt-2)}
.tline button:hover{background:var(--surf-2)}
.tline button.on{background:var(--surf-2)}
.tline button.on b{color:var(--txt)}
.tline i{position:absolute;left:10px;right:10px;bottom:4px;height:3px;border-radius:2px;background:var(--line)}
.tline i::after{content:"";position:absolute;inset:0;border-radius:2px;background:var(--accent);transform-origin:left;transform:scaleX(var(--p,0))}

/* above: the paper world */
.band-before{position:absolute;left:0;right:0;top:0;height:var(--split);overflow:hidden;background:#FFF0A6}
.world{position:absolute;left:0;top:0;will-change:transform;contain:layout style}
.cell{position:absolute;overflow:hidden;--near:0}
.cell.legal{background:#FFF0A6 linear-gradient(transparent 31px,rgba(90,100,114,.28) 32px) 0 0/100% 32px}
.cell.legal::before{content:"";position:absolute;top:0;bottom:0;left:72px;width:2px;background:rgba(185,28,28,.4)}
.cell.legal .it.sticky{background:#FFFFFF}
.cell.grid{background-color:#F0F2F5;background-image:linear-gradient(#C8CFD8 1px,transparent 1px),linear-gradient(90deg,#C8CFD8 1px,transparent 1px);background-size:26px 26px}
.cell.dots{background-color:#F5F4FF;background-image:radial-gradient(#BFB7FF 1.4px,transparent 1.6px);background-size:22px 22px}
.lbl-before{position:absolute;left:max(24px,calc(50% - 600px));bottom:30px;z-index:3;background:rgba(255,255,255,.9);padding:2px 10px;border-radius:6px;font:700 22px/1.1 var(--hand);color:var(--ink-red);transform:rotate(-2deg)}
.cine .tear{position:absolute;left:0;bottom:-1px;width:100%;height:26px;z-index:4;filter:drop-shadow(0 -3px 3px rgba(20,18,31,.14))}
.cine .tear path{fill:var(--calm)}

.cell .it{position:absolute;left:var(--x);top:var(--y);max-width:min(360px,36vw);z-index:2;
  transform:translate(-50%,-50%) translateY(calc((1 - var(--near)) * 18px)) rotate(calc(var(--r,0deg) + (1 - var(--near)) * var(--drift,3deg))) scale(var(--sc,1));
  opacity:calc(.7 + var(--near) * .3)}
.cell .cl{position:absolute;left:var(--x);top:var(--y);z-index:1;transform:translate(-50%,-50%) rotate(var(--r,0deg)) scale(var(--sc,1));opacity:.8;pointer-events:none}
.ink-blue{color:var(--ink-blue)!important}.ink-red{color:var(--ink-red)!important}.ink-black{color:var(--ink-black)!important}.ink-pencil{color:var(--ink-pencil)!important}.ink-green{color:var(--ink-green)!important}
.hlt{background:linear-gradient(transparent 45%,rgba(255,221,67,.75) 45% 88%,transparent 88%);padding:0 .15em}
.it.hw,.it .hw{font-family:var(--hand);color:var(--ink-pencil);font-size:clamp(22px,2vw,30px);line-height:1.12}
.it.big{font:700 clamp(40px,4.4vw,70px)/.95 var(--hand);max-width:min(620px,70vw)}
.it.sticky{background:var(--sticky);padding:14px 18px 18px;box-shadow:0 14px 26px -12px rgba(20,18,31,.35);font-family:var(--hand);font-size:clamp(20px,1.9vw,27px);line-height:1.18;color:#14121F}
.it.paper{background:var(--paper);color:var(--paper-ink);font:13px/1.5 var(--ui);padding:14px 16px;box-shadow:0 14px 26px -12px rgba(20,18,31,.32);min-width:240px}
.it.paper .pt{font:700 15px/1.2 var(--disp)}
.it.paper .pl{border-top:1px dashed var(--paper-line);padding:3px 0;display:flex;justify-content:space-between;gap:12px;font-variant-numeric:tabular-nums}
.it.paper .pl.b{font-weight:700;border-top:1px solid var(--paper-ink)}
.it.slip,.it.order{background:var(--paper);font:13px/1.6 ui-monospace,Consolas,monospace;color:var(--paper-ink);padding:12px 14px 16px;box-shadow:0 12px 24px -12px rgba(20,18,31,.3);white-space:nowrap;
  -webkit-mask:linear-gradient(#000 calc(100% - 6px),transparent 0),conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/10px 100%;mask:linear-gradient(#000 calc(100% - 6px),transparent 0),conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/10px 100%}
.it.order{font-size:11.5px}
.it.lined{background:var(--paper) linear-gradient(transparent 27px,#C8CFD8 28px) 0 10px/100% 28px;padding:10px 16px;line-height:28px;box-shadow:0 12px 24px -12px rgba(20,18,31,.3);font-family:var(--hand);font-size:23px;color:var(--ink-blue)}
.it.scrap{background:var(--paper);padding:12px 18px;font-family:var(--hand);font-size:25px;color:var(--ink-pencil);box-shadow:0 12px 24px -12px rgba(20,18,31,.3);clip-path:polygon(0 6%,10% 0,22% 5%,36% 0,52% 4%,68% 0,82% 5%,100% 0,100% 100%,0 100%)}
.it.chat{background:#fff;border:1px solid var(--line);border-radius:16px 16px 16px 4px;padding:10px 14px;font:15px/1.35 var(--ui);color:var(--txt-2);box-shadow:var(--shadow-card)}
.it.chat b,.it.call b,.it.ringing b{display:block;font-size:11.5px;color:var(--dim);font-weight:600}
.it.call,.it.ringing{display:flex;gap:10px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px 14px;font:15px/1.3 var(--ui);color:var(--txt-2);box-shadow:var(--shadow-float)}
.it.call svg,.it.ringing svg{width:24px;height:24px;flex:none;color:var(--ink-red)}
.it.ringing svg{animation:ring 1.4s ease-in-out infinite}
@keyframes ring{0%,40%,100%{transform:rotate(0)}5%,15%,25%{transform:rotate(-14deg)}10%,20%,30%{transform:rotate(14deg)}}
/* real objects */
.it.stack{width:210px;background:#16181C;border-radius:22px;padding:28px 10px 12px;box-shadow:0 18px 30px -14px rgba(20,18,31,.5);display:grid;gap:5px}
.it.stack::before{content:"";position:absolute;top:9px;left:50%;width:46px;height:9px;margin-left:-23px;border-radius:6px;background:#000}
.it.stack span{background:rgba(242,244,246,.94);border-radius:10px;padding:6px 9px;font:12.5px/1.3 var(--ui);color:#14121F}
.it.stack span:first-child{background:none;color:#C3C9D2;font-weight:600;padding:0 4px 2px}
.it.stack span:last-child:not(:first-child){font-weight:600;color:var(--ink-red)}
.it.calc{width:96px;height:130px;background:#16181C;border-radius:12px;padding:10px 9px;box-shadow:0 16px 26px -12px rgba(20,18,31,.5);
  background-image:radial-gradient(circle at 50% 50%,#3A3E45 6px,transparent 6.5px);background-size:22px 20px;background-position:7px 46px}
.it.calc::before{content:"";position:absolute;left:18px;right:18px;top:-34px;height:40px;background:#fff;box-shadow:0 2px 4px rgba(20,18,31,.2);
  background-image:repeating-linear-gradient(transparent 0 7px,#C8CFD8 7px 8px)}
.it.calc .scrn{display:block;background:#C3C9D2;border-radius:4px;padding:3px 6px;text-align:right;font:600 15px/1.2 ui-monospace,Consolas,monospace;color:#14121F;position:relative}
.it.safe{width:96px;height:96px;background:#3F3F52;border-radius:8px;box-shadow:inset 0 0 0 5px #2C2C3A,0 16px 26px -12px rgba(20,18,31,.5);display:grid;place-items:center;font:700 10px/1 var(--ui);letter-spacing:.12em;color:#C3C9D2;padding-top:52px}
.it.safe::before{content:"";position:absolute;top:18px;left:50%;width:34px;height:34px;margin-left:-17px;border-radius:50%;border:4px solid #C3C9D2;box-shadow:inset 0 0 0 3px #3F3F52,inset 0 0 0 6px #858592}
.it.bag{width:130px;padding:26px 12px 14px;background:rgba(240,242,245,.92);border:1px solid #C8CFD8;border-radius:6px 6px 10px 10px;font-family:var(--hand);font-size:22px;line-height:1.1;color:var(--ink-red);text-align:center;box-shadow:0 14px 24px -12px rgba(20,18,31,.35)}
.it.bag::before{content:"";position:absolute;left:8px;right:8px;top:8px;height:8px;border-top:2px dashed #858592;border-bottom:2px dashed #858592}
.it.power{display:flex;gap:10px;align-items:center;background:#FFFBEB;border:1px solid #F3D9A6;border-radius:12px;padding:10px 14px;font:14px/1.3 var(--ui);color:#3F3F52;box-shadow:0 12px 22px -12px rgba(20,18,31,.3)}
.it.power b{display:block;color:#B45309;font-size:13px}
.it.power svg{width:24px;height:24px;flex:none;color:#B45309}
.it.ring,.cl.ring{width:84px;height:84px;border-radius:50%;box-shadow:inset 0 0 0 6px rgba(120,72,30,.24),inset 0 0 0 11px rgba(120,72,30,.07);max-width:none}
.it.bin{width:90px;text-align:center}
.it.bin svg{width:52px;height:56px;margin:0 auto}
.it.bin path,.it.doodle path,.cl path{fill:none;stroke:var(--ink-pencil);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.it.bin .crumple{display:block;width:30px;height:24px;margin:0 auto -14px;background:#fff;border-radius:42% 58% 47% 53%/50% 40% 60% 50%;box-shadow:inset -3px -4px 0 rgba(20,18,31,.1),0 2px 4px rgba(20,18,31,.2);position:relative;z-index:1;transform:translateY(calc((1 - var(--near)) * -46px))}
.it.bin .hw{font-size:17px}
.it.doodle svg{width:var(--w,160px);height:auto;overflow:visible}
.it.doodle path{stroke-dasharray:600;stroke-dashoffset:calc(600 * (1 - var(--near)))}
.it.doodle.acc path{stroke:var(--ink-red)}
.cl.tape{width:90px;height:24px;background:rgba(255,255,255,.65);box-shadow:0 1px 2px rgba(20,18,31,.1)}
.cl.receipt{width:70px;height:110px;background:#fff;box-shadow:0 6px 12px -6px rgba(20,18,31,.3);background-image:repeating-linear-gradient(transparent 0 9px,#C8CFD8 9px 10px)}
.cl.mini{background:#fff;padding:7px 10px;font:600 18px/1.1 var(--hand);color:#14121F;box-shadow:0 8px 14px -8px rgba(20,18,31,.35)}
.cl.tally{font:600 30px/1 var(--hand);letter-spacing:.18em;color:var(--ink-pencil)}
.cine .x{position:relative;display:inline-block;margin:0 .3em;white-space:nowrap}
.cine .x::after{content:"";position:absolute;left:-2px;right:-2px;top:50%;height:12px;transform-origin:left;transform:translateY(-50%) rotate(-4deg) scaleX(var(--near,1));
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M0 9 L4 3 L8 9 L12 3 L16 9 L20 3 L24 9' fill='none' stroke='%23B91C1C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") repeat-x 0 0/18px 12px}
.circ{position:relative;display:inline-block;padding:0 .2em}
.circ::before{content:"";position:absolute;inset:-6px -8px;border:2px solid var(--ink-red);border-radius:50% 46% 54% 48%/52% 48% 52% 48%;transform:rotate(-4deg) scale(calc(.6 + var(--near,1) * .4));opacity:var(--near,1)}

/* below: calm, typed, one whole phone */
.band-after{position:absolute;left:0;right:0;top:var(--split);bottom:0;background:var(--calm)}
.lbl-after{position:absolute;left:max(24px,calc(50% - 600px));top:24px;font:600 13px/1 var(--ui);color:var(--accent)}
.cap{position:absolute;left:max(24px,calc(50% - 600px));right:calc(50% + 172px);top:52px;z-index:2}
.cap-meta{font-size:13px;font-weight:600;color:var(--dim);font-variant-numeric:tabular-nums}
.cap-q{font:700 clamp(26px,2.6vw,40px)/1.05 var(--disp);letter-spacing:-.02em;margin-top:8px;text-wrap:balance}
.cap-a{color:var(--txt-2);margin-top:10px;font-size:15.5px;line-height:1.5;max-width:30em}
.cap .saved{display:inline-flex;gap:8px;margin-top:12px;font-size:13px;font-weight:600;color:var(--ok)}
.cap .saved span{color:var(--dim);font-weight:500}

.phone{position:absolute;left:50%;top:-56px;width:300px;height:620px;margin-left:-150px;border-radius:46px;padding:11px;z-index:5;transform-origin:top center;transform:scale(var(--ps,.75));
  background:#16181C;box-shadow:0 40px 70px -30px rgba(20,18,31,.45),inset 0 0 0 1px rgba(255,255,255,.12),inset 0 0 0 4px #000}
.phone::before{content:"";position:absolute;top:21px;left:50%;width:84px;height:24px;margin-left:-42px;border-radius:20px;background:#000;z-index:3}
.scr{position:relative;height:100%;border-radius:36px;overflow:hidden;background:#F7F7F9;color:#14121F}
.view{position:absolute;inset:0;padding:56px 16px 16px;display:flex;flex-direction:column;gap:10px;transition:opacity .3s cubic-bezier(.16,1,.3,1),transform .4s cubic-bezier(.16,1,.3,1)}
.view.out{opacity:0;transform:translateY(-16px)}
.view.in{opacity:0;transform:translateY(22px)}
.v-top{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11.5px;color:#6B6B7B}
.v-top span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.v-top b{flex:none;display:flex;align-items:center;gap:6px;color:#14121F;font-size:12.5px}
.v-top b svg{width:18px;height:18px}
.v-title{font:700 24px/1.1 var(--disp);letter-spacing:-.015em}
.v-hero{background:#fff;border-radius:10px;padding:14px;border:1px solid #E6E6EC}
.v-hero .k{font-size:12px;color:#6B6B7B}
.v-hero .v{font:700 32px/1.05 var(--disp);letter-spacing:-.02em;font-variant-numeric:tabular-nums;margin-top:2px}
.v-hero .s{font-size:12.5px;color:#3F3F52;margin-top:4px}
.v-rows{background:#fff;border-radius:10px;border:1px solid #E6E6EC;overflow:hidden}
.v-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 12px;font-size:13.5px;border-top:1px solid #E6E6EC}
.v-row:first-child{border-top:0}
.v-row span:first-child{color:#14121F;font-weight:550}
.v-row .r{color:#6B6B7B;font-variant-numeric:tabular-nums;text-align:right}
.v-row .ok{color:#047857;background:#ECFDF5;border-radius:6px;padding:2px 7px;font-size:12px;font-weight:600;text-align:right}
.v-row .wn{color:#B45309;background:#FFFBEB;border-radius:6px;padding:2px 7px;font-size:12px;font-weight:600;text-align:right}
.v-btn{margin-top:auto;height:46px;border-radius:8px;background:#6E46DC;color:#fff;display:grid;place-items:center;font-weight:600;font-size:14px}
.v-note{font-size:12px;color:#6B6B7B;text-align:center}
.v-tags{display:flex;flex-wrap:wrap;gap:4px}
.v-tags span{font:700 11px/1 var(--ui);letter-spacing:.04em;text-transform:uppercase;padding:4px 6px;border-radius:4px;border:1.5px solid currentColor}
.v-tags .a{color:#5B39B9}.v-tags .b{color:#047857}.v-tags .c{color:#B45309}
.v-wk{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.v-wk i{height:24px;border-radius:5px;background:#F0F0F4;font-style:normal;font-size:10px;display:grid;place-items:center;color:#6B6B7B}
.v-wk i.s{background:#DAD6FE;color:#14121F;font-weight:600}
.v-wk i.l{background:#FFFBEB;color:#B45309;font-weight:600}
.v-ask{background:#EBEAFE;border-radius:14px 14px 4px 14px;padding:9px 11px;font-size:13.5px;align-self:flex-end;max-width:85%}
.v-ans{background:#fff;border:1px solid #E6E6EC;border-radius:14px 14px 14px 4px;padding:10px 12px;font-size:13.5px;line-height:1.45}
.v-ans b{color:#5B39B9;font-size:12px;display:block}
.v-ans small{display:block;color:#6B6B7B;font-size:11.5px;margin-top:6px;border-top:1px solid #E6E6EC;padding-top:6px}

/* your day back */
.bank{position:absolute;right:max(24px,calc(50% - 600px));left:calc(50% + 172px);max-width:300px;margin-left:auto;top:52px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:16px 18px;box-shadow:0 1px 2px rgba(20,18,31,.05);z-index:2}
.bk-h{font-size:13px;font-weight:650;color:var(--txt)}
.bk-big{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-top:8px}
.bk-big b{font:700 30px/1 var(--disp);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.bk-big span{font-size:13px;color:var(--dim)}
.bk-lines{margin:10px 0 6px;padding-top:8px;border-top:1px solid var(--line);display:grid;gap:3px;font-size:12.5px;min-height:72px;align-content:end}
.bk-lines li{display:flex;justify-content:space-between;gap:8px;color:var(--txt-2);animation:dep .35s cubic-bezier(.16,1,.3,1)}
.bk-lines li span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bk-lines li span:last-child{color:var(--ok);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
@keyframes dep{from{opacity:0;transform:translateY(6px)}}
.bk-home{font:700 15px/1.3 var(--disp);color:var(--accent);margin-top:4px}
.bk-foot{font-size:11.5px;color:var(--dim);margin-top:4px}
.cine-note{font-size:13px;color:var(--dim);padding-top:16px;padding-bottom:24px}

@media(max-width:1180px){.tline span{display:none}}
@media(max-width:960px){
  .cine-stage{top:56px;height:calc(100vh - 56px);height:calc(100svh - 56px);--split:40%}
  .tline{top:8px;padding:4px;gap:4px}
  .tline button{min-height:36px;font-size:12.5px}
  .lbl-before{font-size:17px;bottom:22px;left:12px}
  .lbl-after{display:none}
  .cap{left:16px;right:16px;top:14px}
  .cap-meta{font-size:12px}.cap-q{font-size:21px;margin-top:4px}.cap-a{font-size:13.5px;margin-top:4px;line-height:1.4}
  .cap .saved{display:none}
  .phone{top:var(--ptop,140px)}
  .bank{left:auto;right:10px;top:calc(-1 * var(--bank-up,64px));max-width:none;padding:6px 10px;border-radius:10px;display:flex;gap:10px;align-items:baseline}
  .bank .bk-h,.bank .bk-lines,.bank .bk-home,.bank .bk-foot{display:none}
  .bank .bk-big{margin:0;gap:4px}.bank .bk-big b{font-size:17px}.bank .bk-big span{font-size:11px}
  .cell{--sc:.7}
  .cell .it{max-width:min(240px,64vw)}
}
@media (prefers-reduced-motion:reduce){
  .view{transition:opacity .2s}.view.out,.view.in{transform:none}
  .cell .it{transform:translate(-50%,-50%) rotate(var(--r,0deg)) scale(var(--sc,1));opacity:1}
  .bk-lines li{animation:none}.it.ringing svg{animation:none}
}

/* ===== cookie choice, in the house style ===== */
.consent{position:fixed;left:20px;bottom:20px;z-index:80;width:min(400px,calc(100vw - 40px));display:flex;gap:14px;align-items:flex-start;background:var(--surf);border:1px solid var(--line);border-radius:20px;padding:18px 18px 14px;box-shadow:0 24px 60px -20px rgba(52,36,105,.45),0 8px 20px -8px rgba(20,18,31,.2)}
.cmark{width:34px;height:34px;color:var(--txt);flex:none;margin-top:2px}
.cbody{flex:1;min-width:0}
.ct{font:700 18px/1.2 var(--disp)}
.cx{font-size:14px;color:var(--txt-2);margin:4px 0 14px;line-height:1.45}
.cbtns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cbtns .btn{min-height:44px;font-size:14px;padding:0 12px}
.cbtns.one{grid-template-columns:1fr}
.cpriv{display:inline-flex;align-items:center;min-height:44px;margin-top:4px;font-size:13px;color:var(--dim);text-decoration:underline;text-underline-offset:3px}
@media(max-width:520px){.consent{left:12px;right:12px;bottom:12px;width:auto}}


/* without the script, the story reads as a plain list instead of an empty stage */
.cine:not(.ok) .cine-stage{display:none}
.cine:not(.ok) #cineText{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal;max-width:760px;margin:0 auto;padding:40px 20px;display:grid;gap:10px;list-style:decimal inside;color:var(--txt-2)}
.it .b12{font-size:1.2em}

/* QuickScope, the whole site as one board (v2c). Calm on top, the old way below, in equal halves.
   One phone stays fixed in the middle, on the line, and everything else flows around it.
   The phone is sized by layout (no scaling), so its screens stay sharp. Every colour is a token value.
   JS sets --line (the line between the halves, px), --ph (phone height, px) and --gap (half the phone plus air). */
.film{position:relative;background:var(--calm)}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;--rt:68px;--rb:0px;--line:50%;--ph:600px;--pw:calc(var(--ph) * .485);--gap:180px;--fold:0;perspective:1600px}

/* ---------- the halves ---------- */
.stage .band-after{position:absolute;left:0;right:0;top:0;bottom:auto;z-index:3;background:var(--calm);height:calc(var(--line) + (100% - var(--line)) * var(--fold))}
.stage .band-before{position:absolute;left:0;right:0;top:var(--line);bottom:var(--rb);height:auto;z-index:1;background:#F0F0F4;
  transform-origin:50% 0;transform:translateY(calc(var(--fold) * 100%)) rotateX(calc(var(--fold) * -60deg))}
.stage .tear{position:absolute;left:0;top:-1px;bottom:auto;width:100%;height:26px;z-index:4;transform:scaleY(-1);filter:drop-shadow(0 -3px 3px rgba(20,18,31,.16))}
.stage .tear path{fill:var(--calm)}
.stage .lbl-before{left:max(20px,calc(50% - 640px));top:34px;bottom:auto;font-size:19px}
.cell.desk{background-color:#F0F0F4;background-image:radial-gradient(rgba(20,18,31,.05) 1px,transparent 1.2px);background-size:6px 6px}
.cell.plain{background:#FFFFFF linear-gradient(transparent 35px,rgba(110,70,220,.12) 36px) 0 0/100% 36px}
/* the paper keeps clear of the phone: items sit in the left or right lane */
.cell .it.lane-l,.cell .cl.lane-l{left:calc(var(--xs) * (50% - var(--gap)))}
.cell .it.lane-r,.cell .cl.lane-r{left:calc(50% + var(--gap) + var(--xs) * (50% - var(--gap)))}
.world{transition:opacity .35s var(--ease)}
.stage.dip .world{opacity:.35}
.stage .x{position:relative;display:inline-block;margin:0 .3em;white-space:nowrap}
.stage .x::after{content:"";position:absolute;left:-2px;right:-2px;top:50%;height:12px;transform-origin:left;transform:translateY(-50%) rotate(-4deg) scaleX(var(--near,1));
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M0 9 L4 3 L8 9 L12 3 L16 9 L20 3 L24 9' fill='none' stroke='%23B91C1C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") repeat-x 0 0/18px 12px}

/* ---------- the rail: logo centred in the left gap, early access centred in the right gap ---------- */
.rail{position:absolute;left:0;right:0;top:0;height:var(--rt);z-index:10;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;background:var(--calm);padding:0 16px}
.rail .lockup{justify-self:center;font-size:21px;min-height:44px}.rail .lockup svg{width:30px;height:30px}
.rail-cta{justify-self:center;min-height:44px;font-size:14.5px;padding:0 18px}
.chs{display:flex;justify-content:center;gap:2px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:4px;transition:opacity .3s}
.chs button{position:relative;min-height:40px;padding:6px 13px 11px;border-radius:8px;font-size:13.5px;white-space:nowrap}
.chs button b{font-weight:600;color:var(--dim)}
.chs button .short{display:none}
.chs button:hover b{color:var(--txt)}
.chs button.on{background:var(--surf-2)}.chs button.on b{color:var(--txt)}
.chs i{position:absolute;left:13px;right:13px;bottom:5px;height:2px;border-radius:2px;background:var(--line)}
.chs i::after{content:"";position:absolute;inset:0;border-radius:2px;background:var(--accent);transform-origin:left;transform:scaleX(var(--p,0))}

/* ---------- the phone: fixed, centred on the line, real size ---------- */
.stage .phone{position:absolute;z-index:6;left:50%;top:calc(var(--line) - var(--ph) / 2);width:var(--pw);height:var(--ph);margin-left:calc(var(--pw) / -2);transform:none;
  border-radius:calc(var(--pw) * .16);padding:calc(var(--pw) * .032);background:#16181C;
  box-shadow:0 60px 90px -40px rgba(52,36,105,.45),0 24px 40px -24px rgba(20,18,31,.4),inset 0 0 0 1.5px rgba(255,255,255,.14),inset 0 0 0 5px #000;
  transition:opacity .45s var(--ease)}
.stage .phone::before{top:calc(var(--pw) * .062);width:calc(var(--pw) * .29);height:calc(var(--pw) * .085);margin-left:calc(var(--pw) * -.145)}
.stage .scr{position:relative;height:100%;border-radius:calc(var(--pw) * .13);overflow:hidden;background:#F7F7F9;color:#14121F;container-type:inline-size;font-family:var(--ui)}
.sbar{position:absolute;left:0;right:0;top:0;height:13cqw;padding:0 8cqw 0 9cqw;display:flex;align-items:center;justify-content:space-between;font-size:4cqw;z-index:2}
.sbar b{font-weight:650;font-variant-numeric:tabular-nums;margin-right:auto}
.sig{display:flex;align-items:flex-end;gap:.6cqw;height:3cqw;margin-right:2cqw}
.sig i{width:.9cqw;background:#14121F;border-radius:.3cqw}
.sig i:nth-child(1){height:1.2cqw}.sig i:nth-child(2){height:1.8cqw}.sig i:nth-child(3){height:2.4cqw}.sig i:nth-child(4){height:3cqw}
.bat{width:6.5cqw;height:3.1cqw;border:.35cqw solid #14121F;border-radius:1cqw;position:relative;background:linear-gradient(90deg,#14121F 70%,transparent 70%) content-box;padding:.35cqw}
.views{position:absolute;left:0;right:0;top:13cqw;bottom:19cqw}
.stage .view{position:absolute;inset:0;padding:2cqw 5cqw 4cqw;display:flex;flex-direction:column;gap:3cqw;transition:opacity .3s var(--ease);transform:none}
.stage .view.out,.stage .view.in{opacity:0;transform:none}
.tabs{position:absolute;left:0;right:0;bottom:0;height:19cqw;display:grid;grid-template-columns:repeat(4,1fr);align-items:start;padding-top:2.4cqw;background:rgba(255,255,255,.96);border-top:1px solid #E6E6EC}
.tabs span{display:grid;justify-items:center;gap:.8cqw;font-size:2.9cqw;font-weight:600;color:#858592}
.tabs svg{width:6.2cqw;height:6.2cqw;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tabs span.on{color:#6E46DC}
.stage .v-top{display:flex;align-items:center;justify-content:space-between;gap:2cqw;font-size:3.2cqw;color:#6B6B7B}
.stage .v-top b{display:flex;align-items:center;gap:1.8cqw;font-size:4cqw;color:#14121F;font-weight:700}
.stage .v-top b svg{width:6.2cqw;height:6.2cqw}
.stage .v-top span{background:#fff;border:1px solid #E6E6EC;border-radius:99px;padding:1cqw 2.6cqw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.stage .v-title{font:700 8cqw/1.08 var(--disp);letter-spacing:-.02em;margin-top:1cqw}
.stage .v-hero{background:#fff;border:1px solid #E6E6EC;border-radius:4cqw;padding:4.2cqw 4.6cqw;box-shadow:0 1px 2px rgba(20,18,31,.04)}
.stage .v-hero .k{font-size:3.3cqw;color:#6B6B7B;font-weight:550}
.stage .v-hero .v{font:700 10.5cqw/1.05 var(--disp);letter-spacing:-.025em;margin-top:1cqw;font-variant-numeric:tabular-nums}
.stage .v-hero .s{font-size:3.5cqw;color:#3F3F52;margin-top:1.4cqw}
.stage .v-rows{background:#fff;border:1px solid #E6E6EC;border-radius:4cqw;overflow:hidden}
.stage .v-row{display:flex;align-items:center;justify-content:space-between;gap:3cqw;padding:3.3cqw 4cqw;font-size:3.9cqw;border-top:1px solid #EEEEF2}
.stage .v-row:first-child{border-top:0}
.stage .v-row span:first-child{font-weight:600;min-width:0}
.stage .v-row .r{color:#6B6B7B;text-align:right;font-variant-numeric:tabular-nums}
.stage .v-row .ok,.stage .v-row .wn{font-size:3.2cqw;font-weight:650;border-radius:2cqw;padding:1cqw 2.2cqw;text-align:right}
.stage .v-row .ok{color:#047857;background:#ECFDF5}.stage .v-row .wn{color:#B45309;background:#FFFBEB}
.stage .v-btn{margin-top:auto;height:12.5cqw;border-radius:3.4cqw;background:#6E46DC;color:#fff;display:grid;place-items:center;font-weight:650;font-size:4.2cqw}
.stage .v-note{font-size:3.3cqw;color:#6B6B7B;text-align:center;line-height:1.4}
.stage .v-tags span{font-size:2.9cqw;padding:1cqw 1.6cqw}
.stage .v-wk{gap:1cqw}
.stage .v-wk i{height:8cqw;border-radius:2cqw;font-size:3cqw}
.stage .v-ask{font-size:3.9cqw;padding:2.6cqw 3.4cqw;border-radius:4cqw 4cqw 1.2cqw 4cqw;background:#EBEAFE;align-self:flex-end;max-width:85%}
.stage .v-ans{font-size:3.9cqw;line-height:1.45;padding:3cqw 3.6cqw;border-radius:4cqw 4cqw 4cqw 1.2cqw;background:#fff;border:1px solid #E6E6EC}
.stage .v-ans b{font-size:3.3cqw;color:#5B39B9;display:block}
.stage .v-ans small{font-size:3.1cqw;color:#6B6B7B;display:block;margin-top:2cqw;padding-top:2cqw;border-top:1px solid #E6E6EC}

/* ---------- the calm panels: a column each side of the phone, centred in its gap ---------- */
.calm{position:absolute;left:0;right:0;top:var(--rt);bottom:0;opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility 0s .45s}
.calm.on{opacity:1;visibility:visible;transition:opacity .45s var(--ease),visibility 0s}
.side{position:absolute;top:0;bottom:0;display:flex;flex-direction:column;justify-content:center;padding:12px 28px 20px}
.side>*{width:min(100%,430px);margin-left:auto;margin-right:auto}
.side.l{left:0;right:calc(50% + var(--gap))}
.side.r{right:0;left:calc(50% + var(--gap))}
.h1{font:800 clamp(36px,3.5vw,58px)/.98 var(--disp);letter-spacing:-.035em}
.h1 .find{display:block;color:var(--accent)}
.side .lede{margin:14px auto 16px;font-size:clamp(14.5px,1.05vw,16.5px);line-height:1.5}
.cap-meta{font-size:13px;font-weight:600;color:var(--dim)}
.calm .cap-q{font:700 clamp(26px,2.4vw,38px)/1.06 var(--disp);letter-spacing:-.02em;margin-top:8px;text-wrap:balance}
.calm .cap-a{color:var(--txt-2);margin-top:10px;font-size:clamp(14.5px,1.05vw,16px);line-height:1.5}
.saved{margin-top:12px;font-size:13.5px;font-weight:650;color:var(--ok)}
.saved span{color:var(--dim);font-weight:500}
.kicker{font:700 clamp(18px,1.5vw,22px)/1.2 var(--disp);color:var(--txt)}
.ticks{display:grid;gap:2px;margin-top:10px}
.ticks li{display:flex;gap:10px;align-items:center;padding:8px 0;font-size:15px;font-weight:550;color:var(--txt);border-top:1px solid var(--line);animation:dep .35s var(--ease) both}
.ticks li:first-child{border-top:0}
.ticks li::before{content:"";flex:none;width:20px;height:20px;border-radius:50%;background:var(--ok-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23047857' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat}
.ticks li:nth-child(2){animation-delay:.05s}.ticks li:nth-child(3){animation-delay:.1s}.ticks li:nth-child(4){animation-delay:.15s}.ticks li:nth-child(5){animation-delay:.2s}
.scroll-cue{margin-top:18px;font-size:13.5px;font-weight:600;color:var(--accent)}
.mini-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
.mini-form input{min-height:var(--target);padding:0 14px;border:1.5px solid var(--line-2);border-radius:var(--r-control);background:#fff;font:inherit;color:var(--txt);min-width:0;width:100%}
.mini-form input:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.mini-form .mf-msg{grid-column:1/-1;font-size:14px;font-weight:600}
.mini-form .mf-msg:empty{display:none}
.mini-form .mf-msg.bad{color:#B91C1C}.mini-form .mf-msg.good{color:var(--ok)}
.mini-form .mf-note{grid-column:1/-1;font-size:12.5px;color:var(--dim);line-height:1.45}
.mini-form .mf-note a{color:var(--txt-2);text-decoration:underline;text-underline-offset:3px}
.mini-form.stacked{grid-template-columns:1fr}
.mini-form .field{display:grid;gap:4px;font-size:13px;font-weight:600;color:var(--txt-2)}
.mini-form .field em{font-style:normal;font-weight:400;color:var(--dim)}

/* your day back */
.stage .bank{position:static;width:min(100%,340px);max-width:none;margin:0 auto;left:auto;right:auto;top:auto;padding:18px 20px;border-radius:14px;box-shadow:var(--shadow-float)}
.bk-two{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:8px}
.stage .bk-big{display:grid;margin:0;gap:2px}
.stage .bk-big b{font-size:30px}
.stage .bk-big span{font-size:12.5px}

/* drop-downs: one open at a time */
.acc{border-top:1px solid var(--line)}
.acc:last-child{border-bottom:1px solid var(--line)}
.acc summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:14px;min-height:50px;padding:10px 0;font:650 15.5px/1.3 var(--ui);color:var(--txt)}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"";flex:none;width:9px;height:9px;border:solid var(--dim);border-width:0 2px 2px 0;transform:rotate(45deg) translateY(-2px);transition:transform .25s var(--ease)}
.acc[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.acc p{padding:0 0 14px;font-size:14px;line-height:1.5;color:var(--txt-2)}
.acc a{color:var(--accent);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.qa-g{display:none}.qa-g.on{display:block}

/* the sign-up */
.h-close{font:800 clamp(36px,3.8vw,62px)/.95 var(--disp);letter-spacing:-.035em}
.h-close span{display:block;color:var(--accent)}
.side .ends{margin-top:18px;gap:6px}
.side .ends li{padding-top:8px;font-size:15px}
.side .ends b{font:700 16px/1 var(--disp);color:var(--txt);margin-right:4px}
.join-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 18px 6px;box-shadow:var(--shadow-float)}
.join-card .beta{font-size:12.5px;color:var(--dim);margin-bottom:10px}
.join-card .mini-form{gap:10px}
.join-card .acc{margin-top:10px;border-bottom:0}
.join-card .acc summary{font-size:14px;min-height:44px}
.next{display:grid;gap:6px;padding-bottom:12px;counter-reset:n}
.next li{position:relative;padding-left:28px;font-size:13px;line-height:1.4;color:var(--txt-2);counter-increment:n}
.next li::before{content:counter(n);position:absolute;left:0;top:0;width:20px;height:20px;border-radius:50%;background:var(--accent-bg);color:var(--accent);font:700 12px/20px var(--ui);text-align:center}
.next b{color:var(--txt);font-weight:600}

/* the house: the last square */
.calm-house{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:14px;padding:24px 20px 80px}
.lockup.big{font-size:40px;min-height:0}.lockup.big svg{width:58px;height:58px}
.house-tag{font:800 clamp(30px,3.6vw,54px)/1 var(--disp);letter-spacing:-.03em;color:var(--txt);margin-top:8px}
.house-sub{font-size:16px;color:var(--dim)}
.house-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:8px}
.house-note{font-size:12.5px;color:var(--dim);max-width:44em;margin-top:10px}

/* the phone hides where the page needs the room */
.stage[data-ch="join"] .phone,.stage.closing .phone{opacity:0;pointer-events:none}

/* ---------- small print and the route map ---------- */
.fine{position:absolute;left:50%;bottom:calc(var(--rb) + 10px);transform:translateX(-50%);z-index:8;display:flex;gap:2px;padding:2px 6px;border-radius:99px;background:rgba(255,255,255,.88);box-shadow:0 2px 10px -6px rgba(20,18,31,.3);font-size:12px;white-space:nowrap}
.fine a,.fine button{display:inline-flex;align-items:center;min-height:32px;padding:0 8px;color:var(--dim);font-size:12px;font-weight:500}
.fine a:hover,.fine button:hover{color:var(--txt)}
.map{position:absolute;right:max(16px,calc(50% - 640px));bottom:16px;z-index:5;background:rgba(255,255,255,.92);border-radius:10px;box-shadow:0 6px 18px -10px rgba(20,18,31,.35);overflow:visible}
.map .rt{fill:none;stroke:#C3C9D2;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.map .done{fill:none;stroke:#6E46DC;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.map circle{fill:#FFFFFF;stroke:#858592;stroke-width:1.5;cursor:pointer}
.map circle.past{fill:#DAD6FE;stroke:#6E46DC}
.map circle.here{fill:#6E46DC;stroke:#6E46DC}
.map text{font:600 9px/1 var(--ui);fill:#6B6B7B}
.stage.closing .map,.stage.closing .lbl-before{opacity:0}

/* real objects the basics chapter adds */
.it.file{width:64px;height:190px;background:#3F3F52;border-radius:4px;box-shadow:inset -6px 0 0 rgba(0,0,0,.25),0 14px 24px -12px rgba(20,18,31,.45);display:grid;place-items:center;text-align:center;font:700 11px/1.2 var(--ui);color:#14121F;padding:36px 6px 0;align-content:start;background-image:linear-gradient(#fff,#fff);background-size:46px 64px;background-position:center 24px;background-repeat:no-repeat}
.it.file::before{content:"";position:absolute;bottom:24px;left:50%;width:22px;height:22px;margin-left:-11px;border-radius:50%;background:#16181C;box-shadow:0 0 0 3px #858592}
.it.box{width:190px;height:120px;background:#FFF0A6;border:1px solid #C8CFD8;border-radius:4px;box-shadow:inset 0 14px 0 rgba(20,18,31,.06),0 16px 26px -12px rgba(20,18,31,.4);display:grid;place-items:center;text-align:center;font:600 24px/1.05 var(--hand);color:#14121F}

/* no script: a plain page */
.film:not(.ok) .stage{position:relative;height:auto;overflow:visible}
.film:not(.ok) .band-before,.film:not(.ok) .phone,.film:not(.ok) .map{display:none}
.film:not(.ok) .band-after{position:relative;height:auto}
.film:not(.ok) .calm{position:relative;opacity:1;visibility:visible;inset:auto;padding:24px 0}
.film:not(.ok) .side{position:static}
.film:not(.ok) .qa-g{display:block}
.film:not(.ok) .rail,.film:not(.ok) .fine{position:relative;transform:none;left:auto}

@media(max-width:1180px){.chs button{padding:6px 9px 11px}.chs i{left:9px;right:9px}.rail .lockup span{display:none}}
@media(min-width:961px) and (max-height:780px){
  .stage{--rt:60px}
  .h1{font-size:clamp(32px,3vw,46px)}
  .side .lede{margin:8px auto 10px;font-size:14px}
  .side .lede strong{display:none}
  .calm .cap-q{font-size:clamp(22px,2vw,30px)}
  .ticks li{padding:5px 0;font-size:14px}
  .stage .bk-lines{display:none}
  .h-close{font-size:clamp(32px,3.2vw,48px)}
  .side .ends{display:none}
}

/* ---------- phones ---------- */
@media(max-width:960px){
  .stage{--rt:0px;--rb:calc(58px + env(safe-area-inset-bottom))}
  .rail{top:auto;bottom:0;height:var(--rb);display:block;padding:5px 4px env(safe-area-inset-bottom);background:rgba(255,255,255,.97);border-top:1px solid var(--line)}
  .rail .lockup,.rail-cta{display:none}
  .chs{border:0;padding:0;justify-content:space-between;gap:1px;background:none}
  .chs button{flex:1;padding:8px 1px 12px;font-size:12px}
  .chs button .long{display:none}.chs button .short{display:inline}
  .chs i{left:5px;right:5px}
  .calm{top:0}
  .side{padding:12px 16px}
  .side>*{width:100%}
  /* with the phone: text above it, the day-back pill in the paper's corner */
  .side.l{left:0;right:0;top:0;bottom:calc(var(--ph) / 2 + 6px);justify-content:center}
  .side.r{left:auto;right:8px;top:calc(100% + 34px);bottom:auto;padding:0}
  .side.r>*{width:auto}
  .stage .bank{display:flex;gap:10px;align-items:baseline;padding:6px 10px;border-radius:10px;width:auto}
  .stage .bank .bk-h,.stage .bank .bk-lines,.stage .bank .bk-home,.stage .bank .bk-foot{display:none}
  .bk-two{display:flex;gap:10px;margin:0}
  .stage .bk-big{display:flex;align-items:baseline;gap:4px}.stage .bk-big b{font-size:17px}.stage .bk-big span{font-size:11px}
  #calmBasics .side.r{display:none}
  .calm .cap-q{font-size:21px;margin-top:4px}
  .calm .cap-a{font-size:13.5px;margin-top:4px;line-height:1.4}
  .cap-meta{font-size:12px}
  .saved{display:none}
  /* without the phone: one column, top to bottom */
  #calmOpen,#calmQuestions,#calmJoin{display:flex;flex-direction:column;padding:16px 16px 0;overflow:hidden}
  #calmOpen .side,#calmQuestions .side,#calmJoin .side{position:static;padding:0;display:block}
  .stage[data-ch="open"] .phone,.stage[data-ch="questions"] .phone{opacity:0;pointer-events:none}
  #calmOpen .side.r{display:none}
  .h1{font-size:clamp(34px,10vw,44px)}
  .side .lede{font-size:14.5px;margin:10px 0 12px;line-height:1.45}
  .mini-form{grid-template-columns:1fr}
  .mini-form .mf-note{font-size:11.5px}
  #calmQuestions .side.l .cap-a{display:none}
  #calmQuestions .side.r{margin-top:8px}
  .acc summary{font-size:14.5px;min-height:46px}
  .acc p{font-size:13.5px}
  .h-close{font-size:clamp(32px,9.5vw,42px)}
  #calmJoin .ends,.join-card .beta{display:none}
  #calmJoin .side.r{margin-top:12px}
  .join-card{padding:12px 14px 4px}
  .stage .lbl-before{font-size:15px;top:30px;left:10px}
  .map{display:none}
  .fine{bottom:calc(var(--rb) + 6px)}
  .fine a,.fine button{padding:0 6px;font-size:11.5px}
  .lockup.big{font-size:30px}.lockup.big svg{width:44px;height:44px}
  .calm-house{padding:20px 16px 90px}
  .bascorp-badge img{height:30px}
}
@media (prefers-reduced-motion:reduce){
  .calm,.calm.on,.phone,.world,.stage .view{transition:none}
  .ticks li{animation:none}
}
/* fixes after the first look */
.calm .h1 .snap{padding:0;margin:0;border:0}
.calm .h1 .snap::before,.calm .h1 .snap::after{content:none;display:none}
.stage[data-ch="join"] .phone{opacity:1;pointer-events:auto}
@media(max-width:960px){
  .stage[data-ch="join"] .phone{opacity:0}
  #calmDay .side.r{display:none}
  #calmDay .saved{display:block;margin-top:6px;font-size:12.5px}
  .cell .it.lane-l,.cell .cl.lane-l{left:calc(var(--xs) * 50%)}
  .cell .it.lane-r,.cell .cl.lane-r{left:calc(50% + var(--xs) * 50%)}
}
/* fuller screens: bigger type and roomier rows so each screen fills the phone */
.stage .view{gap:3.6cqw;padding-top:3cqw}
.stage .v-title{font-size:9.4cqw}
.stage .v-hero{padding:5.4cqw 5cqw}
.stage .v-hero .k{font-size:3.7cqw}
.stage .v-hero .v{font-size:12.5cqw;margin-top:1.6cqw}
.stage .v-hero .s{font-size:3.8cqw;margin-top:2cqw}
.stage .v-row{padding:4.6cqw 4.4cqw;font-size:4.3cqw}
.stage .v-row .ok,.stage .v-row .wn{font-size:3.5cqw;padding:1.3cqw 2.6cqw}
.stage .v-row .r{font-size:4cqw}
.stage .v-wk i{height:10cqw;font-size:3.4cqw}
.stage .v-ask,.stage .v-ans{font-size:4.3cqw}
.stage .v-note{font-size:3.6cqw}
.stage .v-btn{height:14cqw;font-size:4.6cqw}
/* round 3 fixes: the phone never shows on the last page; the logo name always shows; the form stays on the last page */
.stage.closing .phone{opacity:0!important;pointer-events:none!important}
@media(max-width:1180px){.rail .lockup span{display:inline}.rail .lockup{font-size:18px}.rail .lockup svg{width:26px;height:26px}.rail-cta{padding:0 12px;font-size:13.5px}.chs button{padding:6px 7px 11px;font-size:13px}.chs i{left:7px;right:7px}}
@media(min-width:961px) and (max-width:1060px){.rail .lockup{font-size:16px;gap:6px}.chs button{padding:6px 5px 11px;font-size:12.5px}}
.house-form{width:min(100%,480px);margin-top:10px;text-align:left}
.again{display:inline-flex;align-items:center;min-height:44px;font-weight:600;font-size:14.5px;color:var(--accent);text-decoration:underline;text-underline-offset:4px}

/* ===== v2d: a round trip. Whole page, the paper tears open, the journey, the paper closes again. =====
   JS sets --line (top of the paper), --pc (centre of the phone) and --v (how far the paper is open, 0 to 1). */
.stage .band-after{height:var(--line)}
.stage .band-before{top:var(--line);bottom:var(--rb);height:auto;transform:none}
.stage .phone{top:calc(var(--pc) - var(--ph) / 2)}
.stage.whole .phone,.stage .phone{opacity:1;pointer-events:auto}
.stage .lbl-before,.map{opacity:var(--v,1);transition:none}
/* the paper fills edge to edge, under the phone too */
.cell .it.lane-l,.cell .cl.lane-l{left:calc(var(--xs) * 50%)}
.cell .it.lane-r,.cell .cl.lane-r{left:calc(50% + var(--xs) * 50%)}
.cl.note{font:600 clamp(19px,1.6vw,25px)/1.1 var(--hand);white-space:nowrap;opacity:.92;background:none;padding:0}

/* everything centred, in groups */
.side{text-align:center}
.side .lede,.calm .cap-a{margin-left:auto;margin-right:auto}
.ticks{width:max-content;max-width:100%;margin:10px auto 0;text-align:left}
.stage .bank{text-align:center}
.bk-lines li{text-align:left}
.acc summary{justify-content:center;text-align:center}
.acc summary::after{margin-left:6px}
.acc p{text-align:center}
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:18px auto 0}
.chips li{padding:7px 12px;border-radius:99px;background:#fff;border:1px solid var(--line);font-size:13.5px;font-weight:600;color:var(--txt-2)}
.chips li:nth-child(odd){background:var(--accent-bg);border-color:transparent;color:#5B39B9}
.join-card{text-align:left;width:min(100%,400px)}
.jc-h{font:700 22px/1.15 var(--disp);letter-spacing:-.01em}
.join-card .beta{margin:4px 0 12px}
.join-card .acc summary{justify-content:space-between;text-align:left}
.house-note{font-size:12px;color:var(--dim);margin-top:14px;line-height:1.45}
#calmHouse .bascorp-badge{margin:10px auto 0}
.scroll-cue{position:absolute;left:50%;bottom:58px;transform:translateX(-50%);margin:0;font-size:13.5px;font-weight:600;color:var(--accent);white-space:nowrap;opacity:calc(1 - var(--v,0) * 3)}
.scroll-cue span{display:inline-block;animation:cue 1.8s ease-in-out infinite}
@keyframes cue{50%{transform:translateY(4px)}}
@media(min-width:961px) and (max-height:780px){.chips li{padding:5px 10px;font-size:12.5px}.join-card .acc{display:none}.house-note{display:none}}
@media(max-width:960px){
  .stage[data-ch="open"] .phone,.stage[data-ch="house"] .phone,.stage[data-ch="questions"] .phone{opacity:0;pointer-events:none}
  #calmOpen,#calmHouse{display:flex;flex-direction:column;justify-content:center;gap:16px;padding:16px 16px 70px;overflow:hidden}
  #calmOpen .side,#calmHouse .side{position:static;padding:0;display:block}
  #calmOpen .side.r,#calmHouse .side.r{display:block}
  .chips{margin-top:10px;gap:6px}.chips li{font-size:12px;padding:5px 9px}
  .join-card{margin:0 auto;padding:12px 14px 4px}
  .jc-h{font-size:18px}
  .join-card .beta,.join-card .acc,.house-note{display:none}
  .scroll-cue{display:none}
  #calmHouse .bascorp-badge{margin-top:8px}
}
@media (prefers-reduced-motion:reduce){.scroll-cue span{animation:none}}
/* v2d polish */
.scroll-cue{left:0;right:calc(50% + var(--gap));transform:none;text-align:center;bottom:64px}
#calmHouse .bascorp-badge{width:auto;align-self:center;margin:12px auto 0}
.stage .bk-lines{min-height:0}
@media(max-width:960px){.stage .lbl-before{font-size:14px;max-width:calc(50% - var(--gap) - 10px);white-space:normal;line-height:1.1}}
/* v2e: the paper, reviewed. Chapter titles smaller, in the left column; a red stamp names each stop's problem. */
.cell .it.big{font-size:clamp(34px,3vw,50px);max-width:min(360px,30vw);white-space:nowrap}
.cell .stamp{position:absolute;top:var(--y);z-index:4;transform:translate(-50%,-50%) rotate(-11deg) scale(calc(1.5 - var(--near,1) * .5));opacity:var(--near,1);
  padding:5px 12px 4px;border:3px solid currentColor;border-radius:6px;box-shadow:inset 0 0 0 2px #FFFFFF,inset 0 0 0 4px currentColor;
  font:800 clamp(14px,1.15vw,18px)/1 var(--ui);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;color:#B91C1C;background:rgba(255,255,255,.35);mix-blend-mode:multiply;pointer-events:none}
.cell .stamp.good{color:#047857}
.cell .stamp.lane-l{left:calc(var(--xs) * 50%)}
.cell .stamp.lane-r{left:calc(50% + var(--xs) * 50%)}
.cl.note{font-size:clamp(18px,1.45vw,23px)}
@media (prefers-reduced-motion:reduce){.cell .stamp{transform:translate(-50%,-50%) rotate(-11deg);opacity:1}}

/* ===== v2f: after five fresh reviews. Every scene says whose phone it is. ===== */
:root{--r-owner:#342469;--r-mgr:#6E46DC;--r-emp:#3F3F52}
.vbadge{display:inline-flex;align-items:center;gap:6px;margin-right:8px;padding:4px 10px 4px 8px;border-radius:99px;font:700 12px/1 var(--ui);letter-spacing:.06em;text-transform:uppercase;color:#FFFFFF;vertical-align:1px}
.vbadge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.7}
.vbadge.r-owner{background:var(--r-owner)}.vbadge.r-mgr{background:var(--r-mgr)}.vbadge.r-emp{background:var(--r-emp)}
.cap-meta{font-size:13.5px;color:var(--txt-2);font-weight:600}
.onphone{margin-bottom:14px}
/* in the phone: whose phone this is */
.stage .v-who{display:flex;align-items:center;gap:2.4cqw;padding:2.2cqw 3cqw;border-radius:3cqw;color:#FFFFFF;font-size:3.4cqw;margin-top:1cqw}
.stage .v-who i{display:grid;place-items:center;width:7cqw;height:7cqw;border-radius:50%;background:rgba(255,255,255,.22);font:700 3.6cqw/1 var(--ui);font-style:normal}
.stage .v-who b{font-weight:700}
.stage .v-who span{margin-left:auto;font-weight:600;opacity:.85;white-space:nowrap}
.stage .v-who.r-owner{background:var(--r-owner)}.stage .v-who.r-mgr{background:var(--r-mgr)}.stage .v-who.r-emp{background:var(--r-emp)}
.stage .v-title{margin-top:0}
.stage .v-snap{margin-top:auto;display:flex;align-items:center;justify-content:center;gap:2cqw;height:13cqw;border-radius:99px;background:#14121F;color:#FFFFFF;font-weight:650;font-size:4.2cqw}
.stage .v-snap svg{width:5.4cqw;height:5.4cqw}
/* the gains: a quiet tick line, not buttons */
.gains{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 16px;margin:18px auto 0}
.gains li{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--txt-2)}
.gains li::before{content:"";width:16px;height:16px;border-radius:50%;background:var(--ok-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23047857' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/10px no-repeat}
/* the menu lights only where you are; one thin bar shows the whole journey */
.chs{position:relative}
.chs::after{content:"";position:absolute;left:10px;right:10px;bottom:-6px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--accent) calc(var(--prog,0) * 100%),var(--line) 0)}
.chs i{background:transparent}
/* the small print only on the first and last page */
.fine{transition:opacity .3s}
.stage:not(.whole) .fine{opacity:0;pointer-events:none}
/* the time-back card's payoff line is plain, not a link colour */
.bk-home{color:var(--txt)!important}
/* phones */
.m-mark{display:none}
@media(max-width:960px){
  .m-mark{display:block;position:absolute;left:12px;top:calc(10px + env(safe-area-inset-top));z-index:9;width:30px;height:30px}
  .m-mark svg{width:30px;height:30px}
  .stage .lbl-before{max-width:none;white-space:nowrap;font-size:15px}
  .stage .lbl-before .more{display:none}
  .vbadge{font-size:10.5px;padding:3px 8px 3px 6px}
  .onphone{display:none}
  .gains{gap:4px 10px;margin-top:10px}.gains li{font-size:12.5px}
  .consent{bottom:calc(66px + env(safe-area-inset-bottom))!important}
  .chs::after{bottom:2px}
}

/* ===== v2g: JB's pass. Commanding taglines, an ID tag on the tear, contact instead of sign-up. ===== */
/* the taglines own the left side on the first and last page */
.h1.big{font-size:clamp(50px,5.4vw,96px);line-height:.92;letter-spacing:-.04em}
#calmOpen .side.l>*,#calmHouse .side.l>*{width:min(100%,560px)}
#calmOpen .lede,#calmHouse .lede{font-size:clamp(16px,1.25vw,19px);margin-top:20px;color:var(--txt-2)}
.kicker{font:700 clamp(18px,1.45vw,22px)/1.25 var(--disp)}
.cta-row{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:22px auto 0}
.cta-note{font-size:12.5px;color:var(--dim);margin-top:12px}
.ask-more{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;margin-top:16px;font-size:14px;font-weight:600;color:var(--txt-2)}
.mini-form textarea{width:100%;min-height:74px;padding:10px 14px;border:1.5px solid var(--line-2);border-radius:var(--r-control);background:#fff;font:inherit;color:var(--txt);resize:vertical}
.mini-form textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.onphone{display:none!important}

/* whose phone: an ID card clipped onto the tear, centred in the left lane; never on the first or last page */
.idtag{position:absolute;z-index:7;top:var(--line);left:calc((50% - var(--gap)) / 2);display:flex;align-items:center;gap:12px;padding:14px 18px 12px 14px;
  background:#FFFFFF;border:1px solid var(--line);border-radius:12px;box-shadow:0 18px 30px -16px rgba(20,18,31,.45),0 2px 4px rgba(20,18,31,.06);
  transform-origin:50% -14px;transform:translate(-50%,-58%) rotate(-3deg);transition:opacity .35s var(--ease)}
.idtag .clip{position:absolute;left:50%;top:-11px;width:34px;height:16px;margin-left:-17px;border-radius:5px;background:#C3C9D2;box-shadow:inset 0 -3px 0 #858592}
.idtag .clip::after{content:"";position:absolute;left:9px;right:9px;top:5px;height:4px;border-radius:2px;background:#FFFFFF}
.idtag i{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;color:#FFFFFF;flex:none}
.idtag i svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.idtag.r-owner i{background:var(--r-owner)}.idtag.r-mgr i{background:var(--r-mgr)}.idtag.r-emp i{background:var(--r-emp)}
.idtag .t{display:grid;gap:2px;text-align:left}
.idtag b{font:700 17px/1.1 var(--disp);color:var(--txt)}
.idtag .t span{font-size:13px;color:var(--dim);white-space:nowrap}
.idtag.swing{animation:swing .7s cubic-bezier(.3,1.6,.5,1)}
@keyframes swing{0%{transform:translate(-50%,-58%) rotate(-14deg)}100%{transform:translate(-50%,-58%) rotate(-3deg)}}
.stage.whole .idtag{opacity:0}
/* the old-system label moves to the right of the phone, on the tear */
.stage .lbl-before{left:calc(50% + var(--gap) + (50% - var(--gap)) / 2);transform:translateX(-50%) rotate(-2deg);top:26px;white-space:nowrap}
/* caption: a plain line; the view word only shows on phones (the tag does it on larger screens) */
.vbadge{display:none!important}
/* in the phone: the signed-in person, quietly, like a real app */
.stage .v-who{background:none!important;color:#14121F;padding:0;margin-top:0;font-size:3.5cqw}
.stage .v-who i{width:7.4cqw;height:7.4cqw;color:#FFFFFF}
.stage .v-who.r-owner i{background:var(--r-owner)}.stage .v-who.r-mgr i{background:var(--r-mgr)}.stage .v-who.r-emp i{background:var(--r-emp)}
.stage .v-who span{color:#6B6B7B;opacity:1;margin-left:0}
.stage .v-who b{margin-right:auto}
/* snap: the accent, never black */
.stage .v-snap{background:#EBEAFE;color:#5B39B9;border:1.5px solid #DAD6FE}
/* the battery drains through the day */
.stage .bat{background:linear-gradient(90deg,#14121F var(--bat,100%),transparent 0) content-box}
.stage.bat-low .bat{background:linear-gradient(90deg,#B91C1C var(--bat,20%),transparent 0) content-box}
.stage.bat-full .bat{background:linear-gradient(90deg,#047857 100%,transparent 0) content-box}

/* a little life on the paper, to catch the eye while scrolling */
@keyframes print{0%,60%,100%{height:40px}30%{height:54px}}
@keyframes pop{0%,70%,100%{transform:none}78%{transform:translateY(-3px) scale(1.03)}}
@keyframes sway{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
@keyframes flick{0%,86%,90%,100%{opacity:1}88%{opacity:.25}}
@keyframes dial{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
@keyframes nudge{0%,80%,100%{translate:0 0}85%{translate:-2px 0}90%{translate:2px 0}95%{translate:-1px 0}}
.cell .it.calc::before{animation:print 2.6s ease-in-out infinite}
.cell .it.stack span:last-child{animation:pop 3s ease-in-out infinite}
.cell .it.stack span:nth-child(2){animation:pop 3s ease-in-out .4s infinite}
.cell .it.bag{animation:nudge 4s ease-in-out infinite}
.cell .it.power svg{animation:flick 3.2s linear infinite}
.cell .it.safe::before{animation:dial 6s linear infinite}
.cell .it.call svg{animation:flick 2.4s linear infinite}
.cell .it.sticky{animation:nudge 5s ease-in-out 1s infinite}

@media(max-width:960px){
  .idtag{display:none}
  .vbadge{display:inline!important;background:none!important;padding:0!important;margin-right:6px!important;font:700 11px/1 var(--ui)!important;letter-spacing:.06em}
  .vbadge::before{display:none}
  .vbadge.r-owner{color:var(--r-owner)}.vbadge.r-mgr{color:var(--r-mgr)}.vbadge.r-emp{color:var(--r-emp)}
  .h1.big{font-size:clamp(44px,13vw,58px)}
  #calmOpen .side.r .ticks{display:none}
  #calmOpen .side.r .kicker{font-size:15px}
  #calmHouse .lede{display:none}
  .stage .lbl-before{left:12px;transform:rotate(-2deg)}
  .mini-form textarea{min-height:56px}
}
@media(min-width:961px) and (max-height:780px){.h1.big{font-size:clamp(44px,4.4vw,72px)}#calmHouse .house-note{display:none}.mini-form textarea{min-height:48px}}
@media (prefers-reduced-motion:reduce){.cell .it,.cell .it::before,.cell .it svg,.cell .it span,.idtag{animation:none!important}}

/* ===== v2h: dashboard opening, WhatsApp close, a phone that floats ===== */
/* the owner's dashboard */
.stage .v-dash{background:#fff;border:1px solid #E6E6EC;border-radius:4cqw;padding:4.4cqw 4.6cqw 3.6cqw}
.stage .v-dash .k{font-size:3.3cqw;color:#6B6B7B;font-weight:550}
.stage .v-dash .v{font:700 11cqw/1.05 var(--disp);letter-spacing:-.025em;margin-top:1cqw;font-variant-numeric:tabular-nums}
.stage .v-dash .dl{display:flex;flex-wrap:wrap;gap:1.6cqw 3cqw;margin-top:1.6cqw;font-size:3.3cqw;color:#6B6B7B}
.stage .v-dash .dl b{font-weight:700}
.stage .v-dash .dl .up b{color:#047857}.stage .v-dash .dl .down b{color:#6E46DC}
.stage .v-dash .bars{display:flex;align-items:flex-end;gap:1.6cqw;height:15cqw;margin-top:3.4cqw}
.stage .v-dash .bars i{flex:1;border-radius:1.2cqw 1.2cqw .4cqw .4cqw;background:#DAD6FE}
.stage .v-dash .bars i.now{background:#6E46DC}
.stage .v-row .up{color:#047857;background:#ECFDF5;font-size:3.5cqw;font-weight:650;border-radius:2cqw;padding:1.3cqw 2.6cqw}
.stage .v-row .down{color:#5B39B9;background:#EBEAFE;font-size:3.5cqw;font-weight:650;border-radius:2cqw;padding:1.3cqw 2.6cqw}
/* WhatsApp to the boss */
.stage .phone.on-wa .tabs{display:none}
.stage .phone.on-wa .views{bottom:0}
.stage .phone.on-wa .view{padding:0}
.wa{position:absolute;inset:0;display:flex;flex-direction:column;background:#ECE9E2}
.wa-bar{display:flex;align-items:center;gap:2.6cqw;padding:3cqw 4cqw;background:#047857;color:#FFFFFF}
.wa-av svg{width:9cqw;height:9cqw;border-radius:50%;display:block}
.wa-n{display:grid;font-size:3.2cqw;line-height:1.25}
.wa-n b{font-size:4.2cqw}
.wa-n span{opacity:.8}
.wa-chat{flex:1;display:flex;flex-direction:column;gap:2cqw;padding:4cqw;overflow:hidden;
  background-image:radial-gradient(rgba(20,18,31,.05) 1px,transparent 1.2px);background-size:5cqw 5cqw}
.wa-day{align-self:center;font-size:3cqw;color:#6B6B7B;background:#FFFFFF;border-radius:2cqw;padding:1cqw 3cqw;margin-bottom:1cqw}
.wa-b{align-self:flex-end;max-width:88%;background:#ECFDF5;color:#14121F;font-size:3.9cqw;line-height:1.42;padding:2.6cqw 3.4cqw;border-radius:3.4cqw 1cqw 3.4cqw 3.4cqw;box-shadow:0 1px 1px rgba(20,18,31,.1);
  animation:wa-in .45s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--k) * .35s + .2s)}
.wa-b b{font-weight:700}
.wa-b small{display:block;text-align:right;font-size:2.8cqw;color:#047857;margin-top:1cqw}
@keyframes wa-in{from{opacity:0;transform:translateY(3cqw) scale(.97)}}
/* battery: green when charged, red below 20% */
.stage.bat-full .bat{background:linear-gradient(90deg,#047857 100%,transparent 0) content-box}
@media (prefers-reduced-motion:reduce){.wa-b{animation:none}}
.wa-in{display:flex;align-items:center;gap:2.4cqw;padding:2.4cqw 3cqw 4cqw;background:#ECE9E2}
.wa-in span{flex:1;background:#FFFFFF;border-radius:99px;padding:2.6cqw 4cqw;font-size:3.6cqw;color:#858592}
.wa-in i{width:10cqw;height:10cqw;border-radius:50%;background:#047857;flex:none}
@media(max-width:960px){
  .stage.last[data-ch="house"] .phone{opacity:1;pointer-events:auto}
  .stage.last #calmHouse .side.r{display:none!important}
}
@media(max-width:960px){.stage.last #calmHouse{opacity:0;visibility:hidden}}
.mini-form .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
/* the lens: the logo's corner brackets snap shut around "Snap", like a camera framing a page */
.h1 .line1{display:block}
.qs-lens{position:relative;display:inline-block;padding:.02em .14em .08em;margin:0 .02em}
.qs-lens i{position:absolute;width:.3em;height:.3em;border:0 solid var(--txt);animation:snap .7s var(--ease) .35s both}
.qs-lens i:nth-child(1){top:0;left:0;border-width:.06em 0 0 .06em;border-top-left-radius:.09em;--dx:-.2em;--dy:-.14em}
.qs-lens i:nth-child(2){top:0;right:0;border-width:.06em .06em 0 0;border-top-right-radius:.09em;border-color:var(--accent);--dx:.2em;--dy:-.14em}
.qs-lens i:nth-child(3){bottom:0;right:0;border-width:0 .06em .06em 0;border-bottom-right-radius:.09em;--dx:.2em;--dy:.14em}
.qs-lens i:nth-child(4){bottom:0;left:0;border-width:0 0 .06em .06em;border-bottom-left-radius:.09em;--dx:-.2em;--dy:.14em}
@media (prefers-reduced-motion:reduce){.qs-lens i{animation:none}}
/* the app's logo in the phone header, a little bigger (JB) */
.stage .v-top b{font-size:4.9cqw;gap:2.2cqw}
.stage .v-top b svg{width:8.6cqw;height:8.6cqw}