/* TestOrchestrator public site — v2 shell (TES-990, design drops 85 + 94).
   One stylesheet for every page under public-site/: the shared header and
   footer, the home and pricing components, and the content shell used by the
   generated sections, the docs, the legal pages and contact. It replaces
   site.css + content.css + the pricing page's inline styles.

   Tokens are the house kit's (billing-v2 / Pricing.html, drop v84), reused
   verbatim. Accepted deviations (drop 85 review, handoff §7): --accent-fill
   pinned to the app's #6063ed (TES-423), body 15 px on marketing pages,
   buttons 36/42 px, 12/8 px radii, a --shot-shadow token, Inter only.

   Inter is loaded by each page from /assets/fonts/inter.css (self-hosted,
   TES-458). No @import, no third-party assets.

   Generic component names (.card, .chip, .tag, table, details) are scoped to
   their containers so the bespoke landing pages and the docs, which bring
   their own rules for those names, are not restyled by accident. */

:root {
  --accent: #6366f1;
  --accent-fill: #6063ed;
  --accent-weak: color-mix(in srgb, var(--accent) 14%, transparent);
  --accent-soft: color-mix(in srgb, var(--accent) 26%, transparent);
  --accent-text: color-mix(in srgb, var(--accent) 78%, var(--text));
  /* Opaque version of the accent wash, for anything that sits ON a border
     (the "Most popular" tag) so the border cannot show through it. */
  --accent-wash: color-mix(in srgb, var(--accent) 14%, var(--surface));
  --on-accent: #fff;
  --max: 1180px;
  --gutter: 28px;
  --radius: 12px;
  --radius-sm: 8px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Legacy aliases. The hand-authored landing pages (section indexes, custom
     blog posts, integration pages) and blog-post.css were written against
     site.css's token names. Mapping those names onto the v2 tokens puts them
     on the v2 palette until their round-3 designs land. */
  --bg: var(--app-bg);
  --bg-elevated: var(--surface);
  --bg-strong: var(--surface);
  --bg-accent: var(--accent-weak);
  --surface-border: var(--border);
  --text-muted: var(--muted);
  --text-soft: var(--subtle);
  --accent-strong: var(--accent-text);
  --accent-warm: var(--accent-text);
  --max-width: var(--max);
  --radius-xl: var(--radius);
  --radius-lg: var(--radius);
  --radius-md: var(--radius-sm);
}
:root,
.light {
  --app-bg: #f7f8fa;
  --surface: #fff;
  --surface-2: #f4f6f9;
  --surface-3: #eef1f5;
  --border: #e4e7ec;
  --border-soft: #eef0f3;
  --border-strong: #d4d9e0;
  --text: #10131a;
  --muted: #5b6472;
  --subtle: #636b79;
  --faint: #8a919d;
  --hover: #f2f4f7;
  --ok: #16a34a;
  --fail: #dc2626;
  --block: #d97706;
  --shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 14px 34px -22px rgba(15, 23, 42, 0.32);
  --shot-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 24px 48px -28px rgba(15, 23, 42, 0.35);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not(.light) {
    --app-bg: #0a0d14;
    --surface: #0f131c;
    --surface-2: #0c1018;
    --surface-3: #151b27;
    --border: #1e2533;
    --border-soft: #171d29;
    --border-strong: #2a3242;
    --text: #e7ecf3;
    --muted: #97a1b2;
    --subtle: #8d97a7;
    --faint: #6c7584;
    --hover: #161d2b;
    --ok: #34d399;
    --fail: #f87171;
    --block: #fbbf24;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.45), 0 16px 34px -22px rgba(0, 0, 0, 0.8);
    --shot-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 24px 48px -28px rgba(0, 0, 0, 0.9);
    color-scheme: dark;
  }
}
.dark {
  --app-bg: #0a0d14;
  --surface: #0f131c;
  --surface-2: #0c1018;
  --surface-3: #151b27;
  --border: #1e2533;
  --border-soft: #171d29;
  --border-strong: #2a3242;
  --text: #e7ecf3;
  --muted: #97a1b2;
  --subtle: #8d97a7;
  --faint: #6c7584;
  --hover: #161d2b;
  --ok: #34d399;
  --fail: #f87171;
  --block: #fbbf24;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.45), 0 16px 34px -22px rgba(0, 0, 0, 0.8);
  --shot-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 24px 48px -28px rgba(0, 0, 0, 0.9);
  color-scheme: dark;
}

/* ── Base ────────────────────────────────────────────────── */
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
}
body {
  font-family:
    'Inter',
    -apple-system,
    BlinkMacSystemFont,
    system-ui,
    sans-serif;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.006em;
  background: var(--app-bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.55;
  min-height: 100vh;
}
a {
  color: var(--accent-text);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}
img,
svg {
  display: block;
  max-width: 100%;
}
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip,
.skip-link {
  position: absolute;
  left: 12px;
  top: -48px;
  z-index: 40;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  font-weight: 550;
}
.skip:focus,
.skip-link:focus {
  top: 12px;
  text-decoration: none;
}
.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Marketing pages (home, pricing, contact) and the shell own their margins;
   prose keeps the browser's paragraph rhythm through .prose. */
:where(.nav, .mk, .site-foot) button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
:where(.mk, .nav, .site-foot, .cta-band) :where(h1, h2, h3, h4, p) {
  margin: 0;
}
:where(.mk, .content-main, .cta-band) :where(h1, h2, h3, h4) {
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.15;
  text-wrap: balance;
}
.mk p {
  text-wrap: pretty;
}

/* ── Buttons ─────────────────────────────────────────────── */
/* Drop 94, item 7: white on --accent-fill measures 4.66:1, so nothing under
   14 px ever sits on that fill. Buttons are 14 / 15 px; the "Most popular"
   tag uses the accent wash with accent-text ink instead of the fill. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 550;
  line-height: 1;
  white-space: nowrap;
  transition:
    background 0.12s,
    filter 0.12s;
}
.btn:hover {
  text-decoration: none;
}
.btn-ghost {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
}
.btn-ghost:hover {
  background: var(--hover);
  color: var(--text);
}
.btn-primary {
  background: var(--accent-fill);
  color: var(--on-accent);
  border: 1px solid var(--accent-fill);
}
.btn-primary:hover {
  filter: brightness(0.92);
  color: var(--on-accent);
}
.btn.lg {
  height: 42px;
  padding: 0 20px;
  font-size: 15px;
}
.ibtn {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  color: var(--muted);
  border: 1px solid var(--border);
  background: var(--surface);
}
.ibtn:hover {
  background: var(--hover);
  color: var(--text);
}

/* ── Header ──────────────────────────────────────────────── */
.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--app-bg) 88%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border-soft);
}
.nav-in {
  display: flex;
  align-items: center;
  gap: 22px;
  height: 60px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 650;
  font-size: 14.5px;
  color: var(--text);
  letter-spacing: -0.01em;
}
.brand:hover {
  text-decoration: none;
  color: var(--text);
}
.brand img {
  width: 24px;
  height: 24px;
  border-radius: 6px;
}
.nav-links {
  display: flex;
  gap: 4px;
}
.nav-links a {
  padding: 6px 10px;
  border-radius: 7px;
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 500;
}
.nav-links a:hover {
  background: var(--hover);
  color: var(--text);
  text-decoration: none;
}
.nav-links a[aria-current] {
  color: var(--text);
  font-weight: 600;
}
.nav-r {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}
.menu-btn {
  display: none;
}
.nav-panel {
  display: none;
}
/* The phone menu's look sits outside the breakpoint so the docs pages, which
   fold their links at 820 px instead of 760 (TES-996), share it. The panel is
   display: none until a breakpoint opens it. */
.nav-panel {
  grid-template-columns: 1fr;
  gap: 2px;
  padding: 8px 0 12px;
  border-top: 1px solid var(--border-soft);
}
.nav-panel a {
  padding: 11px 10px;
  border-radius: 7px;
  color: var(--text);
  font-size: 15px;
  font-weight: 500;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.nav-panel a:hover {
  background: var(--hover);
  text-decoration: none;
}
.nav-panel a[aria-current] {
  font-weight: 600;
  background: var(--accent-weak);
  color: var(--accent-text);
}
@media (max-width: 760px) {
  .nav-links,
  .nav-r .btn-ghost {
    display: none;
  }
  .nav-r .menu-btn {
    display: grid;
  }
  .nav-panel.is-open {
    display: grid;
  }
}
@media (max-width: 420px) {
  .brand span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }
}

/* ── Sections ────────────────────────────────────────────── */
.sec {
  padding-top: 72px;
}
.sec-last {
  padding-bottom: 72px;
}
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--accent-text);
  margin-bottom: 14px;
}
.kicker::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.sec-h {
  max-width: 640px;
  margin-bottom: 36px;
}
.sec-h h2 {
  font-size: clamp(26px, 3vw, 34px);
}
.mk .sec-h p {
  margin-top: 12px;
  font-size: 16px;
  color: var(--muted);
}
.link-more {
  font-size: 13.5px;
  font-weight: 550;
}

/* ── Hero ────────────────────────────────────────────────── */
.hero {
  padding-top: 72px;
  text-align: center;
}
.hero h1 {
  font-size: clamp(34px, 5vw, 56px);
  letter-spacing: -0.032em;
  line-height: 1.05;
  max-width: 16ch;
  margin: 0 auto;
}
.mk .hero .lede {
  margin: 18px auto 0;
  font-size: clamp(16px, 1.5vw, 18px);
  color: var(--muted);
  max-width: 58ch;
}
.hero .cta {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 28px;
  flex-wrap: wrap;
}
.mk .hero .fine {
  margin-top: 14px;
  font-size: 13px;
  color: var(--subtle);
}
.shot.hero-shot {
  margin: 44px auto 0;
  max-width: 1040px;
}

