/* ==========================================================================
   indexer.dependsit.com
   Mobile-first stylesheet. Every rule is written for the smallest viewport and
   widened with min-width media queries. No framework, no runtime dependency.

   Brand tokens follow the DependsiT system already used by the application:
   cream ground, near-black ink, mint signal, deep green accent.
   ========================================================================== */

/* ---------- fonts (self-hosted, no external requests) ---------- */
@font-face {
  font-family: "Clash Display";
  src: url("../fonts/clash-display-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Clash Display";
  src: url("../fonts/clash-display-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "General Sans";
  src: url("../fonts/general-sans-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "General Sans";
  src: url("../fonts/general-sans-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "General Sans";
  src: url("../fonts/general-sans-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrainsmono-latin.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

/* ---------- tokens ---------- */
:root {
  --bg: #f5f1e8;
  --surface: #ffffff;
  --subtle: #efece3;
  --ink: #1e1d1a;
  --ink-2: #2a2a2a;
  --muted: #5a5a5a;
  --line: #d8d4c9;
  --line-2: #c7c2b4;
  --mint: #22e3b0;
  --accent: #0a6e56;
  --dark: #121212;
  --radius: 12px;
  --radius-sm: 9px;
  --shadow: 0 1px 2px rgba(30, 29, 26, 0.05), 0 12px 34px rgba(30, 29, 26, 0.07);
  --font-body: "General Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Clash Display is tight by design, so at negative tracking its word space visually
     collapses: measured at 2.14px against roughly 4.5px for the body face at the same
     size. The compensation lives in the token so any selector that opts into the display
     face gets it, rather than each rule having to remember. */
  --font-display: "Clash Display", "General Sans", ui-sans-serif, system-ui, sans-serif;
  --ws-display: 0.085em;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --wrap: 1160px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  /* 16px minimum on small screens: below this, iOS zooms on focus and body copy
     becomes uncomfortable on a phone. */
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; cursor: pointer; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.015em;
  word-spacing: var(--ws-display);
  margin: 0 0 0.6em;
}
h1 { font-size: 2.05rem; }
h2 { font-size: 1.6rem; }
h3 { font-size: 1.2rem; }
h4 { font-size: 1.02rem; }
p { margin: 0 0 1.15em; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 1.15rem; }
.section { padding: 3rem 0; }
.section--tight { padding: 2rem 0; }
.skip {
  position: absolute; left: -9999px;
}
.skip:focus {
  left: 1rem; top: 1rem; z-index: 100;
  background: var(--surface); padding: 0.6rem 1rem;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
}

/* ---------- header ---------- */
.hdr {
  position: sticky; top: 0; z-index: 50;
  background: rgba(245, 241, 232, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.hdr__inner {
  display: flex; align-items: center; gap: 0.75rem;
  min-height: 62px;
}
.brand { display: flex; align-items: center; gap: 0.6rem; color: var(--ink); font-weight: 600; }
.brand:hover { text-decoration: none; }
.brand img { width: 30px; height: 30px; }
.brand__name {
  font-family: var(--font-display);
  font-size: 1.2rem;
  letter-spacing: -0.02em;
  word-spacing: var(--ws-display);
}
.brand__by {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding-left: 0.6rem;
  border-left: 1px solid var(--line-2);
  display: none;
}

/* Navigation.
   Two separate controls, each hidden at the size where the other takes over. The
   earlier version removed the desktop nav from layout with `display: contents` at every
   width, so on a phone BOTH the disclosure and the full seven-link list rendered at
   once and overflowed the viewport. Visibility is now explicit per breakpoint. */
.nav--desk { display: none; }

.nav__toggle { margin-left: auto; }
.nav__toggle summary {
  list-style: none;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface);
  cursor: pointer;
}
.nav__toggle summary::-webkit-details-marker { display: none; }
.nav__toggle summary::after {
  content: ""; width: 16px; height: 2px; background: var(--ink);
  box-shadow: 0 -5px 0 var(--ink), 0 5px 0 var(--ink);
}
.nav__toggle[open] summary { background: var(--subtle); }

.hdr__inner { flex-wrap: wrap; }
.nav__toggle[open] .nav__list {
  display: flex;
  flex-basis: 100%;
  flex-direction: column;
  padding: 0.5rem 0 1rem;
}

.nav__list {
  list-style: none; margin: 0; padding: 0; gap: 0.15rem;
  display: none;
}
.nav__list a {
  display: block; padding: 0.7rem 0.5rem;
  color: var(--ink-2); font-weight: 500; border-radius: var(--radius-sm);
}
.nav__list a:hover, .nav__list a[aria-current="page"] {
  background: var(--subtle); text-decoration: none;
}
.nav__cta { margin-top: 0.6rem; }

/* The disclosure is a single control; its inner list is laid out by the rule above. */
.nav__toggle > nav { display: contents; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 46px; padding: 0 1.15rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-weight: 600; font-size: 1rem; line-height: 1;
  text-align: center;
  transition: transform 160ms var(--ease), background-color 160ms var(--ease),
    border-color 160ms var(--ease), filter 160ms var(--ease);
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn--primary { background: var(--mint); color: #06120f; }
.btn--primary:hover { filter: brightness(1.05); }
.btn--ghost { background: transparent; color: var(--ink); /* 3.30:1 against the cream ground: WCAG 1.4.11 needs 3:1 for a control
     boundary. The previous #a39e92 measured 2.37:1 and failed. */
  border-color: #8a8478; }
.btn--ghost:hover { background: var(--surface); border-color: var(--ink-2); }
.btn--ghost:hover { background: var(--subtle); }
.btn--block { width: 100%; }
.btn-row { display: flex; flex-direction: column; gap: 0.7rem; }

/* ---------- hero ---------- */
.hero { padding: 2.5rem 0 3rem; }
.hero__eyebrow {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 0.9rem;
}
.hero h1 { font-size: 2.3rem; }
.hero__lead { font-size: 1.09rem; color: var(--ink-2); max-width: 34ch; }
.hero__meta {
  margin-top: 1.6rem; display: flex; flex-wrap: wrap; gap: 0.5rem;
}
.pill {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.04em;
  color: var(--accent); background: rgba(34, 227, 176, 0.14);
  border: 1px solid rgba(34, 227, 176, 0.4);
  border-radius: 999px; padding: 0.32rem 0.7rem;
}

/* ---------- cards & grids ---------- */
.grid { display: grid; gap: 1rem; }
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem;
}
.card h3 { margin-bottom: 0.4rem; }
.card p:last-child { margin-bottom: 0; }
.card__icon {
  width: 42px; height: 42px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(34, 227, 176, 0.14); color: var(--accent);
  font-family: var(--font-display); font-weight: 700; font-size: 1.05rem;
  word-spacing: var(--ws-display);
  margin-bottom: 0.85rem;
}
.card--price { display: flex; flex-direction: column; }
.card--price .price {
  font-family: var(--font-display); font-size: 2rem; letter-spacing: -0.02em;
  word-spacing: var(--ws-display);
  margin: 0.2rem 0 0.1rem;
}
.card--price .price small { font-size: 0.85rem; color: var(--muted); font-weight: 500; }
.card--featured { border-color: var(--mint); box-shadow: var(--shadow); }
.card--price ul { list-style: none; margin: 0.6rem 0 1.2rem; padding: 0; }
.card--price li {
  padding-left: 1.5rem; position: relative; margin-bottom: 0.5rem; color: var(--ink-2);
}
.card--price li::before {
  content: ""; position: absolute; left: 0; top: 0.55em;
  width: 8px; height: 8px; border-radius: 2px; background: var(--mint);
}
.card--price .btn { margin-top: auto; }

/* ---------- steps ---------- */
.steps { counter-reset: step; list-style: none; margin: 0; padding: 0; }
.steps li {
  position: relative; padding-left: 2.6rem; margin-bottom: 1.5rem;
}
.steps li::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 0; top: 0.1rem;
  width: 1.8rem; height: 1.8rem; border-radius: 999px;
  background: var(--mint); color: #06120f;
  font-family: var(--font-display); font-weight: 700; font-size: 0.85rem;
  word-spacing: var(--ws-display);
  display: flex; align-items: center; justify-content: center;
}
.steps h3 { margin-bottom: 0.25rem; }
.steps p { margin-bottom: 0; color: var(--ink-2); }

/* ---------- footer ---------- */
.ftr {
  margin-top: 3rem; padding: 2.5rem 0 2rem;
  background: var(--dark); color: #ededed;
}
.ftr a { color: #cfd6d3; }
.ftr a:hover { color: var(--mint); }
.ftr__grid { display: grid; gap: 1.8rem; }
.ftr__brand { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.7rem; }
.ftr__brand img { width: 28px; height: 28px; }
.ftr__brand span {
  font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: #fff;
  word-spacing: var(--ws-display);
}
.ftr__note { color: #a9b0ad; font-size: 0.92rem; margin: 0 0 0.55rem; max-width: 30ch; }
.ftr__parent { margin: 0; font-size: 0.85rem; }
.ftr__parent a { color: #8e9793; text-decoration: underline; text-underline-offset: 3px; }
.ftr__parent a:hover { color: var(--mint); }
.ftr h2 {
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: #99a29e; margin-bottom: 0.75rem;
}
.ftr ul { list-style: none; margin: 0; padding: 0; }
.ftr li { margin-bottom: 0.45rem; font-size: 0.94rem; }
.ftr__base {
  margin-top: 2.2rem; padding-top: 1.2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex; flex-direction: column; gap: 0.5rem;
  font-size: 0.86rem; color: #8e9793;
}

/* ---------- article ---------- */
.crumbs {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.04em;
  color: var(--muted); margin-bottom: 1rem;
}
.crumbs a { color: var(--muted); }
.article__meta {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1rem;
  font-family: var(--font-mono); font-size: 0.74rem; color: var(--muted);
  margin-bottom: 1.4rem;
}
.article__cover { border-radius: var(--radius); margin: 1.4rem 0; }
.prose { max-width: 72ch; }
.prose h2 { margin-top: 2.2rem; }
.prose h3 { margin-top: 1.8rem; }
.prose ul, .prose ol { padding-left: 1.3rem; }
.prose li { margin-bottom: 0.45rem; }
.prose code {
  font-family: var(--font-mono); font-size: 0.88em;
  background: var(--subtle); padding: 0.12em 0.35em; border-radius: 4px;
}
.prose pre {
  background: #0f1416; color: #e6f1ee; padding: 1rem; border-radius: var(--radius-sm);
  overflow-x: auto; font-size: 0.85rem; line-height: 1.55;
}
.prose pre code { background: none; padding: 0; color: inherit; }
.prose blockquote {
  margin: 1.4rem 0; padding: 0.2rem 0 0.2rem 1rem;
  border-left: 3px solid var(--mint); color: var(--ink-2);
}
.table-wrap { overflow-x: auto; margin: 1.4rem 0; }
.prose table, .table-wrap table {
  width: 100%; border-collapse: collapse; font-size: 0.92rem;
}
.prose th, .prose td, .table-wrap th, .table-wrap td {
  border: 1px solid var(--line); padding: 0.55rem 0.7rem; text-align: left;
}
.prose th, .table-wrap th { background: var(--subtle); font-weight: 600; }

.toc {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.1rem 1.2rem; margin: 1.6rem 0;
}
.toc h2 {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 0.6rem;
}
.toc ol { margin: 0; padding-left: 1.1rem; }
.toc li { margin-bottom: 0.3rem; }

/* ---------- blog list ---------- */
.post-grid { display: grid; gap: 1.1rem; }
.post-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform 200ms var(--ease), border-color 200ms var(--ease);
}
.post-card:hover { transform: translateY(-2px); border-color: var(--mint); }
.post-card img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.post-card__body { padding: 1rem 1.1rem 1.15rem; display: flex; flex-direction: column; flex: 1; }
.post-card h3 { font-size: 1.06rem; margin-bottom: 0.35rem; }
.post-card h3 a { color: var(--ink); }
.post-card p { font-size: 0.93rem; color: var(--muted); margin-bottom: 0.8rem; }
.post-card__meta {
  margin-top: auto; font-family: var(--font-mono); font-size: 0.7rem;
  color: var(--muted); display: flex; gap: 0.7rem; flex-wrap: wrap;
}

.pager { display: flex; gap: 0.6rem; justify-content: center; margin-top: 2rem; flex-wrap: wrap; }
.pager a, .pager span {
  min-height: 42px; display: inline-flex; align-items: center;
  padding: 0 0.9rem; border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: var(--surface);
  color: var(--ink); font-size: 0.92rem;
}
.pager a:hover { border-color: var(--line-2); text-decoration: none; }
.pager .is-current { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ---------- misc ---------- */
.lead { font-size: 1.08rem; color: var(--ink-2); }
.muted { color: var(--muted); }
.mono { font-family: var(--font-mono); }
.center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.note {
  background: var(--subtle); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 0.9rem 1rem; font-size: 0.94rem;
}
.cta-band {
  background: var(--dark); color: #ededed;
  border-radius: var(--radius); padding: 2rem 1.4rem; text-align: center;
}
.cta-band h2 { color: #fff; }
.cta-band p { color: #b9c0bd; max-width: 46ch; margin-left: auto; margin-right: auto; }
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  padding: 1rem 0; font-weight: 600; cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; gap: 1rem; align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-family: var(--font-mono);
  font-size: 1.05rem; line-height: 1;
  color: var(--accent);
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; flex: none;
  border: 1px solid var(--line-2); border-radius: 999px;
  background: var(--surface);
}
.faq details[open] summary::after {
  content: "\2212";
  font-size: 1.05rem; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; flex: none;
  border: 1px solid var(--accent); border-radius: 999px;
  background: var(--accent); color: #fff;
}
.faq details p { margin: 0 0 1rem; color: var(--ink-2); }

/* ---------- responsive ---------- */
@media (min-width: 640px) {
  .wrap { padding: 0 1.6rem; }
  h1 { font-size: 2.4rem; }
  h2 { font-size: 1.85rem; }
  .hero { padding: 3.5rem 0 4rem; }
  .hero h1 { font-size: 2.9rem; }
  .btn-row { flex-direction: row; }
  .btn-row .btn { width: auto; }
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .ftr__grid { grid-template-columns: repeat(2, 1fr); }
  .ftr__base { flex-direction: row; justify-content: space-between; align-items: center; }
  .post-grid { grid-template-columns: repeat(2, 1fr); }
  .article__cover { margin: 1.8rem 0; }
}

@media (min-width: 900px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
  .post-grid { grid-template-columns: repeat(3, 1fr); }
  .ftr__grid { grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; }
  .footer-flex { display: flex; justify-content: space-between; align-items: center; }
}

@media (min-width: 1024px) {
  body { font-size: 1.0625rem; }
  .hdr__inner { min-height: 68px; }
  .nav--desk { display: flex; align-items: center; gap: 0.35rem; margin-left: auto; }
  .nav__toggle { display: none; }
  .nav--desk .nav__list { display: flex; flex-direction: row; align-items: center;
    padding: 0; gap: 0.2rem; width: auto; }
  /* Active page: colour and underline instead of the pill, which added visual
     weight to one item and broke the even rhythm of the row. */
  .nav--desk .nav__list a[aria-current="page"] {
    background: none; color: var(--accent);
    text-decoration: underline; text-underline-offset: 7px;
    text-decoration-thickness: 2px;
  }
  /* F7: hover affordance for desktop links. */
  .nav--desk .nav__list a:hover { background: none; color: var(--accent); }
  .brand__by { line-height: 1; }
  .nav__list a { padding: 0.5rem 0.75rem; }
  .nav__cta { margin: 0 0 0 0.6rem; }
  .brand__by { display: inline; }
  .hero { padding: 4.5rem 0 5rem; }
  .hero h1 { font-size: 3.4rem; }
  .section { padding: 4.5rem 0; }
  .card { padding: 1.5rem; }
  .article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 3rem; }
}

/* ---------- motion, honouring user preference ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .btn:hover, .post-card:hover { transform: none; }
}

/* ---------- dark mode (the brand's nominal default) ---------- */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121212;
    --surface: #1a1a1a;
    --subtle: #2d2d2d;
    --ink: #ffffffde;
    --ink-2: #e0e0e0;
    --muted: #b0b0b0;
    --line: #444;
    --line-2: #555;
    --accent: #22e3b0;
    --shadow: none;
  }
  .hdr { background: rgba(18, 18, 18, 0.92); }
  .card--featured { box-shadow: none; }
  .prose pre { background: #0b0f10; }
}

/* ---------- overflow guards ----------
   Added after a mobile audit showed the document scrolling horizontally, which clipped
   headings and body copy at 390px. These make the failure mode impossible rather than
   fixing one instance of it. */
html, body { max-width: 100%; overflow-x: hidden; }
img, svg, video, table, pre { max-width: 100%; }
.wrap { min-width: 0; }
.grid > *, .post-grid > *, .ftr__grid > * { min-width: 0; }
h1, h2, h3, h4, p, li { overflow-wrap: break-word; }

/* ---------- hero split + console panel ----------
   Added because the desktop hero had an empty right half: the page claimed a dashboard
   existed but showed no evidence of it. The panel is markup plus CSS only, so it is
   sharp at any density and adds no image weight. Hidden below 1024px, where it would
   push the real content down. */
.hero--split .hero__cols { display: block; }
.hero__panel { display: none; }

@media (min-width: 1024px) {
  .hero--split .hero__cols {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 3rem;
    align-items: center;
  }
  .hero__panel { display: block; }
  .hero__lead { max-width: 46ch; }
}

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.panel__bar {
  display: flex; align-items: center; gap: 6px;
  padding: 0.6rem 0.85rem;
  background: var(--subtle);
  border-bottom: 1px solid var(--line);
}
.panel__bar span {
  width: 9px; height: 9px; border-radius: 999px; background: var(--line-2);
}
.panel__bar em {
  margin-left: auto; font-style: normal;
  font-family: var(--font-mono); font-size: 0.66rem; color: var(--muted);
}
.panel__head {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem; padding: 1rem 1.1rem 0.85rem;
}
.panel__k {
  display: block; font-family: var(--font-mono); font-size: 0.62rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
}
.panel__v {
  display: block; font-family: var(--font-display); font-size: 1.45rem;
  letter-spacing: -0.02em; word-spacing: var(--ws-display); margin-top: 0.15rem;
}
.panel__rows { list-style: none; margin: 0; padding: 0 1.1rem; }
.row {
  display: flex; align-items: center; gap: 0.55rem;
  padding: 0.5rem 0; border-top: 1px solid var(--line);
  font-size: 0.8rem;
}
.row__url {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; font-family: var(--font-mono); color: var(--ink-2);
}
.row__tag { font-family: var(--font-mono); font-size: 0.66rem; white-space: nowrap; }
.dot { width: 7px; height: 7px; border-radius: 999px; flex: none; }
.dot--ok { background: var(--mint); }
.dot--wait { background: #d9a441; }
.dot--bad { background: #c93840; }
.tag--ok { color: var(--accent); }
.tag--wait { color: #8a6512; }
.tag--bad { color: #c93840; }
.panel__foot {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.85rem 1.1rem 1rem;
  border-top: 1px solid var(--line);
}
.panel__foot .mono { font-size: 0.64rem; color: var(--muted); white-space: nowrap; }
.panel__foot .bar {
  flex: 1; height: 6px; border-radius: 999px; background: var(--subtle); overflow: hidden;
}
.panel__foot .bar i { display: block; height: 100%; background: var(--mint); }

/* ---------- plan comparison table ----------
   Four columns are wider than a phone, so the table scrolls inside its own box
   rather than forcing the page to scroll sideways. */
.cmp-wrap { margin-top: 1.6rem; }
.cmp { min-width: 620px; }
.cmp th[scope="row"] {
  font-weight: 600; text-align: left; background: var(--surface);
}
.cmp thead th { background: var(--subtle); }
.cmp td, .cmp th { font-size: 0.92rem; }
/* This is the only three-column data grid on the site, and its cells carry long values
   such as "Google Indexing API, sitemaps and Search Console". The generic 0.7rem side
   padding made them crowded, so widen it and give the label column a floor. */
.cmp th, .cmp td { padding: 0.7rem 0.95rem; }
.cmp th[scope="row"] { min-width: 11rem; }
.cmp tbody td { color: var(--ink-2); }
.cmp tbody tr:nth-child(even) td,
.cmp tbody tr:nth-child(even) th[scope="row"] { background: rgba(0, 0, 0, 0.015); }

@media (min-width: 900px) {
  .cmp { min-width: 0; }
  .cmp-wrap { overflow-x: visible; }
  .cmp td:first-of-type, .cmp th:first-of-type { width: 22%; }
}

/* ---------- related reading list on articles ---------- */
.related-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 0.5rem;
}
.related-list li {
  display: flex; align-items: baseline; gap: 0.5rem;
  padding: 0.6rem 0; border-bottom: 1px solid var(--line);
}
.related-list a { font-weight: 500; }
.related-list .muted { white-space: nowrap; }

/* Hub and related links are pills; keep them tappable on a phone. */
a.pill {
  display: inline-flex; align-items: center; min-height: 30px;
  text-decoration: none;
}
a.pill:hover { text-decoration: none; border-color: var(--accent); }

/* ---------- pagination ----------
   Replaces a control that rendered every page number: at 17 pages that was 19 items
   wrapping onto four rows on a phone. Two variants are in the markup and swapped by
   width, so there is no JavaScript and nothing reflows after paint.

   The full control shows a window around the current page plus the first and last, with
   an ellipsis for each gap, so its size is bounded however large the archive grows. */
.pager--full { display: none; }
.pager .pager__gap {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.5rem; color: var(--muted); user-select: none;
}

/* Compact: Previous · Page n of m · Next. Three items, no wrap. */
.pager--compact {
  display: flex; align-items: center; justify-content: center;
  gap: 0.5rem; margin-top: 2rem; flex-wrap: nowrap;
}
.pager--compact .pager__step {
  flex: 1 1 auto; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 0.75rem; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink); font-size: 0.92rem;
  white-space: nowrap;
}
.pager--compact .pager__step:hover { border-color: var(--line-2); text-decoration: none; }
.pager--compact .pager__step.is-disabled {
  opacity: 0.45; color: var(--muted); background: transparent;
  border-style: dashed; pointer-events: none;
}
.pager--compact .pager__pos {
  flex: none; font-family: var(--font-mono); font-size: 0.78rem;
  color: var(--muted); white-space: nowrap;
}
.pager--compact .pager__pos strong { color: var(--ink); font-weight: 600; }

@media (min-width: 640px) {
  /* Swap to the full control once there is room for it. */
  .pager--compact { display: none; }
  .pager--full { display: flex; }
}

/* ---------- hero coverage strip ----------
   Replaces bare protocol pills: three labelled rows that say what each route reaches,
   so the hero sells coverage instead of naming technologies. The pill row wrapped
   awkwardly at narrow widths (two on one line, one orphaned on the next). */
.cov {
  margin-top: 1.6rem;
  border-top: 1px solid var(--line);
  max-width: 34rem;
}
.cov__row {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: 0.75rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.9rem;
}
.cov__key {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  padding-top: 0.15rem;
}
.cov__val { color: var(--ink-2); }
@media (min-width: 1024px) {
  .cov { max-width: 30rem; }
}

/* ---------- hero proof band ----------
   Four checkable claims under the hero. The page explained the product well but gave a
   visitor nothing concrete to hold on to before the first scroll. Each item is a fact the
   product enforces, not a superlative. */
.proof { border-top: 1px solid var(--line); }
.proof__grid {
  display: grid; gap: 1.1rem;
  grid-template-columns: 1fr;
}
.proof__item { display: flex; flex-direction: column; gap: 0.15rem; }
.proof__item strong {
  font-family: var(--font-display);
  font-size: 1.02rem;
  letter-spacing: -0.01em;
  word-spacing: var(--ws-display);
  color: var(--ink);
}
.proof__item span { font-size: 0.88rem; color: var(--muted); line-height: 1.5; }
@media (min-width: 640px) {
  .proof__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem 2rem; }
}
@media (min-width: 1024px) {
  .proof__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- topic directory on the blog index ----------
   /blog/ opened straight into page 1 of the archive, so a visitor's first decision was a
   page number. It now leads with the 13 topic hubs, which measurably reach 199 of the 200
   posts. The paginated archive below is unchanged, so the crawl path stays complete. */
.topic-grid {
  display: grid; gap: 0.7rem; grid-template-columns: 1fr; margin-top: 1.3rem;
}
.topic {
  display: flex; flex-direction: column; gap: 0.15rem;
  padding: 0.85rem 1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  transition: border-color 160ms var(--ease), transform 160ms var(--ease);
}
.topic:hover { border-color: var(--mint); text-decoration: none; transform: translateY(-1px); }
.topic__name { font-weight: 600; color: var(--ink); font-size: 0.94rem; line-height: 1.3; }
.topic__desc { font-size: 0.81rem; color: var(--muted); line-height: 1.45; }
@media (min-width: 640px) { .topic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .topic-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }