/* Glass layer. Loaded last on every page, so it can restyle what the shared stylesheets draw.
 *
 * Signed off by Jacob on 1 October 2026 from the "Website Redesign Combined" mock-up: frosted-glass
 * panels over a soft moving glow, cards that light up under the pointer, buttons with a shimmer, a
 * call strip that stays on screen, icons on every answer in the form, and a left side that stays
 * still while the right side scrolls on the long pages. Behaviour lives in assets/glass.js.
 * Motion round two (12 October 2026) swapped the shimmer for a breathing ring (M11), the call strip
 * for a "Call Jacob" pill (M30), the card wash and tilt for an edge light and spotlight tilt (M21, M22),
 * the form's single sweep for a travelling streak (M16), and the row wave for a blur-in (M53).
 *
 * At Jacob's request on 12 October 2026, pointer-following edge and face lights were removed. Subtle tilt remains.
 * Movement honours prefers-reduced-motion. Colour honours the light and dark themes. */

/* The palette, the glass tokens and the fonts live in the shell regions of index.html, which generate assets/site-shell.css. */

/* ---- type: Chakra Petch for headings, IBM Plex Sans for reading (3 October 2026) ---- */
h1,h2,h3{font-weight:600;letter-spacing:-.005em;}
h1 em,h2 em,h3 em,.hero h1 em,.hero-promise em{font-style:normal;}
body{font-family:var(--body);}

/* ---- the glow behind everything ---- */
.bp-aurora{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;}
.bp-aurora i{position:absolute;border-radius:50%;filter:blur(80px);will-change:transform;}
.bp-aurora i:nth-child(1){width:460px;height:460px;background:var(--blob-a);left:-140px;top:-120px;animation:bp-drift 22s ease-in-out infinite alternate;}
.bp-aurora i:nth-child(2){width:420px;height:420px;background:var(--blob-b);right:-80px;top:160px;animation:bp-drift 26s ease-in-out -8s infinite alternate;}
.bp-aurora i:nth-child(3){width:340px;height:340px;background:var(--blob-c);left:38%;top:420px;animation:bp-drift 24s ease-in-out -13s infinite alternate;}
@keyframes bp-drift{to{transform:translate(90px,70px) scale(1.18);}}

/* ---- glass panels ---- */
.bp-glass.bp-glass.bp-glass{
  background:var(--glass);
  border:1px solid var(--glass-edge);
  box-shadow:inset 0 1px 0 var(--glass-edge), var(--glass-shadow);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  backdrop-filter:blur(20px) saturate(160%);
  border-radius:24px;
}
@media (prefers-reduced-transparency: reduce){
  .bp-glass.bp-glass.bp-glass{background:var(--surface);-webkit-backdrop-filter:none;backdrop-filter:none;}
}

/* Cards retain their subtle tilt without pointer-following light. */
.bp-glow{position:relative;isolation:isolate;transition:transform .3s var(--e-out, ease), box-shadow .3s;}

/* ---- stacked glass cards: no black fill behind rounded corners; small gap between siblings ---- */
/* Parent wrappers that used overflow:hidden + solid fill showed page-black antialias bleed at
   each child's border-radius. Glass.js marks .plan / .service / .fq / etc. as .bp-glass. */
.plan-ladder{
  display:grid;gap:12px;
  border:0!important;border-radius:0;overflow:visible;background:transparent;box-shadow:none;
}
.plan.bp-glass.bp-glass{border-bottom:0;}
.service.bp-glass.bp-glass{overflow:visible;}
.how-split .bp-long .services,
.how-it-works .services{
  display:grid;gap:12px;border-top:0;
}
.how-split .bp-long .services > .service,
.how-it-works .services > .service{border-bottom:0;}
/* FAQ / similar lists already space with margin; keep a consistent small gap when glass-wrapped */
.fq.bp-glass.bp-glass{margin-bottom:12px;border-radius:24px;}
.fq.bp-glass.bp-glass + .fq{border-top:0;}


/* ---- buttons: pill; the main button of each section breathes ----
   M11 (motion round two, 12 October 2026, replacing the light sweep across every main button): glass.js
   marks the main button of each section .bp-pulse and adds .bp-on while it is on screen. A soft turquoise
   ring then spreads out from it and fades, once every 3.4 seconds. It is drawn with the button's own
   shadow (the base shadow is kept in every frame), because .btn clips anything drawn inside it. Hovering
   the button stops the ring so the hover shadow shows; less motion never starts it. */
.btn{border-radius:999px;}
@media (prefers-reduced-motion: no-preference){
  .btn-primary.bp-pulse.bp-on:not(:hover){animation:bp-pulse 3.4s cubic-bezier(.2,.7,.3,1) .6s infinite;}
}
@keyframes bp-pulse{
  0%{box-shadow:0 6px 20px -8px var(--signal),0 0 0 0 color-mix(in oklch,var(--signal) 55%,transparent);}
  55%,100%{box-shadow:0 6px 20px -8px var(--signal),0 0 0 14px color-mix(in oklch,var(--signal) 0%,transparent);}
}

/* ---- header: one glass pill ---- */
.nav-inner{
  border-radius:999px;
  background:var(--glass);
  border:1px solid var(--glass-edge);
  box-shadow:inset 0 1px 0 var(--glass-edge), var(--glass-shadow);
  -webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%);
}
.nav-links a,.nav-links .nav-drop-trigger{border-radius:999px;font-weight:700;}
.nav-drop-panel{border-radius:22px;background:color-mix(in oklch, var(--bg) 92%, transparent);border:1px solid var(--glass-edge);-webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%);}
.nav-call{display:inline-flex;align-items:center;gap:7px;padding:8px 10px;border-radius:999px;font-weight:700;font-size:.92rem;color:var(--ink);text-decoration:none;white-space:nowrap;transition:background .25s;}
.nav-call:hover{background:color-mix(in oklch,var(--ink) 7%,transparent);}
.nav-call svg{width:17px;height:17px;color:var(--signal-text);flex:none;}
/* 1360px since 2 October 2026, when the Problems I fix menu joined the header: below that the number would push the header off the screen. */
@media (max-width:1360px){.nav-call span{display:none;}.nav-call{padding:9px;}}
/* Phones and touch tablets: the icon-only call link gets a full 44px tap area, as the menu button has (8 October 2026). */
@media (max-width:640px), (pointer:coarse) and (max-width:1024px){.nav-call{width:44px;height:44px;padding:0;justify-content:center;}}
/* Client login (19 October 2026): a quiet outlined pill before the phone number, opening the client
   portal. Same muted border as the menu button and theme switch, no fill, so the teal "Request a free
   chat" button stays the one strong action; pointer or keyboard focus brings in the teal edge. */
