/* Hallmark · shape: Narrative Workflow · genre: editorial · theme: Editorial (deal 2/3, seed one-page-google-ads-specialist-dbdd·8aaf943f·2026-11-09·r0) · job: hire · draw: 56b905
 * hero: Ledge · nav: masthead · footer: statement · imagery: none, the product built (one real account chart, anonymised) · signature: one client account, annotated: tap a dot to see what I changed and what followed
 * axes: light/serif-display/portal-mint · posture: restrained (near-black ink, mint signal on the chart and focus) · brand: Vertically Media logo, portal palette (client-portal/app/globals.css) · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · adapted 2026-11-11 by request: serif heads in the FT manner and the portal's near-black and mint, kept slightly apart from the portal. The user's words beat the Editorial theme's no-serif-head rule; Bricolage stays for small labels, which Max likes */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V4 · weakest: P, a specialist page can drift to a list of services; the hero argues with a real account and the stages say how working together goes */
/* Hallmark · dismissed 59 · ten sections because Max asked for each of the sales, Vertically AI, asking-AI-yourself, portal and experience sections by name; each holds one idea */
/* Hallmark · dismissed 46a · every figure in the results and quotes is sourced in proof/wins-candidates.md and the client files (CaterCombi call notes 12 Oct 2026, lines 49 to 53) */
/* Hallmark · dismissed 58 · the 92-word window is the client index, four verbatim client quotes that cannot be trimmed without changing their words */
@import url("./tokens.css");
@import url("./base.css");

/* Brand override of the Editorial palette, from .hallmark/brand-spec.md (logo source files) */
:root {
  /* Near the portal (#f8f9fb paper, #111 ink, #4AEDC4 mint), a touch warmer in the ink so it reads as print */
  --color-paper: oklch(98.2% 0.004 250); --color-paper-2: oklch(96.2% 0.005 250); --color-paper-3: oklch(93.5% 0.007 255);
  --color-ink: oklch(19% 0.014 262); --color-ink-2: oklch(31% 0.014 262); --color-muted: oklch(51% 0.020 262);
  --color-rule: oklch(91.5% 0.007 265); --color-rule-2: oklch(70% 0.012 262);
  --color-accent: oklch(50% 0.095 172); --color-accent-ink: oklch(98% 0.004 250); --color-focus: oklch(53% 0.115 172);
  --color-mint: oklch(85.2% 0.146 172.2); --color-mint-wash: oklch(95.2% 0.042 174);
  --font-head: "Source Serif 4", ui-serif, Georgia, serif;
}

body { color: var(--color-ink-2); font-optical-sizing: auto; font-variant-numeric: oldstyle-nums; font-size: 1.125rem; }
h1, h2, h3 { font-family: var(--font-head); font-weight: 600; font-variation-settings: "opsz" 60; letter-spacing: -0.018em; color: var(--color-ink); font-variant-numeric: lining-nums proportional-nums; }
h1 { line-height: 1; font-size: clamp(2.75rem, 4.6vw + 0.5rem, 5.5rem); max-width: 16ch; }
h2 { line-height: 1.05; font-size: var(--text-display-s); }
small, figcaption, th, nav, label, legend, .btn, .tag, .meta, dt { font-family: var(--font-display); font-weight: 500; font-variation-settings: "opsz" 12; font-variant-numeric: lining-nums tabular-nums; }
.lead { font-family: var(--font-body); color: var(--color-ink); }
a { text-decoration-color: var(--color-rule-2); text-underline-offset: 0.2em; transition: text-decoration-color var(--dur-short) var(--ease-out); }
a:hover { text-decoration-color: var(--color-accent); }

.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); background: var(--color-ink); color: var(--color-paper); }
.skip:focus-visible { top: var(--space-md); }

