/* ─────────────────────────────────────────────────────────────
   RankingBite, site chrome + citation apparatus
   Depends only on tokens.css
   ───────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-sans);font-size:var(--t-body);line-height:var(--lh-body);letter-spacing:var(--tr-body);-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;height:auto;display:block}

a{color:var(--link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
a:hover{color:var(--link-hover)}
:focus-visible{outline:3px solid var(--signal-600);outline-offset:2px;border-radius:2px}

h1,h2,h3,h4{margin:0;font-weight:var(--w-semibold);letter-spacing:var(--tr-head);line-height:var(--lh-snug);text-wrap:balance}
h1{font-size:var(--t-h1);letter-spacing:var(--tr-display);line-height:var(--lh-tight)}
h2{font-size:var(--t-h2)}
h3{font-size:var(--t-h3)}
h4{font-size:var(--t-h4)}
p{margin:0 0 var(--s-4);text-wrap:pretty}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.narrow{max-width:var(--wrap-narrow)}
.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{position:absolute;left:var(--s-4);top:0;transform:translateY(-150%);z-index:200;background:var(--ink-900);color:#fff;padding:var(--s-3) var(--s-4);border-radius:var(--r-md);text-decoration:none;transition:transform var(--dur) var(--ease),top var(--dur) var(--ease)}
.skip:focus{top:var(--s-4);transform:translateY(0);color:#fff}

/* ── Apparatus: mono meta label ── */
.meta{font-family:var(--font-mono);font-size:var(--t-micro);font-weight:var(--w-medium);letter-spacing:var(--tr-meta);text-transform:uppercase;color:var(--ink-500)}
.meta-idx{font-family:var(--font-mono);font-size:var(--t-micro);font-weight:var(--w-medium);letter-spacing:var(--tr-meta);color:var(--ink-400)}

/* ── Apparatus: citation highlight, the one bold move.
      Applied to exactly ONE extractable sentence per section. ── */
.cited{background:linear-gradient(180deg,transparent 54%,var(--cite-400) 54%);padding:0 .06em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.cite-mark{font-family:var(--font-mono);font-size:max(11px,.62em);font-weight:var(--w-medium);color:var(--signal-600);vertical-align:super;line-height:0;margin-left:.15em;text-decoration:none}

/* ── Apparatus: citable definition block ──
      A real, extractable sentence. Quotable by an LLM verbatim. */
.citable{position:relative;margin:var(--s-6) 0;padding:var(--s-6) var(--s-6) var(--s-5);background:var(--surface);border:1px solid var(--rule);border-left:3px solid var(--cite-400);border-radius:0 var(--r-lg) var(--r-lg) 0}
.citable-q{margin:0;font-family:var(--font-serif);font-size:var(--t-quote);line-height:1.32;letter-spacing:-.01em;color:var(--ink-900)}
.citable-src{display:flex;align-items:center;gap:var(--s-3);margin-top:var(--s-5);padding-top:var(--s-4);border-top:1px solid var(--rule)}
.citable-src .meta{color:var(--ink-400)}
.citable-badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:.06em;text-transform:uppercase;color:var(--verify-600);background:var(--verify-100);padding:3px 9px;border-radius:var(--r-pill)}

