/* Ported from the redesign mockup. The mockup's page-switcher rules
   (.page{display:none}) are removed - each page is its own document here. */
:root{
  --paper:#E9EBE8; --white:#FFFFFF; --ink:#12151A; --graphite:#454B52; --mute:#767D84;
  --rule:#C7CCC7; --rule-2:#A9AFA9;
  --b-analysis:#E2E7EA; --b-tools:#12151A; --b-learn:#D6DDD2;
  --display:'DM Sans',system-ui,sans-serif;
  --sans:'IBM Plex Sans',system-ui,sans-serif;
  --mono:'IBM Plex Mono',monospace;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:72px;
  --maxw:1220px;--measure:620px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
  font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}
body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:9;opacity:.12;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='120' height='120' filter='url(%23n)'/></svg>")}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--s5)}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
p{margin:0}
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:800;letter-spacing:-.035em;
  line-height:1.04;text-wrap:balance}
:focus-visible{outline:2px solid currentColor;outline-offset:2px}
svg{display:block;width:100%;height:auto}

.top{border-bottom:1px solid var(--rule);background:var(--paper);position:sticky;top:0;z-index:20}
.top-in{display:flex;align-items:center;gap:var(--s6);height:58px}
.logo img{height:17px}
.nav{display:flex;gap:2px}
/* The mockup navigated with <button> because it was a page switcher. The real
   site navigates with <a>, so both carry the same treatment. */
.nav button,.nav a{padding:7px 12px;font-size:13.5px;font-weight:500;color:var(--graphite);
  background:transparent;border:0;cursor:pointer;font-family:var(--sans);
  text-decoration:none;line-height:1.2;white-space:nowrap}
.nav button:hover,.nav a:hover{color:var(--ink);background:#DCE0DC}
.nav button[aria-current="page"],.nav a[aria-current="page"]{background:var(--ink);color:var(--paper)}
.top-end{margin-left:auto;display:flex;gap:var(--s2)}
.btn{border:1px solid var(--ink);background:transparent;color:var(--ink);font-family:var(--sans);
  font-size:13px;font-weight:600;padding:8px 15px;cursor:pointer;display:inline-block}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn.solid{background:var(--ink);color:var(--paper)}
.btn.big{padding:15px 38px;font-size:15px}
.seccta{display:flex;justify-content:center;margin-top:var(--s7)}



.phead{padding-block:var(--s8) var(--s6)}
.phead h1{font-size:clamp(34px,4.4vw,56px)}
.phead .lede{margin-top:var(--s4);font-size:17px;color:var(--graphite);max-width:64ch;line-height:1.55}
.pmeta{display:flex;flex-wrap:wrap;gap:var(--s5);margin-top:var(--s5);font-family:var(--mono);
  font-size:11.5px;color:var(--mute);letter-spacing:.06em;text-transform:uppercase}
.pmeta b{color:var(--ink);font-weight:600}

/* filter bar */
.filters{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center;
  padding-block:var(--s4);border-block:1px solid var(--rule);margin-bottom:var(--s6)}
.filters button{font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.06em;
  padding:7px 13px;border:1px solid var(--rule-2);background:transparent;color:var(--graphite);cursor:pointer}
.filters button:hover{border-color:var(--ink);color:var(--ink)}
.filters button[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.filters .count{margin-left:auto;font-family:var(--mono);font-size:11.5px;color:var(--mute)}

/* post grid */
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5)}
.post{background:var(--white);border:1px solid var(--rule-2);display:flex;flex-direction:column}
.post:hover{border-color:var(--ink)}
.post .fig{position:relative;border-bottom:1px solid var(--rule-2)}
/* photo covers share the plates' 420x236 frame; crop, never letterbox */
.post .fig img{width:100%;aspect-ratio:420/236;object-fit:cover;display:block}
.artfig img{width:100%;max-height:420px;object-fit:cover;display:block}
.post .kick{position:absolute;left:0;bottom:0;background:var(--ink);color:var(--paper);
  font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;padding:5px 10px}
