/* ============================================================
   bridge.css — the creator recruiting page.
   Loaded after styles.css, only by index.html.

   Strategy: COMMITTED, not restrained. The old page used violet as a
   gradient accent on near-white, which is the SaaS default. Here violet
   is a surface: it carries whole sections as flat colour. No gradients
   anywhere — the shared --grad token is never referenced in this file.

   Ground is off-white cast toward the brand hue, never toward warm.
   A warm-tinted near-white is the saturated 2026 default and reads as
   cream no matter what the token is called.
   ============================================================ */

:root {
  --br-ink: #14101f;
  --br-bg: #fbfaff;          /* off-white, chroma toward violet */
  --br-line: rgba(20, 16, 31, 0.12);
  --br-line-2: rgba(20, 16, 31, 0.22);
  --br-mute: #5d5772;
  --br-faint: #8b85a1;

  --br-violet: #5b34d1;
  --br-violet-deep: #3d1f9c;
  --br-violet-ink: #f3efff;  /* type on violet surfaces */
  --br-violet-soft: rgba(91, 52, 209, 0.07);

  --br-r: 14px;
  --br-r-lg: 22px;
}

:root[data-theme="dark"] {
  --br-ink: #f2effb;
  --br-bg: #0e0b16;
  --br-line: rgba(242, 239, 251, 0.13);
  --br-line-2: rgba(242, 239, 251, 0.22);
  --br-mute: #a49dbb;
  --br-faint: #837c99;
  --br-violet: #7c53ff;
  --br-violet-deep: #5b34d1;
  --br-violet-ink: #f6f3ff;
  --br-violet-soft: rgba(124, 83, 255, 0.14);
}

/* ---------- reset the inherited page ---------- */

body.br {
  background: var(--br-bg);
  color: var(--br-ink);
  font-family: var(--body);
}

body.br::after { display: none; }            /* the grain reads as dirt on flat colour */
body.br section { padding: 0; position: static; }

.br .wrap-x {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 52px);
}

/* ---------- type ----------
   One family, Archivo, at committed weight and size contrast. A second
   display face would be decoration; the brand already owns this one. */

.br h1,
.br h2,
.br h3 {
  font-family: var(--display);
  color: var(--br-ink);
  text-wrap: balance;
}

.br h1 {
  font-size: clamp(2.6rem, 6.4vw, 5rem);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.035em;
  margin: 0;
}

.br h2 {
  font-size: clamp(1.9rem, 3.8vw, 3rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.032em;
  margin: 0 0 16px;
}

.br h3 {
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.32;
  letter-spacing: -0.018em;
  margin: 0 0 8px;
}

.br p { color: var(--br-mute); margin: 0 0 16px; text-wrap: pretty; }
.br p:last-child { margin-bottom: 0; }

.br .lede {
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  line-height: 1.55;
  max-width: 54ch;
}

/* Violet does the emphasis that a gradient used to do. */
.br .hl { color: var(--br-violet); }

/* ---------- header ---------- */

/* Floating pill that rides down the page, rather than a full-width bar.
   The bar reads as chrome; the pill reads as an object sitting above the
   page, which is what the rest of this design is doing. */
.br-head {
  position: sticky;
  top: 14px;
  z-index: 60;
  margin-bottom: -66px;          /* the page starts under it, not after it */
  pointer-events: none;          /* the gutter either side stays clickable */
}

.br .br-head-in {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: clamp(12px, 2.4vw, 28px);
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  padding: 8px 8px 8px 20px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--br-bg) 82%, transparent);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border: 1px solid var(--br-line);
  /* Lit top edge, shaded underside: reads as a pane catching light rather
     than a drawn rectangle. */
  border-top-color: color-mix(in srgb, #fff 70%, transparent);
  border-bottom-color: var(--br-line-2);
  box-shadow:
    0 1px 1px rgba(20, 16, 31, 0.04),
    0 8px 24px rgba(20, 16, 31, 0.08),
    0 24px 56px rgba(20, 16, 31, 0.07);
}

:root[data-theme="dark"] .br .br-head-in {
  border-top-color: rgba(255, 255, 255, 0.14);
  border-bottom-color: rgba(0, 0, 0, 0.5);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5), 0 18px 44px rgba(0, 0, 0, 0.4);
}

@media (max-width: 720px) {
  .br .br-head-in { padding-left: 14px; }
}

.br-logo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--display);
  font-size: 1.03rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--br-ink);
  text-decoration: none;
}

.br-logo img { width: 25px; height: 25px; border-radius: 7px; display: block; }

.br-links { display: flex; gap: clamp(12px, 2vw, 26px); margin-right: auto; }

.br-links a {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--br-mute);
  text-decoration: none;
}

.br-head-act { display: flex; align-items: center; gap: 14px; }

.br-ghost {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--br-faint);
}

/* ---------- buttons ---------- */