.nav-login{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 13px;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--ink-soft);font-size:.95rem;font-weight:700;text-decoration:none;white-space:nowrap;transition:color .25s,border-color .25s,background .25s;}
.nav-login svg{width:14px;height:14px;flex:none;}
.nav-login:hover,.nav-login:focus-visible{color:var(--ink);border-color:var(--signal);background:color-mix(in oklch,var(--signal) 10%,transparent);}
.nav-login:focus-visible{outline:2px solid var(--signal);outline-offset:2px;}
@media (pointer:coarse) and (max-width:1024px){.nav-login{min-height:44px;}}
/* Where the full menu shows (1280px up) the bar is already full: the pill only fits once the bar can
   grow to 1340px, from 1420px. Between 1280 and 1419px, and on phones (640px and under, where the
   short "Free chat" button and the menu button need the room), it is hidden rather than squeezed;
   the footer still carries Client login there, and so does the menu on phones. Measured on .nav-inner, 19 October 2026. */
@media (min-width:1280px) and (max-width:1419px){.nav-login{display:none;}}
@media (max-width:640px){.nav-login{display:none;}}
/* The pill is a .wrap (1160px), and with Problems I fix and the number its contents need about 1270px, so it grows on screens with room and tightens its gaps on the rest. */
@media (min-width:1361px){#nav .nav-inner.wrap{max-width:1290px;}}
/* From 1420px the bar grows to 1340px so the Client login pill fits beside the full menu (19 October 2026). */
@media (min-width:1420px){#nav .nav-inner.wrap{max-width:1340px;}}
@media (min-width:1280px) and (max-width:1360px){#nav .nav-inner{gap:12px;}}

/* ---- the call pill that stays on screen ----
   M30 (motion round two, 12 October 2026, replacing the full-width call strip): a small dark pill,
   "Call Jacob", that opens into the number and Book a free chat (glass.js sets .is-open and the pill's
   aria-expanded). It is the same deep navy in both themes, solid, so its words keep well over 4.5:1
   whatever scrolls underneath; a light edge keeps it apart from the dark page. The opening is a
   width and height change of the panel; with less motion asked for it opens at once. */
.bp-callbar{
  --bp-pill-bg:var(--brand-deep);--bp-pill-ink:var(--on-brand);
  position:fixed;left:50%;bottom:16px;z-index:250;transform:translate(-50%,0);
  display:flex;flex-direction:column;align-items:center;
  max-width:calc(100% - 24px);padding:0;overflow:hidden;
  color:var(--bp-pill-ink);background:var(--bp-pill-bg);
  border:1px solid color-mix(in oklch,var(--bp-pill-ink) 18%,transparent);border-radius:26px;
  box-shadow:0 12px 32px -12px rgb(0 0 0 / .55);
  transition:transform .45s var(--e-out, ease), opacity .3s, visibility 0s;
}
.bp-call-pill{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;
  margin:0;border:0;background:none;color:inherit;font:inherit;font-size:.92rem;font-weight:700;white-space:nowrap;cursor:pointer;border-radius:999px;
}
.bp-call-pill:focus-visible{outline:2.5px solid var(--signal);outline-offset:-4px;}
.bp-call-dot{width:8px;height:8px;border-radius:50%;background:var(--signal);flex:none;box-shadow:0 0 0 3px color-mix(in oklch,var(--signal) 25%,transparent);}
.bp-call-more{display:grid;grid-template-rows:0fr;max-width:9.5rem;visibility:hidden;opacity:0;
  transition:grid-template-rows .4s var(--e-out, ease),max-width .4s var(--e-out, ease),opacity .2s,visibility 0s .4s;}
.bp-call-row{min-height:0;overflow:hidden;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px 14px;padding:0 10px;}
.bp-callbar.is-open .bp-call-more{grid-template-rows:1fr;width:min(420px,calc(100vw - 26px));max-width:min(420px,calc(100vw - 26px));visibility:visible;opacity:1;
  transition:grid-template-rows .4s var(--e-out, ease),max-width .4s var(--e-out, ease),opacity .25s .15s,visibility 0s;}
.bp-callbar.is-open .bp-call-row{padding:0 10px 10px;}
.bp-callbar a.num{display:inline-flex;align-items:center;min-height:44px;padding:0 6px;color:inherit;font-weight:700;font-size:1rem;white-space:nowrap;text-decoration:none;}
.bp-callbar a.num:hover{text-decoration:underline;text-underline-offset:3px;}
.bp-callbar a.num:focus-visible{outline:2.5px solid var(--signal);outline-offset:2px;border-radius:8px;}
.bp-callbar .btn{padding:11px 22px;font-size:.92rem;white-space:nowrap;}
@media (prefers-reduced-motion: reduce){
  .bp-call-more,.bp-callbar.is-open .bp-call-more{transition:none;}
}
/* Slid away: also out of the tab order and the accessibility tree, once the fade has finished, so
   Tab never lands on an invisible link. Coming back, it is visible again straight away. */
.bp-callbar.is-away,html.bp-review-in-view .bp-callbar{transform:translate(-50%,140%);opacity:0;pointer-events:none;visibility:hidden;transition:transform .45s var(--e-out, ease), opacity .3s, visibility 0s .3s;}
/* Focused links scroll clear of the bar (its 64px height plus the 16px gap below it, and room to see the ring). */
html{scroll-padding-bottom:96px;}
/* The Ready-made tools page has its own fixed "Review and send" bar on phones and tablets; the call
   bar sat on top of it and took the tap. That bar already leads to the next step, so the call bar
   steps aside while it shows (the same way the contact card page hides it). */
@media (max-width:1050px){body:has(.mobile-summary-bar:not([hidden])) .bp-callbar{display:none;}}
/* The home page shows the same tool inside a shadow root (#view-systems), where :has() above cannot
   see its bar, so the call bar covered "Review and send" there on phones (audit iteration 4). */
@media (max-width:1050px){body:has(#view-systems:not([hidden])) .bp-callbar{display:none;}}
/* The phone menu is a full-height sheet with its own "Book a free chat" and the header keeps its
   Call and Book buttons. The bar sat over the sheet's last row, the light and dark switch, and took
   the tap at 360 and 390 wide on every page (iteration 3 audit, 9 October 2026). It steps aside
   while the menu is open, the same way it does over the enquiry form and the footer. */
html.menu-open .bp-callbar.bp-callbar{transform:translate(-50%,140%);opacity:0;pointer-events:none;visibility:hidden;}
/* The moving circuit picture behind every page printed on every sheet of paper too (audit iteration 4). */
@media print{.bp-callbar,.bp-aurora,.bp-circuit{display:none;}}
/* Printing shows every scroll effect finished, including one put back to its start after the visitor
   scrolled up past it (replays, 20 October 2026): a card or home section waiting to arrive, a start
   state a script left as opacity 0 (not the FAQ's hidden topic highlight, not fill-opacity), the About
   signature undrawn, the code example and the automations terminal covered, the 9pm timeline dim, the
   missed enquiries pile empty (its whole-count copy prints in place of the live count), the About ticks
   undrawn, the How it works week bars empty, pull quote words and scroll-lit step lists dim, and the home "Prefer to talk?" light
   off. A new effect whose start state hides something needs its own line here. */
@media print{
  html.bp-motion .bp-reveal,html.js-motion .rise,
  html.bp-motion-on [style^="opacity: 0;"]:not(.bp-topichl),html.bp-motion-on [style*=" opacity: 0;"]:not(.bp-topichl),
  .fx-steps.bp-tl9 > li,.bp-tl9-dot{opacity:1!important;filter:none!important;transform:none!important;transition:none!important;}
  .bp-code-line,.bp-term-text{clip-path:none!important;}
  .bp-sig path{stroke:none!important;stroke-dasharray:none!important;stroke-dashoffset:0!important;fill-opacity:1!important;}
  .bp-tl9-lit{stroke-dasharray:none!important;stroke-dashoffset:0!important;}
  .bp-word{opacity:1!important;}
  .bp-seq > li{opacity:1!important;transform:none!important;transition:none!important;}
  .bp-pile-item{height:auto!important;margin-bottom:8px!important;padding:9px 12px!important;overflow:visible!important;}
  .bp-pile-item:last-child{margin-bottom:0!important;}
  .bp-pile-live{display:none!important;}
  .bp-pile-c .bp-sr{position:static!important;width:auto!important;height:auto!important;margin:0!important;overflow:visible!important;clip:auto!important;clip-path:none!important;white-space:normal!important;}
  .bp-tick path{stroke-dasharray:none!important;stroke-dashoffset:0!important;}
  .hiw-weeks .hw-track > i{transform:none!important;}
  #talk .bp-lamp{width:120%!important;opacity:1!important;transition:none!important;}
  #talk .bp-lamp-line{width:60%!important;opacity:1!important;transition:none!important;}
}

/* ---- sections ease in as they are reached ---- */
/* M53 (motion round two, 12 October 2026, replacing B03's row wave): cards sharpen in from a light blur,
   one after another (the order and the 110ms steps are set in glass.js). Once in, no filter is left on the
   card at all, so its frosted glass is untouched. html.bp-motion is only set when less motion is not asked for. */
html.bp-motion .bp-reveal:not(.bp-in){opacity:0;filter:blur(8px);transform:translateY(8px);}
.bp-reveal{transition:opacity .7s var(--e-out, ease), filter .7s var(--e-out, ease), transform .5s var(--e-out, ease);}

/* ---- the left side stays still, the right side scrolls ---- */
.bp-split{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:48px;align-items:start;}
.bp-pinned{position:sticky;top:calc(var(--site-header-offset, 112px) + 8px);align-self:start;}
.bp-pinned h1{margin-bottom:12px;}
.bp-long{display:grid;gap:20px;min-width:0;}
@media (max-width:860px){
  .bp-split{grid-template-columns:1fr;gap:28px;}
  .bp-pinned{position:static;}
}


/* ================= home page ================= */
/* Home hero only: the Ready-made tools page also has a header.hero, with its own side padding in
   systems-studio.css, and this rule loading last was pushing its heading against the screen edge. */
.hero:has(> .hero-grid){padding:44px 0 56px;overflow:visible;}
.hero::before,.hero::after{display:none;}
.hero-grid{align-items:start;gap:40px;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);}
/* On a phone the questions come straight after the buttons, ahead of the "When you call" card. */
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:22px;}
  .hero-grid>div:first-child{display:contents;}
  .hero-grid .hero-wizard{order:4;}
  .hero-grid .bp-callcard{order:5;}
  .hero-grid .hero-ctas{margin-bottom:0;}
}
.hero .lede{max-width:34em;margin-bottom:22px;}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 26px;}
.hero-ctas .btn{margin:0;}
/* Hidden where the form sits beside it (Jacob, 3 October 2026: clicking it did nothing visible); shown once the hero stacks and the form is further down. */
.hero .hero-book{display:none;}
@media (max-width:960px){.hero .hero-book{display:inline-flex;margin:0;}}
.hero-promise em,.hero h1 .hero-promise em{color:var(--signal-text);font-weight:700;}

.bp-callcard{max-width:32em;padding:20px 24px;border-radius:24px;border:1px solid var(--glass-edge);background:var(--glass);box-shadow:inset 0 1px 0 var(--glass-edge),var(--glass-shadow);-webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%);position:relative;isolation:isolate;}
.bp-callcard h2{font-size:1.08rem;margin:0 0 12px;}
.bp-callcard .trust-strip{display:grid;grid-template-columns:1fr;gap:12px;margin:0;padding:0;list-style:none;}
.bp-callcard .trust-strip li{display:grid;gap:2px;padding:0;border:0;background:none;}
.bp-callcard .trust-strip b{display:flex;align-items:center;gap:9px;font-size:1rem;}
.bp-callcard .trust-strip span{padding-left:24px;color:var(--ink-mid);font-size:.92rem;}
.bp-callcard .trust-ico{color:var(--signal-text);}

