/* Business Revival — Glass theme Every selector is scoped under .br (set on for converted pages only), so this file is inert everywhere else. Generated 2026-08-11 */ :root{--bg:#08080A; --tx:#FFFFFF; --tx2:#D2D2D8; --tx3:#94949C; --tx4:#6B6B74; --red:#E8210F; --red-d:#BB1B0C; --gold:#FFC46B; --grn:#3FD98A; --g:rgba(255,255,255,.062); --g2:rgba(255,255,255,.1); --gbd:rgba(255,255,255,.135); --gbd2:rgba(255,255,255,.26); --hi:rgba(255,255,255,.28); /* three roles, three faces. Clash Display carries the headlines and the big figures; Satoshi sets running text; Plex Mono handles labels and anything that behaves like data on a trading screen. */ --dis:'Source Serif 4',Georgia,serif; --ui:'Manrope',system-ui,-apple-system,sans-serif; --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace; --e:cubic-bezier(.16,1,.3,1); --pad:20px; /* spacing scale — each step ~1.5x the last, so a gap's SIZE says what it means: s1/s2 bind a label to the thing it labels, s5/s6 break one group from the next. Never reach for the middle of the scale by default. */ --s1:8px; --s2:14px; --s3:22px; --s4:34px; --s5:50px; --s6:76px; /* section gaps carry meaning: --sec keeps a section tied to the one above (same idea, continued), --sec-brk starts a new idea. Two values, not one. */ --sec:54px; --sec-brk:106px; /* type scale — one size per ROLE, not per element. Before this there were 67 distinct font-sizes: mono caps labels alone used 8.5/9/9.5/10/11px interchangeably, so every section's label was a slightly different size. */ --t-label:11px; /* mono caps: eyebrows, ranks, table heads, meta */ --t-tiny:0.78rem; /* footnotes, hints, legal */ --t-sm:0.875rem; /* secondary body, list items, table cells */ --t-base:1rem; /* paragraphs */ --t-lede:1.125rem; /* intro paragraphs — a real step above body, not 1px */ --t-h3:1.2rem; --t-fig:1.4rem; /* a figure inside a card */ --t-fig-lg:2.1rem;} /* the one figure a panel is built around */ .br *,.br *::before,.br *::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body.br{margin:0;color:var(--tx2);background:var(--bg);font:400 var(--t-base)/1.62 var(--ui); -webkit-font-smoothing:antialiased;overflow-x:hidden} /* Four washes lie over the whole site. The violet and the blue were the two doing most of the work, so the page read blue everywhere regardless of the ground colour. Both are pulled back and slightly desaturated; the red stays as it is, because it is the brand and it is what should be reading. */ #sky{position:fixed;inset:0;z-index:-2;background: radial-gradient(58% 46% at 10% 4%,rgba(232,33,15,.22),transparent 62%), radial-gradient(52% 44% at 92% 14%,rgba(150,28,18,.18),transparent 62%), radial-gradient(64% 52% at 56% 98%,rgba(74,74,82,.30),transparent 64%), radial-gradient(40% 34% at 78% 62%,rgba(198,86,54,.08),transparent 66%),var(--bg)} #grain{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5; background-image:radial-gradient(rgba(255,255,255,.045) 1px,transparent 1px);background-size:3px 3px} .br img{display:block;max-width:100%} .br a{color:inherit;text-decoration:none} .br .wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 var(--pad)} .br .mono{font-family:var(--mono);font-variant-numeric:tabular-nums} /* Two spacing utilities, added once the same inline style="margin-top:var(--sN)" turned up independently in six different views - every other one-off adjustment on this theme goes through a named selector, not a style attribute on one instance. */ .br .mt2{margin-top:var(--s2)} .br .mt5{margin-top:var(--s5)} .br p{margin:0} .br h1,.br h2,.br h3{margin:0;color:var(--tx);font-family:var(--dis);font-weight:700;letter-spacing:-.012em;line-height:1.1} .br :focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:4px} .br .g,.br .gl{position:relative;background:var(--g);border:1px solid var(--gbd);border-radius:16px; box-shadow:0 1px 0 var(--hi) inset,0 -1px 0 rgba(0,0,0,.18) inset,0 24px 54px -26px rgba(0,0,0,.82); transition:background .4s var(--e),box-shadow .4s var(--e),transform .4s var(--e)} .br .g{-webkit-backdrop-filter:blur(24px) saturate(165%);backdrop-filter:blur(24px) saturate(165%)} .br .gl{-webkit-backdrop-filter:blur(10px) saturate(140%);backdrop-filter:blur(10px) saturate(140%)} .br .g::before,.br .gl::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px; background:linear-gradient(135deg,rgba(255,255,255,.7),rgba(255,255,255,.06) 42%,transparent 62%); /* The white gradient above is meant to be masked down to a 1px rim. The mask was declared with -webkit- only, while mask-composite was unprefixed — so on any engine that ignores the -webkit- form there was no mask at all and this layer washed the whole panel white. Both forms are now complete. */ -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none} .br .gl:hover{background:var(--g2);transform:translateY(-3px); box-shadow:0 1px 0 rgba(255,255,255,.42) inset,0 30px 60px -28px rgba(0,0,0,.92)} .br .eyebrow{font:600 var(--t-label)/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:#C6C6CE;display:flex;align-items:center;gap:11px} .br .eyebrow::after{content:"";height:1px;flex:1;background:linear-gradient(90deg,var(--gbd),transparent)} .br header.top{position:sticky;top:8px;z-index:90;margin:10px auto 0;max-width:1180px;padding:0 var(--pad)} /* The strip above the floating header showed the background layers raw, which read as a lighter band across the very top on every screen. This paints it in the page colour so the top edge is uniform, and it also gives the header a solid backdrop when content scrolls up behind it. */ .br header.top::before{content:"";position:fixed;left:0;right:0;top:0;height:20px; background:var(--bg);z-index:-1;pointer-events:none} .br .hbar{display:flex;align-items:center;gap:12px;height:70px;padding:0 14px 0 16px;border-radius:16px} .br .logo-mark{height:48px;width:auto;max-width:none} .br .logo-lock{display:none;height:38px;width:auto;max-width:none} .br .hbar .sp{margin-left:auto} .br .navlinks{display:none;align-items:center;gap:24px} .br .navlinks a{font-size:var(--t-sm);color:var(--tx2);position:relative;padding:5px 0} .br .navlinks a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1.5px;border-radius:2px;background:var(--red);transition:width .34s var(--e)} .br .navlinks a:hover{color:#fff} .br .navlinks a:hover::after{width:100%} /* Both nav files (dashboard and public) compute an "on" class for the current page, but no rule for it existed at any width above mobile - the desktop/laptop bar never showed where you were, on any page on the site. */ .br .navlinks a.on{color:#fff} .br .navlinks a.on::after{width:100%} /* the header avatar sits next to the menu button and had no styling at all, so it rendered as a raw square against a round button. Same box, same rim. */ .br .who{width:44px;height:44px;flex:0 0 auto;display:grid;place-items:center;overflow:hidden; background:var(--g);border:1px solid var(--gbd);border-radius:50%; transition:border-color .25s var(--e),transform .25s var(--e)} .br .who img{width:100%;height:100%;object-fit:cover;display:block} .br .who .ini{color:#fff;font:700 var(--t-sm)/1 var(--ui);letter-spacing:.02em} .br .who:hover{border-color:var(--gbd2);transform:translateY(-1px)} .br .menu{width:44px;height:44px;display:grid;place-items:center;background:var(--g);border:1px solid var(--gbd);border-radius:50%;cursor:pointer;padding:0} .br .menu i{display:block;width:15px;height:1.5px;background:#fff;position:relative} .br .menu i::before,.br .menu i::after{content:"";position:absolute;left:0;width:15px;height:1.5px;background:#fff;transition:transform .38s var(--e)} .br .menu i::before{top:-5px} .br .menu i::after{top:5px} body.br.nav-open .menu i{background:transparent} body.br.nav-open .menu i::before{transform:translateY(5px) rotate(45deg)} body.br.nav-open .menu i::after{transform:translateY(-5px) rotate(-45deg)} .br .sheet{position:fixed;inset:0;z-index:89;background:rgba(0,0,0,.72); -webkit-backdrop-filter:blur(30px) saturate(150%);backdrop-filter:blur(30px) saturate(150%); display:flex;flex-direction:column;justify-content:center;padding:0 var(--pad);clip-path:inset(0 0 100% 0);pointer-events:none} body.br.nav-open .sheet{pointer-events:auto} /* Nav sheet rows - icon box, label (+ optional subtitle), trailing arrow. The divider is an inset ::after rather than a border on the row, so it starts under the label instead of running edge-to-edge under the icon too - the detail that tells this apart from a plain unstyled link list. */ .br .sheet a.nl{position:relative;display:flex;align-items:center;gap:14px;color:#fff; font-size:1.5rem;font-weight:600;letter-spacing:-.03em;padding:15px 0;opacity:0} .br .sheet a.nl::after{content:"";position:absolute;left:50px;right:0;bottom:0;height:1px;background:rgba(255,255,255,.09)} .br .sheet a.nl .ic{flex:0 0 auto;width:36px;height:36px;display:grid;place-items:center; border-radius:11px;background:var(--g);border:1px solid var(--gbd);color:var(--tx3); transition:background .25s var(--e),border-color .25s var(--e),color .25s var(--e)} .br .sheet a.nl .ic svg{width:19px;height:19px;display:block} .br .sheet a.nl .tx{flex:1 1 auto;min-width:0} .br .sheet a.nl small{display:block;font:600 var(--t-label)/1 var(--mono);letter-spacing:.16em;color:var(--tx4);margin-top:5px;text-transform:uppercase} .br .sheet a.nl .ar{flex:0 0 auto;font-size:1.05rem;color:var(--tx4);transition:transform .3s var(--e),color .25s var(--e)} .br .sheet a.nl:active .ar{transform:translateX(3px)} .br .sheet a.nl.on{color:#fff} .br .sheet a.nl.on .ic{background:var(--red);border-color:var(--red);color:#fff} .br .sheet a.nl.on .ar{color:var(--red)} .br .sheet .lab{margin:20px 0 2px;font:600 var(--t-label)/1 var(--mono);letter-spacing:.16em; text-transform:uppercase;color:var(--tx4);opacity:0} .br .sheet .sf{margin-top:var(--s5);opacity:0} .br .sheet .sf .bic{width:18px;height:18px;flex:0 0 auto} .br .btn{--bg2:var(--red);--bd:transparent;--fg:#fff;position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px; min-height:52px;padding:0 24px;border:1px solid var(--bd);background:var(--bg2);color:var(--fg); font:700 var(--t-sm)/1 var(--ui);letter-spacing:-.01em;cursor:pointer;border-radius:11px;overflow:hidden;isolation:isolate; box-shadow:0 1px 0 rgba(255,255,255,.34) inset,0 10px 28px -12px rgba(232,33,15,.9),0 2px 6px rgba(0,0,0,.32); transition:transform .22s var(--e),box-shadow .32s var(--e);-webkit-tap-highlight-color:transparent} .br .btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--red-d);transform:translateY(101%);transition:transform .44s var(--e)} .br .btn:hover::before{transform:translateY(0)} .br .btn:hover{transform:translateY(-2px);box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 18px 40px -14px rgba(232,33,15,1)} .br .btn:active{transform:translateY(0) scale(.985)} .br .btn .ar{display:inline-block;transition:transform .34s var(--e)} .br .btn:hover .ar{transform:translateX(4px)} .br .btn.glass{--bg2:var(--g2);--bd:var(--gbd2);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px); box-shadow:0 1px 0 var(--hi) inset,0 12px 30px -18px rgba(0,0,0,.9)} .br .btn.glass::before{background:rgba(255,255,255,.2)} .br .btn.sm{min-height:42px;padding:0 17px;font-size:var(--t-tiny);border-radius:9px} .br .btn.wide{width:100%} .br .field{position:relative;margin-bottom:14px} .br .field input,.br .field textarea{width:100%;min-height:60px;padding:25px 16px 11px;border:1px solid var(--gbd);border-radius:12px; background:rgba(255,255,255,.05);color:#fff;font:400 var(--t-base)/1.4 var(--ui);appearance:none;outline:none; -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 1px 0 rgba(255,255,255,.14) inset; transition:border-color .26s,background .26s,box-shadow .26s} .br .field textarea{min-height:118px;resize:vertical} .br .field label{position:absolute;left:16px;top:20px;font:400 var(--t-base)/1 var(--ui);color:var(--tx3);pointer-events:none;transform-origin:0 0;transition:transform .27s var(--e),color .27s} .br .field input:focus+label,.br .field textarea:focus+label,.br .field input:not(:placeholder-shown)+label,.br .field textarea:not(:placeholder-shown)+label{transform:translateY(-12px) scale(.72);color:#C6C6CE} .br .field input:focus,.br .field textarea:focus{border-color:rgba(255,255,255,.32);background:rgba(255,255,255,.085);box-shadow:0 1px 0 rgba(255,255,255,.2) inset,0 0 0 4px rgba(232,33,15,.16)} .br .field .hint{display:block;margin-top:7px;font:400 var(--t-tiny)/1.4 var(--ui);color:var(--tx4)} .br .life{display:inline-flex;align-items:center;gap:8px;padding:7px 13px;border-radius:100px; background:rgba(63,217,138,.12);border:1px solid rgba(63,217,138,.34); font:600 var(--t-label)/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--grn)} .br .life::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--grn);box-shadow:0 0 9px 1px rgba(63,217,138,.9)} .br .never{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin:0 0 var(--s5);padding-top:var(--s3);border-top:1px solid var(--gbd)} .br .never span{display:inline-flex;align-items:center;min-height:31px;padding:0 12px; font:500 var(--t-label)/1 var(--ui);letter-spacing:.01em;color:var(--tx3); border-radius:100px;border:1px solid var(--gbd);background:rgba(255,255,255,.04)} .br .never b{color:#fff;font-weight:600} .br .hero{padding:var(--s3) 0 var(--s4)} /* One column, and a measure that keeps the headline from running edge to edge on a wide screen. The hero is a thesis: headline, one line, one action. */ .br .herowrap{max-width:880px} /* inner-page header: same rhythm as the homepage hero, minus the chart */ .br .pagehead{padding-bottom:0} .br .pagehead h1{font-size:clamp(1.9rem,1.2rem+3.4vw,3.4rem);margin-top:var(--s2);max-width:18ch} .br .pagehead .lede{max-width:52ch;margin:var(--s3) 0 0;font-size:var(--t-base);line-height:1.72;color:var(--tx3)} /* Measure kept deliberately narrow so the headline steps down - 'Learn the desk. / Then run your / own.' The stagger is the look; balancing the lines evens them out and loses it. */ .br .hero h1{font-size:clamp(2.35rem,1.1rem+5vw,4.6rem);margin-top:calc(var(--s3) + 8px);max-width:none;line-height:1.16} /* The dropped last word, set to land beneath the "you" of the line above. Measured in em so it holds its position as the headline scales. */ /* 5.99em is where the 'u' of 'your' begins - measured from the font's own glyph advances, not estimated. On a very narrow phone the full indent would push 'own.' past the screen edge, so it eases back below 360px. */ /* line-height set on the span too: as an inline-block it forms its own line box, so the headline's leading alone did not tighten the gap above it. */ /* The two gaps are tuned separately: the headline's leading opens the space under 'Learn the desk.', and this negative margin closes the space above 'own.' again - otherwise raising one would raise both. */ .br .hero h1 .drop{display:inline-block;margin-left:5.99em;margin-top:-.30em;line-height:1.0;vertical-align:top} @media(max-width:360px){.br .hero h1 .drop{margin-left:4.2em}} .br .hero h1 u{text-decoration:none;color:var(--red)} .br .hero .lede{max-width:46ch;margin:var(--s3) 0 0;font-size:var(--t-lede);line-height:1.7;color:var(--tx3)} .br .lede b{color:#fff;font-weight:700} .br .hero .acts{display:flex;flex-direction:column;align-items:flex-start;gap:18px;margin-top:var(--s4)} /* The hero's terms list. Hairline rows, label left, value right, so the three things a visitor wants to know read in one pass. Values are mono with tabular figures so the percentages and words sit on the same rhythm. */ .br .terms{margin:var(--s4) 0 0;max-width:26rem} .br .trow{display:flex;align-items:baseline;justify-content:space-between;gap:16px; padding:13px 0;border-top:1px solid var(--gbd)} .br .trow:last-child{border-bottom:1px solid var(--gbd)} .br .trow dt{margin:0;font-size:var(--t-sm);color:var(--tx3)} .br .trow dd{margin:0;font:600 var(--t-base)/1 var(--mono);color:#fff; font-variant-numeric:tabular-nums;letter-spacing:-.01em} .br .trow dd.hot{color:var(--red);font-weight:700} @media(min-width:700px){ .br .terms{max-width:30rem} .br .trow{padding:15px 0} .br .trow dd{font-size:var(--t-lede)} } .br .quiet{display:inline-flex;align-items:center;gap:8px;color:var(--tx3); font:500 var(--t-sm)/1 var(--ui);border-bottom:1px solid var(--gbd2);padding-bottom:5px; transition:color .25s var(--e),border-color .25s var(--e)} .br .quiet:hover{color:#fff;border-color:var(--red)} .br .quiet .ar{transition:transform .25s var(--e)} .br .quiet:hover .ar{transform:translateX(3px)} .br .chartcard{margin-top:44px;padding:20px 18px 18px;border-radius:18px} .br .chead{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px} .br .chead span{font:600 var(--t-label)/1 var(--mono);letter-spacing:.17em;text-transform:uppercase;color:var(--tx3)} .br .chead i{font-style:normal;font:600 var(--t-label)/1 var(--mono);letter-spacing:.13em;color:var(--red);display:flex;align-items:center;gap:6px} .br .dot{width:6px;height:6px;border-radius:50%;background:var(--red);box-shadow:0 0 10px 1px rgba(232,33,15,.9)} .br .candles{display:flex;align-items:flex-end;gap:3px;height:126px} .br .c{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;transform:scaleY(0);transform-origin:bottom} .br .c i,.br .c s{display:block;width:1px;background:currentColor;opacity:.5;text-decoration:none} .br .c b{display:block;width:100%;background:currentColor;border-radius:1px} .br .c.up{color:var(--red)} .br .c.dn{color:rgba(255,255,255,.3)} .br .facts{display:flex;margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--gbd)} .br .fact{flex:1;padding-right:10px} .br .fact dt{font:600 var(--t-label)/1.3 var(--mono);letter-spacing:.15em;text-transform:uppercase;color:var(--tx4)} .br .fact dd{margin:var(--s1) 0 0;font-size:var(--t-fig);color:#fff;letter-spacing:-.045em;font-weight:700;font-variant-numeric:tabular-nums} .br .fact dd s{text-decoration:none;color:var(--red)} .br .fact .fs{display:block;margin-top:7px;font:400 var(--t-label)/1.35 var(--ui);letter-spacing:0;text-transform:none;color:var(--tx4)} .br .band{padding:var(--sec) 0 0} /* each section gets the air its job needs — the offer breathes, a continuation barely separates, proof sits closer than the pitch it supports. */ .br .band.s-pitch{padding-top:92px} .br .band.s-what {padding-top:66px} .br .band.s-cont {padding-top:40px} .br .band.s-proof{padding-top:58px} .br .band.s-offer{padding-top:124px} .br .band.s-close{padding-top:80px} .br .band h2{font-size:clamp(1.6rem,1.1rem+2.2vw,2.85rem);max-width:19ch;margin-top:var(--s2);line-height:1.12} .br .band .lede{max-width:48ch;margin:var(--s3) 0 0;line-height:1.72;color:var(--tx3)} .br .split{margin-top:var(--s5);padding:22px 18px 24px;border-radius:18px} .br .srow+.srow{margin-top:22px;padding-top:22px;border-top:1px solid var(--gbd)} .br .slab{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:11px} .br .slab b{color:#fff;font:700 var(--t-base)/1 var(--ui);letter-spacing:-.02em} .br .slab span{font:600 var(--t-label)/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--tx4)} .br .sbar{height:44px;border-radius:9px;overflow:hidden;display:flex;border:1px solid var(--gbd);background:rgba(0,0,0,.22)} .br .sbar div{display:flex;align-items:center;padding:0 12px;font:700 var(--t-label)/1 var(--mono);white-space:nowrap;width:0;transition:width 1.15s var(--e)} .br .sbar .you{background:linear-gradient(90deg,rgba(232,33,15,.9),rgba(242,69,54,.72));color:#fff} .br .sbar .them{background:rgba(255,255,255,.08);color:var(--tx3);justify-content:flex-end} .br .sbar.dim .you{background:rgba(255,255,255,.14);color:var(--tx2)} .br .sbar .ovr{background:linear-gradient(90deg,rgba(255,196,107,.85),rgba(255,196,107,.55));color:#3A2A08;justify-content:center;font-size:var(--t-label)} .br .scale{margin-top:22px;padding:22px 18px 24px;border-radius:18px} .br .scalerow{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:13px 0;border-bottom:1px solid var(--gbd)} .br .scalerow .k{font-size:var(--t-sm);color:var(--tx2)} .br .scalerow .v{font:700 var(--t-h3)/1 var(--ui);color:#fff;letter-spacing:-.04em;font-variant-numeric:tabular-nums} .br .scalerow.big{border-bottom:0;padding-bottom:4px} .br .scalerow.big .k{color:#fff} .br .scalerow.big .v{font-size:var(--t-fig-lg);color:var(--gold)} .br .snote{margin-top:var(--s2);font-size:var(--t-sm);color:var(--tx3)} .br .snote b{color:#fff} .br .calc{margin-top:var(--s5);padding:22px 18px 24px;border-radius:18px} .br .calc h3{font-size:var(--t-lede);margin-bottom:4px} .br .calc .sub{font-size:var(--t-sm);color:var(--tx3);margin-bottom:20px} .br .pick{display:flex;gap:7px;margin-bottom:20px} .br .pick button{flex:1;appearance:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:56px;padding:8px 6px;border-radius:10px;border:1px solid var(--gbd); background:rgba(255,255,255,.045);color:var(--tx2);font:600 var(--t-label)/1.3 var(--ui);transition:all .25s var(--e)} .br .pick button small{display:block;font:600 var(--t-label)/1 var(--mono);color:var(--tx4);margin-top:5px;letter-spacing:.08em} .br .pick button[aria-pressed="true"]{background:rgba(232,33,15,.18);border-color:rgba(232,33,15,.5);color:#fff} .br .pick button[aria-pressed="true"] small{color:#FFB4A6} .br .slabel{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px} .br .slabel span{font:600 var(--t-label)/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--tx4)} .br .slabel b{color:#fff;font:700 var(--t-lede)/1 var(--ui);font-variant-numeric:tabular-nums} .br input[type=range]{width:100%;appearance:none;height:6px;border-radius:99px;outline:none; background:linear-gradient(90deg,var(--red) 0%,var(--red) var(--p,20%),rgba(255,255,255,.13) var(--p,20%));} .br input[type=range]::-webkit-slider-thumb{appearance:none;width:26px;height:26px;border-radius:50%;cursor:grab; background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.5),0 0 0 4px rgba(232,33,15,.28)} .br input[type=range]::-moz-range-thumb{width:26px;height:26px;border:0;border-radius:50%;cursor:grab;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.5),0 0 0 4px rgba(232,33,15,.28)} .br .out{margin-top:22px;padding-top:20px;border-top:1px solid var(--gbd);display:grid;grid-template-columns:1fr 1fr;gap:14px} .br .out div dt{font:600 var(--t-label)/1.3 var(--mono);letter-spacing:.15em;text-transform:uppercase;color:var(--tx4)} .br .out div dd{margin:7px 0 0;color:#fff;font-weight:700;letter-spacing:-.045em;font-variant-numeric:tabular-nums;font-size:1.5rem} .br .out .big dd{font-size:var(--t-fig-lg);color:#fff} .br .calcfoot{margin-top:var(--s2);font:400 var(--t-tiny)/1.5 var(--ui);color:var(--tx4)} .br .plans{display:flex;flex-direction:column;gap:12px;margin-top:var(--s5)} .br .plan{position:relative;display:flex;flex-direction:column;padding:0;border-radius:20px;overflow:hidden} /* The best-seller badge. Sits over the artwork's top-right so it never competes with the price, which reads bottom-left of the same panel. */ .br .plan .ptag{position:absolute;z-index:3;top:12px;right:12px; background:var(--red);color:#fff;border-radius:999px;padding:7px 13px; font:600 var(--t-label)/1 var(--mono);letter-spacing:.13em;text-transform:uppercase; box-shadow:0 6px 18px rgba(232,33,15,.38)} .br .plan{border-color:rgba(232,33,15,.42)} /* the inner hairline. On .plan so a new membership picks it up automatically */ .br .plan::after{content:"";position:absolute;inset:0;border-radius:inherit; border:1px solid rgba(232,33,15,.42);pointer-events:none} /* the artwork carries the theme's own ground colour, so it dissolves into the card instead of ending on a hard edge — no caption sits on top of it. */ .br .phead{position:relative;aspect-ratio:380/176;overflow:hidden;flex:0 0 auto} .br .phead img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top} /* no scrim: the artwork carries its own alpha fade, so it dissolves into the card whatever colour sits behind it, and the motif stays visible */ /* flex-end rather than baseline: .pr used to sit directly in this row, but now it can share the slot with a struck-through original price stacked above it (.prwrap), and a flex column's baseline across browsers is not reliably predictable the way a plain text baseline is - bottom-aligning both sides sidesteps that instead of hoping every engine agrees. */ .br .pcap{position:absolute;left:22px;right:22px;bottom:15px;z-index:2; display:flex;align-items:flex-end;justify-content:space-between;gap:14px} /* name, price and everything else live in the body where they can be read */ .br .pbody{display:flex;flex-direction:column;flex:1;padding:20px 22px 24px} .br .plan .pn{font:700 1.32rem/1.15 var(--dis);letter-spacing:-.025em;color:#fff} .br .plan .prwrap{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:2px} /* Understated on purpose - a small muted strikethrough, not a red "-45%" sticker fighting the Most Popular tag for attention in the same corner. */ .br .plan .pwas{font:400 var(--t-tiny)/1 var(--ui);color:var(--tx4); text-decoration:line-through;text-decoration-color:var(--tx4); font-variant-numeric:tabular-nums;white-space:nowrap} .br .plan .pr{flex:0 0 auto;font:700 1.58rem/1 var(--dis);color:var(--gold); letter-spacing:-.035em;font-variant-numeric:tabular-nums;white-space:nowrap} .br .plan .pt{display:block;font:400 var(--t-tiny)/1.45 var(--ui);color:var(--tx4)} .br .plan .bundle{margin-top:20px;padding-top:17px;border-top:1px solid var(--gbd); font:400 var(--t-sm)/1.6 var(--ui);color:var(--tx3)} .br .plan .bundle b{color:var(--grn);font-weight:600} .br .plan ul{list-style:none;flex:1;margin:19px 0 0;padding:0;display:flex;flex-direction:column;gap:12px;font-size:var(--t-sm)} .br .plan li{display:flex;gap:12px;align-items:flex-start;color:var(--tx2);line-height:1.5} .br .plan li::before{content:"";flex:0 0 auto;width:5px;height:5px;margin-top:9px;border-radius:50%;background:var(--red)} .br .plan .btn{margin-top:26px} .br .plan .earn{display:block;margin-top:14px;text-align:center;font:400 var(--t-tiny)/1.4 var(--ui);color:var(--tx4)} .br .plan .earn b{color:var(--tx2);font-weight:600;font-variant-numeric:tabular-nums} .br .plansmore{margin-top:var(--s4);text-align:center} /* .founder only becomes a grid at 1000px, so on a phone its two children sat flush against each other with no gap at all. */ .br .founder > * + *{margin-top:var(--s5)} .br .shot{position:relative;overflow:hidden;border-radius:18px} .br .shot img{width:100%;filter:contrast(1.06) saturate(.9)} .br .shot::after{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,transparent 46%,rgba(0,0,0,.82));pointer-events:none} .br .shot .cap{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:16px 18px; font:600 var(--t-label)/1.4 var(--mono);letter-spacing:.15em;text-transform:uppercase;color:var(--tx3)} .br .shot .cap b{display:block;margin-bottom:5px;font:700 1.1rem/1.2 var(--dis); letter-spacing:-.02em;text-transform:none;color:#fff} .br .quote{font-size:clamp(1.15rem,.95rem+1.3vw,1.75rem);color:#fff;letter-spacing:-.03em;line-height:1.3;font-weight:600;margin:24px 0 0} .br .rail{display:flex;gap:12px;margin-top:var(--s5);overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding:2px 2px 8px;scrollbar-width:none} .br .rail::-webkit-scrollbar{display:none} .br .svc{flex:0 0 79%;scroll-snap-align:start;padding:22px 20px 24px;border-radius:16px} .br .svc .n{font:600 var(--t-label)/1 var(--mono);letter-spacing:.17em;color:#C6C6CE} .br .svc h3{font-size:var(--t-lede);margin:12px 0 0} .br .svc p{margin:8px 0 0;font-size:var(--t-sm)} .br .slabel.sp{margin-top:var(--s4)} .br .mlede{margin-top:var(--s3);max-width:52ch;line-height:1.72;color:var(--tx3)} .br .railhint{margin-top:var(--s2);font:600 var(--t-label)/1 var(--mono);letter-spacing:.16em;color:var(--tx4);text-transform:uppercase} .br .formcard{margin-top:var(--s5);padding:22px 18px 24px;border-radius:18px} .br .ctabox{margin-top:var(--s4);padding:28px 22px 26px;border-radius:20px;display:flex;flex-direction:column;gap:22px} .br .ctacopy h2{font-size:clamp(1.5rem,1.1rem+2vw,2.3rem);margin-top:14px;max-width:16ch} .br .ctacopy p,.br .ctalede{margin:12px 0 0;max-width:46ch;font-size:var(--t-base)} .br .ctaacts{display:flex;flex-direction:column;gap:10px} .br footer{position:relative;margin-top:var(--s6);padding:40px 0 0;overflow:hidden; border-top:1px solid var(--gbd);background:linear-gradient(180deg,rgba(255,255,255,.028),transparent 40%)} /* On a phone the link blocks pair up two across, so Earn and Learn sit beside each other rather than in one long stack. The about block and the contact rows want the full width. */ .br .fg{display:grid;grid-template-columns:1fr 1fr;gap:30px 22px} .br .fg .about{grid-column:1 / -1} /* The mark is the one place the brand gets to speak in the footer, so it is given real size and room to sit in rather than being treated as a bullet. */ .br .fg .about img{height:42px;width:auto;margin-bottom:22px} @media(min-width:900px){.br .fg .about img{height:48px;margin-bottom:26px}} .br .fg .about p{margin:0;font-size:var(--t-sm);max-width:36ch;color:var(--tx3)} .br .social{display:flex;align-items:center;gap:9px;margin-top:20px} .br .social a{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:var(--tx2); background:rgba(255,255,255,.055);border:1px solid var(--gbd); transition:transform .3s var(--e),background .3s,color .3s,border-color .3s} .br .social a:hover{transform:translateY(-3px);background:rgba(232,33,15,.16);border-color:rgba(232,33,15,.45);color:#fff} .br .fg h4{font:600 var(--t-label)/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--tx4);margin:0 0 16px} .br .fg ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;font-size:var(--t-sm)} .br .fg ul a{color:var(--tx2);transition:color .2s,transform .25s var(--e);display:inline-block} .br .fg ul a:hover{color:#fff;transform:translateX(3px)} /* flex row rather than block: a .crow with no .ic/.ar (footer.php's rows, which predate this) still lays out fine with just the text block, so this stays backward compatible without editing the footer too. */ .br .fcontact .crow{display:flex;align-items:center;gap:14px;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.07)} .br .fcontact .crow:last-child{border-bottom:0} .br .fcontact .crow .ic{flex:0 0 auto;width:32px;height:32px;display:grid;place-items:center; border-radius:10px;background:var(--g);border:1px solid var(--gbd);color:var(--tx3)} .br .fcontact .crow .ic svg{width:16px;height:16px;display:block} .br .fcontact .crow .tx{flex:1 1 auto;min-width:0} .br .fcontact .crow .ar{flex:0 0 auto;color:var(--tx4);transition:transform .3s var(--e)} .br a.crow:hover .ar{transform:translateX(3px)} .br .fcontact .ck{display:block;font:600 var(--t-label)/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--tx4);margin-bottom:5px} .br .fcontact .cv{display:block;font-size:var(--t-sm);color:#fff;overflow-wrap:anywhere} /* was --red (4.39:1 on black) - the contrast pass elsewhere on this page moved every other small red-on-black label to --ember (5.35:1); this hover rule predates that pass and was missed. */ .br a.crow:hover .cv{color:var(--ember)} .br .ftrust{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--gbd)} .br .tchip{display:inline-flex;align-items:center;min-height:34px;padding:0 13px; font:400 var(--t-tiny)/1 var(--ui);color:var(--tx3);border-radius:100px; border:1px solid var(--gbd);background:rgba(255,255,255,.035)} .br .tchip b{color:#fff;font-weight:600} .br .fb{margin-top:var(--s5);padding:var(--s3) 0 0;border-top:1px solid var(--gbd);display:flex;flex-direction:column;gap:14px; font:400 var(--t-tiny)/1.5 var(--ui);color:var(--tx4)} .br .flegal{display:flex;flex-wrap:wrap;align-items:center;gap:18px} .br .fmade{color:var(--tx4);font-size:var(--t-tiny)} /* Back to top. Hidden until the page has been scrolled, so it never sits over the hero on arrival. */ .br .totop{position:fixed;right:18px;bottom:18px;z-index:88;width:46px;height:46px; display:grid;place-items:center;border:1px solid var(--gbd2);border-radius:14px; background:rgba(12,12,14,.72);backdrop-filter:blur(10px);color:var(--tx2); font-size:1.05rem;cursor:pointer;opacity:0;visibility:hidden;transform:translateY(10px); transition:opacity .3s var(--e),transform .3s var(--e),visibility .3s,border-color .25s,color .25s} .br .totop.on{opacity:1;visibility:visible;transform:none} .br .totop:hover{color:#fff;border-color:var(--red)} .br .totop:focus-visible{outline:2px solid var(--red);outline-offset:3px} @media(min-width:700px){.br .totop{right:26px;bottom:26px;width:50px;height:50px}} @media(prefers-reduced-motion:reduce){.br .totop{transition:opacity .01s}} .br .flegal a{color:var(--tx3)} .br .flegal a:hover{color:#fff} .br .bigmark{margin-top:var(--s4);height:clamp(46px,11vw,116px);overflow:hidden;opacity:.16;pointer-events:none} /* same treatment as the dashboard mark: solid colour through the logo's alpha, so nothing of the image itself is painted */ .br .bigmark{background:var(--red); -webkit-mask:url(../img/brand/lockup-900.webp) no-repeat center bottom / auto 100%; mask:url(../img/brand/lockup-900.webp) no-repeat center bottom / auto 100%} .br .dock{position:fixed;left:10px;right:10px;bottom:10px;z-index:95;display:flex;align-items:center;gap:12px;padding:10px 10px 10px 16px;border-radius:16px;transform:translateY(140%)} .br .dock .px{flex:1;min-width:0} .br .dock .px b{display:block;color:#fff;font:700 var(--t-base)/1.2 var(--ui);letter-spacing:-.02em} .br .dock .px span{display:block;font:600 var(--t-label)/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--grn);margin-top:3px} .br .auth{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:34px var(--pad) 60px} .br .authcard{width:100%;max-width:440px;padding:30px 22px 26px;border-radius:22px} .br .authcard .lg{height:34px;margin:0 auto 20px} .br .authcard h2{text-align:center;font-size:1.5rem} .br .authcard .sub{text-align:center;margin:9px 0 24px;font-size:var(--t-sm);color:var(--tx3)} .br .authcard .row{display:flex;justify-content:space-between;align-items:center;margin:-4px 0 18px;font-size:var(--t-tiny)} .br .authcard .row a{color:#C6C6CE} .br .divider{display:flex;align-items:center;gap:12px;margin:22px 0;font:600 var(--t-label)/1 var(--mono);letter-spacing:.16em;color:var(--tx4);text-transform:uppercase} .br .divider::before,.br .divider::after{content:"";height:1px;flex:1;background:var(--gbd)} .br .authfoot{text-align:center;margin-top:20px;font-size:var(--t-sm);color:var(--tx3)} .br .authfoot a{color:#fff;border-bottom:1px solid var(--gbd2)} /* Top gap lives in theme-slate.css, which loads later and wins. */ .br .dash{padding-bottom:90px} .br .dhead{display:flex;align-items:center;gap:12px;margin-bottom:18px} .br .dhead .av{width:44px;height:44px;border-radius:50%;background:linear-gradient(140deg,var(--red),#B4247A);display:grid;place-items:center;color:#fff;font:700 var(--t-base)/1 var(--ui)} .br .dhead h2{font-size:var(--t-h3)} .br .dhead p{margin:2px 0 0;font:600 var(--t-label)/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--tx4)} .br .kpis{display:grid;grid-template-columns:1fr 1fr;gap:10px} .br .kpi{padding:16px 15px;border-radius:14px} .br .kpi dt{font:600 var(--t-label)/1.3 var(--mono);letter-spacing:.15em;text-transform:uppercase;color:var(--tx4)} .br .kpi dd{margin:7px 0 0;font-size:var(--t-fig);color:#fff;font-weight:700;letter-spacing:-.045em;font-variant-numeric:tabular-nums} .br .kpi .dl{font:600 var(--t-label)/1 var(--mono);color:var(--grn);margin-top:6px;display:block} /* Site-wide notice bar, admin-editable (settings/manage.php inline_announcement). First pass just put the text in a plain glass card - technically styled, but indistinguishable from any other card on the page, so nobody's eye caught on it. Red-tinted rather than neutral, with its own icon and a quiet pulse, so it reads as "notice" before anyone reads the words - the same red-tint recipe .parts .part.on already uses for "this one matters". --ember, not --red, for the label text: the contrast pass elsewhere on this page moved every other small red-on-black label to --ember (5.35:1 vs --red's 4.39:1) and this should match it. The pulse is real CSS animation, but .br's own global rule (further down this file) collapses all animation durations under prefers-reduced-motion - no separate guard needed here. */ .br .brann{display:flex;align-items:flex-start;gap:12px;margin:14px 0;padding:13px 18px; border-radius:14px;background:rgba(232,33,15,.10);border:1px solid rgba(232,33,15,.32); box-shadow:0 8px 22px -14px rgba(232,33,15,.65)} .br .brann .ic{flex:0 0 auto;width:32px;height:32px;display:grid;place-items:center; border-radius:10px;background:rgba(232,33,15,.16);border:1px solid rgba(232,33,15,.3);color:var(--ember);margin-top:1px} .br .brann .ic svg{width:16px;height:16px;display:block} .br .brann .tx{flex:1 1 220px;min-width:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px} .br .brann-k{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px; font:700 var(--t-label)/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ember)} .br .brann-k::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--red); animation:brannPulse 2.2s ease-in-out infinite} .br .brann-v{flex:1 1 220px;min-width:0;font-size:var(--t-sm);color:var(--tx2)} @keyframes brannPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(1.7)}} .br .dcard{margin-top:12px;padding:18px 16px;border-radius:16px} .br .dcard h3{font-size:var(--t-base);margin-bottom:14px} .br .spark{display:flex;align-items:flex-end;gap:4px;height:96px;margin-bottom:6px} .br .spark div{flex:1;background:linear-gradient(180deg,var(--red),rgba(232,33,15,.22));border-radius:3px 3px 0 0;transform:scaleY(0);transform-origin:bottom} .br .axis{display:flex;align-items:center;justify-content:space-between;font:600 var(--t-label)/1 var(--mono);color:var(--tx4);letter-spacing:.1em} .br .tbl{width:100%;border-collapse:collapse;font-size:var(--t-sm)} .br .tbl th{text-align:left;font:600 var(--t-label)/1 var(--mono);letter-spacing:.15em;text-transform:uppercase;color:var(--tx4);padding:0 0 11px;border-bottom:1px solid var(--gbd)} .br .tbl td{padding:13px 0;border-bottom:1px solid rgba(255,255,255,.06);color:var(--tx2)} .br .tbl td:last-child,.br .tbl th:last-child{text-align:right} .br .tbl .who{color:#fff} .br .pill{display:inline-flex;align-items:center;min-height:20px;padding:0 10px;border-radius:20px;font:600 var(--t-label)/1 var(--mono);letter-spacing:.11em;text-transform:uppercase} .br .pill.ok{background:rgba(63,217,138,.16);color:var(--grn);border:1px solid rgba(63,217,138,.3)} .br .pill.hold{background:rgba(255,180,50,.15);color:#FFC65C;border:1px solid rgba(255,180,50,.28)} .br .pill.no{background:rgba(232,33,15,.14);color:#FF8A76;border:1px solid rgba(232,33,15,.3)} .br .amt{color:#fff;font-family:var(--mono);font-variant-numeric:tabular-nums} .br .bk{display:grid;grid-template-columns:1fr auto auto;gap:12px;padding:13px 0;font:400 var(--t-tiny)/1 var(--mono);position:relative;align-items:center} .br .bk::before{content:"";position:absolute;left:-16px;right:-16px;top:0;bottom:0;width:var(--x,0);background:linear-gradient(90deg,rgba(232,33,15,.24),rgba(232,33,15,.04))} .br .bk>*{position:relative} .br .bk .lv{color:var(--tx2)} .br .bk .pc{color:var(--red)} .br .bk .am{color:#fff;text-align:right;min-width:60px} .br .quotes{display:flex;gap:12px;margin-top:var(--s5);overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding:2px 2px 8px;scrollbar-width:none} .br .quotes::-webkit-scrollbar{display:none} .br .tq{flex:0 0 82%;scroll-snap-align:start;padding:22px 20px 20px;border-radius:16px;display:flex;flex-direction:column} .br .tq .mk{font:700 2.4rem/1 Georgia,serif;color:var(--red);opacity:.55;height:20px;margin-bottom:10px} .br .tq p{margin:0;font-size:var(--t-base);line-height:1.55;color:var(--tx);flex:1} .br .tq .by{margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--gbd);display:flex;align-items:center;gap:11px} .br .tq .ini{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font:700 var(--t-tiny)/1 var(--ui);color:#fff;background:linear-gradient(140deg,var(--red),#8E3AC8)} .br .tq .who b{display:block;color:#fff;font:700 var(--t-sm)/1.2 var(--ui)} .br .tq .who span{display:block;font:600 var(--t-label)/1.3 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--tx4);margin-top:3px} .br .mq{margin-top:var(--s5);overflow:hidden;cursor:grab;touch-action:pan-y; -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)} .br .mq:active{cursor:grabbing} .br .mqtrack{display:flex;align-items:center;gap:14px;will-change:transform;padding:2px 14px} /* Sized by width, height follows the picture. These are phone screenshots and are usually portrait, so a fixed height would render them as narrow slivers. Letting the height fall out of the real proportions means a screenshot looks like a screenshot, whatever shape it is. */ .br .sc,.br .rc{flex:0 0 auto;width:200px;margin:0;border-radius:14px;overflow:hidden;padding:0} .br .sc img,.br .rc img{width:100%;height:auto;display:block; pointer-events:none;-webkit-user-drag:none;user-select:none} .br .mqhint{margin-top:14px;font:600 var(--t-label)/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--tx4)} @media(min-width:700px){.br .sc,.br .rc{width:236px} .br .mqtrack{gap:18px;padding:2px 22px}} .br .risk{margin-top:14px;font:400 var(--t-tiny)/1.55 var(--ui);color:var(--tx4);max-width:64ch} .br .lb{margin-top:var(--s5);border-radius:20px;overflow:hidden} .br .lbh{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--gbd)} .br .lbh span{font:600 var(--t-tiny)/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--tx2)} .br .lbh i{font-style:normal;display:inline-flex;align-items:center;gap:7px;font:500 var(--t-label)/1 var(--mono); letter-spacing:.13em;text-transform:uppercase;color:var(--tx4)} .br .lbh i::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--grn)} /* ---- top three ---- A three-across podium needs about 120px per column for a full name. A phone gives ~110px, so on mobile the winner takes a full-width feature row instead and the podium only appears once there is room for it. ---- */ .br .podium{padding:6px 0 0;background:radial-gradient(120% 80% at 50% 0%,rgba(232,33,15,.10),transparent 64%);border-bottom:1px solid var(--gbd)} .br .pod{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px; padding:16px 20px;border-bottom:1px solid rgba(255,255,255,.05)} .br .pod .pav{width:46px;height:46px;border-radius:50%;object-fit:cover; border:2px solid var(--gbd2);background:rgba(255,255,255,.05)} .br .pod .ini{display:grid;place-items:center;color:#fff;font:700 15px/1 var(--dis); background:linear-gradient(140deg,var(--red),#B4247A);border:0} .br .pod .pmeta{min-width:0} .br .pod .pn{display:block;color:#fff;font:700 var(--t-base)/1.25 var(--ui);letter-spacing:-.02em; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .br .pod .pc{display:block;margin-top:5px;font:500 var(--t-label)/1.3 var(--mono);letter-spacing:.12em; text-transform:uppercase;color:var(--tx4);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* The rank sits inside a medal: two thin concentric rings with the figure in the display face between them. A single flat disc reads like a notification count; the second ring is what makes it read as a placing. */ .br .pod .prk{position:relative;flex:0 0 auto;display:grid;place-items:center; width:40px;height:40px;border-radius:50%;background:none; border:1px solid var(--gbd2); font:700 var(--t-sm)/1 var(--dis);color:var(--tx2); font-variant-numeric:tabular-nums;letter-spacing:0} .br .pod .prk::before{content:"";position:absolute;inset:3px;border-radius:50%; border:1px solid rgba(255,255,255,.10);pointer-events:none} .br .pod.second .prk,.br .pod.third .prk{color:var(--tx3);border-color:var(--gbd)} /* the winner gets the room, and the only red on the board */ .br .pod.first{padding:20px;background:linear-gradient(90deg,rgba(232,33,15,.07),transparent 72%)} .br .pod.first .pav{width:66px;height:66px;border-color:rgba(232,33,15,.55); box-shadow:0 0 0 4px rgba(232,33,15,.12)} .br .pod.first .ini{font-size:21px} .br .pod.first .pn{font-size:var(--t-h3);font-weight:700;font-family:var(--dis);letter-spacing:-.015em} .br .pod.first .prk{width:48px;height:48px;font-size:var(--t-lede);color:#fff; border-color:rgba(232,33,15,.65);background:rgba(232,33,15,.16); box-shadow:0 0 0 4px rgba(232,33,15,.07)} .br .pod.first .prk::before{border-color:rgba(232,33,15,.4)} @media(min-width:620px){ .br .pod.first{order:2}.br .pod.second{order:1}.br .pod.third{order:3} .br .podium{display:grid;grid-template-columns:1fr 1.24fr 1fr;align-items:end;gap:8px; padding:30px 14px 22px;border-bottom:1px solid var(--gbd)} .br .pod{display:flex;flex-direction:column;align-items:center;text-align:center; padding:0;border-bottom:0;gap:0;min-width:0} .br .pod .pav{width:62px;height:62px} .br .pod .pmeta{width:100%;min-width:0} .br .pod .pn{margin-top:11px;font-size:var(--t-sm)} .br .pod .prk{order:-1;margin-bottom:12px} .br .pod.first{padding:0;background:none} .br .pod.first .pav{width:84px;height:84px} .br .pod.first .ini{font-size:27px} .br .pod.first .pn{margin-top:13px;font-size:var(--t-base)} .br .pod.first .prk{margin-bottom:14px} } /* ---- positions 4 and below ---- */ .br .lbrow{display:grid;grid-template-columns:26px 40px 1fr;gap:14px;align-items:center; padding:13px 20px;border-bottom:1px solid rgba(255,255,255,.05)} .br .lbrow:last-of-type{border-bottom:0} .br .lbrow .rk{font:600 var(--t-tiny)/1 var(--mono);color:var(--tx4);font-variant-numeric:tabular-nums} .br .lbrow .nm{color:var(--tx);font:600 var(--t-sm)/1.25 var(--ui);min-width:0; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .br .lbrow .nm small{display:block;font:500 var(--t-label)/1.3 var(--mono);letter-spacing:.12em; text-transform:uppercase;color:var(--tx4);margin-top:4px} .br .lbrow:hover{background:rgba(255,255,255,.03)} .br .lbfoot{margin-top:6px;padding:15px 20px;display:flex;justify-content:space-between;align-items:center;gap:14px; font:400 var(--t-tiny)/1.4 var(--ui);color:var(--tx4);border-top:1px solid var(--gbd)} .br .lbfoot a{color:#C6C6CE} @media(min-width:700px){.br .quotes{display:grid;grid-template-columns:1fr 1fr;overflow:visible} .br .tq{flex:none} .br .lbrow{grid-template-columns:30px 44px 1fr;gap:18px;padding:15px 26px} } @media(min-width:1000px){.br .quotes{grid-template-columns:repeat(3,1fr)}} @media(max-width:699px){} @media (prefers-reduced-motion:reduce){.br *,.br *::before,.br *::after{animation-duration:.01ms!important;transition-duration:.01ms!important} .br .c,.br .spark div{transform:scaleY(1)!important}} @media(min-width:700px){:root{--pad:28px} .br .hero{padding:var(--s5) 0 var(--s5)} .br .hero .acts{flex-direction:row;align-items:center;gap:26px} .br .hero .acts .btn{min-width:206px} .br .candles{height:176px;gap:4px} .br .chartcard{padding:22px 22px 20px} .br .fact dd{font-size:1.7rem} .br .rail{display:grid;grid-template-columns:1fr 1fr;overflow:visible} .br .svc{flex:none} .br .railhint{display:none} .br .plans{flex-direction:row;align-items:stretch;gap:16px} .br .plan{flex:1 1 0;min-width:0} .br .out{grid-template-columns:repeat(4,1fr)} .br .fg{grid-template-columns:1.4fr 1fr 1fr;gap:36px 30px} .br .ctabox{flex-direction:row;align-items:center;justify-content:space-between;padding:34px 30px} .br .ctaacts{flex-direction:column;flex:0 0 auto;min-width:250px} .br .fb{flex-direction:row;justify-content:space-between;align-items:center} .br .band.s-pitch{padding-top:124px} .br .band.s-what {padding-top:88px} .br .band.s-cont {padding-top:52px} .br .band.s-proof{padding-top:78px} .br .band.s-offer{padding-top:168px} .br .band.s-close{padding-top:106px} .br .dock{display:none} .br footer{padding-bottom:40px} .br .kpis{grid-template-columns:repeat(4,1fr)} .br .authcard{padding:38px 34px 32px} .br .split{padding:26px 24px 28px} .br .calc{padding:26px 24px 28px}} @media(min-width:1000px){.br .logo-mark{display:none} .br .logo-lock{display:block} .br .menu{display:none} .br .navlinks{display:flex} .br .hbar{height:80px} .br .herowrap{max-width:880px} .br .chartcard{margin-top:0} .br .candles{height:206px;gap:5px} .br .rail{grid-template-columns:repeat(3,1fr)} .br .founder{display:grid;grid-template-columns:.82fr 1.18fr;gap:52px;align-items:center} .br .founder > * + *{margin-top:0} .br .split,.br .calc{margin-top:0} .br .joinwrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:54px;align-items:start} .br .formcard{margin-top:0} /* Five blocks now: about, Learn, Earn, Help, Reach us. The link columns are even so they read as one row of headings rather than a ragged set. */ .br .fg{grid-template-columns:1.7fr .85fr .85fr .95fr 1.1fr;gap:40px 30px} .br footer{padding-top:56px} .br .dashgrid{display:grid;grid-template-columns:1.35fr .65fr;gap:12px}} /* figures read as display type, not UI text */ .br .fact dd,.br .out dd,.br .plan .pr,.br .lbrow .er, .br .today .v,.br .figs .val,.br .st dd{font-family:var(--dis);font-variant-numeric:tabular-nums} .br .btn{font-family:var(--ui);font-weight:600;letter-spacing:-.005em} /* ---- FAQ accordion: native

, no script ---- */ .br .faqs{display:flex;flex-direction:column;gap:10px} .br .acc{border-radius:16px;overflow:hidden} .br .acc summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;justify-content:space-between; gap:18px;padding:20px 20px;font:700 var(--t-base)/1.45 var(--ui);color:#fff;letter-spacing:-.015em} .br .acc summary::-webkit-details-marker{display:none} .br .acc summary i{flex:0 0 auto;position:relative;width:16px;height:16px;margin-top:5px} .br .acc summary i::before,.br .acc summary i::after{content:"";position:absolute;background:var(--red);border-radius:2px; transition:transform .32s var(--e),opacity .32s var(--e)} .br .acc summary i::before{left:0;top:7px;width:16px;height:2px} .br .acc summary i::after{left:7px;top:0;width:2px;height:16px} .br .acc[open] summary i::after{transform:rotate(90deg);opacity:0} .br .acc[open] summary{padding-bottom:12px} .br .acc-body{padding:0 20px 22px;font-size:var(--t-base);line-height:1.72;color:var(--tx3);max-width:68ch} .br .acc-body a{color:var(--gold)} .br .acc summary:focus-visible{outline:2px solid var(--red);outline-offset:-2px} @media(min-width:700px){.br .acc summary{padding:24px 26px;font-size:var(--t-lede)} .br .acc[open] summary{padding-bottom:14px} .br .acc-body{padding:0 26px 26px}} /* ---- team: photos differ wildly in ratio, so crop them to one shape ---- */ .br .team{display:flex;flex-direction:column;gap:12px;margin-top:var(--s5)} .br .member{border-radius:18px;overflow:hidden;display:flex;flex-direction:column} .br .mshot{position:relative;aspect-ratio:4/3;overflow:hidden;flex:0 0 auto;background:rgba(255,255,255,.04)} .br .mshot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 22%; filter:saturate(.86) contrast(1.03)} .br .mshot::after{content:"";position:absolute;left:0;right:0;bottom:0;height:42%; background:linear-gradient(180deg,rgba(12,12,14,0),rgba(12,12,14,.86))} .br .mbody{padding:18px 20px 22px} .br .member h3{font-size:var(--t-h3);letter-spacing:-.02em} .br .mrole{display:block;margin-top:7px;font:600 var(--t-label)/1.3 var(--mono);letter-spacing:.16em; text-transform:uppercase;color:var(--gold)} .br .member p{margin-top:13px;font-size:var(--t-sm);line-height:1.66;color:var(--tx3)} .br .vals .svc h3{margin-top:11px} @media(min-width:700px){.br .team{flex-direction:row} .br .member{flex:1 1 0;min-width:0} .br .mshot{aspect-ratio:1/1}} /* ---- auth: register needs a wider card and paired fields ---- */ .br .authcard.wide-card{max-width:560px} .br .fgrid{display:grid;grid-template-columns:1fr;gap:0 12px} .br .field .hint{display:block;margin-top:7px;font:400 var(--t-tiny)/1.45 var(--ui);color:var(--tx4)} .br .g-recaptcha{margin-bottom:16px} .br .authcard .row a{color:var(--gold)} @media(min-width:560px){.br .fgrid{grid-template-columns:1fr 1fr}} /* ---- 404 ---- */ .br .bignum{font:700 clamp(3.4rem,2rem+7vw,5.4rem)/1 var(--dis);letter-spacing:-.06em; color:var(--red);text-align:center;margin:2px 0 14px;font-variant-numeric:tabular-nums} .br .authcard .btn.wide{margin-top:4px} /* ---- membership detail ---- */ .br .coursetop{display:grid;grid-template-columns:1fr;gap:var(--s5)} .br .cfacts{display:flex;flex-wrap:wrap;align-items:center;gap:0;margin-top:var(--s3)} .br .cfacts span{display:inline-flex;align-items:center;font:400 var(--t-sm)/1 var(--ui);color:var(--tx3)} .br .cfacts span:not(:first-child)::before{content:"";flex:0 0 auto;width:3px;height:3px;border-radius:50%; background:var(--red);margin:0 13px} .br .cfacts b{color:#fff;font-weight:700;margin-right:5px;font-variant-numeric:tabular-nums} .br .cdesc{margin-top:var(--s4);max-width:56ch;font-size:var(--t-base);line-height:1.75;color:var(--tx3)} .br .cdesc b,.br .cdesc strong{color:var(--tx)} /* buy box reuses the card head so it matches the memberships page */ .br .buybox{border-radius:20px;overflow:hidden;align-self:start} .br .buybox .pr{display:block;font:700 2.5rem/1 var(--dis);color:#fff;letter-spacing:-.045em;font-variant-numeric:tabular-nums} .br .buybox .was{display:inline-block;margin-top:8px;font:500 var(--t-sm)/1 var(--ui);color:var(--tx4);text-decoration:line-through} .br .buybox .pt{display:block;margin-top:10px} .br .buybox .btn{margin-top:24px} /* what you get */ .br .klist{list-style:none;margin:var(--s5) 0 0;padding:0;display:grid;grid-template-columns:1fr;gap:13px} .br .klist li{display:flex;gap:12px;align-items:flex-start;color:var(--tx2);font-size:var(--t-base);line-height:1.5} .br .klist li::before{content:"";flex:0 0 auto;width:5px;height:5px;margin-top:9px;border-radius:50%;background:var(--red)} /* curriculum */ .br .acc summary span{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 10px;min-width:0} .br .mnum{font:600 var(--t-label)/1 var(--mono);letter-spacing:.14em;color:var(--gold);font-style:normal;flex:0 0 auto} .br .acc summary small{display:block;width:100%;margin-top:6px;font:500 var(--t-label)/1.3 var(--mono); letter-spacing:.15em;text-transform:uppercase;color:var(--tx4)} .br .lessons{list-style:none;margin:0;padding:0;counter-reset:l} .br .lessons li{counter-increment:l;display:flex;align-items:baseline;justify-content:space-between;gap:16px; padding:11px 0;border-top:1px solid rgba(255,255,255,.06)} .br .lessons li:first-child{border-top:0} .br .lessons li::before{content:counter(l,decimal-leading-zero);flex:0 0 auto;margin-right:4px; font:500 var(--t-label)/1 var(--mono);color:var(--tx4);font-variant-numeric:tabular-nums} .br .lessons .ln{flex:1;min-width:0;color:var(--tx2);font-size:var(--t-sm);line-height:1.45} .br .lessons .ld{flex:0 0 auto;font:500 var(--t-label)/1 var(--mono);color:var(--tx4);font-variant-numeric:tabular-nums} @media(min-width:900px){.br .coursetop{grid-template-columns:1.35fr .65fr;gap:44px;align-items:start} .br .klist{grid-template-columns:1fr 1fr;gap:14px 28px}} /* ---- dashboard inner pages ---- */ /* Breadcrumbs and the page heading sat flush to the wrap edge while the rows in the card below them start 20px in, so they read as hanging off the left. Both now line up with that content, matching the dashboard. */ .br .crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:0;margin-bottom:var(--s3);padding-left:20px; font:600 var(--t-tiny)/1 var(--mono);letter-spacing:.12em;text-transform:uppercase} .br .crumbs a{color:var(--tx4)} .br .crumbs a:hover{color:var(--tx2)} .br .crumbs span{color:var(--gold)} .br .crumbs li{list-style:none;display:inline-flex;align-items:center} .br .crumbs li:not(:first-child)::before{content:"";width:3px;height:3px;border-radius:50%; background:var(--tx4);margin:0 11px;flex:0 0 auto} .br .crumbs ol{display:flex;flex-wrap:wrap;align-items:center;margin:0;padding:0;gap:0} .br .phead-row{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;padding-left:20px;padding-right:20px; flex-wrap:wrap;margin-bottom:var(--s4)} .br .phead-row h1{font-size:clamp(1.5rem,1.1rem+1.8vw,2.2rem)} .br .phead-row p{margin-top:9px;font-size:var(--t-sm);color:var(--tx3);max-width:52ch} /* a records table that becomes a stack of rows on a phone */ .br .recs{border-radius:18px;overflow:hidden} .br .rec{display:grid;grid-template-columns:1fr auto;gap:6px 16px;padding:16px 20px; border-bottom:1px solid rgba(255,255,255,.06);align-items:baseline} .br .rec:last-child{border-bottom:0} .br .rec .rt{color:#fff;font:700 var(--t-base)/1.3 var(--ui);letter-spacing:-.015em;min-width:0} .br .rec .rv{text-align:right;color:#fff;font:700 var(--t-base)/1.25 var(--ui);letter-spacing:-.03em; font-variant-numeric:tabular-nums;overflow-wrap:anywhere} .br .rec .rm{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:0;margin-top:2px} .br .rec .rm span{display:inline-flex;align-items:center;font:400 var(--t-tiny)/1.4 var(--ui);color:var(--tx4)} .br .rec .rm span:not(:first-child)::before{content:"";width:3px;height:3px;border-radius:50%; background:var(--tx4);margin:0 10px;flex:0 0 auto;opacity:.7} .br .rec .rm .mono{font-family:var(--mono);font-size:var(--t-tiny);letter-spacing:.02em} /* empty state */ .br .none{padding:34px 20px;border-radius:18px;text-align:center} .br .none h3{font-size:var(--t-lede)} .br .none p{margin:10px auto 18px;max-width:40ch;font-size:var(--t-sm);color:var(--tx3)} /* summary figures above a list */ .br .sums{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:var(--s4)} .br .sum{padding:18px 18px;border-radius:16px} .br .sum dt{font:600 var(--t-label)/1.3 var(--mono);letter-spacing:.15em;text-transform:uppercase;color:var(--tx4)} .br .sum dd{margin:10px 0 0;font:700 1.5rem/1 var(--dis);color:#fff;letter-spacing:-.04em;font-variant-numeric:tabular-nums} @media(min-width:700px){.br .sums{grid-template-columns:repeat(4,1fr)} .br .rec{grid-template-columns:1.6fr auto;padding:18px 24px} .br .crumbs{padding-left:24px} .br .phead-row{padding-left:24px;padding-right:24px}} /* my memberships */ .br .mine{display:grid;grid-template-columns:1fr;gap:12px} .br .mycard{border-radius:18px;overflow:hidden;display:flex;flex-direction:column} .br .mycard .phead{aspect-ratio:800/240} .br .mycard .mybody{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1} .br .mycard h3{font-size:var(--t-h3);letter-spacing:-.02em} .br .mycard .since{display:block;margin-top:8px;font:600 var(--t-label)/1.3 var(--mono);letter-spacing:.15em; text-transform:uppercase;color:var(--tx4)} .br .mycard .btn{margin-top:auto;margin-top:18px} @media(min-width:700px){.br .mine{grid-template-columns:1fr 1fr}} @media(min-width:1000px){.br .mine{grid-template-columns:repeat(3,1fr)}} /* leaderboard row: rank, name, face */ .br .lbrow .av{width:40px;height:40px;border-radius:50%;object-fit:cover;border:1px solid var(--gbd);flex:0 0 auto} .br .lbrow .av.ini{display:grid;place-items:center;color:#fff;font:700 var(--t-tiny)/1 var(--ui); background:linear-gradient(140deg,var(--red),#B4247A);border:0} /* ---- profile ---- */ .br .avrow{display:flex;align-items:center;gap:20px;flex-wrap:wrap} .br .avbig{width:84px;height:84px;border-radius:50%;flex:0 0 auto;background-size:cover; background-position:center;border:1px solid var(--gbd)} .br .avrow h3{font-size:var(--t-base)} .br .avrow .sub{margin:7px 0 13px} .br .vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0 0 0 0);white-space:nowrap;border:0} .br label.btn{cursor:pointer} .br .field input[readonly]{color:var(--tx3);background:rgba(255,255,255,.028);cursor:default} .br .field input[readonly]:focus{border-color:var(--gbd);box-shadow:none;background:rgba(255,255,255,.028)} .br .dcard .divider{margin:22px 0 18px} .br .dcard .btn.wide{margin-top:6px} /* ---- prose: author-written CMS body ---- */ .br .prose{max-width:70ch;color:var(--tx3);font-size:var(--t-base);line-height:1.78} .br .prose > *+ *{margin-top:1.15em} .br .prose h2{font-size:clamp(1.25rem,1rem+1.1vw,1.6rem);color:#fff;margin-top:2em} .br .prose h3,.br .prose h4{font-size:var(--t-lede);color:#fff;margin-top:1.7em} .br .prose b,.br .prose strong{color:var(--tx)} .br .prose a{color:var(--gold);border-bottom:1px solid var(--gbd2)} .br .prose a:hover{color:#fff} .br .prose ul,.br .prose ol{padding-left:1.15em} .br .prose li+li{margin-top:.55em} .br .prose li::marker{color:var(--red)} .br .prose hr{border:0;height:1px;background:var(--gbd);margin:2.2em 0} .br .prose blockquote{margin-left:0;padding-left:18px;border-left:2px solid var(--red);color:var(--tx2)} .br .prose table{width:100%;border-collapse:collapse;font-size:var(--t-sm);display:block;overflow-x:auto} .br .prose th,.br .prose td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--gbd)} .br .prose th{color:var(--tx4);font:600 var(--t-label)/1.3 var(--mono);letter-spacing:.15em;text-transform:uppercase} .br .prose code{font-family:var(--mono);font-size:.86em;color:var(--tx2)} /* SweetAlert dialogs — the "Success" and "Oops..." boxes. These come from the vendor library and were never themed, so every confirmation on the site arrived as a white card with a blue button, which is the one thing on screen that still looked like someone else's software. They appear anywhere a form posts: login, registration, profile, payout address, contact. glass.css loads after the vendor sheet, so these win on order as well as specificity. */ body.br .swal2-container{backdrop-filter:blur(6px);background:rgba(0,0,0,.55)} body.br .swal2-popup{ background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02)) ,var(--bg); border:1px solid var(--gbd);border-radius:20px;color:var(--tx2); padding:30px 26px 24px;box-shadow:0 30px 80px rgba(0,0,0,.55)} body.br .swal2-title{color:#fff;font-family:var(--dis);font-weight:700; font-size:clamp(1.25rem,1rem+1vw,1.55rem);letter-spacing:-.012em;line-height:1.15;padding:0 0 .35em} body.br .swal2-html-container{color:var(--tx3);font-family:var(--ui);font-size:var(--t-base); line-height:1.6;margin:0;padding:0 4px} body.br .swal2-actions{margin-top:22px;gap:10px} body.br .swal2-styled.swal2-confirm{ background:var(--red);border:0;border-radius:11px;color:#fff; font:700 var(--t-sm)/1 var(--ui);letter-spacing:.01em;padding:13px 26px; box-shadow:0 8px 24px rgba(232,33,15,.32)} body.br .swal2-styled.swal2-confirm:hover{background:var(--red-d)} body.br .swal2-styled.swal2-confirm:focus{box-shadow:0 0 0 3px rgba(232,33,15,.4)} body.br .swal2-styled.swal2-cancel{background:transparent;border:1px solid var(--gbd2); border-radius:11px;color:var(--tx2);font:600 var(--t-sm)/1 var(--ui);padding:13px 22px} body.br .swal2-icon{border-color:currentColor;margin:4px auto 20px; width:66px;height:66px;border-width:3px} body.br .swal2-icon.swal2-error{color:var(--ember)} body.br .swal2-icon.swal2-error [class^='swal2-x-mark-line']{background-color:var(--ember)} body.br .swal2-icon.swal2-success{color:#5FCB8B} body.br .swal2-icon.swal2-success [class^='swal2-success-line']{background-color:#5FCB8B} body.br .swal2-icon.swal2-success .swal2-success-ring{border-color:rgba(95,203,139,.35)} body.br .swal2-icon.swal2-warning,body.br .swal2-icon.swal2-info,body.br .swal2-icon.swal2-question{color:var(--gold)} body.br .swal2-close{color:var(--tx4)} body.br .swal2-close:hover{color:#fff} body.br .swal2-timer-progress-bar{background:var(--red)} /* the small corner toast uses the same shell */ body.br .swal2-toast{background:var(--bg);border:1px solid var(--gbd);border-radius:14px; box-shadow:0 16px 40px rgba(0,0,0,.5)} body.br .swal2-toast .swal2-title{font-family:var(--ui);font-size:var(--t-sm);font-weight:600;color:var(--tx2)} @media(max-width:600px){ body.br .swal2-popup{width:calc(100% - 32px);padding:26px 20px 20px;border-radius:18px} body.br .swal2-styled.swal2-confirm{width:100%;padding:15px 20px} } /* Phones: the two smallest steps of the type scale were set for a desktop and never adjusted. 11px uppercase with wide letter-spacing is the hardest thing on the page to read on a handset, and it carries real content here - card headers, chart labels, the menu subtitles - not just decoration. Raising the tokens lifts all 51 places at once. */ @media(max-width:700px){ body.br{ --t-label:12px; --t-tiny:.82rem; } .br .eyebrow{letter-spacing:.14em} /* The hero eyebrow is 41 characters - far longer than the others ("Memberships", "Top partners"). At 11px/.14em it measures 334px, so it fits a 390px iPhone by 5px and wraps on a 360px Android. Rather than let one word drop, it holds one line and gives up a little size on narrow screens: 11px wherever there is room, scaling down only when there is not. The trailing rule is dropped here because the text already fills the row on a phone, so it never had anywhere to draw. */ .br .hero .eyebrow{white-space:nowrap;letter-spacing:.1em; font-size:min(var(--t-label), calc((100vw - 42px) / 29.2))} .br .hero .eyebrow::after{display:none} } /* Legal pages (privacy, terms). Long documents need signposting, so the h2s are numbered by CSS and the opening paragraph is set larger to act as a lead. */ .br .prose{counter-reset:sec} .br .prose .lead{font-size:var(--t-lede);line-height:1.62;color:var(--tx2);max-width:60ch} .br .prose h2{counter-increment:sec;position:relative;padding-top:1.15em;margin-top:2.4em; border-top:1px solid var(--gbd);letter-spacing:-.02em} .br .prose h2::before{content:counter(sec,decimal-leading-zero);display:block;margin-bottom:.5em; font:600 var(--t-label)/1 var(--mono);letter-spacing:.18em;color:var(--red)} .br .prose h2:first-of-type{border-top:0} .br .prose h3{color:var(--tx);font-size:var(--t-base);font-weight:700;margin-top:2em; letter-spacing:.01em;text-transform:none} .br .prose blockquote{padding:20px 22px;border:1px solid var(--gbd);border-left:2px solid var(--red); border-radius:0 14px 14px 0;background:var(--g);color:var(--tx2)} .br .prose blockquote p{margin:0} .br .prose table{border:1px solid var(--gbd);border-radius:14px;overflow:hidden;display:table} .br .prose thead th{background:rgba(255,255,255,.03)} .br .prose tbody tr:last-child td{border-bottom:0} .br .prose td:first-child{color:var(--tx2);font-weight:600} @media(max-width:600px){ .br .prose table{display:block;overflow-x:auto;border-radius:0;border-left:0;border-right:0} .br .prose th,.br .prose td{padding:10px 12px;min-width:9rem} } /* ---- checkout ---- */ .br .ordrow{display:flex;align-items:baseline;justify-content:space-between;gap:18px; padding:15px 0;border-top:1px solid var(--gbd)} .br .ordrow .ok{color:var(--tx3);font-size:var(--t-sm)} .br .ordrow .ov{color:#fff;font:700 var(--t-base)/1.2 var(--ui);letter-spacing:-.02em;text-align:right} .br .ordrow.total{border-bottom:1px solid var(--gbd);margin-bottom:22px} .br .ordrow.total .ov{font:700 1.7rem/1 var(--dis);letter-spacing:-.04em;font-variant-numeric:tabular-nums} .br .ordrow.total .ok{color:var(--tx2)} .br .pay .paytimer{margin:4px 0 20px;padding:13px 16px;border-radius:12px;text-align:center; background:rgba(232,33,15,.1);border:1px solid rgba(232,33,15,.28); font:600 var(--t-label)/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--tx2)} .br .pay .paytimer span{font-family:var(--dis);font-weight:700;font-size:var(--t-fig);letter-spacing:-.02em; margin-left:9px;color:#fff;font-variant-numeric:tabular-nums;text-transform:none} .br .pay .qr{display:flex;justify-content:center;margin-bottom:22px} .br .pay .qr img{width:190px;height:190px;border-radius:14px;padding:10px;background:#fff} .br .pay .recs{border-radius:16px;border:1px solid var(--gbd);background:rgba(255,255,255,.03);margin-bottom:18px} .br .pay .rec{padding:14px 18px} .br .pay .rec.addr .rm{margin-top:7px} .br .pay .rec.addr .mono{word-break:break-all;font-size:var(--t-tiny);color:var(--tx2);line-height:1.6} .br .pay .text-success{color:var(--grn)!important} .br .pay .text-danger{color:#FF8A76!important} .br .pay .text-light{color:var(--tx2)!important} /* ---- course player ---- */ .br .prog{display:flex;align-items:center;gap:16px;padding:16px 20px;border-radius:14px;margin-bottom:var(--s4)} .br .pbar{flex:1;height:6px;border-radius:100px;background:rgba(255,255,255,.09);overflow:hidden} .br .pbar span{display:block;height:100%;border-radius:100px;background:linear-gradient(90deg,var(--red),#F2452F)} .br .ppct{flex:0 0 auto;font:600 var(--t-label)/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--tx3)} .br .lessons.play li{padding:0;border-top:1px solid rgba(255,255,255,.06)} .br .lessons.play li::before{display:none} .br .lrow{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:15px 0;min-height:46px; color:var(--tx2);text-decoration:none;transition:color .2s} .br .lrow::before{content:"";flex:0 0 auto;width:22px;height:22px;border-radius:50%; border:1px solid var(--gbd);background:rgba(255,255,255,.04);margin-right:12px; background-image:linear-gradient(45deg,transparent 46%,var(--tx4) 46%,var(--tx4) 54%,transparent 54%); background-size:8px 2px;background-position:center;background-repeat:no-repeat} .br .lessons.play .done .lrow::before{border-color:rgba(63,200,166,.5);background:rgba(63,200,166,.16); background-image:linear-gradient(45deg,transparent 44%,var(--grn) 44%,var(--grn) 56%,transparent 56%), linear-gradient(-45deg,transparent 44%,var(--grn) 44%,var(--grn) 56%,transparent 56%); background-size:7px 7px;background-position:center;background-repeat:no-repeat} .br .lessons.play .part .lrow::before{border-color:rgba(232,33,15,.5);background:rgba(232,33,15,.16); background-image:none} .br .lrow:hover{color:#fff} .br .lrow:hover .ld{color:var(--tx3)} .br .lessons.play .ln{flex:1;min-width:0} /* ---- course sections: the choice a member makes before seeing modules ---- */ .br .parts{display:grid;grid-template-columns:1fr;gap:10px;margin-bottom:var(--s4)} .br .parts .part{position:relative;display:block;padding:16px 40px 16px 18px;border-radius:14px;text-decoration:none; background:var(--g);border:1px solid var(--gbd);transition:border-color .25s var(--e),background .25s var(--e)} .br .parts .part b{display:block;color:var(--tx2);font:700 var(--t-h3)/1.2 var(--dis);letter-spacing:-.02em} .br .parts .part span{display:block;margin-top:6px;font:500 var(--t-label)/1.3 var(--mono); letter-spacing:.13em;text-transform:uppercase;color:var(--tx4)} .br .parts .part:hover{border-color:var(--gbd2)} .br .parts .part.on{background:rgba(232,33,15,.10);border-color:rgba(232,33,15,.42)} .br .parts .part.on b{color:#fff} .br .parts .part.on span{color:var(--red)} .br .parts .part.empty{opacity:.5;cursor:default;padding-right:18px} .br .parts .part.empty:hover{border-color:var(--gbd)} /* Real navigation only, same rule the nav rows and .fcontact links follow - the placeholder "coming soon" cards get no arrow, since they don't go anywhere. Corner-positioned rather than inline, since this card stacks its title and subtitle rather than laying them out in a row. */ .br .parts .part .ar{position:absolute;top:16px;right:18px;color:var(--tx4);transition:transform .3s var(--e),color .25s var(--e)} .br .parts .part:hover .ar{transform:translateX(3px)} .br .parts .part.on .ar{color:var(--red)} @media(min-width:620px){.br .parts{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}}