.br-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--br-violet);
  color: #fff;
  font-family: var(--body);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  padding: 14px 26px;
  border-radius: 999px;
  border: 0;
  transition: transform 110ms cubic-bezier(0.3, 0.8, 0.4, 1),
              background 200ms cubic-bezier(0.23, 1, 0.32, 1);
}

/* Header button sits next to 0.9rem nav links, so it has to read as one of
   them with a fill behind it, not as a second primary CTA competing with
   the hero. Smaller type, tighter padding, less radius. */
.br-btn.sm {
  padding: 7px 14px;
  font-size: 0.82rem;
  font-weight: 600;
  /* Matches the pill the header itself is drawn as. An 8px rect sitting inside
     a 999px capsule reads as a mistake at every size. */
  border-radius: 999px;
  gap: 6px;
}
.br-btn:active { transform: scale(0.97); }

@media (hover: hover) and (pointer: fine) {
  .br-btn:hover { background: var(--br-violet-deep); }
  .br-links a:hover, .br-ghost:hover { color: var(--br-ink); }
}

.br-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.br-note {
  font-size: 0.83rem;
  color: var(--br-faint);
  margin: 0;
}


/* ---------- creator deck ----------
   A stack rather than a row: three cards fanned back, front one live, cycling.
   The fan is what makes it read as "there are more of these" without needing a
   count Bridge cannot yet claim. */
/* Stretches to the grid row instead of carrying a fixed height, so the deck
   always matches the text column beside it rather than needing re-measuring
   every time the headline or the lede changes length. */
.br-deck {
  position: relative;
  align-self: stretch;
  min-height: 420px;
  perspective: 1200px;
}

.br-deck { cursor: pointer; }
.br-deck:focus-visible { outline: 2px solid var(--br-violet); outline-offset: 8px; border-radius: var(--br-r-lg); }

.br-ccard {
  position: absolute;
  inset: 0;
  margin: auto;
  width: min(340px, 100%);
  /* 32px of headroom for the fanned cards behind, which sit up to -26px. */
  height: calc(100% - 32px);
  max-height: 640px;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--br-line);
  border-radius: var(--br-r-lg);
  box-shadow: 0 1px 2px rgba(20, 16, 31, 0.04), 0 18px 44px rgba(20, 16, 31, 0.09);
  overflow: hidden;
  transition: transform 620ms cubic-bezier(0.23, 1, 0.32, 1),
              opacity 620ms cubic-bezier(0.23, 1, 0.32, 1);
}

:root[data-theme="dark"] .br-ccard { background: #171225; }

/* depth positions, reassigned as the deck cycles */
.br-ccard[data-pos="0"] { transform: translateY(0) rotate(-1.5deg) scale(1);      opacity: 1;    z-index: 3; }
.br-ccard[data-pos="1"] { transform: translateY(-14px) rotate(3deg) scale(0.94);  opacity: 0.75; z-index: 2; }
.br-ccard[data-pos="2"] { transform: translateY(-26px) rotate(-5deg) scale(0.88); opacity: 0.45; z-index: 1; }

.br-ccard-media {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--br-violet-soft);
  border-bottom: 1px solid var(--br-line);
}

.br-ccard-media span {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--br-faint);
}


/* Type-led card: used when a creator has no still. The site has no photography
   and none is coming, so this is a real state rather than a fallback — the
   campaign name carries the card the way the rest of the page is carried. */
.br-ccard-media.is-type {
  padding: 26px;
  align-items: flex-end;
  justify-content: flex-start;
  background:
    radial-gradient(120% 90% at 85% 8%, color-mix(in srgb, var(--br-violet) 22%, transparent) 0%, transparent 60%),
    var(--br-violet-soft);
}

.br-ccard-media.is-type b {
  font-family: var(--display);
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--br-violet);
  text-wrap: balance;
}

.br-ccard-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.br-ccard-body {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 10px;
  padding: 14px 16px;
}

.br-ccard-handle {
  font-family: var(--display);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--br-ink);
}

.br-ccard-niche {
  grid-column: 1;
  font-size: 0.82rem;
  color: var(--br-faint);
}

.br-ccard-fee {
  grid-row: 1 / span 2;
  grid-column: 2;
  align-self: center;
  font-family: var(--display);
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--br-violet);
}

/* Marks unfilled cards as unfilled. Removed automatically once creators.json
   has entries — nothing here should ever read as a real creator. */
.br-ccard-flag {
  position: absolute;
  top: 12px;
  left: 12px;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--br-ink);
  color: var(--br-bg);
  opacity: 0.55;
}

/* Whole-card hit area, added only when a post URL exists. */
.br-ccard-link { position: absolute; inset: 0; }

@media (max-width: 900px) {
  .br-deck { min-height: 400px; }
  .br-ccard { max-height: 420px; }
}

@media (prefers-reduced-motion: reduce) {
  .br-ccard { transition: none; }
}

/* ---------- hero ----------
   Two columns: the claim, and a drawn artifact. The artifact is the
   imagery — there are no photographs and none are coming, so the page
   draws the thing the creator actually receives. */

