/* How we work: one handle drives Find, Build, Launch for Plair and OwnVouch. Classes are prefixed bt-. */
/* ——— One green handle. A single Book-a-call-green handle on a Find · Build · Launch track
   scrubs the story of our two own products. Every class here is prefixed bt-. ——— */

/* Lab bar (lab page only) */
.bt-labbar{border-bottom:var(--border-hairline);background:var(--paper-100)}
.bt-labbar .wrap{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;justify-content:space-between;padding-block:10px;font:var(--type-caption);color:var(--text-muted)}
.bt-labbar b{font-weight:600;color:var(--text-primary)}
.bt-labbar a{font-weight:600;color:var(--text-primary)}
.bt-after{height:40vh}

/* ——— Section layout: the figure pins beside the three steps ——— */
section[data-bt]{overflow-x:clip}
.bt-sec{display:grid;gap:56px;grid-template-columns:minmax(0,1.24fr) minmax(0,.76fr);align-items:start}
.bt-fig{position:sticky;top:max(12px,calc(50vh - var(--bt-fh,740px) / 2));display:grid;gap:14px;min-width:0;container:btfig/inline-size}
/* The pin starts while Find is still below the centre and outlasts Launch's midpoint. */
.bt-steps{padding-top:max(0px,calc(min(var(--bt-fh,740px) / 2, 50vh - 12px) - 26vh + 14vh));padding-bottom:max(0px,calc(var(--bt-fh,740px) / 2 - 23vh + 16px + 20vh))}
.bt-steps .scrolly__step{min-height:52vh;display:flex;flex-direction:column;justify-content:center;position:relative;padding-left:22px;border-left:2px solid var(--line-hairline);transition:border-color var(--dur-base) var(--ease-out)}
.bt-steps .index-num{align-self:flex-start;margin:0 0 10px -6px;padding:5px 6px 4px;border-radius:var(--radius-control);transition:background-color var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out)}
.bt-steps .scrolly__step:last-child{min-height:46vh}
.bt-steps .scrolly__step.bt-on{border-left-color:var(--leaf-600)}
.bt-steps .bt-on .index-num{background:var(--surface-invert);color:var(--text-on-invert)}

/* ——— Top: framing line and the product switch ——— */
.bt-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 20px}
.bt-frame{flex:1 1 220px;max-width:34ch;font:700 16px/1.35 var(--font-display);letter-spacing:-.01em;color:var(--text-primary);text-wrap:balance}
.bt-seg{display:inline-grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:3px;padding:3px;background:var(--paper-000);border:1px solid var(--line-strong);border-radius:var(--radius-control)}
.bt-seg__o{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border:1px solid transparent;border-radius:var(--radius-control);background:transparent;color:var(--text-primary);font:var(--type-ui);font-weight:600;cursor:pointer;white-space:nowrap;transition:var(--transition-control)}
.bt-seg__o svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

.bt-seg__o[aria-checked="true"]{background:var(--surface-invert);color:var(--text-on-invert)}

.bt-seg__o:focus-visible{box-shadow:var(--glow-focus)}
.bt-seg__o:active,.bt-part:active,.bt-btn:active{box-shadow:inset 0 -2px 0 var(--leaf-700)}

/* Only the chosen product's words and screens are in the page's flow. */
.bt-sec[data-prod="plair"] [data-for="ownvouch"],.bt-sec[data-prod="ownvouch"] [data-for="plair"]{display:none!important}

