/* pro.css  ·  RB Trading Trade Desk, the editorial layer for every page that is not the app.
   23 Sep 2026. Owner: "the text is not an easy read, the title looks basic, not lined up, no design,
   super flat, looks like every other dark AI written page. We need some taste."
   The direction, and every rule below serves it: a dark editorial magazine. One serif display face
   (Instrument Serif, the same one the landing and the record use) for headlines with one italic gold
   phrase; a large standfirst; a byline row; a 66 character measure at 17px; numbered section
   headings on hairlines; a sticky rail with the contents and the offer beside the text on a wide
   screen; glass for every surface; gold owns the page; one atmosphere at the top; no blur on phones.
   Every extra page shares the same bones (nav, .wrap, header > .crumb + h1 + .answer|.lead, h2, .cta
   > .go, footer), so this file is the design of all of them. pro.js adds the masthead pieces. */

:root{
  --pro-bg:#090d17; --pro-glass:rgba(255,255,255,.035); --pro-glass-h:rgba(255,255,255,.06);
  --pro-line:rgba(255,255,255,.085); --pro-line-h:rgba(245,158,11,.4);
  --pro-gold:#f59e0b; --pro-gold2:#fcd34d; --pro-ink:#0a0e16; --pro-spring:cubic-bezier(.22,1,.36,1);
  --pro-serif:'Instrument Serif',Georgia,'Times New Roman',serif; --pro-sans:'Inter',system-ui,sans-serif; --pro-mono:'DM Mono',ui-monospace,monospace;
  --bg:#090d17; --card:rgba(255,255,255,.035); --bdr:rgba(255,255,255,.085); --bdr2:rgba(255,255,255,.14); --t2:#d2d9e4; --t3:#96a1b8;
}

