/* ==========================================================================
   Rateweb design system — premium South African fintech.
   Warm, emotional, tactile, fast. Mobile-first.
   ========================================================================== */

/* Fonts: self-hosted variable WOFF2s — @font-face lives in the shared
   partials/fonts.blade.php (inlined in every layout head at first paint). */

:root {
    /* Brand */
    --rw-green: #0b6b3a;
    --rw-green-600: #12894c;
    --rw-green-700: #075029;
    --rw-lime: #36c46b;
    --rw-mint: #E4F5EA;
    --rw-mint-line: #a7f3d0; /* border for mint-tinted cards; dark override below */
    --rw-gold: #c08a1e;
    --rw-ink: #16293f;
    --rw-sky: #14b8c4;

    /* Option A "Forest" redesign tokens (design-handoff/README.md) */
    --rw-ink-page: #07130C;   /* dark page bg (dashboard) */
    --rw-panel: #0A1F14;      /* dark panel / brief bar / footer */
    --rw-lime2: #7CF0AE;      /* bright lime accent on dark surfaces */
    --rw-gold: #FCD34D;
    --rw-rust: #B4552D;
    --rw-rust-bg: #FBEDE4;
    --rw-grad-cta: linear-gradient(135deg, #7CF0AE, #36C46B);  /* on-dark CTA */

    /* Signature gradients */
    --rw-grad: linear-gradient(135deg, #0E7D44, #19A659);
    --rw-grad-soft: linear-gradient(135deg, #0e8a48, #12b3a6);
    --rw-grad-gold: linear-gradient(135deg, #c08a1e, #e0b34d);

    /* Neutrals / surfaces */
    --rw-bg: #F6FAF7;
    --rw-surface: #ffffff;
    --rw-surface-2: #EAF3ED;
    --rw-fg: #0A1F14;
    --rw-muted: #5B7265;
    --rw-line: #E2ECE5;
    --rw-line-2: #EEF4F0;
    --rw-band: #edf5ef; /* soft full-bleed section band (light) */

    /* Status */
    --rw-up: #10a35c;
    --rw-down: #e0322f;
    --rw-warn: #d97706;

    /* Type */
    --rw-font: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
    --rw-display: "Fraunces", Georgia, "Times New Roman", serif;
    --rw-h1: clamp(2.2rem, 1.5rem + 3vw, 3.5rem);
    --rw-h2: clamp(1.5rem, 1.15rem + 1.5vw, 2.1rem);
    --rw-h3: clamp(1.12rem, 1rem + .45vw, 1.3rem);

    /* Shape & depth */
    --rw-radius: 16px;
    --rw-radius-sm: 10px;
    --rw-radius-lg: 24px;
    --rw-shadow: 0 1px 2px rgba(12, 22, 35, .04), 0 6px 16px rgba(12, 22, 35, .06);
    --rw-shadow-md: 0 14px 38px rgba(12, 22, 35, .12);
    --rw-shadow-lg: 0 30px 70px rgba(12, 22, 35, .18);
    --rw-glow: 0 10px 30px rgba(18, 137, 76, .28);

    /* Motion */
    --rw-ease: cubic-bezier(.22, 1, .36, 1);

    /* Spacing */
    --rw-space: 22px;
    --rw-wrap: 1180px;
    --rw-prose: 720px;

    /* Short aliases — used by calculator/tools/vertical pages. Resolve to the
       brand tokens above (and therefore adapt to dark mode automatically). */
    --accent: var(--rw-green);
    --line: var(--rw-line);
    --meta: var(--rw-muted);
    --muted: var(--rw-muted);
    --text: var(--rw-fg);
    --surface: var(--rw-surface-2);
    --danger: var(--rw-down);
}

@media (prefers-color-scheme: dark) {
    :root {
        --rw-bg: #0b121d;
        --rw-surface: #121d2e;
        --rw-surface-2: #18253a;
        --rw-fg: #e9eef6;
        --rw-muted: #93a2b8;
        --rw-line: #1b2740;
        --rw-line-2: #16213a;
        --rw-band: #0f1a2a; /* soft full-bleed section band (dark) */
        --rw-mint: #0d2a1d;
        --rw-mint-line: #1f4d36; /* muted green border — the light-mode value glows on dark surfaces */
        --rw-ink: #0a1422;
        --rw-shadow: 0 1px 2px rgba(0,0,0,.3), 0 10px 26px rgba(0,0,0,.4);
        --rw-shadow-md: 0 18px 44px rgba(0,0,0,.5);
    }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--rw-font);
    font-size: 17px;
    line-height: 1.65;
    color: var(--rw-fg);
    background: var(--rw-bg);
    overflow-x: clip; /* trims the full-bleed band's vw-vs-scrollbar sliver; preserves sticky */
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

::selection { background: color-mix(in srgb, var(--rw-green) 22%, transparent); }

/* Skip-to-content: first tab stop, off-screen until keyboard-focused. Lets
   keyboard and screen-reader users bypass the header/nav straight to <main>. */
.skip-link { position: fixed; left: 12px; top: -60px; z-index: 2000; background: var(--rw-green); color: #fff; padding: 11px 18px; border-radius: 0 0 12px 12px; font-weight: 800; font-size: 14px; text-decoration: none; box-shadow: var(--rw-shadow-md); transition: top .16s var(--rw-ease); }
.skip-link:focus { top: 0; text-decoration: none; outline: 3px solid #fff; outline-offset: -6px; }

/* Returning-member homepage strip — hydrated client-side from /home/strip so
   edge-cached HTML stays generic. Hidden for guests; min-height keeps the
   reveal-then-hydrate sequence shift-free for members. */
.rw-strip { min-height: 58px; display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; background: linear-gradient(135deg, var(--rw-mint), var(--rw-surface)); border: 1px solid var(--rw-mint-line); border-radius: var(--rw-radius-lg); padding: 12px 18px; margin-bottom: 24px; box-shadow: var(--rw-shadow); color: var(--rw-fg); /* the dark hero sets color:#fff — the strip is its own light/dark surface and must not inherit it */ }
.rw-strip[hidden] { display: none; }
.rw-strip .hi { font-weight: 800; font-size: 15px; }
.rw-strip .chip { background: var(--rw-surface); border: 1px solid var(--rw-line); border-radius: 999px; padding: 4px 12px; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.rw-strip .sp { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 640px) {
    .rw-strip { min-height: 0; gap: 8px 10px; padding: 11px 14px; }
    .rw-strip .sp { margin-left: 0; width: 100%; }
    .rw-strip .sp .btn { flex: 1; justify-content: center; }
}

/* Native form controls pick up the brand green instead of the browser's
   default blue — the tools' sliders were the visible offender. */
input[type="range"], input[type="radio"], input[type="checkbox"], progress {
    accent-color: var(--rw-green);
}
input[type="range"] { cursor: pointer; height: 22px; }

a { color: var(--rw-green); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { font-weight: 800; letter-spacing: -.025em; color: var(--rw-fg); }
h1 { font-size: var(--rw-h1); line-height: 1.05; margin: .2em 0 .35em; }
h2 { font-size: var(--rw-h2); line-height: 1.16; margin: 1.6em 0 .5em; }
h3 { font-size: var(--rw-h3); line-height: 1.3; margin: 1.2em 0 .4em; }

.display { font-family: var(--rw-display); font-weight: 600; letter-spacing: -.015em; }
.gradient-text {
    background: var(--rw-grad); -webkit-background-clip: text; background-clip: text;
    color: transparent;
}

.wrap { max-width: var(--rw-wrap); margin: 0 auto; padding: 0 var(--rw-space); }

/* custom scrollbar (desktop) */
@media (pointer: fine) {
    * { scrollbar-width: thin; scrollbar-color: var(--rw-line) transparent; }
    ::-webkit-scrollbar { width: 10px; height: 10px; }
    ::-webkit-scrollbar-thumb { background: var(--rw-line); border-radius: 999px; border: 2px solid var(--rw-bg); }
}

/* ---- Header / nav ------------------------------------------------------- */
.site-header {
    border-bottom: 1px solid var(--rw-line);
    background: color-mix(in srgb, var(--rw-surface) 80%, transparent);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    position: sticky; top: 0; z-index: 50;
}
.nav { display: flex; gap: 6px; align-items: center; height: 70px; }
/* flex:none is load-bearing. The logo is a flex item in a row that can overflow,
   and without it the browser shrinks the LOGO first — it went to width:0 and
   vanished entirely when the nav grew to seven sections. The brand must never be
   the thing that gives way; if the row runs out of room, the nav wraps instead. */
.nav .logo { display: inline-flex; align-items: center; margin-right: auto; flex: none; transition: transform .2s var(--rw-ease); }
.nav .logo:hover { transform: scale(1.03); }
.nav .logo img { height: 31px; width: auto; display: block; }
.nav a.link {
    color: var(--rw-muted); font-size: 14.5px; font-weight: 600;
    padding: 8px 12px; border-radius: 9px; white-space: nowrap; transition: color .15s, background .15s;
}
.nav a.link:hover { color: var(--rw-fg); background: var(--rw-surface-2); text-decoration: none; }

main { padding: 34px 0 10px; }

/* ---- Layout grid -------------------------------------------------------- */
.grid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 44px; }
@media (max-width: 940px) { .grid { grid-template-columns: 1fr; gap: 24px; } }

/* ---- Text helpers ------------------------------------------------------- */
.meta { color: var(--rw-muted); font-size: 14.5px; }
.eyebrow {
    display: inline-flex; align-items: center; gap: 7px;
    color: var(--rw-green); font-weight: 800; font-size: 12.5px;
    letter-spacing: .1em; text-transform: uppercase;
}
.eyebrow::before { content: ""; width: 18px; height: 2px; border-radius: 2px; background: var(--rw-grad); }
.crumbs { font-size: 13px; color: var(--rw-muted); margin-bottom: 14px; }
.crumbs a { color: var(--rw-muted); }
.lead { font-size: 1.24rem; color: var(--rw-muted); line-height: 1.6; }
.center { text-align: center; }

/* ---- Hero --------------------------------------------------------------- */
.hero {
    position: relative; overflow: hidden;
    background:
        radial-gradient(1200px 560px at 92% -15%, rgba(18, 179, 166, .18), transparent 60%),
        radial-gradient(900px 520px at -5% 0%, rgba(54, 196, 107, .16), transparent 55%),
        linear-gradient(180deg, var(--rw-surface-2), var(--rw-bg));
    border-bottom: 1px solid var(--rw-line);
}
.hero::after { /* floating glow orb */
    content: ""; position: absolute; width: 460px; height: 460px; right: -120px; top: -160px;
    background: var(--rw-grad); filter: blur(90px); opacity: .14; border-radius: 50%;
    animation: float 14s var(--rw-ease) infinite alternate;
}
@keyframes float { to { transform: translate(-40px, 50px) scale(1.1); } }
/* Vertical padding only — this element also carries .wrap, whose horizontal
   padding must survive (a `padding: X 0 Y` shorthand zeroes it, leaving the
   hero content flush against the screen edge on mobile). */
.hero-inner { padding-top: 64px; padding-bottom: 56px; }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }
@media (max-width: 940px) { .hero-grid { grid-template-columns: 1fr; gap: 30px; } }
.hero h1 { max-width: 15ch; font-family: var(--rw-display); font-weight: 600; letter-spacing: -.02em; }
.hero .lead { max-width: 52ch; margin-top: .5em; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.trust-row { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 22px; color: var(--rw-muted); font-size: 13.5px; font-weight: 600; }
.trust-row span { display: inline-flex; align-items: center; gap: 6px; }

/* Hero product preview (pure CSS/HTML) */
.hero-visual { position: relative; }
.glass-card {
    background: color-mix(in srgb, var(--rw-surface) 86%, transparent);
    border: 1px solid color-mix(in srgb, #fff 30%, var(--rw-line));
    border-radius: var(--rw-radius-lg); box-shadow: var(--rw-shadow-lg);
    backdrop-filter: blur(8px); padding: 22px;
}
.hero-visual .hv-float {
    position: absolute; background: var(--rw-surface); border: 1px solid var(--rw-line);
    border-radius: var(--rw-radius); box-shadow: var(--rw-shadow-md); padding: 12px 16px;
    font-weight: 700; font-size: 14px; display: flex; align-items: center; gap: 10px;
    animation: bob 5s var(--rw-ease) infinite alternate;
}
.hero-visual .hv-1 { right: -8px; top: 12px; }
.hero-visual .hv-2 { left: -16px; bottom: 30px; animation-delay: 1.2s; }
@keyframes bob { to { transform: translateY(-12px); } }
.score-ring {
    --val: 74; width: 132px; height: 132px; border-radius: 50%; flex: none;
    /* Vibrant progress arc: fills green → lime → teal from the top (12 o'clock),
       reading as an energetic, game-like score dial rather than a flat wedge. */
    background: conic-gradient(from -90deg, #10a35c 0%, #36c46b calc(var(--val) * .55%), #15bdb0 calc(var(--val) * 1%), var(--rw-line) 0);
    display: grid; place-items: center;
}
.score-ring > div { width: 102px; height: 102px; border-radius: 50%; background: var(--rw-surface); display: grid; place-items: center; text-align: center; }

/* ---- Sections ----------------------------------------------------------- */
.section { padding: 34px 0; }
/* CWV: below-fold sections skip layout/paint until scrolled near — cuts the
   huge upfront Style & Layout cost of long pages (homepage ≈17,000px). The
   intrinsic-size hint keeps the scrollbar stable. Browsers without support
   simply ignore both. */
.section, .site-footer { content-visibility: auto; contain-intrinsic-size: auto 620px; }
.eco-grid, .explore-grid, .topic-grid, .posts, .goal-grid, .tiles { content-visibility: auto; contain-intrinsic-size: auto 480px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.section-head h2 { margin: 0; }

/* Full-bleed section rhythm: a soft tinted band spans the viewport while the
   section's content stays aligned to the wrap. Painted by a pseudo-element so
   it never changes layout width; body{overflow-x:clip} trims the vw sliver so
   there's no horizontal scroll. Used on alternating sections to chunk the long
   homepage into scannable zones without adding more boxes. */
.section-band { position: relative; }
.section-band::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0; bottom: 0;
    left: calc(50% - 50vw);
    right: calc(50% - 50vw);
    background: var(--rw-band);
    border-top: 1px solid var(--rw-line);
    border-bottom: 1px solid var(--rw-line);
}
.section-band { padding-top: 40px; padding-bottom: 40px; }

/* ---- Market ticker (addictive live feel) -------------------------------- */
.ticker { overflow: hidden; border: 1px solid var(--rw-line); border-radius: 999px; background: var(--rw-surface); box-shadow: var(--rw-shadow); }
.ticker-track { display: flex; gap: 34px; padding: 11px 20px; white-space: nowrap; width: max-content; animation: ticker 32s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker .ti { font-size: 13.5px; font-weight: 700; color: var(--rw-fg); }
.ticker .ti span { color: var(--rw-muted); font-weight: 600; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* ---- Cards -------------------------------------------------------------- */
.card {
    background: var(--rw-surface); border: 1px solid var(--rw-line);
    border-radius: var(--rw-radius); padding: 20px; box-shadow: var(--rw-shadow);
    margin-bottom: 16px;
}
.card h3 { margin: 0 0 6px; font-size: 16px; }
a.card { display: block; color: inherit; transition: transform .2s var(--rw-ease), box-shadow .2s var(--rw-ease), border-color .2s; }
a.card:hover { transform: translateY(-4px); box-shadow: var(--rw-shadow-md); border-color: color-mix(in srgb, var(--rw-green) 45%, var(--rw-line)); text-decoration: none; }

/* Post cards */
.posts { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 22px; }
.post-card { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.post-card .thumb { aspect-ratio: 16 / 9; background: var(--rw-grad); position: relative; overflow: hidden; }
.post-card .thumb::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 100% at 0% 0%, rgba(255,255,255,.25), transparent 50%); }
.post-card .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post-card .thumb .cat { position: absolute; left: 12px; top: 12px; z-index: 1; background: rgba(255, 255, 255, .94); color: var(--rw-ink); font-size: 11.5px; font-weight: 800; padding: 5px 11px; border-radius: 999px; letter-spacing: .02em; }
.post-card .pc-body { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.post-card h3 { font-size: 17.5px; margin: 0; line-height: 1.32; }
.post-card h3 a { color: var(--rw-fg); background-image: linear-gradient(var(--rw-green), var(--rw-green)); background-size: 0% 2px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size .25s var(--rw-ease); }
.post-card:hover h3 a { background-size: 100% 2px; text-decoration: none; }
.post-card .pc-meta { margin-top: auto; font-size: 13px; color: var(--rw-muted); }

.post-feature { grid-column: 1 / -1; }
@media (min-width: 760px) {
    .post-feature { display: grid; grid-template-columns: 1.3fr 1fr; }
    .post-feature .thumb { aspect-ratio: auto; min-height: 340px; }
    .post-feature .pc-body { padding: 36px; justify-content: center; }
    .post-feature h3 { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.2rem); letter-spacing: -.02em; font-family: var(--rw-display); font-weight: 600; }
}

/* Chips */
.chips { display: flex; gap: 10px; flex-wrap: wrap; }
.chip {
    display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px;
    border: 1px solid var(--rw-line); border-radius: 999px; background: var(--rw-surface);
    font-weight: 700; font-size: 14px; color: var(--rw-fg); box-shadow: var(--rw-shadow);
    transition: transform .15s var(--rw-ease), border-color .15s, color .15s;
}
.chip:hover { border-color: var(--rw-green); color: var(--rw-green); text-decoration: none; transform: translateY(-2px); }

/* ---- Buttons ------------------------------------------------------------ */
.btn {
    position: relative; overflow: hidden;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    background: var(--rw-grad); background-size: 140% 140%; color: #fff; border: 0; border-radius: var(--rw-radius-sm);
    padding: 13px 24px; font-size: 15px; font-weight: 700; font-family: inherit; cursor: pointer;
    box-shadow: var(--rw-glow); transition: transform .15s var(--rw-ease), box-shadow .15s, background-position .4s;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); background-position: 100% 0; box-shadow: 0 14px 32px rgba(18, 137, 76, .36); }
.btn::after { content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent); transform: skewX(-18deg); transition: left .55s var(--rw-ease); }
.btn:hover::after { left: 130%; }
.btn-lg { padding: 16px 30px; font-size: 16.5px; }
.btn-block { display: flex; width: 100%; padding: 14px; font-size: 16px; }
.btn-ghost { background: var(--rw-surface); color: var(--rw-green); border: 1px solid var(--rw-line); box-shadow: var(--rw-shadow); }
.btn-ghost::after { display: none; }
.btn-ghost:hover { background: var(--rw-surface-2); }
.btn-dark { background: var(--rw-ink); box-shadow: none; }
.btn-dark:hover { background: #000; }

/* ---- Badges / pills ----------------------------------------------------- */
.pill { display: inline-block; background: var(--rw-mint); color: var(--rw-green); border-radius: 999px; padding: 5px 13px; font-size: 12px; font-weight: 800; }
/* Trust badge — the "fact-checked & reviewed" signal on articles, elevated from
   plain meta text into a prominent green credibility pill (every reviewed guide). */
.trust-badge { display: inline-flex; align-items: center; gap: 5px; margin-left: 9px; background: var(--rw-mint); color: var(--rw-green); font-weight: 800; font-size: 12px; letter-spacing: .01em; padding: 3px 11px; border-radius: 999px; vertical-align: middle; border: 1px solid color-mix(in srgb, var(--rw-green) 22%, transparent); }
.pill.is-active { background: var(--rw-green); color: #fff; }
.pill.gold { background: #fdf6e3; color: var(--rw-gold); }

/* ---- Tables ------------------------------------------------------------- */
.rw-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.rw-table thead th { text-align: right; color: var(--rw-muted); border-bottom: 1px solid var(--rw-line); padding: 13px 13px; font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.rw-table thead th.l, .rw-table tbody td.l { text-align: left; }
.rw-table tbody td { text-align: right; padding: 15px 13px; border-bottom: 1px solid var(--rw-line-2); font-variant-numeric: tabular-nums; }
.rw-table tbody tr { transition: background .12s; }
.rw-table tbody tr:hover { background: var(--rw-surface-2); }
.rw-table .name { font-weight: 700; }
.table-scroll { overflow-x: auto; border: 1px solid var(--rw-line); border-radius: var(--rw-radius); background: var(--rw-surface); box-shadow: var(--rw-shadow); }
.up { color: var(--rw-up); font-weight: 700; }
.down { color: var(--rw-down); font-weight: 700; }

/* ---- Forms -------------------------------------------------------------- */
.field { display: block; font-weight: 700; font-size: 14px; margin: 16px 0 6px; }
input, select, textarea {
    width: 100%; padding: 12px 15px; border: 1px solid var(--rw-line); border-radius: var(--rw-radius-sm);
    font-size: 16px; font-family: inherit; background: var(--rw-surface); color: var(--rw-fg);
    transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--rw-green); box-shadow: 0 0 0 4px color-mix(in srgb, var(--rw-green) 18%, transparent); }

/* Two-column layout that collapses to one column on phones — used by the
   calculator/tools/vertical capture forms so fields never get cramped. */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .grid-2 { grid-template-columns: 1fr; } }

/* ---- Ad slots (reserved space — CLS-safe) ------------------------------- */
.ad { background: var(--rw-surface-2); border: 1px dashed var(--rw-line); border-radius: var(--rw-radius); display: flex; align-items: center; justify-content: center; color: var(--rw-muted); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.ad.leaderboard { min-height: 90px; margin: 26px 0; }
.ad.box { min-height: 250px; margin: 26px 0; }
.ad.sidebar { min-height: 600px; position: sticky; top: 90px; }
/* Stacked sidebar ads (.aside-ads wrapper): NONE may be sticky. A sticky ad
   stays pinned at its offset and visually overlaps whatever follows it as you
   scroll — so two sticky ads, or a sticky ad above a static one, both overlap.
   In the wrapper they all flow normally and simply stack with a gap. */
.aside-ads .ad.sidebar { position: static; top: auto; }
.aside-ads .ad.sidebar + .ad.sidebar { margin-top: 24px; }
/* A live ad (AdSense unit or affiliate creative) drops the placeholder chrome. */
.ad.live { background: transparent; border: 0; overflow: hidden; }
.ad.live img { border-radius: var(--rw-radius); }

/* VALR house ads — responsive branded banner that fills the slot at any width. */
.valr-ad { display: flex; flex-direction: column; justify-content: center; gap: 4px; width: 100%; height: 100%; min-height: inherit; padding: 16px 18px; border-radius: var(--rw-radius); background: linear-gradient(135deg, #0b1f3a, #15489a 55%, #1f7ae0); color: #fff; text-align: left; text-transform: none; letter-spacing: normal; }
.valr-ad:hover { text-decoration: none; filter: brightness(1.07); }
.valr-ad__brand { font-weight: 800; letter-spacing: .16em; font-size: 12px; opacity: .85; }
.valr-ad__title { font-family: var(--rw-display); font-weight: 700; font-size: 19px; line-height: 1.15; color: #fff; }
.valr-ad__sub { font-size: 13px; opacity: .85; color: #fff; }
.valr-ad__cta { margin-top: 6px; align-self: flex-start; font-weight: 700; font-size: 13px; color: #fff; background: rgba(255, 255, 255, .18); padding: 7px 13px; border-radius: 9px; }
/* Leaderboard: horizontal bar (full-width desktop banner). */
.ad.leaderboard .valr-ad { flex-direction: row; align-items: center; gap: 16px; }
.ad.leaderboard .valr-ad__sub { display: none; }
.ad.leaderboard .valr-ad__cta { margin: 0 0 0 auto; }
@media (max-width: 640px) { .ad.leaderboard .valr-ad__title { font-size: 15px; } .valr-ad__title { font-size: 17px; } }

/* ---- Footer ------------------------------------------------------------- */
.site-footer { border-top: 1px solid var(--rw-line); margin-top: 64px; color: var(--rw-muted); font-size: 14px; background: var(--rw-surface-2); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.newsletter-cta { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 30px 0; border-bottom: 1px solid var(--rw-line); }
.newsletter-cta h4, .newsletter-cta .f-h4 { font-size: 18px; }
.newsletter-form { display: flex; gap: 8px; flex-wrap: wrap; }
.newsletter-form input[type=email] { padding: 11px 14px; border: 1px solid var(--rw-line); border-radius: 10px; background: var(--rw-surface); color: var(--rw-fg); min-width: 240px; font-size: 15px; }
.newsletter-form input[type=email]:focus { outline: 2px solid var(--rw-green); outline-offset: 1px; border-color: var(--rw-green); }
@media (max-width: 520px) { .newsletter-form { width: 100%; } .newsletter-form input[type=email] { flex: 1; min-width: 0; } }
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 28px; padding: 48px 0 30px; }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 24px; } }
.footer-grid h4 { font-size: 12.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--rw-muted); margin: 0 0 12px; }
.footer-grid a { display: block; color: var(--rw-fg); padding: 5px 0; font-size: 14.5px; font-weight: 500; transition: color .12s; }
.footer-grid a:hover { color: var(--rw-green); text-decoration: none; }
.footer-bottom { border-top: 1px solid var(--rw-line); padding: 20px 0; font-size: 13px; }

/* ---- Article / prose ---------------------------------------------------- */
.article-head { max-width: var(--rw-prose); }
.prose { max-width: var(--rw-prose); font-size: 1.14rem; line-height: 1.8; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { margin-top: 1.9em; }
.prose h3 { margin-top: 1.5em; }
.prose img { max-width: 100%; height: auto; border-radius: var(--rw-radius); margin: 1.5em 0; box-shadow: var(--rw-shadow); }
.prose figure.rw-illus { margin: 1.6em 0; }
.prose figure.rw-illus img { width: 100%; margin: 0; display: block; }
.prose a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--rw-green) 45%, transparent); transition: text-decoration-color .15s; }
.prose a:hover { text-decoration-color: var(--rw-green); }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li { margin: .45em 0; }
.prose blockquote { margin: 1.6em 0; padding: 14px 22px; border-left: 4px solid var(--rw-green); background: var(--rw-surface-2); border-radius: 0 var(--rw-radius-sm) var(--rw-radius-sm) 0; font-style: italic; }
.prose table { width: 100%; border-collapse: collapse; font-size: 15px; margin: 1.5em 0; display: block; overflow-x: auto; }
.prose th, .prose td { border: 1px solid var(--rw-line); padding: 11px 13px; text-align: left; }
.prose thead th { background: var(--rw-surface-2); font-weight: 700; }
.body { max-width: var(--rw-prose); font-size: 1.12rem; line-height: 1.8; }
.body img { max-width: 100%; height: auto; border-radius: var(--rw-radius); }
.body h2 { margin-top: 1.7em; }
.body table { width: 100%; border-collapse: collapse; }
.body td, .body th { border: 1px solid var(--rw-line); padding: 9px; }

.figure-hero { aspect-ratio: 16 / 9; border-radius: var(--rw-radius-lg); overflow: hidden; margin: 18px 0 8px; background: var(--rw-grad); box-shadow: var(--rw-shadow-md); }
.figure-hero img { width: 100%; height: 100%; object-fit: cover; }

/* Quick answer — the verified, snippet-targeted answer at the top of an article */
.quick-answer { max-width: var(--rw-prose); margin: 18px 0 6px; padding: 16px 20px; background: var(--rw-mint); border: 1px solid var(--rw-line); border-left: 4px solid var(--rw-green); border-radius: var(--rw-radius); }
.quick-answer .qa-label { display: inline-block; font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--rw-green); margin-bottom: 6px; }
.quick-answer .qa-body { font-size: 17px; line-height: 1.55; color: var(--rw-fg); }
.quick-answer .qa-body :where(strong, b) { font-weight: 700; }

/* Byline / author */
.byline { display: flex; align-items: center; gap: 12px; margin: 18px 0; }
.avatar { width: 46px; height: 46px; border-radius: 50%; background: var(--rw-grad); color: #fff; display: grid; place-items: center; font-weight: 800; flex: none; box-shadow: var(--rw-glow); }
.authorbox { display: flex; gap: 16px; align-items: flex-start; background: var(--rw-surface-2); border: 1px solid var(--rw-line); border-radius: var(--rw-radius); padding: 20px; margin: 28px 0; }
.authorbox .avatar { width: 54px; height: 54px; }

.toc { background: var(--rw-surface-2); border: 1px solid var(--rw-line); border-radius: var(--rw-radius); padding: 18px 20px; margin: 22px 0; font-size: 15px; }
.toc strong { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--rw-muted); margin-bottom: 8px; }
.toc a { display: block; padding: 5px 0; color: var(--rw-fg); border-left: 2px solid transparent; padding-left: 12px; margin-left: -2px; transition: border-color .15s, color .15s; }
.toc a:hover { color: var(--rw-green); text-decoration: none; border-color: var(--rw-green); }
.toc a.lvl3 { padding-left: 26px; font-size: 14px; color: var(--rw-muted); }
.prose h2, .prose h3 { scroll-margin-top: 88px; }

/* Reading progress bar */
.read-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; background: transparent; pointer-events: none; }
.read-progress span { display: block; height: 100%; width: 0; background: var(--rw-grad); box-shadow: 0 0 10px rgba(18, 137, 76, .5); transition: width .1s linear; }

/* ---- Grouped navigation (dropdowns + mobile hamburger) ------------------ */
.nav { overflow: visible; }
.nav .logo { margin-right: 0; }
.primary-nav { display: flex; align-items: center; gap: 2px; margin-left: 18px; flex: 1; }
.nav-auth { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.ai-link { color: var(--rw-green) !important; font-weight: 700; }

.nav-dd { position: relative; }
/* Horizontal padding trimmed 12px -> 8px and the caret gap 6px -> 4px: seven
   product sections plus search plus the auth CTA overflowed a 1180px bar, and
   this reclaims ~60px without dropping a section or shortening the "free" in the
   score CTA. Vertical padding is untouched so the click target keeps its height. */
.nav-dd > summary { list-style: none; cursor: pointer; padding: 9px 8px; border-radius: 9px; font-size: 14.5px; font-weight: 600; color: var(--rw-muted); display: inline-flex; align-items: center; gap: 4px; user-select: none; white-space: nowrap; }
.nav-dd > summary::-webkit-details-marker { display: none; }
.nav-dd > summary::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); opacity: .5; transition: transform .2s var(--rw-ease); }
.nav-dd[open] > summary::after { transform: rotate(-135deg) translateY(-1px); }
.nav-dd > summary:hover, .nav-dd[open] > summary { color: var(--rw-fg); background: var(--rw-surface-2); }
.dd-panel { position: absolute; top: calc(100% + 10px); left: 0; min-width: 244px; max-height: min(74vh, 600px); overflow-y: auto; background: var(--rw-surface); border: 1px solid var(--rw-line); border-radius: 14px; box-shadow: var(--rw-shadow-md); padding: 8px; z-index: 60; }
.dd-panel a { display: block; padding: 10px 12px; border-radius: 9px; color: var(--rw-fg); font-size: 14.5px; font-weight: 600; white-space: nowrap; }
.dd-panel a:hover { background: var(--rw-surface-2); color: var(--rw-green); text-decoration: none; }
.dd-panel a.dd-all { border-top: 1px solid var(--rw-line); margin-top: 4px; padding-top: 11px; color: var(--rw-green); font-weight: 700; border-radius: 0 0 9px 9px; }

/* "Compare" mega-menu — grouped columns to hold every vertical cleanly. */
.dd-panel.mega { display: grid; grid-template-columns: repeat(4, minmax(166px, 1fr)); gap: 0 14px; min-width: 720px; padding: 14px; }
.dd-group { display: flex; flex-direction: column; }
.dd-group .dd-h { font-size: 11px; text-transform: uppercase; letter-spacing: .09em; font-weight: 700; color: var(--rw-muted); padding: 6px 12px 4px; }
.dd-panel.mega a { padding: 6px 12px; font-size: 14px; }
.dd-panel.mega a.dd-all { margin-top: 6px; }

.nav-toggle { display: none; flex-direction: column; gap: 4px; background: none; border: 1px solid var(--rw-line); border-radius: 9px; padding: 9px 10px; cursor: pointer; }
.nav-toggle span { display: block; width: 20px; height: 2px; background: var(--rw-fg); border-radius: 2px; transition: transform .2s, opacity .2s; }
.site-header.open .nav-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.site-header.open .nav-toggle span:nth-child(2) { opacity: 0; }
.site-header.open .nav-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1200px) {
    .nav { flex-wrap: wrap; height: auto; min-height: 64px; padding-top: 10px; padding-bottom: 10px; }
    .nav-toggle { display: inline-flex; margin-left: auto; }
    .primary-nav { display: none; flex-direction: column; align-items: stretch; gap: 2px; width: 100%; flex-basis: 100%; margin: 10px 0 4px; }
    .site-header.open .primary-nav { display: flex; }
    .nav-dd { width: 100%; }
    .nav-dd > summary { width: 100%; justify-content: space-between; padding: 12px; font-size: 16px; }
    .dd-panel { position: static; box-shadow: none; border: none; border-left: 2px solid var(--rw-line); border-radius: 0; min-width: 0; max-height: none; overflow: visible; margin: 2px 0 8px 12px; padding: 0 0 0 8px; }
    .dd-panel.mega { display: block; min-width: 0; padding: 0; }
    .dd-group .dd-h { padding: 8px 12px 2px; }
    .dd-panel a { font-size: 15px; }
    .ai-link { padding: 12px; }
    .nav-auth { margin: 10px 0 0; }
    /* In the stacked mobile menu the search should span the panel, not keep
       its 140px desktop width. (Extra specificity: a later @media(1080px)
       rule re-narrows .nav-search input and would win at equal specificity.) */
    .nav-search { width: 100%; margin: 8px 0 2px; }
    .site-header .nav-search input, .site-header .nav-search input:focus { width: 100%; }
}

/* CTA banner */
.cta-band { position: relative; overflow: hidden; background: var(--rw-ink); color: #fff; border-radius: var(--rw-radius-lg); padding: 34px 36px; display: flex; gap: 20px; align-items: center; justify-content: space-between; flex-wrap: wrap; box-shadow: var(--rw-shadow-md); }
.cta-band::before { content: ""; position: absolute; width: 380px; height: 380px; right: -80px; bottom: -180px; background: var(--rw-grad); filter: blur(70px); opacity: .4; border-radius: 50%; }
.cta-band > * { position: relative; z-index: 1; }
.cta-band h3 { color: #fff; margin: 0 0 4px; font-size: 1.5rem; font-family: var(--rw-display); font-weight: 600; }
.cta-band p { margin: 0; color: rgba(255, 255, 255, .85); max-width: 60ch; }
.cta-band.green { background: var(--rw-grad); }
.cta-band.green::before { background: #fff; opacity: .14; }

/* Stat tiles */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; }
.stat-card { background: var(--rw-surface); border: 1px solid var(--rw-line); border-radius: var(--rw-radius); padding: 20px; box-shadow: var(--rw-shadow); transition: transform .2s var(--rw-ease), box-shadow .2s; }
a.stat-card:hover { transform: translateY(-4px); box-shadow: var(--rw-shadow-md); }
.stat-card .n { font-size: 1.75rem; font-weight: 800; letter-spacing: -.02em; }
.stat-card .l { color: var(--rw-muted); font-size: 13.5px; }

/* Utility */
.muted-band { background: var(--rw-surface-2); border-top: 1px solid var(--rw-line); border-bottom: 1px solid var(--rw-line); }
.disclaim { font-size: 13px; color: var(--rw-muted); border-top: 1px solid var(--rw-line); padding-top: 14px; margin-top: 26px; }

/* ---- Reveal-on-scroll (progressive; only active when JS adds .js) -------- */
.js .reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s var(--rw-ease), transform .6s var(--rw-ease); will-change: opacity, transform; }
.js .reveal.in { opacity: 1; transform: none; }
.js .reveal.d1 { transition-delay: .08s; }
.js .reveal.d2 { transition-delay: .16s; }
.js .reveal.d3 { transition-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .js .reveal { opacity: 1; transform: none; }
}

/* ==========================================================================
   MODERN & POWERFUL layer — dark dramatic hero, header CTA, stats band,
   premium dark footer. (Loaded last so it wins the cascade.)
   ========================================================================== */

/* Header: a confident primary CTA on the right of the nav */
.nav-cta {
    margin-left: 8px; padding: 9px 18px; border-radius: 999px; font-size: 14px; font-weight: 800;
    color: #fff; background: var(--rw-grad); box-shadow: var(--rw-glow); white-space: nowrap;
    transition: transform .15s var(--rw-ease), box-shadow .15s;
}
.nav-cta:hover { color: #fff; text-decoration: none; transform: translateY(-1px); box-shadow: 0 12px 28px rgba(18,137,76,.4); }

/* ---- Dark, dramatic hero ------------------------------------------------- */
.hero {
    color: #fff;
    background:
        radial-gradient(1000px 620px at 84% -18%, rgba(124, 240, 174, .34), transparent 60%),
        radial-gradient(820px 620px at -4% 8%, rgba(20, 184, 196, .28), transparent 55%),
        linear-gradient(165deg, #0d4a37, #11614a 55%, #0c5563);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.hero::after { background: var(--rw-grad); opacity: .35; filter: blur(110px); width: 540px; height: 540px; }
.hero-inner { padding-top: 76px; padding-bottom: 64px; } /* keep .wrap side padding (mobile) */
.hero h1 {
    font-family: var(--rw-font); font-weight: 800; letter-spacing: -.035em; color: #fff;
    font-size: clamp(2.7rem, 1.6rem + 4.2vw, 4.6rem); line-height: 1.02; max-width: 16ch;
}
.hero .lead { color: rgba(255, 255, 255, .78); }
.hero .eyebrow { color: #7cf0ae; }
.hero .eyebrow::before { background: #7cf0ae; }
.hero .gradient-text { background: linear-gradient(120deg, #7cf0ae, #36c46b 48%, #14b8c4); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero .trust-row { color: rgba(255, 255, 255, .72); }
.hero .chip { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .14); color: #fff; box-shadow: none; }
.hero .chip:hover { border-color: #7cf0ae; color: #7cf0ae; background: rgba(255, 255, 255, .12); }
.hero .btn-ghost { background: rgba(255, 255, 255, .08); color: #fff; border-color: rgba(255, 255, 255, .24); box-shadow: none; }
.hero .btn-ghost:hover { background: rgba(255, 255, 255, .16); }
.hero .glass-card { background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .15); color: #fff; box-shadow: 0 30px 80px rgba(0, 0, 0, .45); }
.hero .glass-card .meta { color: rgba(255, 255, 255, .65); }
.hero .score-ring > div { background: #0c1d31; color: #fff; }
.hero .ticker { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .12); box-shadow: none; }
.hero .ticker .ti { color: #fff; }
.hero .ticker .ti span { color: rgba(255, 255, 255, .55); }

/* ---- Credibility stats band --------------------------------------------- */
.stats-band { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding: 6px 0 4px; }
@media (max-width: 760px) { .stats-band { grid-template-columns: repeat(2, 1fr); gap: 18px; } }
.stat-big { text-align: center; }
.stat-big .v { font-size: clamp(1.9rem, 1.2rem + 2vw, 2.8rem); font-weight: 800; letter-spacing: -.03em; line-height: 1; background: var(--rw-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat-big .k { color: var(--rw-muted); font-size: 14px; font-weight: 600; margin-top: 8px; }

/* ---- Comparison product cards (used on /compare + best-X article pages) -- */
.pcard { background: var(--rw-surface); border: 1px solid var(--rw-line); border-radius: var(--rw-radius); padding: 20px; margin-bottom: 16px; box-shadow: var(--rw-shadow); transition: transform .18s var(--rw-ease), box-shadow .18s; }
.pcard:hover { transform: translateY(-2px); box-shadow: var(--rw-shadow-md); }
.pcard.feat { border-color: color-mix(in srgb, var(--rw-green) 55%, var(--rw-line)); box-shadow: 0 0 0 1px var(--rw-green), var(--rw-shadow); }
.pcard h3 { margin: 0; font-size: 19px; }
.pcard .head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: start; }
.stars { color: #f59e0b; font-size: 14px; letter-spacing: 1px; }
.attrs { display: flex; gap: 22px; flex-wrap: wrap; margin: 12px 0; }
.attrs .a .v { font-weight: 800; font-size: 1.05rem; }
.attrs .a .k { font-size: 11px; color: var(--rw-muted); text-transform: uppercase; letter-spacing: .03em; }
.pc-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 12px 0; }
@media (max-width: 600px) { .pc-cols { grid-template-columns: 1fr; } }
.pc-cols ul { margin: 4px 0; padding-left: 18px; font-size: 14px; }
.pros li { color: var(--rw-up); }
.cons li { color: #b45309; }
.feerow { display: flex; justify-content: space-between; font-size: 14px; border-bottom: 1px solid var(--rw-line); padding: 5px 0; }
details.more { margin-top: 8px; }
details.more summary { cursor: pointer; color: var(--rw-green); font-size: 14px; font-weight: 600; }

/* ---- Premium dark footer ------------------------------------------------- */
.site-footer { background: var(--rw-ink); color: rgba(255, 255, 255, .78); border-top: 1px solid rgba(255, 255, 255, .08); }
.site-footer .footer-grid .f-h4, .site-footer .footer-grid h4 { color: rgba(255, 255, 255, .72); }
.site-footer .footer-grid a { color: rgba(255, 255, 255, .82); }
.site-footer .footer-grid a:hover { color: #7cf0ae; }
.site-footer .footer-bottom { border-top-color: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .72); }

/* ---- Search ------------------------------------------------------------- */
.nav-search { display: flex; align-items: center; }
/* Narrower at rest so seven product sections fit beside it; it still expands to
   220px on focus, so nothing is lost when the box is actually being used. */
.nav-search input { height: 38px; width: 124px; padding: 7px 14px; border: 1px solid var(--rw-line); border-radius: 999px; font-size: 14px; background: var(--rw-surface-2); transition: width .18s var(--rw-ease), box-shadow .15s, border-color .15s; }
.nav-search input:focus { outline: none; width: 220px; border-color: var(--rw-green); box-shadow: 0 0 0 4px color-mix(in srgb, var(--rw-green) 16%, transparent); background: var(--rw-surface); }
@media (max-width: 1080px) { .nav-search input { width: 140px; } .nav-search input:focus { width: 170px; } }
.search-page-form { display: flex; gap: 10px; margin-top: 10px; max-width: 640px; }
.search-page-form input { flex: 1; height: 50px; font-size: 16px; border-radius: var(--rw-radius); padding: 0 16px; }
a.search-result { display: block; }

/* Cookie consent notice */
.rw-consent { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 70; max-width: 720px; margin: 0 auto;
  background: var(--rw-surface); border: 1px solid var(--rw-line); border-radius: 14px; box-shadow: var(--rw-shadow);
  padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
/* The flex display above overrides the UA [hidden] rule, so re-hide explicitly —
   otherwise the banner can never be dismissed (it sets `hidden` on Accept/Decline). */
.rw-consent[hidden] { display: none; }
.rw-consent p { margin: 0; font-size: 13.5px; color: var(--rw-muted); }
.rw-consent__actions { display: flex; gap: 10px; flex-shrink: 0; }
.rw-consent__actions .btn-ghost { padding: 8px 16px; border-radius: 8px; cursor: pointer; }
.rw-consent__actions .btn { cursor: pointer; }
/* On mobile the banner must clear the bottom tab bar, not hide behind it. */
@media (max-width: 767px) {
    .rw-consent { bottom: calc(72px + env(safe-area-inset-bottom)); }
}

/* Social share buttons */
.share { display: inline-flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.share__label { font-size: 13px; font-weight: 700; color: var(--rw-muted); margin-right: 2px; }
.share__btn { font-size: 12.5px; font-weight: 600; color: var(--rw-muted); background: var(--rw-surface-2);
  border: 1px solid var(--rw-line); border-radius: 999px; padding: 5px 11px; cursor: pointer; line-height: 1.4;
  transition: color .12s, border-color .12s, background .12s; }
.share__btn:hover { color: var(--rw-green); border-color: var(--rw-green); background: var(--rw-surface); text-decoration: none; }

/* --- Mobile stability: never let content force horizontal page scroll ----- */
/* Page-level guard (clip doesn't break position:sticky like overflow:hidden). */
html { overflow-x: clip; }
/* Grid/flex children get min-width:auto by default, so a wide child (table,
   long string, ad) expands the track past the viewport. Let columns shrink. */
@media (max-width: 940px) { .grid { grid-template-columns: minmax(0, 1fr); } }
.grid > *, .cmp-layout > *, .hero-grid > * { min-width: 0; }
/* Long unbreakable strings (URLs, account numbers) must wrap, not overflow. */
.prose, .body, .post-card, .card { overflow-wrap: break-word; }
/* Wide content tables scroll within their box instead of widening the page. */
.body table { display: block; width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
img, video, iframe, svg { max-width: 100%; }

/* --- Goal-based IA: launcher cards + goal ecosystems (home + /goals/{slug}) - */
.goal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: 14px; }
.goal-card { --gc: #10a35c; --gcs: rgba(16, 163, 92, .10); position: relative; display: flex; flex-direction: column; gap: 2px; background: var(--rw-surface); border: 1px solid var(--rw-line); border-radius: 18px; padding: 20px 18px; text-decoration: none; color: inherit; overflow: hidden; transition: transform .16s var(--rw-ease), box-shadow .16s, border-color .16s; }
.goal-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--gc); transform: scaleX(0); transform-origin: left; transition: transform .28s var(--rw-ease); }
.goal-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px var(--gcs); border-color: var(--gc); }
.goal-card:hover::before { transform: scaleX(1); }
.goal-ico { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--gcs); font-size: 24px; line-height: 1; margin-bottom: 11px; transition: transform .18s var(--rw-ease); }
.goal-card:hover .goal-ico { transform: scale(1.08) rotate(-5deg); }
.goal-card h3 { margin: 2px 0 0; font-size: 16px; }
.goal-card .meta { font-size: 13px; }
.goal-go { margin-top: auto; padding-top: 12px; color: var(--gc); font-weight: 800; font-size: 13px; }
/* Per-goal colour identity — each intent gets its own accent so the launcher
   reads as six distinct, vibrant doorways rather than one grey grid. */
.goal-card:nth-child(1) { --gc: #10a35c; --gcs: rgba(16, 163, 92, .10); }
.goal-card:nth-child(2) { --gc: #0ea5b7; --gcs: rgba(14, 165, 183, .11); }
.goal-card:nth-child(3) { --gc: #5b6ef5; --gcs: rgba(91, 110, 245, .11); }
.goal-card:nth-child(4) { --gc: #d98a1e; --gcs: rgba(217, 138, 30, .13); }
.goal-card:nth-child(5) { --gc: #e0546b; --gcs: rgba(224, 84, 107, .11); }
.goal-card:nth-child(6) { --gc: #8b5cf6; --gcs: rgba(139, 92, 246, .11); }

/* --- Explore money guides by topic: category hub cards --------------------
   This section shipped with no styling at all — .topic-grid was a plain block
   and the guides rendered as raw <ul> bullets, which is why the homepage's
   biggest block of content read as an undifferentiated wall of links.

   Each card carries its own accent in --th, set inline from the category slug
   (App\Support\TopicGlyph) so a topic keeps one identity wherever it lands in
   the grid. --thc is the same accent pushed toward legibility on the current
   surface: at full strength several of them fail WCAG AA as small text (the
   insurance teal measured 2.31:1 on its own count pill), so anything that has
   to be READ uses --thc, while hairlines, dots and tints — which carry no
   information — keep the raw, vivid --th. */
.topic-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(272px, 100%), 1fr)); gap: 16px; }
/* A young market may only have one or two categories deep enough to qualify
   (Zambia currently has one, Malawi two). With 1fr tracks that single card
   would stretch the full 1200px container and look broken, so cap the card
   itself — at four across the track is ~272px and this never binds. */
.topic-hub { max-width: 460px; --th: var(--rw-green); --thc: color-mix(in srgb, var(--th) 72%, #000000); position: relative; display: flex; flex-direction: column; background: var(--rw-surface); border: 1px solid var(--rw-line); border-radius: 18px; padding: 18px 18px 16px; overflow: hidden; transition: transform .16s var(--rw-ease), box-shadow .16s, border-color .16s; }
.topic-hub::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--th); transform: scaleX(0); transform-origin: left; transition: transform .28s var(--rw-ease); }
.topic-hub:hover { transform: translateY(-4px); border-color: var(--th); box-shadow: 0 18px 40px color-mix(in srgb, var(--th) 16%, transparent); }
.topic-hub:hover::before { transform: scaleX(1); }

.topic-hub-head { display: flex; align-items: center; gap: 12px; margin-bottom: 13px; }
.topic-ico { flex: none; display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; color: var(--thc); background: color-mix(in srgb, var(--th) 12%, transparent); transition: transform .18s var(--rw-ease); }
.topic-hub:hover .topic-ico { transform: scale(1.08) rotate(-5deg); }
.topic-hub-titles { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.topic-hub-head h3 { margin: 0; font-size: 16.5px; line-height: 1.25; letter-spacing: -.01em; }
.topic-hub-head h3 a { color: inherit; text-decoration: none; }
.topic-hub-head h3 a:hover { color: var(--thc); }
.topic-count { align-self: flex-start; font-size: 11.5px; font-weight: 700; color: var(--thc); background: color-mix(in srgb, var(--th) 11%, transparent); border-radius: 999px; padding: 2px 9px; }
.topic-desc { margin: -4px 0 12px; font-size: 13.5px; line-height: 1.5; color: var(--rw-muted); }

/* The guide list is the point of the card, so it gets real hit targets and a
   hover state rather than browser bullets. */
.topic-links { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 1px; }
.topic-links li { margin: 0; }
.topic-links a { display: block; position: relative; margin: 0 -9px; padding: 7px 9px 7px 22px; border-radius: 10px; font-size: 14.5px; font-weight: 600; line-height: 1.4; color: var(--rw-fg); text-decoration: none; transition: background-color .14s, color .14s; }
.topic-links a::before { content: ""; position: absolute; left: 9px; top: 15px; width: 5px; height: 5px; border-radius: 50%; background: color-mix(in srgb, var(--th) 55%, transparent); transition: transform .14s var(--rw-ease); }
.topic-links a:hover { background: color-mix(in srgb, var(--th) 8%, transparent); color: color-mix(in srgb, var(--thc) 72%, var(--rw-fg)); }
.topic-links a:hover::before { transform: scale(1.7); }

.topic-more { margin-top: auto; display: inline-block; font-size: 13px; font-weight: 800; color: var(--thc); text-decoration: none; }
.topic-more:hover { text-decoration: underline; text-underline-offset: 3px; }

/* These links carry no underline at rest, so the keyboard ring is the only
   thing marking position — make it deliberate rather than leaving it to the
   UA default over a rounded, negatively-margined box. */
.topic-hub-head h3 a:focus-visible, .topic-links a:focus-visible, .topic-more:focus-visible { outline: 2px solid var(--thc); outline-offset: 2px; border-radius: 8px; }

@media (prefers-color-scheme: dark) {
    /* Lift the accent off the dark panel — the raw hexes are tuned for white. */
    .topic-hub { --thc: color-mix(in srgb, var(--th) 58%, #ffffff); }
    .topic-hub:hover { box-shadow: 0 18px 40px rgba(0, 0, 0, .45); }
}

/* Quote/lead tiles: same energised, colour-coded treatment as the goal cards
   so the "Get free quotes" band reads as six inviting doorways, not grey boxes. */
.quote-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.quote-tiles .post-card { --qc: #10a35c; --qcs: rgba(16, 163, 92, .12); position: relative; padding: 20px 18px; border-radius: 16px; border: 1px solid var(--rw-line); overflow: hidden; transition: transform .16s var(--rw-ease), box-shadow .16s, border-color .16s; }
.quote-tiles .post-card::before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: 3px; background: var(--qc); transform: scaleY(0); transform-origin: top; transition: transform .28s var(--rw-ease); }
.quote-tiles .post-card:hover { transform: translateY(-4px); border-color: var(--qc); box-shadow: 0 16px 36px var(--qcs); }
.quote-tiles .post-card:hover::before { transform: scaleY(1); }
.quote-tiles .post-card h3 { font-size: 16px; margin: 0 0 5px; }
.quote-tiles .post-card:nth-child(1) { --qc: #0ea5b7; --qcs: rgba(14, 165, 183, .13); }
.quote-tiles .post-card:nth-child(2) { --qc: #5b6ef5; --qcs: rgba(91, 110, 245, .13); }
.quote-tiles .post-card:nth-child(3) { --qc: #e0546b; --qcs: rgba(224, 84, 107, .13); }
.quote-tiles .post-card:nth-child(4) { --qc: #10a35c; --qcs: rgba(16, 163, 92, .13); }
.quote-tiles .post-card:nth-child(5) { --qc: #d98a1e; --qcs: rgba(217, 138, 30, .14); }
.quote-tiles .post-card:nth-child(6) { --qc: #8b5cf6; --qcs: rgba(139, 92, 246, .13); }
.eco-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.eco { background: var(--rw-surface); border: 1px solid var(--rw-line); border-radius: 16px; padding: 20px; scroll-margin-top: 90px; }
.eco-head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px; }
.eco-head h3 { margin: 0; font-size: 17px; }
.eco-links { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
.eco-link { font-size: 13px; color: var(--rw-fg); background: var(--rw-surface-2); border: 1px solid var(--rw-line); border-radius: 999px; padding: 5px 11px; text-decoration: none; transition: border-color .12s, color .12s; }
.eco-link:hover { border-color: var(--rw-mint-line); color: var(--rw-green); }
.btn-sm { padding: 9px 16px; font-size: 14px; }

/* ---- Stepper (shared wizard component) ----------------------------------
   Generic one-question-per-screen flow: add data-stepper to a <form> whose
   steps are fieldset[data-step]. rateweb.js activates it (progress bar,
   auto-advance single-choice cards, per-step validation); without JS the
   same markup renders as a classic stacked form. Used by the financial-plan
   quiz; reuse for any future wizard. */
.stepper-shell { max-width: 680px; margin: 0 auto; }
form[data-stepper] fieldset.st-step { border: 0; padding: 0; margin: 0 0 22px; }
.js form.st-on fieldset.st-step { display: none; }
.js form.st-on fieldset.st-step.active { display: block; animation: stIn .22s ease; }
@keyframes stIn { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
.st-q { font-weight: 800; font-size: clamp(19px, 2.6vw, 24px); letter-spacing: -.02em; padding: 0; margin: 4px 0 18px; display: block; width: 100%; line-height: 1.3; }
.st-progress { margin: 6px 0 22px; }
.st-progress-top { display: flex; justify-content: space-between; align-items: center; min-height: 28px; }
.st-progress-label { font-size: 13px; font-weight: 650; color: var(--rw-muted); margin-left: auto; }
.st-back { width: auto; margin: 0; padding: 4px 6px; background: none; border: 0; color: var(--rw-muted); font-size: 14px; font-weight: 650; cursor: pointer; border-radius: 8px; }
.st-back:hover { color: var(--rw-fg); background: var(--rw-surface-2); }
.st-track { height: 6px; background: var(--rw-line); border-radius: 999px; overflow: hidden; margin-top: 8px; }
.st-track span { display: block; height: 100%; width: 0; background: var(--rw-grad); border-radius: 999px; transition: width .25s var(--rw-ease); }
.st-opts { display: grid; gap: 10px; }
@media (min-width: 640px) { .st-opts.two-col { grid-template-columns: 1fr 1fr; } }
.st-opt { position: relative; display: block; margin: 0; font-weight: 600; font-size: 15.5px; cursor: pointer; }
.st-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.st-opt span { display: flex; align-items: center; gap: 10px; padding: 15px 17px; border: 2px solid var(--rw-line); border-radius: 13px; background: var(--rw-surface); transition: border-color .12s, background .12s, transform .12s; }
.st-opt:hover span { border-color: color-mix(in srgb, var(--rw-green) 45%, var(--rw-line)); transform: translateY(-1px); }
.st-opt input:checked + span { border-color: var(--rw-green); background: var(--rw-mint); }
.st-opt input:focus-visible + span { outline: 2px solid var(--rw-green); outline-offset: 2px; }
.st-opt input:checked + span::after { content: "✓"; margin-left: auto; color: var(--rw-green); font-weight: 800; }
.st-next { margin-top: 18px; }
.js form.st-on .st-next[data-auto] { display: none; } /* singles auto-advance; Next shows only when prefilled */
.js form.st-on fieldset.prefilled .st-next[data-auto] { display: inline-flex; }
.st-invalid .st-opt span { border-color: #fca5a5; }
.st-hint { color: var(--rw-muted); font-size: 13.5px; margin-top: 14px; }

/* ==========================================================================
   App feel — bottom tab bar, press physics, hide-on-scroll header.
   ========================================================================== */

/* Kill the grey tap flash and double-tap zoom delay on everything tappable. */
a, button, .card, .opt, .st-opt, .calc-tile, .topic-hub, .pillar-card, .goal-card, .feat {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
/* Tactile press: interactive surfaces compress slightly under the thumb. */
@media (hover: none) {
    a.card:active, button:active, .btn:active, .goal-card:active, .calc-tile:active,
    .topic-hub:active, .pillar-card:active, .feat:active, .st-opt:active span, .opt:active span,
    .post-card:active, .stat-card:active, .explore-card:active {
        transform: scale(.975);
        transition: transform .06s ease;
    }
}

/* Bottom tab bar — mobile only, safe-area aware. */
.tabbar {
    display: none;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: color-mix(in srgb, var(--rw-surface) 88%, transparent);
    backdrop-filter: saturate(180%) blur(16px);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    border-top: 1px solid var(--rw-line);
    padding: 6px max(10px, env(safe-area-inset-left)) calc(6px + env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-right));
}
@media (max-width: 767px) {
    .tabbar { display: grid; grid-template-columns: repeat(5, 1fr); }
    body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
}
.tb-item {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 6px 2px 4px; border-radius: 12px;
    color: var(--rw-muted); font-size: 10.5px; font-weight: 650; letter-spacing: .01em;
    text-decoration: none; transition: color .15s;
}
.tb-item:hover { text-decoration: none; }
.tb-item svg { width: 23px; height: 23px; }
.tb-item.active { color: var(--rw-green); }
.tb-item.active svg { stroke-width: 2.2; }
.tb-item:active { transform: scale(.92); transition: transform .06s ease; }

/* Hide-on-scroll header (mobile): scrolling down tucks the header away for a
   full-screen reading feel; any upward scroll brings it back instantly. */
@media (max-width: 767px) {
    .site-header { transition: transform .22s var(--rw-ease); will-change: transform; }
    .site-header.hdr-hide { transform: translateY(-100%); }
}

/* Installed-app mode: no rubber-band pull-to-refresh fighting the tab bar. */
@media (display-mode: standalone) {
    html, body { overscroll-behavior-y: contain; }
}

/* Push opt-in chip */
.pulse-bell { cursor: pointer; border-style: dashed; }
.pulse-bell.push-on { border-style: solid; border-color: var(--rw-green); background: var(--rw-mint); }


/* ==========================================================================
   Option A "Forest" redesign (design-handoff/) — homepage components.
   Dark hero + glass score teaser, brief bar, rate radar, benchmark band,
   goal doorways, editorial reads, dark footer.
   ========================================================================== */

.f-display { font-family: var(--rw-display); font-weight: 560; letter-spacing: -.01em; }

/* Daily brief bar — the daily return hook */
.brief-bar { background: var(--rw-panel); color: #CDE8D6; font-size: 12.5px; font-weight: 600; }
.brief-bar .in { max-width: var(--rw-wrap); margin: 0 auto; padding: 8px 22px; display: flex; align-items: center; gap: 22px; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
.brief-bar .in::-webkit-scrollbar { display: none; }
.brief-bar .tag { display: inline-flex; align-items: center; gap: 7px; color: var(--rw-lime2); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: 11px; }
.brief-bar .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--rw-lime2); animation: rwPulseDot 2.4s ease infinite; }
.brief-bar strong { color: #fff; }
.brief-bar .up { color: var(--rw-lime2); }
.brief-bar .dn { color: #FCA5A5; }
.brief-bar a { color: var(--rw-lime2); font-weight: 700; margin-left: auto; }
/* Web-push opt-in. Sits beside the daily-brief link (email's counterpart), so
   it takes a fixed margin, not the auto that right-aligns the links. */
.brief-bar .bell { flex: none; margin-left: -8px; background: none; border: 1px dashed rgba(205, 232, 214, .45); border-radius: 999px; padding: 3px 11px; color: var(--rw-lime2); font: inherit; font-weight: 700; cursor: pointer; }
.brief-bar .bell:hover { border-color: var(--rw-lime2); }
.brief-bar .bell.push-on { border-style: solid; border-color: var(--rw-lime2); }
@keyframes rwPulseDot { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* Hero — forest gradient, glow orbs, score teaser */
/* LIGHT hero. Was a near-black forest gradient with white text; the reference
   set the brand is measured against (Hippo, Ratehub, NerdWallet) all lead light,
   and a dark slab above the fold made the page feel heavy before a single
   product was seen. The Forest palette survives as tint and as the text colour
   rather than as a wall of colour.

   Everything below is scoped to .rw-hero on purpose: .cta-lime, .cta-ghost-dark,
   .score-teaser and .rw-strip are all used on dark surfaces elsewhere, so their
   global rules must not move. */
.rw-hero { position: relative; overflow: hidden; background: linear-gradient(168deg, #F3FAF6 0%, #E9F5EF 55%, #E7F3F4 100%); color: #14342A; border-bottom: 1px solid #D8E9DF; }
.rw-hero::before { content: ""; position: absolute; width: 560px; height: 560px; right: -140px; top: -200px; background: radial-gradient(circle, #36C46B, transparent 70%); filter: blur(80px); opacity: .18; }
.rw-hero::after { content: ""; position: absolute; width: 420px; height: 420px; left: -160px; bottom: -220px; background: radial-gradient(circle, #14B8C4, transparent 70%); filter: blur(90px); opacity: .14; }
.rw-hero .grid { position: relative; z-index: 1; max-width: var(--rw-wrap); margin: 0 auto; padding: 64px 22px 56px; display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
/* The lime eyebrow was legible on near-black and is not on mint — deep brand
   green keeps the accent role with the contrast a light surface needs. */
.rw-hero .eyebrow2 { display: inline-flex; align-items: center; gap: 8px; color: #0B6B3A; font-weight: 800; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.rw-hero .eyebrow2::before { content: ""; width: 18px; height: 2px; background: #0B6B3A; border-radius: 2px; }
.rw-hero h1 { font-family: var(--rw-display); font-weight: 560; font-size: clamp(2.6rem, 1.8rem + 3.4vw, 4.2rem); line-height: 1.04; letter-spacing: -.02em; margin: .35em 0 .3em; max-width: 14ch; color: #0B3B26; }
.rw-hero .lead2 { color: #3A574B; font-size: 1.2rem; line-height: 1.6; max-width: 46ch; margin: 0; }
/* Hero quote picker (select + button on one row, stacking on narrow screens).
   A solid white card lifted off the mint background — the pattern Hippo and
   MoneySuperMarket both use to make the quote control the obvious primary
   action. The select is sized for thumbs: 48px is the minimum comfortable touch
   target and most homepage traffic is mobile. */
.rw-hero .hero-quote { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 30px; background: #fff; border: 1px solid #D8E9DF; border-radius: 14px; padding: 10px; max-width: 560px; box-shadow: 0 10px 30px rgba(11,59,38,.10); }
.rw-hero .hero-quote__select { flex: 1 1 240px; min-height: 48px; padding: 0 14px; border-radius: 10px; border: 1px solid #CFE0D6; background: #fff; color: #0B3B26; font-size: 16px; font-weight: 600; }
.rw-hero .hero-quote button { min-height: 48px; white-space: nowrap; border: 0; cursor: pointer; font-size: 16px; }
.rw-hero .ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
/* The ghost CTA is built for dark surfaces (white-on-white here), so the hero
   gets its own outlined variant. The global rule is untouched for the dark
   sections further down the page. */
.rw-hero .cta-ghost-dark { background: #fff; border: 1px solid #CFE0D6; color: #0B3B26; }
.rw-hero .cta-ghost-dark:hover { background: #F3FAF6; color: #0B3B26; }
.cta-lime { display: inline-flex; align-items: center; gap: 8px; background: var(--rw-grad-cta); color: #062515; font-weight: 800; font-size: 16.5px; padding: 16px 30px; border-radius: 14px; box-shadow: 0 14px 36px rgba(54,196,107,.35); transition: transform .15s var(--rw-ease); }
.cta-lime:hover { text-decoration: none; transform: translateY(-2px); color: #062515; }
.cta-ghost-dark { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.22); color: #fff; font-weight: 700; font-size: 16px; padding: 16px 26px; border-radius: 14px; }
.cta-ghost-dark:hover { background: rgba(255,255,255,.16); text-decoration: none; color: #fff; }
.rw-hero .proof { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 26px; color: #52705F; font-size: 13.5px; font-weight: 600; }

/* Score teaser — a solid white card now the hero is light. The dark score RING
   below is kept dark on purpose: it is the one piece of data viz here, and the
   contrast is what makes the number read at a glance. */
.score-teaser { background: #fff; border: 1px solid #D8E9DF; border-radius: 24px; padding: 26px; box-shadow: 0 20px 50px rgba(11,59,38,.12); max-width: 440px; justify-self: end; width: 100%; }
.score-teaser .head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.score-teaser .head strong { font-size: 14.5px; color: #0B3B26; }
.score-teaser .live { font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #0B6B3A; background: #E4F6EC; border-radius: 999px; padding: 4px 11px; }
.score-teaser .row { display: flex; gap: 24px; align-items: center; }
.st-ring { flex: none; width: 128px; height: 128px; border-radius: 50%; display: grid; place-items: center; }
.st-ring > div { width: 98px; height: 98px; border-radius: 50%; background: #0A2818; display: grid; place-items: center; text-align: center; }
.st-ring b { font-size: 2.1rem; font-weight: 800; line-height: 1; color: #fff; display: block; }
.st-ring small { font-size: 10.5px; color: rgba(255,255,255,.6); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; margin-top: 3px; display: block; }
.score-teaser .sliders { flex: 1; display: flex; flex-direction: column; gap: 14px; }
.score-teaser label { display: block; }
.score-teaser label > span { display: flex; justify-content: space-between; font-size: 12.5px; color: #52705F; font-weight: 650; margin-bottom: 5px; }
.score-teaser label strong { color: #0B3B26; }
.score-teaser input[type="range"] { width: 100%; accent-color: #0B6B3A; cursor: pointer; height: 22px; }
.score-teaser .foot { margin-top: 18px; padding-top: 16px; border-top: 1px solid #E3EFE8; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.score-teaser .foot span { font-size: 13px; color: #52705F; }
.score-teaser .foot a { flex: none; font-size: 13px; font-weight: 800; color: #0B6B3A; }
.score-teaser .foot a:hover { color: #0B3B26; text-decoration: none; }

/* Returning-member strip: the hero is light now, so it simply keeps the default
   mint surface from line ~128 rather than overriding to glass. Only layout is
   set here. */
.rw-hero .rw-strip { margin: 26px auto 0; max-width: calc(var(--rw-wrap) - 44px); position: relative; z-index: 1; }

/* Marquee ticker */
.rw-ticker { position: relative; z-index: 1; border-top: 1px solid #D8E9DF; overflow: hidden; }
.rw-ticker .track { display: flex; gap: 40px; padding: 12px 0; white-space: nowrap; width: max-content; animation: rwTickerScroll 36s linear infinite; }
.rw-ticker:hover .track { animation-play-state: paused; }
.rw-ticker span.item { font-size: 13px; font-weight: 700; color: #14342A; }
.rw-ticker .v { color: #52705F; font-weight: 600; }
/* Up/down need real contrast on mint: the pale lime and pink read as decoration
   on a light surface, and these carry actual market direction. */
.rw-ticker .up { color: #0B6B3A; } .rw-ticker .dn { color: #B4232A; }
@keyframes rwTickerScroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .rw-ticker .track { animation: none; } }

/* Section headers (Fraunces) */
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 6px; }
.sec-head h2 { font-family: var(--rw-display); font-weight: 560; font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.1rem); letter-spacing: -.01em; margin: 0; }
.sec-head a { font-size: 14px; font-weight: 700; }
.sec-sub { color: var(--rw-muted); font-size: 14.5px; margin: 0 0 20px; max-width: 64ch; }

/* Rate radar */
.radar { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.radar a { display: flex; flex-direction: column; gap: 6px; background: var(--rw-surface); border: 1px solid var(--rw-line); border-radius: 16px; padding: 18px 20px; color: inherit; transition: transform .15s ease, box-shadow .15s ease; }
.radar a:hover { text-decoration: none; transform: translateY(-3px); box-shadow: 0 16px 36px rgba(11,107,58,.12); }
.radar .cat { font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--rw-green); }
.radar .num { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.radar .num strong { font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.radar .why { font-size: 13px; color: var(--rw-muted); }
.pill-up { font-size: 12.5px; font-weight: 800; color: var(--rw-green); background: var(--rw-mint); border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.pill-dn { font-size: 12.5px; font-weight: 800; color: #C2372F; background: #FDEBE9; border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.pill-flat { font-size: 12.5px; font-weight: 800; color: var(--rw-rust); background: var(--rw-rust-bg); border-radius: 999px; padding: 2px 9px; white-space: nowrap; }

/* Benchmark band */
.bench { background: var(--rw-panel); border-radius: 24px; padding: 40px; display: grid; grid-template-columns: 1fr 1.1fr; gap: 44px; align-items: center; color: #fff; overflow: hidden; position: relative; }
.bench::after { content: ""; position: absolute; width: 380px; height: 380px; right: -100px; bottom: -180px; background: radial-gradient(circle, #19A659, transparent 70%); filter: blur(70px); opacity: .35; }
.bench h2 { font-family: var(--rw-display); font-weight: 560; font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.4rem); line-height: 1.12; letter-spacing: -.01em; margin: 0 0 12px; color: #fff; }
.bench p { color: rgba(255,255,255,.72); font-size: 15.5px; line-height: 1.65; margin: 0; max-width: 44ch; }
.bench .cta-lime { margin-top: 22px; font-size: 15px; padding: 13px 26px; border-radius: 12px; box-shadow: none; }
.bench .bars { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 16px; }
.bench .bar-head { display: flex; justify-content: space-between; font-size: 13px; font-weight: 650; margin-bottom: 6px; }
.bench .bar-head span { color: rgba(255,255,255,.75); }
.bench .bar-head strong.g { color: var(--rw-lime2); } .bench .bar-head strong.w { color: var(--rw-gold); }
.bench .track2 { height: 10px; background: rgba(255,255,255,.1); border-radius: 999px; overflow: hidden; }
.bench .track2 > div { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #19A659, #7CF0AE); }
.bench .track2 > div.w { background: linear-gradient(90deg, #D97706, #FCD34D); }
.bench .bar-foot { display: flex; justify-content: space-between; gap: 12px; font-size: 11px; color: rgba(255,255,255,.45); margin-top: 4px; white-space: nowrap; }
.bench .note2 { font-size: 12px; color: rgba(255,255,255,.4); }

/* Goal doorways */
/* Goal doorways. Was `repeat(auto-fit, minmax(180px, 1fr))`, which at the
   container's 1136px lands on FIVE columns — so the six-goal markets rendered
   five cards and left the sixth stranded alone on its own row. Markets carry
   4, 5 or 6 goals, and no fixed column count divides all three.

   Flex with a one-third basis and a centred last row handles every case with
   equal-width cards: 6 => 3+3, 5 => 3+2 centred, 4 => 3+1 centred. */
.doorways { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.doorways a { flex: 0 1 calc(33.333% - 10px); display: flex; flex-direction: column; align-items: flex-start; gap: 4px; background: var(--rw-surface); border: 1px solid var(--rw-line); border-top: 3px solid var(--dw, var(--rw-green)); border-radius: 16px; padding: 20px 18px; color: inherit; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.doorways a:hover { text-decoration: none; transform: translateY(-4px); box-shadow: 0 18px 40px color-mix(in srgb, var(--dw, var(--rw-green)) 16%, transparent); }
.doorways strong { font-size: 16.5px; letter-spacing: -.01em; }
.doorways span { font-size: 13px; color: var(--rw-muted); }
.doorways .dw-tag { font-size: 13.5px; line-height: 1.5; }
/* Needs `.doorways .dw-ico` (0,2,0) — plain `.dw-ico` would lose to the
   `.doorways span` rule above (0,1,1) and inherit the 13px tagline size. */
.doorways .dw-ico { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: color-mix(in srgb, var(--dw, var(--rw-green)) 13%, transparent); font-size: 22px; line-height: 1; margin-bottom: 10px; transition: transform .18s var(--rw-ease); }
.doorways a:hover .dw-ico { transform: scale(1.08) rotate(-5deg); }
@media (max-width: 900px) { .doorways a { flex-basis: calc(50% - 7px); } }
@media (max-width: 560px) { .doorways a { flex-basis: 100%; } }
.doorways a:nth-child(1) { --dw: #10A35C; } .doorways a:nth-child(2) { --dw: #0EA5B7; }
.doorways a:nth-child(3) { --dw: #5B6EF5; } .doorways a:nth-child(4) { --dw: #D98A1E; }
.doorways a:nth-child(5) { --dw: #E0546B; } .doorways a:nth-child(6) { --dw: #8B5CF6; }

/* Editorial: today's reads */
.reads { display: grid; grid-template-columns: 1.35fr 1fr; gap: 22px; }
.reads .feat { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 380px; border-radius: 20px; overflow: hidden; color: #fff; background: linear-gradient(135deg, #0E7D44, #15BDB0); }
.reads .feat:hover { text-decoration: none; }
.reads .feat img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.reads .feat .scrim { position: relative; padding: 28px; background: linear-gradient(transparent, rgba(6,37,21,.92) 55%); }
.reads .feat .cat { display: inline-block; background: rgba(255,255,255,.92); color: var(--rw-panel); font-size: 11.5px; font-weight: 800; padding: 4px 11px; border-radius: 999px; margin-bottom: 12px; }
.reads .feat h3 { font-family: var(--rw-display); font-weight: 560; font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); line-height: 1.15; margin: 0; color: #fff; }
.reads .feat .meta2 { font-size: 13px; color: rgba(255,255,255,.7); margin-top: 10px; font-weight: 600; }
.reads .list { display: flex; flex-direction: column; gap: 14px; }
.reads .list a { display: flex; gap: 16px; align-items: center; background: var(--rw-surface); border: 1px solid var(--rw-line); border-radius: 16px; padding: 16px 18px; color: inherit; transition: transform .15s ease, box-shadow .15s ease; }
.reads .list a:hover { text-decoration: none; transform: translateY(-2px); box-shadow: 0 12px 28px rgba(11,107,58,.1); }
.reads .n { flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--rw-mint); display: grid; place-items: center; font-weight: 800; color: var(--rw-green); font-size: 13px; }
.reads .list strong { font-size: 15px; line-height: 1.35; display: block; }
.reads .list .meta2 { font-size: 12.5px; color: var(--rw-muted); font-weight: 600; }

/* Quotes band */
.quotes-a { background: var(--rw-surface); border: 1px solid var(--rw-line); border-radius: 24px; padding: 36px 40px; display: flex; gap: 28px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.quotes-a h2 { font-family: var(--rw-display); font-weight: 560; font-size: 1.6rem; letter-spacing: -.01em; margin: 0 0 6px; }
.quotes-a p { color: var(--rw-muted); font-size: 14.5px; margin: 0; max-width: 56ch; }

/* Dark footer restyle (overrides the earlier .site-footer rules) */
.site-footer { background: var(--rw-panel); color: rgba(255,255,255,.6); }
.site-footer a { color: rgba(255,255,255,.82); }
.site-footer a:hover { color: var(--rw-lime2); text-decoration: none; }
.site-footer h4 { color: rgba(255,255,255,.4); }

/* Responsive collapse */
@media (max-width: 960px) {
    .rw-hero .grid { grid-template-columns: 1fr; gap: 30px; }
    .score-teaser { justify-self: start; max-width: 480px; }
    .bench { grid-template-columns: 1fr; gap: 30px; padding: 28px; }
    .reads { grid-template-columns: 1fr; }
    .reads .feat { min-height: 300px; }
}


/* ==========================================================================
   Option A — Money OS dashboard dark command-centre (design-handoff/).
   Applied via body.os-dark on the dashboard page only; sibling member pages
   keep the light shell until their own phase.
   ========================================================================== */

.os-dark { background: var(--rw-ink-page) !important; color: #E9F4EC; }
.os-dark .acc-head { background: rgba(7,19,12,.85); border-bottom-color: rgba(255,255,255,.08); }
.os-dark .app-side { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); box-shadow: none; }
.os-dark .side-link { color: #DCEBE1; }
.os-dark .side-link:hover { background: rgba(255,255,255,.06); }
.os-dark .side-link.on { background: rgba(124,240,174,.12); color: var(--rw-lime2); }
.os-dark .side-group h5 { color: #8FA89A; }
.os-dark h1, .os-dark h2, .os-dark h3, .os-dark strong { color: #fff; }
.os-dark .meta, .os-dark .side-link .meta { color: #8FA89A; }
.os-dark .card, .os-dark .stat { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); box-shadow: none; color: #DCEBE1; }
.os-dark .card:hover, .os-dark a.card:hover { border-color: rgba(124,240,174,.3); }
.os-dark .fin-table th { color: #8FA89A; }
.os-dark .fin-table th, .os-dark .fin-table td { border-bottom-color: rgba(255,255,255,.07); }
.os-dark .progress { background: rgba(255,255,255,.08); }
.os-dark .btn-ghost { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); color: var(--rw-lime2); }
.os-dark .pill { background: rgba(124,240,174,.12); color: var(--rw-lime2); }
.os-dark .inline-form input, .os-dark .inline-form select, .os-dark input[type="number"], .os-dark input[type="text"] { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); color: #E9F4EC; }
.os-dark .link { color: var(--rw-lime2); }

/* Greeting + streak row */
.os-greet { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 24px; }
.os-greet .date { font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #8FA89A; }
.os-greet h1 { font-family: var(--rw-display); font-weight: 560; font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.5rem); letter-spacing: -.01em; line-height: 1.1; margin: .15em 0 0; color: #fff; }
.streak-mod { display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09); border-radius: 16px; padding: 12px 18px; }
.streak-mod .flame { font-size: 22px; display: inline-block; animation: rwFlame 2.6s ease infinite; }
@keyframes rwFlame { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .streak-mod .flame { animation: none; } }
.streak-mod .d { font-weight: 800; font-size: 15px; color: #fff; line-height: 1.2; }
.week-dots { display: flex; gap: 5px; margin-top: 5px; }
.week-dots span { width: 14px; height: 14px; border-radius: 50%; background: rgba(255,255,255,.07); }
.week-dots span.on { background: #36C46B; }
.week-dots span.today { background: transparent; border: 2px solid var(--rw-lime2); box-sizing: border-box; }
.week-dots span.today.on { background: #36C46B; border-color: var(--rw-lime2); }
.checked-chip { display: inline-flex; align-items: center; gap: 8px; background: rgba(124,240,174,.1); border: 1px solid rgba(124,240,174,.3); color: var(--rw-lime2); font-weight: 800; font-size: 14px; padding: 13px 22px; border-radius: 14px; }

/* Dark score panel (keeps the existing .money-os JS hooks) */
.os-dark .money-os { background: linear-gradient(150deg, #0C2A1A, #0A1F14 70%); border: 1px solid rgba(124,240,174,.16); position: relative; overflow: hidden; }
.os-dark .money-os::before { content: ""; position: absolute; width: 340px; height: 340px; right: -120px; top: -140px; background: radial-gradient(circle, #19A659, transparent 70%); filter: blur(70px); opacity: .3; }
.os-dark .mos-top, .os-dark .mos-foot, .os-dark .mos-qw { position: relative; z-index: 1; }
.os-dark .mos-ring { flex: 0 0 164px; width: 164px; height: 164px; background: conic-gradient(from -90deg, #7CF0AE 0deg, #36C46B calc(var(--os,0) * 2.16deg), #14B8C4 calc(var(--os,0) * 3.6deg), rgba(255,255,255,.08) 0); }
.os-dark .mos-ring > div { width: 128px; height: 128px; background: #0A2113; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.os-dark .mos-ring b { font-size: 2.7rem; color: #fff; }
.os-dark .mos-ring small { color: #8FA89A; }
.os-dark .mos-chip { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.09); color: #E9F4EC; }
.os-dark .mos-chip .k { color: #8FA89A; }
.os-dark .mos-track { background: rgba(255,255,255,.08); }
.os-dark .mos-bench { color: #8FA89A; }
.os-dark .mos-foot { border-top-color: rgba(255,255,255,.1); }
.os-dark .mos-goal > span:first-child, .os-dark .mos-wins { color: #8FA89A; }

/* Level system */
.os-level { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.os-level h2 { font-size: 1.25rem; font-weight: 800; letter-spacing: -.01em; margin: 0; color: #fff; }
.lvl-chip { font-size: 11.5px; font-weight: 800; color: var(--rw-gold); background: rgba(252,211,77,.1); border: 1px solid rgba(252,211,77,.25); border-radius: 999px; padding: 3px 10px; }
.lvl-bar { height: 8px; background: rgba(255,255,255,.08); border-radius: 999px; overflow: hidden; margin: 12px 0 6px; }
.lvl-bar > div { height: 100%; background: linear-gradient(90deg, #19A659, #7CF0AE); border-radius: 999px; }
.lvl-note { font-size: 12.5px; color: #8FA89A; }

/* Next best move */
.next-move { display: flex; flex-direction: column; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 24px; padding: 26px; margin: 18px 0; }
.next-move .top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.next-move .eyebrow3 { font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--rw-lime2); }
.next-move h3 { font-family: var(--rw-display); font-weight: 560; font-size: clamp(1.3rem, 1.1rem + .9vw, 1.7rem); line-height: 1.2; margin: 12px 0 8px; color: #fff; }
.next-move p { margin: 0; color: #B6C9BC; font-size: 14.5px; line-height: 1.6; }
.next-move .acts { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.next-move .foot2 { margin-top: 14px; font-size: 12.5px; color: #8FA89A; }

/* Shell-aware card variants used by the dashboard (light + os-dark) */
.mint-card { background: var(--rw-mint); border-color: var(--rw-mint-line); }
.os-dark .mint-card { background: rgba(124,240,174,.08); border-color: rgba(124,240,174,.25); }
.win-tile { flex: 0 0 auto; min-width: 158px; max-width: 230px; padding: 12px 14px; border: 1px solid var(--rw-mint-line); border-radius: 12px; background: var(--rw-mint); }
.os-dark .win-tile { background: rgba(252,211,77,.07); border-color: rgba(252,211,77,.25); }
.hs-inner { background: #fff; }
.os-dark .hs-inner { background: #0A2113; }
.insight-note { background: #fefce8; }
.os-dark .insight-note { background: rgba(252,211,77,.08); }

/* Option A — article page: freshness chips, Fraunces title. (The reading
   progress bar is defined ONCE near the header styles — container + animated
   span, driven by the rAF handler in rateweb.js. A duplicate element-as-bar
   rule here used to collapse that container to width:0; don't re-add it.) */
.fresh-chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.fresh-chips .verified { display: inline-flex; align-items: center; gap: 6px; background: var(--rw-mint); color: var(--rw-green); font-size: 12px; font-weight: 800; border-radius: 999px; padding: 5px 13px; }
.fresh-chips .verified::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #10A35C; }
.fresh-chips .chip2 { background: var(--rw-surface); border: 1px solid var(--rw-line); color: var(--rw-muted); font-size: 12px; font-weight: 700; border-radius: 999px; padding: 5px 13px; text-decoration: none; }
.fresh-chips a.chip2:hover { color: var(--rw-green); border-color: var(--rw-mint-line); text-decoration: none; }
.article-head h1 { font-family: var(--rw-display); font-weight: 560; font-size: clamp(2rem, 1.5rem + 2.2vw, 3rem); line-height: 1.08; letter-spacing: -.015em; }

/* Option A — markets board */
.board-eyebrow { display: inline-flex; align-items: center; gap: 7px; color: var(--rw-green); font-weight: 800; letter-spacing: .07em; text-transform: uppercase; font-size: 11.5px; }
.board-eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #10A35C; animation: rwPulseDot 2.4s ease infinite; }
.board-h1 { font-family: var(--rw-display); font-weight: 560; font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.6rem); letter-spacing: -.015em; margin: .15em 0 .2em; }
.movers-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 16px 0; }
.movers-strip > div { background: var(--rw-surface); border: 1px solid var(--rw-line); border-radius: 14px; padding: 14px 16px; }
.movers-strip .l2 { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--rw-muted); }
.movers-strip .l2.dn2 { color: var(--rw-rust); }
.movers-strip strong { display: block; font-size: 1.15rem; letter-spacing: -.01em; margin-top: 3px; }
.movers-strip .v2 { font-size: 12.5px; font-weight: 700; }
.seg-tabs { display: inline-flex; gap: 4px; background: var(--rw-surface); border: 1px solid var(--rw-line); border-radius: 12px; padding: 4px; }
.seg-tabs a { padding: 8px 16px; border-radius: 9px; font-size: 13.5px; font-weight: 700; color: var(--rw-muted); }
.seg-tabs a:hover { text-decoration: none; color: var(--rw-fg); }
.seg-tabs a.on { background: var(--rw-panel); color: var(--rw-lime2); }
.tie-back { background: var(--rw-panel); border-radius: 18px; color: #fff; padding: 22px 26px; display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin: 26px 0 8px; }
.tie-back p { margin: 0; color: rgba(255,255,255,.75); font-size: 14.5px; max-width: 58ch; }
.tie-back strong { color: #fff; }

/* ============ Option A - compare hub top-pick rows (phase 4c) ============ */
.tp-row{display:block;background:var(--rw-mint);border:1px solid var(--rw-mint-line);border-left:3px solid var(--rw-green);border-radius:10px;padding:9px 12px;text-decoration:none;color:var(--rw-fg);transition:transform .15s var(--rw-ease)}
.tp-row:hover{transform:translateX(3px)}
.tp-tag{display:block;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--rw-green)}
.tp-name{display:block;font-weight:700;font-size:13.5px;margin-top:2px;line-height:1.3}
.tp-meta{display:block;font-size:12px;color:var(--rw-muted);margin-top:2px}

/* ============ Option A - watch pills on board rows (phase 4d) ============ */
.watch-pill{width:28px;height:28px;border-radius:50%;border:1px solid var(--rw-line);background:var(--rw-surface);color:var(--rw-muted);font-size:14px;line-height:1;cursor:pointer;transition:transform .15s var(--rw-ease),color .15s}
.watch-pill:hover{transform:scale(1.15);color:var(--rw-green);border-color:var(--rw-green)}
.watch-pill.on{color:var(--rw-gold);border-color:var(--rw-gold);background:var(--rw-mint)}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ============ Option A - article rate-table hero + act rail (3b) ============ */
.rate-hero{margin:18px 0;padding:20px}
.rh-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.rh-head h2{margin:2px 0;font-family:Fraunces,Georgia,serif;font-weight:560;font-size:1.35rem}
.rh-eyebrow{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--rw-green)}
.rh-watch{flex:0 0 auto;width:34px;height:34px;font-size:16px}
.rh-rows{margin-top:12px;display:grid;gap:8px}
.rh-row{display:flex;align-items:center;gap:12px;border:1px solid var(--rw-line);border-radius:12px;padding:11px 14px}
.rh-row.win{background:var(--rw-mint);border-color:var(--rw-mint-line)}
.rh-who{flex:1;min-width:0;display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:14px}
.rh-best{background:var(--rw-gold);color:#4a3403;font-size:10.5px;font-weight:800;border-radius:999px;padding:3px 9px;white-space:nowrap}
.rh-delta{font-size:11px;font-weight:700;white-space:nowrap}
.rh-delta.up{color:var(--rw-green)}
.rh-delta.dn{color:#c2372f}
.rh-rate{font-size:19px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.01em;white-space:nowrap}
.rh-open{padding:8px 14px;font-size:13px;white-space:nowrap}
@media (max-width:640px){.rh-row{flex-wrap:wrap}.rh-rate{order:-1;width:100%}}
.act-card{background:var(--rw-panel,#0A1F14);border-radius:var(--rw-radius-lg,16px);padding:20px;margin-bottom:18px;color:#e8f3ec}
.act-card .rh-eyebrow{color:var(--rw-lime2,#7CF0AE)}
.act-amt{font-size:26px;font-weight:800;font-variant-numeric:tabular-nums;color:#fff}
.act-card input[type=range]{width:100%;margin:10px 0;accent-color:var(--rw-lime2,#7CF0AE);height:26px}
.act-earn{font-size:13px;color:#9fbfae;line-height:1.45}
.act-earn b{color:var(--rw-gold,#FCD34D);font-variant-numeric:tabular-nums}
.act-btn{display:block;text-align:center;margin-top:14px}

/* ============ Option A phase 5 - mobile polish ============ */
@media (max-width: 767px) {
    /* Swipe rows: rate radar + movers become full-bleed thumb scrollers */
    .radar, .movers-strip { display: flex; overflow-x: auto; gap: 12px; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding: 2px 16px 10px; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
    .radar::-webkit-scrollbar, .movers-strip::-webkit-scrollbar { display: none; }
    .radar a { flex: 0 0 230px; scroll-snap-align: start; }
    .movers-strip > div { flex: 0 0 200px; scroll-snap-align: start; }
    /* Segmented tabs stretch edge to edge */
    .seg-tabs { display: flex; width: 100%; }
    .seg-tabs a { flex: 1; text-align: center; padding: 10px 8px; }
    /* Thumb-sized tap targets and sliders */
    .watch-pill { width: 40px; height: 40px; font-size: 17px; }
    input[type=range] { height: 28px; }
    /* Active tab gets the mint pill */
    .tb-item.active { background: var(--rw-mint); }
    body { padding-bottom: calc(78px + env(safe-area-inset-bottom)); }
}
@media (max-width: 767px) and (prefers-color-scheme: dark) {
    .tb-item.active { color: var(--rw-lime2, #7CF0AE); }
}

/* ============ Option A - crypto extras: breadth gauge + alert band ============ */
.mood-card{background:var(--rw-panel,#0A1F14);border-radius:var(--rw-radius-lg,16px);padding:16px 20px;margin:14px 0;color:#e8f3ec}
.mood-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.mood-label{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--rw-lime2,#7CF0AE)}
.mood-top strong{font-size:17px}
.mood-bar{height:10px;border-radius:999px;background:rgba(255,255,255,.12);position:relative;margin:10px 0 8px;overflow:hidden}
.mood-bar span{position:absolute;inset:0 auto 0 0;border-radius:999px;background:linear-gradient(90deg,#FCD34D,#7CF0AE);transition:width .4s ease}
.mood-foot{font-size:12.5px;color:#9fbfae}
.alert-band{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;background:var(--rw-mint);border:1px solid var(--rw-mint-line);border-radius:var(--rw-radius-lg,16px);padding:16px 20px;margin:16px 0}
.alert-controls{display:flex;gap:8px;align-items:stretch;flex-wrap:wrap}
.alert-controls select{border:1px solid var(--rw-line);border-radius:10px;padding:9px 10px;font-size:13.5px;font-weight:600;background:var(--rw-surface)}
.in-group2{display:flex;align-items:center;border:1px solid var(--rw-line);border-radius:10px;background:var(--rw-surface);overflow:hidden}
.in-group2 span{padding:0 8px 0 12px;color:var(--rw-muted);font-weight:700;font-size:13.5px}
.in-group2 input{width:120px;border:0;outline:0;padding:9px 10px 9px 0;font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;background:transparent}

/* ============ "Add as a preferred source on Google" ============ */
.pref-source{display:flex;align-items:center;gap:14px;background:var(--rw-mint);border:1px solid var(--rw-mint-line);border-radius:var(--rw-radius-lg,16px);padding:16px 20px;margin:22px 0;text-decoration:none;color:var(--rw-fg);transition:transform .15s var(--rw-ease),box-shadow .15s}
.pref-source:hover{text-decoration:none;transform:translateY(-2px);box-shadow:0 12px 28px rgba(11,107,58,.14)}
.ps-star{font-size:22px;flex:0 0 auto}
.ps-copy{flex:1;min-width:0}
.ps-copy strong{display:block;font-size:15px}
.ps-copy small{display:block;font-size:12.5px;color:var(--rw-muted);margin-top:2px;line-height:1.4}
.ps-btn{flex:0 0 auto;background:var(--rw-green);color:#fff;border-radius:999px;padding:9px 16px;font-size:13px;font-weight:750;white-space:nowrap}
.ps-compact{display:inline-block;font-size:13px;font-weight:700;color:var(--rw-lime2,#7CF0AE);text-decoration:none;border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:7px 14px}
.ps-compact:hover{text-decoration:none;background:rgba(255,255,255,.06)}
@media (max-width:560px){.pref-source{flex-wrap:wrap}.ps-btn{width:100%;text-align:center}}

/* ============ Option A - score teaser rand inputs ============ */
.score-teaser .st-fields{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:10px;min-width:0}
/* Repainted for the light hero. These were pale-on-dark; left as they were, the
   rand INPUT rendered white text on a white card — you could not see your own
   salary as you typed it — and the derived "16% / 1.0 months" read white on
   white. The .st-ring rules above deliberately stay white: the ring keeps its
   dark disc, which is what makes the score read at a glance. */
.score-teaser .st-fields > label > span:first-child{display:block;font-size:10.5px;font-weight:800;color:#52705F;margin-bottom:4px;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-in{display:flex;align-items:center;background:#fff;border:1px solid #CFE0D6;border-radius:10px;overflow:hidden}
.st-in:focus-within{border-color:#0B6B3A}
.st-in i{font-style:normal;padding:0 3px 0 10px;color:#52705F;font-weight:700;font-size:13px}
.st-in input{width:100%;min-width:0;background:transparent;border:0;outline:0;color:#0B3B26;font-weight:700;font-size:14.5px;padding:9px 8px 9px 2px;font-variant-numeric:tabular-nums;-moz-appearance:textfield}
.st-in input::-webkit-outer-spin-button,.st-in input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.st-derived{margin:12px 0 2px;font-size:12px;color:#52705F;line-height:1.5}
.st-derived b{color:#0B3B26;font-variant-numeric:tabular-nums}
@media (max-width:420px){.score-teaser .row{flex-direction:column}.score-teaser .st-fields{width:100%}}

/* ============ Official Google preferred-source badge + exit prompt ============ */
.gps-badge{display:inline-block;line-height:0;border-radius:9px;transition:transform .15s var(--rw-ease),box-shadow .15s}
.gps-badge:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(0,0,0,.14)}
.gps-badge img{display:block;border-radius:9px;height:auto;max-width:100%}
.exitp{position:fixed;inset:0;z-index:120;background:rgba(7,19,12,.55);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;transition:opacity .2s ease}
.exitp.on{opacity:1}
.exitp-card{position:relative;background:var(--rw-surface);border:1px solid var(--rw-line);border-radius:var(--rw-radius-lg,16px);box-shadow:0 30px 80px rgba(0,0,0,.35);padding:26px 24px 18px;max-width:360px;width:100%;text-align:center;transform:translateY(8px);transition:transform .2s ease}
.exitp.on .exitp-card{transform:none}
.exitp-card > strong{font-size:17px;line-height:1.35;display:block}
.exitp-x{position:absolute;top:8px;right:12px;background:none;border:0;font-size:22px;color:var(--rw-muted);cursor:pointer;line-height:1;padding:4px}
.exitp-later{display:block;margin:10px auto 0;background:none;border:0;color:var(--rw-muted);font-size:12.5px;cursor:pointer;text-decoration:underline}
@media (max-width:640px){.exitp{align-items:flex-end;padding:0}.exitp-card{max-width:none;border-radius:18px 18px 0 0;padding-bottom:calc(18px + env(safe-area-inset-bottom))}}

/* The hidden attribute must ALWAYS win, even over author display rules.
   Third time this trap has bitten (.rw-strip, .rw-consent, now .exitp —
   whose display:flex left an invisible full-screen overlay swallowing every
   click on every public page). Global guard ends the per-component fixes. */
[hidden]{display:none!important}

/* Footer pseudo-headings (real h4s skipped heading levels) + AA contrast */
.f-h4{font-weight:700;font-size:15px;margin:0 0 10px}
.site-footer .newsletter-cta a{color:var(--rw-lime2,#7CF0AE)}