/* StreetHeist landing, Track B: the frame every section beat shares (spec r3
   section 7). Beats never paint an opaque full-bleed background: the street
   stage (Track A) stays visible behind them; readability comes from its
   scrim, glass panels and type. Two layouts share the markup (sh-steps.js):
   html.b-live, the deck: a sticky 100svh frame whose steps swap in place;
   otherwise the flow: every step stacked (no JS, reduced motion, still tier,
   short landscape phones). Per-beat files: sh-proof, sh-studio, sh-how,
   sh-show (science), sh-cases, sh-tech, sh-markets. Local tokens use --b-. */
:root {
  --b-top: calc(var(--sh-nav-h, 64px) + 58px);
  --b-bottom: 76px;
  --b-xxl: clamp(64px, 11vw, 200px);
  --b-xl: clamp(52px, 7.4vw, 128px);
  --b-panel: rgb(9 11 15 / 62%);
  --b-panel-line: rgb(255 255 255 / 13%);
  --b-ease: var(--sh-ease-out, cubic-bezier(.16, 1, .3, 1));
  --b-dur: var(--sh-dur-scene, 700ms);
}

/* Fallbacks for A's shared components (zero specificity: A's sh-base.css wins). */
:where(.sh-beat) { position: relative; z-index: var(--sh-z-content, 2); color: var(--sh-fg); }
:where(.sh-beat) > :where(.sh-hud) { position: sticky; bottom: 22px; z-index: 3; width: max-content; margin: -80px var(--sh-gutter) 0 auto; padding-bottom: 22px; }
:where(.sh-beat .sh-src) { display: block; margin-top: 14px; font: 700 10.5px/1.4 var(--sh-font-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--sh-fg-3); }

/* Head: bracketed kicker, headline, lede. */
.b-head { max-width: 640px; }
.sh-beat .sh-beat__kicker { display: inline-flex; gap: .6em; margin: 0 0 18px; color: var(--sh-gold-hi); font: 600 11px/1 var(--sh-font-mono); letter-spacing: .24em; text-transform: uppercase; }
.sh-beat .sh-beat__kicker::before { content: "["; color: var(--sh-fg-3); }
.sh-beat .sh-beat__kicker::after { content: "]"; color: var(--sh-fg-3); }
.b-head h2 { font-size: clamp(32px, 3.6vw, 58px); line-height: 1.02; letter-spacing: -.035em; text-wrap: balance; }
.sh-beat__lede { margin-top: 16px; max-width: 36em; color: var(--sh-fg-2); font-size: clamp(15px, 1.1vw, 17px); line-height: 1.55; text-wrap: pretty; }
.b-tag { display: inline-block; padding: 6px 10px; border: 1px solid var(--sh-line-2); border-radius: 6px; background: rgb(7 8 10 / 55%); color: var(--sh-fg-2); font: 600 10.5px/1 var(--sh-font-mono); letter-spacing: .2em; text-transform: uppercase; }

/* Numerals and lines. */
.b-num { font: 400 var(--b-xxl)/.9 var(--sh-font-num); letter-spacing: -.035em; color: var(--sh-fg); white-space: nowrap; font-variant-numeric: lining-nums; background: linear-gradient(180deg, #fbfaf6 30%, #b9b3a4); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.b-line { margin-top: 18px; max-width: 34em; color: var(--sh-fg); font-size: clamp(17px, 1.35vw, 21px); line-height: 1.42; letter-spacing: -.01em; text-wrap: pretty; }
.b-sub, .b-caption, .b-caveat { color: var(--sh-fg-2); font-size: 14px; line-height: 1.55; }
.b-caption { margin-top: 14px; font-size: 13px; color: var(--sh-fg-3); }
.b-caveat { margin-top: 18px; font-size: 13px; color: var(--sh-fg-3); }
.b-closing { max-width: 34em; color: var(--sh-fg); font-size: clamp(17px, 1.4vw, 22px); line-height: 1.4; letter-spacing: -.01em; }
.b-disclaimer { max-width: 62em; color: var(--sh-fg-3); font-size: 13px; line-height: 1.5; }
.b-count { font: 500 11px/1 var(--sh-font-mono); letter-spacing: .18em; color: var(--sh-fg-3); font-variant-numeric: tabular-nums; }
.b-count > span { color: var(--sh-gold-hi); }

/* Calls to action. */
.b-cta { display: flex; flex-wrap: wrap; gap: 10px; }
.b-links { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 14px; }
.b-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--sh-gold-hi); font: 600 14px/1.2 var(--sh-font-sans); text-decoration: none; border-bottom: 1px solid rgb(229 198 92 / 35%); }
.b-link:hover, .b-link:focus-visible { color: var(--sh-fg); border-color: var(--sh-fg); }
.b-link > span[aria-hidden] { transition: transform var(--sh-dur-2, 320ms) var(--b-ease); }
.b-link:hover > span[aria-hidden] { transform: translateX(3px); }
.sh-beat a:not(.sh-btn):not(.b-link):not(.b-back) { color: var(--sh-gold-hi); }