/* ——— Stage: three phases share one cell, so it never changes height between them ——— */
.bt-stage{position:relative;display:grid;grid-template-columns:minmax(0,1fr);min-height:clamp(340px,calc(100vh - 450px),440px)}
.bt-stage::before{content:"";position:absolute;inset:-6px -10px;background-image:var(--grid-pattern);background-size:var(--grid-cell) var(--grid-cell);-webkit-mask-image:radial-gradient(closest-side,var(--moss-900) 40%,transparent);mask-image:radial-gradient(closest-side,var(--moss-900) 40%,transparent);pointer-events:none}
.bt-ph{grid-area:1/1;position:relative;display:grid;gap:12px 28px;min-width:0;align-content:stretch}
.bt-ph--find{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);grid-template-rows:auto auto 1fr;grid-template-areas:"head slot" "notes slot" "brief slot";opacity:clamp(0,calc(var(--w1,1) * 1.4),1)}
.bt-ph--build{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);grid-template-rows:auto 1fr;grid-template-areas:"slot head" "slot body";opacity:var(--w2,0)}
.bt-ph--launch{grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);grid-template-rows:auto 1fr;grid-template-areas:"slot head" "slot body";opacity:var(--w3,0)}
.bt-ph--build .bt-head,.bt-ph--build .bt-body{transform:translateY(calc((1 - var(--w2,0)) * 14px))}
.bt-ph--launch .bt-head,.bt-ph--launch .bt-body{transform:translateX(calc((1 - var(--w3,0)) * 28px))}

.bt-head{grid-area:head;display:grid;gap:6px;align-content:start;min-width:0}
.bt-kick{font:var(--type-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-muted)}
.bt-kick b{display:inline-block;margin-right:6px;padding:3px 5px;border-radius:var(--radius-control);background:var(--leaf-100);color:var(--leaf-900);font-weight:500}
.bt-t{font:800 19px/1.2 var(--font-display);letter-spacing:-.02em;color:var(--text-primary);text-wrap:balance}
.bt-body{grid-area:body;display:grid;gap:12px;align-content:start;min-width:0}
.bt-slotcell{grid-area:slot;display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0;min-height:0}
.bt-slot{flex:1 1 auto;width:100%;min-height:120px}
.bt-slotcap{font:var(--type-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-muted);padding-bottom:2px}

/* 01 Find: the notes stack up; they peel away one by one as the handle leaves */
.bt-notes{grid-area:notes;list-style:none;margin:0;padding:0;display:grid;gap:8px;align-content:start}
.bt-note{--k:clamp(0,calc(var(--w1,1) * 1.6 - var(--i) * .3),1);padding:10px 14px 11px;background:var(--paper-000);border:1px solid var(--line-strong);border-radius:var(--radius-card);opacity:var(--k);transform:translate(calc(var(--dx,0px) + (1 - var(--k)) * -30px),calc((1 - var(--k)) * 12px)) rotate(calc(var(--r,0) * 1deg + (1 - var(--k)) * -5deg))}
.bt-note:nth-child(1){--i:0;--r:-1;--dx:0px}
.bt-note:nth-child(2){--i:1;--r:.8;--dx:10px}
.bt-note:nth-child(3){--i:2;--r:-.4;--dx:4px}
.bt-note__w{display:block;font:800 15.5px/1.25 var(--font-display);letter-spacing:-.01em;color:var(--text-primary)}
.bt-note__h{display:block;margin-top:2px;font:400 14px/1.4 var(--font-sans);color:var(--text-body)}
.bt-brief{grid-area:brief;display:grid;gap:8px;align-content:start;justify-items:start}
.bt-stamp{display:inline-block;padding:7px 11px;border:2px solid var(--leaf-700);border-radius:var(--radius-control);background:var(--leaf-100);color:var(--leaf-900);font:800 16px/1 var(--font-display);letter-spacing:-.01em;transform:rotate(-2deg);opacity:clamp(0,calc(var(--w1,1) * 3 - 2),1)}
.bt-brief__t{max-width:46ch;font:500 14.5px/1.45 var(--font-sans);color:var(--text-primary)}
.bt-brief__t b{font:800 1em/1 var(--font-display)}
.bt-pre .bt-note,.bt-pre .bt-stamp{visibility:hidden}
.bt-drop .bt-note{animation:bt-drop 440ms var(--ease-out) backwards;animation-delay:calc(var(--i) * 170ms + 100ms)}
.bt-drop .bt-stamp{animation:bt-thump 380ms var(--ease-out) backwards;animation-delay:720ms}

