/* Echo Tuner — website styles. Brand tokens match the client portal (deep indigo, cream, warm orange/coral/gold). */

@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url("/assets/fonts/dm-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url("/assets/fonts/dm-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Metric-matched fallback (same overrides Next.js generates for DM Sans): text keeps its size and line breaks while the
   web font loads, so swapping fonts does not shift the layout. Liberation Sans/Arimo are Arial-metric on Linux. */
@font-face {
  font-family: "DM Sans Fallback";
  src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Arimo");
  ascent-override: 94.9%;
  descent-override: 29.66%;
  line-gap-override: 0%;
  size-adjust: 104.53%;
}

:root {
  --ink-950: #0e0f35;
  --ink-900: #171845;
  --ink-850: #1f1f52;
  --ink-800: #252455;
  --ink-700: #3a3475;
  --ink-600: #574f92;
  --violet: #6c63ff;
  --lavender: #c7d2fe;
  --cream: #f5ebd5;
  --cream-100: #f9f2e3;
  --paper: #fffbf3;
  --line-light: #e4d6b8;
  --orange: #e8a66b;
  --coral: #f87060;
  --gold: #f4c04c;
  --accent-on-light: #a63e27;
  --muted-on-light: #4b4878;
  --muted-on-dark: #c7d2fe;
  --radius: 14px;
  --radius-lg: 22px;
  --shadow-soft: 0 1px 2px rgba(14, 15, 53, 0.06), 0 12px 32px -18px rgba(14, 15, 53, 0.35);
  --shadow-dark: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 24px 48px -28px rgba(0, 0, 0, 0.6);
  --font: "DM Sans", "DM Sans Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --container: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ink-900);
  background: var(--cream-100);
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; }
a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3, h4 { margin: 0; line-height: 1.12; letter-spacing: -0.022em; font-weight: 650; }
p { margin: 0; }
figure { margin: 0; }
ul, ol { margin: 0; padding: 0; }
strong { font-weight: 650; }
.container { width: min(var(--container), 100% - 40px); margin-inline: auto; }
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--gold); color: var(--ink-950); padding: 10px 16px; border-radius: 10px; font-weight: 650; }
.skip-link:focus { top: 12px; }
.icon { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.55em; padding: 0.82em 1.35em; border-radius: 999px; font: inherit; font-weight: 600; font-size: 0.98rem; line-height: 1.2; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; white-space: nowrap; }
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn .icon { width: 1.05em; height: 1.05em; }
.btn-primary { background: var(--orange); color: var(--ink-950); }
.btn-primary:hover { background: #f0b783; }
.btn-ghost { border-color: rgba(245, 235, 213, 0.32); color: var(--cream); background: rgba(245, 235, 213, 0.04); }
.btn-ghost:hover { border-color: rgba(245, 235, 213, 0.6); background: rgba(245, 235, 213, 0.09); }
.on-light .btn-ghost, .section-light .btn-ghost, .section-paper .btn-ghost { border-color: rgba(23, 24, 69, 0.28); color: var(--ink-900); background: transparent; }
.on-light .btn-ghost:hover, .section-light .btn-ghost:hover, .section-paper .btn-ghost:hover { border-color: var(--ink-900); background: rgba(23, 24, 69, 0.04); }
.section-light .btn-primary, .section-paper .btn-primary { background: var(--ink-900); color: var(--cream); }
.section-light .btn-primary:hover, .section-paper .btn-primary:hover { background: var(--ink-800); }
.btn-sm { padding: 0.55em 1em; font-size: 0.9rem; }
.btn-lg { padding: 1em 1.6em; font-size: 1.02rem; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(23, 24, 69, 0.94); backdrop-filter: saturate(140%) blur(10px); -webkit-backdrop-filter: saturate(140%) blur(10px); color: var(--cream); border-bottom: 1px solid rgba(232, 166, 107, 0.16); }
.header-inner { display: flex; align-items: center; gap: 28px; min-height: 72px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--cream); }
.brand:hover { text-decoration: none; }
.brand-mark { color: var(--cream); flex: none; }
.brand-word { font-size: 1.32rem; font-weight: 700; letter-spacing: -0.035em; line-height: 1; }
.brand-word span { color: var(--orange); margin-left: 0.04em; }
.primary-nav { margin-left: auto; }
.primary-nav > ul { display: flex; align-items: center; gap: 4px; list-style: none; }
.primary-nav a, .primary-nav summary { white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; padding: 8px 12px; border-radius: 999px; font-size: 0.94rem; font-weight: 500; color: rgba(245, 235, 213, 0.86); text-decoration: none; cursor: pointer; list-style: none; }
.primary-nav summary::-webkit-details-marker { display: none; }
.primary-nav a:hover, .primary-nav summary:hover { color: var(--cream); background: rgba(245, 235, 213, 0.07); }
.primary-nav a[aria-current="page"], .menu[data-current] > summary { color: var(--cream); background: rgba(232, 166, 107, 0.14); }
.chev { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; transition: transform 0.15s; }
.menu[open] .chev { transform: rotate(180deg); }
.has-menu { position: relative; }
.menu-panel { position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%); width: 310px; padding: 8px; border-radius: 16px; background: var(--ink-850); border: 1px solid var(--ink-700); box-shadow: 0 24px 48px -20px rgba(0, 0, 0, 0.6); display: grid; gap: 2px; }
.menu-panel a { display: grid; gap: 2px; padding: 12px 14px; border-radius: 12px; white-space: normal; }
.menu-panel a strong { color: var(--cream); font-weight: 600; }
.menu-panel a span { font-size: 0.82rem; color: var(--muted-on-dark); }
.header-actions { display: flex; gap: 10px; align-items: center; }
.mobile-nav { display: none; }

@media (max-width: 1180px) {
  .primary-nav, .header-actions { display: none; }
  .mobile-nav { display: block; margin-left: auto; }
  .mobile-nav > summary { list-style: none; width: 44px; height: 44px; display: grid; place-content: center; gap: 5px; cursor: pointer; border-radius: 12px; border: 1px solid rgba(245, 235, 213, 0.22); }
  .mobile-nav > summary::-webkit-details-marker { display: none; }
  .mobile-nav > summary span { display: block; width: 20px; height: 2px; background: var(--cream); border-radius: 2px; transition: transform 0.2s, opacity 0.2s; }
  .mobile-nav[open] > summary span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .mobile-nav[open] > summary span:nth-child(2) { opacity: 0; }
  .mobile-nav[open] > summary span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .mobile-panel { position: absolute; left: 0; right: 0; top: 100%; background: var(--ink-900); border-bottom: 1px solid var(--ink-700); padding: 12px 20px 24px; max-height: calc(100vh - 72px); overflow: auto; }
  .mobile-panel ul { list-style: none; display: grid; }
  .mobile-panel li a { display: block; padding: 14px 4px; border-bottom: 1px solid rgba(245, 235, 213, 0.08); color: var(--cream); text-decoration: none; font-weight: 500; }
  .mobile-panel li a[aria-current="page"] { color: var(--orange); }
  .mobile-actions { display: grid; gap: 10px; margin-top: 18px; }
}

/* ---------- Sections ---------- */
.section { padding-block: clamp(64px, 9vw, 116px); position: relative; }
.section-dark { background: var(--ink-900); color: var(--cream); }
.section-deep { background: var(--ink-950); color: var(--cream); }
.section-light { background: var(--cream); }
.section-paper { background: var(--paper); }
.section-tight { padding-block: clamp(48px, 6vw, 72px); }
.eyebrow { display: inline-flex; align-items: center; gap: 12px; font-size: 0.74rem; font-weight: 650; letter-spacing: 0.26em; text-transform: uppercase; color: var(--orange); }
.eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; }
.section-light .eyebrow, .section-paper .eyebrow { color: var(--accent-on-light); }
.section-head { max-width: 760px; display: grid; gap: 18px; margin-bottom: clamp(36px, 5vw, 56px); }
.section-head.center { margin-inline: auto; text-align: center; justify-items: center; }
.section-head h2, .h2 { font-size: clamp(1.95rem, 3.4vw, 3rem); }
.lede { font-size: clamp(1.08rem, 1.5vw, 1.24rem); line-height: 1.65; color: var(--muted-on-light); max-width: 68ch; }
.section-dark .lede, .section-deep .lede, .hero .lede, .page-hero .lede { color: var(--muted-on-dark); }
.muted { color: var(--muted-on-light); }
.section-dark .muted, .section-deep .muted { color: var(--muted-on-dark); }

