/* Quera — site styles. Near-black film ground, warm off-white ink, one typeface (Mona Sans, width axis for display),
   safety orange as the only colour: action, absence, the firm in data and the logo's mark. Square tinted panels for
   report fragments and callouts; no radius, no borders. One icon family (24 grid, 1.6 stroke, square caps). */
@font-face { font-family: "Mona Sans"; src: url("fonts/MonaSans-Quera.woff2") format("woff2"); font-weight: 300 700; font-stretch: 100% 125%; font-display: swap; }

:root {
  --ground: #0d0d0c;
  --ground-2: #131311;      /* full-bleed bands */
  --panel: #171715;         /* tinted panels: report fragments, callouts, cards */
  --panel-2: #1f1f1c;       /* a step up inside a panel: diagram nodes, chips */
  --field: #1c1c19;         /* form inputs */
  --ink: #ece9e2;
  --ink-2: #aaa69d;
  --ink-3: #8c887f;
  --lead: #6f6c65;          /* chart-only grey */
  --faint: rgba(236, 233, 226, .08);
  --accent: #f0763c;        /* safety orange */
  --accent-dim: rgba(240, 118, 60, .14);
  --sans: "Mona Sans", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

  --gutter: clamp(16px, 4.2vw, 64px);
  --max: 1440px;
  --col-gap: clamp(16px, 2.2vw, 32px);
  --sec: clamp(64px, 7vw, 104px);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --top-h: 72px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; background: var(--ground); color-scheme: dark; scrollbar-color: #34332f var(--ground); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--ground); color: var(--ink); font: 430 17px/1.55 var(--sans); font-stretch: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-kerning: normal; }
@media (min-width: 960px) { body { font-size: 18px; } }
img, svg { display: block; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
button, input, textarea { font: inherit; color: inherit; }
::selection { background: var(--accent); color: var(--ground); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
[id] { scroll-margin-top: calc(var(--top-h) + 24px); }

a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .26em; text-decoration-color: rgba(236, 233, 226, .32); transition: text-decoration-color .25s, color .25s; }
a:hover { text-decoration-color: var(--accent); }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
.skip { position: absolute; left: -999px; top: 8px; z-index: 50; background: var(--accent); color: var(--ground); padding: 10px 14px; text-decoration: none; }
.skip:focus { left: 8px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
table.vh { left: -10000px; top: auto; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: square; stroke-linejoin: miter; }
.arrow { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: square; transition: transform .35s var(--ease); }
.panel { background: var(--panel); }

/* ---------- type ---------- */
h1, h2, h3 { font-weight: 520; text-wrap: balance; }
h1 { font-size: clamp(38px, 5vw, 74px); font-stretch: 112%; line-height: 1.02; letter-spacing: -.03em; }
h2 { font-size: clamp(28px, 3.1vw, 44px); font-stretch: 110%; line-height: 1.08; letter-spacing: -.022em; }
h3 { font-size: clamp(18px, 1.4vw, 21px); font-stretch: 106%; line-height: 1.32; letter-spacing: -.008em; font-weight: 560; }
p { text-wrap: pretty; }
.fig-title { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 560; color: var(--ink); }
.fig-title .ic { width: 18px; height: 18px; color: var(--ink-2); }

/* ---------- buttons and links ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 54px; padding: 0 22px; background: var(--accent); color: var(--ground); font-size: 16px; font-weight: 600; font-stretch: 104%; text-decoration: none; border: 0; border-radius: 0; cursor: pointer; white-space: nowrap; transition: background-color .3s var(--ease); }
.btn:hover { background: var(--ink); }
.btn:hover .arrow { transform: translateX(4px); }
.btn:focus-visible { outline-color: var(--ink); }
.btn-sm { min-height: 40px; padding: 0 16px; font-size: 14px; }
.more { margin-top: clamp(28px, 3vw, 40px); }
.more a, .text-link, .quote { display: inline-flex; align-items: center; gap: 10px; font-weight: 560; text-decoration-color: var(--accent); }
.more .arrow, .quote .arrow, .ans-note .arrow { width: 16px; height: 16px; stroke: var(--accent); }
.more a:hover .arrow, .quote:hover .arrow { transform: translateX(4px); }

/* ---------- header: sticky, constant height; the background and blur arrive after scrolling ---------- */
.top { position: sticky; top: 0; z-index: 30; transition: background-color .3s, backdrop-filter .3s; }
.top.is-scrolled { background: rgba(13, 13, 12, .78); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); }
.top-inner { display: flex; align-items: center; gap: 36px; height: var(--top-h); }
.brand { display: inline-flex; color: var(--ink); text-decoration: none; }
.logo { height: 26px; width: auto; }
.logo-sm { height: 24px; }
.top-menu { flex: 1; display: flex; align-items: center; gap: 32px; }
.top-nav { display: flex; gap: 26px; font-size: 15px; color: var(--ink-2); }
.top-nav a, .lang a { text-decoration: none; }
.top-nav a:hover, .lang a:hover { color: var(--ink); }
.top-nav [aria-current="true"] { color: var(--ink); }
.top-nav [aria-current="page"] { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: .5em; }
.top-end { margin-left: auto; display: flex; align-items: center; gap: 22px; }
.lang { display: flex; gap: 12px; font-size: 14px; font-weight: 500; letter-spacing: .02em; color: var(--ink-3); }
.lang a { padding: 10px 2px; }
.lang [aria-current] { color: var(--ink); }
.menu-btn { display: none; margin-left: auto; align-items: center; gap: 8px; min-height: 44px; padding: 0 4px; background: none; border: 0; color: var(--ink); font-size: 15px; font-weight: 560; cursor: pointer; }
.menu-btn .ic { width: 20px; height: 20px; }
.menu-btn span { display: inline-flex; align-items: center; gap: 8px; }
.menu-shut { display: none !important; }
.menu-btn[aria-expanded="true"] .menu-open { display: none !important; }
.menu-btn[aria-expanded="true"] .menu-shut { display: inline-flex !important; }

/* small screens with JS: a menu button and a panel; without JS the links simply wrap under the logo */
@media (max-width: 1080px) {
  .top-inner { flex-wrap: wrap; height: auto; min-height: var(--top-h); gap: 0 16px; }
  .top-menu { flex-basis: 100%; flex-wrap: wrap; gap: 8px 20px; padding-bottom: 12px; }
  .top-nav { flex-wrap: wrap; gap: 2px 20px; }
  .js .top-inner { flex-wrap: nowrap; height: var(--top-h); }
  .js .menu-btn { display: inline-flex; }
  .js .top-menu { display: none; position: absolute; left: 0; right: 0; top: var(--top-h); flex-direction: column; align-items: stretch; gap: 0; padding: 8px var(--gutter) 28px; background: var(--ground); height: calc(100dvh - var(--top-h)); overflow-y: auto; }
  .js .top.is-open { background: var(--ground); }
  .js .top.is-open .top-menu { display: flex; }
  .js .top-nav { flex-direction: column; gap: 0; font-size: 20px; color: var(--ink); }
  .js .top-nav a { padding: 14px 0; }
  .js .top-nav [aria-current="page"] { text-underline-offset: .35em; }
  .js .top-end { margin: 20px 0 0; justify-content: space-between; }
}

/* ---------- hero: the claim and the offer on the left, an example answer on the right ---------- */
.hero { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: center; padding-top: clamp(36px, 6vh, 88px); padding-bottom: clamp(64px, 9vh, 120px); }
.hero-copy { grid-column: 1 / span 6; }
.hero-lede { margin-top: 26px; max-width: 32em; font-size: clamp(18px, 1.45vw, 21px); line-height: 1.5; color: var(--ink-2); }
.hero-hook { margin-top: 34px; font-weight: 560; color: var(--ink); max-width: 30em; }
.hero-sub { margin-top: 12px; font-size: 14px; color: var(--ink-3); }
.url-field { display: flex; margin-top: 14px; max-width: 560px; }
.url-field input { flex: 1; min-width: 0; height: 56px; padding: 0 16px; background: var(--field); border: 0; border-radius: 0; font-size: 17px; caret-color: var(--accent); outline: 1px solid transparent; -webkit-appearance: none; appearance: none; }
.url-field input::placeholder { color: var(--ink-3); opacity: 1; }
.url-field input:focus { outline: 1px solid var(--accent); }
.url-field .btn { min-height: 56px; }

/* the assistants we measure: marks with names */
.assist { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; }
.assist li { display: flex; align-items: center; gap: 14px; padding: 20px 22px; background: var(--panel); }
.assist .mark { flex: none; width: 28px; height: 28px; color: var(--ink); }
.assist b { display: block; font-size: 17px; font-weight: 600; }
.assist small { display: block; margin-top: 2px; font-size: 13px; color: var(--ink-3); }
.sec-assistants .sec-lede { margin-top: 20px; max-width: 40em; }
.hero-assist { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin-top: clamp(28px, 4vh, 44px); padding-top: 18px; border-top: 1px solid var(--faint); }
.hero-assist > p { font-size: 13px; color: var(--ink-3); }
.assist-sm { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.assist-sm li { gap: 8px; padding: 0; background: none; }
.assist-sm .mark { width: 18px; height: 18px; color: var(--ink-2); }
.assist-sm b { font-size: 14px; font-weight: 560; color: var(--ink-2); }
.assist-sm small { display: none; }
@media (max-width: 640px) { .assist { grid-template-columns: 1fr; } }

/* the hero's example answer: a small product window */
.answer { grid-column: 7 / -1; background: var(--panel); box-shadow: 0 0 0 1px rgba(236, 233, 226, .06), 0 40px 80px -40px rgba(0, 0, 0, .9); font-variant-numeric: tabular-nums; }
.ans-chrome { display: flex; align-items: center; gap: 14px; padding: 12px 18px; border-bottom: 1px solid var(--faint); }
.ans-dots { display: inline-flex; gap: 6px; }
.ans-dots i { width: 7px; height: 7px; background: var(--lead); }
.ans-label { font-size: 13px; font-weight: 560; color: var(--ink-2); }
.ans-tag { margin-left: auto; padding: 3px 8px; font-size: 12px; font-weight: 560; letter-spacing: .02em; color: var(--ink-2); background: var(--panel-2); }
.ans-body { padding: clamp(18px, 1.8vw, 26px); }
.ans-who { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 500; color: var(--ink-3); }
.ans-chat { display: grid; gap: 12px; }
.bubble { padding: 12px 14px; font-size: 15px; line-height: 1.5; }
.bubble-q { justify-self: end; max-width: 88%; background: var(--panel-2); color: var(--ink); }
.bubble-a { max-width: 96%; background: var(--ground); box-shadow: inset 0 0 0 1px var(--faint); }
.bubble-a p { color: var(--ink-2); min-height: 3em; }
.bubble-a b { color: var(--ink); font-weight: 600; }
.type .w { opacity: 0; transition: opacity .18s linear; }
.type .w.on { opacity: 1; }
.ans-out { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--faint); }
.ans-h { font-size: 12px; font-weight: 560; color: var(--ink-3); }
.res { margin-top: 10px; }
.res li { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 0; }
.res li + li { border-top: 1px solid var(--faint); }
.res-mark { display: flex; width: 20px; height: 20px; align-items: center; justify-content: center; }
.res .mark { width: 18px; height: 18px; color: var(--ink-2); }
.res-pill { justify-self: end; }
.res-who { font-size: 15px; color: var(--ink); }
.res-pill { padding: 3px 9px; font-size: 13px; font-weight: 600; background: var(--panel-2); color: var(--ink); }
.res .is-absent .res-pill { color: var(--accent); background: var(--accent-dim); }
.ans-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 22px; margin-top: 18px; }
.vis-n { margin-top: 4px; font-size: 40px; font-weight: 500; font-stretch: 112%; line-height: 1; letter-spacing: -.02em; }
.ans-vis .spark { display: block; width: 96px; margin-top: 10px; }
.vis-sub { margin-top: 8px; font-size: 12px; color: var(--ink-3); }
.ans-comp .mini-bars { margin-top: 10px; }
.mini-bars li { display: grid; grid-template-columns: 5.2em minmax(0, 1fr) 2.8em; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-2); }
.mini-bars li + li { margin-top: 7px; }
.mini-bars b { text-align: right; font-weight: 500; color: var(--ink); }
.mini-bars .bar { width: 100%; }
.bar { display: inline-block; height: 8px; background: var(--faint); }
.bar span { display: block; height: 100%; background: var(--ink-3); }
.is-firm .bar span { background: var(--accent); }
.is-firm span:first-child, .is-firm b { color: var(--ink); font-weight: 600; }
/* While the answer types, the result below sits as a faint preview, so the window never reads as half empty. */
.js .answer.is-typing .ans-out { opacity: .22; filter: saturate(0); }
.answer .ans-out { transition: opacity .6s var(--ease), filter .6s var(--ease); }
.ans-note { padding: 14px 18px; border-top: 1px solid var(--faint); font-size: 14px; }
.ans-note a { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); text-decoration-color: var(--accent); }

