/* BIDR Utilities — tokens are the live site's own (:root of bidrutilities.com). */
:root {
  --canvas: #080c0e; --panel: #0e1417; --panel-2: #121a1e;
  --accent: #ffa31a; --accent-hover: #ffb84a; --accent-muted: #ffa31a38; --accent-whisper: #ffa31a14;
  --steel: #9aa8ad; --text: #eff2f4; --text-2: #a4abb0; --hair: #a4abb029; --strong: #a4abb066;
  --display: "Chakra Petch", system-ui, sans-serif; --body: "Public Sans", system-ui, sans-serif; --mono: "IBM Plex Mono", ui-monospace, monospace;
  --gutter: clamp(1.1rem, 4vw, 3rem); --max: 1200px; --nav-h: 76px; --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px); --safe-l: env(safe-area-inset-left, 0px); --safe-r: env(safe-area-inset-right, 0px);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + var(--safe-t) + 12px); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--canvas); color: var(--text); font: 400 17px/1.6 var(--body); overflow-x: hidden; -webkit-font-smoothing: antialiased; }
img, canvas { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 700; line-height: 1.05; letter-spacing: -0.01em; text-wrap: balance; }
p, ul, ol { margin: 0; } ul, ol { padding: 0; list-style: none; }
code { font-family: var(--mono); }
.accent { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.skip-link { position: fixed; left: 12px; top: -80px; z-index: 200; background: var(--accent); color: var(--canvas); padding: 12px 16px; border-radius: 6px; font-weight: 600; text-decoration: none; }
.skip-link:focus { top: calc(12px + var(--safe-t)); }
.mono-label { font: 500 12.5px/1.4 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-2); }
.mono-label.accent { color: var(--accent); }
.wrap { width: min(var(--max), 100% - 2 * var(--gutter)); margin-inline: auto; }
.wrap--narrow { width: min(860px, 100% - 2 * var(--gutter)); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 24px; border: 1px solid transparent; border-radius: 4px; font: 600 16px/1 var(--display); letter-spacing: 0.02em; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s var(--ease); }
.btn .arr { transition: transform 0.25s var(--ease); } .btn:hover .arr { transform: translateX(4px); }
.btn--accent { background: var(--accent); color: var(--canvas); } .btn--accent:hover { background: var(--accent-hover); }
.btn--line { background: transparent; color: var(--text); border-color: var(--strong); } .btn--line:hover { border-color: var(--accent); color: var(--accent); }
.btn--sm { min-height: 44px; padding: 0 18px; font-size: 14.5px; } .btn--block { width: 100%; }
.link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--accent); font-weight: 600; text-decoration: none; }
.link:hover { color: var(--accent-hover); } .link--lg { font-size: 18px; margin-top: 8px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

/* Nav */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 100; height: calc(var(--nav-h) + var(--safe-t)); padding: var(--safe-t) calc(var(--gutter) + var(--safe-r)) 0 calc(var(--gutter) + var(--safe-l)); display: flex; align-items: center; gap: 26px; background: linear-gradient(to bottom, rgba(8, 12, 14, 0.9), rgba(8, 12, 14, 0)); transition: background 0.3s, box-shadow 0.3s; }
.nav.is-solid { background: rgba(8, 12, 14, 0.96); box-shadow: 0 1px 0 var(--hair); }
.nav__brand { margin-right: auto; display: flex; align-items: center; min-height: 44px; } .nav__brand img { height: 46px; width: auto; }
.nav__links { display: flex; gap: 4px; }
.nav__links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 13px; font-size: 15px; font-weight: 500; color: var(--text-2); text-decoration: none; transition: color 0.2s; }
.nav__links a:hover { color: var(--text); }
.quote-count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--canvas); color: var(--accent); font: 500 12px var(--mono); }
.nav__burger { display: none; width: 48px; height: 48px; padding: 0; border: 1px solid var(--strong); border-radius: 4px; background: transparent; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.nav__burger span { width: 20px; height: 2px; background: var(--text); }
.menu { position: fixed; inset: 0; z-index: 150; display: flex; flex-direction: column; gap: 22px; padding: calc(14px + var(--safe-t)) calc(20px + var(--safe-r)) calc(24px + var(--safe-b)) calc(20px + var(--safe-l)); background: var(--canvas); opacity: 0; transform: translateY(-8px); transition: opacity 0.3s var(--ease), transform 0.3s var(--ease); }
.menu[hidden] { display: none; } .menu.is-open { opacity: 1; transform: none; }
.menu__top { display: flex; align-items: center; justify-content: space-between; } .menu__top img { height: 44px; width: auto; }
.menu__close { position: relative; width: 48px; height: 48px; border: 1px solid var(--strong); border-radius: 4px; background: transparent; cursor: pointer; }
.menu__close span { position: absolute; left: 13px; top: 22px; width: 20px; height: 2px; background: var(--text); transform: rotate(45deg); } .menu__close span + span { transform: rotate(-45deg); }
.menu__links { display: flex; flex-direction: column; } .menu__links a { display: flex; align-items: center; min-height: 62px; font: 700 28px var(--display); text-decoration: none; border-bottom: 1px solid var(--hair); }
.menu .btn { margin-top: auto; }

/* Scroll story */
.story { position: relative; height: calc(100svh + var(--travel, 600vh)); }
.stage { position: sticky; top: 0; height: 100svh; overflow: hidden; isolation: isolate; background: var(--canvas); }
.stage__poster, .stage__poster img, #canvas { position: absolute; inset: 0; width: 100%; height: 100%; } .stage__poster img { object-fit: cover; }
#canvas { opacity: 0; transition: opacity 0.4s; } #canvas.is-ready { opacity: 1; }
.stage__scrim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to right, rgba(8, 12, 14, 0.9) 0%, rgba(8, 12, 14, 0.55) 26%, rgba(8, 12, 14, 0) 46%), linear-gradient(to top, rgba(8, 12, 14, 0.75), rgba(8, 12, 14, 0) 24%); }
.chapter { position: absolute; left: max(calc(var(--gutter) + var(--safe-l)), calc((100vw - var(--max)) / 2)); top: 50%; width: min(440px, 30vw); transform: translateY(calc(-50% + var(--shift, 20px))); opacity: var(--o, 0); visibility: hidden; pointer-events: none; }
.chapter.is-active { visibility: visible; pointer-events: auto; } .chapter--opening { --o: 1; --shift: 0px; width: min(560px, 38vw); } .chapter--closing { width: min(520px, 36vw); }
.chapter h1 { margin-top: 18px; font-size: clamp(42px, 5vw, 78px); }
.chapter h2 { margin-top: 14px; font-size: clamp(30px, 3.2vw, 48px); } .h-display { font-size: clamp(48px, 6vw, 92px) !important; color: var(--accent); }
.chapter__body { margin-top: 16px; color: var(--text-2); font-size: clamp(15.5px, 1.15vw, 18px); }
.partlist { margin: 20px 0 8px; border-top: 1px solid var(--hair); }
.partlist li { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--hair); font-size: 14.5px; }
.partlist code { color: var(--accent); font-size: 12.5px; white-space: nowrap; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; } .chips li { padding: 8px 14px; border: 1px solid var(--accent-muted); border-radius: 999px; background: var(--accent-whisper); font: 500 12.5px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }

