/* ============================================================
   Chorus long-form pages
   Blog index, blog posts, comparison pages. The landing page is a
   single fixed view with its own inline CSS and does NOT use this.

   House rules Theo set on 2026-08-07, do not quietly undo them:
     - the nav is the landing page's real dock, moved to the top
     - NO horizontal grey rules anywhere
     - NO coloured left borders on callouts, ever
     - one left edge: no margin rail, no hanging numbers
     - type runs ~10% smaller than a usual article scale
     - two CTAs: a real download button mid-article, the site's own
       lockup at the end
   ============================================================ */


/* ============================================================
   DIRECTION A - "BROADSHEET"
   The article as a set document. One measure, one rail, mono
   numerals, and nothing decorative that a printer could not set.
   ============================================================ */

@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/files/f002.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/files/f002.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/files/f002.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --paper:#F4F4F1; --card:#FFFFFF;
  --ink1:#111014; --ink2:#33323A; --ink3:#6C6B73; --ink4:#AEACA6;
  --hairline:rgba(20,18,16,.11); --hairline-soft:rgba(20,18,16,.05);
  --inset:rgba(20,18,16,.045);
  --accent:#3A70F8; --accent-hover:#2A5AE0; --accent-soft:rgba(58,112,248,.10);
  --dock:rgba(255,255,255,.66); --dock-ink:#141319; --dock-hl:rgba(255,255,255,.55);
  --shadow-soft:0 18px 44px rgba(32,30,26,.10); --shadow-tight:0 6px 20px rgba(30,28,24,.06);
  --radius-pill:999px; --ease:cubic-bezier(.16,1,.3,1); --spring:cubic-bezier(.34,1.35,.5,1);
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  /* a camera move, not a thrown sheet: it accelerates away and settles */
  --pan:620ms; --pan-ease:cubic-bezier(.62,.05,.22,1);

  /* the page is set on one grid: a rail for rubrics, a measure for reading */
  --rail:0px; --gap:0px; --measure:660px;
  --pad:26px;
}
@media (prefers-color-scheme:dark){:root{
  --paper:#0B0B0E; --card:#16161C;
  --ink1:#F1EFEA; --ink2:#B9B7B1; --ink3:#83817B; --ink4:#565550;
  --hairline:rgba(255,255,255,.11); --hairline-soft:rgba(255,255,255,.05);
  --inset:rgba(255,255,255,.045);
  --accent:#3A70F8; --accent-hover:#5B86FA; --accent-soft:rgba(58,112,248,.16);
  --dock:rgba(24,24,30,.6); --dock-ink:#F1EFEA; --dock-hl:rgba(255,255,255,.07);
  --shadow-soft:0 24px 60px rgba(0,0,0,.55); --shadow-tight:0 8px 22px rgba(0,0,0,.4);
}}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:var(--paper);color:var(--ink1);overflow-x:hidden;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  font-variant-numeric:tabular-nums}

/* one very faint light spot behind the masthead, so the page is not a flat field */
body::before{content:"";position:fixed;inset:0 0 auto 0;height:620px;pointer-events:none;z-index:0;
  background:radial-gradient(760px 420px at 50% -120px,var(--accent-soft),transparent 68%);opacity:.75}

.skip{position:absolute;left:-9999px;top:0;background:var(--dock-ink);color:var(--paper);
  padding:9px 16px;border-radius:var(--radius-pill);font-size:11.5px;font-weight:500;z-index:60}
.skip:focus{left:16px;top:16px}

/* The dock is translucent by design. On a page that scrolls, that means type
   would slide under it and read through the glass. This scrim gives the dock
   clean paper to sit on and lets the page fade out before it reaches it. */