/* Screenshot frame: thin border, kit radius, one shadow. No glow, no gradient. */
.shot {
  margin: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shot-shadow);
}
.shot img {
  width: 100%;
  height: auto;
}
.shot figcaption {
  padding: 10px 14px;
  font-size: 12.5px;
  color: var(--subtle);
  border-top: 1px solid var(--border-soft);
  background: var(--surface-2);
  text-align: left;
}
/* Neutral "Screenshot coming soon" frame for a capture that has not been
   taken yet (S6). Swapping the capture in replaces the div with one <img>. */
.shot-pending {
  aspect-ratio: 16 / 10;
  display: grid;
  place-items: center;
  padding: 24px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
  background: var(--surface-2);
  border-bottom: 1px dashed var(--border-strong);
}
.shot-pending b {
  display: block;
  color: var(--text);
  font-weight: 600;
  margin-bottom: 4px;
}

/* ── "How it feels" strip ────────────────────────────────── */
/* Drop 94, item 3: the differentiator leads in a wider first cell. The
   optional proof line above it was deleted in review (TES-990), so the strip
   keeps its own 72 px top margin. */
.proof {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  margin-top: 72px;
  overflow: hidden;
}
.proof > div {
  padding: 22px 24px;
  border-left: 1px solid var(--border-soft);
}
.proof > div:first-child {
  border-left: 0;
}
.proof > div.lead {
  background: var(--surface-2);
}
.proof > div.lead h3 {
  font-size: 17px;
}
.mk .proof > div.lead p {
  font-size: 14.5px;
  color: var(--text);
}
.mk .proof > div.lead p + p {
  margin-top: 8px;
  font-size: 13.5px;
  color: var(--muted);
}
.proof h3 {
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.proof h3 svg {
  color: var(--accent-text);
  flex: 0 0 auto;
}
.mk .proof p {
  font-size: 13.5px;
  color: var(--muted);
}

/* ── Product tour rows ───────────────────────────────────── */
.tour {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 48px;
  align-items: center;
  margin-top: 48px;
}
.tour.rev .tour-copy {
  order: 2;
}
.tour-copy h3 {
  font-size: clamp(22px, 2.2vw, 28px);
}
.mk .tour-copy p {
  margin-top: 12px;
  font-size: 15.5px;
  color: var(--muted);
}
.tour-copy .link-more {
  display: inline-block;
  margin-top: 14px;
}
.tour-copy ul {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
}
.tour-copy li {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  color: var(--text);
}
.tour-copy li svg {
  flex: 0 0 auto;
  margin-top: 4px;
  color: var(--ok);
}

/* ── Integrations ────────────────────────────────────────── */
.integ {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Drop 94, item 1: the owners' marks at 20 px, unaltered. GitHub and Notion
   ship a white variant for dark; Jira, Linear and Azure DevOps are the same
   file in both themes. The swap is CSS only. */
.integ .chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 14px 0 11px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  font-size: 13.5px;
  font-weight: 550;
  color: var(--text);
}
.integ .chip img {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}
.mark-dark {
  display: none;
}
.dark .mark-dark {
  display: block;
}
.dark .mark-light {
  display: none;
}
@media (prefers-color-scheme: dark) {
  :root:not(.light) .mark-dark {
    display: block;
  }
  :root:not(.light) .mark-light {
    display: none;
  }
}

/* ── Cards (AI + MCP on home, panels on contact) ──────────── */
.ai-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
}
:is(.ai-grid, .card-grid) > .card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
:is(.ai-grid, .card-grid) > .card h3,
:is(.ai-grid, .card-grid) > .card h2 {
  font-size: 18px;
  letter-spacing: -0.015em;
}
:is(.ai-grid, .card-grid) > .card p {
  font-size: 14px;
  color: var(--muted);
}
:is(.ai-grid, .card-grid) > .card .tag {
  align-self: flex-start;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--accent-weak);
  color: var(--accent-text);
}
:is(.ai-grid, .card-grid) > .card .tag.plain {
  background: var(--surface-3);
  color: var(--muted);
}
.ai-grid > .card pre {
  margin: 6px 0 0;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  font: 12.5px/1.55 var(--mono);
  color: var(--text);
  overflow-x: auto;
  white-space: pre;
}
.ai-grid > .card .shot {
  margin-top: 6px;
}
.mk .ai-note {
  margin-top: 16px;
  font-size: 13px;
  color: var(--subtle);
}

/* ── Plans (home teaser + pricing) ───────────────────────── */
.plans {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 18px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.plan.feat {
  border-color: var(--accent);
  box-shadow:
    0 0 0 1px var(--accent),
    var(--shadow);
}
/* TES-990 review: the tag is opaque (the wash mixed onto the card surface)
   and stacked above the card's accent ring, so in dark the ring can no
   longer be seen running through it. */
.plan .ptag {
  position: absolute;
  top: -11px;
  left: 18px;
  z-index: 1;
  font-size: 11px;
  font-weight: 650;
  line-height: 16px;
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--accent-wash);
  color: var(--accent-text);
  border: 1px solid var(--surface);
  box-shadow: 0 0 0 1px var(--accent);
}
.plan h3 {
  font-size: 16px;
  font-weight: 650;
  letter-spacing: -0.01em;
}
.mk .plan .who {
  margin: -6px 0 0;
  font-size: 12.5px;
  color: var(--muted);
  min-height: 38px;
}
.plan .price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  min-height: 40px;
}
.plan .amt {
  font-size: 34px;
  font-weight: 650;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.plan .amt.sm {
  font-size: 22px;
}
.plan .per {
  font-size: 13px;
  color: var(--muted);
}
.plan .bill {
  margin-top: -8px;
  font-size: 12px;
  color: var(--subtle);
  min-height: 18px;
}
.plan .btn {
  width: 100%;
}
.feats {
  list-style: none;
  margin: 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--border-soft);
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
}
.feats li {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.feats svg {
  flex: 0 0 auto;
  margin-top: 3px;
  color: var(--ok);
}
.feats li.plus {
  color: var(--accent-text);
  font-weight: 550;
}
.feats li.plus svg {
  color: var(--accent);
}
.feats li.base {
  color: var(--muted);
}
.feats li.base svg {
  color: var(--subtle);
}
.feats b {
  font-weight: 650;
}
.mk .plan .foot {
  margin-top: auto;
  padding-top: 10px;
  font-size: 11.5px;
  color: var(--subtle);
}
.teaser-foot {
  margin-top: 18px;
  font-size: 13px;
  color: var(--subtle);
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* ── Pricing page ────────────────────────────────────────── */
/* The prototype's three inline style="" attributes on the pricing hero are
   classes here, so the page needs no style-src 'unsafe-inline'. */
.pricing-hero {
  padding-top: 64px;
}
.pricing-hero h1 {
  max-width: 18ch;
  font-size: clamp(30px, 4.2vw, 44px);
}
.mk .pricing-hero .lede {
  font-size: 15.5px;
}
.pricing-plans {
  padding-top: 20px;
}
.pricing-sec {
  padding-top: 56px;
}
.pricing-cta {
  margin-top: 56px;
}
.int {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 26px;
  flex-wrap: wrap;
  justify-content: center;
}
.seg {
  display: flex;
  gap: 1px;
  padding: 3px;
  background: var(--surface-3);
  border-radius: 9px;
}
.mk .seg-b {
  height: 32px;
  padding: 0 14px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 550;
  color: var(--muted);
}
.mk .seg-b:hover {
  color: var(--text);
}
.mk .seg-b.on {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.int .save {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-text);
  background: var(--accent-weak);
  border-radius: 6px;
  padding: 2px 8px;
}
.trust {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  margin: 12px 0 0;
}
.trust > div {
  padding: 14px 16px;
  border-left: 1px solid var(--border-soft);
}
.trust > div:first-child {
  border-left: 0;
}
.trust b {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
}
.trust span {
  font-size: 12.5px;
  color: var(--muted);
}
.mk .note {
  margin: 10px 2px 0;
  font-size: 12px;
  color: var(--subtle);
}
.sec-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.sec-row h2 {
  font-size: 22px;
}
.mk .sec-row p {
  font-size: 13px;
  color: var(--muted);
}
.mx {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  overflow-x: auto;
}
.mx table {
  width: 100%;
  border-collapse: collapse;
  min-width: 720px;
  font-size: 13px;
}
.mx th,
.mx td {
  padding: 10px 14px;
  text-align: left;
  border-top: 1px solid var(--border-soft);
  vertical-align: middle;
}
.mx thead th {
  border-top: 0;
  background: var(--surface-2);
  font-size: 12.5px;
  position: sticky;
  top: 0;
}
.mx thead th .pn {
  display: block;
  font-weight: 650;
  color: var(--text);
}
.mx thead th .pp {
  display: block;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.mx th:not(:first-child),
.mx td:not(:first-child) {
  text-align: center;
  width: 15%;
}
.mx .grp td {
  background: var(--surface-2);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--subtle);
  letter-spacing: 0.01em;
  padding-top: 9px;
  padding-bottom: 9px;
}
.mx td small {
  display: block;
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 1px;
}
.mx .y {
  display: inline-flex;
  color: var(--ok);
}
.mx .n {
  color: var(--faint);
}
.mx .col-feat {
  background: color-mix(in srgb, var(--accent) 5%, transparent);
}
.faq {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.faq details {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  padding: 0;
}
.faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  font-size: 13.5px;
  font-weight: 600;
  min-height: 44px;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: '';
  margin-left: auto;
  width: 8px;
  height: 8px;
  border-right: 1.6px solid var(--subtle);
  border-bottom: 1.6px solid var(--subtle);
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.15s;
  flex: 0 0 auto;
}
.faq details[open] summary::after {
  transform: rotate(225deg) translateY(-2px);
}
.mk .faq details p {
  margin: 0;
  padding: 0 16px 15px;
  font-size: 13px;
  color: var(--muted);
}

/* ── CTA band ────────────────────────────────────────────── */
.cta-band {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 72px;
  padding: 26px 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.cta-band h2 {
  font-size: 20px;
  letter-spacing: -0.015em;
}
.cta-band p {
  margin-top: 4px;
  font-size: 13.5px;
  color: var(--muted);
}
.cta-a {
  margin-left: auto;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.content-main .cta-band {
  margin-top: 56px;
}

/* ── Footer ──────────────────────────────────────────────── */
.site-foot {
  padding: 0 0 40px;
  font-size: 12.5px;
  color: var(--subtle);
}
.fgrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  padding-bottom: 24px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border-soft);
}
.fcol {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.fl {
  margin: 0 0 2px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--subtle);
  letter-spacing: 0.01em;
}
.fcol a {
  color: var(--muted);
  font-size: 13px;
  width: fit-content;
  padding: 3px 0;
}
.fcol a:hover {
  color: var(--text);
}

/* ── Content shell (generated sections, legal, contact) ───── */
.content-main {
  max-width: calc(760px + 2 * var(--gutter));
  margin: 0 auto;
  padding: 40px var(--gutter) 64px;
}
.crumb,
.content-breadcrumb {
  font-size: 12.5px;
  color: var(--subtle);
  margin-bottom: 18px;
}
.crumb ol,
.content-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.crumb li:not(:last-child)::after,
.content-breadcrumb li:not(:last-child)::after {
  content: '/';
  margin-left: 6px;
  color: var(--faint);
}
.crumb a,
.content-breadcrumb a {
  color: var(--muted);
}
.crumb [aria-current],
.content-breadcrumb [aria-current] {
  color: var(--text);
}
.content-main h1 {
  font-size: clamp(28px, 3.4vw, 36px);
  margin: 6px 0 0;
}
.content-main .lead,
.content-lead,
.content-main .deck {
  margin: 12px 0 0;
  font-size: 17px;
  color: var(--muted);
  line-height: 1.5;
}
.content-main .meta,
.content-meta,
.ed-hero-meta {
  margin: 10px 0 0;
  font-size: 12.5px;
  color: var(--subtle);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: center;
}
.ed-hero-meta b {
  font-weight: 600;
  color: var(--muted);
}
.ed-hero-meta .dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--faint);
}
.eyebrow-k {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--accent-text);
}

