/* ===== full-site additions: nav phone, under-browser note, proof row, full footer, legal pages, dialogs, Alex launcher ===== */
.nav-phone{display:none;font:500 14px/1 var(--font-mono);letter-spacing:.02em}
.nav-phone:hover{color:var(--hivis-text)}
.nav-signin{display:none;font:500 14px/1 var(--font-mono);letter-spacing:.02em}
.nav-signin:hover{color:var(--hivis-text)}
@media(min-width:720px){.nav-phone{display:inline}.nav-signin{display:inline}}
/* SITE-REQUEST-FORM: quiet nav button beside Text us at >=720; below that it drops out of the
   nav (its .boc-btn base is inline-flex) and lives only in the hamburger menu instead
   (site.js menuBtn list), matching the DECLARE's ">=720 / <720" split. */
.nav-request{display:none}
@media(min-width:720px){.nav-request{display:inline-flex}}
.mock{right:auto;left:12px}
body[data-page="terms"] #home,body[data-page="privacy"] #home{display:none}
body[data-page="home"] #legal{display:none}

/* the line under the price journey */
.more{padding:var(--space-16) var(--space-6) 0;text-align:center}
.more a{font:600 18px/28px var(--font-sans);color:var(--hivis-text);text-decoration:underline;text-underline-offset:5px}
.more p{margin:var(--space-3) auto 0;max-width:560px;color:var(--ink-muted)}

/* MS1 (PLAN-TRADE-PAGES-2026-09-27.md): the six trade pages reuse .legal-head for their banner
   and .prose for body typography (both already carried by terms/privacy) but have no
   table-of-contents column, so .legal-body's 240px+720px grid would starve a single article of
   room — this is a plain single-column wrapper instead, same max content width, same tokens. */
.trade-body{max-width:760px;margin:0 auto;padding:var(--space-8) var(--space-6) var(--space-24)}
.trade-table{width:100%;border-collapse:collapse;margin:var(--space-3) 0 var(--space-8);font-size:15px}
.trade-table caption{text-align:left;caption-side:top;font:600 18px/28px var(--font-sans);margin:0 0 var(--space-3);color:var(--ink)}
.trade-table th,.trade-table td{text-align:left;padding:var(--space-2) var(--space-3);border-bottom:1px solid var(--line);vertical-align:top}
.trade-table th{font:500 12px/16px var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-muted)}
.trade-table td.range{white-space:nowrap;font-weight:600}
.trade-table td.typical{color:var(--ink-muted);white-space:nowrap}
.town-list{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-4);list-style:none;margin:var(--space-2) 0 var(--space-6);padding:0;font-size:15px}
.town-list li{padding:var(--space-1) var(--space-3);border:1px solid var(--line);border-radius:var(--radius-pill);background:var(--surface)}
@media(max-width:720px){.trade-table{font-size:14px}.trade-table th,.trade-table td{padding:var(--space-1) var(--space-2)}}

/* MS1: the homepage's small "browse by trade" links row, added below the closing scene/footer —
   plain text links, same muted/hivis link colours the footer and .prose already use. */
.trade-links{max-width:1120px;margin:0 auto;padding:var(--space-6) var(--space-6) var(--space-16);display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-5);justify-content:center;font-size:14px}
.trade-links a{color:var(--ink-muted);text-decoration:underline;text-underline-offset:4px}
.trade-links a:hover{color:var(--hivis-text)}
@media(max-width:720px){.trade-links{padding:var(--space-4) var(--space-4) var(--space-12);gap:var(--space-2) var(--space-4);font-size:13px}}