/* ---------- Home hero ---------- */
.hero { position: relative; overflow: hidden; background: radial-gradient(1100px 600px at 82% 18%, rgba(108, 99, 255, 0.22), transparent 60%), radial-gradient(800px 500px at 8% 110%, rgba(248, 112, 96, 0.14), transparent 60%), var(--ink-900); color: var(--cream); padding: clamp(56px, 8vw, 104px) 0 clamp(120px, 14vw, 170px); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero h1 { font-size: clamp(2.65rem, 5.6vw, 4.9rem); letter-spacing: -0.035em; line-height: 1.02; font-weight: 680; margin-top: 22px; }
.hero h1 em { font-style: normal; background: linear-gradient(92deg, var(--gold), var(--coral) 55%, var(--orange)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero .lede { margin-top: 26px; font-size: clamp(1.1rem, 1.55vw, 1.28rem); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.hero-facts { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 30px; list-style: none; font-size: 0.92rem; color: var(--muted-on-dark); }
.hero-facts li { display: inline-flex; align-items: center; gap: 8px; }
.hero-facts .icon { color: var(--orange); }
.hero .eq-bars, .page-hero .eq-bars { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: clamp(56px, 8vw, 96px); pointer-events: none; }

/* The "answer" illustration: one buyer question, three outcomes we measure. */
.signal { position: relative; border-radius: var(--radius-lg); padding: 26px; background: linear-gradient(180deg, rgba(31, 31, 82, 0.92), rgba(23, 24, 69, 0.92)); border: 1px solid var(--ink-700); box-shadow: var(--shadow-dark); }
.signal::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: linear-gradient(140deg, rgba(244, 192, 76, 0.5), transparent 35%, transparent 70%, rgba(108, 99, 255, 0.5)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.signal-label { display: flex; justify-content: space-between; align-items: center; font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted-on-dark); }
.signal-label span:last-child { letter-spacing: 0.04em; text-transform: none; opacity: 0.8; }
.signal-note { margin-top: 14px; font-size: 0.76rem; color: rgba(199, 210, 254, 0.75); }
.rings { position: absolute; right: -140px; top: -160px; width: 520px; height: 520px; pointer-events: none; opacity: 0.55; }

/* ---------- Inner page hero ---------- */
.page-hero { position: relative; overflow: hidden; background: radial-gradient(900px 480px at 85% 0%, rgba(108, 99, 255, 0.2), transparent 60%), var(--ink-900); color: var(--cream); padding: clamp(44px, 6vw, 76px) 0 clamp(96px, 11vw, 136px); }
.page-hero h1 { font-size: clamp(2.3rem, 4.6vw, 3.9rem); letter-spacing: -0.032em; margin-top: 18px; max-width: 18ch; }
.page-hero h1.wide { max-width: 24ch; }
.page-hero .lede { margin-top: 22px; }
.page-hero .hero-actions { margin-top: 30px; }
.home-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; font-size: 0.85rem; color: var(--muted-on-dark); }
.crumbs li + li::before { content: "/"; margin-right: 6px; opacity: 0.5; }
.crumbs a { color: var(--muted-on-dark); text-decoration: none; }
.crumbs a:hover { color: var(--cream); text-decoration: underline; }
.crumbs + .eyebrow { margin-top: 28px; }

/* ---------- Answer-first summary box ---------- */
.answer-box { margin-top: 32px; max-width: 820px; padding: 22px 24px; border-radius: var(--radius); background: rgba(245, 235, 213, 0.06); border: 1px solid rgba(232, 166, 107, 0.3); }
.answer-box h2 { font-size: 0.78rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--orange); font-weight: 650; }
.answer-box p { margin-top: 10px; font-size: 1.08rem; color: var(--cream); }
.answer-box .answer-price { font-size: 0.95rem; color: var(--muted-on-dark); }

/* ---------- Grids & cards ---------- */
.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card { position: relative; border-radius: var(--radius-lg); padding: clamp(22px, 2.6vw, 30px); background: var(--paper); border: 1px solid var(--line-light); box-shadow: var(--shadow-soft); display: flex; flex-direction: column; gap: 12px; }
.section-paper .card { background: #fff; }
.section-dark .card, .section-deep .card { background: var(--ink-850); border-color: var(--ink-700); box-shadow: var(--shadow-dark); }
.card h3 { font-size: 1.24rem; }
.card p { color: var(--muted-on-light); }
.section-dark .card p, .section-deep .card p { color: var(--muted-on-dark); }
.card-dark { background: var(--ink-900); color: var(--cream); border-color: var(--ink-700); }
.card-dark p { color: var(--muted-on-dark); }
.logo-card { align-items: center; text-align: center; padding: 48px 32px; }
.logo-card .brand-word { font-size: 2.2rem; margin-top: 10px; color: var(--cream); }
.contact-line { display: flex; gap: 10px; align-items: center; font-weight: 600; }
.card .contact-line, .contact-line a { color: var(--accent-on-light); }
.card-icon { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--ink-900); color: var(--gold); }
.card-icon .icon { width: 22px; height: 22px; }
.section-dark .card-icon, .section-deep .card-icon { background: rgba(232, 166, 107, 0.14); color: var(--orange); }
.card a.more { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; text-decoration: none; color: var(--accent-on-light); }
.section-dark .card a.more, .section-deep .card a.more { color: var(--orange); }
.card a.more:hover { text-decoration: underline; }
.card-link { text-decoration: none; transition: transform 0.18s ease, border-color 0.18s ease; }
.card-link:hover { text-decoration: none; transform: translateY(-3px); border-color: var(--orange); }

/* ---------- Loop (audit → fix → monitor) ---------- */
.loop { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; counter-reset: step; position: relative; }
.loop-step { position: relative; padding: 30px 28px 32px; border-top: 1px solid var(--ink-700); }
.loop-step + .loop-step { border-left: 1px solid var(--ink-700); }
.loop-step .num { font-size: 0.78rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--orange); font-weight: 650; display: flex; align-items: center; gap: 10px; }
.loop-step .num .icon { width: 20px; height: 20px; color: var(--gold); }
.loop-step h3 { margin-top: 14px; font-size: 1.6rem; letter-spacing: -0.03em; }
.loop-step p { margin-top: 12px; color: var(--muted-on-dark); }
.loop-step ul { margin-top: 16px; list-style: none; display: grid; gap: 8px; font-size: 0.95rem; color: rgba(245, 235, 213, 0.9); }
.loop-step li { display: flex; gap: 10px; }
.loop-step li .icon { color: var(--orange); margin-top: 0.3em; width: 1em; height: 1em; }
.loop-return { margin-top: 26px; display: flex; align-items: center; gap: 12px; font-size: 0.92rem; color: var(--muted-on-dark); }
.loop-return svg { width: 120px; height: 24px; flex: none; }

/* ---------- Checklists ---------- */
.checklist { list-style: none; display: grid; gap: 12px; }
.checklist li { display: flex; gap: 12px; align-items: flex-start; }
.checklist .icon { margin-top: 0.3em; color: #2f7d5b; width: 1.05em; height: 1.05em; }
.checklist.no .icon { color: var(--accent-on-light); }
.section-dark .checklist .icon, .section-deep .checklist .icon { color: var(--orange); }

/* ---------- Two-column feature rows ---------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); align-items: start; }
.split.v-center { align-items: center; }
.split-wide { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
.split-toc { grid-template-columns: 280px minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); }
.sticky { position: sticky; top: 100px; }
.prose { max-width: 70ch; }
.prose > * + * { margin-top: 1.05em; }
.prose h2 { font-size: clamp(1.6rem, 2.6vw, 2.15rem); margin-top: 2.2em; scroll-margin-top: 96px; }
.prose h3 { font-size: 1.25rem; margin-top: 1.8em; scroll-margin-top: 96px; }
.prose ul, .prose ol { padding-left: 1.3em; display: grid; gap: 0.5em; }
.prose li::marker { color: var(--accent-on-light); }
.prose a { color: var(--accent-on-light); font-weight: 500; }
.prose sup a { text-decoration: none; font-weight: 650; font-size: 0.8em; padding-left: 1px; }
.prose .table-wrap { margin-block: 1.4em; }
.prose .lede { color: var(--muted-on-light); }
.prose table { width: 100%; }
.toc { padding: 22px; border-radius: var(--radius); background: var(--paper); border: 1px solid var(--line-light); }
.toc h2 { font-size: 0.76rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent-on-light); }
.toc ol { margin-top: 12px; list-style: none; display: grid; gap: 4px; counter-reset: toc; }
.toc li { counter-increment: toc; }
.toc a { display: flex; gap: 10px; padding: 6px 8px; border-radius: 8px; text-decoration: none; font-size: 0.94rem; color: var(--ink-900); }
.toc a::before { content: counter(toc, decimal-leading-zero); color: var(--accent-on-light); font-variant-numeric: tabular-nums; font-weight: 600; }
.toc a:hover { background: rgba(23, 24, 69, 0.05); }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--line-light); background: var(--paper); }
table.data { width: 100%; border-collapse: collapse; font-size: 0.96rem; min-width: 560px; }
table.data th, table.data td { padding: 14px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line-light); }
table.data thead th { font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-on-light); background: var(--cream-100); font-weight: 650; }
table.data tbody th { font-weight: 650; width: 28%; }
table.data tr:last-child th, table.data tr:last-child td { border-bottom: 0; }
.section-dark .table-wrap { border-color: var(--ink-700); background: var(--ink-850); }
.section-dark table.data th, .section-dark table.data td { border-color: var(--ink-700); }
.section-dark table.data thead th { background: var(--ink-800); color: var(--muted-on-dark); }

/* ---------- Pricing ---------- */
.price-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.price-card { border-radius: var(--radius-lg); padding: 30px; background: var(--paper); border: 1px solid var(--line-light); box-shadow: var(--shadow-soft); display: flex; flex-direction: column; gap: 16px; }
.price-card.featured { background: var(--ink-900); color: var(--cream); border-color: var(--ink-700); box-shadow: 0 30px 60px -30px rgba(14, 15, 53, 0.65); }
.price-card .tag { align-self: flex-start; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 650; padding: 5px 10px; border-radius: 999px; background: rgba(166, 62, 39, 0.1); color: var(--accent-on-light); }
.price-card.featured .tag { background: rgba(232, 166, 107, 0.16); color: var(--orange); }
.price-card h3, .price-card .h3 { font-size: 1.5rem; }
.h3 { font-size: 1.35rem; }
.price-card .price { font-size: 2rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; }
.price-card .price small { display: block; font-size: 0.86rem; font-weight: 500; letter-spacing: 0; color: var(--muted-on-light); margin-top: 6px; }
.price-card.featured .price small, .price-card.featured p { color: var(--muted-on-dark); }
.price-card p { color: var(--muted-on-light); }
.price-card .checklist { font-size: 0.95rem; }
.price-card.featured .checklist .icon { color: var(--orange); }
.price-card .btn { margin-top: auto; }
.price-lines { list-style: none; display: grid; border-top: 1px solid var(--line-light); }
.price-lines li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line-light); font-size: 0.95rem; }
.price-lines li > span:last-child { text-align: right; white-space: nowrap; }
.price-lines strong { display: block; }
.price-lines small { display: block; font-size: 0.8rem; color: var(--muted-on-light); white-space: normal; }
.price-card.featured .price-lines, .price-card.featured .price-lines li { border-color: rgba(245, 235, 213, 0.16); }
.price-card.featured .price-lines small { color: var(--muted-on-dark); }
.fine { font-size: 0.88rem; color: var(--muted-on-light); }
.section-dark .fine, .price-card.featured .fine { color: var(--muted-on-dark); }
.price-card.featured .btn-primary { background: var(--orange); color: var(--ink-950); }
.placeholder { display: inline-block; padding: 0.05em 0.5em; border-radius: 6px; border: 1.5px dashed currentColor; font-size: 0.82em; font-weight: 650; letter-spacing: 0.02em; color: #b23a1f; background: rgba(248, 112, 96, 0.1); white-space: nowrap; }
.section-dark .placeholder, .section-deep .placeholder, .price-card.featured .placeholder, .site-footer .placeholder, .page-hero .placeholder { color: var(--gold); background: rgba(244, 192, 76, 0.1); }

/* ---------- Callouts ---------- */
.callout { display: flex; gap: 16px; padding: 22px 24px; border-radius: var(--radius); background: var(--paper); border: 1px solid var(--line-light); border-left: 4px solid var(--orange); }
.callout .icon { color: var(--accent-on-light); width: 1.4em; height: 1.4em; margin-top: 0.1em; }
.callout p + p { margin-top: 8px; }
.section-dark .callout { background: var(--ink-850); border-color: var(--ink-700); border-left-color: var(--orange); }
.section-dark .callout .icon { color: var(--orange); }

/* ---------- Metric definitions ---------- */
.metric { padding: 26px; border-radius: var(--radius-lg); background: var(--ink-850); border: 1px solid var(--ink-700); display: grid; gap: 10px; }
.metric h3 { font-size: 1.18rem; display: flex; align-items: center; gap: 10px; }
.metric h3::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--c, var(--orange)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c, var(--orange)) 22%, transparent); }
.metric p { color: var(--muted-on-dark); font-size: 0.97rem; }
.metric .formula { font-size: 0.88rem; padding: 10px 12px; border-radius: 10px; background: var(--ink-950); color: var(--lavender); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; line-height: 1.5; }