/* the form, as a glass card with ink text (it used to sit on a dark band) */
.form-card{
  --on-brand:var(--ink);--on-brand-soft:var(--ink-mid);--brand-deep:var(--surface);
  --brand-line:var(--line);
  background:var(--glass);border:1px solid var(--glass-edge);border-radius:28px;padding:26px 28px;
  box-shadow:inset 0 1px 0 var(--glass-edge),var(--glass-shadow);
  -webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%);
}
.form-card h3{font-size:1.45rem;}
.hero-wizard{scroll-margin-top:calc(var(--site-header-offset,112px) + 6px);}
.form-card .field input:focus,.form-card .field textarea:focus,.form-card .field select:focus{outline-color:var(--signal-text);}

/* the wizard on top of the form */
.wz-off{display:none!important;}
.wz-head{margin:2px 0 14px;}
.wz-prog{display:flex;gap:6px;margin-bottom:10px;}
.wz-prog i{flex:1;height:7px;border-radius:99px;background:color-mix(in oklch,var(--ink) 14%,transparent);transition:background .4s;}
.wz-prog i.on{background:var(--signal);}
.wz-count{margin:0 0 6px;font-size:.84rem;font-weight:700;color:var(--ink-mid);}
.wz-crumbs{display:flex;flex-wrap:wrap;gap:6px;min-height:0;}
.wz-crumbs button{
  width:auto;margin:0;padding:3px 12px;font:inherit;font-size:.82rem;font-weight:700;color:var(--ink);cursor:pointer;
  background:color-mix(in oklch,var(--signal) 14%,transparent);border:1px solid color-mix(in oklch,var(--signal) 45%,transparent);border-radius:99px;
}
.wz-crumbs button:hover{border-color:var(--signal-text);}
/* Back button and the answers label (3 October 2026). */
.wz-top{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:34px;margin-bottom:4px;}
.wz-top .wz-count{margin:0;white-space:nowrap;}
.form-card .wz-top .wz-back{flex:0 0 auto;width:auto;max-width:max-content;}
.wz-back{display:inline-flex;align-items:center;gap:6px;width:auto;margin:0;min-height:34px;padding:5px 14px 5px 10px;font:inherit;font-size:.86rem;font-weight:700;color:var(--signal-text);background:transparent;border:1px solid var(--glass-edge);border-radius:99px;cursor:pointer;transition:border-color .2s,background .2s;}
.wz-back:hover{border-color:var(--signal-text);background:color-mix(in oklch,var(--signal) 10%,transparent);}
.wz-back .ico{width:16px;height:16px;transform:scaleX(-1);}
.wz-back[hidden]{display:none;}
.wz-crumbs-label{width:100%;font-size:.76rem;color:var(--ink-soft);}
.wz-crumbs button{display:inline-flex;align-items:center;gap:5px;}
.wz-crumbs button .ico{width:13px;height:13px;}
.form-card form.wz-in > :not(.wz-head):not(.wz-off){animation:wz-slide .42s var(--e-out,ease);}
@keyframes wz-slide{from{opacity:0;transform:translateX(26px);}}

