/* ====================================================================
   BUSINESS REVIVAL — "Slate"
   Deep blue-grey ground, white type, brand red as the accent.

   Deliberately restrained: the ground sits at ~64% saturation, so it
   reads unmistakably blue without becoming a blue page. Blue is the
   room; red is still the only loud thing on it.

   Complete palette — loads after glass.css and replaces any other theme.
   Scoped to body.br, so unconverted pages are untouched.
   ==================================================================== */

body.br {
  /* ground — deep slate. Blue enough to read as a colour, muted enough
     that it never competes with the accent. */
  --bg: #0A0A0C;

  /* type — "Paper", carried over */
  --tx:  #FFFFFF;
  --tx2: #EAEAEC;
  --tx3: #ABABB1;
  /* Was #7F7F85, which measures 4.13:1 on a card surface - under the 4.5 needed
     for small text, and this token is used for exactly that: the price note, the
     calculator footnote, hints under form fields. Lifted just enough to clear it
     on every surface without losing its "quiet" job. */
  --tx4: #8C8C93;

  /* accent — brand red. On blue-grey it is the highest-contrast thing
     on the page, which is exactly what you want it doing. */
  --red:   #E8210F;
  --red-d: #BB1B0C;
  --gold:  #BCBCC3;
  --grn:   #3FC8A6;
  --ember: #F24536;

  /* glass — neutral film, no blue tint, or panels turn icy */
  --g:    rgba(245, 245, 248, 0.078);
  --g2:   rgba(245, 245, 248, 0.125);
  --gbd:  rgba(245, 245, 248, 0.16);
  --gbd2: rgba(245, 245, 248, 0.30);
  --hi:   rgba(245, 245, 248, 0.30);
}

/* Ambient field. This rule is the one that renders: it beats the #sky block in
   glass.css on both load order and specificity, so anything set there is dead.
   Edit here.

   Was three blues and an ember, which is what made the whole site read blue no
   matter what --bg was set to. Now the only hues in the room are the brand's
   own: a red at the top, a deeper red opposite it, and a neutral lift at the
   bottom that gives depth without introducing a colour. */
body.br #sky {
  background:
    radial-gradient(58% 46% at 8% 0%,    rgba(232, 33, 15, 0.22), transparent 62%),
    radial-gradient(52% 44% at 95% 12%,  rgba(150, 28, 18, 0.18), transparent 62%),
    radial-gradient(66% 54% at 58% 100%, rgba(74, 74, 82, 0.30), transparent 66%),
    radial-gradient(34% 28% at 84% 68%,  rgba(198, 86, 54, 0.08), transparent 66%),
    var(--bg);
}

body.br #grain {
  opacity: 0.46;
  background-image: radial-gradient(rgba(245, 245, 248, 0.05) 1px, transparent 1px);
}

body.br header.top .hbar   { background: rgba(12, 12, 14, 0.58); }
body.br header.top.on-dark { background: rgba(12, 12, 14, 0.86); }
body.br .sheet             { background: rgba(10, 10, 12, 0.84); }
body.br .dock              { background: rgba(10, 10, 12, 0.95); }
body.br footer             { background: linear-gradient(180deg, rgba(245, 245, 248, 0.03), transparent 42%); }

/* panels: lit rim + deep float so they stand on their own */
body.br .g,
body.br .gl {
  box-shadow:
    0 1px 0 var(--hi) inset,
    0 -1px 0 rgba(0, 0, 0, 0.36) inset,
    0 28px 60px -26px rgba(0, 0, 0, 0.9);
}
body.br .g::before,
body.br .gl::before {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.07) 40%, transparent 62%);
}

/* ---- signed-in pages only: recessed panels ------------------------------
   The public site keeps the lit glass above. Behind the login the panels sit
   *below* the page instead: a dark fill rather than a white film, so only the
   hairline edge catches light.

   Four things were lighting a panel, not three - this fill, the inset highlight,
   the white rim on ::before, and backdrop-filter's saturate(), which lifts
   whatever shows through. brightness() below 1 is what actually brings it down;
   dimming the white layers alone left it bright.

   Scoped on the body class set by header.php from br_in_dash(). */