.prose {
  margin-top: 28px;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--text);
}
.prose > :first-child {
  margin-top: 0;
}
.prose h2 {
  font-size: 22px;
  margin: 36px 0 10px;
  scroll-margin-top: 80px;
}
.prose h3 {
  font-size: 17px;
  margin: 24px 0 8px;
}
.prose h4 {
  font-size: 15.5px;
  margin: 20px 0 6px;
}
.prose p {
  margin: 0 0 14px;
}
.prose ul,
.prose ol {
  padding-left: 22px;
  margin: 12px 0 16px;
}
.prose li + li {
  margin-top: 6px;
}
.prose a {
  text-decoration: underline;
  text-decoration-color: var(--accent-soft);
  text-underline-offset: 2px;
}
.prose a:hover {
  text-decoration-color: currentColor;
}
.prose strong,
.prose b {
  font-weight: 650;
}
.prose blockquote {
  margin: 18px 0;
  padding: 4px 0 4px 16px;
  border-left: 3px solid var(--accent-soft);
  color: var(--muted);
}
.prose hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 32px 0;
}
.prose code {
  font: 13px var(--mono);
  background: var(--surface-3);
  padding: 1px 5px;
  border-radius: 5px;
}
.prose pre {
  position: relative;
  margin: 16px 0;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  overflow-x: auto;
  font: 13px/1.55 var(--mono);
}
.prose pre code {
  background: none;
  padding: 0;
  font-size: inherit;
}
.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0 20px;
  font-size: 14px;
  display: block;
  overflow-x: auto;
}
.prose th,
.prose td {
  padding: 8px 12px;
  border: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}
.prose thead th,
.prose thead td {
  background: var(--surface-2);
  font-weight: 600;
}
.prose img {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  height: auto;
}
.prose section {
  scroll-margin-top: 80px;
}

/* Generated FAQ + compare disclaimer */
.content-faq {
  margin-top: 40px;
}
.content-faq h2,
.ed-faq h2 {
  font-size: 22px;
  margin: 0 0 12px;
}
.content-faq details,
.ed-faq details {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  margin-top: 8px;
}
.content-faq summary,
.ed-faq summary {
  cursor: pointer;
  padding: 12px 16px;
  font-size: 14.5px;
  font-weight: 600;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.content-faq details > div,
.ed-faq details > .a {
  padding: 0 16px 14px;
  font-size: 14.5px;
  color: var(--muted);
}
.content-disclaimer {
  margin-top: 32px;
  padding: 14px 16px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  font-size: 13px;
  color: var(--muted);
}
.content-disclaimer p {
  margin: 0;
}
.content-disclaimer p + p {
  margin-top: 8px;
}

/* Generated section index (index-base.html) */
.content-index-list {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.content-index-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
}
.content-index-card:hover {
  text-decoration: none;
  border-color: var(--border-strong);
  background: var(--hover);
}
.content-index-card-title {
  font-weight: 600;
  font-size: 15.5px;
}
.content-index-card-desc {
  font-size: 14px;
  color: var(--muted);
}

/* Editorial articles (learn, use-cases, blog): article column + sticky
   "On this page" list. The reading-progress bar and serif body are gone. */
.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 760px) 220px;
  gap: 48px;
  justify-content: center;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.article-layout .content-main {
  margin: 0;
  padding-left: 0;
  padding-right: 0;
  max-width: none;
}
.ed-toc {
  position: sticky;
  top: 60px;
  align-self: start;
  max-height: calc(100vh - 60px);
  overflow-y: auto;
  padding: 48px 0 24px;
}
.ed-toc-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--subtle);
  margin-bottom: 8px;
}
.ed-toc ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ed-toc a {
  display: flex;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 7px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.4;
}
.ed-toc a:hover {
  background: var(--hover);
  color: var(--text);
  text-decoration: none;
}
.ed-toc a.active {
  background: var(--accent-weak);
  color: var(--accent-text);
}
.ed-toc .n {
  font-variant-numeric: tabular-nums;
  color: var(--subtle);
  flex: 0 0 auto;
}
/* The active entry sits on the accent wash; its number takes the entry's
   accent-text ink (>7:1) instead of --subtle (4.27:1 on the wash). */
.ed-toc a.active .n {
  color: inherit;
}
.ed-h-num {
  display: inline-block;
  margin-right: 10px;
  font-size: 0.7em;
  font-weight: 600;
  color: var(--accent-text);
  font-variant-numeric: tabular-nums;
  vertical-align: 0.12em;
}
.ed-tldr,
.ed-problem {
  margin: 0 0 20px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.ed-tldr .tag,
.ed-problem .lbl {
  display: inline-block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-text);
}
.ed-tldr p,
.ed-problem p {
  margin: 0;
}
.ed-reasons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 8px 0 16px;
}
.ed-reason {
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.ed-reason .num {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-text);
  font-variant-numeric: tabular-nums;
}
.prose .ed-reason h3 {
  margin: 4px 0 6px;
  font-size: 16px;
}
.prose .ed-reason p {
  margin: 0;
  font-size: 14.5px;
  color: var(--muted);
}
.ed-faq {
  margin-top: 36px;
}

/* Code copy button (nav.js adds it to every <pre><code>) */
pre.code-block-wrap {
  position: relative;
  padding-top: 36px;
}
.code-copy-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 1;
  height: 26px;
  padding: 0 10px;
  font:
    600 12px/1 'Inter',
    system-ui,
    sans-serif;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
}
.code-copy-btn:hover {
  color: var(--text);
  background: var(--hover);
}
.code-copy-btn.is-copied {
  color: var(--accent-text);
  border-color: var(--accent);
}

/* Legal pages: the Termly policy is the one allowed frame. */
.legal-frame {
  display: block;
  width: 100%;
  min-height: 80vh;
  border: 0;
  margin-top: 24px;
  background: #fff;
  border-radius: var(--radius-sm);
}

/* Legal pages with wide tables (privacy, sub-processors — TES-1056). The page
   is wider than the 760px content shell so a six-column table stays readable;
   running text keeps the shell measure. Below the table width the table
   scrolls inside its own box (.prose table is display:block), never the page. */
.content-main.legal-wide {
  max-width: calc(1040px + 2 * var(--gutter));
}
.legal-wide .prose > :not(table) {
  max-width: 760px;
}
.prose table.legal-table {
  font-size: 13.5px;
  line-height: 1.5;
}
.prose table.legal-table th[scope='row'] {
  min-width: 9.5rem;
  font-weight: 600;
}
.prose table.legal-table td {
  min-width: 8.5rem;
}
/* The table scrolls sideways on a phone; say so (gate fix, PR #786). */
.legal-wide .prose .table-hint {
  display: none;
  margin: 12px 0 -8px;
  font-size: 12.5px;
  color: var(--subtle);
}
@media (max-width: 480px) {
  .legal-wide .prose .table-hint {
    display: block;
  }
}

/* Contact: see the drop 95 block at the end of the file (TES-992). */
.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

/* ── Legacy shell bridge ─────────────────────────────────── */
/* Classes the hand-authored landing pages still use from the retired
   site.css. Restyled to the v2 tokens; their page bodies are untouched until
   the round-3 designs replace them. */
.site-shell {
  width: min(100% - 2 * var(--gutter), var(--max));
  margin: 0 auto;
}
/* Those pages use --accent as a text colour (site.css's accent was a darker
   blue). Their scope gets an accent that keeps AA as text on the v2 surfaces. */
/* The same pages also paint result colours and the accent-strong ink onto
   the v2 surfaces, where site.css's tinted backgrounds used to sit; these
   values keep those labels at AA on the new surfaces (TES-990 gate). */
