/* ==========================================================================
   THEWEALTHORAA DESIGN SYSTEM v2.1 — "Editorial authority"
   Headlines: DM Sans · UI/body: Inter (restrained weights)
   Brand accent: #1B17FF. Green/red reserved strictly for price movement.
   ========================================================================== */

:root{
  --ink:#0A1428; --ink-2:#101B33; --ink-3:#1D2B44;
  --paper:#FFFFFF; --soft:#F6F7F9; --soft-2:#EEF0F4;
  --line:#E5E8EE; --line-2:#D6DBE4;
  --brand:#1B17FF; --brand-d:#1410C9; --brand-t:#F0F0FF;
  --up:#0E9F6E; --up-bg:#EAF7F1; --down:#D92626; --down-bg:#FDEEEE;
  --amber:#D97917; --teal:#0E8C8C; --indigo:#6D28D9; --gold:#B8860B;
  /* --mut-2 was #8A93A2: 3.10:1 on white and 2.89:1 on --soft, well under the
     4.5:1 WCAG AA floor, and it carries the smallest type on the site (bylines,
     card meta, "min read", footer legal, tool card descriptions). Darkened to
     clear AA on both white and the soft panels. */
  --txt:#161D2B; --mut:#596372; --mut-2:#666F7D;
  --card:#FFFFFF; --card-2:#F6F7F9;
  --radius:12px; --radius-s:9px;
  --shadow:0 1px 2px rgba(10,20,40,.05),0 6px 20px -10px rgba(10,20,40,.08);
  --shadow-lg:0 2px 4px rgba(10,20,40,.05),0 18px 44px -18px rgba(10,20,40,.16);
  --ease:cubic-bezier(.22,1,.36,1);
  /* Headline face. Was Source Serif 4; DM Sans across every heading on Arpit's
     call, so the masthead, section headers, article H1s and tool titles all
     speak in one voice. --font-s is referenced by every heading rule, so this
     one line moves the whole site. */
  --font-s:'DM Sans',-apple-system,'Segoe UI',sans-serif;
  --font-b:'Inter',-apple-system,'Segoe UI',sans-serif;
  --maxw:1340px;
}
[data-theme="dark"]{
  --ink:#0B0F1A; --ink-2:#0E1524; --ink-3:#1B2740;
  --paper:#0C111C; --soft:#111828; --soft-2:#162032;
  --line:#1E2A40; --line-2:#293852;
  --brand:#7B78FF; --brand-d:#5652E8; --brand-t:#16162E;
  --up:#34D399; --up-bg:#0C2318; --down:#F87171; --down-bg:#2A1214;
  /* Same fix on dark: #697488 was 4.00:1 on the page and 3.46:1 on --soft-2. */
  --txt:#E7EBF3; --mut:#9AA5B7; --mut-2:#8592A6;
  --card:#111828; --card-2:#162032;
  --shadow:0 1px 2px rgba(0,0,0,.35),0 6px 20px -10px rgba(0,0,0,.5);
  --shadow-lg:0 2px 4px rgba(0,0,0,.4),0 18px 44px -18px rgba(0,0,0,.65);
}

/* ---------- Base ---------- */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font-b);background:var(--paper);color:var(--txt);
  font-size:16.5px;line-height:1.68;font-weight:400;margin:0;padding:0;
  -webkit-font-smoothing:antialiased;transition:background .3s var(--ease),color .3s var(--ease)}
/* Defend against stale LiteSpeed Critical CSS from the OLD theme, which injects
   `body{padding-top:64px}` and leaves an empty band above the ticker tape. The
   .twr-theme class outranks the bare `body` selector, so this wins regardless of
   stylesheet order, even before a LiteSpeed purge regenerates the critical CSS. */
body.twr-theme{padding-top:0!important;margin-top:0!important}
/* Same defence, for PAINT. LiteSpeed inlines a per-URL Critical CSS blob AFTER
   the theme stylesheet, and a stale blob still carries hardcoded light-mode
   paint such as `html,body,main,#main,article{background:#fff}` (measured live
   on the homepage: computed body background stayed white while data-theme was
   dark). Light text on a forced-white canvas is exactly the "dark mode makes
   the article content invisible" report. A class on <html> plus .twr-theme on
   <body> outranks any bare-element rule, so the theme wins whatever state the
   cache is in — no purge required. */