body.br.mem {
  --g:   rgba(0, 0, 0, 0.45);
  --hi:  rgba(255, 255, 255, 0.065);
  --gbd: rgba(255, 255, 255, 0.095);
}
body.br.mem .g,
body.br.mem .gl {
  box-shadow:
    0 1px 0 var(--hi) inset,
    0 -1px 0 rgba(0, 0, 0, 0.42) inset,
    0 26px 56px -26px rgba(0, 0, 0, 0.92);
}
/* The darkening lives in --g above, NOT here. It used to depend on
   backdrop-filter: brightness(), which Android drops on a lot of devices - the
   filter silently does nothing and the panel renders ~35% brighter than intended.
   That is why the dashboard looked right on desktop and wrong on a phone.
   Only blur is left, so it is decoration: if it runs the panel gets its frosted
   edge, and if it does not, the colour is identical either way. */
body.br.mem .g {
  -webkit-backdrop-filter: blur(22px) saturate(104%);
  backdrop-filter: blur(22px) saturate(104%);
}
body.br.mem .gl {
  -webkit-backdrop-filter: blur(10px) saturate(104%);
  backdrop-filter: blur(10px) saturate(104%);
}
body.br.mem .g::before,
body.br.mem .gl::before {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.03) 40%, transparent 62%);
}
body.br .gl:hover {
  background: var(--g2);
  box-shadow:
    0 1px 0 rgba(245, 245, 248, 0.48) inset,
    0 34px 68px -28px rgba(0, 0, 0, 0.95);
}

