/* Salvo brand guidelines — page chrome + specimen layout.
   App component styles come from salvo-ui.css (generated from the MVP v2 app.css, scoped under .ui).
   Page rules: nothing under 15px; every tappable >= 56x56 with >= 12px between. */
:root{--lime:#C6F432;--ink:#0A1A15;--cream:#F4F2E8;--loc:#3898FF;--hdr:80px;--pad:clamp(16px,4vw,48px);--maxw:1380px}
*,*::before,*::after{box-sizing:border-box}
.ui *{margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--tx);font-family:'Space Grotesk',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;font-size:18px;line-height:1.5;transition:background-color .25s,color .25s}
button,input{font:inherit;color:inherit}
img{max-width:100%}
a{color:inherit}
code,kbd,samp,pre{font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;font-size:17px}
small{font-size:15px}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--ic);outline-offset:3px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.F{font-family:Fraunces,Georgia,serif;font-weight:700}
.only-light{display:none!important}
html[data-theme=light] .only-light{display:block!important}
html[data-theme=light] .only-dark{display:none!important}
/* ---------- sticky header ---------- */
.top{position:sticky;top:0;z-index:100;background:color-mix(in srgb,var(--bg) 92%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:2px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:16px;height:var(--hdr)}
.bm{display:flex;align-items:center;gap:12px;flex:none;text-decoration:none;color:var(--tx);min-height:56px;min-width:56px;border-radius:28px;padding-right:8px}
.bm img,.bm .nav-mk{width:52px;height:52px;flex:none}
.bm .nav-mk{display:block;overflow:visible}
.bm b{font-family:Fraunces,Georgia,serif;font-size:27px;line-height:1}
.bm span{display:block;font-size:15px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ic);margin-top:3px}
nav.sec{flex:1;min-width:0;overflow-x:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 92%,transparent);mask-image:linear-gradient(90deg,#000 92%,transparent)}
nav.sec::-webkit-scrollbar{display:none}
nav.sec.fit{-webkit-mask-image:none;mask-image:none}
nav.sec ul{display:flex;gap:12px;list-style:none;margin:0;padding:12px 24px 12px 0}
nav.sec a{display:flex;align-items:center;min-height:56px;min-width:56px;padding:0 11px;border-radius:28px;font-size:17px;font-weight:700;color:var(--tx);text-decoration:none;white-space:nowrap;border:2px solid transparent}
nav.sec a:hover{border-color:var(--line)}
nav.sec a.on{background:var(--info);color:var(--infotx);border-color:var(--info)}
.themebtn{flex:none;min-height:56px;min-width:56px;padding:0 20px 0 16px;border-radius:28px;border:2.5px solid var(--ic);background:transparent;color:var(--tx);font-weight:700;font-size:17px;display:flex;align-items:center;justify-content:center;gap:10px;cursor:pointer}
.themebtn svg{flex:none;color:var(--ic)}
.themebtn:active,.copy:active{transform:scale(.97)}
/* ---------- sections ---------- */
section.s{padding:80px 0;border-top:2px solid var(--line);scroll-margin-top:var(--hdr)}
.eyebrow{font-size:15px;letter-spacing:.12em;font-weight:700;color:var(--ic);text-transform:uppercase;margin:0}
h2.h{font-family:Fraunces,Georgia,serif;font-weight:700;font-size:clamp(40px,5vw,60px);line-height:1.04;margin:10px 0 0}
h2.h i,.hero h1 i{color:var(--ic)}
h3.h3{font-family:Fraunces,Georgia,serif;font-weight:700;font-size:30px;line-height:1.12;margin:0}
h4.h4{font-size:20px;font-weight:700;margin:0}
.lead{font-size:21px;line-height:1.45;color:var(--sub);max-width:820px;margin:16px 0 0}
.sub2{color:var(--sub)}
p{margin:0}
.mt8{margin-top:8px}.mt12{margin-top:12px}.mt16{margin-top:16px}.mt24{margin-top:24px}.mt32{margin-top:32px}.mt48{margin-top:48px}
.grid{display:grid;gap:24px;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr))}
.grid.g2{grid-template-columns:repeat(auto-fill,minmax(min(100%,520px),1fr))}
.grid.g4{grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr))}
.panel{background:var(--card);border:2px solid var(--line);border-radius:26px;padding:24px;min-width:0}
.panel>.h3+p,.panel>.h3+.meta{margin-top:8px}
.meta{font-size:17px;color:var(--sub);line-height:1.45}
.meta b{color:var(--tx)}
.subhead{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin:56px 0 20px}
.subhead .h3{font-size:34px}
.rules{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.rules li{position:relative;padding-left:28px;font-size:18px;line-height:1.45}
.rules li::before{content:'';position:absolute;left:4px;top:.5em;width:12px;height:12px;border-radius:50%;background:var(--ic)}
.rules li.no::before{background:transparent;border:2.5px solid var(--danger);border-radius:3px;transform:rotate(45deg);width:11px;height:11px}
/* non-clickable status badges (never button-styled) */
.bdg{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;border-radius:10px;padding:4px 10px;font-size:15px;font-weight:700;letter-spacing:.03em}
.bdg.ok{background:var(--info);color:var(--infotx)}
.bdg.no{border:2px solid var(--danger);color:var(--danger);padding:2px 8px}
.bdg.na{border:2px dashed var(--line);color:var(--sub);padding:2px 8px}
/* copy buttons */
.copy{display:inline-flex;align-items:center;gap:10px;min-height:56px;min-width:56px;padding:0 18px 0 16px;border-radius:28px;border:2px solid var(--line);background:var(--bg);color:var(--tx);font-weight:700;font-size:17px;cursor:pointer;max-width:100%}
.copy code{font-size:17px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.copy .cl{font-size:15px;color:var(--ic);letter-spacing:.06em;text-transform:uppercase;margin-left:auto;padding-left:6px}
.copy svg{flex:none;color:var(--ic)}
.copy.done{border-color:var(--ic)}
.copies{display:flex;flex-direction:column;gap:12px}
/* page toast (status, not tappable) */
#ptoast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,24px);opacity:0;z-index:200;background:var(--toast);color:var(--toasttx);font-size:18px;font-weight:700;border-radius:22px;padding:14px 22px;box-shadow:0 10px 30px rgba(0,0,0,.3);transition:opacity .2s,transform .2s;pointer-events:none;max-width:calc(100vw - 32px)}
#ptoast.on{opacity:1;transform:translate(-50%,0)}
/* ---------- hero ---------- */
.hero{padding:72px 0 88px}
.hero .wrap{display:grid;grid-template-columns:1.25fr 1fr;gap:48px;align-items:center}
.hero h1{font-family:Fraunces,Georgia,serif;font-weight:700;font-size:clamp(60px,8.4vw,120px);line-height:.98;margin:14px 0 0;letter-spacing:-.01em}
.hero .lead{font-size:24px;color:var(--tx);max-width:640px;margin-top:26px}
.hero .lead em{font-style:normal;color:var(--ic);font-weight:700}
.hero .logo{width:100%;max-width:460px;justify-self:center;aspect-ratio:1}
.hero .logo img{width:100%;height:100%}
.facts{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px;list-style:none;padding:0}
.facts li{border:2px solid var(--line);border-radius:14px;padding:8px 14px;font-size:17px;font-weight:600;color:var(--sub)}
.facts li b{color:var(--tx)}
/* ---------- logo ---------- */
.bgpanel{border-radius:26px;display:flex;align-items:center;justify-content:center;padding:28px;border:2px solid var(--line)}
.bgpanel.dk{background:#0A1A15;color:#F4F2E8}
.bgpanel.lt{background:#F4F2E8;color:#0A1A15;border-color:#C9C19F}
.bgpanel img{display:block}
.cap{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:14px;font-size:17px}
.cap b{font-weight:700}
.cs{position:relative;display:inline-block;padding:40px;border:2px dashed var(--ic);border-radius:8px}
.cs::before{content:'';position:absolute;inset:40px;border:1.5px solid color-mix(in srgb,var(--ic) 50%,transparent)}
.cs img{display:block;width:160px;height:160px}
.cs .x{position:absolute;font-size:15px;font-weight:700;color:var(--ic)}
.sizes{display:flex;align-items:flex-end;gap:24px;flex-wrap:wrap}
.sizes figure{margin:0;text-align:center}
.sizes figcaption{font-size:15px;font-weight:700;color:var(--sub);margin-top:8px}
.appicon{border-radius:22.5%;display:flex;align-items:center;justify-content:center;overflow:hidden;box-shadow:0 8px 22px rgba(0,0,0,.28)}
.appicon.dk{background:#0A1A15}
.appicon.lt{background:#F4F2E8}
.appicon img{width:112%;height:112%}
.lockup{display:flex;align-items:center;gap:18px}
.lockup b{font-family:Fraunces,Georgia,serif;font-size:72px;line-height:1}
.lockup.stk{flex-direction:column;gap:10px;text-align:center}
.lockup.stk b{font-size:56px}
.lockup .tg{font-family:Fraunces,Georgia,serif;font-size:26px}
.lockup .tg i{color:#C6F432}
.bgpanel.lt .lockup .tg i{color:#2E5A46}
.dd{display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr))}
.dd figure{margin:0}
.dd .bgpanel{height:220px;position:relative;overflow:hidden}
.dd figcaption{margin-top:12px;font-size:17px;line-height:1.4}
.dd figcaption .bdg{margin-right:6px}
.avatar-demo{display:flex;align-items:center;gap:14px}
.avatar-demo .av{width:84px;height:84px;border-radius:50%;overflow:hidden;background:#1B3A2F;border:3px solid #F4F2E8;flex:none}
.avatar-demo .av img{width:160%;height:160%;margin:-30%}
.avatar-demo b{font-size:22px}
.xmark{position:absolute;top:14px;right:14px;width:40px;height:40px;border-radius:50%;background:var(--danger);display:flex;align-items:center;justify-content:center}
.xmark svg{color:var(--bg)}
/* ---------- color ---------- */
.pal{display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr))}
.sw{border-radius:24px;overflow:hidden;border:2px solid var(--line);background:var(--card);display:flex;flex-direction:column;min-width:0}
.sw .chip{height:120px;display:flex;align-items:flex-end;justify-content:space-between;padding:14px 16px;font-family:Fraunces,Georgia,serif;font-size:30px;border-bottom:2px solid var(--line)}
.sw .chip small{font-family:'Space Grotesk',sans-serif;font-size:15px;font-weight:700;letter-spacing:.06em}
.sw .bd{padding:16px;display:flex;flex-direction:column;gap:12px;flex:1}
.sw .nm{font-family:Fraunces,Georgia,serif;font-size:26px;line-height:1.1}
.sw .rl{font-size:17px;color:var(--sub);line-height:1.4;flex:1}
.palhead{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:40px 0 18px}
.palhead .h3{font-size:30px}
.ctable{display:flex;flex-direction:column;gap:12px}
.crow{display:grid;grid-template-columns:76px minmax(0,1fr) 120px;gap:10px 16px;align-items:center;background:var(--card);border:2px solid var(--line);border-radius:20px;padding:12px 16px}
.crow .smp{width:76px;height:60px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-family:Fraunces,Georgia,serif;font-size:28px;border:1.5px solid rgba(128,128,128,.35)}
.crow .pn{font-weight:700;font-size:18px;line-height:1.3}
.crow .pn span{display:block;font-weight:500;font-size:16px;color:var(--sub)}
.crow .ratio{font-family:Fraunces,Georgia,serif;font-size:30px;line-height:1}
.crow .ratio span{display:block;font-family:'Space Grotesk',sans-serif;font-size:15px;font-weight:700;color:var(--sub);margin-top:4px;letter-spacing:.04em}
.crow .bds{display:flex;flex-wrap:wrap;gap:8px;grid-column:2/-1}
.crow .bdg.v{font-size:15px;padding:4px 12px}
/* ---------- type ---------- */
.fontcard .big{font-family:Fraunces,Georgia,serif;font-size:120px;line-height:1}
.fontcard .big.sg{font-family:'Space Grotesk',sans-serif;font-weight:700}
.fontcard .chars{font-size:22px;line-height:1.4;margin-top:10px;word-break:break-all}
.scale{display:flex;flex-direction:column;gap:12px}
.tsr{display:grid;grid-template-columns:minmax(0,1fr) 300px 280px;gap:24px;align-items:center;background:var(--card);border:2px solid var(--line);border-radius:20px;padding:18px 22px}
.tsr .smp{min-width:0;overflow-wrap:anywhere}
.tsr .nm{font-size:18px;font-weight:700;line-height:1.35}
.tsr .nm code{display:block;font-size:16px;font-weight:600;color:var(--sub);margin-top:2px}
.tsr .us{font-size:16px;color:var(--sub);line-height:1.45}
.floor{display:flex;gap:24px;align-items:center;flex-wrap:wrap;border:2.5px solid var(--ic);border-radius:26px;padding:24px 28px}
.floor .n{font-family:Fraunces,Georgia,serif;font-size:96px;line-height:.9;color:var(--ic)}
/* ---------- voice ---------- */
.blurb{background:var(--bg);border:2px solid var(--line);border-radius:20px;padding:16px 18px;margin-top:12px}
.blurb .t{font-family:Fraunces,Georgia,serif;font-size:26px;line-height:1.15}
.blurb .b{font-size:18px;color:var(--sub);margin-top:6px}
.vocab{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:0 24px;margin-top:8px}
.vocab div{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1.5px solid var(--line);font-size:17px}
.vocab div b{font-family:Fraunces,Georgia,serif;font-size:21px;white-space:nowrap}
.vocab div span{color:var(--sub);text-align:right}
.dorow{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.dorow>div{border-radius:18px;padding:14px 16px;font-size:18px;line-height:1.4}
.dorow .y{background:var(--bg);border:2px solid var(--ic)}
.dorow .n{border:2px dashed var(--danger);color:var(--sub)}
.dorow .n s{text-decoration-color:var(--danger)}
.dorow .k2{display:block;font-size:15px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:4px}
.dorow .y .k2{color:var(--ic)}.dorow .n .k2{color:var(--danger)}
/* ---------- specimens ---------- */
.ui{font-family:'Space Grotesk',ui-sans-serif,system-ui,sans-serif;font-size:18px;line-height:normal;color:var(--tx)}
.spec{background:var(--bg);border:2px solid var(--line);border-radius:22px;padding:20px;margin-top:16px;overflow:hidden;position:relative}
.spec.row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.spec.col{display:flex;flex-direction:column;gap:14px}
.stl{font-size:15px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--sub);margin-top:14px}
.stl:first-child{margin-top:0}
.ui .btn.st.fit,.ui .obtn.fit{width:auto;padding:0 34px}
.ui .is-pressed{transform:scale(.97);filter:brightness(.92)}
.ui .is-focus{outline:3px solid var(--ic);outline-offset:2px}
.ui .btn[aria-disabled=true],.ui .btn:disabled{opacity:.5;box-shadow:none;cursor:not-allowed}
.ui .obtn:disabled{opacity:.45;cursor:not-allowed}
.ui .chipb{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:56px;min-width:56px;padding:0 22px;border-radius:28px;font-weight:700;font-size:20px;white-space:nowrap}
.ui .chipb.lime{background:#C6F432;color:#0A1A15;box-shadow:var(--btnsh)}
.ui .chipb.out{border:2.5px solid var(--ic);color:var(--tx)}
.ui .field.is-focus{border-color:var(--ic);outline:0;box-shadow:0 0 0 3px color-mix(in srgb,var(--ic) 30%,transparent)}
.ui .field.is-err{border-color:var(--danger)}
.ui .ferr{font-size:17px;font-weight:600;color:var(--danger);margin:-6px 4px 0}
.ui .hud.st,.ui .toast.st,.ui .strip.st{position:relative;left:auto;right:auto;top:auto;bottom:auto}
.ui .toast.st{animation:none}
.ui .hdr{display:flex;align-items:center;justify-content:space-between;gap:16px}
.ui .hdr.l{justify-content:flex-start}
.ui .bsheet.st{position:relative;border:2px solid var(--line);border-radius:32px}
.toastzone{min-height:92px;display:flex;flex-direction:column;justify-content:center}
.demo-hint{font-size:16px;color:var(--sub)}
/* phone frames */
.frames{display:grid;grid-template-columns:repeat(auto-fill,390px);gap:48px 40px;justify-content:center}
.pf{margin:0;min-width:0}
.phone{position:relative;width:390px;height:844px;border-radius:46px;overflow:hidden;background:var(--bg);box-shadow:0 0 0 10px var(--frame),0 30px 60px rgba(0,0,0,.35);margin:10px;isolation:isolate}
.pf figcaption{margin:26px 10px 0;font-size:17px;color:var(--sub);line-height:1.4}
.pf figcaption b{display:block;font-family:Fraunces,Georgia,serif;font-size:24px;color:var(--tx)}
.map-bg{position:absolute;left:0;right:0;top:-80px;height:868px;background:url(../img/map-hole7.jpg) 50% 0/cover no-repeat;pointer-events:none}
.ui .phone .scroll{scrollbar-width:none}
.ui .layer{position:absolute;inset:0}
.ui .hudc{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:17px;font-weight:600;white-space:nowrap;flex-wrap:wrap;row-gap:4px}
.locdot{position:absolute;z-index:6;width:0;height:0;pointer-events:none}
.locdot::before{content:'';position:absolute;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;background:rgba(56,152,255,.22)}
.locdot::after{content:'';position:absolute;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;background:#3898FF;border:4px solid #F4F2E8;box-shadow:0 2px 8px rgba(0,0,0,.4)}
/* ---------- layout ---------- */
.diag{display:flex;gap:32px;flex-wrap:wrap;align-items:flex-start}
.mini{position:relative;width:195px;height:422px;border-radius:26px;border:2.5px solid var(--line);background:var(--bg);overflow:hidden;flex:none}
.mini .z{position:absolute;left:0;right:0;font-size:15px;font-weight:700;text-align:center;color:var(--sub)}
.mini .mapz{position:absolute;inset:0;background:url(../img/map-hole7.jpg) 50% 40%/cover;opacity:.85}
.mini .sh{position:absolute;left:0;right:0;bottom:0;height:52%;background:var(--bg);border-top:2px solid var(--line);border-radius:22px 22px 0 0;padding:10px 12px}
.mini .dim{position:absolute;inset:0;background:var(--shade)}
.dimtag{display:inline-block;font-size:15px;font-weight:700;color:var(--ic)}
.taps{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.tapbox{display:flex;align-items:center;justify-content:center;border:2.5px dashed var(--ic);border-radius:14px;font-size:15px;font-weight:700;color:var(--tx);text-align:center;line-height:1.2;background:color-mix(in srgb,var(--ic) 10%,transparent)}
.gapm{width:12px;height:56px;background:repeating-linear-gradient(45deg,var(--danger) 0 3px,transparent 3px 7px);opacity:.8;align-self:flex-end}
.spc{display:flex;flex-direction:column;gap:12px}
.spc div{display:grid;grid-template-columns:64px 180px minmax(0,1fr);align-items:center;gap:14px;font-size:17px}
.spc i{max-width:100%}
.spc i{display:block;height:24px;background:var(--ic);border-radius:4px}
.spc code{color:var(--sub);font-size:16px;white-space:nowrap}
.radii{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.radii div{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:15px;font-weight:600;text-align:center;line-height:1.3;color:var(--sub)}
.radii .rb{display:block;height:56px;border:2.5px solid var(--ic);background:var(--card);margin-bottom:4px}
.radii div b{font-family:Fraunces,Georgia,serif;font-size:22px;color:var(--tx)}
.shadows{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:28px}
.shadows div{height:110px;border-radius:24px;background:var(--card);display:flex;align-items:center;justify-content:center;text-align:center;font-size:16px;font-weight:700;padding:10px;line-height:1.3}
.motion{display:flex;flex-direction:column;gap:12px}
.motion div{display:grid;grid-template-columns:200px 1fr;gap:16px;padding:12px 0;border-bottom:1.5px solid var(--line);font-size:17px}
.motion b{font-weight:700}
.mstage{position:relative;height:300px;border-radius:24px;overflow:hidden;border:2px solid var(--line)}
.mstage .shade{position:absolute;inset:0;background:var(--shade)}
.mstage .bsheet{position:absolute;left:0;right:0;bottom:0}
.mstage.replay .bsheet{animation:none}
.mstage.replay .shade{animation:none}
.ctl{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px}
.pbtn,.ui .pbtn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;min-width:56px;padding:0 22px;border-radius:28px;border:2.5px solid var(--ic);background:transparent;color:var(--tx);font-weight:700;font-size:18px;cursor:pointer}
/* ---------- flow ---------- */
.flowgrp{margin-top:40px}
.flowgrp .h3{font-size:28px}
.flowgrp .meta{margin-top:4px}
.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:24px 20px;margin-top:18px}
.thumb{margin:0;min-width:0}
.thumb .tf{border-radius:20px;overflow:hidden;border:3px solid var(--frame);aspect-ratio:360/780;background:var(--card);box-shadow:0 10px 24px rgba(0,0,0,.22)}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb figcaption{margin-top:10px;font-size:17px;font-weight:600;line-height:1.3}
.thumb figcaption b{font-family:Fraunces,Georgia,serif;color:var(--ic);margin-right:6px}
.arrowsep{display:flex;align-items:center;gap:10px;font-size:17px;color:var(--sub);margin-top:16px}
footer.f{border-top:2px solid var(--line);padding:40px 0 64px;font-size:17px;color:var(--sub)}
footer.f b{font-family:Fraunces,Georgia,serif;color:var(--tx);font-size:22px}
/* ---------- responsive ---------- */
@media (max-width:1540px){.themebtn .lbl2{display:none}}
/* 12 nav links: header spans the full width; links tighten and the wordmark text drops before anything scrolls */
@media (min-width:821px){.top .wrap{max-width:none}nav.sec a{padding:0 7px}}
@media (max-width:1600px) and (min-width:821px){.bm>div{display:none}.bm{padding-right:0}}
@media (max-width:1360px) and (min-width:821px){.themebtn{padding:0;width:56px}.themebtn .lbl{display:none}}
@media (max-width:1100px){
 .hero .wrap{grid-template-columns:1fr}
 .hero .logo{max-width:340px;grid-row:1}
 .tsr{grid-template-columns:1fr;gap:10px}
}
@media (max-width:820px){
 :root{--hdr:76px}
 .bm b,.bm span{display:none}
 .bm{padding-right:0}
 .bm img,.bm .nav-mk{width:48px;height:48px}
 .top .wrap{gap:12px;padding:0 12px}
 nav.sec a{padding:0 16px;font-size:16px}
 .themebtn{padding:0 14px;font-size:16px}
 .themebtn .lbl2{display:none}
 section.s{padding:56px 0}
 .hero{padding:40px 0 56px}
 .hero .lead{font-size:21px}
 .subhead{margin:44px 0 16px}
 .subhead .h3{font-size:30px}
 .panel{padding:18px;border-radius:22px}
 .spec{padding:12px;margin-left:-12px;margin-right:-12px}
 .spec .hrow{flex-wrap:wrap;row-gap:12px}
 .spec>.strip{flex-wrap:wrap;row-gap:12px}
 .ui .duo .btn,.ui .duo .obtn{white-space:nowrap;padding-left:8px;padding-right:8px}
 .dorow{grid-template-columns:1fr}
 .frames{display:flex;justify-content:flex-start;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -16px;padding:0 16px 12px;scrollbar-width:thin}
 .pf{flex:0 0 410px;scroll-snap-align:start}
 .frames{scroll-padding:0 16px}
 .pf figcaption{margin:24px 10px 0}
 .swipehint{display:block!important}
 .motion div{grid-template-columns:1fr;gap:2px}
 .fontcard .big{font-size:96px}
 .lockup b{font-size:56px}
 .crow{grid-template-columns:64px minmax(0,1fr);padding:12px}
 .crow .smp{width:64px}
 .crow .ratio{grid-column:2}
 .crow .bds{grid-column:1/-1}
 .thumbs{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 14px}
 .spc div{grid-template-columns:56px 80px minmax(0,1fr);gap:10px}
 .spc code{display:block}
 .radii{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
@media print{.top{position:static}}

.swipehint{display:none;font-size:17px;color:var(--sub);margin:0 0 12px}


/* tempo needle specimen (reuses /workspace/mockups/tempo-needle/src/template.html styles, namespaced .tn-) */
.tn .tn-hint{font-size:17px;color:var(--sub)}
.tn .tn-hero{display:flex;justify-content:center;margin-top:8px}
.tn .tn-hero svg{width:100%;max-width:335px;height:auto;overflow:visible}
.tn svg text{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:16px;fill:var(--sub)}
.tn .tn-beats{position:relative;height:96px;margin:10px 6px 0}
.tn .tn-bt{position:absolute;top:0;display:flex;flex-direction:column;align-items:center;transform:translateX(-50%)}
.tn .tn-dot{width:22px;height:22px;border-radius:50%;border:3px solid var(--line);background:var(--card);transition:background .08s,border-color .08s,transform .08s}
.tn .tn-dot.on{background:var(--ic);border-color:var(--ic);transform:scale(1.3)}
.tn .tn-syl{font-family:Fraunces,Georgia,serif;font-weight:700;font-size:32px;margin-top:8px;line-height:1;color:var(--tx)}
.tn .tn-gl{position:absolute;top:10px;height:3px;background:var(--line);border-radius:2px}
.tn .tn-go{width:100%}
@media (max-width:600px){.tn .tn-syl{font-size:28px}}
/* ---------- 02b Expressions: animated mark cards (driven by brand.js, see cards()) ----------
   Laid out like the Do and don't cards: one flat bordered panel per expression, caption below.
   No CSS transforms / keyframes on the SVG parts on purpose: brand.js writes plain SVG attributes
   (r, opacity, y, height, rx, transform="rotate(a cx cy)" / translate) each frame, which WebKit renders reliably. */
.cm-hd{justify-content:space-between;align-items:center}
.cm-hd .meta{margin-top:6px}
.cm-play{gap:8px;flex:none}
.cm-play svg{width:20px;height:20px}
.cm-note{margin:-8px 0 16px;font-size:15px;color:var(--sub)}
.cm-note[hidden]{display:none}
.cm-grid{display:grid;gap:20px;grid-template-columns:repeat(3,minmax(0,1fr))}
.cm-card{margin:0;min-width:0}
.cm-bg{height:176px;padding:0;background:var(--bg);overflow:hidden}
.cm-svg{display:block;width:112px;height:112px;overflow:visible}
.cm-card figcaption{margin-top:12px;font-size:17px;line-height:1.4}
.cm-card figcaption .bdg{margin-right:6px}
.cm-r{fill:#C6F432}.cm-r1{fill-opacity:.38}.cm-r2{fill-opacity:.2}.cm-r3{fill-opacity:.1}
.cm-rip{stroke:#C6F432}
[data-theme=light] .cm-r{fill:#86A424}[data-theme=light] .cm-r1{fill-opacity:.5}[data-theme=light] .cm-r2{fill-opacity:.3}[data-theme=light] .cm-r3{fill-opacity:.15}
[data-theme=light] .cm-rip{stroke:#86A424}
.cm-play{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
@media (max-width:820px){.cm-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.cm-bg{height:140px;border-radius:22px}.cm-svg{width:100px;height:100px}
 .cm-card figcaption{font-size:16px;margin-top:10px}.cm-card figcaption .bdg{display:flex;width:max-content;margin:0 0 6px}}
:root,[data-theme=dark]{--mo-ring:#C6F432;--o1:.38;--o2:.2;--o3:.1}
[data-theme=light]{--mo-ring:#86A424;--o1:.5;--o2:.3;--o3:.15}
/* ---------- 02c/02d Beyond the app: Salvo Caddy + Salvo Marker. One border per stack: inner pieces use fills, never boxes. ---------- */
.bx-hero{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:center}
.bx-heromark{position:relative;width:280px;padding-top:30px}
.bx-heromark .bx-bub{position:absolute;top:0;right:-6px}
.bx-bub{background:#C6F432;color:#0A1A15;font-family:Fraunces,Georgia,serif;font-weight:700;font-size:22px;line-height:1;padding:10px 16px;border-radius:20px 20px 20px 6px;white-space:nowrap;box-shadow:0 6px 18px rgba(0,0,0,.18)}
.bx-bub-lg{font-size:30px;padding:14px 22px;border-radius:26px 26px 26px 8px}
.bx-heropuck{width:260px;text-align:center}
.bx-puck{display:block;width:100%;height:auto;overflow:visible}
.bx-tbd{margin:10px 0 0;font-size:15px;font-weight:700;color:var(--sub);letter-spacing:.02em}
.bx-acts>div{padding:14px 0;border-top:2px solid var(--line)}
.bx-acts>div:last-child{border-bottom:2px solid var(--line)}
.bx-acts b{display:block;font-family:Fraunces,Georgia,serif;font-size:26px;line-height:1.15}
.bx-acts span{display:block;font-size:17px;color:var(--sub);line-height:1.45;margin-top:4px}
.bx-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.bx-steps li{position:relative;background:var(--card);border:2px solid var(--line);border-radius:26px;padding:22px}
.bx-n{position:absolute;top:18px;right:22px;font-family:Fraunces,Georgia,serif;font-weight:700;font-size:28px;color:var(--ic)}
.bx-sico{display:block;width:76px;height:76px;stroke:var(--ic)}
.bx-sico .bx-fillic{fill:var(--ic);stroke:none}
.bx-steps b{display:block;font-family:Fraunces,Georgia,serif;font-size:26px;margin-top:10px}
.bx-steps span:not(.bx-n){display:block;font-size:17px;color:var(--sub);line-height:1.45;margin-top:6px}
.bx-chat-wrap{display:grid;grid-template-columns:200px minmax(0,1fr);gap:28px;align-items:end;background:var(--card);border:2px solid var(--line);border-radius:26px;padding:24px}
.bx-chatmark .bx-mk{width:200px}
.bx-chat{display:flex;flex-direction:column;gap:12px}
.bx-chat p{margin:0;max-width:min(100%,520px);font-size:20px;line-height:1.35;padding:14px 20px}
.bx-me{align-self:flex-end;background:var(--bg);border-radius:22px 22px 6px 22px}
.bx-him{align-self:flex-start;background:#C6F432;color:#0A1A15;font-weight:700;border-radius:22px 22px 22px 6px}
.bx-say{display:flex;gap:14px;align-items:baseline;padding:12px 0;border-top:2px solid var(--line)}
.bx-say:first-child{border-top:0}
.bx-say p{margin:0;font-size:19px;line-height:1.4}
.bx-say .bdg{flex:none}
.bx-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.bx-th{background:var(--bg);color:var(--tx);border-radius:26px;padding:20px;min-width:0}
.bx-hcard{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:18px;align-items:center;background:var(--card);border:2px solid var(--line);border-radius:26px;padding:16px 18px;margin-top:14px}
.bx-hart{position:relative;width:150px;height:112px;background:var(--bg);border-radius:20px;overflow:hidden}
.bx-hmark{position:absolute;left:-6px;bottom:-14px;width:104px}
.bx-hart .bx-bub{position:absolute;right:8px;top:12px}
.bx-hart-m svg{display:block;width:100%;height:100%}
.bx-htx b{display:block;font-family:Fraunces,Georgia,serif;font-size:24px;line-height:1.15}
.bx-htx span{display:block;font-size:17px;color:var(--sub);line-height:1.4;margin-top:4px}
.bx-conn{display:inline-flex;align-items:center;background:var(--info);color:var(--infotx);border-radius:12px;padding:8px 14px;font-size:15px;font-weight:700;letter-spacing:.06em;pointer-events:none;white-space:nowrap}
.bx-states{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.bx-st{margin:0;background:var(--card);border:2px solid var(--line);border-radius:26px;padding:18px}
.bx-stm{background:var(--bg);border-radius:18px;display:flex;justify-content:center;padding:4px}
.bx-stm .bx-mk{width:150px}
.bx-st b{display:block;font-family:Fraunces,Georgia,serif;font-size:24px;margin-top:14px}
.bx-sta{display:flex;align-items:center;min-height:56px;margin:10px 0 6px}
.bx-st figcaption>span{display:block;font-size:17px;color:var(--sub);line-height:1.45}
.bx-wait{display:inline-flex;gap:10px;align-items:center;height:56px}
.bx-wait i{width:14px;height:14px;border-radius:50%;background:var(--ic);opacity:.35}
.bx-bars{display:inline-flex;gap:8px;align-items:center;height:56px}
.bx-bars i{width:9px;height:34px;border-radius:5px;background:var(--ic);transform:scaleY(.5)}
.bx-bars i:nth-child(2),.bx-bars i:nth-child(3){transform:scaleY(.8)}
.bx-pbox{text-align:center;padding:10px 0 6px}
.bx-pbox .bx-puck{width:min(100%,240px);margin:0 auto}
.bx-pr{fill:var(--mo-ring)}.bx-pr1{fill-opacity:var(--o1)}.bx-pr2{fill-opacity:var(--o2)}.bx-pr3{fill-opacity:var(--o3)}
.bx-pulse{fill:none;stroke:var(--mo-ring);stroke-width:4;opacity:0;transform-box:fill-box;transform-origin:center;vector-effect:non-scaling-stroke}
.bx-waves{stroke:var(--ic)}
.bx-flag{stroke:var(--ic);fill:var(--ic)}
.bx-flag .bx-flagf{stroke:none}
.bx-spec dl{margin:0}
.bx-spec dl>div{display:grid;grid-template-columns:280px minmax(0,1fr);gap:16px;padding:14px 0;border-top:2px solid var(--line)}
.bx-spec dl>div:first-child{border-top:0}
.bx-spec dt{font-size:17px;font-weight:700;color:var(--sub)}
.bx-spec dd{margin:0;font-size:18px;line-height:1.45}
.bx-spec dd.tbd,.bx-tbdk{color:var(--ic);font-weight:700;letter-spacing:.08em}
.bx-sec .subhead .bdg{align-self:center}
@media (max-width:1100px){.bx-states{grid-template-columns:repeat(2,minmax(0,1fr))}.bx-pair{grid-template-columns:1fr}.bx-steps{grid-template-columns:1fr}
 .bx-steps li{display:grid;grid-template-columns:76px 1fr;column-gap:18px;align-items:start}.bx-steps li .bx-sico{grid-row:1/3}.bx-steps b{margin-top:0}}
@media (max-width:820px){.bx-hero{grid-template-columns:1fr}.bx-heromark{width:220px;margin:0 auto}.bx-heropuck{width:220px;margin:0 auto}
 .bx-chat-wrap{grid-template-columns:1fr;padding:18px}.bx-chatmark .bx-mk{width:120px}.bx-chat p{font-size:19px}
 .bx-hcard{grid-template-columns:auto minmax(0,1fr);padding:14px}.bx-hact{grid-column:1/-1}.bx-hart{width:120px;height:96px}.bx-hmark{width:86px}.bx-hart .bx-bub{font-size:19px;padding:7px 12px;right:4px;top:8px}
 .bx-th{padding:14px}.bx-spec dl>div{grid-template-columns:1fr;gap:4px}.bx-say{flex-direction:column;gap:6px}}
@media (max-width:560px){.bx-states{grid-template-columns:1fr}.bx-steps li{grid-template-columns:56px 1fr}.bx-sico{width:56px;height:56px}}
/* motion for the extra marks and art: same gating as 02b (only while running; Play overrides reduced motion) */
/* Caddy + Marker animation: always autoplays (not tied to Motion's Play button). Every animated part uses
   transform-box:fill-box + transform-origin:center, never pixel origins or view-box boxes (Safari-safe).
   Reduced motion gets a gentle, opacity-only version further down instead of a frozen page. */
.bx-mk{display:block;width:100%;height:auto;overflow:visible}
.bx-mk :is(.bx-r,.bx-rings,.bx-rip,.bx-gaze,.bx-eye,.bx-bl){transform-box:fill-box;transform-origin:center} /* only the animated groups: a CSS origin would also move the artwork's own transform="rotate(..)" attributes */
.bx-r{fill:var(--mo-ring)}.bx-r1{fill-opacity:var(--o1)}.bx-r2{fill-opacity:var(--o2)}.bx-r3{fill-opacity:var(--o3)}
.bx-rip{fill:none;stroke:var(--mo-ring);stroke-width:6;opacity:0;vector-effect:non-scaling-stroke}
.bx-bars i{transform-origin:center}
.bx-mk[data-state=resting] .bx-bl{transform:scaleY(.14)}
.bx-mk[data-state=resting] .bx-rings{opacity:.5}
.bx-mk[data-state=thinking] .bx-gaze{transform:translate(-10px,-6px)}
.bx-mk[data-state=helping] .bx-gaze{transform:translate(12px,2px)}
.bx-sec .bx-r{animation:bx-breath 4s ease-in-out infinite}
.bx-sec .bx-r2{animation-delay:.3s}.bx-sec .bx-r3{animation-delay:.6s}
.bx-sec .bx-mk[data-state=chill] .bx-bl,.bx-sec .bx-mk[data-state=ontime] .bx-bl{animation:bx-blink 7s ease-in-out infinite}
.bx-sec .bx-mk[data-state=ontime] .bx-rip{animation:bx-rip 2.8s ease-out infinite}
.bx-sec .bx-mk[data-state=resting] .bx-r{animation-duration:6s}
.bx-sec .bx-mk[data-state=thinking] .bx-gaze{animation:bx-think 4s ease-in-out infinite}
.bx-sec .bx-mk[data-state=thinking] .bx-rings{animation:bx-swell 4s ease-in-out infinite}
.bx-sec .bx-mk[data-state=helping] .bx-gaze{animation:bx-glance 3.2s ease-in-out infinite}
.bx-sec .bx-pulse{animation:bx-pulse 4s ease-out infinite}
.bx-sec .bx-waves path{animation:bx-wave 2.4s ease-in-out infinite}
.bx-sec .bx-waves .bx-w2{animation-delay:.3s}.bx-sec .bx-waves .bx-w3{animation-delay:.6s}
.bx-sec .bx-wait i{animation:bx-dot 1.8s ease-in-out infinite}
.bx-sec .bx-wait i:nth-child(2){animation-delay:.3s}.bx-sec .bx-wait i:nth-child(3){animation-delay:.6s}
.bx-sec .bx-bars i{animation:bx-bar 1.6s ease-in-out infinite}
.bx-sec .bx-bars i:nth-child(2){animation-delay:.2s}.bx-sec .bx-bars i:nth-child(3){animation-delay:.4s}.bx-sec .bx-bars i:nth-child(4){animation-delay:.6s}
@keyframes bx-breath{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.03);opacity:1}}
@keyframes bx-blink{0%,46%,50%,100%{transform:scaleY(1)}48%{transform:scaleY(.1)}}
@keyframes bx-rip{0%,14%{opacity:0;transform:scale(1)}17%{opacity:.9;transform:scale(1.02)}55%,100%{opacity:0;transform:scale(1.68)}}
@keyframes bx-think{0%,8%,92%,100%{transform:translate(0,0)}24%,76%{transform:translate(-10px,-6px)}}
@keyframes bx-swell{0%,100%{transform:scale(1)}45%{transform:scale(1.05)}}
@keyframes bx-glance{0%,6%,90%,100%{transform:translate(0,0)}24%,70%{transform:translate(12px,2px)}}
@keyframes bx-soft{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes bx-pulse{0%,20%{opacity:0;transform:scale(1)}25%{opacity:.8;transform:scale(1.02)}75%,100%{opacity:0;transform:scale(2.1)}}
@keyframes bx-wave{0%,100%{opacity:.25}40%{opacity:1}}
@keyframes bx-dot{0%,100%{opacity:.3}50%{opacity:1}}
@keyframes bx-bar{0%,100%{transform:scaleY(.4)}50%{transform:scaleY(1)}}
/* ---------- Forms: one flat card, fields sit on it (no boxes inside boxes) ---------- */
.ff{background:var(--card);border:2px solid var(--line);border-radius:26px;padding:0 22px;overflow:hidden;margin-top:12px}
.ff .fr{display:block;position:relative;margin:0 -22px;padding:12px 22px 6px;min-height:76px;border-top:1.5px solid color-mix(in srgb,var(--line) 70%,transparent);cursor:text}
.ff .fr:first-child{border-top:0}
.ff .fr .k{display:block;font-size:15px;letter-spacing:.08em;font-weight:700;color:var(--sub);text-transform:uppercase}
.ff .fr input{display:block;width:100%;height:56px;border:0;background:transparent;padding:0;font:600 22px/1.2 'Space Grotesk',ui-sans-serif,system-ui,sans-serif;color:var(--tx);outline:0}
.ui .ff .fr.is-focus,.ff .fr:focus-within{outline:0;background:color-mix(in srgb,var(--ic) 10%,transparent);box-shadow:inset 0 -3px 0 var(--ic)}
.ff .fr.is-err{box-shadow:inset 0 -3px 0 var(--danger)}
.ui .ff .ferr{display:block;margin:0 0 10px;font-size:17px}
.ff-go{margin-top:16px;width:100%}
/* ---------- One card, one border: inner pieces use fills, hairlines or space, never a second box ---------- */
.spec,.blurb,.mo-stage,.panel .bgpanel,.crow{border-color:transparent}
.dorow .y,.dorow .n{border:0;border-left:6px solid var(--ic);border-radius:6px 20px 20px 6px}
.dorow .n{border-left-color:var(--danger)}
.mini div:not(.sh){border-color:transparent!important}
.mini div[style*="dashed"]{background:color-mix(in srgb,var(--ic) 14%,transparent)}
.bgpanel:has(.av){border-color:transparent}

/* reduced motion: gentle, opacity-only loops (beats the page-wide animation:none via specificity) */
@media (prefers-reduced-motion:reduce){
 .bx-sec .bx-mk .bx-r,.bx-sec .bx-mk .bx-rings,.bx-sec .bx-mk .bx-gaze,.bx-sec .bx-mk .bx-bl,.bx-sec .bx-mk .bx-rip{animation:none!important}
 .bx-sec .bx-mk .bx-rings{animation:bx-soft 6s ease-in-out infinite!important}
 .bx-sec .bx-mk[data-state=resting] .bx-rings{animation:none!important}
 .bx-sec svg .bx-pulse{animation:none!important;opacity:0}
 .bx-sec svg .bx-pr1{animation:bx-soft 6s ease-in-out infinite!important}
 .bx-sec .bx-waves path{animation:bx-wave 4s ease-in-out infinite!important}
 .bx-sec .bx-waves .bx-w2{animation-delay:.6s!important}.bx-sec .bx-waves .bx-w3{animation-delay:1.2s!important}
 .bx-sec .bx-wait i{animation:bx-dot 3s ease-in-out infinite!important}
 .bx-sec .bx-wait i:nth-child(2){animation-delay:.5s!important}.bx-sec .bx-wait i:nth-child(3){animation-delay:1s!important}
 .bx-sec .bx-bars i{animation:bx-dot 3s ease-in-out infinite!important}
 .bx-sec .bx-bars i:nth-child(2){animation-delay:.4s!important}.bx-sec .bx-bars i:nth-child(3){animation-delay:.8s!important}.bx-sec .bx-bars i:nth-child(4){animation-delay:1.2s!important}}

/* ================= SEPARATION LADDER (brand page) =================
   1 one outline per surface (the outermost panel/card, or none)  2 inside: tonal fill step >=1.15:1 + 8-12px gaps
   3 lists/rows/tables: hairlines  4 selected: ONE emphasis  5 outlines only for tappable secondary buttons + focus
   6 groups: 24px + small-caps caption.  Panel fill tones are mixes of the locked palette (Forest into Pine; Straw into Sand). */
:root,[data-theme=dark]{--pfill:#142C24}
[data-theme=light]{--pfill:#E3DEC6}
.panel{background:var(--pfill)}
/* panels holding an outlined specimen (measuring aids, device frames, logo backgrounds) drop their own edge */
.panel:has(.cs,.mini,.tapbox,.rb,.mstage,.spec .card),.panel.sr{border-color:transparent}
/* spec stages: fill only */
.spec,.spec.ui.col{border:0;background:var(--bg);border-radius:22px}
.stl{margin-top:24px}
/* badges: fill tint; fails/don'ts as red text with a cross */
.bdg.no,.bdg.no.v{border:0;background:none;padding:4px 0;color:var(--danger)}
.bdg.na{border:0;background:color-mix(in srgb,var(--line) 45%,transparent);color:var(--tx);padding:4px 10px}
/* copy chips: plain hex text + copy icon (still a 56px tap) */
.copy{border:0;background:none;padding:0 8px;margin-left:-8px;border-radius:14px;gap:10px}
.copy code{color:var(--tx);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--ic) 55%,transparent);text-decoration-thickness:2px;text-underline-offset:5px}
.copy .cl{display:none}
.copy.done .cl{display:inline}
.copy.done{border:0;background:color-mix(in srgb,var(--ic) 14%,transparent)}
.copy:focus-visible{outline:3px solid var(--ic);outline-offset:2px}
/* contrast table: hairline rows */
.ctable{gap:0;border-top:1px solid var(--hair)}
.crow{background:none;border:0;border-bottom:1px solid var(--hair);border-radius:0;padding:14px 4px}
/* voice: hairline rows with a coloured left bar */
.blurb{background:none;border:0;border-left:4px solid var(--ic);border-bottom:1px solid var(--hair);border-radius:0;padding:10px 0 12px 16px;margin-top:12px}
.dorow{margin-top:0;padding:12px 0;border-bottom:1px solid var(--hair)}
.dorow .y{background:none}
/* tappable demo buttons: tinted fill, no ring (the Connect button stays an outlined secondary) */
.pbtn,.ui .pbtn{border:0;background:color-mix(in srgb,var(--ic) 18%,transparent)}
.pbtn.bx-cbtn,.ui .pbtn.bx-cbtn{border:2.5px solid var(--ic);background:transparent}
.pbtn:focus-visible{outline:3px solid var(--ic);outline-offset:2px}
/* score tiles + HUD inside a spec: one fill bar */
.spec .hud.st{background:var(--step);box-shadow:none}
.spec .t{background:var(--step)}
/* expression cards: fill tiles, no border */
.cm-bg,.panel .cm-bg{border:0;background:var(--pfill)}
/* Caddy / Marker: home card and state cards are fills (the outlined Connect is the one ring) */
.bx-hcard{border:0;background:var(--step)}
.bx-st{border:0;background:var(--pfill)}
.bx-say{border-top:1px solid var(--hair)}
.bx-spec dl>div{border-top:1px solid var(--hair)}
/* forms inside a tile: the form is a fill, rows split by hairlines */
.ff{border:0;background:var(--step)}
.ff .fr{border-top:1px solid var(--hair)}
.ui .bsheet.st{border:0;border-top:2px solid var(--line)}
.avatar-demo .av{border:0}
/* ---- Separation rule specimen ---- */
.sr-lead{font-size:20px;color:var(--sub);line-height:1.4;max-width:900px;margin:0}
.sr-ex{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:24px}
.sr-x{margin:0;min-width:0}
.sr-x figcaption{margin-top:12px}
.sr-x figcaption b{display:block;font-family:Fraunces,Georgia,serif;font-size:24px;line-height:1.15}
.sr-x.bad figcaption b{color:var(--danger)}.sr-x.good figcaption b{color:var(--ic)}
.sr-x figcaption span{display:block;font-size:16px;color:var(--sub);line-height:1.4;margin-top:4px}
.sr-demo{background:var(--bg);border-radius:22px;padding:18px;min-height:150px;box-sizing:border-box}
.sr-demo .cap{display:block;margin:0;font-size:15px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--sub)}
.sr-row{display:flex;gap:10px;margin-top:10px}
.sr-chip{flex:1;height:52px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-family:Fraunces,Georgia,serif;font-weight:700;font-size:22px;color:var(--tx)}
.sr-demo.blend .sr-row{gap:0}.sr-demo.blend .sr-chip{background:var(--bg);border-radius:0}
.sr-demo.blend .sr-chip.on{background:color-mix(in srgb,var(--bg) 88%,var(--tx))}
.sr-demo.many{border:2px solid var(--line)}
.sr-demo.many .sr-in{border:2px solid var(--line);border-radius:16px;padding:8px}
.sr-demo.many .sr-row{margin-top:0}
.sr-demo.many .sr-chip{border:2px solid var(--line)}
.sr-demo.many .sr-chip.on{border-color:var(--ic);box-shadow:0 0 0 3px color-mix(in srgb,var(--ic) 35%,transparent)}
.sr-demo.ok{border-top:2px solid var(--line)}
.sr-demo.ok .sr-chip{background:var(--step)}
.sr-demo.ok .sr-chip.on{background:var(--selfill);color:var(--seltx)}
.sr-k{display:block;margin-top:32px;font-size:15px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--sub)}
.sr-list{list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px;border-top:1px solid var(--hair)}
.sr-r{display:flex;gap:16px;align-items:center;padding:14px 0;border-bottom:1px solid var(--hair);min-width:0}
.sr-n{font-family:Fraunces,Georgia,serif;font-weight:700;font-size:32px;color:var(--ic);width:30px;flex:none;text-align:center}
.sr-t{flex:1;min-width:0}
.sr-t b{display:block;font-size:19px;line-height:1.25}
.sr-t span{display:block;font-size:16px;color:var(--sub);line-height:1.35;margin-top:3px}
.sr-v{flex:none;width:118px;height:76px;border-radius:12px;background:var(--bg);display:flex;align-items:center;justify-content:center;gap:8px;position:relative;overflow:hidden}
.sr-m{display:block;width:30px;height:30px;border-radius:8px;background:var(--step);position:relative}
.sr-m.on{background:var(--selfill)}
.sr-m.ul::after{content:'';position:absolute;left:6px;right:6px;bottom:4px;height:3px;border-radius:2px;background:var(--mark)}
.sr-v.v1{box-shadow:inset 0 0 0 2px var(--line)}
.sr-v.v2{background:var(--card)}
.sr-v.v3{flex-direction:column;gap:0;padding:0 12px}
.sr-v.v3 i{display:block;width:100%;height:24px;border-bottom:1px solid var(--line)}.sr-v.v3 i:last-child{border:0}
.sr-ring{display:flex;align-items:center;justify-content:center;width:84px;height:34px;border-radius:17px;box-shadow:inset 0 0 0 2px var(--ic);font-style:normal;font-family:Fraunces,Georgia,serif;font-weight:700;font-size:15px;color:var(--tx)}
.sr-v.v6{flex-direction:column;align-items:flex-start;gap:4px;padding:0 12px}
.sr-v.v6>span{display:flex;gap:6px}.sr-v.v6 .sr-m{height:18px}
.sr-cap{font-style:normal;font-size:15px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--sub)}
.sr-foot{margin-top:20px}
.sr .demo-hint{margin-top:8px}
@media (max-width:1000px){.sr-ex{grid-template-columns:1fr;gap:20px}.sr-list{grid-template-columns:1fr}}
@media (max-width:560px){.sr-r{gap:12px;flex-wrap:wrap;align-items:flex-start}.sr-t{flex:1 1 calc(100% - 42px)}.sr-v{width:156px;height:64px;margin-left:42px}}

/* ---- Dimples before / after (Logo > Expressions): one fill tile, no border; group = 24px + small-caps caption ---- */
.cm-dim{margin:24px 0 0;max-width:520px;min-width:0}
.cm-dimk{font-size:15px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ic);margin:0 0 10px}
.cm-dimbg{background:var(--pfill);border:0;border-radius:22px;padding:12px;display:grid;gap:10px}
.cm-dimrow{display:grid;grid-template-columns:72px minmax(0,1fr);gap:10px;align-items:center;min-width:0}
.cm-diml{font-size:15px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--sub)}
.cm-dimrow img{display:block;width:100%;height:auto;max-width:500px}
.cm-dim figcaption{margin-top:12px;font-size:17px;line-height:1.4}
@media (max-width:820px){.cm-dim{max-width:none}.cm-dimrow{grid-template-columns:minmax(0,1fr);gap:8px}.cm-dim figcaption{font-size:16px;margin-top:10px}}
/* d1950 separation-ladder fixes (whole page, both themes) */
.spec .strip .t,.spec .scbtn .t,.ui .spec .strip .t{background:var(--step)}   /* score tiles were Pine/Cream glass on the same stage: 1.09 dark, 1.00 light */
.shadows{gap:12px}                                                            /* was 28px: sibling tiles 8-12px */
.shadows div{background:var(--bg)}                                 /* was Sand/Pine on panel fill: 1.11/1.06, now 1.21/1.20 */
.sr-v.v2{background:var(--bg)}                                                /* "tonal step" specimen itself only stepped 1.11/1.06 */
.bx-th .bx-hcard{margin-top:12px}       /* hcards were 14px apart */
.spec.col{gap:12px}                                                           /* fields and toasts were 14px apart */
/* e1950: home-card art is a dark ink stage in both themes (the lifted off-palette cream is gone). Light gets the dark art tokens so the
   mark, rings and Marker waves read exactly as in dark. Lime bubble on ink 13.99, ink art vs light step card #DDD8BF 12.50. */
.bx-th[data-theme=light] .bx-hart{background:#0A1A15;--ic:#C6F432;--mo-ring:#C6F432;--o1:.38;--o2:.2;--o3:.1}
/* e1950: Shadows primary tile = dark ink stage (#0A1A15) holding a Lime pill with --btnsh. Lime on the light panel fill was 1.06.
   Stage vs panel: 13.26 light (#E3DEC6), 1.21 dark (#142C24); Lime pill vs stage 13.99. No border, one fill step. */
.shadows .sh-stage{background:#0A1A15;color:#F4F2E8;flex-direction:column;gap:10px}
.shadows .sh-pill{display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border-radius:22px;background:#C6F432;color:#0A1A15;font-size:16px;font-weight:700;box-shadow:var(--btnsh)}
.shadows .sh-stage code{font-size:15px;color:#F4F2E8;background:none}