/* ---------- Sample scorecard (illustrative) ---------- */
.scorecard { border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--line-light); box-shadow: 0 40px 80px -40px rgba(14, 15, 53, 0.5); overflow: hidden; }
.scorecard-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 22px; background: var(--ink-900); color: var(--cream); font-size: 0.84rem; }
.scorecard-head .tagline { color: var(--gold); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.7rem; }
.scorecard-body { padding: 22px; display: grid; gap: 18px; }
.score-top { display: flex; align-items: flex-end; gap: 18px; flex-wrap: wrap; }
.score-big { font-size: 3.6rem; font-weight: 700; letter-spacing: -0.04em; line-height: 0.9; }
.score-big small { font-size: 1.3rem; color: var(--muted-on-light); font-weight: 600; }
.score-meta { font-size: 0.86rem; color: var(--muted-on-light); max-width: 32ch; }
.bars { display: grid; gap: 10px; }
.bar-row { display: grid; grid-template-columns: 150px 1fr 46px; gap: 12px; align-items: center; font-size: 0.86rem; }
.bar { height: 8px; border-radius: 999px; background: #efe5d1; overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--coral), var(--gold)); }
.bar-row b { text-align: right; font-variant-numeric: tabular-nums; }
.finding { display: grid; gap: 4px; padding: 12px 14px; border-radius: 12px; background: var(--cream-100); border: 1px solid var(--line-light); font-size: 0.86rem; }
.finding .k { font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 650; color: var(--accent-on-light); }
.sample-note { font-size: 0.78rem; color: var(--muted-on-light); padding: 0 22px 18px; }

/* ---------- Timeline ---------- */
.timeline { list-style: none; display: grid; gap: 0; border-left: 2px solid var(--line-light); margin-left: 8px; }
.timeline li { position: relative; padding: 0 0 30px 30px; }
.timeline li::before { content: ""; position: absolute; left: -9px; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--cream); border: 3px solid var(--accent-on-light); }
.timeline .when { font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 650; color: var(--accent-on-light); }
.timeline h3 { margin-top: 6px; font-size: 1.2rem; }
.timeline p { margin-top: 6px; color: var(--muted-on-light); }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 12px; }
.faq details { border-radius: var(--radius); background: var(--paper); border: 1px solid var(--line-light); transition: border-color 0.15s; }
.faq details[open] { border-color: var(--orange); }
.faq summary { list-style: none; cursor: pointer; padding: 20px 22px; display: flex; justify-content: space-between; gap: 16px; align-items: center; font-weight: 600; font-size: 1.06rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--cream); color: var(--ink-900); font-weight: 500; font-size: 1.2rem; transition: transform 0.2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .answer { padding: 0 22px 22px; color: var(--muted-on-light); display: grid; gap: 10px; max-width: 75ch; }
.faq .answer a { color: var(--accent-on-light); }
.faq-group + .faq-group { margin-top: 48px; }
.faq-group > h2 { font-size: 1.4rem; margin-bottom: 16px; }