/* Top padding has to clear the floating pill, which is 14px from the top and
   about 53px tall. This is the ONLY hero padding rule: an earlier padding-top
   was silently overridden by this shorthand, which put the h1 under the pill. */
.br .br-hero { padding: clamp(112px, 12vw, 156px) 0 clamp(40px, 6vw, 72px); }

.br-hero-in {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}

.br-hero .lede { margin: 22px 0 30px; }

/* Hero runs single-column while the creator deck is parked. Without this the
   two-column grid leaves the right half empty. */
.br-hero-in.solo {
  grid-template-columns: 1fr;
  max-width: 820px;
}


/* Hero with no second column: the two-column grid would otherwise leave the
   right half empty once the calculator moved out. */
/* The headline grew from "Get paid by brands that…" to "We bridge creators
   with brands that…", which at the base h1 size ran to five lines and pushed
   the email capture below the fold. Capped here rather than globally so the
   section headings keep their scale. */
.br .br-hero h1 {
  font-size: clamp(2.3rem, 4.6vw, 3.7rem);
}

/* The calculator reads as an instrument, so it keeps a contained measure rather
   than stretching to the full section width. */
.br-calc-wrap {
  max-width: 520px;
  margin: 0 auto;
}


.br-hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }

/* ---------- the drawn artifact: a campaign brief ----------
   Deliberately NOT a fake product dashboard — Bridge has no creator app.
   A brief is a real artifact that really gets sent, so drawing one is
   honest. Every field is structural; no rates, dates or brand names. */

.br-card {
  background: #fff;
  border: 1px solid var(--br-line);
  border-radius: var(--br-r-lg);
  box-shadow: 0 1px 2px rgba(20, 16, 31, 0.04), 0 18px 44px rgba(20, 16, 31, 0.09);
  overflow: hidden;
}

:root[data-theme="dark"] .br-card { background: #171225; }

.br-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  background: var(--br-violet);
  color: var(--br-violet-ink);
}

.br-card-top b { font-family: var(--display); font-size: 0.92rem; font-weight: 700; letter-spacing: -0.01em; }

.br-chip {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
}

/* Path switcher on the brief card. Segmented rather than a dropdown: all four
   options stay visible, which is the point — most creators don't know
   whitelisting exists. */
/* Four equal segments, each with its own dot. Equal widths make the row read as
   a control rather than a list of links; the dot carries the selected state so
   the label itself never has to change weight and shift the layout. */
.br-tabs {
  display: flex;
  gap: 2px;
  padding: 10px 8px 6px;
  border-bottom: 1px solid var(--br-line);
}

.br-tabs button {
  flex: 1 1 0;
  min-width: 0;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 999px;
  padding: 7px 4px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--br-violet);
  opacity: 0.55;
  cursor: pointer;
  transition: opacity 160ms, background-color 160ms, border-color 160ms;
}

.br-tabs button i {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.45;
  transition: opacity 160ms, transform 160ms;
}

.br-tabs button[aria-selected="true"] {
  background: var(--br-violet-soft);
  border-color: var(--br-violet);
  opacity: 1;
}

.br-tabs button[aria-selected="true"] i { opacity: 1; transform: scale(1.25); }

.br-tabs button:focus-visible { outline: 2px solid var(--br-violet); outline-offset: 1px; }

@media (hover: hover) and (pointer: fine) {
  .br-tabs button:hover { opacity: 0.85; }
  .br-tabs button[aria-selected="true"]:hover { opacity: 1; }
}

/* ---- calculator inputs ---- */

/* Affiliate carries three sliders and UGC carries one, so without a floor the
   card grows and shrinks by ~84px on tab switch and shoves the hero around.
   Floor is the measured natural height of the tallest panel across both
   breakpoints — both panels at 390 (285.4px). RE-MEASURE whenever a slider or a
   note changes; this number is derived, not chosen, and leaving it too high
   leaves dead space under the shorter panel. */
.br-calc-in {
  padding: 16px 18px 6px;
  /* Floor = the measured natural height of the taller panel across both
     breakpoints (UGC at 390, whose note wraps to an extra line: 197.6px).
     RE-MEASURE whenever a slider or a note changes — derived, not chosen, and
     left too high it just prints dead space under the shorter panel. */
  min-height: 198px;
}

.br-calc-in label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 0.86rem;
  color: var(--br-mute);
  margin-bottom: 8px;
}

.br-calc-in label + input { margin-bottom: 16px; }

.br-calc-in output {
  font-family: var(--display);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--br-ink);
}

.br-calc-in input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 999px;
  background: var(--br-line);
  outline: none;
}

.br-calc-in input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--br-violet);
  border: 3px solid #fff;
  box-shadow: 0 1px 4px rgba(20, 16, 31, 0.3);
  cursor: pointer;
}

.br-calc-in input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--br-violet);
  cursor: pointer;
}

.br-calc-in input[type="range"]:focus-visible { outline: 2px solid var(--br-violet); outline-offset: 4px; }

