/* ══════════════════════════════════════════════════════════════════════════
   OsmO content kit — the ONE stylesheet for blog posts and data pages.
   Contract: docs/standards/web-content-pages.md (read it before editing).

   Load AFTER osmo.css:
     <link rel="stylesheet" href="/osmo.css?v=…" />
     <link rel="stylesheet" href="/kit/content.css?v=…" />
     <script defer src="/kit/content.js?v=…"></script>

   ONE dark site (owner, 2026-10-10): every page wears the homepage's dark
   palette. The body class only picks the LAYOUT, never the colours:
     body.k-article  — editorial article layout (blog posts, guides, site pages).
     body.k-dark     — data/stats layout (and plain pages: legal, blog index, 404).
   Both get the same token remap below, so a component looks right everywhere.
   The header is ONE canonical block too: website/kit/site-nav.html, stamped onto
   every page by scripts/apply-site-nav.py (the content-page gate fails on drift).

   app.js OWNS .reveal, [data-split], .chip, .store-bar, #main — never reuse
   them as hooks here. The kit's motion uses .k-rv, driven by content.js.
   ══════════════════════════════════════════════════════════════════════════ */

@font-face{font-family:"Playfair Display";font-style:italic;font-weight:600;font-display:swap;
  src:url("/fonts/playfair-italic-600.woff2") format("woff2")}
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:700;font-display:swap;
  src:url("/fonts/playfair-700.woff2") format("woff2")}

