/*! bcs-2026.css - the design system for bestcanadianstocks.ca
 *
 * Generated from the design files by tools/build-theme.py.
 * Do not hand-edit. Rebuild from the designs instead.
 */


/* ==================== NEWS ==================== */
:root{
  --ink:#191b1d; --ink-2:#33343a; --body:#4a4a52; --faint:#5f6067;
  --paper:#ffffff; --wash:#f7f6f7; --rule:#e5e5e8; --hair:#eeeef1;
  --red:#c80815; --red-deep:#9c0610; --red-wash:#fdf3f3;
  --up:#1a7f4b; --down:#c80815;
  /* --up is the chart/fill green; --up-txt is the same hue taken
     darker so a percentage set in it clears 4.5:1 on our greys. */
  --up-txt:#12683b; --down-txt:#b0060f;
  --page:#e9e7e8;
  /* TYPE SYSTEM (decided 2026-08-30): Roboto headlines, Source Serif body,
     Roboto Mono for the numeric layer so figures stay tabular and in-family. */
  --f-head:Roboto,"Helvetica Neue",Arial,sans-serif;
  --f-body:"Source Serif 4",Georgia,serif;
  --f-data:"Roboto Mono",ui-monospace,monospace;
}
:root[data-theme="dark"]{ --page:#17161a; }
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --page:#17161a; } }
*{box-sizing:border-box}
html,body{margin:0;background:var(--page);max-width:100%}
body{font-family:var(--f-body);-webkit-font-smoothing:antialiased}
.shell{padding:18px 0 40px}
.strap{
  max-width:1180px;margin:0 auto 14px;padding:0 16px;display:flex;align-items:baseline;
  gap:12px;flex-wrap:wrap;font-family:var(--f-data);font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;color:#5f6067;
}
.strap b{color:var(--red);font-weight:600}
.scroller{overflow-x:auto;-webkit-overflow-scrolling:touch;padding:0 16px}
.page{
  width:1180px;margin:0 auto;background:var(--paper);color:var(--ink);
  box-shadow:0 2px 4px rgba(0,0,0,.08),0 18px 50px rgba(0,0,0,.14);
}
.hint{
  display:none;max-width:1180px;margin:10px auto 0;padding:0 16px;
  font-family:var(--f-data);font-size:11px;color:#5f6067;letter-spacing:.07em;
}
@media (max-width:1210px){ .hint{display:block} }
/* ---- masthead: white brand block, matching the live homepage ---- */
.mast{background:#fff;padding:20px 26px 16px;text-align:center;border-bottom:1px solid var(--rule);
  position:relative}
.mast .search{position:absolute;right:26px;top:50%;transform:translateY(-50%);
  display:flex;align-items:center;gap:7px;border:1px solid var(--rule);border-radius:3px;
  padding:7px 12px;font-family:var(--f-data);font-size:11px;letter-spacing:.09em;
  color:var(--faint);background:#fff;cursor:pointer}
.mast .search:hover{border-color:var(--ink);color:var(--ink)}
.brandmark{display:inline-flex;align-items:center;gap:12px}
.brandmark .bull{width:40px;height:34px;flex:none}
.wordmark{font-family:var(--f-head);font-weight:800;font-size:27px;letter-spacing:-.025em;
  color:var(--ink);line-height:1}
.tagline{font-family:var(--f-body);font-size:12.5px;color:var(--body);
  margin-top:7px;letter-spacing:.02em}
.navwrap{position:relative;border-bottom:2px solid var(--ink);background:#fff}
.nav{display:flex;gap:26px;padding:0 26px;font-family:var(--f-head);font-size:12.5px;
  font-weight:600;color:var(--ink-2);letter-spacing:.03em;text-transform:uppercase}
.nav .item{padding:11px 0;position:relative;display:flex;align-items:center;gap:5px}
.nav .item:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.nav .item.on{color:var(--red)}
.nav .item.on::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:3px;background:var(--red)}
.nav .item.open{color:var(--red)}
.nav .chev{width:0;height:0;border-left:3.5px solid transparent;border-right:3.5px solid transparent;
  border-top:4px solid currentColor;opacity:.7}
/* mega menu — 16 topic pages need grouping, not a 16-item list */
.mega{position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:3px solid var(--red);
  box-shadow:0 14px 30px rgba(0,0,0,.13);padding:20px 26px 22px;z-index:5;
  display:grid;grid-template-columns:1.15fr repeat(4,1fr);gap:20px 26px}
.mega .grp h6{font-family:var(--f-data);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);margin:0 0 9px;font-weight:500}
.mega .grp a{display:block;font-family:var(--f-head);font-size:13px;font-weight:600;
  color:var(--ink);text-decoration:none;text-transform:none;letter-spacing:0;padding:4px 0}
.mega .grp a:hover{color:var(--red)}
.mega .grp a.soon{color:var(--faint);font-weight:400}
.mega .grp a.soon::after{content:"planned";font-family:var(--f-data);font-size:11px;
  letter-spacing:.1em;margin-left:7px;color:#6f7078;text-transform:uppercase}
.mega.two{grid-template-columns:1.15fr 1fr 1fr}
.mega[hidden]{display:none}
.nav .item{font:inherit;background:none;border:0;cursor:pointer;color:inherit}
.mega .feat{border-right:1px solid var(--rule);padding-right:24px}
.mega .feat .go{display:inline-block;margin-top:11px;font-family:var(--f-head);font-size:12px;
  font-weight:700;color:var(--red);text-transform:none;letter-spacing:0}
.mega .feat .k{font-family:var(--f-data);font-size:11px;letter-spacing:.14em;color:var(--red);
  text-transform:uppercase}
.mega .feat h5{font-family:var(--f-head);font-size:15px;font-weight:700;margin:7px 0 0;line-height:1.28;
  text-transform:none;letter-spacing:-.01em}
.mega .feat p{font-family:var(--f-body);font-size:12.5px;color:var(--body);margin:6px 0 0;
  line-height:1.45;text-transform:none;letter-spacing:0;font-weight:400}
/* ---- tape ---- */
.tape{background:var(--ink);color:#fff;display:flex;border-bottom:2px solid var(--red)}
.tape .t{padding:9px 18px;border-right:1px solid #34383d;display:flex;flex-direction:column;gap:2px;min-width:118px}
.tape .n{font-family:var(--f-data);font-size:11px;letter-spacing:.12em;color:#b8bec7}
.tape .v{font-family:var(--f-head);font-size:16px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.tape .c{font-family:var(--f-data);font-size:11px}
.tape .up .c{color:#4ac07d}
.tape .dn .c{color:#ff7b7b}
.tape .stamp{min-width:150px;background:#101215}
.tape .stamp .v{font-size:12px;font-weight:700;letter-spacing:.08em;display:flex;align-items:center;gap:6px}
.tape .stamp .dot{width:6px;height:6px;border-radius:50%;background:#8f949c;flex:none}
.tape .stamp .c{color:#a7adb6;font-size:11px;letter-spacing:.04em}
.tape .t:not(.stamp):not(.flag){flex:1 1 0}
.tape .flag{background:var(--red);border-right:0;min-width:0;margin-left:auto}
.tape .flag .n{color:#ffe4e6}
.tape .flag .c{color:#ffd9dc;white-space:nowrap;font-size:10px;letter-spacing:.04em}
.inner{padding:26px 26px 34px}
.sechead{display:flex;align-items:center;gap:14px}
.sechead h1{font-family:var(--f-head);font-size:31px;font-weight:800;letter-spacing:-.022em;margin:0}
.sechead::after{content:"";flex:1;height:4px;background:var(--red);border-radius:2px}
.stand{font-size:15px;color:var(--body);margin:11px 0 0;max-width:74ch;line-height:1.55}
.grid{display:grid;gap:22px}
.g-lead{grid-template-columns:1.6fr 1fr;align-items:stretch}
/* The calendar can hold any number of rows, so it must never be what decides
   how tall this block is. The hero column does. The cell stretches to the
   row, the rail fills the cell absolutely, and rows share the space inside. */
.railcell{position:relative}
.railcell > .rail{position:absolute;inset:0}
.g-2{grid-template-columns:1fr 1fr}
.g-3{grid-template-columns:repeat(3,1fr)}
.bh{font-family:var(--f-head);font-size:15px;font-weight:800;letter-spacing:.01em;
  display:flex;align-items:center;gap:10px;margin:30px 0 13px;color:var(--ink)}
.bh i{width:8px;height:8px;background:var(--red);border-radius:50%;flex:none}
.bh .all{margin-left:auto;font-family:var(--f-data);font-size:11px;
  color:var(--faint);letter-spacing:.11em;font-weight:400}
/* cards */
.card{border:1px solid var(--rule);border-radius:5px;overflow:hidden;background:#fff}
.ph{height:190px;background:linear-gradient(135deg,#2a2f36,#191b1d);position:relative}
.ph.red{background:linear-gradient(135deg,#7d1016,var(--red))}
.ph.slate{background:linear-gradient(135deg,#3a424c,#5a636e)}
.ph.sm{height:120px}
.ph span{position:absolute;left:13px;bottom:12px;background:var(--red);color:#fff;
  font-family:var(--f-data);font-size:11px;padding:3px 8px;letter-spacing:.1em}
.cb{padding:15px 16px}
.cb h3{font-family:var(--f-head);font-size:21px;font-weight:700;line-height:1.24;margin:0;letter-spacing:-.012em}
.cb h4{font-family:var(--f-head);font-size:14.5px;font-weight:600;line-height:1.3;margin:0}
.cb p{margin:9px 0 0;font-size:13.5px;color:var(--body);line-height:1.5}
.by{font-family:var(--f-data);font-size:11px;color:var(--faint);margin-top:11px;letter-spacing:.06em}
.row{display:flex;gap:13px;padding:12px 0;border-bottom:1px solid var(--hair)}
.row:last-child{border-bottom:0}
.row .th{width:66px;height:50px;border-radius:3px;flex:none;overflow:hidden;background:var(--wash)}
.row .th img{width:100%;height:100%;object-fit:cover;display:block}
.rank{display:flex;gap:13px;align-items:baseline;padding:10px 0;
  border-bottom:1px solid var(--hair);text-decoration:none;color:inherit;cursor:pointer}
.rank:last-child{border-bottom:0}
.rank:hover h5{color:var(--red)}
.rank .num{font-family:var(--f-head);font-size:20px;font-weight:800;color:var(--red);
  min-width:24px;line-height:1;font-variant-numeric:tabular-nums}
.rank h5{font-family:var(--f-head);font-size:13.5px;font-weight:600;line-height:1.32;margin:0}
.rank .m{font-family:var(--f-data);font-size:11px;color:var(--faint);
  margin-top:5px;letter-spacing:.06em}
.row{text-decoration:none;color:inherit;cursor:pointer}
.row:hover h5{color:var(--red)}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.card{text-decoration:none;color:inherit;cursor:pointer;display:block}
.card:hover h3,.card:hover h4{color:var(--red)}
.row .th.r{background:linear-gradient(135deg,#a00d16,var(--red))}
.row h5{font-family:var(--f-head);font-size:13.5px;font-weight:600;line-height:1.32;margin:0}
.row .m{font-family:var(--f-data);font-size:11px;color:var(--faint);margin-top:5px;letter-spacing:.06em}
/* calendar rail */
.rail{border:1px solid var(--ink);border-radius:5px;overflow:hidden;
  height:100%;display:flex;flex-direction:column}
.rail-list{flex:1;min-height:0;display:flex;flex-direction:column}
/* rows share any leftover column height, so the box is always exactly full
   however tall the hero column runs — no dead space at the bottom. */
.rail-list .rr{flex:1 1 auto;min-height:0;align-items:center}
.rail-h{background:var(--ink);color:#fff;font-family:var(--f-head);font-weight:700;
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;padding:10px 14px}
.rr{display:flex;align-items:flex-start;gap:10px;padding:6px 14px;border-bottom:1px solid var(--hair);font-size:13px}
.rr:last-child{border-bottom:0}
.rr.hi{background:var(--red-wash)}
.rr .w{font-family:var(--f-data);font-size:11px;color:var(--red);font-weight:600;
  min-width:50px;flex:none}
.rr .tm{font-family:var(--f-data);font-size:11px;color:var(--faint);
  min-width:54px;flex:none;font-variant-numeric:tabular-nums}
.rr .est{flex:none;font-family:var(--f-data);font-size:11px;letter-spacing:.08em;color:#6f7078;
  margin-left:7px;text-transform:uppercase}
.rr .x{color:var(--ink-2);line-height:1.32;flex:1;min-width:0}
.rr .tk{margin-left:auto;font-family:var(--f-data);font-size:11px;color:var(--faint)}
/* opinion zone */
.zone{background:var(--wash);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  margin:32px -26px 0;padding:20px 26px 26px}
.zone .bh{margin-top:0}
/* Our View is two published positions, not a decorative panel. Each card is a
   whole link, names its company, states the stance, and cites the filing. */
.viewcard{display:flex;flex-direction:column;gap:9px;background:#fff;
  border:1px solid var(--rule);border-top:3px solid var(--rule);border-radius:5px;
  padding:15px 17px;cursor:pointer;text-decoration:none;color:inherit}
.viewcard.bull{border-top-color:var(--up)}
.viewcard.bear{border-top-color:var(--red)}
.viewcard:hover{border-color:var(--ink)}
.viewcard .vh{display:flex;align-items:center;gap:9px}
.vtk{font-family:var(--f-data);font-size:11px;font-weight:600;color:#fff;background:var(--ink);
  padding:2px 7px;border-radius:2px;letter-spacing:.06em}
.vstance{font-family:var(--f-data);font-size:11px;letter-spacing:.14em;padding:2px 7px;border-radius:2px}
.vstance.bull{background:#d8ebe0;color:#0f5732}
.vstance.bear{background:var(--red-wash);color:var(--red)}
.viewcard h4{font-family:var(--f-head);font-size:17px;font-weight:700;margin:0;
  line-height:1.28;letter-spacing:-.012em}
.viewcard p{margin:0;font-size:13.5px;line-height:1.52;color:var(--body)}
/* The call is the point of this section, so it is built like a conclusion:
   a filled band, a rating you can read across the room, and the outlook set
   in the heading face at body size. Nothing here is 9px grey. */
.verdict{display:flex;align-items:center;gap:14px;margin-top:auto;
  padding:12px 14px;border-radius:4px}
.verdict.buy{background:#eaf4ee;border:1px solid #cfe4d8}
.verdict.hold{background:var(--wash);border:1px solid var(--rule)}
.verdict .rating{font-family:var(--f-head);font-size:15px;font-weight:800;
  letter-spacing:.06em;color:#fff;padding:7px 14px;border-radius:3px;flex:none}
.verdict.buy .rating{background:var(--up)}
.verdict.hold .rating{background:var(--ink-2)}
.vtext{display:flex;flex-direction:column;gap:2px;line-height:1.2;
  margin-left:auto;text-align:right}
.vhead{font-family:var(--f-body);font-size:12.5px;color:var(--body)}
.vdir{font-family:var(--f-head);font-size:16px;font-weight:800;letter-spacing:-.01em;
  color:var(--ink)}
.verdict.buy .vdir{color:#146b3f}
.cases{border:1px solid var(--ink);border-radius:5px;overflow:hidden;background:#fff}
.cases-h{background:var(--ink);color:#fff;padding:10px 14px;display:flex;align-items:baseline;gap:11px}
.cases-h .tk{font-family:var(--f-data);font-size:11px;color:#f2a8ac;letter-spacing:.09em}
.cases-h .ti{font-family:var(--f-head);font-weight:600;font-size:14px}
.cbody{display:grid;grid-template-columns:1fr 1fr}
.case{padding:14px 16px}
.case+.case{border-left:1px solid var(--rule)}
.case .lab{font-family:var(--f-data);font-size:11px;letter-spacing:.15em;
  text-transform:uppercase;margin-bottom:8px}
.case.bull .lab{color:var(--up)}
.case.bear .lab{color:var(--red)}
.case p{margin:0;font-size:13px;line-height:1.5;color:var(--ink-2)}
.case .vd{margin-top:11px;font-family:var(--f-head);font-size:12.5px;font-weight:700}
.explain{background:#fff;border:1px solid var(--rule);border-left:3px solid var(--red);
  border-radius:4px;padding:14px 16px}
.explain .lab{font-family:var(--f-data);font-size:11px;letter-spacing:.13em;
  color:var(--red);text-transform:uppercase}
.explain h4{font-family:var(--f-head);font-size:16px;font-weight:700;margin:7px 0 0;line-height:1.28}
.explain p{margin:9px 0 0;font-size:13px;color:var(--body);line-height:1.5}
/* deep dives */
/* Deep dives: the chart carries the story and the link carries the reader.
   Four visible at a time; the arrows in the section header page through them. */
.divewrap{overflow:hidden}
.divetrack{display:flex;gap:14px;scroll-behavior:smooth;overflow-x:auto;
  scrollbar-width:none;padding-bottom:2px}
.divetrack::-webkit-scrollbar{display:none}
.dive{border:1px solid var(--rule);border-radius:5px;padding:14px 15px;background:#fff;
  display:flex;flex-direction:column;gap:11px;flex:0 0 calc(25% - 10.5px)}
.nav-b{font:inherit;font-size:15px;line-height:1;background:#fff;color:var(--ink);
  border:1px solid var(--rule);border-radius:3px;width:26px;height:24px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding:0}
.nav-b:hover{border-color:var(--ink);background:var(--ink);color:#fff}
.bh .all + .nav-b{margin-left:10px}
.dive h4{font-family:var(--f-head);font-size:15px;font-weight:700;margin:0;line-height:1.24;letter-spacing:-.012em}
.spark{display:flex;align-items:flex-end;gap:4px;height:46px}
.spark i{flex:1;background:#e8dadb;border-radius:1px}
.spark i.on{background:var(--red)}
.src{font-family:var(--f-data);font-size:11px;letter-spacing:.07em;
  color:var(--faint);text-transform:uppercase}
.src b{color:var(--ink);font-weight:600}
/* sectors */
.sectors{display:flex;flex-wrap:wrap;gap:8px}
.sec{border:1px solid var(--rule);border-radius:3px;padding:7px 12px;display:flex;gap:9px;align-items:baseline}
.sec .s{font-family:var(--f-head);font-size:12px;font-weight:600}
.sec .p{font-family:var(--f-data);font-size:11.5px;font-variant-numeric:tabular-nums}
.sec.up .p{color:var(--up-txt)}
.sec.dn .p{color:var(--down-txt)}
/* most read + guides */
.mr{display:flex;gap:13px;padding:11px 0;border-bottom:1px solid var(--hair);align-items:baseline}
.mr:last-child{border-bottom:0}
.mr .r{font-family:var(--f-head);font-size:21px;font-weight:800;color:#e2d6d7;min-width:26px;line-height:1}
.mr h5{font-family:var(--f-head);font-size:13.5px;font-weight:600;margin:0;line-height:1.32}
.guides{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.guide{border:1px solid var(--rule);border-left:3px solid var(--ink);border-radius:3px;
  padding:9px 13px;background:#fff;font-family:var(--f-head);font-size:12.5px;font-weight:700}
.faq{display:flex;gap:11px;padding:10px 0;border-bottom:1px solid var(--hair);font-size:13.5px}
.faq .q{font-family:var(--f-data);color:var(--red);font-size:12px}
.faq b{font-family:var(--f-head);font-weight:600}
/* movers strip under the tape */
.movers{display:flex;align-items:center;gap:0;background:#f2f0f1;
  border-bottom:1px solid var(--rule);overflow:hidden}
.mvwrap{flex:1;overflow:hidden}
/* The strip is duplicated end to end, so translating exactly -50% loops with no
   seam. Slow by design: ambient, not something anyone should have to chase. */
.mvtrack{display:flex;width:max-content;animation:mvscroll 95s linear infinite}
.movers:hover .mvtrack{animation-play-state:paused}
@keyframes mvscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .mvtrack{animation:none}
  .mvwrap{overflow-x:auto}
}
.movers .lab{font-family:var(--f-data);font-size:11px;letter-spacing:.13em;
  color:#4a4a52;padding:7px 14px;border-right:1px solid var(--rule);white-space:nowrap}
.mv{display:flex;gap:7px;align-items:baseline;padding:7px 14px;border-right:1px solid var(--rule);flex:none;white-space:nowrap}
.mv .t{font-family:var(--f-head);font-size:11.5px;font-weight:700}
.mv .p{font-family:var(--f-data);font-size:11px;font-variant-numeric:tabular-nums}
.mv.up .p{color:var(--up-txt)}
.mv.dn .p{color:var(--down-txt)}
.rail-foot{margin-top:auto;padding:9px 14px;border-top:1px solid var(--rule);background:var(--wash);
  font-family:var(--f-data);font-size:11px;letter-spacing:.08em;color:var(--faint)}
/* why the market moved — the daily briefing */
.brief{border:1px solid var(--rule);border-top:4px solid var(--red);border-radius:0 0 5px 5px;
  margin-top:30px;background:#fff}
.brief-h{display:flex;align-items:baseline;gap:12px;padding:13px 18px 0;flex-wrap:wrap}
.brief-h .k{font-family:var(--f-head);font-size:15px;font-weight:800}
.brief-h .stamp{font-family:var(--f-data);font-size:11px;color:var(--faint);letter-spacing:.09em}
.brief-h .next{margin-left:auto;font-family:var(--f-data);font-size:11px;
  color:var(--red);letter-spacing:.08em}
.brief-h .series{font-family:var(--f-data);font-size:11px;letter-spacing:.13em;
  background:var(--red);color:#fff;padding:2px 7px;border-radius:2px}
/* The briefing is a published article, not just a panel: it needs a way in. */
.briefread{display:inline-block;margin-top:12px;font-family:var(--f-head);font-size:13px;
  font-weight:700;color:var(--red);cursor:pointer;text-decoration:none}
.briefread:hover{text-decoration:underline}
.brief-body{display:grid;grid-template-columns:1.45fr 1fr;gap:24px;padding:12px 18px 18px}
.brief-body h3{font-family:var(--f-head);font-size:22px;font-weight:700;line-height:1.26;
  margin:0;letter-spacing:-.014em}
.brief-body p{margin:10px 0 0;font-size:14px;color:var(--body);line-height:1.58}
.drivers{border-left:1px solid var(--rule);padding-left:20px}
.drivers .dh{font-family:var(--f-data);font-size:11px;letter-spacing:.13em;
  color:var(--faint);text-transform:uppercase;margin-bottom:10px}
.dv{display:flex;gap:10px;padding:9px 0;border-bottom:1px solid var(--hair)}
.dv:last-child{border-bottom:0}
.dv .tag{font-family:var(--f-data);font-size:11px;letter-spacing:.09em;padding:2px 6px;
  border-radius:2px;height:fit-content;white-space:nowrap}
.dv .tag.rates{background:var(--red);color:#fff}
.dv .tag.earn{background:#e6e1dc;color:#5b4b3a}
.dv .tag.cmdty{background:#dde7de;color:#2c4a33}
.dv .tag.macro{background:#dde3ea;color:#33414f}
.dv p{margin:0;font-size:12.5px;line-height:1.45;color:var(--ink-2)}
/* our view — verdict bar + thesis links */
.callbar{display:flex;align-items:center;gap:12px;background:var(--ink);color:#fff;
  padding:11px 16px;border-radius:5px;margin-top:14px;flex-wrap:wrap}
.callbar .k{font-family:var(--f-data);font-size:11px;letter-spacing:.14em;color:#f2a8ac}
.callbar .v{font-family:var(--f-head);font-size:14px;font-weight:700}
.callbar .dir{background:var(--up);color:#fff;font-family:var(--f-data);font-size:11px;
  padding:4px 9px;border-radius:2px;letter-spacing:.08em}
.callbar .lnk{margin-left:auto;font-family:var(--f-head);font-size:12px;font-weight:600;color:#fff}
.readlink{font-family:var(--f-head);font-size:12px;font-weight:600;color:var(--red);
  margin-top:10px;display:block}
.dive .readlink{margin-top:0}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* The nav mixes plain links with menu buttons. Chrome's UA sheet gives form
   controls their own text-transform, which the existing `font:inherit` does
   not override, so without this the links render UPPERCASE beside title-case
   menu openers. Anchors also need their underline taken off. */
.nav .item{text-transform:none;text-decoration:none}
.nav a.item:hover{color:var(--red)}
/* the feature panel is a link now, not a div wrapping one */
.mega a.feat{display:block;text-decoration:none;color:inherit}
.mega a.feat:hover h5{color:var(--red)}


/* ==================== SHELL ==================== */
.scroller{padding:0 16px}
.page{
  width:100%;max-width:1180px;margin:0 auto;background:var(--paper);color:var(--ink);
  box-shadow:0 2px 4px rgba(0,0,0,.08),0 18px 50px rgba(0,0,0,.14);
}
.nav::-webkit-scrollbar{display:none}
.nav .item{flex:none}
.nav{display:flex;gap:26px;padding:0 26px;overflow-x:auto;scrollbar-width:none;
  font-family:var(--f-head);font-size:12.5px;
  font-weight:600;color:var(--ink-2);letter-spacing:.03em;text-transform:uppercase}
/* ---- tape ---- */
.tape{background:var(--ink);color:#fff;display:flex;border-bottom:2px solid var(--red);
  overflow-x:auto;scrollbar-width:none}
.tape::-webkit-scrollbar{display:none}
/* The calendar can hold any number of rows, so it must never be what decides
   how tall this block is — the hero column does. The cell stretches to the
   row, the rail fills the cell absolutely, and rows share the space inside. */
.railcell{position:relative}
/* ============ HOMEPAGE ============
   The page leads with the thing people arrive for — the flagship list, with the
   returns that make the case — then earns the commercial ask further down. */

/* --- HERO --- */
.hero{background:var(--ink);color:#fff;padding:34px 34px 30px;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;right:-70px;top:-70px;width:300px;height:300px;
  border-radius:50%;background:radial-gradient(circle,rgba(200,8,21,.30),transparent 68%)}
.hero-in{position:relative;display:grid;grid-template-columns:1.08fr 1fr;gap:38px;align-items:center}
.hero-in.solo{display:block;max-width:62ch}
.hero-in.solo h1{font-size:52px}
.hk{font-family:var(--f-data);font-size:11px;letter-spacing:.16em;color:#ff9ba2}
.hero h1{font-family:var(--f-head);font-size:44px;line-height:1.06;font-weight:900;
  letter-spacing:-.032em;margin:13px 0 0}
.hero h1 em{font-style:normal;color:#ff5b66}
.hero .sub{font-family:var(--f-body);font-size:16px;line-height:1.55;color:#c9ccd2;
  margin:15px 0 0;max-width:52ch}
.hero .acts{display:flex;gap:12px;margin-top:22px;flex-wrap:wrap;align-items:center}
.hbtn{background:var(--red);color:#fff;font-family:var(--f-head);font-weight:700;font-size:15px;
  padding:13px 22px;border-radius:4px;text-decoration:none}
.hbtn.ghost{background:transparent;border:1px solid #4a4f57;color:#fff}
.hmeth{font-family:var(--f-head);font-size:13.5px;font-weight:600;color:#c9ccd2;
  text-decoration:none;border-bottom:1px solid #4a4f57;padding-bottom:2px}
.hmeth:hover{color:#fff;border-color:#fff}
.holds{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border:1px solid #33383f;
  border-radius:6px;overflow:hidden;background:#101215}
.hold{display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;gap:9px;
  padding:10px 13px;border-bottom:1px solid #24272c}
.hold:nth-child(odd){border-right:1px solid #24272c}
.hold:nth-last-child(-n+2){border-bottom:0}
.hs{font-family:var(--f-data);font-size:12px;font-weight:600;color:#fff}
.hn{font-family:var(--f-body);font-size:12px;color:#9096a0;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.hy{font-family:var(--f-head);font-size:13px;font-weight:800;font-variant-numeric:tabular-nums}
.hold.up .hy{color:#4ac07d}
.hold.dn .hy{color:#ff7b7b}
.holds-cap{font-family:var(--f-data);font-size:11px;color:#8f949c;margin-top:9px;text-align:right}
/* --- TRUST BAR: EEAT is a ranking input and a reader question --- */
.trust{display:flex;align-items:center;gap:26px;flex-wrap:wrap;background:var(--wash);
  border-bottom:1px solid var(--rule);padding:12px 26px;font-size:13px;color:var(--ink-2)}
.trust b{font-family:var(--f-head);font-weight:700}
.trust .dot{width:5px;height:5px;border-radius:50%;background:var(--red);flex:none}
.trust span{display:flex;align-items:center;gap:9px}
.trust a{color:var(--red);text-decoration:none;font-weight:600}
/* --- READING NOW: the page reflects the audience we actually have --- */
.readnow{display:grid;grid-template-columns:1.35fr 1fr;gap:30px;align-items:start}
.rnhead{font-family:var(--f-head);font-size:15px;font-weight:800;border-bottom:2px solid var(--ink);
  padding-bottom:8px;margin-bottom:2px}
.mrow{display:flex;gap:13px;align-items:baseline;padding:11px 0;
  border-bottom:1px solid var(--hair);text-decoration:none;color:inherit}
.mrow:last-child{border-bottom:0}
.mn{font-family:var(--f-head);font-size:19px;font-weight:900;color:var(--red);min-width:22px;
  font-variant-numeric:tabular-nums}
.mt{font-family:var(--f-head);font-size:14px;font-weight:600;line-height:1.34}
.mrow:hover .mt{color:var(--red)}
/* --- FEATURED RESEARCH: weighted by what gets read, not alphabetically --- */
.feats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.fcard{border:1px solid var(--rule);border-top:3px solid var(--red);border-radius:5px;
  padding:17px 18px;background:#fff;display:flex;flex-direction:column;gap:9px;
  text-decoration:none;color:inherit}
.fcard:hover{border-color:var(--ink)}
.fk{font-family:var(--f-data);font-size:11px;letter-spacing:.11em;color:var(--red)}
.fcard h4{font-family:var(--f-head);font-size:20px;font-weight:800;margin:0;letter-spacing:-.016em}
.fcard p{margin:0;font-size:13.5px;line-height:1.5;color:var(--body)}
.fgo{margin-top:auto;font-family:var(--f-head);font-size:13px;font-weight:700;color:var(--red)}
.pages{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-top:14px}
.pg{border:1px solid var(--rule);border-radius:4px;padding:10px 11px;background:#fff;
  font-family:var(--f-head);font-size:12.5px;font-weight:600;color:var(--ink);
  text-decoration:none;text-align:center}
.pg:hover{border-color:var(--ink);background:var(--wash)}
/* --- THE TOOL, given the weight a differentiated asset earns --- */


/* --- DEEP DIVES: lead with the chart, because the chart is the evidence --- */
.dds{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.dd{border:1px solid var(--rule);border-radius:5px;overflow:hidden;background:#fff;
  display:flex;flex-direction:column;text-decoration:none;color:inherit}
.dd:hover{border-color:var(--ink)}
.dd img{width:100%;height:118px;object-fit:cover;object-position:top left;display:block;
  border-bottom:1px solid var(--rule)}
.ddb{padding:13px 14px;display:flex;flex-direction:column;gap:7px;flex:1}
.ddk{font-family:var(--f-data);font-size:11px;letter-spacing:.09em;color:var(--red)}
.dd h4{font-family:var(--f-head);font-size:14.5px;font-weight:700;margin:0;line-height:1.3}
.ddgo{margin-top:auto;font-family:var(--f-head);font-size:12.5px;font-weight:700;color:var(--red)}
/* --- SECTIONS --- */
.tri{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.sec-h{display:flex;align-items:baseline;gap:9px;border-bottom:2px solid var(--ink);
  padding-bottom:8px;margin-bottom:2px}
.sec-h b{font-family:var(--f-head);font-size:15px;font-weight:800}
.sec-h a{margin-left:auto;font-family:var(--f-data);font-size:11px;color:var(--red);
  letter-spacing:.08em;text-decoration:none}
/* --- BROKERS: the ask, after the value --- */
.brokers{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.broker{border:1px solid var(--rule);border-radius:5px;padding:17px 18px;background:#fff;
  display:flex;flex-direction:column;gap:10px;border-top:3px solid var(--ink)}
.broker h4{font-family:var(--f-head);font-size:19px;font-weight:800;margin:0}
.broker .who{font-family:var(--f-data);font-size:11px;letter-spacing:.1em;color:var(--red)}
.broker p{margin:0;font-size:13.5px;line-height:1.5;color:var(--body)}
.broker ul{margin:0;padding-left:18px;font-size:13px;line-height:1.7;color:var(--ink-2)}
.bcta{margin-top:auto;text-align:center;padding:11px 14px;border-radius:4px;
  font-family:var(--f-head);font-weight:700;font-size:14px;text-decoration:none;
  background:var(--red);color:#fff}
.bcta.alt{background:var(--ink)}
.refnote{font-size:12px;color:var(--body);text-align:center}
/* --- METHOD --- */
.method{background:var(--wash);border:1px solid var(--rule);border-radius:5px;padding:20px 22px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:34px}
.method h4{font-family:var(--f-head);font-size:14px;font-weight:800;margin:0 0 6px}
.method p{margin:0;font-size:13px;line-height:1.55;color:var(--body)}
/* The calculator gets its own dark band: a colour change is how this page
   breaks between sections, and it gives the tool a heading of its own so the
   embedded component runs headless. */
.toolwrap{background:var(--ink);margin:34px -26px 0;padding:26px}
.toolhead{font-family:var(--f-head);font-size:24px;font-weight:800;color:#fff;
  margin:0 0 18px;letter-spacing:-.02em;line-height:1.25}
/* ---- shared calculator component ---- */
/*! bcs-tools.css: calculators for bestcanadianstocks.ca
 *
 * Scoped entirely under .bcs-tool so it cannot touch the rest of the site, and
 * so the theme cannot restyle a calculator embedded in an article. Uses the
 * site's own type and palette: Roboto headings, Source Serif body, Roboto Mono
 * for figures, red #c80815 on near-black #191b1d.
 *
 * Nothing here is set below 11px and every colour clears 4.5:1 on its ground.
 */

.bcs-tool{
  --bcs-ink:#191b1d; --bcs-body:#4a4a52; --bcs-faint:#5f6067;
  --bcs-rule:#e5e5e8; --bcs-wash:#f7f6f7; --bcs-red:#c80815; --bcs-up:#12683b;
  --bcs-head:Roboto,"Helvetica Neue",Arial,sans-serif;
  --bcs-serif:"Source Serif 4",Georgia,serif;
  --bcs-mono:"Roboto Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-family:var(--bcs-serif);
  color:var(--bcs-ink);
  border:1px solid var(--bcs-ink);
  border-radius:6px;
  overflow:hidden;
  background:#fff;
  margin:28px 0;
  max-width:100%;
}
.bcs-tool *{box-sizing:border-box}
.bcs-head{background:var(--bcs-ink);color:#fff;padding:18px 20px}
.bcs-kicker{font-family:var(--bcs-mono);font-size:11px;letter-spacing:.14em;color:#ff9ba2}
.bcs-head h3{font-family:var(--bcs-head);font-size:22px;font-weight:800;letter-spacing:-.02em;
  margin:7px 0 0;line-height:1.2;color:#fff}
.bcs-head p{margin:7px 0 0;font-size:14px;line-height:1.5;color:#c9ccd2;max-width:70ch}
/* Headless: the host page supplies the heading, so the card is just the tool.
   No top border either, since it usually sits inside a band of its own. */
.bcs-tool.bcs-bare{border:0;border-radius:5px;margin:0}
.bcs-body{display:grid;grid-template-columns:1fr 1fr}
.bcs-in{padding:20px;border-right:1px solid var(--bcs-rule)}
.bcs-out{padding:20px;background:var(--bcs-wash);display:flex;flex-direction:column}
.bcs-f{display:flex;flex-direction:column;gap:5px;margin-bottom:15px}
.bcs-f label{font-family:var(--bcs-head);font-size:13px;font-weight:700}
.bcs-hint{font-family:var(--bcs-serif);font-size:12.5px;color:var(--bcs-body);line-height:1.45}
.bcs-f input,.bcs-f select{
  font-family:var(--bcs-head);font-size:15px;font-weight:600;padding:10px 11px;
  font-variant-numeric:tabular-nums;
  border:1px solid var(--bcs-rule);border-radius:4px;background:#fff;color:var(--bcs-ink);
  width:100%;
}
.bcs-f input:focus,.bcs-f select:focus{outline:2px solid var(--bcs-red);outline-offset:1px}
.bcs-lab{font-family:var(--bcs-mono);font-size:11px;letter-spacing:.12em;color:var(--bcs-body)}
.bcs-big{font-family:var(--bcs-head);font-size:40px;font-weight:900;letter-spacing:-.03em;
  line-height:1.05;margin:7px 0 9px;font-variant-numeric:tabular-nums}
.bcs-big.bcs-neg{color:var(--bcs-red)}
.bcs-note{margin:0;font-size:13.5px;line-height:1.55;color:var(--bcs-body)}
.bcs-rows{margin-top:14px;border-top:1px solid var(--bcs-rule);padding-top:11px}
.bcs-row{display:flex;justify-content:space-between;gap:14px;font-size:13px;padding:4px 0;
  color:var(--bcs-body)}
.bcs-row b{font-family:var(--bcs-head);font-size:13.5px;font-weight:700;color:var(--bcs-ink);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.bcs-srcwrap{margin-top:auto;padding-top:14px}
.bcs-src{font-size:12px;color:var(--bcs-faint);line-height:1.45;
  border-top:1px solid var(--bcs-rule);padding-top:10px}
/* the ACB tracker's repeating transaction rows */
.bcs-acb-list{display:flex;flex-direction:column;gap:7px;margin:10px 0}
.bcs-acb-row{display:grid;grid-template-columns:78px 1fr 1fr 1fr 30px;gap:6px}
.bcs-acb-row select,.bcs-acb-row input{
  font-family:var(--bcs-head);font-size:13px;font-weight:600;padding:8px;
  font-variant-numeric:tabular-nums;border:1px solid var(--bcs-rule);
  border-radius:4px;background:#fff;color:var(--bcs-ink);width:100%;min-width:0}
.bcs-acb-row .a-del{border:1px solid var(--bcs-rule);background:#fff;border-radius:4px;
  color:var(--bcs-body);cursor:pointer;font-size:16px;line-height:1;padding:0}
.bcs-acb-row .a-del:hover{border-color:var(--bcs-red);color:var(--bcs-red)}
.bcs-add{font-family:var(--bcs-head);font-size:13px;font-weight:700;color:var(--bcs-red);
  background:none;border:0;padding:4px 0;cursor:pointer}
.bcs-add:hover{text-decoration:underline}
.bcs-err{padding:18px;font-size:14px;color:var(--bcs-red)}
@media (max-width:700px){
  .bcs-body{grid-template-columns:1fr}
  .bcs-in{border-right:0;border-bottom:1px solid var(--bcs-rule)}
  .bcs-big{font-size:32px}
  .bcs-acb-row{grid-template-columns:70px 1fr 1fr 1fr 28px;gap:5px}
}
/* --- responsive: the page shrinks, the grids collapse, nothing is ever cut off --- */
@media (max-width:1080px){
  .pages{grid-template-columns:repeat(4,1fr)}
  .dds{grid-template-columns:repeat(2,1fr)}
  .tri{grid-template-columns:repeat(3,1fr);gap:20px}
}
@media (max-width:900px){
  .inner{padding:20px 18px 28px}
  .hero{padding:26px 18px 24px}
  .hero-in.solo h1{font-size:36px}
  .readnow{grid-template-columns:1fr;gap:26px}
  .feats{grid-template-columns:1fr;gap:12px}
  .pages{grid-template-columns:repeat(3,1fr)}
  .tri{grid-template-columns:1fr;gap:24px}
  .brokers{grid-template-columns:1fr}
  .method{grid-template-columns:1fr;gap:16px}
  .toolwrap{margin:28px -18px 0;padding:22px 18px}
  .tri{margin:0 -18px;padding:22px 18px 24px}
  .tape{overflow-x:auto}
  .tape .flag{margin-left:0}
}
@media (max-width:900px){
  /* The search is absolutely positioned against a centred masthead, so on a
     narrow screen it lands on the wordmark. Put it back in the flow. */
  .mast{padding:18px 18px 14px}
  .mast .search{position:static;transform:none;margin:12px auto 0;
    justify-content:center;width:auto;min-width:132px}
  .wordmark{font-size:22px}
  .bull{width:32px;height:28px}
  .tagline{font-size:12px}
}
@media (max-width:620px){
  .hero-in.solo h1{font-size:28px}
  .dds{grid-template-columns:1fr}
  .pages{grid-template-columns:repeat(2,1fr)}
  .hbtn{width:100%;text-align:center}
  .toolhead{font-size:21px}
}
/* the fee chart, sitting immediately above the broker cards: the cost of
   getting this wrong, and then where to go and get it right */
.chartwrap{border:1px solid var(--rule);border-radius:4px;overflow-x:auto;background:#fff;
  margin-bottom:26px}
.chartwrap svg{display:block;width:100%;height:auto}
@media (max-width:760px){ .chartwrap svg{width:700px;max-width:none} }
/* one disclosure for the pair of broker cards, not a note on whichever card
   happened to have one. Both links pay us. */
.afdisc b{color:var(--ink);font-weight:700}
.afdisc{font-size:13px;line-height:1.55;color:var(--faint);margin:12px 0 0;
  padding-top:11px;border-top:1px solid var(--hair)}


/* ==================== PERSONAL FINANCE ==================== */
/* ============================================================ PERSONAL FINANCE
   The section is about decisions and deadlines rather than the tape, so the
   instrument panel under the nav carries CRA constants and countdowns instead
   of prices. Same position, same weight, different instrument. */
.pfband{background:var(--ink);color:#fff;display:grid;
  grid-template-columns:repeat(5,1fr);border-bottom:3px solid var(--red)}
.pfc{padding:13px 16px 12px;border-right:1px solid #2f3136;display:flex;
  flex-direction:column;gap:2px;min-width:0}
.pfc:nth-child(5){border-right:0}
.pfl{font-family:var(--f-data);font-size:10.5px;letter-spacing:.11em;color:#9ea3ad;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pfv{font-family:var(--f-head);font-size:25px;font-weight:900;letter-spacing:-.03em;
  line-height:1.1;font-variant-numeric:tabular-nums}
.pfn{font-family:var(--f-body);font-size:12px;color:#c4c8d0;line-height:1.3}
.pfc.due .pfv{color:#ff8f97}
/* HERO: the one question a reader arrives with, and the picture that carries it */
.pfhero{display:grid;grid-template-columns:1.15fr .85fr;background:var(--ink);color:#fff}
.pfh-t{padding:40px 44px 42px;display:flex;flex-direction:column;justify-content:center}
.pfh-t .hk{font-family:var(--f-data);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:#ff9ba2}
.pfh-t h1{font-family:var(--f-head);font-size:44px;font-weight:900;letter-spacing:-.033em;
  line-height:1.08;margin:13px 0 0;color:#fff}
.pfh-t h1 em{font-style:normal;color:#ff8f97}
.pfh-t .sub{font-size:16.5px;line-height:1.6;color:#d3d6dc;margin:15px 0 0;max-width:52ch}
.pfh-t .acts{display:flex;align-items:center;gap:14px;margin-top:24px;flex-wrap:wrap}
.pfh-t .hbtn{display:inline-block;background:var(--red);color:#fff;text-decoration:none;
  font-family:var(--f-head);font-size:14px;font-weight:700;padding:12px 20px;border-radius:3px}
.pfh-t .hbtn:hover{background:var(--red-deep)}
.pfh-t .hbtn.ghost{background:transparent;border:1px solid #55575e;color:#fff}
.pfh-t .hbtn.ghost:hover{border-color:#fff;background:rgba(255,255,255,.06)}
.pfh-i{position:relative;overflow:hidden;min-height:300px}
.pfh-i img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* THE THREE ACCOUNTS: the spine of the section. Every reader belongs to one of
   these columns, so they get equal width and the limit is the loudest thing. */
.accts{display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border:1px solid var(--rule);border-radius:4px;overflow:hidden}
.acct{padding:20px 20px 18px;border-right:1px solid var(--rule);display:flex;
  flex-direction:column;min-width:0}
.acct:last-child{border-right:0}
.ahead{display:flex;flex-direction:column;gap:3px;padding-bottom:13px;
  border-bottom:2px solid var(--ink)}
.atag{font-family:var(--f-head);font-size:19px;font-weight:900;letter-spacing:.01em;
  color:var(--red)}
.aname{font-family:var(--f-body);font-size:12.5px;color:var(--faint)}
.afig{font-family:var(--f-head);font-size:32px;font-weight:900;letter-spacing:-.03em;
  line-height:1.05;margin-top:8px;font-variant-numeric:tabular-nums}
.aflab{font-family:var(--f-data);font-size:10.5px;letter-spacing:.1em;color:var(--body)}
.aunit{font-family:var(--f-body);font-size:14px;font-weight:400;letter-spacing:0;
  color:var(--body);margin-left:7px;white-space:nowrap}
.aline{font-size:14px;line-height:1.58;color:var(--body);margin:13px 0 0}
.acalc{display:inline-block;align-self:flex-start;
  font-family:var(--f-head);font-size:13px;font-weight:700;color:var(--red);
  text-decoration:none;border-bottom:1px solid rgba(200,8,21,.35);padding-bottom:1px}
.acalc:hover{border-bottom-color:var(--red)}
.acct .acalc{margin-top:auto;padding-top:14px;border-top:1px solid var(--hair);
  border-bottom:0;align-self:stretch}
.chartlead{border:1px solid var(--rule);border-radius:4px;overflow:hidden;background:#fff}
.chartlead .chartwrap{border:0;border-radius:0}
.chartgo{display:block;text-decoration:none;color:inherit;padding:16px 20px 18px;
  border-top:1px solid var(--rule);background:var(--wash)}
.chartgo b{display:block;font-family:var(--f-head);font-size:17px;font-weight:800;
  letter-spacing:-.015em;line-height:1.3}
.chartgo span{display:block;font-size:14px;line-height:1.55;color:var(--body);margin-top:6px;
  max-width:74ch}
.chartgo em{display:inline-block;font-style:normal;margin-top:11px;font-family:var(--f-head);
  font-size:13px;font-weight:700;color:var(--red)}
.chartgo:hover b{color:var(--red)}
.chartwrap{border:1px solid var(--rule);border-radius:4px;overflow-x:auto;background:#fff}
@media (max-width:760px){
  .chartwrap svg{width:700px;max-width:none}
  .chartwrap{-webkit-overflow-scrolling:touch}
}
.alearn{display:inline-block;align-self:flex-start;margin-top:12px;font-family:var(--f-head);font-size:13px;font-weight:700;color:var(--ink);
  text-decoration:none;border-bottom:1px solid var(--rule);padding-bottom:1px}
.alearn:hover{border-bottom-color:var(--ink)}
.arows{margin-top:16px;padding-top:12px;border-top:1px solid var(--hair)}
/* DEADLINES: the news page's calendar rail, reused verbatim. The rail is on
   the left here rather than the right, because on this page the deadlines are
   the substance and the articles are the sidebar. */
.dlwrap{display:grid;grid-template-columns:1.5fr 1fr;gap:34px;align-items:stretch}
.dlwrap .rr .x{font-family:var(--f-head);font-weight:600;font-size:13.5px}
.dlwrap .rr .tk{font-variant-numeric:tabular-nums}
.dlwrap .rr.hi .tk{color:var(--red)}
.dside{border-left:1px solid var(--rule);padding-left:26px}
/* THE OTHER CALCULATORS */
.tools{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.tool{display:flex;flex-direction:column;text-decoration:none;color:inherit;
  border:1px solid var(--rule);border-radius:4px;padding:16px 17px 15px;background:#fff}
.tool:hover{border-color:var(--ink);box-shadow:0 2px 10px rgba(0,0,0,.07)}
.tool h5{font-family:var(--f-head);font-size:16.5px;font-weight:800;letter-spacing:-.015em;
  margin:0}
.tool p{font-size:13.5px;line-height:1.5;color:var(--body);margin:6px 0 12px}
.tgo{margin-top:auto;font-family:var(--f-head);font-size:12.5px;font-weight:700;
  color:var(--red)}
@media (max-width:1000px){
  .pfband{grid-template-columns:repeat(3,1fr)}
  .pfc:nth-child(3){border-right:0}
  .pfhero{grid-template-columns:1fr}
  .pfh-i{min-height:230px;order:-1}
  .pfh-t{padding:30px 26px 32px}
  .pfh-t h1{font-size:34px}
  .accts{grid-template-columns:1fr}
  .acct{border-right:0;border-bottom:1px solid var(--rule)}
  .acct:last-child{border-bottom:0}
  .dlwrap{grid-template-columns:1fr;gap:26px}
  .dlwrap .railcell > .rail{position:static}
  .dside{border-left:0;padding-left:0;border-top:1px solid var(--rule);padding-top:20px}
  .tools{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .pfband{grid-template-columns:repeat(2,1fr)}
  .pfc{border-right:1px solid #2f3136}
  .pfc:nth-child(2n){border-right:0}
  .pfc:nth-child(5){grid-column:1/-1}
  .pfl{white-space:normal}
  .pfv{font-size:22px}
  .pfh-t h1{font-size:28px}
  .tools{grid-template-columns:1fr}
}


/* ==================== TOOLS ==================== */
/* ============================================================== TOOLS INDEX */
.thead{padding:34px 26px 30px;border-bottom:1px solid var(--rule);background:var(--ink);color:#fff}
.thead h1{font-family:var(--f-head);font-size:40px;font-weight:900;letter-spacing:-.035em;
  margin:0;line-height:1}
.thead p{font-size:16px;line-height:1.6;color:#d3d6dc;margin:12px 0 0;max-width:70ch}
.gblurb{font-size:14.5px;line-height:1.55;color:var(--body);margin:0 0 14px}
.tgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.tcard{display:flex;flex-direction:column;text-decoration:none;color:inherit;background:#fff;
  border:1px solid var(--rule);border-radius:4px;padding:17px 18px 16px}
.tcard:hover{border-color:var(--ink);box-shadow:0 2px 10px rgba(0,0,0,.07)}
.tcard h4{font-family:var(--f-head);font-size:17.5px;font-weight:800;letter-spacing:-.017em;
  margin:0;line-height:1.25}
.tcard .task{font-family:var(--f-head);font-size:13.5px;font-weight:700;color:var(--red);
  margin:7px 0 0}
.tcard .blurb{font-size:14px;line-height:1.55;color:var(--body);margin:7px 0 13px}
.tcard .tgo{margin-top:auto;font-family:var(--f-head);font-size:12.5px;font-weight:700;
  color:var(--ink)}
.tcard:hover .tgo{color:var(--red)}
@media (max-width:820px){
  .tgrid{grid-template-columns:1fr}
  .thead{padding:26px 20px 24px}
  .thead h1{font-size:31px}
}


/* ==================== THEME ONLY ====================
   Rules with no counterpart in the mockups. The mockups had no footer at all,
   so the entire footer is here: the old theme's footer CSS went away with the
   old theme, which left the widget areas rendering as bare browser-default
   lists. */
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:8px;top:8px;z-index:999;background:#fff;color:#191b1d;
  padding:10px 14px;border:2px solid #c80815;border-radius:3px}
.mast .brandlink{display:inline-flex;align-items:center;gap:12px;text-decoration:none;
  color:inherit}

/* The uploaded logo carries the bull, the wordmark and the tagline in one
   image, so the masthead is that image alone, capped so it does not dominate
   the page on a wide screen. */
.mast .custom-logo-link{display:inline-block;line-height:0}
.mast .custom-logo{display:block;width:auto;height:auto;max-width:440px;max-height:166px}

/* ---- footer ---- */
.site-footer{background:var(--ink);color:#fff;margin-top:44px}
.site-footer .theme-wrapper{max-width:1180px;margin:0 auto;padding:0 26px}
.top-footer{padding:36px 0 30px}
.top-footer-widgets{display:grid;grid-template-columns:repeat(4,1fr);gap:26px 30px}
.footer-widget .widget-title{font-family:var(--f-head);font-size:13px;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;color:#fff;margin:0 0 13px;
  padding-bottom:9px;border-bottom:2px solid var(--red)}
.footer-widget ul{list-style:none;margin:0;padding:0}
.footer-widget li{margin:0 0 8px;line-height:1.4}
.footer-widget a{font-family:var(--f-body);font-size:13.5px;color:#c4c8d0;
  text-decoration:none}
.footer-widget a:hover{color:#fff;text-decoration:underline}
.footer-widget .widget{margin:0 0 22px}

.bottom-footer{border-top:1px solid #2f3136;padding:16px 0 24px}
.site-footer .site-info{text-align:center}
.foot-copy{font-family:var(--f-head);font-size:13.5px;font-weight:600;margin:0;color:#fff}
.foot-copy a{color:#fff;text-decoration:none}
.foot-copy a:hover{color:#ff8f97}
.foot-disclaimer{font-family:var(--f-body);font-size:12.5px;line-height:1.55;
  color:#9ea3ad;margin:8px auto 0;max-width:88ch}


/* ---- crypto front ---- */
.cband{background:var(--ink);color:#fff;display:flex;flex-wrap:wrap;align-items:stretch;
  border-bottom:3px solid var(--red)}
.cc{padding:12px 18px;border-right:1px solid #2f3136;display:flex;flex-direction:column;gap:2px}
.csym{font-family:var(--f-data);font-size:10.5px;letter-spacing:.12em;color:#9ea3ad}
.cpx{font-family:var(--f-head);font-size:20px;font-weight:900;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.cch{font-family:var(--f-data);font-size:11.5px}
.cc.up .cch{color:#5fd39a} .cc.dn .cch{color:#ff8f97}
.csrc{flex:1;min-width:240px;display:flex;align-items:center;padding:12px 18px;
  font-family:var(--f-body);font-size:12px;color:#9ea3ad;line-height:1.4}

.chero{background:var(--ink);color:#fff;padding:40px 44px 42px}
.chero-t{max-width:1180px;margin:0 auto}
.chero .hk{font-family:var(--f-data);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:#ff9ba2}
.chero h1{font-family:var(--f-head);font-size:42px;font-weight:900;letter-spacing:-.033em;
  line-height:1.08;margin:13px 0 0;color:#fff}
.chero h1 em{font-style:normal;color:#ff8f97}
.chero .sub{font-size:16.5px;line-height:1.6;color:#d3d6dc;margin:15px 0 0;max-width:66ch}
.chero .acts{display:flex;gap:14px;margin-top:24px;flex-wrap:wrap}
.chero .hbtn{display:inline-block;background:var(--red);color:#fff;text-decoration:none;
  font-family:var(--f-head);font-size:14px;font-weight:700;padding:12px 20px;border-radius:3px}
.chero .hbtn:hover{background:var(--red-deep)}
.chero .hbtn.ghost{background:transparent;border:1px solid #55575e}
.chero .hbtn.ghost:hover{border-color:#fff;background:rgba(255,255,255,.06)}

.crawrap{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--rule);
  border-radius:4px;overflow:hidden}
.cracol{padding:22px 24px}
.cracol:first-child{border-right:1px solid var(--rule);background:var(--wash)}
.cralead{font-size:15px;line-height:1.6;color:var(--ink);margin:0 0 14px;font-weight:600}
.cralist{margin:0;padding-left:22px}
.cralist li{font-family:var(--f-head);font-size:15px;font-weight:600;line-height:1.42;
  margin-bottom:11px;padding-left:4px}
.cranote{font-size:13px;line-height:1.55;color:var(--body);margin:16px 0 0;
  padding-top:12px;border-top:1px solid var(--rule)}
.cranote a{color:var(--red)}
.crah{font-family:var(--f-head);font-size:15.5px;font-weight:800;margin:0 0 7px;
  letter-spacing:-.01em}
.cracol h3.crah + p{margin:0 0 16px}
.cracol p{font-size:14px;line-height:1.6;color:var(--body);margin:0 0 14px}
.cratests{list-style:none;margin:0 0 4px;padding:0}
.cratests li{font-size:13.5px;line-height:1.5;color:var(--body);padding:5px 0;
  border-bottom:1px solid var(--hair)}
.cratests li:last-child{border-bottom:0}
.cratests b{font-family:var(--f-head);color:var(--ink)}

.ctable-wrap{overflow-x:auto;border:1px solid var(--rule);border-radius:4px}
.ctable{width:100%;border-collapse:collapse;background:#fff}
.ctable th,.ctable td{padding:11px 16px;text-align:left;border-bottom:1px solid var(--hair);
  font-size:14.5px}
.ctable thead th{font-family:var(--f-data);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--faint);background:var(--wash);
  border-bottom:2px solid var(--ink)}
.ctable tbody th{font-family:var(--f-head);font-weight:600}
.ctable tbody th b{font-weight:800}
.ctable .csm{font-family:var(--f-data);font-size:11px;color:var(--faint);margin-left:5px}
.ctable .num{text-align:right;font-variant-numeric:tabular-nums;font-family:var(--f-head);
  font-weight:700}
.ctable td.up{color:var(--up-txt)} .ctable td.dn{color:var(--down-txt)}
.ctable tbody tr:last-child th,.ctable tbody tr:last-child td{border-bottom:0}
.csrcline{font-size:12px;color:var(--faint);margin:9px 0 0}

@media (max-width:900px){
  .crawrap{grid-template-columns:1fr}
  .cracol:first-child{border-right:0;border-bottom:1px solid var(--rule)}
  .chero{padding:28px 22px 30px}
  .chero h1{font-size:30px}
  .csrc{min-width:100%;border-top:1px solid #2f3136}
}



/* ---- Our View cards ----
   .verdict and .vstance already exist in the design CSS; these are the pieces
   the card needs that were never styled because the markup did not emit them. */
.viewcard{display:flex;flex-direction:column;gap:9px;text-decoration:none;color:inherit;
  background:#fff;border:1px solid var(--rule);border-top:3px solid var(--rule);
  border-radius:4px;padding:16px 18px 15px}
.viewcard h4{color:var(--ink)}
.viewcard:hover h4{color:var(--red)}
.vtk{font-family:var(--f-data);font-size:11px;letter-spacing:.1em;background:var(--ink);
  color:#fff;padding:2px 7px;border-radius:2px}
.vgo{font-family:var(--f-head);font-size:12.5px;font-weight:700;color:var(--red);
  margin-top:11px}
.verdict .vdir{font-family:var(--f-head);font-size:14px;font-weight:800}
.verdict.hold .vdir{color:var(--ink)}

/* ---- the recap's what-drove-it rail ---- */
.brief-body{display:grid;grid-template-columns:1.9fr 1fr;gap:28px;align-items:start}
.brief-body > div > h3{font-family:var(--f-head);font-size:23px;font-weight:800;
  letter-spacing:-.022em;line-height:1.24;margin:0 0 10px}
.brief-body > div > h3 a{color:inherit;text-decoration:none}
.brief-body > div > h3 a:hover{color:var(--red)}
.brief-body p{font-size:14.5px;line-height:1.62;color:var(--body);margin:0}
.briefgo{display:inline-block;margin-top:12px;font-family:var(--f-head);font-size:13px;
  font-weight:700;color:var(--red);text-decoration:none}
.briefgo:hover{text-decoration:underline}
.drivers{border-left:1px solid var(--rule);padding-left:20px}
.dlab{font-family:var(--f-data);font-size:10px;letter-spacing:.13em;color:var(--faint);
  margin-bottom:9px}
/* This is a rail, not a second article. It was set at body size and taking
   almost half the panel. */
.drv{display:flex;gap:9px;align-items:flex-start;padding:6px 0;
  border-bottom:1px solid var(--hair)}
.drv:last-child{border-bottom:0}
.dk{flex:none;font-family:var(--f-data);font-size:9px;letter-spacing:.08em;
  background:var(--wash);color:var(--body);padding:3px 6px;border-radius:2px;
  margin-top:1px;min-width:72px;text-align:center}
.dk.ahead{background:var(--red);color:#fff}

/* Driver pills are colour coded by what moved the market, so the rail can be
   skimmed by kind. Tinted grounds with saturated text, not four solid blocks:
   the only solid pill stays AHEAD, because it is the one that is not history.
   Anything unrecognised keeps the neutral default above. */
.dk.k-commodities{background:#fbf0dd;color:#8a5200}
.dk.k-movers{background:#fbe9eb;color:#a3060f}
.dk.k-breadth{background:#e9eef6;color:#2f4f7a}
.dk.k-rates,.dk.k-boc{background:#e6f0ea;color:#2b5c3c}
.dk.k-currency,.dk.k-dollar{background:#e4f0f0;color:#215c5c}
.dk.k-earnings{background:#efe9f6;color:#54387f}
.dk.k-energy{background:#f6ece4;color:#8a4420}
.drv p{font-size:12px;line-height:1.45;margin:0}
@media (max-width:860px){
  .brief-body{grid-template-columns:1fr}
  .drivers{border-left:0;border-top:1px solid var(--rule);padding-left:0;padding-top:16px}
}

/* ---- collapsible FAQs ---- */
details.faq{display:block;padding:0;border-bottom:1px solid var(--hair)}
details.faq summary{display:flex;gap:11px;align-items:flex-start;padding:11px 0;
  cursor:pointer;list-style:none;font-size:13.5px}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+";margin-left:auto;font-family:var(--f-head);
  font-size:15px;font-weight:700;color:var(--faint);line-height:1}
details.faq[open] summary::after{content:"‘2"}
details.faq summary b{font-family:var(--f-head);font-weight:700;color:var(--ink)}
details.faq summary:hover b{color:var(--red)}
details.faq > p{margin:0 0 13px 30px;font-size:13px;line-height:1.55;color:var(--body)}

/* ---- guide pills ----
   These are anchors now, so they were rendering blue and underlined. */
.guide{text-decoration:none;color:var(--ink);border:1px solid var(--rule);
  border-radius:3px;padding:7px 12px;font-family:var(--f-head);font-size:12.5px;
  font-weight:600;display:inline-block}
.guide:hover{border-color:var(--ink);color:var(--red)}
.gblurb{color:var(--body)}

/* ---- deep-dive cards ----
   The anchor was inheriting the browser's link styling, so the titles rendered
   blue and underlined and the source line had no rule at all. */
.dive{text-decoration:none;color:inherit}
.dive h4{color:var(--ink)}
.dive:hover h4{color:var(--red)}
.dive .src{font-family:var(--f-data);font-size:10.5px;letter-spacing:.08em;
  color:var(--faint);line-height:1.35;margin-top:10px;text-transform:uppercase}
.dive .ddgo{margin-top:12px}
.divewrap{position:relative}
/* The two paging arrows sit side by side at the right of the heading. They
   were stacking vertically because the containing span was not a flex row. */
.bh .all.divenav{display:inline-flex;align-items:center;gap:6px}
.bh .all.divenav .nav-b{margin:0}

/* four cards across, and the rest scroll */
.divetrack > .dive{flex:0 0 calc(25% - 11px);min-width:230px}
@media (max-width:1000px){ .divetrack > .dive{flex:0 0 calc(50% - 7px)} }
@media (max-width:620px){ .divetrack > .dive{flex:0 0 84%} }

/* ---- tables inside articles and pages ----
   The /learn/ explainers are full of them and they were rendering as bare
   browser-default tables. A financial table has to be scannable: figures right
   aligned, tabular numerals so digits line up, and a header that stays
   distinguishable. Wide tables scroll inside their own box so the page body
   never scrolls sideways. */
.art-body table{width:100%;border-collapse:collapse;margin:22px 0;font-size:14.5px;
  background:#fff}
.art-body table th,.art-body table td{padding:10px 14px;text-align:left;
  border-bottom:1px solid var(--hair);vertical-align:top;line-height:1.45}
.art-body table thead th,
.art-body table > tbody > tr:first-child > th{font-family:var(--f-head);font-size:12px;font-weight:800;
  letter-spacing:.05em;text-transform:uppercase;color:var(--ink);
  background:var(--wash);border-bottom:2px solid var(--ink);white-space:nowrap}
.art-body table > tbody > tr:not(:first-child) > th{font-family:var(--f-head);
  font-weight:700;color:var(--ink)}

.art-body table tbody tr:last-child th,.art-body table tbody tr:last-child td{border-bottom:0}
.art-body table tbody tr:hover{background:var(--wash)}
.art-body table td:not(:first-child),.art-body table th:not(:first-child){
  font-variant-numeric:tabular-nums}
.art-body table caption{caption-side:bottom;text-align:left;font-size:12px;
  color:var(--faint);padding-top:9px;line-height:1.45}
.art-body .wp-block-table,.art-body figure.wp-block-table{overflow-x:auto;margin:22px 0}
.art-body .wp-block-table table{margin:0}
.art-body table strong,.art-body table b{font-family:var(--f-head)}

/* A phone gets the narrow chart, which lists its endpoints underneath instead
   of in a right margin, so nothing has to be dragged sideways. */
.chart-wide{display:block}
.chart-narrow{display:none}
@media (max-width:700px){
  .chart-wide{display:none}
  .chart-narrow{display:block}
  .chartwrap{overflow-x:visible}
  .chartwrap svg{width:100%;max-width:none}
}

/* ---- mobile ----
   Nobody should have to drag a price strip sideways to see whether the market
   is up. On a phone the tape becomes a wrapping grid instead of a rail. */
@media (max-width:760px){
  .tape{flex-wrap:wrap}
  .tape .t{flex:1 1 33.333%;min-width:0;border-right:1px solid #2f3136;
    border-bottom:1px solid #2f3136;padding:9px 12px}
  .tape .t.stamp{flex:1 1 100%}
  .tape .t.flag{flex:1 1 100%}
  .cband{flex-wrap:wrap}
  .cc{flex:1 1 33.333%;min-width:0}
  .movers .mvwrap{overflow-x:auto}
  .art-body table{font-size:13.5px}
  .art-body table th,.art-body table td{padding:8px 10px}
}
@media (max-width:420px){
  .tape .t{flex:1 1 50%}
  .cc{flex:1 1 50%}
}


/* ==================== ARTICLES AND PAGES ====================
   The reading surface. Body text was running the full width of the page with
   no padding and no measure, which is unreadable on a desktop monitor and looks
   broken on any screen. Long-form gets a real column: about 68 characters,
   centred, with the type set larger than the interface around it. */
.single-article{padding:0}
.art-head{max-width:760px;margin:0 auto;padding:38px 24px 0}
.art-kicker{display:inline-block;font-family:var(--f-data);font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--red);text-decoration:none;
  margin-bottom:12px}
.art-kicker:hover{text-decoration:underline}
.art-title{font-family:var(--f-head);font-size:40px;font-weight:900;letter-spacing:-.032em;
  line-height:1.12;margin:0;text-wrap:balance}
.art-by{font-family:var(--f-data);font-size:11.5px;letter-spacing:.06em;color:var(--faint);
  margin-top:14px;text-transform:uppercase}
.art-upd{color:var(--red)}
.art-lead{max-width:1000px;margin:26px auto 0;padding:0 24px}
.art-lead img{display:block;width:100%;height:auto;border-radius:4px}

.art-body{max-width:760px;margin:0 auto;padding:26px 24px 40px;
  font-family:var(--f-body);font-size:18px;line-height:1.72;color:var(--ink)}
.art-body > *:first-child{margin-top:0}
.art-body p{margin:0 0 1.15em}
.art-body h2{font-family:var(--f-head);font-size:27px;font-weight:800;letter-spacing:-.022em;
  line-height:1.25;margin:2em 0 .55em;padding-top:.5em;border-top:1px solid var(--hair);
  text-wrap:balance}
.art-body h3{font-family:var(--f-head);font-size:20.5px;font-weight:800;letter-spacing:-.015em;
  line-height:1.3;margin:1.7em 0 .45em}
.art-body h4{font-family:var(--f-head);font-size:17px;font-weight:700;margin:1.5em 0 .4em}
.art-body a{color:var(--red);text-decoration:underline;text-underline-offset:2px;
  text-decoration-thickness:1px}
.art-body a:hover{text-decoration-thickness:2px}
.art-body ul,.art-body ol{margin:0 0 1.15em;padding-left:1.35em}
.art-body li{margin-bottom:.5em}
.art-body li::marker{color:var(--red)}
.art-body blockquote{margin:1.6em 0;padding:2px 0 2px 20px;border-left:3px solid var(--red);
  font-size:19px;line-height:1.6;color:var(--ink-2)}
.art-body blockquote p:last-child{margin-bottom:0}
.art-body img{max-width:100%;height:auto;border-radius:4px}
.art-body figure{margin:26px 0}
.art-body figure img{display:block;width:100%}
.art-body figcaption{font-family:var(--f-body);font-size:13px;color:var(--faint);
  line-height:1.5;margin-top:8px}
.art-body hr{border:0;border-top:1px solid var(--rule);margin:2.2em 0}
.art-body code{font-family:var(--f-data);font-size:.88em;background:var(--wash);
  padding:2px 5px;border-radius:3px}
.art-body strong,.art-body b{font-weight:700}
.art-body em{font-style:italic}

/* Wide things get more room than the 68-character reading column, but they
   break out to the page container, never to the viewport. A vw-based full
   bleed escaped the white .page entirely and rendered tables across the dark
   background behind it. */
.art-body .wp-block-table,.art-body figure.wp-block-table,.art-body .bcs-tool{
  width:100%;max-width:none}
.art-body > table,.art-body > .wp-block-table,.art-body > figure.wp-block-table{
  width:100%;max-width:100%;margin-left:0;margin-right:0;overflow-x:auto}
.art-body > table{display:block}
.art-body > table > tbody,.art-body > table > thead{display:table;width:100%}
@media (max-width:1000px){
  .art-body > table,.art-body > .wp-block-table,.art-body > figure.wp-block-table{
    max-width:100%;margin-left:0;margin-right:0}
}

.art-comments{max-width:760px;margin:0 auto;padding:0 24px 40px}
.page-links{max-width:760px;margin:0 auto;padding:0 24px 20px;font-family:var(--f-head)}

@media (max-width:820px){
  .art-title{font-size:30px}
  .art-head{padding:26px 18px 0}
  .art-body{font-size:17px;padding:22px 18px 32px}
  .art-lead{padding:0 18px}
  .art-body h2{font-size:23px}
  .art-body h3{font-size:18.5px}
  .art-body > table,.art-body .wp-block-table{margin-left:0;margin-right:0;
    padding:0;overflow-x:auto;display:block}
  .art-comments,.page-links{padding-left:18px;padding-right:18px}
}

@media (max-width:900px){
  .top-footer-widgets{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .top-footer-widgets{grid-template-columns:1fr}
  .mast .custom-logo{max-width:280px}
  .site-footer .theme-wrapper{padding:0 18px}
}