/* Membrana — shared styles for every preview. Classes only, no scripts. */
.mb,.mb *{box-sizing:border-box}
.mb{margin:0;background:var(--ground);color:var(--ink);font:400 18px/1.5 var(--font-sans,"Familjen Grotesk",system-ui,sans-serif);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.mb [data-theme]{color:var(--ink)}
.mb h1,.mb h2,.mb h3,.mb p,.mb dl,.mb dd,.mb ul,.mb ol{margin:0;padding:0}
.mb ul,.mb ol{list-style:none}
:where(.mb) a{color:inherit;text-underline-offset:.18em}
.mb :focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}

/* ---------- type ---------- */
.mb-display-xl,.mb-display-l,.mb-display-m,.mb-title{font-family:var(--font-sans,"Familjen Grotesk",system-ui,sans-serif);font-weight:700;overflow-wrap:anywhere;hyphens:auto;text-wrap:balance}
.mb-display-xl{font-size:144px;line-height:.9;letter-spacing:-.045em}
.mb-display-l{font-size:96px;line-height:.94;letter-spacing:-.04em}
.mb-display-m{font-size:64px;line-height:.98;letter-spacing:-.035em}
.mb-title{font-size:28px;line-height:1.15;letter-spacing:-.015em;font-weight:600}
.mb-lead{font-size:24px;line-height:1.35;letter-spacing:-.01em}
.mb-small{font-size:14px;line-height:1.45;color:var(--ink-muted)}
.mb-label{font:500 12px/1.3 var(--font-mono,"Geist Mono",ui-monospace,monospace);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted)}
.mb-num{font-family:var(--font-mono,"Geist Mono",ui-monospace,monospace);font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:-.04em}
.mb-accent{color:var(--accent-ink)}
.mb-wordmark{font:700 15px/1 var(--font-sans,"Familjen Grotesk",system-ui,sans-serif);letter-spacing:.14em;text-transform:uppercase;text-decoration:none}

/* ---------- button + open state ---------- */
.mb-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-3);min-height:64px;padding:0 var(--space-8);border-radius:var(--radius-pill);border:2px solid var(--accent-edge);background:var(--accent);color:var(--on-accent);font:700 20px/1.1 var(--font-sans,"Familjen Grotesk",system-ui,sans-serif);letter-spacing:-.01em;text-decoration:none;cursor:pointer;text-align:center;transition:transform .15s ease,box-shadow .15s ease;box-shadow:0 4px 0 0 var(--accent-edge)}
.mb-btn:hover{transform:translateY(2px);box-shadow:0 2px 0 0 var(--accent-edge)}
.mb-btn:active{transform:translateY(4px);box-shadow:none}
.mb-btn svg{width:20px;height:20px;flex:none}
.mb-btn--quiet{background:transparent;color:var(--ink);border-color:var(--line-strong);box-shadow:none;min-height:52px;font-size:17px;font-weight:600}
.mb-btn--block{display:flex;width:100%}
.mb-open{display:inline-flex;align-items:baseline;gap:var(--space-2);font-size:14px;line-height:1.4;color:var(--ink-muted)}
.mb-open::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;border:2px solid var(--ink-muted);transform:translateY(-1px)}
.mb-open a{color:var(--ink);font-weight:600}

/* ---------- object (the dark slab product UI sits on) ---------- */
.mb-obj{background:var(--surface);color:var(--ink);border-radius:var(--radius-lg);padding:var(--space-8);border:1px solid var(--line)}