/* ── Buttons ── */
.btn{display:inline-flex;align-items:center;gap:var(--s-2);font-family:var(--font-sans);font-size:var(--t-small);font-weight:var(--w-semibold);letter-spacing:var(--tr-body);padding:.8rem 1.35rem;border-radius:var(--r-pill);border:1px solid transparent;cursor:pointer;text-decoration:none;transition:background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.btn-primary{background:var(--ink-900);color:#fff}
.btn-primary:hover{background:var(--signal-600);color:#fff}
.btn-secondary{background:transparent;color:var(--ink-900);border-color:var(--rule-strong)}
.btn-secondary:hover{border-color:var(--ink-900);color:var(--ink-900);background:var(--surface)}
.btn-cite{background:var(--cite-400);color:var(--ink-900);box-shadow:var(--sh-cite)}
.btn-cite:hover{background:var(--cite-500);color:var(--ink-900)}
.btn-lg{font-size:var(--t-body);padding:1rem 1.6rem}

/* ── Placeholder token (§8, never ship fabricated data) ── */
.ph{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:.04em;color:var(--ink-600);background:repeating-linear-gradient(135deg,var(--paper-sunk) 0 7px,transparent 7px 14px);border:1px dashed var(--rule-strong);border-radius:var(--r-sm);padding:3px 8px}
.ph-block{display:block;padding:var(--s-5);text-align:center;font-family:var(--font-mono);font-size:var(--t-meta);color:var(--ink-500);background:repeating-linear-gradient(135deg,var(--paper-sunk) 0 9px,transparent 9px 18px);border:1px dashed var(--rule-strong);border-radius:var(--r-md)}

/* ═══════════════ HEADER / NAV ═══════════════
   Two co-equal pillar menus (§2). Full markup in DOM. */
.hdr{position:sticky;top:0;z-index:100;background:rgba(245,247,249,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--rule)}
.hdr-in{display:flex;align-items:center;gap:var(--s-6);height:72px;max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.brand{display:flex;align-items:center;gap:var(--s-3);text-decoration:none;color:var(--ink-900);flex-shrink:0}
.brand:hover{color:var(--ink-900)}
.brand-mark{width:26px;height:26px;flex-shrink:0}
.brand-name{font-size:1.0625rem;font-weight:var(--w-semibold);letter-spacing:-.025em}

.nav{display:flex;align-items:center;gap:var(--s-1);margin-left:auto}
.nav-item{position:relative}
.nav-link,.nav-btn{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-sans);font-size:var(--t-small);font-weight:var(--w-medium);color:var(--ink-700);background:none;border:0;padding:.55rem .7rem;border-radius:var(--r-md);cursor:pointer;text-decoration:none;letter-spacing:var(--tr-body)}
.nav-link:hover,.nav-btn:hover{color:var(--ink-900);background:var(--paper-sunk)}
.nav-link[aria-current="page"]{color:var(--signal-600)}
.nav-btn svg{transition:transform var(--dur) var(--ease)}
.nav-btn[aria-expanded="true"]{background:var(--paper-sunk);color:var(--ink-900)}
.nav-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.nav-cta{margin-left:var(--s-3)}

/* Pillar panel */
.panel{position:absolute;top:calc(100% + 10px);left:0;z-index:110;background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-xl);box-shadow:var(--sh-lg);padding:var(--s-6);display:none}
.panel[data-open]{display:block}
.panel-wide{width:min(78vw,660px)}
.panel-2col{width:min(88vw,880px)}
.panel-hd{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-5);padding-bottom:var(--s-4);margin-bottom:var(--s-4);border-bottom:1px solid var(--rule)}
.panel-hd h3{font-size:var(--t-h4);letter-spacing:-.015em}
.panel-hd p{margin:4px 0 0;font-size:var(--t-small);color:var(--text-muted);max-width:44ch}
.panel-grid{display:grid;gap:var(--s-6)}
.panel-2col .panel-grid{grid-template-columns:1fr 1fr}
.panel-group + .panel-group{margin-top:var(--s-5)}
.panel-group > .meta{display:block;margin-bottom:var(--s-3)}
.panel-list{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.panel-list a{display:block;padding:.5rem .6rem;margin-left:-.6rem;border-radius:var(--r-md);text-decoration:none;color:var(--ink-800);font-size:var(--t-small);font-weight:var(--w-medium)}
.panel-list a:hover{background:var(--signal-50);color:var(--signal-700)}
.panel-list a span{display:block;font-weight:var(--w-regular);font-size:var(--t-meta);color:var(--text-muted);margin-top:1px}
.panel-ft{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);margin-top:var(--s-5);padding-top:var(--s-4);border-top:1px solid var(--rule);font-size:var(--t-small)}

/* Mobile nav */
.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px;margin-left:auto}
.nav-toggle span{display:block;width:22px;height:2px;border-radius:2px;background:var(--ink-900);transition:transform var(--dur) var(--ease),opacity var(--dur) var(--ease)}
.hdr.open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hdr.open .nav-toggle span:nth-child(2){opacity:0}
.hdr.open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media (max-width:1080px){
  .nav-toggle{display:flex}
  .nav{display:none}
  .hdr.open .nav{display:flex;flex-direction:column;align-items:stretch;gap:2px;position:absolute;top:100%;left:0;right:0;background:var(--surface);border-bottom:1px solid var(--rule);box-shadow:var(--sh-lg);padding:var(--s-4) var(--gutter) var(--s-6);max-height:calc(100vh - 72px);overflow-y:auto}
  .nav-link,.nav-btn{width:100%;justify-content:space-between;font-size:var(--t-body);padding:.85rem .6rem}
  .panel{position:static;display:none;box-shadow:none;border:0;border-radius:0;padding:0 0 var(--s-5) var(--s-4);width:auto}
  .panel[data-open]{display:block}
  .panel-2col .panel-grid{grid-template-columns:1fr}
  .nav-cta{margin:var(--s-4) 0 0;justify-content:center}
}