/* proof: three plain numbers on the ground, no cards */
.proof{padding:var(--space-24) var(--space-6)}
.proof h2{margin:0 auto;max-width:16ch;text-align:center;text-transform:uppercase;text-wrap:balance}
.proof h2 em,.legal-head h1 em{font-style:normal;color:var(--hivis-text)}
.proof-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));max-width:1120px;margin:var(--space-16) auto 0}
.proof-grid>div{padding:var(--space-2) var(--space-8) 0;border-left:1px solid var(--line)}
.proof-grid>div:first-child{border-left:0;padding-left:0}
.proof-num{font:800 112px/0.9 var(--font-display);letter-spacing:-.01em;color:var(--ink)}
.proof-num em{font-style:normal;font-size:.5em;color:var(--hivis-text);margin-left:.06em}
.proof-grid p{margin:var(--space-4) 0 0;font-size:18px;line-height:28px;max-width:30ch}
.trust{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-3) var(--space-8);max-width:1120px;margin:var(--space-16) auto 0;padding:var(--space-6) 0 0;border-top:1px solid var(--line);font:500 13px/20px var(--font-mono);letter-spacing:.04em;text-transform:uppercase}
.trust span{display:inline-flex;align-items:center;gap:var(--space-2)}
.trust .boc-icon{color:var(--ok)}
@media(max-width:820px){.proof{padding:var(--space-16) var(--space-4)}.proof-grid{grid-template-columns:1fr;margin-top:var(--space-12)}.proof-grid>div{border-left:0;border-top:1px solid var(--line);padding:var(--space-6) 0}.proof-grid>div:first-child{border-top:0}.proof-num{font-size:88px}.trust{justify-content:flex-start}}
/* SITE-V35 repair 3 (verdict 3ae962d, cascade reversal): site.css loads AFTER boc.css, so any
   selector defined in both always resolves here regardless of which file states it first or which
   is newer in source history — the v21-v35 carry appended to boc.css was silently losing every one
   of these ties. `grid-template-columns:1fr` above is left alone (boc.css's own <=720 block never
   sets it, so there is no tie to lose — removing it would drop the single-column phone layout
   entirely); every OTHER property the 820px rule above shares with boc.css's <=720 phone-scale
   block is re-asserted here at the narrower, more-specific breakpoint so it wins. Found by a full
   computed-style diff against design/site-mock-v35.html at 390 (not just the four the verdict
   named) — the earlier partial fix (proof-num, proof-grid p only) still left the page 320px too
   long; this covers the rest of what padding/margin-top/heading-size mismatch was doing. No
   !important anywhere — ordinary cascade order, the same mechanism that caused the bug. */
@media(max-width:720px){
  .proof{padding:var(--space-12) var(--space-4)}
  .proof-grid{margin-top:var(--space-8)}
  .proof-grid>div{padding:var(--space-4) 0}
  .proof-num{font-size:52px}
  .proof-grid p{font-size:15px;line-height:23px}
  .proof h2,.legal-head h1{font-size:28px;line-height:.98}
  .more{padding-top:var(--space-8)}
  .more a{font-size:16px}
  .trust{margin-top:var(--space-8)}
}

/* closing scene carries the whole footer on one pane of glass */
.boc-closing-in .or{margin:var(--space-4) 0 0;text-shadow:0 0 4px var(--sky-low),0 0 18px var(--sky-low)}
.boc-closing-in .or a{text-decoration:underline;text-underline-offset:4px}
.boc-closing-foot.site-foot{width:min(1120px,calc(100% - 2*var(--space-4)));display:grid;grid-template-columns:1.5fr 1fr 1fr .7fr 1fr;gap:var(--space-8);align-items:start;justify-content:stretch;text-align:left;padding:var(--space-8);border-radius:var(--radius-lg);font-size:14px;line-height:22px}
.site-foot h3{margin:0 0 var(--space-3);font:500 12px/16px var(--font-mono);letter-spacing:.08em;text-transform:uppercase}
.site-foot p{margin:var(--space-3) 0 0;max-width:30ch}
.site-foot ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-2)}
.site-foot a:hover,.site-foot button:hover{color:var(--hivis-text)}
.site-foot button{all:unset;cursor:pointer;color:inherit}
.site-foot button:focus-visible,.site-foot a:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.site-foot .legal-line{grid-column:1/-1;margin:0;padding-top:var(--space-4);border-top:1px solid var(--glass-line);max-width:none;font-size:13px}
/* REPAIR 4: narrowed off <=720 -- the phone-tier override above (inside @media(max-width:720px))
   sat EARLIER in this file than this 900px rule, so this rule's padding/gap (tablet values) was
   winning at <=720 too by source-order tie-break, the same class of bug as repair 3, just on a
   selector repair 3's sweep missed. grid-template-columns:1fr 1fr stays for the whole <=900 range
   (boc.css's own <=720 rule never sets it, so there's no tie to lose there). */