/* ---------- month ---------- */
.mb-month{display:grid;gap:var(--space-6)}
.mb-month__head{display:flex;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap}
.mb-days{display:grid;grid-template-columns:repeat(30,1fr);align-items:end;height:72px}
.mb-days i{position:relative;display:block;height:100%}
.mb-days i::before{content:"";position:absolute;left:50%;bottom:0;width:2px;height:28%;transform:translateX(-50%);background:var(--line-strong);border-radius:2px}
.mb-days .is-clean::before{height:100%;width:6px;background:var(--clean-fill);border-radius:3px}
.mb-days .is-today::before{height:100%;background:var(--ink)}
.mb-days .is-today::after{content:"";position:absolute;left:50%;top:-10px;width:10px;height:10px;border-radius:50%;background:var(--ink);transform:translateX(-50%)}
.mb-days .is-ahead::before{height:28%;background:repeating-linear-gradient(to top,var(--line-strong) 0 3px,transparent 3px 6px);border-radius:0;animation:mb-maybe 4.8s ease-in-out infinite;animation-delay:calc(var(--i)*160ms)}
.mb-days .is-notclean::before{height:100%;width:6px;background:transparent;border:2px solid var(--ink-muted);border-radius:3px}
.mb-days .is-void::before{height:8%;opacity:.5}
.mb-days--tall{height:168px}
.mb-days__scale{display:flex;justify-content:space-between;margin-top:var(--space-3)}
.mb-checks{display:grid;grid-template-columns:repeat(10,1fr);gap:var(--space-2)}
.mb-check{position:relative;display:grid;place-items:center;aspect-ratio:1;width:100%;max-width:56px;border-radius:50%;border:2px dashed var(--line-strong)}
.mb-check svg{width:54%;height:54%;fill:none;stroke:var(--clean-mark);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;display:none}
.mb-check.is-clean{border:0;background:var(--clean-fill)}
.mb-check.is-clean svg{display:block;stroke-dasharray:22;stroke-dashoffset:0;animation:mb-draw .5s cubic-bezier(.3,.7,.2,1) both;animation-delay:calc(var(--i)*110ms + 200ms)}
.mb-check.is-clean{animation:mb-pop .4s cubic-bezier(.3,1.5,.5,1) both;animation-delay:calc(var(--i)*110ms + 120ms)}
.mb-check.is-due{border:2px solid var(--accent-ink)}
.mb-check.is-due::before{content:"";position:absolute;inset:26%;border-radius:50%;background:var(--accent-ink)}
.mb-check.is-due::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid var(--accent-ink);animation:mb-ring 2.2s ease-out infinite}
.mb-check.is-notclean{border:2px solid var(--ink-muted)}
.mb-check.is-notclean::before{content:"";width:42%;height:3px;border-radius:2px;background:var(--ink-muted)}
.mb-check.is-void{opacity:.45}
.mb-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4);border-top:1px solid var(--line);padding-top:var(--space-4)}
.mb-facts dt{font:500 12px/1.3 var(--font-mono,"Geist Mono",ui-monospace,monospace);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted);margin-bottom:var(--space-1)}
.mb-facts dd{font-size:22px;line-height:1.15;font-weight:600;letter-spacing:-.015em;overflow-wrap:anywhere}
.mb-facts--lg dd{font-size:56px;line-height:1;letter-spacing:-.035em;font-weight:700}
.mb-facts--lg{padding-top:var(--space-8);gap:var(--space-8)}
@keyframes mb-maybe{0%,82%,100%{height:28%}90%{height:62%}}
@keyframes mb-draw{from{stroke-dashoffset:22}to{stroke-dashoffset:0}}
@keyframes mb-pop{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
@keyframes mb-ring{from{transform:scale(1);opacity:.9}to{transform:scale(1.7);opacity:0}}
@media (prefers-reduced-motion:reduce){.mb *,.mb *::before,.mb *::after{animation:none!important;transition:none!important}}

/* ---------- stake ---------- */
.mb-stake{background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
.mb-stake__top{padding:var(--space-8);display:grid;gap:var(--space-6)}
.mb-stake__amount{font-size:144px;line-height:.9;display:flex;align-items:baseline;gap:.08em;flex-wrap:wrap}
.mb-stake__amount small{font-size:.45em;color:var(--ink-muted);letter-spacing:0}
.mb-chips{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.mb-chip{min-width:72px;padding:10px var(--space-4);border-radius:var(--radius-pill);border:1.5px solid var(--line-strong);font:500 16px/1.2 var(--font-mono,"Geist Mono",ui-monospace,monospace);text-align:center;color:var(--ink)}
.mb-chip.is-on{background:var(--accent);border-color:var(--accent-edge);color:var(--on-accent)}







/* ---------- rules ---------- */
.mb-rules{background:var(--surface-raised);border:2px solid var(--ink);border-radius:var(--radius-lg);overflow:hidden}
.mb-rules__figs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.mb-rules__figs>div{padding:var(--space-8);display:grid;gap:var(--space-2);align-content:start}
.mb-rules__figs>div+div{border-left:1px solid var(--line)}
.mb-rules__figs b{font-size:80px;line-height:.9}
.mb-rules__figs span{font-size:17px;line-height:1.3;color:var(--ink-muted)}
.mb-rules__list li{display:grid;grid-template-columns:56px 1fr;gap:var(--space-4);padding:var(--space-6) var(--space-8);border-top:1px solid var(--line);font-size:20px;line-height:1.35}
.mb-rules__list li>span:first-child{padding-top:4px}

/* ---------- notice ---------- */
.mb-notice{display:grid;grid-template-columns:auto 1fr;gap:var(--space-4);padding:var(--space-6);border:2px solid var(--ink);border-radius:var(--radius-md);background:var(--surface-raised)}
.mb-notice svg{width:28px;height:28px;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mb-notice h3{font-size:20px;line-height:1.25;font-weight:700;margin-bottom:var(--space-1)}
.mb-notice p{font-size:17px;line-height:1.45}

/* ---------- FAQ ---------- */
.mb-faq{border-top:2px solid var(--ink)}
.mb-faq details{border-bottom:1px solid var(--line-strong)}
.mb-faq summary{display:flex;justify-content:space-between;gap:var(--space-4);padding:var(--space-6) 0;font-size:24px;line-height:1.25;font-weight:600;letter-spacing:-.01em;cursor:pointer;list-style:none}
.mb-faq summary::-webkit-details-marker{display:none}
.mb-faq summary::after{content:"+";font:500 24px/1.2 var(--font-mono,"Geist Mono",ui-monospace,monospace);color:var(--ink-muted)}
.mb-faq details[open] summary::after{content:"–"}
.mb-faq details p{padding:0 0 var(--space-6);max-width:640px;color:var(--ink-muted)}

/* ---------- phone + screens ---------- */
.mb-phone{width:375px;min-height:760px;background:var(--ground);color:var(--ink);border-radius:44px;border:1px solid var(--line-strong);box-shadow:0 0 0 8px var(--surface),0 0 0 9px var(--line);padding:var(--space-6) var(--space-4) var(--space-8);display:flex;flex-direction:column;gap:var(--space-6);font-size:16px;line-height:1.45}
.mb-phone__bar{display:flex;justify-content:space-between;align-items:center;padding:var(--space-2) var(--space-2) 0}
.mb-phone__bar .mb-wordmark{font-size:12px}
.mb-screen{display:flex;flex-direction:column;gap:var(--space-6);padding:0 var(--space-2);flex:1}
.mb-screen__hero{display:grid;gap:var(--space-2);padding:var(--space-4) 0}
.mb-screen__big{font-size:56px;line-height:.95;font-weight:700;letter-spacing:-.04em;overflow-wrap:anywhere;hyphens:auto}
.mb-screen__count{font-size:60px;line-height:1}
.mb-screen p{color:var(--ink-muted)}
.mb-phone .mb-month{gap:var(--space-4)}
.mb-phone .mb-days{height:48px}
.mb-phone .mb-checks{gap:6px}
.mb-phone .mb-check svg{stroke-width:3.5}
.mb-phone .mb-facts{grid-template-columns:1fr 1fr}
.mb-phone .mb-facts dd{font-size:18px}
.mb-tag{display:inline-flex;align-items:center;gap:var(--space-2);align-self:start;justify-self:start;padding:6px var(--space-3);border-radius:var(--radius-pill);font:500 12px/1.3 var(--font-mono,"Geist Mono",ui-monospace,monospace);letter-spacing:.08em;text-transform:uppercase;border:1.5px solid var(--line-strong);color:var(--ink)}
.mb-tag--on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.mb-row{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-4);padding:var(--space-4);border-radius:var(--radius-md);background:var(--surface);border:1px solid var(--line)}
.mb-row b{font-size:22px}
.mb-row span{font-size:14px;color:var(--ink-muted);text-align:right}
.mb-row .is-kept{color:var(--accent-ink);font-weight:600}
.mb-steps{display:grid;gap:var(--space-3)}
.mb-steps li{display:grid;grid-template-columns:28px 1fr;gap:var(--space-2);font-size:15px;line-height:1.4}
.mb-seal{width:72px;height:72px;border-radius:50%;background:var(--accent);display:grid;place-items:center}
.mb-seal svg{width:50%;height:50%;fill:none;stroke:var(--on-accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.mb-push{margin-top:auto}

/* ---------- landing page ---------- */
.lp{width:1440px;background:var(--ground);color:var(--ink);overflow:hidden}
.lp__wrap{padding:0 120px}
.lp__nav{display:flex;justify-content:space-between;align-items:center;padding:var(--space-8) 0}
.lp__nav a:last-child{font-size:16px;font-weight:600}
.lp section{padding:var(--space-32) 0}
.lp__band{background:var(--ground)}
.lp__hero{padding:var(--space-12) 0 var(--space-24)!important}
.lp__hero-row{display:grid;grid-template-columns:5fr 7fr;gap:var(--space-16);align-items:start;margin-top:var(--space-16)}
.lp__cta{display:grid;gap:var(--space-6);justify-items:start}
.lp__cta .mb-lead{max-width:440px}
.lp__split{display:grid;grid-template-columns:7fr 5fr;gap:var(--space-16);align-items:center}
.lp__split--rev{grid-template-columns:5fr 7fr}
.lp__stack{display:grid;gap:var(--space-6);justify-items:start}
.lp__stack .mb-lead{max-width:520px;color:var(--ink-muted)}
.lp__lines{display:grid;gap:var(--space-3);font-size:22px;line-height:1.3;max-width:440px}
.lp__lines li{padding-top:var(--space-3);border-top:1px solid var(--line-strong)}
.lp__head{display:grid;gap:var(--space-4);margin-bottom:var(--space-12)}
.lp__phone{display:flex;justify-content:center}
.lp__ledger{border-top:2px solid var(--ink);padding-top:var(--space-8)}
.lp__final{text-align:center}
.lp__final .lp__stack{justify-items:center}
.lp__foot{display:flex;justify-content:space-between;align-items:center;gap:var(--space-6);padding:var(--space-8) 0;border-top:1px solid var(--line-strong);font-size:15px}
.lp__foot nav{display:flex;gap:var(--space-8);flex-wrap:wrap}
.lp__faq{display:grid;grid-template-columns:4fr 8fr;gap:var(--space-16);align-items:start}

/* phone layout: same markup, .lp--phone on the root */
.lp--phone{width:375px;font-size:17px}
.lp--phone .lp__wrap{padding:0 16px}
.lp--phone .lp__nav{padding:var(--space-4) 0}
.lp--phone section{padding:var(--space-16) 0}
.lp--phone .lp__hero{padding:var(--space-8) 0 var(--space-16)!important}
.lp--phone .mb-display-xl{font-size:60px;line-height:.94;letter-spacing:-.04em}
.lp--phone .mb-display-l{font-size:48px;line-height:.98;letter-spacing:-.035em}
.lp--phone .mb-display-m{font-size:40px;line-height:1;letter-spacing:-.03em}
.lp--phone .mb-lead{font-size:20px}
.lp--phone .lp__hero-row,.lp--phone .lp__split,.lp--phone .lp__faq{grid-template-columns:1fr;gap:var(--space-8);margin-top:var(--space-8)}
.lp--phone .lp__split,.lp--phone .lp__faq{margin-top:0}
.lp--phone .lp__split{gap:var(--space-12)}
.lp--phone .lp__cta{justify-items:stretch}
.lp--phone .mb-btn{display:flex;width:100%}
.lp--phone .mb-obj{padding:var(--space-6) var(--space-4);border-radius:var(--radius-md)}
.lp--phone .mb-days{height:48px}
.lp--phone .mb-days--tall{height:96px}
.lp--phone .mb-days .is-clean::before,.lp--phone .mb-days .is-notclean::before{width:4px}
.lp--phone .mb-checks{gap:6px}
.lp--phone .mb-facts{grid-template-columns:1fr 1fr;gap:var(--space-4)}
.lp--phone .mb-facts dd{font-size:18px}
.lp--phone .mb-facts--lg{grid-template-columns:1fr;padding-top:var(--space-6)}
.lp--phone .mb-facts--lg dd{font-size:40px}
.lp--phone .lp__head{margin-bottom:var(--space-8)}
.lp--phone .mb-phone{width:343px;min-height:0;border-radius:32px;box-shadow:none}
.lp--phone .mb-stake{border-radius:var(--radius-md)}
.lp--phone .mb-stake__top{padding:var(--space-6) var(--space-4)}
.lp--phone .mb-stake__amount{font-size:88px}
.lp--phone .mb-chip{min-width:0;flex:1 1 28%}
.lp--phone 
.lp--phone 
.lp--phone 
.lp--phone .mb-rules{border-radius:var(--radius-md)}
.lp--phone .mb-rules__figs{grid-template-columns:1fr 1fr}
.lp--phone .mb-rules__figs>div{padding:var(--space-4)}
.lp--phone .mb-rules__figs>div+div{border-left:0}
.lp--phone .mb-rules__figs>div:nth-child(even){border-left:1px solid var(--line)}
.lp--phone .mb-rules__figs>div:nth-child(n+3){border-top:1px solid var(--line)}
.lp--phone .mb-rules__figs b{font-size:56px}
.lp--phone .mb-rules__figs span{font-size:15px}
.lp--phone .mb-rules__list li{grid-template-columns:36px 1fr;gap:var(--space-2);padding:var(--space-4);font-size:17px}
.lp--phone .mb-notice{padding:var(--space-4);grid-template-columns:1fr}
.lp--phone .mb-faq summary{font-size:20px;padding:var(--space-4) 0}
.lp--phone .lp__lines{font-size:19px}
.lp--phone .lp__foot{flex-direction:column;align-items:flex-start}
.lp--phone .lp__foot nav{gap:var(--space-6)}
/* ================= signed-in app (Night only) ================= */
.mb-btn[aria-disabled="true"]{background:var(--surface-raised);border-color:var(--line-strong);color:var(--ink-muted);box-shadow:none;cursor:not-allowed;transform:none}
.mb-check.is-sent{border:2px solid var(--ink)}
.mb-check.is-sent::before{content:"";position:absolute;inset:34%;border-radius:50%;background:var(--ink)}
.mb-check.is-missed{border:2px solid var(--line-strong)}
.mb-checks--sm{grid-template-columns:repeat(10,24px);gap:6px}
.mb-check--one{width:22px;flex:none}
.mb-check--one svg{stroke-width:4}

/* phone shell */
.app-ph{padding-bottom:0;overflow:hidden;position:relative}
.app-ph>.mb-screen{padding-bottom:var(--space-6)}
.app-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0 calc(var(--space-4)*-1);padding:0 var(--space-2);border-top:1px solid var(--line);background:var(--surface)}
.app-tabs a{display:grid;justify-items:center;align-content:start;gap:var(--space-2);padding:0 2px var(--space-6);font-size:13px;line-height:1.2;font-weight:500;color:var(--ink-muted);text-decoration:none;text-align:center;overflow-wrap:anywhere;hyphens:auto}
.app-tabs a::before{content:"";width:100%;height:4px;border-radius:0 0 4px 4px;background:transparent;margin-bottom:var(--space-1)}
.app-tabs a[aria-current]{color:var(--ink);font-weight:700}
.app-tabs a[aria-current]::before{background:var(--accent)}
.app-h{font-size:40px;line-height:1;font-weight:700;letter-spacing:-.035em;overflow-wrap:anywhere;hyphens:auto}
.app-h--s{font-size:30px;line-height:1.05;letter-spacing:-.025em}
.app-link{font-weight:600;text-decoration:underline;text-underline-offset:.18em;color:var(--ink)}
.app-center{justify-content:center;text-align:center;align-items:stretch}
.app-center .mb-wordmark{font-size:18px}
.app-stack{display:grid;gap:var(--space-3)}
.app-foot{display:grid;gap:var(--space-4);margin-top:auto}
.app-facts3{display:grid}
.app-facts3 li{display:grid;grid-template-columns:88px 1fr;gap:var(--space-4);align-items:baseline;padding:var(--space-4) 0;border-top:1px solid var(--line)}
.app-facts3 b{font-size:40px;line-height:1}
.app-facts3 span{color:var(--ink-muted)}

/* forms */
.mb-field{display:grid;gap:var(--space-2);text-align:left}
.mb-field>span{font-size:14px;line-height:1.3;font-weight:600}
.mb-input{display:block;width:100%;min-height:56px;padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);border:1.5px solid var(--line-strong);background:var(--surface);color:var(--ink);font:400 17px/1.3 var(--font-sans,"Familjen Grotesk",system-ui,sans-serif);margin:0}
textarea.mb-input{min-height:168px;resize:vertical}
.mb-input::placeholder{color:var(--ink-muted);opacity:1}
.mb-input.is-error{border:2px solid var(--error)}
.mb-select{position:relative;display:block}
.mb-select select{appearance:none;-webkit-appearance:none;padding-right:var(--space-12)}
.mb-select::after{content:"";position:absolute;right:20px;top:50%;width:9px;height:9px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:translateY(-70%) rotate(45deg);pointer-events:none}
.mb-code{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--space-2)}
.mb-code .mb-input{padding:0;text-align:center;font:500 26px/1 var(--font-mono,"Geist Mono",ui-monospace,monospace);min-height:64px}
.mb-row2{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)}
.mb-toggle{position:relative;flex:none;width:56px;height:32px;border-radius:var(--radius-pill);border:2px solid var(--line-strong);background:transparent}
.mb-toggle::before{content:"";position:absolute;top:4px;left:4px;width:20px;height:20px;border-radius:50%;background:var(--ink-muted)}
.mb-toggle.is-on{background:var(--accent);border-color:var(--accent)}
.mb-toggle.is-on::before{left:28px;background:var(--on-accent)}
.mb-agree{display:grid;grid-template-columns:28px 1fr;gap:var(--space-3);align-items:start;font-size:16px;line-height:1.4;text-align:left}
.mb-agree i{width:28px;height:28px;border-radius:var(--radius-sm);background:var(--accent);display:grid;place-items:center}
.mb-agree i svg{width:18px;height:18px;fill:none;stroke:var(--on-accent);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
.mb-list{display:grid;text-align:left}
.mb-list__row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--space-2) var(--space-4);padding:var(--space-4) 0;border-bottom:1px solid var(--line)}
.mb-list__row>div{flex:1 1 180px;min-width:0;display:grid;gap:2px}
.mb-list__row b{font-size:16px;font-weight:600;line-height:1.3;overflow-wrap:anywhere}
.mb-list__row small{font-size:14px;line-height:1.4;color:var(--ink-muted)}
.mb-list__row>span{font-size:16px;color:var(--ink-muted);display:inline-flex;align-items:center;gap:var(--space-2)}
.mb-list>.mb-label{padding-top:var(--space-6)}
.mb-list>.mb-label:first-child{padding-top:0}