/* ═══════════════ FOOTER ═══════════════ */
.ft{background:var(--ink-900);color:var(--ink-300);padding:var(--s-10) 0 var(--s-6);margin-top:var(--s-11)}
.ft a{color:var(--ink-200);text-decoration:none;font-size:var(--t-small)}
.ft a:hover{color:#fff;text-decoration:underline}
.ft-top{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:var(--s-7)}
.ft-brand .brand-name{color:#fff}
.ft-brand p{color:var(--ink-400);font-size:var(--t-small);max-width:34ch;margin-top:var(--s-4)}
.ft-offices{display:flex;gap:var(--s-7);margin-top:var(--s-5);flex-wrap:wrap}
.ft-office{font-style:normal}
.ft-office .meta{color:var(--ink-500);display:block;margin-bottom:2px}
.ft-office strong{color:var(--ink-200);font-size:var(--t-small);font-weight:var(--w-medium);display:block}
.ft-addr{display:block;margin-top:6px;font-size:var(--t-meta);line-height:1.55;color:var(--ink-400)}
.ft-col h4{font-family:var(--font-mono);font-size:var(--t-micro);font-weight:var(--w-medium);letter-spacing:var(--tr-meta);text-transform:uppercase;color:var(--ink-500);margin-bottom:var(--s-4)}
.ft-col ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-3)}
.ft-bot{display:flex;align-items:center;justify-content:space-between;gap:var(--s-5);flex-wrap:wrap;margin-top:var(--s-9);padding-top:var(--s-5);border-top:1px solid rgba(255,255,255,.1)}
.ft-bot .meta{color:var(--ink-500)}
.ft-legal{display:flex;gap:var(--s-5);flex-wrap:wrap}
@media (max-width:900px){.ft-top{grid-template-columns:1fr 1fr;gap:var(--s-6)}.ft-brand{grid-column:1/-1}}
@media (max-width:560px){.ft-top{grid-template-columns:1fr}}

/* ═══════════════ SHARED SECTION FURNITURE ═══════════════ */
.sec{padding:var(--s-11) 0}
.sec-sunk{background:var(--paper-sunk)}
.sec-dark{background:var(--ink-900);color:var(--ink-200)}
.sec-dark h2,.sec-dark h3{color:#fff}
.sec-hd{max-width:62ch;margin-bottom:var(--s-8)}
.sec-hd .meta{display:block;margin-bottom:var(--s-4)}
.sec-hd p{color:var(--text-muted);font-size:var(--t-lead);margin-top:var(--s-4)}
.sec-dark .sec-hd p{color:var(--ink-400)}

/* Answer-first lede: the direct answer carries the visual weight (§4) */
.answer{font-size:var(--t-quote);line-height:1.34;letter-spacing:-.015em;font-weight:var(--w-medium);color:var(--ink-900);margin:0 0 var(--s-5);max-width:36ch}
.sec-dark .answer{color:#fff}

/* Breadcrumbs */
.crumbs{padding:var(--s-5) 0 0}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2);margin:0;padding:0;font-family:var(--font-mono);font-size:var(--t-meta);color:var(--ink-400)}
.crumbs a{color:var(--ink-500);text-decoration:none}
.crumbs a:hover{color:var(--signal-600);text-decoration:underline}
.crumbs [aria-current="page"]{color:var(--ink-800)}