.br-calc-note {
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--br-faint);
  margin: 0 0 12px;
}

/* ---- calculator output ---- */

.br-calc-out {
  display: block;
  padding: 16px 18px 18px;
  border-top: 1px solid var(--br-line);
  background: var(--br-violet-soft);
}

.br-calc-lab {
  display: block;
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--br-faint);
  margin-bottom: 6px;
}

.br-calc-out strong {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--br-violet);
}

.br-calc-sub {
  display: block;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--br-mute);
  margin-top: 6px;
  /* Three lines reserved. These strings run one to three lines depending on the
     path and the viewport; without a floor the card jumps on every tab switch. */
  min-height: 3.75em;
}

.br-rows { padding: 6px 18px 16px; }

.br-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--br-line);
  font-size: 0.9rem;
}

.br-row:last-child { border-bottom: 0; }
.br-row dt { color: var(--br-faint); }
.br-row dd { margin: 0; color: var(--br-ink); font-weight: 600; text-align: right; }

/* The pay row is the answer the whole card exists to give, so it carries the
   only emphasis in the list. Must come after .br-row dd — same specificity, so
   source order decides it. */
.br-row-pay dd { color: var(--br-violet); }

.br-card-foot {
  padding: 13px 18px;
  border-top: 1px solid var(--br-line);
  background: var(--br-violet-soft);
  font-size: 0.82rem;
  color: var(--br-mute);
}

/* ---------- sections ---------- */

.br .br-sec { padding: clamp(52px, 7vw, 96px) 0; }
.br .br-sec + .br-sec { border-top: 1px solid var(--br-line); }

.br-head-2 { max-width: 46ch; margin-bottom: clamp(28px, 4vw, 46px); }

/* ---------- the violet slab ----------
   The Committed move: violet as a surface, not a highlight. This is the
   section that carries the brand, so it is the one that gets the colour. */

.br-slab {
  background: var(--br-violet);
  color: var(--br-violet-ink);
}

.br-slab h2 { color: #fff; }
.br-slab p { color: rgba(255, 255, 255, 0.82); }

.br-slab .br-btn { background: #fff; color: var(--br-violet-deep); }

@media (hover: hover) and (pointer: fine) {
  .br-slab .br-btn:hover { background: rgba(255, 255, 255, 0.88); }
}

/* ---------- the work: four payment structures ----------
   A real differentiator, so it gets the space. Rows, not a card grid. */

.br-ways { border-top: 1px solid var(--br-line); }

.br-way {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 6px 28px;
  padding: 22px 0;
  border-bottom: 1px solid var(--br-line);
  align-items: baseline;
}

.br-way h3 { margin: 0; }
.br-way p { margin: 0; font-size: 0.94rem; line-height: 1.55; }

.br-pay {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 7px;
}

.br-pay span {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid var(--br-line-2);
  color: var(--br-mute);
}

.br-pay span.on {
  background: var(--br-violet-soft);
  border-color: transparent;
  color: var(--br-violet);
}

/* ---------- proof ----------
   Not the hero-metric template: no gradient, no tiles, no supporting-stat
   row. A single sentence carries it and the figures sit inline underneath
   as a labelled record, with the caveat attached rather than hidden. */




/* ---------- steps ---------- */

.br-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: clamp(20px, 3vw, 40px); }
.br-steps > div { padding-top: 16px; border-top: 2px solid var(--br-violet); }
.br-steps p { font-size: 0.94rem; line-height: 1.58; }

/* ---------- faq ---------- */

.br-faq { max-width: 68ch; }
.br-faq details { border-bottom: 1px solid var(--br-line); }
.br-faq summary { list-style: none; cursor: pointer; padding: 17px 0; font-weight: 600; display: flex; justify-content: space-between; gap: 18px; }
.br-faq summary::-webkit-details-marker { display: none; }
.br-faq summary::after { content: "+"; color: var(--br-violet); font-weight: 400; }
.br-faq details[open] summary::after { content: "\2013"; }
.br-faq p { font-size: 0.94rem; line-height: 1.62; margin: 0 0 18px; }
.br-faq a { color: var(--br-violet); }

/* ---------- foot ---------- */

/* Block padding only. The shorthand's `0` was overriding the horizontal gutter
   .wrap-x provides — invisible at desktop where the wrap is centred, but on a
   phone it put the footer text hard against both screen edges. */
.br .br-foot { padding-top: 30px; padding-bottom: 44px; border-top: 1px solid var(--br-line); display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: baseline; }
.br-foot p { margin: 0; font-size: 0.86rem; }
.br-foot p:first-child { font-family: var(--display); font-weight: 800; letter-spacing: -0.02em; color: var(--br-ink); margin-right: auto; }
.br-foot nav { display: flex; gap: 18px; }
.br-foot a { color: var(--br-faint); text-decoration: none; font-size: 0.86rem; }

/* ---------- motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .br-btn { transition: none; }
}

/* ---------- narrow ---------- */

@media (max-width: 900px) {
  .br-hero-in { grid-template-columns: 1fr; }
  .br-way { grid-template-columns: 1fr; gap: 4px; }
  .br-way h3 { margin-bottom: 2px; }
}

/* ============================================================
   PANEL — the problem, framed.
   ============================================================ */

.br .br-panel {
  position: relative;
  background: var(--br-violet-soft);
  border: 1px solid var(--br-line);
  border-radius: var(--br-r-lg);
  padding: clamp(26px, 4vw, 52px);
  overflow: hidden;
}

.br .br-panel h2 { max-width: 20ch; margin-bottom: 22px; }

.br-panel-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: clamp(16px, 3vw, 40px);
}