/* an answer is a big, easy row */
.form-card[data-step] .service-picker legend,.form-card[data-step] #fWhatLabel{
  display:block;margin:0 0 12px;font-family:var(--display);font-size:1.4rem;font-weight:600;letter-spacing:-.015em;line-height:1.2;color:var(--ink);padding:0;
}
.form-card[data-step] .service-options{display:grid;gap:9px;}
.form-card[data-step] .service-options label{display:block;}
.form-card[data-step] .service-options span{
  display:flex;align-items:center;width:100%;min-height:52px;padding:12px 18px;font-size:1.02rem;font-weight:700;
  color:var(--ink);background:color-mix(in oklch,var(--surface) 78%,transparent);
  border:2px solid color-mix(in oklch,var(--ink) 20%,transparent);border-radius:18px;
  transition:transform .2s var(--e-out,ease),border-color .2s,background .25s;
}
.form-card[data-step] .service-options label:hover span{border-color:var(--signal-text);transform:translateX(4px);}
.form-card[data-step] .service-options input:checked + span{background:color-mix(in oklch,var(--signal) 30%,transparent);border-color:var(--signal-text);color:var(--ink);}
.form-card[data-step] .service-options input:checked + span::after{content:"\2713";margin-left:auto;font-weight:700;color:var(--signal-text);}
.form-card[data-step] .service-picker{margin:0;}
.form-card[data-step] .field-example{font-size:.88rem;color:var(--ink-mid);}
.wz-opts{display:grid;gap:9px;}
.wz-opt{
  width:100%;margin:0;text-align:left;font:inherit;font-weight:700;font-size:1.02rem;color:var(--ink);cursor:pointer;
  min-height:52px;padding:12px 18px;background:color-mix(in oklch,var(--surface) 78%,transparent);
  border:2px solid color-mix(in oklch,var(--ink) 20%,transparent);border-radius:18px;transition:transform .2s,border-color .2s;
}
.wz-opt:hover{border-color:var(--signal-text);transform:translateX(4px);}
.wz-own{border-style:dashed;}
.form-card[data-step="what"] .field textarea,.form-card[data-step="what"] .field-example,.form-card[data-step="what"] .wz-continue{display:none;}
.form-card[data-step="what"] .field.wz-typing textarea{display:block;}
.form-card[data-step="what"] .field.wz-typing .wz-continue{display:inline-flex;width:auto;margin-top:10px;}
.form-card[data-step="what"] .field.wz-typing .wz-opts{display:none;}
.wz-continue:disabled{opacity:.5;cursor:not-allowed;box-shadow:none;}
.form-card[data-step]:not([data-step="what"]) .wz-continue{display:none;}
.wz-plain{width:auto;min-height:28px;margin:6px 0 0;padding:4px 0;background:none;border:0;font:inherit;font-size:.85rem;font-weight:700;color:var(--ink-mid);text-decoration:underline;text-underline-offset:3px;cursor:pointer;}
.wz-plain:hover{color:var(--ink);}
.form-card[data-plain] .wz-prog,.form-card[data-plain] .wz-top,.form-card[data-plain] .wz-count,.form-card[data-plain] .wz-crumbs,.form-card[data-plain] .wz-opts,.form-card[data-plain] .wz-continue{display:none;}
.form-card[data-plain] .field textarea{display:block;}
.wz-thanks{text-align:center;padding:10px 4px 4px;}
.wz-thanks[hidden]{display:none;}
.wz-tick{width:64px;height:64px;margin:0 auto 12px;border-radius:50%;display:grid;place-items:center;font-size:2rem;font-weight:700;color:var(--signal-ink);background:var(--signal);animation:wz-pop .5s cubic-bezier(.34,1.56,.64,1);}
@keyframes wz-pop{from{transform:scale(0);}}
.wz-thanks h4{font-family:var(--display);font-size:1.35rem;margin:0 0 10px;color:var(--ink);}
.wz-thanks ol{text-align:left;max-width:23em;margin:0 auto 16px;padding-left:1.2em;color:var(--ink-mid);}
form.wz-done > :not(.wz-thanks):not(.wz-head){display:none!important;}
form.wz-done .wz-prog{display:none;}
.form-card .reply-time-top{margin-bottom:14px;}
.form-card .send-row .btn{width:auto;}
@media (max-width:480px){.form-card{padding:20px 18px;border-radius:24px;}}

