/* WSPRO V4.02 - BLAST JOB landing ("Press Start"), DESIGN-V4 section 6a. Scoped to .bb, .bb-foot and the public nav, which
   landing-bb.js tags with .bb-nav on mount (a class, not :has(), so a browser without :has() keeps the marquee). Dials: ENERGY 3 / RHYTHM 3 / MOTION 2. Nine compositions in sign-up-to-payout order: floating marquee +
   tilted deck, grass strip with tiles, zigzag trail on cream, groove on an inset band, staggered ruled rows, navy screen in a
   white cabinet, sticky-heading list, slot + hills, grass-deep coin door.

   One-line reasons (R-31):
   - Coin yellow is the single accent because coins are what the operator earns; it marks the next press and money, nothing else.
     The hero perk bullets are white tokens and the Simulation chip is a white face for the same reason: neither is a press or money.
   - The solid navy edge replaces blurred shadows because pressing a block is the product's gesture; the press distance equals
     the edge so the sink is believable. Press rules are declared after hover rules so the sink wins while the pointer is down.
   - A pressed key grows a transparent strip (::before) by its sink distance, and a hovered key by its lift, so a press that starts
     on the key's edge still releases on the key: the key moves, the hit box does not. The .btn keys cannot carry the strip
     (pages-extra.js clips every pressed .btn for its ripple, kept as built), so landing-bb.js delivers that click instead.
   - The hero keycaps are a fixed hit box (the anchor, which carries the depth) with a face that lifts and sinks, because Chrome
     drops the click when a control inside the 3D phone transforms under the pointer.
   - Contact shadows appear only under the three floating objects (phone, deck plank, score board) so elevation means something.
   - Slots are recessed and keys are raised so state is readable by shape, not colour alone.
   - The nav is a lit light box because a cabinet's lamp sits in the marquee; it appears once per screen.
   - The lever is a groove with a coin knob because the three send modes are one choice on one scale.
   - The trail (dotted path, round flags) repeats on landing, wizard and onboarding so the visitor learns the vocabulary once;
     in the night theme the path, the mobile rail, the risk cells and the coin slot are drawn in --ink-3 because the navy edge
     colour is invisible on the night sky.
   - The board strip stays grass because it is the ground the hero stands on; its figures sit on white tiles because white on
     grass fails contrast (2.8:1). The near hill always takes the colour of the band under it so there is no seam in either theme.
   - The phone keeps its iOS screen because it is a labelled simulation of the real app, not decoration. Its queue runs on its
     own (the owner kept it): it is labelled "Simulation", has a real Pause switch, and idles under reduced motion. The filled
     blue stays #0a66e0 in both themes because white text needs it (the lighter night blue is for text on black only).
   - The hero keycaps are sky, white, grass, white (never coin) because the hero already has its one coin press, the start button.
   - The feature ledger is ruled rows with no cards because six equal boxes would flatten the hierarchy; it is the calm beat.
   - The payout strip is a ticket because it is a real receipt of where money can go; the closing coin rests on its slot after
     the drop (it does not vanish) so the moment is still legible to anyone who missed the animation.
   - Every control is at least 44px tall and wide at every width, tablets included (R-03), so the nav keys are 44px, not the 36
     and 40px the spec lists. Where four 44px keys cannot sit beside the lantern, the theme key and the start button (<= 480px)
     the language rail folds into one 44px key that opens a tray of 44px rows: a key you can miss is not a key.
   - Under 961px the bezel sits in the flow with the phone's aspect ratio and the keycap plank follows it in the flow (not pinned
     at a fixed offset), so the plank can hold any label length in any language: two columns while they fit, one column at
     <= 460px; nothing is clipped and nothing is stretched.
   - Fredoka for display because it is rounded like the blocks; Nunito for body because it stays legible at 13 to 15px.
   - Radii follow the S/M/L/XL ladder (10/14/18/28) so inputs, keys, cards and hero blocks stay distinguishable.
   - Dark mode is a night sky, not grey, so both themes are the same cabinet at different hours.
   Motion: transform and opacity only, every animation has a user trigger or is a one-time entrance, nothing loops. */

