/* EntryPing UI. The same visual language and motion as the landing page (index.html):
   sticky sidebar shell, 500-weight headlines with a grey second line, flat grey stages,
   the e-ink plate that writes its message in, reveal-on-scroll and word-rise headings.
   Shared by /signs, /live (the profile), the door page (/s/<code>) and /ui (the gallery).
   Rule: new screens use these classes; add new pieces here and to /ui/index.html.
   Load after /assets/base.css (fonts, tokens, base, shell, reveal motion). */

a{color:inherit}
.break{word-break:break-all}

/* ---------- shell: sticky sidebar + main column (index.html) ---------- */

.side{position:sticky; top:0; height:100vh; width:224px; flex:none; display:flex; flex-direction:column; justify-content:space-between; align-items:flex-start; padding:28px 24px 28px 32px; z-index:10}
.brand{display:flex; align-items:center; gap:10px; font-size:15px; font-weight:500; text-decoration:none}
.mark{width:24px; height:24px; display:block}
.mark svg{width:100%; height:100%; display:block}
.nav{position:relative; display:flex; flex-direction:column; gap:16px; margin-top:40px; padding-left:14px}
.nav::before{content:""; position:absolute; left:0; top:var(--ind-y,0); width:2px; height:21px; border-radius:2px; background:var(--ink); transition:top .7s var(--expo); opacity:var(--ind-o,0)}
.nav a{font-size:14px; color:var(--gray); text-decoration:none; transition:color .2s}
.nav a:hover,.nav a[aria-current]{color:var(--ink)}
.nav a[aria-current]{font-weight:500}
.side-foot{display:flex; flex-direction:column; gap:10px; align-items:flex-start}

.wrap{max-width:1100px; margin-inline:auto}

/* ---------- headings and sections ---------- */
.intro{padding:72px 0 48px; max-width:760px}
.intro h1{font-size:40px; font-weight:500; letter-spacing:-.025em; line-height:1.15; text-wrap:balance}
.intro p{margin-top:16px; color:var(--gray); font-size:16px; max-width:560px; text-wrap:balance}
.crumbs{font-size:13px; color:var(--gray); padding-top:40px}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--ink)}
.crumbs + .intro{padding-top:16px}
.sec{position:relative; border-top:1px solid var(--line); padding:48px 0 72px; scroll-margin-top:24px}
.sec.first{border-top:0; padding-top:0}
html.js .sec:not(.first){border-top-color:transparent}
html.js .sec:not(.first)::before{content:""; position:absolute; top:-1px; left:0; right:0; height:1px; background:var(--line); transform:scaleX(0); transform-origin:left; transition:transform 1.6s var(--expo)}
html.js .sec.lined::before{transform:none}
.sec h2{font-size:32px; font-weight:500; letter-spacing:-.025em; line-height:1.15; text-wrap:balance; margin-bottom:32px}
.sec h2 .sub,.intro h1 .sub{display:block; color:var(--gray)}
.narrow{max-width:420px}
.sec h3{font-size:22px; font-weight:500; letter-spacing:-.02em; line-height:1.25}
.lead{color:var(--gray); font-size:15px; max-width:var(--measure)}
.hint{font-size:13px; color:var(--gray)}
.ok{color:var(--ok); font-size:13px}
.err{color:var(--bad); font-size:13px}
.saved{font-size:13px; color:var(--ok); min-height:1.3em}
.saved.err{color:var(--bad)}
.foot{border-top:1px solid var(--line); padding:32px 0 48px; font-size:13px; color:var(--gray)}
.foot .wrap,.foot{display:flex; gap:20px; flex-wrap:wrap}
.foot a{text-decoration:none}
.foot a:hover{color:var(--ink)}

/* ---------- layout helpers ---------- */
.stack{display:flex; flex-direction:column; gap:var(--s-3)}
.stack.lg{gap:var(--s-5)}
.cluster{display:flex; flex-wrap:wrap; gap:var(--s-2); align-items:center}
.grow{flex:1}
.measure{max-width:var(--measure)}
.mt-2{margin-top:var(--s-2)} .mt-3{margin-top:var(--s-3)} .mt-4{margin-top:var(--s-4)} .mt-5{margin-top:var(--s-5)} .mt-6{margin-top:var(--s-6)}
.split{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px}

/* ---------- motion (assets/motion.js adds .in / .lined / .on) ---------- */

@keyframes press{50%{transform:scale(.94)}}
.pressed{animation:press .3s}