.topscrim{position:fixed;top:0;left:0;right:0;height:120px;z-index:35;pointer-events:none;
  background:var(--paper);
  -webkit-mask-image:linear-gradient(#000 0,#000 58%,transparent 100%);
  mask-image:linear-gradient(#000 0,#000 58%,transparent 100%)}

/* ================= top nav: the landing page's dock, brought up ================= */
.dockbar{position:fixed;top:16px;left:50%;transform:translate(-50%,0);z-index:40;
  max-width:calc(100vw - 24px);
  animation:dockIn .7s var(--spring) both;animation-delay:.05s}
@keyframes dockIn{from{opacity:0;transform:translate(-50%,-14px)}to{opacity:1;transform:translate(-50%,0)}}
.dock{position:relative;display:flex;padding:5px;background:var(--dock);
  -webkit-backdrop-filter:blur(24px) saturate(1.8);backdrop-filter:blur(24px) saturate(1.8);
  border:1px solid var(--hairline);border-radius:23.5px;overflow:hidden;
  box-shadow:0 1px 0 var(--dock-hl) inset,var(--shadow-soft)}
.docknav{position:relative;display:flex;align-items:center;gap:2px;overflow-x:auto;
  scrollbar-width:none;-ms-overflow-style:none}
.docknav::-webkit-scrollbar{display:none}
.dock a{position:relative;display:inline-flex;align-items:center;justify-content:center;
  text-decoration:none;font-size:14.5px;font-weight:500;color:var(--ink3);letter-spacing:-.005em;
  padding:9px 17px;border-radius:var(--radius-pill);white-space:nowrap;
  transition:color .32s var(--ease),background .32s var(--ease),transform .2s var(--spring)}
.dock a:hover{color:var(--ink1)}
.dock a:active{transform:scale(.94)}
.dock a.on{background:var(--dock-ink);color:var(--paper);box-shadow:0 2px 8px rgba(0,0,0,.18)}
.dock a.buy{color:var(--accent);font-weight:600}
.dock a.buy.on{color:#fff;background:var(--accent)}
.dock a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* the light/dark mark swap is declared once, at the end of the sheet, so it
   always outranks the size rules that set display on the same images */

/* ========== travelling between a guide and the site itself ==========
   The dock is the one thing both kinds of page have. So it is the thing
   that moves: it sits at the TOP here and at the BOTTOM on the landing
   page, and a cross-document view transition carries it down the screen
   while the panel it was pointing at fades up behind it.

   Both documents must opt in and must use the same view-transition-name,
   so index.html carries a matching pair of rules in its inline CSS.
   Browsers without cross-document view transitions simply navigate, and
   anyone who has asked for less motion gets the plain navigation too. */
@view-transition{navigation:auto}
.dockbar{view-transition-name:chorus-dock}

/* the bar travels slowly enough to read as one object moving */
::view-transition-group(chorus-dock){
  animation-duration:560ms;animation-timing-function:cubic-bezier(.16,1,.3,1)}
/* its pills differ between the two pages, so the contents cross-fade
   early while the bar itself is still on its way */
::view-transition-old(chorus-dock),::view-transition-new(chorus-dock){
  animation-duration:260ms;animation-timing-function:cubic-bezier(.16,1,.3,1)}
::view-transition-old(root),::view-transition-new(root){
  animation-duration:420ms;animation-timing-function:cubic-bezier(.16,1,.3,1)}

/* arriving mid-transition, the dock is already on screen: its own
   entrance animation would fight the one carrying it */
html.vt .dockbar{animation:none}

@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
}

/* ---- the pan itself ----
   Old and new do not cross-fade. They travel together as one sheet, the
   outgoing page pushing off screen exactly as the incoming one arrives, so
   at any instant the two tile the viewport with no overlap and no dissolve.
   Direction comes from js/canvas-nav.js as data-vt on <html>. */
@keyframes canvasOutDown{from{transform:translateY(0)}to{transform:translateY(100%)}}
@keyframes canvasInDown{from{transform:translateY(-100%)}to{transform:translateY(0)}}
@keyframes canvasOutUp{from{transform:translateY(0)}to{transform:translateY(-100%)}}
@keyframes canvasInUp{from{transform:translateY(100%)}to{transform:translateY(0)}}

/* both sheets stay fully opaque throughout: any blending would read as a
   fade, which is the thing this replaces */
html[data-vt]::view-transition-old(root),
html[data-vt]::view-transition-new(root){mix-blend-mode:normal;opacity:1}

html[data-vt="down"]::view-transition-old(root){animation:canvasOutDown var(--pan) var(--pan-ease) both}
html[data-vt="down"]::view-transition-new(root){animation:canvasInDown var(--pan) var(--pan-ease) both}
html[data-vt="up"]::view-transition-old(root){animation:canvasOutUp var(--pan) var(--pan-ease) both}
html[data-vt="up"]::view-transition-new(root){animation:canvasInUp var(--pan) var(--pan-ease) both}

/* the dock rides the same clock and the same curve, so it reads as part of
   the sheet rather than an object flying across it */
html[data-vt]::view-transition-group(chorus-dock){
  animation-duration:var(--pan);animation-timing-function:var(--pan-ease)}
html[data-vt]::view-transition-old(chorus-dock),
html[data-vt]::view-transition-new(chorus-dock){
  animation-duration:220ms;animation-timing-function:var(--pan-ease)}

/* ================= the document ================= */
.doc{position:relative;z-index:1;
  max-width:calc(var(--rail) + var(--gap) + var(--measure) + var(--pad) * 2);
  margin:0 auto;padding:118px var(--pad) 88px}
.grid{display:grid;grid-template-columns:minmax(0,var(--measure));justify-content:center}
.grid > *{grid-column:1}

/* ---------- masthead ---------- */
.masthead{padding-bottom:0;margin-bottom:52px}
.masthead .kicker{grid-column:1;text-align:left;display:block;margin-bottom:14px;
  font-size:10.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--accent)}
.masthead h1{grid-column:1;font-size:clamp(27px,3.7vw,38px);font-weight:600;
  letter-spacing:-.03em;line-height:1.08;text-wrap:balance}
.masthead .deck{grid-column:1;margin-top:20px;font-size:17.5px;line-height:1.58;
  letter-spacing:-.011em;color:var(--ink2);text-wrap:pretty}
.masthead .meta{grid-column:1;margin-top:26px;display:flex;align-items:center;
  gap:9px;flex-wrap:wrap;font-size:11px;color:var(--ink4);letter-spacing:.005em}
.masthead .meta .dot{width:3px;height:3px;border-radius:50%;background:var(--ink4);opacity:.7;flex:none}

/* ---------- article body ---------- */
.article{row-gap:0}
.article p{font-size:15.5px;line-height:1.72;color:var(--ink2);margin-bottom:21px;text-wrap:pretty}
/* the lead: one size up, in the darker ink, so the piece opens rather than starts */
.article > p.lead{font-size:17px;line-height:1.66;letter-spacing:-.009em;color:var(--ink1);margin-bottom:24px}
.article b,.article strong{color:var(--ink1);font-weight:600}
.article i{font-style:italic}
/* only prose links are underlined: buttons and lists set their own rules */
.article p a,.article li a,.note a{color:inherit;text-decoration:underline;
  text-decoration-thickness:1px;text-underline-offset:.19em;text-decoration-color:var(--ink4);
  transition:text-decoration-color .25s var(--ease),color .25s var(--ease)}
.article p a:hover,.article li a:hover,.note a:hover{text-decoration-color:var(--ink1)}
.article a:focus-visible,.rel a:focus-visible,.midcta a:focus-visible{
  outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}

/* Vertical rhythm: margins do not collapse between grid items, so the space
   before every h2 is set to the same 76px whatever precedes it. */
.article h2{position:relative;margin:55px 0 18px;font-size:22.5px;font-weight:600;
  letter-spacing:-.021em;line-height:1.24;color:var(--ink1);text-wrap:balance;scroll-margin-top:110px}
/* a comparison page opens straight on a heading rather than a lead paragraph;
   without this it inherits the masthead's gap on top of the h2's own */
.article > h2:first-child{margin-top:0}
.article ul + h2,.article ol + h2{margin-top:52px}
.article .note + h2,.article .tablewrap + h2{margin-top:40px}
.article .midcta + h2{margin-top:24px}
.article h3{margin:38px 0 12px;font-size:16px;font-weight:600;letter-spacing:-.013em;color:var(--ink1)}

.article ul,.article ol{list-style:none;margin:0 0 24px}
.article ol{counter-reset:step}
.article li{position:relative;padding-left:38px;margin-bottom:13px;
  font-size:15.5px;line-height:1.72;color:var(--ink2);text-wrap:pretty}
.article ol li::before{counter-increment:step;content:counter(step,decimal-leading-zero);
  position:absolute;left:0;top:.28em;font:500 12px/1.4 var(--mono);letter-spacing:.04em;
  color:var(--ink4);font-variant-numeric:tabular-nums}
.article ul li::before{content:"";position:absolute;left:5px;top:.74em;width:4px;height:4px;
  border-radius:50%;background:var(--ink4)}

/* ---------- the note: an inset, not a box ----------
   Cards on this site are white and sit above the paper. A note does the
   opposite: it is pressed INTO the paper, a shade darker, with no rule of
   any kind. The rubric in the rail names it. No colour is used to sort one
   kind of note from another - the word does that job. */
.note{grid-column:1;margin:15px 0 36px;padding:20px 22px;
  background:var(--inset);border-radius:14px}
.note .rub{display:block;margin-bottom:9px;
  font-size:9.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--ink4)}
.note p{font-size:14.5px;line-height:1.66;color:var(--ink2);margin:0}
.note p + p{margin-top:11px}

/* ---------- table ---------- */
.tablewrap{grid-column:1/-1;position:relative;margin:8px 0 34px;overflow-x:auto;
  -webkit-overflow-scrolling:touch;scrollbar-width:thin}
.tablewrap.fades{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent 100%);
  mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent 100%)}