/* ---------- tokens (declared in scope, never on :root) ---------- */
.bb, .bb-foot, .site-nav-wrap.bb-nav {
  --cab-key: #ffffff; --cab-screen: #ffffff; --cab-screen-navy: #13213f;
  --cab-marquee: linear-gradient(180deg, #8ccfff 0%, #63bbff 100%);
  --cab-lamp: inset 0 2px 0 rgba(255, 255, 255, .55);
  --cab-lamp-coin: inset 0 2px 0 rgba(255, 255, 255, .55), inset 0 -3px 0 rgba(185, 127, 0, .35);
  --cab-slot: inset 0 3px 0 rgba(19, 33, 63, .12);
  --cab-floor: 0 24px 30px -18px rgba(19, 33, 63, .35);
  --cab-edge-2: 0 2px 0 var(--arc-edge); --cab-edge-3: 0 3px 0 var(--arc-edge); --cab-edge-4: 0 4px 0 var(--arc-edge);
  --cab-edge-6: 0 6px 0 var(--arc-edge); --cab-edge-8: 0 8px 0 var(--arc-edge);
  --arc-grass-low: #d8f3d3;
  --press: cubic-bezier(.3, 1.6, .5, 1); --snap: cubic-bezier(.3, 1.4, .45, 1); --rise: cubic-bezier(.2, 1.2, .4, 1);
  --sky-a: #63bbff; --sky-b: #cdeaff;
  --night-line: #93a5c9; /* the visible line colour for paths and outlines in the night theme */
}
:root[data-theme="dark"] .bb, :root[data-theme="dark"] .bb-foot, :root[data-theme="dark"] .site-nav-wrap.bb-nav {
  --cab-key: #1a2d5c; --cab-screen: #14244a; --cab-screen-navy: #050b1a;
  --cab-marquee: linear-gradient(180deg, #1d3a73 0%, #10204a 100%);
  --cab-lamp: inset 0 2px 0 rgba(255, 255, 255, .12);
  --cab-slot: inset 0 3px 0 rgba(0, 0, 0, .35);
  --cab-floor: 0 24px 30px -18px rgba(0, 0, 0, .6);
  --arc-grass-low: #12301f;
  --sky-a: #0b1730; --sky-b: #1d3a73;
}

.bb { overflow-x: clip; }
.bb-wrap { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: var(--gutter); }
.bb h2 { font-size: clamp(30px, 4.2vw, 50px); line-height: 1.08; }
.bb-head p { margin-top: 14px; color: var(--ink-2); font-weight: 600; font-size: 17px; max-width: 36em; }
.bb .num, .bb-fig b, .bb-flag, .bb-digits, .bb-out-meta dd { font-variant-numeric: tabular-nums; }

/* ---------- 1. nav: the marquee ---------- */
.site-nav-wrap.bb-nav { background: var(--sky-a); }
.site-nav-wrap.bb-nav .site-nav { background: var(--cab-key); border: 3px solid var(--arc-edge); border-radius: 18px; box-shadow: var(--cab-edge-4); padding: 8px 8px 8px 14px; gap: 10px; flex-wrap: nowrap; -webkit-backdrop-filter: none; backdrop-filter: none; }
.site-nav-wrap.bb-nav .site-nav::before { display: none; }
.site-nav-wrap.bb-nav .spacer { min-width: 0; }
.site-nav-wrap.bb-nav .brand { color: var(--ink); min-height: 44px; }
.site-nav-wrap.bb-nav .site-links { margin-left: 4px; gap: 2px; }
.site-nav-wrap.bb-nav .site-links a { display: inline-flex; align-items: center; min-height: 44px; font: 800 14.5px var(--font); color: var(--ink); padding: 0 10px; border-radius: 10px; }
.site-nav-wrap.bb-nav .site-links a:hover { background: var(--inset); color: var(--ink); }
/* language rail: four 44px keys in one recessed track (folds into .bb-lang at <= 480px, see the widths block) */
.site-nav-wrap.bb-nav .lang-switch { background: var(--inset); border: 2px solid var(--arc-edge); border-radius: 12px; padding: 3px; gap: 3px; box-shadow: var(--cab-slot); }
.site-nav-wrap.bb-nav .lang-switch button { --sink: 2px; position: relative; min-height: 44px; min-width: 44px; padding: 0 8px; border-radius: 8px; font: 700 12.5px var(--font); color: var(--ink-2); box-shadow: none; transition: transform .18s var(--press), box-shadow .18s; }
.site-nav-wrap.bb-nav .lang-switch button[aria-pressed="true"] { background: var(--cab-key); color: var(--ink); box-shadow: inset 0 0 0 2px var(--arc-edge), var(--cab-edge-2); }
/* theme key 44x44 */
.site-nav-wrap.bb-nav .theme-btn { --sink: 3px; position: relative; width: 44px; height: 44px; min-width: 44px; min-height: 44px; border-radius: 12px; background: var(--cab-key); border: 2.5px solid var(--arc-edge); box-shadow: var(--cab-edge-3); color: var(--ink); transition: transform .18s var(--press), box-shadow .18s; }
/* Log in = white keycap 44, Sign up = start button 44 */
.site-nav-wrap.bb-nav .site-nav .btn-sm { --btn-h: 44px; padding: 0 16px; font-size: 15px; border-radius: 12px; border-width: 2.5px; transition: transform .18s var(--press), box-shadow .18s; }
.site-nav-wrap.bb-nav .site-nav .btn-secondary { --sink: 4px; background: var(--cab-key); color: var(--ink); box-shadow: var(--cab-edge-4); }
.site-nav-wrap.bb-nav .site-nav .btn-primary { --sink: 6px; border-width: 3px; border-radius: 16px; padding: 0 18px; font-size: 15px; box-shadow: var(--cab-edge-6), var(--cab-lamp-coin); }
@media (hover: hover) {
  .site-nav-wrap.bb-nav .lang-switch button:hover { color: var(--ink); }
  .site-nav-wrap.bb-nav .theme-btn:hover { transform: translateY(-2px); box-shadow: 0 5px 0 var(--arc-edge); background: var(--cab-key); }
  .site-nav-wrap.bb-nav .site-nav .btn-secondary:hover { transform: translateY(-2px); box-shadow: var(--cab-edge-6); }
  .site-nav-wrap.bb-nav .site-nav .btn-primary:hover { transform: translateY(-2px); box-shadow: var(--cab-edge-8), var(--cab-lamp-coin); }
}
/* press (after the hover block on purpose: equal specificity, the later rule wins while both match) */
.site-nav-wrap.bb-nav .lang-switch button:active { transform: translateY(2px); box-shadow: inset 0 0 0 2px var(--arc-edge); transition-duration: .09s; }
.site-nav-wrap.bb-nav .theme-btn:active { transform: translateY(3px); box-shadow: 0 0 0 var(--arc-edge); transition-duration: .09s; }
.site-nav-wrap.bb-nav .site-nav .btn-secondary:active { transform: translateY(4px); box-shadow: 0 0 0 var(--arc-edge); background: var(--cab-key); transition-duration: .09s; }
.site-nav-wrap.bb-nav .site-nav .btn-primary:active { transform: translateY(6px); box-shadow: 0 0 0 var(--arc-edge), var(--cab-lamp-coin); transition-duration: .09s; }
/* the hit strip (see the header) on the rail keys and the theme key; the two .btn keys get it from landing-bb.js instead,
   because pages-extra.js clips every pressed .btn for its ripple */
.site-nav-wrap.bb-nav .lang-switch button:hover::before, .site-nav-wrap.bb-nav .lang-switch button:active::before,
.site-nav-wrap.bb-nav .theme-btn:hover::before, .site-nav-wrap.bb-nav .theme-btn:active::before,
.site-nav-wrap.bb-nav .bb-lang-key:hover::before, .site-nav-wrap.bb-nav .bb-lang-key:active::before {
  /* measured from the padding box, so the 6px covers the border, the 2px lift and rounding */
  content: ''; display: block; position: absolute; left: 0; right: 0; top: calc(-6px - var(--sink, 0px)); bottom: -6px; height: auto;
  background: none; border: 0; border-radius: 0; box-shadow: none; pointer-events: auto;
}
/* power-on: once per page load (class added by the mount, removed after the sway) */
.site-nav-wrap.bb-power .site-nav { animation: bb-power .48s var(--rise) backwards; }
.site-nav-wrap.bb-power .brand-mark.lantern svg { animation: bb-sway 1.2s ease-in-out .12s 1; }
@keyframes bb-power { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
@keyframes bb-sway { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(10deg); } 60% { transform: rotate(-7deg); } }

/* ---------- 2. hero: copy left, the phone on its deck right ---------- */
.bb-hero { position: relative; overflow-x: clip; background: linear-gradient(180deg, var(--sky-a) 0%, var(--sky-b) 100%); padding: 24px 0 0; scroll-margin-top: 120px; }
.bb-hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 40px; align-items: center; padding-bottom: 118px; position: relative; z-index: 1; }
.bb-title { font-size: clamp(36px, 5.4vw, 66px); line-height: 1.04; max-width: 13em; color: var(--arc-navy); }
:root[data-theme="dark"] .bb-title { color: #eaf2ff; }
/* Devanagari matras need headroom that the Latin line-heights (1.04 / 1.08) do not leave */
.bb-title:lang(hi) { line-height: 1.24; }
.bb h2:lang(hi) { line-height: 1.2; }
/* the lede is a shade darker than --ink-2 because its first line can sit on the top of the sky gradient (5.5:1 there) */
.bb-lede { margin-top: 18px; max-width: 34em; font-size: 18px; font-weight: 600; color: #2e3d5c; }
:root[data-theme="dark"] .bb-lede { color: #bccbe6; }
.bb-actions { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 14px; }
.bb-perks { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; font-weight: 700; color: var(--ink); }
:root[data-theme="dark"] .bb-perks { color: #eaf2ff; }
.bb-perks li { display: flex; align-items: center; gap: 8px; }
.bb-coin { width: 22px; height: 22px; flex: none; }
.bb-coin-lg { width: 34px; height: 34px; }
.bb-coin-sm { width: 18px; height: 18px; }
.bb-token circle { fill: var(--cab-key); }
:root[data-theme="dark"] .bb-token circle { stroke: #eaf2ff; }
.bb-cloud { position: absolute; background: #fff; border-radius: 40px; opacity: .9; }
.bb-cloud::before, .bb-cloud::after { content: ''; position: absolute; background: inherit; border-radius: 50%; }
.bb-cloud-a { width: 120px; height: 34px; top: 120px; left: 4%; }
.bb-cloud-a::before { width: 54px; height: 54px; left: 18px; top: -26px; }
.bb-cloud-a::after { width: 40px; height: 40px; left: 62px; top: -18px; }
.bb-cloud-b { width: 90px; height: 26px; top: 70px; right: 8%; }
.bb-cloud-b::before { width: 42px; height: 42px; left: 14px; top: -20px; }
.bb-cloud-b::after { width: 30px; height: 30px; left: 48px; top: -14px; }
:root[data-theme="dark"] .bb-cloud { background: #29427a; opacity: .5; }
.bb-hills, .bb-ground { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 90px; display: block; }
/* two hills: the far one lighter, the near one in the colour of the band below it (no seam, both themes) */
.bb-hills .bb-hill-far { fill: #6cc46f; }
.bb-hills .bb-hill-near { fill: #4caf50; }
.bb-ground .bb-hill-far { fill: #4caf50; }
.bb-ground .bb-hill-near { fill: #2e7a32; }
:root[data-theme="dark"] .bb-hills .bb-hill-far { fill: #357a3a; }
:root[data-theme="dark"] .bb-hills .bb-hill-near { fill: #2b6e2f; }
:root[data-theme="dark"] .bb-ground .bb-hill-far { fill: #2b6e2f; }
:root[data-theme="dark"] .bb-ground .bb-hill-near { fill: #1c4d20; }

/* start button (coin, 56px) and white keycap (56px): the hero and the closing use the same two presses */
.bb .btn-lg { --btn-h: 56px; --sink: 6px; padding: 0 24px; font-size: 18px; border-radius: 16px; border-width: 3px; transition: transform .18s var(--press), box-shadow .18s var(--press); }
.bb .btn-lg.btn-primary { box-shadow: var(--cab-edge-6), var(--cab-lamp-coin); }
.bb .btn-lg.btn-secondary { background: var(--cab-key); color: var(--ink); border-width: 2.5px; border-radius: 14px; font-size: 16px; box-shadow: var(--cab-edge-6); }
.bb .btn-primary:focus-visible, .site-nav-wrap.bb-nav .btn-primary:focus-visible { outline-color: var(--arc-navy); }
@media (hover: hover) {
  .bb .btn-lg:hover { transform: translateY(-2px); }
  .bb .btn-lg.btn-primary:hover { box-shadow: var(--cab-edge-8), var(--cab-lamp-coin); }
  .bb .btn-lg.btn-secondary:hover { box-shadow: var(--cab-edge-8); background: var(--cab-key); }
}
.bb .btn-lg:active { transform: translateY(6px); transition-duration: .09s; }
.bb .btn-lg.btn-primary:active { box-shadow: 0 0 0 var(--arc-edge), var(--cab-lamp-coin); }
.bb .btn-lg.btn-secondary:active { box-shadow: 0 0 0 var(--arc-edge); background: var(--cab-key); }
/* hero copy rises once at power-on */
.bb.bb-boot .bb-hero-copy > * { animation: bb-rise .55s var(--rise) backwards; }
.bb.bb-boot .bb-hero-copy > :nth-child(2) { animation-delay: 55ms; }
.bb.bb-boot .bb-hero-copy > :nth-child(3) { animation-delay: 110ms; }
.bb.bb-boot .bb-hero-copy > :nth-child(4) { animation-delay: 165ms; }
@keyframes bb-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

/* ---------- iPhone (3D), as built ----------
   One phone in a real perspective: titanium frame with thickness (stacked layers pushed back in Z), the screen in iOS language
   (large title, segmented control, inset grouped list, switch, filled button, home bar). It turns toward the pointer; the soft
   floor shadow is its contact shadow (floating object 1 of 3). */
.bb-stage { justify-self: center; position: relative; width: min(100%, 360px); perspective: 1500px; padding: 18px 0 40px; }
/* the control deck: a plank lying under the phone, tilted away (floating object 2 of 3); a pseudo-element so the keycaps keep their Z */
.bb-stage::before { content: ''; position: absolute; left: -56px; right: -56px; bottom: 18px; height: 44%; background: var(--cab-key); border: 3px solid var(--arc-edge); border-radius: 24px; box-shadow: var(--cab-edge-8), var(--cab-floor); transform: rotateX(56deg) translateZ(-40px); transform-origin: 50% 100%; }
.bb-phone { --ry: -14deg; --rx: 5deg; position: relative; width: min(100%, 300px); margin-inline: auto; aspect-ratio: 300 / 614; transform-style: preserve-3d; transform: rotateY(var(--ry)) rotateX(var(--rx)); transition: transform .6s cubic-bezier(.2, 1.3, .4, 1); }
.bb-phone::before, .bb-phone::after { content: ''; position: absolute; inset: 0; border-radius: 52px; background: #1c1d22; }
.bb-phone::before { transform: translateZ(-9px); background: #2a2c33; }
.bb-phone::after { transform: translateZ(-18px); background: #0e0f12; }
.bb-bezel { position: absolute; inset: 0; border-radius: 52px; padding: 11px; background: linear-gradient(145deg, #dfe2e8 0%, #8d929c 28%, #3a3d45 52%, #b9bdc6 100%); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .35), inset 0 0 0 5px #0b0c0f; }
.bb-side { position: absolute; width: 4px; border-radius: 2px; background: linear-gradient(90deg, #5a5e68, #c9ccd4); }
.bb-side-a { left: -3px; top: 118px; height: 34px; }
.bb-side-b { left: -3px; top: 170px; height: 56px; }
.bb-side-c { right: -3px; top: 190px; height: 84px; }
/* --ios-blue is the text blue (lighter at night so it reads on black); --ios-fill is the filled blue under white text and stays
   #0a66e0 in both themes (white on it 5.3:1; on the lighter night blue it would be 2.8:1) */
.bb-ios { --ios-bg: #f2f2f7; --ios-card: #fff; --ios-ink: #111114; --ios-sub: #6b6b73; --ios-line: rgba(60, 60, 67, .16); --ios-blue: #0a66e0; --ios-fill: #0a66e0; position: relative; height: 100%; border-radius: 42px; overflow: hidden; background: var(--ios-bg); color: var(--ios-ink); padding: 44px 14px 14px; display: flex; flex-direction: column; gap: 0; font-family: -apple-system, 'SF Pro Text', var(--font), system-ui, sans-serif; }
:root[data-theme="dark"] .bb-ios { --ios-bg: #000; --ios-card: #1c1c1e; --ios-ink: #f5f5f7; --ios-sub: #a1a1aa; --ios-line: rgba(255, 255, 255, .14); --ios-blue: #4d9bff; }
.bb-island { position: absolute; top: 11px; left: 50%; width: 88px; height: 26px; margin-left: -44px; border-radius: 16px; background: #000; z-index: 2; }
.bb-status { position: absolute; top: 14px; left: 26px; right: 22px; display: flex; justify-content: space-between; align-items: center; font-size: 13px; z-index: 1; }
.bb-status b { font-weight: 600; width: 74px; }
/* the "Simulation" label is a real label (what the screen is), drawn as a white chip with an ink ring: not a press, so no coin */
.bb-sim { background: var(--ios-card); color: var(--ios-ink); box-shadow: inset 0 0 0 1.5px var(--ios-ink); border-radius: 6px; padding: 1px 7px; font-size: 11px; font-weight: 800; }
.bb-large { font: 700 22px/1.05 -apple-system, 'SF Pro Display', var(--font-display), sans-serif; letter-spacing: -.02em; margin: 10px 0 0; color: var(--ios-ink); }
.bb-pane { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 9px; }
.bb-pane[hidden] { display: none; }
.bb-widget { position: relative; background: var(--ios-fill); color: #fff; border-radius: 20px; padding: 12px 14px 12px; display: grid; gap: 2px; overflow: hidden; }
.bb-widget-coin { background: var(--arc-coin); color: #13213f; }
.bb-w-top { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; font-weight: 600; opacity: .92; }
.bb-widget b { font: 700 28px/1.1 -apple-system, 'SF Pro Display', var(--font-display), sans-serif; letter-spacing: -.02em; color: inherit; }
.bb-bars { height: 34px; margin-top: 6px; display: grid; grid-template-columns: repeat(16, 1fr); gap: 3px; align-items: end; }
.bb-bars i { display: block; border-radius: 3px; background: rgba(255, 255, 255, .28); height: 8%; transition: height .35s cubic-bezier(.3, 1.4, .5, 1); }
.bb-bars i.on { background: #fff; }
.bb-seg { display: grid; grid-template-columns: repeat(3, 1fr); background: rgba(118, 118, 128, .18); border-radius: 10px; padding: 2px; }
/* pace keys 44px tall (the large segmented control) so every control on the phone is a full tap target */
.bb-key { border: 0; background: none; min-height: 44px; border-radius: 8px; font: 600 12px/1 -apple-system, var(--font), sans-serif; color: var(--ios-ink); cursor: pointer; padding: 0 2px; transition: background .25s, box-shadow .25s; }
.bb-key[aria-checked="true"] { background: var(--ios-card); box-shadow: 0 2px 6px rgba(0, 0, 0, .18), 0 0 0 .5px rgba(0, 0, 0, .06); }
.bb-log { list-style: none; margin: 0; padding: 0; background: var(--ios-card); border-radius: 18px; flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.bb-row { display: grid; grid-template-columns: 28px 1fr auto; gap: 10px; align-items: center; padding: 9px 14px; border-top: .5px solid var(--ios-line); animation: bb-pop .4s cubic-bezier(.3, 1.5, .5, 1); }
.bb-row:first-child { border-top: 0; }
/* delivered mark: navy check on the iOS green (7.4:1; a white check on it is 2.2:1) */
.bb-tick { width: 26px; height: 26px; border-radius: 50%; background: #34c759; color: #13213f; display: grid; place-items: center; }
.bb-tick .ico { width: 15px; height: 15px; stroke-width: 3; }
.bb-rt { display: grid; font-weight: 600; font-size: 14px; color: var(--ios-ink); }
.bb-rt small { font-size: 12px; color: var(--ios-sub); font-weight: 500; }
.bb-row-empty { display: block; font-size: 14px; color: var(--ios-sub); padding: 12px 14px; }
@keyframes bb-pop { from { opacity: 0; transform: translateY(-12px) scale(.97); } to { opacity: 1; transform: none; } }
.bb-group { background: var(--ios-card); border-radius: 14px; padding: 8px 14px; }
.bb-switchrow { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: var(--ios-ink); }
.bb-group.bb-switchrow { padding-block: 2px; }
/* the switch keeps its 51x31 iOS look (drawn by ::before) inside a 51x44 hit box */
.bb-switch { flex: none; position: relative; width: 51px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; }
.bb-switch::before { content: ''; position: absolute; left: 0; top: 6.5px; width: 51px; height: 31px; border-radius: 16px; background: rgba(120, 120, 128, .32); transition: background .25s; }
.bb-switch i { position: absolute; top: 8.5px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(0, 0, 0, .3); transition: transform .3s cubic-bezier(.3, 1.4, .5, 1); }
.bb-switch[aria-checked="true"]::before { background: #34c759; }
.bb-switch[aria-checked="true"] i { transform: translateX(20px); }
/* Press feedback by colour only: a transform or filter on a control inside the 3D-rotated phone moves its hit region in Chrome
   while the pointer is down, so mouseup lands on the pane and the click never fires (found in the headless click-through). */
.bb-blue { min-height: 46px; border: 0; border-radius: 14px; background: var(--ios-fill); color: #fff; font: 600 16px -apple-system, var(--font), sans-serif; cursor: pointer; transition: background .15s; }
.bb-blue:active { background: color-mix(in srgb, var(--ios-fill) 84%, #000); }
.bb-list { list-style: none; margin: 0; padding: 0; background: var(--ios-card); border-radius: 14px; overflow: hidden; }
.bb-list li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 11px 14px; border-top: .5px solid var(--ios-line); font-size: 13px; font-weight: 600; }
.bb-list li:first-child { border-top: 0; }
.bb-list li span { color: var(--ios-sub); }
.bb-list li span small { display: block; font-size: 11px; font-weight: 500; }
.bb-list li b { color: var(--ios-ink); font-weight: 700; text-align: right; }
.bb-sec { font-size: 12px; font-weight: 600; color: var(--ios-sub); padding: 2px 6px 0; }
.bb-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.bb-chips li { background: var(--ios-card); border-radius: 10px; padding: 6px 10px; font-size: 12.5px; font-weight: 700; color: var(--ios-ink); }
.bb-slide { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ios-ink); padding: 2px 0 2px; }
.bb-group input[type="range"] { width: 100%; accent-color: var(--ios-blue); height: 44px; margin: 0; }
.bb-fine { font-size: 11px; line-height: 1.35; color: var(--ios-sub); padding: 0 6px; }
.bb-tabbar { display: grid; grid-template-columns: repeat(3, 1fr); border-top: .5px solid var(--ios-line); margin: 8px -14px 0; padding: 6px 10px 0; }
.bb-tabbar button { border: 0; background: none; display: grid; justify-items: center; gap: 1px; min-height: 44px; font: 600 10.5px -apple-system, var(--font), sans-serif; color: var(--ios-sub); cursor: pointer; }
.bb-tabbar button .ico { width: 22px; height: 22px; }
.bb-tabbar button[aria-selected="true"] { color: var(--ios-blue); }
.bb-tabbar button:focus-visible { outline: 3px solid var(--ios-blue); outline-offset: -2px; border-radius: 10px; }
.bb-home { align-self: center; width: 104px; height: 4px; border-radius: 2px; background: var(--ios-ink); opacity: .85; margin-top: 6px; }
.bb-glare { position: absolute; inset: 11px; border-radius: 42px; pointer-events: none; background: linear-gradient(115deg, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, 0) 38%); }
.bb-floor { position: absolute; left: 50%; bottom: 8px; width: 70%; height: 30px; margin-left: -35%; border-radius: 50%; background: radial-gradient(closest-side, rgba(19, 33, 63, .45), rgba(19, 33, 63, 0)); transform: translateX(-6%); pointer-events: none; }
.bb-key:focus-visible, .bb-switch:focus-visible, .bb-blue:focus-visible { outline: 3px solid var(--ios-blue); outline-offset: 2px; }

/* 3D keycaps around the phone: real shortcuts to the sections below. Faces sky / white / grass / white: never coin, the hero's
   one coin press is the start button. Edge 7px, so a press sinks 7px. The anchor (.bb-3d) is the hit box and carries the depth;
   the face (.bb-cap) is what lifts and sinks, so the hit box never moves under the pointer. */
.bb-keys { position: absolute; inset: 0; transform-style: preserve-3d; pointer-events: none; }
.bb-3d { position: absolute; pointer-events: auto; display: block; border-radius: 14px; text-decoration: none; transform: translateZ(var(--z, 70px)); }
.bb-3d:hover { text-decoration: none; }
.bb-cap { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 16px; border-radius: 14px; border: 2.5px solid var(--arc-edge); background: var(--cab-key); color: var(--ink); font: 600 15px var(--font-display); white-space: nowrap; box-shadow: 0 7px 0 var(--arc-edge); transition: transform .18s var(--press), box-shadow .18s var(--press); }
.bb-cap .ico { width: 20px; height: 20px; stroke-width: 2.4; }
.bb-3d:focus-visible { outline: 3px solid var(--arc-navy); outline-offset: 3px; }
:root[data-theme="dark"] .bb-3d:focus-visible { outline-color: #fff; }
/* key 1 sits at the phone's top-left corner (over the frame, left of the clock) so it never covers the brand title */
.bb-3d-1 { --z: 84px; left: -78px; top: -4%; }
.bb-3d-2 { --z: 52px; left: -96px; top: 60%; }
.bb-3d-3 { --z: 104px; right: -92px; top: 33%; }
.bb-3d-4 { --z: 64px; right: -66px; top: 76%; }
.bb-3d-1 .bb-cap { background: var(--arc-sky); color: var(--arc-navy); box-shadow: 0 7px 0 var(--arc-edge), var(--cab-lamp); }
.bb-3d-3 .bb-cap { background: var(--arc-grass); color: var(--arc-navy); box-shadow: 0 7px 0 var(--arc-edge), var(--cab-lamp); }
@media (hover: hover) {
  .bb-3d:hover .bb-cap { transform: translateY(-2px); box-shadow: 0 9px 0 var(--arc-edge); }
  .bb-3d-1:hover .bb-cap, .bb-3d-3:hover .bb-cap { box-shadow: 0 9px 0 var(--arc-edge), var(--cab-lamp); }
}
.bb-3d:active .bb-cap, .bb-3d.down .bb-cap { transform: translateY(7px); box-shadow: 0 0 0 var(--arc-edge); transition-duration: .09s; }
.bb-3d-1:active .bb-cap, .bb-3d-1.down .bb-cap, .bb-3d-3:active .bb-cap, .bb-3d-3.down .bb-cap { box-shadow: 0 0 0 var(--arc-edge), var(--cab-lamp); }
/* the lifted face paints 2px above the anchor's projected quad: while hovered or pressed the anchor's hit area grows 4px all
   round so a press that starts on that strip still releases on the anchor */
.bb-3d:hover::before, .bb-3d:active::before { content: ''; position: absolute; inset: -4px; }
/* keycap entrance: 250ms after power-on each key drops onto the deck, 90ms apart; "backwards" so hover and press rules take over after */
.bb.bb-boot .bb-3d { animation: bb-keyin .6s var(--press) backwards; animation-delay: calc(250ms + var(--i, 0) * 90ms); }
@keyframes bb-keyin { from { opacity: 0; transform: translateZ(var(--z, 70px)) translateY(-40px) rotate(-6deg); } to { opacity: 1; transform: translateZ(var(--z, 70px)); } }

/* ---------- 3. board strip: grass ground, figures on score tiles ---------- */
.bb-board-strip { background: var(--arc-grass); border-bottom: 3px solid var(--arc-edge); padding: 22px 0 26px; }
:root[data-theme="dark"] .bb-board-strip { background: #2b6e2f; }
.bb-figs { display: flex; flex-wrap: wrap; gap: 14px; }
/* tiles share the row (flex-grow, capped) so a wrapped tile is never an orphan of a different width */
.bb-fig { flex: 1 1 150px; max-width: 460px; display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; background: var(--cab-key); border: 2.5px solid var(--arc-edge); border-radius: 14px; box-shadow: var(--cab-edge-4); padding: 12px 16px; }
.bb-fig b { font: 700 clamp(24px, 3vw, 34px) var(--font-display); color: var(--arc-navy); line-height: 1.1; grid-column: 1 / -1; }
:root[data-theme="dark"] .bb-fig b { color: #eaf2ff; }
.bb-fig span { grid-column: 1 / -1; font-weight: 700; font-size: 14px; color: var(--ink-2); }
.bb-fig-coin b { grid-column: 2; }
.bb-fig-coin .bb-coin { grid-column: 1; }

/* ---------- 4. level trail: zigzag path on cream ---------- */
.bb-world { padding: clamp(3.5rem, 8vw, 6rem) 0; background: var(--bg); }
.bb-path { list-style: none; margin: 56px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; position: relative; }
.bb-trail { position: absolute; inset: 20px 0 auto 0; width: 100%; height: 120px; pointer-events: none; }
.bb-trail path { fill: none; stroke: var(--arc-edge); stroke-width: 5; stroke-dasharray: 2 14; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: .85; }
:root[data-theme="dark"] .bb-trail path { stroke: var(--night-line); }
.bb-level { position: relative; display: grid; gap: 14px; align-content: start; }
.bb-level:nth-of-type(even) { margin-top: 64px; }
.bb-flag { width: 52px; height: 52px; border-radius: 50%; background: var(--arc-coin); border: 3px solid var(--arc-edge); box-shadow: var(--cab-edge-4), var(--cab-lamp); display: grid; place-items: center; font: 700 22px var(--font-display); color: var(--arc-navy); z-index: 1; transition: transform .35s var(--press); }
.bb-stage-card { background: var(--cab-key); border: 2.5px solid var(--arc-edge); border-radius: 14px; padding: 16px 18px 18px; box-shadow: var(--cab-edge-6); transition: transform .2s var(--press), box-shadow .2s var(--press); }
.bb-stage-card small { display: block; font: 600 13px var(--font-display); color: var(--ink-3); }
.bb-stage-card h3 { margin-top: 2px; font-size: 21px; }
.bb-stage-card p { margin-top: 8px; color: var(--ink-2); font-weight: 600; font-size: 15px; }
@media (hover: hover) {
  .bb-level:hover .bb-stage-card { transform: translateY(-2px); box-shadow: var(--cab-edge-8); }
  .bb-level:hover .bb-flag { transform: rotate(-8deg); }
}
.bb-level.bb-rv { transition-delay: calc((var(--n, 1) - 1) * 70ms); }

/* ---------- 5. difficulty lever: a groove on an inset band ---------- */
.bb-diff { padding: clamp(3.5rem, 8vw, 6rem) 0; background: var(--inset); border-block: 3px solid var(--arc-edge); }
.bb-diff-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 48px; align-items: start; }
.bb-lever { display: grid; gap: 22px; }
/* the rail is hardware you grab: a recessed groove on a solid edge (raised, not floating: the three contact shadows belong to
   the phone, the deck plank and the score board) */
.bb-rail { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); background: var(--inset); border: 3px solid var(--arc-edge); border-radius: 18px; padding: 6px; box-shadow: var(--cab-slot), var(--cab-edge-6); }
.bb-knob { position: absolute; top: 6px; bottom: 6px; left: 6px; width: calc((100% - 12px) / 3); border-radius: 12px; background: var(--arc-coin); border: 2.5px solid var(--arc-edge); box-shadow: var(--cab-edge-3), var(--cab-lamp-coin); transition: transform .35s cubic-bezier(.3, 1.4, .5, 1), box-shadow .09s; transform: translateX(calc(var(--p, 0) * 100%)); }
.bb-rail[data-pos="1"] { --p: 1; }
.bb-rail[data-pos="2"] { --p: 2; }
.bb-rail:has(.bb-notch:active) .bb-knob { transform: translateX(calc(var(--p, 0) * 100%)) translateY(2px); box-shadow: 0 1px 0 var(--arc-edge), var(--cab-lamp-coin); }
.bb-notch { position: relative; z-index: 1; min-height: 64px; background: none; border: 0; cursor: pointer; font: 600 clamp(15px, 2vw, 19px) var(--font-display); color: var(--ink); border-radius: 12px; }
.bb-notch[aria-checked="true"] { color: var(--arc-navy); font-weight: 800; }
.bb-notch:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.bb-notch[aria-checked="true"]:focus-visible { outline-color: var(--arc-navy); }
/* read-out = bezel screen: navy lip, cream well, white screen with a thin inner ring */
.bb-read { background: var(--inset); border: 3px solid var(--arc-edge); border-radius: 18px; padding: 6px; box-shadow: var(--cab-edge-6); }
.bb-read-in { background: var(--cab-screen); border-radius: 14px; box-shadow: inset 0 0 0 2px var(--line-2); padding: 20px 22px; animation: bb-swap .26s ease-out; }
@keyframes bb-swap { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.bb-read-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.bb-read-head h3 { font-size: 24px; }
.bb-risk { display: flex; align-items: center; gap: 6px; font-weight: 800; font-size: 14px; color: var(--ink); }
.bb-risk i { width: 26px; height: 12px; border-radius: 4px; border: 2px solid var(--arc-edge); background: transparent; }
:root[data-theme="dark"] .bb-risk i { border-color: var(--night-line); }
.bb-risk.ok i.on { background: #3fae5a; } .bb-risk.warn i.on { background: #f2b01e; } .bb-risk.bad i.on { background: #e5533d; }
.bb-read dl { margin: 16px 0 0; display: grid; gap: 12px; }
.bb-read dl div { display: grid; grid-template-columns: 11em 1fr; gap: 12px; padding-top: 12px; border-top: 2px dashed var(--line-2); }
.bb-read dt { font-weight: 700; color: var(--ink-3); font-size: 14px; }
.bb-read dd { margin: 0; font-weight: 700; color: var(--ink); }

/* ---------- 6. feature ledger: staggered ruled rows, no cards (the calm beat) ---------- */
.bb-feat { padding: clamp(3.5rem, 8vw, 6rem) 0; background: var(--bg); }
.bb-items { list-style: none; margin: 44px 0 0; padding: 0; display: grid; gap: 0; max-width: 880px; }
.bb-item { display: grid; grid-template-columns: 76px 1fr; gap: 22px; align-items: start; padding: 22px 0; border-top: 2.5px solid var(--ink); }
.bb-item:last-child { border-bottom: 2.5px solid var(--ink); }
.bb-item:nth-child(even) { margin-left: clamp(0px, 8vw, 96px); }
.bb-item:nth-child(3n) { margin-left: clamp(0px, 4vw, 48px); }
.bb-item.bb-rv { transition-delay: calc(var(--d, 0) * 55ms); }
.bb-ic { width: 60px; height: 60px; border-radius: 16px; background: var(--arc-sky); border: 2.5px solid var(--arc-edge); box-shadow: var(--cab-edge-4), var(--cab-lamp); display: grid; place-items: center; color: var(--arc-navy); transition: transform .2s var(--press), box-shadow .2s var(--press); }
.bb-ic .ico { width: 28px; height: 28px; }
@media (hover: hover) { .bb-item:hover .bb-ic { transform: translateY(-2px); box-shadow: var(--cab-edge-6), var(--cab-lamp); } }
.bb-item h3 { font-size: 22px; }
.bb-item p { margin-top: 6px; color: var(--ink-2); font-weight: 600; max-width: 42em; }

/* ---------- 7. score board: a navy screen in a white cabinet (floating object 3 of 3) ---------- */
.bb-earn { padding: clamp(3.5rem, 8vw, 6rem) 0; background: var(--inset); border-top: 3px solid var(--arc-edge); }
.bb-calc { margin-top: 36px; display: grid; grid-template-columns: 1fr 1.05fr; border: 3px solid var(--arc-edge); border-radius: 26px; overflow: hidden; box-shadow: var(--cab-edge-8), var(--cab-floor); background: var(--surface); }
.bb-calc-in { padding: 28px; display: grid; gap: 20px; align-content: center; }
.bb-calc-in .range-row .top { font: 600 15px var(--font-display); color: var(--ink); align-items: baseline; }
.bb-calc-in .range-row .top b { font-weight: 700; }
/* faders: a 6px navy track with a coin thumb in a 44px hit box; native keyboard stepping kept */
.bb-calc-in input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; margin: 0; background: transparent; accent-color: var(--arc-coin); cursor: pointer; }
.bb-calc-in input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: var(--arc-navy); }
.bb-calc-in input[type="range"]::-moz-range-track { height: 6px; border-radius: 3px; background: var(--arc-navy); }
.bb-calc-in input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 18px; margin-top: -6px; border-radius: 6px; background: var(--arc-coin); border: 2px solid var(--arc-edge); box-shadow: var(--cab-edge-2), var(--cab-lamp-coin); }
.bb-calc-in input[type="range"]::-moz-range-thumb { width: 28px; height: 18px; border-radius: 6px; background: var(--arc-coin); border: 2px solid var(--arc-edge); box-shadow: var(--cab-edge-2), var(--cab-lamp-coin); }
.bb-calc-in input[type="range"]:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
:root[data-theme="dark"] .bb-calc-in input[type="range"]::-webkit-slider-runnable-track { background: #2f4a80; }
:root[data-theme="dark"] .bb-calc-in input[type="range"]::-moz-range-track { background: #2f4a80; }
/* mode keys: a recessed track with three keys (the lever itself belongs to section 5 only) */
.bb-calc-in .seg { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--inset); border: 2px solid var(--arc-edge); border-radius: 12px; padding: 3px; gap: 3px; box-shadow: var(--cab-slot); }
.bb-calc-in .seg button { --sink: 2px; position: relative; min-height: 44px; padding: 0 6px; border-radius: 8px; font: 700 13.5px var(--font); color: var(--ink-2); box-shadow: none; transition: transform .18s var(--press), box-shadow .18s; }
.bb-calc-in .seg button[aria-pressed="true"] { background: var(--cab-key); color: var(--ink); box-shadow: inset 0 0 0 2px var(--arc-edge), var(--cab-edge-2); }
.bb-calc-in .seg button:active { transform: translateY(2px); box-shadow: inset 0 0 0 2px var(--arc-edge); transition-duration: .09s; }
.bb-calc-in .seg button:active::before {
  content: ''; display: block; position: absolute; left: 0; right: 0; top: calc(-6px - var(--sink, 0px)); bottom: -6px; height: auto;
  background: none; border: 0; border-radius: 0; box-shadow: none; pointer-events: auto;
}
/* the screen: navy behind a cream lip */
.bb-calc-out { background: var(--cab-screen-navy); color: #fff; padding: 36px; display: grid; gap: 14px; align-content: center; box-shadow: inset 0 0 0 6px var(--inset), inset 0 0 0 8px var(--line-2); }
.bb-out-k { font: 600 14px var(--font-display); letter-spacing: .04em; color: #bcd2ff; }
.bb-digits { font: 700 clamp(34px, 5vw, 58px) var(--font-display); color: var(--arc-coin); line-height: 1.05; overflow-wrap: anywhere; transform-origin: 0 50%; }
.bb-digits.settle { animation: bb-settle .18s var(--press); }
@keyframes bb-settle { 0% { transform: scale(1, .94); } 100% { transform: none; } }
.bb-out-meta { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; border-top: 2px dashed rgba(255, 255, 255, .25); padding-top: 14px; }
.bb-out-meta dt { font-size: 14px; font-weight: 600; color: #bcd2ff; }
.bb-out-meta dd { margin: 2px 0 0; font: 600 20px var(--font-display); color: #fff; }
.bb-out-note { font-size: 13.5px; font-weight: 600; color: #bcd2ff; max-width: 34em; }
/* payout strip = a ticket: white stub, navy outline, semicircular bites at both ends in the band's own colour */
.bb-payout { position: relative; margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; background: var(--surface); border: 2.5px solid var(--arc-edge); border-radius: 12px; padding: 14px 28px; }
.bb-payout::before, .bb-payout::after { content: ''; position: absolute; top: 50%; width: 14px; height: 24px; margin-top: -12px; pointer-events: none; }
.bb-payout::before { left: -2.5px; background: radial-gradient(circle at 0 50%, var(--inset) 7px, var(--arc-edge) 7.5px 10px, transparent 10.5px); }
.bb-payout::after { right: -2.5px; background: radial-gradient(circle at 100% 50%, var(--inset) 7px, var(--arc-edge) 7.5px 10px, transparent 10.5px); }
.bb-payout > span { font: 600 15px var(--font-display); color: var(--ink); }
.bb-payout ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.bb-payout li { background: var(--inset); color: var(--arc-navy); border-radius: 10px; padding: 5px 10px; font-weight: 800; font-size: 14px; }
:root[data-theme="dark"] .bb-payout li { color: #eaf2ff; }

/* ---------- 8. faq: sticky heading, navy rules, plus toggles ---------- */
.bb-faq { padding: clamp(3.5rem, 8vw, 6rem) 0; background: var(--bg); }
.bb-faq-grid { display: grid; grid-template-columns: 0.7fr 1.3fr; gap: 48px; align-items: start; }
.bb-faq-grid .bb-head { position: sticky; top: 96px; }
.bb-faq details { border-bottom: 2.5px solid var(--ink); }
.bb-faq details:first-child { border-top: 2.5px solid var(--ink); }
.bb-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 0; font: 600 19px var(--font-display); color: var(--ink); border-radius: 6px; }
.bb-faq summary::-webkit-details-marker { display: none; }
.bb-faq summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.bb-faq .ans { padding: 0 0 20px; color: var(--ink-2); font-weight: 600; max-width: 40em; }
.bb-faq details[open] .ans { animation: bb-ans .25s ease-out; }
@keyframes bb-ans { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
/* the toggle sinks inside the summary, which is the control and does not move (so there is no dead strip) */
.bb-tog { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 2.5px solid var(--arc-edge); display: grid; place-items: center; background: var(--cab-key); color: var(--ink); box-shadow: var(--cab-edge-3); transition: transform .3s var(--press), background .2s, box-shadow .09s; }
.bb-faq summary:active .bb-tog { transform: translateY(3px); box-shadow: 0 0 0 var(--arc-edge); }
.bb-faq details[open] .bb-tog { transform: rotate(45deg); background: var(--arc-coin); color: #13213f; box-shadow: var(--cab-edge-3), var(--cab-lamp-coin); }
.bb-faq details[open] summary:active .bb-tog { transform: rotate(45deg) translate(2px, 2px); box-shadow: 0 0 0 var(--arc-edge), var(--cab-lamp-coin); }

/* ---------- 9. closing: the insert-coin moment ---------- */
.bb-end { position: relative; padding: clamp(4rem, 9vw, 7rem) 0 130px; background: linear-gradient(180deg, var(--bg) 0%, var(--sky-b) 100%); text-align: center; }
:root[data-theme="dark"] .bb-end { background: linear-gradient(180deg, var(--bg) 0%, #1d3a73 100%); }
.bb-end-box { position: relative; z-index: 1; display: grid; justify-items: center; gap: 14px; }
.bb-end-box p { max-width: 32em; color: var(--ink-2); font-weight: 600; font-size: 18px; }
.bb-end .bb-actions { justify-content: center; }
.bb-insert { display: grid; justify-items: center; gap: 0; margin-bottom: 6px; }
/* the coin rests on the slot's lip after its drop; the slot is drawn in front so the coin reads as touching it */
.bb-end-coin { position: relative; z-index: 0; width: 64px; height: 64px; margin-bottom: -4px; filter: drop-shadow(0 2px 0 rgba(255, 255, 255, .55)); }
.bb-slot { position: relative; z-index: 1; width: 34px; height: 14px; border-radius: 4px; background: var(--arc-navy); }
.bb-slot::after { content: ''; position: absolute; left: 6px; right: 6px; top: 6px; height: 2px; border-radius: 1px; background: var(--bg); }
:root[data-theme="dark"] .bb-slot { background: #050b1a; box-shadow: inset 0 0 0 2px var(--night-line); }
:root[data-theme="dark"] .bb-slot::after { background: var(--night-line); }
/* the coin drops once when the closing first comes into view (fill both: it holds its landing) */
.bb-end-box.in .bb-end-coin { animation: bb-coin-drop .62s cubic-bezier(.3, 1.5, .5, 1) both; }
@keyframes bb-coin-drop { 0% { transform: translateY(-48px); opacity: 0; } 20% { opacity: 1; } 88% { transform: translateY(0) scale(1.08, .92); } 100% { transform: none; } }

/* ---------- 10. footer: the coin door (links as 44px rows) ---------- */
.bb-foot { background: #2e7a32; color: #fff; padding: 30px 0 34px; }
:root[data-theme="dark"] .bb-foot { background: #1c4d20; }
.bb-foot a, .bb-foot .brand { color: #fff; }
.bb-foot .brand { min-height: 44px; }
.bb-foot-grid { display: grid; grid-template-columns: 1.4fr .6fr 1fr; gap: 28px; }
.bb-foot-brand p { margin-top: 10px; max-width: 32em; color: #e6f5e7; font-weight: 600; }
.bb-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.bb-foot li, .bb-foot h4 { font-weight: 700; color: #fff; }
.bb-foot li { min-height: 44px; display: flex; align-items: center; }
.bb-foot li a { display: inline-flex; align-items: center; min-height: 44px; }
.bb-foot h4 { font-size: 16px; margin-bottom: 2px; }
.bb-foot-bottom { margin-top: 26px; padding-top: 18px; border-top: 2px solid rgba(255, 255, 255, .25); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: 14px; color: #e6f5e7; font-weight: 600; }
.bb-foot :focus-visible { outline-color: #fff; }

/* ---------- reveal: each block rises once as it enters the screen ---------- */
.bb-rv { opacity: 0; translate: 0 22px; transition: opacity .55s var(--rise), translate .55s var(--rise); }
.bb-rv.in { opacity: 1; translate: 0 0; }

/* ---------- widths ---------- */
@media (max-width: 960px) {
  .bb-hero-grid { grid-template-columns: 1fr; gap: 34px; }
  .bb-cloud { display: none; }
  .bb-stage { width: 100%; max-width: 300px; margin-inline: auto; padding-bottom: 40px; }
  .bb-stage::before { display: none; }
  /* flat phone: the bezel itself sits in the flow with the phone's aspect ratio (not pinned to the phone box), so the plank can
     follow it in the flow and the phone box becomes bezel + plank with nothing stretched; the depth layers (exactly behind the
     bezel at 0deg) are hidden so they never show under the plank */
  .bb-phone { --ry: 0deg; --rx: 0deg; aspect-ratio: auto; }
  .bb-phone::before, .bb-phone::after { display: none; }
  .bb-bezel { position: relative; inset: auto; aspect-ratio: 300 / 614; }
  /* the contact shadow follows the bezel's bottom edge (204.667% of the stage width = the bezel's aspect height) */
  .bb-floor { top: 18px; bottom: auto; margin-top: calc(204.667% + 2px); }
  /* the deck becomes a plank in the flow under the bezel: two columns of keys, any label length, no fixed offset to outgrow */
  .bb-keys { --plank: min(100vw - 2 * var(--gutter), 560px); position: relative; inset: auto; width: var(--plank); margin: 26px 0 0 calc((100% - var(--plank)) / 2); display: grid; grid-template-columns: 1fr 1fr; gap: 12px; transform-style: flat; background: var(--cab-key); border: 3px solid var(--arc-edge); border-radius: 24px; padding: 14px; box-shadow: var(--cab-edge-8), var(--cab-floor); }
  .bb-3d { position: relative; inset: auto; --z: 0px; transform: none; }
  .bb-cap { display: flex; justify-content: center; width: 100%; box-shadow: var(--cab-edge-4); min-height: 46px; }
  .bb-3d-1 .bb-cap, .bb-3d-3 .bb-cap { box-shadow: var(--cab-edge-4), var(--cab-lamp); }
  .bb-3d:hover .bb-cap { transform: translateY(-2px); box-shadow: var(--cab-edge-6); }
  .bb-3d-1:hover .bb-cap, .bb-3d-3:hover .bb-cap { box-shadow: var(--cab-edge-6), var(--cab-lamp); }
  .bb-3d:active .bb-cap, .bb-3d.down .bb-cap { transform: translateY(4px); box-shadow: 0 0 0 var(--arc-edge); }
  .bb-3d-1:active .bb-cap, .bb-3d-1.down .bb-cap, .bb-3d-3:active .bb-cap, .bb-3d-3.down .bb-cap { box-shadow: 0 0 0 var(--arc-edge), var(--cab-lamp); }
  .bb-path { grid-template-columns: 1fr 1fr; row-gap: 30px; }
  .bb-trail { display: none; }
  .bb-level:nth-of-type(even) { margin-top: 0; }
  .bb-diff-grid, .bb-faq-grid { grid-template-columns: 1fr; gap: 28px; }
  .bb-faq-grid .bb-head { position: static; }
  .bb-calc { grid-template-columns: 1fr; }
  .bb-calc-out { padding: 30px 28px; }
}
/* one column of keys where two cannot hold the widest labels (Hindi) */
@media (max-width: 460px) { .bb-keys { grid-template-columns: 1fr; } }
@media (max-width: 600px) {
  .bb-path { grid-template-columns: 1fr; padding-left: 28px; }
  .bb-path::before { content: ''; position: absolute; left: 25px; top: 20px; bottom: 20px; border-left: 4px dotted var(--arc-edge); opacity: .5; }
  :root[data-theme="dark"] .bb-path::before { border-color: var(--night-line); opacity: .7; }
  .bb-level { grid-template-columns: auto 1fr; align-items: start; column-gap: 14px; }
  .bb-flag { margin-left: -28px; width: 46px; height: 46px; font-size: 20px; }
  .bb-read dl div { grid-template-columns: 1fr; gap: 2px; }
  .bb-items .bb-item:nth-child(n) { grid-template-columns: 60px 1fr; gap: 16px; margin-left: 0; }
  .bb-ic { width: 52px; height: 52px; }
  .bb-foot-grid { grid-template-columns: 1fr; }
  .bb-title { font-size: clamp(32px, 9.5vw, 44px); }
  .bb-fig { flex-basis: calc(50% - 7px); }
  .bb-payout { padding: 12px 22px; }
  .bb .btn-lg { flex: 1 1 auto; }
}
/* The nav never wraps or overflows: the 44px keys need more room than the old 32px ones, so the text links (which the hero
   keycaps duplicate) leave at <= 1060px, the Log in key (duplicated in the hero, the closing and the footer) at <= 720px, the
   long brand name gives way to the lantern alone at <= 640px, and at <= 480px the language rail folds into one key with a tray
   (.bb-lang, built by landing-bb.js around the rail). The brand rule is declared after every other brand rule on purpose:
   nav-arcade.css sets 13px at <= 1000px and would otherwise win. Checked in all four languages from 320px up. */
@media (max-width: 1060px) { .site-nav-wrap.bb-nav .site-links { display: none; } }
@media (max-width: 720px) { .site-nav-wrap.bb-nav .login-link { display: none; } }
@media (max-width: 640px) {
  .site-nav-wrap.bb-nav .site-nav { gap: 6px; padding: 5px 5px 5px 8px; flex-wrap: nowrap; }
  .site-nav-wrap.bb-nav .site-nav .brand { font-size: 0; gap: 0; max-width: none; min-width: 44px; min-height: 44px; justify-content: center; padding-inline: 2px; } /* the lantern alone is still a 44px target */
  .site-nav-wrap.bb-nav .spacer { min-width: 0; }
  .site-nav-wrap.bb-nav .lang-switch { padding: 2px; gap: 2px; }
  .site-nav-wrap.bb-nav .lang-switch button { padding: 0 6px; white-space: nowrap; }
  .site-nav-wrap.bb-nav .site-nav .btn-primary { padding: 0 12px; }
}
/* language key + tray: above 480px the wrapper is transparent and the rail sits in the nav as before */
.bb-lang, .bb-lang-tray { display: contents; }
.bb-lang-key { display: none; }
@media (max-width: 480px) {
  .bb-lang { display: block; position: static; flex: none; }
  .site-nav-wrap.bb-nav .site-nav { position: relative; } /* the tray hangs from the nav box, not the key, so it never leaves the viewport */
  .bb-lang-key { --sink: 3px; position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; min-width: 44px; padding: 0 10px; border-radius: 12px; background: var(--cab-key); border: 2.5px solid var(--arc-edge); box-shadow: var(--cab-edge-3); color: var(--ink); font: 700 13px var(--font); cursor: pointer; transition: transform .18s var(--press), box-shadow .18s; }
  .bb-lang-key .ico { width: 20px; height: 20px; }
  .bb-lang-key:active, .bb-lang.open .bb-lang-key { transform: translateY(3px); box-shadow: 0 0 0 var(--arc-edge); transition-duration: .09s; }
  /* the tray is a raised block under the key, the rows are the rail's own buttons laid out as 44px rows with the language's own name */
  .bb-lang-tray { display: none; position: absolute; top: calc(100% + 10px); right: 5px; z-index: 5; min-width: 236px; max-width: calc(100vw - 30px); padding: 6px; background: var(--cab-key); border: 3px solid var(--arc-edge); border-radius: 14px; box-shadow: var(--cab-edge-4); }
  .bb-lang.open .bb-lang-tray { display: block; }
  .site-nav-wrap.bb-nav .bb-lang-tray .lang-switch { display: grid; grid-template-columns: 1fr; gap: 4px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
  .site-nav-wrap.bb-nav .bb-lang-tray .lang-switch button { display: flex; align-items: center; gap: 10px; justify-content: flex-start; min-height: 44px; padding: 0 12px; border-radius: 10px; font-size: 13px; }
  .site-nav-wrap.bb-nav .bb-lang-tray .lang-switch button::after { content: attr(data-name); font-weight: 600; color: var(--ink-2); }
  .site-nav-wrap.bb-nav .bb-lang-tray .lang-switch button[aria-pressed="true"]::after { color: var(--ink); }
  /* the rows sink 2px; their hit strip stays inside the 4px row gap so a hover never bleeds into the neighbour */
  .site-nav-wrap.bb-nav .bb-lang-tray .lang-switch button:hover::before, .site-nav-wrap.bb-nav .bb-lang-tray .lang-switch button:active::before { top: calc(-2px - var(--sink, 0px)); bottom: -2px; }
}
/* a visually hidden line for the screen-reader announcements of the phone's own actions */
.bb-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ---------- reduced motion: every state still shows, nothing travels ---------- */
@media (prefers-reduced-motion: reduce) {
  .bb-rv { opacity: 1; translate: none; transition: none; }
  .bb-rv.in { transition: none; }
  .bb-row, .bb-read-in, .bb-digits.settle, .bb-faq details[open] .ans, .bb.bb-boot .bb-3d, .bb.bb-boot .bb-hero-copy > *, .site-nav-wrap.bb-power .site-nav, .site-nav-wrap.bb-power .brand-mark.lantern svg, .bb-end-box.in .bb-end-coin { animation: none; }
  .bb-knob, .bb-tog, .bb-key, .bb-phone, .bb-switch::before, .bb-switch i, .bb-blue, .bb-3d, .bb-cap, .bb-bars i, .bb-flag, .bb-stage-card, .bb-ic, .bb .btn-lg,
  .site-nav-wrap.bb-nav .lang-switch button, .site-nav-wrap.bb-nav .theme-btn, .site-nav-wrap.bb-nav .bb-lang-key, .site-nav-wrap.bb-nav .site-nav .btn-sm, .bb-calc-in .seg button { transition: none; }
}