/* ================= the rest of the home page ================= */
.doors,.how-strip{border-top:0;}
.how-strip-inner{border:1px solid var(--glass-edge);border-radius:28px;background:var(--glass);padding:26px 32px;box-shadow:inset 0 1px 0 var(--glass-edge),var(--glass-shadow);-webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%);}
.bp-aboutstrip,.bp-talk{padding:28px 0;}
.bp-strip{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;justify-content:space-between;padding:26px 32px;}
.bp-strip-who{display:flex;gap:18px;align-items:center;}
.bp-strip h2{font-size:1.5rem;margin:0;}
.bp-strip p{margin:4px 0 0;color:var(--ink-mid);}
.bp-strip .hero-byline-photo{flex:none;}
.bp-talk-card{padding:40px clamp(22px,4vw,48px);}
.bp-talk-card h2{font-size:clamp(1.7rem,3vw,2.3rem);margin-bottom:10px;}
.bp-talk-card>p{max-width:46em;color:var(--ink-mid);}
.bp-talk-card .book-note{margin-top:16px;}
.bp-talk-card .cta-mail{margin-top:18px;}
.bp-talk-card .cta-mail p{color:var(--ink-mid);}
.bp-talk-card .direct{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px;}
.bp-talk-card .direct li{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;}
.bp-talk-card .direct span{min-width:3.4em;font-weight:700;color:var(--ink-mid);}
.bp-talk-card .direct a{color:var(--ink);font-weight:700;}
.bp-talk-card .hero-ctas{margin:24px 0 0;}

/* ================= pages with a still left side ================= */
.bp-note{padding:28px clamp(22px,3vw,36px);}
.bp-note h2{font-size:clamp(1.5rem,2.4vw,1.9rem);margin:0 0 8px;}
.bp-note p{color:var(--ink-mid);}
.bp-aside{margin-top:24px;padding:20px 22px;}
.bp-aside h2{font-size:1.1rem;}
.bp-aside .btn{margin-top:12px;}

/* the topic filter on the blog */
.bp-topics{display:grid;gap:6px;margin-top:22px;}
.bp-topics button{
  display:flex;justify-content:space-between;align-items:center;width:100%;text-align:left;
  font:inherit;font-weight:700;color:var(--ink);cursor:pointer;
  background:transparent;border:2px solid transparent;border-radius:16px;padding:9px 14px;
}
.bp-topics button:hover{background:color-mix(in oklch,var(--signal) 10%,transparent);}
.bp-topics button[aria-pressed="true"]{border-color:var(--signal-text);color:var(--signal-text);}
.bp-topics span{font-weight:400;color:var(--ink-mid);}
.blog-split .blog-grid{display:grid;grid-template-columns:1fr;gap:20px;}
.blog-split .blog-card[hidden]{display:none;}
.blog-split .blog-card{padding:26px;}

/* How it works: step panels on the right, a rail on the left that fills as you read */
.how-it-works{padding:44px 0 72px;}
.how-split{max-width:1180px;margin-inline:auto;padding-inline:24px;}
.how-split .bp-pinned h1{font-size:clamp(2.2rem,4.4vw,3.2rem);line-height:1.04;}
.how-split .lead{color:var(--ink-mid);}
.bp-total{margin:16px 0 0;color:var(--ink-mid);font-size:.95rem;}
.bp-total strong{display:block;font-family:var(--display);font-size:1.25rem;color:var(--ink);}
.bp-track{list-style:none;margin:22px 0 0;padding:0 0 0 2rem;position:relative;display:grid;gap:14px;}
.bp-track::before{content:none;}
.bp-track .fill{display:none;}
.bp-track button{
  position:relative;text-align:left;background:none;border:0;padding:0;font:inherit;font-weight:700;cursor:pointer;color:var(--ink-mid);
}
.bp-track button::before{
  content:"";position:absolute;left:-2rem;top:.12em;width:20px;height:20px;border-radius:50%;
  background:var(--bg);border:2px solid color-mix(in oklch,var(--ink) 25%,transparent);transition:.3s;
}
.bp-track button.on{color:var(--ink);}
.bp-track button.on::before,.bp-track button.done::before{background:var(--signal);border-color:var(--signal);}
.bp-step{padding:34px clamp(22px,3vw,36px);min-height:290px;margin-bottom:20px;transition:opacity .5s;}
html.bp-motion .bp-step:not(.is-on){opacity:.55;}
.bp-step h2{font-size:clamp(1.8rem,3vw,2.4rem);margin:4px 0 12px;}
.bp-step p{color:var(--ink-mid);max-width:34em;font-size:1.06rem;}
.bp-who{margin:0;font-weight:700;color:var(--signal-text)!important;font-size:.92rem!important;}
.bp-stop{display:inline-block;margin-top:16px!important;border:2px solid var(--signal-text);color:var(--signal-text)!important;border-radius:999px;padding:3px 14px;font-weight:700;font-size:.9rem!important;}
.how-split .bp-long .services{grid-template-columns:1fr;}
.how-split .bp-long .services>.service{grid-column:auto;}
.how-split .bp-long #services>div>.section-head{margin-top:20px;}
@media (max-width:860px){.bp-step{min-height:0;}.bp-track{display:none;}}
.how-split #services,.how-split #process{background:none;border:0;padding:0;}
.blog-page .bp-split{max-width:1180px;margin-inline:auto;padding-inline:24px;}
.blog-page{padding-top:44px;}

/* small things on the shared pages */
.fq{margin-bottom:10px;}
html .editorial h1 em,html .editorial h2 em{font-style:normal;color:var(--signal-text);}
.featured .project-image,.project-card .project-image{background:color-mix(in oklch,var(--surface) 55%,transparent);}
.featured{background:none;}

/* the closing band's inner pieces were drawn for a dark band; give them ink instead */
.bp-talk-card{--on-brand:var(--ink);--on-brand-soft:var(--ink-mid);--brand-deep:var(--surface);--brand-line:var(--line);}
.bp-talk-card .callout{color:var(--ink);background:color-mix(in oklch,var(--signal) 14%,transparent);border:1px solid color-mix(in oklch,var(--signal) 45%,transparent);border-radius:14px;padding:12px 16px;}
.bp-talk-card .copy-email{color:var(--ink);background:transparent;border:2px solid color-mix(in oklch,var(--ink) 30%,transparent);border-radius:999px;padding:3px 14px;font:inherit;font-weight:700;cursor:pointer;}
.bp-talk-card .copy-email:hover{border-color:var(--signal-text);}
.bp-talk-card .back-to-work a,.bp-talk-card .send-faq-link a{color:var(--ink);font-weight:700;}
.bp-talk-card .cta-mail{border-top:1px solid color-mix(in oklch,var(--ink) 18%,transparent);padding-top:18px;}

/* case studies: the "what was going wrong" and "why it mattered" panels need room inside the glass */
.case-content .fact{padding:26px 30px;}
.case-content .facts{gap:20px;}
/* the standalone controls the first pass missed reach 44px on phones too (9 October 2026): the
   form's "Show every question at once", the review's Google link, the email line and its Copy
   button, and "Read the post" on the blog cards */
@media (max-width:640px), (pointer:coarse) and (max-width:1024px){
  .wz-plain{min-height:44px;padding-block:0;}
  .bp-review figcaption a,.bp-talk-mail a,.read-post{display:inline-flex;align-items:center;min-height:44px;}
  .bp-talk-card .copy-email{min-height:44px;}
}