/* Glass panels (never wider than 70% of the viewport). */
.b-glass, .b-flow > .b-panel { max-width: min(70vw, 1080px); padding: clamp(20px, 2.2vw, 34px); border: 1px solid var(--b-panel-line); border-radius: 20px; background: var(--b-panel); box-shadow: 0 30px 80px -40px rgb(0 0 0 / 80%), inset 0 1px rgb(255 255 255 / 5%); }
html[data-tier="full"] .b-glass, html[data-tier="full"] .b-flow > .b-panel { -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1); background: rgb(9 11 15 / 48%); }

/* Cards (KPI shows, crypto, responsible design). */
.b-cards { display: grid; grid-template-columns: repeat(var(--b-cols, 5), minmax(0, 1fr)); gap: 12px; margin: 22px 0 0; padding: 0; list-style: none; }
.b-cards--three { --b-cols: 3; max-width: 980px; }
.b-card { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 20px 18px 18px; border: 1px solid var(--b-panel-line); border-radius: 16px; background: rgb(12 14 19 / 70%); }
.b-card::before { content: ""; position: absolute; left: 18px; right: 18px; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--sh-gold), transparent); opacity: .7; }
.b-card.is-teal::before { background: linear-gradient(90deg, transparent, var(--sh-teal), transparent); }
.b-card__num { -webkit-text-stroke: .4px currentColor; font: 400 clamp(34px, 2.7vw, 50px)/.98 var(--sh-font-num); letter-spacing: -.03em; color: var(--sh-fg); text-wrap: balance; }
.b-card.is-teal .b-card__num { color: #bff5ec; }
.b-card__line { margin-top: 12px; color: var(--sh-fg-2); font-size: 13.5px; line-height: 1.5; flex: 1; }
.b-card .sh-src { margin-top: 14px; font-size: 9.5px; }

/* Flow layout (default): steps stacked with room for the stage to react. */
.sh-beat { padding: var(--b-top) var(--sh-gutter) 60px; }
.sh-beat > .b-frame, .sh-beat > .b-deck > .b-frame { position: relative; isolation: isolate; }
.b-steps { margin: 34px 0 0; padding: 0; list-style: none; }
.b-steps > .b-step { margin: 0 0 clamp(56px, 12vh, 120px); }
.b-flow { margin-top: clamp(40px, 10vh, 110px); }
.b-foot { display: grid; gap: 16px; margin-top: 26px; }
[data-b-from]:not(.is-shown) { opacity: .92; }
html.b-live [data-b-from] { opacity: 0; transform: translateY(12px); transition: opacity .5s var(--b-ease), transform .7s var(--b-ease); }
html.b-live [data-b-from].is-shown { opacity: 1; transform: none; }

/* Deck layout: a sticky frame, steps stacked in one grid cell. */
/* --b-hold stretches every step a little so its copy can be read before the next one swaps in. */
html.b-live [data-b-deck] { height: calc(var(--b-n, 1) * var(--b-step-h, 40svh) * var(--b-hold, 1.35) + 100svh); }
@media (max-width: 767px) { html.b-live [data-b-deck] { --b-hold: 1.15; } }
html.b-live .sh-beat[data-b-deck] { padding: 0; }
html.b-live .sh-beat--how, html.b-live .sh-beat--tech { padding: 0 0 40px; }
html.b-live .sh-beat > .b-flow { margin-inline: var(--sh-gutter); }
html.b-live [data-b-deck] > .b-frame { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: clip; isolation: isolate; padding: var(--b-top) var(--sh-gutter) var(--b-bottom); display: grid; }
:where(html.b-live [data-b-deck]) > .b-frame { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto; }
html.b-live [data-b-deck] .b-steps { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; margin: 0; align-self: center; }
html.b-live [data-b-deck] .b-steps > .b-step { min-width: 0; }
/* Inactive steps stay focusable (opacity, not visibility): Tab into one and
   sh-steps.js scrolls it on stage. They never take pointer input. */
html.b-live [data-b-deck] .b-steps > .b-step { grid-area: 1 / 1; margin: 0; opacity: 0; pointer-events: none; transform: translate3d(0, 34px, 0); transition: opacity .45s var(--b-ease), transform .8s var(--b-ease); }
html.b-live [data-b-deck] .b-steps > .b-step.is-past { transform: translate3d(0, -34px, 0); }
html.b-live [data-b-deck] .b-steps > .b-step.is-active { opacity: 1; pointer-events: auto; transform: none; transition-delay: .08s, .08s; }

/* Step 1 of a deck opens with its head; later steps keep a lighter head. */
html.b-live [data-b-deck] .sh-beat__lede { transition: opacity .5s var(--b-ease); }
html.b-live .sh-beat[data-b-step]:not([data-b-step="1"]) [data-b-deck] .sh-beat__lede,
html.b-live .sh-beat[data-b-deck][data-b-step]:not([data-b-step="1"]) .sh-beat__lede { opacity: .55; }

/* Atmosphere owned by B: faint light, never a fill. */
.b-frame::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(60% 50% at 70% 40%, rgb(212 175 55 / 5%), transparent 70%); }
.b-alias { position: absolute; top: 0; left: 0; width: 1px; height: 1px; }