.legacy-page {
  --accent: #4f46e5;
}
.legacy-page.blog-post {
  --hub-success: #0b7a52;
  --hub-fail: #a63a0a;
  --hub-warn: #9a4f07;
}
.legacy-page .int-tag.agent {
  color: #5b45d6;
}
.dark .legacy-page {
  --accent: #a5b4fc;
  --accent-strong: #a5b4fc;
}
.dark .legacy-page.blog-post {
  --hub-success: #34d399;
  --hub-fail: #f87171;
  --hub-warn: #fbbf24;
}
.dark .legacy-page .int-tag.agent {
  color: #c4b5fd;
}
@media (prefers-color-scheme: dark) {
  :root:not(.light) .legacy-page {
    --accent: #a5b4fc;
    --accent-strong: #a5b4fc;
  }
  :root:not(.light) .legacy-page.blog-post {
    --hub-success: #34d399;
    --hub-fail: #f87171;
    --hub-warn: #fbbf24;
  }
  :root:not(.light) .legacy-page .int-tag.agent {
    color: #c4b5fd;
  }
}
/* blog-post.css colours every link in the article body with the accent,
   which turned the CTA strip's buttons accent-on-accent. */
.blog-post .body a.button {
  color: var(--on-accent);
  text-decoration: none;
}
.blog-post .body a.button-secondary {
  color: var(--text);
  text-decoration: none;
}
.button,
.button-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 42px;
  padding: 0 20px;
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 550;
  text-decoration: none;
  white-space: nowrap;
}
.button {
  background: var(--accent-fill);
  color: var(--on-accent);
  border: 1px solid var(--accent-fill);
}
.button:hover {
  filter: brightness(0.92);
  color: var(--on-accent);
  text-decoration: none;
}
.button-secondary {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
}
.button-secondary:hover {
  background: var(--hover);
  color: var(--text);
  text-decoration: none;
}
.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.page-hero {
  padding: 48px 0 16px;
}
.page-hero h1,
.section-head h2 {
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.12;
  text-wrap: balance;
}
.page-hero h1 {
  margin: 12px 0;
  font-size: clamp(30px, 4.2vw, 44px);
}
.page-hero p,
.section-intro {
  max-width: 46rem;
  margin: 0;
  color: var(--muted);
  font-size: 16px;
}
.section-head {
  margin-bottom: 20px;
}
.section-head h2 {
  margin: 0 0 8px;
  font-size: clamp(24px, 3vw, 32px);
}
.product-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: 40px;
  align-items: center;
  margin-top: 40px;
}
.product-row + .product-row {
  margin-top: 56px;
}
.product-row--reversed {
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
}
.product-row-copy {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.product-row-copy h3 {
  margin: 0;
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.product-row-copy p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}
.product-row-frame {
  margin: 0;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shot-shadow);
  overflow: hidden;
}
.product-row-frame img {
  width: 100%;
  height: auto;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1100px) {
  .article-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .ed-toc {
    display: none;
  }
}
@media (max-width: 1040px) {
  .plans,
  .trust {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .trust > div:nth-child(3) {
    border-left: 0;
  }
  .trust > div:nth-child(n + 3) {
    border-top: 1px solid var(--border-soft);
  }
}
@media (max-width: 900px) {
  .tour,
  .tour.rev {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .tour.rev .tour-copy {
    order: 0;
  }
  .proof {
    grid-template-columns: 1fr;
  }
  .proof > div {
    border-left: 0;
    border-top: 1px solid var(--border-soft);
  }
  .proof > div:first-child {
    border-top: 0;
  }
  .ai-grid {
    grid-template-columns: 1fr;
  }
  .product-row,
  .product-row--reversed {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
  .product-row--reversed .product-row-copy {
    order: -1;
  }
}
@media (max-width: 640px) {
  :root {
    --gutter: 16px;
  }
  .sec,
  .hero {
    padding-top: 48px;
  }
  .sec-last {
    padding-bottom: 48px;
  }
  .hero h1 {
    font-size: clamp(30px, 9vw, 36px);
  }
  .hero .cta .btn {
    flex: 1 1 100%;
  }
  .shot.hero-shot {
    margin-top: 28px;
  }
  .proof {
    margin-top: 48px;
  }
  .plans,
  .faq,
  .trust,
  .card-grid,
  .ed-reasons {
    grid-template-columns: 1fr;
  }
  .trust > div {
    border-left: 0;
    border-top: 1px solid var(--border-soft);
  }
  .trust > div:first-child {
    border-top: 0;
  }
  .mk .plan .who {
    min-height: 0;
  }
  .fgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .cta-band {
    margin-top: 48px;
    padding: 20px;
  }
  .cta-a {
    margin-left: 0;
    width: 100%;
  }
  .cta-a .btn {
    flex: 1 1 auto;
  }
  .tour-copy h3 {
    font-size: 22px;
  }
  .content-main {
    padding-top: 28px;
    padding-bottom: 48px;
  }
  .pricing-hero {
    padding-top: 48px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .faq summary::after,
  .btn {
    transition: none;
  }
}

/* ══════════════════════════════════════════════════════════════════
   Drop 95 — Docs, Blog, Contact (TES-992). Appended so one stylesheet still
   serves the site; nothing above this banner changed except the retired
   contact block. The docs keep their class names (.docs-sidebar,
   .docs-callout, .docs-steps, .docs-card-grid, .docs-pagination,
   .docs-lead, .docs-breadcrumb) and are styled here directly, which is what
   retires docs/docs.css.

   Every rule is scoped to its container: the hand-authored blog posts,
   the compare index and the learn / use-cases pages use .toc, .pill,
   .featured and .actions for their own components and must not be restyled.
   ══════════════════════════════════════════════════════════════════ */

/* ── Docs: sidebar · article · on-page TOC ─────────────────────── */
.docs-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 40px;
  align-items: start;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.docs-layout.has-toc {
  grid-template-columns: 240px minmax(0, 1fr) 200px;
}
.docs-sidebar {
  position: sticky;
  top: 60px;
  max-height: calc(100vh - 60px);
  overflow-y: auto;
  padding: 32px 12px 32px 0;
  border-right: 1px solid var(--border-soft);
}
.docs-sidebar-section + .docs-sidebar-section {
  margin-top: 20px;
}
.docs-sidebar-label {
  display: block;
  padding: 0 10px;
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--subtle);
}
.docs-sidebar a {
  display: flex;
  align-items: center;
  min-height: 30px;
  padding: 3px 10px;
  border-radius: 7px;
  font-size: 13px;
  line-height: 1.35;
  color: var(--muted);
}
.docs-sidebar a:hover {
  background: var(--hover);
  color: var(--text);
  text-decoration: none;
}
.docs-sidebar a[aria-current='page'] {
  background: var(--accent-weak);
  color: var(--accent-text);
  font-weight: 550;
}
.docs-content {
  min-width: 0;
  max-width: 760px;
  padding: 32px 0 64px;
}
:where(.docs-content, .post-page) :where(h1, h2, h3, h4) {
  color: var(--text);
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.2;
  text-wrap: balance;
}
.docs-content h1 {
  margin: 0;
  font-size: clamp(28px, 3.4vw, 36px);
  line-height: 1.15;
}
.prose .docs-lead,
.docs-lead {
  margin: 10px 0 0;
  font-size: 17px;
  line-height: 1.5;
  color: var(--muted);
}
.prose .docs-lead + * {
  margin-top: 28px;
}
.docs-toggle {
  display: none;
  font: inherit;
  font-size: 14px;
  font-weight: 550;
  cursor: pointer;
}

/* Breadcrumb list form used by the docs (<nav class="docs-breadcrumb"><ol>).
   The docs breadcrumb sits inside article.prose.long, so every selector here
   carries the nav element to out-rank .prose.long ol / li (TES-992 gate R1). */
.docs-breadcrumb {
  margin: 0 0 18px;
  font-size: 12.5px;
}
.prose nav.docs-breadcrumb ol,
.docs-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.prose nav.docs-breadcrumb li,
.docs-breadcrumb li {
  margin: 0;
  color: var(--subtle);
}
.docs-breadcrumb li:not(:last-child)::after {
  content: '›';
  margin-left: 6px;
}
.prose nav.docs-breadcrumb a,
.docs-breadcrumb a {
  color: var(--muted);
  text-decoration: none;
}
.prose nav.docs-breadcrumb a:hover {
  color: var(--text);
  text-decoration: underline;
}
.prose nav.docs-breadcrumb [aria-current='page'],
.docs-breadcrumb [aria-current='page'] {
  color: var(--text);
}

/* On-page TOC: a sticky right rail at ≥1200 px only (handoff §1). The
   active entry is set by assets/article.js (the TES-990 scroll handler:
   .active + aria-current="location"). accent-text on the page ground is
   ≥ 4.5:1 in both themes. */
:is(.docs-layout, .post-layout) > .toc {
  position: sticky;
  top: 76px;
  align-self: start;
  max-height: calc(100vh - 76px);
  overflow-y: auto;
  padding: 32px 0 24px 16px;
  border-left: 1px solid var(--border-soft);
  font-size: 13px;
}
:is(.docs-layout, .post-layout) > .toc .toc-label {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--subtle);
}
:is(.docs-layout, .post-layout) > .toc ul {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
:is(.docs-layout, .post-layout) > .toc a {
  display: block;
  margin-left: -17px;
  padding: 4px 0 4px 15px;
  border-left: 2px solid transparent;
  line-height: 1.4;
  color: var(--muted);
}
:is(.docs-layout, .post-layout) > .toc a:hover {
  color: var(--text);
  text-decoration: none;
}
:is(.docs-layout, .post-layout) > .toc a.active,
:is(.docs-layout, .post-layout) > .toc a[aria-current] {
  border-left-color: var(--accent);
  color: var(--accent-text);
  font-weight: 550;
}

/* ── Long-form typography (docs article + blog post): .prose.long ── */
.prose.long {
  margin-top: 0;
  font-size: 15.5px;
  line-height: 1.7;
}
.prose.long h2 {
  margin: 44px 0 12px;
  padding-top: 16px;
  border-top: 1px solid var(--border-soft);
  font-size: 22px;
  scroll-margin-top: 76px;
}
.prose.long h3 {
  margin: 28px 0 8px;
  font-size: 17px;
  scroll-margin-top: 76px;
}
.prose.long h4 {
  margin: 20px 0 6px;
  font-size: 15px;
}
.prose.long ul,
.prose.long ol {
  margin: 0 0 14px;
  padding-left: 22px;
}
.prose.long li {
  margin: 0 0 6px;
}
.prose.long li + li {
  margin-top: 0;
}
.prose.long li > :is(ul, ol) {
  margin: 6px 0 0;
}
.prose.long strong,
.prose.long b {
  font-weight: 600;
}
.prose.long a {
  text-decoration-color: color-mix(in srgb, var(--accent-text) 35%, transparent);
}
.prose.long a:hover {
  text-decoration-color: var(--accent-text);
}
.prose.long blockquote:not(.docs-callout, .callout) {
  margin: 0 0 14px;
  padding: 2px 0 2px 16px;
  border-left: 2px solid var(--border-strong);
  color: var(--muted);
}
.prose.long hr {
  margin: 28px 0;
  border-top-color: var(--border-soft);
}

/* Tables. The docs write bare <table>s: the table itself becomes the scroll
   box (border + radius), as wide as its content up to the column. A
   .table-wrap div is the same box for new pages. */
.prose.long table {
  display: block;
  width: max-content;
  max-width: 100%;
  margin: 0 0 18px;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  border-collapse: collapse;
  font-size: 14px;
}
.prose.long .table-wrap {
  margin: 0 0 18px;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.prose.long .table-wrap table {
  display: table;
  width: 100%;
  margin: 0;
  border: 0;
  border-radius: 0;
}
/* A long unbroken string in running text (a sample URL) wraps instead of
   pushing the page sideways at phone width (TES-991). */
.prose.long p,
.prose.long li {
  overflow-wrap: break-word;
}
.prose.long th,
.prose.long td {
  padding: 9px 12px;
  border: 0;
  border-top: 1px solid var(--border-soft);
  text-align: left;
  vertical-align: top;
  line-height: 1.5;
}
.prose.long th,
.prose.long thead td {
  border-top: 0;
  background: var(--surface-2);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}

/* Code and keys */
.prose.long pre {
  margin: 0 0 18px;
}
.prose kbd,
kbd.key {
  display: inline-block;
  min-width: 20px;
  padding: 0 6px;
  border: 1px solid var(--border-strong);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: var(--surface);
  font: 12px/18px var(--mono);
  color: var(--text);
  text-align: center;
}

/* Images: figure.shot (the home page frame) is the canonical form; a bare
   <img> gets the border and radius only. */
.prose.long img {
  max-width: 100%;
}
.prose.long figure.shot {
  margin: 18px 0 22px;
}
.prose.long figure.shot img {
  border: 0;
  border-radius: 0;
}

/* Callouts. Docs markup: <blockquote class="docs-callout docs-callout--info|
   --warning|--danger"><p><strong>Title.</strong> body</p></blockquote>.
   .callout / -note / -warn / -danger / -tldr is the same component for new
   pages and the blog. A full 1 px border on a tinted ground and a 24 px icon
   tile; no left-border stripe. The icon is a mask painted in the variant's
   ink, so it follows the theme (the drop's fixed-colour data: icons did not
   change in dark mode).
   Block layout, not grid (TES-1011): many docs callouts carry the body as
   bare text after a leading <strong> title, and a grid turns each bare text
   run into an anonymous item that lands in the 24 px icon column (one word
   per line). The left padding reserves the tile column and both
   pseudo-elements are absolutely positioned, so any child shape lays out. */
.prose :is(.callout, .docs-callout) {
  --callout-ink: var(--muted);
  --callout-tile: var(--surface-3);
  --callout-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 8h.01'/%3E%3C/svg%3E");
  position: relative;
  display: block;
  margin: 0 0 18px;
  padding: 14px 16px 14px 52px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
}
.prose :is(.callout, .docs-callout)::before {
  content: '';
  position: absolute;
  top: 14px;
  left: 16px;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: var(--callout-tile);
}
.prose :is(.callout, .docs-callout)::after {
  content: '';
  position: absolute;
  top: 19px;
  left: 21px;
  width: 14px;
  height: 14px;
  background: var(--callout-ink);
  -webkit-mask: var(--callout-icon) center / contain no-repeat;
  mask: var(--callout-icon) center / contain no-repeat;
}
.prose :is(.callout, .docs-callout) > * {
  margin: 0;
}
.prose :is(.callout, .docs-callout) > * + * {
  margin-top: 8px;
}
/* Bare-text shape (<strong>Title</strong> body, no <p>): the leading title
   takes its own line, as it did before the v2 shell, so a title without a
   full stop does not run into the body. <p>-wrapped titles stay inline. */
.prose :is(.callout, .docs-callout) > strong:first-child {
  display: block;
  margin-bottom: 2px;
}
.prose :is(.callout, .docs-callout) :is(ul, ol) {
  margin: 8px 0 0;
  padding-left: 20px;
}
.prose :is(.callout, .docs-callout) p {
  margin: 0;
}
.prose :is(.callout, .docs-callout) p + p {
  margin-top: 8px;
}
.prose :is(.callout-note, .docs-callout--info) {
  --callout-ink: var(--accent-text);
  --callout-tile: color-mix(in srgb, var(--accent) 18%, var(--surface));
  background: var(--accent-weak);
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}
.prose :is(.callout-warn, .docs-callout--warning) {
  --callout-ink: color-mix(in srgb, var(--block) 72%, var(--text));
  --callout-tile: color-mix(in srgb, var(--block) 18%, var(--surface));
  --callout-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l10 18H2z'/%3E%3Cpath d='M12 10v4M12 17h.01'/%3E%3C/svg%3E");
  background: color-mix(in srgb, var(--block) 10%, var(--surface));
  border-color: color-mix(in srgb, var(--block) 35%, transparent);
}
.prose :is(.callout-danger, .docs-callout--danger) {
  --callout-ink: color-mix(in srgb, var(--fail) 80%, var(--text));
  --callout-tile: color-mix(in srgb, var(--fail) 16%, var(--surface));
  --callout-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M15 9l-6 6M9 9l6 6'/%3E%3C/svg%3E");
  background: color-mix(in srgb, var(--fail) 8%, var(--surface));
  border-color: color-mix(in srgb, var(--fail) 35%, transparent);
}
.prose .callout-tldr {
  padding-left: 16px;
  background: var(--accent-weak);
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
  font-size: 15px;
}
.prose .callout-tldr::before {
  content: 'TL;DR';
  position: static;
  display: block;
  margin-bottom: 6px;
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--accent-text);
}
.prose .callout-tldr::after {
  content: none;
}
.prose .callout-tldr > * + * {
  margin-top: 0;
}

/* Numbered steps (<ol class="docs-steps">). The number is 12 px, so it sits
   on the accent wash in accent-text ink, never on the fill (drop 94 item 7). */
/* ol.docs-steps inside :is() lifts this above .prose.long ol. */
.prose :is(ol.docs-steps, .docs-steps, .steps) {
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
  counter-reset: steps;
}
.prose :is(.docs-steps, .steps) > li {
  position: relative;
  margin: 0 0 12px;
  padding-left: 38px;
  counter-increment: steps;
}
.prose :is(.docs-steps, .steps) > li::before {
  content: counter(steps);
  position: absolute;
  top: 1px;
  left: 0;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent-weak);
  color: var(--accent-text);
  font-size: 12px;
  font-weight: 650;
}

/* Section cards (docs landing + section overview pages). */
.prose .docs-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
  margin: 22px 0 18px;
}
.prose a.docs-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  transition:
    border-color 0.12s,
    box-shadow 0.12s;
}
.prose a.docs-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow);
  text-decoration: none;
}
.prose a.docs-card:hover :is(h2, h3) {
  color: var(--accent-text);
}
.docs-card-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-bottom: 2px;
  border-radius: 8px;
  background: var(--accent-weak);
  color: var(--accent-text);
  font-size: 15px;
  line-height: 1;
}
.docs-card-icon svg {
  width: 16px;
  height: 16px;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* The docs landing has no h2 of its own, so its cards are h2s (one
   h1 → h2 → h3 tree); section overview pages use h3s under their h2. */
.prose .docs-card :is(h2, h3),
.prose.long .docs-card h2 {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.prose .docs-card p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--muted);
}