/* ================= room inside the glass ================= */
/* The shared stylesheets drew these on bare backgrounds with no padding; inside a glass card the words need room. */
.service.bp-glass.bp-glass>.service-summary{padding:24px 56px 22px 28px;}
.service.bp-glass.bp-glass .service-detail{padding:0 28px 26px;}
.service-question.bp-glass.bp-glass{padding:30px 34px;}
.delivery li.bp-glass.bp-glass{padding:18px 22px;}
.delivery ol{gap:16px 20px;}
.sources-box.bp-glass.bp-glass,.roi-tool.bp-glass.bp-glass{padding:26px 30px;}
.intro-tally li.bp-glass.bp-glass{padding:14px 20px;}
.fq.bp-glass.bp-glass>summary{padding:20px 28px;}
.fq.bp-glass.bp-glass>.fq-a{padding:0 28px 22px;}
.project-card.bp-glass.bp-glass:not(.featured) .project-caption{padding:24px 28px 28px;}

/* ================= matching the mock-up: icons, cards, band ================= */
/* every answer in the form: icon on the left, title, small description */
.form-card[data-step] .service-options span,
.form-card[data-plain] .service-options span{display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:center;}
.form-card .service-options .ico{grid-row:1/3;font-size:1.45rem;color:var(--signal-text);}
.form-card .service-options .opt-t{grid-column:2;font-weight:700;}
.form-card .service-options small{grid-column:2;font-weight:400;color:var(--ink-mid);font-size:.88rem;line-height:1.3;}
.form-card .service-options span:not(:has(small)) .ico{grid-row:auto;}
.form-card[data-step] .service-options input:checked + span::after{grid-column:3;grid-row:1/3;}
.form-card[data-step] .service-options span:has(small){grid-template-columns:auto 1fr auto;}
.wz-opt{display:flex;align-items:center;gap:14px;}
.wz-opt .ico{font-size:1.45rem;color:var(--signal-text);}
.wz-opt .opt-t{font-weight:700;}
.wz-continue{width:3.2em!important;padding:0!important;justify-content:center;border-radius:14px!important;}
.wz-continue .ico{font-size:1.4rem;}
/* the form card in conversation mode is just the questions: no extra title, hint or promise until the last step */
.form-card[data-step] > h3,.form-card[data-step] > .hint{display:none;}
.form-card[data-step]:not([data-step="contact"]) .reply-time{display:none;}
.wz-plain{display:block;margin:16px auto 0;text-align:center;}

/* the call card: three ticks */
.bp-checks{list-style:none;margin:0;padding:0;display:grid;gap:10px;}
.bp-checks li{display:flex;gap:10px;align-items:flex-start;font-weight:700;}
.bp-checks .ico{color:var(--signal-text);margin-top:.05em;}

/* what do you need: three cards with an icon and Read more */
.door-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:20px;}
.door-card{display:block;padding:26px;text-decoration:none;color:inherit;border-radius:24px;border:1px solid var(--glass-edge);background:var(--glass);box-shadow:inset 0 1px 0 var(--glass-edge),var(--glass-shadow);-webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%);}
.door-card>.ico{font-size:2rem;color:var(--signal-text);}
.door-card h3{font-size:1.25rem;margin:8px 0 4px;}
.door-card p{color:var(--ink-mid);font-size:.97rem;margin:0;}
.door-card .more{display:inline-flex;align-items:center;gap:4px;margin-top:12px;font-weight:700;color:var(--signal-text);}
.door-card .more .ico{width:1.2em;height:1.2em;transition:transform .25s;}
.door-card:hover .more .ico{transform:translateX(4px);}
@media (max-width:900px){.door-cards{grid-template-columns:1fr;}}
.doors .section-head{margin-bottom:6px;}

/* the closing band, centred */
.bp-talk-card{text-align:center;}
.bp-talk-card>p{margin-inline:auto;}
.bp-talk-lead{font-size:1.08rem;}
.bp-bigphone{display:block;margin:10px 0 4px;font-family:var(--display);font-size:clamp(2rem,4vw,2.6rem);font-weight:600;letter-spacing:-.01em;color:var(--ink);text-decoration:none;}
.hero-ctas.centered{justify-content:center;margin:18px 0 0;}
.bp-talk-small{margin:14px auto 0!important;font-size:.9rem;color:var(--ink-mid);max-width:34em;}
.bp-talk-mail a{color:var(--ink);font-weight:700;}
.bp-talk-card .copy-email{margin-left:8px;}

/* movement extra from the mock-up (Everything): a light round the edge of the form. The floating shapes and the
   light that followed the pointer were retired on 1 and 2 October 2026 and removed on 8 October.
   M16 (motion round two, 12 October 2026, replacing B15's single sweep): the form keeps its still, soft teal
   edge, and a short streak of turquoise travels round the border, one lap every 7 seconds, without stopping.
   ::before is the border only (masked to a 2px ring) with a turning conic light (--bp-ang); glass.js marks the
   form .bp-streak and adds .bp-on only while it is on screen. With less motion asked for, or without the
   script, the streak is hidden and only the still edge shows. */
@property --bp-ang{syntax:'<angle>';inherits:false;initial-value:0deg;}
.hero{position:relative;}
.hero-grid>div:first-child{position:relative;}
.hero .wrap{position:relative;z-index:1;}
.hero-wizard .form-card{position:relative;overflow:hidden;isolation:isolate;}
/* the still edge; glass.js also marks the form .bp-glass, whose triple class would otherwise win */
.hero-wizard .form-card,.hero-wizard .form-card.bp-glass.bp-glass.bp-glass{border-color:color-mix(in oklch,var(--signal) 45%,var(--glass-edge));box-shadow:inset 0 1px 0 var(--glass-edge),0 0 0 1px color-mix(in oklch,var(--signal) 22%,transparent),0 0 30px -10px color-mix(in oklch,var(--signal) 55%,transparent),var(--glass-shadow);}
.hero-wizard .form-card.form-card::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:2px;pointer-events:none;z-index:-2;
  background:conic-gradient(from var(--bp-ang),transparent 0deg,transparent 250deg,color-mix(in oklch,var(--signal) 70%,transparent) 320deg,var(--signal) 345deg,transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  opacity:0;transition:opacity .6s;
}
@media (prefers-reduced-motion: no-preference){
  .hero-wizard .form-card.bp-streak.bp-on::before{opacity:1;animation:bp-streak 7s linear infinite;}
}
@keyframes bp-streak{to{--bp-ang:360deg;}}
.hero-wizard .form-card::after{content:"";position:absolute;inset:2px;border-radius:26px;background:var(--bg);opacity:.74;z-index:-1;}
@media (prefers-reduced-motion: reduce){
  /* the drifting glow behind the page stands still too */
  .bp-aurora i:nth-child(n){animation:none;}
}