.tablewrap.fades.ended{-webkit-mask-image:none;mask-image:none}
table{border-collapse:collapse;width:100%;min-width:568px;font-size:13.5px}
caption{caption-side:top;text-align:left;font-size:10px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink4);padding-bottom:14px}
th,td{text-align:left;padding:14px 16px;vertical-align:top;color:var(--ink2);line-height:1.5}
thead th{font-size:10.5px;font-weight:600;letter-spacing:.085em;text-transform:uppercase;
  color:var(--ink3);white-space:nowrap;padding-bottom:11px}
thead th.me{color:var(--accent)}
tbody th[scope=row]{font-weight:500;color:var(--ink1);width:38%}
tbody tr td,tbody tr th{padding-top:13px;padding-bottom:13px}
tbody tr:nth-child(even){background:var(--inset)}
tbody tr:last-child th,tbody tr:last-child td{padding-bottom:0}
th.me,td.yes{background:var(--accent-soft)}
thead th.me{border-radius:10px 10px 0 0}
tbody tr:last-child td.yes{border-radius:0 0 10px 10px;padding-bottom:14px}
.y{color:var(--accent);font-weight:600}
.n{color:var(--ink4)}

/* ---------- mid-article CTA: the same inset as a note, but it asks ----------
   Half the readers never reach the end of a 1,300-word guide, so the offer is
   made here too. Quieter than the coda: one button, no second path, no meta. */