.br-panel-cols p { margin: 0; }

/* ============================================================
   TIMELINE
   ============================================================ */

.br-tl {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: clamp(22px, 3vw, 34px);
  counter-reset: tl;
}

.br-tl > li {
  counter-increment: tl;
  position: relative;
  padding-top: 30px;
}

/* The rail. Drawn once across the whole row, then each dot sits on it. */
.br-tl > li::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 0;
  right: calc(-1 * clamp(22px, 3vw, 34px));
  height: 2px;
  background: var(--br-line);
}

.br-tl > li:last-child::before { right: 0; }

.br-tl-dot {
  position: absolute;
  top: 0;
  left: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--br-bg);
  border: 2px solid var(--br-violet);
  transition: transform 260ms cubic-bezier(0.23, 1, 0.32, 1),
              background 260ms cubic-bezier(0.23, 1, 0.32, 1);
}

.br-tl > li:first-child .br-tl-dot { background: var(--br-violet); }

.br-tl-when {
  display: block;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--br-violet);
  margin-bottom: 8px;
}

.br-tl h3 { margin-bottom: 6px; }
.br-tl p { font-size: 0.92rem; line-height: 1.58; margin: 0; }

@media (hover: hover) and (pointer: fine) {
  .br-tl > li:hover .br-tl-dot { transform: scale(1.35); background: var(--br-violet); }
}

@media (max-width: 620px) {
  /* Stacked: the rail turns vertical so it still reads as a sequence. */
  .br-tl { grid-template-columns: 1fr; gap: 0; }
  .br-tl > li { padding: 0 0 26px 30px; }
  .br-tl > li::before { top: 6px; bottom: -6px; left: 6px; right: auto; width: 2px; height: auto; }
  .br-tl > li:last-child::before { bottom: auto; height: 0; }
  .br-tl-dot { top: 0; left: 0; }
}

/* ============================================================
   HOVER — earned, not decorative. Rows respond because they are
   scannable lists; the brief card lifts because it reads as an object.
   ============================================================ */

@media (hover: hover) and (pointer: fine) {
  .br .br-way {
    transition: background 220ms cubic-bezier(0.23, 1, 0.32, 1);
    border-radius: 10px;
  }

  .br .br-way:hover { background: var(--br-violet-soft); }

  .br-card {
    transition: transform 320ms cubic-bezier(0.23, 1, 0.32, 1),
                box-shadow 320ms cubic-bezier(0.23, 1, 0.32, 1);
  }

  .br-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 2px 4px rgba(20, 16, 31, 0.05), 0 26px 60px rgba(20, 16, 31, 0.14);
  }

  .br-card .br-row { transition: color 180ms ease; }


  .br-links a { transition: color 160ms ease; }
  .br-faq summary { transition: color 160ms ease; }
  .br-faq summary:hover { color: var(--br-violet); }
}

/* The arrow leads the button, so it moves the way the click goes. */
.br-btn svg { transition: transform 240ms cubic-bezier(0.23, 1, 0.32, 1); }

@media (hover: hover) and (pointer: fine) {
  .br-btn:hover svg { transform: translateX(4px); }
}

/* ============================================================
   REVEAL — enhancement only.
   Content is visible by default and stays visible if JS never runs;
   the class only adds a transform. Nothing here gates visibility.
   Each group gets its own distance so it isn't one uniform entrance.
   ============================================================ */

/* Transform only. Opacity is never touched, so a missed observer, a
   background tab or a headless render can't leave anything invisible —
   the worst case is the element simply sits where it lands. */