/* ---------- Sources ---------- */
.sources, .prose .sources { list-style: none; display: grid; gap: 10px; font-size: 0.92rem; padding-left: 0; }
.sources li { display: flex; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--paper); border: 1px solid var(--line-light); }
.sources .icon { color: var(--accent-on-light); margin-top: 0.25em; }
.sources a { color: var(--ink-900); font-weight: 600; }
.sources span { color: var(--muted-on-light); }
.reading li > div { display: grid; gap: 4px; }
.reading .src-meta { font-size: 0.82rem; color: var(--muted-on-light); }
.reading .src-use strong { color: var(--ink-900); font-weight: 600; }

/* ---------- Byline ---------- */
.byline { display: inline-flex; align-items: center; gap: 8px; margin-top: 26px; font-size: 0.86rem; color: var(--muted-on-dark); }
.byline a { color: var(--cream); }
.byline .icon { color: var(--orange); }

/* ---------- Audience cards ---------- */
.audience { position: relative; overflow: hidden; border-radius: var(--radius-lg); padding: clamp(28px, 3.5vw, 40px); display: flex; flex-direction: column; gap: 16px; text-decoration: none; transition: transform 0.18s ease; min-height: 100%; }
.audience:hover { text-decoration: none; transform: translateY(-3px); }
.audience.light { background: var(--paper); border: 1px solid var(--line-light); box-shadow: var(--shadow-soft); }
.audience.dark { background: var(--ink-900); color: var(--cream); border: 1px solid var(--ink-700); }
.audience h3 { font-size: 1.7rem; letter-spacing: -0.03em; }
.audience p { color: var(--muted-on-light); }
.audience.dark p { color: var(--muted-on-dark); }
.audience .more { margin-top: auto; display: inline-flex; gap: 8px; align-items: center; font-weight: 600; color: var(--accent-on-light); }
.audience.dark .more { color: var(--orange); }
.audience .checklist { font-size: 0.97rem; }

/* ---------- Principles strip ---------- */
.principles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--ink-700); }
.principles > div { padding: 26px; background: var(--ink-850); }
.principles > div + div { border-left: 1px solid var(--ink-700); }
.principles h3 { font-size: 1.08rem; color: var(--cream); }
.principles p { margin-top: 8px; font-size: 0.93rem; color: var(--muted-on-dark); }

/* ---------- Forms ---------- */
.form { display: grid; gap: 18px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: grid; gap: 7px; }
.field label { font-weight: 600; font-size: 0.94rem; }
.field .hint { font-size: 0.84rem; color: var(--muted-on-light); }
.field input, .field select, .field textarea { width: 100%; font: inherit; font-size: 1rem; padding: 13px 14px; border-radius: 12px; border: 1px solid #cdbf9f; background: #fff; color: var(--ink-900); transition: border-color 0.15s, box-shadow 0.15s; }
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--ink-900); box-shadow: 0 0 0 4px rgba(108, 99, 255, 0.18); }
.field .req { color: var(--accent-on-light); }
.hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
.form-status { display: none; padding: 14px 16px; border-radius: 12px; font-size: 0.95rem; }
.form-status.is-error { display: block; background: rgba(248, 112, 96, 0.12); border: 1px solid rgba(166, 62, 39, 0.35); color: #7a2a18; }
.form-status.is-ok { display: block; background: rgba(47, 125, 91, 0.1); border: 1px solid rgba(47, 125, 91, 0.35); color: #1e5a40; }
.form-note { font-size: 0.85rem; color: var(--muted-on-light); }
.form-card { padding: clamp(24px, 3.5vw, 40px); border-radius: var(--radius-lg); background: var(--paper); border: 1px solid var(--line-light); box-shadow: var(--shadow-soft); }
.login-card { max-width: 560px; }
.login-card .field input { font-size: 1.1rem; letter-spacing: 0.08em; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* ---------- CTA band ---------- */
.cta-band { background: radial-gradient(700px 360px at 90% 10%, rgba(244, 192, 76, 0.16), transparent 60%), radial-gradient(700px 400px at 0% 100%, rgba(108, 99, 255, 0.2), transparent 60%), var(--ink-900); }
.cta-inner { display: grid; grid-template-columns: minmax(0, 1.4fr) auto; gap: 40px; align-items: center; }
.cta-inner h2 { font-size: clamp(1.9rem, 3.4vw, 2.9rem); margin-top: 16px; max-width: 20ch; }
.cta-inner .lede { margin-top: 16px; }
.cta-actions { display: grid; gap: 12px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink-950); color: var(--cream); padding: 72px 0 32px; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr)); gap: 32px; }
.footer-brand p { margin-top: 16px; font-size: 0.93rem; color: var(--muted-on-dark); max-width: 42ch; }
.footer-brand .footer-contact { display: flex; align-items: center; gap: 10px; margin-top: 10px; color: var(--cream); }
.footer-contact .icon { color: var(--orange); }
.footer-contact a { color: var(--cream); }
.footer-col h2 { font-size: 0.74rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--orange); font-weight: 650; }
.footer-col ul { margin-top: 14px; list-style: none; display: grid; gap: 8px; }
.footer-col a { color: rgba(245, 235, 213, 0.8); text-decoration: none; font-size: 0.94rem; }
.footer-col a:hover { color: var(--cream); text-decoration: underline; }
.footer-base { margin-top: 56px; padding-top: 22px; border-top: 1px solid rgba(245, 235, 213, 0.1); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 0.84rem; color: rgba(199, 210, 254, 0.75); }
.footer-base a { color: rgba(199, 210, 254, 0.9); }

/* ---------- Misc ---------- */
.kicker-list { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; }
.kicker-list li { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line-light); background: var(--paper); font-size: 0.9rem; font-weight: 500; }
.section-dark .kicker-list li { border-color: var(--ink-700); background: var(--ink-850); color: var(--cream); }
.stack > * + * { margin-top: 18px; }
.mt-l { margin-top: clamp(36px, 5vw, 56px); }
.mt-m { margin-top: 28px; }
.center { text-align: center; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; font-size: 0.78rem; font-weight: 600; background: rgba(232, 166, 107, 0.14); color: var(--orange); }
.section-light .pill, .section-paper .pill { background: rgba(166, 62, 39, 0.08); color: var(--accent-on-light); }
.compare-col h3, .compare-col .h3 { display: flex; align-items: center; gap: 10px; font-size: 1.15rem; }
.compare-col .checklist { margin-top: 16px; }
.notfound { min-height: 60vh; display: grid; place-items: center; text-align: center; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
  .principles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .principles > div:nth-child(3) { border-left: 0; }
  .principles > div:nth-child(n + 3) { border-top: 1px solid var(--ink-700); }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .hero-grid, .split, .split-wide, .split-toc, .cta-inner { grid-template-columns: minmax(0, 1fr); }
  .grid-3, .price-grid, .loop { grid-template-columns: minmax(0, 1fr); }
  .loop-step + .loop-step { border-left: 0; }
  .sticky { position: static; }
  .rings { display: none; }
}
@media (max-width: 640px) {
  body { font-size: 1rem; }
  .grid-2, .grid-4, .form-row, .principles { grid-template-columns: minmax(0, 1fr); }
  .principles > div + div { border-left: 0; border-top: 1px solid var(--ink-700); }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bar-row { grid-template-columns: 110px 1fr 40px; }
  .hero-actions .btn, .cta-actions .btn { width: 100%; }
}
/* ---------- Pricing: one column, read top to bottom ---------- */
[hidden] { display: none !important; }
.container-narrow { width: min(880px, 100% - 40px); margin-inline: auto; }
.page-hero-compact { padding-bottom: clamp(44px, 6vw, 72px); }
.page-hero-compact h1 { max-width: none; }
.page-hero-compact .lede { max-width: 760px; }
.pricing-flow .flow-step + .flow-step, .pricing-flow .flow-choose + .flow-step { margin-top: clamp(48px, 7vw, 72px); }
.flow-h { font-size: clamp(1.7rem, 3vw, 2.3rem); margin-top: 10px; }
.flow-p { margin-top: 10px; color: var(--muted-on-light); font-size: 1.04rem; }

