/* ---- Knowles redress (build.py) ---- */
:root{
  --poster-blue:#1B1B1B; --poster-blue-deep:#0F0F0F; --poster-yellow:#EA3423; --poster-ink:#111111;
  --on-accent:#FFFFFF; --accent:#EA3423;
}
.kb-preview{ position:sticky; top:0; z-index:60; background:#111; color:#fff; font:500 .875rem/1.4 var(--font-sans);
  padding:.55rem 1rem; text-align:center; }
.kb-preview strong{ color:#EA3423; font-weight:700; }
@media (max-width:40rem){ .kb-preview .kb-wide{ display:none; } }
.kb-hero{ display:grid; gap:2rem; align-items:center; grid-template-columns:minmax(0,1fr); max-width:70rem; }
@media (min-width:60rem){ .kb-hero{ grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:3rem; } }
.kb-hero .poster-h1{ font-size:clamp(3rem,7vw,6.25rem); }
.kb-hero-sub{ font-size:clamp(1.25rem,2.4vw,1.75rem); font-weight:600; max-width:22ch; }
.kb-hero-actions{ margin:1.5rem 0 0; }
.kb-hero-cta{ border-radius:0; font-family:var(--font-poster); font-weight:400; text-transform:uppercase; letter-spacing:.01em; font-size:1.25rem; padding:.9rem 1.5rem; }
.kb-vsl-video{ margin:0; width:100%; }
.kb-vsl-video video{ display:block; width:100%; height:auto; aspect-ratio:16/9; background:#000; border:.3rem solid #EA3423; }
.kb-vsl-video .poster-caption{ text-align:left; }
.kb-fig-link{ display:block; color:inherit; }
  background:#111; color:#fff; font-family:var(--font-sans); }
.kb-hero-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:.75rem 1.25rem; }
.kb-expert-link{ font-family:var(--font-sans); font-weight:600; color:var(--poster-ink); text-decoration:underline; text-underline-offset:3px;
  min-height:44px; display:inline-flex; align-items:center; }
.kb-expert-link:hover{ color:#C42A1B; }
  font-family:var(--font-poster); font-weight:400; text-transform:uppercase; letter-spacing:.01em; font-size:1.125rem; }
.kb-expert{ scroll-margin-top:4.5rem; }
.kb-expert-grid{ display:grid; gap:2.5rem; align-items:start; grid-template-columns:minmax(0,1fr); }
@media (min-width:60rem){ .kb-expert-grid{ grid-template-columns:minmax(0,5fr) minmax(0,6fr); } }
.kb-expert-call{ font-family:var(--font-sans); margin:1.25rem 0 0; }
.kb-expert-call a{ font-weight:600; color:var(--poster-ink); display:inline-flex; min-height:44px; align-items:center; }
.kb-expert-form{ background:#fff; border:1px solid var(--border); padding:.75rem; min-height:12rem; }
.kb-anchor{ display:block; height:0; scroll-margin-top:4.5rem; }
/* "Big plans" band: the master runs padding-bottom:0 + align-items:end so its miniature-on-a-plank
   image stands on the white band below. The lifestyle photo (Ron, 2 Oct) is a full scene and reads
   as cropped there, so the band gets the same space below as above. */
.poster-quote > .wrap{ padding-bottom:clamp(3rem, 7vw, 5rem); }
.poster-quote .poster-quote-grid{ align-items:center; }
/* footer: phone and credit links were 20px tall (check-mobile small-tap-target); version tag failed contrast (axe) */
.site-footer a[href^="tel:"], .site-footer a[href*="webconductors"]{ display:inline-flex; align-items:center; min-height:44px; }
.site-footer .build-tag{ opacity:1; color:rgba(255,255,255,.72); }
.kb-offer-line{ font-family:var(--font-sans); font-weight:600; font-size:clamp(1rem,1.8vw,1.25rem); margin:.9rem 0 0; color:var(--poster-ink); }

/* ---- Ron's mobile audit, 9 Oct 2026 ---- */
/* one display face: Anton for headlines, Inter for everything else (Fraunces gone) */
:root{ --font-display: var(--font-sans); }
button, input, select, textarea{ font-family:inherit; }
.pq-q, .door-h, .fs-q, .use-verdict, .design-name{ font-weight:700; letter-spacing:-.01em; }
/* the builder's backdrop: flat sand, not the red-tinted radial wash */
#configure::before{ background:#F4F1EC; }
/* hero: trust line, render beside the copy, one button, small badge */
.kb-trust{ font-family:var(--font-sans); font-weight:600; font-size:.9375rem; letter-spacing:.02em; margin:0 0 .75rem; color:var(--poster-ink); }
.kb-hero-fig{ margin:0; }
.kb-hero-fig img{ display:block; width:100%; height:auto; }
.kb-hero-fig .poster-caption{ text-align:left; }
.kb-badge{ display:inline-flex; flex-wrap:wrap; align-items:baseline; gap:.25rem .5rem; margin:1rem 0 0; padding:.4rem .7rem;
  background:#111; color:#fff; font:600 .9375rem/1.35 var(--font-sans); }
.kb-badge b{ font-family:var(--font-poster); font-weight:400; text-transform:uppercase; color:#FF5F4D; font-size:1.125rem; letter-spacing:.01em; }
.kb-free{ font-family:var(--font-sans); font-size:.9375rem; color:var(--muted-foreground); margin:.75rem 0 0; max-width:40ch; }
/* phone: Ron's order is headline, model, button, callback link, badge, so the render moves up between the
   sub-line and the button (the copy column dissolves into the hero's own flex column) */
@media (max-width:59.99rem){
  .kb-hero{ display:flex; flex-direction:column; align-items:flex-start; gap:0; text-align:left; }
  .kb-hero-fig{ align-self:stretch; }
  .kb-hero-copy{ display:contents; }
  .kb-trust{ order:1; font-size:.8125rem; }
  .kb-hero .poster-h1{ order:2; }
  .kb-hero-sub{ order:3; }
  .kb-hero-fig{ order:4; margin-top:1rem; }
  .kb-hero-actions{ order:5; margin-top:1rem; }
  .kb-hero .kb-badge{ order:6; }
  .kb-free{ order:7; }
}
.kb-on-dark{ color:#fff; }
.kb-on-dark:hover{ color:#fff; opacity:.85; }
.kb-close-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:.75rem 1.25rem; margin-top:1.25rem; }
/* the submit step: the offer and its one line of terms */
.kb-submit-offer{ margin:.5rem 0 1rem; }
.kb-submit-offer .kb-badge{ margin:0; }
.kb-terms{ font-family:var(--font-sans); font-size:.875rem; line-height:1.5; color:var(--muted-foreground); margin:.5rem 0 0; max-width:52ch; }
/* the pinned bar: what you picked, $750, one button */
.sticky-cta{ display:flex; align-items:center; gap:.75rem; }
.sticky-cta p{ display:flex !important; align-items:center; gap:.5rem; min-width:0; flex:1 1 auto; margin:0; }
.sticky-cta .btn{ flex:0 0 auto; }
.kb-picks{ font-family:var(--font-sans); font-weight:600; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.kb-bar-offer{ flex:0 0 auto; font-family:var(--font-poster); text-transform:uppercase; color:#FF5F4D; font-size:.9375rem; letter-spacing:.01em; }
@media (max-width:40rem){
  .sticky-cta{ padding:.6rem 1rem; }
  .sticky-cta p{ flex-direction:column; align-items:flex-start; gap:0; }
  .sticky-cta .sc-step{ display:none; }
  .kb-picks{ font-size:.875rem; max-width:100%; white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; line-height:1.3; }
  .kb-bar-offer{ font-size:.8125rem; }
}
/* the pinned 3D viewer on a phone: about 140px, so the picker keeps most of the screen */
@media (max-width:47.99rem){
  /* !important: nav.css sizes it per step with body[data-show=...] selectors that outrank a plain rule */
  .builder-visual three-d-stage{ height:8.75rem !important; min-height:0 !important; }
  .builder-visual .cfg-viewbar{ display:none; }
}
/* six designs: the ladder leads; on a phone the cards swipe sideways and stay short (details open in the panel) */
.design-ladder-wrap{ margin-top:2rem; }
#planGrid{ margin-top:2rem; }
@media (max-width:39.99rem){
  #planGrid{ display:flex; gap:.875rem; overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-x:contain;
    margin-inline:calc(-1 * var(--gutter, 1.5rem)); padding:0 var(--gutter, 1.5rem) .75rem; scroll-padding-inline:var(--gutter, 1.5rem); }
  #planGrid .design-card{ flex:0 0 82%; scroll-snap-align:start; }
  #planGrid .design-facts, #planGrid .design-shown, #planGrid .design-best{ display:none; }
  #planGrid .design-dims{ white-space:nowrap; }
}
.kb-swipe-hint{ display:none; }
@media (max-width:39.99rem){ .kb-swipe-hint{ display:block; font-family:var(--font-sans); font-size:.875rem; color:var(--muted-foreground); margin:.75rem 0 0; } }
/* callback form, inline and in the slide-up panel */
.kb-cb-form{ display:grid; gap:.9rem; }
.kb-cb-field{ display:grid; gap:.35rem; }
.kb-cb-field label{ font-family:var(--font-sans); font-weight:600; font-size:.9375rem; }
.kb-cb-field input{ font-size:1rem; padding:.75rem .85rem; border:1px solid var(--border); border-radius:0; background:#fff; min-height:48px; }
.kb-cb-field input:focus-visible{ outline:2px solid #111; outline-offset:1px; }
.kb-cb-field input[aria-invalid="true"]{ border-color:#C42A1B; }
.kb-cb-send{ justify-self:start; border-radius:0; font-family:var(--font-poster); font-weight:400; text-transform:uppercase; letter-spacing:.01em; font-size:1.125rem; }
.kb-cb-msg{ margin:0; min-height:1.4em; font-family:var(--font-sans); font-size:.9375rem; }
.kb-expert-form{ padding:1.25rem; min-height:0; }
.kb-sheet{ border:0; padding:0; margin:auto auto 0; width:100%; max-width:34rem; max-height:92vh; background:#fff; color:var(--poster-ink); }
.kb-sheet::backdrop{ background:rgba(0,0,0,.55); }
.kb-sheet-inner{ position:relative; padding:1.5rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom)); }
.kb-sheet-h{ font-family:var(--font-poster); font-weight:400; text-transform:uppercase; font-size:2rem; line-height:1; margin:.25rem 0 0; }
.kb-sheet-lede{ font-family:var(--font-sans); margin:.6rem 0 1.1rem; }
.kb-sheet-close{ position:absolute; top:.5rem; right:.5rem; width:44px; height:44px; border:0; background:transparent; font-size:1.75rem; line-height:1; cursor:pointer; color:var(--poster-ink); }
@media (min-width:48rem){ .kb-sheet{ margin:auto; } }
@media (prefers-reduced-motion:no-preference){
  .kb-sheet[open]{ animation:kb-sheet-up .3s cubic-bezier(.2,.8,.2,1); }
  @keyframes kb-sheet-up{ from{ transform:translateY(100%); } to{ transform:none; } }
}
/* the video, further down, as a tap-to-play thumbnail */
.kb-watch-grid{ display:grid; gap:1.5rem; align-items:center; grid-template-columns:minmax(0,1fr); }
@media (min-width:60rem){ .kb-watch-grid{ grid-template-columns:minmax(0,4fr) minmax(0,7fr); gap:3rem; } }
.kb-watch .kb-vsl-video video{ border-width:.2rem; }