@media (max-width: 1100px) {
  .hero-copy { grid-column: 1 / -1; }
  .answer { grid-column: 1 / span 10; margin-top: 56px; }
}
@media (max-width: 640px) {
  .answer { grid-column: 1 / -1; margin-top: 44px; }
  .ans-grid { grid-template-columns: 1fr; }
  .url-field { flex-direction: column; }
  .url-field input { flex: none; width: 100%; }
  .url-field .btn { width: 100%; }
}

/* ---------- sections: base grid ---------- */
.sec { padding: var(--sec) 0; }
.sec-head { grid-column: 1 / span 4; }
.sec-lede { margin-top: 18px; max-width: 26em; color: var(--ink-2); }
.sec-body { grid-column: 6 / -1; }
.prose p { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.6; max-width: 36em; }
.prose p + p { margin-top: 1.05em; }
.sec-read .prose p:not(:first-child) { color: var(--ink-2); }

/* page head */
.page-head { padding-top: clamp(48px, 9vh, 112px); padding-bottom: clamp(8px, 2vw, 24px); }
.page-head h1 { max-width: 15ch; }
.strip { position: relative; aspect-ratio: 21 / 7; margin-bottom: clamp(40px, 5vw, 72px); overflow: hidden; }
.strip .photo { position: absolute; inset: 0; height: 100%; object-fit: cover; object-position: 50% 45%; }
@media (max-width: 640px) { .strip { aspect-ratio: 16 / 9; } }
.strip-laptop-desk .photo { object-position: 50% 76%; }
.strip-office-night .photo { object-position: 50% 55%; }
.page-head-hook { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.5fr); column-gap: var(--col-gap); align-items: center; }
.page-head-hook h1 { align-self: start; }
.m-hook { display: grid; grid-template-columns: minmax(240px, 360px) minmax(0, 1fr); align-items: center; gap: clamp(24px, 3vw, 48px); margin: 0; }
.rings { width: 100%; height: auto; }
.ring-track { fill: none; stroke: var(--faint); stroke-width: 14; }
.rings .tick { stroke: var(--ink-3); stroke-width: 1; }
.rings .tick-major { stroke: var(--ink-2); stroke-width: 1.4; }
.rings .tick-l { fill: var(--ink-3); font-family: var(--sans); font-size: 10px; }
.rings .leader { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 2 3; }
.rings .lead-end { fill: var(--ground); stroke: var(--ink); stroke-width: 1.4; }
.rings .lead-ai { stroke: var(--accent); }
.rings .lead-l { fill: var(--ink-2); font-family: var(--sans); font-size: 12px; font-weight: 560; }
.rings .lead-l-ai { fill: var(--accent); }
.ring { fill: none; stroke-width: 14; stroke-linecap: butt; }
.ring-seo { stroke: var(--ink); }
.ring-geo { stroke: var(--ink-3); }
.ring-ai { stroke: var(--accent); }
.m-hook figcaption { grid-column: 1 / -1; grid-row: 2; display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-3); }
.m-tag { padding: 2px 8px; font-size: 12px; font-weight: 560; color: var(--ink-2); background: var(--panel); }
.m-legend li { display: grid; grid-template-columns: 4.2em minmax(0, 1fr); column-gap: 16px; padding: 14px 0; border-top: 1px solid var(--faint); }
.m-legend li:last-child { border-bottom: 1px solid var(--faint); }
.m-legend b { grid-row: span 2; font-size: clamp(28px, 2.6vw, 38px); font-weight: 500; font-stretch: 112%; line-height: 1; letter-spacing: -.02em; }
.m-legend span { font-size: 15px; font-weight: 560; color: var(--ink); }
.m-legend small { font-size: 13px; color: var(--ink-3); }
.m-legend .lg-ai b { color: var(--accent); }
.m-legend .lg-geo b { color: var(--ink-3); }
@media (prefers-reduced-motion: no-preference) {
  .ring { animation: ring-in 1.4s var(--ease) both; }
  .ring-geo { animation-delay: .15s; } .ring-ai { animation-delay: .3s; }
  @keyframes ring-in { from { stroke-dashoffset: var(--v); } to { stroke-dashoffset: 0; } }
}
@media (max-width: 1100px) { .page-head-hook { grid-template-columns: 1fr; } .m-hook { margin-top: 36px; } }
@media (max-width: 560px) { .m-hook { grid-template-columns: 1fr; } .rings { max-width: 100%; } .rings .lead-l { font-size: 16px; } .rings .tick-l { font-size: 14px; } }
.page-head-article h1 { max-width: none; font-size: clamp(34px, 4.4vw, 64px); }
.page-lede { margin-top: 26px; max-width: 38em; font-size: clamp(19px, 1.6vw, 23px); line-height: 1.5; color: var(--ink-2); }
.banner { margin-top: 18px; font-size: 15px; font-weight: 600; color: var(--ink); }
.art-meta { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 22px; font-size: 14px; color: var(--ink-3); }
.art-meta a { color: var(--ink-2); }
.page-head ~ .sec { padding: clamp(48px, 5.6vw, 88px) 0; }

/* label/value rows */
.rows li { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: var(--col-gap); align-items: baseline; }
.rows li + li { margin-top: clamp(22px, 2.4vw, 32px); }
.rows p { color: var(--ink-2); max-width: 30em; }
.row-n { display: inline-block; min-width: 1.5em; color: var(--ink-3); font-weight: 400; font-variant-numeric: tabular-nums; }
.sec-tight .rows li + li { margin-top: 14px; }