@media(max-width:900px){.boc-closing-foot.site-foot{grid-template-columns:1fr 1fr}.site-foot .brand{grid-column:1/-1}}
@media(max-width:900px) and (min-width:721px){.boc-closing-foot.site-foot{gap:var(--space-6);padding:var(--space-6)}}
/* REPAIR 4 (verdict 85570ea check 1 (A)): must sit AFTER every other `.boc-closing-foot.site-foot`
   rule in this file (the base rule two rules above is unconditional and, despite being outside any
   @media, still wins ties by SOURCE ORDER against an earlier narrower rule — the exact trap that
   made the first attempt at this fix a no-op: it sat inside the <=720 block near the top of this
   file, before the base rule, and the base rule's later position beat it even though its own
   condition didn't match at 390px). Restates boc.css's already-correct v35 phone value. */
@media(max-width:720px){
  .boc-closing-foot.site-foot{padding:var(--space-5) var(--space-4);font-size:13px;line-height:20px;gap:var(--space-4)}
  .site-foot .boc-wordmark{font-size:24px}
}

/* CP6b: step text one step larger on phones (StepStack body-lg is 18px everywhere by default).
   SITE-V35 repair 3: narrowed off the <=720 phone tier, which v35's own phone-scale block
   (boc.css) now owns at 17px — this rule used to win that tie too (cascade order, see above). */
@media(max-width:900px) and (min-width:721px){.boc-step-copy .body-lg{font-size:20px;line-height:30px}}

/* legal pages: a band of the same sky, then a quiet reading column */
.legal-head{padding:calc(var(--space-24) + var(--space-12)) var(--space-6) var(--space-16);text-align:center;background:linear-gradient(var(--sky-upper),var(--sky-low) 62%,var(--ground))}
.legal-head h1{margin:var(--space-3) 0 0;text-transform:uppercase}
.legal-head .label{text-transform:uppercase}
.legal-body{display:grid;grid-template-columns:240px minmax(0,720px);gap:var(--space-16);justify-content:center;padding:var(--space-8) var(--space-6) var(--space-24)}
.legal-toc{position:sticky;top:96px;align-self:start;max-height:calc(100vh - 120px);overflow:auto;font-size:14px;line-height:20px}
.legal-toc h2{margin:0 0 var(--space-3);font:500 12px/16px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted)}
.legal-toc a{display:block;padding:6px 0 6px var(--space-3);border-left:1px solid var(--line);color:var(--ink-muted)}
.legal-toc a:hover,.legal-toc a.on{color:var(--ink);border-left-color:var(--hivis)}
.legal-toc .swap{margin-top:var(--space-6);padding-top:var(--space-4);border-top:1px solid var(--line)}
.legal-toc .swap a{border:0;padding-left:0;color:var(--hivis-text);text-decoration:underline;text-underline-offset:4px}
.prose{font-size:17px;line-height:29px}
.prose h2{margin:var(--space-16) 0 var(--space-4);font:800 32px/36px var(--font-display);letter-spacing:.01em;text-transform:uppercase;scroll-margin-top:96px}
.prose h3{margin:var(--space-8) 0 var(--space-2);font:600 18px/28px var(--font-sans)}
.prose p{margin:0 0 var(--space-4)}
.prose ul{margin:0 0 var(--space-4);padding-left:var(--space-6)}
.prose li{margin:0 0 var(--space-2)}
.prose li::marker{color:var(--hivis-text)}
.prose a{color:var(--hivis-text);text-decoration:underline;text-underline-offset:4px}
.prose .box{margin:var(--space-6) 0;padding:var(--space-6) var(--space-6) var(--space-2);border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface)}
.prose .box h3{margin-top:0;font:500 12px/16px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted)}
.prose .box p{font-size:15px;line-height:24px}
@media(max-width:980px){.legal-body{grid-template-columns:minmax(0,720px);gap:0;padding:var(--space-4) var(--space-4) var(--space-16)}.legal-toc{display:none}.prose{font-size:16px;line-height:27px}.prose h2{font-size:26px;line-height:30px}.legal-head{padding-bottom:var(--space-12)}}