/* Controls */
.btn { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 48px; padding: 0 var(--space-lg); border: var(--rule-hair) solid var(--color-ink); border-radius: 0; background: var(--color-ink); color: var(--color-paper); font-size: var(--text-md); line-height: 1; white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn:hover { background: var(--color-ink-2); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn--quiet { background: transparent; color: var(--color-ink); }
.btn--quiet:hover { background: var(--color-paper-2); }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }

/* Masthead */
.masthead { border-bottom: var(--rule-hair) solid var(--color-rule-2); }
.masthead .container { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; min-height: 80px; gap: var(--space-lg); }
.masthead .who { font-size: var(--text-sm); color: var(--color-muted); }
.masthead .logo { display: block; width: 188px; }
.masthead .logo img { width: 100%; height: auto; }
.masthead .contact { justify-self: end; font-size: var(--text-sm); }

/* Hero: Ledge, the account chart is the field, the head rests at its base */
.hero { min-height: calc(100dvh - 81px); display: grid; grid-template-rows: minmax(0, 1fr) auto; padding-block: var(--space-lg) var(--space-xl); }
.hero .container { display: grid; }
.hero__field { order: -1; align-self: stretch; display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); grid-template-areas: "head note" "plot note" "cap note"; gap: var(--space-sm) var(--space-2xl); align-items: end; }
.hero__field > svg { grid-area: plot; }
.hero__field > .note { grid-area: note; align-self: center; }
.hero__field > figcaption { grid-area: cap; }
.hero__base { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-2xl); align-items: end; border-top: var(--rule-heavy) solid var(--color-ink); padding-top: var(--space-lg); margin-top: var(--space-lg); }
.hero__base .lead { margin-bottom: var(--space-lg); }

.chart { margin: 0; min-width: 0; }
.chart svg { width: 100%; height: auto; max-height: 40dvh; overflow: visible; display: block; }
.chart .grid line { stroke: var(--color-rule); stroke-width: 1; }
.chart .grid line.base { stroke: var(--color-ink); }
.chart .chart-head { grid-area: head; }
.chart .chart-title { font: 600 var(--text-title)/1.2 var(--font-head); font-variation-settings: "opsz" 32; color: var(--color-ink); }
.chart .chart-sub { font-size: var(--text-sm); color: var(--color-muted); font-family: var(--font-display); font-weight: 500; font-variation-settings: "opsz" 12; margin-top: var(--space-2xs); }
.chart .axis text { fill: var(--color-muted); font: 500 13px var(--font-display); font-variation-settings: "opsz" 12; }
.chart .area { fill: var(--color-mint-wash); }
.chart .line { fill: none; stroke: var(--color-accent); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.chart .line--spend { stroke: var(--color-rule-2); stroke-width: 2; }
.chart .legend { list-style: none; margin: 0 0 var(--space-2xs); padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-lg); color: var(--color-ink); }
.chart .legend li { display: inline-flex; align-items: center; gap: var(--space-xs); }
.chart .sw { display: inline-block; width: 18px; height: 3px; flex-shrink: 0; }
.chart .sw--value { background: var(--color-accent); }
.chart .sw--spend { background: var(--color-rule-2); }
.chart .pin { cursor: pointer; }
.chart .pin circle { fill: var(--color-ink); stroke: var(--color-paper); stroke-width: 2; transition: transform var(--dur-short) var(--ease-out); transform-box: fill-box; transform-origin: center; }
.chart .pin .hit { fill: transparent; stroke: none; }
.chart .pin:hover circle.dot, .chart .pin[aria-pressed="true"] circle.dot { transform: scale(1.35); }
.chart .pin[aria-pressed="true"] circle.dot { fill: var(--color-mint); stroke: var(--color-ink); }
.chart .pin:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.chart .pin:focus-visible circle.dot { stroke: var(--color-focus); stroke-width: 3; }
.chart .pin .tag-num { fill: var(--color-paper); font: 500 12px var(--font-display); pointer-events: none; }
.chart .pin[aria-pressed="true"] .tag-num { fill: var(--color-ink); }
.chart figcaption { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); max-width: 62ch; }

.note { border-top: var(--rule-hair) solid var(--color-rule-2); padding-top: var(--space-md); min-height: 12rem; }
.note .meta { font-size: var(--text-sm); color: var(--color-muted); margin-top: var(--space-sm); }
.note .note-title { font: 600 var(--text-title)/1.2 var(--font-head); font-variation-settings: "opsz" 32; color: var(--color-ink); margin-bottom: var(--space-sm); }
.note p { font-size: var(--text-md); }
.note .stepper { display: flex; gap: var(--space-xs); margin-top: var(--space-md); }
.note .stepper .btn { min-height: 44px; padding: 0 var(--space-md); }
html:not(.js) .note .stepper { display: none; }

