/* The build page only: a configurator. The real CRM stays in view on one side, large; beside it sits a calm column of choices.
   Colours, type, the bar, .btn, .tag, .meter and the loading shape's panes come from site.css, which loads first.
   Every class made here starts with b- so it can never meet one of the landing page's. */
.building{background:var(--bg);padding-bottom:0}
.building .nav{width:auto;max-width:1672px;margin:0 auto;padding:0 24px}
.build{--bar:var(--top,52px);--ring:0 0 0 4px color-mix(in srgb,var(--accent) 22%,transparent);position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,432px);gap:44px;align-items:start;max-width:1720px;margin:0 auto;padding:calc(var(--bar) + 20px) 24px 20px;font:400 17px/1.47 var(--text);letter-spacing:-.022em;color:var(--ink)}
.choices{grid-column:2;min-width:0}
.choices h1{max-width:none;margin:8px 0 0;font:600 40px/1.1 var(--display);letter-spacing:-.015em;text-wrap:balance;animation:none}
.choices :is(h1,h2) span{color:var(--faint)}
.build[data-step="wait"] .choices{visibility:hidden}

/* a section: a two-tone heading, then its choices, with air around it */
.b-part{display:block;padding-top:56px}
.b-part h2{margin-bottom:16px;font:600 24px/1.17 var(--display);letter-spacing:-.01em;text-wrap:balance}
.b-part h3{margin:26px 0 10px;font:600 14px/1.3 var(--text);letter-spacing:-.016em;color:var(--ink)}
.b-part h3[hidden]{display:none}
.b-fine{color:var(--faint);font-size:12px;line-height:1.4;letter-spacing:-.01em}
.b-part .b-fine{margin-top:12px}
#rest-hint{margin-top:28px;font-size:14px;color:var(--soft)}
.build[data-step="build"] #rest-hint{display:none}
#rest{transition:opacity .4s}
#rest[inert]{opacity:.35}
.b-say{margin-top:10px;color:var(--soft);font-size:14px;line-height:1.43;letter-spacing:-.016em}
.b-say:empty{display:none}
.b-stack{display:grid;gap:10px}
.b-stack:empty,.b-slot:empty{display:none}
.b-slot{margin-top:26px}

/* a box to type in */
.b-in{width:100%;min-width:0;height:52px;padding:0 16px;border:1px solid var(--line-2);border-radius:12px;background:var(--raised);color:var(--ink);font:400 17px/1.2 var(--text);letter-spacing:-.022em;outline:0;-webkit-appearance:none;appearance:none;transition:border-color .2s,box-shadow .2s,background-color .2s}
.b-in::placeholder{color:var(--faint);opacity:1}
.b-in:hover{border-color:var(--faint)}
.b-in:focus-visible{border-color:var(--accent-ink);box-shadow:var(--ring)}
.b-add{display:flex;align-items:center;gap:8px}
.b-add .b-in{flex:1;height:48px}
.b-add .btn{flex:none;height:48px}
.b-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
.b-pair .b-in{height:48px}
.b-rows + .b-add,.b-rows + .b-stack,.b-rows + .b-say + .b-add{margin-top:14px}