/* Comparison table, built handsome, cites well (§4) */
.tbl-wrap{border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden;background:var(--surface)}
table.cmp{width:100%;border-collapse:collapse;font-size:var(--t-small)}
table.cmp caption{text-align:left;padding:var(--s-5) var(--s-5) 0;font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:var(--tr-meta);text-transform:uppercase;color:var(--ink-500)}
table.cmp th,table.cmp td{text-align:left;padding:var(--s-4) var(--s-5);border-bottom:1px solid var(--rule);vertical-align:top}
table.cmp thead th{font-family:var(--font-mono);font-size:var(--t-micro);font-weight:var(--w-medium);letter-spacing:var(--tr-meta);text-transform:uppercase;color:var(--ink-500);background:var(--paper)}
table.cmp thead th:last-child{color:var(--signal-700);background:var(--signal-50)}
table.cmp tbody th{font-weight:var(--w-semibold);color:var(--ink-900);width:26%}
table.cmp td:last-child{color:var(--ink-900)}
table.cmp tbody tr:last-child th,table.cmp tbody tr:last-child td{border-bottom:0}
@media (max-width:720px){
  table.cmp thead{display:none}
  table.cmp tbody th,table.cmp td{display:block;width:auto;border-bottom:0;padding:var(--s-2) var(--s-5)}
  table.cmp tbody th{padding-top:var(--s-5)}
  table.cmp td::before{content:attr(data-l);display:block;font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:var(--tr-meta);text-transform:uppercase;color:var(--ink-400);margin-bottom:2px}
  table.cmp tbody tr{border-bottom:1px solid var(--rule);display:block;padding-bottom:var(--s-4)}
  table.cmp tbody tr:last-child{border-bottom:0}
}

/* Index rail, replaces accordions. All content stays in the DOM (§4). */
.railed{display:grid;grid-template-columns:200px 1fr;gap:var(--s-9);align-items:start}
.rail{position:sticky;top:96px}
.rail .meta{display:block;padding-bottom:var(--s-3);border-bottom:1px solid var(--rule);margin-bottom:var(--s-3)}
.rail ol{list-style:none;margin:0;padding:0;display:grid;gap:1px;counter-reset:r}
.rail a{display:flex;gap:var(--s-3);padding:.45rem 0;font-size:var(--t-small);color:var(--ink-500);text-decoration:none;line-height:1.35}
.rail a::before{counter-increment:r;content:"0" counter(r);font-family:var(--font-mono);font-size:var(--t-micro);color:var(--ink-300);padding-top:2px}
.rail a:hover,.rail a.on{color:var(--signal-600)}
.rail a.on::before{color:var(--signal-600)}
@media (max-width:960px){
  .railed{grid-template-columns:1fr;gap:var(--s-6)}
  .rail{position:static}
  .rail ol{grid-auto-flow:column;grid-auto-columns:max-content;overflow-x:auto;gap:var(--s-2);padding-bottom:var(--s-2)}
  .rail a{border:1px solid var(--rule);border-radius:var(--r-pill);padding:.4rem .8rem;white-space:nowrap}
}