/* dialogs: a solid sheet, not glass: forms need a quiet ground */
dialog.sheet{width:min(560px,calc(100vw - 2*var(--space-4)));max-height:min(88vh,860px);padding:0;border:1px solid var(--line);border-radius:var(--radius-xl,28px);background:var(--surface);color:var(--ink);box-shadow:var(--lift-3);overflow:hidden}
dialog.sheet::backdrop{background:rgba(10,14,20,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
dialog.sheet[open]{display:flex;flex-direction:column}
.sheet-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-4);padding:var(--space-6) var(--space-6) 0}
.sheet-head h2{margin:0;font:800 40px/40px var(--font-display);letter-spacing:.01em;text-transform:uppercase}
.sheet-head p{margin:var(--space-2) 0 0;color:var(--ink-muted)}
.sheet-x{all:unset;flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--control-line);cursor:pointer;font-size:20px;line-height:1}
.sheet-x:hover{border-color:var(--ink)} .sheet-x:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.sheet-body{overflow:auto;padding:var(--space-6);display:grid;gap:var(--space-4)}
.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-2)}
.seg button{all:unset;box-sizing:border-box;cursor:pointer;padding:var(--space-3);border:1px solid var(--control-line);border-radius:var(--radius-md);display:grid;gap:2px}
.seg button b{font:600 15px/20px var(--font-sans)} .seg button span{font-size:13px;line-height:18px;color:var(--ink-muted)}
.seg button[aria-selected="true"]{border-color:var(--hivis-text);box-shadow:0 0 0 1px var(--hivis-text)}
.seg button:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
@media(max-width:520px){.two{grid-template-columns:1fr}.seg button span{display:none}.sheet-head h2{font-size:32px;line-height:32px}}
.chips{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.sheet .boc-chip{background:var(--surface-raised);height:36px;font-size:14px}
.sheet select{box-sizing:border-box;width:100%;min-height:48px;padding:0 var(--space-4);border-radius:var(--radius-sm);border:1px solid var(--control-line);background:var(--surface);color:var(--ink);font:400 15px/24px var(--font-sans)}
.zip{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 var(--space-3);border-radius:var(--radius-pill);background:var(--surface-raised);border:1px solid var(--line);font:500 13px/1 var(--font-mono)}
.zip button{all:unset;cursor:pointer;font-size:16px;line-height:1}
.note{margin:0;padding:var(--space-3) var(--space-4);border-left:2px solid var(--hivis);background:var(--surface-raised);border-radius:0 var(--radius-sm) var(--radius-sm) 0;font-size:14px;line-height:22px}
.consent{display:grid;grid-template-columns:24px 1fr;gap:var(--space-3);align-items:start;font-size:13px;line-height:20px;color:var(--ink)}
.consent input{width:20px;height:20px;margin:0;accent-color:var(--hivis)}
.consent a{text-decoration:underline;text-underline-offset:3px}
.pick{display:grid;gap:var(--space-2)}
.pick label{display:grid;grid-template-columns:20px 1fr;gap:var(--space-3);padding:var(--space-4);border:1px solid var(--control-line);border-radius:var(--radius-md);cursor:pointer}
.pick label:has(input:checked){border-color:var(--hivis-text);box-shadow:0 0 0 1px var(--hivis-text)}
.pick input{margin:3px 0 0;accent-color:var(--hivis)} .pick b{display:block} .pick small{display:block;margin-top:var(--space-2);font:500 12px/16px var(--font-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-muted)}
.sheet-foot{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3) var(--space-4);padding-top:var(--space-2)}
.sheet-foot a.alt{color:var(--ink-muted);text-decoration:underline;text-underline-offset:4px;font-size:14px}
.done{text-align:center;padding:var(--space-8) 0}
.done .tick{display:grid;place-items:center;width:56px;height:56px;margin:0 auto var(--space-4);border-radius:50%;background:var(--ok);color:var(--surface)}
.done h3{margin:0;font:800 40px/40px var(--font-display);text-transform:uppercase}
.done p{margin:var(--space-3) auto var(--space-6);max-width:36ch;color:var(--ink-muted)}
.code{letter-spacing:.5em;text-align:center;font:500 24px/1 var(--font-mono)!important}
.mockline{margin:0;font:500 11px/16px var(--font-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-muted)}
.mockline a{text-decoration:underline;cursor:pointer}
.boc-bubble .book{all:unset;display:inline-block;margin-top:var(--space-2);cursor:pointer;font-weight:600;color:var(--hivis-text);text-decoration:underline;text-underline-offset:4px}
.boc-bubble .book:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* CP7: Steve's "typing" bubble (three dots) while publicAsk is in flight */
.boc-bubble-typing{display:flex;align-items:center;gap:4px;padding-top:14px;padding-bottom:14px}
.boc-typing-dot{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.35;animation:boc-typing-blink 1.1s ease-in-out infinite}
.boc-typing-dot:nth-child(2){animation-delay:.15s}
.boc-typing-dot:nth-child(3){animation-delay:.3s}
@keyframes boc-typing-blink{0%,80%,100%{opacity:.25}40%{opacity:.85}}
@media(prefers-reduced-motion:reduce){.boc-typing-dot{animation:none;opacity:.6}}
/* CP7: hand-off to SMS after Steve says photos/address/phone/booking are needed, or the 10-turn cap */
.boc-assistant-handoff{all:unset;display:inline-block;margin-top:var(--space-2);cursor:pointer;font-weight:600;color:var(--hivis-text);text-decoration:underline;text-underline-offset:4px}
.boc-assistant-handoff:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* Alex: the same assistant, reachable once the hero is out of sight */
.alex-btn{position:fixed;right:16px;bottom:16px;z-index:55;opacity:0;pointer-events:none;transform:translateY(8px);transition:opacity .25s ease,transform .25s ease}
.alex-btn.on{opacity:1;pointer-events:auto;transform:none}
.alex{position:fixed;right:16px;bottom:16px;z-index:56;width:min(380px,calc(100vw - 32px));border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--lift-3);overflow:hidden}
.alex[hidden]{display:none}
.alex-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-4) var(--space-4) var(--space-3);border-bottom:1px solid var(--line)}
.alex-head b{display:block;font:600 15px/20px var(--font-sans)}
.alex-head span{display:flex;align-items:center;gap:6px;font-size:13px;line-height:18px;color:var(--ink-muted)}
.alex-head span i{width:8px;height:8px;border-radius:50%;background:var(--ok)}
.alex .boc-assistant{border:0;border-radius:0;box-shadow:none;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;padding:var(--space-4)}
.alex .boc-assistant>header{display:none}
.alex .boc-assistant-thread{max-height:40vh;overflow:auto}
@media(prefers-reduced-motion:reduce){.alex-btn{transition:none}}
/* fixes */
.pick label{text-transform:none;color:var(--ink);font:400 14px/22px var(--font-sans);letter-spacing:0}
.boc-field>span.label{text-transform:uppercase;color:var(--ink-muted)}
body:not([data-page="home"]) .nav.solid{background:var(--ground);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 1px 0 var(--line)}
/* touch: 44px targets, a menu below 980px */
.nav-phone{padding:14px 4px}
.nav-menu{all:unset;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;cursor:pointer}
.nav-menu:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.nav-menu i{display:block;width:20px;height:2px;background:var(--ink);box-shadow:0 6px 0 var(--ink),0 -6px 0 var(--ink)}
@media(min-width:980px){.nav-menu{display:none}}
.menu-list{display:grid}
.menu-list a,.menu-list button{all:unset;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;min-height:56px;border-bottom:1px solid var(--line);font:800 28px/1 var(--font-display);letter-spacing:.01em;text-transform:uppercase;cursor:pointer}
.menu-list a:last-child{border-bottom:0}
.menu-list .boc-icon{color:var(--hivis-text)}
@media(pointer:coarse),(max-width:900px){
  .site-foot ul{gap:0}.site-foot li>a,.site-foot li>button{display:flex;align-items:center;min-height:44px}
  .site-foot .boc-wordmark{display:inline-flex;align-items:center;min-height:44px}
  .boc-flow-cta{height:44px}.boc-flow-arrow{width:44px;height:44px}
  .boc-closing-in .or a{display:inline-block;padding:12px 0}
  .more a{display:inline-block;padding:10px 0}
  .sheet-foot a.alt{padding:12px 0}
}
@media(pointer:coarse),(max-width:900px){.nav .boc-btn,.alex-btn{height:44px}.nav .boc-wordmark{display:inline-flex;align-items:center;min-height:44px}}
/* REPAIR 4 (verdict 85570ea check 1 (A), "wordmark 25.6/27.9 -> 39.6px"): the 44px touch-target
   rule two rules above also grows the FOOTER wordmark link's box past the mock's natural size —
   correctly kept for the nav wordmark (line above, a primary nav target) and for the footer's own
   phone/email/sign-in links (`li>a`, still 44px, the accessible tap-target win from CLAUDE.md's
   touch rules), but here it was the one thing still inflating the footer past the mock at 390/360
   AND 768 alike (both <=900). Scoped to `.site-foot .boc-wordmark` only — nothing else on the page
   uses that selector, since `.site-foot` is the one closing-scene footer.
   CORRECTION (coordinator, same day): dropping `min-height:44px` here also dropped the tap-target
   ITSELF, undoing CP1-v15b (90c0987, Robert-GO'd: "footer wordmark tap target >=44px on touch") and
   brief v2.0's own "every tap target is 44px or more". Restores the box to its natural (small) size
   — matching the mock's footer height, per the coordinator's own repair-4 instruction — but grows
   the CLICKABLE hit area back to >=44px with an absolutely positioned `::after`, which adds no
   layout box (out of flow) and so cannot change the footer's measured height. `top:50%` + a fixed
   height + `translateY(-50%)` centres a 44px-tall hit zone over the (now shorter) link regardless
   of the link's own rendered height, so it stays a true 44px minimum on every screen this rule
   matches, not just the one size it was tuned for. */