.post .bd{padding:var(--s4);display:flex;flex-direction:column;gap:var(--s3);flex:1}
.post h3{font-size:18px;line-height:1.18}
.post .dek{font-size:13.5px;color:var(--graphite);line-height:1.5}
.post .when{font-family:var(--mono);font-size:10.5px;color:var(--mute);margin-top:auto}
.ad{margin-block:var(--s7);display:flex;flex-direction:column;align-items:center;gap:6px}
.ad .l{font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
.ad .box{width:100%;min-height:110px;border:1px solid var(--rule-2);background:rgba(255,255,255,.6);
  display:grid;place-items:center;font-family:var(--mono);font-size:10.5px;color:var(--mute)}
.pager{display:flex;justify-content:center;gap:var(--s2);margin-top:var(--s7)}
.pager a{border:1px solid var(--rule-2);padding:10px 16px;font-family:var(--mono);font-size:12px}
.pager a[aria-current]{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* ---- article page ---- */
.crumbs{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center;padding-block:var(--s5) 0;
  font-family:var(--mono);font-size:11px;color:var(--mute);letter-spacing:.06em}
.crumbs a:hover{color:var(--ink)}
.crumbs span{color:var(--rule-2)}
.crumbs.dark{color:#7E8895}
.crumbs.dark a:hover{color:#FFFFFF}
/* main column fills the wrap so the article's left and right edges line up
   with the header/footer; the sidebar keeps its fixed width */
.artlayout{display:grid;grid-template-columns:minmax(0,1fr) 316px;
  gap:var(--s7);align-items:start;padding-top:var(--s5)}
.arthead{padding-bottom:var(--s5)}
.artmeta{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center;font-family:var(--mono);
  font-size:11px;color:var(--mute);letter-spacing:.06em;text-transform:uppercase}
.artmeta .cat{background:var(--ink);color:var(--paper);padding:4px 9px;font-weight:700;letter-spacing:.12em}
.arthead h1{font-size:clamp(30px,3.8vw,46px);margin-top:var(--s4)}
.arthead .stand{margin-top:var(--s4);font-size:18px;line-height:1.55;color:var(--graphite);max-width:60ch}
.byline{display:flex;align-items:center;gap:var(--s3);margin-top:var(--s5);
  padding-top:var(--s4);border-top:1px solid var(--rule)}
.av{width:38px;height:38px;background:var(--ink);color:var(--paper);display:grid;place-items:center;
  font-family:var(--mono);font-size:12px;font-weight:700;flex:none;letter-spacing:.06em}
.av.big{width:52px;height:52px;font-size:15px}
.byline>div b{display:block;font-size:14px}
.byline>div span{display:block;font-family:var(--mono);font-size:11px;color:var(--mute);margin-top:2px}
.artfig{margin:0 0 var(--s5);border:1px solid var(--ink)}
.artfig figcaption{border-top:1px solid var(--ink);background:var(--white);padding:10px var(--s4);
  font-family:var(--mono);font-size:11px;color:var(--mute);line-height:1.5}
.tldr{background:var(--white);border:1px solid var(--ink);border-left:4px solid var(--ink);
  padding:var(--s5);margin-bottom:var(--s6)}
.tldr b{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--graphite)}
.tldr ul{margin:var(--s3) 0 0;padding:0;list-style:none;display:grid;gap:var(--s2)}
/* NOT flex: a flex li turns inline links into separate flex items and the
   sentence breaks apart. Absolute marker keeps the text as one run. */
.tldr li{position:relative;padding-left:20px;font-size:14.5px;line-height:1.5}
.tldr li::before{content:'';position:absolute;left:0;top:7px;width:7px;height:7px;
  background:var(--ink);transform:rotate(45deg)}
.tldr a{border-bottom:1px solid var(--ink)}
.prose{max-width:66ch}
.artlayout .prose{max-width:none}
.prose p{font-size:16px;line-height:1.72;margin-bottom:var(--s4);color:#23272C}
/* long-form body: 19px over the 620px column lands ~72 characters a line */
.artlayout .prose p,.artlayout .prose li{font-size:19px;line-height:1.65}
.artlayout .prose h2{font-size:29px}
.artlayout .callout p,.artlayout .kt li{font-size:16.5px;line-height:1.6}
.prose h2{font-size:26px;margin:var(--s7) 0 var(--s4)}
.prose .disc-line{font-size:13.5px;color:var(--mute)}
.callout{background:var(--white);border:1px solid var(--rule-2);border-top:3px solid var(--ink);
  padding:var(--s5);margin:var(--s5) 0}
.callout b{display:block;font-family:var(--display);font-weight:800;font-size:16px;letter-spacing:-.02em}
.callout p{margin-top:var(--s2);font-size:14.5px;line-height:1.6;color:var(--graphite)}
/* grid items default to min-width:auto, so a wide child (the table) would stop
   the column shrinking and push the page sideways. Let them shrink and scroll. */
.artlayout>*,.toolgrid2>*,.artmain>*,.track>*{min-width:0}
.tablewrap{overflow-x:auto;margin:var(--s5) 0;min-width:0;max-width:100%}
.dtab{width:100%;border-collapse:collapse;background:var(--white);border:1px solid var(--ink);min-width:420px}
.dtab th{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--graphite);text-align:left;padding:var(--s3) var(--s4);border-bottom:1px solid var(--ink);background:var(--paper)}
.dtab td{padding:var(--s3) var(--s4);border-bottom:1px solid var(--rule);font-size:14px}
.dtab tr:last-child td{border-bottom:0}
.dtab .n{font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right}
.dtab .pos{color:#1F5FE0} .dtab .neg{color:#E2511C}
.dtab.dark{background:#171C22;border-color:#2A313A}
.dtab.dark th{background:#12161B;color:#8B95A1;border-color:#2A313A}
.dtab.dark td{color:#C6CDD4;border-color:#22282F}
.adinline{margin:var(--s6) 0;display:flex;flex-direction:column;align-items:center;gap:6px}
.adinline .l{font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
.adinline .box{width:100%;min-height:150px;border:1px solid var(--rule-2);background:rgba(255,255,255,.6);
  display:grid;place-items:center;font-family:var(--mono);font-size:10.5px;color:var(--mute)}
.minitool{border:1px solid var(--ink);background:var(--white);margin:var(--s5) 0 var(--s6)}
.mt-head{display:flex;justify-content:space-between;align-items:center;padding:var(--s3) var(--s4);
  border-bottom:1px solid var(--rule);font-family:var(--display);font-weight:800;font-size:15px}
.mt-head span{font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  background:var(--ink);color:var(--paper);padding:4px 9px}
.mt-body{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--rule)}
.mt-body label{background:var(--white);padding:var(--s3) var(--s4);display:block;font-size:12.5px;font-weight:500}
.mt-body .u{font-family:var(--mono);font-size:10px;color:var(--mute);margin-left:5px}
.mt-body input{display:block;width:100%;margin-top:6px;border:1px solid var(--rule-2);background:var(--paper);
  padding:7px 9px;font-family:var(--mono);font-size:14px;color:var(--ink)}
.mt-out{background:var(--ink);color:var(--paper);padding:var(--s3) var(--s4);display:flex;
  flex-direction:column;justify-content:center}
.mt-out span{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:#8B939C}
.mt-out b{font-family:var(--mono);font-size:19px;margin-top:5px;font-variant-numeric:tabular-nums}
.faq{margin-top:var(--s7)}
.faq h2{font-size:26px;margin-bottom:var(--s4)}
.faq details{background:var(--white);border:1px solid var(--rule-2);margin-bottom:var(--s2)}
.faq summary{padding:var(--s4);font-weight:600;font-size:15px;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';float:right;font-family:var(--mono);color:var(--mute)}
.faq details[open] summary::after{content:'\2212'}
.faq details div{padding:0 var(--s4) var(--s4);font-size:14.5px;line-height:1.6;color:var(--graphite)}
.authorbox{display:flex;gap:var(--s4);background:var(--white);border:1px solid var(--rule-2);
  padding:var(--s5);margin-top:var(--s7)}
.authorbox b{font-family:var(--display);font-weight:800;font-size:17px}
.authorbox p{font-size:14px;color:var(--graphite);line-height:1.55;margin:var(--s2) 0 var(--s4);max-width:56ch}
.related{margin-top:var(--s7)}
.related h2{font-size:26px;margin-bottom:var(--s4)}
.relgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4)}
.artside{display:grid;gap:var(--s4)}
.side{background:var(--white);border:1px solid var(--rule-2);padding:var(--s4)}
.side.sticky{position:static}
/* sticky, but no forced inner scroll -- the max-height/overflow made the
   whole sidebar scroll on its own, which read as a bug */
.artside{position:sticky;top:78px;align-self:start}
.sh{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mute);margin-bottom:var(--s3)}
.adside .box{min-height:420px;border:1px solid var(--rule-2);background:rgba(255,255,255,.6);
  display:grid;place-items:center;font-family:var(--mono);font-size:10.5px;color:var(--mute)}
.adside .l{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--mute);text-align:center;margin-bottom:6px}
.toc{margin:0;padding-left:var(--s4);display:grid;gap:var(--s2);font-size:13.5px;line-height:1.4}
.toc a:hover{border-bottom:1px solid var(--ink)}
.side.promo h3{font-size:19px;margin-bottom:var(--s2)}
.side.promo p{font-size:13.5px;color:var(--graphite);line-height:1.5;margin-bottom:var(--s4)}
.popular{margin:0;padding-left:var(--s4);display:grid;gap:var(--s3);font-size:13.5px;line-height:1.4}
.popular span{display:block;font-family:var(--mono);font-size:10.5px;color:var(--mute);margin-top:3px}

/* ---- tool detail ---- */
.plate{border:1px solid #2A313A;background:#12161B;margin:0}
.plate svg{display:block;width:100%;height:auto}
.pcap{border-top:1px solid #262D35;padding:9px 12px;font-family:var(--mono);font-size:10px;
  color:#79838E;display:flex;justify-content:space-between;gap:var(--s4);flex-wrap:wrap}
.toolhero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:var(--s7);
  align-items:center;padding-block:var(--s5) var(--s8)}
.toolhero h1{font-size:clamp(32px,4vw,50px);margin-top:var(--s4)}
.toolhero .stand{margin-top:var(--s4);font-size:17px;line-height:1.55;color:#9BA5B1;max-width:46ch}
.dark .artmeta{color:#7E8895}
.dark .artmeta .cat{background:#4C8DFF;color:#05132E}
.dlrow{display:flex;flex-wrap:wrap;gap:var(--s4);align-items:center;margin-top:var(--s6)}
.dlnote{font-family:var(--mono);font-size:11px;color:#7E8895}
.dark .btn.solid{background:#FFFFFF;color:var(--ink);border-color:#FFFFFF}
.dark .btn.solid:hover{background:#C6CDD4;border-color:#C6CDD4}
.gate{margin-top:var(--s5);border:1px solid #2A313A;background:#171C22;padding:var(--s4)}
.gate b{display:block;font-family:var(--display);font-weight:800;font-size:15px;color:#FFFFFF}
.gform{display:flex;margin-top:var(--s3);border:1px solid #3A424C}
.gform input{flex:1;min-width:0;border:0;background:#12161B;color:#E8ECF2;padding:11px var(--s4);
  font-family:var(--sans);font-size:14px}
.gform input::placeholder{color:#6C7885}
.gform button{border:0;background:#4C8DFF;color:#05132E;font-family:var(--sans);font-size:14px;
  font-weight:600;padding:11px 18px;cursor:pointer}
.gnote{display:block;margin-top:var(--s2);font-family:var(--mono);font-size:10.5px;color:#6C7885}
.toolgrid2{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:var(--s7);align-items:start}
.th2{font-size:24px;margin:var(--s6) 0 var(--s4)}
.th2:first-child{margin-top:0}
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:var(--s3)}
.ticks li{position:relative;padding-left:20px;font-size:15px;line-height:1.55;color:#C6CDD4}
.ticks li::before{content:'';position:absolute;left:0;top:8px;width:7px;height:7px;
  background:#4C8DFF;transform:rotate(45deg)}
.steps{margin:0;padding:0;list-style:none;counter-reset:st}
.steps li{counter-increment:st;position:relative;padding:0 0 var(--s4) 44px;font-size:15px;
  line-height:1.55;color:#C6CDD4;border-left:1px solid #2A313A;margin-left:14px}
.steps li:last-child{border-left-color:transparent;padding-bottom:0}
.steps li::before{content:counter(st,decimal-leading-zero);position:absolute;left:-14px;top:-2px;
  width:28px;height:28px;background:#12161B;border:1px solid #3A424C;color:#8B95A1;
  font-family:var(--mono);font-size:11px;display:grid;place-items:center}
.steps b{color:#FFFFFF;font-weight:600}
.specbox{border:1px solid #2A313A;background:#171C22;padding:var(--s4);margin-bottom:var(--s4)}
.specbox .sh{color:#7E8895}
.specbox dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:var(--s2) var(--s4);font-size:13.5px}
.specbox dt{font-family:var(--mono);font-size:11px;color:#7E8895;letter-spacing:.06em}
.specbox dd{margin:0;color:#C6CDD4;text-align:right}
.chg{list-style:none;margin:0;padding:0;display:grid;gap:var(--s3)}
.chg li{font-size:13.5px;color:#C6CDD4}
.chg b{font-family:var(--mono);font-size:12px;color:#FFFFFF;margin-right:var(--s2)}
.chg span{font-family:var(--mono);font-size:10.5px;color:#6C7885}
.chg em{display:block;font-style:normal;color:#8B95A1;margin-top:3px;font-size:13px}
.specbox.upsell h3{font-size:19px;color:#FFFFFF;margin-bottom:var(--s2)}
.specbox.upsell p{font-size:13.5px;color:#9BA5B1;line-height:1.5;margin-bottom:var(--s4)}

/* ---- tools page ---- */
.dark{background:var(--b-tools);color:#E8ECF2}
.dark h1,.dark h2,.dark h3{color:#FFFFFF}
.dark .phead .lede{color:#9BA5B1}
.dark .pmeta{color:#7E8895} .dark .pmeta b{color:#FFFFFF}
.dark .filters{border-color:#2A313A}
.dark .filters button{border-color:#2A313A;color:#9BA5B1}
.dark .filters button:hover{border-color:#FFFFFF;color:#FFFFFF}
.dark .filters button[aria-pressed="true"]{background:#FFFFFF;color:var(--ink);border-color:#FFFFFF}
.dark .btn{border-color:#FFFFFF;color:#FFFFFF}
.dark .btn:hover{background:#FFFFFF;color:var(--ink)}
.platgrp{margin-bottom:var(--s8)}
.platbar{display:flex;align-items:baseline;gap:var(--s4);padding-bottom:var(--s3);
  border-bottom:2px solid #FFFFFF;margin-bottom:var(--s5)}
.platbar h2{font-size:26px}
.platbar .n{font-family:var(--mono);font-size:11px;color:#7E8895;letter-spacing:.1em}
.platbar .req{margin-left:auto;font-family:var(--mono);font-size:10.5px;color:#7E8895}
.tool{border:1px solid #2A313A;background:#171C22;display:flex;flex-direction:column}
.tool:hover{border-color:#4C8DFF}
.tool .shot{border-bottom:1px solid #2A313A}
.tool .bd{padding:var(--s4);display:flex;flex-direction:column;gap:var(--s2);flex:1}
.tool h3{font-size:18px}
.tool p{font-size:13.5px;color:#98A2AE;line-height:1.5}
.tool .spec{display:flex;flex-wrap:wrap;gap:var(--s3);font-family:var(--mono);font-size:10px;
  color:#6C7885;letter-spacing:.06em;padding-top:var(--s2)}
.tool .foot{margin-top:auto;padding-top:var(--s3);display:flex;align-items:center;
  justify-content:space-between;gap:var(--s3);border-top:1px solid #22282F}
.tag{font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  padding:5px 9px;border:1px solid currentColor;white-space:nowrap}
.tag.live{background:#4C8DFF;border-color:#4C8DFF;color:#05132E}
.tag.free{color:#5FD07A}
.tag.paid{background:#F0B429;border-color:#F0B429;color:#241A03}
.tag.soon{color:#6C7885}
.tool .go{font-family:var(--mono);font-size:10.5px;color:#98A2AE;letter-spacing:.1em;text-transform:uppercase}
.platnote{border:1px solid #2A313A;background:#171C22;padding:var(--s4) var(--s5);
  margin-bottom:var(--s6);font-size:13.5px;color:#9BA5B1}
.platnote b{color:#FFFFFF}

/* ---- course page ---- */
.learnbg{background:var(--b-learn)}
.track{display:grid;grid-template-columns:200px 1fr;gap:var(--s7);align-items:start}
.spine{position:sticky;top:78px}
.spine ol{list-style:none;margin:0;padding:0}
.spine li{position:relative;padding:0 0 var(--s5) var(--s5);border-left:2px solid #B9C2B5}
.spine li:last-child{border-left-color:transparent;padding-bottom:0}
.spine li::before{content:'';position:absolute;left:-6px;top:4px;width:10px;height:10px;
  background:var(--ink);transform:rotate(45deg)}
.spine li.done::before{background:#4B7F5B}
.spine .lv{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#6E7A6A}
.spine .tt{font-family:var(--display);font-weight:800;font-size:15px;letter-spacing:-.02em;margin-top:2px;line-height:1.15}
.spine .du{font-family:var(--mono);font-size:10.5px;color:#6E7A6A;margin-top:3px}
.mod{background:var(--white);border:1px solid #B9C2B5;margin-bottom:var(--s5)}
.mod .banner{border-bottom:1px solid #B9C2B5;position:relative}
.mod .lvtag{position:absolute;left:0;bottom:0;background:var(--ink);color:var(--paper);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;padding:6px 11px}
.mod .mbd{padding:var(--s5)}
.mod h3{font-size:23px}
.mod .mdesc{margin-top:var(--s3);font-size:14.5px;color:var(--graphite);line-height:1.55;max-width:62ch}
.mod .stats{display:flex;flex-wrap:wrap;gap:var(--s5);margin-top:var(--s4);font-family:var(--mono);
  font-size:11px;color:var(--mute);letter-spacing:.06em;text-transform:uppercase}
.mod .stats b{color:var(--ink)}
.lessons{list-style:none;margin:var(--s5) 0 0;padding:0;border-top:1px solid var(--rule)}
.lessons li{display:grid;grid-template-columns:30px 1fr auto auto;gap:var(--s4);align-items:center;
  padding:13px var(--s2);border-bottom:1px solid var(--rule)}
.lessons li:hover{background:var(--paper)}
.lessons .no{font-family:var(--mono);font-size:11px;color:var(--mute)}
.lessons .ti{font-size:14.5px;font-weight:500}
.lessons .ti i{display:block;font-style:normal;font-size:12.5px;color:var(--mute);
  margin-top:4px;font-weight:400;line-height:1.45;max-width:56ch}
.lessons .ti i::before{content:'';display:inline-block;width:5px;height:5px;background:#8FA88F;
  transform:rotate(45deg);margin-right:7px;vertical-align:middle}
.lessons .kind{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--graphite);border:1px solid var(--rule-2);padding:3px 8px}
.lessons .dur{font-family:var(--mono);font-size:11px;color:var(--mute);min-width:52px;text-align:right}
.outcomes{background:var(--ink);color:var(--paper);padding:var(--s6);margin-bottom:var(--s6)}
.outcomes h2{color:#FFFFFF;font-size:24px}
.outcomes ul{list-style:none;margin:var(--s4) 0 0;padding:0;display:grid;
  grid-template-columns:repeat(2,1fr);gap:var(--s3) var(--s5)}
.outcomes li{position:relative;padding-left:21px;font-size:14px;color:#C7CDD3;line-height:1.5}
.outcomes li::before{content:'';position:absolute;left:0;top:7px;width:8px;height:8px;
  background:#7FB68E;transform:rotate(45deg)}

/* lesson formats */
.formats{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:#B9C2B5;
  border:1px solid #B9C2B5;margin-bottom:var(--s6)}
.fmt{background:var(--white);padding:var(--s4)}
.fmt b{display:block;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink)}
.fmt span{display:block;font-size:12.5px;color:var(--graphite);line-height:1.45;margin-top:6px}

/* live interactive example */
.demo{border:1px solid var(--ink);background:var(--white);margin-bottom:var(--s6)}
.demo-head{display:flex;gap:var(--s4);align-items:flex-start;justify-content:space-between;
  padding:var(--s5);border-bottom:1px solid var(--rule)}
.demo-head h3{font-size:21px}
.demo-head p{margin-top:var(--s2);font-size:14px;color:var(--graphite);max-width:60ch;line-height:1.5}
.demo-tag{font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;background:var(--ink);color:var(--paper);padding:5px 10px;white-space:nowrap}
.demo-body{display:grid;grid-template-columns:1fr 1fr}
.demo-inputs{padding:var(--s5);display:grid;gap:var(--s4);border-right:1px solid var(--rule)}
.demo-inputs label{display:grid;grid-template-columns:1fr auto 108px;align-items:center;gap:var(--s3);
  font-size:14px;font-weight:500}
.demo-inputs .u{font-family:var(--mono);font-size:11px;color:var(--mute)}
.demo-inputs input{border:1px solid var(--rule-2);background:var(--paper);padding:9px var(--s3);
  font-family:var(--mono);font-size:14px;color:var(--ink);width:100%}
.demo-inputs input:focus{outline:2px solid var(--ink);outline-offset:-2px}
.demo-out{padding:var(--s5);background:var(--ink);color:var(--paper);display:flex;flex-direction:column;gap:var(--s3)}
.oline{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3);
  font-size:13.5px;color:#A9B0B6;padding-bottom:var(--s3);border-bottom:1px solid #262B32}
.oline b{font-family:var(--mono);font-size:16px;color:#FFFFFF;font-variant-numeric:tabular-nums}
.obig{margin-top:var(--s2)}
.obig span{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:#8B939C}
.obig b{display:block;font-family:var(--display);font-weight:800;font-size:44px;color:#FFFFFF;
  line-height:1.05;margin-top:4px;letter-spacing:-.04em}
.onote{margin-top:auto;font-family:var(--mono);font-size:11px;color:#8B939C;line-height:1.55}

footer{border-top:1px solid var(--rule);padding-block:var(--s6) var(--s7);background:var(--paper);color:var(--ink)}
.foot{display:flex;flex-wrap:wrap;gap:var(--s5);justify-content:space-between;align-items:flex-start}
.foot .disc{font-size:12.5px;color:var(--mute);max-width:54ch;margin-top:var(--s3);line-height:1.5}
.foot nav{display:flex;flex-wrap:wrap;gap:var(--s5);font-family:var(--mono);font-size:11px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--graphite)}
.stamp{font-family:var(--mono);font-size:10.5px;color:var(--mute);text-align:center;
  padding-block:var(--s5) var(--s6);background:var(--paper)}

@media (max-width:1040px){
  .g3{grid-template-columns:repeat(2,1fr)}
  .artlayout,.toolhero,.toolgrid2{grid-template-columns:1fr}
  .side.sticky{position:static}
  .artside{position:static;max-height:none;overflow:visible}
  .adside .box{min-height:120px}
  .relgrid{grid-template-columns:repeat(2,1fr)}
  .mt-body{grid-template-columns:repeat(3,1fr)}
  .track{grid-template-columns:1fr}
  .spine{position:static;margin-bottom:var(--s5)}
  .spine ol{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s3)}
  .spine li{padding-bottom:var(--s3)}
  .outcomes ul{grid-template-columns:1fr}
}
/* The mockup was desktop-only and simply hid .nav below 680px. On the real
   site that would leave a phone with no navigation at all, so the bar collapses
   into a toggle instead. The button is hidden above 680px, where .nav shows. */
@media (max-width:760px){
  :root{--s8:52px;--s7:34px}
  .g3{grid-template-columns:1fr}
  .relgrid{grid-template-columns:1fr}
  .mt-body{grid-template-columns:1fr}
  .formats{grid-template-columns:1fr}
  .demo-body{grid-template-columns:1fr}
  .demo-inputs{border-right:0;border-bottom:1px solid var(--rule)}
  .demo-inputs label{grid-template-columns:1fr auto 92px}
  .prose h2,.faq h2,.related h2{font-size:22px}
  .authorbox{flex-direction:column}
  .dlrow{flex-direction:column;align-items:flex-start}
  .spine ol{grid-template-columns:1fr}
  .lessons li{grid-template-columns:24px 1fr auto;row-gap:var(--s2)}
  .lessons .kind{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
/* tool figures */
.tfig__btns{position:absolute;top:12px;left:12px;display:flex;gap:5px;align-items:center}
.tfig__btns .b{font:600 9.5px/1 var(--mono,ui-monospace,monospace);padding:5px 8px;
  border-radius:3px;color:#EDEFF2}
.tfig__btns .b--sl{background:#B42A2A}
.tfig__btns .b--tp{background:#248C3F}
.tfig__btns .b--x{background:#4A4A4A}
.tfig__btns .b--credit{background:transparent;color:#7A7F87;font-weight:400}
.tfig--csv{padding:14px}
.csv{font:400 11px/1.75 ui-monospace,SFMono-Regular,Menlo,monospace;overflow-x:auto}
.csv__h{color:#6C727C;border-bottom:1px solid #242932;padding-bottom:5px;margin-bottom:5px;
  white-space:nowrap}
.csv__r span{color:#9BA1AC;white-space:nowrap}
.csv__n{margin-top:8px;color:#4F555E;font-size:10px}

/* ---- browser tools (calculators) ---- */
.plate--live{background:#12161B;border:1px solid #242932;border-radius:10px;padding:0;overflow:hidden}
.calc{font:400 14px/1.5 ui-sans-serif,system-ui,sans-serif;color:#E8EAEE}
.calc__hd{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:13px 16px;border-bottom:1px solid #242932;background:#171D24}
.calc__t{font:600 11px/1 ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;color:#9BA1AC}
.calc__preset,.fld__unit{background:#0F1319;color:#E8EAEE;border:1px solid #2A303A;
  border-radius:5px;padding:6px 8px;font:500 12px/1 ui-monospace,monospace}
.calc__grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:16px}
.fld{display:block}
.fld>span{display:block;font:500 10.5px/1 ui-monospace,monospace;letter-spacing:.07em;
  text-transform:uppercase;color:#7A818C;margin-bottom:6px}
.fld>span b{color:#9BA1AC;font-weight:600}
.fld__in{display:flex;align-items:center;background:#0F1319;border:1px solid #2A303A;border-radius:6px}
.fld__in i{font-style:normal;color:#6C727C;font:500 13px/1 ui-monospace,monospace;padding:0 9px}
.fld__in input{flex:1;min-width:0;background:none;border:0;color:#E8EAEE;
  font:600 15px/1 ui-monospace,monospace;padding:11px 4px;outline:none}
.fld__in input:focus{color:#FFF}
.fld__in .fld__unit{border:0;border-left:1px solid #2A303A;border-radius:0 6px 6px 0}
.calc__out{border-top:1px solid #242932;padding:16px;background:#0F1319}
.calc__big{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin-bottom:12px}
.calc__lbl{font:500 10.5px/1 ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase;color:#7A818C}
.calc__big b{font:700 30px/1 ui-monospace,monospace;color:#5FD08A;letter-spacing:-.02em}
.calc__unit{font:500 13px/1 ui-monospace,monospace;color:#9BA1AC}
.calc__rows{display:grid;gap:5px}
.calc__rows div{display:flex;justify-content:space-between;gap:12px;
  font:400 12.5px/1.5 ui-monospace,monospace;color:#7A818C}
.calc__rows b{color:#E8EAEE;font-weight:600}
.calc__note{margin:12px 0 0;font-size:12.5px;line-height:1.55;color:#8B919B}
.calc__note--warn{color:#FF8A8F}
.spark{height:52px;margin-top:14px}
.spark svg{width:100%;height:100%;display:block}
@media (max-width:560px){.calc__grid{grid-template-columns:1fr}}

/* Markdown body inside a tool page: its h2s come from the content file, so
   they need the same spacing as the template's own .th2 headings. */
.toolgrid2 h2{font-size:24px;margin:var(--s6) 0 var(--s4);line-height:1.25}
.toolgrid2 h2:first-child{margin-top:0}
.toolgrid2 p{margin:0 0 var(--s3)}
.toolgrid2 pre,.toolgrid2 code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

/* ---- email gate on downloads ---- */
.gate{max-width:440px}
.gform{display:flex;gap:8px;align-items:stretch}
.gate__in{flex:1;min-width:0;background:#0F1319;border:1px solid #2A303A;border-radius:6px;
  color:#E8EAEE;font:400 14px/1 ui-sans-serif,system-ui,sans-serif;padding:13px 12px;outline:none}
.gate__in:focus{border-color:#4C82F7}
.gate__in::placeholder{color:#5C6874}
.gform .btn{white-space:nowrap}
.gform .btn:disabled{opacity:.7;cursor:default}
.gnote{margin:9px 0 0;font-size:12px;color:#7A818C}
.gnote a{color:#9BA1AC;text-decoration:underline}
.gerr{margin:8px 0 0;font-size:12.5px;color:#9BA1AC}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* A browser tool is the product, not an illustration: give it the full
   column and real presence rather than the hero's side slot. */
.livetool{max-width:720px;margin:var(--s6) 0 var(--s7);background:#12161B;
  border:1px solid #242932;border-radius:12px;overflow:hidden}
.livetool .calc__hd{padding:15px 20px}
.livetool .calc__grid{padding:20px;gap:14px}
.livetool .calc__out{padding:20px}
.livetool .calc__big b{font-size:38px}
.toolad{margin:var(--s6) 0;padding-top:var(--s4);border-top:1px solid var(--rule-2,#242932)}
@media (max-width:680px){.livetool .calc__big b{font-size:30px}}


/* ================= article body components =================
   The research markdown embeds these (pt-tldr, pt-callout, pt-flow,
   pt-timeline, pt-bars, pt-stats, pt-steps, pt-quote, pt-cta ...).
   Ported from blog.css and mapped onto the redesign tokens; radii
   and shadows dropped because this system is flat. */
/* --- Key takeaways / TL;DR panel --- */
.pt-tldr{margin:1.6em 0;padding:15px 18px;border:1px solid var(--rule-2);border-left:3px solid var(--ink);background:rgba(127,127,127,.03)}
.pt-tldr-h{font-family:var(--mono);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--ink);margin:0 0 8px}
.pt-tldr ul{margin:0;padding-left:1.1em}
.pt-tldr li{margin:.3em 0}
/* --- Callouts (info / key / warn) --- */
.pt-callout{margin:1.4em 0;padding:13px 16px;border:1px solid var(--rule-2);border-left:3px solid var(--text-faint);font-size:14.5px;line-height:1.65}
.pt-callout .pt-callout-h{display:block;font-weight:700;margin-bottom:3px}
.pt-callout.info{border-left-color:var(--ink)}
.pt-callout.key{border-left-color:#1F5FE0}
.pt-callout.warn{border-left-color:#E2511C}
/* --- Pull quote --- */
.pt-quote{margin:1.6em 0;padding:4px 0 4px 20px;border-left:3px solid var(--ink);font-family:var(--display);font-size:19px;font-weight:500;font-style:italic;line-height:1.5;color:var(--ink)}
.pt-quote cite{display:block;margin-top:8px;font-size:13px;font-style:normal;font-weight:600;color:var(--mute)}
.pt-quote cite::before{content:"— "}
/* --- Stat cards --- */
.pt-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1px;background:var(--rule-2);border:1px solid var(--rule-2);margin:1.6em 0}
.pt-stat{background:var(--white);padding:15px 16px}
.pt-stat-num{font-family:var(--mono);font-size:25px;font-weight:600;letter-spacing:-.02em;line-height:1}
.pt-stat-num.pos{color:#1F5FE0}
.pt-stat-num.neg{color:#E2511C}
.pt-stat-lbl{font-size:12px;color:var(--mute);margin-top:6px;line-height:1.4}
/* --- Numbered steps --- */
.pt-steps{list-style:none;counter-reset:ptstep;padding:0;margin:1.6em 0}
.pt-steps>li{position:relative;counter-increment:ptstep;padding:0 0 16px 46px;margin:0}
.pt-steps>li::before{content:counter(ptstep);position:absolute;left:0;top:0;width:30px;height:30px;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-weight:600;font-size:13px;color:#fff;background:var(--ink)}
.pt-steps>li:not(:last-child)::after{content:"";position:absolute;left:14px;top:34px;bottom:2px;width:1px;background:var(--border-3)}
.pt-step-h{font-weight:700;display:block;margin-bottom:2px}
/* --- Cause -> effect flow --- */
.pt-flow{display:flex;flex-wrap:wrap;align-items:stretch;margin:1.6em 0}
.pt-flow-step{flex:1 1 120px;min-width:108px;border:1px solid var(--rule-2);padding:12px;font-size:13px;line-height:1.45;background:var(--white)}
.pt-flow-step .h{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-faint);display:block;margin-bottom:4px}
.pt-flow-arrow{display:flex;align-items:center;justify-content:center;color:var(--ink);font-size:18px;padding:0 7px;flex:0 0 auto}
/* mobile: the flow stacks; the blog.css port had flattened this media query
   into an unconditional rule (every arrow rotated at every width) and the
   row layout overflowed the phone viewport */
@media (max-width:760px){
  .pt-flow{flex-direction:column;align-items:stretch}
  .pt-flow-step{min-width:0}
  .pt-flow-arrow{transform:rotate(90deg);padding:5px 0;align-self:center}
}
/* --- Timeline (case studies) --- */
.pt-timeline{position:relative;margin:1.6em 0;padding-left:8px;border-left:2px solid var(--border-3)}
.pt-tl{position:relative;padding:0 0 18px 18px}
.pt-tl::before{content:"";position:absolute;left:-7px;top:4px;width:10px;height:10px;background:var(--ink);}
.pt-tl-date{font-family:var(--mono);font-size:11px;font-weight:600;color:var(--ink)}
.pt-tl-h{font-weight:700;margin:1px 0 2px}
/* --- Figure wrapper + auto-numbered caption --- */
.pt-fig{margin:1.6em 0;border:1px solid var(--rule-2);background:var(--white);padding:16px}
.pt-fig svg{display:block;width:100%;height:auto}
.pt-fig-cap{font-size:12px;color:var(--text-faint);margin-top:10px;font-family:var(--mono)}
.pt-fig-cap::before{counter-increment:ptfig;content:"Fig. " counter(ptfig) " — "}
/* --- CSS bar chart (animated grow) --- */
.pt-bars{margin:1.6em 0}
.pt-bar-row{display:grid;grid-template-columns:96px 1fr 54px;align-items:center;gap:10px;margin:7px 0;font-size:13px}
.pt-bar-lbl{color:var(--mute)}
.pt-bar-track{position:relative;height:18px;background:rgba(127,127,127,.12)}
.pt-bar-fill{position:absolute;left:0;top:0;bottom:0;width:100%;background:var(--ink);transform-origin:left;animation:ptgrow .9s ease-out both}
.pt-bar-fill.pos{background:#1F5FE0}
.pt-bar-fill.neg{background:#E2511C}
.pt-bar-val{font-family:var(--mono);text-align:right;color:var(--mute)}
/* --- SVG line-draw helper (add pathLength="1" to the animated path) --- */
.pt-draw{stroke-dasharray:1;stroke-dashoffset:1;animation:ptdraw 1.7s ease-out forwards}
/* SVG text/stroke that should follow the theme */
.pt-fig .ax{stroke:var(--border-3)}
.pt-fig .gl{stroke:var(--rule-2)}
.pt-fig .tx{fill:var(--text-faint);font-family:var(--mono);font-size:10px}
/* --- FAQ (rendered from front-matter `faq:`) --- */
.pt-faq{margin:2.2em 0 0;border-top:1px solid var(--rule-2);padding-top:1.3em}
.pt-faq-h{font-family:var(--display);font-size:20px;font-weight:800;margin:0 0 .6em}
.pt-faq details{border:1px solid var(--rule-2);margin:8px 0}
.pt-faq summary{cursor:pointer;padding:12px 14px;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:10px}
.pt-faq summary::-webkit-details-marker{display:none}
.pt-faq summary::after{content:"+";color:var(--ink);font-family:var(--mono);font-weight:700}
.pt-faq details[open] summary::after{content:"\2013"}
.pt-faq details>div{padding:0 14px 12px;color:var(--mute);line-height:1.65}
/* --- "See it live on the meter" CTA --- */
.pt-cta{margin:2em 0;padding:17px 20px;border:1px solid var(--ink);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.pt-cta-txt{font-weight:600}
.pt-cta a{display:inline-block;background:var(--ink);color:#fff;padding:10px 18px;text-decoration:none;font-weight:600;white-space:nowrap}
.pt-cta a:hover{filter:brightness(1.06)}
/* --- Declarative charts (blog.js renders into figure.pt-chart) --- */
figure.pt-chart{margin:1.6em 0;border:1px solid var(--rule-2);background:var(--white);padding:16px}
.pt-chart-svg svg{display:block;width:100%;height:auto}
.pt-chart-legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:12px}
.pt-chart-key{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--mute);font-family:var(--mono)}
.pt-chart-dot{width:10px;height:10px;display:inline-block;flex-shrink:0}
figure.pt-chart figcaption{font-size:12px;color:var(--text-faint);margin-top:12px;font-family:var(--mono);line-height:1.5}
.pt-cdraw{stroke-dasharray:1;stroke-dashoffset:1;animation:ptdraw 1.6s ease-out forwards}
.pt-draw,.pt-cdraw{animation:none;stroke-dashoffset:0}

/* ---- vars the ported article components still reference ---- */
:root{--border-3:#B9BFB9;--text-faint:#8A9088}

/* ---- shared partial support (ads + cookie banner) on redesign pages ----
   Same behaviour as the dashboard rules: slots stay collapsed until AdSense
   actually fills them, so review-period pages stay clean. */
.ad-slot{position:relative;width:100%;min-height:50px;margin:18px auto;text-align:center}
.ad-slot .adsbygoogle{display:block}
.ad-slot-in_article{min-height:100px}
.ad-slot-sidebar{min-height:250px}
.ad-slot .ad-disclosure{display:none;margin:0 0 4px;font-family:var(--mono);font-size:9px;
  text-transform:uppercase;letter-spacing:.18em;color:var(--mute)}
.ad-slot:has(ins[data-ad-status="filled"]) .ad-disclosure{display:block}
ins.adsbygoogle[data-ad-status="unfilled"]{display:none!important}
.ad-slot:has(ins[data-ad-status="unfilled"]){min-height:0!important;margin:0!important}
.adinline .l,.adside .l{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--mute);margin-bottom:6px}
.adinline{margin:var(--s6) 0}

.cookie-consent{position:fixed;bottom:16px;left:16px;right:16px;max-width:720px;margin:0 auto;
  background:var(--ink);color:var(--paper);padding:14px 20px;display:flex;flex-wrap:wrap;
  gap:12px;align-items:center;z-index:60;font-size:13.5px}
.cookie-consent[hidden]{display:none!important}
.cookie-consent strong{color:#fff}
.cookie-consent a{color:#fff;text-decoration:underline}
.cookie-consent-text{flex:1 1 280px;line-height:1.5}
.cookie-consent-actions{flex-shrink:0}
.cookie-consent .btn{border-color:var(--paper);color:var(--paper)}
.cookie-consent .btn:hover{background:var(--paper);color:var(--ink)}
.btn-sm{padding:6px 12px;font-size:12.5px}

/* ---- .tfig: the tool-figure component the FIGURES generators emit ----
   The core rules never made it out of the mockup; only the button add-ons
   did, which left the hero and tool figures structurally unstyled. Same
   visual language as .plate: dark panel, mono labels, stat strip. */
.tfig{position:relative;background:#12161B}
.tfig__svg{display:block;width:100%;height:auto;aspect-ratio:420/236}
.plate .tfig{border:0}
.tfig__stats{display:flex;gap:1px;background:#2A313A;border-top:1px solid #2A313A}
.tfig__stats>div{flex:1;background:#171C22;padding:10px 14px;min-width:0}
.tfig__stats span{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;color:#7E8895;white-space:nowrap}
.tfig__stats b{display:block;font-family:var(--mono);font-size:14px;color:#E8EDF2;
  font-weight:600;margin-top:3px;font-variant-numeric:tabular-nums}
.tfig__stats b.g{color:#5FD07A}
.tfig--csv .tfig__svg{height:auto}
@media (max-width:680px){.tfig__stats{flex-wrap:wrap}
  .tfig__stats>div{flex:1 1 45%}}

/* full-width ad row inside a card grid */
.gridad{grid-column:1/-1;margin:var(--s2) 0}
.gridad .l{display:block;text-align:center;font-family:var(--mono);font-size:9px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--mute);margin-bottom:4px}

/* anchor jumps must clear the sticky header */
[id]{scroll-margin-top:70px}

/* tool hero collapses on small screens; the plate goes under the copy */
/* minmax(0,1fr) lets the single column shrink to the container; plain 1fr
   keeps its content's min-width and overflowed the page by the gate's width */
@media (max-width:860px){.toolhero{grid-template-columns:minmax(0,1fr);gap:var(--s5)}}
@media (max-width:760px){
  /* the email gate: input and button stack instead of forcing a min row width */
  .gate{max-width:100%}
  .gform{flex-wrap:wrap}
  .gform .gate__in{flex:1 1 100%}
  .gform .btn{flex:1 1 100%}
}

/* ---- header: dropdowns + right-side actions ---- */
.navgrp{position:relative;display:flex}
.navgrp>.drop{display:none;position:absolute;top:100%;left:0;min-width:216px;z-index:30;
  background:var(--paper);border:1px solid var(--ink);padding:6px 0}
/* hover/focus opening is a POINTER behaviour. On touch, :hover sticks after
   a tap and :focus-within holds while the chevron is focused, which forced
   the mobile submenu open no matter what the accordion toggled — the
   "accordion never closes" bug. Desktop only, by media query. */
@media (min-width:761px){
  .navgrp:hover>.drop,.navgrp:focus-within>.drop{display:block}
}
.drop a{display:block;padding:9px 16px;font-size:13px;color:var(--graphite);white-space:nowrap}
.drop a:hover{background:var(--ink);color:var(--paper)}
.drop a:first-child{font-weight:600;color:var(--ink)}
.drop a:first-child:hover{color:var(--paper)}
.navgrp__x{display:none}   /* chevron is the mobile accordion toggle only */
/* no border box -- just the glyph, which reads cleaner next to Subscribe */
.iglink{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  color:var(--graphite)}
.iglink:hover{color:var(--ink);background:transparent}
.subbtn{white-space:nowrap}
/* the mobile nav accordion is defined in full in the max-width:760 block
   further down; there is intentionally no duplicate here */

/* an ad row whose unit never filled should vanish, label and all */
.gridad:has(ins[data-ad-status="unfilled"]){display:none!important}

/* Adsterra iframe units come in fixed sizes; keep them centered and clipped
   never wider than the column */
.adx{display:flex;justify-content:center;max-width:100%;overflow:hidden}

/* Ad labels stay hidden until the unit reports real content, so a slot that
   never fills leaves nothing behind -- no gap, no orphan "Advertisement". */
.gridad .l,.adinline .l,.adside .l,.darkad .l,.ad .l{display:none}
.gridad:has(.adx--live) .l,.adinline:has(.adx--live) .l,
.adside:has(.adx--live) .l,.darkad:has(.adx--live) .l,
.ad:has(.adx--live) .l{display:block}
.gridad,.adinline,.darkad,.ad{min-height:0}

/* ==========================================================================
   MOBILE: swipeable bands + a menu that behaves like a menu
   ========================================================================== */
@media (max-width: 760px) {

  /* --- Homepage/meter bands become side-swipe carousels ---
     A stack of six full-width cards is a very long scroll on a phone. These
     become horizontal scroll-snap rails that peek the next card so the swipe
     is discoverable. Deliberately NOT applied to the analysis archive: 119
     cards behind a swipe is worse than a list. */
  .band .g3,
  .band .g4,
  .band .cbgrid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 78%;
    grid-template-columns: none;
    gap: var(--s4);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* break the rail out of .wrap so cards can start at the page edge */
    margin-inline: calc(var(--s5) * -1);
    padding-inline: var(--s5);
    padding-bottom: var(--s3);
  }
  .band .g3::-webkit-scrollbar,
  .band .g4::-webkit-scrollbar,
  .band .cbgrid::-webkit-scrollbar { display: none; }

  .band .g3 > *,
  .band .g4 > *,
  .band .cbgrid > * { scroll-snap-align: start; }

  /* an ad row inside a rail would become a card; keep it out of the flow */
  .band .g3 > .gridad { display: none; }

  /* the swipe needs to be announced, not discovered by accident */
  /* the hint belongs to bands whose PRIMARY content is a swipe rail; on the
     meter band the chart is the content and the card rail is far below, so a
     "swipe" promise at the top reads as a bug */
  #meter .shead::after, #subscribe .shead::after { content: none !important; }
  .band .shead::after {
    content: "Swipe for more \2192";
    display: block;
    margin-top: var(--s3);
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--mute);
  }
  .band.dark .shead::after { color: #7E8895; }

}

@media (min-width: 761px) { .navactions { display: none; } }

/* --- hamburger: a 44px touch target with a real glyph, not the word "Menu" --- */
.navtoggle{display:none;padding:0;width:44px;height:44px;align-items:center;justify-content:center}
.navtoggle__bars{display:grid;gap:4px;width:17px}
.navtoggle__bars i{display:block;height:2px;background:currentColor;transition:transform .18s,opacity .18s}
[aria-expanded="true"] .navtoggle__bars i:nth-child(1){transform:translateY(6px) rotate(45deg)}
[aria-expanded="true"] .navtoggle__bars i:nth-child(2){opacity:0}
[aria-expanded="true"] .navtoggle__bars i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media (max-width:760px){
  .navtoggle{display:inline-flex}
  .top-end .iglink,.top-end .subbtn{display:none}
  /* thumb-sized targets throughout the header */
  .top-in{height:56px}
}

/* a sidebar ad box with no live ad must leave no empty frame */
.side:has(.ad-slot):not(:has(.adx--live)){display:none}

/* =========================================================================
   MOBILE NAVIGATION — single source of truth, rebuilt from the ground up.
   Earlier passes scattered rules over four media blocks that fought each
   other; every phone-menu rule now lives here and only here.
   Markup (in _top.html):
     .nav              full-screen sheet under the 56px bar
       > a             top-level link row
       > .navgrp       section = label link + .navgrp__x chevron + .drop
       > .navactions   Subscribe + Instagram, pinned to the sheet's bottom
   ========================================================================= */
@media (max-width:760px){
  html.nav-open, html.nav-open body{overflow:hidden}

  /* overflow:hidden detaches position:sticky on Android Chrome, which sent
     the header (and its close button) back to the top of the DOCUMENT --
     off-screen whenever the page was scrolled, leaving an unclosable sheet
     with content bleeding through the 56px gap. While the menu is open the
     header is pinned to the viewport instead, above the sheet. */
  html.nav-open .top{position:fixed;top:0;left:0;right:0;z-index:75}

  .nav{
    display:none;
    /* above the cookie banner (z 60): while the menu is open it is the
       topmost surface; the banner returns when the menu closes */
    position:fixed; top:56px; left:0; right:0; bottom:0; z-index:70;
    flex-direction:column; gap:0;
    background:var(--paper);
    border-top:1px solid var(--rule);
    padding:2px var(--s5) calc(var(--s5) + env(safe-area-inset-bottom,0px));
    overflow-y:auto; overscroll-behavior:contain;
  }
  .nav[data-open]{display:flex}

  /* top-level rows: one size, one rhythm */
  .nav > a,
  .navgrp > a{
    display:block;
    font-family:var(--display);
    font-size:21px; font-weight:700; letter-spacing:-.02em; line-height:1;
    color:var(--ink);
    padding:19px 0;
    border-bottom:0;
  }
  .nav > a, .navgrp{border-bottom:1px solid var(--rule)}
  .nav a:hover{background:transparent;color:var(--ink)}
  /* the desktop .nav button:hover grey wash lingers after a touch tap on the
     chevron and reads as a glitch — no fill on mobile */
  .nav .navgrp__x:hover,.nav .navgrp__x:active{background:transparent}

  /* current page: a quiet diamond marker — the desktop ink pill would render
     a full-width black bar at this size */
  .nav > a[aria-current="page"],
  .navgrp > a[aria-current="page"]{background:transparent;color:var(--ink)}
  .nav > a[aria-current="page"]::after,
  .navgrp > a[aria-current="page"]::after{
    content:""; display:inline-block; width:7px; height:7px; margin-left:12px;
    background:var(--ink); transform:rotate(45deg) translateY(-1px);
  }

  /* sections: the label navigates, the chevron expands */
  .navgrp{display:block; position:relative}
  .navgrp > a{padding-right:56px}
  .navgrp__x{
    display:flex; align-items:center; justify-content:center;
    position:absolute; top:5px; right:-12px;
    width:50px; height:50px; padding:0;
    background:transparent; border:0; cursor:pointer;
  }
  .navgrp__x span{
    width:10px; height:10px;
    border-right:2px solid var(--graphite); border-bottom:2px solid var(--graphite);
    transform:translateY(-3px) rotate(45deg);
    transition:transform .15s;
  }
  .navgrp[data-open] .navgrp__x span{transform:translateY(3px) rotate(-135deg)}

  /* sub-list: in flow, indented off a rule line, no per-row borders */
  .navgrp > .drop{
    display:none;
    position:static; min-width:0; border:0; background:transparent; padding:0;
  }
  .navgrp:hover > .drop,
  .navgrp:focus-within > .drop{display:none}
  .navgrp[data-open] > .drop,
  .navgrp[data-open]:hover > .drop,
  .navgrp[data-open]:focus-within > .drop{display:block; padding:0 0 16px}
  .navgrp > .drop a{
    display:block;
    padding:11px 0 11px 18px; margin-left:3px;
    border:0; border-left:2px solid var(--rule-2);
    font-family:var(--sans); font-size:15.5px; font-weight:500; line-height:1.35;
    color:var(--graphite);
  }
  .navgrp > .drop a:first-child{color:var(--ink); font-weight:600}
  .navgrp > .drop a:hover{background:transparent;color:var(--ink)}

  /* actions: pinned to the bottom of the sheet */
  .navactions{
    display:flex; gap:var(--s3); align-items:stretch;
    margin-top:auto; padding-top:var(--s5);
  }
  .navactions .btn{flex:1; text-align:center; padding:14px 0; font-size:14px}
  .navactions .iglink{
    display:inline-flex; flex:none; width:47px; height:47px;
    border:1px solid var(--ink); color:var(--ink);
  }
}

/* long inline code must wrap; block code scrolls in its own box — an
   unwrapped <code> line was pushing widget pages 136px past the viewport */
:not(pre)>code{white-space:normal;word-break:break-word}
pre{max-width:100%;overflow-x:auto}