/* Prev / next (<nav class="docs-pagination">): two bordered cards with a
   Previous / Next label from ::before; the arrows stay in the link text. */
.docs-pagination {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 44px;
  padding-top: 24px;
  border-top: 1px solid var(--border-soft);
}
.docs-pagination a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  min-height: 44px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-size: 14px;
  font-weight: 550;
}
.docs-pagination a::before {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--subtle);
}
.docs-pagination-prev {
  grid-column: 1;
}
.docs-pagination-prev::before {
  content: 'Previous';
}
.docs-pagination-next {
  grid-column: 2;
  align-items: flex-end;
  text-align: right;
}
.docs-pagination-next::before {
  content: 'Next';
}
.docs-pagination a:hover {
  border-color: var(--border-strong);
  background: var(--hover);
  text-decoration: none;
}

/* "Was this page helpful?": one mailto, no service behind it. */
.page-feedback {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin: 28px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--border-soft);
  font-size: 13px;
  color: var(--subtle);
}
.page-feedback a {
  font-weight: 550;
}

@media (max-width: 1199px) {
  .docs-layout.has-toc {
    grid-template-columns: 240px minmax(0, 1fr);
  }
  :is(.docs-layout, .post-layout) > .toc {
    display: none;
  }
}
@media (max-width: 900px) {
  .docs-layout,
  .docs-layout.has-toc {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  /* Phones: the sidebar opens in place above the article (not off-canvas)
     from the "Docs navigation" button under the breadcrumb. */
  .docs-sidebar {
    display: none;
    position: static;
    max-height: none;
    padding: 16px 0;
    border-right: 0;
    border-bottom: 1px solid var(--border-soft);
  }
  .docs-sidebar.is-open {
    display: block;
  }
  /* nav.js scrolls the opened sidebar to the top: clear the sticky header. */
  .docs-sidebar {
    scroll-margin-top: 60px;
  }
  .docs-sidebar a {
    min-height: 44px;
  }
  .docs-toggle {
    display: inline-flex;
    margin: -6px 0 18px;
  }
  .docs-content {
    padding-top: 20px;
    padding-bottom: 48px;
  }
}
@media (max-width: 640px) {
  .docs-pagination {
    grid-template-columns: minmax(0, 1fr);
  }
  .docs-pagination-prev,
  .docs-pagination-next {
    grid-column: 1;
  }
}

/* ── Docs search + Copy page (drop 101, TES-996) ──────────────────
   Ported from the drop's docs-tools.css, never its copy of this sheet, with
   the house kit applied: dialog --radius and rows --radius-sm, the dark-aware
   --shadow, the house kbd.key (compact .key-sm), the prose link underline on
   the no-results link and the global :focus-visible ring on menu items. */

/* Header trigger, docs pages only: the field and the icon both carry
   [data-docs-search] (see docs/_template.html). */
.nav-search-field {
  flex: 0 1 340px;
  width: auto;
  margin: 0 auto;
}
.nav-in:has(.nav-search-field) .nav-r {
  margin-left: 0;
}
/* While the field shows, only it gives way as the header narrows; the brand
   would otherwise shrink under its own name at 1104-1199 px. */
@media (min-width: 1101px) {
  .nav-in:has(.nav-search-field) > :not(.nav-search-field) {
    flex-shrink: 0;
  }
}
.docs-search-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 6px 0 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--subtle);
  font: inherit;
  font-size: 13.5px;
  text-align: left;
  cursor: pointer;
  transition:
    border-color 0.12s,
    color 0.12s;
}
.docs-search-btn:hover {
  border-color: var(--border-strong);
  color: var(--muted);
}
.docs-search-btn svg {
  flex: none;
}
.docs-search-btn .lbl {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.key-group {
  display: inline-flex;
  gap: 3px;
}
kbd.key.key-sm {
  min-width: 18px;
  padding: 0 4px;
  border-bottom-width: 1px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  line-height: 18px;
  color: var(--subtle);
}
.nav-search {
  display: none;
}
@media (max-width: 1100px) {
  .nav-search-field {
    display: none;
  }
  .nav-in:has(.nav-search-field) .nav-r {
    margin-left: auto;
  }
  .nav-search {
    display: grid;
  }
}
/* U1: the extra icon pushed "Start free" off-screen at 764-808 px, so pages
   that carry search fold the primary links into the menu 60 px earlier. */
@media (max-width: 820px) {
  .nav:has(.nav-search) .nav-links,
  .nav:has(.nav-search) .nav-r .btn-ghost {
    display: none;
  }
  .nav:has(.nav-search) .nav-r .menu-btn {
    display: grid;
  }
  .nav:has(.nav-search) .nav-panel.is-open {
    display: grid;
  }
}
@media (hover: none) {
  .docs-search-btn .key-group {
    display: none;
  }
}

/* Search dialog */
.dsearch {
  width: min(640px, calc(100vw - 32px));
  max-width: none;
  max-height: min(560px, 76vh);
  margin: 12vh auto auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow);
  font-size: 15px;
}
.dsearch[open] {
  display: flex;
  flex-direction: column;
}
.dsearch::backdrop {
  background: rgba(10, 13, 20, 0.42);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.dsearch-field {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 56px;
  padding: 0 10px 0 16px;
  border-bottom: 1px solid var(--border);
  color: var(--subtle);
}
.dsearch-field svg {
  flex: none;
}
.dsearch-field input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: var(--text);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.dsearch-field input::placeholder {
  color: var(--faint);
}
.dsearch-field input::-webkit-search-cancel-button {
  display: none;
}
.dsearch-close {
  flex: none;
  height: 26px;
  padding: 0 7px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--subtle);
  font: inherit;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
}
.dsearch-close:hover {
  border-color: var(--border-strong);
  color: var(--text);
}
.dsearch-close-t {
  display: none;
}
.dsearch-body {
  flex: 1;
  min-height: 0;
  padding: 4px 8px 10px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.dsearch-group {
  padding: 12px 10px 5px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--subtle);
}
.dsearch-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  color: var(--text);
}
.dsearch-item:hover {
  color: var(--text);
  text-decoration: none;
}
.dsearch-item[aria-selected='true'] {
  background: var(--accent-weak);
}
.dsearch-ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--muted);
}
.dsearch-item[aria-selected='true'] .dsearch-ico {
  border-color: var(--accent-soft);
  color: var(--accent-text);
}
.dsearch-txt {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 1px;
}
.dsearch-t,
.dsearch-s {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.dsearch-t {
  font-size: 14px;
  font-weight: 550;
  line-height: 1.35;
}
.dsearch-s {
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--muted);
}
.dsearch mark {
  background: none;
  color: var(--accent-text);
  font-weight: 650;
}
.dsearch-s mark {
  font-weight: 600;
}
.dsearch-enter {
  flex: none;
  color: var(--accent-text);
  opacity: 0;
}
.dsearch-item[aria-selected='true'] .dsearch-enter {
  opacity: 1;
}
/* Loading / no results / unavailable: a role=status sibling of the listbox. */
.dsearch-status {
  flex: none;
}
.dsearch-status:not(:empty) {
  padding: 36px 20px 40px;
  text-align: center;
  font-size: 14px;
  color: var(--muted);
  text-wrap: pretty;
}
.dsearch-status p {
  margin: 0;
}
.dsearch-status .dsearch-status-t {
  margin-bottom: 4px;
  font-weight: 600;
  color: var(--text);
}
.dsearch-status a {
  text-decoration: underline;
  text-decoration-color: var(--accent-soft);
  text-underline-offset: 2px;
}
.dsearch-status a:hover {
  text-decoration-color: currentColor;
}
.dsearch-foot {
  flex: none;
  display: flex;
  gap: 18px;
  padding: 9px 16px;
  border-top: 1px solid var(--border-soft);
  background: var(--surface-2);
  font-size: 12px;
  color: var(--subtle);
}
.dsearch-foot span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
@media (hover: none) {
  .dsearch-foot {
    display: none;
  }
}
@media (max-width: 640px) {
  .dsearch {
    width: 100%;
    height: 100%;
    max-height: none;
    margin: 0;
    border: 0;
    border-radius: 0;
  }
  .dsearch-field {
    height: 60px;
  }
  .dsearch-close {
    height: 44px;
    padding: 0 6px;
    border: 0;
    background: none;
    font-size: 15px;
    font-weight: 550;
    color: var(--accent-text);
  }
  .dsearch-close-k {
    display: none;
  }
  .dsearch-close-t {
    display: inline;
  }
  .dsearch-foot {
    display: none;
  }
  .dsearch-item {
    min-height: 52px;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .dsearch[open] {
    animation: dsearch-in 0.14s ease-out;
  }
}
@keyframes dsearch-in {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.985);
  }
}