/* Hotspots: a box laid exactly over the drawn image (JS sizes it), so labels stay on their parts at any window shape. */
.hotspots { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; opacity: var(--hot, 0); visibility: hidden; }
.hotspots.is-on { visibility: visible; }
.hotspot { position: absolute; left: var(--x); top: var(--y); width: 0; height: 0; opacity: 0.28; transition: opacity 0.35s; }
.hotspot.is-lit { opacity: 1; z-index: 2; }
.hotspot__dot { position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 5px var(--accent-muted); }
.hotspot.is-lit .hotspot__dot { animation: ping 2.2s var(--ease) infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(255,163,26, 0.55); } 100% { box-shadow: 0 0 0 16px rgba(255,163,26, 0); } }
.hotspot__card { position: absolute; top: -22px; display: grid; gap: 4px; width: max-content; max-width: 230px; padding: 9px 12px; border: 1px solid var(--hair); border-radius: 4px; background: rgba(14, 20, 23, 0.9); pointer-events: none; transform: translateY(6px); opacity: 0; transition: opacity 0.35s, transform 0.35s var(--ease), border-color 0.2s; }
.hotspot--right .hotspot__card { left: 22px; } .hotspot--left .hotspot__card { right: 22px; }
.hotspot__card::before { content: ""; position: absolute; top: 21px; width: 16px; height: 1px; background: var(--accent); } .hotspot--right .hotspot__card::before { left: -17px; } .hotspot--left .hotspot__card::before { right: -17px; }
.hotspot.is-lit .hotspot__card { opacity: 1; transform: none; pointer-events: auto; border-color: var(--accent-muted); }
.hotspot__name { font: 600 14.5px/1.25 var(--display); }
.hotspot__row { display: flex; align-items: center; justify-content: space-between; gap: 14px; } .hotspot__row code { font-size: 11.5px; color: var(--text-2); }
.add { min-height: 30px; padding: 0 10px; border: 1px solid var(--accent-muted); border-radius: 3px; background: var(--accent-whisper); color: var(--accent); font: 500 12px var(--mono); cursor: pointer; transition: background 0.2s, color 0.2s; }
.add:hover, .add.is-added { background: var(--accent); color: var(--canvas); }