/* full-bleed band with stat tiles */
.sec-band { background: var(--ground-2); }
.band-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: end; }
.band-head h2 { grid-column: 1 / span 5; }
.band-head .sec-lede { grid-column: 7 / -1; max-width: 34em; margin: 0; }
.band-head .ans-tag { grid-column: 12; justify-self: end; align-self: end; margin-bottom: 8px; }
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; margin-top: clamp(32px, 3.6vw, 52px); font-variant-numeric: tabular-nums; }
.tiles-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 0; }
.tile { padding: 22px 22px 20px; background: var(--panel); display: grid; grid-template-rows: auto auto auto 1fr; }
.tile h3 { font-size: 14px; font-weight: 500; font-stretch: 100%; color: var(--ink-2); letter-spacing: 0; }
.score { margin-top: 14px; font-size: clamp(30px, 2.8vw, 42px); font-weight: 400; font-stretch: 125%; line-height: 1; }
.spark { width: 100%; max-width: 160px; height: 30px; margin-top: 14px; overflow: visible; }
.spark polyline { fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.spark rect { fill: var(--accent); }
.tile-note { margin-top: 12px; font-size: 13px; color: var(--ink-3); align-self: end; }
.sec-wide-body { grid-column: 6 / -1; }
@media (max-width: 960px) {
  .band-head h2, .band-head .sec-lede { grid-column: 1 / -1; }
  .band-head .ans-tag { grid-column: 1 / -1; justify-self: start; margin-top: 12px; }
  .band-head .sec-lede { margin-top: 14px; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tiles-3 { grid-template-columns: 1fr; }
}

/* the before/after statement */
.statement { font-size: clamp(32px, 4.2vw, 62px); font-stretch: 112%; letter-spacing: -.03em; line-height: 1.04; max-width: 18ch; }

/* why now: a photo beside three sourced figures */
.photo { display: block; width: 100%; height: auto; background: var(--panel); }
.why { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--col-gap); align-items: stretch; }
.why-photo { position: relative; min-height: 420px; }
.why-photo .photo { position: absolute; inset: 0; height: 100%; object-fit: cover; object-position: 30% 50%; }
.why-body h2 { max-width: 14ch; }
.why-list { margin-top: clamp(28px, 3vw, 44px); border-top: 1px solid var(--faint); }
.why-list li { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); column-gap: var(--col-gap); align-items: baseline; padding: clamp(18px, 2vw, 26px) 0; border-bottom: 1px solid var(--faint); }
.why-n { grid-row: span 2; white-space: nowrap; font-size: clamp(36px, 3.7vw, 56px); font-weight: 500; font-stretch: 112%; line-height: 1; letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.why-t { font-size: clamp(16px, 1.3vw, 19px); line-height: 1.4; color: var(--ink); }
.why-s { margin-top: 6px; font-size: 12px; color: var(--ink-3); }
.why-s a { color: var(--ink-3); text-decoration-color: rgba(236, 233, 226, .2); }
.why-s a:hover { color: var(--ink-2); }
@media (max-width: 900px) { .why { grid-template-columns: 1fr; } .why-photo { min-height: 0; aspect-ratio: 3 / 2; } .why-list li { grid-template-columns: 1fr; } .why-n { grid-row: auto; margin-bottom: 8px; } }

/* the shift: two generic mockups with example data */
.mocks { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--col-gap); align-items: end; margin-top: clamp(36px, 4vw, 56px); }
.mock { margin: 0; }
.mock figcaption { margin-top: 14px; font-size: 15px; color: var(--ink-2); }
.mock-win, .mock-phone { position: relative; background: var(--panel); box-shadow: 0 0 0 1px rgba(236, 233, 226, .06), 0 40px 80px -40px rgba(0, 0, 0, .9); }
.mock-bar { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-bottom: 1px solid var(--faint); }
.mock-q { display: inline-flex; align-items: center; gap: 8px; flex: 1; min-width: 0; padding: 7px 12px; background: var(--ground); font-size: 14px; color: var(--ink); }
.mock-q .ic { width: 15px; height: 15px; color: var(--ink-3); }
.mock-in { position: relative; padding: 18px 20px 22px; }
.sr-ai { display: grid; gap: 8px; padding: 14px 16px; background: var(--panel-2); }
.sr-ai-l { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 560; color: var(--ink-3); }
.sr-ai-l .ic { width: 15px; height: 15px; }
.sr-ai-t { font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.sr-ai-t b { color: var(--ink); font-weight: 600; }
.sr-src { display: flex; gap: 6px; }
.sr-src i { width: 54px; height: 16px; background: var(--faint); }
.sr-list { margin-top: 14px; }
.sr-list li { display: grid; gap: 5px; padding: 12px 0; border-top: 1px solid var(--faint); }
.sr-url { font-size: 12px; color: var(--ink-3); }
.sr-title { font-size: 15px; color: var(--ink); }
.sr-list i { display: block; height: 6px; background: var(--faint); }
.sr-list i + i { width: 62%; }
.sr-list .is-you .sr-title { color: var(--ink-2); }
.sr-list .is-you i { opacity: .5; }
.mock-flag { position: absolute; display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px; font-size: 13px; font-weight: 600; color: var(--accent); background: var(--accent-dim); }
.mock-flag::before { content: ""; width: 6px; height: 6px; background: var(--accent); }
.mock-serp .mock-flag { right: 20px; top: 26px; }
.mock-phone { max-width: 330px; margin-left: auto; padding: 14px 16px 16px; display: grid; gap: 12px; }
.ph-top { display: flex; align-items: center; justify-content: space-between; padding-bottom: 10px; border-bottom: 1px solid var(--faint); font-size: 13px; font-weight: 560; color: var(--ink-2); }
.ph-q { justify-self: end; max-width: 86%; padding: 10px 12px; background: var(--panel-2); font-size: 14px; line-height: 1.45; }
.ph-a { padding: 10px 12px; background: var(--ground); box-shadow: inset 0 0 0 1px var(--faint); font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.ph-a ol { margin-top: 6px; }
.ph-a li { color: var(--ink); font-weight: 560; }
.ph-a li span { display: inline-block; width: 1.4em; color: var(--ink-3); font-weight: 400; }
.mock-chat .mock-flag { position: static; justify-self: start; }
.ph-input { height: 34px; background: var(--ground); box-shadow: inset 0 0 0 1px var(--faint); }
@media (max-width: 900px) { .mocks { grid-template-columns: 1fr; } .mock-phone { margin-left: 0; } }
@media (max-width: 560px) { .mock-serp .mock-flag { position: static; margin-top: 12px; } .mock-bar .ans-dots { display: none; } }

/* who it is for: cards, see Round 11 below */
.sec-audience .sec-lede { max-width: 40em; }
/* a horizontal step line */
.stepline { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--col-gap); margin-top: clamp(32px, 3.6vw, 48px); counter-reset: s; }
.stepline li { position: relative; padding-top: 30px; }
.stepline li::before { content: ""; position: absolute; left: 18px; right: calc(-1 * var(--col-gap)); top: 4px; height: 1px; background: var(--faint); }
.stepline li:last-child::before { display: none; }
.step-mark { position: absolute; top: 0; left: 0; width: 9px; height: 9px; background: var(--ink-3); }
.stepline li:last-child .step-mark { background: var(--ink-3); }
.stepline h3 { display: flex; align-items: center; gap: 10px; }
.stepline h3 .ic { width: 20px; height: 20px; color: var(--ink-2); }
.stepline p { margin-top: 8px; color: var(--ink-2); max-width: 24em; }
@media (max-width: 760px) {
  .stepline { grid-template-columns: 1fr; gap: 28px; }
  .stepline li::before { display: none; }
}

/* comparison tables */
.table-scroll { position: relative; overflow-x: auto; }  /* relative: the visually-hidden labels inside stay clipped instead of widening the page */
.cmp { width: 100%; border-collapse: collapse; font-size: 15px; }
.cmp th, .cmp td { padding: 12px 16px; text-align: left; vertical-align: middle; }
.cmp thead th { vertical-align: bottom; font-weight: 600; }
.cmp tbody th { font-weight: 430; color: var(--ink-2); }
.cmp tbody tr:nth-child(odd) th, .cmp tbody tr:nth-child(odd) td { background: rgba(236, 233, 226, .025); }
.mk .ic { width: 20px; height: 20px; }
.mk-yes { color: var(--ink); }
.mk-no { color: var(--lead); }
.mk-text { font-size: 14px; color: var(--ink); }
.cmp-mini thead th { font-size: 14px; color: var(--ink); }
.cmp-mini tbody tr:last-child th { color: var(--ink); font-weight: 560; }
.cmp-mini tbody tr:last-child .mk-yes { color: var(--ink); }
@media (max-width: 560px) { .cmp-mini th, .cmp-mini td { padding: 10px 8px; } .cmp-mini thead th { font-size: 13px; } }
.cmp-full { min-width: 760px; }
.cmp-full thead th { width: 24%; padding-bottom: 20px; }
.cmp-full thead th h3 { font-size: clamp(19px, 1.6vw, 24px); font-stretch: 108%; }
.pkg-cadence { display: block; margin-top: 4px; font-size: 13px; font-weight: 500; color: var(--ink-3); }
.pkg-line { display: block; margin-top: 10px; font-size: 14px; font-weight: 430; line-height: 1.45; color: var(--ink-2); max-width: 22em; }
.cmp-full thead th:last-child h3 { color: var(--ink); }
.cmp-full thead th:target h3 { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: .3em; }
.fix-row th, .fix-row td { padding-top: 18px; padding-bottom: 18px; font-weight: 600; }
.fix-row th { color: var(--ink); }
.fix-no { color: var(--ink-3); font-weight: 430 !important; font-size: 14px; }
.fix-yes { color: var(--ink); }
.fix-yes .ic { display: inline-block; vertical-align: -5px; margin-right: 8px; width: 20px; height: 20px; }
.quote-row td { padding-top: 22px; background: none !important; }
.sec-pkg h2 { margin-bottom: clamp(28px, 3vw, 40px); }

/* measures: three readings on one baseline */
.sec-measures .sec-head { grid-column: 1 / span 6; }
@media (max-width: 960px) { .sec-measures .sec-head { grid-column: 1 / -1; } }
.measures { grid-column: 1 / -1; margin-top: clamp(36px, 4vw, 56px); }
.measures li { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: baseline; }
.measures li + li { margin-top: clamp(28px, 3vw, 44px); }
.measures h3 { grid-column: 1 / span 3; display: flex; align-items: center; gap: 12px; }
.measures h3 .ic { color: var(--ink-2); }
.measures li > p:not(.reads) { grid-column: 4 / span 5; color: var(--ink-2); max-width: 30em; }
.measures .reads { grid-column: 9 / -1; color: var(--ink); max-width: 26em; }
.reads { position: relative; }
.reads span { position: absolute; left: 0; bottom: calc(100% + 8px); font-size: 13px; color: var(--ink-3); white-space: nowrap; }
.measures li + li .reads span { width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* example questions, report fragment */
.q-examples { margin-top: clamp(28px, 3vw, 40px); padding: 22px 24px; }
.q-examples ul { margin-top: 14px; }
.q-examples li { padding: 10px 0; font-size: 16px; }
.q-examples li + li { border-top: 1px solid var(--faint); }
@media (max-width: 560px) { .q-examples .q-tag { display: block; margin-bottom: 4px; } }
.q-tag { display: inline-block; min-width: 7.5em; margin-right: 12px; font-size: 13px; color: var(--ink-2); }
.fragment { padding: 22px 24px; }
.fragment sup { margin-left: 3px; font-size: 11px; color: var(--ink-3); }
.notes { margin-top: clamp(24px, 2.6vw, 36px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px var(--col-gap); }
.notes li { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 10px; }
.note-n { grid-row: span 2; font-size: 14px; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.notes h3 { font-size: 16px; }
.notes p { margin-top: 4px; font-size: 15px; color: var(--ink-2); }
@media (max-width: 640px) { .notes { grid-template-columns: 1fr; } }

/* callout panels */
.callout { padding: clamp(24px, 3vw, 44px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
.callout h2 { grid-column: 1 / span 5; display: flex; align-items: center; gap: 14px; font-size: clamp(24px, 2.4vw, 34px); }
.callout h2 .ic { color: var(--ink-2); width: 26px; height: 26px; }
.callout .sec-lede { grid-column: 1 / span 5; }
.callout-rows { grid-column: 7 / -1; grid-row: 1 / span 3; }
.callout-rows li { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: var(--col-gap); align-items: baseline; padding: 14px 0; }
.callout-rows li + li { border-top: 1px solid var(--faint); }
.callout-rows h3 { font-size: 16px; }
.callout-rows p { font-size: 15px; color: var(--ink-2); }
@media (max-width: 960px) {
  .callout h2, .callout .sec-lede, .callout-rows { grid-column: 1 / -1; grid-row: auto; }
  .callout-rows { margin-top: 20px; }
}
@media (max-width: 560px) { .callout-rows li { grid-template-columns: 1fr; row-gap: 4px; } }

/* areas of full service */
.areas li { display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 16px; }
.areas li + li { margin-top: clamp(32px, 3.4vw, 48px); }
.areas .ic { color: var(--ink-2); margin-top: 3px; }
.areas p { margin-top: 8px; color: var(--ink-2); max-width: 36em; }
.areas dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--col-gap); margin-top: 16px; }
.areas dt { font-size: 13px; color: var(--ink-3); margin-bottom: 4px; }
.areas dd { font-size: 15px; color: var(--ink); }
@media (max-width: 640px) { .areas dl { grid-template-columns: 1fr; gap: 12px; } }

/* timeline (process) */
.timeline { max-width: 1040px; }
.tl-item { display: grid; grid-template-columns: clamp(52px, 6vw, 88px) minmax(0, 1fr); position: relative; }
.tl-item + .tl-item { margin-top: clamp(40px, 5vw, 72px); }
.tl-item::before { content: ""; position: absolute; left: 21px; top: 52px; bottom: calc(-1 * clamp(40px, 5vw, 72px)); width: 1px; background: var(--faint); }
.tl-item:last-child::before { display: none; }
.tl-n { width: 44px; height: 44px; display: grid; place-items: center; background: var(--panel); font-size: 18px; font-weight: 500; font-stretch: 125%; font-variant-numeric: tabular-nums; }
.tl-item:last-child .tl-n { background: var(--panel); color: var(--ink); }
.tl-body h3 { font-size: clamp(22px, 2vw, 30px); font-stretch: 110%; }
.tl-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 12px 0 18px; font-size: 14px; color: var(--ink-2); }
.tl-meta li { display: inline-flex; align-items: center; gap: 8px; }
.tl-meta .ic { width: 18px; height: 18px; color: var(--ink-2); }
.tl-body .prose p:not(:first-child) { color: var(--ink-2); }

/* the monthly record */
.record { margin-top: clamp(32px, 3.6vw, 48px); padding: 20px 24px; background: var(--panel); font-variant-numeric: tabular-nums; max-width: 640px; }
.record table { width: 100%; border-collapse: collapse; font-size: 15px; }
.record caption { text-align: left; padding-bottom: 12px; font-size: 14px; font-weight: 560; color: var(--ink); caption-side: top; }
.record th, .record td { padding: 9px 16px 9px 0; text-align: left; font-weight: 400; }
.record thead th { padding-top: 0; font-size: 13px; color: var(--ink-3); }
.record tbody th { font-weight: 560; white-space: nowrap; }
.record td.is-absent { color: var(--accent); font-weight: 560; }
.record figcaption { margin-top: 14px; font-size: 13px; line-height: 1.5; color: var(--ink-3); }

/* FAQ, grouped */
.faq-group + .faq-group { margin-top: clamp(48px, 5vw, 72px); }
.faq-group h2 { font-size: clamp(22px, 2.2vw, 30px); }
.faq { margin-top: 22px; }
.qa { padding: 18px 0; scroll-margin-top: calc(var(--top-h) + 24px); }
.qa + .qa { border-top: 1px solid var(--faint); }
.qa p { margin-top: 10px; color: var(--ink-2); max-width: 38em; }
.qa:target h3 { color: var(--accent); }
/* home questions: an accordion, + turns into − */
.acc { margin-top: clamp(28px, 3vw, 40px); border-top: 1px solid var(--faint); }
.acc-i { border-bottom: 1px solid var(--faint); }
.acc-i summary { display: flex; align-items: center; justify-content: space-between; gap: var(--col-gap); padding: clamp(18px, 2vw, 26px) 0; cursor: pointer; list-style: none; }
.acc-i summary::-webkit-details-marker { display: none; }
.acc-i summary h3 { font-size: clamp(21px, 2.2vw, 30px); font-weight: 500; line-height: 1.3; letter-spacing: -.01em; }
.acc-pm { position: relative; flex: none; width: 40px; height: 40px; background: var(--panel); transition: background-color .2s; }
.acc-pm::before, .acc-pm::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.6px; background: var(--ink); transform: translate(-50%, -50%); transition: transform .25s var(--ease); }
.acc-pm::after { transform: translate(-50%, -50%) rotate(90deg); }
.acc-i[open] .acc-pm::after { transform: translate(-50%, -50%) rotate(0deg); }
.acc-i summary:hover .acc-pm { background: var(--panel-2); }
.acc-i summary:focus-visible { outline-offset: 4px; }
.acc-a { padding: 0 64px clamp(20px, 2.2vw, 28px) 0; }
.acc-a p { max-width: 46em; font-size: clamp(16px, 1.3vw, 18px); line-height: 1.6; color: var(--ink-2); }
@media (prefers-reduced-motion: no-preference) {
  .acc-i[open] .acc-a { animation: acc-in .3s var(--ease); }
  @keyframes acc-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
}

/* guides index: categories of cards; the first card of each category leads */
.guide-cat + .guide-cat { margin-top: clamp(48px, 5vw, 80px); }
.guide-cat h2 { font-size: clamp(22px, 2.2vw, 30px); }
.glist { margin-top: 18px; border-top: 1px solid var(--faint); }
.gl-row a { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) 24px; column-gap: var(--col-gap); align-items: baseline; padding: 22px 0; border-bottom: 1px solid var(--faint); text-decoration: none; }
.gl-row h3 { font-size: clamp(18px, 1.5vw, 21px); }
.gl-row p { font-size: 15px; color: var(--ink-2); max-width: 38em; }
.gl-row .arrow { align-self: center; color: var(--ink-3); }
.gl-row a:hover h3 { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: .2em; }
.gl-row a:hover .arrow { color: var(--accent); transform: translateX(4px); }
.gl-lead a { grid-template-columns: minmax(0, 1fr) 24px; row-gap: 14px; padding: clamp(28px, 3vw, 40px) 0; }
.gl-lead h3 { grid-column: 1; font-size: clamp(28px, 3vw, 42px); line-height: 1.12; max-width: 18em; }
.gl-lead p { grid-column: 1; font-size: clamp(17px, 1.4vw, 19px); max-width: 40em; }
.gl-lead .arrow { grid-column: 2; grid-row: 1 / span 2; width: 24px; height: 24px; }
@media (max-width: 760px) {
  .gl-row a { grid-template-columns: minmax(0, 1fr) 20px; row-gap: 8px; }
  .gl-row h3, .gl-row p { grid-column: 1; }
  .gl-row .arrow { grid-column: 2; grid-row: 1 / span 2; }
}
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; margin-top: 20px; }
.card a { display: flex; flex-direction: column; height: 100%; padding: 24px; background: var(--panel); text-decoration: none; transition: background-color .25s; }
.card a:hover { background: var(--panel-2); }
.card .ic { color: var(--ink-2); }
.card h3 { margin-top: 18px; }
.card p { margin-top: 10px; font-size: 15px; color: var(--ink-2); }
.card-meta { margin-top: auto; padding-top: 18px; font-size: 13px; color: var(--ink-3); }
.cards:not(.cards-rel) { grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); }
.card-lead h3 { font-size: clamp(22px, 2vw, 28px); font-stretch: 110%; }
.card-lead p { font-size: 17px; }
.cards-rel { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 960px) {
  .cards, .cards-rel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards:not(.cards-rel) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card-lead { grid-column: 1 / -1; }
}
@media (max-width: 560px) { .cards, .cards-rel, .cards:not(.cards-rel) { grid-template-columns: 1fr; } }

