/*
  The guide stylesheet. Lifted verbatim from docs.html's inlined <style> so the
  two read as one surface, minus the consent-card rules — guide pages carry no
  analytics tag (www/README.md, Analytics).

  This is the ONE place www/ deviates from "CSS is inlined in each page", and
  deliberately: that rule keeps a three-page site dependency-free, but a growing
  article surface would mean the same 200 lines copied into every new guide, and
  the copies rot. One cached file, still no build step.
*/
:root{
  --bg:#0b0d12; --panel:#171a21; --line:#333947; --line-soft:#1e2330;
  --text:#e7e9ee; --dim:#9aa2b1; --faint:#7b8494;
  --brand:#7086ff; --brand-hi:#a3b1ff;
  /* Action and live state only — BRANDING.md §2. */
  --ember:#f7803b; --ember-hi:#f7ad82;
  --green:#34d399; --amber:#fbbf24;
  --sans:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);
  font-size:16.5px;line-height:1.68;-webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;font-feature-settings:"cv02","cv03","cv04","cv11";
}
a{color:var(--brand);text-decoration:none}
a:hover{color:var(--brand-hi)}
h1,h2,h3{letter-spacing:-.024em;line-height:1.2;font-weight:650}
p,ul,ol{margin:0}
::selection{background:rgba(112,134,255,.28)}

header.nav{
  position:sticky;top:0;z-index:20;background:rgba(11,13,18,.78);
  backdrop-filter:saturate(140%) blur(14px);-webkit-backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid var(--line-soft);
}
.nav-in{display:flex;align-items:center;gap:20px;height:60px;max-width:1120px;margin:0 auto;padding:0 24px}
.brand{display:flex;align-items:center;gap:10px;color:var(--text);font-weight:650;letter-spacing:-.02em}
.brand img{width:24px;height:24px}
.back{margin-left:auto;color:var(--dim);font-size:14.5px}
.back:hover{color:var(--text)}

.page{max-width:760px;margin:0 auto;padding:64px 24px 96px}
.kicker{font-family:var(--mono);font-size:12.5px;color:var(--brand);text-transform:uppercase;letter-spacing:.11em}
h1{font-size:clamp(32px,5vw,44px);margin:16px 0 0;letter-spacing:-.032em}
.lede{margin-top:18px;color:var(--dim);font-size:18px}

h2{
  font-size:24px;margin:64px 0 0;padding-top:28px;border-top:1px solid var(--line-soft);
  scroll-margin-top:78px;
}
h2 .n{font-family:var(--mono);font-size:14px;color:var(--faint);margin-right:12px;font-weight:400}
h3{font-size:17px;margin:34px 0 0}
p{margin-top:16px;color:var(--dim)}
p strong,li strong{color:var(--text);font-weight:550}

ol.steps{margin:22px 0 0;padding:0;list-style:none;counter-reset:s}
ol.steps > li{
  counter-increment:s;position:relative;padding:0 0 0 46px;margin-top:26px;color:var(--dim);
}
ol.steps > li::before{
  content:counter(s,decimal-leading-zero);position:absolute;left:0;top:1px;
  font-family:var(--mono);font-size:12px;color:var(--brand);
  border:1px solid rgba(112,134,255,.3);border-radius:6px;padding:2px 7px;
}
/* Only the leading <b> is the step title — inline <b> further in stays inline. */
ol.steps > li > b:first-child{color:var(--text);font-weight:600;display:block;margin-bottom:4px;font-size:16.5px}
ol.steps > li b{color:var(--text);font-weight:600}

ul.plain{margin:16px 0 0;padding:0;list-style:none;display:grid;gap:11px}
ul.plain li{position:relative;padding-left:22px;color:var(--dim)}
ul.plain li::before{
  content:"";position:absolute;left:0;top:10px;width:8px;height:8px;border-radius:2px;
  background:linear-gradient(135deg,var(--brand-hi),var(--brand));
}

code{
  font-family:var(--mono);font-size:.86em;background:#10131a;
  border:1px solid var(--line);border-radius:5px;padding:1.5px 6px;color:var(--text);
}
pre{
  margin:20px 0 0;padding:16px 18px;background:#10131a;border:1px solid var(--line);
  border-radius:10px;overflow-x:auto;font-family:var(--mono);font-size:13.5px;
  line-height:1.65;color:var(--dim);
}
pre code{background:none;border:0;padding:0;font-size:inherit}