/* Sections */
.section { padding-block: var(--section-gap) 0; }
.section--s { padding-block: var(--section-gap-s) 0; }
.section--l { padding-block: var(--section-gap-l) 0; }
.section--apart { padding-top: calc(var(--section-gap-l) + var(--space-3xl)); }
.opens { border-top: var(--rule-heavy) solid var(--color-ink); padding-top: var(--space-lg); }
.head { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--gap-columns); align-items: end; margin-bottom: var(--space-2xl); }
.head .lead { color: var(--color-ink-2); }

/* What I help with: rows */
.rows { list-style: none; margin: 0; padding: 0; }
.rows li { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap-columns); align-items: baseline; padding-block: var(--space-xl); border-top: var(--rule-hair) solid var(--color-rule); }
.rows li:last-child { border-bottom: var(--rule-hair) solid var(--color-rule); }
.rows h3 { font-size: clamp(1.375rem, 1vw + 1rem, 2rem); line-height: 1.1; }
.rows p { color: var(--color-ink-2); }

/* Who I work with: index */
.index { width: 100%; border-collapse: collapse; border-top: var(--rule-hair) solid var(--color-rule-2); }
.index th { text-align: left; font-size: var(--text-sm); color: var(--color-muted); font-weight: 500; padding: 0 var(--space-md) var(--space-sm) 0; border-bottom: var(--rule-hair) solid var(--color-rule-2); white-space: nowrap; }
.index td { padding: var(--space-2xl) var(--space-md) var(--space-2xl) 0; border-bottom: var(--rule-hair) solid var(--color-rule); vertical-align: baseline; }
.index td.name { font-family: var(--font-head); font-weight: 600; font-variation-settings: "opsz" 32; color: var(--color-ink); font-size: var(--text-title); line-height: 1.1; }
.index td.result { color: var(--color-ink); }
.index td.meta { font-size: var(--text-sm); color: var(--color-muted); white-space: nowrap; }

/* Client words */
.index td.result small { display: block; margin-top: var(--space-xs); color: var(--color-muted); font-style: normal; }
.index td.result { font: italic 400 var(--text-lead)/1.4 var(--font-body); }
.index td.name { width: 26%; } .index td.meta { width: 16%; white-space: normal; }
.pull { margin: 0; padding: var(--space-xl); background: var(--color-paper-2); border-top: var(--rule-hair) solid var(--color-rule-2); display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-xl); min-height: 360px; }
.pull p { font: italic 400 clamp(1.375rem, 1vw + 1rem, 2rem)/1.3 var(--font-body); color: var(--color-ink); hanging-punctuation: first; max-width: 45ch; }
.pull footer { font-size: var(--text-sm); color: var(--color-muted); font-family: var(--font-display); font-weight: 500; font-variation-settings: "opsz" 12; }
.pull footer b { display: block; color: var(--color-ink); font-weight: 500; }
.words { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-2xl) var(--gap-columns); margin-top: var(--space-3xl); }
.words blockquote { margin: 0; display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-lg); }
.words blockquote p { font: italic 400 var(--text-lead)/1.45 var(--font-body); color: var(--color-ink); hanging-punctuation: first; }
.words blockquote.lead-quote p { font-size: clamp(1.5rem, 1.1vw + 1.1rem, 2.125rem); line-height: 1.3; }
.words .stack { display: grid; gap: var(--space-2xl); align-content: start; }
.words footer { font-size: var(--text-sm); color: var(--color-muted); }
.words footer b { color: var(--color-ink); font-weight: 500; display: block; }

/* Working together: the stages */
.stages { list-style: none; margin: 0; padding: 0; counter-reset: stage; }
.stage { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl) var(--gap-columns); padding-block: var(--space-4xl); border-top: var(--rule-hair) solid var(--color-rule-2); counter-increment: stage; }
.stage:first-child { border-top: 0; padding-top: 0; }
.stage h3 { font-size: var(--text-section); line-height: 1.05; max-width: 13ch; }
.stage h3::before { content: counter(stage) ". "; }
.stage .copy h3 { margin-bottom: var(--space-lg); }
.stage .copy p + p { margin-top: var(--space-md); }
.stage .copy p { max-width: 46ch; }