/* Footnote back links and marks. */
.sh-beat sup a { padding: 0 .1em; }
.sh-beat sup a + a::before { content: " "; }

/* Beat 17 #questions: straight answers under the lamps, then the sources. */
.sh-beat--questions { padding-bottom: 120px; }
.b-qa { max-width: min(70vw, 980px); margin-top: 0; }
.b-faq { margin-top: 30px; padding: 6px clamp(18px, 2vw, 30px); border: 1px solid var(--b-panel-line); border-radius: 20px; background: rgb(9 11 15 / 70%); }
html[data-tier="full"] .b-faq { -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); background: rgb(9 11 15 / 55%); }
.b-q + .b-q { border-top: 1px solid var(--sh-line); }
.b-q summary { position: relative; display: flex; align-items: center; min-height: 64px; padding: 16px 44px 16px 0; cursor: pointer; list-style: none; font-size: clamp(17px, 1.4vw, 21px); font-weight: 600; letter-spacing: -.015em; }
.b-q summary::-webkit-details-marker { display: none; }
.b-q summary::after { content: "+"; position: absolute; right: 4px; top: 50%; width: 30px; height: 30px; margin-top: -15px; display: grid; place-items: center; border: 1px solid var(--sh-line-2); border-radius: 50%; color: var(--sh-gold-hi); font: 400 18px/1 var(--sh-font-sans); transition: transform .35s var(--b-ease); }
.b-q[open] summary::after { transform: rotate(45deg); }
.b-q summary:hover { color: var(--sh-gold-hi); }
.b-q > p { max-width: 46em; padding: 0 0 20px; color: var(--sh-fg-2); font-size: 15.5px; line-height: 1.65; }
.b-closing--qa { margin-top: 22px; font-size: 16px; color: var(--sh-fg-2); }
.b-closing--qa a { font-weight: 600; }
.sh-sources { margin-top: 36px; max-width: min(84vw, 1180px); }
.sh-sources summary { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; color: var(--sh-fg-2); font: 600 11px/1 var(--sh-font-mono); letter-spacing: .2em; text-transform: uppercase; }
.sh-sources summary:hover { color: var(--sh-fg); }
.b-notes { columns: 2 380px; column-gap: 40px; margin: 14px 0 0; padding: 0 0 0 1.6em; color: var(--sh-fg-3); font-size: 12px; line-height: 1.55; }
.b-notes li { break-inside: avoid; margin-bottom: 8px; padding-left: 4px; scroll-margin-top: 120px; }
.b-notes li::marker { color: var(--sh-gold); font-family: var(--sh-font-mono); }
.b-notes li:target { color: var(--sh-fg); }
.b-notes a { color: var(--sh-fg-2); text-decoration-color: rgb(255 255 255 / 25%); }
.b-back { display: inline-grid; place-items: center; min-width: 24px; min-height: 24px; color: var(--sh-gold-hi); text-decoration: none; }
@media (max-width: 767px) {
  .b-qa, .sh-sources { max-width: none; }
  .b-q summary { font-size: 16px; min-height: 56px; }
  .b-q > p { font-size: 14.5px; }
}