/* Long-form block used by service/industry bodies */
.block{padding-top:var(--s-9);scroll-margin-top:96px}
.block:first-child{padding-top:0}
.block > h2{margin-bottom:var(--s-5)}
.block ul.ticks{list-style:none;margin:0 0 var(--s-4);padding:0;display:grid;gap:var(--s-3)}
.block ul.ticks li{display:flex;gap:var(--s-3);font-size:var(--t-body);color:var(--ink-700)}
.block ul.ticks li::before{content:"";flex-shrink:0;width:18px;height:18px;margin-top:3px;border-radius:var(--r-sm);background:var(--verify-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E7C5A' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat}

/* Card primitives */
.card{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-lg);padding:var(--s-6)}
.card-link{text-decoration:none;color:inherit;display:block;transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.card-link:hover{border-color:var(--rule-strong);transform:translateY(-2px);box-shadow:var(--sh-md);color:inherit}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-5)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-5)}
@media (max-width:900px){.grid-3{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.grid-2,.grid-3{grid-template-columns:1fr}}

/* Contextual CTA (§9, every service page, service-specific) */
.cta{background:var(--ink-900);color:#fff;border-radius:var(--r-xl);padding:var(--s-8);display:grid;grid-template-columns:1.5fr auto;gap:var(--s-7);align-items:center}
.cta h2{color:#fff;font-size:var(--t-h3);margin-bottom:var(--s-3)}
.cta p{color:var(--ink-300);font-size:var(--t-small);margin:0;max-width:52ch}
.cta-actions{display:flex;gap:var(--s-3);flex-wrap:wrap}
@media (max-width:760px){.cta{grid-template-columns:1fr;padding:var(--s-6)}}

/* Cross-pillar band (§9, the upsell path, built into the template) */
.xp{border:1px solid var(--rule);border-left:3px solid var(--signal-600);border-radius:0 var(--r-lg) var(--r-lg) 0;background:var(--surface);padding:var(--s-6);display:grid;grid-template-columns:1fr auto;gap:var(--s-6);align-items:center}
.xp .meta{display:block;margin-bottom:var(--s-3);color:var(--signal-600)}
.xp p{margin:0;font-size:var(--t-small);color:var(--text-muted);max-width:60ch}
.xp h3{font-size:var(--t-h4);margin-bottom:var(--s-2)}
@media (max-width:760px){.xp{grid-template-columns:1fr}}


/* ══ RESPONSIVE ══ */
/* Grid children default to min-width:auto, which lets scrollable rails
   (index rail, blog TOC) push past their column. Constrain them. */
.railed > *,.p-body > *,.d-grid > *,.hero-grid > *,.method > *{min-width:0}
.rail ol,.p-toc ol,.ade-tabs,.tbl-wrap{max-width:100%}
@media (max-width:1080px){
  .hdr-in{gap:var(--s-4)}
  .eng{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .sec{padding:var(--s-9) 0}
  .sec-hd{margin-bottom:var(--s-6)}
  .eng,.fit,.grid-3,.grid-2,.deliv,.proof,.rel,.cs,.triage,.pillars,.method,.d-grid,.hero-grid,.railed,.group-grid,.rvc,.outcomes-grid,.inc-grid,.proc-grid,.tiers,.cmp-grid,.cs-grid,.legal-grid,.team-grid,.form-grid{grid-template-columns:1fr !important}
  .proc-grid::before{display:none}
  .rvc-arrow{writing-mode:horizontal-tb !important;transform:none !important;padding:var(--s-2) 0}
  .cta,.xp,.cta-final{grid-template-columns:1fr !important}
  .cta-actions{justify-content:flex-start}
  .facts dd{text-align:left}
  .facts div{grid-template-columns:1fr;gap:2px}
  .hub-stats{gap:var(--s-5)}
  .ft-top{grid-template-columns:1fr 1fr}
  .ft-brand{grid-column:1/-1}
}
@media (max-width:640px){
  :root{--gutter:1.15rem}
  .sec{padding:var(--s-8) 0}
  h1{font-size:clamp(2rem,8.5vw,2.6rem)}
  h2{font-size:clamp(1.55rem,6.2vw,2rem)}
  .hero h1,.d-hero h1,.hub-hero h1{font-size:clamp(2rem,8.5vw,2.6rem)}
  .answer{font-size:1.15rem}
  .lead,.hero-lede,.sec-hd p,.svc-subtitle{font-size:1.0625rem}
  .citable{padding:var(--s-5) var(--s-4)}
  .citable-q{font-size:1.2rem}
  .quoted,.rec-line{font-size:1.05rem}
  .btn,.btn-lg{width:100%;justify-content:center}
  .hero-actions,.d-actions,.cta-actions{flex-direction:column;align-items:stretch;width:100%}
  .hero-pillars{flex-direction:column;gap:var(--s-3)}
  .ft-top{grid-template-columns:1fr}
  .ft-bot{flex-direction:column;align-items:flex-start;gap:var(--s-3)}
  .crumbs ol{font-size:10px}
  .steps li,.method-steps li{grid-template-columns:1fr;gap:var(--s-2)}
  .eng-card,.fit-col,.card,.inc-card,.outcome-card{padding:var(--s-5)}
  .hub-stats{flex-wrap:wrap;gap:var(--s-4) var(--s-6)}
  .ade-panel{padding:var(--s-4)}
  .ade-turn{grid-template-columns:24px 1fr;gap:var(--s-2)}
  .ade-av{width:24px;height:24px;font-size:8px}
  .ade-input{font-size:var(--t-meta);padding:.5rem .5rem .5rem .8rem}
  .cta{padding:var(--s-6)}
  .tbl-wrap{border-radius:var(--r-md)}
}
@media (max-width:420px){
  :root{--gutter:.9rem}
  .ade-tab{font-size:11px;padding:.5rem .6rem}
  .chip,.platform-chip{font-size:11px}
}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ═══════════════ CLIENT MARQUEE ═══════════════
   Two identical tracks, each 50% of the strip, translating -50% -
   a seamless loop with no JS. Paused on hover and for reduced motion. */
.mq{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);background:var(--surface);padding:var(--s-7) 0;overflow:hidden}
.mq-hd{display:flex;align-items:baseline;gap:var(--s-4);margin-bottom:var(--s-6)}
.mq-hd .meta{flex-shrink:0;white-space:nowrap}
.mq-hd p{font-size:var(--t-small);color:var(--text-muted);margin:0}
.mq-strip{position:relative;display:flex;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mq-track{display:flex;align-items:center;gap:var(--s-8);padding-right:var(--s-8);flex-shrink:0;animation:mq-slide 42s linear infinite;will-change:transform}
.mq-strip:hover .mq-track{animation-play-state:paused}
@keyframes mq-slide{from{transform:translateX(0)}to{transform:translateX(-100%)}}
.mq-i{display:inline-flex;align-items:center;gap:10px;white-space:nowrap;font-family:var(--font-sans);font-size:20px;font-weight:var(--w-semibold);letter-spacing:var(--tr-head);color:var(--ink-500);text-decoration:none;transition:color var(--dur) var(--ease)}
.mq-i:hover{color:var(--ink-900)}
.mq-i::before{content:"";width:9px;height:9px;border-radius:2px;background:var(--rule-strong);flex-shrink:0;transition:background var(--dur) var(--ease)}
.mq-i:hover::before{background:var(--signal-600)}
.mq-i.todo{color:var(--ink-600);font-weight:var(--w-regular);font-family:var(--font-mono);font-size:var(--t-meta);letter-spacing:var(--tr-meta);text-transform:uppercase;background:repeating-linear-gradient(135deg,var(--paper-sunk) 0 9px,transparent 9px 18px);border:1px dashed var(--rule-strong);border-radius:var(--r-sm);padding:6px 12px}
.mq-i.todo::before{background:var(--ink-600)}
.mq-i.todo:hover{color:var(--ink-600)}
.mq-i.todo:hover::before{background:var(--ink-600)}
.mq-i .sub{font-family:var(--font-mono);font-size:var(--t-micro);font-weight:var(--w-regular);letter-spacing:var(--tr-meta);text-transform:uppercase;color:var(--ink-300)}

/* Real logo artwork, supplied per-client. Contained in a neutral card so a
   logo's own background (several ship opaque, not transparent) never reads
   as a stray coloured box against the strip. */
.mq-i.logo{padding:9px 16px;border:1px solid var(--rule);border-radius:var(--r-md);background:var(--surface)}
.mq-i.logo::before{display:none}
.mq-i.logo img{display:block;height:28px;width:auto;max-width:150px;object-fit:contain}
@media (max-width:700px){.mq-i.logo img{height:24px}}
@media (prefers-reduced-motion:reduce){.mq-track{animation:none}.mq-strip{overflow-x:auto;-webkit-mask-image:none;mask-image:none}.mq-track+.mq-track{display:none}}
/* Leads the proof band: no bottom rule, so it reads as one unit with the case studies. */
.mq{border-bottom:0;padding-bottom:var(--s-8)}
@media (max-width:700px){.mq-hd{flex-direction:column;gap:var(--s-2)}.mq-i{font-size:17px}}

/* ═══════════════ MOBILE HARDENING ═══════════════
   Applied after the responsive tail so these win on specificity order.
   Nothing here hides or removes content at any breakpoint. */

/* Long unbroken strings (URLs, entity names) never force a scrollbar */
p,li,td,th,dd,dt,h1,h2,h3,h4,.answer,.citable-q,.q{overflow-wrap:break-word}

/* Form controls: 16px minimum or iOS zooms the page on focus */
input,select,textarea,button{font-family:inherit}
input:not([type=checkbox]):not([type=radio]),select,textarea{font-size:16px;min-height:44px}
textarea{min-height:120px}
.fld label{display:block}

/* Viewport units that respect browser chrome */
@media (max-width:1080px){
  .hdr.open .nav{max-height:calc(100dvh - 72px);overscroll-behavior:contain}
}
/* Page behind the open nav must not scroll */
body.nav-open{overflow:hidden}

/* Safe-area insets on notched devices */
.hdr-in{padding-left:max(var(--gutter),env(safe-area-inset-left));padding-right:max(var(--gutter),env(safe-area-inset-right))}
.wrap{padding-left:max(var(--gutter),env(safe-area-inset-left));padding-right:max(var(--gutter),env(safe-area-inset-right))}
.ft{padding-bottom:calc(var(--s-6) + env(safe-area-inset-bottom))}

/* Type floors */
@media (max-width:1080px){
  :root{--t-micro:.75rem}
  .crumbs ol{font-size:12px}
  .ade-av,.ade-av.bot{font-size:11px}
  .ade-tab{font-size:.8125rem}
}
@media (max-width:640px){
  .crumbs ol{font-size:12px}
}

/* Touch-target floors. Applied at the mobile layout widths (not pointer-scoped,
   so they hold on hybrid devices and are testable), plus any coarse pointer. */
@media (max-width:1080px),(pointer:coarse){
  .brand{min-height:44px}
  .nav-toggle{width:44px;height:44px;justify-content:center;align-items:center;padding:0}
  .nav-link,.nav-btn{min-height:48px}
  .panel-list a{min-height:44px;display:flex;flex-direction:column;justify-content:center}
  .panel-ft a,.panel-hd a{min-height:44px;display:inline-flex;align-items:center}
  .ft a{display:inline-flex;align-items:center;min-height:44px}
  .ft-col ul{gap:0}
  .ft-legal{gap:var(--s-6)}
  .crumbs a{display:inline-flex;align-items:center;min-height:44px;padding:0 2px}
  .crumbs ol{gap:var(--s-3)}
  .rail a{min-height:44px;align-items:center}
  .ade-tab{min-height:44px}
  .stack a{min-height:56px}
  .mq-strip{overflow-x:auto;-webkit-overflow-scrolling:touch}
}

/* Every hover affordance has a non-hover equivalent */
@media (hover:none){
  .card-link:active,.cs-card:active,.rel a:active,.proof a:active,.stack a:active{border-color:var(--ink-900)}
  .mq-strip .mq-track{animation-play-state:running}
}

/* Motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
}

/* Sticky furniture must not eat a short viewport */
@media (max-height:520px){
  .hdr{position:static}
  .rail{position:static}
}

/* 320px: the real test */
@media (max-width:360px){
  :root{--gutter:.85rem}
  .hero-pillars{gap:var(--s-2)}
  .mq-i{font-size:15px}
  .stack a{grid-template-columns:1fr;gap:var(--s-2)}
  .stack .n{display:inline}
  .facts dl{padding-left:var(--s-4);padding-right:var(--s-4)}
  table.cmp tbody th,table.cmp td{padding-left:var(--s-4);padding-right:var(--s-4)}
}