/*
Theme Name: Bid Rally
Theme URI: https://example.com/bid-rally
Author: Bid Rally
Author URI: https://example.com
Description: Performance marketing and mobile user acquisition site for Bid Rally. Deep blue dark theme with a landing page and eight content pages.
Version: 1.7.14
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bidrally
*/

/* ============================================================
   1. Tokens
   ============================================================ */
:root {
  --br-bg: #060A16;
  --br-ink: #FFFFFF;
  --br-body: #AEBED8;
  --br-body-soft: #A6B6D1;
  --br-muted: #93A5C2;
  --br-faint: #74869F;
  --br-eyebrow: #83A2D6;
  --br-line: rgba(165, 200, 255, 0.19);
  --br-line-soft: rgba(165, 200, 255, 0.14);
  --br-surface: linear-gradient(180deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.028));
  --br-accent: #8FBAFF;
  --br-accent-bright: #C2DBFF;
  --br-tile-bd: rgba(175, 210, 255, 0.30);
  --br-tile-bg: rgba(130, 180, 255, 0.16);
  --br-tile-fg: #BDD8FF;
  --br-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --br-max: 1200px;
  --br-pad: 120px;
}

/* ============================================================
   2. Base
   ============================================================ */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--br-bg);
  color: var(--br-body);
  font-family: 'Manrope', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5 {
  font-family: 'Sora', 'Segoe UI', system-ui, -apple-system, sans-serif;
  margin: 0;
  color: var(--br-ink);
  letter-spacing: -0.032em;
  font-weight: 600;
  line-height: 1.14;
}

p { margin: 0; }

a { color: var(--br-accent); text-decoration: none; }
a:hover { color: var(--br-accent-bright); }

img { max-width: 100%; height: auto; }