/* 02 Build: pick a screen */
.bt-parts{display:grid;gap:8px}
.bt-part{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 12px;text-align:left;background:var(--paper-000);border:1px solid var(--line-strong);border-radius:var(--radius-control);color:var(--text-primary);font:var(--type-ui);font-weight:600;cursor:pointer;transition:var(--transition-control)}

.bt-part__n{font:500 12px/1 var(--font-mono);color:var(--text-muted)}
.bt-part__mk{margin-left:auto;width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;visibility:hidden}
.bt-part[aria-checked="true"]{background:var(--surface-invert);border-color:transparent;color:var(--text-on-invert)}

.bt-part[aria-checked="true"] .bt-part__n{color:var(--text-on-invert)}
.bt-part[aria-checked="true"] .bt-part__mk{visibility:visible}
.bt-part:focus-visible{box-shadow:var(--glow-focus)}
.bt-desc{min-height:5.8em;font:400 14.5px/1.45 var(--font-sans);color:var(--text-body)}
.bt-desc b{font:800 1em/1 var(--font-display);color:var(--text-primary)}
.bt-desc.bt-new{animation:bt-in 240ms var(--ease-out)}
.bt-with{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.bt-with__l{font:var(--type-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-muted)}
.bt-chip{display:inline-flex;align-items:center;min-height:28px;padding:0 10px;border-radius:var(--radius-tag);background:var(--leaf-100);color:var(--leaf-900);font:600 13px/1 var(--font-sans)}

/* 03 Launch: where it is today */
.bt-own{font:var(--type-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-muted)}
.bt-badges{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.bt-badge{display:inline-flex;align-items:center;gap:8px;min-height:34px;padding:0 11px;border-radius:var(--radius-control);border:1px solid var(--line-strong);background:var(--paper-000);color:var(--text-primary);font:600 14px/1 var(--font-sans)}
.bt-badge--on{position:relative;min-height:42px;padding:0 14px;border-color:var(--leaf-700);background:var(--leaf-100);color:var(--leaf-900);font:800 19px/1 var(--font-display);letter-spacing:-.01em}
.bt-badge__dot{position:relative;width:9px;height:9px;border-radius:2px;background:currentColor;flex:none}
.bt-badge__dot::after{content:"";position:absolute;inset:-4px;border:2px solid currentColor;border-radius:3px;opacity:0}
.bt-launch .bt-badge--on .bt-badge__dot::after{animation:bt-pulse 1.4s var(--ease-out) 3}
.bt-launch .bt-badge--on{animation:bt-bump 420ms var(--ease-out)}
.bt-line{max-width:42ch;font:400 14.5px/1.45 var(--font-sans);color:var(--text-body)}
.bt-ctas{display:flex;flex-wrap:wrap;gap:10px}
.bt-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:14px 22px;border:1px solid var(--line-strong);border-radius:var(--radius-control);background:var(--paper-000);color:var(--text-primary);font:var(--type-ui);font-weight:600;line-height:1.1;text-decoration:none;white-space:nowrap;transition:var(--transition-control)}
.bt-btn--on{background:var(--surface-invert);border-color:transparent;color:var(--text-on-invert)}
.bt-btn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.bt-btn:focus-visible{box-shadow:var(--glow-focus)}

/* ——— The real screens. Positioned by the script from the slot of each phase. ——— */
.bt-devs{position:absolute;inset:0;z-index:2;pointer-events:none;visibility:hidden}
.bt-ready .bt-devs{visibility:visible}
.bt-dev{position:absolute;left:0;top:0;padding:4px;background:var(--paper-000);border:1.5px solid var(--moss-800);border-radius:var(--rad,18px);transform-origin:50% 50%;will-change:transform,opacity}
.bt-ease .bt-dev{transition:transform 360ms var(--ease-out),opacity 200ms var(--ease-out)}
.bt-stage[data-at="2"] .bt-dev{pointer-events:auto;cursor:pointer}
.bt-dev::after{content:"";position:absolute;inset:-6px;border:2px solid var(--leaf-700);border-radius:calc(var(--rad,18px) + 5px);opacity:0;pointer-events:none}
.bt-dev.bt-sel::after{opacity:var(--w2,0)}
.bt-dev__scr{position:relative;width:100%;height:100%;overflow:hidden;border-radius:calc(var(--rad,18px) - 4px);background:var(--paper-100)}
.bt-dev__scr img{position:absolute;left:0;top:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:top center}
.bt-dev__scr img.bt-crop{height:auto;object-fit:fill}
.bt-dev__wire{position:absolute;inset:4px;display:flex;flex-direction:column;gap:7%;padding:18% 11% 12%;border-radius:calc(var(--rad,18px) - 4px);background:var(--paper-100);opacity:var(--wf,0);pointer-events:none}
.bt-dev__wire i{display:block;flex:none;border-radius:2px;background:var(--paper-300)}
.bt-dev__wire i:nth-child(1){height:4%;width:55%;background:var(--paper-400)}
.bt-dev__wire i:nth-child(2){height:30%;background:var(--leaf-100);outline:1px dashed var(--leaf-700);outline-offset:-1px}
.bt-dev__wire i:nth-child(3){height:3%;width:85%}
.bt-dev__wire i:nth-child(4){height:3%;width:62%}
.bt-dev__wire i:nth-child(5){margin-top:auto;height:6%;background:var(--paper-400)}
.bt-dev__tag{position:absolute;left:50%;top:calc(100% + 10px);translate:-50% 0;scale:calc(1 / var(--s,1));transform-origin:50% 0;padding:6px 9px;border:1px solid var(--line-strong);border-radius:var(--radius-control);background:var(--paper-000);color:var(--text-primary);font:600 12.5px/1 var(--font-sans);white-space:nowrap;opacity:var(--w2,0);pointer-events:none}
.bt-dev.bt-sel .bt-dev__tag{background:var(--surface-invert);border-color:transparent;color:var(--text-on-invert)}
.bt-dev__live{position:absolute;right:-14px;top:12%;display:none;align-items:center;gap:7px;padding:7px 10px;border:1px solid var(--leaf-700);border-radius:var(--radius-control);background:var(--leaf-100);color:var(--leaf-900);font:800 14px/1 var(--font-display);letter-spacing:-.01em;white-space:nowrap;rotate:4deg;scale:calc(1 / var(--s,1));transform-origin:100% 0;opacity:var(--w3,0)}
.bt-dev__live i{width:8px;height:8px;border-radius:2px;background:currentColor}
.bt-dev[data-for="ownvouch"] .bt-dev__live{right:auto;left:-14px;rotate:-4deg;transform-origin:0 0}
.bt-dev__live--soft{background:var(--paper-000);border-color:var(--line-strong);color:var(--text-primary);font:600 13px/1 var(--font-sans)}
.bt-dev.bt-sel .bt-dev__live{display:inline-flex}
.bt-launch .bt-dev.bt-sel .bt-dev__live{animation:bt-pop 420ms cubic-bezier(.3,1.5,.5,1)}
/* OwnVouch's live lookup on the web, shown at Launch */
.bt-web{position:absolute;left:0;top:0;z-index:6;overflow:hidden;background:var(--paper-000);border:1.5px solid var(--moss-800);border-radius:var(--radius-panel);opacity:0}
.bt-web__bar{display:flex;align-items:center;justify-content:space-between;gap:8px;height:28px;padding:0 4px 0 9px;border-bottom:1px solid var(--line-strong);background:var(--paper-100);font:500 11.5px/1 var(--font-mono);color:var(--text-primary)}
.bt-web__live{display:inline-flex;align-items:center;gap:6px;height:20px;padding:0 6px;border:1px solid var(--leaf-700);border-radius:var(--radius-control);background:var(--leaf-100);color:var(--leaf-900);font:700 11.5px/1 var(--font-sans)}
.bt-web__live i{width:6px;height:6px;border-radius:1px;background:currentColor}
.bt-web__img{position:relative;aspect-ratio:500/320;overflow:hidden}
.bt-web__img img{position:absolute;left:-24%;top:-9.375%;width:240%;max-width:none;height:auto}
.bt-launch .bt-web{animation:bt-bump 420ms var(--ease-out) 140ms}
/* The launch moment: a square ping off the front phone */
.bt-ring{position:absolute;left:0;top:0;z-index:1;border:3px solid var(--leaf-500);opacity:0;pointer-events:none}
.bt-ring.bt-go{animation:bt-ping 900ms var(--ease-out)}

/* ——— The track and the one green handle ——— */
.bt-ctl{--bt-hw:180px;display:grid;gap:6px}
.bt-ctl__top{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 16px;min-height:44px}
.bt-hint{display:flex;align-items:center;gap:9px;font:600 14.5px/1.35 var(--font-sans);color:var(--text-primary)}
.bt-hint__ic{display:inline-grid;place-items:center;width:30px;height:22px;flex:none;border-radius:var(--radius-control);background:var(--surface-invert);color:var(--text-on-invert)}
.bt-hint__ic svg{width:18px;height:12px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bt-track{position:relative;height:56px;touch-action:pan-y;cursor:pointer;-webkit-tap-highlight-color:transparent}
.bt-rail{position:absolute;left:calc(var(--bt-hw) / 2);right:calc(var(--bt-hw) / 2);top:50%;height:6px;margin-top:-3px;border-radius:1px;background:var(--line-strong)}
.bt-rail__fill{position:absolute;inset:0;border-radius:1px;background:var(--leaf-600);transform-origin:0 50%;transform:scaleX(var(--p,0))}
.bt-tick{position:absolute;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border:1px solid var(--moss-500);border-radius:2px;background:var(--paper-000);transition:background-color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}
.bt-tick:nth-child(2){left:0}.bt-tick:nth-child(3){left:50%}.bt-tick:nth-child(4){left:100%}
.bt-tick.bt-lit{background:var(--surface-invert);border-color:var(--leaf-700);color:var(--text-on-invert)}
.bt-handle{position:absolute;left:0;top:2px;width:var(--bt-hw);height:52px;display:flex;align-items:center;gap:10px;padding:0 12px;border:1px solid transparent;border-radius:var(--radius-control);background:var(--surface-invert);color:var(--text-on-invert);font:var(--type-ui);font-weight:600;box-shadow:inset 0 -1px 0 var(--leaf-700);cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;transition:background-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-instant) var(--ease-out);will-change:transform;z-index:2}

.bt-handle.bt-drag{cursor:grabbing;background:var(--moss-700);box-shadow:inset 0 -1px 0 var(--leaf-700),0 0 0 1px var(--leaf-700);color:var(--text-on-invert)}
.bt-handle:focus-visible{box-shadow:inset 0 -1px 0 var(--leaf-700),var(--glow-focus)}
.bt-handle::after{content:"";position:absolute;inset:-1px;border:2px solid var(--leaf-600);border-radius:3px;opacity:0;pointer-events:none}
.bt-cue .bt-handle::after{animation:bt-cue 1.6s var(--ease-out) 2 300ms}
.bt-grip{display:inline-grid;grid-template-columns:repeat(3,2px);gap:3px;height:18px;flex:none;opacity:.6}
.bt-grip i{background:currentColor;border-radius:1px}
.bt-handle__t{flex:1 1 auto;display:flex;align-items:baseline;gap:7px;white-space:nowrap}
.bt-handle__t b{font:500 12px/1 var(--font-mono);letter-spacing:.06em}
.bt-chev{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:opacity var(--dur-fast) var(--ease-out)}
.bt-chev.bt-dim{opacity:.3}
.bt-auto .bt-chev--r:not(.bt-dim){animation:bt-nudge 1.5s var(--ease-in-out) infinite}
.bt-stops{position:relative;height:44px}
.bt-stop{position:absolute;top:0;left:calc(var(--bt-hw) / 2 + (100% - var(--bt-hw)) * var(--k));translate:-50% 0;display:inline-flex;align-items:center;gap:5px;min-height:44px;padding:0 10px;border:0;border-radius:var(--radius-control);background:none;color:var(--text-body);font:600 13.5px/1 var(--font-sans);white-space:nowrap;cursor:pointer;transition:var(--transition-control)}
.bt-stop:nth-child(1){--k:0}.bt-stop:nth-child(2){--k:.5}.bt-stop:nth-child(3){--k:1}
.bt-stop b{font:500 12px/1 var(--font-mono);color:var(--text-muted)}

.bt-stop[aria-current="step"]{color:var(--text-primary);box-shadow:inset 0 -3px 0 var(--leaf-700)}
.bt-stop[aria-current="step"] b{color:var(--text-primary)}
.bt-stop:focus-visible{box-shadow:var(--glow-focus)}
.bt-stop[aria-current="step"]:focus-visible{box-shadow:inset 0 -3px 0 var(--leaf-700),var(--glow-focus)}

/* Demo pill: says the figure is moving on its own, and that any input takes over */
.bt-demo{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:184px;min-height:44px;padding:0 14px;border:1px solid var(--line-strong);border-radius:var(--radius-control);background:var(--paper-000);color:var(--text-primary);font:600 13px/1.2 var(--font-sans);cursor:pointer;transition:var(--transition-control)}
.bt-demo.bt-off{visibility:hidden}

.bt-demo:focus-visible{box-shadow:var(--glow-focus)}
.bt-demo__dot{position:relative;width:8px;height:8px;border-radius:2px;background:var(--leaf-600);flex:none}
.bt-demo__dot::after{content:"";position:absolute;inset:-4px;border:2px solid var(--leaf-600);border-radius:3px;animation:bt-pulse 1.4s var(--ease-out) infinite}
.bt-demo[data-s="paused"] .bt-demo__dot::after{animation:none;opacity:0}
.bt-demo[data-s="again"] .bt-demo__dot{display:none}

/* Under the figure: the same steps, for clients */
.bt-cap{font:500 14px/1.65 var(--font-sans);color:var(--text-body);text-wrap:pretty}
.bt-cap a{white-space:nowrap;margin-right:16px;font-weight:600;color:var(--text-primary);border:0;text-decoration:underline;text-decoration-color:var(--leaf-600);text-decoration-thickness:2px;text-underline-offset:4px}

/* Forced colours drop box-shadow rings, so a transparent outline stands in. */
.bt-fig :focus-visible{outline:2px solid transparent;outline-offset:2px}
@media (forced-colors:active){
  .bt-handle,.bt-seg__o[aria-checked="true"],.bt-part[aria-checked="true"],.bt-stop[aria-current="step"]{outline:2px solid CanvasText;outline-offset:2px}
  .bt-fig :focus-visible{outline:3px solid Highlight;outline-offset:3px}
}

/* ——— Narrow figure: phases stack, the screens sit above their words ——— */
@container btfig (max-width:559px){
  .bt-stage{min-height:0}
  .bt-ph{align-content:start}
  .bt-ph--find{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-template-areas:"head" "notes" "brief"}
  .bt-ph--find .bt-slotcell{display:none}
  .bt-ph--build{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 236px auto;grid-template-areas:"head" "slot" "body"}
  .bt-ph--launch{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 172px auto;grid-template-areas:"head" "slot" "body"}
  .bt-own{display:none}
  .bt-ph--build .bt-with{display:none}
  .bt-btn{min-height:46px;padding:12px 18px}
  .bt-note:nth-child(2){--dx:6px}.bt-note:nth-child(3){--dx:2px}
  .bt-parts{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .bt-part{justify-content:center;padding:0 6px;font-size:14px;text-align:center}
  .bt-part__n,.bt-part__mk{display:none}
  .bt-desc{min-height:4.4em}
  .bt-dev__tag{display:none}
  /* The status badges sit right under the small stack here, so the tag would only cover the screen. */
  .bt-dev__live,.bt-dev.bt-sel .bt-dev__live{display:none}
  .bt-ctas{display:grid;grid-template-columns:minmax(0,1fr)}
  .bt-ctl{--bt-hw:140px}
  .bt-handle{gap:9px;padding:0 12px}
  .bt-chev--l{display:none}
  /* The demo pill goes under the stops, so the handle sits higher on a phone screen. */
  .bt-ctl__top{display:contents}
  .bt-hint{order:0;min-height:44px}
  .bt-track{order:1}
  .bt-stops{order:2}
  .bt-seg{width:100%}
  .bt-demo{order:3;justify-self:start;min-width:0}
}

/* ——— Phones and tablets: no pin. The figure sits above the steps and demos itself. ——— */
@media (max-width:860px){
  .bt-sec{grid-template-columns:minmax(0,1fr);gap:8px}
  .bt-fig{position:static}
  .bt-steps{padding:0}
  .bt-steps .scrolly__step{min-height:0;padding-block:24px}
  .bt-steps .scrolly__step:first-child{padding-top:32px}
  .bt-cap a{display:inline-block;padding-block:11px}
  /* Phones never show the pill without a demo, so it gives its row back. */
  .bt-nodemo .bt-demo.bt-off{display:none}
}
@media (min-width:861px) and (max-width:1100px){
  .bt-sec{grid-template-columns:minmax(0,1.5fr) minmax(0,.5fr);gap:36px}
}
/* Short laptop screens: tighten so the pinned figure fits the window. */
@media (min-width:861px) and (max-height:760px){
  .bt-fig{gap:10px}
  .bt-frame{font-size:15px}
  .bt-note{padding:8px 12px 9px}
  .bt-note__w{font-size:15px}
  .bt-note__h{font-size:13.5px}
  .bt-ctl{gap:2px}
}

/* ——— Motion ——— */
@keyframes bt-drop{from{opacity:0;transform:translate(-6px,-24px) rotate(calc(var(--r,0) * 1deg - 4deg))}}
@keyframes bt-thump{from{opacity:0;transform:rotate(-2deg) scale(1.4)}}
@keyframes bt-in{from{opacity:0;transform:translateY(5px)}}
@keyframes bt-pop{0%{transform:scale(.3)}100%{transform:scale(1)}}
@keyframes bt-bump{0%{transform:scale(1)}40%{transform:scale(1.07)}100%{transform:scale(1)}}
@keyframes bt-pulse{0%{transform:scale(.6);opacity:.9}100%{transform:scale(1.7);opacity:0}}
@keyframes bt-ping{0%{transform:scale(1);opacity:1}100%{transform:scale(1.22);opacity:0}}
@keyframes bt-cue{0%{transform:scale(1);opacity:1}100%{transform:scale(1.18,1.5);opacity:0}}
@keyframes bt-nudge{0%,55%,100%{transform:translateX(0)}25%{transform:translateX(4px)}}
@keyframes bt-swap{from{opacity:.35}}
.bt-swap{animation:bt-swap 260ms var(--ease-out)}
.bt-reduced *,.bt-reduced *::before,.bt-reduced *::after{animation:none!important;transition:none!important}

/* No colour change on hover anywhere in the figure (owner's request). These restate the resting
   colours so the site-wide a:hover rule cannot recolour the figure's links. */
a.bt-btn:hover{color:var(--text-primary);border-color:var(--line-strong)}
a.bt-btn--on:hover{color:var(--text-on-invert);border-color:transparent}
.bt-cap a:hover{color:var(--text-primary);text-decoration-color:var(--leaf-600)}