.midcta{grid-column:1;display:flex;align-items:center;justify-content:space-between;
  gap:24px;flex-wrap:wrap;margin:34px 0 46px;padding:22px 24px;
  background:var(--inset);border-radius:14px}
.midcta .body{display:contents}
.midcta .say{min-width:0}
.midcta strong{display:block;font-size:15px;font-weight:600;letter-spacing:-.012em;color:var(--ink1)}
.midcta p{font-size:13.5px;line-height:1.5;color:var(--ink3);margin:4px 0 0}
.midcta .go{display:inline-flex;align-items:center;justify-content:center;gap:8px;flex:none;
  height:42px;padding:0 20px;border-radius:var(--radius-pill);
  background:var(--accent);color:#fff;text-decoration:none;
  font-size:13.5px;font-weight:600;letter-spacing:-.008em;
  transition:background .25s var(--ease)}
.midcta .go:hover{background:var(--accent-hover)}
.midcta .go svg{width:14px;height:14px;flex:none;margin-top:-2px}
@media (max-width:900px){.midcta .body{flex-direction:column;align-items:flex-start}}

/* ---------- FAQ ---------- */
.faq{margin-top:8px}
.faq details{margin-bottom:2px}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;
  justify-content:space-between;gap:24px;padding:19px 0;
  font-size:15.5px;font-weight:500;line-height:1.45;letter-spacing:-.011em;color:var(--ink1);
  transition:color .25s var(--ease)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--accent)}
.faq summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.pm{position:relative;flex:none;width:12px;height:12px;margin-top:6px}
.pm::before,.pm::after{content:"";position:absolute;background:var(--ink3);
  transition:transform .34s var(--ease)}
.pm::before{left:0;top:5.5px;width:12px;height:1px}
.pm::after{top:0;left:5.5px;width:1px;height:12px}
.faq details[open] .pm::after{transform:scaleY(0)}
.faq details > p{font-size:14.5px;line-height:1.68;color:var(--ink2);padding:0 40px 22px 0;margin:0}
.faq details[open] > p{animation:faIn .34s var(--ease) both}
@keyframes faIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}

/* ---------- end CTA: the site's own, on bare paper ---------- */
.endcta{display:flex;flex-direction:column;align-items:center;text-align:center;
  margin-top:64px;padding-top:0}