@media(max-width:900px){
  .site-foot .boc-wordmark{min-height:0;position:relative}
  .site-foot .boc-wordmark::after{content:'';position:absolute;left:0;right:0;top:50%;height:48px;transform:translateY(-50%)}
}
/* CP6a hotfix: the FAB sat over body copy at 390 (repro: iphone14-03-scroll-1500.png) — shrink it to
   an icon-only round button on phones; the label stays in the DOM (clipped, not hidden) so it is
   still the button's accessible name for assistive tech. */
@media(pointer:coarse),(max-width:900px){
  .alex-btn{width:44px;padding:0;justify-content:center;border-radius:50%}
  .alex-btn span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}
.mock{left:50%;right:auto;transform:translateX(-50%);white-space:nowrap;max-width:none;opacity:.85}
/* SITE-V35 repair 3: narrowed off <=720 — boc.css's phone-scale block owns that tier (28px);
   source-order tie-break otherwise beat the earlier override above regardless of media specificity. */
@media(max-width:820px) and (min-width:721px){.proof h2{font-size:44px;line-height:44px}.legal-head h1{font-size:48px;line-height:48px}}
.pick input{min-height:0!important;width:18px!important;height:18px;padding:0!important;border:0!important;background:none!important}

/* SITE CP3: real wiring */
.boc-btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;pointer-events:none;box-shadow:none}
.jm-msg{margin:0;font-size:14px;line-height:20px;min-height:1px}
.done .fine{margin:var(--space-4) auto 0;max-width:36ch;font-size:13px;color:var(--ink-muted)}
.done .boc-btn{margin-top:var(--space-4)}
.jd-consent{margin-top:var(--space-2)}

