/* Backcomhub landing: palette tokens and the page CSS. Loaded with the kit only while the landing
   route is mounted (LandingKitService), which also sets <html data-bh-theme>.

   Themes (start.mjs palettes, Google Sans Flex / Google Sans Code, sharp):
     forest  green-black-bone, the dark page
     ember   warm white with Firebase's warm range: deep orange, orange, amber, yellow, coral
     mint    mint-pink-accounts: white, bottle green, a mint glow
     cobalt  cool-grey-cobalt: cool grey, cobalt, a sky glow
     lime    offwhite-bottle-yellow: off-white, deep green, a yellow signal
   Beside the kit's --p-* palette each theme sets the page's own tokens (--bh-*): the deep panel the
   slideshow is drawn on (dark in every theme), the wizard's card, its glowing border, the hero's
   aurora, the error colour and the chevrons drawn as data URIs. */

:root {
  --font-display: "Google Sans Flex", system-ui, sans-serif;
  --font-text: "Google Sans Flex", system-ui, sans-serif;
  --font-mono: "Google Sans Code", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --display-weight: 500;
  --display-tracking: -0.035em;
  --display-tracking-xl: -0.045em;
  --ly-scale: 0.97;

  --p-bg: #161c1a; --p-surface: #1f2725; --p-ink: #e3e2da; --p-muted: #8e948d;
  --p-accent: #9fc7b8; --p-accent-ink: #161c1a; --p-action: #9fc7b8; --p-action-ink: #161c1a;
  --p-inv-bg: #e3e2da; --p-inv-surface: #d3d2cb; --p-inv-ink: #161c1a; --p-inv-muted: #555a55;
  --p-inv-accent: #161c1a; --p-inv-accent-ink: #e3e2da; --p-inv-action: #161c1a; --p-inv-action-ink: #e3e2da;

  --bh-deep: #121816; --bh-deep-2: #1b2b26; --bh-deep-glow: #2c4a40;
  --bh-deep-acc: #9fc7b8; --bh-deep-hi: #bfe3d5; --bh-deep-lo: #6fa594;
  --bh-card: var(--p-surface); --bh-card-shadow: none;
  --bh-glow-1: #9fc7b8; --bh-glow-2: #e6c886; --bh-glow-3: #bfe3d5; --bh-glow-faint: rgb(159 199 184 / .14);
  --bh-aura-1: rgb(159 199 184 / .14); --bh-aura-2: rgb(230 200 134 / .07); --bh-aura-3: rgb(111 165 148 / .10);
  --bh-grid: rgb(227 226 218 / .05);
  --bh-accent-text: var(--p-accent);
  --bh-action-text: var(--action);
  --bh-danger: #f0a48f;
  --bh-chev-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%239fc7b8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

html[data-bh-theme="mint"] {
  --p-bg: #f8f8f8; --p-surface: #eeeeee; --p-ink: #0a0a0a; --p-muted: #5f5f5f;
  --p-accent: #1f6b3a; --p-accent-ink: #ffffff; --p-action: #1f6b3a; --p-action-ink: #ffffff;
  --p-inv-bg: #0c2117; --p-inv-surface: #153124; --p-inv-ink: #f2f6f2; --p-inv-muted: #9fb3a6;
  --p-inv-accent: #8de0ad; --p-inv-accent-ink: #0c2117; --p-inv-action: #8de0ad; --p-inv-action-ink: #0c2117;
  --bh-deep: #0c2117; --bh-deep-2: #12301f; --bh-deep-glow: #1d5236;
  --bh-deep-acc: #8de0ad; --bh-deep-hi: #c3edce; --bh-deep-lo: #3f9a62;
  --bh-card: #ffffff; --bh-card-shadow: 0 1px 2px rgb(10 40 20 / .06), 0 24px 60px -18px rgb(10 60 30 / .22);
  --bh-glow-1: #1f6b3a; --bh-glow-2: #8de0ad; --bh-glow-3: #f8c7c9; --bh-glow-faint: rgb(31 107 58 / .14);
  --bh-aura-1: rgb(141 224 173 / .55); --bh-aura-2: rgb(248 199 201 / .45); --bh-aura-3: rgb(195 237 206 / .55);
  --bh-grid: rgb(10 10 10 / .045);
  --bh-danger: #b8341c;
  --bh-chev-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%231f6b3a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

html[data-bh-theme="ember"] {
  --p-bg: #fbfaf7; --p-surface: #f3efe8; --p-ink: #1f1711; --p-muted: #685d53;
  --p-accent: #4fd1c5; --p-accent-ink: #ffffff; --p-action: #4fd1c5; --p-action-ink: #ffffff;
  --p-inv-bg: #1c1108; --p-inv-surface: #2a1a0d; --p-inv-ink: #fbf6ee; --p-inv-muted: #b9a693;
  --p-inv-accent: #ffc400; --p-inv-accent-ink: #1c1108; --p-inv-action: #4fd1c5; --p-inv-action-ink: #ffffff;
  --bh-action-text: #0f766e; --bh-accent-text: #0f766e;
  --bh-deep: #1c1108; --bh-deep-2: #2e1a0a; --bh-deep-glow: #6a2c06;
  --bh-deep-acc: #ffc400; --bh-deep-hi: #ffe082; --bh-deep-lo: #ff9100;
  --bh-card: #ffffff; --bh-card-shadow: 0 1px 2px rgb(60 25 0 / .06), 0 24px 60px -18px rgb(60 30 0 / .2);
  --bh-glow-1: #4fd1c5; --bh-glow-2: #ffa000; --bh-glow-3: #ffc400; --bh-glow-faint: rgb(79 209 197 / .14);
  --bh-aura-1: rgb(255 196 0 / .42); --bh-aura-2: rgb(255 138 101 / .38); --bh-aura-3: rgb(255 145 0 / .26);
  --bh-grid: rgb(31 23 17 / .045);
  --bh-danger: #b3261e;
  --bh-chev-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%230f766e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

html[data-bh-theme="cobalt"] {
  --p-bg: #eef0f3; --p-surface: #e2e5ea; --p-ink: #0b0c0e; --p-muted: #555c68;
  --p-accent: #1f2de6; --p-accent-ink: #ffffff; --p-action: #1f2de6; --p-action-ink: #ffffff;
  --p-inv-bg: #080b24; --p-inv-surface: #10153a; --p-inv-ink: #eef0f3; --p-inv-muted: #9aa1bd;
  --p-inv-accent: #8fb0ff; --p-inv-accent-ink: #080b24; --p-inv-action: #eef0f3; --p-inv-action-ink: #0b0c0e;
  --bh-deep: #080b24; --bh-deep-2: #0f1640; --bh-deep-glow: #1c2a8a;
  --bh-deep-acc: #8fb0ff; --bh-deep-hi: #c4d4ff; --bh-deep-lo: #4a63e8;
  --bh-card: #ffffff; --bh-card-shadow: 0 1px 2px rgb(11 12 40 / .06), 0 24px 60px -18px rgb(31 45 230 / .25);
  --bh-glow-1: #1f2de6; --bh-glow-2: #5ec8ff; --bh-glow-3: #9ff0d0; --bh-glow-faint: rgb(31 45 230 / .14);
  --bh-aura-1: rgb(94 200 255 / .45); --bh-aura-2: rgb(31 45 230 / .22); --bh-aura-3: rgb(159 240 208 / .40);
  --bh-grid: rgb(11 12 14 / .05);
  --bh-danger: #c0341d;
  --bh-chev-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%231f2de6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

html[data-bh-theme="lime"] {
  --p-bg: #f7f7f2; --p-surface: #ebebe4; --p-ink: #0d2a1c; --p-muted: #56635b;
  --p-accent: #f6e016; --p-accent-ink: #0d2a1c; --p-action: #0d2a1c; --p-action-ink: #f7f7f2;
  --p-inv-bg: #0d2a1c; --p-inv-surface: #1c3629; --p-inv-ink: #f7f7f2; --p-inv-muted: #a3b0a8;
  --p-inv-accent: #f6e016; --p-inv-accent-ink: #0d2a1c; --p-inv-action: #f6e016; --p-inv-action-ink: #0d2a1c;
  --bh-deep: #0d2a1c; --bh-deep-2: #123824; --bh-deep-glow: #2c5a33;
  --bh-deep-acc: #f6e016; --bh-deep-hi: #fbf08a; --bh-deep-lo: #b5a50c;
  --bh-card: #ffffff; --bh-card-shadow: 0 1px 2px rgb(13 42 28 / .06), 0 24px 60px -18px rgb(13 42 28 / .25);
  --bh-glow-1: #0d2a1c; --bh-glow-2: #f6e016; --bh-glow-3: #7fd6a0; --bh-glow-faint: rgb(13 42 28 / .12);
  --bh-aura-1: rgb(246 224 22 / .38); --bh-aura-2: rgb(127 214 160 / .35); --bh-aura-3: rgb(246 224 22 / .22);
  --bh-grid: rgb(13 42 28 / .05);
  --bh-accent-text: #0d2a1c;
  --bh-danger: #b8341c;
  --bh-chev-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%230d2a1c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* the hero's aurora: three slow colour pools behind the slideshow and the wizard, over a fine grid
   that fades out from the top right; ambient drift of 22s, still under reduced motion and when paused */
.bh-hero { position: relative; isolation: isolate; overflow: clip; }
.bh-hero::before, .bh-hero::after { content: ""; position: absolute; z-index: -1; pointer-events: none; }
.bh-hero::before { inset: -8%;
  background:
    radial-gradient(26% 34% at 56% 20%, var(--bh-aura-1), transparent 70%),
    radial-gradient(22% 30% at 72% 4%, var(--bh-aura-3), transparent 72%),
    radial-gradient(24% 34% at 99% 62%, var(--bh-aura-2), transparent 72%),
    radial-gradient(30% 26% at 6% 100%, var(--bh-aura-3), transparent 72%);
  filter: blur(18px); animation: bh-aura 22s ease-in-out infinite alternate; }
.bh-hero::after { inset: 0;
  background-image: linear-gradient(var(--bh-grid) 1px, transparent 1px), linear-gradient(90deg, var(--bh-grid) 1px, transparent 1px);
  background-size: 56px 56px; background-position: -1px -1px;
  mask-image: radial-gradient(60% 75% at 62% 22%, #000 0%, transparent 78%); }
@keyframes bh-aura { 0% { transform: translate3d(0, 0, 0) scale(1); } 100% { transform: translate3d(-2.5%, 2%, 0) scale(1.05); } }
html.bh-paused .bh-hero::before { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .bh-hero::before { animation: none; } }
@media (max-width: 1023px) {
  .bh-hero::before { background:
    radial-gradient(50% 30% at 85% 10%, var(--bh-aura-1), transparent 70%),
    radial-gradient(45% 26% at 10% 96%, var(--bh-aura-3), transparent 72%); }
}

/* a soft pool of the theme's glow under the wizard, so the card floats over the page */
@media (min-width: 1024px) {
  .bh-right > .calc-glow::after { content: ""; position: absolute; inset: 8% -6% -4% 4%; z-index: -1; pointer-events: none; border-radius: 50%;
    background: radial-gradient(closest-side, var(--bh-aura-1), transparent), radial-gradient(60% 50% at 20% 90%, var(--bh-aura-2), transparent 70%);
    filter: blur(40px); opacity: .9; }
}

/* the close: the hero's light again, a pool from the lower right over the same fine grid */
footer.closing { position: relative; isolation: isolate; overflow: clip; }
footer.closing::before, footer.closing::after { content: ""; position: absolute; z-index: -1; pointer-events: none; }
footer.closing::before { inset: 0;
  background: radial-gradient(40% 55% at 88% 18%, var(--bh-aura-1), transparent 70%), radial-gradient(30% 40% at 66% 0%, var(--bh-aura-2), transparent 72%);
  filter: blur(18px); }
footer.closing::after { inset: 0 0 45% 0;
  background-image: linear-gradient(var(--bh-grid) 1px, transparent 1px), linear-gradient(90deg, var(--bh-grid) 1px, transparent 1px);
  background-size: 56px 56px; mask-image: radial-gradient(55% 80% at 82% 20%, #000, transparent 75%); }


  /* hero: the brief's 60/40 split, the slideshow and intro left (span-7), the commission wizard right (span-5) */
  .bh-hero .hero-split { align-items: stretch; }
  .bh-left { display: flex; flex-direction: column; gap: var(--s-5); min-height: 0; height: 100%; }
  .bh-left > h1 { text-box: trim-start cap alphabetic; }
  .bh-left > .hero__lead { margin: 0; max-width: 54ch; }
  .bh-left > .slides { flex: 1 1 0; min-height: 0; margin-top: var(--s-3); }
  @media (max-width: 1023px) {
    .bh-hero .hero-text.hero-split { display: flex; flex-direction: column; }
    .bh-left { flex: 1 1 auto; }
    .bh-right { display: none; }
  }
  @media (max-width: 639px) { .bh-left > .hero__lead { display: none; } }
  @media (min-width: 1024px) { .bh-right { margin-top: -30px; } .bh-narrow-only { display: none !important; } }
  .bh-left > .btn-row { margin: 0; flex-wrap: wrap; }
  .skip { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .skip:focus { width: auto; height: auto; clip-path: none; padding: var(--s-2) var(--s-3); background: var(--bg); z-index: 60; }
  .footer .nav__logo .mark--initial { width: 28px; height: 28px; font-size: 16px; margin-right: 10px; }

  /* the slideshow: five drawn marketing slides, each with its own short animation that plays when it is shown */
  .slides { position: relative; overflow: hidden; border-radius: var(--r-lg); background: var(--bh-deep); border: 1px solid var(--line); }
  .slide { position: absolute; inset: 0; display: none; }
  .slide.is-on { display: block; animation: ad-fade .5s var(--m-ease) both; }
  @keyframes ad-fade { from { opacity: 0; } }
  .ad { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--s-6);
    padding: var(--s-7) var(--s-7) 88px; color: #e9ebe4;
    background: radial-gradient(120% 90% at 85% 15%, var(--ad-glow, var(--bh-deep-glow)) 0%, transparent 60%), radial-gradient(80% 70% at 10% 100%, var(--bh-deep-2) 0%, transparent 70%), var(--bh-deep); }
  .ad--gold { --ad-glow: #4d4024; } .ad--sea { --ad-glow: #1f4150; } .ad--sand { --ad-glow: #3d3a2a; } .ad--mint { --ad-glow: #24483d; } .ad--rose { --ad-glow: #4a2c34; }
  .ad__copy { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
  .ad__kicker { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-label); font-weight: 500; color: #b9c2bb; }
  .ad__kicker::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--bh-deep-acc); }
  .ad__title { font: var(--display-weight) clamp(26px, 2.3vw, 34px)/1.12 var(--font-display); letter-spacing: -0.03em; color: #f3f4ef; }
  .ad__line { font-size: var(--t-body); line-height: 1.5; color: #d6dbd3; max-width: 30ch; }
  .ad__vis { position: relative; min-width: 0; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: 10px; font-variant-numeric: tabular-nums; }
  .tk { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: 12px 14px; border-radius: 10px;
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); font-size: 14px; color: #e9ebe4; }
  .tk small { display: block; font-size: 12px; color: #aeb7b0; }
  .tk__plus { flex: none; padding: 4px 10px; border-radius: 999px; background: color-mix(in oklab, var(--bh-deep-acc) 18%, transparent); color: var(--bh-deep-hi); font-weight: 500; }
  .tk__neg { color: var(--bh-danger); } .tk__pos { color: var(--bh-deep-hi); }
  .tot { display: flex; align-items: baseline; justify-content: space-between; padding: 0 2px 6px; font-size: 13px; color: #b9c2bb; }
  .tot__v { position: relative; display: inline-grid; font: var(--display-weight) 30px/1 var(--font-display); color: #f3f4ef; letter-spacing: -0.02em; }
  .tot__v > span { grid-area: 1 / 1; text-align: right; }
  /* the motion: only on the slide being shown, so showing a slide again plays it again */
  .slide.is-on .a-in { animation: ad-in .5s var(--m-ease) both; animation-delay: var(--d, 0s); }
  .slide.is-on .a-pop { animation: ad-pop .45s cubic-bezier(.22,1,.36,1) both; animation-delay: var(--d, 0s); }
  .slide.is-on .a-swap { animation: ad-swap var(--life, 1s) linear both; animation-delay: var(--d, 0s); }
  .slide.is-on .a-last { animation: ad-last .3s linear both; animation-delay: var(--d, 0s); }
  .slide.is-on .a-grow { animation: ad-grow .7s var(--m-ease) both; animation-delay: var(--d, 0s); transform-origin: bottom; }
  .a-swap, .a-last { opacity: 0; }
  @keyframes ad-in { from { opacity: 0; transform: translateY(14px); } }
  @keyframes ad-pop { from { opacity: 0; transform: scale(.85); } }
  @keyframes ad-swap { 0% { opacity: 0; } 8%, 92% { opacity: 1; } 100% { opacity: 0; } }
  @keyframes ad-last { to { opacity: 1; } }
  @keyframes ad-grow { from { transform: scaleY(0); } }
  .wk { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; align-items: end; height: 190px; }
  .wk > div { display: grid; grid-template-rows: auto 1fr auto; gap: 6px; height: 100%; text-align: center; font-size: 12px; color: #aeb7b0; }
  .wk b { display: block; font-weight: 500; color: #e9ebe4; font-size: 12px; }
  .wk i { align-self: end; display: block; height: var(--h); border-radius: 6px 6px 3px 3px; background: linear-gradient(var(--bh-deep-hi), var(--bh-deep-lo)); }
  .wk .off i { height: 6px; background: rgba(255,255,255,.14); }
  .wk .off b { color: #aeb7b0; }
  .ok { display: inline-grid; place-items: center; width: 18px; height: 18px; margin: 0 auto; border-radius: 50%; background: var(--bh-deep-acc); color: var(--bh-deep); }
  .ok svg { width: 11px; height: 11px; }
  .flow { position: relative; width: 100%; height: 220px; }
  .flow svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
  .flow path { fill: none; stroke: rgba(255,255,255,.18); stroke-width: 1.5; }
  .flow path.pulse { stroke: var(--bh-deep-hi); stroke-width: 2; stroke-dasharray: 18 220; stroke-linecap: round; }
  .slide.is-on .flow path.pulse { animation: ad-run 2.2s linear 2 both; animation-delay: var(--d, 0s); }
  @keyframes ad-run { from { stroke-dashoffset: 238; } to { stroke-dashoffset: 0; } }
  .flow__src { position: absolute; left: 0; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); font-size: 13px; font-weight: 500; color: #e9ebe4; }
  .flow__src::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--bh-deep-acc)); }
  .flow__dst { position: absolute; right: 0; top: 50%; translate: 0 -50%; width: 48%; padding: 14px 16px; border-radius: 12px; background: #f3f4ef; color: #161c1a; font-size: 13px; }
  .flow__dst b { display: block; font: var(--display-weight) 26px/1.1 var(--font-display); letter-spacing: -0.02em; margin-top: 4px; }
  .flow__dst small { color: #555a55; }
  .otp { display: flex; gap: 8px; }
  .otp span { display: grid; place-items: center; width: 40px; height: 48px; border-radius: 8px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); font: 500 20px/1 var(--font-mono); color: #f3f4ef; }
  .slide.is-on .otp span { animation: ad-otp .3s linear both; animation-delay: var(--d, 0s); }
  @keyframes ad-otp { from { color: transparent; border-color: rgba(255,255,255,.16); } to { color: #f3f4ef; border-color: var(--bh-deep-acc); } }
  .pay { display: grid; gap: 12px; padding: 16px; border-radius: 12px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); }
  .pay__row { display: flex; justify-content: space-between; font-size: 14px; color: #d6dbd3; }
  .pay__row b { color: #f3f4ef; font-weight: 500; }
  .pay__btn { position: relative; display: grid; height: 40px; border-radius: 8px; background: var(--bh-deep-acc); color: var(--bh-deep); font-size: 14px; font-weight: 500; overflow: hidden; }
  .pay__btn > span { grid-area: 1 / 1; display: flex; align-items: center; justify-content: center; gap: 6px; }
  .slides__ctrl { position: absolute; left: var(--s-7); bottom: var(--s-5); z-index: 3; display: flex; align-items: center; gap: var(--s-3); }
  .slides__dots { display: flex; gap: 0; }
  .slides__dot { width: 28px; height: 32px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
  .slides__dot::after { content: ""; width: 16px; height: 3px; border-radius: 2px; background: rgba(255,255,255,.28); transition: background-color var(--m-in) var(--m-ease); }
  .slides__dot[aria-current="true"]::after { background: var(--bh-deep-acc); }
  .slides__btn { position: relative; width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border-radius: 50%;
    border: 1px solid rgba(255,255,255,.24); background: var(--bh-deep); color: #e9ebe4; cursor: pointer; }
  .slides__btn svg { width: 14px; height: 14px; }
  .slides__btn:hover { border-color: #e9ebe4; }
  @media (max-width: 1023px) { .slides { min-height: 420px; } }
  @media (max-width: 1279px) { .ad { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: var(--s-5); padding: var(--s-6) var(--s-6) 80px; } .ad__line { max-width: none; } .slides__ctrl { left: var(--s-6); } }
  @media (max-width: 639px) {
    .ad { padding: var(--s-5) var(--s-4) 72px; gap: var(--s-4); }
    .ad__title { font-size: 24px; }
    .ad__line { display: none; }
    .slides__ctrl { left: var(--s-4); bottom: var(--s-3); }
    .wk { height: 150px; gap: 5px; }
    .otp span { width: 36px; height: 44px; }
    .tk:nth-of-type(n + 4) { display: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    .slide.is-on :is(.a-in, .a-pop, .a-grow, .otp span) { animation: none; }
    .slide.is-on .a-swap { animation: none; opacity: 0; }
    .slide.is-on .a-last { animation: none; opacity: 1; }
  }

  /* the wizard's glowing gradient border: a slow turning arc of the accent and gold, with a soft halo */
  @property --bh-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
  .calc-glow { --glow: conic-gradient(from var(--bh-a), var(--bh-glow-faint) 0deg, var(--bh-glow-faint) 150deg, var(--bh-glow-1) 210deg, var(--bh-glow-2) 255deg, var(--bh-glow-3) 290deg, var(--bh-glow-faint) 340deg);
    position: relative; height: 100%; padding: 1px; border-radius: var(--r-lg); background: var(--glow); --bh-a: 200deg; animation: bh-turn 4.5s cubic-bezier(.45,0,.25,1) 1 both; }
  .calc-glow:is(:hover, :focus-within) { animation: bh-spin-on 5s linear infinite; }
  .calc-glow:is(:hover, :focus-within)::before { opacity: .7; }
  .calc-glow::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--glow); filter: blur(22px); opacity: .5; animation: inherit; }
  .calc-glow > .calc { border: 0; border-radius: calc(var(--r-lg) - 1px); }
  @keyframes bh-turn { from { --bh-a: -160deg; } to { --bh-a: 200deg; } }
  @keyframes bh-spin-on { from { --bh-a: 200deg; } to { --bh-a: 560deg; } }
  html.bh-paused .calc-glow, html.bh-paused .calc-glow::before { animation-play-state: paused; }
  @media (prefers-reduced-motion: reduce) { .calc-glow, .calc-glow::before { animation: none; --bh-a: 200deg; } }

  /* the wizard: two steps in one card, information, then the result (the calculation runs into the report) */
  .calc { display: flex; flex-direction: column; min-height: 0; height: 100%; padding: var(--s-6); background: var(--bh-card);
    border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--bh-card-shadow); overflow: auto; scrollbar-width: thin; }
  .calc__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }
  .calc__title { font: 500 var(--t-card)/1.2 var(--font-text); }
  .calc__steps { display: flex; gap: var(--s-2); margin: 0; padding: 0; list-style: none; counter-reset: st; }
  .calc__steps li { counter-increment: st; display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-label); font-weight: 500; color: var(--muted); }
  .calc__steps li::before { content: counter(st); display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line-strong); font-variant-numeric: tabular-nums; }
  .calc__steps li[aria-current="step"] { color: var(--ink); }
  .calc__steps li[aria-current="step"]::before { background: var(--action); color: var(--action-ink); border-color: var(--action); }
  .calc__steps li.is-done::before { border-color: var(--ink); color: var(--ink); }
  .calc__body { flex: 1 1 auto; min-height: 0; padding-top: var(--s-5); display: flex; flex-direction: column; }
  .calc__step[hidden] { display: none; }
  .calc__step { display: flex; flex-direction: column; gap: var(--s-4); flex: 1 1 auto; }
  @media (min-width: 1024px) and (max-height: 820px) {
    .calc { padding: var(--s-5); }
    .calc form.calc__step { gap: var(--s-3); }
    .calc .field input, .calc .field select { height: 40px; }
    .acct__opt span { height: 36px; }
    .calc__preview dd { font-size: 20px; }
    .calc__note { display: none; }
  }
  .calc .field { font-size: var(--t-label); }
  .calc .field input, .calc .field select { height: 44px; background: var(--bg); }
  .calc .row2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-4); }
  .acct { border: 0; margin: 0; padding: 0; display: grid; gap: var(--s-2); min-width: 0; }
  .acct legend { float: left; padding: 0; font-size: var(--t-label); font-weight: 500; }
  .acct__opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); }
  .acct__opt { position: relative; }
  .acct__opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
  .acct__opt span { display: grid; place-items: center; height: 40px; padding: 0 var(--s-2); border: 1px solid var(--line-strong); border-radius: var(--r-sm);
    font-size: var(--t-small); font-weight: 500; text-align: center; transition: background-color var(--m-in) var(--m-ease), border-color var(--m-in) var(--m-ease), color var(--m-in) var(--m-ease); }
  .acct__opt:hover span { border-color: var(--ink); }
  .acct__opt input:checked + span { background: var(--ink); color: var(--bg); border-color: var(--ink); }
  .acct__opt input:focus-visible + span { outline: 2px solid var(--action); outline-offset: 2px; }
  .calc__preview { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); margin: var(--s-2) 0 0; }
  .calc__preview > div { display: grid; gap: 2px; }
  .calc__preview dt { font-size: var(--t-label); font-weight: 500; color: var(--muted); }
  .calc__preview dd { margin: 0; font: var(--display-weight) 24px/1.2 var(--font-display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
  .calc__err { min-height: 0; font-size: var(--t-label); color: var(--bh-danger); }
  .calc__err:empty { display: none; }
  .calc .btn--primary { width: 100%; }
  .calc__note { font-size: var(--t-label); color: var(--muted); text-align: center; }
  .calc__run { display: grid; gap: var(--s-4); margin: var(--s-5) 0 0; padding: 0; list-style: none; }
  .calc__run li { display: flex; align-items: center; gap: var(--s-3); color: var(--muted); font-size: var(--t-body); }
  .calc__run li.is-busy, .calc__run li.is-done { color: var(--ink); }
  .calc__run i { flex: none; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--line-strong); }
  .calc__run li.is-busy i { border-color: var(--line-strong); border-top-color: var(--action); animation: bh-spin 1s linear infinite; }
  .calc__run li.is-done i { position: relative; border-color: var(--action); background: var(--action); }
  .calc__run li.is-done i::after { content: ""; position: absolute; inset: 0; background: var(--action-ink);
    mask: center / 10px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3.5 8.4 2.8 2.8 6.2-6.4' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
  @keyframes bh-spin { to { transform: rotate(1turn); } }
  .rep__sum { display: grid; gap: 2px; }
  .rep__label { font-size: var(--t-label); color: var(--muted); font-weight: 500; }
  .rep__amount { font: var(--display-weight) 40px/1.1 var(--font-display); letter-spacing: var(--display-tracking); font-variant-numeric: tabular-nums; }
  .rep__meta { font-size: var(--t-small); color: var(--muted); }
  .rep__table { width: 100%; border-collapse: collapse; font-size: var(--t-small); font-variant-numeric: tabular-nums; }
  .rep__table th { text-align: left; font-weight: 500; color: var(--muted); font-size: var(--t-label); padding: 0 0 var(--s-2); border-bottom: 1px solid var(--line); }
  .rep__table td { padding: 9px 0; border-bottom: 1px solid var(--line); }
  .rep__table :is(th, td):not(:first-child) { text-align: right; }
  .rep__table tfoot td { font-weight: 500; border-bottom: 0; }
  .rep__month { font-size: var(--t-small); }
  .rep__guide { display: grid; gap: var(--s-2); margin: 0; padding: 0; list-style: none; counter-reset: g; font-size: var(--t-small); line-height: 1.45; }
  .rep__guide li { counter-increment: g; display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--s-2); }
  .rep__guide li::before { content: counter(g) "."; color: var(--muted); font-variant-numeric: tabular-nums; }
  .rep__acts { display: flex; align-items: center; gap: var(--s-5); margin-top: auto; }
  .rep__acts .btn { flex: 1 1 auto; }
  /* below 1024 the wizard is the #tool section's form, open on the page ground (no box of its own) */
  #tool .calc { height: 100%; padding: var(--s-5); overflow: visible; }
  @media (max-width: 639px) { #tool .calc { padding: var(--s-4); } }
  #tool .calc__title { display: none; }
  #tool .calc__steps { margin-left: 0; }
  @media (max-width: 639px) {
    .calc__steps li span { display: none; }
    .calc__body { padding-top: var(--s-4); }
    .calc__step { gap: var(--s-3); }
    .acct__opt span { height: 36px; font-size: var(--t-label); }
    .rep__amount { font-size: 32px; }
  }

  /* the #tool section only shows below 1024, where the wizard moves out of the hero to a screen of its own */
  @media (min-width: 1024px) { #tool { display: none; } }
  #tool-slot { display: flex; flex-direction: column; }

  /* app-frame (sections-library.md, app-frame) */
  .app.ui { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); margin-top: var(--s-7); background: var(--u-bg); border: 1px solid var(--u-border); border-radius: var(--u-r); box-shadow: var(--u-shadow); }
  .app > .app__pane { position: relative; min-width: 0; min-height: 0; overflow: hidden; }
  .app > .app__pane + .app__pane { border-left: 1px solid var(--u-line); }
  .app > .app__pane > .ui-panel { width: 100%; border: 0; border-radius: 0; box-shadow: none; }
  .app > .app__pane::after { content: ""; position: absolute; inset: auto 0 0 0; height: 64px; background: linear-gradient(transparent, var(--u-bg)); pointer-events: none; }
  @media (min-width: 1024px) and (max-width: 1279px) { .app.ui { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } }
  @media (max-width: 1023px) {
    .app.ui { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
    .app > .app__pane--list { max-height: 252px; }
    .app > .app__pane--list::after { display: none; }
    .app .ui-win__side { display: none; }
    .app .ui-win__body { grid-template-columns: minmax(0, 1fr); }
    .app > .app__pane + .app__pane { border-left: 0; border-top: 1px solid var(--u-line); }
  }
  @media (max-width: 639px) {
    .app.ui { grid-template-rows: minmax(0, 1fr); }
    .app > .app__pane--list { display: none; }
    .app > .app__pane + .app__pane { border-top: 0; }
  }
  .app .ui-stat { height: 100%; }

  /* rates: the comparison table, the instrument left, one column per Exness account type */
  .cmp { display: grid; }
  .cmp__row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: center; min-height: 48px; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
  .cmp__row > :first-child { grid-column: span 2; }
  .cmp__row > :not(:first-child) { grid-column: span 2; text-align: right; }
  .rates-ui { display: flex; flex-direction: column; min-height: 0; padding: var(--s-5) var(--s-6) 0; overflow: hidden; }
  .rates-ui__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding-bottom: var(--s-4); font-size: 13px; color: var(--u-muted, var(--muted)); }
  .rates-ui__bar b { color: var(--u-ink, var(--ink)); font-weight: 500; }
  .live { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-variant-numeric: tabular-nums; }
  .live__sep { opacity: .6; }
  .live__dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--p-accent); }
  .live__dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--p-accent); animation: live-ring 2.4s ease-out infinite; }
  @keyframes live-ring { from { transform: scale(1); opacity: .8; } to { transform: scale(2.6); opacity: 0; } }
  .live__bar { height: 2px; margin-bottom: var(--s-3); background: var(--u-line, var(--line)); border-radius: 2px; overflow: hidden; }
  .live__bar i { display: block; height: 100%; width: 100%; background: var(--p-accent); transform-origin: left; transform: scaleX(var(--k, 1)); transition: transform 1s linear; }
  .cmp.is-sync .cmp__row:not(.cmp__row--head) { animation: row-sync .9s var(--m-ease) both; animation-delay: calc(var(--i, 0) * 60ms); }
  .cmp.is-sync .cmp__row [role="cell"]:not(.cmp__na) { animation: cell-roll .6s var(--m-ease) both; animation-delay: calc(var(--i, 0) * 60ms + 120ms); }
  @keyframes row-sync { 0% { background: transparent; } 30% { background: color-mix(in oklab, var(--p-accent) 14%, transparent); } 100% { background: transparent; } }
  @keyframes cell-roll { from { opacity: .2; transform: translateY(6px); } }
  .h2-pick { display: inline; }
  .h2-pick select { appearance: none; -webkit-appearance: none; padding: 0 1.05em 0 0; margin: 0; border: 0; border-bottom: 2px solid var(--p-accent); border-radius: 0;
    background: transparent var(--bh-chev-accent) right .05em center / .55em no-repeat;
    color: inherit; font: inherit; letter-spacing: inherit; cursor: pointer; field-sizing: content; max-width: 100%; }
  .h2-pick select:focus-visible { outline: 2px solid var(--p-accent); outline-offset: 4px; }
  .h2-pick option { font-size: 16px; color: #161c1a; }
  @media (max-width: 639px) { .rates-ui__bar { flex-direction: column; align-items: flex-start; gap: 4px; } }
  @media (prefers-reduced-motion: reduce) { .live__dot::after, .cmp.is-sync .cmp__row, .cmp.is-sync [role="cell"] { animation: none !important; } }
  .rates-ui .cmp__row { grid-template-columns: minmax(0, 2fr) repeat(5, minmax(0, 1fr)); column-gap: var(--s-4); border-color: var(--u-line, var(--line)); }
  .rates-ui .cmp__row > * { grid-column: auto; }
  .cmp__row--head { font-size: var(--t-label); font-weight: 500; color: var(--muted); min-height: 40px; }
  .cmp__row--head > :first-child { color: var(--muted); }
  .cmp__sym { display: grid; }
  .cmp__sym b { font-weight: 500; }
  .cmp__sym span { font-size: var(--t-small); color: var(--muted); }
  .cmp__na { color: var(--muted); }
  @media (max-width: 639px) {
    .rates-ui { padding: var(--s-4) var(--s-3) 0; }
    .rates-ui .cmp__row { grid-template-columns: 70px repeat(5, minmax(0, 1fr)); column-gap: 6px; font-size: var(--t-label); min-height: 52px; }
    .cmp__row--head { line-height: 1.2; align-items: end; padding-bottom: var(--s-2); }
    .cmp__sym span { display: none; }
  }

  #platform .app { flex: 1 1 0; min-height: 0; }
  #features .panel { --p-h: 300px; }
  #how .panel { --p-h: 300px; }
  @media (min-width: 1280px) { #how .panel { --p-h: calc(100svh - 500px); } }
  .split-facts { display: grid; gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
  #faq .faq-left { display: flex; flex-direction: column; gap: var(--s-4); }
  #faq .faq-left > .faq { margin-top: var(--s-5); }
  #faq .faq-photo { min-height: 240px; }
  @media (min-width: 640px) and (max-width: 1023px) { #faq .faq-photo { min-height: 120px; } }
  #faq .faq-left > .frame { margin-top: var(--s-4); }
  @media (min-width: 640px) and (max-width: 1023px) {
    #features .card > p { display: none; }
    #features .grid > .card { grid-column: 1 / -1; }
    #features .panel { --p-h: calc((100svh - 470px) / 2); }
    #how { --h: 2; }
    .app .ui-win__row:nth-child(n + 5) { display: none; }
  }
  @media (max-width: 639px) {
    #features .card > p, #features h2 .muted { display: none; }
    #features .panel { --p-h: 188px; }
    #tool form.calc__step { gap: 10px; }
    #how .panel { --p-h: 250px; }
    #faq.g2m > .wrap > .grid { display: contents; }
    #faq.g2m .faq-left, #faq.g2m .faq-photo { grid-column: 1 / -1; min-height: 0; }
    #faq.g2m .faq-left { align-self: start; }
    #faq.g2m .faq-photo { align-self: stretch; }
  }
  .dg-cap { line-height: 18px; }
  /* backgrounds.css gives grounded sections their own padding, minimum height and centring; on this page every
     section keeps the one-screen box of system.css, so the two grounded sections take it back */
  main > #how, main > #faq { padding: var(--padt) 0 calc(var(--padb) + var(--bar)); display: block; align-content: normal; }
  @media (min-width: 640px) and (max-width: 1279px) {
    main > #how, main > #faq { display: flex; flex-direction: column; min-height: calc(var(--h, 1) * 100svh); }
  }
  @media (max-width: 639px) { main > #how, main > #faq { min-height: 0; } }
  @media (min-width: 640px) and (max-width: 1023px) { .rates-ui .cmp__row { min-height: calc((100svh - 520px) / 7); } }
  @media (min-width: 1024px) and (max-width: 1279px) { #how { --h: 2; } }

/* Angular port: the language switch and buttons drawn as text links */
.bh-lang { background: none; border: 0; padding: 0; font: 500 15px/1 var(--font-text); color: inherit; cursor: pointer; letter-spacing: 0.02em; }
button.link { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
/* the app puts .font-content (Inter) on <body>; on this page the body takes the kit's text face */
html[data-type="software"] body { font-family: var(--font-text); }

/* the single-panel pages (calculator, rates, consultation): the landing's header and footer, one
   panel centred in the first screen under the fixed header */
.bh-solo { display: block; background: var(--bg); color: var(--ink); }
.bh-solo__main { display: grid; place-items: center; min-height: 100vh; min-height: 100svh;
  padding: calc(var(--nav) + var(--s-7)) var(--gut) calc(var(--s-8) + var(--bar)); }
.bh-solo__main--wide { padding-inline: 0; }
/* the kit gives main > section a screen's height and padding; here the panel sizes itself */
main.bh-solo__main > section { height: auto; min-height: 0; padding: 0; width: 100%; }
.bh-solo__panel { width: min(100%, 560px); height: auto; }
.bh-solo__panel > .calc { height: auto; }
.bh-site-footer { padding-block: var(--s-8) var(--s-6); }
@media (max-width: 639px) { .bh-solo__main { padding-block: calc(var(--nav) + var(--s-6)) calc(var(--s-7) + var(--bar)); } }

/* the consultation form inside the wizard's panel */
.calc__head--stack { display: grid; justify-content: stretch; gap: var(--s-2); }
.calc__title--lg { font: var(--display-weight) 28px/1.2 var(--font-display); letter-spacing: -0.02em; }
.calc__lead { font-size: var(--t-body); line-height: 1.5; color: var(--ink); max-width: 46ch; }
.calc .field input[aria-invalid='true'] { border-color: var(--bh-danger); }
.calc__done { align-items: flex-start; }
.calc__done-mark { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--action); color: var(--action-ink); }
.calc__done-mark svg { width: 20px; height: 20px; }
.calc__done > p:not(.rep__amount) { color: var(--ink); max-width: 46ch; }

/* the instrument picker: a field-sized button that opens a dialog with the rate table and a search */
.calc .pick { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); width: 100%; height: 44px; padding: 0 var(--s-3) 0 var(--s-3);
  border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--bg); color: var(--ink); font: 400 var(--t-body)/1.2 var(--font-text); text-align: left; cursor: pointer;
  transition: border-color var(--m-in) var(--m-ease); }
.calc .pick:hover { border-color: var(--ink); }
.calc .pick:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }
.pick__value { display: flex; align-items: baseline; gap: var(--s-2); min-width: 0; overflow: hidden; white-space: nowrap; }
.pick__value b { font-weight: 500; }
.pick__value span { color: var(--muted); font-size: var(--t-small); overflow: hidden; text-overflow: ellipsis; }
.pick__chev { flex: none; width: 12px; height: 12px; margin-right: 4px; color: var(--muted); }
@media (min-width: 1024px) and (max-height: 820px) { .calc .pick { height: 40px; } }

/* the broker select: its own chevron, set in from the edge like the picker's */
.calc .field select { appearance: none; -webkit-appearance: none; padding: 0 32px 0 12px;
  background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%238e948d' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 12px center / 12px no-repeat; cursor: pointer; }

.calc button.calc__history-link { align-self: flex-start; margin-top: calc(-1 * var(--s-2)); font-size: var(--t-label); color: var(--bh-action-text); }
.calc__history { gap: var(--s-4); }
.calc__history-scroll { max-height: 360px; overflow: auto; scrollbar-width: thin; }
.calc__history-scroll thead th { position: sticky; top: 0; background: var(--bh-card); }
.calc__history-sub { display: block; font-size: var(--t-label); color: var(--muted); }
.calc__history .rep__table td { vertical-align: top; }
.rep__acts { flex-wrap: wrap; }

/* the dialog (native <dialog>, so focus, Escape and the backdrop come from the browser) */
.bh-picker { position: fixed; inset: 0; margin: auto; height: fit-content; width: min(640px, calc(100vw - 32px)); max-height: min(640px, calc(100svh - 48px)); padding: 0; border: 1px solid var(--line-strong);
  border-radius: var(--r-lg); background: var(--bh-card); color: var(--ink); font-family: var(--font-text); overflow: hidden; }
.bh-picker[open] { display: flex; animation: bh-pop .18s var(--m-ease); }
.bh-picker::backdrop { background: rgb(8 12 11 / 0.66); }
@keyframes bh-pop { from { opacity: 0; transform: translateY(8px) scale(.985); } }
.bh-picker__box { display: flex; flex-direction: column; width: 100%; min-height: 0; padding: var(--s-5); gap: var(--s-4); }
.bh-picker__head { display: flex; align-items: center; gap: var(--s-3); }
.bh-picker__title { font: 500 var(--t-card)/1.2 var(--font-text); }
.bh-picker__acct { font-size: var(--t-label); color: var(--muted); }
.bh-picker__close { margin-left: auto; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: none; color: var(--ink); cursor: pointer; }
.bh-picker__close:hover { border-color: var(--ink); }
.bh-picker__close svg { width: 14px; height: 14px; }
.bh-picker__search { display: flex; align-items: center; gap: var(--s-2); height: 44px; padding: 0 var(--s-3); border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--bg); color: var(--muted); }
.bh-picker__search:focus-within { border-color: var(--action); }
.bh-picker__search svg { flex: none; width: 16px; height: 16px; }
.bh-picker__search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; color: var(--ink); font: 400 var(--t-body)/1 var(--font-text); }
.bh-picker__list { flex: 1; min-height: 0; overflow: auto; scrollbar-width: thin; margin: 0 calc(-1 * var(--s-2)); }
.bh-picker__row { display: grid; grid-template-columns: minmax(0, 1fr) 96px 88px; align-items: center; gap: var(--s-3); width: 100%; min-height: 48px; padding: 6px var(--s-2);
  border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--ink); font: 400 var(--t-small)/1.3 var(--font-text); text-align: left; cursor: pointer; font-variant-numeric: tabular-nums; }
.bh-picker__row > :last-child { text-align: right; }
.bh-picker__row:not(.bh-picker__row--head):hover { background: color-mix(in oklab, var(--ink) 6%, transparent); }
.bh-picker__row[aria-selected='true'] { background: color-mix(in oklab, var(--p-accent) 14%, transparent); }
.bh-picker__row[aria-selected='true'] .bh-picker__rate { color: var(--bh-accent-text); font-weight: 500; }
.bh-picker__row:disabled { cursor: not-allowed; color: var(--muted); }
.bh-picker__row--head { position: sticky; top: 0; z-index: 1; min-height: 32px; background: var(--bh-card); color: var(--muted); font-size: var(--t-label); font-weight: 500; cursor: default; }
.bh-picker__sym { display: grid; }
.bh-picker__sym b { font-weight: 500; font-size: var(--t-body); }
.bh-picker__sym span, .bh-picker__group { color: var(--muted); }
.bh-picker__empty { padding: var(--s-5) var(--s-2); color: var(--muted); }
@media (max-width: 639px) { .bh-picker__row { grid-template-columns: minmax(0, 1fr) 80px; } .bh-picker__group { display: none; } .bh-picker__row--head > :nth-child(2) { display: none; } }
@media (prefers-reduced-motion: reduce) { .bh-picker[open] { animation: none; } }

/* the wizard's mode switch (simulated or real data), right under its header */
.calc__mode { display: inline-grid; grid-template-columns: 1fr 1fr; align-self: flex-start; gap: 2px; margin: 0; padding: 3px; border: 1px solid var(--line); border-radius: var(--r-md); min-width: 0; }
.calc__mode-opt { position: relative; }
.calc__mode-opt input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.calc__mode-opt span { display: grid; place-items: center; height: 24px; padding: 0 var(--s-4); border-radius: var(--r-sm); font-size: var(--t-label); font-weight: 500; color: var(--muted);
  transition: background-color var(--m-in) var(--m-ease), color var(--m-in) var(--m-ease); }
.calc__mode-opt:hover span { color: var(--ink); }
.calc__mode-opt input:checked + span { background: var(--action); color: var(--action-ink); }
.calc__mode-opt input:focus-visible + span { outline: 2px solid var(--action); outline-offset: 2px; }


/* the simulated lots: one input per day, the date set inside it */
.calc__days { border: 0; margin: 0; padding: 0; min-width: 0; }
.calc__days legend { padding: 0; margin-bottom: var(--s-2); font-size: var(--t-label); font-weight: 500; }
.calc__days-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); }
.calc__day { position: relative; display: block; }
.calc__day-date { position: absolute; left: 10px; top: 50%; translate: 0 -50%; font-size: var(--t-label); color: var(--muted); pointer-events: none; font-variant-numeric: tabular-nums; }
.calc__day input { width: 100%; height: 44px; padding: 0 10px 0 52px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--bg); color: var(--ink);
  font: 400 var(--t-body)/1 var(--font-text); font-variant-numeric: tabular-nums; text-align: right; }
.calc__day input:focus { outline: 0; border-color: var(--action); }
.calc__real-note { font-size: var(--t-small); line-height: 1.5; color: var(--ink); }
.calc .field input[aria-invalid='true'], .calc__day input[aria-invalid='true'] { border-color: var(--bh-danger); }

/* the consultation dialog: the form's own glowing panel, centred over a dim page */
.bh-modal { position: fixed; inset: 0; margin: auto; height: fit-content; width: min(560px, calc(100vw - 32px)); max-height: calc(100svh - 32px);
  padding: 0; border: 0; background: transparent; color: var(--ink); overflow: visible; }
.bh-modal[open] { animation: bh-pop .18s var(--m-ease); }
.bh-modal::backdrop { background: rgb(8 12 11 / 0.7); }
.bh-modal__box { position: relative; max-height: calc(100svh - 32px); overflow: auto; scrollbar-width: none; }
.bh-modal__close { position: absolute; top: 20px; right: 20px; z-index: 2; background: var(--bh-card); }
.bh-modal .calc__head { padding-right: 48px; }
@media (prefers-reduced-motion: reduce) { .bh-modal[open] { animation: none; } }

/* in the hero the wizard takes exactly the column's height; on a short screen (1024x768) it scrolls
   inside its own panel rather than run past the first screen */
@media (min-width: 1024px) {
  .bh-right { display: flex; flex-direction: column; min-height: 0; }
  .bh-right > .calc-glow { flex: 1 1 0; min-height: 0; height: auto; }
  .bh-right .calc { height: 100%; overflow-y: auto; overscroll-behavior: contain; }
}
@media (min-width: 1024px) and (max-height: 820px) {
  .calc__day input { height: 40px; }
  .calc__days legend { margin-bottom: 4px; }
}
/* below 1024 the wizard has its own section: the panel takes its content's height (the mode
   switch and the three day inputs make it taller than one phone screen, so #tool takes two there) */
#tool .calc-glow, #tool .calc { height: auto; }
@media (max-width: 639px) { #tool { --hm: 2; } }

/* the '?' beside the rate: a small round button whose bubble shows on hover and keyboard focus */
.calc__rate-dt { display: inline-flex; align-items: center; gap: 6px; }
.tip { position: relative; display: inline-grid; place-items: center; width: 16px; height: 16px; padding: 0; border: 1px solid var(--line-strong); border-radius: 50%;
  background: none; color: var(--muted); font: 600 10px/1 var(--font-text); cursor: help; }
.tip:hover, .tip:focus-visible { color: var(--ink); border-color: var(--ink); outline: 0; }
.tip__bubble { position: absolute; left: 50%; bottom: calc(100% + 8px); translate: -50% 4px; z-index: 5; width: max-content; max-width: 220px; padding: 8px 10px;
  border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--bg); color: var(--ink); font: 400 var(--t-label)/1.4 var(--font-text); text-align: left;
  box-shadow: 0 6px 20px rgb(0 0 0 / .35); opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--m-in) var(--m-ease), translate var(--m-in) var(--m-ease), visibility 0s linear var(--m-in); }
.tip:hover .tip__bubble, .tip:focus-visible .tip__bubble { opacity: 1; visibility: visible; translate: -50% 0; transition-delay: 0s; }

/* the header sits on the page's own ground at the top (no white bar over the hero's light), and only
   takes a frosted ground once the page scrolls under it (SiteHeaderComponent sets .is-scrolled) */
.nav { background: transparent; border-bottom-color: transparent;
  transition: background-color var(--m-in) var(--m-ease), border-color var(--m-in) var(--m-ease); }
.nav.is-scrolled { background: color-mix(in oklab, var(--bg) 80%, transparent); border-bottom-color: var(--line);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); }
.nav.is-open { background: var(--bg); }
.menu-col a:hover { color: var(--bh-action-text); }
@media (min-width: 1024px) {
  .nav:has(.nav__item:is(:hover, :focus-within) > .nav__menu) { background: var(--bg); border-bottom-color: var(--line); }
}

/* the details step: one label over one control per row, set close enough to fit the hero's column */
.calc form.calc__step { gap: var(--s-3); }
.calc .field, .calc .acct { gap: 6px; }
.calc__days legend { margin-bottom: 6px; }
@media (min-width: 1024px) { .bh-right .calc { padding-block: var(--s-5); } }
.calc__preview dd { white-space: nowrap; }
@media (max-width: 639px) { .calc__preview dd { font-size: 20px; } }

/* ------------------------------------------------------------------ the hero's commission journey
   five stations on one still scene (an isometric model on an invisible table), a glass tube joining
   them with a light running inside it, flat captions and a stepper that drives it all */
.journey { --jr-mint: var(--action); --jr-mint-deep: var(--bh-action-text); --jr-gold: #ffb300;
  display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
@media (min-width: 1024px) {
  .bh-left > .journey { flex: 1 1 0; min-height: 0; margin-top: var(--s-1); }
  .jr__view { flex: 1 1 0; min-height: 0; }
}
.jr__view { position: relative; container-type: size; display: grid; place-items: center; aspect-ratio: 1000 / 450; }
@media (min-width: 1024px) { .jr__view { aspect-ratio: auto; } }
.jr__stage { position: relative; width: min(100cqw, calc(100cqh * 1000 / 450)); aspect-ratio: 1000 / 450; container-type: inline-size; }
.jr__scene { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.jr__scene text { font-family: var(--font-text); font-variant-numeric: tabular-nums; }

/* pedestals and the soft shadow each casts on the page */
.jr__shadow { fill: rgb(80 40 0 / .16); }
.jr__ped, .jr__obj { transition: transform .7s var(--m-ease), opacity .6s var(--m-ease), filter .6s var(--m-ease); }
.jr__ped-t { fill: url(#jr-top); stroke: #fff; stroke-width: 1.5; }
.jr__ped-l { fill: #ecdfcc; }
.jr__ped-r { fill: #dccab0; }
.jr__ped-ring { fill: none; stroke: var(--jr-mint); stroke-width: 2.5; opacity: 0; transition: opacity .5s var(--m-ease); }
.jr__ped.is-done .jr__ped-ring { opacity: .35; }
.jr__ped.is-on { transform: translateY(-4px) scale(1.04); }
.jr__ped.is-on .jr__ped-ring { opacity: 1; animation: jr-ring 2.4s ease-in-out infinite; }
@keyframes jr-ring { 50% { stroke-width: 5; opacity: .55; } }

/* the tube: a soft shadow, a tan edge, the glass, the mint fill up to the light, one highlight */
.jr__tube-shade, .jr__tube, .jr__tube-fill, .jr__tube-hi { fill: none; stroke-linecap: round; }
.jr__tube-shade { stroke: rgb(150 110 70 / .28); stroke-width: 15; filter: drop-shadow(0 7px 6px rgb(80 40 0 / .16)); }
.jr__tube { stroke: rgb(255 255 255 / .82); stroke-width: 11; }
.jr__tube-fill { stroke: var(--jr-mint); stroke-width: 4; stroke-dasharray: 0 4000; }
.jr__tube-hi { stroke: #fff; stroke-width: 1.6; opacity: .9; transform: translateY(-3px); }
.jr__light-halo { fill: var(--jr-mint); opacity: .6; transition: fill .4s; transform-box: fill-box; transform-origin: center; animation: jr-breathe 1.6s ease-in-out infinite; }
.jr__light-core { fill: #fff; stroke: var(--jr-mint); stroke-width: 3; transition: stroke .4s; }
.jr__light.is-gold .jr__light-halo { fill: var(--jr-gold); opacity: .8; }
.jr__light.is-gold .jr__light-core { stroke: #ff9100; }
@keyframes jr-breathe { 50% { transform: scale(1.35); opacity: .35; } }

/* the objects: the lit one clear and lifted, the others resting quieter */
.jr__obj { opacity: .66; filter: saturate(.5); }
.jr__obj.is-done { opacity: .78; filter: saturate(.7); }
.jr__obj.is-on { opacity: 1; filter: none; transform: translateY(-9px) scale(1.07); }
.jr-glass { fill: url(#jr-glass); stroke: #fff; stroke-width: 1.5; filter: drop-shadow(0 10px 10px rgb(80 40 0 / .14)); }
.jr-line { fill: rgb(31 23 17 / .55); }
.jr-line--soft { fill: rgb(31 23 17 / .18); }
.jr-plate { fill: rgb(255 255 255 / .55); stroke: #fff; stroke-width: 1.2; }

/* 1 KYC: a frosted ID card, a light sweeps over it and the check pops in front */
.jr-kyc__band { fill: rgb(79 209 197 / .2); }
.jr-kyc__face { fill: rgb(79 209 197 / .22); }
.jr-kyc__head { fill: var(--jr-mint-deep); opacity: .75; }
.jr-kyc__sweep { opacity: 0; }
.jr__obj--kyc.is-on .jr-kyc__sweep { opacity: 1; animation: jr-sweep 3.2s var(--m-ease) .25s infinite; }
@keyframes jr-sweep { 0% { transform: translateX(0); } 45%, 100% { transform: translateX(300px); } }
.jr-badge { transform-box: fill-box; transform-origin: center; opacity: 0; transform: scale(.4); transition: opacity .4s, transform .4s var(--m-ease); }
.jr-badge circle { fill: var(--jr-mint); stroke: #fff; stroke-width: 3; filter: drop-shadow(0 6px 8px rgb(4 120 87 / .3)); }
.jr-badge path { fill: none; stroke: var(--action-ink); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.jr__obj--kyc.is-done .jr-badge { opacity: 1; transform: none; }
.jr__obj--kyc.is-on .jr-badge { opacity: 1; transform: none; animation: jr-pop .55s var(--m-ease) .9s both; }
@keyframes jr-pop { from { opacity: 0; transform: scale(.4); } 70% { transform: scale(1.12); } to { opacity: 1; transform: scale(1); } }

/* 2 link: two account blocks close in and the beam between them lights up */
.jr-cube__t { fill: #fff; }
.jr-cube__l { fill: #efe3d1; }
.jr-cube__r { fill: #ddcbb1; }
.jr-cube path { stroke: rgb(255 255 255 / .9); stroke-width: 1; stroke-linejoin: round; }
.jr-cube__dot { fill: var(--jr-mint); }
.jr-cube--b .jr-cube__dot { fill: var(--jr-gold); }
.jr-cube { transition: transform .8s var(--m-ease); }
.jr__obj--link.is-on .jr-cube--a { transform: translate(7px, -3px); }
.jr__obj--link.is-on .jr-cube--b { transform: translate(-7px, 3px); }
.jr-beam { fill: none; stroke: var(--jr-mint); stroke-width: 5; stroke-linecap: round; opacity: .2; transition: opacity .5s .4s; }
.jr__obj--link:is(.is-on, .is-done) .jr-beam { opacity: 1; }
.jr__obj--link.is-on .jr-beam { filter: drop-shadow(0 0 5px var(--jr-mint)); animation: jr-flicker 2s ease-in-out .9s infinite; }
@keyframes jr-flicker { 50% { opacity: .55; } }
.jr-chain rect { fill: none; stroke: var(--jr-mint-deep); stroke-width: 4.5; opacity: .45; transition: opacity .5s .5s; }
.jr__obj--link:is(.is-on, .is-done) .jr-chain rect { opacity: 1; }

/* 3 trade: candles on a small stand breathe, and a closed-trade ticket floats out */
.jr-candle line { stroke: #9a8670; stroke-width: 2; }
.jr-candle rect { fill: #d2c0a8; }
.jr-candle.is-up line { stroke: #2fa89c; }
.jr-candle.is-up rect { fill: var(--jr-mint); }
.jr__obj--trade.is-on .jr-candle rect { transform-box: fill-box; transform-origin: 50% 100%; animation: jr-candle 2.6s ease-in-out infinite; animation-delay: calc(var(--k) * .16s); }
@keyframes jr-candle { 50% { transform: scaleY(.78); } }
.jr-ticket { transform-box: fill-box; transform-origin: center; opacity: 0; transform: translateY(10px); transition: opacity .4s, transform .4s; }
.jr-ticket circle { fill: var(--jr-mint); }
.jr-ticket path { fill: none; stroke: var(--action-ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.jr-ticket text { font-size: 15px; font-weight: 600; fill: var(--ink); }
.jr__obj--trade.is-done .jr-ticket { opacity: .9; transform: none; }
.jr__obj--trade.is-on .jr-ticket { opacity: 1; transform: none; animation: jr-rise .6s var(--m-ease) .8s both; }
@keyframes jr-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* 4 reconcile: data bits fly into a checking ring and turn into the commission figure */
.jr-ring { fill: none; stroke: rgb(255 255 255 / .9); stroke-width: 10; filter: drop-shadow(0 8px 8px rgb(80 40 0 / .14)); }
.jr-ring-dash { fill: none; stroke: var(--jr-mint); stroke-width: 2.5; stroke-dasharray: 9 13; stroke-linecap: round; }
.jr__obj--recon.is-on .jr-ring-dash { animation: jr-dash 1.6s linear infinite; }
@keyframes jr-dash { to { stroke-dashoffset: -44; } }
.jr-bit { fill: var(--jr-mint); opacity: 0; }
.jr-bit.is-gold { fill: var(--jr-gold); }
.jr__obj--recon.is-on .jr-bit { animation: jr-bit 2.4s cubic-bezier(.5, 0, .3, 1) infinite; animation-delay: calc(var(--k) * .11s); }
@keyframes jr-bit {
  0% { opacity: 0; transform: translate(var(--x), var(--y)); }
  12% { opacity: 1; }
  62% { opacity: 1; transform: translate(0, 0) scale(.7); }
  72%, 100% { opacity: 0; transform: translate(0, 0) scale(.2); }
}
.jr-sum { font-size: 23px; font-weight: 700; fill: var(--jr-mint-deep); text-anchor: middle; opacity: 0; transform-box: fill-box; transform-origin: center; }
.jr__obj--recon.is-done .jr-sum { opacity: 1; }
.jr__obj--recon.is-on .jr-sum { opacity: 1; animation: jr-pop .5s var(--m-ease) 1.4s both; }

/* 5 payout: a wallet with a card in it, gold coins, and the amount that counts up as the light lands */
.jr-coins ellipse { fill: url(#jr-gold); stroke: #e08a00; stroke-width: 1.2; }
.jr__obj--payout.is-on .jr-coins { animation: jr-hop 2.4s ease-in-out 1s infinite; }
@keyframes jr-hop { 0%, 60%, 100% { transform: none; } 75% { transform: translateY(-7px); } }
.jr-card { fill: var(--jr-mint); stroke: #fff; stroke-width: 1.5; transition: transform .7s var(--m-ease); }
.jr__obj--payout.is-on .jr-card { transform: translateY(-8px); }
.jr-wallet { filter: drop-shadow(0 12px 12px rgb(60 30 0 / .25)); }
.jr-wallet__flap { fill: rgb(255 255 255 / .07); }
.jr-wallet__clasp { fill: #3a2414; stroke: var(--jr-gold); stroke-width: 2; }
.jr-amount { transform-box: fill-box; transform-origin: center; opacity: 0; transform: translateY(10px); transition: opacity .4s, transform .4s; }
.jr-amount rect { fill: #fff; stroke: #ffc400; stroke-width: 2.5; filter: drop-shadow(0 10px 12px rgb(160 90 0 / .22)); }
.jr-amount text { font-size: 21px; font-weight: 700; fill: #7a4500; text-anchor: middle; }
.jr__obj--payout.is-on .jr-amount { opacity: 1; transform: none; animation: jr-rise .5s var(--m-ease) both; }

/* captions: flat glass notes beside the lit station */
.jr__cap { position: absolute; z-index: 2; width: clamp(220px, 37%, 290px); margin: 0; display: grid; gap: 5px; padding: 12px 14px 13px;
  border: 1px solid rgb(255 255 255 / .95); border-radius: 14px; background: rgb(255 255 255 / .7); color: var(--ink);
  box-shadow: 0 14px 34px -14px rgb(80 40 0 / .3); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  opacity: 0; translate: 0 10px; pointer-events: none; transition: opacity .4s var(--m-ease), translate .4s var(--m-ease); }
.jr__cap.is-on { opacity: 1; translate: 0 0; transition-delay: .2s; }
.jr__kicker { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--jr-mint-deep); }
.jr__title { font: 600 15px/1.25 var(--font-text); }
.jr__line { font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.jr__status { justify-self: start; display: inline-flex; align-items: center; gap: 5px; margin-top: 3px; padding: 3px 9px 3px 7px; border-radius: 999px;
  background: rgb(79 209 197 / .16); color: var(--jr-mint-deep); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.jr__status svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.jr__status--gold { background: rgb(255 179 0 / .18); color: #8a5300; }
.jr__cap--below { display: none; position: static; width: auto; opacity: 1; translate: none; pointer-events: auto; }

/* the stepper: five points on a thin line, mint up to the current one, its timer running to the next */
.jr__nav { display: flex; align-items: flex-start; gap: var(--s-3); }
.jr__steps { flex: 1 1 auto; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.jr__steps li { position: relative; display: flex; justify-content: center; }
.jr__steps button { position: relative; z-index: 1; display: grid; justify-items: center; gap: 7px; padding: 0 2px; border: 0; background: none; cursor: pointer;
  color: var(--muted); font: 500 var(--t-label)/1.2 var(--font-text); transition: color var(--m-in) var(--m-ease); }
.jr__steps button:hover, .jr__steps li.is-on button { color: var(--ink); }
.jr__node { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line-strong); background: var(--bg);
  transition: background-color .4s, border-color .4s, box-shadow .4s; }
.jr__steps li.is-done .jr__node { background: var(--jr-mint); border-color: var(--jr-mint); }
.jr__steps li.is-on .jr__node { border-color: var(--jr-mint); background: #fff; box-shadow: 0 0 0 5px rgb(79 209 197 / .25); }
.jr__bar { position: absolute; top: 6px; left: calc(50% + 13px); width: calc(100% - 26px); height: 2px; border-radius: 2px; background: var(--line-strong); overflow: hidden; }
.jr__steps li.is-done .jr__bar { background: var(--jr-mint); }
.jr__bar i { display: block; height: 100%; background: var(--jr-mint); transform-origin: left; animation: jr-time linear both; }
@keyframes jr-time { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.jr__pause { flex: none; display: grid; place-items: center; width: 32px; height: 32px; margin-top: -9px; padding: 0; border: 1px solid var(--line-strong); border-radius: 50%;
  background: rgb(255 255 255 / .6); color: var(--ink); cursor: pointer; }
.jr__pause:hover { border-color: var(--ink); }
.jr__pause svg { width: 14px; height: 14px; }
.journey.is-paused :is(.jr__bar i, .jr__ped-ring, .jr__light-halo, .jr-kyc__sweep, .jr-beam, .jr-candle rect, .jr-ring-dash, .jr-bit, .jr-coins) { animation-play-state: paused; }

/* a phone: the scene is shown larger and pans to the station in play; the caption sits under it */
@media (max-width: 639px) {
  .jr__view { aspect-ratio: 1 / .86; overflow: hidden; place-items: center start; }
  .jr__stage { width: 190cqw; translate: clamp(-90cqw, calc(50cqw - var(--cx) * 1.9cqw), 0px) 0; transition: translate 1.1s var(--m-ease); }
  .jr__stage .jr__cap { display: none; }
  .jr__cap--below { display: grid; min-height: 118px; }
  .jr__name { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .journey *, .journey *::before { animation: none !important; transition: none !important; }
}
/* a small scene (the hero column at 1024-1279): the caption keeps its title and status only */
@container (max-width: 620px) {
  .jr__stage .jr__cap { width: 190px; gap: 3px; padding: 9px 11px 10px; }
  .jr__stage .jr__line { display: none; }
  .jr__stage .jr__title { font-size: 13px; }
  .jr__stage .jr__status { font-size: 11px; }
}

/* on a wide screen the scene runs half way out into the free margin, the last station staying on the
   column's right edge: the scene grows into it */
@media (min-width: 1024px) {
  .bh-left > .journey .jr__view { --jr-bleed: calc(max(var(--gut), (100vw - var(--container)) / 2) * .5);
    margin-left: calc(-1 * var(--jr-bleed)); justify-items: end; align-items: end; }
}
.jr__flow circle { fill: var(--jr-mint); opacity: .85; }
.jr__flow circle.is-gold { fill: var(--jr-gold); }
@media (max-width: 639px), (prefers-reduced-motion: reduce) { .jr__flow { display: none; } }
.jr__source-ring { fill: rgb(255 255 255 / .9); stroke: rgb(150 110 70 / .3); stroke-width: 1.5; filter: drop-shadow(0 4px 5px rgb(80 40 0 / .15)); }
.jr__source-dot { fill: var(--jr-mint); }

/* ------------------------------------------------------------------ the wizard as a stylised phone
   a champagne metal shell with a thin bezel, an ivory screen whose height follows its content, and
   a faint cyan light around the edge (the journey's colour); the form inside stays flat and plain */
.calc-glow { --action: #4fd1c5; --action-ink: #ffffff; --bh-cyan-deep: #0f766e;
  position: relative; isolation: isolate; display: flex; flex-direction: column; width: min(410px, 100%); height: auto;
  padding: 9px; border-radius: 40px; animation: none;
  background: linear-gradient(150deg, #fbf5ea 0%, #d8c8ad 22%, #f7efe1 46%, #c8b697 72%, #efe4d1 100%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .75), inset 0 3px 3px rgb(255 255 255 / .55), inset 0 -3px 4px rgb(90 60 20 / .2),
    0 0 0 1px rgb(140 110 70 / .32), 0 3px 0 1px rgb(176 148 106 / .45), 0 44px 70px -30px rgb(60 30 0 / .42), 0 0 48px rgb(79 209 197 / .32); }
.calc-glow:is(:hover, :focus-within) { animation: none; }
/* the side keys: two volume keys on the left, the power key on the right */
.calc-glow::before, .calc-glow:is(:hover, :focus-within)::before { content: ""; position: absolute; inset: auto; left: -3px; top: 128px; z-index: -1;
  width: 4px; height: 52px; border-radius: 3px 0 0 3px; background: linear-gradient(90deg, #b9a481, #e9dcc5); filter: none; opacity: 1; animation: none;
  box-shadow: 0 66px 0 0 #cfbd9d; }
:is(.bh-right > .calc-glow, .calc-glow)::after { content: ""; position: absolute; inset: auto; right: -3px; top: 168px; z-index: -1;
  width: 4px; height: 76px; border-radius: 0 3px 3px 0; background: linear-gradient(90deg, #e9dcc5, #b9a481); filter: none; }
.calc-glow > .calc { position: relative; flex: 0 1 auto; min-height: 0; height: auto; overflow-y: auto; padding: 32px 22px 18px;
  border: 0; border-radius: 31px; background: #fffcf6; box-shadow: inset 0 0 0 1px rgb(120 90 50 / .12); scrollbar-width: none; }
.calc__cam { position: absolute; top: 13px; left: 50%; translate: -50% 0; width: 11px; height: 11px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #4b5563, #0b0f14 62%); box-shadow: 0 0 0 2px rgb(0 0 0 / .05); }

/* header: the title, then the two steps joined by a line */
.calc-glow .calc__head { display: grid; justify-content: stretch; gap: 8px; }
.calc-glow .calc__title { font: 600 23px/1.15 var(--font-display); letter-spacing: -.015em; }
.calc-glow .calc__steps { align-items: center; gap: 10px; }
.calc-glow .calc__steps li { font-size: 13px; }
.calc-glow .calc__steps li:not(:last-child) { flex: 1 1 auto; }
.calc-glow .calc__steps li:not(:last-child)::after { content: ""; flex: 1 1 auto; height: 1px; margin-left: 4px; background: var(--line-strong); }
.calc-glow .calc__steps li::before { width: 24px; height: 24px; }
.calc-glow .calc__steps li.is-done::before { background: rgb(79 209 197 / .18); border-color: var(--bh-cyan-deep); color: var(--bh-cyan-deep); }
.calc-glow .calc__body { padding-top: 14px; }
.calc-glow form.calc__step { gap: 10px; }

/* the mode switch: a full-width segmented control with icons */
.calc-glow .calc__mode { align-self: stretch; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border: 1px solid #ebe3d6; border-radius: 14px; background: #f5f0e7; }
.calc-glow .calc__mode-opt span { display: flex; justify-content: center; align-items: center; gap: 7px; height: 34px; border-radius: 10px; font-size: 14px; font-weight: 600; }
.calc-glow .calc__mode-opt svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.calc-glow .calc__mode-opt input:checked + span { background: linear-gradient(135deg, #c9f3ee, #86e0d7); color: #0b4f49; box-shadow: 0 4px 12px -4px rgb(79 209 197 / .55), inset 0 1px 0 rgb(255 255 255 / .6); }

/* fields: a clear label over a soft, rounded control */
.calc-glow .field, .calc-glow .acct legend, .calc-glow .calc__days legend { font-size: 14px; font-weight: 600; color: var(--ink); }
.calc-glow :is(.field input, .field select, .pick, .calc__day input) { height: 42px; border: 1px solid #e4dacb; border-radius: 12px; background-color: #fff; }
.calc-glow :is(.field input, .calc__day input):focus, .calc-glow .field select:focus { outline: 0; border-color: var(--bh-cyan-deep); box-shadow: 0 0 0 3px rgb(79 209 197 / .22); }
.calc-glow .acct__opts { gap: 8px; }
.calc-glow .acct__opt span { display: flex; justify-content: center; align-items: center; gap: 5px; height: 38px; padding: 0 6px; font-size: 13px; white-space: nowrap; border-color: #e4dacb; border-radius: 12px; background: #fbf8f2; }
.calc-glow .acct__opt span svg { display: none; width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.calc-glow .acct__opt input:checked + span { background: #0e3f3b; border-color: #0e3f3b; color: #fff; }
.calc-glow .acct__opt input:checked + span svg { display: block; }
.calc-glow .calc__day-date { left: 0; top: 0; bottom: 0; translate: none; display: grid; place-items: center; width: 52px; border-right: 1px solid #e4dacb;
  border-radius: 12px 0 0 12px; background: #f5f0e7; }
.calc-glow .calc__day input { padding: 0 10px 0 62px; text-align: left; font-weight: 600; }
.calc__ico-field { position: relative; display: block; font-weight: 400; }
.calc__ico-field svg { position: absolute; left: 14px; top: 50%; translate: 0 -50%; width: 16px; height: 16px; fill: none; stroke: var(--muted); stroke-width: 1.4; stroke-linejoin: round; pointer-events: none; }
.calc-glow .calc__ico-field input { padding-left: 42px; }

/* the running total on a pale mint ground, and the cyan call to action */
.calc-glow .calc__preview { gap: 0; margin: 2px 0 0; padding: 10px 16px; border: 1px solid rgb(79 209 197 / .28); border-radius: 14px;
  background: linear-gradient(135deg, rgb(79 209 197 / .14), rgb(79 209 197 / .08)); }
.calc-glow .calc__preview > div + div { padding-left: 16px; border-left: 1px solid rgb(11 143 134 / .2); }
.calc-glow .calc__preview > div:first-child { padding-right: 12px; }
.calc-glow .calc__preview dd { font-size: 21px; font-weight: 600; }
.calc-glow .calc .btn--primary { height: 48px; border-radius: 14px; font-size: 17px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #6fdccf, #4fd1c5 55%, #3fbfb3); box-shadow: 0 12px 24px -10px rgb(79 209 197 / .8), inset 0 1px 0 rgb(255 255 255 / .5); }
.calc-glow .calc .btn--primary:hover { background: linear-gradient(135deg, #5fd5c8, #42c4b8 55%, #34b0a5); }
.calc-glow .calc__note { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--muted); text-align: left; }
.calc-glow .calc__note svg { flex: none; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }
.calc-glow button.calc__history-link { color: var(--bh-cyan-deep); }

/* the receipt: once the statement is ready it slides up out of the phone's bottom edge into the
   free space under the statement, sticking out past the frame, clear of every field and button */
.calc-receipt { position: absolute; right: -28px; top: calc(100% - 104px); z-index: 2; width: 252px;
  filter: drop-shadow(0 18px 22px rgb(60 30 0 / .22)) drop-shadow(0 0 1px rgb(120 90 50 / .3));
  animation: bh-receipt .8s var(--m-ease) .2s both; }
.calc-receipt__paper { display: grid; gap: 3px; padding: 16px 18px 22px; border-radius: 14px 14px 0 0; background: #fdfbf6;
  --z: 8px; -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / calc(2 * var(--z)) 100%;
  mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / calc(2 * var(--z)) 100%; }
.calc-receipt p { margin: 0; }
.calc-receipt__status { display: flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 600; color: var(--ink); }
.calc-receipt__status svg { width: 22px; height: 22px; }
.calc-receipt__status circle { fill: #4fd1c5; }
.calc-receipt__status path { fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.calc-receipt__amount { font: 700 29px/1.1 var(--font-display); letter-spacing: -.02em; color: #0e2a27; font-variant-numeric: tabular-nums; }
.calc-receipt__sub { font-size: 13px; color: var(--muted); }
@keyframes bh-receipt { from { transform: translateY(36px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .calc-receipt { animation: none; } }

/* the hero: the phone takes its content's height on the column's right, set a little past the
   container's right edge so it sits freely (the screen scrolls inside only on a short window) */
@media (min-width: 1024px) {
  .bh-right { align-items: flex-end; contain: size; }
  .bh-right > .calc-glow { flex: none; min-height: 0; max-height: calc(100% + 44px); height: auto;
    margin-right: calc(-1 * clamp(12px, (100vw - var(--container)) / 2 * .35, 56px)); }
  .bh-right .calc-glow > .calc { height: auto; padding-block: 30px 16px; }
}
@media (min-width: 1024px) and (max-height: 940px) { .bh-right .calc-glow .calc__note { display: none; } }
/* the single-panel page and the tablet section: the phone centred */
.bh-solo__panel.calc-glow, #tool .calc-glow { margin-inline: auto; }
/* a phone: no device shell, the form uses the full width; the receipt follows the form */
@media (max-width: 639px) {
  .calc-glow { width: 100%; padding: 0; border-radius: var(--r-lg); background: none; box-shadow: none; }
  .calc-glow::before, .calc-glow::after { display: none; }
  .calc-glow > .calc { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bh-card); box-shadow: var(--bh-card-shadow); padding: var(--s-5) var(--s-4); }
  .calc__cam { display: none; }
  .calc-receipt { position: relative; top: auto; right: auto; z-index: 0; width: auto; margin: 12px 0 0; }
  .calc-receipt__paper { padding-top: 16px; }
}

/* the result inside the phone: the statement set tighter so the receipt has room under the phone */
.calc-glow .calc__step[tabindex="-1"]:focus { outline: none; }
.calc-glow .calc__step[data-step="2"] { gap: 12px; }
.calc-glow .rep__amount { font-size: 32px; }
.calc-glow .rep__table td { padding: 6px 0; }
.calc-glow .rep__guide { gap: 4px; font-size: 12.5px; line-height: 1.4; }
.calc-glow .rep__acts { flex-wrap: nowrap; gap: 14px; }
.calc-glow .rep__acts .btn { height: 42px; border-radius: 12px; }
.calc-glow .rep__acts .link { font-size: 13px; white-space: nowrap; }

/* on a large window the phone scales up with it (zoom keeps every proportion inside); only where
   the column has the height for it, so the screen never has to scroll */
@media (min-width: 1600px) and (min-height: 960px) { .bh-right > .calc-glow { zoom: 1.1; } }
@media (min-width: 1800px) and (min-height: 1040px) { .bh-right > .calc-glow { zoom: 1.2; } }
@media (min-width: 2100px) and (min-height: 1180px) { .bh-right > .calc-glow { zoom: 1.3; } }

/* every view of the wizard shares one cell: the form stays in the layout (hidden, inert) under the
   others, so the panel keeps its height from step to step */
.calc__body { display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); }
.calc__body > .calc__step { grid-area: 1 / 1; min-width: 0; }
.calc__step.is-away { visibility: hidden; pointer-events: none; }
.calc-glow .rep__acts { margin-top: 4px; }