/* header links at the size the mock-up used */
@media (min-width:1100px){
  .nav-links a,.nav-links .nav-drop-trigger{font-size:.95rem;padding:8px 12px;}
}

/* in conversation mode every question and field takes the full width of the card */
.form-card[data-step] form>*{grid-column:1/-1!important;}
.wz-q{margin:0 0 12px;font-family:var(--display);font-size:1.4rem;font-weight:600;letter-spacing:-.015em;line-height:1.2;color:var(--ink);}
.form-card:not([data-step]) .wz-q{display:none;}

/* the pointer light and floating shapes never widen the page */
.hero{overflow-x:clip;}

/* blog cards, as in the mock-up: a topic tag, the title, the excerpt and Read the post */
.blog-split .blog-card-media{display:none;}
.blog-split .blog-card{display:block;}
.blog-split .blog-card .kicker{display:block;background:none;padding:0;border:0;border-radius:0;color:var(--signal-text);font-size:.78rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;margin:0 0 6px;}
.blog-split .blog-card time{display:block;color:var(--ink-mid);font-size:.84rem;margin-bottom:6px;}
.blog-split .blog-card h2{font-size:1.4rem;margin:0 0 8px;letter-spacing:-.01em;}
.blog-split .blog-card h2 a{color:var(--ink);text-decoration:none;}
.blog-split .blog-card p{color:var(--ink-mid);}
.read-post{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-weight:700;color:var(--signal-text);text-decoration:none;}
.read-post .ico{width:1.2em;height:1.2em;transition:transform .25s;}
.read-post:hover .ico{transform:translateX(4px);}

/* ---- secondary / outline buttons: keep the pill readable on dark glass ---- */
.btn-ghost{
  border:2.5px solid color-mix(in oklch, var(--ink) 72%, transparent);
  background:color-mix(in oklch, var(--ink) 10%, transparent);
  box-shadow:inset 0 1px 0 var(--glass-edge);
  -webkit-backdrop-filter:blur(12px) saturate(140%);
  backdrop-filter:blur(12px) saturate(140%);
  color:var(--ink);
}
.btn-ghost:hover{
  border-color:color-mix(in oklch, var(--signal-text) 75%, transparent);
  background:color-mix(in oklch, var(--signal) 16%, var(--glass));
}
.btn-outline-brand{
  border:1.5px solid color-mix(in oklch, var(--on-brand) 55%, transparent);
  background:color-mix(in oklch, var(--on-brand) 10%, transparent);
}
.btn-outline-brand:hover{
  border-color:color-mix(in oklch, var(--on-brand) 80%, transparent);
  background:color-mix(in oklch, var(--on-brand) 18%, transparent);
}
@media (prefers-reduced-transparency: reduce){
  .btn-ghost{background:var(--surface);-webkit-backdrop-filter:none;backdrop-filter:none;}
}

/* ---- Nav dropdowns: quiz-matching icons (What I do + About) ---- */
.nav-drop-panel a{
  display:flex;align-items:center;gap:10px;
}
.nav-drop-panel a .ico{
  font-size:1.15rem;color:var(--signal-text);flex:none;
}

/* ---- dark glass selects: custom menu, cyan focus, no white OS popup ---- */
.form-card .field select option,
.field select option{
  color:var(--ink);
  background:var(--surface);
}
html[data-theme="light"] .form-card .field select option,
html[data-theme="light"] .field select option{
  color:#10212a;
  background:#fff;
}

