/* SmartBound desk, the screens' styles (0.95.0, D8; docs/DESIGN-RULES.md). The fourteen blocks the screens in desk/sb/*.js
   appended on first mount, in one file linked once by desk.html after its own style block, so nothing draws a frame
   unstyled. Every value is a token from desk/tokens.css; test/releaseDesign.test.js keeps raw hex, half sizes and stray
   radii out. The section markers name the block each part came from. */
/* ---- from sbW4css ---- */
.sbg{background:var(--bg);color:var(--fg)}
.sbx{display:grid;gap:16px;margin-top:16px;padding-bottom:140px;color:var(--fg);font-family:var(--body)}
.sbx .sbx{margin-top:0;padding-bottom:0}
.sbx a{color:var(--fg)}
.sbx .card{background:none;border:0;border-top:1px solid var(--line);border-radius:0;color:var(--fg);box-shadow:none}   /* 1.1.0 (D5) a hairline */
.sbAsk .card,.sbx [role=dialog].card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px;box-shadow:var(--float)}   /* what floats keeps its panel */
.sbx .btn.quiet{color:var(--mut);border-color:transparent}
.sbx input.t,.sbx select.t,.sbx textarea.t{background:var(--bg);border-color:var(--line2);color:var(--fg)}
.sbx textarea.t{min-height:90px}
.sbx input.t:focus,.sbx select.t:focus,.sbx textarea.t:focus{border-color:var(--org);outline:none;box-shadow:inset 0 0 0 1px var(--org)}   /* 0.95.0 (S7) the inset ring, no offset */
.sbx label.f{color:var(--mut)}
.sbx .eyebrow{color:var(--dim)}
.sbx .onG{color:var(--fg)}
.sbx .onG .dim,.sbx .onG .mut{color:var(--mut)}
.sbx .head{font:300 var(--t-display)/1.05 var(--display);margin:4px 0 8px;color:var(--fg)}
.sbx .pgT{font:300 26px/1.2 var(--display);margin:0;color:var(--fg)}   /* 0.95.0 (D10, Y5) the page title */
.sbx details.sbMore>summary{cursor:pointer;color:var(--fg);padding:8px 0;list-style:revert}
.sbx details.sbMore>summary .mut{color:var(--mut)}
.sbx details.sbMore>.sbx{margin-top:12px}
.sbx .row2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
@media (max-width:860px){.sbx .row2{grid-template-columns:minmax(0,1fr)}}
.sbx .lede{color:var(--mut);margin:0 0 10px}
.sbx .msg{min-height:1.4em;font-size:13px;color:var(--mut)}
.sbx .msg.bad{color:var(--warn)}
.sbx .msg.good{color:var(--ok)}
.sbx .stat{font:300 40px/1 var(--display);margin:2px 0 4px}
.sbx .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.sbx .bar{height:8px;border-radius:var(--r-sw);background:var(--bg);border:1px solid var(--line);overflow:hidden;margin:8px 0 4px}
.sbx .bar i{display:block;height:100%;background:var(--ok)}
.sbx table{width:100%;border-collapse:collapse;font-size:13px}
.sbx th{font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim);text-align:left;padding:6px 8px;border-bottom:1px solid var(--line)}
.sbx td{padding:8px;border-bottom:1px solid var(--line);vertical-align:top}
.sbx td.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.sbx .plus{color:var(--ok)}
/* 0.95.0 (D11) rows are hairlines: .door, .cn, ol.steps li, .sbLvCard, .rmCard; a chosen row takes the ring */
.sbx .door{border:1px solid transparent;border-top-color:var(--line);border-radius:0;padding:12px;margin:0;background:none}
.sbx .door.cur{border-bottom-color:var(--org);box-shadow:inset 0 -1px 0 var(--org)}
.sbx .door b{font-weight:500}
.sbx .door p{margin:4px 0;color:var(--mut);font-size:13px}
/* a picture of their page: white with the picture radius, no card border (DESIGN-RULES) */
.sbx .pv{border-radius:6px;overflow:hidden;background:var(--paper);color:var(--ink)}
.sbx .pvFrame{display:block;width:100%;max-width:390px;height:680px;border:0;border-radius:6px;background:var(--paper)}
.sbx .pv .pvTop{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--paper-line)}
.sbx .pv .pvTop img{max-height:28px;max-width:140px}
.sbx .pv .pvBody{padding:24px 16px 16px}
.sbx .pv h4{font:600 22px/1.2 system-ui,sans-serif;margin:0 0 8px}
.sbx .pv p{margin:0 0 14px;color:var(--ink-soft);font-size:14px;line-height:1.5}
.sbx .pv .cta{display:inline-block;padding:8px 16px;border-radius:var(--r-ctl);color:var(--ink);font-weight:600;text-decoration:none}
.sbx .pv .from{font-size:13px;color:var(--ink-soft);margin-top:14px;display:flex;align-items:center;gap:8px}
.sbx .pv .pvFace{flex:none;width:32px;height:32px;border-radius:50%;overflow:hidden;display:inline-grid;place-items:center;background:var(--ink);color:var(--paper);font:600 12px system-ui,sans-serif}
.sbx .pv .pvFace img{width:32px;height:32px;object-fit:cover;display:block}
.sbx .pv .pwr{font-size:12px;color:var(--ink-soft);padding:8px 16px;border-top:1px solid var(--paper-line)}
.sbx .sig{background:var(--paper);border:0;border-radius:6px;padding:16px;overflow:auto;color:var(--ink)}
.sbx .sig img{max-width:100%;height:auto}
.sbx code.lk{display:block;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:9px 12px;word-break:break-all;font:13px var(--mono);color:var(--fg)}
.sbx ol.steps{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.sbx ol.steps li{display:grid;grid-template-columns:32px minmax(0,1fr);gap:12px;align-items:start;border:1px solid transparent;border-top-color:var(--line);border-radius:0;padding:12px;background:none}
.sbx ol.steps li.next{border-bottom-color:var(--org);box-shadow:inset 0 -1px 0 var(--org)}
.sbx .tick{width:28px;height:28px;border-radius:50%;border:1px solid var(--line2);display:grid;place-items:center;font:600 13px var(--mono);color:var(--mut);background:var(--bg)}
.sbx li.done .tick{background:var(--ok);border-color:var(--ok);color:var(--bg)}   /* (C4) the glyph on green is the ground */
.sbx li.next .tick,.sbx li.cur .tick{background:none;border-color:var(--fg);color:var(--fg)}   /* 1.1.0 (D5) the next step's number is --fg, never orange */
.sbx ol.steps b{font-weight:500}
.sbx ol.steps p{margin:3px 0 0;color:var(--mut);font-size:13px}
.sbx .cn{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;align-items:center;border-top:1px solid var(--line);padding:12px 0;margin:0}
.sbx .cn p{margin:2px 0 0;color:var(--mut);font-size:13px}
.sbx .cn .st{font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase}
.sbx .st.ok{color:var(--ok)}
.sbx .st.wait{color:var(--warn)}
.sbx .st.off{color:var(--dim)}
.sbx .inl{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.sbx .inl input.t{width:auto;flex:1;min-width:140px}
.sbx .nudge{border:1px solid var(--warn);border-radius:12px;padding:12px 16px;color:var(--fg)}
.sbx .sbLv{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.sbx .sbLv .card{box-shadow:none}
.sbx .sbOff{color:var(--dim)}
.sbx .sbSw{display:inline-flex;gap:6px;align-items:center;color:var(--mut);font-size:13px}
.sbx .picker{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width:560px){.sbx .picker{grid-template-columns:minmax(0,1fr)}}
.sbx .blk{all:unset;box-sizing:border-box;display:flex;flex-direction:column;gap:8px;cursor:pointer;border:1px solid var(--line);border-radius:var(--r-ctl);padding:12px;background:var(--panel);min-width:0}
.sbx .blk:hover{border-color:var(--mut)}
.sbx .blk[aria-pressed=true]{border-bottom-color:var(--org);box-shadow:inset 0 -1px 0 var(--org)}   /* 1.1.0 (D5) chosen is the underline */
.sbx .blk .bn{font:600 13px var(--body);color:var(--mut)}
.sbx .blk .bp{overflow:hidden;pointer-events:none;color:var(--ink);min-height:64px;background:var(--paper);border-radius:6px;padding:8px}
.sbx .blk .bp img{max-width:100%;height:auto}
.sbx .seg{display:inline-flex;border:0;padding:0;gap:20px;flex-wrap:wrap}   /* 1.1.0 (D5) a seg is words, 20 apart */
.sbx .seg button{all:unset;box-sizing:border-box;cursor:pointer;min-height:var(--h-small);display:inline-flex;align-items:center;padding:0;border-bottom:2px solid transparent;font-size:14px;color:var(--mut)}
.sbx .seg button:hover{color:var(--fg)}
.sbx .seg button[aria-pressed=true]{background:none;color:var(--fg);border-bottom-color:var(--org)}
/* 0.99.0 (D5) one rule for every seg: each half sits over the seg's own hairline (1px out, top and bottom, and at the two ends), so
   the chosen half's 2px ring is the seg's outer edge on its side: one closed outline, no hairline sliver outside it, nothing
   clipped, and the halves meet edge to edge so no orange reaches the other half. No overflow:hidden on a seg, or the ring is cut. */
.sbx .seg button{margin:0;min-height:var(--h-small)}
.sbx .sig table,.sbx .blk table{width:auto;font-size:inherit;border-collapse:collapse}
.sbx .sig td,.sbx .blk td{border-bottom:0;vertical-align:top}
.sbWho{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.sbWho .l{font-size:12px;color:var(--mut)}
.sbWho .a{white-space:nowrap;overflow:hidden;font-size:14px}
.sbx .flag{font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;border:0;border-radius:0;background:none;padding:0;display:inline-flex;align-items:center;gap:8px;min-height:var(--h-small);color:var(--dim);margin-left:8px}   /* 1.1.0 (D5) a tag: no box */
.sbx .sbNums{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin:6px 0 4px}
@media (max-width:760px){.sbx .sbNums{grid-template-columns:repeat(2,minmax(0,1fr))}}
.sbx .sbNums .eyebrow{color:var(--dim)}
.sbx .sbNums b{display:block;font:300 26px/1.05 var(--display);color:var(--fg);margin-top:8px;font-variant-numeric:tabular-nums}
/* 0.95.0 (D22) Meetings booked first and large, the other three small */
.sbx .sbNums > :first-child b{font-size:40px}
.sbGear{all:unset;box-sizing:border-box;cursor:pointer;width:32px;height:32px;border-radius:50%;display:inline-grid;place-items:center;color:var(--mut);border:1px solid transparent}
.sbGear:hover{color:var(--fg);border-color:var(--mut)}
.sbx .sbCardTop{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
/* ---- from sbStartCss ---- */
.sbStart{max-width:1040px;margin:0 auto;width:100%}
/* the one list (Settings and the start view) */
.sbx .sbOneTop{margin:0 0 12px;font-size:16px;color:var(--fg)}
.sbx ol.sbOneList{display:flex;flex-direction:column;gap:0}
.sbx ol.sbOneList li{grid-template-columns:28px minmax(0,1fr);align-items:center;padding:8px 12px}
.sbx ol.sbOneList li.later{color:var(--dim)}
.sbx ol.sbOneList li.later.act{color:var(--mut)}
.sbx ol.sbOneList li.cur{align-items:start;padding:12px 0}   /* 1.1.0 (D5) the open step is open, not ringed */
.sbx ol.sbOneList .tick{width:24px;height:24px}
.sbx .sbOneT{display:flex;align-items:center;justify-content:space-between;gap:4px 8px;min-height:32px}
.sbx .sbOneT b{font-weight:500}
.sbx .sbOneT .btn{min-height:32px;padding:4px 12px;flex:none}
.sbx .sbStepH{display:block;font-weight:500;margin:4px 0 8px}
.sbx .sbStepBody{min-width:0}
.sbx .sbStepBody .mut{margin:0 0 8px}
.sbx .sbInStep{border:0;padding:0;background:none;box-shadow:none}
.sbx .sbInStep>.sbSecT{display:none}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sbStart .sbStepsCard{margin-top:12px}
.sbStart .sbOpen{display:grid;gap:12px}
.sbProg{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 18px;counter-reset:none}
.sbProg li{display:flex;align-items:center;color:var(--mut);font-size:14px}
.sbProg li button,.sbProg li>span{all:unset;display:inline-flex;align-items:center;gap:8px;cursor:pointer;padding:2px 0}
.sbProg li>span{cursor:default}
.sbProg i{font-style:normal;width:24px;height:24px;border-radius:50%;display:inline-grid;place-items:center;font-size:12px;font-weight:600;border:1px solid var(--line2);color:var(--mut)}
.sbProg li.on{color:var(--fg)}
.sbProg li.on i{background:var(--ok);border-color:var(--ok);color:var(--bg)}
.sbProg li.cur{color:var(--fg);font-weight:600}
.sbProg li.cur i{color:var(--fg)}
.sbProg li+li::before{content:"";display:inline-block;width:16px;height:1px;background:var(--line2);margin:0 12px 0 -8px}
.sbStart ol.sbSteps li{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px;box-shadow:none;color:var(--fg)}
.sbStart ol.sbSteps li.cur{border-bottom-color:var(--org);box-shadow:inset 0 -1px 0 var(--org)}
.sbStart ol.sbSteps li:not(.cur){padding:12px 16px}
.sbStart .sbFold{all:unset;cursor:pointer;display:block;padding:3px 0;color:var(--fg)}
.sbStart .sbChg{color:var(--fg);text-decoration:underline;text-underline-offset:3px;margin-left:8px}
.sbStart .sbStepT{font:300 var(--t-section)/1.15 var(--display);margin:8px 0 12px;color:var(--fg)}
.sbStart .sbFoot{justify-content:flex-end;border-top:1px solid var(--line);padding-top:16px;margin-top:16px}
.sbStart .sbInstall{border:1px solid var(--line);border-radius:12px;padding:12px 16px;margin:0 0 16px;background:var(--panel)}   /* 0.95.0 (L4) a reminder takes the hairline; its one button carries the orange */
.sbStart .sbInstall p{margin:0}
.sbStart [data-done]{max-width:64ch}
.sbStart .sbCat{margin-top:16px}
@media (max-width:560px){.sbStart ol.sbSteps li{grid-template-columns:28px minmax(0,1fr);gap:12px;padding:12px}.sbStart .sbFoot{justify-content:space-between}.sbProg li+li::before{display:none}}
/* ---- from sbInstallCss ---- */
.sbx .gWrap{border:1px solid var(--line);border-radius:12px;padding:16px;margin:16px 0 0;background:var(--panel);color:var(--fg)}
.sbx .gT{font:400 22px/1.2 var(--display);margin:4px 0 6px;color:var(--fg)}
.sbx .gT:focus{outline:none}
.sbx .gPic{margin:12px 0}
.sbx .gSvg{display:block;width:100%;max-width:560px;height:auto}
.sbx .gFork{display:grid;gap:8px;max-width:560px;margin:4px 0 8px}
.sbx .gFork .btn{text-align:left;justify-content:flex-start;white-space:normal}
.sbx .gActs{align-items:center}
.sbx .gActs [data-gnext]{margin-left:auto}
.sbx .gSwitch{margin:10px 0 0}
@media (max-width:560px){.sbx .gWrap{padding:12px}.sbx .gActs [data-gnext]{margin-left:0}}
/* ---- from sbSetCss ---- */
.sbSet{max-width:1100px;margin:16px auto 0;width:100%}
.sbPhoto{margin:0 0 16px}
.sbPhotoRow{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.sbPhotoImg{width:96px;height:96px;border-radius:50%;overflow:hidden;display:grid;place-items:center;border:1px solid var(--line2);font-size:12px;text-align:center}
.sbPhotoImg img{width:96px;height:96px;object-fit:cover;display:block}
.sbVis{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.sbPhoto label.btn{cursor:pointer}
.sbPhoto:focus-within label.btn{outline:2px solid var(--org);outline-offset:2px}
.sbSetGrid{display:grid;grid-template-columns:280px minmax(0,1fr);gap:24px;align-items:start}   /* 0.95.0 (D20, L1, L2) one rail width, one gap */
.sbSetNav{display:flex;flex-direction:column;gap:4px;position:sticky;top:16px}
.sbSetNav button{all:unset;box-sizing:border-box;cursor:pointer;padding:0;min-height:var(--h-small);margin-right:16px;border-bottom:2px solid transparent;color:var(--mut);font-size:14px}
.sbSetNav button:hover{border-color:var(--mut);color:var(--fg)}
.sbSetNav button[aria-current=page]{background:none;border-bottom-color:var(--org);color:var(--fg)}
/* 0.95.0 (D16, L22) on a phone the Settings nav is one select that opens one sheet */
.sbSetPick{display:none}
@media (max-width:760px){.sbSetGrid{grid-template-columns:minmax(0,1fr)}.sbSetNav{display:none}.sbSetPick{display:block;margin:0 0 16px}}
.sbx .sbSheet{padding:16px;min-width:0}
.sbx .sbSecT{font:400 22px/1.2 var(--display);margin:0 0 12px;color:var(--fg)}   /* 0.95.0 (D10, L14) a card's title, under the page's */
.sbx .sbSheet h3{margin:16px 0 6px}
.sbx .sbSheet fieldset{border:0;padding:0;margin:0 0 16px;min-width:0}
.sbx .sbSheet legend{font:600 13px var(--body);color:var(--mut);padding:0;margin:0 0 8px}
.sbx .sbSheet .opt{display:flex;gap:8px;align-items:flex-start;margin:6px 0;cursor:pointer}
.sbx .sbSheet .opt input{accent-color:var(--org);margin-top:4px}
.sbx .sbSheet .opt small{display:block;color:var(--mut);font-size:13px}
.sbx .sbSheet .row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:8px}
.sbx .sbSheet input.t,.sbx .sbSheet select.t,.sbx .sbSheet textarea.t{max-width:100%}
.sbx .sbSheet input.l,.sbx .sbSheet textarea:not(.t){background:var(--bg);border:1px solid var(--line2);border-radius:12px;padding:8px 12px;color:var(--fg);font-size:16px}
.sbx .sbSheet .nt .nth{display:flex;align-items:center;gap:12px;padding:6px 0;border-top:1px solid var(--line);flex-wrap:wrap}
.sbx .sbSheet .nt .nth>span{flex:1 1 200px;display:flex;flex-direction:column}
.sbx .sbSheet .nt label{display:inline-flex;gap:4px;align-items:center;font-size:13px}
.sbx .sbSheet #lkSave{display:none}
.sbx .sbSheet .swatch{display:flex;gap:10px;align-items:center;margin:6px 0}
.sbx .sbSheet .lkRow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;margin-top:8px}
.sbx details.why{margin:10px 0 4px;color:var(--mut);font-size:13px}
.sbx details.why summary{cursor:pointer;color:var(--fg);text-decoration:underline;text-underline-offset:3px}
.sbx details.why p{margin:6px 0 0}
/* 1.1.0 (D5) the one drawn switch, C: 36 by 20, corner 4, the knob 14 at corner 2; green when on; the native box is still the control */
.sbx .sbSwitch{display:inline-flex;gap:12px;align-items:center;font-size:16px;cursor:pointer}
.sbx .sbSwitch input{appearance:none;-webkit-appearance:none;position:relative;flex:none;width:36px;height:20px;margin:0;border-radius:var(--r-sw);border:1px solid var(--line2);background:var(--bg);cursor:pointer;transition:background-color var(--fast) var(--ease),border-color var(--fast) var(--ease)}
.sbx .sbSwitch input::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:var(--r-knob);background:var(--mut);transition:left var(--fast) var(--ease),background-color var(--fast) var(--ease)}
.sbx .sbSwitch input:checked{background:var(--ok);border-color:var(--ok)}
.sbx .sbSwitch input:checked::after{left:18px;background:var(--fg)}
.sbx .sbSwitch input:disabled{border-color:var(--line);cursor:default}
.sbx .sbSwitch input:disabled::after{background:var(--dim)}
.sbx .sbLvTwo{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin:8px 0}
.sbx .sbLvCard{border-top:1px solid var(--line);padding:12px 0}
.sbx .sbLvCard p{margin:6px 0}
.sbx .sbFacts{display:grid;grid-template-columns:110px minmax(0,1fr);gap:6px 12px;margin:0}
.sbx .sbFacts dt{color:var(--dim)}
.sbx .sbFacts dd{margin:0}
.sbx .sbStepsCard h3{margin:10px 0 8px}
.sbx .sbTrack{margin:8px 0}
.sbx .sbTrack .eyebrow{margin:6px 0}
.sbx .sbStepT{display:flex;align-items:center;justify-content:space-between;gap:4px 8px;min-height:28px}
.sbx .sbStepT .btn{min-height:32px;padding:4px 12px;flex:none}
.sbx .sbDots{display:flex;gap:6px;flex-wrap:wrap}
.sbx .sbDots i{width:10px;height:10px;border-radius:50%;border:1px solid var(--line2);background:var(--bg)}
.sbx .sbDots i.on{background:var(--ok);border-color:var(--ok)}
.sbx .card,.sbAsk .card{color-scheme:dark}
.sbx .sbStepsCard ol.steps{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:8px}
.sbx .sbStepsCard ol.steps li{padding:8px 12px;align-items:center;grid-template-columns:28px minmax(0,1fr)}
.sbx .sbStepsCard .tick{width:24px;height:24px}
.sbx .sbDemoSw{margin-top:20px}
.sbx .sbDemoSw p{margin:6px 0 0}
.sbAsk{position:fixed;inset:0;z-index:60;background:var(--scrim);display:grid;place-items:center;padding:16px}
.sbAsk[hidden]{display:none}
.sbAsk .card{max-width:440px;width:100%}
/* ---- from sbBannerCss ---- */
.sbx .cwList{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:12px}
.sbx .cw{border:1px solid var(--line);border-radius:12px;background:var(--panel);padding:0;min-width:0}
.sbx .cw.on{border-bottom-color:var(--org);box-shadow:inset 0 -1px 0 var(--org)}
/* 0.95.0 (D21) navy first and large, the rest as swatches */
.sbx .cwList > .cw:first-child{grid-column:1 / -1}
.sbx .cwPick{all:unset;box-sizing:border-box;display:block;width:100%;padding:12px;cursor:pointer;color:var(--fg)}
.sbx .cwPick[disabled]{cursor:default}
.sbx .cwName{display:block;font-weight:600;font-size:14px;margin:0 0 8px}
.sbx .cwPair{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;align-items:start}
.sbx .cwImg{display:block;max-width:400px}
.sbx .cwImg svg.bnr{display:block;width:100%;height:auto;aspect-ratio:10/3;border-radius:6px}
.sbx .cwImg img.bnrImg{display:block;width:100%;max-width:324px;height:auto;border-radius:6px}   /* 1.2.1a the tile keeps its own shape: no 10/3 box */
.sbx .cwSee .pgMini{max-width:240px}
.sbx .cwPair small{display:block;font-size:12px;color:var(--dim);margin:0 0 4px}
.sbx .pgMini{display:grid;gap:4px;border-radius:6px;padding:8px;min-height:92px;box-sizing:border-box;align-content:start;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);font-size:11px}
.sbx .pgMini b{font-size:13px;font-weight:600}
.sbx .pgMini i{display:block;height:4px;border-radius:6px}
.sbx .pgMini em{font-style:normal;font-weight:600;font-size:11px;border-radius:var(--r-ctl);padding:3px 8px;justify-self:start;margin-top:4px;max-width:100%;box-sizing:border-box;overflow-wrap:normal;word-break:keep-all}
.sbx .pgMini small{font-size:11px;overflow-wrap:anywhere}
.sbx .cwOwn{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:0 12px 12px}
.sbx .sw{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;gap:8px;cursor:pointer;border:1px solid var(--line2);border-radius:var(--r-ctl);min-height:32px;padding:4px 12px 4px 4px;font-size:13px;color:var(--fg);position:relative}
.sbx .sw:hover{border-color:var(--mut)}
.sbx .sw i{width:24px;height:24px;border-radius:50%;display:inline-block;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
.sbx .sw input[type=color]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.sbx .sw[aria-pressed=true]{border-bottom-color:var(--org);box-shadow:inset 0 -1px 0 var(--org)}
.sbx .sw[disabled]{cursor:default;color:var(--dim);border-color:var(--line)}
.sbx input.t[readonly]{color:var(--mut);border-color:var(--line)}   /* 0.95.0 (D12, S8) no opacity */
.sbx .sbThumb{height:390px;overflow:hidden;border:0;border-radius:6px;background:var(--paper);position:relative}
.sbx .sbThumb iframe{border:0;width:390px;height:780px;transform:scale(.5);transform-origin:0 0;position:absolute;left:calc(50% - 98px);top:0;pointer-events:none}
.sbx .sig{overflow-x:auto;max-width:100%}
@media (max-width:560px){.sbx .pgMini em{font-size:11px;padding:2px 8px}}
.sbx .cwSws{display:flex;flex-wrap:wrap;gap:8px}
.sbx .cwSw{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;gap:8px;cursor:pointer;border:1px solid var(--line2);border-radius:var(--r-ctl);min-height:32px;padding:4px 12px 4px 4px;font-size:13px;color:var(--fg)}
.sbx .cwSw:hover{border-color:var(--mut)}
.sbx .cwSw i{width:16px;height:16px;border-radius:50%;display:inline-block;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
.sbx .cwSw i + i{margin-left:-10px}
.sbx .cwSw[aria-checked=true]{border-bottom-color:var(--org);box-shadow:inset 0 -1px 0 var(--org)}   /* 1.1.0 (D5) the underline */
.sbx .cwSw[disabled]{cursor:default;color:var(--dim);border-color:var(--line)}
.sbx .sbCols{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:12px 0 0}
.sbx .sbLive{min-height:72px}
/* 0.95.0 (D14, L9) the live banner draws at the size chosen, left-aligned, as the stage banners under it (max-width set by size) */
.sbx .sbLive img.bnrImg{display:block;width:100%;max-width:var(--bnrW,320px);height:auto;border-radius:6px}
.sbx .sbEdFoot{margin-top:4px}
.sbx .sbSmall{font-size:13px;min-height:32px;padding:4px 12px}
.sbx .sbNextH{margin:0 0 8px}
.sbx .sbStageT{margin:0 0 2px}
.sbx .sbStageL{margin:0 0 6px}
.sbx .sbStage{margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
/* ---- from sbSetupCss ---- */
.sbx .sbSetup{margin-top:16px;position:relative}
.sbx .sbSetup > h3{margin:0 0 8px}
.sbx .sbSetGear{position:absolute;right:16px;top:12px}
.sbx .sbTabs,.sbx .sbWho{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:0 0 12px;flex-wrap:wrap}
.sbx .sbTabs button,.sbx .sbWho button{all:unset;cursor:pointer;min-height:36px;box-sizing:border-box;padding:8px 12px;font-size:14px;color:var(--mut);border-bottom:2px solid transparent;margin-bottom:-1px}
.sbx .sbTabs button:hover,.sbx .sbWho button:hover{color:var(--fg)}
.sbx .sbTabs button[aria-selected=true],.sbx .sbWho button[aria-selected=true]{border-bottom-color:var(--org);color:var(--fg)}
.sbx .sbBeta{margin-top:16px}
.sbx .sbBetaTag{font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;border:0;border-radius:0;background:none;padding:0;display:inline-flex;align-items:center;gap:8px;min-height:var(--h-small);color:var(--dim);margin-right:8px}   /* 1.1.0 (D5) a tag: no box */
/* ---- from sbSigCss ---- */
.sbx .sbCol{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
/* ---- from sbModeCss ---- */
.sbx .seg button:focus:not(:focus-visible):not([aria-pressed=true]):not([aria-checked=true]){outline:none}   /* 0.99.2 the chosen half keeps its outline after a click */
.sbx .seg button[aria-pressed=true]:focus-visible,.sbx .seg button[aria-checked=true]:focus-visible{outline-color:var(--fg);outline-offset:2px}   /* 0.99.2 review: focus on the chosen half still shows */
.sbx .seg button[aria-checked=false]{background:none}
.sbx .sbHs{display:flex;gap:8px;align-items:center}
.sbx .sbHs input{flex:1}
.sbx .seg button[aria-checked=true]{background:none;color:var(--fg);border-bottom-color:var(--org)}
.sbx .sbOpens{margin:6px 0 0}
.sbx [data-pbanner] img.bnrImg{display:block;width:100%;max-width:var(--bnrW,400px);height:auto;border-radius:6px}
/* ---- from sbTeamCss ---- */
.sbx .tmGrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start}
@media (max-width:860px){.sbx .tmGrid{grid-template-columns:minmax(0,1fr)}}
.sbx .tmForm label.f{display:block;margin:10px 0 4px}
.sbx .tmForm input.t,.sbx .tmForm select.t{width:100%}
.sbx .tmSw{display:flex;margin:12px 0 0}
.sbx .tmOut pre{white-space:pre-wrap;overflow-wrap:anywhere;font:14px/1.5 var(--body);margin:0;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:12px 16px;color:var(--fg)}
.sbx .tmOut pre.wait{color:var(--mut)}
.sbx .tmRow{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) auto;gap:6px 12px;align-items:center;padding:10px 0;border-top:1px solid var(--line)}
.sbx .tmRow b{font-weight:500;overflow-wrap:anywhere}
.sbx .tmRow .dim{font-size:13px}
.sbx .tmRow .acts{margin:0;justify-content:flex-end}
.sbx .tmRow.open{grid-template-columns:minmax(0,1fr)}
.sbx .tmRow.open .tmForm{max-width:420px}
@media (max-width:560px){.sbx .tmRow{grid-template-columns:minmax(0,1fr)}.sbx .tmRow .acts{justify-content:flex-start}}
/* ---- from sbRoomsCss ---- */
.sbx .rmList{margin:0 0 16px}
.sbx .rmList h3{margin:0 0 4px}
.sbx .rmRow{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1.4fr) auto;gap:6px 12px;align-items:center;padding:10px 0;border-top:1px solid var(--line)}
.sbx .rmRow b{font-weight:500;overflow-wrap:anywhere}
.sbx .rmRow .dim{font-size:13px;overflow-wrap:anywhere}
.sbx .rmRow .acts{margin:0;justify-content:flex-end}
.sbx .rmOpen{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start;padding:12px 0;border-top:1px solid var(--line)}
.sbx .rmOpen label.f,.sbx .rmOpen legend.f{display:block;margin:10px 0 4px;padding:0}
.sbx .rmOpen input.t{width:100%}
.sbx .rmOpen fieldset{border:0;margin:0;padding:0;min-width:0}
.sbx .rmPick{display:flex;gap:8px;align-items:center;margin:4px 0}
.sbx .rmCard{border-top:1px solid var(--line);padding:12px 0;color:var(--fg)}
.sbx .rmTop{display:flex;gap:12px;align-items:center}
.sbx .rmTop b{font:400 22px/1.2 var(--display);overflow-wrap:anywhere}
.sbx .rmFace{width:48px;height:48px;border-radius:50%;object-fit:cover;flex:none}
.sbx .rmIni{display:grid;place-items:center;border:1px solid var(--line2);font-weight:600}
.sbx .rmWho{margin:10px 0 4px}
.sbx .rmMsg{margin:4px 0;font-style:italic}
.sbx .rmLink{margin:6px 0 0;font-size:13px;overflow-wrap:anywhere}
@media (max-width:860px){.sbx .rmOpen{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.sbx .rmRow{grid-template-columns:minmax(0,1fr)}.sbx .rmRow .acts{justify-content:flex-start}}
/* ---- from sbHomeCss ---- */
.sbHome{max-width:1040px;margin:16px auto 0;width:100%}
.sbHome .sbLine4{list-style:none;margin:6px 0 2px;padding:0;display:flex;flex-wrap:wrap;gap:4px 16px}
.sbHome .sbLine4 li{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--mut)}
.sbHome .sbLine4 li.on{color:var(--fg)}
.sbHome .sbLine4 i{width:16px;height:16px;border-radius:50%;border:1px solid currentColor;display:inline-grid;place-items:center;font-style:normal;font-size:11px}
.sbHome .sbLine4 li.on i{background:var(--ok);border-color:var(--ok);color:var(--bg)}
.sbHome .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.sbHome .sbHead{font:300 var(--t-display)/1.05 var(--display);color:var(--fg);margin:8px 0}
.sbHome .sbLine{color:var(--mut);margin:0;font-size:16px}
.sbHome .sbDoor{padding:16px}
.sbHome .sbDoor h2{font:400 22px/1.2 var(--display);margin:4px 0 8px;color:var(--fg)}
/* 0.95.0 (D22) Send links wide, See visitors a row under it */
.sbHome .sbDoorsTwo{display:flex;flex-direction:column;gap:12px}
.sbHome .sbDoorsTwo > :first-child h2{font-size:26px}
.sbHome .sbDoorsTwo > :not(:first-child){display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 16px}
.sbHome .sbDoorsTwo > :not(:first-child) h2{font-size:17px;font-family:var(--body);font-weight:500;margin:0}
.sbHome .sbDoorsTwo > :not(:first-child) p{display:none}
.sbHome .sbStrip{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;border-color:var(--line)}   /* 0.95.0 (L4) a reminder takes the hairline */
.sbHome .sbStrip p{margin:2px 0 0}
/* ---- from sbOnbCss ---- */
.sbOnb{max-width:64rem}
.sbOnb .card{color-scheme:dark}
.sbOnb .sbSw2{display:inline-flex;align-items:center;gap:8px;margin-right:16px}
.sbOnb .sbSw2 i{width:22px;height:22px;border-radius:50%;border:1px solid var(--line2);display:inline-block}
/* ---- from sbC84css ---- */
.sbx .nv{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px;color:var(--fg);min-width:0}
.sbx .nv h3{color:var(--fg);margin:0 0 12px;font:400 22px/1.2 var(--display)}
.sbx .nv .dim,.sbx .nv .lede{color:var(--mut)}
.sbx .nv .btn.quiet{border-color:transparent;color:var(--mut)}
.sbx .nv .nudge,.sbx .onG.nudge{border-color:var(--warn);color:var(--fg)}
.sbx .nv input.t,.sbx .nv select.t,.sbx .nv textarea.t{background:var(--bg);color:var(--fg)}

.sbx .tabs{display:flex;flex-wrap:wrap;gap:6px}
.sbx .tabs button{all:unset;box-sizing:border-box;cursor:pointer;min-height:var(--h-small);padding:0;margin-right:16px;font-size:14px;color:var(--mut);border-bottom:2px solid transparent}
.sbx .tabs button:hover{border-color:var(--mut);color:var(--fg)}
.sbx .tabs button[aria-selected=true]{background:none;border-bottom-color:var(--org);color:var(--fg)}
.sbx .tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
.sbx .tile{all:unset;box-sizing:border-box;display:block;cursor:pointer;border:1px solid transparent;border-top-color:var(--line);border-radius:0;padding:12px;color:var(--fg);min-width:0}
.sbx .tile:hover{border-color:var(--mut);border-radius:12px}
.sbx .tile .stat{font-size:30px;overflow-wrap:anywhere}
.sbx .tile.warn{border-color:var(--warn);border-radius:12px}
.sbx .mp{display:inline-flex;align-items:center;gap:4px}
.sbx .mp b{font:500 16px var(--body);min-width:130px;text-align:center;color:inherit}
.sbx .mp button{all:unset;cursor:pointer;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line2);color:var(--fg)}
.sbx .mp button:hover{border-color:var(--mut)}
.sbx .mp button[disabled]{color:var(--dim);border-color:var(--line);cursor:default}
.sbx .t84{width:100%;border-collapse:collapse}
.sbx .t84 td.n,.sbx .t84 th.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.sbx .t84 tr.r{cursor:pointer}
.sbx .t84 tr.r:hover td{border-bottom-color:var(--mut)}
.sbx .t84 tr.r:focus-visible{outline:2px solid var(--org);outline-offset:-2px}
.sbx .t84 tr.dt td{padding:4px 8px 12px}
.sbx .t84 dl{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:4px 16px;margin:0;font-size:13px}
.sbx .t84 dt{color:var(--dim)}
.sbx .t84 dd{margin:0;min-width:0;overflow-wrap:anywhere}
.sbx .t84 .why{display:none;font-size:13px;color:var(--mut);margin-top:4px}
.sbx .t84 tr:hover .why,.sbx .t84 tr:focus-within .why{display:block}
@media (max-width:640px){.sbx .t84 thead{display:none}.sbx .t84,.sbx .t84 tbody{display:block}
.sbx .t84 tr.r,.sbx .t84 tr.p{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;padding:12px 0;margin:0;border:0;border-top:1px solid var(--line);border-radius:0}
.sbx .t84 tr.r td,.sbx .t84 tr.p td{border:0;padding:0;text-align:left;min-width:0;overflow-wrap:break-word}.sbx .t84 tr.r td.n,.sbx .t84 tr.p td.n{text-align:right}
.sbx .t84 tr.r td:first-child,.sbx .t84 tr.p td:first-child{grid-column:1/-1;font-weight:500}
.sbx .t84 td[data-l]:not(:first-child):not([data-l=""])::before{content:attr(data-l) " ";color:var(--dim);font-size:12px}
.sbx .t84 tr.dt{display:block;margin:-6px 0 10px}.sbx .t84 tr.dt td{display:block;border:0}.sbx .t84 .why{display:block}}
.sbx .sheet{background:var(--panel);color:var(--fg);border:1px solid var(--line);border-radius:12px;padding:16px;min-width:0}
.sbx .sheet h3{color:var(--fg);margin:0 0 12px}
.sbx details.ln>summary{cursor:pointer;list-style:none;color:var(--fg);font-size:14px}
.sbx details.ln>summary::-webkit-details-marker{display:none}
.sbx details.ln>summary::before{content:"\25B8  ";color:var(--mut)}
.sbx details.ln[open]>summary::before{content:"\25BE  "}
.sbx .agent{display:grid;gap:8px}
.sbx .agent dl{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:4px 16px;margin:0;font-size:14px}
.sbx .agent dt{color:var(--dim)}
.sbx .agent dd{margin:0;min-width:0}
@media (max-width:480px){.sbx .agent dl{grid-template-columns:minmax(0,1fr)}.sbx .agent dd{margin-bottom:6px}}
.sbx .badge{display:inline-flex;align-items:center;font:500 13px var(--body);border-radius:var(--r-ctl);min-height:var(--h-small);padding:0 12px;background:none;color:var(--fg);border:1px solid var(--line2);cursor:pointer}
.sbx .badge:hover{border-color:var(--mut)}
.sbx .chipL{font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;border:0;border-radius:0;background:none;padding:0;display:inline-flex;align-items:center;gap:8px;min-height:var(--h-small);color:var(--mut);white-space:nowrap}   /* 1.1.0 (D5) a tag: no box */
.sbx .chipL.on{border-color:var(--ok);color:var(--ok)}
.sbx .chipL.off{color:var(--dim)}
.sbx .chipL.stop{border-color:var(--warn);color:var(--warn)}
/* a picture of the moment on their deck: paper, ink, the picture radius */
.sbx .moment{background:var(--paper);color:var(--ink);border-radius:6px;padding:16px;max-width:360px}
.sbx .moment h4{margin:0 0 6px;font:600 17px/1.3 system-ui,sans-serif}
.sbx .moment p{margin:0 0 12px;font-size:14px;color:var(--ink-soft)}
.sbx .moment .mb{display:block;box-sizing:border-box;text-align:center;padding:8px 12px;border-radius:var(--r-ctl);margin:0 0 8px;font-weight:600;border:1px solid var(--ink);color:var(--ink);background:var(--paper)}
.sbx .msg:empty{display:none}
.sbx .ghRuleText{white-space:pre-wrap;overflow-wrap:anywhere;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:12px 16px;margin:12px 0;font-size:14px;line-height:1.5;color:var(--fg)}
.sbx .moment .mb.call{background:var(--org);border-color:var(--org);color:var(--ink)}
.sbx .moment .sk{font-size:13px;color:var(--ink-soft);text-align:center}
/* ---- from sbDemoCss ---- */
#sbDemoStrip{position:relative;z-index:1;display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 40px;background:var(--bg);border-bottom:1px solid var(--line)}
#sbDemoStrip .lbl{font:500 12px var(--mono);letter-spacing:.08em;color:var(--mut);margin-right:4px}
#sbDemoStrip .st{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line2);background:transparent;color:var(--fg);border-radius:var(--r-ctl);min-height:32px;padding:4px 12px;font:inherit;font-size:13px;cursor:pointer}
#sbDemoStrip .st:hover{border-color:var(--mut)}
#sbDemoStrip .st .n{font:500 11px var(--mono);color:var(--mut)}
#sbDemoStrip .st.done .n{color:var(--ok)}
#sbDemoStrip .st.now{border-bottom-color:var(--org);box-shadow:inset 0 -1px 0 var(--org)}
#sbDemoStrip .done-end{margin-left:auto}
#sbDir{position:fixed;inset:0;z-index:2147480000;background:var(--scrim)}
#sbDir .pnl{position:absolute;top:0;right:0;bottom:0;width:min(380px,100%);background:var(--bg);border-left:1px solid var(--line);padding:22px;overflow:auto;display:flex;flex-direction:column;gap:10px}
#sbDir h3{margin:0 0 4px;font:400 22px/1.2 var(--display)}
#sbDir .acts2{display:flex;flex-direction:column;gap:8px}
#sbDir .acts2 .btn{justify-content:flex-start;text-align:left;width:100%}
#sbDir .row .btn{white-space:nowrap;flex:none}
#sbDir .row{display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid var(--line);padding-top:12px;margin-top:6px}
#sbDir .msg{min-height:1.2em}
.sbCompose{position:fixed;inset:0;z-index:85;background:var(--scrim);display:flex;align-items:center;justify-content:center;padding:16px}
.sbCompose .win{width:min(640px,100%);background:var(--panel);color:var(--fg);border:1px solid var(--line);border-radius:12px;box-shadow:none;overflow:hidden;font:14px/1.45 var(--body);position:relative}
.sbCompose .bar{border-bottom:1px solid var(--line);padding:12px 16px;font-weight:600;display:flex;justify-content:space-between}
.sbCompose .f{padding:8px 16px;border-bottom:1px solid var(--line);color:var(--mut)}
.sbCompose .f b{color:var(--fg);font-weight:500}
.sbCompose .body{padding:14px 14px 18px;min-height:230px}
.sbCompose .chip{position:absolute;right:14px;top:96px;font:12px/1 var(--body);padding:6px 10px;border-radius:var(--r-ctl);background:none;border:1px solid var(--line2);color:var(--fg)}
.sbCompose img.bn{display:block;width:400px;max-width:100%;height:auto;border-radius:12px;margin-top:6px}
.sbCompose .cap{padding:10px 14px;background:var(--panel);border-top:1px solid var(--line);color:var(--mut);font-size:13px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.sbx .lede.sbBig{font-size:17px;color:var(--fg)}
/* 0.95.0 (D20, L18) the first card's paste line: one line, above the question */
.sbFirst .sbHaveInv{margin:0 0 16px;padding:0 0 16px;border-bottom:1px solid var(--line)}
.sbFirst .sbHaveInv label.f{flex:1 0 100%;margin:0}
/* 0.95.0 (D15) Results: the Banner state under its digit; the calls as one row */
.sbx .sbSends td.sbBan small{display:block;font-size:12px;color:var(--mut);line-height:1.4}
.sbx .sbCallsRow{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 24px;padding:12px 0;border-top:1px solid var(--line);color:var(--mut);font-size:14px}
.sbx .sbCallsRow .eyebrow{flex:1 0 100%}
.sbx .sbCallsRow b{font:300 26px/1.2 var(--display);color:var(--fg);font-variant-numeric:tabular-nums}
/* 0.96.0 (J1 to J6) THEIR JOURNEY: their pages drawn at phone size, in order; press one, its words on the left, it redraws on the
   right. The phone takes the tenant's own colours inline (as the page does); everything else is a token. */
.sbx .jTabs{margin-bottom:12px}
.sbx .jStrip{display:flex;gap:12px;overflow-x:auto;padding:4px 0 12px;scroll-snap-type:x proximity}
.sbx .jStage{all:unset;box-sizing:border-box;cursor:pointer;flex:none;display:flex;flex-direction:column;gap:8px;width:184px;scroll-snap-align:start;border-radius:var(--r);padding:4px}
.sbx .jStage:focus-visible{outline:2px solid var(--org);outline-offset:2px}
.sbx .jStage.cur{box-shadow:0 0 0 2px var(--org)}
.sbx .jN{font-size:var(--t13);font-weight:600;color:var(--mut)}
.sbx .jStage.cur .jN{color:var(--fg)}
.sbx .jPhone{box-sizing:border-box;width:176px;min-height:360px;border-radius:var(--r);padding:16px 12px;display:flex;flex-direction:column;gap:8px;font-size:var(--t12);line-height:1.4;overflow:hidden;box-shadow:0 0 0 1px var(--line)}
.sbx [data-jdraw] .jPhone,.sbx [data-draw] .jPhone{width:min(280px,100%);min-height:520px;padding:24px 16px;font-size:var(--t14)}
.sbx .jHi{font-size:var(--t22);font-weight:600;line-height:1.1}
.sbx [data-jdraw] .jHi,.sbx [data-draw] .jHi{font-size:var(--t30)}
.sbx .jL2{font-weight:400}
.sbx .jWho{display:flex;align-items:center;gap:8px}
.sbx .jFace{flex:none;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;overflow:hidden;background:var(--panel);color:var(--fg);font-weight:600}
.sbx .jFace img{width:100%;height:100%;object-fit:cover}
.sbx .jFace.jBig{width:96px;height:96px;margin:0 auto}
.sbx .jMsg{margin:0}
.sbx .jBtn{display:flex;align-items:center;justify-content:center;min-height:36px;padding:4px 12px;border-radius:var(--r-ctl);font-weight:600;text-align:center}
.sbx .jBtn.jPulse{box-shadow:0 0 0 2px currentColor inset}
/* 1.3.2 (item 1) What they see, the press: the pop-up as the page draws it (the face, the member's line, the one button) */
.sbx .jPop{display:flex;flex-direction:column;align-items:center;gap:12px;padding:16px 0;text-align:center}
.sbx .jPopLine{margin:0;font-weight:600}
.sbx .jBook,.sbx .jSmall{font-size:var(--t12);opacity:1;text-decoration:underline;text-underline-offset:2px;align-self:center}
.sbx .jSmall{text-decoration:none;align-self:flex-start}
.sbx .jTop{margin:0;font-weight:600}
.sbx .jBubble{border-radius:var(--r);padding:8px 12px;box-shadow:0 0 0 1px currentColor inset}
.sbx .jFixed{font-weight:600}
.sbx .jBar{border-radius:var(--r-ctl);padding:8px 12px;text-align:center;box-shadow:0 0 0 1px currentColor inset}
.sbx .jEnd{margin:0;font-size:var(--t16)}
.sbx .jMail{background:var(--paper);color:var(--ink);border-radius:var(--r-pic);margin:-4px;padding:8px;display:flex;flex-direction:column;gap:8px;flex:1}
.sbx .jMailTop{font-size:var(--t11);font-family:var(--mono);color:var(--ink-soft);border-bottom:1px solid var(--paper-line);padding-bottom:4px}
.sbx .jMailTxt{margin:0;color:var(--ink)}
.sbx .jBnr{display:block;width:100%;height:auto;border-radius:var(--r-pic)}
.sbx .jBnrNone{color:var(--ink-soft);font-size:var(--t12)}
.sbx .jCard{margin-top:12px;border-top:1px solid var(--line);padding-top:12px;display:flex;flex-direction:column;gap:8px}
.sbx .jCam{display:flex;align-items:center;justify-content:center;height:96px;border-radius:var(--r-pic);background:var(--deep);color:var(--dim);font-size:var(--t12)}
.sbx .jEdit{border-top:1px solid var(--line);padding-top:16px}
.sbx .jHello{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.sbx .jHelloV{display:block;width:100%;max-width:420px;border-radius:var(--r-pic);background:var(--deep)}
.sbx .rmHead{margin:0 0 8px}
.sbx .sbRing{margin-top:16px}
.sbx .sbRing input{max-width:120px}
/* 0.96.0 (K1, CONTRACTS.md A59) the stage in the call view: the visitor's slide under the faces, Back, Next, a number, Hide */
.cxStageDeck{flex:1;min-height:0;display:flex;flex-direction:column;gap:8px;padding:8px 0 0}
.cxStageFrame{flex:1;min-height:200px;display:flex;align-items:center;justify-content:center;background:var(--deep);border-radius:12px;overflow:hidden}
.cxStageFrame[hidden]{display:none}
.cxStageFrame canvas{display:block;border-radius:6px}
.cxStageBar{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.cxStageNum{width:72px}
/* ---- 0.98.0 SB S (S2, S3) Settings is the setup: the glance, a hairline list on the card, a fact per row and one Change; the three
   step tabs with their tick, the chosen one the orange ring; the step's kinds as rows; Your other pages as rows ---- */
.sbx .sbSetLede{margin:4px 0 16px}
.sbx .sbGlanceCard,.sbx .sbPart,.sbx .sbStep{margin:0 0 16px}
.sbx dl.sbGlance{margin:0}
.sbx .sbGlRow{display:grid;grid-template-columns:160px minmax(0,1fr) auto;gap:8px 12px;align-items:center;padding:12px 0;border-top:1px solid var(--line)}
.sbx .sbGlRow:first-child{border-top:0;padding-top:0}
.sbx .sbGlRow dt{color:var(--mut);font-size:14px}
.sbx .sbGlRow dd{margin:0;display:flex;align-items:center;gap:12px;flex-wrap:wrap;min-width:0;overflow-wrap:anywhere}
.sbx .sbGlRow .btn{min-height:32px;padding:4px 12px}
.sbx .sbGlFace{width:48px;height:48px;border-radius:50%;overflow:hidden;display:inline-grid;place-items:center;flex:none;border:1px solid var(--line2);background:var(--bg);font:400 22px/1 var(--display);color:var(--fg)}
.sbx .sbGlFace img{width:48px;height:48px;object-fit:cover;display:block}
.sbx .sbGlTile{display:inline-block;width:160px;line-height:0}
.sbx .sbGlTile svg{width:160px;height:auto;border-radius:6px}
@media (max-width:560px){.sbx .sbGlRow{grid-template-columns:minmax(0,1fr) auto}.sbx .sbGlRow dd{grid-column:1/-1;grid-row:2}}
/* 0.99.0 (D4) Your desk and Your company, short: one hairline row per thing, as the glance; Change opens its fields in place */
.sbx .sbFold{border-top:1px solid var(--line)}
.sbx .sbSecT+.sbFold{border-top:0}
.sbx .sbFold>summary{display:grid;grid-template-columns:160px minmax(0,1fr) auto;gap:8px 12px;align-items:center;padding:12px 0;cursor:pointer;list-style:none}
.sbx .sbFold>summary::-webkit-details-marker{display:none}
.sbx .sbFold>summary:focus-visible{outline:2px solid var(--org);outline-offset:2px;border-radius:var(--r)}
.sbx .sbFoldT{color:var(--mut);font-size:14px}
.sbx .sbFoldNow{min-width:0;overflow-wrap:anywhere}
.sbx .sbFoldGo{display:inline-flex;align-items:center;min-height:var(--h-small);padding:4px 12px;border:1px solid var(--line2);border-radius:var(--r-ctl);font-size:14px;color:var(--fg)}
.sbx .sbFold>summary:hover .sbFoldGo{border-color:var(--mut)}
.sbx .sbFoldB{padding:0 0 16px}
.sbx .sbFoldB>div:first-child>h3:first-child{display:none}   /* the block's own heading is the row's name */
@media (max-width:560px){.sbx .sbFold>summary{grid-template-columns:minmax(0,1fr) auto}.sbx .sbFoldNow{grid-column:1/-1;grid-row:2}}
.sbx .sbKinds{display:flex;flex-direction:column;margin:0 0 12px}
.sbx .sbKind{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-top:1px solid var(--line);cursor:pointer}
.sbx .sbKind:first-child{border-top:0}
.sbx .sbKind input{accent-color:var(--org);margin-top:4px}
.sbx .sbKind small{display:block;color:var(--mut);font-size:13px}
.sbx .sbYou label.btn,.sbx .sbMaster label.btn{cursor:pointer}
.sbx .sbYou .acts:focus-within label.btn,.sbx .sbMaster .acts:focus-within label.btn{outline:2px solid var(--org);outline-offset:2px}
.sbx .sbPgRow{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.sbx .sbPgRow:first-child{border-top:0}
.sbx .sbPgRow p{margin:4px 0 0}
.sbx .sbPgForm{padding:12px 0;border-top:1px solid var(--line)}
.sbx .jSide [data-jbig]{margin:0 0 16px}
.sbTeam{max-width:1100px;margin:16px auto 0;width:100%}
.sbTeam .sbSheet{margin:16px 0 0}

/* 1.0.0 (U2; fixtures SWITCH) the Available switch, from sbAvailSwCss. Top right of every desk screen: the drawn switch (the
   popup's and Settings' own shape) and its word beside it, no pill border, no tenant name. Green on, the ground off; while a call
   is going the amber edge and knob, never orange (orange is a choice of yours). */
.btn.avail.sbAvailSw{gap:8px;border-color:transparent;background:none;padding:0 8px;min-width:0;font-size:14px;color:var(--mut)}
.btn.avail.sbAvailSw:hover{border-color:var(--mut)}
.btn.avail.sbAvailSw i{position:relative;flex:none;width:36px;height:20px;border-radius:var(--r-sw);border:1px solid var(--line2);background:var(--bg);transition:background-color var(--fast) var(--ease),border-color var(--fast) var(--ease)}
.btn.avail.sbAvailSw i::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:var(--r-knob);background:var(--mut);transition:left var(--fast) var(--ease),background-color var(--fast) var(--ease)}
.btn.avail.sbAvailSw[aria-checked=true] i{background:var(--ok);border-color:var(--ok)}
.btn.avail.sbAvailSw[aria-checked=true] i::after{left:18px;background:var(--fg)}
#availBtn.sbAvailSw[data-mode=oncall] i,#sbAvailBtn.sbAvailSw[data-mode=oncall] i{background:var(--bg)!important;border-color:var(--warn)}
#availBtn.sbAvailSw[data-mode=oncall] i::after,#sbAvailBtn.sbAvailSw[data-mode=oncall] i::after{left:18px;background:var(--warn)}
/* 1.3.8 (item 0, FAULT 12, W12) the switch is the member's own state (available_for_calls, as /sb/me says it), drawn the same on every
   screen; a desk whose sound is off still rings (the seat rule) and says so with an amber edge, never by emptying the switch */
.btn.avail.sbAvailSw.nosound i{border-color:var(--line2)}.btn.avail.sbAvailSw.nosound[aria-checked=true] i{border-color:var(--ok)}   /* 1.4.4 (item 5) sound off is the muted speaker beside the switch (desk.html), never amber */

/* 1.0.0 (U1; fixtures HOW_IT_WORKS) How it works, from sbHowCss: a title and one list of three pictures on the hairline. The
   Gmail picture is someone else's thing: white at the picture radius, no card border. The phones are Their journey's. */
.sbx.hw .hwList{list-style:none;margin:0;padding:0;display:grid;gap:24px}
.sbx.hw .hwPic{border-top:1px solid var(--line);padding-top:16px}
.sbx.hw .hwN{font-size:17px;margin:0 0 12px}
.sbx.hw .hwN b{font:500 11px var(--mono);color:var(--mut);margin-right:8px}
.sbx.hw .hwMail{background:var(--paper);color:var(--ink);border-radius:var(--r-pic);padding:16px;max-width:520px;font-size:14px}
.sbx.hw .hwMail p{margin:0 0 8px}
.sbx.hw .hwMailTop{border-bottom:1px solid var(--paper-line);padding-bottom:8px;margin-bottom:12px;color:var(--ink-soft)}
.sbx.hw .hwSig{color:var(--ink-soft)}
.sbx.hw .hwMail .jBnr{display:block;max-width:100%;height:auto;border-radius:var(--r-pic)}
.sbx.hw .hwState{margin:12px 0 0;color:var(--mut)}
.sbx.hw .flag.hwOk{border-color:var(--ok);color:var(--fg);margin:0 8px 0 0}
.sbx.hw .flag.hwWarn{border-color:var(--warn);color:var(--fg);margin:0 8px 0 0}
.sbx.hw .hwSw{display:flex;gap:8px;margin:0 0 12px}
.sbx.hw .hwSw i{width:24px;height:24px;border-radius:50%;box-shadow:0 0 0 1px var(--line)}
.sbx.hw .hwStages .jBnr{display:block;width:176px;max-width:100%;height:auto;border-radius:var(--r-pic)}
.sbx.hw .hwRing{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start}
.sbx .lnk{border:0;background:none;padding:0;min-height:0;color:var(--fg);font:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.sbx .lnk:hover{color:var(--mut)}
.sbx .lnk:focus-visible{outline:2px solid var(--org);outline-offset:2px}

/* 1.0.0 (A3, SB A) THE RING CARD. One card per ring (0.99.2 clears them); its two quiet controls sit in its top corner; minimised,
   it is one line at the foot of the desk (the name and the brief, a press opens it). The stack never reaches the header: the
   Available switch and the menu stay in view and pressable. Tokens only. */
#events{max-height:calc(100vh - 128px - var(--talkH,128px));max-height:calc(100svh - 128px - var(--talkH,128px));overflow-y:auto;overscroll-behavior:contain}
#events .ev{flex:none}
#events .ev .cardCtl{float:right;display:flex;gap:4px;margin:-4px -8px 0 8px}
#events .ev .cardCtl .btn{min-height:32px;min-width:32px;padding:0 8px;border-color:transparent;background:transparent;color:var(--mut)}
#events .ev .cardCtl .btn:hover{border-color:var(--mut)}
#events .ev.min{order:1;display:flex;align-items:center;gap:8px;padding:0 4px 0 12px;min-height:36px;border-width:1px;border-color:var(--line2)}
#events .ev.min > :not(.cardCtl):not(.evOne){display:none}
#events .ev.min .cardCtl{order:2;float:none;margin:0}
#events .ev.min .cardCtl [data-min]{display:none}
#events .evOne{flex:1;min-width:0;min-height:36px;padding:0;border:0;background:transparent;color:var(--fg);font:inherit;font-size:14px;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
#events .evOne[hidden]{display:none}
#events .ev.min > .evOne:not([hidden]){display:block}
#events .evOne:focus-visible{outline:2px solid var(--org);outline-offset:2px;border-radius:6px}
/* 1.0.0 (A1) Their journey's After a call: the member's own line under a hairline */
.sbx .jOwn{padding-top:8px;border-top:1px solid currentColor}
/* 1.0.5 (INT-1005 item 1) Send links opens on the companies showing interest: the count first, each company one pressable row
   (C: a 6px-corner rectangle on --line2), its New tag 11 mono caps with no box. D styles it further in 1.1.0. */
.sbx .sbCount{font-weight:600;margin:0 0 8px}
.sbx .sbCos{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.sbx .sbCo{display:block;width:100%;min-height:32px;text-align:left;background:transparent;color:var(--fg);border:1px solid var(--line2, var(--line));border-radius:6px;padding:6px 10px;font:inherit;cursor:pointer}
.sbx .sbCo:hover,.sbx .sbCo:focus-visible{border-color:var(--fg)}
.sbx .sbCo small{display:block;color:var(--mut);font-size:13px;margin-top:2px}
.sbx .sbTag{font:11px/1 var(--mono, ui-monospace, monospace);text-transform:uppercase;letter-spacing:.04em;color:var(--mut);margin-left:6px}

/* 1.1.0 (D2, D2a; desk/sb/path.js) HOME'S DASHBOARD under the AI's headline. The path is C's numbered rows on hairlines: a done step
   its word with an --ok number, the next one open (its title at 22, its one sentence, its one button), the rest one line in --dim.
   After set-up: one line of what is true today, one button, Results as a quiet word. No number on home but the steps'. */
.sbx .sbPath{list-style:none;margin:0;padding:0;text-align:left;width:100%}
.sbx .sbPath li{display:grid;grid-template-columns:40px minmax(0,1fr);align-items:baseline;border-top:1px solid var(--line);padding:12px 0}
.sbx .sbPath li.next{padding:20px 0}
.sbx .sbPath .n{font:300 30px/1 var(--display);color:var(--dim)}
.sbx .sbPath li.done .n{color:var(--ok)}
.sbx .sbPath li.next .n{color:var(--fg)}
.sbx .sbPath .t{font:400 16px/1.4 var(--body);color:var(--dim)}
.sbx .sbPath li.done .t{color:var(--mut)}
.sbx .sbPath li.next .t{font:400 22px/1.2 var(--display);color:var(--fg)}
.sbx .sbPath .say{margin:8px 0 16px;color:var(--mut);font-size:16px}
.sbx .sbDash{text-align:center}
.sbx .sbDash .today{font:400 22px/1.3 var(--display);color:var(--fg);margin:0 0 16px}
.sbx .sbDash .quiet{margin:16px 0 0;font-size:14px;color:var(--mut)}
.sbx .sbDash .quiet .lnk{color:var(--mut)}

/* 1.1.0 (D3, D4) SETTINGS AS SET A THING (desk/sb/setup.js). Each row on a hairline: its title, what it is now in words, and Change
   (a 32 rectangle) on one line; Change opens its fields under it with one Save; Save closes them, and the line after Save sits
   under the row in --fg with its word link. The website switch and what is switched on head Your company. */
.sbx.sbSetC{max-width:760px;margin:0 auto}
.sbx .sbRows{margin:0 0 32px}
.sbx .sbRow{border-top:1px solid var(--line);padding:12px 0}
.sbx .sbRow .sum{display:grid;grid-template-columns:minmax(120px,200px) minmax(0,1fr) auto;gap:12px;align-items:center}
.sbx .sbRow .sum .t{font:400 16px/1.4 var(--body);color:var(--fg);margin:0}
.sbx .sbRow .sum .now{margin:0;color:var(--mut);font-size:14px;overflow-wrap:anywhere;display:flex;align-items:center;gap:8px}
.sbx .sbRow .sum .now .face{width:32px;height:32px;border-radius:50%;object-fit:cover}
.sbx .sbRow .body{padding:16px 0 4px;display:grid;gap:8px;max-width:520px}
.sbx .sbRow .body .acts{margin-top:8px}
.sbx .sbRow .after{margin:8px 0 0;color:var(--fg);font-size:14px}
.sbx .sbRow .after:focus{outline:none}
.sbx .sbOnRow{display:flex;flex-wrap:wrap;align-items:center;gap:24px;padding:0 0 16px}
.sbx .sbOnRow .st{font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg);display:inline-flex;align-items:center;gap:8px;min-height:var(--h-small)}
.sbx .sbOnRow .after{flex:1 0 100%;margin:0;color:var(--fg);font-size:14px}
.sbx .dot{width:8px;height:8px;border-radius:50%;display:inline-block;background:var(--dim)}
.sbx .dot.ok{background:var(--ok)}.sbx .dot.warn{background:var(--warn)}
.sbx .sbSheetBg{position:fixed;inset:0;background:var(--scrim);display:grid;place-items:center;z-index:30;padding:16px}
.sbx .sbSheetBg[hidden]{display:none}
.sbx .sbSheetC{background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:var(--float);padding:24px;max-width:min(640px,100%);max-height:90vh;overflow:auto}
.sbx .sbPic img{display:block;max-width:100%;height:auto;border-radius:6px}
@media (max-width:560px){.sbx .sbRow .sum{grid-template-columns:minmax(0,1fr) auto}.sbx .sbRow .sum .now{grid-column:1/-1;grid-row:2}}

/* 1.1.0 (D7a) the visitor's live position: their page as an outline (the hairline at 3:1), the part they can see filled in --line,
   their pointer an 8px --fg dot. Moves at the stream's pace; nothing animates on its own. */
.lvPos{margin:16px 0 0}
.lvPos .pg{position:relative;width:96px;aspect-ratio:1/2.2;border:1px solid var(--line2);border-radius:var(--r-ctl);overflow:hidden;background:var(--bg)}
.lvPos .vp{position:absolute;left:0;right:0;background:var(--line);transition:top var(--move) var(--ease),height var(--move) var(--ease)}
.lvPos .pt{position:absolute;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:var(--fg);transition:left var(--move) var(--ease),top var(--move) var(--ease)}
.lvPos figcaption{font-size:12px;margin-top:8px}

/* 1.1.0 (D8) Results: each row's four stages as status words with dots; the calls' numbers as one small row of type above the list */
#meetRows .prow .stg{display:inline-flex;align-items:center;gap:6px;font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-right:12px;min-height:var(--h-small)}
#meetRows .prow .stg .dot{width:8px;height:8px;border-radius:50%;background:var(--dim)}
#meetRows .prow .stg.on{color:var(--fg)}
#meetRows .prow .stg.on .dot{background:var(--ok)}
#meetRows .prow .stg small{font:400 13px var(--body);letter-spacing:0;text-transform:none;color:var(--mut)}
.mCalls{display:flex;flex-wrap:wrap;gap:24px;margin:16px 0 0;font-size:13px;color:var(--mut)}
.mCalls b{font-weight:500;color:var(--fg)}
#meetRows .prow .ticks{display:flex;flex-wrap:wrap;align-items:center;gap:0}

/* 1.1.0 (D9a) THE DESK'S CALL VIEW TAKES THE RECIPIENT PAGE'S LAYOUT when there are slides: the name line across the top
   ("Conor · HubSpot · on your deck page"), the slides on the left with the desk's slide box (Back, the number, Next, Hide the
   slides), the call on the right with its controls under the faces. Hide the slides gives the call the whole width. */
#cvMain:has(> .cxStageDeck){display:grid;grid-template-columns:minmax(0,1.6fr) minmax(300px,1fr);grid-template-rows:auto minmax(0,1fr) auto auto;column-gap:16px}
#cvMain:has(> .cxStageDeck) > .cvHead{grid-column:1/-1;grid-row:1}
#cvMain:has(> .cxStageDeck) > .cxStageDeck{grid-column:1;grid-row:2/5;padding:0 0 16px 16px;order:0}
#cvMain:has(> .cxStageDeck) > #cvStage{grid-column:2;grid-row:2;min-height:0}
#cvMain:has(> .cxStageDeck) > .cvCap{grid-column:2;grid-row:3}
#cvMain:has(> .cxStageDeck) > .cvNote{grid-column:2;grid-row:4}
#cvMain:has(> .cxStageDeck .cxStageFrame[hidden]){grid-template-columns:auto minmax(0,1fr)}
#cvMain:has(> .cxStageDeck .cxStageFrame[hidden]) > .cxStageDeck{padding-right:0}
.cxStageFrame{border-radius:var(--r-ctl)}
.cxStageBar .cxStageNum{width:72px;min-height:var(--h-small)}
@media (max-width:900px){#cvMain:has(> .cxStageDeck){grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr) auto auto}#cvMain:has(> .cxStageDeck) > .cxStageDeck{grid-column:1;grid-row:2;padding:0 16px}#cvMain:has(> .cxStageDeck) > #cvStage{grid-column:1;grid-row:3}#cvMain:has(> .cxStageDeck) > .cvCap,#cvMain:has(> .cxStageDeck) > .cvNote{grid-column:1}}

/* 1.1.0 (D12) Help's answers as status words: 11 mono caps, an 8px dot, --ok for Yes and --warn for Check, no box */
.sbHelp .cn .st{display:inline-flex;align-items:center;gap:8px;font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg);border:0;background:none;padding:0;min-height:var(--h-small)}
.sbHelp .cn .st .dot{width:8px;height:8px;border-radius:50%;background:var(--warn)}
.sbHelp .cn .st.ok .dot{background:var(--ok)}

/* 1.1.0 (D13) Credits' sections are hairlines; the balance's own heading goes (the page's title says Credits) */
.sbx.sbCredC .nv,.sbx.sbCredC .sheet{background:none;border:0;border-top:1px solid var(--line);border-radius:0;padding:16px 0;box-shadow:none}
.sbx.sbCredC .sbRow .body{max-width:none}
/* 1.1.0 (D9a) the slide box's number is a field */
.cxStageBar .cxStageNum{background:var(--bg);border:1px solid var(--line2);border-radius:var(--r-ctl);color:var(--fg);padding:0 8px;font:inherit;font-size:14px}
/* 1.1.0 (D3) the desk's own fieldsets, lent to a row: hairlines, their legend a field label */
.sbx .sbRow .body fieldset{border:0;border-top:1px solid var(--line);border-radius:0;padding:12px 0 0;margin:0;min-width:0}
.sbx .sbRow .body legend{padding:0;font-size:14px;color:var(--fg)}
.sbx .sbOnRow .sbWebSw{flex:1 0 100%}.sbx .sbOnRow .sbWebSw .mut{margin:4px 0 0 48px;font-size:13px}
.sbx .sbRow .now .st{display:inline-flex;align-items:center;gap:8px;font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg)}
/* 1.2.2 (INT-122 item 11) Who it is for: a row of underlined words, the chosen one in the ink colour; no tab rule under them */
.sbx .sbWho.sbWhoWords{flex-direction:row;border-bottom:0;gap:16px;margin:0 0 8px}
.sbx .sbWho.sbWhoWords button{padding:6px 0;min-height:32px;border-bottom:0;margin:0;color:var(--mut);text-decoration:underline;text-underline-offset:3px}
.sbx .sbWho.sbWhoWords button[aria-selected="true"]{color:var(--fg);text-decoration-thickness:2px}
/* ---- 1.3.0 (D3) home is the room (sb/room.js): the display line, one line from their record, Step in; or "Nobody is in your
   room." and who came near, each a word that opens their row; or the path. The floating card stands aside on home for anyone
   home already shows in the room. ---- */
.sbx .rmHome{max-width:720px;margin:0 auto;text-align:left}
.sbx .rmHead{font:300 var(--t-display)/1.1 var(--display);color:var(--fg);margin:0 0 12px}
.sbx .rmRec{font-size:17px;line-height:1.5;color:var(--mut);margin:0 0 24px}
.sbx .rmAlso{margin:24px 0 0;padding:12px 0 0;border-top:1px solid var(--line);font-size:16px;color:var(--mut)}
.sbx .rmAlso .lnk{color:var(--fg)}
.sbx .rmList{list-style:none;margin:16px 0 0;padding:0}
.sbx .rmList li{border-top:1px solid var(--line);padding:12px 0}
.sbx .rmList .rmWho{color:var(--fg);text-decoration:none;text-align:left;font-size:16px;line-height:1.5}
.sbx .rmList .rmWho:hover{color:var(--mut)}
body.onHome .ev.arrive[data-room]{display:none}
/* ---- 1.3.0 (D7) the ledger (sb/ledger.js): one line of counts in 13 --mut; heads 11 mono caps; a date in 13 --fg with an --ok
   dot where reached, a --dim dash where not; the name in --fg with the company under it. At a phone's width a row is a block, each
   cell read with its head ("In the room 20/10"). ---- */
#wMeet .lgCounts{font-size:13px;color:var(--mut);margin:16px 0 12px}
#wMeet .ledger{width:100%;border-collapse:collapse}
#wMeet .ledger th{font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim);text-align:left;padding:12px 8px;border-bottom:1px solid var(--line)}
#wMeet .ledger td{padding:12px 8px;border-bottom:1px solid var(--line);font-size:13px;color:var(--fg);vertical-align:top}
#wMeet .ledger .lgWho{font-size:16px;color:var(--fg);text-decoration:none;text-align:left}
#wMeet .ledger .lgWho:hover{color:var(--mut)}
#wMeet .ledger small{display:block;font-size:13px;color:var(--mut)}
#wMeet .ledger .lgOn{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
#wMeet .ledger .lgOn .dot{width:8px;height:8px;border-radius:50%;background:var(--ok)}
#wMeet .ledger .lgNo{color:var(--dim)}
#wMeet .ledger .lgLast{color:var(--mut);min-width:160px}
#wMeet .ledger .lgActs{white-space:nowrap;text-align:right}
#wMeet .ledger .lgActs .lnk{margin-left:12px;font-size:13px}
#wMeet .ledger .lgActs .lnk.quiet{color:var(--mut)}
#wMeet .lgEarly{margin:16px 0 0;font-size:13px;color:var(--mut)}
#wMeet .lgEarly ul{margin:8px 0 0;padding:0 0 0 16px}
@media (max-width:720px){
  #wMeet .ledger thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  #wMeet .ledger tr{display:flex;flex-wrap:wrap;row-gap:8px;border-bottom:1px solid var(--line);padding:12px 0}
  #wMeet .ledger td{display:flex;flex-direction:column;gap:4px;flex:0 0 50%;border:0;padding:0}
  #wMeet .ledger td[data-h]::before{content:attr(data-h);font:500 11px/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
  #wMeet .ledger td[data-h="Who"],#wMeet .ledger td[data-h="Last"],#wMeet .ledger .lgActs{flex-basis:100%}
  #wMeet .ledger td[data-h="Who"]::before,#wMeet .ledger td[data-h="Last"]:empty{display:none}
  #wMeet .ledger td[data-h="Credit"]:empty,#wMeet .ledger td[data-h="From"]:empty{display:none}
  #wMeet .ledger .lgLast{min-width:0}
  #wMeet .ledger td[data-h="Invited"]{order:1}#wMeet .ledger td[data-h="At the door"]{order:2}#wMeet .ledger td[data-h="In the room"]{order:3}#wMeet .ledger td[data-h="Met"]{order:4}
  #wMeet .ledger td[data-h="Last"]{order:5}#wMeet .ledger td[data-h="From"]{order:6}#wMeet .ledger td[data-h="Credit"]{order:7}#wMeet .ledger .lgActs{order:8}
  #wMeet .ledger .lgActs{flex-direction:row;justify-content:flex-start;text-align:left}
  #wMeet .ledger .lgActs .lnk{margin:0 16px 0 0}
}

#wMeet .lnk{border:0;background:none;padding:0;min-height:0;color:var(--fg);font:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
#wMeet .lnk:focus-visible{outline:2px solid var(--org);outline-offset:2px}
/* 1.3.0 (D2) the press nobody answers, as the preview draws it: the line, and the slides staying (a white sheet, as a picture of their deck) */
.sbx .jSlides{height:96px;border-radius:var(--r-pic);background:var(--paper);margin:8px 0}
/* ---- 1.3.0 (D9) New leads, the nearest first: one line each on hairlines; the companies as lines that stop ---- */
.sbx .sbNear{list-style:none;margin:16px 0 24px;padding:0}
.sbx .sbNear li{border-top:1px solid var(--line);padding:12px 0;font-size:16px;color:var(--fg)}
.sbx .sbNear .lnk{margin-left:8px}
.sbx li.sbCo{display:block;padding:12px 0;border-top:1px solid var(--line);color:var(--fg)}
.sbx li.sbCo small{display:block;font-size:13px;color:var(--mut)}
/* SB INT leads: a company's people and the decisions; plain buttons, the page's one orange stays Make a link for someone */
.sbx .sbPeople{list-style:none;margin:8px 0 0;padding:0}
.sbx .sbPeople li{padding:8px 0;border-top:1px dashed var(--line);font-size:14px}
.sbx .sbPeople li.sbP{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;justify-content:space-between}
.sbx .sbP .sbPWho{min-width:0;flex:1 1 220px}
.sbx .sbP .sbPWho small{display:block;color:var(--mut)}
.sbx .sbP .sbPAct{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center}
.sbx [data-pagemsg],.sbx .sbOpens{overflow-wrap:anywhere}   /* 1.3.0 (D9) the press-goes-to line wraps at 390 */
/* ---- 1.3.0 (D8) Your room: a row in the room carries Step in as a word beside it ---- */
.vzLine{display:flex;align-items:center;gap:12px}
.vzLine > .vzRow{flex:1;min-width:0}
.vzLine .vzStep{border:0;background:none;padding:0;color:var(--fg);font:500 14px/1 var(--body);text-decoration:underline;text-underline-offset:3px;cursor:pointer;white-space:nowrap}
.vzLine .vzStep:focus-visible{outline:2px solid var(--org);outline-offset:2px}
/* 1.3.0 (D10) a word on a card that floats (Wrap-up after a call) */
#events .lnk{border:0;background:none;padding:0;min-height:0;color:var(--fg);font:500 14px/1 var(--body);text-decoration:underline;text-underline-offset:3px;cursor:pointer;margin-left:12px}
#events .lnk:focus-visible{outline:2px solid var(--org);outline-offset:2px}
/* 1.3.5 (item 2) Settings, Your banner: the frames as they play, each edited where it is, and the tile beside them */
.sbx .sbBanEd{display:grid;grid-template-columns:minmax(0,1fr) 180px;gap:24px;align-items:start;margin-top:12px}
.sbx .sbBanFr{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.sbx .sbBanF{border-top:1px solid var(--line);padding:12px 0 0}
.sbx .sbBanF h4{margin:0 0 6px;font:500 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.sbx .sbBanTxt{margin:0;color:var(--fg)}
.sbx .sbBanTile{margin:0;position:sticky;top:12px}
.sbx .sbBanTile img{display:block;width:162px;height:auto;border-radius:12px}
@media (max-width:640px){.sbx .sbBanEd{grid-template-columns:minmax(0,1fr)}.sbx .sbBanTile{position:static}}
/* 1.3.6 (item 16; MASTER 30/10 08:20) Make a link for someone is an owner's beta switch, off by default: with it off the maker is absent */
body.noMaker [data-mkopen], body.noMaker #sbMkBox, body.noMaker [data-pgo="leads:make"], body.noMaker [data-jt="make"], body.noMaker [data-jp="make"]{display:none!important}
/* SB INT leads (REVIEW L7): with New leads off, home's door to it and its line about companies showing interest are absent too */
body.noLeads [data-pgo="leads"], body.noLeads [data-dash="today"] [data-today]{display:none!important}
/* 1.4.0 (INT-140 item 6; the stills 06-room-live, 06-room-step) YOUR ROOM AS TABS: one tab per visitor, the name with a dot (green live,
   amber waiting, an open ring on the slides), the company, the line; the chosen one underlined. The surface: what they are looking at on
   the left, their line and Step in on the right. */
.sbx .rmTabs,#wLive .rmTabs{display:flex;gap:8px;flex-wrap:wrap}
.sbx .rmTabs[hidden],#wLive .rmTabs[hidden]{display:none}
.sbx .rmTab,#wLive .rmTab{all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:auto 1fr;column-gap:8px;align-items:center;padding:8px 12px;border:1px solid var(--line);border-radius:6px;min-width:180px;background:transparent}
.sbx .rmTab[aria-selected="true"],#wLive .rmTab[aria-selected="true"]{border-color:var(--org);background:var(--panel)}
.sbx .rmTab b,#wLive .rmTab b{font-weight:600;color:var(--fg)}
.sbx .rmTab .rmCo,.sbx .rmTab .rmLine,#wLive .rmTab .rmCo,#wLive .rmTab .rmLine{grid-column:2;font-size:12px;color:var(--mut)}
.sbx .rmDot,#wLive .rmDot{width:12px;height:12px;border-radius:50%;border:2px solid var(--mut);display:inline-block}
.sbx .rmDot.live,#wLive .rmDot.live{background:var(--ok);border-color:var(--ok)}
.sbx .rmDot.wait,#wLive .rmDot.wait{background:var(--warn);border-color:var(--warn)}
.sbx .rmSurface,#wLive .rmSurface{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center}
.sbx .rmSurface .rmRight,#wLive .rmSurface .rmRight{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.sbx .rmPressed,#wLive .rmPressed{font-weight:600;margin:0}
/* 1.4.4 (row 3) the rules above reached Your room only inside .sbx, which #wLive is not: the tabs drew as plain grey buttons since 1.4.0. A visitor who left keeps their card, its dot an empty grey ring */
#wLive .rmDot.gone{border-color:var(--line2);background:transparent}

/* ---- 1.4.1 CONTENT (INT-141; the stills `Claude outputs/design/141-content/`; DESIGN-RULES: the page navy, pictures of someone else's
   thing white at the picture radius, the room's screens the deck's navy with the cream card, orange only on the one button and the tile's,
   the chosen tab or swatch the 2px underline) ---- */
.sbx.sbContent{gap:12px;padding-bottom:40px}
.sbx .sbCtTabs{margin:0 0 4px}
.sbx .sbCtLede{margin:4px 0 8px;font-size:17px;color:var(--mut);line-height:1.5}
.sbx .sbCtLede b{color:var(--fg);font-weight:500}
.sbx .sbCtSix{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px 24px}
.sbx .sbCtName{margin:0 0 4px;font-size:13px;color:var(--mut)}
.sbx .sbCtPick{all:unset;box-sizing:border-box;display:block;width:100%;max-width:400px;aspect-ratio:400/120;border-radius:var(--r-pic);overflow:hidden;cursor:pointer;background:var(--deep);border:1px solid transparent}
.sbx .sbCtPick:hover{border-color:var(--mut)}
.sbx .sbCtPick:focus-visible{outline:2px solid var(--org);outline-offset:2px}
.sbx .sbCtPick img,.sbx .sbCtBig img{display:block;width:100%;height:auto;border-radius:var(--r-pic)}
.sbx .sbCtBig{max-width:560px;min-height:120px}
.sbx .sbCtEdit{border:1px solid transparent;border-radius:var(--r-ctl);padding:2px 6px;margin:-3px -7px;cursor:text;outline:none}
.sbx .sbCtEdit:hover{border-color:var(--line2)}
.sbx .sbCtEdit[contenteditable=true]:focus{border-color:var(--org);box-shadow:inset 0 0 0 1px var(--org)}   /* a field: the inset ring */
.sbx .sbCtEdit[contenteditable=false]{cursor:default;border-color:transparent;box-shadow:none}
.sbx .sbTok{background:var(--panel);border-radius:var(--r-knob);padding:0 4px;color:inherit}
.sbx .sbCtLine{margin:4px 0 0;max-width:560px;font-size:17px;color:var(--fg)}
.sbx .sbCtSmall{margin:2px 0 0;font-size:13px}
.sbx .sbCtSwatches{display:flex;flex-wrap:wrap;gap:16px 20px;align-items:flex-start}
.sbx .sbCtSw{all:unset;box-sizing:border-box;cursor:pointer;display:grid;gap:6px;justify-items:start;padding-bottom:4px;border-bottom:2px solid transparent;font-size:13px;color:var(--mut)}
.sbx .sbCtSw i{display:block;width:48px;height:28px;border-radius:var(--r-sw);position:relative}
.sbx .sbCtSw i b{position:absolute;right:8px;top:8px;width:12px;height:12px;border-radius:50%}
.sbx .sbCtSw:hover{color:var(--fg)}
.sbx .sbCtSw[aria-pressed=true]{color:var(--fg);border-bottom-color:var(--org)}
.sbx .sbCtSw:focus-visible{outline:2px solid var(--org);outline-offset:2px}
.sbx .sbCtOwn{display:grid;grid-template-columns:auto minmax(0,120px);gap:4px 8px;align-items:center;padding-bottom:4px;border-bottom:2px solid transparent}
.sbx .sbCtOwn .sbCtOwnT{grid-column:1/-1;font-size:13px;color:var(--mut)}
.sbx .sbCtOwn label.f{margin:0;font-size:13px}
.sbx .sbCtOwn input.t{min-height:32px;height:32px;padding:0 8px;font:500 13px var(--mono);width:100%}
.sbx .sbCtEffect{margin-top:4px}
.sbx .sbCtSave{display:flex;align-items:center;gap:16px;min-height:40px;flex-wrap:wrap}
.sbx .sbCtSave .msg{min-height:0;font-size:14px}
.sbx .sbCtBlock{border-top:1px solid var(--line);padding-top:12px;margin-top:4px;display:grid;gap:4px}
.sbx .sbCtFoot{display:flex;justify-content:space-between;align-items:center;gap:16px;border-top:1px solid var(--line);padding-top:12px;margin-top:8px;flex-wrap:wrap}
.sbx .sbCtFoot p{margin:0;font-size:14px}
.sbx .sbCtFoot .acts{margin:0;display:flex;gap:12px}
.sbx .sbCtFoot .btn:disabled{color:var(--dim);border-color:var(--line);background:none;cursor:default}
.sbx .sbCtSteps{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.sbx .sbCtWalk{display:flex;gap:16px;flex-wrap:wrap}
.sbx .sbCtWalk button{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:baseline;gap:6px;min-height:32px;padding:0 0 2px;border-bottom:2px solid transparent;font-size:16px;color:var(--mut)}
.sbx .sbCtWalk button small{font:500 11px var(--mono);color:var(--dim)}
.sbx .sbCtWalk button:hover{color:var(--fg)}
.sbx .sbCtWalk button[aria-pressed=true]{color:var(--fg);font-weight:600;border-bottom-color:transparent}   /* 1.4.3 (15:34) the step you are on in white, no underline: the underlines are left to the choices under it */
.sbx .sbCtWalk button:focus-visible{outline:2px solid var(--org);outline-offset:2px}
.sbx .sbCtNames{font-size:14px;color:var(--mut)}
.sbx .sbCtNames b{font-weight:500;color:var(--fg)}
.sbx .sbCtScreen{display:grid;grid-template-columns:minmax(0,1fr) 360px;border:1px solid var(--line);border-radius:var(--r-ctl);min-height:480px;overflow:hidden}
.sbx .sbCtScreen > :only-child{grid-column:1/-1}
@media (max-width:860px){.sbx .sbCtScreen{grid-template-columns:minmax(0,1fr)}}
.sbx .sbCtCol{border-left:1px solid var(--line);padding:24px;display:grid;gap:12px;align-content:start}
@media (max-width:860px){.sbx .sbCtCol{border-left:0;border-top:1px solid var(--line)}}
.sbx .sbCtCol p{margin:0}
.sbx .sbCtCol .mut{font-size:16px;line-height:1.5}
/* the email, white at the picture radius, the member's words dim; the tile beside */
.sbx .sbCtEmail{background:var(--paper);color:var(--ink);padding:24px 32px;border-radius:var(--r-pic);margin:24px 0 24px 24px;align-self:start}
@media (max-width:860px){.sbx .sbCtEmail{margin:16px}}
.sbx .sbCtMailHead{margin:0 0 16px;padding-bottom:12px;border-bottom:1px solid var(--paper-line);font-size:14px}
.sbx .sbCtMailHead .mut{color:var(--ink-soft)}
.sbx .sbCtEmail .sbTok{background:var(--paper-line)}
.sbx .sbCtMailHi{margin:0 0 12px;font-size:16px}
.sbx .sbCtMailWords{margin:0 0 12px;font-size:14px;line-height:1.5;color:var(--ink-soft);max-width:520px}
.sbx .sbCtFrames{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,216px));gap:24px;margin-top:16px}
.sbx .sbCtFrame .eyebrow{color:var(--ink-soft);margin:0 0 8px}
.sbx .sbCtFrameBody{background:var(--fg);color:var(--ink);aspect-ratio:216/190;display:grid;align-items:center;padding:16px;border-radius:var(--r-pic) var(--r-pic) 0 0;overflow:hidden}
.sbx .sbCtFrame3 .sbCtFrameBody{padding:0;background:var(--deep)}
.sbx .sbCtFrame3 .sbCtFrameBody img{width:100%;height:100%;object-fit:cover;display:block}
.sbx .sbCtWords{margin:0;font:400 17px/1.3 var(--display)}
.sbx .sbCtFoot3{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:8px;align-items:center;background:var(--fg);color:var(--ink);padding:12px;border-top:1px solid var(--paper-line);border-radius:0 0 var(--r-pic) var(--r-pic)}
.sbx .sbCtFoot3 span b{display:block;font-size:12px;font-weight:600}
.sbx .sbCtFoot3 span small{display:block;font:500 11px var(--mono);letter-spacing:.12em;color:var(--ink-soft)}
.sbx .sbCtBtnW{all:unset;box-sizing:border-box;background:var(--org);color:var(--ink);border-radius:var(--r-ctl);min-height:32px;padding:0 10px;font:600 12px var(--body);display:inline-flex;align-items:center;cursor:text}
.sbx .sbCtBtnW .sbCtEdit{margin:0;padding:0 2px}
.sbx .sbCtBtnW .sbCtEdit:focus{box-shadow:none;border-color:var(--ink)}
.sbx .sbCtFace{width:32px;height:32px;border-radius:var(--r-ctl);object-fit:cover;display:inline-grid;place-items:center}
.sbx .sbCtInit{background:var(--panel);color:var(--fg);font:400 var(--t22) var(--display);display:inline-grid;place-items:center}
.sbx .sbCtBigInit{width:100%;height:100%;font-size:40px}
.sbx .sbCtTile{padding:24px 24px 24px 0;display:grid;gap:12px;align-content:start;justify-items:start}
@media (max-width:860px){.sbx .sbCtTile{padding:0 16px 16px}}
.sbx .sbCtTile .st{display:inline-flex;align-items:center;gap:8px}
.sbx .sbCtTile img{display:block;width:324px;max-width:100%;height:auto;border-radius:var(--r-pic)}
.sbx .sbCtTile .mut{margin:0;font-size:14px;max-width:324px}
/* a room screen as the visitor gets it: the deck's navy, the cream card; off, dimmed under the scrim */
.sbx .sbCtRoom{position:relative;background:var(--deep);min-height:480px;display:grid;align-items:center;padding:24px}
.sbx .sbCtRoom.off::after{content:"";position:absolute;inset:0;background:var(--scrim);pointer-events:none}
.sbx .sbCtRoomFoot{position:absolute;left:16px;bottom:12px;margin:0;display:flex;gap:16px;font-size:11px;color:var(--dim)}
.sbx .sbCtCover{display:grid;gap:4px;align-content:center;padding:24px 32px;min-height:432px;position:relative}
.sbx .sbCtCoverName{margin:0;font:300 var(--t-display) var(--display);color:var(--fg)}
.sbx .sbCtCoverCo{margin:0;font:400 var(--t22) var(--display);color:var(--mut)}
.sbx .sbCtDots{margin:24px 0 0;display:flex;gap:6px}
.sbx .sbCtDots i{width:6px;height:6px;border-radius:50%;background:var(--line2);display:block}
.sbx .sbCtDots i.on{background:var(--fg)}
.sbx .sbCtCard{position:absolute;right:32px;bottom:32px;width:250px;background:var(--fg);color:var(--ink);border-radius:var(--r);padding:16px;display:grid;gap:8px;justify-items:center;text-align:center}
.sbx .sbCtCard .sbCtFace{width:64px;height:64px}
.sbx .sbCtCard p{margin:0;font-size:13px;font-weight:600}
.sbx .sbCtCardBtn{display:block;width:100%;background:var(--org);color:var(--ink);border-radius:var(--r-ctl);min-height:32px;line-height:32px;font-size:13px;font-weight:600}
.sbx .sbCtH{margin:0;font:400 var(--t22) var(--display);color:var(--fg)}
.sbx .sbCtH2{margin-top:16px}
.sbx .sbCtSlides{padding:24px;display:grid;gap:12px;align-content:start}
.sbx .sbCtWellRow{display:grid;grid-template-columns:minmax(0,560px) auto;gap:16px;align-items:center}
.sbx .sbCtWellRow .st{display:inline-flex;align-items:center;gap:8px;font-size:14px}
.sbx .sbCtWellRow .dot.warn{background:var(--warn)}
.sbx .sbCtThumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.sbx .sbCtThumb{margin:0;position:relative;border:1px solid var(--line);border-radius:var(--r-pic);overflow:hidden;background:var(--panel);aspect-ratio:16/9}
.sbx .sbCtThumb canvas{display:block;width:100%;height:100%;object-fit:contain}
.sbx .sbCtThumb figcaption{position:absolute;right:8px;bottom:6px;font:500 11px var(--mono);color:var(--dim)}
.sbx .sbCtAskP{display:grid;gap:16px;justify-items:center;text-align:center;max-width:420px;margin:0 auto}
.sbx .sbCtAskP .sbCtFace{width:72px;height:72px}
.sbx .sbCtAskQ{margin:0;font:400 var(--t26) var(--display);color:var(--fg);line-height:1.3}
.sbx .sbCtAskBtns{display:flex;gap:12px}
.sbx .sbCtNo,.sbx .sbCtYes{all:unset;box-sizing:border-box;min-height:40px;padding:0 20px;border-radius:var(--r-ctl);font:600 14px var(--body);display:inline-flex;align-items:center;cursor:text}
.sbx .sbCtNo{background:var(--panel);color:var(--mut);border:1px solid var(--line2)}
.sbx .sbCtYes{background:var(--org);color:var(--ink)}
.sbx .sbCtYes .sbCtEdit:focus,.sbx .sbCtNo .sbCtEdit:focus{box-shadow:none;border-color:currentColor}
.sbx .sbCtThanksP{display:grid;gap:16px;justify-items:center;text-align:center;max-width:420px;margin:0 auto}
.sbx .sbCtThanksL{margin:0;font:400 var(--t26) var(--display);color:var(--fg);line-height:1.3}
.sbx .sbCtThanksP .sbCtFace{width:80px;height:80px}
.sbx.sbCtRead{gap:12px}
.sbx.sbCtRead .mut{margin:0;font-size:16px}
/* 1.4.3 (item 4; MASTER 31/10 CONTENT AS ONE JOURNEY) one journey: the fields left, the email right with the pick playing inside it (DESIGN-RULES, make a thing) */
.sbx .sbCtJourney{gap:16px}
.sbx .sbCtJ{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,560px);gap:24px;align-items:start}
@media (max-width:960px){.sbx .sbCtJ{grid-template-columns:minmax(0,1fr)}}
.sbx .sbCtJ > .sbCtEmail{margin:0}
.sbx .sbCtOpts{display:grid;gap:12px;align-content:start}
.sbx .sbCtKind{margin:0 0 4px}
.sbx .sbCtEditor{display:grid;gap:6px;align-content:start}
.sbx .sbCtEditor .f{margin-top:8px}
.sbx .sbCtField{max-width:420px}
.sbx .sbCtPlays{margin-top:8px;min-height:120px}
.sbx .sbCtPlays img{display:block;max-width:100%;height:auto}
.sbx .sbCtDim{color:var(--ink-soft);opacity:.6}
.sbx .sbCtPic{display:flex;gap:12px;align-items:center}
.sbx .sbCtWalk button:disabled{color:var(--dim);cursor:default}
/* 1.4.3 (item 8, FAULT 21; board 31/10 07:54) the desk's call with the slides hidden: the two faces side by side, the standard, as the visitor's
   side does; the call takes the whole width, the slide box's bar under it, each face a rounded square */
body.cxSlidesOff #cvMain:has(> .cxStageDeck .cxStageFrame){grid-template-columns:minmax(0,1fr)}
body.cxSlidesOff #cvMain:has(> .cxStageDeck .cxStageFrame) > #cvStage{grid-column:1;grid-row:2}
body.cxSlidesOff #cvMain:has(> .cxStageDeck .cxStageFrame) > .cvCap{grid-column:1;grid-row:3}
body.cxSlidesOff #cvMain:has(> .cxStageDeck .cxStageFrame) > .cvNote{grid-column:1;grid-row:4}
body.cxSlidesOff #cvMain:has(> .cxStageDeck .cxStageFrame) > .cxStageDeck{grid-column:1;grid-row:5;padding:0 16px 16px}
body.cxSlidesOff #cvStage .cx-tiles{flex-direction:row}
body.cxSlidesOff #cvStage .cx-tile{aspect-ratio:1/1;width:min(calc((100cqw - 2*var(--cx-pad) - var(--cx-gap)) / 2),calc(100cqh - var(--cx-top) - var(--cx-bot)));height:auto;border-radius:12px}
/* 1.4.3 (item 7; board 31/10 08:54 "anything like a table is clutter") Results: one calm panel of numbers, then the people as one panel that opens */
.lgPanel{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));background:var(--panel);border:1px solid var(--line);border-radius:var(--r);margin:8px 0 24px;overflow:hidden}
.lgNum{display:grid;gap:6px;align-content:start;padding:24px 28px;border-left:1px solid var(--line)}
.lgNum:first-child{border-left:0}
.lgNum b{font:300 var(--t40) var(--display);color:var(--fg);line-height:1;white-space:nowrap}
.lgNum span{font-size:14px;color:var(--fg)}
.lgNum small{font-size:13px;color:var(--mut)}
.lgCtm{background:var(--deep)}
@media (max-width:860px){.lgPanel{grid-template-columns:repeat(2,minmax(0,1fr))}.lgNum{border-left:0;border-top:1px solid var(--line)}.lgNum:nth-child(-n+2){border-top:0}}
.lgPeople{border-top:1px solid var(--line)}
.lgPeople summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;min-height:48px;font-size:16px;color:var(--fg)}
.lgPeople summary::-webkit-details-marker{display:none}
.lgPeople summary b{font-weight:400;color:var(--mut)}
.lgPeople summary::after{content:"+";margin-left:auto;color:var(--mut)}
.lgPeople[open] summary::after{content:"\2212"}
.lgList{list-style:none;margin:0;padding:0}
.lgP{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1.2fr) minmax(0,.6fr) auto;gap:16px;align-items:center;padding:12px 0;border-top:1px solid var(--line)}
.lgWho{display:grid;gap:2px;min-width:0}
.lgName{justify-self:start;font-size:16px;color:var(--fg)}
.lgWho small{font-size:13px;color:var(--mut)}
.lgFar{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:var(--mut)}
.lgFar i{width:8px;height:8px;border-radius:50%;border:1px solid var(--line2)}
.lgFar i.on{background:var(--ok);border-color:var(--ok)}
.lgFar em{font-style:normal;margin-left:6px}
.lgFrom{font-size:13px;color:var(--mut)}
.lgActs{display:flex;gap:16px;justify-content:flex-end}
.lgList .lgActs .lnk.quiet{font-size:13px;color:var(--dim);text-decoration:none}
.lgList .lgActs .lnk.quiet:hover{color:var(--mut);text-decoration:underline}
.lgList .lgName{text-decoration:none}
.lgList .lgName:hover{text-decoration:underline}
@media (max-width:700px){.lgP{grid-template-columns:minmax(0,1fr) auto}.lgFar{grid-column:1}.lgFrom{display:none}.lgCtm{margin-left:0;padding-left:0;border-left:0}}
/* 1.4.3 (board 31/10 09:05, "a pick and mix") Shape: the two options side by side, each playing; the chosen one underlined */
.sbx .sbCtShapes{display:flex;flex-wrap:wrap;gap:48px;align-items:center;justify-content:flex-start;margin-top:16px}
.sbx .sbCtShape{all:unset;box-sizing:border-box;cursor:pointer;display:grid;gap:10px;justify-items:center;padding:12px;border-radius:var(--r);border:2px solid transparent}
.sbx .sbCtShape:hover{border-color:var(--line2)}
.sbx .sbCtShape[aria-pressed=true]{border-color:var(--org)}   /* 1.4.3 (13:24) the whole option outlined when chosen, not a part-underline */
.sbx .sbCtShape[aria-pressed=true],.sbx .sbCtShape[aria-pressed=true]:hover,.sbx .sbCtShape[aria-pressed=true]:focus{border-color:var(--org);outline:none;box-shadow:none}   /* 1.4.4 (item 6, row 2.6b; board 01/11 13:16) the orange outline alone marks the choice: no second surround */
.sbx .sbCtShape:focus-visible{outline:2px solid var(--org);outline-offset:2px}
.sbx .sbCtShapePic img{display:block;max-width:100%;height:auto;border-radius:var(--r)}
.sbx .sbCtShape:first-child .sbCtShapePic img{width:400px}
.sbx .sbCtShape:last-child .sbCtShapePic img{width:240px}
.sbx .sbCtShapeW{font-size:17px;color:var(--fg)}
/* 1.4.3 (board 31/10 09:09) Previous and Next in the centre, under what is picked, the same place on every step */
.sbx.sbCtJourney .sbCtFoot{justify-content:center;border-top:0;margin-top:16px}
.sbx.sbCtJourney .sbCtFoot > span:first-child{display:none}
/* 1.4.3 (board 31/10 09:26) the balance: the step's heading on the left under the steps, its choices under it, Previous and Next centred under
   the choices; the whole a column as wide as what it holds */
.sbx.sbCtJourney .sbCtFlow{width:fit-content;max-width:100%}
.sbx.sbCtJourney .sbCtFoot{margin-top:24px}


/* 1.4.3 Style (10:39): tighter swatches, names on hover, no headings, one row per choice */
.sbx .sbCtStyle{display:grid;gap:16px;align-content:start}
.sbx .sbCtStyle .sbCtSwatches{gap:8px}
.sbx .sbCtStyle .sbCtSw{padding-bottom:3px}
.sbx .sbCtStyle .sbCtSw i{width:36px;height:24px}
.sbx .sbCtStyle .sbCtSw i b{right:5px;top:6px;width:10px;height:10px}
.sbx .sbCtOwnSw i{display:grid;place-items:center;background:var(--bg);border:1px dashed var(--mut);font-style:normal;font-size:16px;color:var(--mut)}
.sbx .sbCtStyle .sbCtOwn{display:flex;gap:8px;border:0;padding:0}
.sbx .sbCtStyle .sbCtOwn[hidden]{display:none}
.sbx .sbCtStyle .sbCtOwn .t{width:96px}
.sbx .sbCtStyle .sbCtBlock{display:grid;gap:16px;border:0;padding:0;margin:0}
.sbx .sbCtStyle .sbCtSmall{margin:0}
.sbx .sbCtStyle .sbCtOpts{display:flex;flex-wrap:wrap;align-items:center;gap:8px 0}
.sbx .sbCtStyle .sbCtOpts>.seg,.sbx .sbCtStyle .sbCtOpts>[data-ctfmt]{padding:0 16px;border-left:1px solid var(--line)}
.sbx .sbCtStyle .sbCtOpts>:first-child{padding-left:0;border-left:0}
.sbx .sbCtStyle .sbCtReset{margin-left:auto;padding-left:40px;font-size:13px;color:var(--mut)}
.sbx .sbCtStyle .sbCtReset:hover{color:var(--fg)}
.sbx .sbCtStyle .sbCtSum{display:flex;align-items:baseline;gap:12px;margin:0;font-size:14px;color:var(--mut)}
.sbx .sbCtStyle .sbCtSum [data-ctsum]{color:var(--fg)}
.sbx .sbCtStyle .sbCtOpts[hidden]{display:none}
/* 1.4.3 (11:10) the Ad's words: the frames as sent, each with only its own box; two layouts to choose between */
.sbx .sbCtAdF{display:grid;gap:16px;justify-items:start}
.sbx .sbCtAdF .sbCtFrTabs{flex-wrap:nowrap}
.sbx .sbCtStill img{display:block;width:100%;height:auto;border-radius:var(--r-sw)}
.sbx .sbCtBig{width:324px}
.sbx .sbCtFrBox{display:grid;gap:4px;width:324px}
.sbx .sbCtFrBox[hidden]{display:none}
.sbx .sbCtFrBox .t{width:100%;box-sizing:border-box}
.sbx .sbCtFrBox .sbCtPic{margin:0 0 8px}
.sbx .sbCtFrTabs .sbCtPlayT{margin-left:16px;padding-left:16px;border-left:1px solid var(--line)}
/* 1.4.3 (11:08) what you see is what you get: no email round it; the Strip's words, the banner large over its four boxes */
.sbx .sbCtBare{background:none;border:0;box-shadow:none;padding:0}
.sbx .sbCtWordsV{display:grid;gap:24px;justify-items:start}
.sbx .sbCtBanBig img{width:560px;max-width:100%;height:auto}
.sbx .sbCtBoxes{display:grid;gap:4px;width:560px;max-width:100%}
.sbx .sbCtBoxes .t{width:100%;box-sizing:border-box}
.sbx .sbCtWordsV .sbCtPlays{padding:0;margin:0}
.sbx .sbCtWordsV .sbCtEditor{max-width:none}
/* 1.4.3 (11:33) Content: Your ad | Your presentation; the presentation as the frames are, the room large with its box under it */
.sbx .sbCtParts{margin:0 0 20px;font-size:16px}
.sbx .sbCtParts button{font-size:16px}
.sbx .sbPrBig{width:640px;max-width:100%}
.sbx .sbPrBig .sbCtRoom{min-height:400px;border-radius:var(--r-ctl);overflow:hidden}
.sbx .sbPrBox{width:640px;max-width:100%}
.sbx .sbPrBox .t{width:100%;box-sizing:border-box}
.sbx .sbPrSlide{display:block}
.sbx .sbPrSlide .sbCtThumb canvas{width:100%;height:auto}
.sbx .sbPrSlide .sbCtThumb figcaption{display:none}   /* 1.4.4b (row 2.2, FAULT 28) one slide shown whole: its number drawn once, by the slide itself */
.sbx .sbPrNone{text-align:center}
.sbx .sbCtReady{font-size:14px;color:var(--fg)}
/* 1.4.3 (11:40) the presentation's two layers: the pages and the card on the side, the card navy as the room's (fault 23) */
.sbx .sbPrRow{align-items:center}
.sbx .sbPrRowN{font-size:12px;color:var(--mut);min-width:72px;letter-spacing:.04em;text-transform:uppercase}
.sbx .sbPrStage{position:relative;min-height:400px;display:grid}
.sbx .sbPrStage .sbCtCover{min-height:400px}
.sbx .sbPrNoSlide{display:grid;place-items:center;min-height:400px;background:var(--line)}
.sbx .sbPrCard{width:100%;box-sizing:border-box;background:var(--bg);color:var(--fg);border-radius:var(--r);padding:12px;display:grid;gap:8px;justify-items:center;text-align:center;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.sbx .sbPrCard p{margin:0;font-size:12px;font-weight:600}
.sbx .sbPrCard .sbCtFace{width:40px;height:40px}
.sbx .sbPrCard .sbCtCardBtn{min-height:28px;line-height:28px;font-size:12px}
.sbx .sbPrPop{padding:16px;gap:10px}
.sbx .sbPrPop .sbCtFace{width:88px;height:88px}
.sbx .sbPrCard.sbPrPop .sbPrPopL{font-size:14px;line-height:1.3}
.sbx .sbPrSecond{font-size:12px;color:var(--mut)}
.sbx .sbPrWithCol{grid-template-columns:minmax(0,1fr) 180px;gap:16px}
.sbx .sbPrCol{display:grid;align-content:end}
.sbx .sbPrBig .sbCtRoom{padding:16px}
.sbx .sbPrStage:not(.sbPrWithCol){align-content:center;justify-items:center}
.sbx .sbPrStage:not(.sbPrWithCol)>*{align-self:center}
.sbx .sbPrStage .sbCtAskBtns{align-items:center}
.sbx .sbPrSay{margin:0;font-size:16px;color:var(--fg)}
.sbx .sbPrWithCol .sbPrNoSlide,.sbx .sbPrWithCol .sbPrSlide{min-height:0;aspect-ratio:16/9;align-self:center}
.sbx .sbPrWithCol{min-height:0;align-items:center}
.sbx .sbPrStage .sbPrNoSlide,.sbx .sbPrStage .sbPrSlide{width:100%;min-height:0;aspect-ratio:16/9;justify-self:stretch}
/* 1.4.3 (11:59, 12:04) the presentation as a pathway: Cover, Slides, The ask, and from The ask two arms, each line labelled with the
   button the visitor presses, ending in its page */
.sbx .sbPrPath{display:flex;align-items:center;gap:0;flex-wrap:wrap}
.sbx .sbPrPath button{all:unset;box-sizing:border-box;cursor:pointer;padding:6px 12px;border:1px solid var(--line);border-radius:var(--r-ctl);font-size:14px;color:var(--mut);white-space:nowrap}
.sbx .sbPrPath button:hover{color:var(--fg)}
.sbx .sbPrPath button[aria-pressed=true]{color:var(--fg);border-color:var(--org)}
.sbx .sbPrPath button:focus-visible{outline:2px solid var(--org);outline-offset:2px}
.sbx .sbPrPath>i{display:block;width:24px;height:0;border-top:1px solid var(--mut)}
.sbx .sbPrFork{display:grid;gap:12px;position:relative;padding-left:24px}
.sbx .sbPrFork::before{content:"";position:absolute;left:0;top:50%;width:24px;border-top:1px solid var(--mut)}
.sbx .sbPrArm{display:flex;align-items:center;position:relative;padding-left:24px}
.sbx .sbPrArm::before{content:"";position:absolute;left:0;width:0;border-left:1px solid var(--mut)}
.sbx .sbPrArm:first-child::before{top:50%;bottom:-6px}
.sbx .sbPrArm:last-child::before{top:-6px;bottom:50%}
.sbx .sbPrEdge{display:block;position:relative;width:128px;height:0;border-top:1px solid var(--mut);margin-left:-24px;margin-right:0}
.sbx .sbPrEdge em{position:absolute;left:32px;bottom:3px;font-style:normal;font-size:12px;color:var(--fg);white-space:nowrap}
.sbx .sbPrNotNow{display:grid;gap:12px;width:100%;justify-items:center}
.sbx .sbPrNotNowL{margin:0;font-size:var(--t16);color:var(--fg)}
/* 1.4.3 (11:59) the three parts as real buttons, not underlined words: one row, the chosen one filled */
.sbx .sbCtParts{display:inline-flex;gap:0;border:1px solid var(--line);border-radius:var(--r-ctl);overflow:hidden;padding:0}
.sbx .sbCtParts button{all:unset;box-sizing:border-box;cursor:pointer;padding:10px 20px;font-size:var(--t16);font-weight:600;color:var(--mut);border-right:1px solid var(--line)}
.sbx .sbCtParts button:last-child{border-right:0}
.sbx .sbCtParts button:hover{color:var(--fg)}
.sbx .sbCtParts button[aria-pressed=true]{background:var(--fg);color:var(--ink)}
.sbx .sbCtParts button:focus-visible{outline:2px solid var(--org);outline-offset:-2px}
.sbx .sbCtParts{width:fit-content;justify-self:start}
.sbx .sbPrBig .sbCtEdit{border-bottom:1px dashed var(--mut)}
.sbx .sbPrBig .sbCtEdit:hover{border-color:var(--line2)}
/* 1.4.3 (12:09) Your presence: the card's climb as a path, the two not-free states apart */
.sbx .sbPrApart{display:flex;align-items:center;gap:8px;margin-left:32px;padding-left:24px;border-left:1px solid var(--line)}
.sbx .sbPrApart small{font-size:12px;color:var(--mut);margin-right:4px}
.sbx .sbPrCard .sbCtEdit{border-bottom:1px dashed rgba(255,255,255,.5)}
.sbx .sbPrCard .sbCtCardBtn .sbCtEdit{border-bottom-color:rgba(0,0,0,.4)}
.sbx .sbPr > p.mut{max-width:640px;margin:0}
.sbx .sbPrBtnOnly{padding:10px}
.sbx .sbPrCam{margin:0;font-size:11px;line-height:1.35;color:var(--mut);font-weight:400}
.sbx .sbPrWithCol .sbPrCol{align-self:stretch}
/* 1.4.3 (12:32) the Tile's two styles, as buttons; Colourful's swatches show its liquid */
.sbx .sbCtStyleSw button{padding:8px 16px;font-size:14px}
.sbx .sbCtStyle .sbCtSw.sbCtLiquid i{width:48px;height:32px}
.sbx .sbCtStyle .sbCtSw i{box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
/* 1.4.3 (12:46) Your library: the company's images, a grid; the same grid as a frame's picker */
.sbx .sbLib{display:grid;grid-template-columns:repeat(auto-fill,140px);gap:16px}
.sbx .sbLibItem{all:unset;box-sizing:border-box;display:grid;gap:6px;margin:0;cursor:default}
.sbx button.sbLibItem{cursor:pointer}
.sbx .sbLibItem img{width:140px;height:140px;object-fit:cover;border-radius:var(--r-ctl);border:1px solid var(--line);display:block;background:var(--deep)}
.sbx button.sbLibItem:hover img,.sbx button.sbLibItem:focus-visible img{border-color:var(--org)}
.sbx .sbLibItem figcaption{display:flex;justify-content:space-between;gap:8px;font-size:12px;color:var(--mut)}
.sbx .sbLibAdd{display:grid;place-items:center;align-content:center;gap:4px;width:140px;height:140px;border:1px dashed var(--mut);border-radius:var(--r-ctl);cursor:pointer;color:var(--mut)}
.sbx .sbLibAdd span{font-size:var(--t26);line-height:1}
.sbx .sbLibAdd small{font-size:12px}
.sbx .sbLibAdd:hover{color:var(--fg);border-color:var(--fg)}
.sbx .sbLibPick{grid-template-columns:repeat(auto-fill,96px);gap:10px;margin-top:10px}
.sbx .sbLibPick .sbLibItem img,.sbx .sbLibPick .sbLibAdd{width:96px;height:96px}
.sbx .sbCtAdF .sbLib,.sbx .sbCtPic .sbLib{justify-self:stretch;width:100%}
.sbx .sbCtFrBox .sbCtPic{width:100%}
.sbx .sbCtPic{flex-wrap:wrap}
.sbx .sbCtPic .sbLibHost{flex-basis:100%;width:100%}
/* 1.4.3 (13:02) the parts as filled buttons above one panel; the steps and the step itself inside it */
.sbx .sbCtPanel{border:1px solid var(--line);border-radius:var(--r-ctl);padding:20px 24px;display:grid;gap:16px;margin-top:-4px}
.sbx .sbCtGrp{display:grid;gap:8px}
.sbx .sbCtGrp h4{margin:0;font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}
/* 1.4.3 (13:26) the CTA's outcomes, a quiet row under the room */
.sbx .sbPrBig .sbCtNo,.sbx .sbPrBig .sbCtYes{cursor:pointer}
/* 1.4.3 (13:30) the story's frames as dots, Play a small button beside them */
.sbx .sbCtDotsNav{display:flex;align-items:center;gap:10px}
.sbx .sbCtDotB{all:unset;box-sizing:border-box;cursor:pointer;width:12px;height:12px;border-radius:50%;border:1px solid var(--mut)}
.sbx .sbCtDotB[aria-pressed=true]{background:var(--org);border-color:var(--org)}
.sbx .sbCtDotB:hover{border-color:var(--fg)}
.sbx .sbCtDotB:focus-visible{outline:2px solid var(--org);outline-offset:3px}
.sbx .sbCtPlayB{margin-left:12px;min-height:28px;padding:0 12px;font-size:13px}
.sbx .sbCtPlayB[aria-pressed=true]{border-color:var(--org)}
.sbx .sbPrSecs{display:flex;align-items:center;gap:10px;margin:0;font-size:14px;color:var(--fg)}
.sbx .sbPrSecs .t{width:72px}
.sbx .sbCtPicker{width:36px;height:32px;padding:0;border:1px solid var(--line);border-radius:var(--r-ctl);background:none;cursor:pointer}
.sbx .sbCtStyle .sbCtOwn{align-items:center}
/* 1.4.3 (13:31) saved ads and presentations in Your library, the same cards as the images */
.sbx .sbLibFace{position:relative;display:grid;align-content:end;width:140px;height:140px;border-radius:var(--r-ctl);border:1px solid var(--line);padding:10px;box-sizing:border-box}
.sbx .sbLibFace b{position:absolute;right:12px;top:12px;width:18px;height:18px;border-radius:50%}
.sbx .sbLibFace em{font-style:normal;font-size:12px;font-weight:600;color:var(--fg);text-shadow:0 1px 2px rgba(0,0,0,.5)}
.sbx .sbLibPresFace{background:var(--deep);gap:4px}
.sbx .sbLibPresFace small{font-size:11px;line-height:1.3;color:var(--mut)}
.sbx .sbLibItem{position:relative}
.sbx .sbLibUse{position:absolute;left:8px;top:8px;background:var(--org);color:var(--ink);font-size:11px;font-weight:600;padding:2px 8px;border-radius:var(--r-ctl)}
.sbx .sbLibItem figcaption{flex-wrap:wrap}
.sbx .sbCtAdF .sbCtGrp{justify-self:stretch;width:100%}
.sbx .sbCtGrp .sbLib{width:100%}
/* 1.4.3 (15:47, option C) one stepper, one grid of five places, under Your ad, Your presentation and Your presence alike */
.sbx .sbStepper{display:grid;grid-template-columns:repeat(5,minmax(0,220px));align-items:center;position:relative;padding-top:18px}
.sbx .sbStep{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:14px;color:var(--mut);position:relative;outline:none;min-height:32px}
.sbx .sbStep:hover{color:var(--fg)}
.sbx .sbStep:focus-visible .sbStepN{outline:2px solid var(--org);outline-offset:2px}
.sbx .sbStep.on{color:var(--fg);font-weight:600}
.sbx .sbStep.off{cursor:default;opacity:.5}
.sbx .sbStepN{flex:none;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;border:1px solid var(--mut);font-size:12px;font-weight:500;color:var(--mut);background:var(--bg)}
.sbx .sbStep.on .sbStepN{background:var(--org);border-color:var(--org);color:var(--ink)}
.sbx .sbStepMain:not(:nth-child(3))::after{content:"";flex:1;min-width:16px;margin:0 14px 0 6px;border-top:1px solid var(--line)}
.sbx .sbStepMain .sbStepT{white-space:nowrap}
.sbx .sbStepApart{position:absolute;top:0;left:calc(3 * (100% / 5));font-size:11px;letter-spacing:.04em;color:var(--mut)}
.sbx .sbStepSecs{width:34px;padding:2px 4px;border:0;border-bottom:1px dashed var(--mut);background:transparent;color:var(--fg);font:inherit;text-align:center}
.sbx .sbStepSecs:focus{outline:none;border-bottom-color:var(--org)}
/* 1.4.3 (15:35) Your library: the card is the choice; the one in use outlined */
.sbx .sbLibSel{all:unset;box-sizing:border-box;cursor:pointer;display:block;border-radius:var(--r-ctl)}
.sbx .sbLibCard.on .sbLibSel{outline:2px solid var(--org);outline-offset:2px}
.sbx .sbLibCard{align-content:start}
.sbx .sbLibCard .sbLibSel{width:max-content}
.sbx .sbLibCard figcaption{display:grid;justify-items:start;gap:2px}
.sbx .sbLibSel:focus-visible{outline:2px solid var(--org);outline-offset:2px}
/* 1.4.3 (16:13) Your presence: With someone and Away leave the stepper for a toggle under the card; the card follows it */
.sbx .sbPrState{display:flex;align-items:center;justify-content:flex-end;gap:0;margin:12px 0 4px;width:640px;max-width:100%;box-sizing:border-box;justify-self:start}
.sbx .sbPrStateL{font-size:13px;color:var(--mut);margin-right:12px}
.sbx .sbPrStateB{all:unset;box-sizing:border-box;cursor:pointer;padding:6px 14px;font-size:13px;font-weight:500;color:var(--mut);border:1px solid var(--line);border-left-width:0}
.sbx .sbPrStateB:first-of-type{border-left-width:1px;border-radius:var(--r-ctl) 0 0 var(--r-ctl)}
.sbx .sbPrStateB:last-of-type{border-radius:0 var(--r-ctl) var(--r-ctl) 0}
.sbx .sbPrStateB:hover{color:var(--fg)}
.sbx .sbPrStateB.on{background:var(--fg);color:var(--ink);border-color:var(--fg)}
.sbx .sbPrStateB:focus-visible{outline:2px solid var(--org);outline-offset:2px}
.sbx .sbPr:has([data-prstate].on:not([data-prstate=free])) .sbStepper{opacity:.4}
/* 1.4.3 (16:25 to 16:27) Style as A, B, C: the story's dots, one choice in view; THE CHOSEN THING IS BOXED (orange outline), never
   underlined. One meaning per mark: the orange circle is where you are, the cream pill a toggle's state, the orange box what you chose. */
.sbx .sbCtSubNav{display:flex;align-items:center;justify-content:space-between;margin:0 0 18px}
.sbx .sbCtSubName{margin-left:8px;font-size:14px;font-weight:600;color:var(--fg)}
.sbx .sbCtSubNav .sbCtReset{margin-left:auto}
.sbx .sbCtSubP[hidden]{display:none}
.sbx .sbCtStyle .sbCtSw{padding:4px;border-bottom:0;border-radius:var(--r-ctl)}
.sbx .sbCtStyle .sbCtSw[aria-pressed=true]{outline:2px solid var(--org);outline-offset:0;border-bottom:0}
.sbx .sbCtStyle .sbCtSubP .sbCtOpts{display:grid;gap:14px}
.sbx .sbCtStyle .sbCtSubP .sbCtOpts>.seg,.sbx .sbCtStyle .sbCtSubP .sbCtOpts>[data-ctfmt]{padding:0;border-left:0}
.sbx .sbCtStyle .sbCtSubP .seg{display:flex;align-items:center;gap:8px}
.sbx .sbCtStyle .sbCtSubP .seg::before{content:attr(aria-label);width:120px;font-size:13px;color:var(--mut)}
.sbx .sbCtStyle .sbCtSubP .seg button{padding:0 14px;min-height:32px;border:1px solid var(--line);border-radius:var(--r-ctl);font-size:13px}
.sbx .sbCtStyle .sbCtSubP .seg button[aria-pressed=true]{border-color:var(--org);box-shadow:0 0 0 1px var(--org);color:var(--fg)}
.sbx .sbCtFonts{display:flex;gap:12px;flex-wrap:wrap}
.sbx .sbCtFont{all:unset;box-sizing:border-box;display:grid;justify-items:center;gap:8px;width:116px;padding:16px 8px 12px;border:1px solid var(--line);border-radius:var(--r-ctl);font-size:13px;color:var(--mut);cursor:pointer}
.sbx .sbCtFont b{font-size:var(--t30);font-weight:400;line-height:1;color:var(--fg)}
.sbx .sbCtFont[disabled]{opacity:.55;cursor:default}
.sbx .sbCtFont.on{border-color:var(--org);box-shadow:0 0 0 1px var(--org);opacity:1;color:var(--fg)}
.sbx .sbCtSoon{font-size:13px;margin:12px 0 0}
.sbx .sbCtEditor.sbCtStyle{width:560px;max-width:100%;box-sizing:border-box}   /* the preview never moves between the dots */
/* 1.4.3 (16:44) Your presentation: Done up under the page, on the right; the page's note or link box on its left */
.sbx .sbPrDoneRow{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;width:640px;max-width:100%;box-sizing:border-box;margin-top:16px;justify-self:start}
.sbx .sbPrDoneRow .sbPrBox{flex:1;min-width:0;margin:0}
.sbx .sbPrDoneRow .sbPrBox p{margin:0}
.sbx .sbPrDoneRow [data-prdone]{flex:none}
.sbx .sbPrDoneActs{display:flex;align-items:center;gap:16px;flex:none}
/* 1.4.3 (B1) Your presence, Away: what the card says once Request a call back is pressed */
.sbx .sbPrAfterL{margin:10px 0 4px;font-size:11px;color:var(--mut)}
.sbx .sbPrDone p{margin:0;font-weight:600;font-size:14px;color:var(--fg);padding:2px 4px}
/* 1.4.4 (INT-144 row 4; JOURNEYS 2.11; board 01/11 12:48) Settings as three tabs, no heading: Your company, About you, Your desk. The strip's
   own look: plain words, the one chosen underlined in orange */
/* 1.4.4b (INT-144b row 2.11) Settings' parts as Content's: the filled part buttons (.sbCtParts) and one panel under them (.sbCtPanel) */
.sbx .sbSetParts{margin:8px 0 20px}
.sbx .sbSetPanel{display:block}
.sbx .sbSetPanel .sbRows > .sbRow:first-of-type{border-top:0}
.sbx .sbLogoNow{display:block;max-height:32px;max-width:160px;width:auto;height:auto}
.sbx .sbFacePv{display:inline-grid;place-items:center;width:32px;height:32px;overflow:hidden;border-radius:var(--r-pic);background:var(--bg);border:1px solid var(--line2);vertical-align:middle;font:400 16px/1 var(--display);color:var(--fg)}
.sbx .sbFacePv[data-shape="round"]{border-radius:50%}
.sbx .sbFacePv img{width:100%;height:100%;object-fit:cover;display:block}
.sbx .sbFacePv.big{width:88px;height:88px;font-size:40px;border-radius:var(--r)}
.sbx .sbFacePv.big[data-shape="round"]{border-radius:50%}
.sbx .sbFaceOpts{display:flex;gap:16px;flex-wrap:wrap;margin:8px 0}
.sbx .sbFaceOpt{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 16px;border:1px solid var(--line);border-radius:var(--r-ctl);color:var(--fg);font-size:14px}
.sbx .sbFaceOpt[aria-pressed="true"]{border-color:var(--org);box-shadow:0 0 0 1px var(--org)}
.sbx .sbFaceOpt:focus-visible{outline:2px solid var(--org);outline-offset:2px}
/* 1.4.4b (INT-144b row 2.9) Your library's three tabs */
.sbx .sbLibTabs{margin:0 0 16px;width:fit-content}
.sbx .sbLibDefault{cursor:help}
.sbx .sbRows[role=tabpanel][hidden]{display:none}
/* 1.4.4 (INT-144 items 6c, 7, 8; board 01/11 13:20 to 13:38) the finish of a stepper: the thing playing as it goes out, one line, Done; Previous a
   text link. Your library: the ad itself small, its name edited in place under it, Goes out with your emails or Use this; Edit, and Save as by
   the one in use */
.sbx .sbCtFinish{display:grid;justify-items:center;gap:16px}
.sbx .sbCtFinL{margin:0;font-size:17px;color:var(--fg);text-align:center}
.sbx .sbCtPrev{color:var(--mut)}
.sbx .sbLibShow{position:relative;width:140px;height:162px;display:grid;place-items:center;border-radius:var(--r-ctl);background:var(--deep);overflow:hidden}
.sbx .sbLibShow .sbLibFace{height:162px}
.sbx .sbLibItem .sbLibShow img.sbLibPic{width:140px;height:162px;object-fit:contain;border:0;border-radius:0;background:none}
.sbx .sbLibCard.on .sbLibShow{box-shadow:0 0 0 2px var(--org)}
.sbx .sbLibCard figcaption{display:grid;gap:6px;justify-items:start}
.sbx .sbLibName{color:var(--fg);font-size:14px;padding:2px 4px;margin:0 -4px;border-radius:var(--r);border:1px dashed transparent;cursor:text;max-width:140px;overflow-wrap:anywhere}
.sbx .sbLibName:hover{border-color:var(--line2)}
.sbx .sbLibName:focus{outline:none;border-color:var(--org);border-style:solid}
.sbx .sbLibGoes{font-size:12px;color:var(--org)}
.sbx .sbLibGoes.sbLibEd{color:var(--mut);margin-right:8px}   /* 1.4.4 the ad open to edit (MASTER 15:05) */
.sbx .sbLibActs{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:12px}.sbx .sbLibActs .lnk{white-space:nowrap}   /* 1.4.4d each action on one line; a card too narrow for three puts the last on the next line */
.sbx .sbLibUseB{min-height:28px;padding:0 10px;font-size:12px}
.sbx .sbLib > p{grid-column:1/-1;margin:0}