/* A list of selectable rows: [control] name + description ...... price */
.pick-list { list-style: none; margin-top: 18px; border: 1px solid var(--line-light); border-radius: 16px; background: #fff; overflow: hidden; }
.pick-list > li + li { border-top: 1px solid var(--line-light); }
.pick-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 4px 16px; align-items: start; padding: 18px 22px; cursor: pointer; transition: background-color 0.12s; }
.pick-row:hover { background: rgba(23, 24, 69, 0.03); }
.pick-row.is-on { background: rgba(232, 166, 107, 0.13); }
.pick-row.is-fixed { cursor: default; }
.pick-row > input { width: 24px; height: 24px; margin: 1px 0 0; accent-color: var(--ink-900); cursor: pointer; }
.pick-check { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-top: 1px; border-radius: 6px; background: var(--ink-900); color: var(--cream); }
.pick-check .icon { width: 14px; height: 14px; stroke-width: 2.6; }
.pick-name { font-weight: 700; font-size: 1.06rem; }
.pick-desc { display: block; margin-top: 3px; font-size: 0.93rem; line-height: 1.5; color: var(--muted-on-light); }
.pick-more { display: block; margin-top: 4px; }
.pick-more a, .pick-group-desc a { display: inline-block; min-height: 24px; padding-block: 2px; font-size: 0.88rem; font-weight: 650; color: var(--accent-on-light); }
.pick-more a::after, .pick-group-desc a::after { content: " →"; }

/* Details page for each service (/services/<slug>/) — one column, read top to bottom */
.detail .toc { margin-bottom: 0.4em; }
.detail .table-wrap { margin-block: 1em; }
table.data.facts { min-width: 0; }
table.data.facts th { width: 32%; }
.prose .checklist { padding-left: 0; }
.steps, .prose .steps { list-style: none; padding-left: 0; counter-reset: step; display: grid; gap: 14px; }
.steps li { counter-increment: step; position: relative; padding-left: 46px; min-height: 32px; }
.steps li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--ink-900); color: var(--cream); font-weight: 650; font-size: 0.92rem; }
.steps strong { display: block; }
.steps span { color: var(--muted-on-light); }
.prose .related-list { list-style: none; padding-left: 0; display: grid; gap: 10px; }
.related-list li { display: grid; gap: 2px; padding: 12px 14px; border-radius: 12px; background: var(--paper); border: 1px solid var(--line-light); }
.related-list a { font-weight: 650; }
.related-list span { color: var(--muted-on-light); font-size: 0.93rem; }
.detail .geo-note { margin-top: 2.4em; }