.meter { position: absolute; left: 50%; bottom: calc(26px + var(--safe-b)); transform: translateX(-50%); width: min(420px, 50vw); display: grid; gap: 8px; text-align: center; }
.meter__label { font: 500 11px var(--mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-2); }
.meter__track { height: 2px; background: var(--hair); } .meter__fill { display: block; height: 100%; width: calc(var(--explode, 0) * 100%); background: var(--accent); }
.stage__skip { position: absolute; right: calc(var(--gutter) + var(--safe-r)); bottom: calc(14px + var(--safe-b)); display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; color: var(--text-2); text-decoration: none; } .stage__skip:hover { color: var(--accent); }
.stage__cue { position: absolute; left: max(calc(var(--gutter) + var(--safe-l)), calc((100vw - var(--max)) / 2)); bottom: calc(24px + var(--safe-b)); display: flex; align-items: center; gap: 12px; font: 500 11.5px var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-2); transition: opacity 0.4s; }
.stage__cue span { width: 1px; height: 32px; background: linear-gradient(var(--accent), transparent); animation: cue 2s var(--ease) infinite; transform-origin: top; } .stage__cue.is-hidden { opacity: 0; }
@keyframes cue { 0% { transform: scaleY(0); } 55% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* Sections */
.band { border-block: 1px solid var(--hair); background: var(--panel); padding: clamp(48px, 6vw, 84px) 0; }
.band__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 80px); }
.band__problem { margin-top: 14px; font: 600 clamp(22px, 2.3vw, 32px)/1.25 var(--display); color: var(--text-2); }
.band__fix { margin-top: 14px; display: grid; font: 700 clamp(26px, 2.8vw, 40px)/1.15 var(--display); }
.section { padding: clamp(80px, 10vw, 140px) 0; } .section--panel { background: var(--panel); border-block: 1px solid var(--hair); }
.section h2 { margin-top: 14px; font-size: clamp(34px, 4.2vw, 60px); max-width: 18ch; }
.lead { margin-top: 20px; max-width: 64ch; font-size: clamp(17px, 1.35vw, 20px); color: var(--text-2); }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: clamp(36px, 5vw, 64px); background: var(--hair); border: 1px solid var(--hair); }
.stat { padding: 30px 28px; background: var(--canvas); } .stat__big { margin: 14px 0 10px; font: 700 clamp(30px, 3.2vw, 46px)/1.05 var(--display); color: var(--accent); } .stat p:last-child { color: var(--text-2); font-size: 15.5px; }
.statement { margin-top: clamp(36px, 5vw, 60px); max-width: 30ch; font: 600 clamp(24px, 2.6vw, 38px)/1.2 var(--display); }
.source { margin-top: 22px; font-size: 13.5px; color: var(--text-2); } .source a { color: var(--accent); }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: clamp(34px, 5vw, 60px); }
.card { position: relative; padding: 30px 28px; border: 1px solid var(--hair); border-radius: 6px; background: var(--panel-2); transition: border-color 0.3s, transform 0.3s var(--ease); } .card:hover { border-color: var(--accent-muted); transform: translateY(-3px); }
.card--flat { background: transparent; } .card__n { font: 500 13px var(--mono); color: var(--accent); letter-spacing: 0.14em; } .card h3 { margin: 14px 0 10px; font-size: 24px; } .card p { color: var(--text-2); font-size: 16px; }
.note { margin-top: 30px; color: var(--text-2); }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: clamp(34px, 5vw, 60px); counter-reset: s; }
.step { padding-top: 26px; border-top: 2px solid var(--hair); } .step__n { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--accent-muted); border-radius: 50%; font: 500 15px var(--mono); color: var(--accent); } .step h3 { margin: 18px 0 8px; font-size: 23px; } .step p { color: var(--text-2); }
.why { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(30px, 6vw, 90px); align-items: center; }
.points { margin-top: 34px; display: grid; gap: 26px; } .points li { display: flex; gap: 16px; } .tick { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: var(--canvas); font-weight: 700; } .points h3 { font-size: 22px; margin-bottom: 6px; } .points p { color: var(--text-2); }
.plumb { padding: 28px; border: 1px solid var(--hair); border-radius: 6px; background: var(--canvas); text-align: center; }
.plumb__stage { position: relative; height: 230px; margin: 18px 0 12px; overflow: hidden; }
.plumb__line { position: absolute; left: 50%; top: 8px; bottom: 22px; width: 0; border-left: 1px dashed var(--strong); }
.plumb__pole { position: absolute; left: 50%; bottom: 22px; width: 10px; height: 180px; margin-left: -5px; border-radius: 2px; background: linear-gradient(90deg, #6b5a3a, #a48b5c 55%, #6b5a3a); transform-origin: 50% 100%; transform: rotate(var(--tilt, 30.6deg)); }
.plumb__pole::before { content: ""; position: absolute; left: -34px; top: 22px; width: 78px; height: 7px; border-radius: 2px; background: #8a744a; }
.plumb__ground { position: absolute; left: 12%; right: 12%; bottom: 20px; height: 2px; background: var(--strong); }
.plumb__read { font: 500 13px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-2); } .plumb__read strong { color: var(--text); font-size: 20px; margin-left: 6px; } .plumb.is-true .plumb__read strong, .plumb.is-true #plumbState { color: var(--accent); }
.plumb__btn { margin-top: 16px; width: 100%; user-select: none; -webkit-user-select: none; touch-action: none; } .plumb__hint { margin-top: 10px; font-size: 14px; color: var(--text-2); }
.partner { display: grid; grid-template-columns: 1.6fr 1fr; gap: 40px; align-items: center; margin-top: clamp(34px, 5vw, 60px); padding: 34px; border: 1px solid var(--hair); border-radius: 6px; background: var(--panel); }
.partner h3 { margin: 12px 0; font-size: 30px; } .partner p:last-child { color: var(--text-2); } .partner__logo { padding: 26px; border-radius: 6px; background: #fff; } .partner__logo img { width: 100%; height: auto; }
.teaming { display: flex; align-items: center; justify-content: space-between; gap: 30px; margin-top: 34px; padding-top: 34px; border-top: 1px solid var(--hair); } .teaming p { max-width: 62ch; color: var(--text-2); }
.faq { margin-top: clamp(30px, 4vw, 50px); border-top: 1px solid var(--hair); } .faq__item { border-bottom: 1px solid var(--hair); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 76px; cursor: pointer; list-style: none; font: 600 clamp(18px, 1.7vw, 23px)/1.25 var(--display); } .faq summary::-webkit-details-marker { display: none; } .faq summary:hover { color: var(--accent); }
.faq__x { position: relative; flex: none; width: 22px; height: 22px; } .faq__x::before, .faq__x::after { content: ""; position: absolute; left: 3px; top: 10px; width: 16px; height: 2px; background: var(--accent); transition: transform 0.3s var(--ease); } .faq__x::after { transform: rotate(90deg); } .faq__item[open] .faq__x::after { transform: rotate(0); }
.faq__item p { padding: 0 40px 26px 0; color: var(--text-2); }
.quote { position: relative; background: radial-gradient(800px 420px at 85% 0%, rgba(255,163,26, 0.12), transparent 70%), var(--canvas); }
.quote__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(30px, 6vw, 90px); align-items: start; }
.emails { margin-top: 8px; font-size: 18px; } .emails a { color: var(--accent); text-decoration: none; } .emails a:hover { text-decoration: underline; } .sep { color: var(--text-2); }
.form { display: grid; gap: 18px; padding: 30px; border: 1px solid var(--hair); border-radius: 6px; background: var(--panel); }
.form label { display: grid; gap: 8px; }
.form input, .form textarea { width: 100%; min-height: 50px; padding: 12px 14px; border: 1px solid var(--strong); border-radius: 4px; background: var(--canvas); color: var(--text); font: 400 16px/1.45 var(--body); transition: border-color 0.2s, box-shadow 0.2s; } .form textarea { resize: vertical; }
.form input:focus, .form textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-muted); } .form [aria-invalid="true"] { border-color: #ff7a6b; }
.quote-items { display: flex; flex-wrap: wrap; gap: 8px; } .quote-items li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 6px 6px 12px; border: 1px solid var(--accent-muted); border-radius: 999px; background: var(--accent-whisper); font-size: 13.5px; }
.quote-items button { width: 26px; height: 26px; border: 0; border-radius: 50%; background: transparent; color: var(--text-2); cursor: pointer; font-size: 16px; } .quote-items button:hover { color: var(--text); background: var(--hair); }
.form__status { min-height: 1.4em; font-size: 14.5px; color: var(--accent); } .form__status.is-error { color: #ff8e80; }
.footer { padding: 64px 0 calc(28px + var(--safe-b)); border-top: 1px solid var(--hair); background: #060a0b; }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr; gap: 40px; align-items: start; } .footer__logo { display: block; margin-bottom: 16px; } .footer__logo img { height: 70px; width: auto; }
.footer nav { display: flex; flex-wrap: wrap; gap: 4px 22px; } .footer nav a { display: inline-flex; align-items: center; min-height: 40px; color: var(--text-2); text-decoration: none; } .footer nav a:hover { color: var(--accent); }
.footer__legal { margin-top: 38px; padding-top: 22px; border-top: 1px solid var(--hair); font-size: 13px; color: var(--text-2); }
.toast { position: fixed; left: 50%; bottom: calc(24px + var(--safe-b)); z-index: 160; transform: translate(-50%, 20px); padding: 12px 18px; border: 1px solid var(--accent-muted); border-radius: 4px; background: var(--panel-2); font-size: 14.5px; opacity: 0; pointer-events: none; transition: opacity 0.3s, transform 0.3s var(--ease); } .toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); transition-delay: calc(var(--i, 0) * 70ms); } .reveal.is-in { opacity: 1; transform: none; }