/* a choice: a rounded tile, outlined in the accent when it is the one chosen */
.b-opts2,.b-opts3{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.b-opts3{grid-template-columns:repeat(3,minmax(0,1fr))}
.b-opts3[data-n="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.b-opts3[data-n="4"]{grid-template-columns:repeat(4,minmax(0,1fr))}
.b-opt{display:flex;flex-direction:column;justify-content:center;gap:2px;min-width:0;min-height:56px;padding:10px 14px;border:1px solid var(--line-2);border-radius:12px;background:var(--raised);color:var(--ink);font:400 15px/1.25 var(--text);letter-spacing:-.016em;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:border-color .2s,box-shadow .2s,background-color .2s,transform .12s var(--ease)}
.b-opt b{font-weight:600;overflow-wrap:anywhere}
.b-opt small{color:var(--soft);font-size:12px;letter-spacing:-.01em}
.b-opt:hover{border-color:var(--faint);background:var(--card)}
.b-opt:active{transform:scale(.98)}
.b-opt[aria-pressed="true"]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.b-opts3 .b-opt{align-items:center;min-height:48px;padding:8px;text-align:center}
.b-opt.scheme{flex-direction:row;justify-content:flex-start;align-items:center;gap:10px}
.b-opt.scheme i{flex:none;width:26px;height:26px;border-radius:99px;background:linear-gradient(135deg,var(--c) 50%,var(--c2) 50%);box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
#f-trade.done .b-find,#f-trade:not(.done) :is(#b-other,#b-note,#trade-check),#trade-check:empty{display:none}
#f-trade:has(#b-note[aria-expanded="false"]) #trade-check{display:none}
.b-more{display:flex;flex-wrap:wrap;gap:0 20px;margin-top:4px}
.b-find + .b-say + .b-opts + .b-opts2{margin-top:12px}

/* a link-like button, a small pill, a chip that asks or undoes */
.b-text{justify-self:start;min-height:44px;padding:0;text-align:left;border:0;background:none;color:var(--accent-ink);font:400 14px/1.3 var(--text);letter-spacing:-.016em;text-decoration:underline transparent;text-underline-offset:3px;cursor:pointer;transition:text-decoration-color .2s,transform .12s var(--ease)}
.b-text:hover{text-decoration-color:currentColor}
.b-text:active{transform:scale(.97)}
.b-text[hidden]{display:none}
.b-pills{display:flex;flex-wrap:wrap;gap:6px}
.b-pills[hidden],.b-pills:empty{display:none}
.b-kinds{margin-bottom:12px}
.b-pill,.b-chip{min-height:34px;padding:6px 14px;border:1px solid var(--line-2);border-radius:980px;background:var(--raised);color:var(--ink);font:400 14px/1.25 var(--text);letter-spacing:-.016em;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:border-color .2s,background-color .2s,color .2s,transform .12s var(--ease)}
:is(.b-pill,.b-chip):hover{border-color:var(--faint);background:var(--card)}
:is(.b-pill,.b-chip):active{transform:scale(.96)}
.b-pill[aria-pressed="true"]{border-color:var(--ink);background:var(--ink);color:var(--bg)}
.b-chip.b-strong{border-color:var(--accent);color:var(--accent-ink)}
.b-chip.cut::after{content:"\00d7";margin-left:8px;color:var(--soft)}
.b-opts{display:flex;flex-wrap:wrap;gap:6px;padding:0}
.b-opts:empty{display:none}
#trade-opts,#asks,.b-lines + .b-opts{margin-top:12px}

/* our own pick-one: a button that says the choice, and opens the others in place */
.b-pick{display:grid;gap:8px;min-width:0}
.b-pickb{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:48px;padding:6px 14px;border:1px solid var(--line-2);border-radius:12px;background:var(--raised);color:var(--ink);font:400 15px/1.25 var(--text);letter-spacing:-.016em;text-align:left;cursor:pointer;transition:border-color .2s,background-color .2s,transform .12s var(--ease)}
.b-pickb small{flex:none;color:var(--soft);font-size:12px}
.b-pickb span{flex:1;min-width:0;font-weight:600;overflow-wrap:anywhere}
.b-pickb::after{content:"";flex:none;width:7px;height:7px;margin:-3px 3px 0;border:solid var(--soft);border-width:0 1.5px 1.5px 0;rotate:45deg;transition:rotate .25s var(--ease),margin .25s var(--ease)}
.b-pickb[aria-expanded="true"]::after{rotate:225deg;margin-top:4px}
.b-pickb:hover{border-color:var(--faint);background:var(--card)}
.b-pickb:active{transform:scale(.99)}
.b-cond{display:grid;gap:8px;padding:12px;border-radius:14px;background:var(--card)}
.b-cond .b-in{height:48px}
.b-cond .b-ic{justify-self:end}

/* a list you edit where it stands: each row a name, what it is, and its controls */
.b-rows{display:grid}
.b-row{display:flex;align-items:center;gap:4px;min-height:52px;border-bottom:1px solid var(--line)}
.b-row .b-in{flex:1;height:40px;margin-left:-10px;padding:0 10px;border-color:transparent;background:none;font-size:16px;text-overflow:ellipsis}
.b-row .b-in:hover{border-color:transparent;background:var(--fill)}
.b-row .b-in:focus-visible{border-color:var(--accent-ink);background:var(--raised)}
.b-row.pair .b-in + .b-in{margin-left:0}
.b-row.b-head{min-height:0;padding-bottom:4px;color:var(--soft);font-size:12px;letter-spacing:-.01em}
.b-row.b-head span{flex:1}
.b-lab{flex:none;width:112px;color:var(--soft);font-size:14px;letter-spacing:-.016em}
.b-lab + .b-in{margin-left:0}
.b-what{flex:1;display:grid;gap:2px;min-width:0;padding:10px 8px 10px 0;font-size:16px;line-height:1.3}
.b-what b{font-weight:600}
.b-what small{color:var(--soft);font-size:12px;line-height:1.35;letter-spacing:-.01em}
.b-row.tall{align-items:flex-start}
.b-togs{flex:none;display:grid;justify-items:end;padding:6px 0}
.b-kind{flex:none;padding:3px 8px;border-radius:980px;background:var(--fill);color:var(--soft);font-size:11px;line-height:1.3;letter-spacing:0;white-space:nowrap}
.b-ic{flex:none;position:relative;display:grid;place-items:center;width:36px;height:36px;padding:0;border:0;border-radius:99px;background:none;color:var(--soft);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .2s,color .2s,transform .12s var(--ease)}
.b-ic::before{content:"";width:8px;height:8px;border:solid currentColor;border-width:2px 0 0 2px;rotate:45deg;translate:0 2px}
.b-ic.down::before{rotate:225deg;translate:0 -2px}
.b-ic.cut::before{width:12px;height:2px;border:0;border-radius:2px;background:currentColor;rotate:none;translate:none}
.b-ic:hover{background:var(--fill);color:var(--ink)}
.b-ic.cut:hover{color:#d70015}
.b-ic:active{transform:scale(.88)}
.b-ic:disabled{color:var(--line-2);background:none;cursor:default;transform:none}
/* a switch: its words, then the track and the knob */
.b-tog{position:relative;display:flex;align-items:center;justify-content:flex-end;flex:none;min-height:34px;padding:0 54px 0 0;border:0;background:none;color:var(--soft);font:400 13px/1.2 var(--text);letter-spacing:-.01em;white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:color .2s}
.b-tog::before{content:"";position:absolute;right:0;top:50%;width:44px;height:26px;margin-top:-13px;border-radius:99px;background:var(--line-2);transition:background-color .25s,box-shadow .2s}
.b-tog::after{content:"";position:absolute;right:20px;top:50%;width:22px;height:22px;margin-top:-11px;border-radius:99px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:right .25s var(--ease),width .15s}
.b-tog[aria-checked="true"]{color:var(--ink)}
.b-tog[aria-checked="true"]::before{background:var(--accent)}
.b-tog[aria-checked="true"]::after{right:2px}
.b-tog:hover::before{box-shadow:0 0 0 4px var(--fill)}
.b-tog:active::after{width:27px}

/* a colour: the ready dots, any colour on the slider, or one typed in */
.b-mixer{display:grid;gap:8px}
.b-dots{display:flex;flex-wrap:wrap;gap:2px;margin-left:-5px}
.b-dot{display:grid;place-items:center;width:40px;height:40px;padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.b-dot::before{content:"";width:28px;height:28px;border-radius:99px;background:var(--c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.12),0 0 0 2px var(--bg),0 0 0 4px transparent;transition:transform .25s var(--ease),box-shadow .2s}
.b-dot:hover::before{transform:scale(1.12)}
.b-dot:active::before{transform:scale(.92)}
.b-dot[aria-pressed="true"]::before{box-shadow:inset 0 0 0 1px rgba(0,0,0,.12),0 0 0 2px var(--bg),0 0 0 4px var(--accent)}
.b-mix{display:flex;align-items:center;gap:12px}
.b-hue{flex:1;min-width:0;height:44px;margin:0;background:none;cursor:pointer;-webkit-appearance:none;appearance:none}
.b-hue::-webkit-slider-runnable-track{height:12px;border-radius:99px;background:linear-gradient(90deg,hsl(0 72% 42%),hsl(60 72% 42%),hsl(120 72% 42%),hsl(180 72% 42%),hsl(240 72% 42%),hsl(300 72% 42%),hsl(360 72% 42%))}
.b-hue::-moz-range-track{height:12px;border-radius:99px;background:linear-gradient(90deg,hsl(0 72% 42%),hsl(60 72% 42%),hsl(120 72% 42%),hsl(180 72% 42%),hsl(240 72% 42%),hsl(300 72% 42%),hsl(360 72% 42%))}
.b-hue::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;margin-top:-8px;border:3px solid #fff;border-radius:99px;background:var(--c,#888);box-shadow:0 1px 5px rgba(0,0,0,.35);transition:transform .15s var(--ease)}
.b-hue::-moz-range-thumb{width:22px;height:22px;border:3px solid #fff;border-radius:99px;background:var(--c,#888);box-shadow:0 1px 5px rgba(0,0,0,.35)}
.b-hue:hover::-webkit-slider-thumb{transform:scale(1.1)}
.b-hue:active::-webkit-slider-thumb{transform:scale(1.2)}
.b-hue:hover::-moz-range-thumb{transform:scale(1.1)}
.b-hue:active::-moz-range-thumb{transform:scale(1.2)}
.b-hue:focus-visible{outline:0}
.b-hue:focus-visible::-webkit-slider-thumb{box-shadow:0 1px 5px rgba(0,0,0,.35),0 0 0 4px color-mix(in srgb,var(--accent) 40%,transparent)}
.b-hue:focus-visible::-moz-range-thumb{box-shadow:0 1px 5px rgba(0,0,0,.35),0 0 0 4px color-mix(in srgb,var(--accent) 40%,transparent)}
.b-in.b-hex{flex:none;width:124px;height:44px;padding:0 12px;font:400 15px/1 var(--mono);letter-spacing:0}

/* what a change did, said in a small dark note over the CRM, with its Undo. It goes after a few seconds unless it asks something. */
.b-note{position:absolute;left:50%;bottom:36px;z-index:5;translate:-50% 0;display:flex;align-items:center;gap:8px 18px;width:max-content;max-width:min(480px,calc(100% - 72px));padding:12px 18px;border-radius:20px;background:var(--night);color:var(--cream);font-size:14px;line-height:1.43;letter-spacing:-.016em;box-shadow:0 20px 40px -18px rgba(0,0,0,.5);outline:0;transition:opacity .3s,translate .3s var(--ease)}
.b-note:not([data-on]),.b-note:empty,.build[data-full] .b-note{opacity:0;visibility:hidden;translate:-50% 8px;transition:opacity .3s,translate .3s var(--ease),visibility 0s .3s}
.b-note:focus-visible{box-shadow:0 0 0 3px var(--accent),0 20px 40px -18px rgba(0,0,0,.5)}
.b-note .b-opts{flex:none}
.b-note:has(.b-chip + .b-chip){flex-direction:column;align-items:flex-start}
.b-note:has(.b-chip + .b-chip) .b-opts{flex:0 1 auto}
.b-note .b-chip{border-color:rgba(255,255,255,.32);background:transparent;color:var(--cream)}
.b-note .b-chip:hover{border-color:var(--cream);background:rgba(255,255,255,.14)}
@keyframes b-in{from{opacity:0;translate:0 8px}}

/* ask for anything: what was asked, and what it did */
.b-log{max-height:320px;overflow-y:auto;scrollbar-width:thin}
.b-log:has(.b-turns:empty){display:none}
.b-turns{display:grid;gap:12px;padding:2px 2px 14px}
.b-turn{display:grid;gap:6px}
.b-you{justify-self:end;max-width:88%;padding:8px 14px;border-radius:18px 18px 4px 18px;background:var(--accent);color:var(--on-accent);font-size:15px;line-height:1.35}
.b-it{justify-self:start;display:grid;gap:4px;max-width:94%;padding:10px 14px;border-radius:18px 18px 18px 4px;background:var(--card);font-size:15px;line-height:1.4}
.b-it .b-opts{margin-top:6px}

/* your design: the true counts, every change in plain words, and the one ask */
.b-made{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:10px}
.b-made[hidden],.b-made div[hidden]{display:none}
.b-made div{display:flex;flex-direction:column-reverse;padding:14px 16px;border-radius:14px;background:var(--card)}
.b-made dd{font:600 32px/1.05 var(--display);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.b-made dt{margin-top:4px;color:var(--soft);font-size:12px;line-height:1.3;letter-spacing:-.01em}
.b-lines{margin-top:14px}
.b-lines li{padding:10px 0;border-bottom:1px solid var(--line);color:var(--ink-2);font-size:15px;line-height:1.4}
.btn:disabled{color:var(--faint);cursor:default;transform:none}
.btn.b-full{display:flex;width:100%;height:52px;margin-top:20px}
.b-save .btn.b-full,.b-save .b-stack,.b-save .b-add{margin-top:12px}
#save-got[hidden]{display:none}
.b-see{display:none}

/* the CRM: the real app in one frame, drawn at desktop size and scaled to its box */
.crm{grid-column:1;grid-row:1;position:sticky;top:calc(var(--bar) + 20px);display:flex;flex-direction:column;height:calc(100svh - var(--bar) - 40px);min-height:420px;padding:14px;border-radius:28px;background:var(--card)}
.b-bar{flex:none;display:flex;align-items:center;gap:10px;min-height:32px;padding:0 4px 12px}
.b-bar .tag{margin-right:auto}
.build:not([data-full]) :is(#b-back,#b-mail-2),.build[data-full] #b-size{display:none}
.b-shot{position:relative;flex:1;display:flex;min-height:0;border-radius:16px;overflow:hidden;box-shadow:0 0 0 1px var(--line),0 20px 40px -24px rgba(0,0,0,.25)}
.b-shot.flash{animation:b-flash 1s var(--ease)}
@keyframes b-flash{25%{box-shadow:0 0 0 3px var(--accent),0 20px 40px -24px rgba(0,0,0,.25)}}
/* the frame's box: the app is drawn inside it at desktop size and scaled to fit, so nothing here can ever be wider than the box */
.fit{position:relative;flex:1;min-width:0;min-height:0;overflow:hidden;background:var(--data-page,#f5f5f7)}
.fit iframe{position:absolute;top:0;left:0;border:0;background:var(--data-page,#f5f5f7);transform-origin:0 0;opacity:0;transition:opacity .6s var(--ease)}
.crm[data-state="live"] iframe{opacity:1}
.ghost{position:absolute;top:0;left:0;width:100%;height:100%;transform-origin:0 0;transition:opacity .6s var(--ease),visibility .6s}
.ghost :is(.lane,.card){animation:none}
.ghost .lanes{height:auto;position:absolute;inset:auto 0 0;top:250px;margin-top:0}
/* at the frame's scale the shape sits where the app's own bar, heading, figures and lanes will be */
.ghost.desk .app-bar{min-height:64px;margin:12px 18px 0 90px;padding:0 14px;border-radius:24px;gap:10px}
.ghost.desk .initials{width:38px;height:38px;border-radius:12px}
.ghost.desk .tab{padding:14px 18px;border-radius:14px;font-size:15px}
.ghost.desk .app-head{margin:104px 72px 0}
.ghost.desk .app-head strong{font-size:32px}
.ghost.desk .figs{grid-auto-columns:1fr;gap:16px;margin:8px 50px 0 72px}
.ghost.desk .fig{min-height:148px;padding:20px 22px;border-radius:22px}
.ghost.desk .fig small{font-size:13px}
.ghost.desk .fig .bone{width:56px;height:30px}
.ghost.desk .lanes{top:480px;grid-auto-columns:192px;gap:8px;margin:0 0 0 72px}
.ghost.desk .lane{border-radius:20px;padding:14px 12px}
.ghost.desk .lane header{font-size:14px;padding:4px 8px 18px}
.ghost.desk .card{padding:16px 14px;border-radius:14px}
.ghost .initials{--firm:var(--line-2)}
.ghost .card{display:block;padding:12px 10px}
.crm[data-state="live"] .ghost{opacity:0;visibility:hidden}
.crm:is([data-state="wait"],[data-state="failed"]) .ghost{opacity:.35}
.cover{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);display:flex;align-items:center;gap:12px;min-height:44px;padding:0 18px;border-radius:980px;background:var(--night);color:var(--cream);font-size:14px;white-space:nowrap;z-index:2;box-shadow:0 20px 40px -18px rgba(0,0,0,.5);transition:opacity .5s,visibility .5s}
.cover .meter{background:rgba(255,255,255,.2)}
.cover .meter::after{background:var(--accent)}
.crm[data-state="live"] .cover{opacity:0;visibility:hidden}
.crm:not([data-state="loading"]) .meter,.crm:not([data-state="failed"]) #c-retry{display:none}
.build[data-full] .crm{position:fixed;inset:0;z-index:80;height:auto;border-radius:0}
/* the reveal: their name, large, on black, then the curtain lifts on their CRM */
.veil{position:fixed;inset:0;z-index:90;display:grid;place-items:center;background:var(--night);color:var(--cream);visibility:hidden;pointer-events:none}
.veil p{padding:0 24px;font:600 clamp(46px,9vw,150px)/1 var(--display);letter-spacing:-.03em;text-align:center}
.build[data-full] .veil{animation:b-veil 1.8s cubic-bezier(.76,0,.24,1) both}
.build[data-full] .veil p{animation:b-in .8s var(--ease) both}
@keyframes b-veil{0%,60%{visibility:visible;transform:none}100%{visibility:hidden;transform:translateY(-100%)}}

.build :is(.b-opt,.b-pill,.b-chip,.b-pickb,.b-ic,.b-tog,.b-dot,.b-text):focus-visible{outline:2px solid var(--accent-ink);outline-offset:2px}

/* a phone: the choices first, and the CRM opens over them at full size */
@media (max-width:899px){
  .build{display:block;padding:calc(var(--bar) + 12px) 16px calc(112px + env(safe-area-inset-bottom))}
  .choices h1{font-size:34px}
  .b-part{padding-top:48px}
  .b-ic,.b-dot{width:44px;height:44px}
  .b-tog,.b-pill,.b-chip{min-height:44px}
  .b-row .b-in{height:44px}
  .b-lab{width:96px}
  .b-in.b-hex{width:112px}
  .btn.sm{min-height:44px}
  .b-note{position:fixed;left:16px;right:16px;bottom:calc(76px + env(safe-area-inset-bottom));width:auto;max-width:none;translate:none}
  .b-note:not([data-on]),.b-note:empty{translate:0 8px}
  .b-note{flex-wrap:wrap}   /* its buttons go under its words when both will not fit, never one word a line */
  .b-note > div:first-child{flex:1 1 200px;min-width:0}
  .build[data-at="ask"] .b-note{display:none}   /* the ask box's own log already says it, and the note would sit over the box */
  .build:not([data-full]) .b-note[data-on]:not(:empty){visibility:visible}
  .b-opts3[data-n="4"]{grid-template-columns:repeat(2,minmax(0,1fr))}
  .building .nav{padding:0 16px}
  .b-see{position:fixed;left:16px;right:16px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:20;display:flex;height:52px;box-shadow:0 12px 30px -10px rgba(0,0,0,.4)}
  .b-see[hidden]{display:none}
  .crm{position:fixed;inset:0;z-index:80;height:auto;min-height:0;padding:10px;border-radius:0;visibility:hidden}
  .build[data-full] .crm{visibility:visible}
  .b-bar .tag{visibility:hidden}
  .cover{white-space:normal}
}
@media (prefers-reduced-motion:reduce){
  .build *,.build *::before,.build *::after{animation:none !important;transition:none !important}
}

/* A word from the page itself (a design started afresh, a link opened): in the column above the step, on a solid panel, its words above its
   buttons, so it never covers the CRM or a control and reads at any width (the builder review, 11 Nov 2026). */
.b-notice{display:grid;gap:10px;margin-top:16px;padding:14px 16px;border-radius:16px;background:#16181d;color:#fff;font-size:15px;line-height:1.4;letter-spacing:-.016em}
.b-notice[hidden]{display:none}
.b-notice p{margin:0;text-wrap:pretty}
.b-notice .b-opts{align-items:center;gap:8px 16px}
.b-notice .b-chip.b-strong{border-color:#fff;background:#fff;color:#0b0c0e}
.b-notice .b-chip.b-strong:hover{background:#e8eaee}
.b-notice .b-text{min-height:36px;color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.5)}
/* the bots picked, each said to be not running, and what they would cost a month */
.b-crew{margin-top:24px}
.b-crew h3{margin-top:0}
.b-crew-sum{color:var(--ink-2);font-size:15px;line-height:1.4;letter-spacing:-.016em}
.b-crew .b-rows{margin-top:6px}
.b-crew .b-row{min-height:0}
.b-crew .b-what{padding:9px 0}
a.s-more-b{text-decoration:none}
#crew-help{margin:-6px 0 6px}
#crew-help .s-more-b{margin-top:10px}
.b-picked{color:var(--soft)}
/* what happens next: three plain lines */
.b-next{display:grid;gap:8px;margin:0;padding:0 0 0 1.3em;color:var(--ink-2);font-size:15px;line-height:1.4;letter-spacing:-.016em}
.b-next li::marker{color:var(--faint)}