/* ── canvas: blue-black, one gold atmosphere behind the masthead, a breath of grain ── */
html{background:var(--pro-bg)}
body{background:var(--pro-bg);position:relative;font-size:17px;line-height:1.72}
body::before{content:'';position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:radial-gradient(ellipse 62% 38% at 50% -4%,rgba(245,158,11,.14),transparent 62%),
             radial-gradient(ellipse 50% 40% at 100% 108%,rgba(53,104,212,.08),transparent 66%),
             linear-gradient(180deg,#0b1020 0%,#090d17 42%,#070a12 100%)}
body::after{content:'';position:fixed;inset:0;z-index:2147482990;pointer-events:none;opacity:.028;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:220px 220px}

/* ── the bar: glass, sticky, one luminous button ── */
nav{position:sticky;top:0;z-index:120;padding:14px 28px!important;
  background:rgba(9,13,23,.7);-webkit-backdrop-filter:blur(18px) saturate(1.25);backdrop-filter:blur(18px) saturate(1.25);border-bottom:1px solid var(--pro-line)}
.nav-brand{letter-spacing:-.2px}
.nav-cta,.ncta,a.go,.cta .go,.hero-cta,.pro-btn{position:relative;overflow:hidden;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:linear-gradient(145deg,#f59e0b,#c8880e)!important;color:var(--pro-ink)!important;border-radius:12px!important;font-weight:800;
  box-shadow:0 4px 18px rgba(245,158,11,.3),inset 0 1px 0 rgba(255,255,255,.28);transition:transform .18s var(--pro-spring),box-shadow .22s var(--pro-spring)}
.nav-cta:hover,a.go:hover,.cta .go:hover,.pro-btn:hover{transform:translateY(-1px);box-shadow:0 10px 28px rgba(245,158,11,.42),inset 0 1px 0 rgba(255,255,255,.3);text-decoration:none}
.nav-cta:active,a.go:active,.cta .go:active,.pro-btn:active{transform:scale(.97)}
.nav-cta::after,a.go::after,.cta .go::after,.pro-btn::after{content:'';position:absolute;top:0;left:-130%;width:55%;height:100%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);transform:skewX(-18deg);transition:left .6s var(--pro-spring)}
.nav-cta:hover::after,a.go:hover::after,.cta .go:hover::after,.pro-btn:hover::after{left:140%}
.cta .go::after{animation:proSheen 7s var(--pro-spring) 2.4s infinite}
@keyframes proSheen{0%{left:-130%}14%{left:140%}100%{left:140%}}

/* ── the page grid: text at a 66 character measure, a rail beside it on a wide screen ── */
.wrap{max-width:1120px!important;padding:0 28px!important}
.pro-body{display:grid;grid-template-columns:minmax(0,1fr);gap:0 56px;align-items:start}
@media(min-width:1000px){.pro-body{grid-template-columns:minmax(0,700px) 280px}}
.pro-main{min-width:0}
.pro-main > p,.pro-main > ul,.pro-main > ol,.pro-main > .note,.pro-main > .quotebox,.pro-main > .test,.pro-main > .flag,.pro-main > .limit{max-width:66ch}
.pro-main > p{font-size:17px;line-height:1.72;color:var(--t2);margin:0 0 18px}
.pro-main > ul,.pro-main > ol{font-size:16.5px;line-height:1.7;color:var(--t2);margin:0 0 18px 22px}
.pro-main li{margin-bottom:8px}
.pro-main > p b,.pro-main li b{color:#fff}
/* the first paragraph opens with a drop cap in the serif, gold */
.pro-main > p.pro-first::first-letter{float:left;font-family:var(--pro-serif);font-size:4.1em;line-height:.82;padding:6px 10px 0 0;color:var(--pro-gold);font-weight:400}

/* ── the masthead ── */
header{padding:52px 0 28px!important;position:relative}
.crumb{font-size:11px;font-weight:800;letter-spacing:1.8px;text-transform:uppercase;color:var(--pro-gold);margin-bottom:22px!important}
.crumb a{color:var(--t3);border:0!important}
.pro-kicker{display:flex;align-items:center;gap:10px;font-size:11px;font-weight:800;letter-spacing:1.8px;text-transform:uppercase;color:var(--pro-gold);margin-bottom:18px}
.pro-kicker::before{content:'';width:22px;height:1px;background:var(--pro-gold)}
.pro-kicker span{color:var(--t3);font-weight:600;letter-spacing:.6px;text-transform:none;font-size:12px}
h1{font-family:var(--pro-serif)!important;font-weight:400!important;font-size:clamp(38px,5.6vw,66px)!important;line-height:1.02!important;letter-spacing:-1.6px!important;
  color:#fff;text-wrap:balance;max-width:19ch;margin:0 0 26px!important}
h1.pro-long{font-size:clamp(34px,4.6vw,54px)!important;max-width:22ch}
h1 em,h1 i,h1 .fig,h1 .n{font-style:italic;font-weight:400;color:var(--pro-gold2);-webkit-text-fill-color:currentColor;background:none}
.answer,.lead{position:relative;font-family:var(--pro-sans);font-size:19px!important;line-height:1.6!important;color:var(--t2)!important;
  background:none!important;border:0!important;border-left:0!important;border-radius:0!important;padding:4px 0 0 26px!important;max-width:60ch;margin:0 0 6px}
.answer::before,.lead::before{content:'';position:absolute;left:0;top:6px;bottom:6px;width:2px;border-radius:2px;background:linear-gradient(180deg,var(--pro-gold2),var(--pro-gold) 60%,transparent)}
.answer b,.lead b{color:#fff}
.meta-line,.updated{display:flex!important;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:26px 0 0!important;padding-top:18px;border-top:1px solid var(--pro-line);font-size:12.5px!important;color:var(--t3)!important}
.pro-by{display:inline-flex;align-items:center;gap:9px;color:var(--t2);font-weight:600}
.pro-by i{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:linear-gradient(145deg,#f59e0b,#c8880e);color:var(--pro-ink);font:800 11px/1 var(--pro-sans);font-style:normal;letter-spacing:.5px}
.pro-dot{width:3px;height:3px;border-radius:50%;background:var(--t3);opacity:.6}

/* ── section headings: a small gold index on a hairline, the serif for the words ── */
.pro-main > h2{position:relative;font-family:var(--pro-serif)!important;font-weight:400!important;font-size:clamp(27px,3.2vw,34px)!important;line-height:1.12!important;letter-spacing:-.6px!important;
  color:#fff;margin:52px 0 16px!important;padding-top:22px;border-top:1px solid var(--pro-line);text-wrap:balance;scroll-margin-top:92px;max-width:26ch}
/* the record page labels its sections itself ("Just closed"), so no second rule above those headings */
.pro-main > .lab{margin-top:52px}
.pro-main > .lab + h2{border-top:0;padding-top:0;margin-top:8px!important}
.pro-main > h2 .pro-num{display:block;font:800 10.5px/1 var(--pro-sans);letter-spacing:2px;color:var(--pro-gold);margin-bottom:12px}
.pro-main > h2 .n{color:var(--pro-gold2);font-style:italic}
.pro-main > h3{font-family:var(--pro-serif);font-size:23px;font-weight:400;letter-spacing:-.3px;line-height:1.15;color:#fff;margin:28px 0 8px}   /* the serif, like every heading (1 Oct 2026) */

/* ── the rail: contents, then the offer, sticky beside the text ── */
.pro-rail{position:sticky;top:84px;display:flex;flex-direction:column;gap:14px}
.pro-toc{background:var(--pro-glass);border:1px solid var(--pro-line);border-radius:16px;padding:16px 16px 12px;box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.pro-toc .pro-k{font-size:10px;font-weight:800;letter-spacing:1.8px;text-transform:uppercase;color:var(--pro-gold);margin:0 0 10px}
.pro-toc ol{list-style:none;margin:0;padding:0;counter-reset:toc}
.pro-toc li{counter-increment:toc;margin:0}
.pro-toc a{display:flex;gap:10px;align-items:baseline;padding:7px 0;font-size:13px;line-height:1.35;color:var(--t2);text-decoration:none;border:0!important;border-top:1px solid rgba(255,255,255,.05)!important;transition:color .15s}
.pro-toc li:first-child a{border-top:0!important}
.pro-toc a::before{content:counter(toc,decimal-leading-zero);font:500 10.5px/1.6 var(--pro-mono);color:var(--t3);flex:none}
.pro-toc a:hover,.pro-toc a.on{color:#fff}
.pro-toc a.on::before{color:var(--pro-gold)}
.pro-offer{position:relative;overflow:hidden;background:linear-gradient(160deg,rgba(245,158,11,.16),rgba(255,255,255,.025) 60%);border:1px solid rgba(245,158,11,.36);border-radius:16px;padding:18px 16px 16px;box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.pro-offer::before{content:'';position:absolute;inset:-60% -30%;z-index:-1;filter:blur(50px);opacity:.5;background:radial-gradient(ellipse 45% 50% at 30% 30%,rgba(245,158,11,.45),transparent 70%)}
.pro-offer .pro-k{font-size:10px;font-weight:800;letter-spacing:1.8px;text-transform:uppercase;color:var(--pro-gold);margin:0 0 8px}
.pro-offer h3{font-family:var(--pro-serif);font-weight:400;font-size:24px;line-height:1.08;letter-spacing:-.5px;color:#fff;margin:0 0 8px}
.pro-offer h3 em{font-style:italic;color:var(--pro-gold2)}
.pro-offer p{font-size:13px;line-height:1.55;color:var(--t2);margin:0 0 14px}
.pro-offer .pro-btn{width:100%;min-height:42px;font-size:13.5px}
.pro-offer .pro-sub2{display:block;margin-top:10px;font-size:11.5px;color:var(--t3);text-align:center}
.pro-sub2 a{color:var(--t2);text-decoration:none;border-bottom:1px dotted rgba(255,255,255,.3)!important}
.pro-sub2 a:hover{color:var(--pro-gold2)}
@media(max-width:999px){.pro-rail{position:static}.pro-toc{display:none}.pro-offer{display:none}}

/* ── glass surfaces ── */
.note,.cta,details,.stat,.test,.quotebox,.limit,.histo,.tbl-wrap,.flag,.sibs,.month,.gcard,.xr>div,.xlate,.expect,.calc,.stats .stat,.summary-box{
  background:var(--pro-glass);border:1px solid var(--pro-line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 18px 40px -30px rgba(0,0,0,.9);
  transition:transform .35s var(--pro-spring),border-color .35s var(--pro-spring),background .35s var(--pro-spring),box-shadow .35s var(--pro-spring)}
.stat:hover,.xr>div:hover,.sibs a:hover,.month:hover{transform:translateY(-3px);background:var(--pro-glass-h);border-color:var(--pro-line-h);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 22px 44px -26px rgba(245,158,11,.28)}
.note,.quotebox,.test,.flag,.limit{font-size:15.5px!important;line-height:1.6!important;padding:16px 20px!important;border-radius:14px!important}
.quotebox{font-family:var(--pro-serif);font-size:20px!important;line-height:1.4!important;color:#fff!important;border-left:2px solid var(--pro-gold)!important}
.quotebox b{color:var(--pro-gold2)}
details summary{font-size:15.5px}
details p{font-size:15px!important;line-height:1.65!important}
table{border-collapse:separate;border-spacing:0;font-size:13.5px!important}
td.pro-nw{white-space:nowrap}   /* dates and R values only; prose cells keep wrapping (pro.js marks them) */
td:first-child,th:first-child{padding-left:16px}
th{background:rgba(255,255,255,.03);font-family:var(--pro-sans)}
td{font-variant-numeric:tabular-nums}
tbody tr:hover td{background:rgba(255,255,255,.02)}
.tbl-wrap{border-radius:14px}

/* ── the offer card at the end of the article ── */
.cta{position:relative;overflow:hidden;border-color:rgba(245,158,11,.34)!important;border-radius:20px!important;padding:34px 28px!important;
  background:linear-gradient(135deg,rgba(245,158,11,.14),rgba(255,255,255,.02) 55%,rgba(53,104,212,.06))!important}
.cta::before{content:'';position:absolute;inset:-40% -20%;z-index:-1;pointer-events:none;filter:blur(60px);opacity:.55;
  background:radial-gradient(ellipse 40% 50% at 30% 40%,rgba(245,158,11,.35),transparent 70%),radial-gradient(ellipse 35% 45% at 75% 70%,rgba(53,104,212,.28),transparent 70%)}
.cta h3{font-family:var(--pro-serif)!important;font-weight:400!important;font-size:clamp(28px,3.4vw,38px)!important;letter-spacing:-.8px!important;line-height:1.05!important;color:#fff}
.cta p{font-size:15px!important;line-height:1.6!important}
.cta .go{min-height:48px;padding:0 28px!important;font-size:15px!important}
.cta .rec{background:rgba(255,255,255,.05);border:1px solid var(--pro-line);color:var(--t2);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.cta .rec:hover{border-color:var(--pro-line-h);color:#fff}

/* ── what members get ── */
.pro-get{margin:56px 0 8px}
.pro-get .pro-eyebrow{font-size:10.5px;font-weight:800;letter-spacing:2.2px;text-transform:uppercase;color:var(--pro-gold);margin-bottom:12px}
.pro-get h2{font-family:var(--pro-serif);font-weight:400;font-size:clamp(30px,4vw,44px);line-height:1.05;letter-spacing:-1px;color:#fff;margin:0 0 10px;max-width:22ch;text-wrap:balance}
.pro-get h2 em{font-style:italic;color:var(--pro-gold2)}
.pro-get .pro-sub{font-size:16px;line-height:1.6;color:var(--t2);max-width:60ch;margin:0 0 20px}
.pro-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.pro-card{position:relative;overflow:hidden;background:var(--pro-glass);border:1px solid var(--pro-line);border-radius:18px;padding:20px 20px 18px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);transition:transform .35s var(--pro-spring),border-color .35s var(--pro-spring),background .35s var(--pro-spring)}
.pro-card:hover{transform:translateY(-3px);border-color:var(--pro-line-h);background:var(--pro-glass-h)}
.pro-card .pro-k{display:flex;align-items:center;gap:8px;font-size:10px;font-weight:800;letter-spacing:1.8px;text-transform:uppercase;color:var(--pro-gold);margin-bottom:12px}
.pro-card .pro-k svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.pro-card h3{font-family:var(--pro-serif);font-weight:400;font-size:23px;line-height:1.12;letter-spacing:-.4px;color:#fff;margin:0 0 10px}
.pro-card p{font-size:14.5px;line-height:1.62;color:var(--t2);margin:0;max-width:none}
.pro-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:18px}
.pro-btn{min-height:46px;padding:0 24px;font-size:14.5px;text-decoration:none!important;border:0!important}
.pro-sub2{font-size:12.5px;color:var(--t3)}

/* ── the foot ── */
footer{border-top:1px solid var(--pro-line);background:linear-gradient(180deg,transparent,rgba(255,255,255,.015));font-size:13px!important;padding:32px 28px!important}

/* ── reveals: content is there without script; pro.js adds .pro-rv, then .pro-in as it scrolls in ── */
.pro-rv{opacity:0;transform:translateY(14px);transition:opacity .6s var(--pro-spring),transform .6s var(--pro-spring)}
.pro-rv.pro-in{opacity:1;transform:none}

/* ── phones ── */
@media(max-width:680px){
  nav{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(9,13,23,.96);padding:12px 16px!important}
  .wrap{padding:0 16px!important}
  header{padding:34px 0 22px!important}
  h1{font-size:clamp(34px,10vw,44px)!important;letter-spacing:-1.2px!important}
  h1.pro-long{font-size:clamp(30px,8.6vw,38px)!important}
  table{font-size:12.5px!important}
  td,th{padding-left:9px!important;padding-right:9px!important}
  td:first-child,th:first-child{padding-left:12px}
  @media(max-width:480px){.pro-hide-sm{display:none}}
  .crumb{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:1.2px;margin-bottom:16px!important}
  .meta-line,.updated{display:grid!important;gap:6px;margin-top:20px!important}
  .pro-dot{display:none}
  .answer,.lead{font-size:17px!important}
  body,.pro-main > p{font-size:16.5px}
  .pro-main > p.pro-first::first-letter{font-size:3.4em}
  .pro-main > h2{font-size:26px!important;margin-top:40px!important}
  .pro-grid{grid-template-columns:1fr}
  .pro-row{align-items:stretch}.pro-btn{width:100%}
  .cta{padding:26px 18px!important}
  body::after{display:none}
}
@media(prefers-reduced-motion:reduce){
  .pro-rv{opacity:1;transform:none;transition:none}
  .cta .go::after,.pro-btn::after,.nav-cta::after,a.go::after{animation:none;display:none}
  .stat:hover,.xr>div:hover,.pro-card:hover,.nav-cta:hover,a.go:hover,.pro-btn:hover{transform:none}
}


/* ════════════════════════════════════════════════════════════════════════════════════════
   LIFT  ·  23 Sep 2026, second pass from the ui-ux-pro-max audit and the owner's note:
   "the blue, I like it; make the text and boxes and images stand out more; place the captures better".
   Three colour roles from here on: BLUE is wayfinding (kicker, crumb, section index, contents numbers,
   table heads, card labels), GOLD is emphasis and the one action colour, red and green stay muted for
   results. Text tokens step up to clear 4.5:1 everywhere, glass gets a real edge, big images get a frame,
   and two capture points are added: a mid-read strip and a phone bar. Everything below overrides above.
   ════════════════════════════════════════════════════════════════════════════════════════ */
:root{--pro-blue:#7aa3e0;--pro-blue2:#3568d4;--pro-glass:rgba(255,255,255,.05);--pro-glass-h:rgba(255,255,255,.075);--pro-line:rgba(255,255,255,.12);
  --t2:#d7dde8;--t3:#9aa4ba;--card:rgba(255,255,255,.05);--bdr:rgba(255,255,255,.12);--red:#f0716d;--loss:#f0716d}
/* wayfinding in blue */
.crumb,.crumb a,.pro-kicker,.pro-main > h2 .pro-num,.pro-toc a::before,.pro-toc a.on::before,.pro-k,.pro-card .pro-k,.pro-get .pro-eyebrow,.pro-offer .pro-k{color:var(--pro-blue)!important}
.pro-kicker::before{background:var(--pro-blue)}
.pro-kicker span{color:var(--t3)}
th{color:var(--pro-blue)!important;letter-spacing:.8px}
/* glass with an edge: a lit top, a firmer hairline, a deeper drop */
.note,.cta,details,.stat,.test,.quotebox,.limit,.histo,.tbl-wrap,.flag,.sibs,.month,.gcard,.xr>div,.xlate,.expect,.calc,.stats .stat,.summary-box,.pro-toc,.pro-card,.recentwins > div,.op-card,.rw{
  background:linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.035))!important;border:1px solid rgba(255,255,255,.12)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 24px 60px -32px rgba(0,0,0,.95)}
.stat:hover,.xr>div:hover,.sibs a:hover,.month:hover,.pro-card:hover{border-color:rgba(122,163,224,.45)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 24px 50px -26px rgba(53,104,212,.35)}
.cta{background:radial-gradient(ellipse 45% 60% at 20% 30%,rgba(245,158,11,.2),transparent 70%),radial-gradient(ellipse 40% 55% at 85% 80%,rgba(53,104,212,.18),transparent 70%),linear-gradient(135deg,rgba(255,255,255,.05),rgba(255,255,255,.02))!important;border-color:rgba(245,158,11,.45)!important}
.pro-offer{background:radial-gradient(ellipse 60% 50% at 25% 20%,rgba(245,158,11,.24),transparent 70%),linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.025));border-color:rgba(245,158,11,.45)}
/* a big image sits in a frame with a blue-black glow, so it reads as an object on the page */
img.pro-frame{border:1px solid rgba(122,163,224,.28)!important;border-radius:14px!important;box-shadow:0 30px 70px -30px rgba(53,104,212,.45),0 0 0 6px rgba(255,255,255,.025)!important;background:#0b1020}
/* the mid-read capture strip */
.pro-strip{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 18px;margin:40px 0 36px;padding:18px 20px;border-radius:16px;
  background:linear-gradient(135deg,rgba(53,104,212,.16),rgba(255,255,255,.035) 60%);border:1px solid rgba(122,163,224,.32);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 24px 60px -34px rgba(53,104,212,.5)}
.pro-strip .pro-k{margin:0 0 4px;font-size:10px;font-weight:800;letter-spacing:1.8px;text-transform:uppercase}
.pro-strip p{margin:0!important;font-size:15.5px!important;line-height:1.5!important;color:#fff!important;max-width:44ch}
.pro-strip .pro-btn{min-height:44px;padding:0 20px;font-size:14px;flex:none}
/* the phone bar: one line and the button, after the reader has scrolled into the piece */
.pro-bar{position:fixed;left:0;right:0;bottom:0;z-index:9400;display:none;align-items:center;gap:10px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:rgba(9,13,23,.94);border-top:1px solid rgba(245,158,11,.35);box-shadow:0 -12px 40px rgba(0,0,0,.5);transform:translateY(110%);transition:transform .35s var(--pro-spring)}
.pro-bar.pro-on{transform:none}
.pro-bar b{flex:1;min-width:0;font:700 13px/1.3 var(--pro-sans);color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pro-bar b small{display:block;font-weight:500;font-size:11px;color:var(--t3);margin-top:2px}
.pro-bar .pro-btn{min-height:44px;padding:0 16px;font-size:13.5px;flex:none}
.pro-bar button{flex:none;width:44px;height:44px;display:grid;place-items:center;background:none;border:0;color:var(--t3);cursor:pointer;border-radius:10px}
.pro-bar button svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
@media(max-width:680px){.pro-bar{display:flex}.pro-bar .pro-btn{width:auto}html.pro-bar-on body{padding-bottom:76px}}
/* targets a thumb can hit */
footer a{display:inline-block;padding:10px 6px;line-height:24px}
.nav-brand{display:inline-flex;align-items:center;min-height:44px}
.nav-brand span{margin-left:.3em}   /* an inline-flex drops the space before the span (1 Oct 2026) */
.calc .chip{min-height:44px;padding:0 14px}
.calc select{min-width:52px;min-height:44px}
/* body text on a phone: never under 16px in the reading column */
@media(max-width:680px){
  .pro-main > p,.pro-main li,.pro-card p,details p,.note,.flag,.limit,.test,.pro-main dd,.expect p,.calc p,.xlate p{font-size:16px!important;line-height:1.65!important}
  .pro-strip p{font-size:15px!important}
}
@media(prefers-reduced-motion:reduce){.pro-bar{transition:none}}
/* the quiz site (quiz.rbtrading.site) runs a copy of this file: its bar is nav.topbar with a .top-cta */
.topbar .top-cta{background:linear-gradient(145deg,#f59e0b,#c8880e)!important;color:#0a0e16!important;border-radius:12px!important;font-weight:800;padding:10px 16px;min-height:44px;display:inline-flex;align-items:center;box-shadow:0 4px 18px rgba(245,158,11,.3),inset 0 1px 0 rgba(255,255,255,.28)}
.cta-card{border-radius:18px!important}
/* round two, 23 Sep 2026: the gold link colour was catching button-links and painting gold on gold */
.pro-main p a,.pro-main li a,.pro-main dd a,.pro-main td a,.pro-main blockquote a,.pro-main .note a,.pro-main .limit a{color:var(--pro-gold2);border-bottom:1px solid rgba(252,211,77,.35)}
.pro-main p a:hover,.pro-main li a:hover{border-bottom-color:var(--pro-gold2)}
/* a button-link inside a paragraph keeps its own ink; every other button keeps the page's own colours */
.pro-main p a.btn-gold,.pro-main p a.pro-btn,.pro-main p a.go{color:#0a0e16!important;border-bottom:0!important}
.pro-main p a.btn-ghost{color:inherit!important}
/* tap room on the small text links */
.crumb{min-height:44px;display:flex;align-items:center;flex-wrap:wrap;gap:0 4px}
.crumb a{display:inline-block;padding:12px 0}
.pro-sub2 a,.sibs a,.meta-line a{display:inline-block;padding:10px 0}
/* keyboard focus is visible everywhere, in the wayfinding blue */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--pro-blue)!important;outline-offset:2px!important}
/* every paragraph in the reading column reads at 16px on a phone; captions and tiles keep their size */
@media(max-width:680px){
  .pro-main p:not(.caveat):not(.pro-strip p):not(.stat p):not(footer p){font-size:16px!important;line-height:1.65!important}
  .pro-main .caveat,.caveat{font-size:13.5px!important}
}
/* round three: a button-link inside the reading column keeps its own ink whatever its wrapper; a wide table scrolls on a phone */
@media(max-width:680px){.pro-main > table,.pro-main article > table,.wrap > table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}}

/* no orphans: a heading never ends on a lone word where the browser can help; pro.js ties the last two words for the rest */
h1,h2,h3,h4{text-wrap:pretty}

/* autofill never paints a field white: the page colours win over the browser autofill paint (owner, 23 Sep 2026) */
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,textarea:-webkit-autofill{-webkit-text-fill-color:var(--text,#fff);-webkit-box-shadow:0 0 0 1000px var(--surface,var(--bg,#0b0e16)) inset;box-shadow:0 0 0 1000px var(--surface,var(--bg,#0b0e16)) inset;caret-color:var(--text,#fff);transition:background-color 600000s 0s}