/* Visual: the AI model map (monitoring pages) — providers top to bottom, models left (fastest) to right (most capable) */
.model-map { margin-top: 1.2em; padding: 18px 18px 16px; border-radius: var(--radius); background: var(--cream-100); border: 1px solid var(--line-light); }
.mm-axis { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 8px; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 650; color: var(--muted-on-light); border-bottom: 3px solid transparent; border-image: linear-gradient(90deg, var(--line-light), var(--ink-900)) 1; }
.mm-axis span:last-child::after { content: " →"; }
.prose .mm-providers { list-style: none; padding-left: 0; display: grid; gap: 0; margin-top: 4px; }
.mm-provider { padding: 16px 0 14px; border-bottom: 1px solid var(--line-light); }
.mm-provider:last-child { border-bottom: 0; padding-bottom: 4px; }
.prose .mm-name { margin-top: 0; font-size: 1.1rem; }
.mm-name span { color: var(--muted-on-light); font-weight: 500; }
.prose .mm-about { margin-top: 4px; font-size: 0.92rem; color: var(--muted-on-light); }
.prose .mm-track { list-style: none; padding-left: 0; margin-top: 10px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: dense; gap: 8px; }
.mm-model { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px; background: #fff; border: 1px solid var(--line-light); }
.mm-model.is-standard { border: 2px solid var(--ink-900); padding: 9px 11px; }
.mm-model.is-muted { background: transparent; border-style: dashed; }
.mm-tier { font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 650; color: var(--muted-on-light); }
.mm-model-name { font-weight: 650; font-size: 0.95rem; line-height: 1.3; color: var(--ink-900); }
.mm-note { font-size: 0.82rem; line-height: 1.3; color: var(--muted-on-light); }
.mm-tag { margin-top: 5px; align-self: flex-start; padding: 2px 8px; border-radius: 999px; font-size: 0.66rem; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; background: var(--ink-900); color: var(--cream); }
.mm-model.is-muted .mm-tag { background: transparent; color: var(--muted-on-light); border: 1px solid var(--line-light); }
.model-map figcaption { margin-top: 12px; font-size: 0.88rem; color: var(--muted-on-light); }
.mm-legend { margin-top: 14px; display: grid; gap: 8px; font-size: 0.92rem; }
.mm-legend div { display: grid; grid-template-columns: 120px 1fr; gap: 12px; }
.mm-legend dt { font-weight: 650; }
.mm-legend dd { color: var(--muted-on-light); }

/* Visual: a page wireframe (website fixes pages) */
.wireframe { margin-top: 1.2em; border-radius: var(--radius); background: var(--cream-100); border: 1px solid var(--line-light); overflow: hidden; }
.wf-frame { display: flex; gap: 6px; padding: 10px 14px; background: #fff; border-bottom: 1px solid var(--line-light); }
.wf-frame span { width: 10px; height: 10px; border-radius: 50%; background: var(--line-light); }
.prose .wf-blocks { list-style: none; padding: 16px; margin: 0; display: grid; gap: 8px; }
.wf-blocks li { display: flex; gap: 12px; align-items: baseline; padding: 12px 14px; border-radius: 10px; font-size: 0.95rem; line-height: 1.45; }
.wf-keep { background: #fff; border: 1px dashed var(--line-light); color: var(--muted-on-light); }
.wf-add { background: #fff; border: 2px solid var(--orange); color: var(--ink-900); padding: 11px 13px !important; }
.wf-label { flex: none; width: 62px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.wf-keep .wf-label { color: var(--muted-on-light); }
.wf-add .wf-label { color: var(--accent-on-light); }
.wireframe figcaption { padding: 0 16px 16px; font-size: 0.9rem; color: var(--muted-on-light); }

/* Visual: a top-to-bottom flow (audit, reputation & reach pages) */
.flow-fig { margin-top: 1.2em; }
.prose .flow-steps { list-style: none; padding-left: 0; margin: 0; display: grid; gap: 34px; }
.flow-step { position: relative; padding: 16px 18px; border-radius: var(--radius); background: var(--cream-100); border: 1px solid var(--line-light); }
.flow-step + .flow-step::before { content: "↓"; position: absolute; top: -30px; left: 50%; transform: translateX(-50%); font-size: 1.2rem; line-height: 1; font-weight: 700; color: var(--accent-on-light); }
.flow-label { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 650; color: var(--accent-on-light); }
.prose .flow-step > p + p { margin-top: 6px; }
.flow-mid { background: var(--ink-900); border-color: var(--ink-900); }
.flow-mid .flow-label { color: var(--orange); }
.flow-mid p:not(.flow-label) { color: var(--cream); }
.prose .flow-chips { list-style: none; padding-left: 0; margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; }
.flow-chips li { padding: 6px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--line-light); font-size: 0.92rem; font-weight: 600; color: var(--ink-900); }
.flow-chips li.is-current { background: var(--ink-900); border-color: var(--ink-900); color: var(--cream); }
.flow-chips a { display: inline-block; min-height: 24px; color: var(--accent-on-light); }
.flow-fig figcaption { margin-top: 12px; font-size: 0.88rem; color: var(--muted-on-light); }
.mm-track .tier-fast { grid-column: 1; }
.mm-track .tier-everyday { grid-column: 2; }
.mm-track .tier-advanced { grid-column: 3; }
.mm-track .tier-top { grid-column: 4; }
@media (max-width: 640px) {
  .prose .mm-track { grid-template-columns: 1fr; }
  .mm-track .mm-model { grid-column: auto !important; }
  .mm-legend div { grid-template-columns: 1fr; gap: 2px; }
  .wf-blocks li { flex-direction: column; gap: 2px; }
}
.pick-price { text-align: right; white-space: nowrap; font-size: 0.95rem; color: var(--muted-on-light); line-height: 1.35; }
.pick-price strong { font-size: 1.15rem; color: var(--ink-900); }
.pick-price small { display: block; font-size: 0.8rem; font-weight: 600; color: var(--accent-on-light); }
.pick-price small:empty { display: none; }
.badge { display: inline-block; margin-left: 6px; padding: 2px 9px; border-radius: 999px; background: var(--ink-900); color: var(--cream); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 650; vertical-align: 2px; white-space: nowrap; }
.badge-muted { background: rgba(23, 24, 69, 0.08); color: var(--muted-on-light); }

/* Categories inside "Adjust your plan" */
.cat { margin-top: 36px; scroll-margin-top: 96px; }
.cat-h { font-size: 1.35rem; padding-bottom: 8px; border-bottom: 2px solid var(--ink-900); }
.cat-p { margin-top: 10px; color: var(--muted-on-light); font-size: 0.97rem; }
.pick-group { border: 0; margin: 22px 0 0; padding: 0; min-width: 0; }
.pick-group legend { padding: 0; font-size: 1.02rem; font-weight: 700; color: var(--ink-900); }
.pick-group-desc { margin-top: 4px; font-size: 0.93rem; line-height: 1.5; color: var(--muted-on-light); max-width: 68ch; }
.pick-group .pick-list { margin-top: 10px; }
.cat-note { margin-top: 10px; font-size: 0.88rem; color: var(--muted-on-light); }

/* Estimate at the end */
.estimate { display: grid; gap: 16px; padding: clamp(24px, 4vw, 36px); border-radius: var(--radius-lg); background: var(--ink-900); color: var(--cream); box-shadow: 0 30px 60px -30px rgba(14, 15, 53, 0.65); scroll-margin-top: 96px; }
.estimate-eyebrow { font-size: 0.74rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--orange); font-weight: 650; }
.estimate-plan { font-size: 1.6rem; }
.estimate-lines { list-style: none; display: grid; gap: 12px; padding: 16px 0; border-top: 1px solid rgba(245, 235, 213, 0.14); border-bottom: 1px solid rgba(245, 235, 213, 0.14); font-size: 0.95rem; line-height: 1.35; }
.estimate-lines li { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
.estimate-lines li > span:first-child { color: var(--muted-on-dark); }
.estimate-lines li > span:first-child small { display: block; margin-bottom: 2px; font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--orange); font-weight: 650; }
.estimate-lines li > span:last-child { white-space: nowrap; font-weight: 600; text-align: right; }
.estimate-monthly { color: var(--muted-on-dark); }
.estimate-monthly strong { font-size: 2.8rem; font-weight: 700; letter-spacing: -0.035em; line-height: 1; color: var(--cream); margin-right: 4px; }
.estimate-sub { margin-top: 4px; color: var(--muted-on-dark); }
.estimate-sub span { color: var(--cream); font-weight: 650; }
.estimate-quote { font-size: 0.9rem; color: var(--muted-on-dark); padding: 10px 12px; border-radius: 10px; background: rgba(245, 235, 213, 0.06); border: 1px dashed rgba(232, 166, 107, 0.45); }
.section-paper .estimate .btn-primary, .section-paper .total-bar .btn-primary { background: var(--orange); color: var(--ink-950); }
.section-paper .estimate .btn-primary:hover, .section-paper .total-bar .btn-primary:hover { background: #f0b783; }
.estimate .btn { justify-self: start; }
.estimate-fine { font-size: 0.84rem; color: var(--muted-on-dark); }

/* Total pinned to the bottom of the screen while choosing */
.total-bar { position: sticky; bottom: 12px; z-index: 20; margin-top: 24px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px 10px 20px; border-radius: 14px; background: var(--ink-900); color: var(--cream); box-shadow: 0 10px 34px -10px rgba(14, 15, 53, 0.6); }
.total-bar { transition: opacity 0.2s ease, transform 0.2s ease; }
.total-bar.is-hidden { opacity: 0; transform: translateY(8px); pointer-events: none; }
.total-bar p { line-height: 1.3; color: var(--muted-on-dark); }
.total-bar strong { font-size: 1.25rem; color: var(--cream); }
.total-bar small { color: var(--muted-on-dark); font-size: 0.85rem; }
#questions .faq { margin-top: 22px; }

@media (max-width: 640px) {
  .pick-row { grid-template-columns: 26px minmax(0, 1fr); padding: 16px; }
  .pick-price { grid-column: 2; text-align: left; white-space: normal; margin-top: 6px; }
  .pick-price small { display: inline; margin-left: 6px; }
  .total-bar .bar-plan { display: none; }
  .total-bar small { display: block; }
  .estimate .btn { justify-self: stretch; }
}

@media print {
  .site-header, .site-footer, .cta-band, .eq-bars { display: none; }
  .hero, .page-hero, .section-dark { background: #fff; color: #000; }
}


/* Rows of links (services hub, home page): name and description on the left, price on the right */
.row-list, .prose .row-list { list-style: none; padding-left: 0; display: grid; gap: 10px; }
.row-link { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 24px; align-items: start; padding: 16px 18px; border-radius: 14px; background: #fff; border: 1px solid var(--line-light); color: var(--ink-900); text-decoration: none; transition: border-color 0.15s ease; }
.prose .row-link { color: var(--ink-900); font-weight: 400; }
.row-link:hover { border-color: var(--accent-on-light); }
.row-name { font-weight: 700; font-size: 1.04rem; }
.row-name::after { content: " →"; color: var(--accent-on-light); }
.row-desc { display: block; margin-top: 3px; font-size: 0.94rem; line-height: 1.5; color: var(--muted-on-light); }
.row-side { max-width: 240px; text-align: right; font-size: 0.9rem; font-weight: 650; line-height: 1.4; color: var(--ink-900); }
.row-list-dark .row-link { background: var(--ink-850); border-color: var(--ink-700); color: var(--cream); }
.row-list-dark .row-link:hover { border-color: var(--orange); }
.row-list-dark .row-name::after { color: var(--orange); }
.row-list-dark .row-desc { color: var(--muted-on-dark); }
.row-list-dark .row-side { color: var(--cream); }
@media (max-width: 640px) {
  .row-link { grid-template-columns: 1fr; }
  .row-side { max-width: none; text-align: left; }
}

/* Services hub */
.hub-cat { scroll-margin-top: 96px; }
.prose .hub-cat { margin-top: 2.6em; }
.prose .hub-cat > * + * { margin-top: 0.9em; }
.prose .hub-cat h2 { margin-top: 0.2em; }
.prose .hub-cat h3 { margin-top: 1.4em; font-size: 1.05rem; }
.hub-num { font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; color: var(--accent-on-light); }
.prose .hub-note { font-size: 0.92rem; color: var(--muted-on-light); }


/* Home page — one column, top to bottom */
.hero-one .container-narrow { position: relative; }
.hero-one h1 { font-size: clamp(2.3rem, 5vw, 4.1rem); text-wrap: balance; }
.hero-one h1 em { display: block; }
.hero-one .answer-box { max-width: none; }
.hero-one .signal { margin-top: clamp(36px, 5vw, 52px); }
.home-col > * + * { margin-top: 18px; }
.home-col > .eyebrow + .h2 { margin-top: 10px; }
.home-col > .h2 + .lede { margin-top: 16px; }
.home-col > .row-list, .home-col > .faq, .home-col > .home-cats, .home-col > .steps, .home-col > .model-lines, .home-col > .home-points, .home-col > .table-wrap { margin-top: 28px; }
.home-col > p:last-child { margin-top: 28px; }
.home-points { font-size: 1.02rem; }
.home-points strong { color: inherit; }
.section-deep .home-points span { color: var(--cream); }
.section-deep .home-points strong { color: var(--cream); }
.home-cats { list-style: none; padding: 0; display: grid; gap: 14px; }
.home-cat { padding: 20px 22px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line-light); display: grid; gap: 6px; }
.home-cat h3 { font-size: 1.3rem; }
.home-cat h3 a { color: var(--ink-900); text-decoration: none; }
.home-cat h3 a::after { content: " →"; color: var(--accent-on-light); }
.home-cat h3 a:hover { text-decoration: underline; }
.home-cat > p:not(.hub-num):not(.home-price) { color: var(--muted-on-light); }
.home-price { font-size: 0.92rem; font-weight: 650; color: var(--ink-900); }
.home-links { list-style: none; padding: 0; margin-top: 4px; display: flex; flex-wrap: wrap; gap: 8px; }
.home-links a { display: inline-block; min-height: 24px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line-light); font-size: 0.9rem; font-weight: 600; color: var(--accent-on-light); text-decoration: none; }
.home-links a:hover { border-color: var(--accent-on-light); }
.model-lines { list-style: none; padding: 0; display: grid; gap: 10px; }
.model-lines li { display: grid; gap: 4px; padding: 14px 18px; border-radius: 14px; background: var(--ink-850); border: 1px solid var(--ink-700); }
.ml-provider { font-weight: 700; color: var(--cream); }
.ml-provider span { font-weight: 500; color: var(--muted-on-dark); }
.ml-models { color: var(--muted-on-dark); font-size: 0.95rem; }
.ml-models strong { color: var(--cream); }
.ml-tag { display: inline-block; margin-left: 2px; padding: 1px 8px; border-radius: 999px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; background: var(--orange); color: var(--ink-950); vertical-align: 1px; }
.section-dark .steps span, .section-deep .steps span { color: var(--muted-on-dark); }


/* Tone chart (home page) — 100% stacked bars, warmest first. Ramp validated (one hue, monotone, light end 2.08:1 on
   white); "not named" is a striped texture so it never relies on color alone. */
.home-h3 { font-size: clamp(1.35rem, 2.2vw, 1.7rem); }
.home-col > .home-h3 { margin-top: 44px; }
.home-col > .tone-fig { margin-top: 22px; }
.tone-fig { padding: 20px 22px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line-light); display: grid; gap: 14px; }
.tone-title { font-weight: 700; font-size: 1.08rem; color: var(--ink-900); }
.tone-sub { margin-top: -8px; font-size: 0.92rem; color: var(--muted-on-light); }
.tone-legend { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 0.86rem; color: var(--ink-900); }
.tone-legend li { display: inline-flex; align-items: center; gap: 7px; }
.tone-key { width: 14px; height: 14px; border-radius: 3px; flex: none; }
.tone-key.t-none { box-shadow: inset 0 0 0 1px #c9c1b1; }
.tone-rows { display: grid; gap: 16px; }
.tone-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font-size: 0.95rem; }
.tone-name strong { color: var(--ink-900); }
.tone-name span { color: var(--muted-on-light); font-size: 0.9rem; }
.tone-bar { display: flex; gap: 2px; height: 24px; margin-top: 6px; border-radius: 4px; overflow: hidden; background: #fff; }
.tone-seg { flex-basis: 0; min-width: 0; display: flex; align-items: center; padding-inline: 8px; }
.tone-seg b { font-size: 0.78rem; font-weight: 700; line-height: 1; }
.t-top { background: #171845; }
.t-top b { color: #fff; }
.t-recommended { background: #4a4390; }
.t-favourable { background: #7d76c4; }
.t-passing { background: #b3aee6; }
.t-none { background: repeating-linear-gradient(135deg, #d9d2c4 0 3px, #ffffff 3px 7px); }
.t-none b { padding: 3px 6px; border-radius: 4px; background: #fff; color: var(--ink-900); }
.tone-numbers summary { cursor: pointer; font-size: 0.9rem; font-weight: 650; color: var(--accent-on-light); min-height: 24px; display: inline-flex; align-items: center; }
.tone-numbers .table-wrap { margin-top: 10px; }
.tone-numbers table.data { min-width: 0; }
.tone-numbers th small { display: block; font-weight: 400; font-size: 0.82rem; color: var(--muted-on-light); }
.tone-numbers td { font-variant-numeric: tabular-nums; }
.tone-fig figcaption { font-size: 0.86rem; color: var(--muted-on-light); }


/* Model tree (Services page): apps across the top, their models below like a table of contents. The two radios are
   siblings of the tree so the switch works with CSS alone: Standard highlights each app's everyday model, Deep every model. */
.model-tree { margin-top: 1.2em; padding: 20px 22px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line-light); display: grid; gap: 14px; }
.prose .model-tree > * + * { margin-top: 0; }
.mt-title { font-weight: 700; font-size: 1.08rem; color: var(--ink-900); }
.prose .mt-intro { font-size: 0.95rem; color: var(--muted-on-light); }
.mt-body { position: relative; display: grid; gap: 16px; }
.mt-radio { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.mt-switch { display: flex; flex-wrap: wrap; gap: 8px; }
.mt-switch label { flex: 1 1 220px; display: grid; gap: 2px; padding: 10px 14px; border-radius: 12px; border: 2px solid var(--line-light); background: var(--cream-100); cursor: pointer; color: var(--ink-900); }
.mt-switch label span { font-size: 0.86rem; color: var(--muted-on-light); }
#mt-standard:checked ~ .mt-switch label[for="mt-standard"], #mt-deep:checked ~ .mt-switch label[for="mt-deep"] { border-color: var(--ink-900); background: var(--ink-900); color: var(--cream); }
#mt-standard:checked ~ .mt-switch label[for="mt-standard"] span, #mt-deep:checked ~ .mt-switch label[for="mt-deep"] span { color: var(--muted-on-dark); }
#mt-standard:focus-visible ~ .mt-switch label[for="mt-standard"], #mt-deep:focus-visible ~ .mt-switch label[for="mt-deep"] { outline: 3px solid var(--accent-on-light); outline-offset: 2px; }
.prose .mt-tree { list-style: none; padding-left: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.mt-app { display: grid; gap: 1px; padding: 10px 12px; border-radius: 12px; background: var(--ink-900); color: var(--cream); }
.mt-app strong { font-size: 1.02rem; }
.mt-app span { font-size: 0.78rem; color: var(--muted-on-dark); }
.prose .mt-models { list-style: none; padding: 0 0 0 16px; margin: 0 0 0 12px; display: block; }
.mt-model { position: relative; padding: 5px 0; }
.mt-model::before { content: ""; position: absolute; left: -16px; top: 0; bottom: 0; border-left: 2px solid var(--line-light); }
.mt-model:last-child::before { bottom: 50%; }
.mt-model::after { content: ""; position: absolute; left: -16px; top: 50%; width: 12px; border-top: 2px solid var(--line-light); }
.mt-chip { display: grid; gap: 1px; padding: 7px 10px; border-radius: 10px; border: 1px dashed var(--line-light); background: #fff; color: var(--muted-on-light); }
.mt-name { font-weight: 650; font-size: 0.92rem; line-height: 1.25; }
.mt-tier { font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 650; }
.mt-note { font-size: 0.8rem; line-height: 1.3; }
#mt-standard:checked ~ .mt-tree .mt-model.is-standard .mt-chip, #mt-deep:checked ~ .mt-tree .mt-chip { border: 1px solid var(--orange); background: var(--orange); color: var(--ink-950); }
.model-tree figcaption { font-size: 0.86rem; color: var(--muted-on-light); }
@media (max-width: 760px) {
  .prose .mt-tree { grid-template-columns: 1fr; }
}


/* Question ladder (home page, top): three questions with more and more detail, the businesses each answer names. */
.ql-head { font-size: clamp(1.55rem, 3.2vw, 2.15rem); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; color: var(--cream); }
.ql-head em { display: block; font-style: normal; color: var(--gold); }
.ql-sub { margin-top: 10px; max-width: 60ch; font-size: 1.05rem; line-height: 1.5; color: var(--muted-on-dark); }
.ql-label { margin-top: 22px; padding-top: 16px; border-top: 1px solid rgba(245, 235, 213, 0.14); }
.ql .signal-label { flex-wrap: wrap; gap: 4px 12px; }
.ql-title { margin-top: 8px; font-size: 1.1rem; font-weight: 700; line-height: 1.35; color: var(--cream); }
.ql-steps { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 12px; }
.ql-step { display: grid; grid-template-columns: 104px minmax(0, 1fr); border-radius: 14px; overflow: hidden; background: rgba(245, 235, 213, 0.04); border: 1px solid rgba(245, 235, 213, 0.1); }
.ql-num { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 14px 8px; background: var(--ink-950); text-align: center; font-size: 0.66rem; line-height: 1.3; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 650; color: var(--muted-on-dark); }
.ql-num span { font-size: 1.9rem; line-height: 1; letter-spacing: 0; font-weight: 700; color: var(--gold); }
.ql-body { display: grid; gap: 8px; padding: 14px 16px; }
.ql-q { display: flex; gap: 10px; align-items: flex-start; font-size: 0.98rem; font-weight: 600; line-height: 1.45; color: var(--cream); }
.ql-q .icon { flex: none; margin-top: 0.2em; color: var(--gold); }
.ql-count { font-size: 0.86rem; color: var(--muted-on-dark); }
.ql-count strong { font-size: 1rem; color: var(--gold); }
.ql-firms { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ql-firms li { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; font-size: 0.82rem; font-weight: 600; line-height: 1.35; }
.ql-firms .is-named { background: var(--cream); color: var(--ink-900); }
.ql-firms .is-top { background: var(--gold); color: var(--ink-950); }
.ql-firms .is-out { border: 1px dashed rgba(199, 210, 254, 0.35); color: #9a9dcc; font-weight: 500; }
.ql-firms .is-out s { text-decoration-thickness: 1.5px; }
.ql-badge { white-space: nowrap; padding: 1px 7px; border-radius: 999px; background: var(--ink-900); color: var(--gold); font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; }
.ql-why { font-size: 0.86rem; line-height: 1.45; color: var(--muted-on-dark); }
.ql-takeaway { margin-top: 16px; padding: 14px 16px; border-left: 3px solid var(--gold); border-radius: 0 12px 12px 0; background: rgba(244, 192, 76, 0.08); font-size: 0.95rem; line-height: 1.55; color: var(--cream); }
@media (max-width: 560px) {
  .ql-step { grid-template-columns: 1fr; }
  .ql-num { flex-direction: row; justify-content: flex-start; gap: 10px; padding: 8px 14px; }
  .ql-num span { font-size: 1.3rem; }
  .ql-body { padding: 12px 14px; }
}

/* Citation rate by service (home page): two companies, the same four services — each service its own block with both
   companies' rows together: how often AI names it (0–100%) and, to the right, the GEO audit score of its page (0–10). */
.home-col > .cite-fig { margin-top: 22px; }
.cite-fig { padding: 22px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line-light); display: grid; gap: 16px; --cite-label: 150px; --cite-gap: 16px; }
.cite-kicker { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 650; color: var(--accent-on-light); }
.cite-title { margin-top: -8px; font-weight: 700; font-size: 1.22rem; line-height: 1.3; color: var(--ink-900); }
.cite-sub { margin-top: -6px; font-size: 0.95rem; color: var(--muted-on-light); }
.cite-key-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.cite-key-list li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line-light); border-left: 5px solid var(--co); }
.cite-key-list li > span:last-child { display: grid; gap: 1px; }
.cite-key-list strong { font-size: 1rem; color: var(--ink-900); }
.cite-key-list li > span:last-child > span { font-size: 0.88rem; color: var(--muted-on-light); }
.cite-key-list .cite-key { margin-top: 4px; background: var(--co); }
.cite-key { display: inline-block; width: 12px; height: 12px; border-radius: 3px; flex: none; }
/* One grid for the header, every row and the scale, so the columns line up all the way down. */
/* The two measures get equal widths, each drawn from zero to its full scale, so a big gap looks big in both. */
.cite-head, .cite-row, .cite-scale { display: grid; grid-template-columns: var(--cite-label) minmax(0, 1fr) minmax(0, 1fr); align-items: center; column-gap: var(--cite-gap); }
.cite-head, .cite-scale { padding-inline: 15px; }
.cite-head { padding-inline: 14px; }
/* The column headers: the chart's first row, in the same cream, border and ink as the service blocks below it, with
   a heavier bottom rule so it reads as the header of the same table. */
.cite-head { align-items: center; margin-bottom: -2px; padding-block: 12px; border-radius: 12px; background: var(--cream-100); border: 1px solid var(--line-light); border-bottom: 2px solid var(--ink-900); color: var(--ink-900); font-size: 1rem; font-weight: 700; line-height: 1.25; }
.cite-head > span:first-child { font-size: 0.86rem; font-weight: 650; color: var(--muted-on-light); }
.cite-head > span:last-child { border-left: 1px solid var(--line-light); }
.cite-head .nw { white-space: nowrap; }
.cite-head small { display: block; margin-top: 2px; font-size: 0.8rem; font-weight: 500; color: var(--muted-on-light); }
.cite-head > span:last-child, .cite-scale > span:last-child { padding-left: var(--cite-gap); }
.cite-chart { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.cite-group { padding: 12px 14px 10px; border-radius: 12px; background: var(--cream-100); border: 1px solid var(--line-light); }
.cite-svc { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding-bottom: 8px; margin-bottom: 6px; border-bottom: 1px solid var(--line-light); }
.cite-svc strong { font-size: 1.08rem; font-weight: 700; color: var(--ink-900); }
.cite-num { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--ink-900); color: var(--cream); font-size: 0.78rem; font-weight: 700; }
.cite-lead { font-size: 0.82rem; font-weight: 650; color: var(--accent-on-light); }
.cite-pair { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.cite-who { display: grid; gap: 0; }
.cite-name { display: inline-flex; align-items: center; gap: 7px; font-size: 0.92rem; font-weight: 650; color: var(--ink-900); }
.cite-page { display: inline-flex; align-items: center; gap: 4px; padding-left: 19px; font-size: 0.76rem; line-height: 1.3; color: var(--muted-on-light); }
.cite-page .icon { width: 13px; height: 13px; flex: none; }
.cite-page.is-full { color: var(--ink-900); }
.cite-track { display: flex; align-items: center; gap: 8px; height: 36px; background-image: linear-gradient(to right, #e6dcc6 1px, transparent 1px); background-size: 25% 100%; border-right: 1px solid #e6dcc6; }
.cite-bar { height: 22px; border-radius: 0 4px 4px 0; flex: none; }
.cite-val { font-size: 1rem; font-weight: 700; color: var(--ink-900); font-variant-numeric: tabular-nums; }
.cite-score { display: flex; align-items: center; gap: 8px; height: 36px; padding-left: var(--cite-gap); border-left: 1px solid var(--line-light); }
.cite-score-track { flex: 1; height: 18px; border-radius: 4px; background: #e9e1cf; overflow: hidden; }
.cite-score-bar { display: block; height: 100%; border-radius: 0 4px 4px 0; }
.cite-score-val { width: 2.2em; font-size: 0.95rem; font-weight: 700; color: var(--ink-900); font-variant-numeric: tabular-nums; text-align: right; }
.cite-score-val.is-low { color: var(--accent-on-light); }
.cite-scale { margin-top: -8px; }
.cite-ticks { display: flex; justify-content: space-between; font-size: 0.72rem; color: var(--muted-on-light); }
.cite-scale > span:nth-child(2) span:last-child { transform: translateX(6px); }
.cite-scale > span:last-child { padding-right: calc(2.2em + 8px); }
.cite-takeaway { padding: 14px 16px; border-left: 3px solid var(--ink-900); border-radius: 0 12px 12px 0; background: var(--cream-100); font-size: 0.97rem; line-height: 1.55; color: var(--ink-900); }
.cite-fig figcaption { font-size: 0.86rem; color: var(--muted-on-light); }
.cite-fig .tone-numbers th small { display: block; font-weight: 400; font-size: 0.8rem; color: var(--muted-on-light); }
/* Phone: the company label gets its own line; the two measures share the row beneath it. */
@media (max-width: 600px) {
  .cite-fig { padding: 16px; --cite-gap: 10px; }
  .cite-head, .cite-row, .cite-scale { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cite-ticks .is-quarter { display: none; }
  .cite-head > span:first-child, .cite-scale > span:first-child { display: none; }
  .cite-who { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin-top: 4px; }
  .cite-page { padding-left: 0; font-size: 0.72rem; }
  .cite-head, .cite-scale { padding-inline: 11px; }
  .cite-group { padding: 10px 10px 8px; }
  .cite-track, .cite-score { height: 30px; }
  .cite-bar { height: 18px; }
  .cite-head { font-size: 0.84rem; }
  .cite-head small { font-size: 0.7rem; }
  .cite-val, .cite-score-val { font-size: 0.9rem; }
}

/* Step labels (How it works): big enough to read as the start of a section. */
.step-tag { display: inline-flex; align-items: center; gap: 12px; font-size: 1.35rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; color: var(--accent-on-light); }
.step-tag span { padding: 5px 14px; border-radius: 999px; background: var(--ink-900); color: var(--cream); font-size: 0.95rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.section-dark .step-tag { color: var(--orange); }
.section-dark .step-tag span { background: var(--orange); color: var(--ink-950); }
.step-tag + .h2 { margin-top: 14px; }
.card h3 a { color: inherit; text-decoration: none; }
.card h3 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.card h3 a .icon { width: 16px; height: 16px; margin-left: 4px; vertical-align: -2px; color: var(--accent-on-light); }
.section-dark .card h3 a .icon { color: var(--orange); }