::selection { background: rgba(120, 175, 255, 0.32); color: #fff; }

.br-skip {
  position: absolute; left: -9999px; top: 0;
  background: #fff; color: #06080F; padding: 12px 18px; z-index: 999; border-radius: 0 0 8px 0;
}
.br-skip:focus { left: 0; }

:focus-visible { outline: 2px solid #8FBAFF; outline-offset: 3px; border-radius: 4px; }

/* ============================================================
   3. Layout
   ============================================================ */
/* No overflow here, ever: any ancestor with overflow other than visible
   silently disables position:sticky for everything inside it — this is
   what broke the scroll sequence's pin. Horizontal clipping for the
   decorative blooms is handled by body's overflow-x:hidden instead,
   which does not carry the same risk for the root scrolling element. */
.br-page { position: relative; }

.br-container {
  position: relative;
  max-width: var(--br-max);
  margin: 0 auto;
  padding: 0 var(--br-pad);
  max-width: calc(var(--br-max) + var(--br-pad) * 2);
}

.br-section { position: relative; padding: 132px 0 0; }
.br-section--tight { padding-top: 100px; }
.br-section--last { padding-bottom: 40px; }

/* ambient light fields */
.br-glow { position: absolute; left: 0; right: 0; pointer-events: none; z-index: 0; }
.br-glow--top {
  top: 0; height: 1780px;
  background:
    radial-gradient(1260px 840px at 50% -8%, rgba(46, 124, 255, 0.70), transparent 60%),
    radial-gradient(880px 620px at 89% 3%, rgba(96, 172, 255, 0.36), transparent 64%),
    radial-gradient(940px 680px at 5% 20%, rgba(33, 92, 238, 0.36), transparent 66%);
}
.br-glow--mid {
  top: 2850px; height: 1600px;
  background:
    radial-gradient(1040px 660px at 84% 26%, rgba(48, 118, 250, 0.30), transparent 64%),
    radial-gradient(820px 560px at 8% 68%, rgba(76, 152, 255, 0.22), transparent 66%);
}
.br-glow--bottom {
  bottom: 0; height: 1200px;
  background: radial-gradient(1150px 660px at 50% 98%, rgba(52, 126, 255, 0.40), transparent 62%);
}
.br-glow--page {
  top: 0; height: 1100px;
  background:
    radial-gradient(1100px 620px at 50% -14%, rgba(46, 124, 255, 0.55), transparent 62%),
    radial-gradient(760px 540px at 88% 6%, rgba(96, 172, 255, 0.26), transparent 66%);
}

/* ============================================================
   4. Header / nav
   ============================================================ */
.br-header { position: relative; z-index: 20; }

.br-nav {
  display: flex; align-items: center; justify-content: space-between; gap: 40px;
  padding: 30px 0;
}

.br-logo { display: inline-flex; align-items: center; gap: 11px; }
.br-logo__mark { display: block; }
.br-logo__text {
  font-family: 'Sora', system-ui, sans-serif;
  font-size: 17px; font-weight: 600; color: #fff; letter-spacing: -0.02em;
}

.br-nav__links { display: flex; align-items: center; gap: 38px; list-style: none; margin: 0; padding: 0; }
.br-nav__links a {
  position: relative; font-size: 14.5px; color: #B7C8E4; transition: color 0.28s ease;
}
.br-nav__links a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -7px; height: 1px;
  background: linear-gradient(90deg, #8FBAFF, rgba(143, 186, 255, 0.15));
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.38s var(--br-ease);
}
.br-nav__links a:hover { color: #fff; }
.br-nav__links a:hover::after,
.br-nav__links .current-menu-item > a::after { transform: scaleX(1); }
.br-nav__links .current-menu-item > a { color: #fff; }

.br-burger {
  display: none; width: 44px; height: 44px; align-items: center; justify-content: center;
  background: none; border: 0; color: #D3DFF2; cursor: pointer; padding: 0;
}

.br-mobilenav { display: none; }
.br-mobilenav.is-open { display: block; padding: 0 0 22px; }
.br-mobilenav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.br-mobilenav a {
  display: block; padding: 14px 4px; font-size: 16px; color: #C6D5EC;
  border-bottom: 1px solid var(--br-line-soft);
}

/* ============================================================
   5. Buttons
   ============================================================ */
.br-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 15px 26px; border-radius: 999px;
  font-size: 15px; font-weight: 600;
  font-family: 'Sora', system-ui, sans-serif; letter-spacing: -0.01em;
  border: 1px solid transparent; cursor: pointer;
}
.br-btn--sm { padding: 11px 20px; font-size: 14px; }

.br-btn--primary {
  background: #fff; color: #06080F;
  box-shadow: 0 10px 34px -14px rgba(150, 200, 255, 0.6);
  transition: transform 0.3s var(--br-ease), box-shadow 0.3s ease, filter 0.3s ease;
}
.br-btn--primary:hover {
  color: #06080F; transform: translateY(-2px);
  box-shadow: 0 18px 48px -12px rgba(160, 205, 255, 0.9); filter: brightness(1.04);
}
.br-btn--primary:active { transform: translateY(0); }
.br-btn--primary svg { transition: transform 0.3s var(--br-ease); }
.br-btn--primary:hover svg { transform: translateX(4px); }

.br-btn--ghost {
  background: rgba(255, 255, 255, 0.06); color: #E4EDFB;
  border-color: rgba(180, 212, 255, 0.32); font-weight: 500;
  transition: transform 0.3s var(--br-ease), background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.br-btn--ghost:hover {
  transform: translateY(-2px); background: rgba(255, 255, 255, 0.09);
  border-color: rgba(175, 210, 255, 0.46); color: #fff;
}
.br-btn--ghost:active { transform: translateY(0); }

.br-btnrow { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.br-btnrow--center { justify-content: center; }

/* ============================================================
   6. Type helpers
   ============================================================ */
.br-eyebrow {
  font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--br-eyebrow); font-weight: 600;
}
.br-h1 { font-size: 78px; line-height: 1.06; text-shadow: 0 4px 60px rgba(90, 150, 255, 0.4); }
.br-h2 { font-size: 46px; }
.br-h3 { font-size: 23px; line-height: 1.28; }
.br-lead { font-size: 19px; line-height: 1.62; color: #B4C4DE; }
.br-body { font-size: 16px; line-height: 1.7; color: var(--br-body-soft); }
.br-small { font-size: 13.5px; color: #8496B3; }

.br-head { display: flex; flex-direction: column; gap: 20px; max-width: 720px; }
.br-head--center { max-width: 780px; margin: 0 auto; align-items: center; text-align: center; }

.br-pill {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 17px; border-radius: 999px;
  border: 1px solid rgba(170, 205, 255, 0.34); background: rgba(140, 185, 255, 0.14);
  font-size: 12.5px; letter-spacing: 0.10em; text-transform: uppercase;
  color: #CBDDFA; font-weight: 600;
}
.br-pill__dot {
  width: 6px; height: 6px; border-radius: 999px; background: #6FF0C6;
  box-shadow: 0 0 10px rgba(111, 240, 198, 0.9);
}

/* ============================================================
   7. Hero
   ============================================================ */
.br-hero { position: relative; text-align: center; padding: 116px 0 0; display: flex; flex-direction: column; align-items: center; }
.br-hero .br-h1 { margin-top: 34px; max-width: 960px; }
.br-hero .br-lead { margin-top: 28px; max-width: 660px; }
.br-hero .br-btnrow { margin-top: 42px; }

.br-hero__art { position: relative; width: 100%; height: 340px; margin-top: 34px; }
.br-bloom {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 700px; height: 340px; border-radius: 999px; filter: blur(20px);
  background: radial-gradient(closest-side, rgba(196, 224, 255, 0.62), rgba(86, 152, 255, 0.28) 52%, transparent 76%);
  animation: br-bloom 7s ease-in-out infinite;
}
.br-spark {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(0deg);
  animation: br-spark 5.5s linear infinite;
}
@keyframes br-bloom {
  0%, 100% { opacity: 0.9; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.045); }
}
/* Continuous spin, twice the rate of the wobble this replaced (was an
   11s back-and-forth 6deg wobble; this is a full rotation in half that
   time). Linear timing, not ease-in-out, so the spin reads as a steady
   rate rather than speeding up and slowing down every turn. */
@keyframes br-spark {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

/* page hero (sub pages) */
.br-pagehero { position: relative; text-align: center; padding: 104px 0 0; }
.br-pagehero .br-h1 { font-size: 60px; margin-top: 26px; max-width: 900px; margin-left: auto; margin-right: auto; }
.br-pagehero .br-lead { margin-top: 24px; max-width: 640px; margin-left: auto; margin-right: auto; }

/* ============================================================
   8. Cards / grids
   ============================================================ */
.br-grid { display: grid; gap: 22px; }
.br-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.br-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.br-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.br-mt-56 { margin-top: 56px; }
.br-mt-42 { margin-top: 42px; }
.br-mt-32 { margin-top: 32px; }

.br-card {
  display: flex; flex-direction: column; gap: 20px;
  padding: 36px 32px 40px; border-radius: 22px;
  border: 1px solid var(--br-line); background: var(--br-surface);
  transition: transform 0.45s var(--br-ease), border-color 0.45s ease, box-shadow 0.45s ease;
}
.br-card:hover {
  transform: translateY(-7px);
  border-color: rgba(150, 195, 255, 0.42);
  box-shadow: 0 30px 70px -26px rgba(40, 110, 255, 0.8);
}
.br-card--feature {
  padding: 40px 38px 42px; border-radius: 24px;
  background: linear-gradient(158deg, rgba(78, 143, 255, 0.26), rgba(255, 255, 255, 0.03) 60%);
  border-color: rgba(165, 200, 255, 0.20);
}

.br-itile {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 13px; flex: 0 0 auto;
  border: 1px solid var(--br-tile-bd); background: var(--br-tile-bg); color: var(--br-tile-fg);
  transition: border-color 0.45s ease, background 0.45s ease, box-shadow 0.45s ease, color 0.45s ease;
}
.br-card:hover .br-itile,
.br-row:hover .br-itile {
  border-color: rgba(170, 210, 255, 0.48); background: rgba(135, 185, 255, 0.24);
  color: #E4F0FF; box-shadow: 0 0 30px -6px rgba(125, 180, 255, 0.75);
}

/* stacked feature rows */
.br-rows { display: flex; flex-direction: column; margin-top: 56px; }
.br-row {
  display: grid; grid-template-columns: 46px 300px minmax(0, 1fr); gap: 32px;
  align-items: start; padding: 36px 16px;
  border-top: 1px solid rgba(165, 200, 255, 0.16);
  transition: background 0.4s ease;
}
.br-row:last-child { border-bottom: 1px solid rgba(165, 200, 255, 0.16); }
.br-row:hover { background: linear-gradient(90deg, rgba(95, 155, 255, 0.10), rgba(95, 155, 255, 0.02) 55%, transparent 78%); }
.br-row h3 { font-size: 22px; line-height: 1.32; padding-top: 8px; }
.br-row p { padding-top: 10px; }

/* numbered steps */
.br-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; margin-top: 52px; }
.br-step {
  display: flex; flex-direction: column; gap: 14px; padding: 30px 26px 34px;
  border-radius: 20px; border: 1px solid var(--br-line-soft); background: rgba(255, 255, 255, 0.035);
  transition: border-color 0.4s ease, background 0.4s ease, transform 0.4s var(--br-ease);
}
.br-step:hover { transform: translateY(-5px); border-color: rgba(150, 195, 255, 0.38); background: rgba(255, 255, 255, 0.055); }
.br-step__n {
  font-family: 'Sora', system-ui, sans-serif; font-size: 13px; font-weight: 600;
  color: #8FBAFF; letter-spacing: 0.08em;
}
.br-step h3 { font-size: 19px; line-height: 1.3; }
.br-step p { font-size: 15px; line-height: 1.66; color: var(--br-body-soft); }

/* ============================================================
   9. Stats / chips
   ============================================================ */
.br-stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 52px 8px;
  border-top: 1px solid rgba(165, 200, 255, 0.2);
  border-bottom: 1px solid rgba(165, 200, 255, 0.2);
}
.br-stat {
  display: flex; flex-direction: column; gap: 11px; align-items: center; text-align: center;
  transition: transform 0.4s var(--br-ease);
}
.br-stat:hover { transform: translateY(-4px); }
.br-stat__n {
  font-family: 'Sora', system-ui, sans-serif; font-size: 52px; font-weight: 600;
  color: #fff; letter-spacing: -0.04em; line-height: 1;
  transition: text-shadow 0.4s ease;
}
.br-stat:hover .br-stat__n { text-shadow: 0 0 32px rgba(130, 185, 255, 0.85); }
.br-stat__l { font-size: 14px; color: var(--br-muted); }

.br-chips { display: flex; flex-wrap: wrap; gap: 12px; }
.br-chip {
  padding: 13px 24px; border-radius: 999px;
  border: 1px solid rgba(165, 200, 255, 0.24); background: rgba(255, 255, 255, 0.05);
  font-size: 15.5px; color: #D3DFF2;
  transition: transform 0.32s var(--br-ease), background 0.32s ease, border-color 0.32s ease, color 0.32s ease;
}
.br-chip--sm { padding: 8px 15px; font-size: 13px; color: #C6D5EC; }
.br-chip:hover {
  transform: translateY(-3px); background: rgba(125, 180, 255, 0.16);
  border-color: rgba(160, 200, 255, 0.5); color: #fff;
}

.br-figure {
  font-family: 'Sora', system-ui, sans-serif; font-size: 70px; font-weight: 600;
  color: #fff; letter-spacing: -0.045em; line-height: 1;
  text-shadow: 0 0 40px rgba(120, 180, 255, 0.5);
}

/* partner wordmarks */
.br-mmps { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 22px 64px; }
.br-mmp {
  font-family: 'Sora', system-ui, sans-serif; font-size: 19px; font-weight: 600;
  color: #7C8DAB; letter-spacing: -0.02em;
  transition: color 0.32s ease, transform 0.32s var(--br-ease);
}
.br-mmp:hover { color: #C8DBF6; transform: translateY(-2px); }

/* bullet list */
.br-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.br-list li {
  position: relative; padding-left: 26px; font-size: 16px; line-height: 1.7; color: var(--br-body-soft);
}
.br-list li::before {
  content: ''; position: absolute; left: 4px; top: 11px;
  width: 7px; height: 7px; border-radius: 999px; background: #6FA6FF;
  box-shadow: 0 0 12px rgba(111, 166, 255, 0.8);
}

/* prose (editor content) */
.br-prose { max-width: 760px; }
.br-prose h2 { font-size: 34px; margin: 48px 0 18px; }
.br-prose h3 { font-size: 23px; margin: 36px 0 14px; }
.br-prose p { margin: 0 0 18px; font-size: 16.5px; line-height: 1.75; color: var(--br-body-soft); }
.br-prose ul, .br-prose ol { margin: 0 0 20px; padding-left: 22px; }
.br-prose li { margin-bottom: 10px; color: var(--br-body-soft); line-height: 1.7; }
.br-prose > *:first-child { margin-top: 0; }

/* ============================================================
   10. CTA + footer
   ============================================================ */
.br-cta { position: relative; text-align: center; padding: 150px 0 0; }
.br-cta h2 { font-size: 56px; line-height: 1.1; max-width: 780px; margin: 0 auto; text-shadow: 0 4px 50px rgba(90, 150, 255, 0.4); }
.br-cta p { margin: 26px auto 0; max-width: 600px; font-size: 18px; line-height: 1.64; color: #B4C4DE; }
.br-cta .br-btnrow { margin-top: 40px; }
.br-cta__fine { margin-top: 30px; }

.br-footer {
  position: relative; z-index: 5; margin-top: 130px; padding: 56px 0 60px;
  border-top: 1px solid rgba(165, 200, 255, 0.18);
}
.br-footer__grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr)); gap: 40px; }
.br-footer__head { font-size: 12px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--br-faint); font-weight: 600; margin-bottom: 4px; }
.br-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.br-footer ul a {
  display: inline-block; font-size: 14.5px; color: #A8B7D0;
  transition: color 0.28s ease, transform 0.28s var(--br-ease);
}
.br-footer ul a:hover { color: #E6F0FF; transform: translateX(4px); }
.br-footer__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  padding-top: 26px; border-top: 1px solid rgba(165, 200, 255, 0.14);
  font-size: 13px; color: var(--br-faint);
}
/* Extra class on the selector purely for specificity: the generic
   ".br-container > *" editor-margin reset further down zeroes out
   margin-top/bottom (via margin-block) at equal specificity to a bare
   ".br-footer__bar" rule, and wins on source order. This is the same
   rule, just specific enough to survive that reset. */
.br-footer .br-footer__bar { margin-top: 64px; }

/* ============================================================
   11. Forms
   ============================================================ */
.br-form { display: flex; flex-direction: column; gap: 18px; max-width: 620px; }
.br-field { display: flex; flex-direction: column; gap: 8px; }
.br-field label { font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--br-muted); font-weight: 600; }
.br-field input, .br-field select, .br-field textarea {
  width: 100%; padding: 14px 16px; border-radius: 12px;
  border: 1px solid var(--br-line); background: rgba(255, 255, 255, 0.04);
  color: #E6EEFB; font-family: inherit; font-size: 15px;
  transition: border-color 0.3s ease, background 0.3s ease;
}
.br-field input::placeholder, .br-field textarea::placeholder { color: #6E7F9B; }
.br-field input:focus, .br-field select:focus, .br-field textarea:focus {
  outline: none; border-color: rgba(160, 200, 255, 0.55); background: rgba(255, 255, 255, 0.07);
}
.br-field textarea { min-height: 140px; resize: vertical; }
.br-form__note { font-size: 13.5px; color: #8496B3; }

/* ============================================================
   12. Scroll reveal
   ============================================================ */
/* Reveals are OPT-IN: the .br-js flag is set by an inline script in the
   document head, so content is hidden only when JavaScript is definitely
   running to reveal it again. Without that flag — no JS, and crucially
   inside the block editor, where the front-end script never runs and
   editor styles are scoped below <html> — everything stays visible. */
.br-js .br-reveal { opacity: 0; transform: translateY(26px); }
.br-js .br-reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity 0.9s var(--br-ease), transform 0.9s var(--br-ease);
  transition-delay: var(--br-d, 0s);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .br-js .br-reveal { opacity: 1; transform: none; transition: none; }
  .br-bloom, .br-spark { animation: none; }
  .br-card:hover, .br-step:hover, .br-chip:hover, .br-stat:hover,
  .br-btn--primary:hover, .br-btn--ghost:hover { transform: none; }
}

/* ============================================================
   13. Responsive
   ============================================================ */
@media (max-width: 1180px) {
  :root { --br-pad: 64px; }
  .br-h1 { font-size: 62px; }
  .br-pagehero .br-h1 { font-size: 50px; }
  .br-h2 { font-size: 40px; }
  .br-cta h2 { font-size: 46px; }
}

@media (max-width: 960px) {
  .br-nav__links { display: none; }
  .br-burger { display: inline-flex; }
  .br-nav > .br-btn { display: none; }
  .br-grid--3, .br-grid--4, .br-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .br-row { grid-template-columns: 46px minmax(0, 1fr); }
  .br-row h3 { grid-column: 2; padding-top: 0; }
  .br-row p { grid-column: 2; padding-top: 0; }
  .br-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .br-glow--mid { top: 2200px; }
}

@media (max-width: 720px) {
  :root { --br-pad: 22px; }
  .br-section { padding-top: 88px; }
  .br-hero { padding-top: 52px; }
  .br-pagehero { padding-top: 64px; }
  .br-h1 { font-size: 40px; }
  .br-pagehero .br-h1 { font-size: 36px; }
  .br-h2 { font-size: 31px; }
  .br-cta { padding-top: 92px; }
  .br-cta h2 { font-size: 33px; }
  .br-lead { font-size: 16px; }
  .br-grid--2, .br-grid--3, .br-grid--4, .br-steps { grid-template-columns: minmax(0, 1fr); }
  .br-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 20px; padding: 38px 0; }
  .br-stat { align-items: flex-start; text-align: left; }
  .br-stat__n { font-size: 38px; }
  .br-card { padding: 28px 24px 30px; }
  .br-card--feature { padding: 30px 26px 32px; }
  .br-figure { font-size: 52px; }
  .br-hero__art { height: 210px; }
  .br-bloom { width: 330px; height: 200px; }
  .br-spark { width: 186px; height: 186px; }
  .br-btnrow { flex-direction: column; align-items: stretch; width: 100%; }
  .br-btn { width: 100%; }
  .br-footer__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .br-footer { margin-top: 76px; }
  .br-mmps { gap: 14px 26px; }
  .br-mmp { font-size: 15px; }
  .br-row { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 28px 0; }
  .br-glow--mid { display: none; }
}

/* ============================================================
   14. WordPress block integration
   Content is authored as Gutenberg blocks, so neutralise the
   editor's own layout margins and map block wrappers onto the
   design system above.
   ============================================================ */

/* Core layout classes add margin-block between siblings. Our
   components space with gap, so zero it inside them. */
.br-grid > *, .br-rows > *, .br-steps > *, .br-chips > *,
.br-card > *, .br-step > *, .br-row > *, .br-head > *,
.br-split > *, .br-btnrow > *, .br-container > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

.br-section > .br-container { margin-left: auto; margin-right: auto; }

/* Groups render as plain divs; strip the default flow spacing. */
.wp-block-group.br-card,
.wp-block-group.br-step,
.wp-block-group.br-row,
.wp-block-group.br-head,
.wp-block-group.br-grid,
.wp-block-group.br-rows,
.wp-block-group.br-steps,
.wp-block-group.br-split { margin-top: 0; margin-bottom: 0; }

.wp-block-heading { margin-top: 0; margin-bottom: 0; }
.br-prose .wp-block-heading { margin-top: 40px; margin-bottom: 16px; }

/* Buttons: className lands on the wrapper, so style the inner link. */
.wp-block-buttons.br-btnrow { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.wp-block-buttons.br-btnrow--center { justify-content: center; }
.wp-block-button.br-btn { margin: 0; }
.wp-block-button.br-btn .wp-block-button__link {
	display: inline-flex; align-items: center; justify-content: center; gap: 9px;
	padding: 15px 26px; border-radius: 999px; border: 1px solid transparent;
	font-family: 'Sora', system-ui, sans-serif; font-size: 15px; font-weight: 600;
	letter-spacing: -0.01em; text-decoration: none;
}
.wp-block-button.br-btn--primary .wp-block-button__link {
	background: #fff; color: #06080F;
	box-shadow: 0 10px 34px -14px rgba(150, 200, 255, 0.6);
	transition: transform 0.3s var(--br-ease), box-shadow 0.3s ease, filter 0.3s ease;
}
.wp-block-button.br-btn--primary .wp-block-button__link:hover {
	transform: translateY(-2px); filter: brightness(1.04);
	box-shadow: 0 18px 48px -12px rgba(160, 205, 255, 0.9);
}
.wp-block-button.br-btn--ghost .wp-block-button__link {
	background: rgba(255, 255, 255, 0.06); color: #E4EDFB; font-weight: 500;
	border-color: rgba(180, 212, 255, 0.32);
	transition: transform 0.3s var(--br-ease), background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.wp-block-button.br-btn--ghost .wp-block-button__link:hover {
	transform: translateY(-2px); background: rgba(255, 255, 255, 0.09);
	border-color: rgba(175, 210, 255, 0.46); color: #fff;
}

/* Lists authored as core/list. */
ul.br-list { list-style: none; margin: 0; padding: 0; }

/* ============================================================
   15. Component variants used by the block content
   ============================================================ */
.br-card__text { font-size: 15.5px; line-height: 1.66; color: var(--br-body-soft); }
.br-eyebrow--xs { font-size: 11px; margin-top: 6px; }
.br-h2--sm { font-size: 32px; }
.br-h3--lg { font-size: 26px; }
.br-figure--sm { font-size: 34px; }

.br-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; align-items: start; }
.br-split > * { display: flex; flex-direction: column; gap: 20px; }

.br-note { text-align: center; align-items: center; }
.br-note__text { max-width: 720px; font-size: 18px; line-height: 1.7; color: #C3D2E8; }

.br-model__top { display: flex; align-items: center; gap: 14px; }
.br-model__val { font-size: 15.5px; color: #D3DFF2; }

.br-pillar { padding: 44px 40px 46px; margin-bottom: 22px; }
.br-pillar__lead { color: #CBDDFA; }
.br-pillar__top { display: flex; align-items: center; gap: 16px; }

.br-compare { display: flex; flex-direction: column; }
.br-compare__row {
	display: grid; grid-template-columns: 220px minmax(0, 1fr) minmax(0, 1fr);
	gap: 32px; padding: 30px 16px; align-items: start;
	border-top: 1px solid rgba(165, 200, 255, 0.16);
	transition: background 0.4s ease;
}
.br-compare__row:last-child { border-bottom: 1px solid rgba(165, 200, 255, 0.16); }
.br-compare__row:hover { background: linear-gradient(90deg, rgba(95, 155, 255, 0.10), transparent 78%); }
.br-compare__row h3 { font-size: 18px; margin: 0; }
.br-compare__old { font-size: 15.5px; line-height: 1.66; color: #7C8DAB; }
.br-compare__new { font-size: 15.5px; line-height: 1.66; color: #D3DFF2; }

.br-case { padding: 46px 42px 48px; margin-bottom: 22px; gap: 30px; }
.br-case__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; }
.br-case__tag { color: #A6C0EA; letter-spacing: 0.12em; }
.br-case__fig { display: flex; align-items: baseline; gap: 18px; margin-top: 16px; flex-wrap: wrap; }
.br-case__label { font-size: 16px; color: #B2C1DA; }
.br-case__text { font-size: 16.5px; line-height: 1.66; color: #B2C1DA; }
.br-case__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.br-case__cols p { font-size: 15.5px; line-height: 1.7; color: var(--br-body-soft); }
.br-case__out { color: #D3DFF2 !important; }

.br-steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.br-section--mmps .br-container { display: flex; flex-direction: column; align-items: center; gap: 30px; }
.br-contact__side { gap: 14px !important; }
.br-cta__h { font-size: 56px; line-height: 1.1; max-width: 780px; margin: 0 auto; text-shadow: 0 4px 50px rgba(90, 150, 255, 0.4); }
.br-cta .br-container > p { margin: 26px auto 0; max-width: 600px; font-size: 18px; line-height: 1.64; color: #B4C4DE; }
.br-cta .br-container > .wp-block-buttons { margin-top: 40px; }

@media (max-width: 960px) {
	.br-split { grid-template-columns: minmax(0, 1fr); gap: 36px; }
	.br-case__cols { grid-template-columns: minmax(0, 1fr); gap: 24px; }
	.br-compare__row { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	.br-steps--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
	.br-steps--3 { grid-template-columns: minmax(0, 1fr); }
	.br-pillar { padding: 30px 26px 32px; }
	.br-case { padding: 30px 26px 32px; }
	.br-cta__h { font-size: 33px; }
	.br-h2--sm { font-size: 26px; }
}

/* ============================================================
   16. Hard reset against WordPress layout constraints
   core/group defaults to a "constrained" layout that caps every
   child at --wp--style--global--content-size and forces auto side
   margins with !important. That silently breaks every grid, so
   neutralise it inside our own components.
   ============================================================ */
:where(.br-grid, .br-rows, .br-steps, .br-card, .br-step, .br-row,
       .br-split, .br-chips, .br-compare, .br-case) > * {
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.br-container { width: 100%; }
:where(.br-container) > * { max-width: none !important; }

/* Restore deliberate centring after the reset above. */
.br-hero > .br-container,
.br-pagehero > .br-container,
.br-cta > .br-container,
.br-section--mmps > .br-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}
/* Column flex + align-items:center makes children shrink to their content,
   which is what the pill needs. Text blocks are widened back explicitly so
   they can reach their max-width instead of hugging the longest line. */
.br-hero > .br-container > .wp-block-heading,
.br-hero > .br-container > p,
.br-pagehero > .br-container > .wp-block-heading,
.br-pagehero > .br-container > p,
.br-cta > .br-container > .wp-block-heading,
.br-cta > .br-container > p { width: 100%; }
.br-pill { align-self: center; width: auto; flex: 0 0 auto; }

.br-hero .br-h1 { max-width: 960px !important; }
.br-hero .br-lead { max-width: 660px !important; }
.br-pagehero .br-h1 { max-width: 900px !important; }
.br-pagehero .br-lead { max-width: 640px !important; }
.br-cta .br-cta__h { max-width: 780px !important; }
.br-cta .br-container > p { max-width: 600px !important; }
.br-note .br-note__text { max-width: 720px !important; }

/* Grids must win outright. */
.br-grid { display: grid; }
.br-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.br-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.br-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.br-steps { display: grid; }
.br-stats { display: grid; }

/* Long unbroken strings (URLs, bundle ids) must never widen a card. */
.br-card, .br-step, .br-row, .br-compare__row, .br-case { min-width: 0; }
.br-card p, .br-step p, .br-row p, .br-case p, .br-compare__row p,
.br-card h3, .br-step h3, .br-row h3 { overflow-wrap: break-word; }

/* --- hero, desktop: copy on the left, the spark on the right — both
   sitting directly on the page's own ambient gradient (.br-glow), with
   no card border or box background of their own. Same 861px breakpoint
   the sequence phone uses elsewhere, so the whole page settles into
   "mobile mode" at one consistent width. Placed after the WordPress
   block-integration reset above (which restores .br-hero > .br-container
   to a centred flex column) so this override actually wins the cascade.
   Mobile is untouched: .br-hero__left has no rules of its own below
   this breakpoint, so it stays an inert wrapper and the stacked layout
   renders exactly as it did before this wrapper existed. --- */
@media (min-width: 861px) {
  /* Guarded with :has() on purpose: this layout only makes sense once
     the hero's copy is actually wrapped in .br-hero__left (see
     inc/content/home.html and the "Site logo" / hero notes in
     README.txt). A live page that hasn't been updated to that
     structure yet still has pill/heading/paragraph/buttons as flat
     siblings here — applying a row layout to those directly would
     squeeze each into its own column instead of leaving the existing,
     working centred layout alone. */
  .br-hero > .br-container:has(> .br-hero__left) {
    display: flex; flex-direction: row; align-items: stretch; gap: 28px; text-align: left;
  }

  /* Halved from the shared 58px (see "19. Vertical rhythm" further
     down) — !important because that rule is unconditional (applies to
     mobile too) and comes later in the file, so it would otherwise win
     here at equal specificity regardless of source order. */
  .br-hero { padding-top: 29px !important; }

  .br-hero__left {
    flex: 2.4 1 0%;
    display: flex; flex-direction: column; justify-content: center;
    padding: 28px 60px 56px;
  }
  .br-hero__left .br-pill { align-self: flex-start; }
  .br-hero .br-h1 { max-width: 820px !important; margin-top: 26px; }
  .br-hero .br-lead { max-width: 640px !important; margin-top: 20px; }
  .br-hero .br-btnrow { justify-content: flex-start; margin-top: 34px; }

  .br-hero__art {
    flex: 1 1 0%;
    width: auto; height: auto; min-height: 480px; margin-top: 0;
    display: flex; align-items: center; justify-content: center;
  }
  .br-bloom { width: 320px; height: 320px; }
  .br-spark { width: 260px; height: 260px; }

  /* Logo: 3x for desktop only — the header's own size stays 36px
     (set in header.php) so mobile is unaffected; this overrides just
     the rendered height at this breakpoint. */
  .br-header .br-logo__mark { height: 108px !important; }
}

/* ============================================================
   17. Breakpoint corrections
   ============================================================ */
@media (max-width: 1180px) {
	.br-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.br-row { grid-template-columns: 46px 220px minmax(0, 1fr); gap: 24px; }
	.br-compare__row { grid-template-columns: 180px minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
}

@media (max-width: 1024px) {
	.br-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.br-case__cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.br-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.br-h1 { font-size: 54px; }
	.br-pagehero .br-h1 { font-size: 44px; }
	.br-h2 { font-size: 36px; }
	.br-cta__h { font-size: 40px; }
}

/* Tablet: prose-style rows collapse, but card grids stay 2-up. */
@media (max-width: 900px) {
	.br-split { grid-template-columns: minmax(0, 1fr); gap: 32px; }
	.br-case__cols { grid-template-columns: minmax(0, 1fr); gap: 22px; }
	.br-row { grid-template-columns: 46px minmax(0, 1fr); gap: 18px 20px; }
	.br-row h3 { grid-column: 2; padding-top: 0; }
	.br-row p { grid-column: 2; padding-top: 0; }
	.br-compare__row { grid-template-columns: minmax(0, 1fr); gap: 10px; }
	.br-compare__row h3 { font-size: 17px; }
}

/* Small tablet / large phone: everything goes single column. */
@media (max-width: 760px) {
	.br-grid--2, .br-grid--3, .br-grid--4 { grid-template-columns: minmax(0, 1fr); }
	.br-steps, .br-steps--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
	.br-steps, .br-steps--3 { grid-template-columns: minmax(0, 1fr); }
	.br-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.br-row { grid-template-columns: minmax(0, 1fr); }
	.br-row h3, .br-row p { grid-column: 1; }
	.br-h1 { font-size: 36px; }
	.br-pagehero .br-h1 { font-size: 32px; }
	.br-h2 { font-size: 27px; }
	.br-h2--sm { font-size: 24px; }
	.br-cta__h { font-size: 29px; }
	.br-lead { font-size: 16px; }
	.br-figure { font-size: 46px; }
	.br-stat__n { font-size: 34px; }
	.br-hero .br-btnrow, .br-cta .br-btnrow { flex-direction: column; align-items: stretch; width: 100%; }
	.br-hero .wp-block-button, .br-cta .wp-block-button { width: 100%; }
	.br-hero .wp-block-button__link, .br-cta .wp-block-button__link { width: 100%; }
}

/* Rows without an icon tile: drop the 46px icon track so the label column
   is a real column, not a 46px sliver that breaks headings mid-word. */
.br-row--noicon { grid-template-columns: 300px minmax(0, 1fr); }
@media (max-width: 1180px) { .br-row--noicon { grid-template-columns: 240px minmax(0, 1fr); } }
@media (max-width: 900px) {
	.br-row--noicon { grid-template-columns: minmax(0, 1fr); gap: 8px; }
	.br-row--noicon h3, .br-row--noicon p { grid-column: 1; }
}

/* ============================================================
   18. Section rhythm
   The margin reset in section 14 (needed to neutralise WordPress's
   layout margins) also killed the br-mt-* spacing utilities, so a
   heading block ended up touching the content under it. Flex gap on
   the container gives predictable spacing that no margin rule and no
   margin-collapsing can undo.
   ============================================================ */
.br-section > .br-container {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 56px;
}

/* Sections whose container has its own centred rhythm. */
.br-section--mmps > .br-container { gap: 30px; align-items: center; }

/* Stacked cards that carry their own bottom margin (pillars, cases). */
.br-section > .br-container > .br-pillar,
.br-section > .br-container > .br-case { margin-bottom: 0; }

@media (max-width: 1024px) {
	.br-section > .br-container { gap: 44px; }
}
@media (max-width: 720px) {
	.br-section > .br-container { gap: 34px; }
}

/* ============================================================
   19. Vertical rhythm — halved
   The original scale left far too much dead space between blocks.
   Every vertical value below is half of what it replaces.
   ============================================================ */
.br-section { padding-top: 66px; }
.br-section--tight { padding-top: 50px; }
.br-hero { padding-top: 58px; }
.br-pagehero { padding-top: 52px; }
.br-cta { padding-top: 75px; }
.br-footer { margin-top: 65px; }

.br-section > .br-container { gap: 28px; }
.br-section--mmps > .br-container { gap: 18px; }

/* Hero internals were also generous. */
.br-hero .br-h1 { margin-top: 20px; }
.br-hero .br-lead { margin-top: 16px; }
.br-hero .br-btnrow { margin-top: 24px; }
.br-hero__art { margin-top: 18px; height: 250px; }
.br-pagehero .br-h1 { margin-top: 16px; }
.br-pagehero .br-lead { margin-top: 14px; }
.br-cta .br-container > p { margin-top: 16px; }
.br-cta .br-container > .wp-block-buttons { margin-top: 22px; }

/* Stacked cards that space themselves. */
.br-pillar, .br-case { margin-bottom: 14px; }
.br-rows { margin-top: 0; }
.br-row { padding-top: 24px; padding-bottom: 24px; }
.br-stats { padding-top: 30px; padding-bottom: 30px; }

@media (max-width: 1024px) {
	.br-section > .br-container { gap: 24px; }
}
@media (max-width: 720px) {
	.br-section { padding-top: 44px; }
	.br-section--tight { padding-top: 34px; }
	.br-hero { padding-top: 26px; }
	.br-pagehero { padding-top: 32px; }
	.br-cta { padding-top: 46px; }
	.br-footer { margin-top: 38px; }
	.br-section > .br-container { gap: 20px; }
	.br-hero__art { height: 170px; margin-top: 12px; }
}

/* ============================================================
   20. Client strip — light tiles, full-colour logos, rotating
   Matches the Zoomd treatment: each mark sits in its own pale
   tile so brand colours read correctly against the dark ground.
   ============================================================ */
.br-clients { width: 100%; }

.br-clients__viewport {
	position: relative;
	width: 100%;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
	mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}

.br-clients__track {
	display: flex;
	width: max-content;
	animation: br-marquee 46s linear infinite;
}
.br-clients__viewport:hover .br-clients__track { animation-play-state: paused; }

.br-clients__run { display: flex; align-items: center; gap: 48px; padding-right: 48px; }

@keyframes br-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* Logos sit directly on the dark ground — no tile. Supply light or
   reversed logo files; dark marks will not read against the background. */
/* Every logo gets an identical slot; object-fit does the scaling. This
   keeps wildly different aspect ratios optically consistent, and gives
   viewBox-only SVGs a real box to render into. */
.br-clients__tile {
	display: flex; align-items: center; justify-content: center;
	flex: 0 0 auto;
	width: 168px; height: 44px; padding: 0;
	background: none; border: 0; border-radius: 0;
	transition: transform 0.4s var(--br-ease);
}
.br-clients__tile:hover { transform: translateY(-3px); }

.br-clients__logo {
	/* Fill the slot and let contain fit the artwork. Never max-height with
	   width:auto — viewBox-only SVGs have no intrinsic size and collapse. */
	width: 100%; height: 100%;
	object-fit: contain;
	display: block;
	opacity: 0.92;
	transition: opacity 0.35s ease;
}
.br-clients__tile:hover .br-clients__logo { opacity: 1; }

/* Admin-only placeholder slots */
.br-clients--placeholder .br-clients__tile {
	min-width: 116px; height: 40px;
	border: 1px dashed rgba(165, 200, 255, 0.32);
	border-radius: 8px;
}
.br-clients__slot {
	font-family: 'Sora', system-ui, sans-serif;
	font-size: 10px; letter-spacing: 0.16em; color: #6E82A3;
}
.br-clients__note {
	max-width: 640px; margin: 20px auto 0; text-align: center;
	font-size: 12.5px; line-height: 1.6; color: #7C8DAB;
}

@media (prefers-reduced-motion: reduce) {
	.br-clients__track { animation: none; width: 100%; }
	.br-clients__run + .br-clients__run { display: none; }
	.br-clients__run { flex-wrap: wrap; justify-content: center; padding-right: 0; }
	.br-clients__viewport { -webkit-mask-image: none; mask-image: none; }
}

@media (max-width: 720px) {
	.br-clients__tile { width: 124px; height: 32px; }
	.br-clients__run { gap: 32px; padding-right: 32px; }
	.br-clients__track { animation-duration: 32s; }
}

/* ============================================================
   21. Contact Form 7 compatibility
   CF7 wraps every control in an inline <span> and injects its own
   validation and response nodes. Map those onto the form design so
   the plugin's markup is invisible.
   ============================================================ */
.br-form .wpcf7-form-control-wrap { display: block; width: 100%; }

.br-form .wpcf7-form-control:not(.wpcf7-submit) {
	width: 100%;
	padding: 14px 16px;
	border-radius: 12px;
	border: 1px solid var(--br-line);
	background: rgba(255, 255, 255, 0.04);
	color: #E6EEFB;
	font-family: inherit;
	font-size: 15px;
	transition: border-color 0.3s ease, background 0.3s ease;
}
.br-form .wpcf7-form-control:not(.wpcf7-submit):focus {
	outline: none;
	border-color: rgba(160, 200, 255, 0.55);
	background: rgba(255, 255, 255, 0.07);
}
.br-form textarea.wpcf7-form-control { min-height: 140px; resize: vertical; }
.br-form select.wpcf7-form-control option { background: #0E1524; color: #E6EEFB; }

/* Submit button inherits .br-btn .br-btn--primary from the shortcode. */
.br-form input.wpcf7-submit {
	width: auto;
	align-self: flex-start;
	cursor: pointer;
}

/* Validation + response messages */
.br-form .wpcf7-not-valid-tip {
	margin-top: 7px;
	font-size: 13px;
	color: #FCA5A5;
}
.br-form .wpcf7-form-control.wpcf7-not-valid { border-color: rgba(252, 165, 165, 0.55); }

.wpcf7 form .wpcf7-response-output {
	margin: 20px 0 0;
	padding: 14px 18px;
	border-radius: 12px;
	border: 1px solid var(--br-line);
	background: rgba(255, 255, 255, 0.04);
	font-size: 14.5px;
	line-height: 1.6;
	color: #D3DFF2;
}
.wpcf7 form.sent .wpcf7-response-output {
	border-color: rgba(111, 240, 198, 0.45);
	background: rgba(111, 240, 198, 0.10);
	color: #BDF3E0;
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
	border-color: rgba(252, 165, 165, 0.45);
	background: rgba(252, 165, 165, 0.10);
	color: #FCD5D5;
}

.wpcf7-spinner { background-color: #8FBAFF; }

/* ============================================================
   22. Scroll sequence — pinned phone walkthrough
   Desktop pins a full-viewport stage and steps through screens on
   scroll progress. Mobile keeps the phone sticky at a fixed offset
   with intrinsic height (never 100vh, which jumps as the iOS
   toolbar resizes) and advances on step visibility. One DOM.
   ============================================================ */
.br-seq { position: relative; }

.br-seq__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  grid-template-areas: "head device" "steps device";
  align-items: start;
  gap: 0 76px;
  /* Tighter than the page container: two columns this far apart leave a
     dead void in the middle at 1440 and up. */
  max-width: calc(1140px + var(--br-pad) * 2);
  margin: 0 auto;
  padding: 0 var(--br-pad);
  width: 100%;
}

/* No ch units here — ch resolves against THIS element's 16px body font,
   not the 46px heading inside it, which capped the headline at ~208px
   and wrapped it to four lines. */
.br-seq__head { grid-area: head; max-width: none; }
.br-seq__h { margin-top: 16px; }
.br-seq__caveat {
  margin-top: 12px;
  font-size: 13px; line-height: 1.55; color: var(--br-faint);
  max-width: 40ch;
}
.br-seq__steps { grid-area: steps; list-style: none; margin: 40px 0 0; padding: 0; position: relative; }
.br-seq__device { grid-area: device; justify-self: end; }

/* --- the tracking rail: the detail that makes it read as designed --- */
.br-seq__steps::before {
  content: '';
  position: absolute; left: 0; top: 6px; bottom: 6px; width: 1px;
  background: rgba(165, 200, 255, 0.16);
}
.br-seq__steps::after {
  content: '';
  position: absolute; left: 0; top: 6px; width: 1px;
  height: calc((100% - 12px) / var(--br-seq-count, 4));
  background: linear-gradient(180deg, #BDD8FF, #4E93FF);
  box-shadow: 0 0 14px rgba(120, 175, 255, 0.8);
  transform: translateY(calc(var(--br-seq-active, 0) * 100%));
  transition: transform 0.62s var(--br-ease);
}

/* --- steps --- */
.br-seq__step {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 0 18px;
  padding: 0 0 0 26px;
  margin-bottom: 26px;
  transition: opacity 0.5s ease;
  opacity: 0.34;
}
.br-seq__step:last-child { margin-bottom: 0; }
.br-seq__step.is-active { opacity: 1; }

.br-seq__num {
  font-family: 'Sora', system-ui, sans-serif;
  font-size: 12px; font-weight: 600; letter-spacing: 0.12em;
  color: #7C8DAB; padding-top: 4px;
  transition: color 0.5s ease;
}
.br-seq__step.is-active .br-seq__num { color: #8FBAFF; }

.br-seq__body { display: block; }
.br-seq__label {
  display: block;
  font-family: 'Sora', system-ui, sans-serif;
  font-size: 19px; font-weight: 600; letter-spacing: -0.02em;
  color: #fff;
}
.br-seq__text {
  display: block;
  margin-top: 8px;
  font-size: 15px; line-height: 1.66; color: var(--br-body-soft);
  max-width: 42ch;
  /* collapsed until active — keeps the list scannable, not a wall */
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height 0.62s var(--br-ease), opacity 0.4s ease, margin-top 0.62s var(--br-ease);
  margin-top: 0;
}
.br-seq__step.is-active .br-seq__text { max-height: 8em; opacity: 1; margin-top: 8px; }

/* --- the device --- */
.br-seq__phone {
  position: relative;
  width: 300px; height: 610px;
  padding: 11px;
  border-radius: 46px;
  background: linear-gradient(165deg, #2A3345, #0B0F1A 58%);
  box-shadow:
    0 0 0 1px rgba(190, 215, 255, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 60px 120px -40px rgba(0, 0, 0, 0.95),
    0 0 90px -20px rgba(60, 130, 255, 0.55);
}
.br-seq__phone::before {
  /* bloom behind the device */
  content: '';
  position: absolute; inset: -14% -22%;
  background: radial-gradient(closest-side, rgba(90, 160, 255, 0.30), transparent 72%);
  filter: blur(30px); z-index: -1; pointer-events: none;
}
.br-seq__notch {
  position: absolute; top: 22px; left: 50%; transform: translateX(-50%);
  width: 78px; height: 6px; border-radius: 99px;
  background: rgba(255, 255, 255, 0.16); z-index: 3;
}
.br-seq__screens {
  position: relative; width: 100%; height: 100%;
  border-radius: 36px; overflow: hidden;
  background: #070B14;
}

.br-scr {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  padding: 40px 20px 22px;
  opacity: 0; transform: scale(1.04) translateY(10px);
  transition: opacity 0.55s ease, transform 0.75s var(--br-ease);
  pointer-events: none;
}
.br-scr.is-active { opacity: 1; transform: none; }

.br-seq__dots { display: flex; justify-content: center; gap: 7px; margin-top: 26px; }
.br-seq__dot {
  width: 5px; height: 5px; border-radius: 99px;
  background: rgba(165, 200, 255, 0.26);
  transition: background 0.45s ease, width 0.45s var(--br-ease);
}
.br-seq__dot.is-active { background: #8FBAFF; width: 20px; }

/* ============================================================
   23. Phone screen interiors
   ============================================================ */
.br-scr__chrome { display: flex; justify-content: center; gap: 4px; margin-bottom: 18px; }
.br-scr__chrome span { width: 16px; height: 3px; border-radius: 9px; background: rgba(255,255,255,0.14); }
.br-scr__chrome span:first-child { width: 26px; background: rgba(255,255,255,0.28); }

.br-scr__tag {
  align-self: flex-start;
  font-family: 'Sora', system-ui, sans-serif;
  font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase;
  color: #A6C0EA; padding: 5px 10px; border-radius: 99px;
  border: 1px solid rgba(165, 200, 255, 0.26); background: rgba(130, 180, 255, 0.12);
}
.br-scr__title {
  font-family: 'Sora', system-ui, sans-serif;
  font-size: 16px; line-height: 1.3; font-weight: 600; letter-spacing: -0.02em; color: #fff;
}
.br-scr__meta { font-size: 11.5px; color: #7C8DAB; }
.br-scr__cta {
  display: inline-flex; align-items: center; justify-content: center;
  align-self: flex-start;
  padding: 11px 20px; border-radius: 99px;
  background: #fff; color: #06080F;
  font-family: 'Sora', system-ui, sans-serif; font-size: 12.5px; font-weight: 600;
  box-shadow: 0 8px 26px -10px rgba(180, 215, 255, 0.9);
}
.br-scr__cta--full { align-self: stretch; }

/* 01 — impression */
.br-scr__game { display: flex; flex-direction: column; gap: 14px; flex: 1; justify-content: center; }
.br-scr__ad {
  display: flex; flex-direction: column; gap: 13px;
  padding: 18px; border-radius: 20px;
  border: 1px solid rgba(165, 200, 255, 0.14);
  background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02));
}
.br-scr__art {
  height: 116px; border-radius: 14px; position: relative;
  background: radial-gradient(120% 100% at 30% 0%, #5B8CFF, #1B2C6B 70%);
}
.br-scr__art::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 0; height: 0; transform: translate(-40%, -50%);
  border-left: 16px solid rgba(255,255,255,0.92);
  border-top: 10px solid transparent; border-bottom: 10px solid transparent;
}

/* 02 — install */
.br-scr__store { display: flex; flex-direction: column; align-items: center; gap: 9px; flex: 1; justify-content: center; text-align: center; }
.br-scr__appicon {
  width: 66px; height: 66px; border-radius: 17px;
  background: linear-gradient(150deg, #EAF3FF, #4E93FF);
  box-shadow: 0 14px 30px -12px rgba(78, 147, 255, 0.9);
}
.br-scr__appname { font-family: 'Sora', system-ui, sans-serif; font-size: 15px; font-weight: 600; color: #fff; }
.br-scr__progress {
  width: 100%; height: 5px; border-radius: 99px; margin-top: 6px;
  background: rgba(255, 255, 255, 0.1); overflow: hidden;
}
.br-scr__progress span {
  display: block; height: 100%; width: 68%; border-radius: 99px;
  background: linear-gradient(90deg, #7FB0FF, #EAF3FF);
}
.br-scr__note { font-size: 11px; color: #8FBAFF; letter-spacing: 0.04em; }
.br-scr__shots { display: flex; gap: 8px; width: 100%; margin-top: 10px; }
.br-scr__shots span {
  flex: 1; height: 78px; border-radius: 11px;
  background: linear-gradient(180deg, rgba(255,255,255,0.09), rgba(255,255,255,0.03));
  border: 1px solid rgba(165, 200, 255, 0.1);
}

/* 03 — activation */
.br-scr__onboard { display: flex; flex-direction: column; gap: 12px; flex: 1; justify-content: center; }
.br-scr__step { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: #7C8DAB; }
.br-scr__input {
  height: 42px; border-radius: 12px;
  border: 1px solid rgba(165, 200, 255, 0.16);
  background: rgba(255, 255, 255, 0.045);
}
.br-scr__input--short { width: 62%; }
.br-scr__check { display: flex; align-items: center; gap: 9px; margin-top: 2px; }
.br-scr__check em { font-style: normal; font-size: 12px; color: #BDF3E0; }
.br-scr__tick {
  width: 17px; height: 17px; border-radius: 99px; flex: 0 0 auto;
  background: rgba(111, 240, 198, 0.18); border: 1px solid rgba(111, 240, 198, 0.5);
  position: relative;
}
.br-scr__tick::after {
  content: ''; position: absolute; left: 5px; top: 4px;
  width: 5px; height: 8px; border-right: 2px solid #6FF0C6; border-bottom: 2px solid #6FF0C6;
  transform: rotate(42deg);
}

/* 04 — payable event */
.br-scr__done { display: flex; flex-direction: column; align-items: center; gap: 9px; flex: 1; justify-content: center; text-align: center; }
.br-scr__seal {
  width: 60px; height: 60px; border-radius: 99px;
  display: grid; place-items: center; color: #6FF0C6;
  background: rgba(111, 240, 198, 0.12);
  border: 1px solid rgba(111, 240, 198, 0.45);
  box-shadow: 0 0 40px -8px rgba(111, 240, 198, 0.7);
}
.br-scr__seal svg { width: 26px; height: 26px; }
.br-scr__receipt {
  width: 100%; margin-top: 12px;
  display: grid; grid-template-columns: auto 1fr; gap: 9px 14px;
  padding: 15px; border-radius: 15px;
  border: 1px solid rgba(165, 200, 255, 0.13);
  background: rgba(255, 255, 255, 0.035);
  font-size: 11.5px; text-align: left;
}
.br-scr__receipt span { color: #7C8DAB; }
.br-scr__receipt em { font-style: normal; color: #D3DFF2; text-align: right; }
.br-scr__receipt em.br-scr__ok { color: #6FF0C6; font-weight: 600; }

/* ============================================================
   24. Sequence — pinning and mobile behaviour
   ============================================================ */
@media (min-width: 861px) {
  .br-seq { height: calc(100vh + var(--br-seq-count, 4) * 74vh); }
  @supports (height: 100dvh) {
    .br-seq { height: calc(100dvh + var(--br-seq-count, 4) * 74dvh); }
  }
  .br-seq__pin {
    position: sticky; top: 0;
    height: 100vh;
    display: flex; align-items: center;
    overflow: hidden;
  }
  @supports (height: 100dvh) { .br-seq__pin { height: 100dvh; } }
}

/* The mobile caption: hidden on desktop, where the full step list already
   carries this information. */
.br-seq__caption { display: none; }

@media (max-width: 860px) {
  .br-seq__inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "head" "device" "steps";
    gap: 0;
  }
  .br-seq__head { max-width: none; }
  /* Sticky at a fixed offset with intrinsic height — safe on iOS. */
  .br-seq__device {
    position: sticky; top: 76px; z-index: 2;
    justify-self: center;
    display: flex; flex-direction: column; align-items: center;
    margin: 30px 0 8px;
  }
  .br-seq__phone { width: 236px; height: 480px; padding: 9px; border-radius: 38px; }
  .br-seq__screens { border-radius: 30px; }
  .br-scr { padding: 32px 16px 18px; }
  .br-scr__art { height: 92px; }
  .br-scr__appicon { width: 54px; height: 54px; border-radius: 14px; }
  .br-scr__shots span { height: 60px; }
  .br-seq__notch { top: 18px; width: 64px; }

  /* The full step list becomes an invisible scroll track: each item keeps
     a fixed height purely so the JS has real scroll distance to detect
     which step is current, but nothing in it renders. This is the fix
     for the bug where step paragraphs showed through behind the stuck
     phone as they scrolled past underneath it — there is simply nothing
     left there to show through. */
  /* Two tunable values: every step-to-step gap on mobile (1->2, 2->3,
     3->4) uses --br-seq-gap-mobile; the dwell after the last step, before
     the next section takes over, is intentionally shorter and uses its
     own --br-seq-gap-mobile-end instead. Change either number here to
     retune that part of the rhythm — nothing else needs editing. */
  .br-seq {
    --br-seq-gap-mobile: 220px;
    --br-seq-gap-mobile-end: 73px; /* a third of the step-to-step gap */
  }

  .br-seq__steps {
    margin-top: 0;
    /* Scroll room after the last real step, so the phone holds on
       "Payable event" for a beat instead of releasing the instant it
       arrives — shorter than the step-to-step gaps on purpose, so the
       page keeps moving rather than stalling once the funnel is done.
       Plain padding on an in-flow spacer track, not a sticky/pin height,
       so it carries none of the iOS-toolbar-jump risk that height:100vh
       does elsewhere in this file. */
    padding-bottom: var(--br-seq-gap-mobile-end);
  }
  .br-seq__steps::before,
  .br-seq__steps::after { display: none; }
  .br-seq__step {
    display: block;
    height: var(--br-seq-gap-mobile); margin: 0; padding: 0;
  }
  .br-seq__step > * { display: none; }

  /* The caption: lives inside the sticky device box, so it travels with
     the phone instead of sitting in the scrolling track below it. */
  .br-seq__caption {
    display: block;
    position: relative;
    width: 100%; max-width: 260px;
    height: 22px; margin-top: 16px;
    text-align: center;
  }
  .br-seq__caption-item {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center; gap: 9px;
    opacity: 0; transform: translateY(4px);
    transition: opacity 0.4s ease, transform 0.4s var(--br-ease);
    font-family: 'Sora', system-ui, sans-serif;
    font-size: 14px; font-weight: 600; color: #fff; letter-spacing: -0.01em;
    white-space: nowrap;
  }
  .br-seq__caption-item.is-active { opacity: 1; transform: none; }
  .br-seq__caption-item em {
    font-style: normal; font-size: 11px; font-weight: 600;
    letter-spacing: 0.1em; color: #8FBAFF;
  }
}

@media (prefers-reduced-motion: reduce) {
  .br-seq { height: auto !important; }
  .br-seq__pin { position: static !important; height: auto !important; padding: 0; }
  .br-scr { position: relative; opacity: 1; transform: none; transition: none; }
  .br-scr:not(.is-active) { display: none; }
  .br-seq__steps::after { transition: none; }
  .br-seq__step { opacity: 1; }
  .br-seq__text { max-height: none; opacity: 1; margin-top: 8px; }

  /* On mobile the step list is normally an invisible scroll track (see the
     860px block) with the caption carrying the text instead — but nothing
     ever advances without motion, so that would trap mobile readers on
     step one with the rest of the copy nowhere. Undo it here and fall
     back to the same full static list desktop gets. */
  .br-seq__step { display: grid !important; height: auto !important; margin-bottom: 26px; }
  .br-seq__num { display: inline !important; }
  .br-seq__body,
  .br-seq__label,
  .br-seq__text { display: block !important; }
  .br-seq__device { position: static !important; }
  .br-seq__caption { display: none !important; }
}