/* Phones, portrait: one step per screen, content in the lower part so the
   street stays visible above it; key HUD lines only. */
@media (max-width: 767px) {
  :root { --b-top: calc(var(--sh-nav-h, 56px) + 40px); --b-bottom: 146px; --b-xxl: min(18vw, 120px); --b-xl: min(15vw, 84px); }
  .b-head h2 { font-size: clamp(27px, 7.6vw, 36px); }
  .sh-beat__lede { font-size: 14.5px; }
  .b-line { font-size: 16px; }
  :where(.sh-beat) > :where(.sh-hud) { bottom: 78px; margin: -60px auto 0 var(--sh-gutter); padding-bottom: 0; font-size: 10px; align-items: flex-start; text-align: left; }
  .sh-beat .b-cta .sh-btn { min-height: 44px; padding: 0 16px; font-size: 13.5px; }
  html.b-live [data-b-deck] .b-steps { position: relative; }
  html.b-live [data-b-deck]:not([data-b-snap]) .b-steps > .b-step:not(.is-active) { position: absolute; left: 0; right: 0; top: 0; }
  html.b-live [data-b-deck] [data-b-from].b-closing:not(.is-shown) { display: none; }
  .sh-beat > .sh-hud .sh-hud__line:not(.is-key) { display: none; }
  .b-cards, .b-cards--three { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--sh-gutter) * -1); padding: 2px var(--sh-gutter) 6px; scrollbar-width: none; }
  .b-cards::-webkit-scrollbar { display: none; }
  .b-cards > .b-card { flex: 0 0 76%; scroll-snap-align: center; }
  .b-glass, .b-flow > .b-panel { max-width: none; border-radius: 16px; }
  html.b-live .sh-beat[data-b-step]:not([data-b-step="1"]) [data-b-deck] .sh-beat__lede,
  html.b-live .sh-beat[data-b-deck][data-b-step]:not([data-b-step="1"]) .sh-beat__lede { display: none; }
}

/* Short landscape phones use the flow, compressed to two columns. */
@media (max-height: 559px) and (orientation: landscape) {
  :root { --b-top: calc(var(--sh-nav-h, 48px) + 30px); --b-xxl: min(11vw, 96px); }
  .b-head h2 { font-size: 28px; }
  .b-steps > .b-step { margin-bottom: 48px; }
  :where(.sh-beat) > :where(.sh-hud) { font-size: 10px; }
  .sh-beat > .sh-hud .sh-hud__line:not(.is-key) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html.b-live [data-b-deck] .b-steps > .b-step, html.b-live [data-b-from] { transition: none; }
}
@media print { .sh-beat { padding: 24px 0; } .b-frame::before { display: none; } }