/* The health check */
.check { background: var(--color-paper-2); border-top: var(--rule-hair) solid var(--color-rule-2); padding: var(--space-xl); min-height: 520px; display: grid; grid-template-rows: auto 1fr auto; gap: var(--space-lg); }
.check .progress { display: flex; justify-content: flex-end; font-size: var(--text-sm); color: var(--color-muted); }
.check fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.check legend { font: 600 var(--text-title)/1.2 var(--font-head); font-variation-settings: "opsz" 32; color: var(--color-ink); padding: 0; margin-bottom: var(--space-sm); max-width: 32ch; text-wrap: balance; }
.check .why { font-size: var(--text-md); color: var(--color-ink-2); margin-bottom: var(--space-lg); max-width: 52ch; }
.check .opts { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.check .opts input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.check .opts label { display: inline-flex; align-items: center; min-height: 48px; padding: 0 var(--space-lg); border: var(--rule-hair) solid var(--color-rule-2); background: var(--color-paper); color: var(--color-ink); cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out); }
.check .opts label:hover { background: var(--color-paper-3); }
.check .opts input:checked + label { background: var(--color-ink); color: var(--color-paper); border-color: var(--color-ink); }
.check .opts input:focus-visible + label { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.check .nav { display: flex; gap: var(--space-xs); justify-content: space-between; }
html.js .check [data-q]:not(.is-current) { display: none; }
html:not(.js) .check .nav, html:not(.js) .check .progress { display: none; }
html:not(.js) .check [data-q] + [data-q] { margin-top: var(--space-xl); }
.result h4 { font: 600 var(--text-section)/1.05 var(--font-head); font-variation-settings: "opsz" 60; letter-spacing: -0.018em; color: var(--color-ink); margin: 0 0 var(--space-sm); }
.result ol { margin: var(--space-md) 0 var(--space-lg); padding-left: 1.2em; display: grid; gap: var(--space-sm); }
.result ol li { max-width: 56ch; }
.result ol b { color: var(--color-ink); font-weight: 500; }
.result p { max-width: 56ch; }
.result .actions { margin-top: var(--space-lg); }
.check .help { min-height: 1lh; font-size: var(--text-sm); color: var(--color-muted); }

.read-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-md); }
.read-steps li { display: grid; grid-template-columns: 3ch minmax(0, 1fr); gap: var(--space-sm); padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); }
.read-steps li b { font-family: var(--font-display); color: var(--color-ink); font-variant-numeric: lining-nums; }

.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--gap-columns); margin: 0; }
.facts div { padding-block: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); }
.facts dt { font-size: var(--text-sm); color: var(--color-ink); font-weight: 500; margin-bottom: var(--space-2xs); }
.facts dd { margin: 0; font-size: var(--text-md); }

/* About and contact */
.about { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl) var(--gap-columns); }
.about .bio p { max-width: 52ch; }
.about .bio p + p { margin-top: var(--space-md); }
.contact-block { display: grid; gap: var(--space-lg); align-content: start; }
.contact-block .big { white-space: nowrap; font: 600 clamp(1.375rem, 2.8vw + 0.4rem, 3.25rem)/1.05 var(--font-head); font-variation-settings: "opsz" 60; letter-spacing: -0.018em; color: var(--color-ink); text-decoration: none; overflow-wrap: break-word; min-width: 0; }
.contact-block .big:hover { text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 3px; }

/* Footer: statement */
.foot { margin-top: var(--section-gap-l); padding-block: var(--space-3xl) var(--space-xl); background: var(--color-ink); color: var(--color-paper); }
.foot .line { font: 400 var(--text-display-s)/1.15 var(--font-body); max-width: 26ch; color: var(--color-paper); text-wrap: balance; }
.foot .small { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-xl); justify-content: space-between; margin-top: var(--space-2xl); padding-top: var(--space-lg); border-top: var(--rule-hair) solid color-mix(in oklab, var(--color-paper) 30%, transparent); font-size: var(--text-sm); }
.foot a { color: var(--color-paper); }
.foot :focus-visible { outline-color: var(--color-mint); }