.js .rise {
  transform: translateY(14px);
  transition: transform 620ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

.js .rise.in { transform: none; }

.js .br-tl > li.rise { transition-delay: calc(var(--i, 0) * 90ms); }

@media (prefers-reduced-motion: reduce) {
  .js .rise { transform: none; transition: none; }
  .br-tl-dot, .br-card, .br .br-way, .br-btn svg { transition: none !important; }
}

/* ============================================================
   WHAT YOU NEED — the barrier-removal section. Rows on rules, not
   another card grid; the four items are peers, not products.
   ============================================================ */

.br-need {
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0 clamp(20px, 3vw, 40px);
}

.br-need > li {
  padding: 20px 0;
  border-top: 1px solid var(--br-line);
}

.br-need h3 { margin-bottom: 6px; }
.br-need p { font-size: 0.92rem; line-height: 1.58; margin: 0; }



@media (hover: hover) and (pointer: fine) {
  .br-need > li { transition: border-top-color 260ms cubic-bezier(0.23, 1, 0.32, 1); }
  .br-need > li:hover { border-top-color: var(--br-violet); }
}

/* ============================================================
   THE PROBLEM — four failure modes inside the panel.
   Numbered because the reader is counting costs, and rules instead of
   cards so it doesn't become another icon-chip grid.
   ============================================================ */

.br-panel-lede {
  max-width: 52ch;
  margin: 0 0 6px !important;
  font-size: 1.02rem;
  line-height: 1.6;
}

.br-fails {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* Fixed two-up rather than auto-fit: four items across a wide panel
     land as 3 + 1, which reads as a mistake. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(24px, 4vw, 52px);
  counter-reset: fail;
}

.br-fails > li {
  counter-increment: fail;
  position: relative;
  padding: 20px 0 20px 34px;
  border-top: 1px solid var(--br-line);
}

.br-fails > li::before {
  content: counter(fail, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 22px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--br-violet);
  font-variant-numeric: tabular-nums;
}

.br-fails h3 { margin-bottom: 6px; }
.br-fails p { font-size: 0.92rem; line-height: 1.58; margin: 0; }

@media (hover: hover) and (pointer: fine) {
  .br-fails > li { transition: border-top-color 260ms cubic-bezier(0.23, 1, 0.32, 1); }
  .br-fails > li:hover { border-top-color: var(--br-violet); }
}

@media (max-width: 640px) {
  .br-fails { grid-template-columns: 1fr; }
}


/* ============================================================
   ANCHOR OFFSET — the header is sticky, so an in-page jump would
   otherwise land the section heading underneath it.
   ============================================================ */

.br [id] { scroll-margin-top: 88px; }

/* Hero CTA: was reading heavier than the headline needed. */
.br .br-hero .br-btn { padding: 12px 22px; font-size: 0.9rem; }

/* ============================================================
   FOUR PATHS — bounded boxes, deliberately NOT the timeline's rail.
   The timeline is a sequence: order carries meaning, so dots on a rail
   are right there. These four are parallel choices with no order at all,
   and a rail would assert a sequence that does not exist. Discrete boxes
   say "pick any of these", which is the actual relationship.
   ============================================================ */

.br-paths {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 20px);
}

/* Five shared rows, so the chip, the copy and the pay slab sit on one baseline
   across the row. `1fr` on the description absorbs the slack. */
.br-paths > li {
  --px: clamp(16px, 1.8vw, 22px);
  --py: clamp(20px, 2.2vw, 26px);
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  align-content: start;
  /* Left-aligned. Centred body copy in a 250px column has no left edge for the
     eye to return to, and four centred columns read as a template. */
  text-align: left;
  padding: var(--py) var(--px) 0;
  border: 1px solid var(--br-line);
  border-radius: var(--br-r-lg);
  background: var(--br-card, #fff);
  overflow: hidden;
  transition: border-color 260ms cubic-bezier(0.23, 1, 0.32, 1),
              transform 260ms cubic-bezier(0.23, 1, 0.32, 1),
              box-shadow 260ms cubic-bezier(0.23, 1, 0.32, 1);
}

:root[data-theme="dark"] .br-paths > li { background: #171225; }

/* The index rides the top edge as a rule-and-numeral, rather than floating as
   an eyebrow over the title. */
.br-path-n {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--br-violet);
  margin-bottom: 14px;
}

.br-path-n::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--br-line);
}

.br-paths h3 {
  font-size: 1.12rem;
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
  /* Two lines reserved: "Whitelisting and collab ads" wraps and the rest do
     not, which knocked everything below it out of line across the row.
     45px = 2 x 1.12rem x 1.25, as a plain length — the calc() form computed to
     0 and was silently dropped. */
  min-height: 45px;
}

.br-post {
  justify-self: start;
  margin: 0 0 14px !important;
}

.br-path-do {
  font-size: 0.92rem !important;
  line-height: 1.55;
  color: var(--br-mute) !important;
  margin: 0 0 18px !important;
  text-wrap: pretty;
}

/* The pay line is the answer the card exists to give, so it stops being the
   faintest thing on it. A full-bleed slab turns the reserved height into a
   base for the card instead of dead space under the copy. */
.br-path-pay {
  margin: 0 calc(-1 * var(--px)) 0 !important;
  padding: 12px var(--px) var(--py);
  background: var(--br-violet-soft);
  border-top: 1px solid var(--br-line);
  font-size: 0.88rem !important;
  line-height: 1.5;
  font-weight: 500;
  color: var(--br-ink) !important;
  /* Measured, not guessed: every pay line now wraps to two at this column width
     (101.1px incl. padding). Re-measure if one gets longer. */
  min-height: 102px;
}

.br-pay-k {
  display: block;
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--br-violet);
  margin-bottom: 5px;
}