/* Copy page split button, on the breadcrumb row. */
.docs-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 32px;
  margin: 0 0 18px;
}
.docs-head .docs-breadcrumb {
  min-width: 0;
  margin: 0;
}
.docs-page-actions {
  position: relative;
  flex: none;
}
.cp-split {
  display: inline-flex;
  height: 32px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.cp-split button {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  cursor: pointer;
  transition: background 0.12s;
}
.cp-split button:hover,
.docs-page-actions.is-open .cp-more {
  background: var(--hover);
}
.cp-split button:focus-visible {
  outline-offset: -2px;
}
.cp-split .cp-main {
  gap: 7px;
  padding: 0 11px 0 10px;
  font-size: 13px;
  font-weight: 550;
}
.cp-main-ico {
  display: grid;
  color: var(--muted);
}
.cp-main.is-copied .cp-main-ico {
  color: var(--ok);
}
.cp-split .cp-more {
  justify-content: center;
  width: 30px;
  border-left: 1px solid var(--border);
  color: var(--muted);
}
.cp-more svg {
  transition: transform 0.15s;
}
.docs-page-actions.is-open .cp-more svg {
  transform: rotate(180deg);
}
.cp-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 15;
  width: 296px;
  padding: 5px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.cp-menu[hidden] {
  display: none;
}
.prose .cp-item,
.cp-item {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  width: 100%;
  margin: 0;
  padding: 8px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.prose .cp-item:hover,
.cp-item:hover,
.cp-item:focus-visible {
  background: var(--hover);
  color: var(--text);
  text-decoration: none;
}
.cp-ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--muted);
}
.cp-txt {
  display: grid;
  gap: 1px;
  padding-top: 1px;
}
.cp-t {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.3;
}
.cp-t svg {
  color: var(--subtle);
}
.cp-s {
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--muted);
}
@media (max-width: 420px) {
  .cp-menu {
    width: min(296px, calc(100vw - 32px));
  }
}

/* ── Blog index ────────────────────────────────────────────────── */
.blog-head {
  max-width: 640px;
  padding: 56px 0 24px;
}
.blog-head h1 {
  font-size: clamp(30px, 4vw, 40px);
}
.mk .blog-head p:not(.kicker) {
  margin-top: 12px;
  font-size: 16px;
  color: var(--muted);
}
.blog-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0 0 20px;
}
.blog-filter .pill {
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-size: 13px;
  font-weight: 550;
}
.blog-filter .pill:hover {
  background: var(--hover);
  color: var(--text);
}
.blog-filter .pill[aria-pressed='true'] {
  border-color: var(--accent);
  background: var(--accent-weak);
  color: var(--accent-text);
}
.blog-filter .count {
  margin-left: auto;
  font-size: 12.5px;
  color: var(--subtle);
}
.post-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.post-list.cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.post-list > .post-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  transition:
    border-color 0.12s,
    box-shadow 0.12s;
}
.post-list > [hidden] {
  display: none;
}
.post-list > .post-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow);
  text-decoration: none;
}
.post-list > .post-card:hover :is(h2, h3) {
  color: var(--accent-text);
}
.post-list > .post-card.featured {
  grid-column: 1 / -1;
}
.post-list > .post-card :is(h2, h3) {
  margin: 0;
  font-size: 18px;
  font-weight: 650;
  letter-spacing: -0.015em;
  line-height: 1.25;
}
.post-list > .post-card.featured h2 {
  max-width: 32ch;
  font-size: 24px;
}
.post-list > .post-card.compact h3 {
  font-size: 15.5px;
}
.post-list > .post-card p {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
}
.post-list > .post-card .tag {
  align-self: flex-start;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--surface-3);
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 600;
}
.post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  font-size: 12.5px;
  color: var(--subtle);
}
.post-list > .post-card .post-meta {
  margin-top: auto;
  padding-top: 4px;
  font-size: 12.5px;
  color: var(--subtle);
}
.post-meta .dot::before {
  content: '·';
}
.post-list > .post-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 24px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  font-size: 14px;
  color: var(--muted);
  text-align: center;
}