/* SITE-REQUEST-FORM: the photo picker inside the Request-a-quote sheet */
.req-photos{display:grid;gap:var(--space-2)}
.req-thumbs{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.req-thumb{width:72px;height:72px;border-radius:var(--radius-sm);object-fit:cover;border:1px solid var(--line)}
.req-fail{color:#b23a28}
.req-fail a{text-decoration:underline;text-underline-offset:3px;color:inherit}

/* AMEND 1 R-4: the honeypot input — off-screen (not display:none/visibility:hidden, which some
   bots skip and some autofill still targets), never in the tab order, never painted. */
.req-hp{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}

/* SITE-IOS-NO-ZOOM (DECLARE-SITE-IOS-NO-ZOOM-2026-09-25, 7db651b4): iOS Safari auto-zooms the
   whole page when a focused input/textarea/select's font-size is <16px, and never zooms back out
   -- the "search button out of field" screenshot. Below 720 today: the hero field is 14px
   (boc.css:479 `.boc-hero-assistant .boc-assistant-ask textarea`, the same textarea AssistantCard
   builds at boc.js:498), the floating Ask Steve field is 15px (boc.css:536 `.boc-assistant-ask
   textarea`, reached here via `.alex .boc-assistant-ask textarea` -- boc.js:750 mounts that same
   AssistantCard inside `.alex`), and every sheet field is 15px (boc.css:329 `.boc-field input,
   .boc-field textarea`, the field() factory at site.js:193; `.sheet select` -- site.css:135 --
   is already 15px too). site.css loads AFTER boc.css (see the SITE-V35 repair 3 note above), so a
   rule here at the SAME 720px breakpoint always wins the cascade tie over boc.css's own <=720
   rules, no `!important` needed.
   Height budget: every box this touches already sizes its rendered height off its line-height +
   padding (or, for the Text-us/Request-a-quote sheet textareas above, an explicit fixed
   `height:`), never off font-size directly -- so restating each field's CURRENT line-height here
   unchanged means the font-size bump alone cannot grow the box. Measured with Playwright WebKit
   iPhone 15 at 390: hero field border-box height 54px before -> 54px after (0px growth, inside
   the DECLARE's <=2px budget); Text-us/Request-a-quote textareas keep their explicit fixed
   height:72px/64px untouched. */
@media (max-width: 720px) {
  .boc-hero-assistant .boc-assistant-ask textarea,
  .alex .boc-assistant-ask textarea { font-size: 16px; line-height: 24px; }
  dialog.sheet input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  dialog.sheet textarea { font-size: 16px; line-height: 24px; }
  dialog.sheet select { font-size: 16px; }
}

/* SITE-TEXTUS-PHONE: the Text-us sheet (svcOptin consent) didn't fit a phone screen — the sheet
   d.setAttribute('aria-label', title) call in site.js's sheet() only fires once at creation, and
   join.js's dialogs are all opened via sheet('', '') (empty title, filled in later by setHead), so
   [aria-label="Text us"] scopes this to the Text-us sheet alone without touching Join/investor
   dialogs or any other sheet(). Loads after boc.css, but the attribute selector's own specificity
   also wins regardless of source order (belt and suspenders, per the v35-era cascade lesson). */
@media(max-width:719px){
  dialog.sheet[aria-label="Text us"]{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;border:0;border-radius:0}
  dialog.sheet[aria-label="Text us"] .sheet-head{padding:var(--space-4) var(--space-4) 0}
  dialog.sheet[aria-label="Text us"] .sheet-head h2{font-size:20px;line-height:22px}
  dialog.sheet[aria-label="Text us"] .sheet-head p{margin-top:var(--space-1);font-size:13px;line-height:18px}
  dialog.sheet[aria-label="Text us"] .sheet-body{flex:1 1 auto;min-height:0;padding:var(--space-4);gap:var(--space-3)}
  dialog.sheet[aria-label="Text us"] .boc-field textarea{height:72px;min-height:0}
  dialog.sheet[aria-label="Text us"] .consent{font-size:12px;line-height:17px}
  dialog.sheet[aria-label="Text us"] .sheet-foot{position:sticky;bottom:0;margin:var(--space-3) calc(-1*var(--space-4)) calc(-1*var(--space-4));padding:var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom));background:var(--surface);border-top:1px solid var(--line)}
}