/* The brand violet reads at 3.95:1 on the dark card — fine for a heading, under
   the 4.5 floor for labels set at 0.62–0.68rem. Lifted for these two only, so
   the accent elsewhere is untouched. */
:root[data-theme="dark"] .br-path-n,
:root[data-theme="dark"] .br-pay-k {
  color: #b6a1ff;
}

@media (hover: hover) and (pointer: fine) {
  .br-paths > li:hover {
    border-color: var(--br-violet);
    transform: translateY(-3px);
    box-shadow: 0 2px 4px rgba(20, 16, 31, 0.04), 0 16px 34px rgba(20, 16, 31, 0.10);
  }
}

@media (max-width: 900px) {
  .br-paths { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
  .br-paths { grid-template-columns: 1fr; }

  /* Stacked, there is no neighbouring card to line up with, so the reserved
     title and pay heights are only dead space under short copy. */
  .br-paths h3,
  .br-path-pay { min-height: 0; }
}


/* ============================================================
   MOBILE PILL — the nav links made the pill wider than the viewport,
   which pushed the h1 underneath it.
   ============================================================ */

@media (max-width: 760px) {
  .br .br-links { display: none; }
  .br .br-hero { padding-top: clamp(96px, 22vw, 130px); }
}

/* ============================================================
   HERO TICKS + INLINE CAPTURE
   Competitors take an email in the hero; a cold visitor sent to a
   ten-field form is where the drop-off happens.
   ============================================================ */

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.br-ticks {
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
}

.br-ticks li {
  position: relative;
  padding-left: 24px;
  font-size: 0.94rem;
  color: var(--br-mute);
}

.br-ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--br-violet-soft);
}

.br-ticks li::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 8px;
  width: 5px;
  height: 8px;
  border: solid var(--br-violet);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.br-grab {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}

.br-grab input {
  flex: 1 1 220px;
  min-width: 0;
  font: inherit;
  font-size: 0.95rem;
  color: var(--br-ink);
  background: var(--br-bg);
  border: 1px solid var(--br-line-2);
  border-radius: 999px;
  padding: 13px 20px;
  transition: border-color 200ms cubic-bezier(0.23, 1, 0.32, 1),
              box-shadow 200ms cubic-bezier(0.23, 1, 0.32, 1);
}

.br-grab input::placeholder { color: var(--br-faint); }

.br-grab input:focus {
  outline: none;
  border-color: var(--br-violet);
  box-shadow: 0 0 0 3px var(--br-violet-soft);
}



/* ============================================================
   CENTRED CARDS
   Every repeating card block centres: paths, timeline steps and the
   requirements list. The markers that used to hang off the left edge
   move onto the centre line so the axis stays consistent.
   ============================================================ */

.br-tl > li,
.br-need > li {
  text-align: center;
}

/* --- timeline: dot centres on the column, rail stays behind it --- */
.br-tl > li { padding-left: 0; }

.br-tl-dot {
  left: 50%;
  transform: translateX(-50%);
}

@media (hover: hover) and (pointer: fine) {
  .br-tl > li:hover .br-tl-dot { transform: translateX(-50%) scale(1.35); }
}

.br-tl p { max-width: 32ch; margin-left: auto; margin-right: auto; }

/* --- requirements --- */
.br-need p { max-width: 34ch; margin-left: auto; margin-right: auto; }

/* Stacked, a centred axis stops reading as a sequence, so the narrow
   layouts go back to left alignment with the rail down the side. */
@media (max-width: 620px) {
  .br-tl > li { text-align: left; padding-left: 30px; }
  .br-tl-dot { left: 0; transform: none; }
  .br-tl p { margin-left: 0; margin-right: 0; }
}

/* ============================================================
   FAQ TOGGLE — bug fix.
   styles.css draws this control as two absolutely-positioned 2px bars
   (summary::before + summary::after). bridge.css only overrode `content`,
   so the "+" glyph inherited position:absolute, width:2px, height:14px and
   rendered squeezed on top of the leftover bar. Reset the geometry, not
   just the character.
   ============================================================ */

.br-faq summary::before { content: none; display: none; }

.br-faq summary::after {
  content: "+";
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  right: auto;
  top: auto;
  background: none;
  transform: none;
  font-size: 1.15rem;
  line-height: 1;
  color: var(--br-violet);
  font-weight: 400;
  flex: none;
}

.br-faq details[open] summary::after { content: "\2013"; }

/* ============================================================
   CENTRED THROUGHOUT
   Section headings and their intros centre with the cards beneath them,
   so the page has one axis rather than left-aligned headings sitting
   above centred content.
   ============================================================ */