body.br .btn {
  color: #fff;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.34) inset,
    0 10px 28px -12px rgba(232, 33, 15, 0.72),
    0 2px 6px rgba(0, 0, 0, 0.42);
}
body.br .btn:hover {
  color: #fff;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.4) inset,
    0 18px 40px -14px rgba(232, 33, 15, 0.88),
    0 3px 8px rgba(0, 0, 0, 0.46);
}
body.br .btn .ar { color: #fff; }
body.br .btn.glass { color: var(--tx); }

/* eyebrows carry the brand red — they are the page's section markers */
body.br .eyebrow { color: var(--red); }
body.br .eyebrow::after { background: linear-gradient(90deg, rgba(232, 33, 15, 0.42), transparent); }

body.br .svc .n,
body.br .plan .track,
body.br .acc .mn { color: var(--gold); }
body.br .field input:focus + label,
body.br .field textarea:focus + label,
body.br .field input:not(:placeholder-shown) + label,
body.br .field textarea:not(:placeholder-shown) + label { color: var(--gold); }
body.br .authfoot a,
body.br .lbfoot a,
body.br .authcard .row a { color: var(--gold); }

/* data surfaces */
body.br .c.up   { color: var(--red); }
body.br .c.dn   { color: rgba(245, 245, 248, 0.28); }
body.br .sbar   { background: rgba(0, 0, 0, 0.4); }
body.br .bk::before { background: linear-gradient(90deg, rgba(232, 33, 15, 0.26), rgba(232, 33, 15, 0.04)); }
body.br .sbar .you  { background: linear-gradient(90deg, rgba(232, 33, 15, 0.9), rgba(255, 122, 74, 0.62)); color: #fff; }
body.br .sbar .ovr  { background: linear-gradient(90deg, rgba(176, 176, 184, 0.9), rgba(176, 176, 184, 0.6)); color: #141416; }
/* The "sell it on and keep" line.

   It was a tinted box with a red border. That reads as a promotional callout -
   it looks like the card is pushing you to resell, which is the opposite of the
   tone the rest of the page holds. A membership card should state the fact and
   let the reader decide.

   So: no fill, no border, no box. A hairline above it to separate it from the
   button, then a quiet line of text. The figure is the only part that brightens,
   because the figure is the fact. Restraint is the whole effect here.

   (Earlier it also set a border-COLOUR with no border declared anywhere, so that
   half of it was never painting at all.) */
body.br .plan .earn {
  margin-top: 16px;
  padding: 14px 0 0;
  border: 0;
  border-top: 1px solid var(--gbd);
  background: none;
  border-radius: 0;
  color: var(--tx3);
  line-height: 1.45;
}
body.br .plan .earn b { color: var(--tx); font-weight: 600; }
/* Two lines on purpose. As one sentence it ran to 373px and wrapped mid-phrase
   at every phone width - a centred footnote breaking after "your own" reads as
   an accident. Split structurally so the break is the same on every screen: the
   claim on top, the two figures under it. */
body.br .plan .earn .ek { display: block; }
body.br .plan .earn .ev { display: block; margin-top: 5px; }
body.br .plan .earn .ev i { font-style: normal; color: var(--tx4); margin: 0 5px; }

body.br .plan.feat  { border-color: rgba(232, 33, 15, 0.42); }
body.br .plan .tag  { color: #fff; box-shadow: 0 6px 16px -6px rgba(232, 33, 15, 0.85); }
body.br .lbrow.p1   { background: linear-gradient(90deg, rgba(176, 176, 184, 0.16), transparent 62%); }
body.br .lbrow      { grid-template-columns: 30px 1fr auto; }
body.br .lbrow .er  {
  font: 600 var(--t-label)/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
  color: #141416; background: var(--gold); padding: 5px 9px; border-radius: 100px;
}
@media (min-width: 700px) { body.br .lbrow { grid-template-columns: 34px 1fr auto auto; } }

body.br .dot { background: var(--red); box-shadow: 0 0 10px 1px rgba(232, 33, 15, 0.85); }
body.br .shot::after,
body.br .shot::before { background: linear-gradient(180deg, transparent 46%, rgba(4, 4, 5, 0.9)); }
body.br .field input:focus,
body.br .field textarea:focus { box-shadow: 0 1px 0 rgba(255,255,255,.2) inset, 0 0 0 4px rgba(232, 33, 15, 0.16); }
/* ---- the comparison rows -------------------------------------------------
   These two rows must read as a pair on one line each - that is the whole point
   of the card. "70% LEAVES THE PLATFORM" measured 185px against a title of 130px
   in 284px of room on a 360px phone, so it broke. Stacking it was worse: the
   comparison stops being a comparison once the halves are on separate lines.

   The label is now short enough to hold its line, and both halves are told not
   to wrap so this fails loudly rather than quietly if the copy ever grows. */
body.br .slab { gap: 12px; }
body.br .slab b,
body.br .slab span,
body.br .slabel span { white-space: nowrap; }
/* .slabel is the same shape as .slab - a label opposite a figure - and broke the
   same way: "Sales by people you introduced" needed 241px beside a 61px figure in
   284px of room. Shortened rather than stacked, for the same reason. */
@media (max-width: 379px) {
  body.br .slab span { font-size: 10px; letter-spacing: .1em; }
}

/* ---- a membership that is not on sale yet --------------------------------
   Same shape as the buy button so the card keeps its rhythm, but quiet and
   obviously not clickable: no fill, no red, no arrow. */
body.br .btn.soon {
  display: inline-flex; align-items: center; justify-content: center;
  background: none;
  border: 1px dashed var(--gbd2);
  color: var(--tx3);
  cursor: default;
  box-shadow: none;
}
body.br .btn.soon:hover { background: none; border-color: var(--gbd2); color: var(--tx3); transform: none; }

/* ---- red as text on black -------------------------------------------------
   Measured on a real Chrome at phone width, not guessed: brand red on the black
   ground comes out at 4.39:1. Small text needs 4.50, so every eyebrow on every
   page, and the "70%" in the hero, sat just under the line.

   Worth saying that black IMPROVED this - the same red on the old blue ground
   was 3.39:1, well below. It is only now close enough to be worth closing.

   --ember is the existing brand token one step brighter and lands at 5.35:1.
   Red stays exactly as it is anywhere it is a FILL with white text on top
   (buttons, badges, the best-seller glow), because that pairing was never the
   problem. This is only about red used as small type. */
body.br .eyebrow,
body.br .trow dd.hot,
body.br .c.up,
body.br .bk .pc,
body.br .fact dd s,
body.br .lbrow.p1 .er,
body.br .lbrow.p1 .rk,
body.br .parts .part.on span,
body.br .prose li::marker { color: var(--ember); }

/* ---- public cards on black ------------------------------------------------
   A flat white film at 6.2% was the whole surface. On the old blue ground it
   picked up the colour underneath and read as a lit pane; on black there is
   nothing to tint it, so it collapsed to an even rgb(25,25,27) — a grey
   rectangle. Three things fix that, and none of them add decoration:

     a gradient, so the card is lit from the top rather than uniformly filled
     a graded edge, brighter where the light would land and gone by the bottom
     a real shadow, so it sits ON the black instead of being a hole in it

   Scoped :not(.mem) — the signed-in pages keep their recessed treatment, which
   is a different job: those panels hold your money, these ones sell. */
body.br:not(.mem) .g,
body.br:not(.mem) .gl {
  background:
    linear-gradient(177deg,
      rgba(255, 255, 255, 0.062) 0%,
      rgba(255, 255, 255, 0.024) 38%,
      rgba(255, 255, 255, 0.012) 100%),
    rgba(19, 19, 22, 0.72);
  border-color: rgba(255, 255, 255, 0.11);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 -1px 0 rgba(0, 0, 0, 0.55) inset,
    0 2px 5px rgba(0, 0, 0, 0.4),
    0 32px 64px -30px rgba(0, 0, 0, 0.95);
}
/* the lit rim: strongest at the top-left corner, gone before the bottom */
body.br:not(.mem) .g::before,
body.br:not(.mem) .gl::before {
  background: linear-gradient(150deg,
    rgba(255, 255, 255, 0.42) 0%,
    rgba(255, 255, 255, 0.08) 26%,
    transparent 58%);
}
body.br:not(.mem) .gl:hover {
  border-color: rgba(255, 255, 255, 0.17);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.13) inset,
    0 -1px 0 rgba(0, 0, 0, 0.55) inset,
    0 2px 5px rgba(0, 0, 0, 0.4),
    0 40px 74px -30px rgba(0, 0, 0, 1);
}

/* ---- membership cards ---- */
/* The price was var(--gold), which is a neutral grey since the palette moved off
   blue — the most important number on the page was the dimmest thing in the
   card. It is the figure people came to read, so it reads as one. */
body.br .plan .pr { color: #fff; }

/* The best-seller had a red border and nothing else. On black a border alone
   disappears; the glow is what actually lifts it off the page, and it is the
   only card on the homepage that gets one. */
/* The red edge goes on every membership card, not just the best seller. It is
   on .plan itself so any course added later gets it with no further work. */
body.br .plan {
  border-color: rgba(232, 33, 15, 0.5);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 -1px 0 rgba(0, 0, 0, 0.55) inset,
    0 2px 5px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(232, 33, 15, 0.14),
    0 32px 64px -30px rgba(0, 0, 0, 0.95);
}

/* The best seller keeps the glow underneath it. With every card now edged in
   red, the glow and the badge are what still single it out - without one of
   them there would be no difference left between the cards at all. */
body.br .plan.pbest {
  border-color: rgba(232, 33, 15, 0.72);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 -1px 0 rgba(0, 0, 0, 0.55) inset,
    0 2px 5px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(232, 33, 15, 0.22),
    0 26px 60px -26px rgba(232, 33, 15, 0.34),
    0 32px 64px -30px rgba(0, 0, 0, 0.95);
}
body.br .plan.pbest::after { border-color: rgba(232, 33, 15, 0.72); }

/* The currency mark, set smaller than the number it belongs to. See br_money()
   for where .72 and .118 come from - both are measured off the font, not picked.
   Stepped down a shade in colour too, so the mark sits behind the figure rather
   than competing with it. */
body.br .cur {
  font-size: .72em;
  vertical-align: .118em;
  color: var(--tx3);
  margin-right: .05em;
  letter-spacing: 0;
  font-weight: 600;
}

/* The two withdrawal choices. Radios rather than buttons - they are opposites
   and one of them stops money being sent, so it should take a deliberate pick
   and a press, not a single stray tap. */
body.br .pick2 {
  display: flex; gap: 13px; align-items: flex-start;
  padding: 15px 0; border-top: 1px solid var(--gbd); cursor: pointer;
}
body.br .pick2:first-of-type { border-top: 0; }
body.br .pick2 input { flex: 0 0 auto; margin-top: 3px; width: 20px; height: 20px; accent-color: var(--red); }
body.br .pick2 span { display: block; color: var(--tx3); font: 400 var(--t-sm)/1.5 var(--ui); }
body.br .pick2 span b { display: block; color: var(--tx); font: 500 var(--t-base)/1.35 var(--ui); margin-bottom: 3px; }
body.br .pick2:hover span b { color: #fff; }

/* ---- dashboard: tightened -------------------------------------------------
   Same two cards in the same order. Only the rhythm and the way figures line up.

   The top card carried a lot of dead space under its figure, and the rows below
   let each value drift to wherever its label ended, so the column of money was
   ragged. Values now share a fixed column and tabular figures, which is what
   makes a list of numbers read as a statement rather than a list of sentences.

   The withdraw button is unchanged in colour and size but sits on a soft glow
   instead of reading as a solid slab - it was the loudest thing on the screen. */
body.br .today { padding: 22px 22px 20px; }
body.br .today .v { margin-top: 6px; letter-spacing: -.055em; font-variant-numeric: tabular-nums; }
body.br .today .k { letter-spacing: .2em; }

body.br .figs .r { padding: 14px 0; }
body.br .figs .val { min-width: 7.2em; text-align: right; font-variant-numeric: tabular-nums; }
body.br .figs .r.lead { padding: 18px 0 14px; }
body.br .figs .r.lead .val { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 1.9rem); }
body.br .figs .rbtn { padding: 12px 0 16px; }
body.br .figs .rbtn .btn { min-height: 50px; box-shadow: 0 10px 26px -14px rgba(232, 33, 15, 0.75); }

/* ---- browser-painted UI ---------------------------------------------------
   Three things on a page are drawn by the browser, not by this stylesheet, and
   all three default to a light treatment that looks wrong on black. */

/* Scrollbars, dropdown menus, date pickers and the like. Without this they
   render in light mode - a white scrollbar down the side of a black page. */
html, body.br { color-scheme: dark; }

/* Chrome paints its own background on any field it has remembered, which turned
   the login and sign-up inputs into pale blocks. The inset shadow is the only
   way to override it; background-color is ignored on autofilled fields. */
body.br input:-webkit-autofill,
body.br input:-webkit-autofill:hover,
body.br input:-webkit-autofill:focus,
body.br textarea:-webkit-autofill,
body.br select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #121214 inset !important;
  box-shadow: 0 0 0 1000px #121214 inset !important;
  -webkit-text-fill-color: var(--tx) !important;
  caret-color: var(--tx);
  transition: background-color 9999s ease-in-out 0s;
}

body.br ::selection { background: var(--red); color: #fff; }

/* full leaderboard: every row carries a value, so the chip treatment is
   dropped and first place is marked by weight instead */
body.br .lbrow    { grid-template-columns: 26px 1fr auto; }
body.br .lbrow .er{ background: none; padding: 0; border-radius: 0;
                    color: var(--tx); font: 700 var(--t-base)/1 var(--ui);
                    letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
body.br .lbrow.p1 .er { color: var(--red); }
body.br .lbrow.p1 .rk { color: var(--red); }
body.br .lbrow .ct{ display: none; }
@media (min-width: 620px) {
  body.br .lbrow    { grid-template-columns: 30px 1fr auto auto; }
  body.br .lbrow .ct{ display: block; font: 400 var(--t-tiny)/1 var(--mono);
                      color: var(--tx3); font-variant-numeric: tabular-nums; text-align: right; }
}

/* leaderboard: avatar column, no money on show */
body.br .lbrow { grid-template-columns: 22px 40px 1fr auto; gap: 12px; align-items: center; }
body.br .lbrow .av {
  width: 40px; height: 40px; border-radius: 50%; object-fit: cover;
  border: 1px solid var(--gbd); background: rgba(255,255,255,.06);
}
body.br .lbrow.p1 .av { border-color: var(--red); box-shadow: 0 0 0 2px rgba(232, 33, 15,.28); }
body.br .lbrow .ct {
  display: block; font: 400 var(--t-tiny)/1 var(--mono); color: var(--tx3);
  font-variant-numeric: tabular-nums; text-align: right;
}
body.br .lbrow .er { display: none; }
@media (min-width: 620px) { body.br .lbrow { grid-template-columns: 26px 44px 1fr auto; } body.br .lbrow .ct { font-size: var(--t-sm); } }

/* leaderboard: rank, photo, name. No metrics on public display. */
body.br .lbrow { grid-template-columns: 22px 40px 1fr; gap: 12px; }
body.br .lbrow .ct, body.br .lbrow .er { display: none; }
@media (min-width: 620px) { body.br .lbrow { grid-template-columns: 26px 44px 1fr; } }

/* dashboard: minimal footer, no marketing */
body.br footer.dashfoot { margin-top: 40px; padding: var(--s5) 0 40px; border-top: 1px solid var(--gbd); background: none; }
/* The signed-in footer now carries the same column grid as the public one, so
   the copyright strip needs its separator back - it was removed when this
   footer was a single line with nothing above it. */
body.br footer.dashfoot .fb { margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--gbd); }

/* ====================================================================
   DASHBOARD
   ==================================================================== */
/* This element is `class="wrap dash"`, so it also carries .wrap's side padding.
   Setting the shorthand here wiped that out and pinned the top gap - which is why
   changing .dash in glass.css had no effect at all. Only the top is set now, and
   the sides are left to .wrap. */
body.br .dash { padding-top: 42px; }
@media (min-width: 700px) { body.br .dash { padding-top: 52px; } }

body.br .dhead { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
body.br .dhead .av { width: 52px; height: 52px; border-radius: 50%; object-fit: cover;
  border: 1px solid var(--gbd); flex: 0 0 auto; }
body.br .dhead .av.ini { display: grid; place-items: center; color: #fff;
  font: 700 var(--t-h3)/1 var(--ui); background: linear-gradient(140deg, var(--red), #B4247A); border: 0; }
body.br .dhead h2 { font-size: clamp(1.25rem, 1rem + 1.2vw, 1.75rem); }
body.br .dhead p { margin: 4px 0 0; font: 600 var(--t-label)/1 var(--mono); letter-spacing: .15em;
  text-transform: uppercase; color: var(--tx3); }

/* ---- today: the one card people screenshot ---- */
body.br .today { position: relative; padding: 24px 22px 24px; border-radius: 20px; overflow: hidden; }
body.br .today .k { display: block; font: 600 var(--t-label)/1 var(--mono); letter-spacing: .18em;
  text-transform: uppercase; color: var(--tx3); }
body.br .today .v { display: block; margin: 11px 0 0; color: #fff; font-weight: 700;
  letter-spacing: -.05em; font-variant-numeric: tabular-nums;
  font-size: clamp(2.15rem, 1.35rem + 3.8vw, 3.1rem); line-height: 1; }
body.br .today .sales { display: block; margin-top: 14px; font: 400 var(--t-sm)/1 var(--ui); color: var(--tx3); }
body.br .today .sales b { color: var(--tx); font-weight: 700; font-variant-numeric: tabular-nums; }
/* identity row inside the income card */
body.br .whoami { display: flex; align-items: center; gap: 15px; margin-bottom: 18px; padding-right: 78px; }
body.br .whoami .av { width: 72px; height: 72px; border-radius: 50%; object-fit: cover;
  border: 1px solid var(--gbd2); flex: 0 0 auto; }
body.br .whoami .av.ini { display: grid; place-items: center; color: #fff; border: 0;
  font: 700 1.5rem/1 var(--dis); background: linear-gradient(140deg, var(--red), #B4247A); }
body.br .whoami .me { flex: 1; min-width: 0; }
/* names run long here — "Ubaid Ur Rehman Joiya" is a real member. Two lines is
   better than an ellipsis on the one thing a member wants to see spelled right. */
body.br .whoami .me b { display: block; color: #fff; font: 700 1.08rem/1.22 var(--dis);
  letter-spacing: -.025em; }
body.br .whoami .me span { display: block; margin-top: 5px; font: 600 var(--t-label)/1 var(--mono);
  letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
/* the brandmark is a watermark, not a column — taking it out of the flex row
   gives the name the full width, so longer names stop truncating */
/* Painted as solid brand colour through the logo's own alpha channel rather
   than as an <img>. Nothing of the file's pixels is drawn, so no backdrop or
   decoding artefact can put a pale plate behind it. */
body.br .whoami .mark { position: absolute; right: 22px; top: 21px;
  width: 92px; height: 22px; background: var(--red); opacity: .6; pointer-events: none;
  -webkit-mask: url(../img/brand/lockup-300.png) no-repeat center / contain;
  mask: url(../img/brand/lockup-300.png) no-repeat center / contain; }
body.br .today .k i { font-style: normal; color: var(--tx4); margin-left: 9px; }

/* ---- section label ---- */
/* Section labels sat 2px from the wrap edge while the card beneath them starts
   its text 20px in, so they read as hanging off the left. Indented to line up
   with the card's own content, and set at a size that is actually readable
   rather than a squint of tracked-out micro caps. */
body.br .dlab { margin: 30px 0 12px; padding-left: 20px;
  font: 600 var(--t-tiny)/1 var(--mono); letter-spacing: .13em;
  text-transform: uppercase; color: var(--tx3); }

/* ---- figures: one panel of hairline rows, not a grid of boxes ---- */
body.br .figs { border-radius: 18px; padding: 10px 20px; margin-top: var(--s3); }
body.br .figs .r { display: flex; align-items: baseline; justify-content: space-between;
  gap: 18px; padding: 15px 0; border-top: 1px solid var(--gbd); }
body.br .figs .r:first-child { border-top: 0; }
body.br .figs .lbl { display: block; flex: 1; min-width: 0; color: var(--tx2); font: 400 var(--t-base)/1.3 var(--ui); }
body.br .figs .lbl .sn { display: block; margin-top: 4px; font-size: var(--t-tiny); color: var(--tx4); }
body.br .figs .val { display: block; margin: 0; flex: 0 0 auto; color: #fff; font: 700 1.05rem/1.15 var(--ui);
  letter-spacing: -.035em; font-variant-numeric: tabular-nums; white-space: nowrap; }
body.br .figs .r.lead { padding: 19px 0 15px; align-items: center; }
body.br .figs .r.lead .lbl { color: var(--tx3); font: 600 var(--t-label)/1 var(--mono);
  letter-spacing: .16em; text-transform: uppercase; }
body.br .figs .r.lead .val { font-size: clamp(1.35rem, 1.05rem + 1.3vw, 1.7rem); letter-spacing: -.045em; }
body.br .figs .rbtn { padding: 14px 0 18px; }
body.br .figs .rbtn .btn { width: 100%; }

/* ---- nav list: same row rhythm, no tiles ---- */
body.br .nlist { border-radius: 18px; padding: 2px 20px; }
body.br .nlist a { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 13px 0; border-top: 1px solid var(--gbd); color: var(--tx);
  font: 500 var(--t-base)/1.25 var(--ui); text-decoration: none; }
body.br .nlist a:first-child { border-top: 0; }
body.br .nlist a .ar { color: var(--tx4); font-size: var(--t-base); transition: transform .25s ease, color .25s ease; }
body.br .nlist a:hover .ar { transform: translateX(4px); color: var(--red); }

/* ---- invite link ---- */
body.br .dcard { padding: 18px 20px; border-radius: 18px; }
body.br .dcard h3 { font-size: var(--t-lede); }
body.br .dcard .sub { margin: 8px 0 16px; font-size: var(--t-sm); color: var(--tx3); }
body.br .copy { display: flex; gap: 8px; }
body.br .copy input {
  flex: 1; min-width: 0; min-height: 48px; padding: 0 14px; border-radius: 11px;
  border: 1px solid var(--gbd); background: rgba(255,255,255,.05); color: var(--tx);
  font: 400 var(--t-sm)/1 var(--mono); outline: none;
}
body.br .copy input:focus { border-color: rgba(255,255,255,.32); box-shadow: 0 0 0 4px rgba(232, 33, 15,.14); }
body.br .copy .btn { min-height: 48px; padding: 0 18px; flex: 0 0 auto; }
body.br .copy .btn.ok { background: var(--grn); border-color: var(--grn); color: #08201A; }
/* Two share buttons on one row. "Share on WhatsApp" + "Share on Telegram"
   measured 302px against 280px of room on a 360px phone, so they wrapped there
   and fitted on a 390px iPhone - which is why it looked broken on Android only.
   Shortened, and set to split the row evenly, so they hold one line at any
   width rather than fitting by a few pixels. */
body.br .share { display: flex; gap: 10px; margin-top: 12px; }
body.br .share .btn { flex: 1 1 0; min-width: 0; padding-left: 8px; padding-right: 8px; }

@media (min-width: 700px) {
  body.br .today { padding: 28px 28px 28px; }
  body.br .figs, body.br .nlist, body.br .dcard { padding-left: 26px; padding-right: 26px; }
  body.br .dlab { padding-left: 26px; }
  body.br .figs .rbtn .btn { width: auto; min-width: 220px; }
}