@media (max-width: 1080px) { .nav__links a { padding: 0 9px; font-size: 14px; } .chapter, .chapter--opening, .chapter--closing { width: min(420px, 40vw); } .hotspot__card { max-width: 180px; } }
@media (max-width: 767px) {
  :root { --nav-h: 66px; } body { font-size: 16px; }
  .nav { background: rgba(8, 12, 14, 0.96); box-shadow: 0 1px 0 var(--hair); } .nav__links, .nav__cta { display: none; } .nav__burger { display: flex; } .nav__brand img { height: 40px; }
  .stage__scrim { background: linear-gradient(to top, rgba(8, 12, 14, 0.95) 0%, rgba(8, 12, 14, 0.7) 28%, rgba(8, 12, 14, 0) 52%), linear-gradient(to bottom, rgba(8, 12, 14, 0.6), rgba(8, 12, 14, 0) 18%); }
  .chapter, .chapter--opening, .chapter--closing { left: calc(18px + var(--safe-l)); right: calc(18px + var(--safe-r)); top: auto; bottom: calc(84px + var(--safe-b)); width: auto; transform: translateY(var(--shift, 16px)); }
  .chapter h1 { font-size: clamp(36px, 10.5vw, 50px); margin-top: 10px; } .chapter h2 { font-size: clamp(26px, 7.4vw, 34px); } .h-display { font-size: clamp(44px, 13vw, 60px) !important; }
  .chapter--opening .mono-label { font-size: 10.5px; } .chapter__body { font-size: 15px; } .actions { margin-top: 18px; } .actions .btn { width: 100%; } .actions .btn--line { display: none; }
  .partlist { display: none; } .chapter--group .link { display: none; } .chips { margin-top: 14px; gap: 6px; } .chips li { padding: 6px 10px; font-size: 10.5px; }
  .hotspot__card { max-width: 150px; padding: 7px 9px; top: -18px; } .hotspot__name { font-size: 12.5px; } .hotspot__row code { display: none; } .hotspot--right .hotspot__card { left: 16px; } .hotspot--left .hotspot__card { right: 16px; } .hotspot__card::before { width: 10px; } .hotspot--right .hotspot__card::before { left: -11px; } .hotspot--left .hotspot__card::before { right: -11px; }
  .hotspot:not(.is-lit) { opacity: 0; } .add { min-height: 28px; padding: 0 8px; }
  .meter { width: auto; left: calc(18px + var(--safe-l)); right: calc(18px + var(--safe-r)); transform: none; bottom: calc(50px + var(--safe-b)); } .stage__cue { display: none; } .stage__skip { right: auto; left: 50%; transform: translateX(-50%); bottom: calc(2px + var(--safe-b)); }
  .band__grid, .stats, .grid3, .steps, .why, .partner, .quote__grid, .footer__grid { grid-template-columns: 1fr; } .teaming { flex-direction: column; align-items: flex-start; } .faq__item p { padding-right: 0; } .form { padding: 22px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal { opacity: 1; transform: none; transition: none; } .stage__cue span, .hotspot.is-lit .hotspot__dot { animation: none; } }
/* Static fallback (reduced motion / no frames): every chapter in normal flow over a still, parts listed as text. */
.story.is-static { height: auto; }
.story.is-static .stage { position: relative; height: auto; min-height: 100svh; display: grid; gap: 44px; align-content: end; padding: calc(var(--nav-h) + 50px) max(calc(var(--gutter) + var(--safe-l)), calc((100vw - var(--max)) / 2)) 70px; }
.story.is-static .stage__scrim { background: linear-gradient(to top, rgba(8, 12, 14, 0.96), rgba(8, 12, 14, 0.78) 60%, rgba(8, 12, 14, 0.5)); }
.story.is-static .chapter { position: relative; inset: auto; left: auto; right: auto; top: auto; bottom: auto; width: min(640px, 100%); transform: none; opacity: 1; visibility: visible; pointer-events: auto; }
.story.is-static .partlist { display: block; } .story.is-static .hotspots, .story.is-static .meter, .story.is-static .stage__skip, .story.is-static .stage__cue, .story.is-static #canvas { display: none; }

/* Group chapters sit in the empty bottom-left corner so part labels never collide with them. */
@media (min-width: 768px) {
  .chapter--group { top: auto; bottom: calc(92px + var(--safe-b)); transform: translateY(var(--shift, 20px)); width: min(400px, 28vw); }
  .chapter--group .partlist { display: none; }
  .story.is-static .chapter--group .partlist { display: block; }
}
.hotspot__card { margin-top: var(--dy, 0px); }
.hotspot__card::before { top: calc(21px - var(--dy, 0px)); }

[hidden] { display: none !important; }
/* Opening copy stays inside the empty left column (the crossarm starts at about 34% of the width). */
@media (min-width: 768px) {
  .chapter--opening { width: min(400px, 25vw); }
  .chapter--opening h1 { font-size: clamp(36px, 4.3vw, 66px); }
  .chapter--closing { width: min(420px, 27vw); }
  .chapter--closing .h-display { font-size: clamp(44px, 5.2vw, 84px) !important; }
}

/* Partner logo is white artwork: it sits on a dark panel, not a white plate. */
.partner__logo { background: #0a0f12; border: 1px solid var(--hair); padding: 34px; }
/* Closing headline is a sentence now, not two words. */
.chapter--closing .h-display { font-size: clamp(30px, 3.2vw, 50px) !important; line-height: 1.08; }
/* "Why BIDR" promises panel (replaces the old hold widget) */
.promises { display: grid; gap: 1px; border: 1px solid var(--hair); border-radius: 6px; overflow: hidden; background: var(--hair); }
.promises li { display: grid; gap: 10px; padding: 30px 28px; background: var(--canvas); }
.promises strong { font: 700 clamp(26px, 2.6vw, 38px)/1.05 var(--display); }
@media (max-width: 767px) { .chapter--closing .h-display { font-size: clamp(28px, 8vw, 36px) !important; } }
@media (min-width: 768px) { .chapter--arrive { width: min(380px, 25vw); } }

/* Phone: comfortable tap size for "Add +", and keep labels clear of the fixed header and the text block. */
@media (max-width: 767px) {
  .add { min-height: 36px; padding: 0 12px; font-size: 12.5px; }
  .hotspot__dot { left: -5px; top: -5px; width: 10px; height: 10px; }
  .chapter--group h2 { font-size: clamp(24px, 6.8vw, 30px); }
  .chapter--group .chapter__body { font-size: 14.5px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .chapter--arrive h2 { font-size: clamp(26px, 7.4vw, 34px); }
}

/* Phone labels: compact one-line chips (name + "+"), so a whole group fits without overlapping. */
@media (max-width: 767px) {
  .hotspot__card { display: flex; align-items: center; gap: 8px; max-width: 190px; padding: 3px 3px 3px 10px; top: -20px; border-radius: 999px; }
  .hotspot__name { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 130px; }
  .hotspot__row { gap: 0; }
  .add { min-height: 34px; min-width: 34px; padding: 0 8px; border-radius: 999px; font-size: 15px; line-height: 1; }
  .hotspot__card::before { top: calc(20px - var(--dy, 0px)); }
  .chapter, .chapter--opening, .chapter--closing, .chapter--group, .chapter--arrive { bottom: calc(96px + var(--safe-b)); }
}

/* Phone: text sits over the pole, so the fade behind it is deeper and taller. */
@media (max-width: 767px) {
  .stage__scrim { background: linear-gradient(to top, rgba(8, 12, 14, 0.97) 0%, rgba(8, 12, 14, 0.9) 30%, rgba(8, 12, 14, 0.55) 48%, rgba(8, 12, 14, 0) 66%), linear-gradient(to bottom, rgba(8, 12, 14, 0.6), rgba(8, 12, 14, 0) 18%); }
  .chapter .mono-label, .chapter__body { text-shadow: 0 1px 10px rgba(8, 12, 14, 0.9); }
}

@media (max-width: 767px) { .toast { top: calc(var(--nav-h) + var(--safe-t) + 10px); bottom: auto; transform: translate(-50%, -12px); max-width: calc(100% - 36px); text-align: center; } .toast.is-on { transform: translate(-50%, 0); } }

/* ── Labels open/closed state (desktop: whole group open; phone: one at a time) ── */
.hotspot__card { opacity: 0 !important; pointer-events: none !important; }
.hotspot.is-open .hotspot__card { opacity: 1 !important; pointer-events: auto !important; transform: var(--place, none); }
.hotspot__lead { display: none; }
@media (max-width: 767px) {
  /* Phone: label sits in open space, joined to its part by a leader line; the full name wraps, nothing is cut off. */
  .hotspot { opacity: 0; transition: opacity 0.3s; } .hotspot.is-lit { opacity: 1; }
  .hotspot--free .hotspot__card { position: absolute; right: auto; margin: 0; display: flex; align-items: center; gap: 10px; width: max-content; max-width: min(230px, 62vw); padding: 8px 8px 8px 14px; border-radius: 12px; border-color: var(--accent); background: rgba(10, 15, 18, 0.96); box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.9); transform: var(--place); transition: opacity 0.3s; }
  .hotspot--free .hotspot__card::before { display: none; }
  .hotspot--free .hotspot__name { font-size: 14.5px; line-height: 1.25; white-space: normal; overflow: visible; text-overflow: clip; max-width: none; }
  .hotspot--free .hotspot__row code { display: none; }
  .hotspot--free .add { min-width: 42px; min-height: 42px; padding: 0; border-radius: 10px; font-size: 18px; }
  .hotspot__lead { display: block; position: absolute; left: 0; top: 0; height: 1.5px; background: var(--accent); transform-origin: 0 50%; opacity: 0; transition: opacity 0.3s; }
  .hotspot.is-open .hotspot__lead { opacity: 0.9; }
  /* dots: every part in the group shows one; the open one is solid, the rest are rings you can tap */
  .hotspot__dot { left: -7px; top: -7px; width: 14px; height: 14px; pointer-events: auto; cursor: pointer; background: transparent; border: 2px solid var(--accent); box-shadow: 0 0 0 3px rgba(8, 12, 14, 0.6); }
  .hotspot__dot::after { content: ""; position: absolute; inset: -16px; }
  .hotspot.is-open .hotspot__dot { background: var(--accent); }
  .hotspot.is-lit .hotspot__dot { animation: none; } .hotspot.is-open .hotspot__dot { animation: ping 2.2s var(--ease) infinite; }
}
@media (max-width: 767px) {
  /* placement must win over the older ".is-lit -> transform: none" rule */
  .hotspot.hotspot--free .hotspot__card, .hotspot.hotspot--free.is-lit .hotspot__card, .hotspot.hotspot--free.is-open .hotspot__card { transform: var(--place) !important; }
}