.br .br-head-2 {
  max-width: 60ch;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.br .br-head-2 p { margin-left: auto; margin-right: auto; }

.br-need > li { text-align: center; }

.br .br-slab { text-align: center; }
.br .br-slab h2,
.br .br-slab .lede { margin-left: auto; margin-right: auto; }
.br .br-slab .br-btn { margin: 0 auto; }

/* The FAQ stays left aligned: centred question rows would put the toggle
   marker in a different place on every line and destroy the scan column. */
.br-faq { margin-left: auto; margin-right: auto; text-align: left; }

/* ---------- the posting answer, stated before anything else ---------- */

.br-post {
  font-size: 0.82rem !important;
  margin: 0 0 12px !important;
  padding: 5px 12px;
  border-radius: 999px;
  align-self: center;
  display: inline-block;
  width: fit-content;
}

.br-post b { font-weight: 700; }

.br-post.no {
  background: var(--br-violet-soft);
  color: var(--br-violet) !important;
}

.br-post.yes {
  background: rgba(20, 16, 31, 0.06);
  color: var(--br-mute) !important;
}

:root[data-theme="dark"] .br-post.yes { background: rgba(255, 255, 255, 0.08); }

/* Superseded 2026-08-10. These three zeroed the reserves that keep the chip,
   the copy and the pay slab on one baseline across the row — equal card heights
   alone don't do that, because a title that wraps pushes everything under it
   down inside its own card. The reserves live with their rules above; this block
   only keeps the pay slab pinned to the bottom of the grid. */
.br-path-pay { margin-top: auto !important; }

/* Required / optional marker on the requirements list. */
.br-req {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 12px;
  background: var(--br-violet-soft);
  color: var(--br-violet);
}

.br-req.opt {
  background: rgba(20, 16, 31, 0.06);
  color: var(--br-faint);
}

:root[data-theme="dark"] .br-req.opt { background: rgba(255, 255, 255, 0.08); }

/* ============================================================
   THE LADDER — a climb, so it is read vertically and each rung steps
   up and to the right. The "how it works" rail is a fixed sequence you
   run once; this is progression you stay on, and giving them the same
   horizontal treatment would say they are the same kind of thing.
   ============================================================ */

.br-ladder {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 760px;
  counter-reset: rung;
  text-align: left;
}

.br-ladder > li {
  position: relative;
  padding: 22px 0 22px 62px;
  border-top: 1px solid var(--br-line);
}

/* Each rung indents further, so the climb is in the shape. */
.br-ladder > li:nth-child(2) { margin-left: clamp(0px, 3vw, 34px); }
.br-ladder > li:nth-child(3) { margin-left: clamp(0px, 6vw, 68px); }
.br-ladder > li:nth-child(4) { margin-left: clamp(0px, 9vw, 102px); }

.br-rung-n {
  position: absolute;
  left: 0;
  top: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--br-violet-soft);
  color: var(--br-violet);
  font-family: var(--display);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  transition: background 260ms cubic-bezier(0.23, 1, 0.32, 1),
              color 260ms cubic-bezier(0.23, 1, 0.32, 1);
}

/* The top rung is the destination, so it reads as reached. */
.br-ladder > li:last-child .br-rung-n {
  background: var(--br-violet);
  color: #fff;
}

.br-ladder h3 { margin-bottom: 6px; }
.br-ladder p { font-size: 0.94rem; line-height: 1.58; margin: 0; }

@media (hover: hover) and (pointer: fine) {
  .br-ladder > li { transition: border-top-color 260ms cubic-bezier(0.23, 1, 0.32, 1); }
  .br-ladder > li:hover { border-top-color: var(--br-violet); }
  .br-ladder > li:hover .br-rung-n { background: var(--br-violet); color: #fff; }
}

@media (max-width: 620px) {
  .br-ladder > li { padding-left: 52px; margin-left: 0 !important; }
  .br-rung-n { width: 34px; height: 34px; border-radius: 10px; }
}

/* ---------- mobile corrections ---------- */

@media (max-width: 760px) {
  /* 44px minimum touch targets. Inline links inside a sentence are left alone —
     padding them out would wreck the line height of the paragraph. */
  .br-btn.sm { padding: 11px 18px; }
  .br-ghost { padding: 11px 4px; }
  .br-tabs button { padding: 12px 4px; }
  .br-foot nav a { display: inline-block; padding: 11px 0; }
  .br-logo { padding: 8px 0; }

  /* Three items on one line don't fit a phone; the tagline was running off the
     right edge. Stack them. */
  .br .br-foot { flex-direction: column; align-items: flex-start; gap: 6px; }
  .br-foot p:first-child { margin-right: 0; }
  .br-foot nav { margin-top: 4px; }
}

/* A 4px-tall input is a 4px-tall hit area. The control becomes 24px and the
   visible 4px line is drawn by the track, so it looks the same and can be
   grabbed with a thumb. */
.br-calc-in input[type="range"] {
  height: 24px;
  background: transparent;
}

.br-calc-in input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 999px;
  background: var(--br-line);
}

.br-calc-in input[type="range"]::-moz-range-track {
  height: 4px;
  border-radius: 999px;
  background: var(--br-line);
}

/* Re-centre the thumb on the taller control. */
.br-calc-in input[type="range"]::-webkit-slider-thumb { margin-top: -7px; }