/* ==========================================================================
fixes.css — correction layer, loaded after site.css / home.css / fonts.css.
Delete this one to roll every change back.
Contents
01 Font fallback (restores a proper display face)
02 Light-theme contrast (gold was 2.98:1 — failing AA)
03 Radii + weight discipline
04 Gold economy (accent means action again)
05 Type floor (nothing readable below 12px)
06 Risk-warning legibility
07 Even card grids (no voids)
08 Section rhythm
09 Mobile: account-size table (was clipping values to "$")
10 Mobile: comparison cards (fewer facts, less scrolling)
11 Mobile: chip row clipping
12 Mobile: jump links legibility
13 Mobile: floating buttons off the CTAs
14 Red no longer means "sale"
15 Cap the glass layers
========================================================================== */
/* 01 ── font fallback ------------------------------------------------------ */
:root{
--display:"Schibsted Grotesk","Segoe UI Semibold","Segoe UI",system-ui,
-apple-system,"Helvetica Neue",Arial,sans-serif;
--body:"Public Sans","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
}
/* 02 ── light theme contrast ----------------------------------------------- */
/* gold was #B8820E on #EEF1FB = 2.98:1. These clear 4.5:1. */
:root[data-theme=light]{
--gold:#8A5F00;
--gold2:#7A5300;
--gold-glow:rgba(138,95,0,.22);
--dim:#545C78;
--ok:#0C7048;
--warn:#8A5A00;
}
/* 03 ── radii + weight discipline ------------------------------------------ */
:root{
--r-ctl:8px;
--r-card:14px;
--r-pill:999px;
}
.card,.panel,.box{border-radius:var(--r-card)}
.btn,.btn.sm,.btn.lg,.seg,.seg b{border-radius:var(--r-ctl)}
.mono-badge,.rbadge,.pill,.chip,.tpl{border-radius:var(--r-pill)}
/* 700 competes with 800; fold it into the display weight */
b,strong,.sec-head h2,.page-head h1{font-weight:800}
.btn{font-weight:600}
/* 04 ── gold economy ------------------------------------------------------- */
/* Prices read as data, not as actions. */
.cell .v,.ctable td b,.price,.amount{color:var(--text)}
/* Only the first CTA in a row of buttons stays gold. */
.row .btn+.btn:not(.gold),
.ctable .btn+.btn:not(.gold){border-color:var(--line2)}
/* Tags and badges stop competing with buttons */
.chip,.tag,.badge,.pill{color:var(--muted)}
.tag.gold,.pill.gold{color:var(--gold)}
/* 05 ── type floor --------------------------------------------------------- */
.meta,.note,.small,small,.foot-legal p,.nl-small,
.ctable td small,.ctable th small,.sec-head .more,
.lede+.meta{font-size:max(12px,0.75rem);line-height:1.5}
.eyebrow{letter-spacing:.12em}
/* 06 ── risk warning ------------------------------------------------------- */
.foot-legal p:first-child,.foot-legal .risk{
font-size:13px;
line-height:1.6;
color:var(--muted);
}
.foot-legal p:first-child b{color:var(--text)}
/* 07 ── even card grids ---------------------------------------------------- */
.grid2,.grid3,.grid4{align-items:stretch}
/* keep the CTA pinned to the bottom when cards are still unequal */
.grid2>.card,.grid3>.card{display:flex;flex-direction:column}
.grid2>.card>.btn:last-child,.grid3>.card>.btn:last-child{margin-top:auto}
/* 08 ── section rhythm ----------------------------------------------------- */
.band{padding-block:clamp(40px,6vw,72px)}
.band.tight{padding-block:clamp(28px,4vw,48px)}
.sec-head{margin-block:0 clamp(16px,2.5vw,24px)}
.sec-head+.grid2,.sec-head+.grid3,.sec-head+.ctable-wrap{margin-top:0}
/* 09 ── account-size table (firm pages) ------------------------------------ */
/* On phones this table clipped its own values to a bare "$". Keep three
columns that answer the question: what size, what price, what risk. */
@media (max-width:767px){
.ctable-wrap:has(.sizes-table){overflow:visible}
.sizes-table th:nth-child(3),.sizes-table td:nth-child(3),
.sizes-table th:nth-child(4),.sizes-table td:nth-child(4),
.sizes-table th:nth-child(5),.sizes-table td:nth-child(5),
.sizes-table th:nth-child(7),.sizes-table td:nth-child(7),
.sizes-table th:nth-child(8),.sizes-table td:nth-child(8){display:none}
.sizes-table{width:100%;table-layout:fixed}
.sizes-table th:nth-child(1),.sizes-table td:nth-child(1){width:30%}
.sizes-table th:nth-child(2),.sizes-table td:nth-child(2){width:32%}
.sizes-table th:nth-child(6),.sizes-table td:nth-child(6){width:38%}
.sizes-table td,.sizes-table th{font-size:13px;white-space:normal}
}
/* 10 ── comparison cards on phones ---------------------------------------- */
/* js/fixes.js tags the low-value cells .c-opt; drop them below 768px so each
firm card is roughly half its old height. */
@media (max-width:767px){
.ctable td.c-opt,.ctable th.c-opt{display:none}
.ctable td{padding-block:6px}
.ctable td .btn{width:100%;justify-content:center}
}
/* 11 ── chip row clipping -------------------------------------------------- */
/* The sort row cut a chip in half with no hint. Fade the edge, snap the scroll. */
.scroll-x,.chips,.filters,.tabs-scroll{
overflow-x:auto;
scroll-snap-type:x proximity;
-webkit-overflow-scrolling:touch;
scrollbar-width:none;
mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 28px),transparent 100%);
-webkit-mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 28px),transparent 100%);
}
.scroll-x::-webkit-scrollbar,.chips::-webkit-scrollbar{display:none}
.scroll-x>*,.chips>*,.filters>*{scroll-snap-align:start;flex:0 0 auto}
/* 12 ── jump links --------------------------------------------------------- */
.rv-toc{gap:2px 10px}
.rv-toc a{padding:4px 10px;border:1px solid var(--line);border-radius:var(--r-pill);
font-size:12px;white-space:nowrap}
.rv-toc a:hover{border-color:var(--line2);background:var(--hover)}
/* 13 ── floating buttons --------------------------------------------------- */
/* On a 390px screen a 56px FAB covers 16% of the width and was landing on the
primary CTA. Retire ambient floats on phones; keep real dialogs. */
@media (max-width:767px){
[data-float="ambient"]{display:none!important}
}
/* 14 ── red means error, not sale ------------------------------------------ */
.pill.danger,.tag.danger,.ends-soon,.urgent{
color:var(--warn);
border-color:color-mix(in srgb,var(--warn) 45%,transparent);
background:color-mix(in srgb,var(--warn) 12%,transparent);
}
/* 15 ── cap the glass ------------------------------------------------------ */
/* backdrop-filter on every surface is a scroll tax; keep it for the two places
where it signals layering. */
.card,.panel,.box{backdrop-filter:none;-webkit-backdrop-filter:none}
.site-head,.search-overlay,.modal{backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
/* ── small safety nets ───────────────────────────────────────────────────── */
h1,h2,h3{text-wrap:balance}
p,li{text-wrap:pretty}
:where(a,button,input,select,summary):focus-visible{
outline:2px solid var(--gold);outline-offset:2px;border-radius:4px
}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
/* 16 ── LIGHT THEME, rebuilt -----------------------------------------------
Two problems compounded here.
(a) The original light theme is not "light", it is lavender: a #F3F5FD→#E6E3FA
body gradient with three saturated orbs (gold .42, blue .40, purple .36)
glowing behind translucent panels at .58 alpha. On white surfaces those
orbs don't glow, they stain: the page reads lilac and blotchy.
(b) My own regression. I darkened --gold to #8A5F00 to fix text contrast,
but --gold is ALSO the button fill (.btn.gold uses
linear-gradient(--gold2,--gold) with dark ink on top). So every CTA
turned muddy khaki. One token, two jobs, one broken.
Fix: neutral light base, orbs reduced to a hint, panels opaque, and gold
split into text-gold (dark) and fill-gold (bright). Dark mode untouched.
-------------------------------------------------------------------------- */
:root[data-theme=light]{
/* neutral ground instead of lavender */
--bg:#FFFFFF;
--bg2:#F6F7F9;
--grad-a:#FFFFFF;
--grad-b:#F5F6F8;
/* opaque surfaces so nothing bleeds through */
--panel:#FFFFFF;
--panel2:#FFFFFF;
--hover:#F1F3F6;
--line:rgba(16,24,40,.10);
--line2:rgba(16,24,40,.17);
--glass-strong:rgba(255,255,255,.94);
--head-bg:rgba(255,255,255,.90);
--input-bg:#FFFFFF;
/* text */
--text:#0F1320;
--muted:#475067;
--dim:#5E6779;
/* accent: dark enough to read, separate from the button fill */
--gold:#8A5F00;
--gold2:#7A5300;
--gold-ink:#8A5F00;
--gold-fill:#F0BE55;
--gold-fill-2:#FFD27A;
--gold-glow:rgba(240,190,85,.30);
--ok:#0C7048;
--warn:#8A5A00;
--bad:#C03434;
/* the orbs were the lilac wash: 0.42 / 0.40 / 0.36 -> a hint of warmth only */
--orb1:rgba(240,190,85,.10);
--orb2:rgba(18,26,45,.035);
--orb3:rgba(18,26,45,.025);
--shadow:0 6px 20px rgba(16,24,40,.07);
}
/* bright buttons again, with dark ink on top (10.6:1) */
:root[data-theme=light] .btn.gold{
background:linear-gradient(180deg,var(--gold-fill-2),var(--gold-fill));
border-color:transparent;
color:#231A05;
box-shadow:0 1px 0 #ffffff66 inset,0 6px 18px rgba(240,190,85,.35);
}
:root[data-theme=light] .btn.gold:hover{
background:linear-gradient(180deg,#FFE0A6,#FFD27A);
color:#231A05;
}
/* badges keep the dark gold for text, so the -40% chips stay readable */
:root[data-theme=light] .tag.gold,
:root[data-theme=light] .pill.gold,
:root[data-theme=light] .rbadge{
color:var(--gold-ink);
border-color:rgba(138,95,0,.35);
background:rgba(240,190,85,.18);
}
/* red still means failure, not "sale" */
:root[data-theme=light] .tag.red,
:root[data-theme=light] .pill.red,
:root[data-theme=light] [class*="ends-soon"],
:root[data-theme=light] [class*="urgent"]{
color:#7A3D00;
border-color:rgba(200,120,0,.35);
background:rgba(255,190,90,.22);
}
/* table zebra must be neutral, not tinted */
:root[data-theme=light] .ctable tbody tr:nth-child(even){background:#FAFBFC}
:root[data-theme=light] .ctable th{background:#F4F6F8}
/* 17 ── gold-as-fill, fixed everywhere -------------------------------------
--gold serves two roles in this codebase:
fill -> background:var(--gold) with color:#1a1406 ink on top
text -> color:var(--gold) for links, prices, eyebrows
On white, a fill gold dark enough to read as text (#8A5F00) produces
near-black-on-dark-brown. These are the nine fill sites, enumerated from
site.css and home.css rather than guessed at:
.skip .btn.gold .ftseg[aria-pressed] .ft-deal .ends-tag .ends-go
.hpair .pg-tag .ftsale .sw .progress i .score i:before
-------------------------------------------------------------------------- */
:root[data-theme=light] .skip,
:root[data-theme=light] .ftseg button[aria-pressed=true],
:root[data-theme=light] .ft-deal,
:root[data-theme=light] .ends-tag,
:root[data-theme=light] .hpair .pg-tag,
:root[data-theme=light] .ends-go{
background:var(--gold-fill);
border-color:var(--gold-fill);
color:#231A05;
}
/* decorative fills: these must read on white, not just contrast-check */
:root[data-theme=light] .progress i,
:root[data-theme=light] .score i:before,
:root[data-theme=light] .checks li:before,
:root[data-theme=light] .ftsale[aria-checked=true] .sw{
background:var(--gold-fill);
}
:root[data-theme=light] .nav a[aria-current=page]:after,
:root[data-theme=light] .hero h1 em:after{
background:var(--gold-fill);
}
/* the "Ends soon" bar itself: its tint was hardcoded pale gold */
:root[data-theme=light] .ends{
background:#FFF7E6;
border-color:rgba(200,150,40,.35);
}
/* 18 ── light theme: stop the glare ----------------------------------------
Pure #FFFFFF ground with #0F1320 text is 18.5:1. That is not "more
accessible", it is fatiguing: the eye's iris closes against the white and
thin strokes start to disappear. Print and screen guidance both land around
10-13:1 for long-form text, not 18.
So: warm off-white ground, panels stay white for separation, ink lifts off
pure near-black, and the gold glow stops flaring.
-------------------------------------------------------------------------- */
:root[data-theme=light]{
--bg:#F4F5F7; /* was #FFFFFF */
--bg2:#EDEFF2;
--grad-a:#F7F8FA;
--grad-b:#EFF1F4;
--panel:#FFFFFF; /* panels stay white -> separation, not glare */
--panel2:#FFFFFF;
--hover:#EEF0F4;
--text:#1D2433; /* ~13.6:1 on --bg: still AAA, far less harsh */
--muted:#4A5364;
--dim:#5C6577;
--line:rgba(20,28,45,.11);
--line2:rgba(20,28,45,.19);
--shadow:0 4px 14px rgba(20,28,45,.06);
/* the gold button was throwing a warm halo on every CTA */
--gold-glow:rgba(240,190,85,.16);
}
:root[data-theme=light] .btn.gold{
box-shadow:0 1px 0 #ffffff88 inset,0 2px 8px rgba(200,150,40,.18);
}
/* cards get a hairline instead of a shadow, so nothing glows */
:root[data-theme=light] .card,
:root[data-theme=light] .panel,
:root[data-theme=light] .box{
border-color:var(--line);
box-shadow:none;
}
/* 19 ── the type is genuinely too small ------------------------------------
Base body copy is 17px, but the working text -- table cells, labels, meta,
footnotes, jump links -- sits at 11-13px. At 1440px that reads as fine print.
Lift the working sizes one step and give body copy more air. Applies to both
themes; this is not a light-mode problem.
-------------------------------------------------------------------------- */
body{font-size:18px;line-height:1.62}
.ctable{font-size:16px}
.ctable td,.ctable th{font-size:15px;padding:12px 14px}
.ctable thead th{font-size:17px}
.meta,.note,.small,small,.foot-legal p,.nl-small,.ctable td small,
.ctable th small,.rv-toc a,.geolist li{font-size:13px;line-height:1.55}
.eyebrow{font-size:12.5px;letter-spacing:.1em}
.btn{font-size:15px}
.btn.sm{font-size:14px}
.tpl{font-size:13px}
.lede{font-size:18px}
.checks li{font-size:16px}
.deal-pill{font-size:13px}
.ends-tag{font-size:12.5px}
.foot-h{font-size:13px}
.foot-grid a{font-size:14px}
/* tables on phones: keep the lift without re-breaking the layout */
@media (max-width:767px){
.ctable td,.ctable th{font-size:14px}
body{font-size:17px}
}
/* 20 ── light theme: make the edges and the grey text earn their place ------
Previous pass went too far the other way. Two distinct problems:
(a) EDGES. --line at rgba(20,28,45,.11) is ~1.15:1 on white: technically a
border, optically nothing. Controls and table rules need roughly
1.6-2.0:1 to read as structure without looking like a wireframe.
(b) GREY TEXT. --muted at 7:1 passes AA, but at 13-15px regular weight it
still reads washed out next to white. Contrast ratio is not weight:
size, weight and hue all contribute. Darker ink + a touch of weight.
Also restores a real (but soft) shadow on cards so they sit above the page
instead of dissolving into it.
-------------------------------------------------------------------------- */
:root[data-theme=light]{
/* separators: quiet */
--line:rgba(20,28,45,.16);
/* interactive edges: clearly visible */
--line2:rgba(20,28,45,.34);
--rule:#D3D8E0; /* table + section rules ~1.5:1 */
--ctl:#BCC3CE; /* buttons, inputs ~1.9:1 */
--text:#151B28;
--muted:#39424F; /* was #4A5364 -> now ~10:1 */
--dim:#4A5363; /* was #5C6577 -> now ~8:1 */
}
/* tables: header band, zebra, visible rules, hover state */
:root[data-theme=light] .ctable th,
:root[data-theme=light] .ctable td{border-bottom:1px solid var(--rule)}
:root[data-theme=light] .ctable thead th{
background:#E9EDF2;
color:#0F1522;
font-weight:800;
border-bottom:2px solid #C4CAD4;
}
:root[data-theme=light] .ctable tbody tr:nth-child(even){background:#F7F9FB}
:root[data-theme=light] .ctable tbody tr:hover{background:#EEF2F7}
:root[data-theme=light] .ctable th[scope=row]{color:var(--muted);font-weight:600}
/* the table as a whole needs a frame */
:root[data-theme=light] .ctable-wrap{
border:1px solid var(--rule);
border-radius:12px;
background:#fff;
overflow:hidden;
}
:root[data-theme=light] .ctable-wrap:focus-visible{outline-color:var(--gold)}
/* cards: hairline + soft lift */
:root[data-theme=light] .card,
:root[data-theme=light] .panel,
:root[data-theme=light] .box,
:root[data-theme=light] .firm-card{
border:1px solid var(--rule);
box-shadow:0 1px 2px rgba(20,28,45,.06),0 6px 16px rgba(20,28,45,.05);
}
/* buttons: outlined ones were nearly invisible */
:root[data-theme=light] .btn:not(.gold){
border-color:var(--ctl);
color:#141A26;
background:#FFFFFF;
}
:root[data-theme=light] .btn:not(.gold):hover{
border-color:#8C95A3;
background:#F4F6F9;
}
:root[data-theme=light] .btn.gold{border:1px solid #D9A63F}
/* inputs, selects, toggles */
:root[data-theme=light] input,
:root[data-theme=light] select,
:root[data-theme=light] textarea{
border-color:var(--ctl);
background:#fff;
color:var(--text);
}
/* small labels: darker and a touch heavier */
:root[data-theme=light] .meta,
:root[data-theme=light] .note,
:root[data-theme=light] .small,
:root[data-theme=light] small,
:root[data-theme=light] .ctable td small,
:root[data-theme=light] .ctable th small{color:var(--muted);font-weight:500}
:root[data-theme=light] .tag,
:root[data-theme=light] .pill,
:root[data-theme=light] .mono-badge,
:root[data-theme=light] .deal-pill{border-color:var(--ctl)}
/* separation for inline chips and segmented controls */
:root[data-theme=light] .ftseg,
:root[data-theme=light] .seg{border:1px solid var(--rule);background:#F2F4F8}
:root[data-theme=light] .ftseg button[aria-pressed=true]{box-shadow:0 1px 3px rgba(20,28,45,.18)}
/* 21 ── one uniform step up, all hierarchy --------------------------------
The root cause is --hcap: clamp(26px, 3vw, 38px). Nearly every heading is
pinned to it (html .page-head h1, .firm-hero h1, .sec-head h2 and the
`calc(var(--hcap) - 4px)` sits beneath it), which throws away the much
larger clamps declared elsewhere. Raise the cap and the whole heading
hierarchy moves together.
Everything else is bumped one step so the body copy keeps pace with the
headings; scaling only the headings would make paragraphs look smaller,
not bigger.
-------------------------------------------------------------------------- */
:root{
--hcap:clamp(30px,3.5vw,44px); /* was clamp(26px,3vw,38px) */
}
/* body copy + reading text */
body{font-size:19px;line-height:1.6}
p,li{font-size:inherit}
.lede{font-size:19px;line-height:1.55}
.checks li{font-size:17px}
/* interface text */
.btn{font-size:16px}
.btn.sm{font-size:15px}
.nav a{font-size:17px}
.eyebrow{font-size:13px}
.meta,.note,.small,small,.foot-legal p,.nl-small,
.ctable td small,.ctable th small{font-size:14px}
.rv-toc a{font-size:14px}
.tpl{font-size:14px}
.foot-grid a{font-size:15px}
.foot-h{font-size:14px}
.toc h4,.toc .toc-h{font-size:14px}
/* data grids: the numbers are the product, they should not be the smallest */
.ctable{font-size:17px}
.ctable td,.ctable th{font-size:16px}
.ctable thead th{font-size:18px}
.cell .v{font-size:19px}
.cell .k{font-size:14px}
.mono-badge,.deal-pill{font-size:14px}
/* fixed-size h2/h3 that --hcap does not reach */
.prose h2{font-size:32px}
.prose h3{font-size:24px}
.guide-card h3{font-size:24px}
.hcard h3{font-size:28px}
.step h3{font-size:26px}
.demo h3{font-size:30px}
.deal-top h3{font-size:22px}
.entry h3{font-size:23px}
.note h3{font-size:21px}
.legal h2{font-size:30px}
.compare-head h2{font-size:28px}
.qcard h2{font-size:clamp(28px,3.2vw,36px)}
/* phones: one step, not two */
@media (max-width:767px){
:root{--hcap:clamp(28px,6.2vw,34px)}
body{font-size:18px}
.lede{font-size:18px}
.ctable td,.ctable th{font-size:15px}
.meta,.note,.small,small{font-size:13.5px}
}
/* 22 ── light mode: ink a shade darker -------------------------------------
Final tone step. --text was #151B28, --muted #39424F, --dim #4A5363.
Everything moves one notch darker; the ground is untouched, so the page
stops feeling washed without going back to glare.
-------------------------------------------------------------------------- */
:root[data-theme=light]{
--text:#10151F; /* was #151B28 */
--muted:#2F3745; /* was #39424F */
--dim:#3F4857; /* was #4A5363 */
}
:root[data-theme=light] .ctable th[scope=row]{color:var(--muted)}
:root[data-theme=light] .ctable thead th{color:#0A0F18}
/* 23 ── light mode: warmth and life, without the lavender wash -----------
The first light theme failed because colour came from three huge saturated
orbs at .40 alpha. This pass does the opposite: keep the neutral ground,
then add colour in small, deliberate places -- an ambient tint, a market
colour-coding, a gold rule under section headings, and hover states that
respond. Nothing here exceeds .12 alpha, so nothing can stain.
-------------------------------------------------------------------------- */
/* ambient depth: two very soft light sources, warm left, cool right */
:root[data-theme=light] body{
background:
radial-gradient(70vmax 50vmax at 8% -10%, rgba(240,190,85,.13), transparent 62%),
radial-gradient(60vmax 45vmax at 100% 8%, rgba(96,130,220,.09), transparent 60%),
linear-gradient(160deg,#F7F8FA 0%,#EFF1F4 100%) fixed,
#F4F5F7;
}
/* section headings get a short gold rule: a rhythm marker, not a decoration */
:root[data-theme=light] .sec-head h2{position:relative;padding-bottom:10px}
:root[data-theme=light] .sec-head h2:after{
content:"";position:absolute;left:0;bottom:0;width:44px;height:3px;border-radius:3px;
background:linear-gradient(90deg,#F0BE55,#D9A23C);
}
/* market colour-coding: futures and forex become distinguishable at a glance */
:root[data-theme=light] .mono-badge.Futures{
color:#1E4FBF;background:rgba(45,99,211,.10);border-color:rgba(45,99,211,.28);
}
:root[data-theme=light] .mono-badge.Forex{
color:#5B32B8;background:rgba(116,68,216,.10);border-color:rgba(116,68,216,.28);
}
/* table: a gold cap on the frame, tinted header, clearer zebra */
:root[data-theme=light] .ctable-wrap{
border-top:2px solid #E9C071;
box-shadow:0 1px 2px rgba(20,28,45,.05),0 10px 26px rgba(20,28,45,.05);
}
:root[data-theme=light] .ctable thead th{
background:linear-gradient(180deg,#EDF1F7,#E6EBF3);
}
/* ratings read as scored, not as another grey chip */
:root[data-theme=light] .rbadge{
background:rgba(17,134,87,.10);
border-color:rgba(17,134,87,.30);
color:#0B6B45;
}
:root[data-theme=light] .rbadge.hi{
background:rgba(17,134,87,.16);
border-color:rgba(17,134,87,.40);
}
/* cards answer the cursor */
:root[data-theme=light] .card{
transition:transform .18s var(--ease),box-shadow .18s var(--ease),border-color .18s var(--ease);
}
:root[data-theme=light] .card:hover{
transform:translateY(-2px);
border-color:#E3C486;
box-shadow:0 2px 4px rgba(20,28,45,.06),0 14px 30px rgba(20,28,45,.09);
}
/* links get a gold underline on hover instead of only colour */
:root[data-theme=light] a:hover{text-decoration-color:#D9A23C}
/* the deal / ends bar warms up a touch so it feels like a promotion */
:root[data-theme=light] .ends{
background:linear-gradient(90deg,#FFF6E3,#FFFBF3);
border-color:#EBCB92;
}
/* gold buttons: a little sheen so they read as pressable, not painted on */
:root[data-theme=light] .btn.gold{
background:linear-gradient(180deg,#FFD98E 0%,#F0BE55 55%,#E8B146 100%);
box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 2px 6px rgba(200,150,40,.22);
}
@media (prefers-reduced-motion:reduce){
:root[data-theme=light] .card:hover{transform:none}
}
/* 24 ── light mode: black and gold only ------------------------------------
Coloured text is gone. In the source, --ok (green), --warn and --bad (red)
are each painted as *text* dozens of times (17 / 10 / 15), and the market
tokens --fut/--fx add blue and purple labels. All of it collapses into two
families:
ink -> black (content, labels, values, navigation)
gold -> #8A5F00 (accent: links in prose, eyebrows, markers)
Semantic colour survives only where it is not type -- icon fills, bars and
bars inside charts keep enough difference to read, but no green or red word
remains on the page.
-------------------------------------------------------------------------- */
:root[data-theme=light]{
/* ink */
--text:#0B0B0C;
--muted:#262626;
--dim:#3A3A3A;
/* the semantic tokens are text colours here, so they become ink + gold */
--ok:#0B0B0C;
--warn:#8A5F00;
--bad:#6E4A00; /* deeper gold, so a loss still reads as different */
--warn-ink:#6E4A00;
--fut:#0B0B0C;
--fx:#8A5F00;
/* accent */
--gold:#8A5F00;
--gold2:#7A5300;
--gold-ink:#8A5F00;
}
/* market labels: one black, one gold -- no blue, no purple */
:root[data-theme=light] .mono-badge.Futures{
color:#0B0B0C;
background:rgba(240,190,85,.16);
border-color:#DCC08A;
}
:root[data-theme=light] .mono-badge.Forex{
color:#8A5F00;
background:rgba(240,190,85,.10);
border-color:#E2CBA0;
}
/* ratings: gold, not green */
:root[data-theme=light] .rbadge,
:root[data-theme=light] .rbadge.hi{
color:#0B0B0C;
background:rgba(240,190,85,.20);
border-color:#D9B978;
}
/* accent text: eyebrows and in-prose links carry the gold */
:root[data-theme=light] .eyebrow{color:#8A5F00}
:root[data-theme=light] .prose a,
:root[data-theme=light] .legal a{color:#8A5F00;text-decoration-color:#D9A23C}
:root[data-theme=light] .more,
:root[data-theme=light] .sec-head .more{color:#8A5F00}
/* navigation and footer stay ink: gold on every link would flatten hierarchy */
:root[data-theme=light] .nav a,
:root[data-theme=light] .foot-grid a{color:var(--text)}
:root[data-theme=light] .nav a:hover,
:root[data-theme=light] .foot-grid a:hover{color:#8A5F00}
/* anything still tinted keeps its background but must not tint the text */
:root[data-theme=light] .tag,
:root[data-theme=light] .pill,
:root[data-theme=light] .deal-pill,
:root[data-theme=light] .geo-chip{color:#8A5F00;border-color:#D9B978}
/* 25 ── light mode: slate panels for section rhythm ------------------------
Everything sat on one continuous grey, so sections ran together. The site
already alternates `.band` / `.band.alt`, and `.band.alt` plus the footer
read their background from --bg2 -- so one token change turns the
alternating bands into light slate without touching layout.
Slate is a cool blue-grey, which is the one cool note in an otherwise
warm-neutral page. It separates without competing with gold.
-------------------------------------------------------------------------- */
:root[data-theme=light]{
--bg2:#E6ECF4; /* the slate */
--slate:#E6ECF4;
--slate-2:#DCE4EE;
--slate-line:#D1DAE5;
}
/* alternating bands + footer */
:root[data-theme=light] .band.alt{
background:var(--slate);
border-block-color:var(--slate-line);
}
:root[data-theme=light] .site-foot{
background:var(--slate);
border-top-color:var(--slate-line);
}
/* cards inside slate bands stay white so they lift off it */
:root[data-theme=light] .band.alt .card{background:#FFFFFF}
/* the comparison table as a slate surface */
:root[data-theme=light] .ctable-wrap{background:#F4F7FB}
:root[data-theme=light] .ctable thead th{
background:linear-gradient(180deg,#E1E8F2,#D8E1EC);
}
:root[data-theme=light] .ctable tbody tr:nth-child(even){background:#EDF2F8}
:root[data-theme=light] .ctable tbody tr:hover{background:#E2EAF3}
/* small slate surfaces: jump chips, segmented controls, sidebar badges */
:root[data-theme=light] .rv-toc a{background:#F2F6FA;border-color:var(--slate-line)}
:root[data-theme=light] .ftseg,
:root[data-theme=light] .seg{background:#EEF3F9;border-color:var(--slate-line)}
:root[data-theme=light] .mono-badge{background:#EFF4FA}
/* keep gold readable on slate (5.0:1) -- nudge it a shade deeper */
:root[data-theme=light] .band.alt .eyebrow,
:root[data-theme=light] .site-foot a:hover{color:#7A5300}
/* 26 ── light mode: ivory / navy / gold, serif display ---------------------
Direction change. The previous light pass was a neutral SaaS grey; the
reference is an executive-wealth palette: warm ivory ground, deep navy
feature bands, gold accents, and a serif display face.
Method: the section bands carry their own copy of the text tokens, so a
dark band flips every descendant to cream ink without touching a single
component rule. Cards inside inherit --panel, which goes to a slightly
lighter navy -- the same layering as the reference.
-------------------------------------------------------------------------- */
:root[data-theme=light]{
/* ivory ground */
--bg:#F4F1E9;
--bg2:#EAE5D9;
--grad-a:#F7F4ED;
--grad-b:#EFEADD;
--panel:#FFFDF8;
--panel2:#FFFFFF;
--hover:#F3EFE6;
/* ink: deep navy-black, not grey */
--text:#0E1622;
--muted:#39424F;
--dim:#4C5663;
/* gold */
--gold:#8A5F00;
--gold2:#6F4C00;
--gold-ink:#8A5F00;
--gold-fill:#C9A227;
--gold-fill-2:#E2C05E;
--gold-glow:rgba(201,162,39,.20);
/* warm hairlines instead of cool grey */
--rule:#DBD3C2;
--ctl:#C6BCA7;
--line:rgba(30,32,26,.14);
--line2:rgba(30,32,26,.28);
}
/* ── dark navy feature bands ─────────────────────────────────────────────── */
:root[data-theme=light] .band.alt{
background:linear-gradient(180deg,#0C1726 0%,#0A121D 100%);
border-block:0;
--text:#F7F3EA;
--muted:#C6CBD3;
--dim:#AEB4BD;
--panel:#13202F;
--panel2:#17263A;
--hover:#1D2C3F;
--line:rgba(255,255,255,.14);
--line2:rgba(255,255,255,.26);
--rule:rgba(255,255,255,.16);
--ctl:rgba(255,255,255,.28);
--gold:#D9B04A;
--gold-ink:#D9B04A;
--gold-fill:#C9A227;
--gold-fill-2:#E2C05E;
color:var(--text);
}
/* cards on navy: no white flash, same warm border language */
:root[data-theme=light] .band.alt .card,
:root[data-theme=light] .band.alt .panel,
:root[data-theme=light] .band.alt .box{
background:var(--panel);
border-color:rgba(201,162,39,.22);
box-shadow:0 2px 10px rgba(0,0,0,.25);
}
:root[data-theme=light] .band.alt .card:hover{
border-color:rgba(201,162,39,.45);
box-shadow:0 4px 18px rgba(0,0,0,.35);
}
/* ── footer bookends the page in navy ────────────────────────────────────── */
:root[data-theme=light] .site-foot{
background:linear-gradient(180deg,#0C1726,#08101A);
border-top:1px solid rgba(201,162,39,.25);
--text:#F7F3EA;
--muted:#C6CBD3;
--dim:#AEB4BD;
--panel:#0F1A27;
--line:rgba(255,255,255,.12);
--gold:#D9B04A;
--gold-ink:#D9B04A;
color:var(--text);
}
:root[data-theme=light] .site-foot a{color:#D7DBE1}
:root[data-theme=light] .site-foot a:hover{color:#D9B04A}
/* ── gold buttons: metallic, not flat ────────────────────────────────────── */
:root[data-theme=light] .btn.gold{
background:linear-gradient(180deg,#E2C05E 0%,#C9A227 55%,#B08E1E 100%);
color:#1A1405;
border:1px solid #B08E1E;
box-shadow:0 1px 0 rgba(255,255,255,.45) inset,0 2px 8px rgba(160,120,20,.28);
}
:root[data-theme=light] .btn.gold:hover{
background:linear-gradient(180deg,#EBCE74 0%,#D4AC2E 55%,#BA961F 100%);
}
/* 27 ── table CTAs were 14 giant gold slabs ------------------------------
With one button per row (the dedupe fix) each surviving button carries the
whole row's visual weight -- on compare.html that is fourteen full-height
gold blocks down the right edge. They stay gold, but shrink to a control.
-------------------------------------------------------------------------- */
:root[data-theme=light] .ctable .btn{
padding:7px 14px;
font-size:14px;
min-height:0;
border-radius:8px;
box-shadow:none;
}
:root[data-theme=light] .ctable .btn.gold{
background:linear-gradient(180deg,#E2C05E,#C9A227);
box-shadow:0 1px 0 rgba(255,255,255,.4) inset;
}
:root[data-theme=light] .ctable td{padding-block:12px}
/* 28 ── the compare list is not a
--------------------------------
Its rows are div.cell inside a row wrapper with div.acts holding the CTA,
so the `.ctable .btn` sizing in section 27 never matched and the fourteen
buttons stayed full height. Target the real container.
-------------------------------------------------------------------------- */
:root[data-theme=light] .acts .btn,
:root[data-theme=light] .row .acts .btn{
padding:7px 14px;
font-size:14px;
min-height:0;
border-radius:8px;
}
:root[data-theme=light] .acts{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
:root[data-theme=light] .acts .cmp{font-size:13px;color:var(--muted)}
/* 29 ── table headers were truncating --------------------------------
At 16px the column labels no longer fit, so "COST TO FUNDED" clipped to
"COST TO FUND" and the DEAL column pushed into the card edge. Let headers
wrap, tighten the cells, and stop the table fighting its container.
-------------------------------------------------------------------------- */
:root[data-theme=light] .ctable thead th{
white-space:normal;
line-height:1.15;
font-size:13px;
letter-spacing:.04em;
text-transform:uppercase;
vertical-align:bottom;
}
:root[data-theme=light] .ctable td{font-size:15px}
:root[data-theme=light] .ctable th,
:root[data-theme=light] .ctable td{padding-inline:10px}
:root[data-theme=light] .ctable{width:100%;table-layout:auto}
:root[data-theme=light] .ctable .tag,
:root[data-theme=light] .tag{font-size:11px;padding:2px 6px}
/* 30 ── navy pulled back to the footer only ------------------------------
Live capture showed the alternating bands + footer stacking into one dark
mass covering the bottom third of the homepage (FAQ, newsletter, footer).
The reference used dark as a single contained moment, not a region. So the
bands return to warm ivory and navy survives only as the footer anchor.
-------------------------------------------------------------------------- */
:root[data-theme=light] .band.alt{
background:#F7F4ED;
border-block:1px solid #E4DCCC;
--text:#0E1622;
--muted:#39424F;
--dim:#4C5663;
--panel:#FFFDF8;
--panel2:#FFFFFF;
--hover:#F3EFE6;
--line:rgba(30,32,26,.14);
--line2:rgba(30,32,26,.28);
--rule:#DBD3C2;
--ctl:#C6BCA7;
--gold:#8A5F00;
--gold-ink:#8A5F00;
color:var(--text);
}
:root[data-theme=light] .band.alt .card,
:root[data-theme=light] .band.alt .panel,
:root[data-theme=light] .band.alt .box{
background:#FFFFFF;
border-color:var(--rule);
box-shadow:0 1px 2px rgba(20,28,45,.06);
}
:root[data-theme=light] .band.alt .cell .v,
:root[data-theme=light] .band.alt .amount{color:var(--text)}
/* table: keep the last column inside the card */
:root[data-theme=light] .ctable .btn{padding:6px 10px;font-size:13px}
:root[data-theme=light] .ctable .tag{font-size:10px;padding:2px 5px}
:root[data-theme=light] .ctable th:last-child,
:root[data-theme=light] .ctable td:last-child{padding-right:14px}
:root[data-theme=light] .ctable-wrap{overflow-x:auto;padding-right:2px}
/* 31 ── the homepage table is `.ft`, not `.ctable` -----------------------
Every table rule so far targeted `.ctable` (the firm pages), so the homepage
grid kept truncating headers and crowding the deal column.
-------------------------------------------------------------------------- */
:root[data-theme=light] .ft{font-size:15px}
:root[data-theme=light] .ft thead th,
:root[data-theme=light] .ft th{
white-space:normal;
line-height:1.15;
font-size:12.5px;
letter-spacing:.04em;
text-transform:uppercase;
vertical-align:bottom;
padding:10px;
}
:root[data-theme=light] .ft td{padding:12px 10px;font-size:15px}
:root[data-theme=light] .ft thead th:last-child,
:root[data-theme=light] .ft td:last-child{padding-right:16px}
:root[data-theme=light] .ft .btn{padding:6px 10px;font-size:13px;min-height:0}
:root[data-theme=light] .ft .tag{font-size:10px;padding:2px 5px}
/* 32 ── hero column voids ------------------------------------------------
.hpair is a 2-col grid and its children carry height:100%, so the short
right-hand cards stretched to match the tall table card and the slack
showed up as empty space inside them.
-------------------------------------------------------------------------- */
:root[data-theme=light] .hpair{align-items:start}
:root[data-theme=light] .hpair>*{height:auto}
:root[data-theme=light] .hpair>.card{align-self:start}
/* 33 ── guide thumbnails and the hero column ------------------------------
The guide images read washed out in the light capture. No filter/opacity
rule exists for them in the sources, so the likely cause is the scroll
reveal sitting mid-transition when the page is captured (it fades 0 -> 1
over .8s). Force the end state, and drop any overlay painted on top.
The hero right-hand card pushed its stat row to the bottom with an auto
margin, which is what opened the gap under the heading.
-------------------------------------------------------------------------- */
:root[data-theme=light] .reveal,
:root[data-theme=light] .reveal.pre{opacity:1!important;transform:none!important}
:root[data-theme=light] .guide-card .img::after,
:root[data-theme=light] .guide-card .img::before{display:none}
:root[data-theme=light] .guide-card img{opacity:1;filter:none}
:root[data-theme=light] .hpair .card{justify-content:flex-start}
:root[data-theme=light] .hpair .card>*{margin-top:0}
:root[data-theme=light] .hpair .card .row,
:root[data-theme=light] .hpair .card .rrow{margin-top:0}
/* 34 ── force the two stubborn ones --------------------------------------
Neither the overlay kill nor the flex-start survived, which means the wash
and the gap come from something with higher specificity than my selectors.
Escalate with !important and neutralise every mechanism that could produce
either effect.
-------------------------------------------------------------------------- */
/* guide thumbnails: no pseudo overlay, no filter, no blend, full opacity */
:root[data-theme=light] .guide-card .img,
:root[data-theme=light] .guide-card .img img,
:root[data-theme=light] .guide-card img{
opacity:1!important;
filter:none!important;
mix-blend-mode:normal!important;
-webkit-mask-image:none!important;
mask-image:none!important;
}
:root[data-theme=light] .guide-card .img::before,
:root[data-theme=light] .guide-card .img::after,
:root[data-theme=light] .guide-card::before,
:root[data-theme=light] .guide-card::after{content:none!important;display:none!important}
/* hero column: kill every auto-margin and stretch that opens the gap */
:root[data-theme=light] .hpair{align-items:start!important}
:root[data-theme=light] .hpair>*,
:root[data-theme=light] .hpair .card{height:auto!important;justify-content:flex-start!important}
:root[data-theme=light] .hpair .card>*{margin-top:0!important;margin-bottom:0!important}
/* review 28 Oct 2026 ------------------------------------------------ */
/* long source links in firm-page meta lines must wrap on phones */
.meta a,.meta{overflow-wrap:anywhere}
/* deals freshness note */
.freshness{margin:14px 0 0;padding:10px 14px;border:1px solid var(--line,rgba(255,255,255,.12));border-radius:10px;font-size:.92rem;color:var(--muted);max-width:68ch}
.freshness.is-stale{border-color:var(--warn);color:var(--text)}
/* Centred page headers (30 Oct 2026). Text only: the blocks below each header are unchanged.
Firm reviews (#firmHead) keep their left-aligned logo and rating layout. */
.page-head .wrap:not(#firmHead){align-items:center;text-align:center}
.page-head .wrap:not(#firmHead)>.crumbs,.gx-head .crumbs{justify-content:center}
.page-head .wrap:not(#firmHead)>.lede,.page-head .wrap:not(#firmHead)>p{max-width:680px;margin-inline:auto}
.page-head .article-hero{align-self:stretch}
.gx-head>h1,.gx-head>.lede{text-align:center;margin-inline:auto}
.gx-head>.lede{max-width:680px}
.ht .wrap>h1,.ht .wrap>p{text-align:center;margin-inline:auto}
.ht .wrap>p{max-width:680px}
@media (max-width:600px){.ht .wrap>p{margin-bottom:18px}}
/* Option C: framed panel behind page headers (30 Oct 2026, approved). Guide pages keep the
flat header because their cover image sits inside the same wrap. */
.page-head{padding-block:40px 24px}
.page-head .wrap:not(#firmHead):not(:has(.article-hero)){max-width:1000px;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.012));border:1px solid var(--line);border-radius:28px;padding:46px 36px 42px;box-shadow:0 30px 80px -40px rgba(0,0,0,.7)}
@media (max-width:600px){.page-head .wrap:not(#firmHead):not(:has(.article-hero)){margin-inline:12px;padding:30px 18px;border-radius:20px}}
.ht-panel,.gx-panel{max-width:1000px;margin-inline:auto;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.012));border:1px solid var(--line);border-radius:28px;padding:46px 36px 42px;box-shadow:0 30px 80px -40px rgba(0,0,0,.7)}
.ht-panel{order:-1}
.ht-panel>h1,.ht-panel>p,.gx-panel>h1,.gx-panel>.lede{text-align:center;margin-inline:auto}
.ht-panel>p,.gx-panel>.lede{max-width:680px}
.gx-panel .crumbs{justify-content:center}
@media (max-width:600px){.ht-panel,.gx-panel{margin-inline:12px;padding:30px 18px;border-radius:20px}}
/* Lit panels (30 Oct 2026, approved): amber glow, brighter top edge. */
.page-head .wrap:not(#firmHead):not(:has(.article-hero)),.ht-panel,.gx-panel{background:radial-gradient(120% 90% at 0% 0%,rgba(217,176,74,.16),rgba(217,176,74,0) 55%),linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.015));border:1px solid rgba(255,255,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 30px 80px -40px rgba(0,0,0,.75)}
.ht-panel .eyebrow{display:block;margin:0 0 14px;color:var(--gold);font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;text-align:center}
:root[data-theme=light] .page-head .wrap:not(#firmHead):not(:has(.article-hero)),:root[data-theme=light] .ht-panel,:root[data-theme=light] .gx-panel{background:radial-gradient(120% 90% at 0% 0%,rgba(201,162,39,.10),rgba(201,162,39,0) 55%),#FFFDF8;border-color:var(--rule);box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 24px 60px -36px rgba(60,45,10,.25)}
/* Stronger lit panel (30 Oct 2026, round 2). */
.page-head .wrap:not(#firmHead):not(:has(.article-hero)),.ht-panel,.gx-panel{background:radial-gradient(90% 120% at 0% 0%,rgba(217,176,74,.30),rgba(217,176,74,0) 60%),radial-gradient(70% 100% at 100% 100%,rgba(217,176,74,.08),rgba(217,176,74,0) 60%),linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.015))}
.ht-panel>h1{font-size:clamp(32px,4.2vw,52px);line-height:1.12}
/* Hero v5 (30 Oct 2026, approved): left copy, right fee table. Verified prices only. */
.hv5{display:grid;grid-template-columns:1fr 1.1fr;gap:48px;align-items:center;padding:40px 0 24px;max-width:1200px;margin:0 auto}
.hv5-eyebrow{display:block;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);font-weight:700;margin:0 0 14px}
.hv5 h1{text-align:left;margin:0 0 16px;font-size:clamp(34px,4vw,50px);line-height:1.08;letter-spacing:-.02em;max-width:none}
.hv5 p{text-align:left;max-width:460px;margin:0 0 26px;color:var(--muted)}
.hv5-cta{display:flex;gap:10px;flex-wrap:wrap}
.hv5-cta a{padding:13px 20px;border-radius:10px;font-weight:600;font-size:15px;text-decoration:none;border:1px solid var(--line)}
.hv5-cta a:first-child{background:var(--gold);color:#17130a;border-color:var(--gold)}
.hv5-win{border:1px solid var(--line);border-radius:14px;padding:18px 20px;background:rgba(255,255,255,.02)}
.hv5-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;flex-wrap:wrap;gap:6px}
.hv5-head b{font-size:14px}.hv5-head span{font-size:12px;color:var(--muted)}
.hv5-row{display:grid;grid-template-columns:1.5fr 1.3fr 1.2fr;gap:12px;align-items:center;padding:14px 0;border-top:1px solid var(--line);color:inherit;text-decoration:none;font-size:14.5px}
.hv5-row small{display:block;color:var(--muted);font-size:12px;font-weight:400}
.hv5-row b{font-weight:600}
.hv5-h{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);border-top:0;padding-top:6px}
.hv5-foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px;padding-top:14px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted)}
.hv5-foot a{color:inherit}
@media (max-width:900px){.hv5{grid-template-columns:1fr;gap:28px;padding:28px 16px 12px}}
/* Hero v5 chart (31 Oct 2026): cost bars replace the table. Bars animate in once when scrolled into view. */
.hvc{display:grid;gap:18px;padding:8px 0 4px}
.hvc-row{display:grid;grid-template-columns:1.1fr 2fr .9fr;gap:14px;align-items:center}
.hvc-lbl b{display:block;font-size:14.5px;font-weight:600}
.hvc-lbl small{display:block;color:var(--muted);font-size:12px}
.hvc-track{position:relative;height:30px}
.hvc-bar{position:absolute;left:0;top:0;bottom:0;width:100%;display:flex;border-radius:6px;overflow:hidden;background:rgba(255,255,255,.03)}
.hvc-m,.hvc-f{display:block;height:100%;width:0;transition:width 1.1s cubic-bezier(.2,.7,.2,1)}
.hvc-m{background:var(--gold)}
.hvc-f{background:repeating-linear-gradient(135deg,rgba(226,181,70,.55) 0 6px,rgba(226,181,70,.18) 6px 12px);transition-delay:.25s}
.hvc-ghost{position:absolute;left:0;top:0;bottom:0;width:0;border:1px dashed var(--line2,rgba(255,255,255,.3));border-radius:6px;transition:width 1.1s cubic-bezier(.2,.7,.2,1) .1s}
.hvc.on .hvc-m{width:var(--w)}
.hvc.on .hvc-f{width:var(--w)}
.hvc.on .hvc-ghost{width:var(--w)}
.hvc-val{font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}
.hvc-val small{display:block;font-weight:400;color:var(--muted);font-size:12px}
.hvc-legend{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin:14px 0 0}
.hvc-sw{display:inline-block;width:12px;height:8px;border-radius:2px;margin-right:6px;vertical-align:middle}
.hvc-sw-m{background:var(--gold)}
.hvc-sw-f{background:repeating-linear-gradient(135deg,rgba(226,181,70,.55) 0 3px,rgba(226,181,70,.18) 3px 6px)}
.hvc-sw-g{border:1px dashed rgba(255,255,255,.4)}
@media (max-width:600px){.hvc-row{grid-template-columns:1fr;gap:6px}.hvc-val{margin-bottom:6px}}
@media (prefers-reduced-motion:reduce){.hvc-m,.hvc-f,.hvc-ghost{transition:none}}
/* Hero background motion (31 Oct 2026): decorative fee tokens drifting at the top and bottom edges. Figures are the verified 28 Oct set. */
.ht{position:relative;overflow:hidden;isolation:isolate}
.ht>*:not(.hv5-bg){position:relative;z-index:1}
.hv5-bg{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.2;overflow:hidden}
.hv5-lane{position:absolute;left:0;display:flex;white-space:nowrap;font-family:ui-monospace,Consolas,monospace;font-size:clamp(16px,2.2vw,26px);font-weight:600;color:var(--gold);letter-spacing:.02em;animation:hv5-scroll 46s linear infinite;will-change:transform}
.hv5-lane.l1{top:4%}
.hv5-lane.l2{top:auto;bottom:14%;animation-duration:58s}
.hv5-lane.l3{top:auto;bottom:2%;animation-duration:38s}
.hv5-lane.r{animation-direction:reverse}
.hv5-set{display:flex;flex:none;gap:44px;padding-right:44px}
.hv5-set span{position:relative}
.hv5-set span:nth-child(3n+1){color:var(--text)}
.hv5-set span:not(:first-child):before{content:"";position:absolute;left:-22px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--gold)}
@keyframes hv5-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.hv5-lane{animation:none}}
/* Hero v7 (31 Oct 2026, approved): copy left, three fee cards orbiting a central "checked" card. Verified 28 Oct figures only. */
.hv7{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;padding:48px 0 40px;max-width:1200px;margin:0 auto}
.hv7-copy h1{text-align:left;margin:0 0 18px;font-size:clamp(38px,4.6vw,56px);line-height:1.04;letter-spacing:-.03em;max-width:none}
.hv7-copy h1 em{font-style:normal;color:var(--gold)}
.hv7-copy p{text-align:left;max-width:480px;margin:0 0 28px;color:var(--muted);font-size:17px;line-height:1.6}
.hv7-stage{position:relative;height:500px}
.hv7-ring{position:absolute;left:50%;top:50%;width:440px;height:440px;margin:-220px 0 0 -220px;border:1px dashed var(--line2,rgba(255,255,255,.16));border-radius:50%}
.hv7-slot{position:absolute;left:50%;top:50%;width:0;height:0}
.hv7-slot.s1{transform:rotate(-90deg) translateX(220px) rotate(90deg)}
.hv7-slot.s2{transform:rotate(30deg) translateX(220px) rotate(-30deg)}
.hv7-slot.s3{transform:rotate(150deg) translateX(220px) rotate(-150deg)}
.hv7-card{position:absolute;width:230px;margin:-42px 0 0 -115px;background:rgba(20,24,33,.82);border:1px solid var(--line2,rgba(255,255,255,.16));border-radius:14px;padding:13px 15px;box-shadow:0 20px 40px -20px rgba(0,0,0,.8);font-size:13px}
.hv7-card small{display:block;color:var(--muted);font-size:11.5px}
.hv7-card small.i{display:inline}
.hv7-card b{font-size:17px;font-variant-numeric:tabular-nums}
.hv7-core{position:absolute;left:50%;top:50%;width:230px;margin:-62px 0 0 -115px;background:rgba(20,24,33,.82);border:1px solid rgba(224,180,78,.45);border-radius:18px;padding:18px 20px;text-align:center;box-shadow:0 0 60px -10px rgba(224,180,78,.3)}
.hv7-core small{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);font-weight:700;margin-bottom:8px}
.hv7-core p{margin:0;font-size:14px;line-height:1.5}
@keyframes hv7-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@media (max-width:900px){.hv7{order:-1;grid-template-columns:1fr;gap:28px;padding:28px 16px 12px}.hv7-stage{height:440px}.hv7-ring{width:340px;height:340px;margin:-170px 0 0 -170px}.hv7-slot.s1{transform:rotate(-90deg) translateX(170px) rotate(90deg)}.hv7-slot.s2{transform:rotate(30deg) translateX(170px) rotate(-30deg)}.hv7-slot.s3{transform:rotate(150deg) translateX(170px) rotate(-150deg)}}
/* Hero v7, phone: the orbit becomes a plain stack of cards. */
@media (max-width:600px){
.hv7-stage{height:auto;display:flex;flex-direction:column;gap:12px}
.hv7-ring{display:contents}
.hv7-slot,.hv7-slot.s1,.hv7-slot.s2,.hv7-slot.s3{position:static;width:auto;height:auto;transform:none}
.hv7-card{position:static;width:auto;margin:0;animation:none;padding:12px 14px}
.hv7-core{position:static;width:auto;margin:0;padding:14px 16px;text-align:left}
.hv7-core small{margin-bottom:6px}
}
/* Inner-page headers (31 Oct 2026, approved): plain left-aligned header, no panel or glow. Matches the homepage hero. Guide pages unchanged. */
.page-head{padding-block:48px 28px}
.page-head .wrap:not(#firmHead):not(:has(.article-hero)){max-width:1200px;background:none;border:0;border-radius:0;box-shadow:none;padding:0;text-align:left;align-items:flex-start}
.page-head .wrap:not(#firmHead):not(:has(.article-hero))>.crumbs,.gx-panel .crumbs{justify-content:flex-start}
.page-head .wrap:not(#firmHead):not(:has(.article-hero))>.lede,.page-head .wrap:not(#firmHead):not(:has(.article-hero))>p{max-width:640px;margin-inline:0;text-align:left}
.page-head .wrap:not(#firmHead):not(:has(.article-hero)) h1{text-align:left;max-width:none;margin-inline:0}
.gx-panel{max-width:none;background:none;border:0;border-radius:0;box-shadow:none;padding:0;text-align:left}
.gx-panel>h1,.gx-panel>.lede{text-align:left;margin-inline:0;max-width:640px}
@media (max-width:600px){.page-head .wrap:not(#firmHead):not(:has(.article-hero)){margin-inline:16px;padding:0}}
/* Hero v8 (31 Oct 2026, approved): auto-sliding card stack replaces the orbit. Pauses on hover and focus. Verified 28 Oct figures only. */
.hv8{position:relative;height:430px;perspective:1100px;margin-top:20px}
.hv8-card{position:absolute;left:50%;top:50%;width:260px;height:380px;margin:-190px 0 0 -130px;border-radius:18px;background:linear-gradient(180deg,#1b1f2a,#11141c);border:1px solid rgba(255,255,255,.18);padding:18px;box-shadow:0 30px 60px -25px rgba(0,0,0,.9);transition:transform .6s cubic-bezier(.2,.7,.2,1),opacity .6s,filter .6s;text-align:left;color:var(--text)}
.hv8-card h4{margin:12px 0 2px;font-size:16px}
.hv8-card small{display:block;color:var(--muted);font-size:12px}
.hv8-mark{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--gold2,#f6d27a),var(--gold,#e0b44e));display:grid;place-items:center;color:#17130a;font-weight:800}
.hv8-price{font-size:30px;font-weight:750;letter-spacing:-.02em;margin:14px 0 2px;font-variant-numeric:tabular-nums}
.hv8-price span{font-size:13px;color:var(--muted);font-weight:500;letter-spacing:0}
.hv8-card ul{list-style:none;padding:0;margin:14px 0 0;font-size:13px;color:var(--muted)}
.hv8-card li{padding:7px 0;border-top:1px solid var(--line,rgba(255,255,255,.1));display:flex;justify-content:space-between}
.hv8-card li b{color:var(--text);font-weight:600}
.hv8-go{position:absolute;left:18px;right:18px;bottom:18px;text-align:center;padding:11px;border-radius:10px;background:var(--gold,#e0b44e);color:#17130a;font-weight:700;font-size:14px}
.hv8-card.s0{transform:translateX(0) translateZ(0) rotateY(0);opacity:1;z-index:5;border-color:rgba(224,180,78,.6);box-shadow:0 40px 80px -25px rgba(224,180,78,.25),0 30px 60px -25px rgba(0,0,0,.9)}
.hv8-card.s1{transform:translateX(165px) translateZ(-120px) rotateY(-28deg);opacity:.55;z-index:3;filter:brightness(.8)}
.hv8-card.s2{transform:translateX(-165px) translateZ(-120px) rotateY(28deg);opacity:.55;z-index:3;filter:brightness(.8)}
.hv8-card.hid{transform:translateX(0) translateZ(-260px) scale(.9);opacity:0;z-index:1}
.hv8-dots{position:absolute;left:0;right:0;bottom:-18px;display:flex;justify-content:center;gap:8px}
.hv8-dots i{width:7px;height:7px;border-radius:50%;background:#3a4150;display:block}
.hv8-dots i.on{background:var(--gold,#e0b44e);width:20px;border-radius:4px}
@media (max-width:600px){
.hv8{height:440px;margin-top:0}
.hv8-card{min-height:380px}
.hv8-card{width:225px;margin:-200px 0 0 -112px;height:auto;padding:16px}
.hv8-card ul{margin-bottom:0}
.hv8-card.s1{transform:translateX(120px) translateZ(-100px) rotateY(-24deg)}
.hv8-card.s2{transform:translateX(-120px) translateZ(-100px) rotateY(24deg)}
}
@media (max-width:600px){.hv8-go{position:static;display:block;margin-top:16px}}
@media (prefers-reduced-motion:reduce){.hv8-card{transition:none}}
/* v8 fixes (31 Oct 2026): clickable Visit buttons, firm logos, side cards click to bring forward. */
.hv8-logo{width:40px;height:40px;object-fit:contain;border-radius:10px;background:#fff;padding:4px;display:block}
.hv8-card.hid{pointer-events:none}
.hv8-card:not(.s0){cursor:pointer}
.hv8-go{display:block;text-decoration:none;cursor:pointer;z-index:2}
.hv8-card.s0 .hv8-go{pointer-events:auto}
.hv8-go,.hv8-go:visited,.hv8-go:hover,.hv8-go:focus{color:#17130a}
/* Firms, side by side: firms as columns (31 Oct 2026) */
.bt-cmp{display:grid;grid-template-columns:.8fr 1.2fr 1.2fr 1.2fr;height:235px;box-sizing:border-box;border:1px solid var(--line);border-radius:16px;background:var(--bg);overflow:hidden}
.bt-col{display:flex;flex-direction:column;min-width:0;color:var(--text);text-decoration:none;border-left:1px solid var(--line)}
.bt-lab{border-left:0}
.bt-hd{height:44px;flex:none;display:flex;align-items:center;padding:4px 14px;background:var(--panel);border-bottom:1px solid var(--line);min-width:0}
.bt-hd b{font-size:15px;font-weight:700;line-height:1.15}
a.bt-col:hover .bt-hd b{color:var(--gold)}
.bt-cell{flex:1 1 0;min-height:0;display:flex;flex-direction:column;justify-content:center;padding:0 12px;border-bottom:1px solid var(--line);font-size:14px;line-height:1.25;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bt-cell:last-child{border-bottom:0}
.bt-lab .bt-cell{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);white-space:normal;line-height:1.2;font-size:12px}
.bt-cmp .bt-c{font-family:var(--mono);font-size:17px;font-weight:600}
.bt-cmp .bt-sm{display:block;font-size:12px;line-height:1.25;color:var(--dim);margin-top:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bt-cmp .bt-c{line-height:1.2}
.bt-cmp .rbadge{justify-self:start;align-self:flex-start}
@media(max-width:640px){
.bt-cmp{grid-template-columns:minmax(0,1fr);gap:12px;height:auto;border:0;background:none;overflow:visible}
.bt-lab{display:none}
.bt-col{border:1px solid var(--line2);border-radius:14px;background:var(--bg);overflow:hidden}
.bt-hd{height:auto;padding:12px 14px}
.bt-cell{height:auto;flex:none;flex-direction:row;justify-content:space-between;align-items:center;gap:12px;padding:11px 14px;font-size:14px}
.bt-cell:before{content:attr(data-l);font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);flex:none}
.bt-cell .bt-sm{text-align:right}
.bt-cell .bt-c{text-align:right}
}
/* Breathing room under the hero: mini-feature cards */
.bento{gap:24px}
@media (max-width:640px){.bento{gap:20px}}
/* Light mode: hero card carousel */
:root[data-theme=light] .hv8-card{background:linear-gradient(180deg,#ffffff,#f1f4f8);border-color:rgba(20,28,45,.14);box-shadow:0 30px 60px -28px rgba(20,28,45,.35)}
:root[data-theme=light] .hv8-card.s0{background:linear-gradient(180deg,#ffffff,#fbf6e9);border-color:rgba(217,162,60,.7);box-shadow:0 40px 80px -30px rgba(217,162,60,.38),0 24px 50px -28px rgba(20,28,45,.3)}
:root[data-theme=light] .hv8-card.s1,:root[data-theme=light] .hv8-card.s2{opacity:.82;filter:none}
:root[data-theme=light] .hv8-card small{color:#5b6472}
:root[data-theme=light] .hv8-card li{border-top-color:rgba(20,28,45,.1)}
:root[data-theme=light] .hv8-dots i{background:#c5ccd6}
/* Light mode: hero gold buttons match the menu button */
:root[data-theme=light] .hv5-cta a:first-child,:root[data-theme=light] .hv8-go{background:linear-gradient(180deg,#E2C05E 0%,#C9A227 55%,#B08E1E 100%);border:1px solid #B08E1E;color:#1A1405;box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 2px 8px rgba(160,120,20,.28)}
/* Light mode: ranked table stripes, warm cream instead of blue-grey */
:root[data-theme=light] .ctable-wrap{background:#FFFFFF}
:root[data-theme=light] .ctable tbody tr:nth-child(odd){background:#FFFFFF}
:root[data-theme=light] .ctable tbody tr:nth-child(even){background:#FBF8F0}
:root[data-theme=light] .ctable tbody tr:hover{background:#F5F0E4}
/* Light mode: side-by-side table rows alternate white and cream */
:root[data-theme=light] .bt-cmp .bt-cell:nth-child(even){background:#FFFFFF}
:root[data-theme=light] .bt-cmp .bt-cell:nth-child(odd){background:#FBF8F0}
/* Dark mode: side-by-side table rows alternate */
:root:not([data-theme=light]) .bt-cmp .bt-cell:nth-child(even){background:#0E202C}
:root:not([data-theme=light]) .bt-cmp .bt-cell:nth-child(odd){background:#071520}
/* Light mode: page header panel as a proper card */
:root[data-theme=light] .page-head .wrap:not(#firmHead):not(:has(.article-hero)){border-radius:22px;border:1px solid var(--rule);padding:28px 32px;margin-top:18px;margin-bottom:8px}
@media (max-width:600px){:root[data-theme=light] .page-head .wrap:not(#firmHead):not(:has(.article-hero)){padding:22px 18px}}
/* Light mode: guides search, one border only */
:root[data-theme=light] .gx-search input{border:0;background:transparent;box-shadow:none;border-radius:0}
:root[data-theme=light] .gx-panel{border:1px solid var(--rule);border-radius:22px}
:root[data-theme=light] .gx-panel{padding:28px 32px;margin-top:18px;margin-bottom:12px}
@media (max-width:640px){:root[data-theme=light] .gx-panel{padding:22px 18px}}
/* Gold surfaces match the nav gold button: gradient, inset highlight and glow */
.btn.gold,.nav .btn.gold{background:linear-gradient(180deg,var(--gold2),var(--gold));border-color:transparent;color:#1a1406;box-shadow:0 0 0 1px #ffffff14 inset,0 8px 28px var(--gold-glow)}
:root[data-theme=light] .btn.gold{border:1px solid transparent}
.deal-off,.ft-deal,.ftseg button[aria-pressed=true],.fttabs button[aria-selected=true].gold{background:linear-gradient(180deg,var(--gold2),var(--gold));color:#1a1406;box-shadow:0 0 0 1px #ffffff14 inset,0 4px 14px var(--gold-glow)}
/* Sale badges use the same light-mode gold as the gold buttons and nav button */
:root[data-theme=light] .deal-off,:root[data-theme=light] .ft-deal{background:linear-gradient(180deg,#E2C05E 0%,#C9A227 55%,#B08E1E 100%);border:1px solid #B08E1E;color:#1A1405;box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 2px 8px rgba(160,120,20,.28)}
/* 08 -- floating "Ask" and "Back to top" buttons on phones: always visible, smaller than desktop,
stacked bottom-right (Ask at the bottom, Back to top just above it) */
@media(max-width:767px){
html body .assist-fab{display:grid!important;width:36px!important;height:36px!important;border-radius:50%!important;right:max(14px,env(safe-area-inset-right,0px))!important;bottom:max(14px,calc(env(safe-area-inset-bottom,0px) + 10px))!important;opacity:.7;box-shadow:0 4px 14px rgba(0,0,0,.35)!important}
html body .assist-fab svg{display:none!important}
html body .assist-fab::before{content:"?";font:800 19px/1 var(--display,system-ui);color:#1a1204}
html body .assist-dot{top:3px;right:3px;width:7px;height:7px}
html body .to-top{display:grid!important;width:36px!important;height:36px!important;border-radius:50%!important;right:max(14px,env(safe-area-inset-right,0px))!important;bottom:max(60px,calc(env(safe-area-inset-bottom,0px) + 56px))!important}
html body .to-top.show{opacity:.7!important}
html body .to-top svg{width:16px;height:16px}
html body .assist-fab:active,html body .assist-fab:focus-visible,html body .assist-fab[aria-expanded="true"],html body .to-top.show:active,html body .to-top.show:focus-visible{opacity:1!important}
html.fab-hide body .assist-fab,html.fab-hide body .to-top.show{opacity:0!important;pointer-events:none!important;transform:translateY(10px)!important}
html body .assist-fab,html body .to-top{transition:opacity .3s ease,transform .3s ease!important}
html body:has(.tray:not([hidden])) .assist-fab{bottom:96px!important}
html body:has(.tray:not([hidden])) .to-top{bottom:142px!important}
}
/* firm page hero: Visit + Prop Guard buttons smaller and side by side on phones */
@media(max-width:767px){
div[style*="display:flex;gap:12px"]:has(>a.btn.lg[href*="guard.html"]){flex-wrap:nowrap!important;justify-content:center;gap:8px!important}
div[style*="display:flex;gap:12px"]>a.btn.lg[href*="guard.html"],div[style*="display:flex;gap:12px"]:has(>a.btn.lg[href*="guard.html"])>a.btn.lg{flex:0 1 auto;min-width:0;white-space:normal;text-align:center;justify-content:center;font-size:14px!important;line-height:1.2;padding:10px 12px!important;min-height:0!important;height:auto!important}
}
/* Phones/tablets: on firm pages keep the "Cheapest evaluation" line below the header content, never above the breadcrumb (forex pages). */
@media (max-width:900px){
#firmHead>.crumbs{order:1!important}
#firmHead>.from-line{grid-column:1!important;grid-row:auto!important;order:9!important}
}
/* Article pages: the text column is 68ch wide but its grid column filled the page, leaving a big empty gap before the "On this page" box. Centre text + contents together. */
@media(min-width:961px){.article{grid-template-columns:minmax(0,68ch) 260px;justify-content:center;gap:64px}}