/* the mark sits beside the words, so the lockup runs to about the width of the
   two buttons underneath it rather than stacking into a tall column */
.endcta .lock{display:flex;align-items:center;gap:20px;text-align:left}
.endcta .mk img{width:62px;height:62px;display:block}
.endcta h2{font-size:clamp(22px,2.5vw,27px);font-weight:600;letter-spacing:-.024em;line-height:1.15}
.endcta .sub{margin-top:7px;font-size:14.5px;line-height:1.5;color:var(--ink2)}
@media (max-width:560px){.endcta .lock{flex-direction:column;text-align:center;gap:16px}}
.paths{display:flex;align-items:flex-start;justify-content:center;gap:16px;margin-top:46px}
.path{display:flex;flex-direction:column;align-items:center;gap:14px;text-decoration:none;
  transition:transform .22s var(--spring)}
.path:active{transform:scale(.985)}
.path .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  width:232px;height:50px;border-radius:var(--radius-pill);
  font-size:14px;font-weight:600;letter-spacing:-.008em;
  transition:background .25s var(--ease),border-color .25s var(--ease)}
.path .btn svg{width:16px;height:16px;display:block;margin-top:-2px;flex:none}
.path .m{font-size:11.5px;line-height:1.4;color:var(--ink3);transition:color .3s var(--ease)}
.path:hover .m{color:var(--ink2)}
.path:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:16px}
.path.ghost .btn{background:var(--card);color:var(--ink1);border:1px solid var(--hairline)}
.path.ghost:hover .btn{border-color:rgba(20,18,16,.24)}
@media (prefers-color-scheme:dark){.path.ghost:hover .btn{border-color:rgba(255,255,255,.26)}}
.path.solid .btn{background:var(--accent);color:#fff;border:1px solid transparent}
.path.solid:hover .btn{background:var(--accent-hover)}

/* ---------- keep reading ---------- */
/* Keep reading sits directly under the FAQ, and at 15.5px/500 in near-black
   the two read as the same list twice. So it is deliberately quieter: two
   columns, grey rather than ink, lighter and a size down. It should read as
   a way out of the page, not another set of questions to open. */
.rel{margin-top:88px;display:grid;grid-template-columns:repeat(2,1fr);column-gap:36px}
.rel h2{grid-column:1/-1;font-size:10.5px;font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink4);margin-bottom:6px}
.rel a{display:block;
  padding:12px 0;text-decoration:none;
  font-size:14px;font-weight:400;letter-spacing:-.008em;color:var(--ink3);
  transition:color .25s var(--ease)}
.rel a:hover{color:var(--accent)}
.rel a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
@media (max-width:640px){.rel{grid-template-columns:1fr}}

.pagefoot{margin-top:80px;padding-top:0;text-align:left;
  font-size:10.5px;line-height:1.7;letter-spacing:.005em;color:var(--ink4);opacity:.62}
.pagefoot a{color:inherit;text-decoration:none;transition:color .25s var(--ease)}
.pagefoot a:hover{color:var(--ink1)}
.pagefoot .fdot{padding:0 4px}