/* article: a reading column with a summary box, figures and a mistake callout */
.article-prose { max-width: none; }
.kisaca { padding: 22px 24px; }
.kisaca ul { margin-top: 12px; }
.kisaca li { position: relative; padding-left: 20px; color: var(--ink); }
.kisaca li + li { margin-top: 8px; }
.kisaca li::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; background: var(--ink-3); }
.art-sec { margin-top: clamp(40px, 4vw, 56px); }
.art-sec h2 { font-size: clamp(24px, 2.3vw, 32px); }
.art-sec p { margin-top: 16px; font-size: clamp(17px, 1.3vw, 19px); line-height: 1.65; color: var(--ink); }
.fig { margin-top: clamp(32px, 3.4vw, 48px); padding: 22px 24px; }
.fig figcaption { margin-top: 14px; font-size: 13px; color: var(--ink-3); }
.diagram { width: 100%; height: auto; margin-top: 16px; overflow: visible; font-family: var(--sans); }
.diagram .n { fill: var(--panel-2); }
.diagram .n-you { fill: var(--accent); }
.diagram .n-muted { fill: #141412; }
.diagram .n-gate { fill: var(--panel-2); }
.diagram .n-gatebar { fill: var(--ink-2); }
.diagram .nt { fill: var(--ink); font-size: 12.5px; }
.diagram .nt-you { fill: var(--ground); font-weight: 600; }
.diagram .fl { fill: none; stroke: var(--ink-3); stroke-opacity: .45; stroke-width: 1.2; }
.diagram .vt { fill: var(--ink-3); font-size: 12.5px; }
.diagram .v { fill: var(--panel-2); }
.diagram .v-you { fill: rgba(236, 233, 226, .16); }
.diagram .v-absent { fill: var(--accent-dim); }
.diagram .v-muted { fill: none; }
.diagram .v-block { fill: #2a2a26; }
.diagram .vtx { fill: var(--ink); font-size: 13px; }
.diagram .vtx-abs { fill: var(--accent); font-weight: 600; }
.diagram .m-yes { fill: #2a2a26; }
.diagram .m-no { fill: var(--accent-dim); }
.diagram .mt-yes { fill: var(--ink); font-size: 13px; font-weight: 600; }
.diagram .mt-no { fill: var(--accent); font-size: 13px; font-weight: 600; }
.diagram-matrix { max-width: 520px; }
.fig-table .data { margin-top: 14px; }
.mistake { margin-top: clamp(32px, 3.4vw, 48px); padding: 22px 24px; }
.mistake .fig-title .ic { color: var(--ink-2); }
.mistake .claim { margin-top: 12px; font-size: clamp(18px, 1.5vw, 21px); color: var(--ink); }
.mistake p + p { margin-top: 10px; color: var(--ink-2); }
.art-related { margin-top: clamp(56px, 6vw, 88px); }
.art-related h2 { font-size: clamp(22px, 2.2vw, 30px); }
@media (max-width: 640px) {
  .diagram .nt { font-size: 16px; }
  .diagram .vtx, .diagram .vt, .diagram .mt-yes, .diagram .mt-no { font-size: 16px; }
}

/* legal reading column */
.read-col { max-width: 780px; }
.sec-legal { padding: clamp(28px, 3vw, 44px) 0 !important; }
.sec-legal h2 { font-size: clamp(22px, 2.2vw, 30px); margin-bottom: 16px; }
.sec-legal p, .legal-list li { font-size: 16px; line-height: 1.65; color: var(--ink-2); max-width: none; }
.legal-list { margin-top: 12px; }
.legal-list li { position: relative; padding-left: 18px; }
.legal-list li + li { margin-top: 6px; }
.legal-list li::before { content: ""; position: absolute; left: 0; top: .7em; width: 6px; height: 6px; background: var(--ink-3); }
.legal-table { margin: 12px 0; }
.legal-table td { color: var(--ink-2); vertical-align: top; }
.legal-table td:first-child { color: var(--ink); font-weight: 500; }
.legal-date { margin-top: 18px; font-size: 14px; color: var(--ink-3); }
mark.ph { background: var(--accent-dim); color: var(--accent); padding: 0 4px; font-weight: 600; }

/* on-this-page: a slim column of dots at the right edge; titles open on hover or keyboard focus */
.dots { display: none; }
@media (hover: hover) and (min-width: 1100px) {
  .dots { display: block; position: fixed; right: 0; top: 50%; z-index: 30; transform: translateY(-50%); padding: 14px 18px 14px 44px; }
  .dots ol { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; padding: 10px 6px; transition: background-color .25s var(--ease); }
  .dots a { display: flex; align-items: center; justify-content: flex-end; gap: 14px; min-height: 26px; padding: 0 8px 0 0; color: var(--ink-3); text-decoration: none; }
  .dots i { flex: none; width: 6px; height: 6px; background: var(--ink-3); opacity: .55; transition: background-color .2s, opacity .2s, transform .2s; }
  .dots .dot-t { max-width: 0; overflow: hidden; white-space: nowrap; font-size: 14px; line-height: 1.3; opacity: 0; transition: opacity .2s var(--ease), max-width .3s var(--ease); }
  .dots a.is-current i { background: var(--accent); opacity: 1; transform: scale(1.35); }
  .dots a.is-current { color: var(--ink); }
  .dots:hover ol, .dots:has(a:focus-visible) ol { padding: 10px 6px 10px 18px; background: rgba(23, 23, 21, .94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
  .dots:hover .dot-t, .dots:has(a:focus-visible) .dot-t { max-width: 280px; opacity: 1; }
  .dots a:hover, .dots a:focus-visible { color: var(--ink); }
  .dots a:hover i { opacity: 1; background: var(--ink); }
  .dots a:focus-visible { outline-offset: 0; }
}


/* data tables (sample report and figures) */
table.data { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.4; font-variant-numeric: tabular-nums; }
table.data th, table.data td { padding: 9px 18px 9px 0; text-align: left; vertical-align: baseline; font-weight: 400; }
table.data thead th { padding-top: 0; font-size: 13px; color: var(--ink-3); white-space: nowrap; }
table.data tbody th { font-weight: 560; white-space: nowrap; }
table.data td { color: var(--ink-2); }
table.data td.is-absent { color: var(--accent); font-weight: 560; white-space: nowrap; }
table.data td.muted { color: var(--ink-3); }
table.data td.up { color: var(--ink); }
table.data td.down { color: var(--ink-3); }
table.data caption { text-align: left; caption-side: top; padding-bottom: 12px; font-size: 14px; font-weight: 560; color: var(--ink); }
.prio { display: inline-block; padding: 2px 8px; font-size: 13px; background: var(--panel-2); color: var(--ink-2); }
.prio-h { background: var(--panel-2); color: var(--ink); font-weight: 600; }
.share td:last-child { display: flex; align-items: center; gap: 12px; white-space: nowrap; }
.share .bar { width: clamp(80px, 14vw, 200px); }
.share .is-firm th, .share .is-firm td { color: var(--ink); }
.problems td:first-child { color: var(--ink); min-width: 18em; }
.q-blocks .q-block + .q-block { margin-top: 2px; }
.q-block { padding: 20px 22px; }
.q-text { margin: 0 0 14px; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.45; max-width: 34em; }
.q-text span { display: block; margin-bottom: 6px; font-size: 13px; color: var(--ink-3); }
.ranks td:first-child, .pages td:first-child { color: var(--ink); }
.pages { max-width: 460px; }
.ranks { max-width: 580px; }
.sample-note { grid-column: 6 / -1; font-size: 14px; color: var(--ink-3); max-width: 40em; }
.sample-note strong { color: var(--ink); font-weight: 600; }
.sec-note { padding-top: 0 !important; }

/* crawler visits as a visitor log */
.botlog { margin: 0; background: var(--panel); box-shadow: 0 0 0 1px rgba(236, 233, 226, .06); font-variant-numeric: tabular-nums; }
.bl-head { display: flex; align-items: center; gap: 14px; padding: 12px 18px; border-bottom: 1px solid var(--faint); }
.bl-head figcaption { font-size: 13px; font-weight: 560; color: var(--ink-2); }
.bl-head .ans-tag { margin-left: auto; }
.bl-bots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--faint); }
.bl-bots li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 2px 10px; padding: 16px 18px; }
.bl-bots li + li { box-shadow: inset 1px 0 0 var(--faint); }
.bl-name { font-size: 14px; font-weight: 600; color: var(--ink); }
.bl-bots small { grid-row: 2; font-size: 12px; color: var(--ink-3); }
.bl-bots b { grid-row: span 2; font-size: 24px; font-weight: 500; font-stretch: 110%; }
.bl-bots .bar { grid-column: 1 / -1; width: 100%; height: 4px; margin-top: 10px; }
.bl-lines { width: 100%; border-collapse: collapse; font-size: 14px; }
.bl-lines th { padding: 12px 18px 6px; font-size: 12px; font-weight: 560; color: var(--ink-3); text-align: left; }
.bl-lines td { padding: 7px 18px; color: var(--ink-3); white-space: nowrap; }
.bl-lines tbody tr:nth-child(odd) td { background: rgba(236, 233, 226, .02); }
.bl-lines .bl-bot { color: var(--ink); font-weight: 560; }
.bl-lines .bl-path { color: var(--ink-2); width: 100%; }
.bl-lines tbody tr:last-child td { padding-bottom: 14px; }
@media (max-width: 760px) { .bl-bots { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bl-bots li:nth-child(3) { box-shadow: inset 0 1px 0 var(--faint); } .bl-bots li:nth-child(4) { box-shadow: inset 1px 1px 0 var(--faint); } }

/* charts */
.charts > * + * { margin-top: clamp(40px, 4.4vw, 64px); }
.charts-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(40px, 4.4vw, 64px) var(--col-gap); }
.charts-2 > * + * { margin-top: 0; }
.chart { margin: 0; max-width: 580px; }
.botlog + .chart, table + .chart, .table-scroll + .chart { margin-top: clamp(40px, 4.4vw, 64px); }
.chart figcaption { font-size: 15px; font-weight: 560; color: var(--ink); }
.c-note { margin-top: 6px; font-size: 14px; color: var(--ink-3); max-width: 36em; }
.chart-svg { font-family: var(--sans); width: 100%; height: auto; margin-top: 14px; overflow: visible; }
.c-guide { stroke: var(--ink); stroke-opacity: .08; stroke-width: 1; }
.c-tick { fill: var(--ink-3); font-size: 12.5px; }
.c-val { fill: var(--ink); font-size: 12.5px; font-weight: 560; }
.c-end { fill: var(--ink-2); font-size: 12.5px; }
.c-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.c-dot { stroke: var(--ground); stroke-width: 2; }
.c-line.s-x { stroke: var(--accent); } .c-dot.s-x { fill: var(--accent); }
.c-line.s-1 { stroke: var(--ink); } .c-dot.s-1 { fill: var(--ink); }
.c-line.s-2 { stroke: var(--ink-2); } .c-dot.s-2 { fill: var(--ink-2); }
.c-line.s-3 { stroke: var(--lead); } .c-dot.s-3 { fill: var(--lead); }
.c-legend { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 12px; font-size: 13px; color: var(--ink-2); }
.c-legend li { display: inline-flex; align-items: center; gap: 8px; }
.c-legend svg { width: 24px; height: 8px; overflow: visible; }
@media (max-width: 640px) { .c-tick, .c-val, .c-end { font-size: 15px; } }
@media (max-width: 640px) { .chart-w .c-tick, .chart-w .c-val, .chart-w .c-end { font-size: 21px; } }
@media (max-width: 1180px) { .charts-2 { grid-template-columns: 1fr; } }

/* closing: one per page, shaped by its context */
.closing { background: var(--ground-2); }
.closing-inner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: end; }
.closing-inner > div { grid-column: 1 / span 6; }
.closing-inner > :last-child { grid-column: 7 / -1; justify-self: start; width: 100%; }
.closing .url-field { margin-top: 0; }
.close-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.close-mail { display: inline-flex; align-items: center; gap: 12px; font-size: clamp(20px, 2vw, 28px); }
.close-mail .ic { color: var(--ink-2); }
.closing-link .more { margin-top: 0; }
@media (max-width: 960px) {
  .closing-inner > div, .closing-inner > :last-child { grid-column: 1 / -1; }
  .closing-inner > :last-child { margin-top: 28px; }
}

/* ---------- contact: the pre-scan form ---------- */
.sec-contact { background: var(--ground-2); }
.page-head ~ .sec-contact-bare { padding-top: clamp(20px, 2.4vw, 36px); background: none; }
.scan-limit { display: flex; gap: 10px; margin-top: 20px; max-width: 26em; font-size: 14px; color: var(--ink-3); }
.scan-limit .ic { width: 18px; height: 18px; margin-top: 2px; color: var(--ink-3); }
.direct { margin-top: 22px; color: var(--ink-2); }
.form { grid-column: 6 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px var(--col-gap); align-content: start; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field > span { font-size: 14px; font-weight: 500; color: var(--ink-2); }
.field-wide { grid-column: 1 / -1; }
.field input { width: 100%; min-height: 54px; padding: 14px 16px; background: var(--field); border: 0; border-radius: 0; font-size: 17px; line-height: 1.4; caret-color: var(--accent); outline: 1px solid transparent; outline-offset: 0; transition: outline-color .2s, background-color .2s; -webkit-appearance: none; appearance: none; }
.field input::placeholder { color: var(--ink-3); opacity: 1; }
.field input:hover { background: #21211d; }
.field input:focus { outline: 1px solid var(--accent); }
.field input:-webkit-autofill { -webkit-text-fill-color: var(--ink); box-shadow: 0 0 0 100px var(--field) inset; }
.field.is-invalid input { outline: 1px solid var(--accent); }
.field.is-invalid > span { color: var(--accent); }
.consent { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; color: var(--ink-2); line-height: 1.5; }
.consent input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--accent); cursor: pointer; }
.consent label { cursor: pointer; }
.consent a { color: var(--ink); }
.consent em { font-style: normal; color: var(--ink-3); }
.consent.is-invalid label { color: var(--accent); }
.consent.is-invalid input { outline: 1px solid var(--accent); outline-offset: 2px; }
.scan-bot { min-height: 65px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form-end { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 24px; margin-top: 6px; }
.form-status { font-size: 15px; color: var(--ink-2); }
.form-status.is-error { color: var(--accent); }
.form-status.is-ok { color: var(--ink); }
.form-status a { color: var(--ink); }
.form .btn[disabled] { opacity: .55; cursor: progress; }
.form-note { font-size: 14px; color: var(--ink-3); }
@media (max-width: 960px) {
  .sec-head, .sec-body, .sec-wide-body, .form, .sample-note { grid-column: 1 / -1; }
  .sec-head + .sec-body, .sec-head + .form, .sec-head + .sec-wide-body { margin-top: 36px; }
  .measures li { grid-template-columns: 1fr; row-gap: 10px; }
  .measures h3, .measures li > p:not(.reads), .measures .reads { grid-column: 1 / -1; }
  .reads span, .measures li + li .reads span { position: static; display: block; margin-bottom: 4px; width: auto; height: auto; clip-path: none; }
}
@media (max-width: 640px) {
  .rows li { grid-template-columns: 1fr; row-gap: 6px; }
  .form { grid-template-columns: 1fr; }
  table.data { font-size: 14px; }
  table.data th, table.data td { padding-right: 12px; }
  .problems td:first-child { min-width: 14em; }
}

/* ---------- footer ---------- */
.foot { padding: clamp(56px, 7vw, 96px) 0 36px; }
.foot-inner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 28px; }
.foot-brand { grid-column: 1 / span 5; color: var(--ink); }
.foot-line { margin-top: 18px; max-width: 26em; color: var(--ink-2); }
.foot-nav { grid-column: 7 / -1; display: grid; grid-template-columns: 1fr 1.3fr; column-gap: var(--col-gap); }
.foot-links { display: flex; flex-direction: column; font-size: 15px; }
.foot-links a { display: inline-block; padding: 5px 0; }
.foot-copy { grid-column: 1 / -1; margin-top: clamp(28px, 3vw, 48px); font-size: 14px; color: var(--ink-3); }
.foot-marks { display: block; margin-top: 8px; max-width: 60em; font-size: 12px; line-height: 1.5; }
@media (max-width: 860px) {
  .foot-brand, .foot-nav { grid-column: 1 / -1; }
}

/* ---------- the sample report as an analytics report ---------- */
.dic { display: inline-block; width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: square; vertical-align: -2px; margin-right: 6px; }
.kunye { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; }
.kunye div { padding: 16px 18px; background: var(--panel); }
.kunye dt { font-size: 12px; font-weight: 560; color: var(--ink-3); }
.kunye dd { margin-top: 6px; font-size: 15px; line-height: 1.45; color: var(--ink); }
.sec-kunye .sec-wide-body { grid-column: 1 / -1; margin-top: clamp(24px, 2.6vw, 36px); }
.sec-wide .sec-head { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: space-between; gap: var(--col-gap); flex-wrap: wrap; }
.sec-wide .sec-head .sec-lede { margin-top: 0; max-width: 34em; }
.sec-wide .sec-wide-body { grid-column: 1 / -1; margin-top: clamp(28px, 3vw, 44px); }
.sec-scores { background: var(--ground-2); }
.sec-scores .band-head { align-items: center; }
.gauges { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; margin-top: clamp(28px, 3vw, 44px); }
.g-card { padding: 26px 26px 24px; background: var(--panel); font-variant-numeric: tabular-nums; }
.gauge { display: block; width: 100%; max-width: 240px; height: auto; margin: 0 auto; overflow: visible; }
.g-track { fill: none; stroke: var(--faint); stroke-width: 9; }
.g-val { fill: none; stroke-width: 9; }
.g-seo { stroke: var(--ink); } .g-geo { stroke: var(--ink-3); } .g-ai { stroke: var(--accent); }
.g-n { margin-top: -52px; text-align: center; font-size: clamp(40px, 3.6vw, 54px); font-weight: 500; font-stretch: 112%; line-height: 1; letter-spacing: -.02em; }
.g-card-ai .g-n { color: var(--accent); }
.g-card h3 { margin-top: 22px; font-size: 17px; text-align: center; }
.g-card .delta { display: flex; justify-content: center; align-items: center; margin-top: 8px; font-size: 13px; font-weight: 560; }
.delta-up { color: var(--ink); } .delta-down { color: var(--ink-3); } .delta-flat { color: var(--ink-3); }
.g-note { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--faint); font-size: 13px; line-height: 1.5; color: var(--ink-3); text-align: center; }
.charts-wide { margin-top: 2px; }
.chart { padding: 20px 22px 16px; background: var(--panel); max-width: none; }
.chart figcaption { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.chart-w .chart-svg { max-height: 300px; }
.c-last { stroke-width: 3; }
.c-val-s-1 { fill: var(--ink); } .c-val-s-2 { fill: var(--ink-2); } .c-val-s-x { fill: var(--accent); }
.charts-2 .chart, .sec-body.charts .chart { max-width: none; }
.moves th[scope="row"] { font-weight: 430; color: var(--ink); white-space: normal; }
.moves td { vertical-align: middle; }
.pos { display: inline-block; min-width: 2.8em; padding: 3px 0; text-align: center; background: var(--panel-2); color: var(--ink-3); font-size: 14px; }
.pos-now { color: var(--ink); font-weight: 600; background: var(--panel); box-shadow: inset 0 0 0 1px rgba(236, 233, 226, .14); }
.pos-arrow { padding-right: 10px !important; color: var(--ink-3); }
.pos-arrow .arrow { width: 14px; height: 14px; }
.moves td.up, .moves td.down { white-space: nowrap; }
.q-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; }
.q-card { padding: 22px 24px; background: var(--panel); display: flex; flex-direction: column; }
.qa-rows li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto 2.4em; column-gap: 12px; row-gap: 2px; align-items: center; padding: 10px 0; border-top: 1px solid var(--faint); }
.qa-who { font-size: 15px; font-weight: 560; }
.qa-pos { text-align: right; font-size: 14px; color: var(--ink); font-variant-numeric: tabular-nums; }
.qa-src { grid-column: 2 / -1; font-size: 13px; color: var(--ink-3); }
.qa-src.muted { color: var(--ink-3); }
.chip-n { padding: 3px 9px; font-size: 12px; font-weight: 600; background: var(--panel-2); color: var(--ink); }
.chip-absent { color: var(--accent); background: var(--accent-dim); }
.q-ex { margin: auto 0 0; padding: 14px 16px; background: var(--ground); box-shadow: inset 0 0 0 1px var(--faint); }
.q-ex-who { font-size: 12px; font-weight: 560; color: var(--ink-3); }
.q-ex p + p { margin-top: 6px; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.q-ex b { color: var(--ink); font-weight: 600; }
.ex-firm { padding: 0 3px; background: var(--accent-dim); color: var(--accent); font-weight: 600; }
.qa-rows { margin-bottom: 16px; }
.hbars li { display: grid; grid-template-columns: minmax(7em, 10em) minmax(0, 1fr) 7.5em; align-items: center; gap: 16px; padding: 9px 0; font-variant-numeric: tabular-nums; }
.hbars .bar { width: 100%; height: 12px; }
.hb-name { font-size: 15px; color: var(--ink-2); }
.hb-val { font-size: 13px; color: var(--ink-3); text-align: right; }
.hb-val b { font-size: 15px; color: var(--ink); font-weight: 560; }
.hbars .is-firm .hb-name { color: var(--ink); font-weight: 600; }
.hbars .is-firm .hb-val b { color: var(--accent); }
.hbars-sm li { grid-template-columns: minmax(0, 11em) minmax(0, 1fr) 3em; padding: 7px 0; }
.hbars-sm .bar { height: 8px; }
.hbars-sm .hb-name { font-size: 14px; }
.chart-list .hbars { margin-top: 16px; }
.p-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; }
.p-group { padding: 22px 24px; background: var(--panel); }
.p-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--faint); }
.p-head h3 { display: flex; align-items: center; gap: 10px; font-size: 18px; }
.p-head .ic { width: 20px; height: 20px; color: var(--ink-2); }
.p-count { padding: 3px 9px; font-size: 12px; font-weight: 560; color: var(--ink-2); background: var(--panel-2); white-space: nowrap; }
.p-group li { display: grid; grid-template-columns: 5.4em minmax(0, 1fr); gap: 14px; align-items: start; padding: 14px 0; }
.p-group li + li { border-top: 1px solid var(--faint); }
.p-group li p { font-size: 15px; line-height: 1.5; color: var(--ink); }
.sev { display: inline-flex; align-items: flex-end; gap: 2px; padding-top: 3px; }
.sev i { width: 4px; background: var(--faint); }
.sev i:nth-child(1) { height: 6px; } .sev i:nth-child(2) { height: 10px; } .sev i:nth-child(3) { height: 14px; }
.sev-1 i:nth-child(1), .sev-2 i:nth-child(-n+2), .sev-3 i { background: var(--ink); }
.sev span { margin-left: 8px; font-size: 12px; font-weight: 560; color: var(--ink-2); }
.sev-3 span { color: var(--ink); }
.crawl-grid .charts-2 { margin-top: 2px; gap: 2px; }
@media (max-width: 1100px) { .p-groups, .gauges { grid-template-columns: 1fr; } .q-cards { grid-template-columns: 1fr; } .kunye { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .kunye { grid-template-columns: 1fr; } .hbars li { grid-template-columns: minmax(0, 1fr) 6.5em; } .hbars .bar { grid-column: 1 / -1; grid-row: 2; } .chart { padding: 16px 14px 12px; } }

/* ---------- site-wide components: tick and cross cells, package meters, cards, flow, icon tiles ---------- */
.mk-b { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; }
.mk-yes .mk-b { background: var(--panel-2); color: var(--ink); }
.mk-no .mk-b { box-shadow: inset 0 0 0 1px var(--faint); color: var(--lead); }
.mk .mk-b .ic { width: 16px; height: 16px; }
.mk-no .mk-b .ic { width: 12px; height: 12px; }
.cmp-full td:last-child, .cmp-full th:last-child { background: rgba(236, 233, 226, .035); }
.cmp-full .quote-row td:last-child { background: rgba(236, 233, 226, .035) !important; }
.pkg-ic { display: inline-flex; width: 34px; height: 34px; align-items: center; justify-content: center; margin-bottom: 14px; background: var(--panel-2); }
.pkg-ic .ic { width: 18px; height: 18px; color: var(--ink); }
.pkg-meter { display: block; height: 4px; margin-top: 16px; max-width: 14em; background: var(--faint); }
.pkg-meter span { display: block; height: 100%; background: var(--ink-2); }
.cmp-full thead th:last-child .pkg-meter span { background: var(--ink); }
/* Phones: the row labels stay pinned while the packages scroll sideways, and the next package peeks in so the scroll is obvious. */
@media (max-width: 700px) {
  .cmp-full { min-width: 640px; font-size: 14px; }
  .cmp-full th, .cmp-full td { padding: 10px 12px; }
  .cmp-full thead th { width: 172px; }
  .cmp-full thead th:first-child, .cmp-full tbody th { position: sticky; left: 0; z-index: 1; width: 112px; min-width: 112px; background: var(--ground); box-shadow: 1px 0 0 var(--faint); }
  .cmp-full tbody tr:nth-child(odd) th { background: linear-gradient(rgba(236, 233, 226, .025), rgba(236, 233, 226, .025)), var(--ground); }
  .cmp-full .pkg-line, .cmp-full .pkg-meter, .cmp-full .pkg-count { display: none; }
  .cmp-full .pkg-ic { margin-bottom: 10px; }
}
.pkg-count { display: block; margin-top: 6px; font-size: 12px; font-weight: 500; color: var(--ink-3); }
.areas.sec-wide-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; }
.areas li + li { margin-top: 0; }
.areas li { padding: 24px 26px; background: var(--panel); grid-template-columns: 40px minmax(0, 1fr); }
.areas .ic { width: 24px; height: 24px; }
.m-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; }
.m-cards li { display: block; padding: 24px 26px; background: var(--panel); }
.m-cards li + li { margin-top: 0; }
.m-cards h3 { display: flex; align-items: center; gap: 12px; }
.m-cards h3 .ic { width: 22px; height: 22px; }
.m-cards li > p:not(.reads) { margin-top: 12px; max-width: none; color: var(--ink-2); font-size: 16px; line-height: 1.55; }
.icon-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2px; }
.icon-tiles li { padding: 22px 22px 24px; background: var(--panel); }
.tl-ic { display: inline-flex; width: 38px; height: 38px; align-items: center; justify-content: center; margin-bottom: 16px; background: var(--panel-2); }
.tl-ic .ic { width: 20px; height: 20px; color: var(--ink); }
.icon-tiles h3 { font-size: 17px; }
.icon-tiles p { margin-top: 8px; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.sec-flow { padding-top: clamp(24px, 3vw, 40px) !important; padding-bottom: 0 !important; }
.flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; counter-reset: f; }
.flow li { position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 14px; align-items: center; padding: 22px 24px; background: var(--panel); }
.flow li:not(:last-child)::after { content: ""; position: absolute; right: -7px; top: 50%; z-index: 1; width: 11px; height: 11px; border-top: 1.6px solid var(--ink-2); border-right: 1.6px solid var(--ink-2); transform: translateY(-50%) rotate(45deg); }
.fl-n { position: absolute; top: 12px; right: 16px; font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.fl-ic { grid-row: span 2; display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; background: var(--panel-2); }
.fl-ic .ic { width: 22px; height: 22px; }
.flow b { font-size: 17px; font-weight: 600; }
.flow small { font-size: 13px; color: var(--ink-3); }
.flow-loop { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-size: 14px; color: var(--ink-2); }
.flow-loop .ic { width: 18px; height: 18px; color: var(--ink-2); }
@media (max-width: 900px) { .m-cards, .areas.sec-wide-body { grid-template-columns: 1fr; } .flow { grid-template-columns: 1fr; } .flow li:not(:last-child)::after { display: none; } }

/* bars, gauges and counters come in once, on view; without script or with reduced motion they are simply there */
@media (prefers-reduced-motion: no-preference) {
  .js [data-anim] .bar span { transform: scaleX(0); transform-origin: left center; transition: transform 1s var(--ease); }
  .js [data-anim].is-in .bar span { transform: none; }
  .js [data-anim] .g-val { stroke-dashoffset: var(--v); transition: stroke-dashoffset 1.2s var(--ease); }
  .js [data-anim].is-in .g-val { stroke-dashoffset: 0; }
}

/* ---------- motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; }
  .type .w { opacity: 1 !important; }
  .js .answer.is-typing .ans-out { opacity: 1; transform: none; filter: none; }
}


/* ===== Round 11 ===== */

/* Soft corners: large surfaces 12px, small chips and controls 7px. Grids that used hairline gaps now breathe. */
:root { --r: 12px; --r-s: 7px; }
.panel, .answer, .assist li, .tile, .photo, .mock-win, .record, .card a, .botlog, .kunye div, .g-card, .chart, .q-card, .p-group,
.areas li, .m-cards li, .icon-tiles li, .flow li, .callout, .aud-card, .gcard a, .strip, .fig, .bl-bots { border-radius: var(--r); }
.photo, .strip { overflow: hidden; }
.mock-phone { border-radius: 26px; }
.bubble-q, .sr-ai, .ph-q, .ans-chat > *, .kisaca, .mistake { border-radius: 10px; }
.btn, .field input, .field textarea, .field select, .acc-pm, .tl-n, .tl-ic, .fl-ic, .pkg-ic, .pm-ic, .aud-ic, .gc-ic,
.ans-tag, .res-pill, .m-tag, .mock-flag, .chip-n, .prio, .p-count, .pos, .mk-b, .ex-firm, mark.ph, .gc-src, .mock-q { border-radius: var(--r-s); }
.url-field input { border-radius: var(--r-s) 0 0 var(--r-s); }
.url-field .btn { border-radius: 0 var(--r-s) var(--r-s) 0; }
@media (max-width: 560px) { .url-field input { border-radius: var(--r-s) var(--r-s) 0 0; } .url-field .btn { border-radius: 0 0 var(--r-s) var(--r-s); } }
.assist, .tiles, .cards, .kunye, .gauges, .q-cards, .p-groups, .areas.sec-wide-body, .m-cards, .icon-tiles, .flow { gap: 12px; }
.crawl-grid .charts-2 { margin-top: 12px; gap: 12px; }
.cmp tbody tr > :first-child { border-radius: var(--r-s) 0 0 var(--r-s); }
.cmp tbody tr > :last-child { border-radius: 0 var(--r-s) var(--r-s) 0; }

/* Who it is for: kinds of business on the left, one assistant window on the right. */
.aud { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--col-gap); align-items: start; margin-top: clamp(32px, 3.4vw, 48px); }
.aud-tabs { display: grid; gap: 6px; }
.aud-tabs button { display: flex; width: 100%; align-items: center; gap: 14px; padding: 12px 14px; font: inherit; font-size: clamp(16px, 1.3vw, 18px); font-weight: 500; text-align: left; color: var(--ink-2); background: transparent; border: 0; border-radius: var(--r); cursor: pointer; transition: background-color .25s, color .25s; }
.aud-tabs button:hover { color: var(--ink); background: rgba(236, 233, 226, .03); }
.aud-tabs button[aria-selected="true"] { color: var(--ink); background: var(--panel); }
.aud-tabs button[aria-selected="true"] .aud-ic { background: var(--accent-dim); }
.aud-tabs button[aria-selected="true"] .aud-ic .ic { color: var(--accent); }
.aud-ic { display: inline-flex; width: 38px; height: 38px; flex: none; align-items: center; justify-content: center; background: var(--panel); }
.aud-ic .ic { width: 18px; height: 18px; color: var(--ink-2); }
.aud-panels { display: grid; }
.js .aud-panel { grid-area: 1 / 1; transition: opacity .45s var(--ease), transform .45s var(--ease); }
.js .aud-panel[data-off] { opacity: 0; transform: translateY(8px); visibility: hidden; pointer-events: none; }
.js .aud-name { display: none; }
.aud-panel + .aud-panel { margin-top: 28px; }
.js .aud-panel + .aud-panel { margin-top: 0; }
.aud-name { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 18px; }
.aud-name .ic { width: 18px; height: 18px; color: var(--ink-2); }
.aud-win { display: grid; gap: 14px; padding: 18px 20px 20px; background: var(--panel); border-radius: var(--r); box-shadow: 0 0 0 1px rgba(236, 233, 226, .06), 0 40px 80px -40px rgba(0, 0, 0, .9); }
.aud-win .mock-flag { position: static; justify-self: start; }
.aud-cost { display: flex; gap: 12px; margin-top: 18px; font-size: clamp(16px, 1.3vw, 18px); line-height: 1.5; color: var(--ink); max-width: none; }
.aud-cost::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: .55em; background: var(--accent); border-radius: 2px; }
@media (max-width: 900px) {
  .aud { grid-template-columns: 1fr; }
  .aud-tabs { display: flex; gap: 6px; overflow-x: auto; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 4px; scrollbar-width: none; }
  .aud-tabs::-webkit-scrollbar { display: none; }
  .aud-tabs li { flex: none; }
  .aud-tabs button { width: auto; white-space: nowrap; padding: 8px 12px 8px 8px; font-size: 15px; }
  .aud-tabs .aud-ic { width: 30px; height: 30px; }
}