.fill { padding: 0 0.25em; border: 1px dashed color-mix(in oklch, var(--color-muted) 70%, transparent); border-radius: 3px; color: var(--color-muted); -webkit-box-decoration-break: clone; box-decoration-break: clone; }


/* Judged on sales: a two-column table */
.sources { width: 100%; border-collapse: collapse; border-top: var(--rule-hair) solid var(--color-rule-2); }
.sources th { text-align: left; font-size: var(--text-sm); color: var(--color-muted); font-weight: 500; padding: var(--space-sm) var(--space-md) var(--space-sm) 0; border-bottom: var(--rule-hair) solid var(--color-rule-2); }
.sources td { padding: var(--space-xl) var(--space-md) var(--space-xl) 0; border-bottom: var(--rule-hair) solid var(--color-rule); vertical-align: baseline; font-size: var(--text-lead); color: var(--color-ink); }
.sources td.who { width: 34%; font: 600 var(--text-title)/1.2 var(--font-head); font-variation-settings: "opsz" 32; }
.after { margin-top: var(--space-2xl); max-width: 60ch; font-size: var(--text-lead); color: var(--color-ink); }

/* Vertically AI: the route a change takes */
.flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); counter-reset: flow; border-top: var(--rule-hair) solid var(--color-rule-2); }
.flow li { counter-increment: flow; padding: var(--space-xl) var(--space-lg) var(--space-2xl); border-left: var(--rule-hair) solid var(--color-rule); min-height: 320px; display: flex; flex-direction: column; gap: var(--space-sm); }
.flow li:first-child { border-left: 0; padding-left: 0; }
.flow li::before { content: counter(flow); font: 600 var(--text-display-s)/1 var(--font-head); font-variation-settings: "opsz" 60; color: var(--color-rule-2); }
.flow h3 { font-size: var(--text-title); }
.flow p { font-size: var(--text-md); max-width: 30ch; }
.flow .flow__me { background: var(--color-ink); color: var(--color-paper); padding-left: var(--space-lg); border-left-color: var(--color-ink); }
.flow .flow__me h3, .flow .flow__me p { color: var(--color-paper); }
.flow .flow__me::before { color: var(--color-mint); }

/* Asking AI yourself vs working with me */
.vs { width: 100%; border-collapse: collapse; table-layout: fixed; }
.vs thead th { text-align: left; font: 600 var(--text-title)/1.2 var(--font-head); font-variation-settings: "opsz" 32; color: var(--color-muted); padding: 0 var(--space-lg) var(--space-md); border-bottom: var(--rule-heavy) solid var(--color-rule-2); vertical-align: bottom; }
.vs thead th.vs__me { color: var(--color-ink); border-bottom-color: var(--color-mint); }
.vs thead td { width: 30%; border-bottom: var(--rule-heavy) solid transparent; }
.vs tbody th { text-align: left; font-size: var(--text-sm); color: var(--color-ink); font-weight: 500; padding: var(--space-xl) var(--space-lg) var(--space-xl) 0; border-bottom: var(--rule-hair) solid var(--color-rule); vertical-align: baseline; }
.vs tbody td { padding: var(--space-xl) var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule); vertical-align: baseline; font-size: var(--text-md); color: var(--color-muted); }
.vs tbody td.vs__me { color: var(--color-ink); font-size: var(--text-lead); background: var(--color-mint-wash); }
@media (max-width: 60rem) {
  .vs, .vs tbody, .vs tr { display: block; }
  .vs thead { display: none; }
  .vs tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-bottom: var(--rule-hair) solid var(--color-rule); padding-block: var(--space-md); }
  .vs tbody th { grid-column: 1 / -1; padding: 0 0 var(--space-xs); border: 0; }
  .vs tbody td { padding: var(--space-sm); border: 0; font-size: var(--text-md); }
  .vs tbody td.vs__me { font-size: var(--text-md); }
  .vs tbody td::before { display: block; font-size: var(--text-sm); color: var(--color-muted); font-family: var(--font-display); font-weight: 500; margin-bottom: var(--space-2xs); }
  .vs tbody td:not(.vs__me)::before { content: "Asking AI yourself"; }
  .vs tbody td.vs__me::before { content: "Working with me"; color: var(--color-ink); }
}