.note{
  margin-top:24px;padding:18px 20px;border:1px solid var(--line);border-left:2px solid var(--brand);
  border-radius:0 10px 10px 0;background:var(--panel);color:var(--dim);font-size:15.5px;
}
.note.warn{border-left-color:var(--amber)}
.note b{color:var(--text);font-weight:600}

table{width:100%;border-collapse:collapse;margin-top:22px;font-size:15px}
th,td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line-soft);vertical-align:top}
th{
  font-family:var(--mono);font-size:11.5px;text-transform:uppercase;letter-spacing:.07em;
  color:var(--faint);font-weight:400;border-bottom-color:var(--line);
}
td{color:var(--dim)}
td:first-child{color:var(--text);white-space:nowrap}
.tw{overflow-x:auto}

.pill{
  display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.05em;
  text-transform:uppercase;padding:2px 8px;border-radius:999px;border:1px solid var(--line);
  color:var(--faint);
}
.pill.good{color:var(--green);border-color:rgba(52,211,153,.35)}
.pill.mid{color:var(--amber);border-color:rgba(251,191,36,.35)}
.pill.bad{color:#f87171;border-color:rgba(248,113,113,.35)}

footer{border-top:1px solid var(--line-soft);margin-top:80px;padding-top:32px;color:var(--faint);font-size:14.5px}
footer a{color:var(--dim)}


@media (max-width:700px){
  body{font-size:16px}
  .page{padding:44px 20px 72px}
  h2{margin-top:52px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ---------------------------------------------------------- guide additions
   Everything above is docs.html's stylesheet. Below is what an article surface
   needs and a single install page did not: the hub's card grid, an article
   byline, and the stat row the data study reports its numbers in. */

.crumb{font-size:14px;color:var(--faint)}
.crumb a{color:var(--dim)}
.byline{margin-top:20px;font-family:var(--mono);font-size:12.5px;color:var(--faint);
  text-transform:uppercase;letter-spacing:.07em}

.cards{display:grid;gap:14px;margin-top:32px}
@media (min-width:720px){.cards{grid-template-columns:1fr 1fr}}
.card{
  display:block;padding:20px 22px;background:var(--panel);border:1px solid var(--line);
  border-radius:12px;transition:border-color .15s;
}
.card:hover{border-color:var(--brand)}
.card b{display:block;color:var(--text);font-size:17px;font-weight:600;letter-spacing:-.02em}
.card span{display:block;margin-top:7px;color:var(--dim);font-size:15px;line-height:1.55}

/* The study's headline numbers. Grid rather than a table: these are four facts,
   not four rows of one thing, and they must stay readable on a phone. */
.stats{display:grid;gap:12px;margin-top:26px;grid-template-columns:repeat(2,1fr)}
@media (min-width:720px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat{padding:16px 18px;background:var(--panel);border:1px solid var(--line);border-radius:10px}
.stat b{display:block;font-size:23px;color:var(--text);letter-spacing:-.03em;font-weight:650}
.stat span{display:block;margin-top:4px;font-size:13px;color:var(--faint);line-height:1.45}

.bars{margin-top:24px;display:grid;gap:10px}
.bar{display:grid;grid-template-columns:120px 1fr 52px;align-items:center;gap:12px;font-size:14.5px}
.bar-label{color:var(--dim)}
/* A measured bar is ink, as every measurement in the app is: the brand's two
   hues are kept for the chrome and the action, and cyan, which drew this
   until 2026-09-28, is retired. */
.bar-track{display:block;height:9px;border-radius:999px;background:var(--dim);}
.bar-val{font-family:var(--mono);font-size:13px;color:var(--text);text-align:right}
@media (max-width:560px){.bar{grid-template-columns:96px 1fr 46px;font-size:13.5px}}

/* ------------------------------------------------------- research articles
   The standing credibility block every /research/ article opens with. Same
   corpus sentence on all of them, one article-specific finding — so a reader
   (or a model quoting the page) gets the basis and the claim together, in the
   first thing after the headline. Deliberately states the corpus in round
   numbers; the exact figures are not public. */
.basis{
  margin-top:26px;padding:18px 20px;border-radius:12px;background:var(--panel);
  border:1px solid var(--line);border-left:2px solid var(--brand);
  font-size:15.5px;color:var(--dim);line-height:1.6;
}
.basis b{color:var(--text);font-weight:600}
.basis .found{display:block;margin-top:10px;padding-top:10px;border-top:1px solid var(--line-soft);color:var(--text)}

/* --------------------------------------------------------- article banners
   One 1600x600 photo per article, sitting under the intro as a breather before
   the body starts. Unsplash's licence does not require attribution; we credit
   anyway, photographer first, because that is the point of crediting.

   Not lazy-loaded: it is the largest element near the top of the page, so it is
   almost always the LCP candidate, and deferring it would make the page measure
   slower for no bandwidth saving. */
.banner{margin:32px 0 0;padding:0}
.banner img{
  display:block;width:100%;height:auto;aspect-ratio:8/3;object-fit:cover;
  border-radius:12px;border:1px solid var(--line);background:var(--panel);
}
.banner figcaption{
  margin-top:9px;font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--faint);
}
.banner figcaption a{color:var(--dim)}
.banner figcaption a:hover{color:var(--text)}
@media (max-width:700px){ .banner img{aspect-ratio:3/2} }

/* ------------------------------------------------- the "where we fit" panel
   Every article closes with this. It is the one promotional block on an
   otherwise editorial page, so it is boxed and badged rather than blended in —
   a reader should be able to see where the guide stops and the pitch starts.
   The h2 stays a real heading so the document outline is unchanged. */
.mrbox{
  margin:56px 0 0;padding:22px 24px 20px;border-radius:14px;
  background:linear-gradient(180deg,rgba(112,134,255,.09),rgba(163,177,255,.06));
  border:1px solid var(--line);
}
.mrbox h2{
  display:flex;align-items:center;gap:11px;
  margin:0;padding:0;border-top:0;font-size:19px;
}
.mrbox h2 img{width:26px;height:26px;flex:none}
.mrbox p{margin-top:12px;color:var(--dim)}
.mrbox p:last-child{margin-top:16px}
.mrbox-cta{
  display:inline-block;font-weight:600;padding:9px 16px;border-radius:9px;
  background:var(--ember);color:#0b0d12;
}
.mrbox-cta:hover{background:var(--ember-hi);color:#0b0d12}

/* ------------------------------------------------------ research citation
   Research pages only. Says the work may be quoted and linked — being cited is
   the point of publishing it — and states plainly whose data and whose reading
   it is, and that the figures move as the corpus grows. */
.cite{
  margin:40px 0 0;padding:18px 20px;border:1px dashed var(--line);
  border-radius:12px;font-size:14.5px;color:var(--faint);line-height:1.6;
}
.cite b{color:var(--dim);font-weight:600}
.cite p{margin:0;color:inherit;font-size:inherit}
.cite p+p{margin-top:10px}
.cite a{color:var(--dim)}


/* --------------------------------------------------------------- site nav
   The same header on every page. Three grouped menus mirroring the footer's
   columns, plus Download and Sign in as their own top-level items.

   No JavaScript: `:hover` opens it for a pointer and `:focus-within` opens it
   for keyboard and touch, so the menu works with scripting off and the links
   are in the HTML regardless — which is what a crawler reads. */
.nav-links{display:flex;align-items:center;gap:26px;margin-left:auto;font-size:15px}
.navgroup{position:relative;display:flex;align-items:center}
.navtop{
  font:inherit;font-size:15px;font-weight:450;line-height:1;
  color:var(--dim);background:none;border:0;padding:0;cursor:pointer;
  display:inline-flex;align-items:center;gap:5px;white-space:nowrap;
  transition:color .15s;
}
a.navtop{text-decoration:none}
.navtop:hover,.navgroup:hover .navtop,.navgroup:focus-within .navtop{color:var(--text)}
.navtop::after{content:"";width:0;height:0;border:3.5px solid transparent;border-top-color:currentColor;margin-top:2px}
a.navtop::after{display:none}
/* The pointer has to cross the gap between the button and the menu without the
   menu closing under it. */
.navgroup::after{content:"";position:absolute;left:0;right:0;top:100%;height:14px}
.navmenu{
  position:absolute;top:calc(100% + 13px);left:50%;translate:-50% 0;
  padding:9px;border-radius:13px;
  background:var(--panel);border:1px solid var(--line);
  box-shadow:0 0 0 1px rgba(255,255,255,.05),0 20px 52px -18px rgba(0,0,0,.92);
  opacity:0;visibility:hidden;transition:opacity .14s,visibility .14s;
  z-index:60;
}
.navgroup:hover .navmenu,.navgroup:focus-within .navmenu{opacity:1;visibility:visible}
.navmenu a{
  display:block;padding:8px 12px;border-radius:8px;
  color:var(--dim);font-size:14.5px;white-space:nowrap;text-decoration:none;
}
.navmenu a:hover{background:var(--panel-2,#1e2333);color:var(--text)}
.navcols{display:grid;grid-template-columns:1fr 1fr;gap:0 10px}
.navmenu .navhead{
  margin:6px 12px 5px;font-family:var(--mono);font-size:10px;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:var(--faint);
}
.navmenu .sep{display:block;margin:6px 8px 0;padding-top:7px;border-top:1px solid var(--line-soft)}
.signin{color:var(--dim);font-size:15px;font-weight:450;white-space:nowrap;transition:color .15s}
.signin:hover{color:var(--text)}
@media (max-width:1000px){
  .nav-links{gap:18px}
}
@media (max-width:860px){
  /* The phone is not a surface we push: the header keeps the brand and the one
     CTA, and the footer carries every link the menus hold. */
  .nav-links,.signin{display:none}
}

:root{--panel-2:#1e2333}
.btn{display:inline-flex;align-items:center;padding:8px 15px;border-radius:8px;font:inherit;font-size:14px;font-weight:550;border:1px solid transparent;white-space:nowrap;text-decoration:none;transition:background .15s}
.btn-primary{background:var(--brand);color:#0b0d12}
.btn-primary:hover{background:var(--brand-hi);color:#0b0d12}

/* ----------------------------------------------------------- quick nav
   A rail of the section's other pages, so moving between two guides does not
   mean going back out to the hub and in again. Fixed rather than in the flow:
   `.page` is a centred 760px column and wrapping 37 pages in a grid to make
   room would be a far larger change than this earns.

   Shown only when there is genuinely room beside that column — at 1280px the
   column starts at 260px, so a 212px rail at 24px clears it. Below that the
   header's dropdowns and the footer carry the same links. */
.sidenav{display:none}
@media (min-width:1280px){
  .sidenav{
    display:block;position:fixed;top:92px;left:24px;width:212px;z-index:10;
    max-height:calc(100vh - 132px);overflow-y:auto;overscroll-behavior:contain;
  }
  .sidenav::-webkit-scrollbar{width:6px}
  .sidenav::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
}
@media (min-width:1560px){
  /* Once the viewport is wide enough, sit the rail against the column rather
     than against the window edge — a rail 400px away from what it belongs to
     reads as unrelated furniture. */
  .sidenav{left:calc(50% - 590px)}
}
.sidenav-in{padding-right:6px}
.sidenav .navtitle{margin:0 0 12px;font-size:14px;font-weight:700;letter-spacing:-.01em}
.sidenav .navtitle a{color:var(--text)}
.sidenav .navhead{
  margin:16px 0 6px;font-family:var(--mono);font-size:9.5px;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:var(--faint);
}
.sidenav a{
  display:block;padding:5px 9px;margin-left:-9px;border-radius:7px;
  color:var(--dim);font-size:13.5px;line-height:1.4;text-decoration:none;
}
.sidenav a:hover{color:var(--text);background:var(--panel)}
/* The current page is the one thing the rail has to answer at a glance. */
.sidenav a[aria-current="page"]{
  color:var(--text);font-weight:550;
  box-shadow:inset 2px 0 0 var(--brand);background:var(--panel);
}

/* ------------------------------------------------------------ site footer
   The same sitemap footer the landing page carries, so every article ends
   with a way into the other three surfaces rather than a four-link row.
   The internal link graph was the thin part of SEO_AUDIT.md §3.4, and this
   is most of the fix: 37 pages that each link the hubs and their best pages. */
footer .foot-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:30px 26px;
  margin:0;padding:0;border:0;
}
footer .foot-col .navtitle{
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);margin:0 0 13px;font-weight:500;
}
/* A heading that links must look like a heading that does not. `font:inherit`
   is the load-bearing part: without it the anchor takes `.foot-col a`'s
   14.5px body size and the linked columns sat visibly larger than the
   unlinked one. */
footer .foot-col .navtitle a{color:var(--faint);font:inherit;letter-spacing:inherit}
footer .foot-col .navtitle a:hover{color:var(--text)}
footer .foot-col ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
footer .foot-col a{color:var(--dim);font-size:14.5px}
footer .foot-col a:hover{color:var(--text)}
@media (max-width:700px){
  footer .foot-grid{grid-template-columns:1fr 1fr;gap:26px 20px}
}

/* ------------------------------------------------------------- visible FAQ
   Every article's FAQPage JSON-LD is mirrored word for word by this block —
   schema that disagrees with the visible page is a manual-action risk
   (www/README.md, SEO §2) — so the two are edited together or not at all. */
.faq h3{margin:22px 0 0;font-size:16.5px}
.faq p{margin-top:8px;color:var(--dim)}

/* mr:chrome */
/* GENERATED by scripts/sync_www_chrome.py — edit it there, not here. */
/* ---------------------------------------------------------------- the burger
   Hidden wherever .nav-links is shown; they are the same links in two shapes. */
.navburger{
  display:none;align-items:center;justify-content:center;
  margin-left:4px;padding:6px;border-radius:8px;color:var(--dim);
}
.navburger:hover{color:var(--text);background:var(--panel)}

/* -------------------------------------------------------------- the drawer
   The phone's only navigation, and deliberately the whole site: every tool,
   guide and study, folded into four sections. A reader on a phone has no hover
   menu and no quick-nav rail, so "what else is on here" has to be answerable
   in one tap.

   :target rather than a checkbox, and still no JavaScript. Opening is a link to
   #menu and closing is a link to a fragment that matches no element. What that
   buys: tapping ANY link inside changes the fragment, so the panel closes
   itself on navigation and on same-page anchors alike, and Back closes it too.
   A checkbox needs script for all three.

   A sibling of <header>, never a child — header.nav carries backdrop-filter,
   which makes it a containing block for position:fixed descendants, and the
   panel would be trapped inside the 60px bar. */
.drawer{display:none}
.drawer:target{
  display:flex;flex-direction:column;position:fixed;inset:0;z-index:90;
  background:var(--bg);
}
/* Stops the page behind scrolling under the open panel. An engine without
   :has() ignores it and behaves as it did before the drawer existed. */
html:has(.drawer:target){overflow:hidden}
.drawer-bar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  flex:none;height:60px;padding:0 16px 0 24px;border-bottom:1px solid var(--line-soft);
}
.drawer-x{display:flex;padding:8px;border-radius:8px;color:var(--dim)}
.drawer-x:hover{color:var(--text);background:var(--panel)}
.drawer-body{
  flex:1;overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;padding:6px 24px 40px;
}
.fold{border-bottom:1px solid var(--line-soft)}
.fold summary{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 2px;cursor:pointer;list-style:none;
  color:var(--text);font-size:17px;font-weight:550;letter-spacing:-.015em;
}
.fold summary::-webkit-details-marker{display:none}
.fold summary::after{
  content:"";flex:none;width:8px;height:8px;margin-right:5px;
  border-right:1.8px solid var(--faint);border-bottom:1.8px solid var(--faint);
  rotate:45deg;translate:0 -2px;transition:rotate .18s;
}
.fold[open] summary::after{rotate:225deg;translate:0 2px}
.fold-in{display:grid;padding:0 0 14px}
.fold-in a{padding:9px 2px;color:var(--dim);font-size:15.5px;line-height:1.4}
.fold-in a:hover{color:var(--text)}
.fold-in .navhead{
  margin:15px 0 3px;font-family:var(--mono);font-size:10px;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:var(--faint);
}
.fold-in .navhead:first-child{margin-top:3px}
/* Has to out-specify `.fold-in a` above, which is (0,1,1) to this one's
   (0,1,0) — the hub link is the one item in the list that is not a document. */
.fold-in .fold-all{color:var(--brand);font-weight:550}
.fold-in .fold-all:hover{color:var(--brand-hi)}
.drawer-lead{
  display:block;padding:16px 2px;border-bottom:1px solid var(--line-soft);
  color:var(--text);font-size:17px;font-weight:550;letter-spacing:-.015em;
}
.drawer-cta{display:flex;align-items:center;gap:18px;margin-top:26px}
/* Out-specifies the `.signin{display:none}` the breakpoint below sets: the
   drawer is exactly where a phone still needs that link. */
.drawer-cta .signin{display:inline-block;font-size:15px}
.drawer-cta .btn{margin-left:auto;padding:11px 18px;font-size:15px}

@media (max-width:860px){
  /* The desktop menus go and the drawer arrives. Until 2026-09-01 this
     breakpoint hid .nav-links and put nothing in its place, which left a phone
     with a brand, one CTA and no way to reach any other page on the site. */
  .nav-links,.signin{display:none}
  .navburger{display:inline-flex}
  .nav-in > .btn{margin-left:auto}
}
@media (max-width:430px){
  /* Brand + CTA + burger stops fitting; the drawer carries the same CTA. */
  .nav-in > .btn{display:none}
  .navburger{margin-left:auto}
}
@media print{.drawer,.navburger{display:none!important}}

/* --------------------------------------------------------------- the footer
   One sitemap footer on every page — a column per surface, each headed by its
   hub. It is the internal link graph as much as it is navigation
   (SEO_AUDIT.md 3.4), which is why an article carries 25 links here rather
   than the four-link row it used to.

   Full-bleed with its own .foot-wrap: on the article pages this element used to
   sit INSIDE the 760px .page column, so the same markup rendered at two
   different widths and read as two different footers.

   Opaque and one layer above the quick-nav rail (z-index 10). The rail is
   position:fixed, so at the bottom of a page it stayed on screen and ran down
   beside the footer's columns; the footer now slides over it instead. Below
   the header (20) and everything the landing page floats (40 and up). */
footer{
  position:relative;z-index:11;background:var(--bg);
  border-top:1px solid var(--line-soft);margin-top:0;
  padding:48px 0 60px;color:var(--faint);font-size:14.5px;
}
.foot-wrap{max-width:1120px;margin:0 auto;padding:0 24px}
footer .foot-grid{
  display:grid;grid-template-columns:1.35fr repeat(4,1fr);gap:32px 28px;
  margin:0 0 32px;padding:0 0 36px;border:0;border-bottom:1px solid var(--line-soft);
}
footer .foot-col .navtitle{
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);margin:0 0 14px;font-weight:500;
}
/* A linked column label must look like an unlinked one. `font:inherit`
   is the load-bearing part: without it the anchor takes `.foot-col a`'s 14.5px
   body size and the linked columns render visibly larger than "Product". */
footer .foot-col .navtitle a{color:var(--faint);font:inherit;letter-spacing:inherit}
footer .foot-col .navtitle a:hover{color:var(--text)}
footer .foot-col ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
footer a{color:var(--dim)}
footer a:hover{color:var(--text)}
footer .foot-col a{font-size:14.5px}
/* The masthead anchor sits inside a .foot-col, so it is matched by the
   `footer .foot-col a` rule above at (0,1,2). Saying it again at (0,2,1) is
   what keeps the wordmark from rendering as one more grey link. */
footer .foot-brand .brand{color:var(--text)}
footer .foot-brand p{margin-top:14px;color:var(--faint);font-size:13.5px;line-height:1.6;max-width:30ch}
footer .foot-in{display:flex;gap:24px;align-items:center;flex-wrap:wrap}
footer .foot-links{margin-left:auto;display:flex;gap:22px;flex-wrap:wrap;font-size:13.5px}
footer .legal{margin-top:18px;font-size:13px;color:var(--faint);max-width:80ch;line-height:1.6}
@media (max-width:900px){
  footer .foot-grid{grid-template-columns:1fr 1fr;gap:28px 24px}
  footer .foot-brand{grid-column:1/-1}
}
@media (max-width:560px){
  footer{padding:36px 0 48px}
  footer .foot-in{gap:16px}
  footer .foot-links{margin-left:0}
}
/* /mr:chrome */