/* What we do: the short package table across the full width, a little larger. */
.sec-pkgwide .table-scroll { margin-top: clamp(32px, 3.4vw, 52px); }
.cmp-wide { font-size: clamp(15px, 1.25vw, 18px); }
.cmp-wide th, .cmp-wide td { padding: clamp(14px, 1.3vw, 20px) clamp(14px, 1.6vw, 24px); }
.cmp-wide thead th { font-size: clamp(14px, 1.15vw, 17px); padding-bottom: 16px; }
.cmp-wide tbody th { width: 40%; color: var(--ink); }
.pm-row { display: flex; align-items: center; gap: 14px; }
.cmp-wide td, .cmp-wide thead th { width: 20%; text-align: center; }
.cmp-wide .mk-b { margin: 0 auto; }
.pm-ic { display: inline-flex; width: 34px; height: 34px; flex: none; align-items: center; justify-content: center; background: var(--panel-2); }
.pm-ic .ic { width: 17px; height: 17px; color: var(--ink-2); }
.cmp-wide tbody tr:last-child .pm-ic { background: var(--accent-dim); } .cmp-wide tbody tr:last-child .pm-ic .ic { color: var(--accent); }
.sec-pkgwide .more { margin-top: 28px; }
@media (max-width: 700px) {
  .cmp-wide { min-width: 560px; }
  .cmp-wide tbody th { position: sticky; left: 0; z-index: 1; background: var(--ground); }
  .cmp-wide tbody tr:nth-child(odd) th { background: linear-gradient(rgba(236, 233, 226, .025), rgba(236, 233, 226, .025)), var(--ground); }
}