:root{
  --k-serif:"Playfair Display",Georgia,"Times New Roman",serif;
  --k-gold:#A8863C; --k-gold-lit:#C9A961; --k-gold-text:#7C5E22;
  --k-grad:linear-gradient(120deg,#D8BC7C,#A8863C 60%,#8A6A1E);
  --k-card:#FFFFFF; --k-card-line:rgba(26,23,20,.09); --k-well:#F2ECE0;
  --k-good:#2F8A62; --k-bad:#B5533F; --k-mid:#8A6A1E;
  --k-s1:#A8863C; --k-s2:#2F8A62; --k-s3:#6E6557; --k-s4:#B5533F;
  --k-grid:rgba(26,23,20,.08); --k-axis:rgba(26,23,20,.45);
  --k-shadow:0 1px 2px rgba(26,23,20,.04),0 18px 40px -28px rgba(26,23,20,.35);
  --k-ease:cubic-bezier(.22,.61,.36,1);
}

/* ── dark theme: the homepage token remap (index.html), shared by EVERY page ── */
body.k-dark,body.k-article{
  --bg:#0E0C08; --bg-2:#14100B; --paper:rgba(255,255,255,.05);
  --ink:#F2ECE0; --ink-2:rgba(242,236,224,.78); --ink-3:rgba(242,236,224,.56);
  --gold:#BFA162; --gold-deep:#D4B370; --gold-soft:#BFA162;
  --pill:#C9A961; --pill-ink:#14100B;
  --line:rgba(191,161,98,.14); --line-2:rgba(255,255,255,.10); --dot:rgba(242,236,224,.13);
  --k-gold:#BFA162; --k-gold-lit:#E8CE93; --k-gold-text:#D4B370;
  --k-grad:linear-gradient(120deg,#E8CE93,#BFA162 60%,#A8863C);
  --k-card:rgba(255,255,255,.045); --k-card-line:rgba(191,161,98,.14); --k-well:rgba(0,0,0,.28);
  --k-good:#7FBF9E; --k-bad:#D9826F; --k-mid:#D4B370;
  --k-s1:#D4B370; --k-s2:#7FBF9E; --k-s3:rgba(242,236,224,.38); --k-s4:#D9826F;
  --k-grid:rgba(242,236,224,.07); --k-axis:rgba(242,236,224,.5);
  --k-shadow:0 30px 60px -40px rgba(0,0,0,.8);
  background-color:var(--bg);color:var(--ink);
  background-image:
    radial-gradient(900px 480px at 85% -120px,rgba(191,161,98,.13),transparent 70%),
    repeating-linear-gradient(0deg,rgba(191,161,98,.028) 0 1px,transparent 1px 96px),
    repeating-linear-gradient(90deg,rgba(191,161,98,.028) 0 1px,transparent 1px 96px);
  background-repeat:no-repeat,repeat,repeat;
}
/* the site header — identical to the homepage's (index.html "nav" block), on every page */
:is(body.k-dark,body.k-article) .nav{background:rgba(10,10,10,.85);border-bottom:1px solid rgba(191,161,98,.10)}
:is(body.k-dark,body.k-article) .nav.scrolled{background:rgba(10,10,10,.94)}
:is(body.k-dark,body.k-article) .nav__links a{color:rgba(242,236,224,.65)}
:is(body.k-dark,body.k-article) .nav__links a:hover{color:#BFA162}
:is(body.k-dark,body.k-article) .nav__burger span{background:var(--ink)}
:is(body.k-dark,body.k-article) .nav__mobile{background:#0E0C08;border-top:1px solid rgba(191,161,98,.12)}
:is(body.k-dark,body.k-article) .brand__name{color:var(--ink)}
/* osmo.css components built for the old light theme, restated for the dark one
   (same values the homepage uses for itself) */
:is(body.k-dark,body.k-article) .store-bar{background:rgba(14,12,8,.94);border-top:1px solid rgba(191,161,98,.18);
  box-shadow:0 -10px 34px -18px rgba(0,0,0,.75)}
:is(body.k-dark,body.k-article) .store-bar__title{color:var(--ink)}
:is(body.k-dark,body.k-article) .store-bar__sub{color:rgba(242,236,224,.62)}
/* every surface is dark now, so every Play lockup takes the .badge--on-dark look (web-store-cta.md §1) */
:is(body.k-dark,body.k-article) .badge[href*="play.google.com"]{background:transparent;color:#F0E6D3;border-color:rgba(191,161,98,.45)}
:is(body.k-dark,body.k-article) .badge[href*="play.google.com"]:hover{border-color:#BFA162;color:#F0E6D3}
/* .brand--light is color:var(--bg) — near-black after the remap; pin it to cream */
:is(body.k-dark,body.k-article) .foot .brand--light{color:var(--ink)}
:is(body.k-dark,body.k-article) .doc a:hover{color:#E8CE93}
/* osmo.css "dark slab" sections paint var(--pill) with var(--bg) text — on the light theme that was
   ink-on-cream inverted; after the remap it would be a GOLD slab with black text. Keep them a
   raised dark band instead. */
:is(body.k-dark,body.k-article) :is(.stats,.pullquote,.prob){background:#14100B;color:var(--ink)}
:is(body.k-dark,body.k-article) .prob .section-title{color:var(--ink)}
:is(body.k-dark,body.k-article) .cta{color:var(--ink);border-top:1px solid rgba(191,161,98,.14);
  background:radial-gradient(70% 120% at 50% 0,rgba(191,161,98,.18),transparent 60%),#14100B}
:is(body.k-dark,body.k-article) .reel-tile{background:#14100B;border:1px solid rgba(191,161,98,.18)}

/* ── shared type ───────────────────────────────────────────────────────────── */
.k-eyebrow{display:inline-flex;align-items:center;gap:10px;margin:0 0 18px;font-size:12px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--k-gold-text)}
.k-eyebrow::before{content:"";width:22px;height:1px;background:currentColor;opacity:.7}
.k-live-dot{width:8px;height:8px;border-radius:50%;background:var(--k-good);box-shadow:0 0 0 0 rgba(47,138,98,.5);
  animation:k-pulse 2s infinite}
@keyframes k-pulse{70%{box-shadow:0 0 0 8px rgba(47,138,98,0)}100%{box-shadow:0 0 0 0 rgba(47,138,98,0)}}
.k-italic{font-family:var(--k-serif);font-style:italic;font-weight:600;letter-spacing:-.005em}
.k-gold{background:var(--k-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.k-muted{color:var(--ink-3)}

/* ── reading progress (content.js injects .k-progress) ─────────────────────── */
.k-progress{position:fixed;left:0;top:0;height:3px;width:100%;z-index:200;pointer-events:none;
  transform-origin:0 50%;transform:scaleX(0);background:var(--k-grad)}

/* ── motion: only elements BELOW the fold at load are hidden, and only by JS ─ */
.k-rv{opacity:0;transform:translateY(18px);transition:opacity .7s var(--k-ease),transform .7s var(--k-ease)}
.k-rv.k-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .k-rv{opacity:1;transform:none;transition:none}
  .k-live-dot{animation:none}
  .k-chart *{transition:none!important;animation:none!important}
}
@media print{.k-rv{opacity:1;transform:none}.k-progress,.k-toc-rail{display:none}}

/* ══════════════════════════ DATA PAGES (body.k-dark) ═════════════════════════ */
.k-page{max-width:1120px;margin:0 auto;padding:clamp(28px,5vw,64px) 20px 40px}
.k-hero{position:relative;padding:clamp(20px,4vw,48px) 0 clamp(26px,4vw,40px)}
.k-crumbs{font-size:13.5px;color:var(--ink-3);margin:0 0 22px;display:flex;gap:8px;flex-wrap:wrap}
.k-crumbs a{color:var(--k-gold-text)}
.k-hero h1{font-family:var(--display);font-weight:700;font-size:clamp(34px,5.6vw,64px);line-height:1.04;
  letter-spacing:-.03em;margin:0 0 18px;max-width:20ch;text-wrap:balance}
.k-hero h1 .k-italic{font-size:1.04em}
.k-hero__lede{font-size:clamp(17px,2vw,20px);line-height:1.6;color:var(--ink-2);max-width:62ch;margin:0 0 22px}
.k-fresh{display:inline-flex;align-items:center;gap:10px;font-size:14px;color:var(--ink-3);
  border:1px solid var(--k-card-line);border-radius:999px;padding:7px 14px 7px 12px;background:var(--k-card)}

.k-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:8px 0 22px}
.k-kpi{position:relative;overflow:hidden;background:var(--k-card);border:1px solid var(--k-card-line);
  border-radius:22px;padding:22px 22px 20px;box-shadow:var(--k-shadow)}
.k-kpi::after{content:"";position:absolute;inset:0 0 auto;height:1px;background:linear-gradient(90deg,transparent,rgba(212,179,112,.5),transparent)}
.k-kpi__num{display:block;font-family:var(--display);font-weight:700;font-size:clamp(38px,5vw,54px);
  line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.k-kpi__num small{font-size:.5em;font-weight:600;margin-left:2px;color:var(--ink-2)}
.k-kpi__label{display:block;margin-top:10px;font-size:14.5px;font-weight:600;color:var(--ink)}
.k-kpi__so{display:block;margin-top:6px;font-size:14px;line-height:1.5;color:var(--ink-3)}

.k-panel{background:var(--k-card);border:1px solid var(--k-card-line);border-radius:26px;
  padding:clamp(20px,3vw,32px);margin:0 0 18px;box-shadow:var(--k-shadow)}
.k-panel__head{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:flex-end;justify-content:space-between;margin:0 0 20px}
.k-panel h2{font-family:var(--display);font-weight:700;font-size:clamp(22px,2.6vw,28px);letter-spacing:-.02em;
  line-height:1.2;margin:0}
.k-panel__sub{margin:6px 0 0;color:var(--ink-3);font-size:14.5px;max-width:60ch}
.k-legend{display:flex;flex-wrap:wrap;gap:8px 16px;margin:0;padding:0;list-style:none;font-size:13.5px;color:var(--ink-2)}
.k-legend li{display:inline-flex;align-items:center;gap:7px}
.k-legend i{width:10px;height:10px;border-radius:3px;display:inline-block}

.k-insight{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;margin:0 0 18px;
  padding:22px 24px;border-radius:22px;border:1px solid rgba(212,179,112,.32);
  background:linear-gradient(135deg,rgba(212,179,112,.16),rgba(212,179,112,.03))}
.k-insight__ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  background:var(--k-grad);color:#14100B;font-weight:800;font-size:18px}
.k-insight h2{font-size:clamp(19px,2.2vw,23px);margin:0 0 6px;letter-spacing:-.01em;line-height:1.3}
.k-insight p{margin:0;color:var(--ink-2);line-height:1.6}
.k-insight a{color:var(--k-gold-text);text-decoration:underline;text-underline-offset:3px}

.k-cols{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.k-cols>.k-panel{margin:0}
.k-cols+*{margin-top:18px}

.k-method{border-top:1px solid var(--k-card-line);margin-top:28px}
.k-method details{border-bottom:1px solid var(--k-card-line)}
.k-method summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;
  padding:20px 2px;font-weight:600;font-size:17px;color:var(--ink)}
.k-method summary::-webkit-details-marker{display:none}
.k-method summary::after{content:"+";font-size:22px;color:var(--k-gold-text);transition:transform .3s var(--k-ease)}
.k-method details[open] summary::after{transform:rotate(45deg)}
.k-method details>div{padding:0 2px 20px;color:var(--ink-2);font-size:15.5px;line-height:1.7}
.k-method ul{margin:0;padding-left:20px;display:grid;gap:8px}
.k-method a{color:var(--k-gold-text);text-decoration:underline}

.k-next{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin:18px 0}
.k-next a{display:block;padding:20px 22px;border-radius:20px;border:1px solid var(--k-card-line);background:var(--k-card);
  transition:transform .3s var(--k-ease),border-color .3s}
.k-next a:hover{transform:translateY(-3px);border-color:rgba(212,179,112,.45)}
.k-next b{display:block;font-size:16.5px;margin-bottom:6px;color:var(--ink)}
.k-next span{font-size:14.5px;color:var(--ink-3);line-height:1.5}
.k-next em{display:block;margin-top:12px;font-style:normal;font-size:13.5px;font-weight:600;color:var(--k-gold-text)}

.k-cta{margin:34px 0 10px;padding:clamp(28px,5vw,48px);border-radius:28px;text-align:center;
  border:1px solid rgba(212,179,112,.3);
  background:radial-gradient(600px 220px at 50% 0,rgba(212,179,112,.2),transparent 70%),var(--k-card)}
.k-cta h2{font-family:var(--display);font-weight:700;font-size:clamp(26px,3.6vw,40px);letter-spacing:-.025em;line-height:1.1;margin:0 0 12px}
.k-cta p{color:var(--ink-2);margin:0 auto 24px;max-width:52ch}
.k-cta .hero__actions{justify-content:center}

/* ═══════════════════════════════ CHARTS (both themes) ════════════════════════
   Rendered by content.js from a declarative spec:
     <figure class="k-chart" data-chart="bars|line|stack" aria-label="…">
       <script type="application/json">{ … }</script>
       <figcaption>Source: …</figcaption>
     </figure>                                                              */
.k-chart{margin:0;position:relative}
.k-chart svg{display:block;width:100%;height:auto;overflow:visible}
.k-chart figcaption{margin-top:12px;font-size:13px;color:var(--ink-3);line-height:1.5}
.k-chart .k-ax{font:500 12px var(--sans);fill:var(--k-axis)}
.k-chart .k-ax-title{font:600 12px var(--sans);fill:var(--k-axis);letter-spacing:.04em}
.k-chart .k-gl{stroke:var(--k-grid);stroke-width:1}
.k-chart .k-line{fill:none;stroke:var(--k-s1);stroke-width:3;stroke-linejoin:round;stroke-linecap:round}
.k-chart .k-area{opacity:.9}
.k-chart .k-pt{fill:var(--bg);stroke:var(--k-s1);stroke-width:2.5;opacity:0;transition:opacity .2s}
.k-chart .k-pt.k-on{opacity:1}
.k-chart .k-hair{stroke:var(--k-axis);stroke-dasharray:3 4;opacity:0}
.k-chart .k-hair.k-on{opacity:.6}
.k-chart .k-ref{stroke:var(--k-gold);stroke-dasharray:5 5;stroke-width:1.5;opacity:.8}
.k-chart .k-ref-t{font:600 11.5px var(--sans);fill:var(--k-gold-text)}
.k-chart .k-end{font:700 13px var(--sans);fill:var(--ink)}
.k-tip{position:absolute;pointer-events:none;z-index:5;min-width:120px;padding:9px 12px;border-radius:12px;
  font-size:13px;line-height:1.45;color:var(--ink);background:var(--bg);border:1px solid var(--k-card-line);
  box-shadow:0 12px 30px -12px rgba(0,0,0,.45);opacity:0;transform:translate(-50%,-110%);transition:opacity .15s}
.k-tip.k-on{opacity:1}
.k-tip b{display:block;font-size:15px}
/* horizontal bars are HTML (they reflow on phones better than SVG text) */
.k-bars{display:grid;gap:14px;margin:0;padding:0;list-style:none}
.k-bar{display:grid;grid-template-columns:minmax(150px,220px) 1fr minmax(64px,auto);gap:16px;align-items:center}
.k-bar__name{line-height:1.25}
.k-bar__name b{display:block;font-size:15.5px;color:var(--ink)}
.k-bar__name small{display:block;font-size:12.5px;color:var(--ink-3);margin-top:2px}
.k-bar__track{position:relative;height:14px;border-radius:999px;background:var(--k-well);overflow:visible}
.k-bar__fill{position:absolute;left:0;top:0;bottom:0;width:100%;border-radius:999px;background:var(--k-s1);
  transform-origin:0 50%;transform:scaleX(var(--k-v,1));transition:transform 1.1s var(--k-ease)}
.k-bar--hi .k-bar__fill{background:var(--k-good)}
.k-bar--lo .k-bar__fill{background:var(--k-bad)}
.k-bar__val{font-weight:700;font-size:16px;text-align:right;font-variant-numeric:tabular-nums;color:var(--ink)}
.k-bar__tag{display:inline-block;vertical-align:2px;margin-left:6px;padding:2px 7px;border-radius:999px;font-style:normal;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;border:1px solid currentColor}
.k-bar--hi .k-bar__tag{color:var(--k-good)}
.k-bar--lo .k-bar__tag{color:var(--k-bad)}
.k-bar__ref{position:absolute;top:-5px;bottom:-5px;width:2px;background:var(--k-gold);opacity:.8;border-radius:2px}
.k-stack .k-bar__fill{display:flex;overflow:hidden;background:none}
.k-stack .k-bar__fill i{display:block;height:100%}
.k-stack .k-bar__track{height:22px}
.k-stack .k-bar{grid-template-columns:minmax(120px,170px) 1fr 84px}
.k-stack-pcts{display:flex;font-size:12px;font-weight:600;margin-top:6px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.k-stack-pcts span{overflow:hidden;white-space:nowrap}
.k-chart.k-pre .k-bar__fill{transform:scaleX(0)}

/* ══════════════════════════ ARTICLES (body.k-article) ════════════════════════
   Upgrades the existing .doc article: editorial serif headings, wider
   rhythm, polished tables, plus the components below.                    */
body.k-article .doc{max-width:760px}
body.k-article .doc h1{font-family:var(--k-serif);font-weight:700;letter-spacing:-.02em;line-height:1.06;
  font-size:clamp(36px,5.4vw,58px);text-wrap:balance}
body.k-article .doc h1 em,body.k-article .doc h2 em{font-family:var(--k-serif);font-style:italic;font-weight:600;color:var(--k-gold-text)}
body.k-article .doc h2{font-family:var(--k-serif);font-weight:700;font-size:clamp(25px,3vw,33px);letter-spacing:-.015em;
  line-height:1.18;margin:60px 0 14px;padding-top:6px;position:relative}
body.k-article .doc h2::before{content:"";position:absolute;left:0;top:-14px;width:36px;height:2px;background:var(--k-grad);border-radius:2px}
body.k-article .doc h3{font-size:19px;margin:32px 0 8px}
body.k-article .doc p,body.k-article .doc li{font-size:17.5px;line-height:1.75}
body.k-article .doc>p:first-of-type{font-size:19px;color:var(--ink)}
body.k-article .doc table{border-collapse:separate;border-spacing:0;border:1px solid var(--line);border-radius:16px;overflow:hidden;
  background:var(--paper);box-shadow:var(--k-shadow);font-size:15px}
body.k-article .doc th,body.k-article .doc td{border:0;border-bottom:1px solid var(--line);padding:12px 14px}
body.k-article .doc tr:last-child td{border-bottom:0}
body.k-article .doc th{background:var(--k-well);font-size:13px;letter-spacing:.04em;text-transform:uppercase}
body.k-article .doc tbody tr:nth-child(even) td{background:rgba(168,134,60,.035)}
body.k-article .doc tbody tr:hover td{background:rgba(168,134,60,.08)}
body.k-article .doc blockquote{margin:28px 0;padding:4px 0 4px 22px;border-left:3px solid var(--k-gold);
  font-family:var(--k-serif);font-style:italic;font-size:22px;line-height:1.5;color:var(--ink)}
body.k-article .doc img{border-radius:16px}
body.k-article .toc{background:var(--paper);box-shadow:var(--k-shadow)}

/* sticky side table of contents (content.js builds it from the h2s, ≥1240px) */
.k-toc-rail{position:fixed;top:120px;left:max(20px,calc(50% - 380px - 270px));width:230px;max-height:calc(100vh - 200px);
  overflow:auto;font-size:13.5px;opacity:0;transition:opacity .4s;z-index:5}
.k-toc-rail.k-on{opacity:1}
.k-toc-rail p{margin:0 0 12px;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.k-toc-rail ol{list-style:none;margin:0;padding:0;border-left:1px solid var(--line-2)}
.k-toc-rail a{display:block;padding:6px 0 6px 14px;margin-left:-1px;border-left:2px solid transparent;color:var(--ink-3);line-height:1.35}
.k-toc-rail a:hover{color:var(--ink)}
.k-toc-rail a.k-cur{color:var(--ink);border-left-color:var(--k-gold);font-weight:600}
@media (max-width:1239px){.k-toc-rail{display:none}}

/* article components — every one works in both themes */
.k-takeaways{margin:30px 0;padding:24px 26px;border-radius:20px;background:var(--paper);
  border:1px solid var(--line);box-shadow:var(--k-shadow);position:relative;overflow:hidden}
.k-takeaways::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:var(--k-grad)}
.k-takeaways h2,.k-takeaways .k-takeaways__h{margin:0 0 12px!important;font-family:var(--sans)!important;font-size:12.5px!important;
  font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--k-gold-text)}
.k-takeaways h2::before{display:none}
.k-takeaways ul{margin:0;padding-left:20px;gap:10px}
.k-callout{display:grid;grid-template-columns:28px 1fr;gap:12px;margin:26px 0;padding:18px 20px;border-radius:16px;
  background:var(--k-well);border:1px solid var(--line)}
.k-callout::before{content:"i";width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  font:700 14px var(--k-serif);font-style:italic;background:var(--k-gold);color:#fff}
.k-callout--warn::before{content:"!";font-family:var(--sans);font-style:normal;background:var(--k-bad)}
.k-callout--tip::before{content:"✓";font-family:var(--sans);font-style:normal;background:var(--k-good)}
.k-callout>div>:last-child{margin-bottom:0}
.k-callout p{margin:0 0 8px}
.k-pull{margin:40px 0;padding:0;text-align:center}
.k-pull p{margin:0!important;font-family:var(--k-serif)!important;font-style:italic;font-weight:600;
  font-size:clamp(24px,3.2vw,32px)!important;line-height:1.35!important;color:var(--ink)!important;text-wrap:balance}
.k-pull cite{display:block;margin-top:12px;font-style:normal;font-size:13.5px;color:var(--ink-3)}
.k-pull::before{content:"“";display:block;font:700 64px/0.6 var(--k-serif);color:var(--k-gold);margin-bottom:14px}
.k-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin:26px 0}
.k-stat{padding:20px 18px;border-radius:18px;background:var(--paper);border:1px solid var(--line);box-shadow:var(--k-shadow)}
.k-stat b{display:block;font-family:var(--display);font-size:clamp(28px,3.6vw,38px);line-height:1;letter-spacing:-.02em;
  color:var(--ink);font-variant-numeric:tabular-nums}
.k-stat span{display:block;margin-top:8px;font-size:14px;line-height:1.45;color:var(--ink-2)}
.k-stat small{display:block;margin-top:6px;font-size:12px;color:var(--ink-3)}
.k-steps{counter-reset:k-step;list-style:none!important;padding:0!important;margin:26px 0;display:grid;gap:12px}
.k-steps>li{counter-increment:k-step;position:relative;padding:16px 18px 16px 62px;border-radius:16px;background:var(--paper);
  border:1px solid var(--line)}
.k-steps>li::before{content:counter(k-step);position:absolute;left:16px;top:14px;width:32px;height:32px;border-radius:10px;
  display:grid;place-items:center;font-weight:700;font-size:15px;background:var(--k-grad);color:#1A1408}
.k-figure{margin:30px 0;padding:22px;border-radius:20px;background:var(--paper);border:1px solid var(--line);box-shadow:var(--k-shadow)}
.k-figure>h3,.k-figure__t{margin:0 0 4px!important;font-size:17px;font-weight:700;color:var(--ink)}
.k-figure__s{margin:0 0 18px!important;font-size:14px!important;color:var(--ink-3)!important}
.k-inline-cta{display:flex;flex-wrap:wrap;align-items:center;gap:16px 22px;margin:36px 0;padding:22px 24px;border-radius:20px;
  background:#14100B;color:#F2ECE0;border:1px solid rgba(191,161,98,.22);box-shadow:0 24px 50px -30px rgba(0,0,0,.7)}
.k-inline-cta p{margin:0!important;flex:1 1 260px;color:rgba(242,236,224,.8)!important;font-size:15.5px!important}
.k-inline-cta b{display:block;color:#F2ECE0;font-size:18px;margin-bottom:4px}
.k-inline-cta .hero__actions{gap:10px}

/* ── responsive ───────────────────────────────────────────────────────────── */
@media (max-width:820px){
  .k-cols{grid-template-columns:1fr}
  .k-bar{grid-template-columns:1fr 56px;gap:6px 12px}
  .k-bar__name{grid-column:1/-1}
  .k-stack .k-bar{grid-template-columns:1fr 70px}
}
@media (max-width:520px){
  .k-insight{grid-template-columns:1fr}
  .k-kpis{grid-template-columns:1fr}
  .k-panel{border-radius:20px}
}

/* ── "a day of calls" dot strip (data pages) ─────────────────────────────── */
.k-days{display:grid;gap:26px}
.k-day__head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:12px}
.k-day__head b{font-size:18px}
.k-day__head span{font-size:14px;color:var(--ink-3)}
.k-dots{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.k-dot{width:clamp(34px,6vw,46px);height:clamp(34px,6vw,46px);border-radius:14px;position:relative;
  background:var(--k-well);border:1px solid var(--k-card-line)}
.k-dot::after{content:"";position:absolute;inset:30%;border-radius:50%;background:currentColor}
.k-dot--k{color:var(--k-s2);background:rgba(127,191,158,.12);border-color:rgba(127,191,158,.35)}
.k-dot--a{color:var(--k-s1);background:rgba(212,179,112,.14);border-color:rgba(212,179,112,.4)}
.k-dot--q{color:var(--k-s3)}
.k-day__foot{margin:12px 0 0;font-size:14px;color:var(--ink-3);line-height:1.5}
.k-day__foot b{color:var(--ink-2)}
.k-dots.k-pre .k-dot{opacity:0;transform:scale(.6)}
.k-dot{transition:opacity .4s var(--k-ease),transform .4s var(--k-ease)}
.k-bar__track,.k-stack .k-bar>span{display:block}
.k-stack-pcts span{display:block}

/* Articles: a plain numbered list is almost always a set of steps — render it as
   step cards without anyone having to remember a class. Nested lists stay plain. */
body.k-article .doc ol:not([class]){counter-reset:k-step;list-style:none;padding:0;margin:24px 0;display:grid;gap:10px}
body.k-article .doc ol:not([class])>li{counter-increment:k-step;position:relative;padding:14px 18px 14px 58px;border-radius:14px;
  background:var(--paper);border:1px solid var(--line);box-shadow:0 1px 2px rgba(26,23,20,.03)}
body.k-article .doc ol:not([class])>li::before{content:counter(k-step);position:absolute;left:14px;top:13px;width:30px;height:30px;
  border-radius:9px;display:grid;place-items:center;font-weight:700;font-size:14px;background:var(--k-grad);color:#1A1408}
body.k-article .doc li ol:not([class]){display:block;margin:8px 0 0;padding-left:20px;list-style:decimal}
body.k-article .doc li ol:not([class])>li{padding:0;border:0;background:none;box-shadow:none}
body.k-article .doc li ol:not([class])>li::before{display:none}

/* Phones: osmo.css lets wide tables scroll sideways (≤700px); keep that over the rounded-card look. */
@media (max-width:700px){body.k-article .doc table{overflow-x:auto;overflow-y:hidden}}
/* .doc a underlines every link — never a store lockup */
.doc .badge,.k-inline-cta .badge{text-decoration:none}

/* ═══════════════════════ PRODUCT / FEATURE PAGES (body.k-article.k-product) ═════════════════
   A feature page is a product page first and a guide second: a wide hero with the feature
   working in a phone demo, three benefits, how it works in three steps, THEN the in-depth guide.
   Standard §5b. Everything below is k- prefixed and token-driven like the rest of the kit.     */
.k-wide,.doc .k-wide{position:relative;width:min(1120px,calc(100vw - 40px));margin-left:calc((100% - min(1120px,calc(100vw - 40px))) / 2)}
.k-feature{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,5vw,64px);align-items:center;
  margin-block:8px clamp(28px,4vw,44px)}
.k-feature .k-eyebrow{margin-bottom:14px}
body.k-article .k-feature h1{margin:0 0 16px;font-size:clamp(34px,4.6vw,54px)}
.k-feature__lede{font-size:clamp(18px,2vw,21px);line-height:1.55;color:var(--ink-2);margin:0 0 24px;max-width:46ch}
.k-feature .hero__actions{margin:0 0 22px}
.k-feature__meta{font-size:13.5px;color:var(--ink-3);display:flex;gap:8px;flex-wrap:wrap}
.k-feature__meta span,.k-feature__meta time{color:inherit}

/* the phone demo — a scripted, illustrative conversation (never real user data) */
.k-demo{margin:0;justify-self:center;width:100%;max-width:380px}
.k-demo__phone{position:relative;border-radius:34px;padding:16px 16px 18px;background:
  radial-gradient(120% 70% at 50% -10%,rgba(212,179,112,.16),transparent 60%),#100E0B;
  border:1px solid rgba(212,179,112,.22);box-shadow:0 40px 80px -40px rgba(20,16,11,.75),0 0 0 8px rgba(20,16,11,.05);
  min-height:420px;color:#F2ECE0}
.k-demo__bar{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;letter-spacing:.02em;
  color:rgba(242,236,224,.7);padding:4px 6px 14px;border-bottom:1px solid rgba(255,255,255,.07);margin-bottom:14px}
.k-demo__bar .k-live-dot{background:#7FBF9E}
.k-demo__chat{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.k-msg{max-width:88%;padding:10px 13px;border-radius:16px;font-size:14px;line-height:1.45;
  transition:opacity .45s var(--k-ease),transform .45s var(--k-ease)}
.k-msg b{display:block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:3px;opacity:.7}
.k-msg--them{align-self:flex-start;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.08)}
.k-msg--you{align-self:flex-end;background:rgba(212,179,112,.16);border:1px solid rgba(212,179,112,.3)}
.k-msg--ai{align-self:flex-end;background:linear-gradient(155deg,#D4B87A,#A8874E);color:#1A1408}
.k-msg--ai b{opacity:.65}
.k-msg--card{align-self:stretch;max-width:none;background:rgba(255,255,255,.045);border:1px solid rgba(212,179,112,.25);border-radius:14px}
.k-msg--note{align-self:stretch;max-width:none;background:none;border:1px dashed rgba(127,191,158,.45);color:#B9DDC9;font-size:13px}
.k-msg--note b{color:#7FBF9E;opacity:1}
.k-demo.k-play .k-msg{opacity:0;transform:translateY(10px)}
.k-demo.k-play .k-msg.k-in{opacity:1;transform:none}
.k-demo__typing{align-self:flex-end;display:none;gap:4px;padding:10px 12px;border-radius:14px;background:rgba(212,179,112,.18)}
.k-demo__typing.k-on{display:inline-flex}
.k-demo__typing i{width:6px;height:6px;border-radius:50%;background:#D4B87A;animation:k-typing 1s infinite}
.k-demo__typing i:nth-child(2){animation-delay:.15s}.k-demo__typing i:nth-child(3){animation-delay:.3s}
@keyframes k-typing{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.k-demo__replay{display:block;margin:12px auto 0;border:0;background:none;font-size:13px;font-weight:600;color:var(--k-gold-text);
  cursor:pointer;opacity:0;transition:opacity .3s}
.k-demo__replay.k-on{opacity:1}
.k-demo figcaption{margin-top:10px;text-align:center;font-size:12.5px;color:var(--ink-3)}

/* benefits + how it works */
.k-benefits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-block:clamp(28px,4vw,44px) 18px}
.k-benefit{padding:24px 22px;border-radius:22px;background:var(--paper);border:1px solid var(--line);box-shadow:var(--k-shadow)}
.k-benefit__n{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;margin-bottom:16px;
  background:var(--k-grad);color:#1A1408;font-weight:800;font-size:15px}
.k-benefit h3,body.k-article .doc .k-benefit h3{margin:0 0 6px!important;font-family:var(--sans);font-size:18px;font-weight:700;color:var(--ink)}
.k-benefit p,body.k-article .doc .k-benefit p{margin:0!important;font-size:15px!important;line-height:1.55!important;color:var(--ink-2)}
.k-how{margin-block:clamp(28px,4vw,44px);padding:clamp(24px,3.5vw,36px);border-radius:26px;background:#14100B;color:#F2ECE0;border:1px solid rgba(191,161,98,.18)}
.k-how>h2,body.k-article .doc .k-how>h2{margin:0 0 22px!important;padding:0;color:#F2ECE0;font-size:clamp(22px,2.6vw,28px)}
body.k-article .doc .k-how>h2::before{display:none}
.k-how ol{list-style:none!important;counter-reset:k-how;margin:0!important;padding:0!important;display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
body.k-article .doc .k-how ol>li{counter-increment:k-how;position:relative;padding:0 0 0 52px;border:0;background:none;box-shadow:none;
  color:rgba(242,236,224,.78);font-size:15.5px;line-height:1.55}
body.k-article .doc .k-how ol>li::before{content:counter(k-how);position:absolute;left:0;top:0;width:36px;height:36px;border-radius:11px;
  display:grid;place-items:center;font-weight:800;background:var(--k-grad);color:#1A1408}
.k-how li b{display:block;color:#F2ECE0;font-size:16.5px;margin-bottom:3px}
.k-indepth{display:flex;align-items:center;gap:14px;margin:clamp(36px,5vw,56px) 0 10px;font-size:12.5px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--k-gold-text)}
.k-indepth::after{content:"";flex:1;height:1px;background:var(--line-2)}

/* the features hub: one card per feature */
.k-feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-block:26px 30px;list-style:none!important;padding:0!important}
body.k-article .doc .k-feature-grid>li{margin:0;padding:0}
.k-feature-grid a{display:flex;flex-direction:column;height:100%;padding:22px 22px 20px;border-radius:22px;background:var(--paper);
  border:1px solid var(--line);box-shadow:var(--k-shadow);text-decoration:none!important;color:var(--ink)!important;
  transition:transform .3s var(--k-ease),border-color .3s}
.k-feature-grid a:hover{transform:translateY(-4px);border-color:rgba(168,134,60,.45)}
.k-feature-grid b{font-size:18px;margin-bottom:6px}
.k-feature-grid span{font-size:14.5px;line-height:1.5;color:var(--ink-2);flex:1}
.k-feature-grid em{margin-top:14px;font-style:normal;font-size:13.5px;font-weight:600;color:var(--k-gold-text)}

@media (max-width:900px){
  .k-feature{grid-template-columns:1fr}
  .k-benefits,.k-feature-grid{grid-template-columns:1fr}
  .k-how ol{grid-template-columns:1fr}
}
@media (min-width:901px) and (max-width:1100px){.k-feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (prefers-reduced-motion:reduce){.k-demo.k-play .k-msg{opacity:1;transform:none}.k-demo__typing i{animation:none}}
/* the demo's bubbles are <li>s inside .doc — keep article list typography off them */
body.k-article .doc .k-demo .k-msg{margin:0;font-size:14px;line-height:1.45;color:#F2ECE0}
body.k-article .doc .k-demo .k-msg--ai{color:#1A1408}
body.k-article .doc .k-demo .k-msg--note{color:#B9DDC9}
body.k-article .doc .k-demo .k-msg b{color:inherit}
body.k-article .doc .k-demo .k-msg--note b{color:#7FBF9E}
body.k-article .doc .k-demo figcaption{font-size:12.5px;line-height:1.5}

/* ═══════════════ TRIM PASS (owner, 2026-10-10): less display type, more reading room ═══════════════
   "So much text with large fonts instead of the meaty stuff" — and posts that felt crammed.
   Display sizes come down, article text gets a ~68ch measure and more air between blocks.
   Overrides live here (not in osmo.css) so the homepage, which does not load the kit, is untouched. */

/* the ONE slim download strip — replaces the full-height "Silence." band and the big k-cta blocks */
.k-strip{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 22px;
  width:min(1072px,calc(100% - 32px));margin:36px auto 44px;padding:14px 18px;border-radius:16px;
  background:var(--k-card);border:1px solid var(--k-card-line)}
main .k-strip,.k-page .k-strip{width:auto;margin:32px 0 8px}
.k-strip>p{margin:0!important;flex:1 1 340px;font-size:15px!important;line-height:1.5!important;color:var(--ink-2)!important}
.k-strip>p b{color:var(--ink);font-weight:700}
.k-strip__cta{display:flex;flex-wrap:wrap;gap:8px}
.k-strip .badge{text-decoration:none}
@media (max-width:520px){.k-strip{padding:14px}.k-strip__cta{width:100%}.k-strip__cta .badge{flex:1 1 0;justify-content:center}}

/* the hand-designed posts' own section bar: sticks under the 72px site header on desktop; on phones
   its links are hidden by the page itself, so the bar would be an empty strip — drop it */
[data-secbar]{top:72px}
@media (max-width:1000px){[data-secbar]{display:none!important}}

/* the in-page "On this page" box duplicates the side rail wherever the rail shows (content.js
   sets .k-has-rail only when it built one) — keep it for phones/tablets, where the rail is hidden */
@media (min-width:1240px){body.k-has-rail .doc .toc{display:none}}

/* display type, one notch down everywhere */
:is(body.k-dark,body.k-article) .eyebrow{font-size:12.5px;letter-spacing:.16em}
body.k-article .doc h1{font-size:clamp(31px,4.2vw,46px);line-height:1.08}
body.k-article .k-feature h1{font-size:clamp(30px,3.8vw,44px)}
.k-feature__lede{font-size:clamp(17px,1.6vw,19px)}
.k-hero h1{font-size:clamp(30px,4.2vw,48px)}
.k-hero__lede{font-size:clamp(16px,1.6vw,18px)}
.k-kpi__num{font-size:clamp(32px,4vw,44px)}
.k-cta h2{font-size:clamp(22px,2.6vw,30px)}
.k-pull p{font-size:clamp(20px,2.4vw,24px)!important}
.k-pull{margin:30px 0}
.k-pull::before{font-size:48px;margin-bottom:10px}
.k-stat b{font-size:clamp(26px,3vw,32px)}
body.k-article .doc .doc__lead{font-size:18px;margin-bottom:28px}

/* article reading rhythm: ~68ch measure, calmer headings, more space between blocks */
body.k-article .doc{max-width:720px}
.k-toc-rail{left:max(20px,calc(50% - 360px - 270px))}
body.k-article .doc p,body.k-article .doc li{font-size:17px;line-height:1.72}
body.k-article .doc p{margin:0 0 20px}
body.k-article .doc>p:first-of-type{font-size:18px}
body.k-article .doc ul:not([class]){gap:10px;margin:16px 0 24px}
body.k-article .doc li>p{margin:0}
body.k-article .doc h2{font-size:clamp(23px,2.5vw,28px);line-height:1.22;margin:56px 0 14px}
body.k-article .doc h3{font-size:18px;line-height:1.35;margin:30px 0 8px}
body.k-article .doc h2+h3{margin-top:18px}
body.k-article .doc blockquote{font-size:19px}
/* tables: smaller, tabular, room to breathe */
body.k-article .doc table{font-size:14.5px;margin:24px 0 28px}
body.k-article .doc th,body.k-article .doc td{padding:11px 14px;line-height:1.5;vertical-align:top}
body.k-article .doc th{font-size:12px;color:var(--ink)}
body.k-article .doc td{font-variant-numeric:tabular-nums}
/* callouts + takeaways: compact, readable */
.k-callout{margin:28px 0;padding:16px 18px}
body.k-article .doc .k-callout p{font-size:16px;line-height:1.65}
body.k-article .doc .k-takeaways li{font-size:16.5px;line-height:1.6}
.k-inline-cta{margin:32px 0;padding:18px 20px}
.k-inline-cta b{font-size:16.5px}
body.k-article .toc{margin:4px 0 30px;padding:16px 20px}
body.k-article .doc .toc ul{gap:4px;margin:0;padding:0}
body.k-article .doc .toc li{font-size:15px;line-height:1.45}
/* app screenshots: the cream presentation box was a light slab on a dark page; keep them smaller */
:is(body.k-dark,body.k-article) .product-visual{background:var(--k-card);border:1px solid var(--k-card-line);box-shadow:none}
:is(body.k-dark,body.k-article) .product-screen--portrait{max-width:300px}
:is(body.k-dark,body.k-article) .product-screen--compact{max-width:560px}

/* ═══════════════ EDITORIAL PASS (owner, 2026-10-10): a post reads like a news feature ═══════════════
   "Images on the left, text on the right … look like a news article … otherwise it looks like AI slop."
   Standard: docs/standards/web-content-pages.md §5a. Rules, not boxes: hairlines and small-caps labels
   replace the rounded, shadowed cards; the body is set in a serif reading face at a ~68ch measure.
   On wide screens (≥1000px) a post with a hero image opens like a feature: kicker, headline and byline
   run across a wider block, and the hero hangs into the left margin with the standfirst beside it.
   Single-image figures further down do the same (content.js tags them .k-side). Phones stack.
   SCOPE: the typography and layout rules apply to ARTICLES only — a .doc with a dated byline (<time>) or
   a hero image, never a feature page (.k-feature). Pricing / about / press / support / glossary keep the
   sans body. Component restyles written without .doc (takeaways, callouts, pull quotes, stat figures, chart
   figures, the inline download prompt, the contents box) apply on every k-article page. */
body.k-article{
  --k-read:Charter,"Bitstream Charter","Iowan Old Style","Sitka Text",Cambria,Georgia,"Noto Serif",serif;
  --k-rule:rgba(242,236,224,.13); --k-rule-gold:rgba(191,161,98,.55);
  --k-hang:0px;
}
@media (min-width:1000px){body.k-article{--k-hang:clamp(0px,calc((100vw - 720px) / 2 - 64px),300px)}}

/* — body copy: serif reading face, generous leading, a little more contrast for thin strokes on dark — */
body.k-article .doc:is(:has(time),:has(.blog-hero)):not(:has(.k-feature)) p:not(.eyebrow,.toc__h,.k-figure__t,.k-figure__s,.source-note,.k-strip *,.k-inline-cta *,.k-demo *),body.k-article .doc:is(:has(time),:has(.blog-hero)):not(:has(.k-feature)) li:not(.toc li,.k-demo *){font-family:var(--k-read);font-size:19px;line-height:1.68;
  color:rgba(242,236,224,.86);letter-spacing:.002em}
body.k-article .doc:is(:has(time),:has(.blog-hero)):not(:has(.k-feature)) :is(p,li) :is(strong,b){font-weight:700;color:var(--ink)}
body.k-article .doc:is(:has(time),:has(.blog-hero)):not(:has(.k-feature)) p a,body.k-article .doc:is(:has(time),:has(.blog-hero)):not(:has(.k-feature)) li a{text-decoration-thickness:1px;text-underline-offset:3px;
  text-decoration-color:rgba(212,179,112,.5)}
body.k-article .doc:is(:has(time),:has(.blog-hero)):not(:has(.k-feature)) p a:hover,body.k-article .doc:is(:has(time),:has(.blog-hero)):not(:has(.k-feature)) li a:hover{text-decoration-color:currentColor}
body.k-article .doc:is(:has(time),:has(.blog-hero)):not(:has(.k-feature)) code{font-size:.86em}

/* — the article header: kicker · headline · byline on one quiet ruled line — */
body.k-article .doc:is(:has(time),:has(.blog-hero)):not(:has(.k-feature)) .crumbs{font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;gap:8px;margin:0 0 18px}
body.k-article .doc:is(:has(time),:has(.blog-hero)):not(:has(.k-feature)) .crumbs a{color:var(--k-gold-text)}
body.k-article .doc:is(:has(time),:has(.blog-hero)):not(:has(.k-feature)) .crumbs [aria-current]{color:var(--ink-3)}
body.k-article .doc:is(:has(time),:has(.blog-hero)):not(:has(.k-feature)) .crumbs__sep{color:var(--ink-3);opacity:.6}
body.k-article .doc:is(:has(time),:has(.blog-hero)):not(:has(.k-feature)) h1{font-size:clamp(32px,3.9vw,52px);line-height:1.06;letter-spacing:-.022em;margin:0 0 18px;max-width:19em}
body.k-article .doc:is(:has(time),:has(.blog-hero)):not(:has(.k-feature)) :is(header:has(h1)>div,.doc__meta){display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;
  margin:0 0 30px;padding:11px 0;border-top:1px solid var(--k-rule);border-bottom:1px solid var(--k-rule);
  font:500 13.5px/1.5 var(--sans);color:var(--ink-3)}
body.k-article .doc:is(:has(time),:has(.blog-hero)):not(:has(.k-feature)) :is(header:has(h1)>div,.doc__meta) :is(strong,b){color:var(--ink);font-weight:600}
body.k-article .doc:is(:has(time),:has(.blog-hero)):not(:has(.k-feature)) :is(header:has(h1)>div,.doc__meta) [aria-hidden]{opacity:.45}
body.k-article .doc:is(:has(time),:has(.blog-hero)):not(:has(.k-feature)) header:has(h1){margin:0}
body.k-article .doc:is(:has(time),:has(.blog-hero)):not(:has(.k-feature)) .eyebrow{color:var(--k-gold-text)}

/* — standfirst: the paragraph right after the hero (content.js tags it .k-dek where the markup varies) — */
body.k-article .doc:is(:has(time),:has(.blog-hero)):not(:has(.k-feature)) :is(.k-dek,.doc__lead,.blog-hero+p,.k-hero-fig+p,.blog-hero+:is(div,article)>p:first-of-type,.k-hero-fig+:is(div,article)>p:first-of-type){
  font-size:21px;line-height:1.5;color:var(--ink)}

/* — the hero figure (content.js wraps the image in <figure class="k-hero-fig"> and shows its alt as the caption) — */
body.k-article .doc:is(:has(time),:has(.blog-hero)):not(:has(.k-feature)) .blog-hero{border:0;border-radius:6px;box-shadow:none;max-height:440px}
body.k-article .doc:is(:has(time),:has(.blog-hero)):not(:has(.k-feature)) .k-hero-fig{display:table;margin:0 auto 30px}
body.k-article .doc:is(:has(time),:has(.blog-hero)):not(:has(.k-feature)) .k-hero-fig .blog-hero{margin:0}
body.k-article .doc:is(:has(time),:has(.blog-hero)):not(:has(.k-feature)) .k-hero-fig figcaption{display:table-caption;caption-side:bottom;padding-top:9px;
  font:400 13px/1.45 var(--sans);color:var(--ink-3)}
@media (min-width:1000px){
  /* the header block widens into the left margin by the same hang as the hero, so they share one edge */
  body.k-article .doc:is(:has(time),:has(.blog-hero)):not(:has(.k-feature)):has(.blog-hero):not(:has(.k-hero-fig--inline)) :is(.crumbs,header:has(h1)){margin-left:calc(-1 * var(--k-hang))}
  body.k-article .doc:is(:has(time),:has(.blog-hero)):not(:has(.k-feature)):has(.blog-hero) header:has(h1)>div{margin-bottom:34px}
  body.k-article .doc:is(:has(time),:has(.blog-hero)):not(:has(.k-feature)) .blog-hero:not(.k-hero-fig .blog-hero),body.k-article .doc:is(:has(time),:has(.blog-hero)):not(:has(.k-feature)) .k-hero-fig{
    float:left;clear:left;margin:5px 40px 22px calc(-1 * var(--k-hang))}
  body.k-article .doc:is(:has(time),:has(.blog-hero)):not(:has(.k-feature)) .blog-hero{max-width:calc(var(--k-hang) + 190px);max-height:460px;width:auto;height:auto}
  body.k-article .doc:is(:has(time),:has(.blog-hero)):not(:has(.k-feature)) .k-hero-fig figcaption{max-width:calc(var(--k-hang) + 190px)}
  /* single-image figures further down sit beside the paragraphs that follow them */
  body.k-article .doc:is(:has(time),:has(.blog-hero)):not(:has(.k-feature)) .k-side{float:left;clear:left;width:calc(var(--k-hang) + 200px);
    margin:6px 40px 22px calc(-1 * var(--k-hang))}
  body.k-article .doc:is(:has(time),:has(.blog-hero)):not(:has(.k-feature)) .k-side .product-screen{max-width:none}
  /* anything wide, or a new section, starts below a floated image; narrow text-ish blocks may sit beside it */
  body.k-article .doc:is(:has(time),:has(.blog-hero)):not(:has(.k-feature)) :is(h2,table,figure:not(.k-hero-fig,.k-side),.k-figure,.k-chart,.k-stats,.k-steps,
    .k-inline-cta,.k-pull,.doc__card,div[class],section:not(.k-takeaways),aside,hr,pre,ol:not([class])){clear:both}
  body.k-article .doc:is(:has(time),:has(.blog-hero)):not(:has(.k-feature)) :is(.k-takeaways,.toc,blockquote){display:flow-root}
  body.k-article .doc:is(:has(time),:has(.blog-hero)):not(:has(.k-feature)) .k-callout{display:block;overflow:hidden}
}
@media (max-width:999px){
  body.k-article .doc:is(:has(time),:has(.blog-hero)):not(:has(.k-feature)) .blog-hero{max-height:380px;width:auto;max-width:100%;margin:0 auto}
  body.k-article .doc:is(:has(time),:has(.blog-hero)):not(:has(.k-feature)) .k-hero-fig{width:auto}
}

/* — section heads: a hairline across the column instead of the gold dash — */
body.k-article .doc:is(:has(time),:has(.blog-hero)):not(:has(.k-feature)) h2{margin:60px 0 16px;padding-top:24px;border-top:1px solid var(--k-rule);font-size:clamp(24px,2.5vw,30px)}
body.k-article .doc:is(:has(time),:has(.blog-hero)):not(:has(.k-feature)) h2::before{display:none}
body.k-article .doc:is(:has(time),:has(.blog-hero)):not(:has(.k-feature)) h3{font-family:var(--sans);font-size:17.5px;font-weight:700;letter-spacing:-.005em;color:var(--ink)}

/* — key takeaways: a ruled box-out, small-caps label, no card — */
body.k-article .k-takeaways{margin:28px 0 34px;padding:16px 0 18px;border:0;border-top:2px solid var(--k-gold);
  border-bottom:1px solid var(--k-rule);border-radius:0;background:none;box-shadow:none}
body.k-article .k-takeaways::before{display:none}
body.k-article .k-takeaways :is(h2,.k-takeaways__h){font-size:11.5px!important;letter-spacing:.18em;padding:0;border:0;margin:0 0 10px!important}
body.k-article .doc:is(:has(time),:has(.blog-hero)):not(:has(.k-feature)) .k-takeaways ul{list-style:none;padding:0;gap:8px}
body.k-article .doc:is(:has(time),:has(.blog-hero)):not(:has(.k-feature)) .k-takeaways li{position:relative;padding-left:20px;font-family:var(--sans);font-size:16px;line-height:1.55;color:var(--ink-2)}
body.k-article .doc:is(:has(time),:has(.blog-hero)):not(:has(.k-feature)) .k-takeaways li::before{content:"";position:absolute;left:0;top:.68em;width:8px;height:1px;background:var(--k-gold)}

/* — callouts: a coloured rule in the margin, not a tinted card with an icon — */
body.k-article .k-callout{display:block;margin:28px 0;padding:2px 0 2px 18px;border:0;border-left:2px solid var(--k-gold);
  border-radius:0;background:none}
body.k-article .k-callout::before{display:none}
body.k-article .k-callout--warn{border-left-color:var(--k-bad)}
body.k-article .k-callout--tip{border-left-color:var(--k-good)}
body.k-article .doc:is(:has(time),:has(.blog-hero)):not(:has(.k-feature)) .k-callout p{font-family:var(--sans);font-size:16px;line-height:1.6;color:var(--ink-2)}

/* — pull quote: serif italic between two rules, left-aligned like print — */
body.k-article .k-pull{margin:40px 0;padding:20px 0 22px;text-align:left;border-top:2px solid var(--k-gold);border-bottom:1px solid var(--k-rule)}
body.k-article .k-pull::before{display:none}
body.k-article .k-pull p{font-size:clamp(22px,2.4vw,27px)!important;line-height:1.32!important;text-wrap:balance}
body.k-article .k-pull cite{margin-top:12px;font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}

/* — steps: big serif numerals and hairlines, no cards (plain <ol>, .k-steps and the older .step-list) — */
body.k-article .doc:is(:has(time),:has(.blog-hero)):not(:has(.k-feature)) :is(ol:not([class]),.k-steps)>li,body.k-article .doc:is(:has(time),:has(.blog-hero)):not(:has(.k-feature)) .step-list>.step-card{
  position:relative;margin:0;padding:15px 0 15px 50px;border:0;border-top:1px solid var(--k-rule);border-radius:0;background:none;box-shadow:none}
body.k-article .doc:is(:has(time),:has(.blog-hero)):not(:has(.k-feature)) :is(ol:not([class]),.k-steps)>li:last-child,body.k-article .doc:is(:has(time),:has(.blog-hero)):not(:has(.k-feature)) .step-list>.step-card:last-child{border-bottom:1px solid var(--k-rule)}
body.k-article .doc:is(:has(time),:has(.blog-hero)):not(:has(.k-feature)) :is(ol:not([class]),.k-steps){gap:0}
body.k-article .doc:is(:has(time),:has(.blog-hero)):not(:has(.k-feature)) :is(ol:not([class]),.k-steps)>li::before,body.k-article .doc:is(:has(time),:has(.blog-hero)):not(:has(.k-feature)) .step-list>.step-card::before{
  content:counter(k-step);position:absolute;left:0;top:13px;width:auto;height:auto;display:block;background:none;border-radius:0;
  font:700 26px/1 var(--k-serif);color:var(--k-gold-text)}
body.k-article .doc:is(:has(time),:has(.blog-hero)):not(:has(.k-feature)) .step-list{counter-reset:k-step;gap:0;margin:22px 0 26px}
body.k-article .doc:is(:has(time),:has(.blog-hero)):not(:has(.k-feature)) .step-list>.step-card{counter-increment:k-step}
body.k-article .doc:is(:has(time),:has(.blog-hero)):not(:has(.k-feature)) .step-list>.step-card h3{margin:2px 0 4px}
body.k-article .doc:is(:has(time),:has(.blog-hero)):not(:has(.k-feature)) .step-list>.step-card p{margin:0}

/* — side-by-side option blocks and box-outs used across the older posts: rules, not cards — */
body.k-article .doc:is(:has(time),:has(.blog-hero)):not(:has(.k-feature)) :is(.forwarding-grid)>section{padding:14px 0 4px;border:0;border-top:2px solid var(--k-gold);border-radius:0;background:none}
body.k-article .doc:is(:has(time),:has(.blog-hero)):not(:has(.k-feature)) :is(.forwarding-grid) :is(p){font-size:17px}
body.k-article .doc:is(:has(time),:has(.blog-hero)):not(:has(.k-feature)) :is(.feature-callout,.doc__card){margin:30px 0;padding:18px 20px 16px;border:0;border-top:2px solid var(--k-gold);
  border-radius:0;background:rgba(191,161,98,.06);box-shadow:none}
body.k-article .doc:is(:has(time),:has(.blog-hero)):not(:has(.k-feature)) :is(.feature-callout,.doc__card) :is(p,li){font-family:var(--sans);font-size:16px;line-height:1.6}
body.k-article .doc:is(:has(time),:has(.blog-hero)):not(:has(.k-feature)) :is(.feature-callout,.doc__card) h3{margin:0 0 6px;color:var(--ink)}
body.k-article .doc:is(:has(time),:has(.blog-hero)):not(:has(.k-feature)) .source-note{font-family:var(--sans);font-size:14px;line-height:1.55;color:var(--ink-3)}

/* — tables: newspaper rules — small-caps header over a gold line, hairline rows, no box — */
body.k-article .doc:is(:has(time),:has(.blog-hero)):not(:has(.k-feature)) table{border:0;border-radius:0;background:none;box-shadow:none;border-top:2px solid var(--k-gold)}
body.k-article .doc:is(:has(time),:has(.blog-hero)):not(:has(.k-feature)) th{background:none;font-size:11.5px;letter-spacing:.12em;color:var(--ink-3);border-bottom:1px solid var(--k-rule-gold)}
body.k-article .doc:is(:has(time),:has(.blog-hero)):not(:has(.k-feature)) td{border-bottom:1px solid var(--k-rule)}
body.k-article .doc:is(:has(time),:has(.blog-hero)):not(:has(.k-feature)) tbody tr:nth-child(even) td{background:none}
body.k-article .doc:is(:has(time),:has(.blog-hero)):not(:has(.k-feature)) tbody tr:hover td{background:rgba(191,161,98,.05)}
body.k-article .doc:is(:has(time),:has(.blog-hero)):not(:has(.k-feature)) :is(th,td){font-family:var(--sans)}
body.k-article .doc:is(:has(time),:has(.blog-hero)):not(:has(.k-feature)) td :is(p,li){font-family:var(--sans);font-size:15px}

/* — stat figures and chart figures: numbers between rules, not tiles — */
body.k-article .k-stats{gap:0;border-top:2px solid var(--k-gold);border-bottom:1px solid var(--k-rule)}
body.k-article .k-stat{padding:16px 18px 14px;border:0;border-left:1px solid var(--k-rule);border-radius:0;background:none;box-shadow:none}
body.k-article .k-stat:first-child{border-left:0;padding-left:0}
body.k-article .k-stat b{font-family:var(--k-serif)}
body.k-article .k-figure{padding:16px 0 18px;border:0;border-top:2px solid var(--k-gold);border-bottom:1px solid var(--k-rule);
  border-radius:0;background:none;box-shadow:none}
body.k-article .doc:is(:has(time),:has(.blog-hero)):not(:has(.k-feature)) .k-figure__t{font-family:var(--sans)}

/* — app screenshots / product figures: the picture and a caption, no presentation card — */
body.k-article .doc:is(:has(time),:has(.blog-hero)):not(:has(.k-feature)) .product-visual{background:none;border:0;box-shadow:none;padding:0;border-radius:0}
body.k-article .doc:is(:has(time),:has(.blog-hero)):not(:has(.k-feature)) .product-visual figcaption{text-align:left;font:400 13px/1.5 var(--sans);color:var(--ink-3);margin-top:10px}
body.k-article .doc:is(:has(time),:has(.blog-hero)):not(:has(.k-feature)) .product-screen img{box-shadow:none;border-color:rgba(242,236,224,.10);border-radius:12px}

/* — the one mid-article download prompt: a ruled line, not a glowing slab — */
body.k-article .k-inline-cta{margin:38px 0;padding:18px 0;border:0;border-top:1px solid var(--k-rule-gold);border-bottom:1px solid var(--k-rule);
  border-radius:0;background:none;box-shadow:none}
body.k-article .doc:is(:has(time),:has(.blog-hero)):not(:has(.k-feature)) .k-inline-cta p{font-family:var(--sans)}

/* — in-page contents box (phones/tablets; the side rail replaces it on wide screens) — */
body.k-article .toc{background:none;box-shadow:none;border:0;border-radius:0;border-top:2px solid var(--k-gold);padding:14px 0 6px}
body.k-article .doc:is(:has(time),:has(.blog-hero)):not(:has(.k-feature)) .toc li{font-family:var(--sans)}

/* — the side contents rail moves to the RIGHT margin, so the left one is free for images — */
.k-toc-rail{left:auto;right:max(20px,calc(50% - 360px - 290px));width:220px}
@media (max-width:1299px){.k-toc-rail{display:none}}
@media (min-width:1240px) and (max-width:1299px){body.k-has-rail .doc .toc{display:block}}

/* — phones: the same grammar, a size down — */
@media (max-width:640px){
  body.k-article .doc:is(:has(time),:has(.blog-hero)):not(:has(.k-feature)) p,body.k-article .doc:is(:has(time),:has(.blog-hero)):not(:has(.k-feature)) li{font-size:17.5px;line-height:1.65}
  body.k-article .doc:is(:has(time),:has(.blog-hero)):not(:has(.k-feature)) :is(.k-dek,.doc__lead,.blog-hero+p,.k-hero-fig+p,.blog-hero+:is(div,article)>p:first-of-type,.k-hero-fig+:is(div,article)>p:first-of-type){font-size:19px}
  body.k-article .doc:is(:has(time),:has(.blog-hero)):not(:has(.k-feature)) h2{margin-top:48px;padding-top:20px}
  body.k-article .k-stat{border-left:0;padding-left:0;border-top:1px solid var(--k-rule)}
  body.k-article .k-stat:first-child{border-top:0}
}
/* editorial pass: fix-ups that must win over the rules above */
@media (min-width:1300px){body.k-article.k-has-rail .doc:is(:has(time),:has(.blog-hero)):not(:has(.k-feature)) .toc,body.k-article.k-has-rail .doc .toc{display:none}}
body.k-article .doc:is(:has(time),:has(.blog-hero)):not(:has(.k-feature)) .toc .toc__h{font:700 11.5px/1.4 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--k-gold-text);margin:0 0 10px}
body.k-article .doc:is(:has(time),:has(.blog-hero)):not(:has(.k-feature)) .k-takeaways ul{margin:0}
body.k-article .doc:is(:has(time),:has(.blog-hero)):not(:has(.k-feature)) .forwarding-grid h3{margin:0 0 6px}
body.k-article .doc:is(:has(time),:has(.blog-hero)):not(:has(.k-feature)) .forwarding-grid{margin:24px 0 26px}
/* a hero that hangs wholly in the margin never intrudes on the column, so the blocks before the next
   section need not clear it (content.js tags them .k-noclear) — no empty band under a short standfirst */
@media (min-width:1000px){body.k-article .doc:is(:has(time),:has(.blog-hero)):not(:has(.k-feature)) .k-noclear.k-noclear{clear:none}
  body.k-article .doc:is(:has(time),:has(.blog-hero)):not(:has(.k-feature)) .k-hero-fig--inline{float:none;margin:10px auto 34px}}
body.k-article .doc:is(:has(time),:has(.blog-hero)):not(:has(.k-feature)) :is(.doc__card,.feature-callout) h2{margin:0 0 10px;padding:0;border:0;font-size:22px}
body.k-article .doc:is(:has(time),:has(.blog-hero)):not(:has(.k-feature)) p.doc__card{font-family:var(--sans);font-size:16px;line-height:1.6}