/* Shared by blog.html and every post in blog/. The other marketing pages inline their CSS;
   the blog shares one sheet because it will grow to dozens of posts, and a style change should
   not mean editing thirty files. The tokens, nav, buttons, mobile menu and footer below are
   copied from pricing.html, so the blog looks like the rest of the site. Keep them in step. */
:root{
  --indigo:#444CE7; --indigo-dark:#3538CD; --indigo-fill:#EEF0FF; --indigo-border:#C7CCF6;
  --ink:#0C111D; --ink-2:#181D27;
  --text:#414651; --muted:#717680;
  --line:#E9EAEB; --line-2:#D5D7DA;
  --bg:#ffffff; --bg-soft:#FAFAFB;
  --navy:#0B1120;
  --shadow:0 1px 2px rgba(16,24,40,.04),0 12px 40px -12px rgba(16,24,40,.18);
  --display:'Inter',system-ui,-apple-system,sans-serif;
  --hero-font:'Schibsted Grotesk','Inter',system-ui,-apple-system,sans-serif;
  --body:'Inter',system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--body);color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;line-height:1.5}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
h1,h2,h3{font-family:var(--display);color:var(--ink);margin:0;letter-spacing:normal;line-height:1.05}
.wrap{max-width:1280px;margin:0 auto;padding:0 24px}