/* error: a line and a word, never a fill */
.mb-alert{display:grid;grid-template-columns:24px 1fr;gap:var(--space-3);padding:var(--space-4);border:2px solid var(--error);border-radius:var(--radius-md);background:var(--surface);text-align:left}
.mb-alert svg{width:24px;height:24px;fill:none;stroke:var(--error);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mb-alert .mb-label{color:var(--error)}
.mb-alert h3{font-size:19px;line-height:1.25;font-weight:700;margin:2px 0 var(--space-1)}
.mb-alert p{font-size:15px;line-height:1.45;color:var(--ink-muted)}
.mb-alert--bar{border-radius:0;border-width:0 0 2px;margin:calc(var(--space-6)*-1) calc(var(--space-4)*-1) 0;padding:var(--space-4) var(--space-6)}

/* in-phone sizes for landing components */
.mb-phone .mb-stake{border-radius:var(--radius-md)}
.mb-phone .mb-stake__top{padding:var(--space-6) var(--space-4);gap:var(--space-4)}
.mb-phone .mb-stake__amount{font-size:80px}
.mb-phone .mb-chip{min-width:0;flex:1 1 28%}
.mb-phone 
.mb-phone 
.mb-phone 
.mb-phone 
.mb-phone .mb-rules{border-radius:var(--radius-md)}
.mb-phone .mb-rules__figs{grid-template-columns:1fr 1fr}
.mb-phone .mb-rules__figs>div{padding:var(--space-4)}
.mb-phone .mb-rules__figs>div+div{border-left:0}
.mb-phone .mb-rules__figs>div:nth-child(even){border-left:1px solid var(--line)}
.mb-phone .mb-rules__figs>div:nth-child(n+3){border-top:1px solid var(--line)}
.mb-phone .mb-rules__figs b{font-size:48px}
.mb-phone .mb-rules__figs span{font-size:15px}
.mb-phone .mb-rules__list li{grid-template-columns:32px 1fr;gap:var(--space-2);padding:var(--space-4);font-size:16px}
.mb-phone .mb-notice{padding:var(--space-4);grid-template-columns:1fr;gap:var(--space-2);text-align:left}
.mb-phone .mb-notice p{font-size:16px;color:var(--ink)}
.mb-phone .mb-notice p+p{margin-top:var(--space-2);color:var(--ink-muted)}

/* camera: every word sits on an opaque plate; the guide has a double edge and a scrim */
.app-cam{padding:0;gap:0;display:block;min-height:760px;height:760px}
.app-cam__top{position:absolute;top:var(--space-6);left:var(--space-4);right:var(--space-4);display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-2);z-index:2}
.app-plate{background:var(--ground);color:var(--ink);border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);display:grid;gap:var(--space-1)}
.app-plate--row{display:flex;align-items:center;gap:var(--space-2)}
.app-plate--row i{width:10px;height:10px;border-radius:50%;background:var(--ink)}
.app-cam__guide{position:absolute;left:50%;top:43%;transform:translate(-50%,-50%);border:3px solid var(--ink);border-radius:var(--radius-md);box-shadow:0 0 0 3px var(--ground),0 0 0 2000px rgba(38,40,44,.62)}
.app-cam__bottom{position:absolute;left:var(--space-4);right:var(--space-4);bottom:var(--space-6);z-index:2}
.app-cam__bottom .app-plate{padding:var(--space-4);gap:var(--space-2)}
.app-cam__bottom b{font-size:22px;line-height:1.2;font-weight:700;letter-spacing:-.015em}
.app-cam__bottom p{font-size:15px;color:var(--ink-muted)}
.app-cam__time{font-size:56px;line-height:1}