/* SITE-REQUEST-FORM (DECLARE-SITE-REQUEST-FORM-2026-09-24.md part B): the Request-a-quote sheet
   gets its OWN <=720 full-screen rule, mirroring SITE-TEXTUS-PHONE's block above exactly (same
   aria-label scoping mechanism — site.js sheet() sets it once at creation — so this touches only
   the new sheet, never Text-us/Join/Menu). Adds the photo-thumbnail sizing SITE-TEXTUS-PHONE had
   no need for. */
@media(max-width:719px){
  dialog.sheet[aria-label="Request a quote"]{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;border:0;border-radius:0}
  dialog.sheet[aria-label="Request a quote"] .sheet-head{padding:var(--space-4) var(--space-4) 0}
  dialog.sheet[aria-label="Request a quote"] .sheet-head h2{font-size:20px;line-height:22px}
  dialog.sheet[aria-label="Request a quote"] .sheet-head p{margin-top:var(--space-1);font-size:13px;line-height:18px}
  dialog.sheet[aria-label="Request a quote"] .sheet-body{flex:1 1 auto;min-height:0;padding:var(--space-4);gap:var(--space-3)}
  dialog.sheet[aria-label="Request a quote"] .boc-field textarea{height:64px;min-height:0}
  dialog.sheet[aria-label="Request a quote"] .consent{font-size:12px;line-height:17px}
  dialog.sheet[aria-label="Request a quote"] .req-thumb{width:56px;height:56px}
  dialog.sheet[aria-label="Request a quote"] .sheet-foot{position:sticky;bottom:0;margin:var(--space-3) calc(-1*var(--space-4)) calc(-1*var(--space-4));padding:var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom));background:var(--surface);border-top:1px solid var(--line)}
}

/* SITE-ONE-BRAIN O3 "A clean ending": once boc.js AssistantCard locks the field (turn budget
   spent), give it a visible disabled look beyond the browser default -- same opacity language as
   .boc-btn:disabled (boc.css:138) so the field and the send disc read as one locked control. */
.boc-assistant-ask textarea:disabled { opacity: .55; cursor: not-allowed; }