/* ================= responsive ================= */
/* the rail folds away before the measure is ever squeezed */
@media (max-width:940px){
  :root{--rail:0px;--gap:0px}
  .grid,.note,.midcta{grid-template-columns:minmax(0,1fr)}
  .masthead .kicker,.masthead h1,.masthead .deck,.masthead .meta{grid-column:1;grid-row:auto}
  .masthead .kicker{text-align:left;padding-top:0;margin-bottom:14px}
  .masthead .deck{margin-top:16px}
  .article h2 .n{position:static;display:block;margin-bottom:9px}
  .note .rub{text-align:left;padding-top:0;margin-bottom:10px}
}
@media (max-width:760px){
  :root{--pad:20px}
  .doc{padding:96px var(--pad) 72px}
  .dockbar{top:12px}
  .topscrim{height:112px}
  .dock a{font-size:12px;padding:9px 13px}
  .docknav{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 10px,#000 calc(100% - 10px),transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 10px,#000 calc(100% - 10px),transparent 100%)}
  /* the inset gives up its corners and runs edge to edge, like a printed band */
  .note{border-radius:0;margin-bottom:32px}
  .masthead .deck{font-size:16px}
  .article > p.lead{font-size:16px}
  .article h2{font-size:20px;margin-top:56px}
  .paths{flex-direction:column;align-items:center;gap:24px;width:100%}
  .path{width:100%}
  .path .btn{width:min(300px,100%)}
  .endcta{margin-top:72px;padding-top:64px}
  .endcta .mk img{width:66px;height:66px}
  .faq details > p{padding-right:0}
}
@media (max-width:420px){
  .article p,.article li{font-size:15px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
}

/* ---------- the mark swap, last word ---------- */
.mk img.dk,.dock img.dk{display:none}
@media (prefers-color-scheme:dark){
  .mk img.lt,.dock img.lt{display:none}
  .mk img.dk,.dock img.dk{display:block}
}

/* ================= blog index =================
   The index is a wider page than an article: a topic grid, then the guides.
   The masthead keeps the reading measure while the grids take the full
   width, and both start at the same x, so there is still ONE left edge.
   Card wording matches the landing page's Features panel: a short name and
   one tight sentence. */
.doc.wide{max-width:1052px}
.doc.wide .grid{justify-content:start}
.doc.wide .sect.grid{grid-template-columns:minmax(0,1fr)}

.sect{margin-top:56px}
.sect-h{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:0 0 18px}
.sect-h h2{font-size:19px;font-weight:600;letter-spacing:-.018em;color:var(--ink1)}
.sect-h .all{font-size:13px;color:var(--ink3);background:none;border:0;padding:0;
  font-family:inherit;cursor:pointer;transition:color .2s var(--ease)}
.sect-h .all:hover{color:var(--accent)}
.sect-h .all[hidden]{display:none}
.sect-h .all:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

/* --- topic cards: icon, name, one sentence --- */
.cats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.cat{display:flex;gap:14px;align-items:flex-start;text-align:left;padding:20px;
  border-radius:16px;background:var(--card);border:1px solid var(--hairline);
  box-shadow:var(--shadow-tight);cursor:pointer;font-family:inherit;color:inherit;
  transition:transform .32s var(--ease),box-shadow .32s var(--ease),border-color .32s var(--ease)}
.cat .ic{flex:0 0 auto;width:38px;height:38px;border-radius:11px;display:inline-flex;
  align-items:center;justify-content:center;color:var(--accent);background:var(--accent-soft)}
.cat .ic svg{width:19px;height:19px}
.cat .tx{display:flex;flex-direction:column;min-width:0}
.cat .t{font-size:15px;font-weight:600;letter-spacing:-.014em;color:var(--ink1);margin-bottom:4px}
.cat .d{font-size:12.5px;line-height:1.5;color:var(--ink3)}
.cat:hover{transform:translateY(-3px);border-color:rgba(58,112,248,.34);
  box-shadow:0 14px 34px rgba(30,28,24,.10)}
.cat:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.cat[aria-pressed="true"]{border-color:var(--accent);
  box-shadow:0 0 0 1px var(--accent) inset,var(--shadow-tight)}

/* --- the guides themselves --- */
.pcs{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.pc{display:flex;flex-direction:column;padding:17px 19px 15px;border-radius:16px;
  background:var(--card);border:1px solid var(--hairline);box-shadow:var(--shadow-tight);
  text-decoration:none;color:inherit;
  transition:transform .32s var(--ease),box-shadow .32s var(--ease),border-color .32s var(--ease)}
.pc:hover{transform:translateY(-3px);border-color:rgba(58,112,248,.34);
  box-shadow:0 14px 34px rgba(30,28,24,.10)}
.pc:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.pc-cat{font-size:10.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--accent);margin-bottom:8px}
.pc-t{font-size:15.5px;font-weight:600;line-height:1.35;letter-spacing:-.014em;
  color:var(--ink1);margin-bottom:7px;text-wrap:balance}
/* a taste of the piece, never more: two lines, then it stops */
.pc-x{font-size:12.5px;line-height:1.5;color:var(--ink3);margin-bottom:13px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pc-m{margin-top:auto;font-size:11.5px;color:var(--ink4)}
.pc[hidden]{display:none}
.empty{font-size:14px;color:var(--ink3);padding:20px 0}
.empty[hidden]{display:none}

@media (max-width:980px){.cats,.pcs{grid-template-columns:repeat(2,1fr)}}
@media (max-width:660px){.cats,.pcs{grid-template-columns:1fr}}