/* Results: four real figures */
.wins { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; border-top: var(--rule-heavy) solid var(--color-mint); }
.wins div { min-height: 300px; padding: var(--space-xl) var(--space-lg) 0; border-left: var(--rule-hair) solid var(--color-rule); display: grid; gap: var(--space-sm); align-content: start; }
.wins div:first-child { padding-left: 0; border-left: 0; }
.wins dd { margin: 0; font: 600 clamp(2.5rem, 3.4vw + 0.5rem, 4.25rem)/1 var(--font-head); font-variation-settings: "opsz" 60; letter-spacing: -0.018em; color: var(--color-ink); font-variant-numeric: lining-nums tabular-nums; }
.wins dt { font-size: var(--text-md); color: var(--color-ink); }
.wins small { font-size: var(--text-sm); color: var(--color-muted); font-family: var(--font-display); font-weight: 500; font-variation-settings: "opsz" 12; }

/* Lead quote over the client index */
.lead-quote { margin: 0 0 var(--space-3xl); max-width: 62rem; }
.lead-quote p { font: italic 400 clamp(1.75rem, 1.6vw + 1.1rem, 2.75rem)/1.25 var(--font-body); color: var(--color-ink); hanging-punctuation: first; text-wrap: balance; }
.lead-quote footer { margin-top: var(--space-lg); font-size: var(--text-sm); color: var(--color-muted); font-family: var(--font-display); font-weight: 500; font-variation-settings: "opsz" 12; }
.lead-quote footer b { display: block; color: var(--color-ink); font-weight: 500; }

/* For agencies */
.agency { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl) var(--gap-columns); align-items: start; }
.agency .lead { margin-top: var(--space-lg); }

.agency-figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: var(--space-xl) 0 0; border-top: var(--rule-heavy) solid var(--color-mint); }
.agency-figs div { padding: var(--space-lg) var(--space-lg) 0 0; display: grid; gap: var(--space-2xs); }
.agency-figs div + div { padding-left: var(--space-lg); border-left: var(--rule-hair) solid var(--color-rule); }
.agency-figs dd { margin: 0; font: 600 clamp(2.5rem, 3.4vw + 0.5rem, 4.25rem)/1 var(--font-head); font-variation-settings: "opsz" 60; color: var(--color-ink); font-variant-numeric: lining-nums; }
.agency-figs dt { font-size: var(--text-md); color: var(--color-ink); }
.agency-note { margin-top: var(--space-lg); font-size: var(--text-sm); color: var(--color-muted); font-family: var(--font-display); font-weight: 500; font-variation-settings: "opsz" 12; max-width: 52ch; }

/* Platforms: Google large, the add-ons smaller */
.platforms { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-lg) var(--space-2xl); padding-block: var(--space-lg); margin-bottom: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); border-bottom: var(--rule-hair) solid var(--color-rule); color: var(--color-ink); }
.platforms svg { width: 32px; height: 32px; flex-shrink: 0; }
.platforms__main { display: inline-flex; align-items: center; gap: var(--space-sm); font: 600 var(--text-title)/1 var(--font-head); font-variation-settings: "opsz" 32; }
.platforms__more { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-xl); color: var(--color-muted); font-family: var(--font-display); font-weight: 500; font-variation-settings: "opsz" 12; }
.platforms__more svg { width: 20px; height: 20px; }
.plat { display: inline-flex; align-items: center; gap: var(--space-xs); }

/* Portal gallery: one real screen at a time */
.gallery .seg { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-bottom: var(--space-lg); }
.gallery .seg button { min-height: 44px; padding: 0 var(--space-md); border: var(--rule-hair) solid var(--color-rule-2); background: var(--color-paper); color: var(--color-ink); font: 500 var(--text-sm)/1 var(--font-display); font-variation-settings: "opsz" 12; cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out); }
.gallery .seg button:hover { background: var(--color-paper-2); }
.gallery .seg button[aria-selected="true"] { border-color: var(--color-ink); box-shadow: inset 0 -3px 0 var(--color-mint); }
.gallery .seg button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.gallery__panel { margin: 0; }
.gallery__panel img { width: 100%; height: auto; max-height: 680px; object-fit: contain; object-position: left top; background: var(--color-paper-2); border: var(--rule-hair) solid var(--color-rule); }
.gallery__panel figcaption { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); font-family: var(--font-display); font-weight: 500; font-variation-settings: "opsz" 12; }
html:not(.js) .gallery .seg { display: none; }
html:not(.js) .gallery__panel[hidden] { display: block; margin-top: var(--space-xl); }