/* desktop shell */
.app-desk{width:1440px;min-height:720px;display:grid;grid-template-columns:264px 1fr;background:var(--ground);color:var(--ink);font-size:17px;line-height:1.45}
.app-desk--bare{grid-template-columns:1fr;place-items:center}
.app-side{background:var(--surface);border-right:1px solid var(--line);padding:var(--space-8) var(--space-6);display:flex;flex-direction:column;gap:var(--space-12)}
.app-side nav{display:grid;gap:var(--space-1)}
.app-side nav a{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);font-size:17px;font-weight:500;color:var(--ink-muted);text-decoration:none;overflow-wrap:anywhere}
.app-side nav a::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:transparent}
.app-side nav a[aria-current]{background:var(--surface-raised);color:var(--ink);font-weight:700}
.app-side nav a[aria-current]::before{background:var(--accent)}
.app-side__foot{margin-top:auto;display:grid;gap:var(--space-1);font-size:14px;color:var(--ink-muted);padding:0 var(--space-4)}
.app-side__foot b{color:var(--ink);font-weight:600;font-size:15px}
.app-main{padding:var(--space-16);display:grid;gap:var(--space-12);align-content:start;min-width:0}
.app-main__head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-4);flex-wrap:wrap;padding-bottom:var(--space-4);border-bottom:1px solid var(--line)}
.app-cols{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-16);align-items:start}
.app-col{display:grid;gap:var(--space-6);justify-items:start;align-content:start;min-width:0}
.app-col--fill{justify-items:stretch}
.app-col p{color:var(--ink-muted);max-width:440px}
.app-count{font-size:84px;line-height:.95}
.app-hero{font-size:80px;line-height:.94;font-weight:700;letter-spacing:-.04em;overflow-wrap:anywhere;hyphens:auto}
.app-narrow{max-width:640px;display:grid;gap:var(--space-8)}
.app-card{width:440px;display:grid;gap:var(--space-6);text-align:center}
.app-hist{display:grid;grid-template-columns:1.2fr auto 1fr 1.4fr 1fr;gap:var(--space-4) var(--space-8);align-items:center;padding:var(--space-6) 0;border-bottom:1px solid var(--line)}
.app-hist b{font-weight:600}
.app-hist span{color:var(--ink-muted)}
.app-frames{display:grid;gap:var(--space-16);padding:var(--space-12) 0;background:var(--ground)}
.app-frames>div{display:grid;gap:var(--space-4)}
.app-frames>div>.mb-label{padding:0 var(--space-16)}
.app-frames .app-desk{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.app-phones{display:flex;flex-wrap:wrap;gap:var(--space-16);padding:var(--space-16);align-items:flex-start}
.app-phones>div{display:grid;gap:var(--space-6)}

/* ---------- app, second pass: the landing page's scale, ledger and paper documents ---------- */
.app-xl{font-size:64px;line-height:.94;font-weight:700;letter-spacing:-.045em;overflow-wrap:break-word;hyphens:auto}
.app-xxl{font-size:96px;line-height:.9;font-weight:700;letter-spacing:-.05em;overflow-wrap:break-word;hyphens:auto}
.app-h{font-size:48px;line-height:.96;letter-spacing:-.04em}
.app-lead{font-size:20px;line-height:1.35;letter-spacing:-.01em}
.mb-phone .mb-screen__hero{gap:var(--space-3)}
.app-ledger{border-top:2px solid var(--ink);padding-top:var(--space-6);display:grid;gap:var(--space-4)}
.mb-phone .app-ledger .mb-days{height:104px}
.mb-phone .app-ledger .mb-days .is-clean::before,.mb-phone .app-ledger .mb-days .is-notclean::before{width:5px}
.app-ledger .mb-days__scale{margin-top:var(--space-2)}
.mb-phone .app-ledger .mb-facts dd{font-size:36px;line-height:1;font-weight:700;letter-spacing:-.035em}
.app-lines{display:grid;font-size:19px;line-height:1.3}
.app-lines li{display:grid;grid-template-columns:36px 1fr;gap:var(--space-2);padding:var(--space-3) 0;border-top:1px solid var(--line-strong)}
.app-lines li>span:first-child{padding-top:5px}
.app-rule{border-top:2px solid var(--ink);padding-top:var(--space-4)}

/* the stake as a paper ticket */
.app-ticket{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);background:var(--surface);border-radius:var(--radius-md);overflow:hidden}
.app-ticket>div{padding:var(--space-4);display:grid;gap:var(--space-1);align-content:center}
.app-ticket>div>b{font-size:48px;line-height:1}

