/* Crime Victims United app prototype. Civic field-guide look: warm paper, CVU blue for
   structure, CVU red only for urgent help and "opposes". iOS-native patterns on purpose. */

:root{
  --paper:#FAF8F4;
  --paper-2:#F1EEE7;
  --card:#FFFFFF;
  --ink:#152238;
  --ink-2:#4B576B;
  --ink-3:#7C8697;
  --hair:rgba(21,34,56,.12);
  --hair-2:rgba(21,34,56,.07);
  --blue:#005699;
  --blue-deep:#063E70;
  --blue-wash:#E7EFF7;
  --red:#BF2C37;
  --red-deep:#9C1F29;
  --red-wash:#FAEBEC;
  --green:#2F6B3F;
  --serif:"Crimson Pro", Georgia, "Times New Roman", serif;
  --sans:"Public Sans", -apple-system, system-ui, sans-serif;
  --page-top-colour:var(--paper);
  --desk:#ECE8E0;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--sans);color:var(--ink);background:var(--desk);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;text-align:left}
input,select,textarea{font:inherit;color:inherit}
a{color:inherit}
h1,h2,h3,.bal{text-wrap:balance}
p,li,dd{text-wrap:pretty}
.ln{display:inline-block}

/* ---------- Desktop: tour panel + device ---------- */
.desk{min-height:100svh;display:grid;grid-template-columns:minmax(320px,440px) auto;justify-content:center;align-items:center;gap:56px;padding:32px 40px;position:relative;overflow:hidden}
.desk::before{content:"";position:absolute;left:-140px;bottom:-90px;width:620px;height:400px;background:url(assets/cvu-eagle.png) no-repeat left bottom/contain;opacity:.07;pointer-events:none}
.tour{position:relative;z-index:1;max-width:440px;align-self:center}
.tour .logo{width:176px;display:block;margin-bottom:18px}
.tour h1{font-family:var(--serif);font-weight:600;font-size:36px;line-height:1.05;letter-spacing:-.01em;color:var(--ink)}
.tour .lede{font-size:15.5px;line-height:1.45;color:var(--ink-2);margin:8px 0 16px}
.tour-groups{display:grid;gap:10px}
.tg h2{font-family:var(--serif);font-size:18px;font-weight:600;color:var(--blue-deep);margin-bottom:4px}
.tg ol{list-style:none;display:flex;flex-wrap:wrap;gap:4px 6px}
.tg button{font-size:13.5px;padding:4px 10px;border-radius:999px;border:1px solid var(--hair);background:rgba(255,255,255,.55);color:var(--ink);transition:background .15s,border-color .15s}
.tg button:hover{background:#fff;border-color:rgba(0,86,153,.35)}
.tg button.on{background:var(--blue);border-color:var(--blue);color:#fff}
.tg a.console-link{display:inline-block;font-size:14px;padding:5px 12px;border-radius:999px;background:var(--ink);color:#fff;text-decoration:none}
.note{margin-top:16px;padding:14px 18px;background:#fff;border-left:3px solid var(--blue);border-radius:2px;min-height:92px}
.note b{display:block;font-family:var(--serif);font-size:20px;font-weight:600;margin-bottom:4px;color:var(--ink)}
.note p{font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.fine{margin-top:12px;font-size:12.5px;line-height:1.5;color:var(--ink-3)}
.fine a{color:var(--ink-2)}

.device{position:relative;z-index:1;width:422px;height:876px;border-radius:64px;background:#10151d;padding:16px;box-shadow:0 0 0 2px #2a313c inset,0 30px 70px rgba(21,34,56,.28),0 6px 18px rgba(21,34,56,.18);transform-origin:center center}
.device::before{content:"";position:absolute;top:28px;left:50%;width:120px;height:34px;margin-left:-60px;background:#05070a;border-radius:20px;z-index:40}
.device-screen{position:relative;width:390px;height:844px;border-radius:48px;overflow:hidden;background:var(--paper)}

/* ---------- App shell ---------- */
.app{position:relative;width:100%;height:100%;display:flex;flex-direction:column;background:var(--paper);overflow:hidden}
.statusbar{flex:none;height:54px;display:flex;align-items:flex-end;justify-content:space-between;padding:0 34px 8px 44px;font-size:16px;font-weight:600;letter-spacing:-.01em;background:var(--sbcolor,var(--paper));transition:background .25s;position:relative;z-index:20}
.statusbar.dark{color:#fff}
.statusbar .sb-icons{display:flex;gap:6px;align-items:center}
.stage{position:relative;flex:1;overflow:hidden}
.screen{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;background:var(--paper);overscroll-behavior:contain}
.screen.push-in{animation:pushIn .32s cubic-bezier(.2,.8,.2,1)}
.screen.pop-in{animation:popIn .28s cubic-bezier(.2,.8,.2,1)}
.screen.fade-in{animation:fadeIn .2s ease-out}
@keyframes pushIn{from{transform:translateX(38%);opacity:.4}to{transform:none;opacity:1}}
@keyframes popIn{from{transform:translateX(-18%);opacity:.5}to{transform:none;opacity:1}}
@keyframes fadeIn{from{opacity:.3}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.screen.push-in,.screen.pop-in,.screen.fade-in{animation:none}}

/* nav bars */
.nav{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:46px;padding:4px 12px;background:rgba(250,248,244,.94);border-bottom:1px solid transparent}
.nav.scrolled{border-bottom-color:var(--hair)}
.back{display:flex;align-items:center;gap:2px;color:var(--blue);font-size:17px;min-height:44px;padding-right:8px}
.back svg{width:22px;height:22px}
.nav .title{font-weight:600;font-size:16px;position:absolute;left:50%;transform:translateX(-50%);max-width:56%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;transition:opacity .15s}
.nav.scrolled .title{opacity:1}
.exit{display:flex;align-items:center;gap:5px;font-size:13px;font-weight:600;color:var(--ink-2);border:1px solid var(--hair);border-radius:999px;padding:6px 11px;min-height:32px;background:#fff;margin-left:auto}
.exit svg{width:13px;height:13px}
.big{padding:4px 20px 6px}
.big h1{font-family:var(--serif);font-weight:600;font-size:36px;line-height:1.05;letter-spacing:-.01em}
.big .sub{font-size:15px;color:var(--ink-2);margin-top:6px;line-height:1.4}

/* content blocks */
.pad{padding:0 16px}
.sec{margin:22px 0 0}
.sec > h2,.sec-h{font-family:var(--serif);font-size:22px;font-weight:600;padding:0 20px;margin-bottom:8px;display:flex;justify-content:space-between;align-items:baseline}
.sec-h a,.sec-h button{font-family:var(--sans);font-size:14px;font-weight:500;color:var(--blue);text-decoration:none}
.group{margin:0 16px;background:var(--card);border-radius:14px;overflow:hidden;box-shadow:0 0 0 1px var(--hair-2)}
.row{display:flex;align-items:center;gap:12px;width:100%;padding:13px 16px;min-height:52px;position:relative;background:var(--card)}
.row + .row::before{content:"";position:absolute;top:0;left:16px;right:0;height:1px;background:var(--hair)}
.row.tap:active{background:#F4F2EE}
.row .ic{flex:none;width:32px;height:32px;border-radius:8px;display:grid;place-items:center;background:var(--blue-wash);color:var(--blue)}
.row .ic svg{width:18px;height:18px}
.row .ic.red{background:var(--red-wash);color:var(--red)}
.row .ic.green{background:#E6F0E8;color:var(--green)}
.row .tx{flex:1;min-width:0}
.chev{flex:none;width:9px;height:14px;color:#B8BEC8}
.row .t1,.row .t2{display:block}
.row .t1{font-size:16px;font-weight:500;line-height:1.3}
.row .t2{font-size:13.5px;color:var(--ink-2);line-height:1.35;margin-top:2px}
.row .val{font-size:15px;color:var(--ink-2)}
.foot{font-size:13px;color:var(--ink-3);padding:8px 32px 0;line-height:1.4}
.spacer{height:28px}

/* help-now button */
.helpnow{display:flex;align-items:center;gap:14px;margin:14px 16px 0;padding:16px 18px;border-radius:16px;background:var(--red);color:#fff;width:calc(100% - 32px);box-shadow:0 6px 16px rgba(191,44,55,.25)}
.helpnow svg{width:26px;height:26px;flex:none}
.helpnow b{display:block;font-size:18px;font-weight:700}
.helpnow span{font-size:13.5px;opacity:.92}

/* Today header band (eagle motif) */
.band{position:relative;background:var(--blue);color:#fff;padding:6px 20px 22px;overflow:hidden}
.band::after{content:"";position:absolute;right:-46px;top:-6px;width:230px;height:150px;background:url(assets/cvu-eagle-white.png) no-repeat right top/contain;opacity:.16;pointer-events:none}
.band .date{font-size:14px;opacity:.85}
.band h1{font-family:var(--serif);font-size:36px;font-weight:600;line-height:1.05;margin-top:2px}
.band p{font-size:15px;opacity:.92;margin-top:6px;max-width:290px;line-height:1.4}
.band .exit{position:absolute;right:14px;top:4px;background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.3);color:#fff;z-index:2}

/* campaign card */
.camp{margin:0 16px;border-radius:16px;overflow:hidden;background:var(--card);box-shadow:0 0 0 1px var(--hair-2);display:block;width:calc(100% - 32px)}
.camp img{display:block;width:100%;height:170px;object-fit:cover}
.camp .cb{padding:14px 16px 16px}
.camp .kick{font-size:13px;font-weight:600;color:var(--red)}
.camp h3{font-family:var(--serif);font-size:22px;font-weight:600;line-height:1.15;margin-top:3px}
.camp p{font-size:14.5px;color:var(--ink-2);line-height:1.45;margin-top:6px}
.camp .meter{display:flex;align-items:center;gap:10px;margin-top:12px;font-size:13.5px;color:var(--ink-2)}
.bar{flex:1;height:6px;border-radius:3px;background:var(--paper-2);overflow:hidden}
.bar i{display:block;height:100%;background:var(--blue);border-radius:3px}

/* bill rows */
.pos{font-size:13px;font-weight:600}
.pos.sup{color:var(--blue)}
.pos.opp{color:var(--red)}
.pos.watch{color:var(--ink-2)}
.billno{font-family:var(--sans);font-weight:700;font-size:15px;letter-spacing:.01em}
.status-line{font-size:13px;color:var(--ink-2);margin-top:3px}
.status-line .dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:5px;vertical-align:1px;background:var(--ink-3)}
.status-line .dot.law{background:var(--green)}
.status-line .dot.dead{background:var(--red)}
.status-line .dot.live{background:var(--blue)}

/* segmented control */
.seg{display:flex;margin:10px 16px 0;padding:2px;border-radius:9px;background:#E8E4DC}
.seg button{flex:1;text-align:center;font-size:13.5px;font-weight:500;padding:7px 4px;border-radius:7px;color:var(--ink-2)}
.seg button.on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.12)}

/* stage timeline */
.tl{margin:0 16px;background:var(--card);border-radius:14px;box-shadow:0 0 0 1px var(--hair-2);padding:6px 0}
.tl button{display:flex;gap:14px;width:100%;padding:11px 16px;align-items:flex-start;position:relative}
.tl .node{flex:none;width:28px;display:flex;flex-direction:column;align-items:center;align-self:stretch}
.tl .node i{width:14px;height:14px;border-radius:50%;border:2px solid var(--blue);background:#fff;margin-top:3px;flex:none}
.tl .node::after{content:"";flex:1;width:2px;background:var(--blue-wash);margin-top:2px}
.tl button:last-child .node::after{display:none}
.tl .t1{font-size:16px;font-weight:600}
.tl .t2{font-size:13.5px;color:var(--ink-2);line-height:1.35;margin-top:1px}
.tl .chev{margin-left:auto;align-self:center}
.tl button > span:nth-child(2){flex:1;min-width:0}

/* rights accordion */
.right{border-top:1px solid var(--hair)}
.right:first-child{border-top:0}
.right > button{display:flex;gap:12px;width:100%;padding:14px 16px;align-items:flex-start}
.right .num{flex:none;font-family:var(--serif);font-size:20px;font-weight:600;color:var(--blue);width:24px;line-height:1.1}
.right .rt{flex:1;font-size:15.5px;font-weight:500;line-height:1.35}
.right .pm{flex:none;width:18px;height:18px;color:var(--ink-3);transition:transform .2s;margin-top:2px}
.right.open .pm{transform:rotate(45deg)}
.right .rb{display:none;padding:0 16px 16px 52px;font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.right.open .rb{display:block}
.right .rb q{display:block;font-family:var(--serif);font-size:15.5px;color:var(--ink);font-style:italic;quotes:none;border-left:2px solid var(--blue-wash);padding-left:10px;margin-top:8px}
.right .rb .src{display:block;font-size:12px;color:var(--ink-3);margin-top:6px}

/* steps / checklists */
.steps{margin:0 16px;counter-reset:s}
.steps li{list-style:none;display:flex;gap:12px;padding:12px 0;border-top:1px solid var(--hair);font-size:15px;line-height:1.45}
.steps li:first-child{border-top:0}
.steps li::before{counter-increment:s;content:counter(s);flex:none;width:26px;height:26px;border-radius:50%;background:var(--blue-wash);color:var(--blue);font-weight:700;font-size:14px;display:grid;place-items:center}
.steps li b{font-weight:600}

.check{display:flex;gap:12px;align-items:center;width:100%;padding:14px 16px;position:relative}
.check + .check::before{content:"";position:absolute;top:0;left:56px;right:0;height:1px;background:var(--hair)}
.check .box{flex:none;width:26px;height:26px;border-radius:50%;border:2px solid #C5CBD4;display:grid;place-items:center;transition:all .2s}
.check .box svg{width:14px;height:14px;color:#fff;opacity:0}
.check.done .box{background:var(--green);border-color:var(--green)}
.check.done .box svg{opacity:1}
.check .t1{font-size:15.5px;font-weight:500}
.check .t2{font-size:13px;color:var(--ink-2);margin-top:1px}

/* buttons */
.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:calc(100% - 32px);margin:0 16px;min-height:50px;border-radius:13px;font-size:16.5px;font-weight:600;background:var(--blue);color:#fff;text-decoration:none}
.btn.red{background:var(--red)}
.btn.ghost{background:transparent;color:var(--blue);box-shadow:inset 0 0 0 1.5px rgba(0,86,153,.35)}
.btn.light{background:var(--card);color:var(--blue);box-shadow:0 0 0 1px var(--hair-2)}
.btn svg{width:19px;height:19px}
.btn + .btn{margin-top:10px}
.btnrow{display:flex;gap:10px;margin:0 16px}
.btnrow .btn{margin:0;width:auto;flex:1;font-size:15px;min-height:46px}
.btnrow .btn + .btn{margin-top:0}

/* text blocks */
.prose{padding:0 20px;font-size:16px;line-height:1.55;color:var(--ink)}
.prose p + p{margin-top:10px}
.prose .muted{color:var(--ink-2)}
.callout{margin:0 16px;padding:14px 16px;border-radius:12px;background:var(--blue-wash);font-size:14.5px;line-height:1.45;color:var(--blue-deep)}
.callout.red{background:var(--red-wash);color:var(--red-deep)}
.callout b{font-weight:600}

/* bill detail */
.bill-hero{padding:4px 20px 0}
.bill-hero .billno{font-size:14px;color:var(--ink-2)}
.bill-hero h1{font-family:var(--serif);font-size:30px;font-weight:600;line-height:1.1;margin-top:4px}
.posbox{display:flex;align-items:center;gap:10px;margin:14px 16px 0;padding:12px 14px;border-radius:12px;font-size:15px;line-height:1.35}
.posbox.sup{background:var(--blue-wash);color:var(--blue-deep)}
.posbox.opp{background:var(--red-wash);color:var(--red-deep)}
.posbox.watch{background:var(--paper-2);color:var(--ink)}
.posbox img{width:34px;height:auto;flex:none}
.posbox b{font-weight:700}
.prog{margin:0 16px;background:var(--card);border-radius:14px;box-shadow:0 0 0 1px var(--hair-2);padding:6px 16px}
.prog li{list-style:none;display:flex;gap:12px;padding:9px 0;font-size:14.5px;position:relative}
.prog li .pn{flex:none;width:14px;height:14px;border-radius:50%;margin-top:3px;border:2px solid #C5CBD4;background:#fff;position:relative;z-index:1}
.prog li.done .pn{background:var(--blue);border-color:var(--blue)}
.prog li.final .pn{background:var(--green);border-color:var(--green)}
.prog li.final.neg .pn{background:var(--red);border-color:var(--red)}
.prog li:not(:last-child)::after{content:"";position:absolute;left:6px;top:20px;bottom:-6px;width:2px;background:#E2E5EA}
.prog li.done:not(:last-child)::after{background:var(--blue)}
.prog .pd{margin-left:auto;color:var(--ink-3);font-size:13px;white-space:nowrap}

/* reps */
.rep{display:flex;gap:14px;align-items:center;padding:14px 16px}
.rep + .rep{border-top:1px solid var(--hair)}
.av{flex:none;width:52px;height:52px;border-radius:50%;background:var(--blue-wash);color:var(--blue);font-family:var(--serif);font-size:22px;font-weight:600;display:grid;place-items:center}
.rep .t1{font-size:16.5px;font-weight:600}
.rep .t2{font-size:13.5px;color:var(--ink-2);margin-top:1px}
.rep .acts{display:flex;gap:8px;margin-top:8px}
.pill{display:inline-flex;align-items:center;gap:5px;font-size:13.5px;font-weight:600;color:var(--blue);background:var(--blue-wash);border-radius:999px;padding:6px 12px}
.pill svg{width:14px;height:14px}

/* script */
.script{margin:0 16px;background:var(--card);border-radius:14px;box-shadow:0 0 0 1px var(--hair-2);padding:18px;font-family:var(--serif);font-size:19px;line-height:1.45}
.script mark{background:var(--blue-wash);color:var(--blue-deep);padding:0 3px;border-radius:3px}
.script .stage-dir{display:block;font-family:var(--sans);font-size:13px;color:var(--ink-3);margin:12px 0 4px}
.script .stage-dir:first-child{margin-top:0}

/* forms */
.field{display:block;padding:10px 16px}
.field + .field{border-top:1px solid var(--hair)}
.field span{display:block;font-size:12.5px;color:var(--ink-2);margin-bottom:3px}
.field input,.field select{width:100%;border:0;outline:0;background:transparent;font-size:16.5px;padding:2px 0}
.field input::placeholder{color:#AAB1BC}
.district{display:flex;gap:10px;align-items:center;margin:10px 16px 0;padding:12px 14px;border-radius:12px;background:#E6F0E8;color:#24502F;font-size:14.5px;line-height:1.35}
.district svg{width:20px;height:20px;flex:none}
.toggle{flex:none;width:51px;height:31px;border-radius:16px;background:#D9DDE3;position:relative;transition:background .2s}
.toggle::after{content:"";position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.2);transition:transform .2s}
.toggle.on{background:#34A853}
.toggle.on::after{transform:translateX(20px)}

/* welcome */
.welcome{display:flex;flex-direction:column;min-height:100%;background:var(--paper)}
.welcome .photo{height:330px;background:#ccc center/cover no-repeat;flex:none}
.welcome .wbody{flex:1;display:flex;flex-direction:column;padding:22px 24px 26px}
.welcome .wlogo{width:200px;display:block}
.welcome h1{font-family:var(--serif);font-size:33px;font-weight:600;line-height:1.08;margin-top:16px}
.welcome p{font-size:16px;line-height:1.5;color:var(--ink-2);margin-top:8px}
.welcome .wbtns{margin-top:auto;padding-top:20px}
.welcome .wbtns .btn{width:100%;margin:0}
.welcome .wbtns .btn + .btn{margin-top:10px}
.lang{display:flex;gap:6px;margin-top:14px}
.lang button{font-size:14px;padding:6px 12px;border-radius:999px;border:1px solid var(--hair);color:var(--ink-2)}
.lang button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.urgent-link{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:14px;font-size:15px;font-weight:600;color:var(--red);min-height:44px}
.urgent-link svg{width:18px;height:18px}

/* tab bar */
.tabbar{flex:none;display:flex;justify-content:space-around;background:rgba(250,248,244,.97);border-top:1px solid var(--hair);padding:6px 4px calc(env(safe-area-inset-bottom,0px) + 8px);position:relative;z-index:10}
.tabbar.hide{display:none}
.tabbar button{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10.5px;font-weight:500;color:#8A93A1;padding:4px 0;min-height:44px}
.tabbar button svg{width:25px;height:25px}
.tabbar button.on{color:var(--blue)}
.device .tabbar{padding-bottom:26px}

/* sheet */
.sheet-bg{position:absolute;inset:0;background:rgba(10,18,30,.42);z-index:30;opacity:0;pointer-events:none;transition:opacity .25s}
.sheet-bg.open{opacity:1;pointer-events:auto}
.sheet{position:absolute;left:0;right:0;bottom:0;max-height:88%;overflow-y:auto;background:var(--paper);border-radius:18px 18px 0 0;transform:translateY(102%);transition:transform .32s cubic-bezier(.2,.8,.2,1);padding-bottom:calc(env(safe-area-inset-bottom,0px) + 18px)}
.sheet-bg.open .sheet{transform:none}
.grab{width:38px;height:5px;border-radius:3px;background:#CDD2D9;margin:8px auto 4px}
.sheet h2{font-family:var(--serif);font-size:27px;font-weight:600;padding:6px 20px 2px}
.sheet .sub{font-size:14px;color:var(--ink-2);padding:0 20px 12px;line-height:1.4}
.sheet-close{position:absolute;right:12px;top:10px;width:44px;height:44px;display:grid;place-items:center;color:var(--ink-2)}
.sheet-close svg{width:22px;height:22px}
.call{display:flex;align-items:center;gap:12px;width:100%;padding:13px 16px;position:relative}
.call + .call::before{content:"";position:absolute;top:0;left:16px;right:0;height:1px;background:var(--hair)}
.call .t1{font-size:16px;font-weight:600}
.call .t2{font-size:13px;color:var(--ink-2);margin-top:1px}
.call .num{margin-left:auto;font-size:15px;font-weight:600;color:var(--blue);white-space:nowrap}
.call.e911 .num{color:var(--red)}
.offline{display:flex;gap:8px;align-items:center;justify-content:center;font-size:13px;color:var(--ink-3);margin-top:12px}
.offline svg{width:15px;height:15px}

/* toast */
.toast{position:absolute;left:16px;right:16px;bottom:96px;z-index:35;background:var(--ink);color:#fff;border-radius:14px;padding:13px 16px;font-size:14.5px;line-height:1.4;transform:translateY(20px);opacity:0;pointer-events:none;transition:all .25s}
.toast.show{transform:none;opacity:1}

/* quick exit screen */
.exitscreen{position:absolute;inset:0;z-index:50;background:linear-gradient(#5B9BD5,#A9CDEB);color:#fff;display:none;flex-direction:column;align-items:center;padding-top:96px;font-family:-apple-system,system-ui,sans-serif}
.exitscreen.show{display:flex}
.exitscreen .city{font-size:30px}
.exitscreen .temp{font-size:96px;font-weight:200;line-height:1}
.exitscreen .cond{font-size:19px;opacity:.9}
.exitscreen .hl{font-size:17px;margin-top:4px}
.exitscreen .hours{display:flex;gap:18px;margin-top:40px;background:rgba(255,255,255,.18);padding:14px 18px;border-radius:16px;font-size:14px;text-align:center}
.exitscreen .back-proto{margin-top:auto;margin-bottom:40px;font-size:12px;opacity:.75;padding:12px}

/* joined */
.joined{padding:40px 24px 0;text-align:center}
.joined img{width:120px}
.joined h1{font-family:var(--serif);font-size:32px;font-weight:600;margin-top:18px;line-height:1.1}
.joined p{font-size:16px;color:var(--ink-2);line-height:1.5;margin-top:10px}

.sample{font-size:11.5px;color:var(--ink-3);text-align:center;padding:14px 24px 0}

/* ---------- Phone width: the app IS the page ---------- */
@media (max-width:820px){
  body{background:var(--paper);overflow:hidden}
  .desk{display:block;padding:0;min-height:0;height:100svh}
  .desk::before,.tour{display:none}
  .device{width:100%;height:100svh;border-radius:0;padding:0;background:var(--paper);box-shadow:none;transform:none!important}
  .device::before{display:none}
  .device-screen{width:100%;height:100%;border-radius:0}
  .statusbar{display:none}
  .app{padding-top:env(safe-area-inset-top,0px)}
  .device .tabbar{padding-bottom:calc(env(safe-area-inset-bottom,0px) + 8px)}
}

/* iOS 26 home-screen chrome (from frontend-design/ios-chrome/chrome.css) */
#sbb{position:fixed;top:0;left:0;right:0;height:env(safe-area-inset-top,0px);background:var(--page-top-colour);z-index:60}
html.vv-shifted #sbb,
html.vv-shifted .device{translate:0 var(--vv-shift)}