/* Portal: one real screen, then three tools */
.shot { margin: 0; aspect-ratio: 16 / 10; border: var(--rule-hair) solid var(--color-rule-2); background: var(--color-paper-2); }
.shot > img { object-position: 0 0; }
.shot-cap { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); font-family: var(--font-display); font-weight: 500; font-variation-settings: "opsz" 12; }
.tools { list-style: none; margin: var(--space-3xl) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); }
.tools li { border-top: var(--rule-heavy) solid var(--color-mint); padding-top: var(--space-md); display: grid; gap: var(--space-xs); align-content: start; }
.tools h3 { font-size: var(--text-title); }
.tools p { font-size: var(--text-md); }

/* About: four real figures */
.figures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: var(--space-3xl) 0 0; border-top: var(--rule-hair) solid var(--color-rule-2); }
.figures div { padding: var(--space-lg) var(--space-lg) 0; border-left: var(--rule-hair) solid var(--color-rule); display: flex; flex-direction: column-reverse; gap: var(--space-xs); }
.figures div:first-child { padding-left: 0; border-left: 0; }
.figures dd { margin: 0; font: 600 var(--text-section)/1.05 var(--font-head); font-variation-settings: "opsz" 60; letter-spacing: -0.018em; color: var(--color-ink); font-variant-numeric: lining-nums; }
.figures dt { font-size: var(--text-sm); color: var(--color-muted); }

@media (max-width: 60rem) {
  .flow, .tools, .figures, .wins, .agency { grid-template-columns: minmax(0, 1fr); }
  .wins div, .wins div:first-child { min-height: 0; border-left: 0; border-top: var(--rule-hair) solid var(--color-rule); padding: var(--space-lg) 0; }
  .wins { border-top-width: var(--rule-heavy); }
  .flow li, .flow li:first-child { border-left: 0; border-top: var(--rule-hair) solid var(--color-rule); padding: var(--space-lg) 0; min-height: 0; }
  .flow .flow__me { padding-inline: var(--space-lg); }
  .figures div, .figures div:first-child { border-left: 0; border-top: var(--rule-hair) solid var(--color-rule); padding: var(--space-md) 0; }
  .sources thead { display: none; }
  .sources, .sources tbody, .sources tr, .sources td { display: block; width: auto; }
  .sources td.who { width: auto; padding-bottom: var(--space-2xs); }
  .sources td { padding: 0 0 var(--space-md); }
  .sources tr { padding-top: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); }
  .sources td { border: 0; }
}

@media (max-width: 60rem) {
  .masthead .container { grid-template-columns: minmax(0, 1fr) auto; }
  .masthead .who { display: none; }
  .masthead .logo { width: 150px; }
  .hero { min-height: 0; }
  .hero__field { order: 0; grid-template-areas: "head" "plot" "cap" "note"; margin-top: var(--space-2xl); }
  .hero__base { margin-top: 0; }
  .hero__field, .hero__base, .head, .rows li, .stage, .about, .words { grid-template-columns: minmax(0, 1fr); }
  .hero__base { gap: var(--space-xl); }
  .note { min-height: 0; }
  .chart svg { max-height: none; }
  .facts { grid-template-columns: minmax(0, 1fr); }
  .index thead { display: none; }
  .index, .index tbody, .index tr, .index td { display: block; }
  .index tr { padding-block: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); }
  .index td, .index td.name, .index td.meta { border: 0; padding: var(--space-3xs) 0; white-space: normal; width: auto; }
  .check { padding: var(--space-lg); }
}
@media (prefers-reduced-motion: reduce) {
  .chart .pin circle, .btn, .check .opts label, a { transition: none; }
}

.agency .pull { min-height: 540px; }