.app-ticket>p{margin:0;padding:var(--space-4);border-left:2px dashed var(--line-strong);display:grid;align-content:center;font-size:17px;line-height:1.3;font-weight:600;color:var(--ink)}
.app-ticket>p.is-kept{color:var(--accent-ink)}

/* check requested: the whole slab is the button */
.app-slab{display:grid;gap:var(--space-3);padding:var(--space-6);border-radius:var(--radius-lg);background:var(--accent);color:var(--on-accent);text-decoration:none;border:2px solid var(--accent-edge);transition:transform .15s ease}
.app-slab:active{transform:translateY(3px)}
.app-slab .mb-label{color:var(--on-accent)}
.app-slab__time{font-size:56px;line-height:.95}
.app-slab__go{display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);margin-top:var(--space-2);padding-top:var(--space-4);border-top:2px solid var(--on-accent);font-size:26px;line-height:1.1;font-weight:700;letter-spacing:-.02em}
.app-slab__go svg{width:28px;height:28px;flex:none}

/* paper documents inside the Night app */
.app-paper{background:var(--surface);color:var(--ink);border-radius:var(--radius-md);padding:var(--space-4)}
.app-paper .app-facts3 li:first-child{border-top:0;padding-top:0}
.app-paper .app-facts3 li:last-child{padding-bottom:0}
.app-paper .mb-list__row:last-child{border-bottom:0}
.app-paper .mb-list__row>span{color:var(--ink);font-weight:600}
.mb-phone [data-theme="light"] .mb-notice p+p{color:var(--ink-muted)}
.app-motif .mb-days i::before{animation:none}