/* ── Blog post (generated from _content/blog by base-blog-post.html) ── */
.post-head {
  margin-bottom: 8px;
  padding: 40px 0 28px;
  border-bottom: 1px solid var(--border-soft);
}
.post-head .crumb li:not(:last-child)::after {
  content: '›';
  color: var(--subtle);
}
.post-head h1 {
  max-width: 24ch;
  font-size: clamp(30px, 4vw, 40px);
  line-height: 1.12;
}
.mk .post-head .lead {
  max-width: 60ch;
  margin-top: 14px;
  font-size: 18px;
  line-height: 1.5;
  color: var(--muted);
}
.mk .post-head .post-meta {
  margin-top: 16px;
  font-size: 13px;
}
.post-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 200px;
  gap: 40px;
  align-items: start;
}
.post-layout > article {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  max-width: 720px;
  padding-top: 28px;
}
.post-layout > .toc {
  grid-column: 2;
  grid-row: 1;
  padding-top: 28px;
}
.prose .post-foot {
  margin-top: 44px;
  padding-top: 24px;
  border-top: 1px solid var(--border-soft);
}
.prose.long .post-foot h2 {
  margin: 0 0 14px;
  padding: 0;
  border: 0;
  font-size: 18px;
}
.prose .post-foot .faq {
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
}
.prose .post-foot .post-list {
  margin: 0;
}
.prose .post-foot .post-card,
.prose .post-foot .post-card:hover {
  text-decoration: none;
}
.post-page .cta-band {
  margin-top: 48px;
}
@media (max-width: 1199px) {
  .post-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
}
@media (max-width: 760px) {
  .post-list,
  .post-list.cols-3 {
    grid-template-columns: minmax(0, 1fr);
  }
  .post-list > .post-card.featured h2 {
    font-size: 20px;
  }
  .blog-head {
    padding-top: 40px;
  }
}

/* ── Contact ───────────────────────────────────────────────────── */
.contact-hero {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 28px;
  align-items: start;
  padding-top: 56px;
}
.contact-hero h1 {
  font-size: clamp(28px, 3.6vw, 38px);
}
.mk .contact-hero .lede {
  max-width: 54ch;
  margin-top: 14px;
  font-size: 16px;
  color: var(--muted);
}
.contact-channels {
  padding-top: 28px;
}
.contact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
:is(.contact-hero, .contact-grid) > .card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: 22px 24px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
:is(.contact-hero, .contact-grid) > .card h2 {
  font-size: 17px;
  letter-spacing: -0.015em;
}
:is(.contact-hero, .contact-grid) > .card p {
  font-size: 14px;
  color: var(--muted);
}
:is(.contact-hero, .contact-grid) > .card .tag {
  align-self: flex-start;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--accent-weak);
  color: var(--accent-text);
  font-size: 11.5px;
  font-weight: 600;
}
.contact-card .ico {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--accent-weak);
  color: var(--accent-text);
}
.contact-card .ico svg {
  width: 16px;
  height: 16px;
}
.contact-card .mail {
  align-self: flex-start;
  max-width: 100%;
  height: auto;
  min-height: 36px;
  padding: 7px 14px;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.4;
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
}
.mk .contact-card .foot {
  margin-top: auto;
  font-size: 12.5px;
  color: var(--subtle);
}
.contact-card .foot a {
  font-weight: 550;
}
:is(.contact-hero, .contact-grid) .card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
.trust.cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.contact-channels .trust address {
  margin-top: 6px;
  font-size: 12.5px;
  font-style: normal;
  color: var(--muted);
}
.contact-channels .trust .trust-note {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--subtle);
}
.contact-channels .trust strong {
  font-weight: 600;
  color: var(--text);
}
.contact-channels .trust a {
  text-decoration: underline;
  text-underline-offset: 2px;
}
@media (max-width: 900px) {
  .contact-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    padding-top: 40px;
  }
}
@media (max-width: 640px) {
  .contact-grid,
  .trust.cols-3 {
    grid-template-columns: minmax(0, 1fr);
  }
  .contact-channels .trust.cols-3 > div {
    border-left: 0;
  }
  .contact-channels .trust.cols-3 > div + div {
    border-top: 1px solid var(--border-soft);
  }
  .contact-card .mail,
  :is(.contact-hero, .contact-grid) .card-actions .btn {
    width: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .prose a.docs-card,
  .post-list > .post-card {
    transition: none;
  }
}

/* ══════════════════════════════════════════════════════════════════
   Integrations, Compare and connector pages (TES-1013, design drops 97 + 98)
   ══════════════════════════════════════════════════════════════════
   Ported from the drop-98 prototype's drop-97 and drop-98 blocks, never its
   stylesheet. Every rule sits under .ic, the class on <main> of
   /integrations, /integrations/linear, /integrations/notion, /compare and the
   five generated comparison articles, because the prototype's generic names
   (.feature, .lane, .n, .facts, .loop, .tour .tag) collide with use-cases,
   two blog posts and 28 other pages. The prototype's .faq-list and .fine-print
   are not ported: these pages use .faq and .content-disclaimer. Cards are
   the kit's .card-grid > .card. */

/* Connector mark tile: the owner's mark, unaltered, on a neutral plate. */
.ic .mark {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}
.ic .mark img {
  width: 22px;
  height: 22px;
}
.ic .mark.lg {
  width: 56px;
  height: 56px;
  border-radius: 14px;
}
.ic .mark.lg img {
  width: 32px;
  height: 32px;
}
.ic .mark.glyph {
  background: var(--surface-2);
  color: var(--muted);
  font: 600 13px/1 var(--mono);
}
.ic .integ .chip .mark.glyph {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  font-size: 10px;
}
.ic .live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--muted);
}
.ic .live::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ok);
}
.ic .hero .integ {
  justify-content: center;
  margin-top: 28px;
}
.ic a.card {
  color: var(--text);
  text-decoration: none;
}
.ic a.card:hover {
  border-color: var(--border-strong);
}
/* Underlined links (drop 98 ask C3, axe link-in-text-block). */
.ic :is(.conn-note a, .ledger a, .steer .to, .cmp .meta .link-more, .guide .foot, .sec-h p a) {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* Featured connector + the exchange illustration */
.ic .feature {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 40px;
  align-items: center;
  padding: 32px 36px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.ic .feature .head {
  display: flex;
  align-items: center;
  gap: 14px;
}
.ic .feature .head h3 {
  font-size: 24px;
  letter-spacing: -0.02em;
}
.ic .feature .head .live {
  margin-top: 4px;
}
.mk.ic .feature-copy > p {
  max-width: 52ch;
  margin-top: 14px;
  font-size: 16px;
  color: var(--muted);
}
.ic .feature .caps {
  margin-top: 16px;
}
.ic .feature .btn {
  margin-top: 20px;
}
.ic .exchange {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: 'l lanes r';
  align-items: center;
  gap: 14px;
  padding: 26px 22px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  background: var(--surface-2);
}
.ic .exchange .mark.lg {
  background: var(--surface);
}
.ic .exchange .end-l {
  grid-area: l;
}
.ic .exchange .end-r {
  grid-area: r;
}
.ic .exchange .twoway {
  display: none;
}
.ic .exchange .lanes {
  grid-area: lanes;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ic .exchange .lane {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  background: var(--surface);
  font-size: 12.5px;
  color: var(--muted);
}
.ic .exchange .lane.back {
  grid-template-columns: auto minmax(0, 1fr);
}
.ic .exchange .lane b {
  font-weight: 600;
  color: var(--text);
}
.ic .exchange .lane svg {
  color: var(--accent-text);
}
.ic .exchange .cap-line {
  grid-column: 1 / -1;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  color: var(--accent-text);
}
.ic .exchange .cap-line.quiet {
  color: var(--subtle);
}

/* Capability pills: same cells, same order, on every card. The state is in
   the text (a visually hidden ": supported" / ": not supported"). */
.ic .caps {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ic .cap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 9px;
  border-radius: 7px;
  background: var(--accent-weak);
  color: var(--accent-text);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.ic .cap svg {
  width: 13px;
  height: 13px;
}
.ic .cap.off {
  border: 1px dashed var(--border-strong);
  background: transparent;
  color: var(--subtle);
  font-weight: 500;
}
.ic .cap.off svg {
  opacity: 0.6;
}

/* Connector directory */
.ic .conn-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.ic .conn-grid > .card {
  padding: 20px 22px;
}
.ic .conn .top {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ic .conn .top h3 {
  font-size: 17px;
}
.ic .conn .top .live {
  margin-top: 2px;
}
.mk.ic .conn > p {
  flex: 1;
}
.ic .conn .caps {
  margin-top: 2px;
}
.ic .conn .link-more {
  margin-top: 6px;
}
.ic .conn-grid > .card.quiet {
  border-style: dashed;
  background: var(--surface-2);
}
.mk.ic .conn-note {
  margin-top: 16px;
  font-size: 13.5px;
  color: var(--subtle);
}
.ic .ways {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.ic .ways .card h3 {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ic .ways .card h3 svg {
  color: var(--accent-text);
}
.ic .ways .integ {
  gap: 8px;
  margin-top: 6px;
}
.ic .ways .integ .chip {
  height: 34px;
  font-size: 13px;
}
.ic .ways .integ .chip img {
  width: 18px;
  height: 18px;
}

/* Compare index */
.ic .honesty {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
  margin-top: 44px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  text-align: left;
}
.ic .honesty > div {
  padding: 22px 24px;
  border-left: 1px solid var(--border-soft);
}
.ic .honesty > div:first-child {
  border-left: 0;
  background: var(--surface-2);
}
.ic .honesty h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  letter-spacing: -0.01em;
}
.ic .honesty h2 svg {
  flex: 0 0 auto;
  color: var(--accent-text);
}
.mk.ic .honesty p {
  margin-top: 6px;
  font-size: 13.5px;
  color: var(--muted);
}
.ic .table-card {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.ic .table-card .table-wrap {
  overflow-x: auto;
}
.ic .ledger {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.ic .ledger :is(th, td) {
  padding: 12px 14px;
  border-top: 1px solid var(--border-soft);
  line-height: 1.5;
  text-align: left;
  vertical-align: top;
}
.ic .ledger th {
  border-top: 0;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}
.ic .ledger td:first-child {
  width: 1%;
  font-weight: 600;
  white-space: nowrap;
}
.ic .ledger.when th:nth-child(n + 2) {
  width: 40%;
}
.ic .ledger a {
  font-weight: 550;
}
.ic .ledger .k {
  display: none;
}
.ic .ledger .price b {
  font-weight: 650;
}
.ic .ledger .price .sep {
  padding: 0 4px;
  color: var(--subtle);
}
.mk.ic .table-note {
  padding: 10px 14px;
  border-top: 1px solid var(--border-soft);
  font-size: 12.5px;
  color: var(--subtle);
}
.ic .guide {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.ic .guide > .card {
  gap: 8px;
}
.ic .guide > .card h3 {
  font-size: 17px;
}
.ic .guide .foot {
  margin-top: auto;
  padding-top: 8px;
  font-size: 13.5px;
  font-weight: 550;
  color: var(--accent-text);
}
.ic .cmp-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.ic .cmp-list > .card {
  gap: 12px;
}
.ic .cmp .vs {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--subtle);
}
.ic .cmp .vs b {
  font-weight: 600;
  color: var(--text);
}
.ic .cmp .vs .tag {
  margin-left: auto;
}
.ic .cmp-list > .card h3 {
  font-size: 19px;
  line-height: 1.25;
}
.ic .cmp .split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--border-soft);
}
.ic .cmp .split h4 {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--muted);
}
.ic .cmp .split h4 svg {
  flex: 0 0 auto;
  color: var(--accent-text);
}
.mk.ic .cmp .split p {
  font-size: 13.5px;
}
.ic .cmp .meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 4px;
  font-size: 13px;
  color: var(--subtle);
}
.ic .cmp .meta .link-more {
  color: var(--accent-text);
}
.ic .steer {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.ic .steer a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 14px 20px;
  border-top: 1px solid var(--border-soft);
  color: var(--text);
  font-size: 14.5px;
  text-decoration: none;
}
.ic .steer a:first-child {
  border-top: 0;
}
.ic .steer a:hover {
  background: var(--hover);
}
.ic .steer .to {
  font-size: 13.5px;
  font-weight: 550;
  white-space: nowrap;
  color: var(--accent-text);
}
.ic .content-disclaimer {
  max-width: 80ch;
}

/* Comparison article (base-blog-post.html, rendered by render-compare-article.mjs) */
.ic .prose .table-wrap :is(th, td):first-child {
  white-space: nowrap;
}
.ic .prose .table-wrap td:nth-child(2) {
  background: color-mix(in srgb, var(--accent) 5%, transparent);
}
.ic .verdicts {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  margin: 0 0 18px;
}
.ic .prose .verdicts .callout {
  display: block;
  margin: 0;
}
.ic .prose .verdicts .callout::before,
.ic .prose .verdicts .callout::after {
  content: none;
}
.ic .prose .verdicts h3 {
  margin: 0 0 6px;
  font-size: 15px;
}
.ic .prose .verdicts p {
  margin: 0;
  font-size: 14px;
}
.ic .prose .verdicts .acts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.ic .prose .verdicts .acts .btn {
  text-decoration: none;
}
.ic .prose .content-disclaimer {
  margin-top: 28px;
}

/* Connector detail pages (drop 98 §3) */
.ic .conn-hero {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: 48px;
  align-items: center;
  padding-top: 64px;
}
.ic .conn-hero h1 {
  font-size: clamp(32px, 4vw, 48px);
  letter-spacing: -0.03em;
  line-height: 1.08;
}
.mk.ic .conn-hero .lede {
  max-width: 54ch;
  margin-top: 16px;
  font-size: 17px;
  color: var(--muted);
}
.ic .conn-hero .cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}
.ic .conn-hero .exchange {
  padding: 30px 26px;
}
.ic .conn-hero .exchange .mark.lg {
  width: 64px;
  height: 64px;
}
.ic .conn-hero .exchange .mark.lg img {
  width: 36px;
  height: 36px;
}
.ic .facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 40px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.ic .facts > div {
  padding: 16px 20px;
  border-left: 1px solid var(--border-soft);
}
.ic .facts > div:first-child {
  border-left: 0;
}
.ic .facts .lbl {
  display: block;
  margin-bottom: 8px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--subtle);
}
.mk.ic .facts p {
  font-size: 13.5px;
  color: var(--text);
}
.mk.ic .facts .caps + p {
  margin-top: 8px;
}
.ic .facts p small {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--muted);
}
.ic .tour .tag {
  display: inline-block;
  margin-bottom: 12px;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--accent-weak);
  color: var(--accent-text);
  font-size: 11.5px;
  font-weight: 600;
}
.mk.ic .tour-copy .sub {
  margin-top: 18px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}