/* ---------- buttons (index.html) ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; border:0; border-radius:999px; background:var(--ink); color:#fff; text-decoration:none;
  font:500 14px/1 var(--sans); padding:10px 16px; cursor:pointer; transition:background .2s,transform .2s var(--ease)}
.btn:hover{background:#2a2a2d}
.btn:active{transform:scale(.97)}
.btn[disabled]{opacity:.5; cursor:default; transform:none}
.btn.alt{background:#ededed; color:var(--ink)}
.btn.alt:hover{background:#e2e2e2}
.btn.sm{font-size:13px; padding:8px 14px}
.btn.lg{font-size:15px; padding:14px 20px}
.btn.block{display:flex; width:100%}
.btn.accent{background:var(--accent); color:var(--on-accent)}
.btn.accent:hover{filter:brightness(1.12)}
.btn.outline{background:#fff; color:var(--ink); box-shadow:inset 0 0 0 1px var(--field)}
.btn .i{width:16px; height:16px}
.actions{display:flex; flex-wrap:wrap; gap:8px}

/* ---------- form ---------- */
.controls{display:flex; flex-direction:column; gap:16px}
.controls fieldset{border:0; padding:0; margin:0; display:flex; flex-direction:column; gap:14px}
.controls legend{font-size:13px; color:var(--gray); margin-bottom:6px}
.f{display:flex; flex-direction:column; gap:6px; font-size:13px; font-weight:500}
.f input,.f textarea,.f select{font:15px/1.4 var(--sans); color:var(--ink); background:#fff; border:1px solid var(--field); border-radius:12px; padding:10px 14px; width:100%; transition:border-color .2s}
.f input:focus,.f textarea:focus,.f select:focus{outline:none; border-color:var(--ink)}
.f textarea{resize:vertical; min-height:64px}
.f small{font-weight:400; color:var(--gray); font-size:12px}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.chk{display:flex; gap:8px; align-items:center; font-size:14px}
.inline-input{font:13px var(--sans); padding:6px 10px; border:1px solid var(--field); border-radius:999px; background:#fff}
.seg,.styles{display:flex; flex-wrap:wrap; gap:6px}
.seg label,.styles label{position:relative}
.seg input,.styles input{position:absolute; opacity:0}
.seg span,.styles span{display:block; padding:8px 14px; border-radius:999px; background:#ededed; font-size:13px; cursor:pointer; transition:background .2s,color .2s}
.seg input:checked+span,.styles input:checked+span{background:var(--ink); color:#fff}
.seg input:focus-visible+span,.styles input:focus-visible+span{outline:2px solid var(--ink); outline-offset:2px}
.pillset{display:flex; gap:6px; flex-wrap:wrap}
.pillset label{position:relative}
.pillset input{position:absolute; opacity:0}
.pillset span{display:block; padding:7px 12px; border-radius:999px; background:#ededed; font-size:13px; cursor:pointer}
.pillset input:checked+span{background:var(--ink); color:#fff}
.swatches{display:flex; gap:10px; align-items:flex-end}
.swatches input[type=color]{width:44px; height:38px; padding:3px; border:1px solid var(--field); border-radius:12px; background:#fff}
.logo-row{display:flex; gap:10px; align-items:center}
.logo-row img{max-height:36px; max-width:120px; border-radius:6px; background:#fff; padding:3px; box-shadow:inset 0 0 0 1px var(--line)}

/* ---------- surfaces ---------- */
/* .stage: the flat grey panel the landing page uses for every demo (no radius) */
.stage{background:var(--panel); padding:32px; display:flex; flex-direction:column; gap:20px}
.stage.center{align-items:center; justify-content:center}
.card{display:flex; flex-direction:column; gap:16px; background:var(--panel); padding:28px}
.card h3{font-size:17px; font-weight:500}
.panel{background:var(--panel); padding:20px; display:flex; flex-direction:column; gap:14px}
.panel h3{font-size:15px; font-weight:500}
.panel p{font-size:14px; color:var(--gray)}
.panel summary{cursor:pointer; list-style:none; font-size:14px; font-weight:500}
.panel summary::-webkit-details-marker{display:none}
.banner{background:var(--accent); color:var(--on-accent); padding:12px 16px; font-size:15px; border-radius:14px}
.keybox{font:12px var(--mono); background:#fff; padding:10px 12px; word-break:break-all; box-shadow:inset 0 0 0 1px var(--line)}
.qrbox{width:140px; background:#fff; padding:8px}
.meta{font-size:13px; color:var(--gray); display:flex; gap:14px; flex-wrap:wrap}
.tag{display:inline-block; font-size:12px; padding:3px 9px; border-radius:999px; background:#ededed; color:#3f3f46}
.tag.pro{background:var(--ink); color:#fff}
.chips{display:flex; flex-wrap:wrap; gap:6px}
.chip{border:0; background:#ededed; border-radius:999px; padding:8px 14px; font:13px var(--sans); color:var(--ink); cursor:pointer; transition:background .2s,transform .2s var(--ease)}
.chip:hover{background:#e2e2e2}
.stage .chip,.panel .chip{background:#fff}
.stage .chip:hover,.panel .chip:hover{background:#f6f6f6}
.chip:active{transform:scale(.96)}
.facts{list-style:none; margin:0; padding:0}
.facts li{display:flex; align-items:center; gap:14px; padding:18px 0; font-size:14px}
.facts li+li{border-top:1px solid var(--line)}

/* ---------- table ---------- */
.table{width:100%; border-collapse:collapse; font-size:14px}
.table th,.table td{padding:14px 8px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top}
.table th{font-size:13px; color:var(--gray); font-weight:400}
.table td.t{white-space:nowrap}
.table.compact td{padding:10px 6px; vertical-align:middle}
.table td.muted{color:var(--gray); font-size:13px}

/* ---------- FAQ (index.html) ---------- */
.faq details{border-bottom:1px solid var(--line); padding:0 4px; max-width:var(--measure)}
.faq summary{list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:18px 0; font-size:15px; cursor:pointer}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; color:var(--gray); font-size:18px; transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{padding-bottom:18px; color:var(--gray); font-size:14px}

/* ---------- the plate and its e-ink screen (same markup as index.html #plate) ---------- */
.plate{position:relative; width:var(--pw,300px); aspect-ratio:200/322; background:linear-gradient(165deg,#474e57,#30353b 60%); border-radius:14px; padding:6%;
  box-shadow:0 24px 50px -20px rgba(0,0,0,.45); display:grid; grid-template-rows:36fr 39fr 25fr; gap:5%; container-type:inline-size; flex:none}
.solar{border-radius:4px; background:#18233a; background-image:linear-gradient(90deg,rgba(190,205,230,.35) 1px,transparent 1px),linear-gradient(0deg,rgba(190,205,230,.35) 1px,transparent 1px);
  background-size:16.66% 33.33%; box-shadow:0 0 0 3px #22272d}
.address{display:flex; flex-direction:column; align-items:center; justify-content:center; color:#d9d3c8; text-align:center; overflow:hidden}
.address .num{font-size:22cqi; font-weight:800; letter-spacing:-.02em; line-height:.95; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.address .num.long{font-size:12cqi; white-space:normal; line-height:1.05}
.address .street{font-size:6.2cqi; letter-spacing:.28em; text-transform:uppercase; margin-top:3cqi; font-weight:600}
.address img{max-width:80%; max-height:70%; object-fit:contain; filter:grayscale(1) brightness(1.6)}
.eink{background:var(--paper); color:#15181c; border-radius:3px; box-shadow:0 0 0 3px #22272d; display:grid; grid-template-columns:38% 1fr; gap:6%; align-items:center; padding:6%; min-height:0; overflow:hidden}
.eink .qr{width:100%; aspect-ratio:1; display:block}
.eink .qr svg{width:100%; height:100%; display:block}
.msg{display:flex; flex-direction:column; gap:2.4cqi; min-width:0}
.msg .when{font-family:var(--mono); font-size:3.6cqi; text-transform:uppercase; opacity:.65}
.msg .head{font-size:6cqi; font-weight:700; line-height:1.15; overflow-wrap:anywhere}
.msg .body{font-size:4cqi; line-height:1.3; overflow-wrap:anywhere}
.msg .cta{font-size:3.6cqi; font-weight:600; border-top:1px solid rgba(0,0,0,.35); padding-top:1.6cqi}
/* e-ink changes are written in (wipe, then letter by letter), never flashed */
html.js .msg .ch{opacity:0}
.eink.on .msg .ch,.writes.on .msg .ch{opacity:1; transition:opacity .01s linear calc(var(--c) * var(--per,18ms))}

/* ---------- what owners get today: the paper sign on the door + the page a scan opens ----------
   (The e-ink plate above is the planned hardware; product screens use .duo, never the plate.) */
.duo{display:flex; gap:24px; align-items:flex-end; justify-content:center; flex-wrap:wrap; width:100%}
.duo figure{margin:0; display:flex; flex-direction:column; gap:10px; align-items:center}
.duo figcaption{font-size:13px; color:var(--gray)}
.duo-paper .sheet{width:150px; box-shadow:0 1px 2px rgba(0,0,0,.08),0 16px 32px -14px rgba(0,0,0,.3); rotate:-2deg}
.vphone{width:224px; background:#1a1a1a; border-radius:34px; padding:8px; box-shadow:0 30px 60px -30px rgba(0,0,0,.45)}
.scr.mini{min-height:380px; border-radius:27px; padding:22px 14px 16px; display:flex; flex-direction:column; gap:12px; font-size:13px}
.scr.mini .sp-biz{font-size:18px}
.scr.mini .sp-biz img{max-height:30px}
.scr.mini .sp-label{font-size:11px; margin-bottom:6px}
.scr.mini .sp-msg{padding:14px}
.scr.mini .sp-msg .msg .head{font-size:18px}
.scr.mini .sp-opt{padding:10px 12px; font-size:13px}
.sp-msg .msg{gap:0}
.sp-msg .msg .when{font-family:var(--mono); font-size:11px; text-transform:uppercase; opacity:.6}
.sp-msg .msg .head{font-size:30px; font-weight:600; letter-spacing:-.03em; line-height:1.12; margin-top:6px}
.sp-msg .msg .body{font-size:15px; margin-top:10px; white-space:pre-line}
.sp-msg .msg .cta{display:none}
/* planned hardware only */
.door-screen{container-type:inline-size; padding:6px; border-radius:8px; background:#30353b}
.door-screen .eink{box-shadow:none}

/* ---------- Front door app (the owner's phone, index.html .screen) ---------- */
.app{background:#fff; padding:24px; display:flex; flex-direction:column; gap:24px}
.app-bar{display:flex; justify-content:space-between; align-items:center; font-size:17px; font-weight:500}
.app-state small{display:block; font-size:14px; color:var(--gray)}
.app-state strong{display:block; margin-top:6px; font-size:40px; font-weight:500; letter-spacing:-.035em; line-height:1.15; overflow-wrap:anywhere}
.app-state .note{margin-top:8px; color:var(--gray); white-space:pre-line}
.app-acts{display:flex; gap:10px}
.app-acts .btn{flex:1; padding:13px 0; font-size:15px}
.rows{display:flex; flex-direction:column; gap:18px}
.rows header{display:flex; justify-content:space-between; align-items:center; font-size:17px; font-weight:500}
.row{display:flex; align-items:center; gap:12px}
.av{width:40px; height:40px; border-radius:50%; background:var(--panel); display:grid; place-items:center; flex:none}
.who{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px}
.who b{font-size:15px; font-weight:500}
.who span{font-size:13px; color:var(--gray)}
.row .end{display:flex; flex-direction:column; align-items:flex-end; gap:2px; font-size:13px; color:var(--gray)}
html.js .rows .row{opacity:0; transform:translateY(10px); transition:opacity .6s var(--ease),transform .6s var(--ease); transition-delay:calc(var(--i,0) * 90ms + 200ms)}
.rows.in .row{opacity:1; transform:none}
/* sheet for typing a new door message (index.html .sheet) */
.compose{background:#f2f2f4; padding:16px; display:flex; flex-direction:column; gap:12px}
.compose .field{min-height:96px; padding:14px 16px; background:#fff; border:0; border-radius:14px; font:500 22px/1.25 var(--sans); letter-spacing:-.02em; resize:none; width:100%}
.compose .field:focus{outline:2px solid var(--ink)}

/* ---------- home: centered and quiet, like the original landing ---------- */
.home-hero{display:flex; flex-direction:column; align-items:center; gap:48px; padding:72px 0 96px; text-align:center}
.home-hero h1{font-size:44px; font-weight:500; letter-spacing:-.03em; line-height:1.1; text-wrap:balance; max-width:760px; margin-inline:auto}
.home-hero .lede{margin:16px auto 0; max-width:540px; color:var(--gray); font-size:16px; text-wrap:balance}
.home-hero .actions{justify-content:center; margin-top:28px}
.more{display:inline-block; margin-top:24px; font-size:14px; color:var(--ink)}
a.card{text-decoration:none; transition:background .3s var(--ease)}
a.card:hover{background:#e8e8e8}
.card h3{font-size:22px; font-weight:500; letter-spacing:-.02em}

.vphone{position:relative}
.chip.on{background:var(--ink); color:#fff}

/* profile: settings as folded rows under the daily controls */
.folds{display:flex; flex-direction:column; gap:0; padding-top:24px}
details.fold{border-bottom:1px solid var(--line)}
details.fold > summary{list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:22px 4px; cursor:pointer}
details.fold > summary::-webkit-details-marker{display:none}
details.fold > summary b{font-size:22px; font-weight:500; letter-spacing:-.02em}
details.fold > summary::after{content:"+"; font-size:22px; color:var(--gray); transition:transform .3s var(--ease)}
details.fold[open] > summary::after{transform:rotate(45deg)}
details.fold > summary .hint{margin-left:auto}
.fold-body{padding:4px 0 32px}
#door .split > .app{order:-1}
@media (min-width:901px){ #door .split > .app{order:0} }

/* sign hub: category chips that stick, two columns on phones */
.cat-chips{position:sticky; top:0; z-index:4; display:flex; gap:6px; overflow-x:auto; padding:12px 0; background:var(--bg); scrollbar-width:none}
.cat-chips::-webkit-scrollbar{display:none}
.cat-chips a{flex:none; text-decoration:none; padding:8px 14px; border-radius:999px; background:#ededed; font-size:13px}
.cat-chips a:hover{background:var(--ink); color:#fff}

/* sticky bottom actions on sign pages (phones) */
.actionbar{position:fixed; left:0; right:0; bottom:0; z-index:20; display:none; gap:8px; padding:10px max(16px,env(safe-area-inset-left,0px)) calc(10px + env(safe-area-inset-bottom,0px)); background:rgba(255,255,255,.92); backdrop-filter:blur(10px); border-top:1px solid var(--line); transform:translateY(110%); transition:transform .4s var(--expo)}
.actionbar .btn{flex:1}
.actionbar.on{transform:none}
@media (max-width:900px){ .actionbar{display:flex} }

/* ---------- plans and paywall ---------- */
.plans{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px}
.plan{background:var(--panel); padding:28px; display:flex; flex-direction:column; gap:18px}
.plan.pro{background:var(--ink); color:#fff}
.plan .price{font-size:40px; font-weight:500; letter-spacing:-.035em; line-height:1}
.plan .price small{font-size:15px; font-weight:400; letter-spacing:0; color:var(--gray)}
.plan.pro .price small,.plan.pro .hint{color:#a1a1aa}
.plan ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; font-size:14px}
.plan li{display:flex; gap:10px}
.plan li::before{content:""; width:6px; height:6px; margin-top:7px; border-radius:50%; background:currentColor; flex:none; opacity:.7}
.plan.pro .btn{background:#fff; color:var(--ink)}
.plan.pro .btn.alt{background:#2a2a2d; color:#fff}
.locked{position:relative}
.locked > .lockbar{display:flex; align-items:center; justify-content:space-between; gap:12px; background:var(--ink); color:#fff; padding:12px 16px; font-size:14px}
.locked > .lockbar .btn{background:#fff; color:var(--ink)}
.locked.is-locked > :not(.lockbar){opacity:.45; pointer-events:none; filter:saturate(.4)}

/* paywall sheet (a native <dialog>) and toast */
.paywall{border:0; padding:0; max-width:520px; width:calc(100% - 32px); background:#fff; color:var(--ink); box-shadow:0 40px 80px -30px rgba(0,0,0,.45)}
.paywall::backdrop{background:rgba(15,15,16,.45); backdrop-filter:blur(2px)}
.paywall[open]{animation:sheet-in .5s var(--expo)}
@keyframes sheet-in{from{opacity:0; transform:translateY(24px)}}
.pw{position:relative; padding:36px 32px 28px}
.pw h2{font-size:28px; font-weight:500; letter-spacing:-.025em; line-height:1.15}
.pw-x{position:absolute; top:12px; right:12px; width:36px; height:36px; border:0; border-radius:50%; background:#ededed; font-size:20px; line-height:1; cursor:pointer}
.pw-price b{font-size:40px; font-weight:500; letter-spacing:-.035em}
.toast{position:fixed; left:50%; bottom:24px; transform:translate(-50%,20px); opacity:0; background:var(--ink); color:#fff; padding:12px 18px; border-radius:999px; font-size:14px; z-index:100; transition:opacity .4s var(--ease),transform .5s var(--expo)}
.toast.on{opacity:1; transform:translate(-50%,0)}
.mb-3{margin-bottom:var(--s-3)}

/* ---------- scan page: what a visitor sees after scanning (index.html .scr / .sp) ---------- */
.scr{--s-bg:#f4f3ef; --s-ink:#1a1b1f; --s-muted:#5f5f66; --s-line:#e2e0d9; --s-dim:#9a9aa3; --accent:#f5a524;
  background:var(--s-bg); color:var(--s-ink); font-size:15px; line-height:1.4; min-height:100vh}
.scr .wrap{max-width:480px; padding:28px 20px 40px; display:flex; flex-direction:column; gap:24px; min-height:100vh}
.sp-addr{font-size:14px; font-weight:500; color:var(--s-muted)}
.sp-biz{font-size:28px; font-weight:600; letter-spacing:-.03em; line-height:1.1}
.sp-biz img{max-height:44px; max-width:200px; display:block}
.sp-open{margin-top:8px; display:flex; align-items:center; gap:8px; font-size:14px; font-weight:500; color:#1f7a45}
.sp-open::before{content:""; width:8px; height:8px; border-radius:50%; background:#2f9e5b}
.sp-open.closed{color:#9a3412}
.sp-open.closed::before{background:#ea580c}
.sp-label{font-size:13px; font-weight:500; color:var(--s-muted); margin-bottom:8px}
.sp-msg{background:#fff; border:1px solid var(--s-line); border-radius:16px; padding:22px 20px}
.sp-msg h1{font-size:30px; font-weight:600; letter-spacing:-.03em; line-height:1.12}
.sp-msg .sub{margin-top:12px; color:var(--s-muted)}
.sp-msg .time{font-family:var(--mono); font-size:40px; font-weight:600; letter-spacing:-.03em; line-height:1.1}
.sp-msg .note{margin-top:12px; white-space:pre-line}
.sp-msg .ago{margin-top:14px; font-size:13px; color:var(--s-dim)}
.sp-banner{background:var(--s-ink); color:#f4f4f5; border-radius:16px; padding:14px 18px; font-size:15px}
.sp-list{background:#fff; border:1px solid var(--s-line); border-radius:12px; overflow:hidden}
.sp-opt{display:flex; align-items:center; gap:12px; padding:16px; font-size:16px; text-decoration:none; color:inherit}
.sp-opt+.sp-opt{border-top:1px solid var(--s-line)}
.sp-opt span{flex:1; min-width:0}
.sp-opt .i{width:20px; height:20px}
.sp-opt::after{content:""; width:8px; height:8px; border-top:2px solid #b4b2aa; border-right:2px solid #b4b2aa; transform:rotate(45deg); flex:none}
.sp-hours{background:#fff; border:1px solid var(--s-line); border-radius:12px; padding:16px; white-space:pre-line; font-size:15px}
.ah-btn{height:52px; border-radius:14px; background:var(--accent); color:var(--s-ink); display:flex; align-items:center; justify-content:center; gap:8px; font-size:16px; font-weight:600; text-decoration:none}
.scr .foot{border:0; margin-top:auto; padding:16px 0 0; justify-content:center; flex-direction:column; align-items:center; gap:6px; text-align:center; color:var(--s-dim)}
.scr .foot a{color:var(--s-muted); text-decoration:underline}
.scr .foot .report{color:var(--s-dim)}
.f-serif{font-family:Georgia,"Times New Roman",serif}
.f-rounded{font-family:ui-rounded,"SF Pro Rounded","Nunito","Arial Rounded MT Bold",system-ui,sans-serif}
.f-mono{font-family:var(--mono)}

/* ---------- responsive (index.html breakpoints) ---------- */
@media (max-width:900px){
  .shell{display:block}
  .side{position:sticky; height:auto; width:auto; flex-direction:row; align-items:center; padding:12px 20px; background:#fff; border-bottom:1px solid var(--line)}
  .nav{display:none}
  .side-foot{flex-direction:row}
  main{padding:0 20px}
  .intro{padding:40px 0 32px}
  .intro h1{font-size:28px}
  .sec h2{font-size:26px}
  .split,.plans{grid-template-columns:1fr}
  .home-hero{padding:40px 0 56px; gap:32px}
  .home-hero h1{font-size:32px}
  .stage,.card,.plan{padding:20px}
  .app-state strong{font-size:32px}
}
@media (max-width:600px){
  .table .hide-sm{display:none}
  .row2{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none !important; animation:none !important}
}

/* ---------- Pro (designed in design/entryping-pro.pen) ---------- */
/* .pro-band: the dark Pro pitch. Left: why; right: one printed code, four messages over a day. */
.pro-band{background:var(--ink); color:#fff; padding:40px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,400px); gap:40px; align-items:center}
.pro-band .kick{display:flex; align-items:center; gap:8px; font:12px var(--mono); letter-spacing:.1em; text-transform:uppercase; color:#a1a1aa}
.pro-band .kick::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--amber)}
.pro-band h2,.pro-band h3{color:#fff; font-size:30px; font-weight:500; letter-spacing:-.025em; line-height:1.15; margin:16px 0 0}
.pro-band p{color:#a1a1aa; font-size:15px; line-height:1.5; margin-top:16px; max-width:520px}
.pro-band ul{list-style:none; margin:20px 0 0; padding:0; display:flex; flex-direction:column; gap:10px; font-size:14px; color:#e4e4e7}
.pro-band ul li{display:flex; gap:10px; align-items:center}
.pro-band ul li::before{content:""; width:14px; height:8px; border-left:2px solid var(--amber); border-bottom:2px solid var(--amber); rotate:-45deg; translate:0 -3px; flex:none}
.pro-band .go{display:flex; align-items:center; gap:14px; margin-top:24px; flex-wrap:wrap}
.pro-band .go .btn{background:#fff; color:var(--ink)}
.pro-band .go .btn:hover{background:#e7e7e7}
.pro-band .go small{font-size:13px; color:var(--muted)}
.day{background:#1a1a1c; border-radius:4px; padding:24px; margin:0}
.day figcaption{font:11px var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); padding-bottom:4px}
.day ol{list-style:none; margin:0; padding:0}
.day li{display:grid; grid-template-columns:52px 1fr; gap:16px; align-items:center; padding:14px 0; border-top:1px solid #2a2a2d; font-size:15px; color:#e4e4e7}
.day li time{font:12px var(--mono); color:var(--muted)}
.day li.now{color:#fff}
.day li.auto{color:var(--amber)}
.day .foot-note{border-top:1px solid #2a2a2d; padding-top:14px; font-size:12px; color:var(--muted)}

/* .pro-strip: one quiet line under a sign maker */
.pro-strip{display:flex; align-items:center; gap:20px; background:var(--panel); padding:20px 24px; margin:0 0 48px}
.pro-strip .qr-ico{width:44px; height:44px; border-radius:6px; background:var(--ink); color:#fff; display:grid; place-items:center; flex:none}
.pro-strip .qr-ico svg{width:24px; height:24px}
.pro-strip .copy{flex:1; min-width:0}
.pro-strip b{display:block; font-size:16px; font-weight:500; color:var(--ink)}
.pro-strip span{font-size:14px; color:var(--gray)}
.pro-strip .price{text-align:right; flex:none}
.pro-strip .price b{font-size:16px}
.pro-strip .price span{font-size:12px}

/* .compare: Free vs Pro, Pro column carried by a filled lane */
.compare{width:100%; border-collapse:collapse; font-size:15px}
.compare th,.compare td{padding:16px 0; border-bottom:1px solid var(--line); text-align:center; font-weight:400}
.compare th:first-child,.compare td:first-child{text-align:left}
.compare thead th{font-weight:500; border-bottom-color:var(--ink)}
.compare thead th.pro span{display:inline-block; white-space:nowrap; background:var(--ink); color:#fff; border-radius:999px; padding:6px 0; width:100%}
.compare td.free{color:var(--gray); width:180px}
.compare .pro{width:220px}
.compare td.pro{background:#f7f7f7; font-weight:500}
.compare-go{display:flex; justify-content:flex-end; gap:10px; margin-top:20px}

@media (max-width:900px){
  .pro-band{grid-template-columns:1fr; padding:24px; gap:28px}
  .pro-band h2,.pro-band h3{font-size:24px}
  .pro-strip{flex-wrap:wrap; padding:16px; gap:14px}
  .pro-strip .copy{flex-basis:calc(100% - 60px)}
  .pro-strip .price{text-align:left; flex:1}
  .compare td.free,.compare .pro{width:auto}
  .compare th,.compare td{padding:12px 6px; font-size:14px}
  .compare-go{justify-content:stretch} .compare-go .btn{flex:1}
}

/* Skip link (generated pages) */

/* ---------- Insights (/live/ #insights): counts from the scan page ---------- */
.ins-bar{display:flex; flex-wrap:wrap; gap:12px 24px; align-items:center; justify-content:space-between; margin-bottom:24px}
.kpis{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:2px; background:var(--line); border:1px solid var(--line)}
.kpi{background:#fff; padding:20px; display:flex; flex-direction:column; gap:6px; min-width:0}
.kpi span{font-size:13px; color:var(--gray)}
.kpi b{font-size:34px; font-weight:500; letter-spacing:-.035em; line-height:1.1; font-variant-numeric:tabular-nums; overflow-wrap:anywhere}
.kpi-d{font-size:12px; color:var(--gray); line-height:1.4}
.ins-say{margin:24px 0; font-size:17px; line-height:1.5; max-width:640px; text-wrap:pretty}
.ins-say a{color:var(--ink)}
.ins-charts{gap:16px}
.chart{position:relative; background:var(--panel); padding:20px 20px 16px; display:flex; flex-direction:column; gap:14px; min-width:0}
.chart-h{display:flex; justify-content:space-between; align-items:baseline; font-size:14px}
.chart-h b{font-weight:500}
/* daily bars: one series, 4px rounded tops, 2px gaps, the whole column is the hover target */
.bars{display:flex; align-items:stretch; gap:2px; height:140px; border-bottom:1px solid #d4d4d8; background:linear-gradient(#d4d4d8,#d4d4d8) 0 0/100% 1px no-repeat}
.bar{flex:1; display:flex; align-items:flex-end; min-width:0; cursor:default}
.bar i{display:block; width:100%; min-height:1px; background:var(--ink); border-radius:4px 4px 0 0; transition:opacity .15s}
.bars.dense .bar i{border-radius:2px 2px 0 0}
.bars:hover .bar i{opacity:.35}
.bars .bar:hover i{opacity:1}
.axis{display:flex; justify-content:space-between; font-size:12px; color:var(--muted)}
/* week x hour: single hue, light to dark */
.heat{display:grid; grid-template-columns:30px repeat(var(--cols),minmax(0,1fr)); gap:2px; align-items:center}
.heat i,.heat-key i{display:block; aspect-ratio:1; border-radius:3px; background:color-mix(in srgb,var(--ink) calc(var(--v) * 88% + 5%),#fff)}
.heat i:hover{outline:2px solid var(--ink); outline-offset:1px}
.heat-y{font-size:11px; color:var(--muted)}
.heat-x{font-size:10px; color:var(--muted); white-space:nowrap; overflow:visible}
.heat-key{display:flex; align-items:center; gap:3px; font-size:11px; color:var(--muted)}
.heat-key i{width:12px}
.heat-key span:first-child{margin-right:4px} .heat-key span:last-child{margin-left:4px}
.tip{position:absolute; z-index:5; pointer-events:none; background:var(--ink); color:#fff; font-size:12px; line-height:1.4; padding:8px 10px; border-radius:8px; white-space:nowrap; opacity:0; transition:opacity .12s}
.tip.on{opacity:1}
.tip b{display:block; font-weight:500}
.table th.n,.table td.n{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
.table .muted{color:var(--muted); font-size:12px; margin-left:4px}
.said{margin-top:24px}
.linkish{border:0; background:none; padding:0; font:inherit; color:var(--ink); text-decoration:underline; cursor:pointer}

/* ---------- Profile (/live/ #profile): what's set, at a glance ---------- */
.checks{background:var(--panel); padding:20px; display:flex; flex-direction:column; gap:16px}
.checks-h{display:flex; flex-direction:column; gap:10px; font-size:15px}
.checks-h b{font-weight:500}
.meter{display:block; height:4px; border-radius:4px; background:#fff; overflow:hidden}
.meter i{display:block; height:100%; background:var(--ink); border-radius:4px; transition:width .6s var(--expo)}
.checks ul{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.checks li{display:flex; gap:10px; align-items:flex-start; font-size:14px}
.checks li b{display:block; font-weight:500}
.checks li small{display:block; font-size:12px; color:var(--gray)}
.ck{flex:none; width:18px; height:18px; margin-top:1px; border-radius:50%; box-shadow:inset 0 0 0 1.5px var(--field); background:#fff}
.checks li.done .ck{box-shadow:none; background:var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/12px no-repeat}
.checks li:not(.done) b{color:var(--gray)}
.nudge{display:block; font-size:14px; color:var(--ink); background:#fff6e5; padding:10px 14px; border-radius:10px; text-decoration:none}
.nudge:hover{background:#ffefcc}

@media (max-width:700px){
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kpi b{font-size:28px}
  .ins-charts{grid-template-columns:minmax(0,1fr)}
}

/* Paper is a saved physical snapshot; the current scan page is a separate surface. */
.paper-states{align-items:start}.paper-record{margin:20px 0;display:grid;justify-items:center;gap:12px}.paper-record .sheet,.paper-draft .sheet{width:min(100%,240px)}.paper-record figcaption{font-size:13px;color:var(--gray);text-align:center}.paper-draft{padding:24px;display:grid;place-items:center}.request-message{white-space:pre-wrap;overflow-wrap:anywhere}.request-item .break{overflow-wrap:anywhere}.request-item form{margin-top:16px}.request-item textarea{width:100%}#paper .panel h3{margin-top:0}#requests .actions{flex-wrap:wrap}.request-item{overflow:hidden}.paper-states .panel{min-width:0}#door .duo{grid-template-columns:1fr}#door .vphone{max-width:224px}
.request-fields{border:0;padding:0;margin:0;min-width:0}.request-consent{align-items:flex-start}.request-consent input{flex:none;margin-top:3px}.request-reply{white-space:pre-wrap;overflow-wrap:anywhere}.sp-request{padding:18px}.sp-request summary{font-weight:600;cursor:pointer}