.ann{background:var(--ink);color:#fff;font-size:13px;text-align:center;padding:9px 16px}
.ann b{color:#C7CCF6;font-weight:600}
.ann a{color:#fff;text-decoration:underline;text-underline-offset:2px}

header.nav{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.86);backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid transparent;transition:border-color .18s ease}
header.nav.scrolled{border-bottom-color:var(--line)}
.nav-in{display:flex;align-items:center;gap:28px;height:66px}
.nav-in .brand{flex-shrink:0}
/* The CH/IQ lockup. Canonical source: brand/lockup.css, rules in brand/README.md. */
.brand{--chiq-m:22px;display:flex;align-items:center;gap:calc(var(--chiq-m)*.41);
  color:var(--ink);text-decoration:none;white-space:nowrap}
.chiq-mark{font-family:'Funnel Display',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:700;
  font-size:var(--chiq-m);letter-spacing:-.02em;line-height:1;color:#444CE7}
.chiq-rule{flex-shrink:0;width:1px;height:calc(var(--chiq-m)*.773);background:currentColor;opacity:.28}
.chiq-name{font-family:'Funnel Display',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:300;
  font-size:calc(var(--chiq-m)*.614);line-height:1.1}
.chiq-name b{font-weight:800}
nav.links{display:flex;align-items:center;gap:2px;margin-left:8px}
nav.links a{font-size:14px;font-weight:600;color:#1F2937;padding:8px 12px;border-radius:6px;white-space:nowrap}
nav.links a:hover{background:var(--bg-soft)}
/* "Free" beside the Weekly Bulletin link, on every page, so nobody has to open it to find out. */
.nav-free{display:inline-block;margin-left:6px;font-size:10.5px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;line-height:1.5;color:#067647;background:#ECFDF3;
  border:1px solid #ABEFC6;border-radius:100px;padding:0 7px;vertical-align:1px}
nav.links a.on{color:var(--indigo-dark);background:var(--indigo-fill)}
.nav-cta{margin-left:auto;display:flex;align-items:center;gap:8px}
.btn{font-family:var(--body);font-size:14.5px;font-weight:600;border-radius:12px;padding:10px 18px;cursor:pointer;border:1px solid transparent;display:inline-flex;align-items:center;gap:8px;transition:.15s}
.btn-ghost{background:#fff;color:#414651;border-color:var(--line-2)}
.btn-ghost:hover{background:var(--bg-soft)}
.btn-primary{background:var(--indigo);color:#fff}
.btn-primary:hover{background:var(--indigo-dark)}
.btn-lg{padding:13px 24px;font-size:15px;border-radius:12px}
.nav-cta .btn{font-size:14px;font-weight:500;padding:8px 12px;border-radius:12px;white-space:nowrap;gap:5px}
.nav-cta .btn-ghost{border-color:#E5E7EB;color:#414651}
.login{font-size:14px;font-weight:600;color:#1F2937;padding:8px 12px;border-radius:6px;white-space:nowrap}
.login:hover{background:var(--bg-soft)}

.nav-burger{display:none;margin-left:auto;margin-right:-10px;flex-shrink:0;
  width:52px;height:52px;padding:0;background:transparent;border:0;border-radius:12px;
  cursor:pointer;align-items:center;justify-content:center;
  -webkit-tap-highlight-color:transparent;transition:background .15s ease}
.nav-burger:hover{background:var(--bg-soft)}
.nav-burger:active{transform:scale(.96)}
.nav-burger:focus-visible{outline:2px solid var(--indigo);outline-offset:2px}
.burger-box{position:relative;display:block;width:24px;height:16px}
.burger-box i{position:absolute;left:0;width:100%;height:2px;border-radius:2px;background:var(--ink);
  transition:transform .26s cubic-bezier(.4,.01,.2,1),opacity .16s ease}
.burger-box i:nth-child(1){top:0}
.burger-box i:nth-child(2){top:7px}
.burger-box i:nth-child(3){top:14px}
.nav-burger[aria-expanded="true"] .burger-box i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-burger[aria-expanded="true"] .burger-box i:nth-child(2){opacity:0}
.nav-burger[aria-expanded="true"] .burger-box i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-menu{display:none}
@media (prefers-reduced-motion:reduce){
  .burger-box i,.mobile-menu,.mm-in>*{transition-duration:.01ms !important;transition-delay:0s !important}
  .nav-burger:active{transform:none}
}

/* Label above a heading: the slash from the CH/IQ lockup (same face, weight and indigo), then
   the words. Replaced the lilac pill on 2026-10-14. */
.eyebrow{display:inline-flex;align-items:center;gap:9px;color:var(--ink);font-weight:600;font-size:14px}
.eyebrow::before{content:"/";font-family:'Funnel Display',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:700;font-size:21px;line-height:1;color:#444CE7}

/* ── blog index ─────────────────────────────────────────────────────────── */
.ph{padding:64px 0 10px;text-align:center}
.ph h1{font-family:var(--hero-font);font-size:clamp(34px,4.4vw,52px);font-weight:600;letter-spacing:-.04em;margin:20px auto 0;max-width:18ch}
.ph p{font-size:18px;color:var(--text);margin:18px auto 0;max-width:58ch;line-height:1.6}
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:30px 0 0}
.chip{font:500 14px/1 var(--body);padding:9px 15px;border-radius:100px;background:#fff;border:1px solid var(--line-2);color:#1F2937;cursor:pointer;transition:.15s}
.chip:hover{background:var(--bg-soft)}
.chip.on{background:var(--ink);border-color:var(--ink);color:#fff}
.chip:focus-visible{outline:2px solid var(--indigo);outline-offset:2px}

.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;padding:36px 0 80px}
.post{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .18s ease,transform .18s ease}
.post:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.post[hidden]{display:none}
.post .pic{aspect-ratio:16/10;overflow:hidden;background:var(--bg-soft)}
.post .pic img{width:100%;height:100%;object-fit:cover}
.post .c{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.k{font:700 11.5px/1 var(--body);letter-spacing:.07em;text-transform:uppercase;color:var(--indigo-dark);margin-bottom:10px}
.post h2{font-family:var(--hero-font);font-size:20px;font-weight:600;line-height:1.28;letter-spacing:-.01em}
.post p{font-size:14.5px;line-height:1.55;margin:10px 0 16px}
.post .meta{font-size:13px;color:var(--muted);margin-top:auto}
.post.lead{grid-column:1/-1;flex-direction:row}
.post.lead .pic{flex:1.25;aspect-ratio:auto;min-height:340px}
.post.lead .c{flex:1;padding:36px 38px;justify-content:center}
.post.lead h2{font-size:clamp(24px,2.4vw,30px);line-height:1.2}
.post.lead p{font-size:16px;margin:14px 0 20px}
.post.lead .meta{margin-top:0}

/* ── a post ─────────────────────────────────────────────────────────────── */
.art-head{max-width:760px;margin:0 auto;padding:56px 0 0}
.crumb{font-size:14px;color:var(--muted);margin-bottom:22px}
.crumb a{color:var(--indigo-dark);font-weight:600}
.art-head h1{font-family:var(--hero-font);font-size:clamp(32px,4vw,46px);font-weight:600;letter-spacing:-.035em;line-height:1.1}
.art-head .lede{font-size:19px;line-height:1.6;color:var(--text);margin:20px 0 0}
.art-head .meta{font-size:14px;color:var(--muted);margin-top:18px}
.art-pic{max-width:1040px;margin:36px auto 0}
.art-pic img{width:100%;height:auto;border-radius:18px;aspect-ratio:16/9;object-fit:cover}
.art-body{max-width:680px;margin:0 auto;padding:44px 0 20px;font-size:17.5px;line-height:1.75;color:#2B303B}
.art-body p{margin:0 0 22px}
.art-body h2{font-family:var(--hero-font);font-size:25px;font-weight:600;letter-spacing:-.02em;line-height:1.25;margin:44px 0 14px}
.art-body ul{margin:0 0 22px;padding-left:22px}
.art-body li{margin-bottom:10px}
.art-body strong{color:var(--ink);font-weight:600}
.art-body a{color:var(--indigo-dark);text-decoration:underline;text-underline-offset:3px}

/* Figures and the simple bar charts inside posts. Plain HTML bars rather than a chart library:
   each chart has a handful of values, and this keeps every post a static page. */
/* Key figures in the D2 style (chosen 2026-10-14): each share large in the brand face, what it
   means beside it, and one indigo bar for the share, between a bold rule and a thin one. A count,
   such as the number of reports, is the lead line above them rather than a figure of its own.
   Every figure in a row stretches to the same height and its bar sits at the bottom, so the bars
   line up even when one figure has more words than another. */
.figs{margin:32px 0 34px}
.figs-lead{font-size:14.5px;color:var(--muted);margin:0 0 12px}
.figs-row{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:22px}
.fig{display:flex;flex-direction:column;border-top:2px solid var(--ink);border-bottom:1px solid var(--line-2);padding:16px 0}
.fig-top{display:flex;align-items:center;gap:14px;flex:1}
.fig-top b{font-family:'Funnel Display',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:700;font-size:40px;
  line-height:.9;color:var(--ink);letter-spacing:-.03em;font-variant-numeric:tabular-nums;white-space:nowrap}
.fig-top span{font-size:13.5px;font-weight:600;line-height:1.4;color:var(--ink)}
.fig-bar{display:flex;height:14px;border-radius:4px;overflow:hidden;background:#E3E5FB;margin-top:14px}
.fig-bar i{display:block;background:var(--indigo)}
/* Three to a row leaves too little width beside the number, so the words go underneath it. */
.figs-row:has(> .fig:nth-child(3)) .fig-top{flex-direction:column;align-items:flex-start;gap:8px}
.chart{border:1px solid var(--line);border-radius:16px;padding:22px 22px 18px;margin:30px 0 34px}
.chart h3{font:600 15.5px/1.35 var(--body);color:var(--ink);margin:0}
.chart .sub{font-size:13.5px;line-height:1.5;color:var(--muted);margin:4px 0 18px}
.bars{display:grid;gap:10px}
.bar{display:grid;grid-template-columns:minmax(120px,38%) 1fr 52px;align-items:center;gap:12px;font-size:14px;line-height:1.3}
.bar .l{color:var(--text)}
.bar .t{height:14px;background:var(--bg-soft);border-radius:4px;overflow:hidden}
.bar .t i{display:block;height:100%;background:var(--indigo-border);border-radius:4px}
.bar.hi .t i{background:var(--indigo)}
.bar .v{text-align:right;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.chart .note{font-size:12.5px;color:var(--muted);margin:14px 0 0}
.art-body blockquote{margin:0 0 22px;padding:4px 0 4px 20px;border-left:3px solid var(--indigo);color:var(--ink);font-style:italic}
.method{font-size:14.5px;line-height:1.65;color:var(--muted);border-top:1px solid var(--line);padding-top:22px;margin-top:40px}
.method strong{color:var(--text)}

.more{padding:60px 0 10px}
.more h2{font-family:var(--hero-font);font-size:26px;font-weight:600;letter-spacing:-.02em;margin-bottom:6px}
.more .posts{padding:24px 0 70px}

.cta{background:var(--navy);border-radius:24px;padding:56px 40px;text-align:center;margin:0 0 84px;position:relative;overflow:hidden}
.cta::before{content:"";position:absolute;inset:0;background:radial-gradient(50% 80% at 50% 0%,rgba(122,90,248,.35),transparent 60%);pointer-events:none}
.cta h2{color:#fff;font-size:clamp(24px,2.8vw,32px);font-weight:700;position:relative}
.cta p{color:#98A2B3;font-size:16.5px;margin:14px auto 26px;max-width:540px;position:relative;line-height:1.6}
.cta .btn{position:relative}

footer{border-top:1px solid var(--line);padding:34px 0;color:var(--muted);font-size:13.5px}
.foot-in{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.foot-links{display:flex;gap:22px;flex-wrap:wrap}
.foot-links a:hover{color:var(--ink)}

/* ── the subscriber half ───────────────────────────────────────────────────
   The page carries only the first half of each post. The teaser is the opening of the second
   half, faded out, so the reader can see there is more; gate.js swaps it for the full text that
   the app's API returns once they have joined the Briefing. */
.teaser{max-height:210px;overflow:hidden;
  -webkit-mask-image:linear-gradient(#000 0%,transparent 95%);mask-image:linear-gradient(#000 0%,transparent 95%)}
.gate{position:relative;border:1px solid var(--indigo-border);border-radius:20px;padding:30px 30px 26px;margin:6px 0 34px;
  background:linear-gradient(180deg,var(--indigo-fill),#fff 42%);box-shadow:var(--shadow)}
.gate[hidden],.result[hidden]{display:none}
.gate h3{font:600 26px/1.2 var(--hero-font);letter-spacing:-.02em;color:var(--ink);margin:14px 0 8px}
.art-body .gate-lede{font-size:16px;line-height:1.6;color:var(--text);margin:0 0 20px}
.gate.loading-in{opacity:.6;pointer-events:none}
.ghost{position:relative;border:1px solid var(--line);border-radius:14px;background:#fff;padding:6px 16px;margin-bottom:22px}
.gate.member .ghost{display:none}
.g-row{display:grid;grid-template-columns:96px 1fr auto;gap:12px;align-items:center;padding:11px 0;border-bottom:1px solid var(--line);font-size:14.5px;filter:blur(3.5px);user-select:none}
.g-row:last-of-type{border-bottom:0}
.g-cover{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.g-cover span{background:#fff;border:1px solid var(--line-2);border-radius:100px;padding:8px 15px;font-size:13.5px;font-weight:600;color:var(--ink);box-shadow:0 4px 14px -6px rgba(16,24,40,.25)}
.g-pill,.r-pill{display:inline-block;font:700 11px/1 var(--body);letter-spacing:.05em;text-transform:uppercase;padding:6px 9px;border-radius:100px;text-align:center;white-space:nowrap}
.bad{background:#FEF0C7;color:#93370D}
.ok{background:#DCFAE6;color:#067647}
.mid{background:var(--indigo-fill);color:var(--indigo-dark)}
.na{background:#F2F4F7;color:#344054}
.g-v,.r-v{font-size:13px;color:var(--muted);text-align:right}
.field{margin-bottom:16px}
.field[hidden]{display:none}
.field label{display:block;font-size:14px;font-weight:600;color:var(--ink);margin-bottom:7px}
.field input{width:100%;font:16px var(--body);padding:12px 14px;border:1px solid var(--line-2);border-radius:12px;background:#fff;color:var(--ink)}
.field input:focus{outline:none;border-color:var(--indigo);box-shadow:0 0 0 4px rgba(68,76,231,.12)}
.field input:disabled{background:var(--bg-soft);color:var(--muted)}
.combo{position:relative}
#homeList{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:5;list-style:none;margin:0;padding:6px;background:#fff;border:1px solid var(--line-2);border-radius:12px;box-shadow:var(--shadow);max-height:320px;overflow:auto}
#homeList li{padding:10px 12px;border-radius:8px;cursor:pointer;font-size:15px;color:var(--ink);line-height:1.35}
#homeList li small{display:block;color:var(--muted);font-size:13px;margin-top:2px}
#homeList li[aria-selected="true"],#homeList li[data-i]:hover{background:var(--indigo-fill)}
#homeList li.note{cursor:default;color:var(--muted);font-size:14px}
.skip{background:none;border:0;padding:0;margin-top:8px;font:500 13.5px var(--body);color:var(--indigo-dark);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.skip[hidden]{display:none}
.err{font-size:14px;color:#B42318;margin:-4px 0 10px}
.err:empty{display:none}
.gate .go{width:100%;justify-content:center}
.gate .go.loading{opacity:.7;cursor:progress}
.art-body .fine{font-size:13px;color:var(--muted);text-align:center;margin:12px 0 0}
.fine[hidden]{display:none}

.result{border:1px solid var(--line);border-radius:20px;padding:26px 26px 22px;margin:6px 0 34px;background:#fff;box-shadow:var(--shadow);
  animation:rise .5s cubic-bezier(.2,.7,.2,1)}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.r-head{display:flex;gap:16px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;margin-bottom:6px}
.result h3{font:600 22px/1.25 var(--hero-font);color:var(--ink);letter-spacing:-.01em;margin:10px 0 4px}
.r-meta{font-size:14px;color:var(--muted);line-height:1.5}
.grade{font:600 13px/1 var(--body);padding:8px 12px;border-radius:100px;background:var(--indigo-fill);color:var(--indigo-dark);border:1px solid var(--indigo-border);white-space:nowrap}
.art-body .r-sum{font-size:16px;line-height:1.6;color:var(--text);margin:14px 0 16px}
.r-sum b{color:var(--ink)}
.r-concern{background:var(--bg-soft);border:1px solid var(--line);border-radius:12px;padding:13px 15px;font-size:15px;line-height:1.55;color:var(--ink);margin:0 0 16px}
.r-concern span{display:block;font:700 11.5px/1.3 var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.r-list{border-top:1px solid var(--line)}
.r-row{display:grid;grid-template-columns:104px 1fr auto;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line);font-size:15px;line-height:1.4;
  opacity:0;animation:rise .4s ease forwards}
.r-l{color:var(--ink);font-weight:500}
.r-v{max-width:30ch}
.r-foot{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:space-between;margin-top:18px}
.r-again{background:none;border:0;padding:0;font:600 14px var(--body);color:var(--indigo-dark);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.art-body .result a.btn{color:#fff;text-decoration:none}
@media (prefers-reduced-motion:reduce){.result,.r-row{animation:none;opacity:1}}
@media (max-width:560px){
  .gate,.result{padding:22px 18px 20px;border-radius:16px}
  .gate h3{font-size:22px}
  .g-row{grid-template-columns:1fr auto;gap:6px 10px}
  .g-row .g-pill{grid-column:1/-1;justify-self:start}
  .r-row{grid-template-columns:1fr;gap:6px}
  .r-row .r-pill{justify-self:start}
  .r-v{text-align:left;max-width:none}
  .r-foot .btn{width:100%;justify-content:center}
}

@media (max-width:1060px){
  .posts{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:980px){
  nav.links{display:none}
  .nav-cta{display:none}
  .nav-burger{display:inline-flex}
  .mobile-menu{display:block;position:absolute;left:0;right:0;top:100%;background:#fff;
    border-bottom:1px solid var(--line);padding:8px 0 20px;
    box-shadow:0 20px 34px -14px rgba(16,24,40,.34),0 3px 8px rgba(16,24,40,.07);
    opacity:0;visibility:hidden;transform:translateY(-10px);
    transition:opacity .2s ease,transform .26s cubic-bezier(.4,.01,.2,1),visibility 0s linear .26s}
  .mobile-menu.open{opacity:1;visibility:visible;transform:translateY(0);
    transition:opacity .2s ease,transform .26s cubic-bezier(.4,.01,.2,1),visibility 0s}
  .mm-in{display:flex;flex-direction:column;gap:0}
  .mm-in a:not(.btn){font-size:15.5px;font-weight:600;color:#1F2937;padding:15px 4px;
    border-bottom:1px solid var(--line)}
  .mm-in a:not(.btn):hover{color:var(--indigo-dark)}
  .mm-in a.on{color:var(--indigo-dark)}
  .mm-in .btn{width:100%;justify-content:center;padding:13px 18px;font-size:15px;
    border-radius:12px;margin-top:16px}
  .mm-in>*{opacity:0;transform:translateY(-5px);transition:opacity .22s ease,transform .22s ease}
  .mobile-menu.open .mm-in>*{opacity:1;transform:none}
  .mobile-menu.open .mm-in>:nth-child(1){transition-delay:.05s}
  .mobile-menu.open .mm-in>:nth-child(2){transition-delay:.08s}
  .mobile-menu.open .mm-in>:nth-child(3){transition-delay:.11s}
  .mobile-menu.open .mm-in>:nth-child(4){transition-delay:.13s}
  .mobile-menu.open .mm-in>:nth-child(5){transition-delay:.15s}
  .mobile-menu.open .mm-in>:nth-child(6){transition-delay:.17s}
  .mobile-menu.open .mm-in>:nth-child(7){transition-delay:.19s}
  .post.lead{flex-direction:column}
  .post.lead .pic{aspect-ratio:16/10;min-height:0;flex:none}
  .post.lead .c{padding:22px 24px 24px}
}
@media (max-width:700px){
  .posts{grid-template-columns:1fr}
  .figs-row{grid-auto-flow:row;gap:12px}
  .bar{grid-template-columns:1fr 46px;gap:6px 10px}
  .bar .l{grid-column:1/-1}
}
@media (max-width:560px){
  .nav-in{gap:12px}
  .wrap{padding:0 16px}
  .brand{--chiq-m:20px;min-width:0;flex-shrink:1;overflow:hidden}
  .ph{padding:44px 0 4px}
  .art-head{padding-top:36px}
  .art-head .lede{font-size:17.5px}
  .art-pic{margin-top:26px}
  .art-pic img{border-radius:14px}
  .art-body{font-size:17px;padding-top:32px}
  .cta{padding:40px 22px;border-radius:20px}
}