/* Guides index: a grid of cards; the first one is wider. */
.gcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.gcard a { display: flex; flex-direction: column; height: 100%; padding: 26px 26px 22px; background: var(--panel); text-decoration: none; transition: background-color .25s; }
.gcard a:hover { background: var(--panel-2); }
.gcard-lead { grid-column: span 2; }
.gc-top { display: flex; align-items: center; gap: 10px; }
.gc-ic { display: inline-flex; width: 34px; height: 34px; align-items: center; justify-content: center; background: var(--panel-2); }
.gc-ic .ic { width: 17px; height: 17px; color: var(--ink); }
.gc-cat { font-size: 13px; font-weight: 560; color: var(--ink-2); }
.gc-src { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 3px 9px; font-size: 12px; font-weight: 560; color: var(--accent); background: var(--accent-dim); }
.gc-src .ic { width: 13px; height: 13px; }
.gcard h2 { margin-top: 22px; font-size: clamp(19px, 1.6vw, 23px); line-height: 1.22; }
.gcard-lead h2 { font-size: clamp(26px, 2.6vw, 36px); max-width: 18em; }
.gcard p { margin-top: 12px; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.gc-meta { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 22px; font-size: 13px; color: var(--ink-3); }
.gc-meta .arrow { width: 18px; height: 18px; color: var(--ink-3); transition: transform .25s var(--ease), color .25s; }
.gcard a:hover .arrow { color: var(--accent); transform: translateX(4px); }
@media (max-width: 1000px) { .gcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .gcards { grid-template-columns: 1fr; } .gcard-lead { grid-column: auto; } }

/* Referenced articles: citation markers and the reference list. */
sup.cite { font-size: .7em; line-height: 0; margin-left: 1px; }
sup.cite a { padding: 0 2px; color: var(--accent); text-decoration: none; font-weight: 600; }
sup.cite a:hover { text-decoration: underline; }
.art-refs { margin-top: clamp(40px, 4vw, 64px); padding-top: 28px; border-top: 1px solid var(--faint); }
.refs { margin-top: 16px; padding-left: 1.6em; list-style: decimal; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.refs li { display: list-item; padding: 6px 0 6px 4px; scroll-margin-top: calc(var(--top-h) + 24px); }
.refs li:target { color: var(--ink); }
.refs a { color: var(--ink); overflow-wrap: anywhere; }
.ref-v { font-style: italic; }
.refs li::marker { color: var(--accent); font-weight: 600; font-variant-numeric: tabular-nums; }
.ph-a, .ph-input { border-radius: 10px; }

/* Guides: text runs the full width of the page; a 16:9 cover under the title and on each card. */
.page-head-article .page-lede { max-width: none; }
.article-prose .art-sec p, .article-prose .kisaca li, .article-prose .mistake p { max-width: none; }
.art-cover { margin-top: clamp(28px, 3vw, 44px); }
.cover { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--panel); }
.cover-art { border-radius: var(--r); }
.gcard a { padding: 0 0 22px; overflow: hidden; }
.gcard .cover-card { margin-bottom: 22px; border-radius: var(--r) var(--r) 0 0; transition: transform .6s var(--ease), opacity .3s; opacity: .9; }
.gcard a:hover .cover-card { opacity: 1; }
.gcard .gc-top, .gcard h2, .gcard p, .gcard .gc-meta { margin-left: 26px; margin-right: 26px; }
.gcard a > .gc-top:first-child { margin-top: 26px; }
.article-prose .diagram, .article-prose .fig .chart-svg { display: block; max-width: 760px; }