.ic .loop {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.ic .loop > .card {
  gap: 6px;
}
.ic .loop > .card h3 {
  font-size: 16px;
}
.mk.ic .loop > .card p {
  font-size: 13.5px;
}
.ic .setup {
  max-width: 760px;
}
.ic .setup .docs-steps li h3 {
  margin: 0 0 4px;
  font-size: 15.5px;
}
.mk.ic .setup .docs-steps li p {
  margin: 0;
  font-size: 14.5px;
  color: var(--muted);
}
.ic .faq.single {
  grid-template-columns: minmax(0, 1fr);
  max-width: 760px;
}

@media (max-width: 1040px) {
  .ic .conn-grid,
  .ic .guide {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 900px) {
  .ic .conn-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    padding-top: 40px;
  }
}
@media (max-width: 760px) {
  .ic .feature {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    padding: 22px 20px;
  }
  .ic :is(.conn-grid, .ways, .guide, .cmp-list, .verdicts, .loop, .honesty, .facts, .cmp .split) {
    grid-template-columns: minmax(0, 1fr);
  }
  .ic :is(.honesty, .facts) > div {
    border-left: 0;
    border-top: 1px solid var(--border-soft);
  }
  .ic :is(.honesty, .facts) > div:first-child {
    border-top: 0;
  }
  /* The ledgers stack: each row becomes a block and the column header
     becomes a per-cell eyebrow (.k). */
  .ic .ledger thead {
    display: none;
  }
  .ic .ledger,
  .ic .ledger tbody,
  .ic .ledger tr,
  .ic .ledger td {
    display: block;
    width: 100%;
  }
  .ic .ledger tr {
    padding: 10px 0;
    border-top: 1px solid var(--border);
  }
  .ic .ledger tr:first-child {
    border-top: 0;
  }
  .ic .ledger td {
    padding: 4px 14px;
    border: 0;
    white-space: normal;
  }
  .ic .ledger td:first-child {
    width: auto;
    padding-top: 6px;
    font-size: 15px;
  }
  .ic .ledger .k {
    display: block;
    margin-bottom: 2px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--subtle);
  }
  .ic .steer a {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }
  .ic .exchange {
    grid-template-columns: auto auto minmax(0, 1fr);
    grid-template-areas: 'l tw r' 'lanes lanes lanes';
    justify-content: start;
    gap: 12px;
  }
  .ic .exchange .twoway {
    grid-area: tw;
    display: inline-flex;
    align-items: center;
    color: var(--accent-text);
  }
  .ic .exchange .end-r {
    justify-self: start;
  }
  .ic .conn-hero .cta .btn {
    flex: 1 1 auto;
  }
}
@media (max-width: 640px) {
  .ic .prose .table-wrap table {
    min-width: 560px;
  }
}
.ic .prose .docs-pagination a {
  text-decoration: none;
}
.ic .tour .shot.panel {
  justify-self: center;
  width: 100%;
  max-width: 360px;
}

/* ── Stacked 3-column docs tables under 480 px (TES-1023) ──────────────
   A three-column docs table squeezes its narrowest column to one word per
   line on a phone. Under 480 px each row becomes a bordered block and each
   cell shows its column header (data-label, written into the page) as an
   eyebrow, the same device as the compare ledgers. The header row stays in
   the accessibility tree, visually hidden. */
@media (max-width: 479px) {
  .prose.long .table-wrap:has(> table.stack) {
    overflow: visible;
    border: 0;
    border-radius: 0;
  }
  .prose.long table.stack,
  .prose.long table.stack tbody,
  .prose.long table.stack tr,
  .prose.long table.stack tbody :is(td, th) {
    display: block;
    width: 100%;
  }
  .prose.long table.stack {
    max-width: 100%;
    overflow: visible;
    border: 0;
    border-radius: 0;
  }
  .prose.long table.stack thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }
  .prose.long table.stack tr {
    margin: 0 0 8px;
    padding: 4px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
  }
  .prose.long table.stack tbody :is(td, th) {
    padding: 8px 0;
    border: 0;
    text-align: left;
  }
  .prose.long table.stack tbody :is(td, th) + :is(td, th) {
    border-top: 1px solid var(--border-soft);
  }
  .prose.long table.stack tbody :is(td, th)::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--subtle);
  }
}