/* history as ledger entries */
.app-entry{border-top:2px solid var(--ink);padding-top:var(--space-4);display:grid;gap:var(--space-3)}
.app-entry__top{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-4);flex-wrap:wrap}
.app-entry__top b{font-size:40px;line-height:1;font-weight:700;letter-spacing:-.035em}
.app-entry__foot{display:flex;justify-content:space-between;gap:var(--space-2) var(--space-4);flex-wrap:wrap;font-size:16px;color:var(--ink-muted)}
.app-entry__foot .is-kept{color:var(--accent-ink);font-weight:600}
.app-entry__foot b{color:var(--ink)}

/* desktop, second pass */
.app-desk{min-height:0}
.app-main{padding:var(--space-12) var(--space-16) var(--space-16);gap:var(--space-8)}
.app-side nav a{font-size:20px;font-weight:600;letter-spacing:-.01em}
.app-top{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-4);flex-wrap:wrap}
.app-heroes{display:grid;grid-template-columns:7fr 5fr;gap:var(--space-16);align-items:center}
.app-heroes>div{display:grid;gap:var(--space-4);min-width:0;align-content:center}
.app-desk .app-hero{overflow-wrap:break-word;font-size:112px;line-height:.88;letter-spacing:-.05em}
.app-desk .app-hero--m{font-size:88px;line-height:.92;letter-spacing:-.045em}
.app-desk .app-lead{font-size:24px;color:var(--ink-muted);max-width:520px}
.app-desk .app-ledger{padding-top:var(--space-8);gap:var(--space-6)}
.app-desk .app-ledger .mb-days{height:168px}
.app-desk .app-ledger .mb-checks{gap:var(--space-3)}
.app-desk .app-ledger .mb-facts{padding-top:var(--space-6);gap:var(--space-8)}
.app-desk .app-ledger .mb-facts dd{font-size:56px;line-height:1;font-weight:700;letter-spacing:-.035em}
.app-desk .app-ticket{border-radius:var(--radius-lg)}
.app-desk .app-ticket>div{padding:var(--space-6)}
.app-desk .app-ticket>div>b{font-size:60px}
.app-desk .app-ticket>p{padding:var(--space-6);font-size:22px}
.app-desk .app-slab{padding:var(--space-8)}
.app-desk .app-slab__time{font-size:64px}
.app-desk .app-slab__go{font-size:32px}
.app-desk .app-paper{border-radius:var(--radius-lg);padding:var(--space-8)}
.app-desk .app-facts3 b{font-size:64px}
.app-desk .app-facts3 li{grid-template-columns:140px 1fr;font-size:20px;padding:var(--space-6) 0}
.app-desk .app-entry{grid-template-columns:1.1fr auto 1fr 1.2fr;align-items:center;gap:var(--space-8);padding:var(--space-6) 0}
.app-desk .app-entry .mb-checks{grid-template-columns:repeat(10,32px);gap:var(--space-2)}
.app-desk .app-entry__top{display:grid;gap:var(--space-1)}
.app-desk .app-entry__top b{font-size:48px}
.app-desk .app-entry__foot{display:grid;justify-items:end;text-align:right;font-size:17px}
.app-signin{display:grid;grid-template-columns:7fr 5fr;gap:var(--space-16);align-items:center;width:100%;padding:var(--space-24) 120px}
.app-signin>div{display:grid;gap:var(--space-8);min-width:0}