html.twr-html{background:var(--paper)!important}
html.twr-html body.twr-theme{background:var(--paper)!important;color:var(--txt)!important}
body.twr-theme main,body.twr-theme #main,body.twr-theme #twr-content,
body.twr-theme article,body.twr-theme .twr-article-main,body.twr-theme .twr-prose{background:transparent}
body.twr-theme article.twr-card{background:var(--card)}
body.twr-theme .twr-prose,body.twr-theme .twr-prose p,body.twr-theme .twr-prose li,
body.twr-theme .twr-prose h2,body.twr-theme .twr-prose h3,body.twr-theme .twr-prose h4,
body.twr-theme .twr-prose td,body.twr-theme .twr-prose strong{color:var(--txt)}
body.twr-theme .twr-prose blockquote{color:var(--mut)}
body.twr-theme .twr-prose a{color:var(--brand)}
*,*::before,*::after{box-sizing:border-box}
img{max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
a:hover{color:var(--brand)}
h1,h2,h3,h4{font-family:var(--font-s);color:var(--txt);line-height:1.22;
  letter-spacing:-.01em;margin:0 0 .5em;font-weight:600}
h1{font-weight:700}
.twr-wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.twr-num{font-variant-numeric:tabular-nums}
.screen-reader-text{position:absolute!important;clip:rect(1px,1px,1px,1px);width:1px;height:1px;overflow:hidden}
::selection{background:var(--brand);color:#fff}
.twr-up{color:var(--up)!important}
.twr-down{color:var(--down)!important}
.twr-flat{color:var(--mut)!important}
.twr-ico{width:17px;height:17px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round;display:block}

/* Price change flash (whole row/card — fires on real data refresh) */
@keyframes twr-flash-up{0%{background:var(--up-bg)}100%{background:transparent}}
@keyframes twr-flash-down{0%{background:var(--down-bg)}100%{background:transparent}}
.twr-flash-up{animation:twr-flash-up 1.3s var(--ease)}
.twr-flash-down{animation:twr-flash-down 1.3s var(--ease)}
/* On the DARK surfaces the same tint was the bug behind "a white box appears,
   then the number updates": --up-bg is a pale mint (#EAF7F1) meant for white
   cards, so on the near-black ticker tape and the dark watchlist panel it
   painted a bright block for 1.3s on every tick. Those surfaces get a
   translucent tint of the up/down colour instead, which reads as a glow. */
.twr-tape .twr-flash-up,.twr-dock .twr-wl .twr-flash-up{animation:twr-flash-up-dark 1.3s var(--ease)}
.twr-tape .twr-flash-down,.twr-dock .twr-wl .twr-flash-down{animation:twr-flash-down-dark 1.3s var(--ease)}
@keyframes twr-flash-up-dark{0%{background:rgba(52,211,153,.24)}100%{background:transparent}}
@keyframes twr-flash-down-dark{0%{background:rgba(248,113,113,.24)}100%{background:transparent}}
/* Give the tape tint a shape rather than a hard-edged rectangle. */
.twr-ti{border-radius:6px;padding:2px 7px;margin:0 -7px}

/* Dark surfaces need their own tint. --up-bg is #EAF7F1, a near-WHITE pale
   green meant for white cards; painting it behind a ticker item on the almost
   black tape produced a white block that flashed on every price update, then
   the number changed. Same trap on the dark watchlist panel. Translucent tints
   read as a glow on dark instead of a hole punched in the bar. */
@keyframes twr-flash-up-dark{0%{background:rgba(52,211,153,.26)}100%{background:transparent}}
@keyframes twr-flash-down-dark{0%{background:rgba(248,113,113,.26)}100%{background:transparent}}
.twr-tape .twr-flash-up,.twr-dock .twr-wl .twr-flash-up{animation:twr-flash-up-dark 1.3s var(--ease)}
.twr-tape .twr-flash-down,.twr-dock .twr-wl .twr-flash-down{animation:twr-flash-down-dark 1.3s var(--ease)}
/* Give the tape tint a shape so it looks deliberate, not like a torn rectangle. */
.twr-tape .twr-ti{padding:3px 8px;border-radius:6px;margin:0 -2px}

/* Per-price tick: the number itself blips green or red and pops, then settles.
   Fired ONLY when the feed reports a genuinely different price (flashDiffs in
   twr-markets.js). The old tick-simulator that drove this every second was
   removed on purpose and must not come back: it displayed invented prices. */
/* Colour only, no scale or lift. A terminal tick recolours the number and
   settles; the pop read as a UI toy on a price. */
[data-ps]{transition:color .55s var(--ease)}
.twr-tick-up,.twr-tick-down{transition:none!important}
.twr-tick-up{color:var(--up)!important}
.twr-tick-down{color:var(--down)!important}

/* Heartbeat on every completed refresh. Signals "data just arrived", which is
   true on every poll, without pretending a delayed price moved. */
@keyframes twr-beat{0%{transform:scale(1);opacity:1}
  40%{transform:scale(2.1);opacity:.35}
  100%{transform:scale(1);opacity:1}}
.twr-beat{animation:twr-beat .7s var(--ease)}
@media (prefers-reduced-motion:reduce){.twr-beat{animation:none}}

/* Scroll reveal */
.twr-reveal{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.twr-reveal.twr-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .twr-reveal{opacity:1;transform:none;transition:none}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ---------- ① Ticker tape ---------- */
.twr-tape{background:var(--ink);color:#fff;height:42px;display:flex;align-items:stretch;
  overflow:hidden;position:relative;z-index:60;border-bottom:1px solid var(--ink-3)}
[data-theme="dark"] .twr-tape{background:#070B13}
.twr-tape-label{background:var(--brand-d);display:flex;align-items:center;gap:8px;padding:0 15px;
  font:600 10.5px var(--font-b);letter-spacing:1.4px;white-space:nowrap;z-index:2}
.twr-tape-label .twr-pulse{width:7px;height:7px;border-radius:50%;background:#4ADE80;animation:twr-pulse 2s infinite}
@keyframes twr-pulse{0%,100%{box-shadow:0 0 0 0 rgba(74,222,128,.55)}50%{box-shadow:0 0 0 6px rgba(74,222,128,0)}}
.twr-tape-viewport{flex:1;overflow:hidden;display:flex;align-items:center}
.twr-tape-track{display:flex;gap:36px;padding-left:24px;white-space:nowrap;will-change:transform;
  animation:twr-marquee 55s linear infinite}
.twr-tape:hover .twr-tape-track{animation-play-state:paused}
@keyframes twr-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.twr-ti{display:inline-flex;gap:8px;align-items:center;font-size:12.5px}
.twr-ti b{font-weight:500;color:#B9C3D4;font-size:12px}
.twr-ti .p{color:#fff;font-weight:600}
.twr-ti .u{color:#4ADE80;font-weight:600}.twr-ti .d{color:#F87171;font-weight:600}
/* Market-closed state: label swaps to "US MARKET CLOSED", pulse goes grey,
   prices freeze at the close (the tick simulator skips closed markets). */
.twr-tape.twr-closed .twr-tape-label{background:#3A4356}
.twr-tape.twr-closed .twr-pulse{background:#94A3B8;animation:none}
.twr-attag{font:600 8.5px var(--font-b);letter-spacing:.7px;color:var(--mut-2);background:var(--soft-2);
  border-radius:4px;padding:2px 5px;margin-left:6px;text-transform:uppercase;vertical-align:1px;white-space:nowrap}

/* ---------- Topbar ---------- */
.twr-topbar{display:flex;align-items:center;height:34px;font-size:12px;color:var(--mut);
  border-bottom:1px solid var(--line);background:var(--soft)}
.twr-topbar .twr-wrap{display:flex;align-items:center;justify-content:space-between;width:100%}
/* The chip is a control: tapping it flips °C and °F, and the choice sticks. The
   unit follows the reader's COUNTRY by default (see class-twr-weather.php), so
   this is for the traveller and the expat, not a shrug at the default. */
.twr-weather{display:flex;align-items:center;gap:7px;font-weight:500;cursor:pointer;
  border-radius:6px;padding:2px 5px;margin-left:-5px;transition:background .2s var(--ease)}
.twr-weather:hover{background:rgba(127,127,160,.14)}
.twr-weather:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
.twr-weather .twr-w-icon{font-size:14px}
.twr-lang{position:relative}
.twr-lang select{appearance:none;background:transparent;border:1px solid var(--line);color:var(--mut);
  border-radius:7px;font:500 12px var(--font-b);padding:4px 22px 4px 9px;cursor:pointer}
.twr-lang::after{content:"▾";position:absolute;right:8px;top:50%;transform:translateY(-50%);
  pointer-events:none;font-size:9px;color:var(--mut-2)}
#google_translate_element,.goog-te-banner-frame,#goog-gt-tt,.goog-te-balloon-frame{display:none!important}
body{top:0!important;position:static!important}
.skiptranslate iframe{display:none!important;visibility:hidden!important}
/* Kill the stray blank band that third-party scripts can inject ABOVE the
   ticker tape (unfilled auto-ads, translate banner wrappers). Filled ads are
   untouched — only empty/unfilled slots collapse. */
body>.skiptranslate{display:none!important;height:0!important}
ins.adsbygoogle[data-ad-status="unfilled"]{display:none!important;height:0!important;min-height:0!important}
body>ins.adsbygoogle:first-child:not([data-ad-status="filled"]){display:none!important}
.google-auto-placed:empty{display:none!important}

/* ---------- ② Nav ---------- */
.twr-nav{position:sticky;top:0;z-index:50;background:var(--paper);
  border-bottom:1px solid var(--line);transition:box-shadow .3s var(--ease),background .3s var(--ease)}
.twr-nav.twr-scrolled{box-shadow:var(--shadow)}
.twr-nav-in{display:flex;align-items:center;gap:34px;height:66px}
.twr-logo{display:flex;align-items:center;flex-shrink:0}
.twr-logo-img{height:30px;width:auto;display:block}
.twr-logo-dark{display:none}
[data-theme="dark"] .twr-logo-light{display:none}
[data-theme="dark"] .twr-logo-dark{display:block}
.twr-menu{display:flex;gap:26px;list-style:none;margin:0;padding:0}
.twr-menu>li{position:relative}
.twr-menu>li>a{font:500 14.5px var(--font-b);color:var(--txt);padding:22px 0;display:inline-block;
  border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .2s var(--ease),border-color .2s var(--ease)}
.twr-menu>li>a:hover,.twr-menu>li.current-menu-item>a{color:var(--brand);border-bottom-color:var(--brand)}
.twr-menu .sub-menu{position:absolute;top:100%;left:-14px;min-width:220px;background:var(--card);
  border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow-lg);list-style:none;
  padding:7px;opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s;z-index:70}
.twr-menu li:hover>.sub-menu{opacity:1;visibility:visible;transform:none}
.twr-menu .sub-menu a{display:block;padding:8px 11px;border-radius:7px;font:400 13.5px var(--font-b);color:var(--txt)}
.twr-menu .sub-menu a:hover{background:var(--soft);color:var(--brand)}
.twr-nav-actions{margin-left:auto;display:flex;align-items:center;gap:10px}
.twr-iconbtn{width:36px;height:36px;border:1px solid var(--line);border-radius:9px;background:transparent;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--mut);
  transition:border-color .2s,color .2s,transform .2s var(--ease);padding:0}
.twr-iconbtn:hover{border-color:var(--brand);color:var(--brand);transform:translateY(-1px)}
.twr-livebtn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:9px;
  padding:8px 14px;font:600 13px var(--font-b);color:var(--txt);transition:border-color .2s,color .2s}
.twr-livebtn i{width:7px;height:7px;border-radius:50%;background:var(--up);animation:twr-pulse 2s infinite;flex-shrink:0}
.twr-livebtn:hover{border-color:var(--up);color:var(--up)}
.twr-btn{display:inline-flex;align-items:center;gap:8px;background:var(--brand);color:#fff!important;
  font:500 14px var(--font-b);padding:10px 18px;border-radius:9px;border:none;cursor:pointer;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),background .2s}
.twr-btn:hover{transform:translateY(-1px);box-shadow:0 10px 22px -10px rgba(27,23,255,.5);background:var(--brand-d)}
.twr-btn-ghost{background:transparent;color:var(--txt)!important;border:1px solid var(--line)}
/* The ghost hover has to undo the FILLED hover, not just add to it. .twr-btn:hover
   paints background:var(--brand-d) — dark blue — and this rule was only setting
   the text to var(--brand), also blue. Hovering "Load more stories" therefore
   painted blue type on a blue button and the label vanished mid-click. */
.twr-btn-ghost:hover{background:var(--soft);border-color:var(--brand);color:var(--brand)!important;
  box-shadow:none;transform:none}
.twr-burger{display:none}
.twr-search-pop{position:absolute;top:100%;left:0;right:0;background:var(--card);border-bottom:1px solid var(--line);
  box-shadow:var(--shadow-lg);padding:16px 0;display:none}
.twr-search-pop.open{display:block}
.twr-search-pop form{display:flex;gap:10px;max-width:700px;margin:0 auto;padding:0 24px}
.twr-search-pop input[type=search]{flex:1;border:1px solid var(--line);border-radius:9px;background:var(--soft);
  padding:11px 15px;font:400 15px var(--font-b);color:var(--txt);outline:none}
.twr-search-pop input[type=search]:focus{border-color:var(--brand)}

/* ---------- ③ Breaking ----------
   The bar rolls through the newest headlines the same way the News Flash does,
   so it never sits on one stale story. Each headline is absolutely positioned
   in its own stage and slides up as it becomes current. */
.twr-breaking{background:#B91C1C;color:#fff;min-height:38px;display:flex;align-items:center;font-size:13px;overflow:hidden}
.twr-breaking-tag{background:#7F1D1D;align-self:stretch;display:flex;align-items:center;padding:0 13px;
  font:700 10.5px var(--font-b);letter-spacing:1.4px;white-space:nowrap}
.twr-breaking .dot{width:7px;height:7px;border-radius:50%;background:#fff;margin:0 10px 0 14px;flex-shrink:0;animation:twr-pulse 1.6s infinite}
.twr-breaking a{color:#fff;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.twr-breaking-stage{position:relative;flex:1;min-width:0;align-self:stretch;overflow:hidden}
.bk-item{position:absolute;inset:0;display:flex;align-items:center;padding-right:16px;opacity:0;
  transform:translateY(70%);pointer-events:none;
  transition:opacity .42s var(--ease),transform .42s var(--ease)}
.bk-item.on{opacity:1;transform:none;pointer-events:auto}
/* The headline and nothing else. The bar used to carry an outlet credit and an
   age next to every item because it also flashed wire headlines we had not
   written up, which meant a click could leave the site. It now carries only our
   own published stories, so there is no outlet to credit and no reason to spend
   the width on anything but the words. */
.bk-item .bk-t{color:#fff;font-weight:500;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- Breadcrumbs ---------- */
.twr-crumbs{padding:14px 0 0}
.twr-crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:6px;list-style:none;margin:0;padding:0;
  font:500 12.5px var(--font-b);color:var(--mut-2)}
.twr-crumbs li{display:flex;align-items:center;gap:6px;min-width:0}
.twr-crumbs li+li::before{content:'/';color:var(--line-2);font-weight:400}
.twr-crumbs a{color:var(--mut)}
.twr-crumbs a:hover{color:var(--brand)}
.twr-crumbs .crumb-now{color:var(--txt);font-weight:600;max-width:min(56ch,100%);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- ④ Homepage hero — 2 columns ----------
   main: the big feature + two story boxes · right: snapshot + Fear & Greed.
   (2.30.0: the Finance Wire column on the left and the World News box on the
   right are gone; this site carries no news wire.) The rail is sticky so the
   live numbers stay beside the stories as the reader scrolls the column. */
.twr-hero3{display:grid;grid-template-columns:minmax(0,1fr) 314px;gap:24px;padding:20px 0 34px;align-items:start}
.twr-hero3 .twr-rightcol{position:sticky;top:84px}
/* The lead column is ~950px wide now, and a 16:9 picture at that width is
   ~535px tall, which pushed the headline below the fold. Cap the picture's
   height instead (object-fit:cover crops it); phones keep 16:9. */
@media (min-width:761px){
  .twr-hero3 .twr-lead-media{aspect-ratio:auto;height:clamp(300px,30vw,420px)}
}

/* Box tab — the label sits ON its panel, so Finance Wire and News Flash read as
   two clearly separate desks rather than one continuous rail. Same shape and
   weight as the market board's .twr-tab.on, no new colours. */
.twr-boxhead{display:flex;align-items:center;gap:9px;margin:0 0 12px}
.twr-boxtab{font:600 10.5px var(--font-b);letter-spacing:1.1px;text-transform:uppercase;
  background:var(--brand);color:#fff;padding:6px 12px;border-radius:8px;display:inline-block;white-space:nowrap}
/* On the near-black News Flash panel an --ink tab would disappear into the
   background, so that one wears the brand accent in both themes. */
.twr-boxtab-dark{background:var(--brand);color:#fff}
.twr-boxhead .twr-live{margin-left:auto}
/* The desk tabs are links to the desk itself; the arrow says so. */
a.twr-boxtab{transition:background .2s var(--ease)}
a.twr-boxtab::after{content:' \203A';font-size:13px;line-height:0}
a.twr-boxtab:hover,a.twr-boxtab:focus-visible{background:var(--brand-d);color:#fff}

/* ---------- The two wire desks, one shell ----------
   Both boxes share one shell so a reader takes the pair as one live rail
   running either side of the lead story: same accent, same timestamp colour,
   same divider weight, same hover. Only the tab label tells the desks apart.

   The shell follows the PAGE. It spent a version painted near-black navy in
   both themes, which put two dark slabs either side of white editorial columns
   and made the front page read as three unrelated sites. These are panels on a
   white page in the morning and on a dark page at night, like everything else.
   Every rule below paints through the --wire-* tokens, so this block is the
   only place the two desks are themed. */
.twr-wire-ink{
  --wire-bg:var(--card); --wire-bg-2:var(--card-2); --wire-line:var(--line);
  --wire-t:var(--txt); --wire-mut:var(--mut-2); --wire-accent:var(--brand);
  background:var(--wire-bg);border:1px solid var(--line);border-radius:12px;
  box-shadow:var(--shadow)}

/* left · Finance Wire */
.twr-wirecol{padding:16px 16px 0;display:flex;flex-direction:column;min-width:0;overflow:hidden}
.twr-wire-list{flex:1;min-height:0}
.twr-wi{display:block;padding:11px 0;border-bottom:1px solid var(--wire-line);position:relative}
.twr-wi:last-child{border-bottom:none}
.wi-body{display:block;min-width:0}
.wi-thumb{display:none}
.wi-meta{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.wi-meta time{font:600 10.5px var(--font-b);letter-spacing:.5px;color:var(--wire-accent);text-transform:uppercase;white-space:nowrap}
.wi-new{font:700 8.5px var(--font-b);letter-spacing:.9px;background:var(--down);color:#fff;padding:2px 5px;border-radius:4px;animation:twr-pulse 1.6s infinite}
.wi-new[hidden]{display:none}
.wi-src{font:400 10.5px var(--font-b);color:var(--wire-mut);margin-left:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:96px}
.wi-title{font:500 13.5px/1.44 var(--font-b);color:var(--wire-t);display:block;transition:color .2s var(--ease)}
.twr-wi:hover .wi-title{color:var(--wire-accent)}
.twr-wi.fresh .wi-title{font-weight:600}
@keyframes twr-wi-in{from{background:rgba(142,139,255,.16)}to{background:transparent}}
.twr-wi-flash{animation:twr-wi-in 2.4s var(--ease)}
.twr-wire-empty{font:400 12.5px/1.55 var(--font-b);color:var(--wire-mut);margin:4px 0 12px}
.twr-wire-all{display:block;text-align:center;font:600 11.5px var(--font-b);color:var(--brand);
  padding:10px 0;margin:8px -16px 0;border-top:1px solid var(--wire-line)}
.twr-wire-all:hover{color:var(--brand-d);background:var(--soft)}

/* right · snapshot + world news stack

   ONE BOX, TWO FEEDS. World News carried its own design: bordered cards with a
   gradient bar down the left edge, four to a page, paging on a timer. Two rails
   flanking the same lead story, doing the same job, in two visual languages —
   and the paged one could only ever show a third of what it held. It is the
   Finance Wire's box now, right down to the shared .twr-wi item, so the only
   difference between the two rails is which desk feeds them.

   No reserved height is needed any more. The ten headlines are printed by PHP,
   so the box is already its full size at first paint and the 75-second refresh
   swaps ten rows for ten rows — the panel that used to jump as pages loaded in
   now never changes height at all. */
.twr-rightcol{display:flex;flex-direction:column;gap:14px;min-width:0}
.twr-newsflash{padding:16px 16px 0;display:flex;flex-direction:column;min-width:0;overflow:hidden;flex:1}
.twr-newsflash .twr-wire-list{flex:1;min-height:0}

/* ---------- ④a Featured-story rotator (homepage lead) ----------
   Every slide sits in the same grid cell, so the cell used to be as tall as the
   TALLEST of the five — a three-line headline with a long dek — and every
   shorter slide left the difference as dead space between its byline and the
   dots. That gap was the width of the column and could run past a hundred
   pixels. The slides are top-aligned now so each one measures at its own
   height, and twr-core.js sizes the row to whichever slide is showing; the
   transition below means the box eases into its new height on the same beat as
   the crossfade rather than snapping. With no JavaScript the row falls back to
   auto, which is the old behaviour, not a broken one. */
.twr-leadrot{display:grid;position:relative;
  transition:grid-template-rows .45s var(--ease)}
/* Identical roll to the News Flash pages: same 14px rise, same .5s, same easing.
   It used to be 10px over .3s, which is why the two strips read as different
   animations even though they turn on the same 7s beat. */
.twr-lead-slide{grid-area:1/1;align-self:start;opacity:0;visibility:hidden;transform:translateY(14px);
  transition:opacity .5s var(--ease),transform .5s var(--ease),visibility .5s;pointer-events:none}
.twr-lead-slide.on{opacity:1;visibility:visible;transform:none;pointer-events:auto}
/* A slide taller than the row it is leaving would paint over the dots for the
   half second it spends fading out. Percentages on a grid item resolve against
   the grid area, so this is exactly "no taller than the row". */
.twr-lead-slide:not(.on){max-height:100%;overflow:hidden}
/* And the same countdown bar, so you can see it rolling rather than guess. */
/* The countdown fill under the two story rotators. It used to be called
   twr-nf-bar because the World News box owned it first; that box no longer
   rotates, and the rotators that still use it are the lead card and the two
   secondary boxes, so it is named for what it does. */
@keyframes twr-bar-fill{from{width:0}to{width:100%}}
.twr-lead-bar{flex:1;height:3px;border-radius:2px;background:var(--soft-2);overflow:hidden;min-width:40px}
.twr-lead-bar i{display:block;height:100%;width:0;border-radius:2px;
  background:linear-gradient(90deg,var(--brand),#7B78FF)}
.twr-lead-nav{display:flex;align-items:center;gap:12px;margin-top:14px}
.twr-lead-arrow{width:30px;height:30px;border:1px solid var(--line);border-radius:8px;background:var(--card);
  color:var(--mut);font-size:16px;line-height:1;cursor:pointer;transition:all .2s var(--ease);padding:0}
.twr-lead-arrow:hover{border-color:var(--brand);color:var(--brand);transform:translateY(-1px)}
.twr-lead-dots{display:flex;gap:7px;align-items:center}
.twr-lead-dot{width:8px;height:8px;border-radius:50%;border:none;background:var(--line-2);cursor:pointer;
  padding:0;transition:all .25s var(--ease)}
.twr-lead-dot:hover{background:var(--mut-2)}
.twr-lead-dot.on{background:var(--brand);width:22px;border-radius:5px}

/* ---------- ④ Hero (legacy 2-col, still used on inner pages) ---------- */
.twr-hero{display:grid;grid-template-columns:1fr 350px;gap:30px;padding:28px 0 32px}
/* THE WHOLE PICTURE, NOT A BAND OUT OF THE MIDDLE.
   Every card frame on this page was a fixed pixel height against a fluid width,
   so each one cropped the 16:9 image the pipeline generates to whatever ratio
   the column happened to be: the lead ran about 2:1, the grid card nearer 3:1.
   On a photograph that reads as a tight crop. On the graphics this site
   publishes — a titled chart, a comparison card — it cut the title off the top
   and the source line off the bottom, which is what made the VTI vs VOO card
   look broken on the homepage. Every frame below is now 16/9, the exact ratio
   the images are written at, so object-fit:cover has nothing left to trim. */
/* WHY EVERY aspect-ratio BELOW IS PAIRED WITH height:auto.

   2026-08-23, live site: switching these frames from a fixed pixel height to
   aspect-ratio:16/9 made the cards render 267x150 instead of 431x242 — the
   picture shrank to two thirds width with white space beside it. The new rule
   was winning; the OLD one had not lost.

   LiteSpeed inlines a per-template critical-CSS block in <head>, and that block
   is a SNAPSHOT of the stylesheet from whenever it was generated. It still
   carried `.twr-card .cimg{height:150px}`. aspect-ratio and height are different
   properties, so the new rule never overrode the stale one: the browser took
   height:150px from the cached copy, applied aspect-ratio to it, and solved for
   WIDTH — 150 x 16/9 = 266.67px. Exactly the breakage.

   height:auto is what actually retires the old declaration, so these frames are
   correct no matter how stale the inlined snapshot is. Do not drop it, and do
   not rely on purging the CCSS cache instead: the cache regenerates per template
   and per device, so there is always a page somewhere still holding the old copy. */
.twr-lead-media{display:block;aspect-ratio:16/9;height:auto;border-radius:12px;position:relative;overflow:hidden;background:var(--ink-2)}
.twr-lead-media>a{display:block;height:100%}
.twr-lead-media img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.twr-lead-media:hover img{transform:scale(1.03)}
.twr-lead-chip{position:absolute;top:14px;left:14px;z-index:2}
.twr-lead h1,.twr-lead .twr-lead-title{font-family:var(--font-s);font-size:clamp(26px,2.9vw,38px);
  line-height:1.15;letter-spacing:-.015em;margin:18px 0 10px;font-weight:700}
.twr-lead .twr-lead-title a:hover{color:var(--brand)}
.twr-lead-dek{font-size:16.5px;color:var(--mut);line-height:1.6;margin:0}
.twr-lead-dek b{color:var(--brand);font-weight:600}
/* Byline. Two lines, not one: the top is who and what their job is, the bottom
   is when it ran and how long it takes. Those answer different questions, and
   the old single grey run-on sentence answered neither well. The avatar is
   40px rather than 24px because at 24 a face is a smudge, and a face the
   reader cannot see does nothing that a name was not already doing. */
/* flex-wrap is reset here ON PURPOSE, not left to the default. LiteSpeed's
   inlined critical CSS still carries an OLD .twr-byline that set flex-wrap:wrap,
   and a rule that simply omits the property cannot override a snapshot that
   declares it. Result: any byline whose text is wider than the row — "Arpit Soni
   Founder and Editor in Chief" plus a full "Updated <date>" stamp — wrapped the
   whole text block underneath the avatar on mobile, while the shorter desk
   bylines happened to fit and looked fine. Always reset the property you
   replace. */
.twr-byline{display:flex;flex-wrap:nowrap;gap:12px;align-items:flex-start;margin-top:14px}
.twr-byline .twr-ava{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--brand),var(--teal));
  flex:0 0 40px;overflow:hidden;display:block}
.twr-byline .twr-ava img{width:100%;height:100%;object-fit:cover;display:block}
/* flex:1 1 auto + min-width:0 lets the text column SHRINK to whatever space is
   left beside the avatar instead of demanding its content width. Without it a
   long date stamp still forces the row wider than the screen. */
.twr-byline-txt{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px;padding-top:1px}
.twr-byline-who{display:flex;flex-wrap:wrap;align-items:baseline;gap:7px;font-size:14.5px;line-height:1.35}
.twr-byline-name{color:var(--txt);font-weight:600;text-decoration:none}
.twr-byline-name:hover{color:var(--brand);text-decoration:underline;text-underline-offset:2px}
.twr-byline-role{color:var(--mut);font-size:13.5px;font-weight:400}
.twr-byline-when{display:flex;flex-wrap:wrap;gap:7px;font-size:12.5px;color:var(--mut-2);line-height:1.45}
.twr-byline-when>*:not(:first-child)::before{content:'\00b7';margin-right:7px;color:var(--line-2)}
.twr-stamp{font-variant-numeric:tabular-nums}
.twr-verified{color:var(--up);font-weight:500}
@media(max-width:520px){
  .twr-byline .twr-ava{width:34px;height:34px;flex-basis:34px}
  .twr-byline-who{font-size:14px}
}
/* The two boxes under the big feature. Each rolls through six of its own
   articles on the lead's beat, so the fold carries 5 + 6 + 6 = 17 stories.
   Same crossfade and translate as .twr-lead-slide, deliberately: the site's
   rule is that every rolling strip moves in lockstep. */
.twr-hero-secs{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.twr-secrot{min-width:0;display:flex;flex-direction:column}
.twr-sec-stage{display:grid;position:relative;flex:1}
.twr-sec-slide{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(14px);
  transition:opacity .5s var(--ease),transform .5s var(--ease),visibility .5s;pointer-events:none}
.twr-sec-slide.on{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.twr-sec-media{display:block;aspect-ratio:16/9;height:auto;border-radius:10px;overflow:hidden;background:var(--soft-2);margin-bottom:11px}
.twr-sec-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease)}
.twr-sec-slide:hover .twr-sec-media img{transform:scale(1.04)}
.twr-sec-body h3{font-family:var(--font-s);font-size:18px;line-height:1.32;font-weight:600;margin:8px 0 6px}
.twr-sec-body h3 a:hover{color:var(--brand)}
.twr-sec-body p{font-size:13.5px;color:var(--mut);line-height:1.55;margin:0}
.twr-sec-nav{display:flex;align-items:center;gap:10px;margin-top:12px}
.twr-sec-dots{display:flex;gap:5px;align-items:center}
.twr-sec-dot{width:6px;height:6px;border-radius:50%;border:none;background:var(--line-2);cursor:pointer;padding:0;
  transition:background .25s var(--ease),width .25s var(--ease)}
.twr-sec-dot:hover{background:var(--mut-2)}
.twr-sec-dot.on{background:var(--brand);width:16px;border-radius:4px}
.twr-sec-bar{flex:1;height:2px;border-radius:2px;background:var(--soft-2);overflow:hidden;min-width:30px}
.twr-sec-bar i{display:block;height:100%;width:0;border-radius:2px;background:var(--brand)}
.twr-chip{font:600 10px var(--font-b);letter-spacing:.8px;padding:4px 9px;border-radius:5px;
  color:#fff;display:inline-block;text-transform:uppercase;background:var(--brand)}
.twr-chip[data-cat*="crypto"]{background:var(--amber)}
.twr-chip[data-cat*="invest"]{background:var(--up)}
.twr-chip[data-cat*="passive"]{background:var(--teal)}
.twr-chip[data-cat*="credit"]{background:var(--indigo)}
.twr-chip[data-cat*="news"]{background:var(--ink-3)}
.twr-chip[data-cat*="personal"]{background:var(--gold)}
/* Wire topics (plugin 2.46+). Matched exactly, after the broad *= rules. */
.twr-chip[data-cat="crypto-policy"]{background:var(--gold)}
.twr-chip[data-cat="stocks"]{background:var(--indigo)}
.twr-chip[data-cat="economy"]{background:var(--teal)}
/* The global a:hover turns text --brand, and the default chip background IS
   --brand, so an Economy/Stocks chip went blank on hover or tap. */
.twr-chip:hover,.twr-chip:focus,.twr-chip:active{color:#fff;filter:brightness(1.1)}

/* Topic tabs on a wire desk: /finance/?topic=economy */
.twr-tabs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 0 22px;padding:2px 0 4px;
  -webkit-overflow-scrolling:touch}
.twr-tabs::-webkit-scrollbar{display:none}
.twr-tabs a{flex:0 0 auto;font:600 13px var(--font-b);padding:8px 15px;border-radius:999px;
  border:1px solid var(--line-2);background:var(--paper);color:var(--txt);white-space:nowrap;
  -webkit-tap-highlight-color:transparent;transition:border-color .15s,background .15s,color .15s}
.twr-tabs a:hover,.twr-tabs a:focus-visible{border-color:var(--brand);color:var(--brand);background:var(--brand-t)}
.twr-tabs a.on,.twr-tabs a.on:hover,.twr-tabs a.on:focus,.twr-tabs a.on:active{background:var(--brand);border-color:var(--brand);color:#fff}

/* ---------- ⑤ Snapshot ---------- */
.twr-snap{background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:18px;align-self:start}
.twr-h4{font:600 11px var(--font-b);letter-spacing:1.2px;color:var(--mut);margin:0 0 13px;
  display:flex;align-items:center;gap:8px;text-transform:uppercase}
.twr-h4::before{content:'';width:4px;height:13px;background:var(--brand);border-radius:2px;flex-shrink:0}
.twr-h4 .lbl{flex:1}
.twr-live{color:var(--up);font:600 10px var(--font-b);letter-spacing:.5px;display:inline-flex;align-items:center;gap:5px}
.twr-live i{width:6px;height:6px;border-radius:50%;background:var(--up);animation:twr-pulse 2s infinite}
.twr-updated{font:500 10.5px var(--font-b);color:var(--mut-2);letter-spacing:0;text-transform:none}
.twr-idx{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.twr-ic{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:11px 12px;transition:transform .22s var(--ease),box-shadow .22s var(--ease)}
.twr-ic:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.twr-ic .n{font-size:11.5px;font-weight:500;color:var(--mut)}
.twr-ic .v{font:600 16px var(--font-b);margin:3px 0 1px}
.twr-ic .ch{font-size:12px;font-weight:600}
/* ---------- Fear & Greed, one panel for every template ----------
   Replaces the old split personality: a .twr-gauge dial on /markets/ and a
   one-line .twr-fngmini strip on the homepage, showing the same reading two
   ways. The dial answers "where", the band strip answers "how do I read that",
   the trend line answers "which way is it going" and the verdict answers "so
   what". A number alone answered none of them. */
.twr-fng{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px 17px}
.twr-fng .fng-dial{display:flex;align-items:center;gap:6px;margin:2px 0 4px}
.twr-fng svg{width:132px;height:75px;flex-shrink:0}
.twr-fng .needle{transform-origin:85px 85px;transition:transform 1.4s var(--ease)}
.twr-fng .fng-read{min-width:0}
.twr-fng .fng-val{font:700 32px/1 var(--font-b);letter-spacing:-1px}
.twr-fng .fng-lab{font:600 12.5px var(--font-b);color:var(--mut);margin-top:3px}

/* The band strip is the part that makes the number self-explaining: the reader
   sees the whole 0-100 vocabulary at once and which fifth they are standing in,
   instead of being handed the word "Greed" and left to supply the scale. */
.twr-fng .fng-scale{display:grid;grid-template-columns:repeat(5,1fr);gap:3px;margin:10px 0 11px}
.twr-fng .fng-scale span{font:500 8.5px/1.25 var(--font-b);color:var(--mut-2);text-align:center;
  letter-spacing:.2px;transition:color .3s var(--ease)}
.twr-fng .fng-scale i{display:block;height:5px;border-radius:3px;margin-bottom:5px;opacity:.34;
  transition:opacity .3s var(--ease),transform .3s var(--ease)}
.twr-fng .fng-scale [data-band="x"] i{background:#DC2626}
.twr-fng .fng-scale [data-band="f"] i{background:#F87171}
.twr-fng .fng-scale [data-band="n"] i{background:#F59E0B}
.twr-fng .fng-scale [data-band="g"] i{background:#4ADE80}
.twr-fng .fng-scale [data-band="e"] i{background:#16A34A}
.twr-fng .fng-scale .on i{opacity:1;transform:scaleY(1.6)}
.twr-fng .fng-scale .on{color:var(--txt);font-weight:700}

/* Two lines of type under the dial and no more: a numeric trend row and one
   sentence of interpretation. The scale legend explains itself, so the footnote
   that used to sit under this ("0 is maximum fear, 100 is maximum greed…") has
   gone with the .fng-foot rule that styled it. */
.twr-fng .fng-trend{font:500 11.5px var(--font-b);color:var(--mut);margin-bottom:6px;
  display:flex;flex-wrap:wrap;gap:4px 14px}
.twr-fng .fng-trend .fm{display:inline-flex;align-items:baseline;gap:4px;white-space:nowrap}
.twr-fng .fng-trend b{font-weight:700}
.twr-fng .fng-say{font:400 12.5px/1.5 var(--font-b);color:var(--txt);margin:0}
/* The homepage panel carries no prose at all: one word saying which way the
   reading leans, and the dial says the rest. Sized like a verdict, not like a
   sentence, so a reader takes it at a glance and moves on. */
.twr-fng .fng-verdict{font:700 15px var(--font-b);letter-spacing:.2px;margin:2px 0 0;
  display:flex;align-items:baseline;gap:7px}
.twr-fng .fng-verdict small{font:500 11.5px var(--font-b);color:var(--mut-2);letter-spacing:0}

/* Snapshot panel, shared by the markets dock and every tool page. The homepage
   keeps its own .twr-snap shell, which is a wider two-by-two on a soft ground. */
.twr-snap-panel{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px 17px}

/* Market Pulse — breadth mini-widget (dock) */
.twr-pulsebox .pulse-nums{display:flex;justify-content:space-between;font-size:13px;margin-bottom:8px}
.twr-pulsebox .pulse-bar{height:9px;border-radius:5px;background:var(--down-bg);overflow:hidden;position:relative}
.twr-pulsebox .pulse-bar::after{content:'';position:absolute;inset:0;border-radius:5px;box-shadow:inset 0 0 0 1px var(--line)}
.twr-pulsebox .pulse-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--up),#34D399);
  border-radius:5px 0 0 5px;transition:width 1.1s var(--ease)}
.twr-pulsebox .pulse-cap{font-size:10.5px;color:var(--mut-2);margin:6px 0 4px}
.twr-pulse-more{display:block;font:600 12px var(--font-b);color:var(--brand);padding-top:10px;margin-top:8px;border-top:1px solid var(--soft-2)}
.twr-pulse-more:hover{text-decoration:underline}

/* Day-range position pill (trending / movers rows) — where the price sits in
   today's low–high band. */
.twr-rng{position:relative;width:42px;height:4px;border-radius:2px;flex-shrink:0;
  background:linear-gradient(90deg,var(--down),var(--amber) 50%,var(--up));opacity:.85}
.twr-rng i{position:absolute;top:50%;width:8px;height:8px;border-radius:50%;background:var(--txt);
  border:1.5px solid var(--paper);transform:translate(-50%,-50%)}

/* ---------- Section headers ---------- */
.twr-sh{display:flex;align-items:baseline;justify-content:space-between;margin:0 0 16px;gap:12px}
.twr-sh h2{font-family:var(--font-s);font-size:23px;font-weight:600;letter-spacing:-.01em;
  display:flex;align-items:center;gap:11px;margin:0}
.twr-sh h2::before{content:'';width:4px;height:20px;background:var(--brand);border-radius:2px;flex-shrink:0;align-self:center}
.twr-sh a{font:500 13px var(--font-b);color:var(--brand);white-space:nowrap}

/* ---------- ⑥ Market board ---------- */
.twr-board{padding:6px 0 36px}
.twr-tabs{display:flex;gap:7px;margin-bottom:15px;flex-wrap:wrap}
.twr-tab{font:500 13px var(--font-b);padding:8px 16px;border-radius:8px;border:1px solid var(--line);
  color:var(--mut);background:transparent;cursor:pointer;transition:all .2s var(--ease)}
.twr-tab:hover{border-color:var(--brand);color:var(--brand)}
.twr-tab.on{background:var(--ink);color:#fff;border-color:var(--ink);font-weight:600}
[data-theme="dark"] .twr-tab.on{background:var(--brand);border-color:var(--brand)}
.twr-cards{display:grid;grid-template-columns:repeat(6,1fr);gap:13px}
.twr-mc{border:1px solid var(--line);border-radius:11px;padding:14px 15px;background:var(--card);
  position:relative;transition:transform .22s var(--ease),box-shadow .22s var(--ease)}
.twr-mc:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.twr-mc .s{font:600 12px var(--font-b);color:var(--mut)}
.twr-mc .nm{font-size:11px;color:var(--mut-2);margin-bottom:8px}
.twr-mc .pv{font:600 16.5px var(--font-b)}
.twr-mc .pc{font-size:12px;font-weight:600;margin-top:2px}
.twr-mc svg{margin-top:10px;width:100%;height:28px}
.twr-star{position:absolute;top:9px;right:11px;background:none;border:none;cursor:pointer;
  font-size:14px;color:var(--line-2);transition:color .2s,transform .2s var(--ease);padding:2px;line-height:1}
.twr-star:hover{transform:scale(1.2)}
.twr-star.on{color:var(--gold)}

/* ---------- ⑦⑧ River + Dock ---------- */
.twr-split{display:grid;grid-template-columns:1fr 350px;gap:30px;padding:6px 0 40px;align-items:start}
.twr-story{display:flex;gap:18px;padding:17px 0;border-bottom:1px solid var(--line)}
.twr-story:last-of-type{border-bottom:none}
/* 16:9 like every other frame, so the river thumbnail is a small copy of
   the picture rather than a slice out of the middle of it. */
.twr-story .twr-thumb{width:170px;aspect-ratio:16/9;height:auto;border-radius:10px;flex-shrink:0;overflow:hidden;background:var(--soft-2);display:block}
.twr-story .twr-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .55s var(--ease)}
.twr-story:hover .twr-thumb img{transform:scale(1.05)}
.twr-story h3{font-family:var(--font-s);font-size:18px;font-weight:600;line-height:1.32;margin:7px 0 6px}
.twr-story h3 a:hover{color:var(--brand)}
.twr-story p{font-size:13.5px;color:var(--mut);line-height:1.55;margin:0}
.twr-smeta{font-size:12px;color:var(--mut-2);margin-top:7px;display:flex;gap:12px;flex-wrap:wrap;font-weight:400}
.twr-smeta .tk{color:var(--up);font-weight:500}
/* Latest stories — cards two across, not a stacked list. The river ran as full
   width rows with a small thumbnail on the left, which put one story per band of
   screen and left the section far shorter than the dock beside it. Two columns
   of the same card the archives already use fit the same eight stories in half
   the height and give every one of them a real picture. */
.twr-latest-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.twr-loadmore{margin-top:22px;text-align:center}

.twr-dock{position:sticky;top:82px}
.twr-dock>div{border:1px solid var(--line);border-radius:12px;padding:16px 17px;margin-bottom:15px;background:var(--card)}
.twr-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;
  border-bottom:1px solid var(--soft-2);font-size:13px;gap:8px}
.twr-row:last-child{border:none;padding-bottom:0}
.twr-row .tk{font-weight:600;min-width:52px}
.twr-row .tn{color:var(--mut-2);font-size:11px;display:block;font-weight:400;max-width:110px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.twr-row .pr{font-weight:500;margin-left:auto}
/* Inline sparkline in trending/movers rows — shape at a glance, real series only. */
.twr-rspark{width:46px;height:18px;flex:0 0 46px;display:block;opacity:.85}
.twr-rspark svg{width:100%;height:100%;display:block;overflow:visible}
.twr-row .pct{font-weight:600;font-size:12.5px;min-width:62px;text-align:right}
.twr-cal-row{display:flex;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--soft-2);font-size:12.5px}
.twr-cal-row:last-child{border:none}
.twr-cal-t{font-weight:600;min-width:52px}
.twr-imp{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.twr-dock .twr-wl{background:linear-gradient(135deg,var(--ink) 25%,#14124B);color:#fff;border:none}
.twr-dock .twr-wl .twr-h4{color:#9FB2C8}
.twr-dock .twr-wl .twr-h4::before{background:#7B78FF}
.twr-dock .twr-wl p{font-size:13px;line-height:1.55;color:#C7D2E0;margin:0 0 4px}
.twr-dock .twr-wl b{color:#fff;font-weight:600}
.twr-dock .twr-wl .twr-row{border-color:rgba(255,255,255,.09);color:#E7EDF5}

/* ---------- ⑨ Tools strip ---------- */
.twr-tools-strip{background:var(--soft);padding:36px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.twr-tgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:13px}
.twr-tc{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:17px 16px;display:block;position:relative;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s}
.twr-tc-new{position:absolute;top:10px;right:10px;font:700 8.5px var(--font-b);letter-spacing:.9px;
  background:var(--brand);color:#fff;padding:2.5px 6px;border-radius:4px;animation:twr-pulse 2s infinite}
.twr-tc:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--brand)}
.twr-tc .em{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  font-size:19px;margin-bottom:11px;background:var(--brand-t)}
.twr-tc h5{font:600 13.5px var(--font-b);margin:0 0 4px;color:var(--txt)}
.twr-tc p{font-size:11.5px;color:var(--mut-2);line-height:1.45;margin:0;font-weight:400}

/* ---------- ⑩ Heatmap ----------
   Tiles are RANKED, biggest gain top-left to steepest fall bottom-right, and
   sized by how far a name actually moved. Reading order therefore carries
   meaning on its own, before a single colour is interpreted. Each tile now
   names the company and shows the price as well as the percentage, because
   "AAPL −0.63%" assumes the reader already knows what AAPL costs. */
.twr-heat{padding:36px 0}
.twr-heat-read{font:400 13.5px/1.6 var(--font-b);color:var(--mut);margin:0 0 12px;max-width:70ch}
.twr-heat-read b{color:var(--txt);font-weight:700}
.twr-hgrid{display:flex;flex-wrap:wrap;gap:5px}
/* Width is the magnitude channel: every tile declares its own flex-grow, so
   a row always fills edge to edge and the widest name in it is genuinely the
   one that moved most. A CSS grid could not do this without leaving holes
   wherever a span did not divide into twelve. */
.twr-h{min-width:60px;height:68px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;color:#fff;border-radius:7px;cursor:default;overflow:hidden;
  padding:4px 6px;text-align:center;line-height:1.15;
  transition:transform .2s var(--ease),filter .2s}
/* Four widths, assigned by rank in twr-markets.js. The basis carries the
   proportions and grow only shares out the remainder of a row. */
.twr-h.is-w1{flex:1 1 62px}
.twr-h.is-w2{flex:2 1 100px}
.twr-h.is-w3{flex:3 1 140px}
.twr-h.is-w4{flex:4 1 184px}
/* Zero-height stand-ins that keep the last wrapped row honest: without them
   flex-wrap stretches whatever is left over across the full width. */
.twr-hfill{flex:1 1 92px;height:0;display:block;pointer-events:none}
.twr-h:hover{transform:scale(1.04);filter:brightness(1.1);z-index:2}
.twr-h b{font:700 13px var(--font-b);letter-spacing:.2px}
.twr-h .hn{font:500 9.5px var(--font-b);opacity:.78;margin-top:1px;max-width:100%;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.twr-h .hp{font:500 10px var(--font-b);opacity:.8;margin-top:2px}
.twr-h span.hc{font:700 11.5px var(--font-b);margin-top:2px;opacity:.98}
/* Narrow tiles have room for two lines only, so name and price stand down. */
.twr-h.is-w1 .hn,.twr-h.is-w1 .hp,.twr-h.is-w2 .hp{display:none}

/* On a phone the widest basis is wider than the column, so a top mover would
   sit alone on its row and grow to fill it — every big name printed as a
   full-width slab, which reads as "this is the market" rather than "this moved
   most". Percentages of the row keep at least two tiles side by side at any
   handset width, and the ranking still shows as 58/42 against 33/33/33. */
@media(max-width:700px){
  .twr-h{min-width:0}
  .twr-h.is-w1,.twr-h.is-w2{flex:1 1 30%}
  .twr-h.is-w3,.twr-h.is-w4{flex:2 1 46%}
  .twr-h.is-w2 .hn{display:none}
  .twr-hfill{flex:1 1 30%}
}

.twr-heat-legend{display:flex;align-items:center;gap:4px;flex-wrap:wrap;margin-top:11px}
.twr-heat-legend i{width:26px;height:9px;border-radius:2px;display:block}
.twr-heat-legend .hl-lab{font:600 10px var(--font-b);letter-spacing:.6px;text-transform:uppercase;
  color:var(--mut-2);margin:0 6px}
.twr-heat-legend .hl-note{font:400 11px var(--font-b);color:var(--mut-2);margin-left:8px}

/* ---------- Tool pages: calculator beside the live dock ----------
   The tool keeps the wide column it has always had; the dock is a fixed rail
   that never squeezes it. Below 1080px the rail drops under the tool rather
   than shrinking into an unreadable sliver. */
.twr-toolgrid{display:grid;grid-template-columns:minmax(0,1fr) 306px;gap:30px;align-items:start}
.twr-toolgrid .twr-toolmain{min-width:0}
.twr-tooldock{padding-top:8px}
.twr-tooldock .twr-dock-foot{margin:0;font:600 12.5px var(--font-b);text-align:center}
.twr-tooldock .twr-dock-foot a{color:var(--brand)}
@media(max-width:1080px){
  .twr-toolgrid{grid-template-columns:1fr;gap:8px}
  .twr-tooldock{position:static;display:grid;grid-template-columns:1fr 1fr;gap:0 15px;padding-top:22px}
}
@media(max-width:640px){
  .twr-tooldock{grid-template-columns:1fr}
}

/* ---------- ⑪ Rails ---------- */
/* The homepage's only block of unique prose, and the only place the category
   and tool pages get linked from the site's strongest page. Styled as a quiet
   footer band so it informs without competing with the newsroom above it. */
.twr-homeseo{padding:6px 0 44px}
.twr-homeseo>h2{font-family:var(--font-s);font-size:21px;font-weight:600;letter-spacing:-.01em;
  margin:0 0 18px;color:var(--txt)}
.twr-homeseo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.twr-homeseo-grid h3{font-family:var(--font-s);font-size:15px;font-weight:600;margin:0 0 7px;color:var(--txt)}
.twr-homeseo-grid p{font-size:13.5px;line-height:1.62;color:var(--mut);margin:0}
.twr-homeseo-grid a{color:var(--brand);font-weight:500}
.twr-homeseo-grid a:hover{text-decoration:underline}

.twr-rails{padding:4px 0 40px}
.twr-rgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.twr-rail{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--card);
  transition:transform .22s var(--ease),box-shadow .22s var(--ease)}
.twr-rail:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.twr-rail .rh{padding:12px 16px;color:#fff;font:600 12px var(--font-b);letter-spacing:.5px;
  display:flex;justify-content:space-between;align-items:center;text-transform:uppercase}
.twr-rail .rh a{color:#fff}
.twr-rail .rh span{font:400 11px var(--font-b);opacity:.85;text-transform:none}
.twr-rail ul{list-style:none;padding:5px 16px 11px;margin:0}
.twr-rail li{font:500 13.5px var(--font-b);line-height:1.42;padding:10px 0;border-bottom:1px solid var(--soft-2)}
.twr-rail li:last-child{border:none}
.twr-rail li a:hover{color:var(--brand)}
.twr-rail li small{display:block;font-size:11px;color:var(--mut-2);font-weight:400;margin-top:3px}

/* ---------- ⑬ Footer ---------- */
.twr-footer{background:var(--ink);color:#93A1B5;padding:42px 0 0;margin-top:0}
[data-theme="dark"] .twr-footer{background:#070B13}
.twr-fgrid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:32px;padding-bottom:32px}
.twr-fgrid h5{font:600 11.5px var(--font-b);letter-spacing:1.3px;color:#fff;margin:0 0 13px;text-transform:uppercase}
.twr-fgrid a{display:block;font:400 13px var(--font-b);padding:4.5px 0;color:#93A1B5}
.twr-fgrid a:hover{color:#A5B4FC}
.twr-flogo{height:28px;width:auto;display:block}
.twr-fgrid .fp{font-size:13px;line-height:1.65;margin-top:12px;max-width:290px;font-weight:400}
.twr-legal{border-top:1px solid #1D2B44;padding:16px 0 22px;font-size:11.5px;color:#5F6E84;line-height:1.6}

/* ---------- Single article (content + live sidebar) ---------- */
.twr-progress{position:fixed;top:0;left:0;height:3px;background:linear-gradient(90deg,var(--brand),#7B78FF);
  width:0;z-index:100;transition:width .1s linear}
.twr-article-grid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:44px;align-items:start;padding-top:34px;padding-bottom:12px}
.twr-article-main{min-width:0}
.twr-article-head .twr-chip{margin-bottom:14px}
.twr-article-head h1{font-family:var(--font-s);font-size:clamp(28px,3.4vw,40px);line-height:1.16;
  letter-spacing:-.015em;margin:10px 0 14px;font-weight:700;max-width:850px}
.twr-article-head .twr-dek{font-size:18px;color:var(--mut);line-height:1.6;margin:0 0 16px;max-width:800px;font-weight:400}
.twr-article-media{margin:24px 0 6px}
.twr-article-media img{width:100%;border-radius:12px}
.twr-article-media figcaption{font-size:12px;color:var(--mut-2);margin-top:8px}
.twr-prose{font-size:17px;line-height:1.75;font-weight:400;max-width:800px}
.twr-prose>*{max-width:100%}
.twr-prose h2{font-family:var(--font-s);font-size:26px;font-weight:600;margin:1.5em 0 .55em}
.twr-prose h3{font-family:var(--font-s);font-size:20.5px;font-weight:600;margin:1.35em 0 .5em}
.twr-prose p{margin:0 0 1.25em}
.twr-prose strong{font-weight:600}
.twr-prose a{color:var(--brand);text-decoration:underline;text-decoration-color:rgba(27,23,255,.3);text-underline-offset:3px}
.twr-prose a:hover{text-decoration-color:var(--brand)}
.twr-prose img{border-radius:10px}
.twr-prose blockquote{border-left:3px solid var(--brand);margin:1.5em 0;padding:.35em 0 .35em 1.2em;
  font-family:var(--font-s);font-size:1.08em;color:var(--mut);font-style:normal}
.twr-prose ul,.twr-prose ol{padding-left:1.4em;margin:0 0 1.25em}
.twr-prose li{margin-bottom:.45em}
.twr-prose table{width:100%;border-collapse:collapse;font-size:15px;margin:1.4em 0;display:block;overflow-x:auto}
.twr-prose th,.twr-prose td{border:1px solid var(--line);padding:9px 13px;text-align:left}
.twr-prose th{background:var(--soft);font-weight:600}
.twr-prose code{background:var(--soft-2);border-radius:5px;padding:2px 6px;font-size:.88em}
/* [highlight]…[/highlight] → yellow marker effect */
.twr-hl,.twr-prose mark{background:linear-gradient(180deg,transparent 42%,#FDE68A 42%);color:inherit;
  padding:0 3px;border-radius:3px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
[data-theme="dark"] .twr-hl,[data-theme="dark"] .twr-prose mark{background:linear-gradient(180deg,transparent 42%,rgba(202,138,4,.55) 42%)}
.twr-page-prose{max-width:900px;margin:0 auto;padding:8px 24px 46px}
.twr-takeaways{background:var(--brand-t);border:1px solid var(--brand);border-left-width:4px;border-radius:11px;
  padding:18px 20px;margin:0 0 1.5em}
.twr-takeaways h2,.twr-takeaways h3{font:600 12px var(--font-b);margin:0 0 9px;letter-spacing:1px;text-transform:uppercase;
  color:var(--brand);display:flex;align-items:center;gap:7px}
.twr-takeaways ul{margin:0;padding-left:1.2em}
.twr-takeaways li{font-size:15px;margin-bottom:.5em}
/* Quick answer (plugin 2.49.0): the direct answer to the guide's own title,
   above the opening story, where answer engines and skimmers both look first. */
.twr-quick-answer{background:var(--soft);border:1px solid var(--line-2);border-left:4px solid var(--brand);
  border-radius:11px;padding:16px 20px;margin:0 0 1.6em}
.twr-quick-answer .twr-qa-label{font:600 12px var(--font-b);letter-spacing:1px;text-transform:uppercase;
  color:var(--brand);margin:0 0 7px}
.twr-quick-answer p:last-child{margin:0;font-size:16px;line-height:1.6;color:var(--txt)}
/* Callouts rebuilt from the [takeaway] / [warning] markers in older guides. */
.twr-callout{border-radius:11px;padding:16px 20px;margin:1.4em 0;border:1px solid var(--line-2);border-left-width:4px}
.twr-callout-key{background:var(--brand-t);border-color:var(--brand)}
.twr-callout-warn{background:var(--down-bg);border-color:var(--down)}
.twr-callout-label{font:600 12px var(--font-b);letter-spacing:1px;text-transform:uppercase;color:var(--brand);margin:0 0 8px}
.twr-callout ul{margin:0;padding-left:1.2em}
.twr-callout li{font-size:15px;margin-bottom:.5em}
.twr-callout p:last-child{margin-bottom:0}
/* ---------- The facts table ----------
   The checkable numbers of a story, lifted out of the prose and put where a
   skim lands: above the first H2, so it is on screen before a phone reader has
   scrolled. Label left, value right, one row per fact. Two design decisions
   worth keeping: the values are tabular figures, so digits line up down the
   column and a reader can compare them at a glance, and the row labels are real
   <th scope="row"> cells, so a screen reader announces "Oil price move, Brent
   up 4.2%" rather than reading a grid of anonymous cells.

   It deliberately does NOT look like the prose tables above: this is
   instrumentation on an editorial page, so it wears the brand rule and the soft
   panel that the takeaways box does. */
.twr-facts{margin:1.6em 0;padding:0;border:1px solid var(--line);border-left:4px solid var(--brand);
  border-radius:11px;overflow:hidden;background:var(--card)}
.twr-facts table{width:100%;border-collapse:collapse;margin:0;display:table;font-size:15px}
.twr-facts caption{caption-side:top;text-align:left;font:600 11px var(--font-b);letter-spacing:1px;
  text-transform:uppercase;color:var(--brand);background:var(--brand-t);padding:11px 18px;
  border-bottom:1px solid var(--line)}
.twr-facts tbody tr+tr{border-top:1px solid var(--soft-2)}
.twr-facts th,.twr-facts td{border:0;padding:11px 18px;text-align:left;vertical-align:top;line-height:1.5}
.twr-facts th{background:transparent;font:500 13.5px var(--font-b);color:var(--mut);width:38%;white-space:normal}
.twr-facts td{font-weight:600;color:var(--txt);font-variant-numeric:tabular-nums}
.twr-facts tbody tr:nth-child(even){background:var(--card-2)}
@media(max-width:520px){
  /* Stacked, because a 38% label column on a 360px screen leaves the value two
     words wide and every row wraps to four lines. */
  .twr-facts th,.twr-facts td{display:block;width:auto}
  .twr-facts th{padding-bottom:2px}
  .twr-facts td{padding-top:0}
}
.twr-source-credit{background:var(--soft);border:1px solid var(--line);border-radius:10px;padding:13px 17px;
  font-size:13px;color:var(--mut);margin:1.5em 0}
/* Automation disclosure, sits directly under the source credit and is deliberately
   quieter than it: the credit is the claim, this is the method note. */
.twr-prose .twr-ai-disclosure{background:var(--soft);border:1px solid var(--line);border-radius:11px;margin:1.9em 0;padding:14px 18px;font-size:13px;color:var(--mut-2);line-height:1.65}
.twr-prose .twr-ai-disclosure strong{display:block;font:600 11px var(--font-b);letter-spacing:1.1px;text-transform:uppercase;color:var(--mut);margin-bottom:6px}
.twr-prose .twr-ai-disclosure p{margin:0}
.twr-prose .twr-ai-disclosure a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.twr-toc{background:var(--soft);border:1px solid var(--line);border-radius:11px;padding:16px 20px;margin:0 0 1.7em;font-size:14px}
.twr-toc strong{display:block;font:600 11px var(--font-b);letter-spacing:1.1px;text-transform:uppercase;color:var(--mut);margin-bottom:9px}
.twr-toc ol{margin:0;padding-left:1.3em}
.twr-toc li{margin-bottom:.3em}
.twr-toc a{color:var(--txt);text-decoration:none;font-weight:400}
.twr-toc a:hover{color:var(--brand)}
.twr-share{display:flex;gap:9px;align-items:center;margin:24px 0 0;padding-top:20px;border-top:1px solid var(--line);flex-wrap:wrap}
.twr-share span{font:600 11px var(--font-b);letter-spacing:1.1px;color:var(--mut);text-transform:uppercase}
.twr-share a{width:36px;height:36px;border:1px solid var(--line);border-radius:9px;display:inline-flex;
  align-items:center;justify-content:center;transition:all .2s var(--ease);color:var(--mut);font-size:13px}
.twr-share a:hover{border-color:var(--brand);color:var(--brand);transform:translateY(-2px)}
.twr-share a svg{width:15px;height:15px}
.twr-authorbox{display:flex;gap:15px;background:var(--soft);border:1px solid var(--line);border-radius:12px;
  padding:18px;margin:26px 0}
.twr-authorbox .twr-ava{width:52px;height:52px;border-radius:50%;flex-shrink:0;overflow:hidden;
  background:linear-gradient(135deg,var(--brand),var(--teal))}
.twr-authorbox .twr-ava img{width:100%;height:100%;object-fit:cover}
.twr-authorbox h4{font:600 15.5px var(--font-b);margin:0 0 2px}
.twr-authorbox h4 a{color:var(--txt);text-decoration:none}
.twr-authorbox h4 a:hover{color:var(--brand)}
.twr-authorbox p{margin:0;font-size:13px;color:var(--mut);line-height:1.55;font-weight:400}
.twr-ab-role{margin:0 0 6px!important;font-size:12.5px!important;color:var(--brand)!important;font-weight:600!important}
.twr-ab-more{margin-top:8px!important;font-size:12.5px!important}
.twr-ab-more a{color:var(--mut);text-decoration:none;border-bottom:1px solid var(--line-2)}
.twr-ab-more a:hover{color:var(--brand);border-color:currentColor}

/* ---------- Author profile page ----------
   The page a money site is judged on, so it is built like a masthead entry
   rather than like an archive header: portrait, name, desk, the bio in full,
   then a row of facts COUNTED out of the posts table, then how to reach the
   person. Every colour here is a token, so dark mode needs no second ruleset. */
.twr-author-hero{padding:24px 0 6px}
.twr-ah-card{display:flex;gap:26px;background:var(--card);border:1px solid var(--line);
  border-radius:14px;padding:26px 28px;box-shadow:var(--shadow)}
.twr-ah-photo{flex:0 0 152px}
.twr-ah-photo img{width:152px;height:152px;border-radius:12px;object-fit:cover;display:block;background:var(--soft-2)}
.twr-ah-body{flex:1;min-width:0}
.twr-ah-body h1{font-family:var(--font-s);font-size:clamp(25px,3vw,33px);font-weight:700;
  letter-spacing:-.4px;line-height:1.15;margin:0 0 7px}
.twr-ah-role{margin:0 0 15px;font-size:14.5px;color:var(--mut);display:flex;gap:8px;flex-wrap:wrap;align-items:baseline}
.twr-ah-title{color:var(--brand);font-weight:600}
.twr-ah-sep{color:var(--line-2)}
.twr-ah-bio p{margin:0 0 .8em;font-size:15px;line-height:1.68;color:var(--txt);font-weight:400}
.twr-ah-bio p:last-child{margin-bottom:0}
.twr-ah-facts{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:17px 0 0;padding:0}
.twr-ah-facts li{background:var(--soft);border:1px solid var(--line);border-radius:999px;
  padding:6px 13px;font-size:12.5px;color:var(--mut)}
.twr-ah-facts b{color:var(--txt);font-weight:600;font-variant-numeric:tabular-nums}
.twr-ah-contact{margin:15px 0 0;font-size:13px;color:var(--mut-2);display:flex;gap:8px;flex-wrap:wrap;align-items:baseline}
.twr-ah-contact a{color:var(--mut);text-decoration:none;border-bottom:1px solid var(--line-2)}
.twr-ah-contact a:hover{color:var(--brand);border-color:currentColor}
@media(max-width:720px){
  .twr-ah-card{flex-direction:column;gap:18px;padding:22px}
  .twr-ah-photo{flex:none}
  .twr-ah-photo img{width:110px;height:110px}
}

/* ---------- Editorial team page ([twr_masthead]) ----------
   Rendered inside .twr-prose, whose own p/h3 rules would otherwise fight this,
   hence the explicit margins. */
.twr-masthead{display:grid;gap:16px;margin:22px 0 30px}
.twr-mast-card{display:flex;gap:18px;background:var(--card);border:1px solid var(--line);
  border-radius:12px;padding:20px 22px}
.twr-mast-photo{flex:0 0 96px;display:block}
.twr-mast-photo img{width:96px;height:96px;border-radius:10px;object-fit:cover;display:block;background:var(--soft-2)}
.twr-mast-ph{width:96px;height:96px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--brand),var(--teal));color:#fff;font:700 34px var(--font-s)}
.twr-mast-body{min-width:0}
.twr-prose .twr-mast-body h3{margin:0 0 3px;font:600 17px var(--font-s)}
.twr-mast-body h3 a{color:var(--txt);text-decoration:none}
.twr-mast-body h3 a:hover{color:var(--brand)}
.twr-prose .twr-mast-role{margin:0 0 8px;font-size:13px;color:var(--brand);font-weight:600}
.twr-prose .twr-mast-bio{margin:0 0 8px;font-size:14px;color:var(--mut);line-height:1.6}
.twr-prose .twr-mast-stat{margin:0 0 6px;font-size:12.5px;color:var(--mut-2);font-variant-numeric:tabular-nums}
.twr-prose .twr-mast-link{margin:0;font-size:13px}
.twr-mast-link a{color:var(--mut);text-decoration:none;border-bottom:1px solid var(--line-2)}
.twr-mast-link a:hover{color:var(--brand);border-color:currentColor}
@media(max-width:560px){
  .twr-mast-card{flex-direction:column;gap:14px}
  .twr-mast-photo{flex:none}
}
.twr-sidebar{position:sticky;top:82px}
.twr-sidebar>div{border:1px solid var(--line);border-radius:12px;padding:16px 17px;margin-bottom:15px;background:var(--card)}
.twr-related{padding:8px 0 42px}
.twr-related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:17px}
.twr-card{background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease)}
.twr-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.twr-card .cimg{aspect-ratio:16/9;height:auto;background:var(--soft-2);display:block;overflow:hidden}
.twr-card .cimg img{width:100%;height:100%;object-fit:cover;transition:transform .55s var(--ease)}
.twr-card:hover .cimg img{transform:scale(1.05)}
.twr-card .cbody{padding:14px 16px 16px}
.twr-card h3{font-family:var(--font-s);font-size:16px;line-height:1.35;margin:8px 0 6px;font-weight:600}
.twr-card h3 a:hover{color:var(--brand)}
.twr-card .cmeta{font-size:11.5px;color:var(--mut-2);font-weight:400}
.twr-rating{margin:24px 0 6px;text-align:center;padding:18px;background:var(--soft);border:1px solid var(--line);border-radius:12px}
.twr-rating .lbl{font:600 11.5px var(--font-b);letter-spacing:1.1px;text-transform:uppercase;color:var(--mut);display:block;margin-bottom:9px}
.twr-rating .stars button{background:none;border:none;font-size:24px;cursor:pointer;color:var(--line-2);
  transition:color .15s,transform .15s var(--ease);padding:2px 4px;line-height:1}
.twr-rating .stars button:hover,.twr-rating .stars button.hot{color:var(--gold);transform:scale(1.12)}
.twr-rating .thanks{font-size:13px;color:var(--up);font-weight:500;margin-top:8px}
.twr-rating .count{font-size:11.5px;color:var(--mut-2);margin-top:6px}

/* ---------- Archive ---------- */
.twr-archive-head{padding:32px 0 6px}
.twr-archive-head h1{font-family:var(--font-s);font-size:clamp(26px,3.2vw,34px);font-weight:700;
  display:flex;align-items:center;gap:13px}
.twr-archive-head h1::before{content:'';width:5px;height:28px;background:var(--brand);border-radius:3px}
.twr-archive-head p{color:var(--mut);margin:4px 0 0;max-width:640px;font-weight:400}
.twr-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:19px;padding:24px 0 44px}
.twr-pagination{display:flex;gap:7px;justify-content:center;padding:0 0 44px}
.twr-pagination .page-numbers{border:1px solid var(--line);border-radius:8px;padding:8px 13px;
  font:500 13px var(--font-b);color:var(--mut)}
.twr-pagination .page-numbers.current,.twr-pagination .page-numbers:hover{background:var(--brand);color:#fff;border-color:var(--brand)}

/* ---------- Articles index (/articles/) ----------
   Every hand-written piece on the site, three across, nine to a page with
   numbered paging underneath. "Load more stories" on the front page used to
   point at the Finance Wire, which is the API lane — a reader who wanted more
   of our writing landed in a river of wire briefs. This is where it points now. */
.twr-artcount{font:500 13px var(--font-b);color:var(--mut-2);margin:10px 0 0}
.twr-artgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:19px;padding:22px 0 34px}
@media (max-width:1100px){.twr-artgrid{grid-template-columns:1fr 1fr}}
@media (max-width:760px){.twr-artgrid{grid-template-columns:1fr}}

/* ---------- Pages / calculators ---------- */
.twr-page-full{max-width:var(--maxw);margin:0 auto;padding:34px 24px 48px}

/* Tool page: product layout, left aligned, calculator first.
   The old layout put the whole page in a 900px centred column with an intro
   paragraph above the tool, so the calculator sat low and off-centre against the
   full-width header. Now the title and the tool start at the same left edge, the
   tool spans the working width, and the reading matter below keeps a comfortable
   measure rather than stretching to the full grid. */
.twr-toolwrap{padding:4px 24px 50px}
.twr-tool-title{font-family:var(--font-s);font-size:clamp(27px,3.3vw,38px);font-weight:700;
  line-height:1.16;letter-spacing:-.015em;margin:8px 0 20px}
.twr-tool-prose{max-width:none}
.twr-tool-prose>*{max-width:880px}
.twr-tool-prose>.twr-calc{max-width:1120px;margin:0 0 32px}
.twr-tool-prose>.twr-tool-links{max-width:1120px}
.twr-tool-prose>h2{margin-top:1.7em}
/* First element after the calculator is the intro line: give it a touch more
   presence, it is the page's dek now that it sits below the tool. */
.twr-tool-prose>.twr-calc+p{font-size:17.5px;color:var(--mut);line-height:1.7}
@media (max-width:1080px){
  .twr-tool-prose>.twr-calc,.twr-tool-prose>.twr-tool-links{max-width:none}
}
@media (max-width:760px){
  .twr-toolwrap{padding:2px 18px 40px}
  .twr-tool-title{margin:4px 0 14px}
  .twr-tool-prose>.twr-calc{margin-bottom:24px}
  .twr-tool-prose>.twr-calc+p{font-size:16px}
}

/* Calculator shell: inputs on the left, result + donut + line on the right. */
.twr-calc{background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg);
  padding:24px;margin:24px 0;display:grid;grid-template-columns:1.02fr 1fr;gap:26px;align-items:start;overflow:hidden}
.tw-skel-note{grid-column:1/-1;color:var(--mut-2);font-size:13.5px;padding:18px 2px}
.twr-calc.tw-conv,.twr-calc.twr-breadth{display:block}

/* Inputs column */
.tw-inputs{display:flex;flex-direction:column;gap:2px}
.tw-curbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px;
  padding-bottom:14px;border-bottom:1px solid var(--line)}
.tw-curbar label{font:600 11px var(--font-b);letter-spacing:.6px;text-transform:uppercase;color:var(--mut-2)}
.tw-curbar select{border:1px solid var(--line);border-radius:9px;background:var(--soft);
  padding:8px 12px;font:600 13.5px var(--font-b);color:var(--txt);cursor:pointer;outline:none}
.tw-curbar select:focus{border-color:var(--brand)}

.tw-field{margin-bottom:20px}
.tw-field-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:11px}
.tw-field-top label{font:500 13.5px var(--font-b);color:var(--mut);line-height:1.3}
/* Editable value box (type OR use the slider) */
.tw-box{display:inline-flex;align-items:center;gap:2px;border:1.5px solid var(--line);border-radius:9px;
  background:var(--soft);padding:6px 10px;transition:border-color .18s var(--ease),box-shadow .18s var(--ease);min-width:96px}
.tw-box:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-t)}
[data-theme="dark"] .tw-box:focus-within{box-shadow:0 0 0 3px rgba(123,120,255,.18)}
.tw-box .tw-pre,.tw-box .tw-post{font:600 14px var(--font-b);color:var(--mut-2);flex:0 0 auto}
.tw-num-in{border:0;background:transparent;outline:none;width:100%;min-width:52px;text-align:right;
  font:700 15.5px var(--font-b);color:var(--txt);font-variant-numeric:tabular-nums}
.tw-box.is-cur .tw-num-in{text-align:right}
.tw-num-in::-webkit-outer-spin-button,.tw-num-in::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* Slider — draggable, with a brand-filled track */
.tw-slider{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:6px;margin:2px 0 0;cursor:pointer;
  background:linear-gradient(90deg,var(--brand) 0 var(--fill,50%),var(--soft-2) var(--fill,50%) 100%)}
.tw-slider:focus{outline:none}
.tw-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;
  background:#fff;border:3px solid var(--brand);box-shadow:0 1px 4px rgba(10,20,40,.28);cursor:grab;margin-top:-7px;transition:transform .12s var(--ease)}
.tw-slider:active::-webkit-slider-thumb{transform:scale(1.14);cursor:grabbing}
.tw-slider::-webkit-slider-runnable-track{height:6px;border-radius:6px}
.tw-slider:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px var(--brand-t)}
.tw-slider::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#fff;border:3px solid var(--brand);
  box-shadow:0 1px 4px rgba(10,20,40,.28);cursor:grab}
.tw-slider::-moz-range-track{height:6px;border-radius:6px;background:var(--soft-2)}
.tw-slider::-moz-range-progress{height:6px;border-radius:6px;background:var(--brand)}

/* Result column */
.tw-output{display:flex;flex-direction:column;gap:16px;min-width:0}
.tw-result{background:linear-gradient(140deg,var(--ink),#14124B);border-radius:14px;color:#fff;padding:22px 22px 20px;text-align:center}
[data-theme="dark"] .tw-result{background:linear-gradient(140deg,#0E1524,#191552);border:1px solid var(--line)}
.tw-r-label{font:600 10.5px var(--font-b);letter-spacing:1.4px;color:#9FB2C8;text-transform:uppercase}
.tw-r-value{font:700 clamp(27px,3.4vw,40px) var(--font-b);color:#A5B4FC;margin:6px 0 2px;font-variant-numeric:tabular-nums;line-height:1.05;word-break:break-word}
.tw-r-value.tw-loading{opacity:.45}
.tw-r-sub{font-size:13px;color:#C7D2E0;font-weight:400}
@keyframes tw-pop{0%{transform:scale(.965);opacity:.55}100%{transform:scale(1);opacity:1}}
.tw-pop{animation:tw-pop .34s var(--ease)}

/* Donut */
.tw-visual{display:flex;flex-direction:column;gap:14px}
.tw-donutwrap{position:relative;width:150px;height:150px;margin:2px auto 0}
.tw-donut{width:150px;height:150px;transform:rotate(-90deg)}
.tw-donut circle{fill:none;stroke-width:15}
.tw-seg-bg{stroke:var(--soft-2)}
.tw-seg{transition:stroke-dasharray .5s var(--ease),stroke-dashoffset .5s var(--ease)}
.tw-seg-a{stroke:var(--brand)}.tw-dot-a{background:var(--brand)}
.tw-seg-b{stroke:var(--up)}.tw-dot-b{background:var(--up)}
.tw-seg-c{stroke:var(--down)}.tw-dot-c{background:var(--down)}
.tw-donut-c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.tw-donut-c span{font:600 9.5px var(--font-b);letter-spacing:.8px;text-transform:uppercase;color:var(--mut-2)}
.tw-donut-c b{font:700 17px var(--font-b);color:var(--txt);font-variant-numeric:tabular-nums;margin-top:2px}
.tw-legend{display:flex;flex-direction:column;gap:8px}
.tw-leg{display:flex;align-items:center;gap:9px;font-size:13px}
.tw-dot{width:11px;height:11px;border-radius:3px;flex:0 0 auto}
.tw-leg-k{color:var(--mut);font-weight:500}
.tw-leg-v{margin-left:auto;font-weight:600;color:var(--txt);font-variant-numeric:tabular-nums}
.tw-leg-v em{color:var(--mut-2);font-style:normal;font-weight:500;font-size:11.5px;margin-left:3px}

/* Growth line */
.tw-line-wrap{border:1px solid var(--line);border-radius:11px;padding:12px 12px 6px;background:var(--card-2)}
.tw-line-lbl{font:600 10.5px var(--font-b);letter-spacing:.8px;text-transform:uppercase;color:var(--mut-2);margin-bottom:4px}
.tw-line{width:100%;height:120px;display:block;overflow:visible}

/* Breakdown rows */
.tw-rows{display:flex;flex-direction:column}
.tw-row{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;color:var(--mut);
  border-top:1px solid var(--line);padding:10px 0;font-weight:400}
.tw-row:first-child{border-top:0}
.tw-row b{color:var(--txt);font-weight:600;font-variant-numeric:tabular-nums;text-align:right}

/* Currency converter */
.tw-conv .tw-conv-in{max-width:560px}
.tw-conv .tw-field{margin-bottom:16px}
.tw-conv .tw-box{width:100%;padding:11px 14px}
.tw-conv-row{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:end}
.tw-conv-sel select{width:100%;border:1.5px solid var(--line);border-radius:9px;background:var(--soft);
  padding:12px 12px;font:600 14px var(--font-b);color:var(--txt);outline:none;cursor:pointer}
.tw-conv-sel select:focus{border-color:var(--brand)}
.tw-swap{width:42px;height:42px;border-radius:50%;border:1.5px solid var(--line);background:var(--card);
  color:var(--brand);cursor:pointer;display:flex;align-items:center;justify-content:center;margin-bottom:1px;
  transition:transform .3s var(--ease),border-color .18s,background .18s;flex:0 0 auto}
.tw-swap:hover{border-color:var(--brand);background:var(--brand-t);transform:rotate(180deg)}
[data-theme="dark"] .tw-swap:hover{background:rgba(123,120,255,.12)}
.tw-swap svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tw-conv-quick{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.tw-chip{border:1px solid var(--line);background:var(--soft);border-radius:20px;padding:6px 13px;
  font:600 12.5px var(--font-b);color:var(--mut);cursor:pointer;transition:all .16s var(--ease)}
.tw-chip:hover{border-color:var(--brand);color:var(--brand)}
.tw-conv-note{font-size:12px;color:var(--mut-2);line-height:1.6;margin:16px 0 0;font-weight:400}
.tw-conv-result{margin-bottom:14px}
.tw-conv-rate{border:1px solid var(--line);border-radius:11px;padding:6px 16px;background:var(--card-2);max-width:560px}
.tw-rate-row{display:flex;justify-content:space-between;gap:12px;font-size:14px;color:var(--mut);
  padding:11px 0;border-bottom:1px solid var(--line)}
.tw-rate-row b{color:var(--txt);font-weight:700;font-variant-numeric:tabular-nums}
.tw-rate-date{font-size:11.5px;color:var(--mut-2);padding:8px 0 4px;text-align:right}
/* Formula callout on tool pages */
.twr-formula{background:var(--card-2);border:1px solid var(--line);border-left:3px solid var(--brand);
  border-radius:11px;padding:16px 18px;margin:16px 0 20px}
.twr-formula code{display:block;font:600 clamp(15px,2.4vw,19px) var(--font-b);color:var(--txt);
  letter-spacing:.2px;overflow-x:auto;white-space:nowrap;padding-bottom:2px}
.twr-formula-keys{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 18px}
.twr-formula-keys li{font-size:13px;color:var(--mut);position:relative;padding-left:14px}
.twr-formula-keys li::before{content:'';position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;background:var(--brand)}
.twr-tool-disc{font-size:13px;color:var(--mut-2);border-top:1px solid var(--line);padding-top:16px;margin-top:26px}

.twr-faq{margin:32px 0}
.twr-faq h2{font-family:var(--font-s);font-weight:600}
.twr-faq details{border:1px solid var(--line);border-radius:10px;margin-bottom:9px;background:var(--card);overflow:hidden}
.twr-faq summary{cursor:pointer;padding:14px 18px;font:500 15px var(--font-b);list-style:none;position:relative}
.twr-faq summary::after{content:'+';position:absolute;right:18px;font-size:18px;color:var(--brand);transition:transform .22s var(--ease)}
.twr-faq details[open] summary::after{transform:rotate(45deg)}
.twr-faq details p{padding:0 18px 15px;margin:0;color:var(--mut);font-size:14.5px;line-height:1.65;font-weight:400}

/* ---------- Search & 404 ---------- */
.twr-notfound{text-align:center;padding:76px 24px 86px;max-width:640px;margin:0 auto}
.twr-notfound .code{font:700 84px var(--font-s);background:linear-gradient(120deg,var(--brand),#7B78FF);
  -webkit-background-clip:text;background-clip:text;color:transparent;line-height:1}
.twr-notfound p{color:var(--mut)}

/* ---------- Back to top ---------- */
.twr-top{position:fixed;bottom:24px;right:24px;width:42px;height:42px;border-radius:11px;background:var(--ink);
  color:#fff;border:none;cursor:pointer;font-size:16px;opacity:0;visibility:hidden;transform:translateY(10px);
  transition:all .3s var(--ease);z-index:80;box-shadow:var(--shadow-lg)}
.twr-top.show{opacity:1;visibility:visible;transform:none}
.twr-top:hover{background:var(--brand)}

/* A calm, honest empty state. Never blame the reader or expose plumbing. */
.twr-softempty{color:var(--mut);font-size:13.5px;line-height:1.6;margin:0;padding:10px 0}

/* ---------- Skeleton ---------- */
@keyframes twr-shimmer{0%{background-position:-400px 0}100%{background-position:400px 0}}
.twr-skel{background:linear-gradient(90deg,var(--soft) 25%,var(--soft-2) 37%,var(--soft) 63%);
  background-size:400px 100%;animation:twr-shimmer 1.4s infinite;border-radius:8px;color:transparent!important}

/* Any customizer logo that sneaks in gets constrained hard. */
.twr-logo .custom-logo-link{display:block}
.twr-logo .custom-logo{max-height:34px!important;width:auto!important;max-width:220px;object-fit:contain}

/* ==========================================================================
   TOOLS HUB — command-center look
   ========================================================================== */
/* Clean, light editorial header (replaces the old dark-blue gradient box). */
.twr-hub-hero{background:var(--paper);color:var(--txt);padding:44px 0 30px;border-bottom:1px solid var(--line)}
.twr-hub-hero .twr-wrap{position:relative}
.twr-hub-hero .hh-kicker{font:600 11px var(--font-b);letter-spacing:2.2px;color:var(--brand);margin:0 0 10px}
.twr-hub-hero h1{color:var(--txt);font-size:clamp(28px,3.6vw,44px);max-width:720px;margin:0 0 12px}
.twr-hub-hero .hh-sub{color:var(--mut);font-size:15.5px;line-height:1.65;max-width:660px;margin:0 0 22px;font-weight:400}
.twr-hub-body{padding-bottom:52px}
.twr-hub-chips{display:flex;gap:8px;flex-wrap:wrap;padding:26px 0 20px}
.twr-hubchip{font:500 13px var(--font-b);padding:8px 17px;border-radius:99px;border:1px solid var(--line);
  color:var(--mut);background:var(--card);cursor:pointer;transition:all .22s var(--ease)}
.twr-hubchip:hover{border-color:var(--brand);color:var(--brand)}
.twr-hubchip.on{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:600}
.twr-hub-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.twr-hubcard{position:relative;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px 21px 18px;
  display:flex;flex-direction:column;overflow:hidden;transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s}
.twr-hubcard::before{content:'';position:absolute;inset:0 0 auto 0;height:3px;
  background:linear-gradient(90deg,var(--brand),#7B78FF);opacity:0;transition:opacity .25s}
.twr-hubcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--brand)}
.twr-hubcard:hover::before{opacity:1}
.hc-new{position:absolute;top:14px;right:14px;font:700 9px var(--font-b);letter-spacing:1px;
  background:var(--brand);color:#fff;padding:3px 8px;border-radius:5px;animation:twr-pulse 2s infinite}
.hc-em{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  font-size:23px;background:var(--brand-t);margin-bottom:13px}
.twr-hubcard h3{font:600 17px var(--font-b);margin:0 0 6px;color:var(--txt)}
.twr-hubcard p{font-size:13.5px;color:var(--mut);line-height:1.55;margin:0 0 10px;font-weight:400}
.hc-diff{font-size:12.5px!important;color:var(--mut-2)!important;background:var(--soft);border-radius:8px;
  padding:8px 11px!important;margin:auto 0 12px!important}
.hc-diff b{color:var(--brand);font-weight:600}
.hc-cta{font:600 13px var(--font-b);color:var(--brand)}
.twr-hub-guide{margin-top:44px}
.hg-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.hg-item{background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:18px 20px}
.hg-item h4{font:600 15px var(--font-s);margin:0 0 7px}
.hg-item p{font-size:13.5px;color:var(--mut);line-height:1.6;margin:0;font-weight:400}
.hg-item a{color:var(--brand);font-weight:500;text-decoration:underline;text-decoration-color:rgba(27,23,255,.3);text-underline-offset:3px}
.hg-foot{font-size:13.5px;color:var(--mut);margin-top:16px}
.hg-foot a{color:var(--brand);font-weight:500}

/* ---------- Index Movers (breadth) tool ---------- */
.twr-breadth{display:block}
.twr-breadth .tb-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.twr-breadth .tb-tabs{margin:0}
.twr-breadth .tb-updated{margin-left:auto;font:500 11.5px var(--font-b);color:var(--mut-2)}
.tb-score{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px}
.tb-n{text-align:center;min-width:86px}
.tb-n b{display:block;font-size:clamp(30px,4vw,44px);font-weight:700;line-height:1}
.tb-n span{font:600 10.5px var(--font-b);letter-spacing:1px;text-transform:uppercase;color:var(--mut-2)}
.tb-idxname{flex:1;text-align:center;font:600 16px var(--font-b)}
.tb-idxname small{display:block;font:400 11.5px var(--font-b);color:var(--mut-2);margin-top:3px}
.tb-bar{height:12px;border-radius:7px;background:var(--down-bg);overflow:hidden;position:relative;margin-bottom:10px}
.tb-bar::after{content:'';position:absolute;inset:0;border-radius:7px;box-shadow:inset 0 0 0 1px var(--line)}
.tb-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--up),#34D399);border-radius:7px 0 0 7px;transition:width 1.1s var(--ease)}
.tb-verdict{font:500 14px var(--font-b);color:var(--mut);text-align:center;margin-bottom:20px}
.tb-lists{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.tb-col h4{font:600 11px var(--font-b);letter-spacing:1.2px;text-transform:uppercase;margin:0 0 10px;display:flex;align-items:center;gap:7px}
.tb-col-up h4{color:var(--up)}.tb-col-up h4::before{content:'▲'}
.tb-col-down h4{color:var(--down)}.tb-col-down h4::before{content:'▼'}
.tb-row{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--soft-2);font-size:13px}
.tb-row:last-child{border:none}
.tb-sym{font-weight:600;min-width:58px}
.tb-track{flex:1;height:7px;border-radius:4px;background:var(--soft-2);overflow:hidden}
.tb-track i{display:block;height:100%;border-radius:4px;transition:width .9s var(--ease)}
.tb-track i.u{background:var(--up)}.tb-track i.d{background:var(--down)}
.tb-row b{min-width:64px;text-align:right;font-variant-numeric:tabular-nums}
.tb-note{font-size:12px;color:var(--mut-2);line-height:1.6;margin:20px 0 0;font-weight:400}
.tb-empty{font-size:13px;color:var(--mut);margin:6px 0}
/* Wide breadth lists: a hundred constituents scroll INSIDE the column.
   overscroll-behavior:contain is the load-bearing line - without it the
   page scroll chains the moment a pane hits its end, which on a phone
   reads as the article jumping while you are reading the list. */
.tb-col h4 .tb-cnt{margin-left:auto;letter-spacing:0;font-size:12px;font-weight:700;opacity:.8;font-variant-numeric:tabular-nums}
.tb-scroll{max-height:430px;overflow-y:auto;overscroll-behavior:contain;padding-right:8px;scrollbar-width:thin;scrollbar-color:var(--soft-2) transparent}
.tb-scroll::-webkit-scrollbar{width:8px}
.tb-scroll::-webkit-scrollbar-track{background:transparent}
.tb-scroll::-webkit-scrollbar-thumb{background:var(--soft-2);border-radius:4px}
.tb-scroll::-webkit-scrollbar-thumb:hover{background:var(--line)}
/* Percentage over dollar move. Overrides .tb-row b's 64px floor, which was
   sized for a single figure and pushed the bar out of the row once a
   second line appeared underneath it. */
.tb-figs{min-width:78px;text-align:right;line-height:1.2}
.tb-figs b{display:block;min-width:0;font-variant-numeric:tabular-nums}
.tb-figs small{display:block;font:400 10.5px var(--font-b);color:var(--mut-2);font-variant-numeric:tabular-nums}

/* ---------- "More free tools" cross-links (every tool page) ---------- */
.twr-tool-links{margin-top:40px;padding-top:8px}
.twr-tool-links h2{font-family:var(--font-s);font-weight:600}
.twr-tool-links-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin:16px 0 18px}
.twr-tool-links-grid a{display:flex;gap:12px;align-items:flex-start;background:var(--card);border:1px solid var(--line);
  border-radius:11px;padding:13px 15px;text-decoration:none!important;transition:transform .2s var(--ease),border-color .2s}
.twr-tool-links-grid a:hover{transform:translateY(-2px);border-color:var(--brand)}
.twr-tool-links-grid .em{font-size:20px;flex-shrink:0}
.twr-tool-links-grid b{display:block;font:600 14px var(--font-b);color:var(--txt);margin-bottom:2px}
.twr-tool-links-grid small{font-size:12px;color:var(--mut-2);line-height:1.45;display:block}
.twr-tool-links-foot{font-size:13.5px;color:var(--mut)}
.twr-tool-links-foot a{color:var(--brand)}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1200px){
  .twr-hero3{grid-template-columns:minmax(0,1fr) 300px;gap:20px}
}
@media (max-width:1080px){
  .twr-cards{grid-template-columns:repeat(3,1fr)}
  .twr-rgrid{grid-template-columns:1fr 1fr}
  .twr-hero3{grid-template-columns:1fr 1fr;gap:20px}
  .twr-hero3 .twr-lead{order:-1;grid-column:1/-1}
  /* Tablet: the rail drops under the stories, snapshot and dial side by side. */
  .twr-hero3 .twr-rightcol{position:static;grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:stretch}
  .twr-hub-grid{grid-template-columns:1fr 1fr}
  .twr-hero{grid-template-columns:1fr}
  .twr-hero .twr-snap{order:-1}
  .twr-idx{grid-template-columns:repeat(4,1fr)}
  .twr-split{grid-template-columns:1fr}
  .twr-dock{position:static;display:grid;grid-template-columns:1fr 1fr;gap:15px}
  .twr-dock>div{margin-bottom:0}
  .twr-article-grid{grid-template-columns:1fr}
  .twr-sidebar{position:static;display:grid;grid-template-columns:1fr 1fr;gap:15px}
  .twr-sidebar>div{margin-bottom:0}
  .twr-related-grid,.twr-grid{grid-template-columns:1fr 1fr}
  .twr-latest-grid{grid-template-columns:1fr 1fr}
  .twr-fgrid{grid-template-columns:1fr 1fr 1fr}
  .twr-homeseo-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  body{font-size:16px}
  .twr-topbar .twr-date{display:none}
  .twr-nav-in{height:58px;gap:14px}
  .twr-logo-img{height:25px}
  .twr-menu{position:fixed;inset:58px 0 0 auto;width:min(320px,86vw);background:var(--card);
    flex-direction:column;gap:0;padding:14px;border-left:1px solid var(--line);box-shadow:var(--shadow-lg);
    transform:translateX(100%);transition:transform .32s var(--ease);z-index:90;overflow-y:auto}
  .twr-menu.open{transform:none}
  .twr-menu>li>a{padding:13px 10px;display:block;border-bottom:none;font-size:16px}
  .twr-menu .sub-menu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;
    border:none;padding:0 0 6px 18px;display:none}
  .twr-menu li.open>.sub-menu{display:block}
  /* The open menu is z-index 90 and the nav is 50, so the panel covered the
     burger and there was no way to close it again. Lift the whole actions
     cluster above the panel, and dim the page behind it so a tap outside also
     closes. */
  .twr-burger{display:inline-flex;position:relative;z-index:95}
  .twr-nav-actions{position:relative;z-index:95}
  /* .twr-nav is sticky with z-index 50, which creates its own stacking context:
     a z-index of 95 on the burger INSIDE it still cannot rise above the scrim.
     The whole bar has to be lifted while the panel is open, otherwise the close
     button sits under the dim layer and cannot be tapped. */
  body.twr-menu-open .twr-nav{z-index:96}
  .twr-menu-scrim{position:fixed;inset:0;background:rgba(6,10,20,.5);z-index:88;
    opacity:0;visibility:hidden;transition:opacity .25s var(--ease),visibility .25s}
  body.twr-menu-open .twr-menu-scrim{opacity:1;visibility:visible}
  body.twr-menu-open{overflow:hidden}
  .twr-livebtn{display:none}
  .twr-hero,.twr-hero3{padding:18px 0 24px}
  /* Phone order: lead story, then Market Snapshot and Fear & Greed side by
     side in one row. The right column is dissolved (display:contents) so its
     boxes become grid items that can be placed independently. */
  .twr-hero3{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px 10px}
  .twr-hero3 .twr-lead{order:0;grid-column:1/-1}
  .twr-hero3 .twr-rightcol{display:contents}
  .twr-hero3 .twr-snap{order:1;grid-column:1;align-self:stretch;padding:12px;min-width:0}
  .twr-hero3 .twr-fng{order:2;grid-column:2;padding:12px;min-width:0}
  /* Half a phone is ~165px, so both boxes go compact: prices stacked one per
     row, the dial above its number, the band names dropped (the verdict line
     already says the word). */
  .twr-hero3 .twr-h4{font-size:10px;letter-spacing:.8px;gap:6px;margin-bottom:10px}
  .twr-hero3 .twr-snap .twr-updated{display:none}
  .twr-hero3 .twr-idx{grid-template-columns:1fr;gap:6px}
  .twr-hero3 .twr-ic{padding:7px 9px;display:flex;flex-wrap:wrap;align-items:baseline;column-gap:6px}
  .twr-hero3 .twr-ic .n{flex-basis:100%;font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .twr-hero3 .twr-ic .v{font-size:14px;margin:1px 0 0}
  .twr-hero3 .twr-ic .ch{font-size:10.5px}
  /* The snapshot sets the row height; the dial sits centred in what is left. */
  .twr-hero3 .twr-fng{display:flex;flex-direction:column}
  .twr-hero3 .twr-fng .fng-dial{flex-direction:column;gap:2px;margin:auto 0 0}
  .twr-hero3 .twr-fng .fng-verdict{margin-bottom:auto}
  .twr-hero3 .twr-fng svg{width:100%;max-width:132px;height:auto}
  .twr-hero3 .twr-fng .fng-read{text-align:center}
  .twr-hero3 .twr-fng .fng-val{font-size:28px}
  .twr-hero3 .twr-fng .fng-scale{margin:8px 0}
  .twr-hero3 .twr-fng .fng-scale span{font-size:0}
  .twr-hero3 .twr-fng .fng-scale span i{margin-bottom:0}
  .twr-hero3 .twr-fng .fng-verdict{justify-content:center;flex-wrap:wrap;font-size:13px;text-align:center}
  .twr-lead-media{aspect-ratio:16/9;height:auto}
  .twr-hero-secs{grid-template-columns:1fr}
  .twr-sec-media{aspect-ratio:16/9;height:auto}
  /* Phones: a small featured image beside each wire headline. */
  .twr-wi{display:flex;align-items:center;gap:12px}
  .wi-body{flex:1}
  .wi-thumb{display:block;flex:none;width:84px;height:56px;object-fit:cover;border-radius:8px;background:var(--soft)}
  .twr-homeseo-grid{grid-template-columns:1fr;gap:18px}
  .twr-idx{grid-template-columns:1fr 1fr}
  .twr-cards{grid-template-columns:repeat(2,1fr)}
  .twr-rgrid{grid-template-columns:1fr}
  .twr-dock,.twr-sidebar{grid-template-columns:1fr}
  .twr-story .twr-thumb{width:116px;aspect-ratio:16/9;height:auto}
  .twr-story h3{font-size:15.5px}
  .wi-src{display:none}
  .twr-hgrid{grid-template-columns:repeat(6,1fr);grid-auto-rows:46px}
  .twr-fgrid{grid-template-columns:1fr 1fr}
  .twr-related-grid,.twr-grid,.twr-latest-grid{grid-template-columns:1fr}
  .twr-calc{grid-template-columns:1fr;gap:22px;padding:20px}
  .tw-conv-row{grid-template-columns:1fr auto 1fr}
  .tw-donutwrap,.tw-donut{width:140px;height:140px}
  .twr-tape{height:38px}
  .twr-tape-label{padding:0 10px;font-size:9.5px}
  .twr-breaking-tag{padding:0 10px;font-size:9.5px}
  .twr-breaking .dot{margin:0 8px 0 10px}
  .bk-item .bk-t{font-size:12.5px;padding-right:12px}
  /* Breadcrumbs: one swipeable line rather than a wrapped block on a phone. */
  .twr-crumbs{padding-top:10px}
  .twr-crumbs ol{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;font-size:12px}
  .twr-crumbs ol::-webkit-scrollbar{display:none}
  .twr-crumbs li{white-space:nowrap}
  .twr-crumbs .crumb-now{max-width:22ch}
  /* News flash: two cards side-by-side on phones (stacked feels endless) */
  /* Two headline rows on a phone, side by side, so the box costs the same
     vertical space it always did while still carrying only text. */
  .twr-lead-nav{justify-content:center}
  .twr-hub-hero{padding:38px 0 32px}
  .twr-hub-grid{grid-template-columns:1fr}
  .hg-grid{grid-template-columns:1fr}
  .twr-tool-links-grid{grid-template-columns:1fr}
  .tb-lists{grid-template-columns:1fr}
  .tb-n{min-width:64px}
  .tb-scroll{max-height:340px}
  .twr-rng{display:none}
}
@media (max-width:400px){
  .twr-cards,.twr-tgrid{grid-template-columns:1fr 1fr}
}
/* ---------- Answer blocks (AEO/GEO) ----------
   A question-form H2 with one short, self-contained answer under it. Given a
   left rule and a panel so a reader's eye treats it as the definitive reply
   rather than another paragraph of body copy. */
.twr-answer{
  margin:0;padding:14px 17px;background:var(--card-2);
  border-left:3px solid var(--brand);border-radius:0 var(--radius-s) var(--radius-s) 0;
  font-size:16.5px;line-height:1.62;color:var(--txt);max-width:78ch;
}
.twr-answer a{color:var(--brand);text-underline-offset:2px}
/* THE LIVE STATUS STRIP, now the first thing on /markets/.
   It used to be a grey afterthought under four lines of static prose about
   exchange hours. It is the only sentence on that page that changes through the
   day, so it leads: a status dot, the three desks, and what crypto is doing. */
.twr-answer-live{
  margin:9px 0 0;font-size:14px;font-weight:600;color:var(--mut);
  font-variant-numeric:tabular-nums;
}
.twr-nowbar{padding:2px 0 0}
.twr-nowbar .twr-answer-live{
  margin:0;display:flex;align-items:center;gap:9px;font-size:15px;color:var(--txt);
  background:var(--card);border:1px solid var(--line);border-radius:10px;
  padding:12px 16px;box-shadow:var(--shadow)}
/* Same live dot the tape and the wire boxes use, and the same keyframe — which
   animates box-shadow, so this must not set one of its own or the ring freezes. */
.twr-nowbar .twr-answer-live::before{
  content:'';width:8px;height:8px;border-radius:50%;flex:0 0 8px;
  background:var(--up);animation:twr-pulse 2s infinite}
/* Both of these are closing notes now, not openers: the routing paragraph on
   /tools/ and the exchange-hours explainer on /markets/ moved below the content
   they used to sit above. Same frame as .twr-answer-block so all three read as
   one thing — the page's citable answer, printed where it stops competing with
   the page itself. */
.twr-hours,.twr-hub-answer{margin:34px 0 8px;padding-top:22px;border-top:1px solid var(--line)}
.twr-hours h2,.twr-hub-answer h2{margin:0 0 11px;font-size:20px}
.twr-hours .twr-answer,.twr-hub-answer .twr-answer{
  font-size:15.5px;background:transparent;border-left:0;padding:0}
.twr-homeseo .twr-answer{margin-bottom:22px}
.twr-tool-fig{margin:20px 0 26px}
.twr-tool-fig img{width:100%;max-width:640px;height:auto;display:block;border:1px solid var(--line);border-radius:var(--radius-s)}
.twr-tool-fig figcaption{margin-top:8px;font-size:13px;color:var(--mut)}
/* The citable answer, now that it lives at the FOOT of the page rather than
   above the content. At the top it had to compete with the H1 and it read as a
   slab; at the bottom it is a closing note, so it is separated by a rule and
   set a size down rather than shouting. Same words, same schema, same crawler
   value — a quieter frame. */
.twr-answer-block{margin:34px 0 8px;padding-top:22px;border-top:1px solid var(--line)}
.twr-answer-block h2{margin:0 0 11px;font-size:20px}
.twr-answer-block .twr-answer{font-size:15.5px;background:transparent;border-left:0;padding:0}
/* ---------- Preferred source ask ----------
   Sits under the author box at the foot of an article. Every colour is a token,
   so the dark theme needs no second ruleset — the same reason the author box
   above it has none. Server-rendered with no script behind it, so unlike a
   third-party widget there is no height to reserve and no shift to absorb: the
   box is in the HTML at first paint or it is not there at all. */
.twr-psrc{display:flex;align-items:center;gap:14px;background:var(--soft);border:1px solid var(--line);
  border-radius:var(--radius);padding:16px 18px;margin:26px 0 0}
.twr-psrc-ico{flex-shrink:0;width:36px;height:36px;border-radius:50%;display:inline-flex;align-items:center;
  justify-content:center;background:var(--brand-t);color:var(--brand)}
.twr-psrc-body{flex:1;min-width:0}
.twr-psrc-body h4{font:600 15px var(--font-b);margin:0 0 3px;color:var(--txt)}
.twr-psrc-body p{margin:0;font:400 13px/1.55 var(--font-b);color:var(--mut)}
.twr-psrc-btn{flex-shrink:0;font-size:13px;padding:9px 15px;text-decoration:none}
.twr-psrc-btn svg{opacity:.75}
@media(max-width:640px){
  /* The button goes full width rather than shrinking to the corner: at this size
     a 13px label floated right of two lines of copy is the easiest thing on the
     page to miss, and missing it is the only failure mode this block has. */
  .twr-psrc{flex-wrap:wrap;gap:12px}
  .twr-psrc-btn{width:100%;justify-content:center}
}

@media print{
  .twr-tape,.twr-topbar,.twr-nav,.twr-breaking,.twr-dock,.twr-sidebar,.twr-footer,.twr-top,.twr-share,.twr-psrc{display:none!important}
}

/* ---- Live blog (plugin TWR_LiveBlog) ------------------------------------
   Update stream sits ABOVE the article body, newest first. Styled to read as
   a running feed rather than as more article: a rail down the left, the time
   as the anchor of each entry, and a status line that says plainly whether
   the story is still moving. */
.twr-liveblog{margin:0 0 28px;padding:0 0 0 18px;border-left:3px solid var(--brand)}
.twr-lb-status{display:flex;align-items:center;gap:9px;margin:0 0 16px;font-size:13px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;color:#DC2626}
.twr-lb-status::before{content:'';width:9px;height:9px;border-radius:50%;background:#DC2626;
  box-shadow:0 0 0 0 rgba(220,38,38,.55);animation:twr-lb-pulse 1.8s infinite}
.twr-lb-status.is-ended{color:var(--mut-2)}
.twr-lb-status.is-ended::before{background:var(--mut-2);animation:none;box-shadow:none}
.twr-lb-status span{font-weight:400;text-transform:none;letter-spacing:0;color:var(--mut-2)}
@keyframes twr-lb-pulse{
  0%{box-shadow:0 0 0 0 rgba(220,38,38,.55)}
  70%{box-shadow:0 0 0 9px rgba(220,38,38,0)}
  100%{box-shadow:0 0 0 0 rgba(220,38,38,0)}
}
@media (prefers-reduced-motion:reduce){.twr-lb-status::before{animation:none}}
.twr-lb-item{padding:0 0 18px;margin:0 0 18px;border-bottom:1px solid var(--line-2)}
.twr-lb-item:last-child{border-bottom:0;margin-bottom:0}
.twr-lb-item time{display:block;font-size:12.5px;font-weight:600;color:var(--mut-2);margin-bottom:5px}
.twr-lb-item h3{margin:0 0 7px;font-size:19px;line-height:1.3}
.twr-lb-item p{margin:0 0 9px}
.twr-lb-item p:last-child{margin-bottom:0}

/* The LIVE pill on listings (twr_live_pill).
   Same red and the same beat as the status bar on the article, because they
   report the same fact and a reader who has seen one should recognise the
   other instantly. It rides beside the category chip on cards and beside the
   timestamp in the wire, so `vertical-align` matters more than layout here:
   these are inline runs, not flex rows.

   NAMED twr-lb-pill, deliberately. `.twr-live` above (line ~514) is the MARKET
   DATA indicator: green, `twr-pulse`, and picked up by twr-markets.js to drive
   that pulse. A second `.twr-live` block down here won on cascade order and
   repainted every market badge on the site red. Do not merge these two. */
.twr-lb-pill{display:inline-flex;align-items:center;gap:5px;vertical-align:middle;margin-left:7px;
  font:700 9px var(--font-b);letter-spacing:1px;text-transform:uppercase;color:#DC2626}
.twr-lb-pill i{width:6px;height:6px;border-radius:50%;background:#DC2626;
  box-shadow:0 0 0 0 rgba(220,38,38,.55);animation:twr-lb-pulse 1.8s infinite}
/* In the wire the pill sits in a tight meta row with its own type scale, and
   the source name claims the row's spare space with margin-left:auto. */
.wi-meta .twr-lb-pill{margin-left:2px;font-size:8.5px}
@media (prefers-reduced-motion:reduce){.twr-lb-pill i{animation:none}}

/* ============================================================
   Category pillar copy — the editorial section under the grid
   ------------------------------------------------------------
   Measured 6 Oct 2026: /investing/ carried 426 words TOTAL and almost all of
   them were card titles belonging to the ten articles underneath. Investopedia's
   equivalent hub carries 714 words of its own prose. This is where ours goes.

   BELOW the grid on purpose. The reader came for the list; the depth belongs
   under it, which is also where every large publisher and retailer puts the
   same copy. Nothing here is hidden from anyone: no clamp, no accordion, no
   crawler-only rendering. All of those are cloaking or close enough to it.

   The measure is the point of the layout. .twr-wrap is 1340px, and prose set
   that wide is genuinely hard to read, so the text runs at 68ch while the
   section keeps the page's full width for its rule and spacing.
   ============================================================ */
.twr-pillar{padding:8px 24px 52px;margin-top:4px;border-top:1px solid var(--line)}
.twr-pillar>*{max-width:68ch}
.twr-pillar h2{font-family:var(--font-s);font-size:clamp(21px,2.4vw,27px);font-weight:700;
  line-height:1.25;margin:34px 0 16px;display:flex;align-items:center;gap:13px;color:var(--txt)}
/* Same brand bar the archive H1 carries, so the two headings read as one page. */
.twr-pillar h2::before{content:'';flex:none;width:5px;height:24px;background:var(--brand);border-radius:3px}
.twr-pillar h3{font-family:var(--font-s);font-size:clamp(16px,1.7vw,19px);font-weight:600;
  line-height:1.35;margin:32px 0 10px;color:var(--txt)}
.twr-pillar p{font-family:var(--font-b);font-size:15.5px;line-height:1.75;color:var(--mut);margin:0 0 15px}
.twr-pillar p:last-child{margin-bottom:0}
.twr-pillar a{color:var(--brand);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;text-decoration-color:var(--line-2);transition:text-decoration-color .15s var(--ease)}
.twr-pillar a:hover{text-decoration-color:var(--brand)}
@media(max-width:760px){
  .twr-pillar{padding:4px 20px 40px}
  .twr-pillar h2{margin-top:26px;gap:10px}
  .twr-pillar h2::before{height:21px;width:4px}
}

/* 2.31.1 — homepage H1 is visible (was screen-reader-only), and an empty
   "LATEST" bar stays hidden: .twr-breaking sets display:flex, which beat the
   browser's [hidden] rule, so the red strip showed with nothing in it. */
.twr-home-intro{padding:4px 0 24px}
.twr-home-intro h1{font-family:var(--font-s);font-size:clamp(30px,3.6vw,46px);line-height:1.08;letter-spacing:-.02em;font-weight:700;margin:0 0 12px;color:var(--ink)}
.twr-home-intro p{color:var(--mut);font-size:clamp(16px,1.3vw,18px);line-height:1.55;margin:0 0 18px;max-width:640px}
.twr-home-cta{display:flex;flex-wrap:wrap;gap:10px}
.twr-breaking[hidden]{display:none!important}

/* 2.31.2 — footer column headings and homepage tool-card titles are H3 now
   (were H5, which skipped two heading levels). Identical look to before. */
.twr-fgrid h3.twr-fh{font:600 11.5px var(--font-b);letter-spacing:1.3px;color:#fff;margin:0 0 13px;text-transform:uppercase;line-height:normal}
.twr-tc h3.twr-tc-t{font:600 13.5px var(--font-b);margin:0 0 4px;color:var(--txt);line-height:normal;letter-spacing:normal}