.bp-select{
  position:relative;
  display:block;
  width:100%;
}
.bp-select-native{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
  opacity:0!important;
  pointer-events:none!important;
}
.bp-select-trigger{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  width:100%;
  min-height:48px;
  margin:0;
  padding:12px 16px;
  font:inherit;
  font-size:1rem;
  font-weight:600;
  color:var(--ink);
  text-align:left;
  cursor:pointer;
  background:var(--glass);
  border:1px solid var(--glass-edge);
  border-radius:14px;
  box-shadow:inset 0 1px 0 var(--glass-edge), var(--glass-shadow);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  backdrop-filter:blur(16px) saturate(150%);
  transition:border-color .2s, box-shadow .2s, outline-color .2s;
}
.bp-select-trigger:hover{border-color:color-mix(in oklch,var(--signal-text) 55%, var(--glass-edge));}
.bp-select-trigger:focus,
.bp-select-trigger[aria-expanded="true"]{
  outline:2.5px solid var(--signal-text);
  outline-offset:2px;
  border-color:transparent;
  box-shadow:inset 0 1px 0 var(--glass-edge), 0 0 0 1px color-mix(in oklch,var(--signal) 40%, transparent);
}
.bp-select.is-disabled .bp-select-trigger{
  opacity:.55;
  cursor:not-allowed;
}
.bp-select-value{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.bp-select-caret{
  flex:none;
  width:10px;height:10px;
  border-right:2px solid var(--signal-text);
  border-bottom:2px solid var(--signal-text);
  transform:rotate(45deg) translate(-2px,-2px);
}
.bp-select-trigger[aria-expanded="true"] .bp-select-caret{
  transform:rotate(225deg) translate(-1px,-1px);
}

.bp-select-menu{
  position:fixed;
  z-index:4000;
  max-height:min(320px, calc(100vh - 24px));
  overflow:auto;
  padding:6px;
  color:var(--ink);
  background:color-mix(in oklch, var(--bg) 88%, transparent);
  border:1px solid var(--glass-edge);
  border-radius:16px;
  box-shadow:inset 0 1px 0 var(--glass-edge), var(--glass-shadow);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
  backdrop-filter:blur(22px) saturate(160%);
  font:inherit;
  font-size:1rem;
  scrollbar-width:thin;
}
.bp-select-menu [role="option"]{
  display:block;
  padding:11px 14px;
  border-radius:12px;
  cursor:pointer;
  font-weight:600;
  color:var(--ink);
}
.bp-select-menu [role="option"][data-active="true"]{
  background:color-mix(in oklch, var(--signal) 24%, transparent);
  outline:1px solid color-mix(in oklch, var(--signal-text) 45%, transparent);
}
.bp-select-menu [role="option"][aria-selected="true"]{font-weight:750;}
.bp-select-menu [role="option"][aria-disabled="true"]{
  opacity:.5;
  cursor:default;
}
@media (prefers-reduced-transparency: reduce){
  .bp-select-trigger,.bp-select-menu{
    background:var(--surface);
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }
}

/* Closed native fallback (no-JS): keep cyan caret + glass field */
.field select{
  color:var(--ink);
  background-color:var(--glass);
  border-color:var(--glass-edge);
  color-scheme:dark;
}
html[data-theme="light"] .field select{color-scheme:light;}
.field select:focus{
  outline:2.5px solid var(--signal-text);
  outline-offset:2px;
  border-color:transparent;
}

/* A fact card that holds a list of jobs (the Grokbot case study): spans the full row, items read as a calm checklist. */
.case-content .fact.full{grid-column:1/-1;}
.case-content .fact-list{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 28px;}
.case-content .fact-list li{padding-left:26px;position:relative;line-height:1.5;}
.case-content .fact-list li::before{content:"";position:absolute;left:0;top:.5em;width:10px;height:10px;border-radius:50%;background:var(--accent);}
.case-content .fact-list b{display:block;}
@media (max-width:760px){.case-content .fact-list{grid-template-columns:1fr;}}

/* ---- homepage proof band, problem rows and circuit thread (2 October 2026) ----
 * Signed off from the "Proof, Thread and Payoff" mock-up: Jake Bell's 5-star Google review with
 * three real numbers straight under the hero, eight problem rows that each open their own page
 * (content/problems.json), and one teal line with a node per section, drawn from the B&P mark. */
.bp-proof{padding:34px 0 8px;}
.bp-proof-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:32px;align-items:center;}
.bp-review{margin:0;padding:24px 26px;border-radius:20px;display:grid;gap:12px;}
.bp-stars{display:flex;gap:2px;align-items:center;color:#E8A317;}
.bp-stars span{margin-left:10px;font-size:.76rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-soft);}
.bp-review blockquote{margin:0;padding:0;border:0;}
.bp-pull{font-family:var(--display);font-weight:600;font-size:clamp(1.3rem,2.4vw,1.6rem);line-height:1.28;color:var(--ink);margin:0;text-wrap:balance;}
.bp-full{color:var(--ink-mid);font-size:.95rem;line-height:1.6;margin:10px 0 0;max-width:62ch;}
.bp-review figcaption{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;font-size:.92rem;color:var(--ink-mid);}
.bp-review figcaption b{color:var(--ink);}
.bp-review .bp-when{color:var(--ink-soft);}
.bp-review figcaption a{margin-left:auto;font-weight:700;color:var(--signal-text);}
.bp-facts{margin:0;display:grid;gap:12px;}
.bp-facts div{display:flex;gap:14px;align-items:baseline;border-bottom:1px solid var(--line);padding-bottom:12px;}
.bp-facts dt{font-family:var(--display);font-weight:700;font-size:1.6rem;color:var(--signal-text);min-width:4.2ch;font-variant-numeric:tabular-nums;}
.bp-facts dd{margin:0;color:var(--ink-mid);font-size:.95rem;}
.bp-prows{display:grid;gap:10px;margin-top:18px;}
.bp-prow{display:grid;grid-template-columns:200px 1fr 1fr 150px;gap:16px;align-items:center;padding:16px 20px;border-radius:16px;color:var(--ink);text-decoration:none;}
.bp-prow:hover{border-color:var(--signal-text);}
.bp-prow h3{font-size:1.02rem;line-height:1.25;margin:0;}
.bp-kind{display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--signal-text);border:1px solid color-mix(in oklch,var(--signal) 45%,transparent);border-radius:999px;padding:1px 8px;margin-bottom:6px;}
.bp-prow p{margin:0;font-size:.92rem;line-height:1.5;}
.bp-prow p span{display:block;font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:2px;}
.bp-was{color:var(--ink-mid);}
.bp-now{font-weight:700;}
.bp-now span{color:var(--signal-text);}
.bp-go{justify-self:end;display:inline-flex;align-items:center;gap:6px;font-family:var(--display);font-weight:700;font-size:.9rem;color:var(--signal-text);}
.bp-th{position:relative;}
/* The scroll trace (assets/thread.js) is desktop only; hidden here so a window that shrinks never scrolls sideways before the script catches up. */
.bp-trace{display:none;}
@media (min-width:1000px){
  .bp-th::before{content:"";position:absolute;top:0;bottom:0;left:max(8px,calc(50% - 580px + 6px));width:2px;background:color-mix(in oklch,var(--signal) 55%,transparent);border-radius:2px;pointer-events:none;}
  .bp-th::after{content:"";position:absolute;top:var(--th-node,50px);left:max(2px,calc(50% - 580px));width:14px;height:14px;border-radius:50%;border:2px solid var(--signal);background:var(--bg);box-shadow:0 0 0 4px color-mix(in oklch,var(--signal) 16%,transparent);pointer-events:none;}
  #proof.bp-th{--th-node:58px;}
  #proof.bp-th::before{top:58px;}
  .bp-th-end::before{bottom:auto;height:var(--th-node,50px);}
  .bp-aboutstrip.bp-th,.bp-talk.bp-th{--th-node:46px;}
  /* assets/thread.js redraws the line as a circuit trace that fills as you scroll (3 October 2026);
     once it has drawn, the plain CSS line and dots above step aside. */
  .bp-trace-on .bp-th::before,.bp-trace-on .bp-th::after{display:none;}
  .bp-trace{display:block;position:absolute;top:0;left:0;z-index:0;pointer-events:none;overflow:visible;}
  .bp-trace path{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round;}
  .bp-trace-dim{stroke:color-mix(in oklch,var(--signal) 26%,transparent);}
  .bp-trace-lit{stroke:var(--signal);filter:drop-shadow(0 0 4px color-mix(in oklch,var(--signal) 70%,transparent));}
  .bp-trace-node{fill:var(--bg);stroke:color-mix(in oklch,var(--signal) 55%,transparent);stroke-width:2;transition:fill .35s,stroke .35s,filter .35s;}
  .bp-trace-node.on{fill:var(--signal);stroke:var(--signal);filter:drop-shadow(0 0 6px color-mix(in oklch,var(--signal) 75%,transparent));}
}
@media (max-width:1100px){.bp-prow{grid-template-columns:180px 1fr 1fr;}.bp-go{grid-column:1/-1;justify-self:start;}}
@media (max-width:820px){.bp-proof-grid{grid-template-columns:1fr;}.bp-prow{grid-template-columns:1fr;gap:8px;}.bp-review figcaption a{margin-left:0;}}
/* The How it works strip is drawn on its .wrap itself, so without this it ran 28px wider than the other cards and covered the thread's node. */
.how-strip-inner.wrap{width:calc(100% - 56px);max-width:1104px;}
@media (max-width:640px){.how-strip-inner.wrap{width:calc(100% - 40px);}}
/* The circuit traces canvas (assets/circuit-bg.js): fixed behind the content, just above the glow. */
.bp-circuit{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;}