/* Profit Zones, direction B: "the zones are the brand".
   Neutral graphite / white grounds; red, amber and green carry the brand, the accent and the CTA.
   Light tokens on :root; dark tokens on [data-theme="dark"] (set before first paint). */

:root {
  --ground: #ffffff;
  --ground-2: #f6f6f8;
  --surface: #ffffff;
  --text: #151619;
  --muted: #5b5c63;
  --rule: #d6d7db;
  --rule-soft: #ebecef;
  --red: #bd4137;
  --amber: #c78116;
  --green: #249054;
  --cta: #1a7f45;
  --cta-hover: #156c3a;
  --cta-text: #ffffff;
  --green-text: #176f3e;
  --amber-text: #8a5a0c;
  --red-text: #a8352c;
  --red-soft: #f8e3e1;
  --amber-soft: #f9edd8;
  --green-soft: #def1e5;
  --shadow: 0 1px 2px rgba(21, 22, 25, .05), 0 12px 32px -20px rgba(21, 22, 25, .25);
  --focus: #1a7f45;

  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --step--1: .875rem;
  --step-0: 1rem;
  --step-1: 1.125rem;
  --step-2: 1.375rem;
  --step-3: 1.75rem;
  --step-4: clamp(2rem, 1.4rem + 2.6vw, 3rem);
  --step-5: clamp(2.4rem, 1.5rem + 4vw, 4rem);

  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem;
  --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4.5rem; --space-9: 6.5rem;
  --radius: 10px;
  --measure: 66ch;
  --container: 1120px;
  color-scheme: light;
}

[data-theme="dark"] {
  --ground: #111214;
  --ground-2: #17181b;
  --surface: #1a1b1f;
  --text: #ececf0;
  --muted: #9a9aa6;
  --rule: #3a3b40;
  --rule-soft: #26272b;
  --red: #c0392b;
  --amber: #f39c12;
  --green: #27ae60;
  --cta: #27ae60;
  --cta-hover: #2ecc71;
  --cta-text: #06150c;
  --green-text: #2ecc71;
  --amber-text: #f5b041;
  --red-text: #ec7063;
  --red-soft: #2a1a19;
  --amber-soft: #2a2214;
  --green-soft: #142419;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 32px -20px rgba(0, 0, 0, .7);
  --focus: #2ecc71;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* Anchor targets clear the sticky header. This is scroll-margin on the targets, not scroll-padding on html: html scroll-padding makes the browser treat the sticky header controls as hidden and scroll the page whenever one gains focus. */
main [id] { scroll-margin-top: 5rem; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font: 400 var(--step-0)/1.6 var(--font-ui);
  -webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; height: auto; }
img { display: block; }
h1, h2, h3, h4 { line-height: 1.15; margin: 0; text-wrap: balance; letter-spacing: -.01em; }
h1 { font-size: var(--step-5); font-weight: 800; letter-spacing: -.025em; }
h2 { font-size: var(--step-4); font-weight: 800; letter-spacing: -.02em; }
h3 { font-size: var(--step-2); font-weight: 700; }
h4 { font-size: var(--step-1); font-weight: 700; }
p { margin: 0; }
a { color: var(--green-text); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
code, kbd, .mono { font-family: var(--font-mono); font-size: .9em; }
.tnum, table { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: var(--space-4); top: -100px; z-index: 100; background: var(--cta); color: var(--cta-text); padding: var(--space-2) var(--space-4); border-radius: 6px; font-weight: 700; }
.skip:focus { top: var(--space-4); }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
}

/* The brand band: red, amber, green */
.band { display: flex; height: 4px; }
.band span { flex: 1; }
.band span:nth-child(1) { background: var(--red); }
.band span:nth-child(2) { background: var(--amber); }
.band span:nth-child(3) { background: var(--green); }
.band-thin { height: 3px; }
.divider { max-width: 96px; margin: 0 0 var(--space-5); height: 4px; border-radius: 2px; overflow: hidden; }

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--rule-soft);
}
.header-row { display: flex; align-items: center; gap: var(--space-5); min-height: 64px; }
.wordmark { font-weight: 800; font-size: 1.2rem; letter-spacing: -.01em; color: var(--text); text-decoration: none; white-space: nowrap; }
.wordmark span { color: var(--green-text); }
.nav { display: flex; gap: var(--space-1); flex: 1; overflow-x: auto; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav a { color: var(--muted); text-decoration: none; font-size: var(--step--1); font-weight: 600; padding: var(--space-2) var(--space-3); border-radius: 6px; white-space: nowrap; }
.nav a:hover { color: var(--text); background: var(--ground-2); }
.nav a[aria-current="page"] { color: var(--text); box-shadow: inset 0 -2px 0 var(--green); border-radius: 0; }
.header-tools { display: flex; align-items: center; gap: var(--space-3); }

.theme-switch { position: relative; display: inline-flex; border: 1px solid var(--rule); border-radius: 999px; padding: 2px; margin: 0; gap: 2px; }
.theme-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; clip: rect(0 0 0 0); overflow: hidden; }
.theme-switch label { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 999px; color: var(--muted); cursor: pointer; }
.theme-switch svg { width: 15px; height: 15px; }
.theme-switch label:hover { color: var(--text); }
.theme-switch input:checked + label { background: var(--ground-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--rule); }
.theme-switch input:focus-visible + label { outline: 2px solid var(--focus); outline-offset: 1px; }

@media (max-width: 900px) {
  .header-row { flex-wrap: wrap; gap: 0 var(--space-4); padding-block: var(--space-2) 0; }
  .header-tools { margin-left: auto; }
  .nav { order: 3; flex-basis: 100%; margin-inline: calc(var(--space-3) * -1); padding-bottom: var(--space-1); }
}
@media (max-width: 420px) {
  .btn-sm.btn-cta { padding-inline: var(--space-3); }
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font: 700 var(--step-0)/1 var(--font-ui);
  padding: .9rem 1.25rem; border-radius: 8px; text-decoration: none; border: 1px solid transparent;
  transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn-cta { background: var(--cta); color: var(--cta-text); }
.btn-cta:hover { background: var(--cta-hover); }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--rule); }
.btn-ghost:hover { border-color: var(--muted); }
.btn-sm { font-size: var(--step--1); padding: .6rem .9rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }

/* Sections */
.section { padding-block: var(--space-8); }
.section + .section { border-top: 1px solid var(--rule-soft); }
.section-alt { background: var(--ground-2); }
.eyebrow { font: 600 .78rem/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--space-3); }
.lead { font-size: var(--step-1); color: var(--muted); max-width: 60ch; }
.section-head { display: flex; flex-direction: column; gap: var(--space-4); margin-bottom: var(--space-6); max-width: 760px; }
.stack { display: flex; flex-direction: column; gap: var(--space-4); }
.stack-lg { display: flex; flex-direction: column; gap: var(--space-6); }

.grid-2, .grid-3 { display: grid; gap: var(--space-5); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: var(--space-7); align-items: center; }
@media (max-width: 860px) {
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split { grid-template-columns: 1fr; gap: var(--space-6); }
}
@media (max-width: 600px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .section { padding-block: var(--space-7); }
}

.card {
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: var(--space-5); box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: var(--space-3);
}
.card h3 { font-size: var(--step-1); }
.card p { color: var(--muted); }
.card .pill-free, .card .pill-premium { align-self: flex-start; }
.card-flat { box-shadow: none; }

.pill-free, .pill-premium, .pill-limited, .pill-us {
  display: inline-flex; align-items: center; gap: .35em; font: 600 .72rem/1 var(--font-mono);
  letter-spacing: .06em; text-transform: uppercase; padding: .38em .6em; border-radius: 999px; white-space: nowrap;
}
.pill-free { background: var(--green-soft); color: var(--green-text); }
.pill-premium { background: var(--amber-soft); color: var(--amber-text); }
.pill-limited { background: var(--green-soft); color: var(--green-text); box-shadow: inset 0 0 0 1px var(--green); }
.pill-us { background: var(--ground-2); color: var(--muted); box-shadow: inset 0 0 0 1px var(--rule); }

/* Shots */
.shot { border-radius: var(--radius); border: 1px solid var(--rule); box-shadow: var(--shadow); background: var(--surface); overflow: hidden; }
.shot img { width: 100%; height: auto; }
figure { margin: 0; }
figcaption { font-size: var(--step--1); color: var(--muted); margin-top: var(--space-3); }

/* Prose pages (legal, research, help) */
.prose { max-width: var(--measure); }
.prose > * + * { margin-top: var(--space-4); }
.prose h2 { font-size: var(--step-3); margin-top: var(--space-7); }
.prose h3 { font-size: var(--step-2); margin-top: var(--space-6); }
.prose h4 { margin-top: var(--space-5); }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: var(--space-2); }
.prose blockquote { margin-inline: 0; padding-left: var(--space-4); border-left: 3px solid var(--green); color: var(--muted); }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--step--1); }
.prose th, .prose td { text-align: left; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--rule); vertical-align: top; }
.prose figure { margin-block: var(--space-6); }
.table-wrap { overflow-x: auto; }
.page-head { padding-block: var(--space-8) var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); }
.page-head .lead { max-width: 62ch; }
.meta-line { font: 500 var(--step--1)/1.4 var(--font-mono); color: var(--muted); }
/* Legal pages: header facts, a quiet cross-link line, and code tokens that wrap on phones. */
.legal-meta { display: flex; flex-direction: column; gap: var(--space-1); color: var(--muted); }
.legal-meta strong { color: var(--text); font-weight: 600; }
.legal-aside { color: var(--muted); max-width: 62ch; }
.legal .prose code { overflow-wrap: anywhere; background: var(--ground-2); border: 1px solid var(--rule-soft); border-radius: 4px; padding: 0 .3em; }
.legal .prose h2 { scroll-margin-top: var(--space-7); }
.page-head + .section.legal { padding-top: var(--space-4); }
.legal .prose > h2:first-child { margin-top: 0; }
.callout { border: 1px solid var(--rule); border-left: 4px solid var(--amber); background: var(--surface); border-radius: 8px; padding: var(--space-4) var(--space-5); }
.callout-green { border-left-color: var(--green); }
.callout-red { border-left-color: var(--red); }

/* Comparison table */
.table-compare { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.table-compare th, .table-compare td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--rule-soft); text-align: left; vertical-align: top; }
.table-compare thead th { background: var(--ground-2); font-size: var(--step--1); }
.table-compare tbody tr:last-child td, .table-compare tbody tr:last-child th { border-bottom: 0; }
.table-compare td:not(:first-child), .table-compare th:not(:first-child) { text-align: center; width: 22%; }
.table-compare tbody th { font-weight: 600; }
.table-compare .note { display: block; font-weight: 400; font-size: var(--step--1); color: var(--muted); margin-top: var(--space-1); }
.yes { color: var(--green-text); font-weight: 700; }
.no { color: var(--muted); }

/* Zones bar used as an illustration */
.zones { display: flex; height: 36px; border-radius: 8px; overflow: hidden; }
.zones span { flex: 1; display: flex; align-items: center; padding-inline: var(--space-3); font: 600 .75rem/1 var(--font-mono); letter-spacing: .05em; text-transform: uppercase; color: #fff; }
.zones span:nth-child(1) { background: var(--red); }
.zones span:nth-child(2) { background: var(--amber); color: #1d1300; }
.zones span:nth-child(3) { background: var(--green); flex: 2; color: #06150c; }

/* FAQ */
.faq { display: flex; flex-direction: column; border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { cursor: pointer; list-style: none; padding: var(--space-4) 0; font-weight: 700; display: flex; justify-content: space-between; gap: var(--space-4); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--muted); font-weight: 400; font-size: 1.3em; line-height: 1; }
.faq details[open] summary::after { content: "\2212"; }
.faq details > div { padding-bottom: var(--space-5); color: var(--muted); max-width: var(--measure); display: flex; flex-direction: column; gap: var(--space-3); }

/* Footer */
.site-footer { margin-top: var(--space-8); background: var(--ground-2); }
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: var(--space-6); padding-block: var(--space-7); }
.footer-brand { display: flex; flex-direction: column; gap: var(--space-2); }
.footer-brand p { color: var(--muted); font-size: var(--step--1); }
.footer-brand .wordmark { margin-bottom: var(--space-2); }
.site-footer nav { display: flex; flex-direction: column; gap: var(--space-2); }
.site-footer nav h2 { font: 600 .75rem/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--space-2); }
.site-footer nav a { color: var(--text); text-decoration: none; font-size: var(--step--1); }
.site-footer nav a:hover { text-decoration: underline; }
.linklike { appearance: none; background: none; border: 0; padding: 0; margin: 0; font: inherit; color: var(--green-text); text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; cursor: pointer; text-align: left; }
.linklike:hover { text-decoration-thickness: 2px; }
.site-footer nav .linklike { color: var(--text); text-decoration: none; font-size: var(--step--1); align-self: flex-start; }
.site-footer nav .linklike:hover { text-decoration: underline; }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } }

/* Motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Print (research papers). tools/print-papers.mjs prints each research page from this sheet:
   light ground in either theme, no chrome, figures and tables kept whole, no heavy shadows
   (Chrome's printToPDF can hang on large shadows around screenshots). */
.print-only { display: none; }
@media print {
  @page { size: letter; margin: 0.7in 0.7in 0.75in; }
  :root, [data-theme] { --ground: #fff; --ground-2: #f6f6f8; --surface: #fff; --text: #151619; --muted: #4a4b52; --rule: #d6d7db; --rule-soft: #ebecef;
    --red: #bd4137; --amber: #c78116; --green: #249054; --green-text: #176f3e; --amber-text: #8a5a0c; --red-text: #a8352c;
    --green-soft: #def1e5; --amber-soft: #f9edd8; --red-soft: #f8e3e1; --shadow: none; color-scheme: light; }
  html, body { background: #fff; }
  .site-header, .site-footer, .skip, .consent, .no-print, .trio-slot { display: none !important; }
  .print-only { display: block; }
  body { font-size: 10.5pt; line-height: 1.5; }
  .container { max-width: none; padding-left: 0; padding-right: 0; }
  .section, .page-head { padding-block: 0 12pt; }
  .section + .section { border-top: 0; }
  .page-head h1 { font-size: 26pt; }
  .page-head .lead { font-size: 12pt; }
  .prose { max-width: none; }
  .prose h2 { font-size: 16pt; break-after: avoid; margin-top: 20pt; }
  .prose h3 { font-size: 12.5pt; break-after: avoid; margin-top: 14pt; }
  .prose .eyebrow { break-after: avoid; }
  figure, .callout, tr, .paper-stats > div, .paper-terms > div, .door, .steps li, blockquote, pre { break-inside: avoid; }
  .card, .shot, .paper-fig { box-shadow: none !important; }
  .paper-toc { display: none; }
  a { color: inherit; text-decoration: none; }
}

/* Consent banner (starts hidden; consent.js reveals it when no choice is stored) */
.consent { position: fixed; inset-inline: var(--space-4); bottom: var(--space-4); z-index: 50; max-width: 44rem; margin-inline: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-4); padding: var(--space-4); background: var(--surface); color: var(--text); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow); font-size: var(--step--1); }
.consent[hidden] { display: none; }
.consent-text { flex: 1 1 18rem; margin: 0; color: var(--text); }
.consent-text a { color: var(--green-text); text-decoration: underline; text-underline-offset: 2px; }
.consent-actions { display: flex; gap: var(--space-2); flex: 0 0 auto; }
@media (max-width: 480px) { .consent-actions { width: 100%; } .consent-actions .btn { flex: 1; } }

/* Zone trio artwork (partials/trio*.html). Colors, shading and motion live in the
   generated "zone trio art" block at the end of this file. */
.pz-trio, .pz-single { display: block; width: 100%; height: auto; }
.pz-trio { max-width: 360px; }
.pz-single { max-width: 200px; }
/* Home hero brand lockup: trio, bar mark and wordmark share one centerline. */
.pz-brand { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 400px; }
.pz-brand .pz-trio { max-width: none; }
.pz-brand .pz-mark { display: block; width: 78%; height: auto; margin-top: var(--space-1); }
.pz-word { margin: var(--space-1) 0 0; font: 800 var(--step-3)/1.1 var(--font-ui); letter-spacing: -.01em; color: var(--text); }
.pz-word span { color: var(--green-text); }
.trio-slot { margin-block: var(--space-2); }

/* Home hero */
.hero { padding-block: var(--space-8); }
.hero h1 { max-width: 14ch; }
.hero-promise { font-size: var(--step-2); font-weight: 700; color: var(--text); line-height: 1.3; }
.hero-note { font-size: var(--step--1); color: var(--muted); }
.hero .trio-slot { display: flex; justify-content: center; }
.hero .pz-trio { max-width: 380px; }
@media (max-width: 860px) { .hero .trio-slot { order: -1; } .hero .pz-trio { max-width: 240px; } .hero .pz-brand { max-width: 280px; } }

/* Screenshot slots: a figure goes inside later; until then the slot and its column collapse. */
.shot-slot:empty { display: none; }
.split:has(> .shot-slot:empty) { grid-template-columns: minmax(0, 1fr); }
.split:has(> .shot-slot:empty) > :first-child { max-width: 760px; }

/* Lists and small parts used on the marketing pages */
.pill-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.eyebrow .pill-free, .eyebrow .pill-premium, .eyebrow .pill-limited, .eyebrow .pill-us { margin-left: var(--space-2); vertical-align: 1px; }
h3 .pill-free, h3 .pill-premium { margin-left: var(--space-2); vertical-align: 3px; }
.zone-key, .checks, .steps, .small-grid { list-style: none; margin: 0; padding: 0; }
.zone-key { display: flex; flex-direction: column; gap: var(--space-2); }
.zk-red { color: var(--red-text); } .zk-amber { color: var(--amber-text); } .zk-green { color: var(--green-text); }
.checks { display: flex; flex-direction: column; gap: var(--space-3); max-width: var(--measure); }
.checks li { position: relative; padding-left: 1.6em; color: var(--muted); }
.checks li b { color: var(--text); }
.checks li::before { content: ""; position: absolute; left: 0; top: .6em; width: .7em; height: .7em; border-radius: 2px; background: var(--green); }
.steps { counter-reset: step; display: flex; flex-direction: column; gap: var(--space-4); }
.steps li { counter-increment: step; position: relative; padding-left: 2.6rem; color: var(--muted); }
.steps li b { display: block; color: var(--text); margin-bottom: var(--space-1); }
.steps li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 1.8rem; height: 1.8rem; border-radius: 999px; display: grid; place-items: center; font: 700 var(--step--1)/1 var(--font-mono); background: var(--green-soft); color: var(--green-text); }
.small-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: var(--space-5) var(--space-6); }
.small-grid li { display: flex; flex-direction: column; gap: var(--space-2); padding-top: var(--space-4); border-top: 2px solid var(--rule); }
.small-grid h3 { font-size: var(--step-1); }
.small-grid p { color: var(--muted); }
.feature-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: var(--space-5); }
.feature b { color: var(--text); }
.feature-note { border-top: 1px solid var(--rule-soft); padding-top: var(--space-3); }
.jump { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.jump a { font-size: var(--step--1); font-weight: 600; color: var(--text); text-decoration: none; border: 1px solid var(--rule); border-radius: 999px; padding: var(--space-2) var(--space-4); }
.jump a:hover { border-color: var(--green); }
.table-foot { font-size: var(--step--1); color: var(--muted); margin-block: var(--space-4); max-width: var(--measure); }
.cta-inner { align-items: flex-start; }
.cta-final h2 { max-width: 20ch; }
.callout > p + p { margin-top: var(--space-2); }

.price { font-size: var(--step-1); color: var(--text); margin: 0; }
.price b { font-size: 2rem; font-variant-numeric: tabular-nums; }

/* Research index and papers */
.research-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-6); align-items: end; }
.research-head .pz-trio { width: 220px; }
@media (max-width: 700px) { .research-head { grid-template-columns: 1fr; } .research-head .trio-slot { order: -1; } .research-head .pz-trio { width: 160px; } }
.paper-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr)); gap: var(--space-5); }
.paper-card h2 { font-size: var(--step-2); }
.paper-card h2 a { color: var(--text); text-decoration: none; }
.paper-card h2 a:hover { text-decoration: underline; }
.paper-card .eyebrow { margin-bottom: 0; }
.paper-card .meta-line a { color: var(--green-text); }

.paper .page-head { max-width: calc(var(--measure) + 40px); margin-inline: auto; }
.paper .page-head h1 { font-size: var(--step-4); }
.paper .page-head + .section { padding-top: 0; }
.paper .prose { margin-inline: auto; }
.prose .eyebrow { margin-top: var(--space-7); margin-bottom: 0; }
.prose .eyebrow + h2 { margin-top: var(--space-2); }
.prose ul ul, .callout ul { margin: var(--space-2) 0 0; padding-left: 1.3em; }
.callout li + li { margin-top: var(--space-2); }
.callout > ul + p { margin-top: var(--space-3); }
.fine { font-size: var(--step--1); color: var(--muted); }
.prose blockquote p:last-child:not(:first-child) { font: 500 var(--step--1)/1.4 var(--font-mono); margin-top: var(--space-2); }
.prose table th[scope="row"] { font-weight: 700; }
.prose thead th { font: 600 .75rem/1.3 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }

/* Paper figures: the captures are light-ground images, so they sit on white in both themes. */
.paper-fig { background: #fff; border: 1px solid var(--rule); border-radius: var(--radius); padding: var(--space-3); }
.paper-fig img { width: 100%; height: auto; margin-inline: auto; }
.paper-fig figcaption { color: var(--muted); }
[data-theme="dark"] .paper-fig figcaption { color: #4a4b52; }
.fig-narrow img { max-width: 360px; }
.fig-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); margin-block: var(--space-5); align-items: start; }
.prose .fig-grid > figure { margin: 0; }
.fig-grid-panel { grid-template-columns: 1.25fr 1fr; }
@media (max-width: 600px) { .fig-grid, .fig-grid-panel { grid-template-columns: 1fr; } }

.paper-stats, .paper-terms { display: grid; gap: var(--space-4); margin-block: var(--space-5); }
.paper-stats { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.paper-terms { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.paper-stats > div, .paper-terms > div { border-top: 2px solid var(--rule); padding-top: var(--space-3); }
.paper-stats dt { font-size: var(--step-3); font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; }
.paper-stats dt small { font: 500 var(--step--1)/1.2 var(--font-mono); color: var(--muted); }
.paper-terms dt { font-weight: 700; }
.paper-stats dd, .paper-terms dd { margin: var(--space-2) 0 0; color: var(--muted); font-size: var(--step--1); }

.paper-toc { border: 1px solid var(--rule); border-radius: var(--radius); padding: var(--space-4) var(--space-5); background: var(--ground-2); }
.paper-toc .eyebrow { margin: 0 0 var(--space-2); }
.paper-toc ol { margin: 0; padding-left: 1.4em; columns: 2 16rem; column-gap: var(--space-6); }
.paper-toc li { margin: 0 0 var(--space-1); break-inside: avoid; }
.paper-toc li + li { margin-top: 0; }

.col-list { list-style: none; padding: 0 !important; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.col-list li { margin: 0 !important; font: 500 var(--step--1)/1.3 var(--font-mono); background: var(--ground-2); border: 1px solid var(--rule-soft); border-radius: 6px; padding: var(--space-1) var(--space-2); }

.doors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.door { border: 1px solid var(--rule); border-top: 4px solid var(--amber); border-radius: 8px; padding: var(--space-4); background: var(--surface); display: flex; flex-direction: column; gap: var(--space-2); }
.door-green { border-top-color: var(--green); }
.door-red { border-top-color: var(--red); }
.door h3 { font-size: var(--step-0); margin: 0; }
.door p { color: var(--muted); font-size: var(--step--1); }
.door .eyebrow { margin: 0; font-size: .7rem; }
.door-tag { font: 600 .72rem/1 var(--font-mono) !important; letter-spacing: .06em; text-transform: uppercase; margin-top: auto !important; }
.door-green .door-tag { color: var(--green-text); }
.door-amber .door-tag { color: var(--amber-text); }
.door-red .door-tag { color: var(--red-text); }
@media (max-width: 640px) { .doors { grid-template-columns: 1fr; } }

.ua { margin: 0; padding: var(--space-4); background: var(--ground-2); border: 1px solid var(--rule); border-radius: 8px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--step--1); }
.ua mark { background: var(--green-soft); color: var(--green-text); font-weight: 700; padding: 0 .2em; border-radius: 3px; }
.sources li { font-size: var(--step--1); color: var(--muted); }
.paper-end { margin-top: var(--space-7); }
/* Bar charts inside papers (buy-box-by-metro). No script and no inline style: each bar is a tiny SVG
   whose fill width is an attribute, and the colors come from theme tokens. Values are also in the text. */
.hbars { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.hbars li { display: grid; grid-template-columns: minmax(6.5rem, 11rem) minmax(0, 1fr) 4.2rem; gap: var(--space-3); align-items: center; font-size: var(--step--1); }
.hbars .hb-label { font-family: var(--font-mono); color: var(--muted); }
.hbars .hb-val { font-family: var(--font-mono); text-align: right; font-variant-numeric: tabular-nums; }
.hbars svg { display: block; width: 100%; height: .95rem; }
.hb-track { fill: var(--rule-soft); }
.hb-fill { fill: var(--green); }
.hb-fill.hb-alt { fill: var(--amber); }
.paper-chart { border: 1px solid var(--rule); border-radius: var(--radius); padding: var(--space-4); background: var(--surface); }
.paper-chart figcaption { margin-top: var(--space-3); color: var(--muted); font-size: var(--step--1); }
@media (max-width: 480px) { .hbars li { grid-template-columns: 6rem minmax(0, 1fr) 3.6rem; gap: var(--space-2); } }

.paper-end .btn-row { margin-top: var(--space-4); }
.print-mast { font: 500 9pt/1.2 var(--font-mono); color: var(--muted); letter-spacing: .02em; border-bottom: 1px solid var(--rule); padding-bottom: 6pt; margin-bottom: 6pt; }

/* Narrow panel screenshots: natural width, centered, never stretched. */
.shot-narrow { max-width: min(361px, 100%); width: fit-content; margin-inline: auto; }
.shot-tall { max-width: 360px; }
.shot-narrow img { width: auto; max-width: 100%; height: auto; margin-inline: auto; display: block; }
.shot figcaption { padding: var(--space-3) var(--space-4); margin-top: 0; border-top: 1px solid var(--rule-soft); }

/* Click to enlarge (zoom.js). The trigger wraps a screenshot; one shared dialog shows it at native size. */
.zoom-trigger { position: relative; display: block; width: 100%; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: zoom-in; }
.zoom-trigger:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.zoom-hint { position: absolute; right: var(--space-3); bottom: var(--space-3); padding: .2em .65em; border-radius: 999px; background: var(--surface); color: var(--text); border: 1px solid var(--rule); box-shadow: var(--shadow); font-size: var(--step--1); line-height: 1.4; pointer-events: none; opacity: .92; }
.zoom-trigger:hover .zoom-hint, .zoom-trigger:focus-visible .zoom-hint { opacity: 1; border-color: var(--green-text); }
.zoom-dialog { padding: 0; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); color: var(--text); box-shadow: var(--shadow); max-width: calc(100vw - 2rem); max-height: calc(100dvh - 2rem); overflow: visible; }
.zoom-dialog::backdrop { background: rgb(0 0 0 / .72); }
.zoom-scroll { overflow: auto; max-width: calc(100vw - 2rem); max-height: calc(100dvh - 2rem); border-radius: var(--radius); }
.zoom-big { display: block; max-width: none; height: auto; }
.zoom-close { position: absolute; top: var(--space-2); right: var(--space-2); z-index: 1; width: 2.5rem; height: 2.5rem; border-radius: 999px; border: 1px solid var(--rule); background: var(--surface); color: var(--text); font-size: 1.6rem; line-height: 1; cursor: pointer; box-shadow: var(--shadow); }
.zoom-close:hover { border-color: var(--green-text); }
@media (prefers-reduced-motion: no-preference) {
  .zoom-hint { transition: opacity .15s ease, border-color .15s ease; }
  .zoom-dialog[open] { animation: zoom-in .18s ease-out; }
  @keyframes zoom-in { from { opacity: 0; transform: scale(.98); } to { opacity: 1; transform: none; } }
}
@media print { .zoom-hint, .zoom-dialog { display: none !important; } }

/* Sales DNA helix: one video per theme. The pre-paint script always sets data-theme to light or dark,
   so the match shows with no JS; with no attribute at all, light shows. */
.helix { max-width: 100%; }
.helix video, .helix .helix-still { display: none; width: 100%; height: auto; aspect-ratio: 2 / 1; }
:root:not([data-theme="dark"]) .helix video.helix-light,
:root[data-theme="dark"] .helix video.helix-dark { display: block; }
.helix-wrap { margin-top: var(--space-6); max-width: 760px; }
/* Reduced motion: never play. Show the poster still for the current theme instead of the video. */
@media (prefers-reduced-motion: reduce) {
  .helix video.helix-video { display: none !important; }
  :root:not([data-theme="dark"]) .helix img.helix-still.helix-light,
  :root[data-theme="dark"] .helix img.helix-still.helix-dark { display: block; }
}
@media print { .helix video { display: none !important; } }

/* Sales DNA helix: one video per theme. The pre-paint script always sets data-theme to light or dark,
   so the match shows with no JS; with no attribute at all, light shows. */
.helix { max-width: 100%; }
.helix video, .helix .helix-still { display: none; width: 100%; height: auto; aspect-ratio: 2 / 1; }
:root:not([data-theme="dark"]) .helix video.helix-light,
:root[data-theme="dark"] .helix video.helix-dark { display: block; }
.helix-wrap { margin-top: var(--space-6); max-width: 760px; }
/* Reduced motion: never play. Show the poster still for the current theme instead of the video. */
@media (prefers-reduced-motion: reduce) {
  .helix video.helix-video { display: none !important; }
  :root:not([data-theme="dark"]) .helix img.helix-still.helix-light,
  :root[data-theme="dark"] .helix img.helix-still.helix-dark { display: block; }
}
@media print { .helix video { display: none !important; } }

/* BEGIN zone trio art: generated by docs/site/research/trio/build-ids.mjs, do not edit by hand */
/* ---------- themes ---------- */
[data-theme="dark"]{--pz-ground:#111214;--pz-red:#c0392b;--pz-amber:#f39c12;--pz-green:#27ae60;--pz-text:#ececf0;--pz-word-green:#2ecc71;--pz-shade:#000;--pz-deep:#1a0710}
:root:not([data-theme="dark"]){--pz-ground:#fff;--pz-red:#bd4137;--pz-amber:#c78116;--pz-green:#249054;--pz-text:#151619;--pz-word-green:#176f3e;--pz-shade:#4a3426;--pz-deep:#4d1d2c}
.z-red{--c:var(--pz-red)}.z-amber{--c:var(--pz-amber)}.z-green{--c:var(--pz-green)}
.z-red,.z-amber,.z-green{
  --hi:color-mix(in oklab,var(--c) 58%,#fff6e8);
  --lo:color-mix(in oklab,var(--c) 70%,var(--pz-deep));
  --deep:color-mix(in oklab,var(--c) 45%,var(--pz-deep));
  --ink:color-mix(in oklab,var(--c) 18%,#1a0d12);
  --neon:color-mix(in oklab,var(--c) 22%,#fff)}
.st-hi{stop-color:var(--hi)}.st-c{stop-color:var(--c)}.st-lo{stop-color:var(--lo)}.st-deep{stop-color:var(--deep)}

/* ---------- A: clay ---------- */
.a-scl{fill:#fffaf3}.a-pup{fill:#1d1216}.a-cat{fill:#fff}
.a-lid{fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round}
.a-brow{fill:none;stroke:var(--ink);stroke-width:4.4;stroke-linecap:round}
.a-line{fill:none;stroke:var(--ink);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.a-mouth{fill:#3b0f1a}.a-tongue{fill:#ff7f88}.a-teeth{fill:#fffaf3}
.a-blush{fill:#ff8a7a;opacity:.38}
.a-arm{fill:none;stroke:color-mix(in oklab,var(--c) 88%,var(--pz-deep));stroke-width:12;stroke-linecap:round}
.a-arm-hi{fill:none;stroke:var(--hi);stroke-width:3.2;stroke-linecap:round;opacity:.55}
.a-rim{fill:none;stroke:color-mix(in oklab,var(--c) 40%,#fff);stroke-width:3.5;opacity:.75}
.a-sheen{fill:#fff;opacity:.26}.a-spec{fill:#fff;opacity:.42}
.a-fing{fill:none;stroke:color-mix(in oklab,var(--c) 80%,#fff6e8);stroke-linecap:round}
.a-cs{fill:var(--pz-shade);opacity:.55}.a-ao{fill:var(--pz-shade);opacity:.6}
:root:not([data-theme="dark"]) .a-fing{fill:none;stroke:color-mix(in oklab,var(--c) 80%,#fff6e8);stroke-linecap:round}
.a-cs{opacity:.2}:root:not([data-theme="dark"]) .a-ao{opacity:.32}:root:not([data-theme="dark"]) .a-rim{opacity:.55}

/* ---------- B: neon glass ---------- */
.b-gt{stop-opacity:.62}.b-gb{stop-opacity:.2}
:root:not([data-theme="dark"]) .b-gt{stop-opacity:.96}:root:not([data-theme="dark"]) .b-gb{stop-opacity:.78}
.b-glow{fill:var(--c);opacity:.5}:root:not([data-theme="dark"]) .b-glow{opacity:.32}
.b-inner{fill:none;stroke:var(--hi);stroke-width:9;opacity:.55}:root:not([data-theme="dark"]) .b-inner{opacity:.45}
.b-edge{fill:none;stroke:var(--hi);stroke-width:1.6}:root:not([data-theme="dark"]) .b-edge{stroke:var(--c)}
.b-glare{fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;opacity:.55}
.b-eye{fill:var(--neon)}
.b-brow,.b-line{fill:none;stroke:var(--neon);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.b-mouth{fill:var(--neon)}.b-tongue{fill:var(--c);opacity:.85}
:root:not([data-theme="dark"]) .b-eye,:root:not([data-theme="dark"]) .b-mouth{fill:#fff}:root:not([data-theme="dark"]) .b-brow,:root:not([data-theme="dark"]) .b-line{stroke:#fff}
.b-fing{fill:none;stroke:var(--hi);stroke-linecap:round}:root:not([data-theme="dark"]) .b-fing{stroke:var(--c)}
.b-arm{fill:none;stroke:var(--hi);stroke-width:5;stroke-linecap:round}.b-hand{fill:var(--hi)}
:root:not([data-theme="dark"]) .b-fing{fill:none;stroke:var(--hi);stroke-linecap:round}:root:not([data-theme="dark"]) .b-fing{stroke:var(--c)}
.b-arm{stroke:var(--c)}:root:not([data-theme="dark"]) .b-hand{fill:var(--c)}
.b-fl{stop-color:#8a8b94}:root:not([data-theme="dark"]) .b-fl{stop-color:#c9cad0}
.b-refl-a{stop-opacity:.28}:root:not([data-theme="dark"]) .b-refl-a{stop-opacity:.16}

/* ---------- C: graphic blocks ---------- */
.c-front{fill:var(--c);stroke:var(--c);stroke-width:5;stroke-linejoin:round}
.c-side{fill:var(--lo);stroke:var(--lo);stroke-width:5;stroke-linejoin:round}
.c-top{fill:var(--hi);stroke:var(--hi);stroke-width:5;stroke-linejoin:round}
.c-band{fill:#fff;opacity:.13}.c-band2{fill:#fff;opacity:.1}
.c-eye{fill:var(--ink)}.c-cat{fill:#fff}
.c-brow,.c-line{fill:none;stroke:var(--ink);stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.c-mouth{fill:var(--ink)}.c-tongue{fill:#ff7f88}
.c-blush{fill:#fff;opacity:.2}
.c-arm{fill:none;stroke:color-mix(in oklab,var(--c) 82%,var(--pz-deep));stroke-width:11;stroke-linecap:round}.c-hand{fill:color-mix(in oklab,var(--c) 82%,var(--pz-deep))}
.c-fing{fill:none;stroke:color-mix(in oklab,var(--c) 82%,var(--pz-deep));stroke-linecap:round}
.c-floor{fill:none;stroke:#2c2d33;stroke-width:2;stroke-linecap:round}:root:not([data-theme="dark"]) .c-floor{stroke:#e2e3e7}
.c-lso{stop-opacity:.5}:root:not([data-theme="dark"]) .c-lso{stop-opacity:.22}


/* ---------- D: studio vinyl ---------- */
.d-hi{stop-color:color-mix(in oklab,var(--c) 74%,#fff6e8)}
.d-eye{fill:var(--ink)}.d-cat{fill:#fff;opacity:.9}
.d-lid{fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linecap:round}
.d-brow{fill:none;stroke:var(--ink);stroke-width:3.2;stroke-linecap:round}
.d-line{fill:none;stroke:var(--ink);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.d-smile{stroke-width:3.6}
.d-arm{fill:none;stroke:color-mix(in oklab,var(--c) 86%,var(--pz-deep));stroke-width:9.5;stroke-linecap:round}
.d-hand{fill:color-mix(in oklab,var(--c) 86%,var(--pz-deep))}
.d-rim{fill:none;stroke:color-mix(in oklab,var(--c) 45%,#fff);stroke-width:3;opacity:.45}
.d-sheen{fill:#fff;opacity:.16}
.d-cs{fill:var(--pz-shade);opacity:.5}.d-ao{fill:var(--pz-shade);opacity:.55}
:root:not([data-theme="dark"]) .d-cs{opacity:.18}:root:not([data-theme="dark"]) .d-ao{opacity:.3}

/* ---------- E: ink line ---------- */
[data-theme="dark"]{--pz-line:#0b0b0d;--pz-floor:#3a3b42}
:root:not([data-theme="dark"]){--pz-line:#1c1513;--pz-floor:#1c1513}
.e-fill{fill:var(--c)}
.e-shade{fill:var(--lo);opacity:.55}
.e-glint{fill:none;stroke:color-mix(in oklab,var(--c) 45%,#fff);stroke-width:4;stroke-linecap:round;opacity:.8}
.e-out{fill:none;stroke:var(--pz-line);stroke-width:3.2;stroke-linejoin:round}
[data-theme="dark"] .e-out{stroke:color-mix(in oklab,var(--c) 30%,#000)}
.e-eye{fill:var(--pz-line)}.e-cat{fill:#fff}
.e-lid{fill:none;stroke:var(--pz-line);stroke-width:2.4;stroke-linecap:round}
.e-brow,.e-line{fill:none;stroke:var(--pz-line);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.e-smile{stroke-width:3.6}
.e-floor{fill:none;stroke:var(--pz-floor);stroke-width:3;stroke-linecap:round}


/* ---------- F / G: face workshop ---------- */
.f-eye{fill:#1d1216}.f-cat{fill:#fff;opacity:.9}
.f-lid{fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linecap:round}
.f-brow,.f-line{fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.f-smile{stroke-width:3.4}
.g-scl{fill:#f4ece2}
.g-iris{fill:color-mix(in oklab,var(--c) 22%,#2a1712)}.g-pup{fill:#120a0b}.g-cat{fill:#fff}
.g-lid{fill:color-mix(in oklab,var(--c) 90%,var(--pz-deep))}
.g-lash{fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linecap:round}
.g-crease{fill:none;stroke:var(--ink);stroke-width:1.2;stroke-linecap:round;opacity:.5}
.g-brow{fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round;opacity:.92}
.g-mouth{fill:none;stroke:var(--ink);stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
.g-smile{stroke-width:3.2}.g-tick{stroke-width:2.2}
.pz-glance-g{transform-box:fill-box}
.pz-eyes-amber .pz-glance-g{animation:pz-glance 6.4s ease-in-out 1.6s infinite}


.i-eye{fill:#1d1216}.i-cat{fill:#fff;opacity:.9}
.i-lid{fill:none;stroke:#1d1216;stroke-width:2.4;stroke-linecap:round}
.i-brow,.i-line{fill:none;stroke:color-mix(in oklab,var(--c) 40%,var(--pz-deep));stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
.i-smile{stroke-width:3.8}
.i-hl .i-eye,.i-hl .i-cat,.i-hl .i-lid{display:none}
.i-hl .i-brow,.i-hl .i-line{stroke:var(--hi);opacity:.75}
[data-theme="dark"] .i-brow,[data-theme="dark"] .i-line{stroke:color-mix(in oklab,var(--c) 30%,#14080b)}
[data-theme="dark"] .i-hl .i-brow,[data-theme="dark"] .i-hl .i-line{stroke:var(--hi);opacity:.6}


.j-sock{fill:color-mix(in oklab,var(--c) 45%,var(--pz-deep));opacity:.55}
.j-sock-hi{fill:none;stroke:var(--hi);stroke-width:1.8;stroke-linecap:round;opacity:.95}


.k-lid{fill:color-mix(in oklab,var(--c) 92%,var(--pz-deep))}
.l-cheek{fill:var(--hi);opacity:.8}.l-cheek-sh{fill:var(--deep);opacity:.5}


/* ---------- M: posed arms ---------- */
.m-farm{fill:none;stroke:var(--c);stroke-width:13;stroke-linecap:round}
.m-farm-hi{fill:none;stroke:var(--hi);stroke-width:4.2;stroke-linecap:round;opacity:.55}
.m-bill{fill:#dcebd3;stroke:#3f6e3a;stroke-width:1}
.m-bill-in{fill:none;stroke:#5f8f57;stroke-width:.6;opacity:.8}
.m-bill-seal{fill:#c4ddb8;stroke:#5f8f57;stroke-width:.6}
.m-bill-mark{fill:none;stroke:#2f5a2b;stroke-width:1.1;stroke-linecap:round}
.m-cash{filter:drop-shadow(0 1px 1px rgba(0,0,0,.25))}
.m-arm-soft{stroke-width:4.2;opacity:.6}
.m-cast{fill:none;stroke:var(--deep);stroke-width:13;stroke-linecap:round;opacity:.5}
.m-up{stroke-width:15.5}
.m-seam{fill:none;stroke:var(--deep);stroke-width:15.5;stroke-linecap:round;opacity:.28}
.m-seam-c{fill:var(--deep);opacity:.45}
.m-fold-sh{fill:none;stroke:var(--deep);stroke-width:14;stroke-linecap:round;opacity:.35}
.pz-offer,.pz-hip{transform-box:fill-box}
.pz-offer{transform-origin:0% 40%;animation:pz-offer 4.2s ease-in-out 1.5s infinite}
@keyframes pz-offer{0%,100%{transform:rotate(0)}40%{transform:rotate(7deg)}60%{transform:rotate(5deg)}}

/* ---------- logo mark ---------- */
.mk-r{fill:var(--pz-red)}.mk-a{fill:var(--pz-amber)}.mk-g{fill:var(--pz-green)}
.mk-glow{opacity:.7}:root:not([data-theme="dark"]) .mk-glow{opacity:.28}
.mk-dash{fill:none;stroke:var(--pz-green);stroke-width:1.3;stroke-dasharray:4 4;opacity:.8}

/* ---------- motion ---------- */
.pz-ch,.pz-idle,.pz-eyes,.pz-sh{transform-box:fill-box;transform-origin:50% 100%}
.pz-eyes{transform-origin:50% 50%}
.pz-wave{transform-box:fill-box;transform-origin:0% 100%}
.pz-shrug,.pz-glance{transform-box:fill-box;transform-origin:50% 100%}
.pz-ch{animation:pz-rise .95s cubic-bezier(.25,.8,.3,1) both}
.pz-ch-red{animation-delay:.1s}.pz-ch-amber{animation-delay:.26s}.pz-ch-green{animation-delay:.42s}
.pz-sh{animation:pz-sh-in .95s ease-out both}
.pz-sh-red{animation-delay:.1s}.pz-sh-amber{animation-delay:.26s}.pz-sh-green{animation-delay:.42s}
@keyframes pz-rise{0%{transform:scale(1,0);opacity:0}8%{opacity:1}52%{transform:scale(.93,1.1)}70%{transform:scale(1.07,.92)}84%{transform:scale(.98,1.025)}100%{transform:scale(1,1)}}
@keyframes pz-sh-in{0%{transform:scale(.2,1);opacity:0}100%{transform:scale(1,1);opacity:1}}
.pz-idle-red{animation:pz-sigh 5.6s ease-in-out 1.4s infinite}
.pz-idle-amber{animation:pz-tilt 6.4s ease-in-out 1.6s infinite}
.pz-idle-green{animation:pz-bob 2.6s ease-in-out 1.5s infinite}
@keyframes pz-sigh{0%,100%{transform:scale(1,1)}35%{transform:scale(1.01,1.03)}55%{transform:scale(1.03,.955)}75%{transform:scale(1.015,.97)}}
@keyframes pz-tilt{0%,100%{transform:rotate(0)}22%,40%{transform:rotate(-2.6deg)}60%,78%{transform:rotate(2.2deg)}}
@keyframes pz-bob{0%,100%{transform:translateY(0) scale(1,1)}45%{transform:translateY(-6px) scale(.985,1.02)}88%{transform:translateY(0) scale(1.025,.975)}}
.pz-sh-green{animation:pz-sh-in .95s ease-out .42s both,pz-sh-bob 2.6s ease-in-out 1.5s infinite}
@keyframes pz-sh-bob{0%,100%{transform:scale(1,1);opacity:1}45%{transform:scale(.84,.84);opacity:.7}}
.pz-wave{animation:pz-wave 2.8s ease-in-out 1.3s infinite}
@keyframes pz-wave{0%,48%,100%{transform:rotate(0)}56%{transform:rotate(-22deg)}64%{transform:rotate(9deg)}72%{transform:rotate(-19deg)}80%{transform:rotate(7deg)}88%{transform:rotate(-6deg)}}
.pz-shrug{animation:pz-shrug 6.4s ease-in-out 1.6s infinite}
@keyframes pz-shrug{0%,15%,45%,100%{transform:translateY(0)}26%,34%{transform:translateY(-5px)}}
.pz-eyes-red{animation:pz-blink 5.8s 2.4s infinite}
.pz-eyes-amber{animation:pz-blink 4.6s 1.9s infinite}
.pz-eyes-green{animation:pz-blink 3.9s 1.4s infinite}
@keyframes pz-blink{0%,93%,100%{transform:scale(1,1)}96%{transform:scale(1,.08)}}
.pz-glance{animation:pz-glance 6.4s ease-in-out 1.6s infinite}
@keyframes pz-glance{0%,14%{transform:translate(0,0)}20%,42%{transform:translate(-5px,.5px)}50%,82%{transform:translate(1.5px,-.8px)}90%,100%{transform:translate(0,0)}}
.pz-mark{animation:pz-mark-in 1.1s cubic-bezier(.3,.7,.2,1) .7s both}
@keyframes pz-mark-in{0%{clip-path:inset(0 100% 0 0)}100%{clip-path:inset(0 0 0 0)}}
@media (prefers-reduced-motion:reduce){.pz-trio *,.pz-single *,.pz-mark{animation:none!important}}
/* END zone trio art */

/* Home layout: tall panel shot scrolls inside a window instead of stretching the section. */
.shot-scroll { position: relative; }
.shot-scroller { max-height: min(600px, 70vh); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.shot-scroller:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.shot-scroll::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 48px; pointer-events: none; background: linear-gradient(to bottom, transparent, var(--surface)); }
/* Sales DNA helix sits under the copy, not in the image column. */
.helix-inline { margin-top: var(--space-4); max-width: 520px; }
/* Alternate image sides on wide screens for rhythm; content stays first on phones. */
@media (min-width: 861px) {
  .split-flip { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .split-flip > .shot-slot { order: -1; }
  .split-media-wide { grid-template-columns: minmax(0, 1.5fr) minmax(0, .85fr); }
}

/* Problem section: the Keepa quip sits under the lead as a pull line. */
.problem-quip { font-size: var(--step-1); font-weight: 600; color: var(--text); max-width: 46ch; }

/* Trust: "what leaves your browser" diagram (partials/data-flow.html), with the consent screenshot beside it. */
.trust-visuals { display: grid; grid-template-columns: minmax(0, 2.8fr) minmax(0, 1fr); gap: var(--space-6); align-items: center; margin-top: var(--space-6); }
.trust-visuals:has(> .shot-slot:empty) { grid-template-columns: minmax(0, 1fr); }
.flow { margin: 0; padding: var(--space-5); border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.flow-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.15fr) auto minmax(0, 1fr); gap: var(--space-3); align-items: center; }
.flow-col { display: grid; gap: var(--space-3); }
.flow-node { padding: var(--space-3) var(--space-4); border: 1px solid var(--rule); border-radius: var(--radius); background: var(--ground); font-size: var(--step--1); color: var(--muted); }
.flow-node p { margin: 0; }
.flow-node p + p { margin-top: var(--space-1); }
.flow-name { font-weight: 700; color: var(--text); font-size: var(--step-0); display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.flow-node-out { border-style: solid; border-color: var(--amber); }
.flow-arrow { display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--muted); font: 600 .7rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; }
.flow-arrow svg { width: 40px; height: 16px; }
.flow-arrow path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.flow-browser { padding: var(--space-4); border: 2px solid var(--green); border-radius: var(--radius); background: var(--ground); }
.flow-browser .flow-name { margin: 0 0 var(--space-2); }
.flow-keep { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-1); font-size: var(--step--1); color: var(--text); }
.flow-keep li { padding-left: 1.3em; position: relative; }
.flow-keep li::before { content: ""; position: absolute; left: 0; top: .45em; width: .6em; height: .6em; border-radius: 2px; background: var(--green); }
.flow-never { margin: var(--space-3) 0 0; font-weight: 700; color: var(--green-text); font-size: var(--step--1); }
.flow figcaption { margin-top: var(--space-4); font-size: var(--step--1); color: var(--muted); }
@media (max-width: 860px) {
  .trust-visuals { grid-template-columns: minmax(0, 1fr); }
  .flow-grid { grid-template-columns: minmax(0, 1fr); }
  .flow-arrow { flex-direction: row; justify-content: center; }
  .flow-arrow svg { transform: rotate(90deg); }
}

/* Gold Premium button: same family as the Premium pill. A lit-from-above gold
   gradient with a soft amber glow under it; hover brightens the gold and widens
   the glow. Every tone is mixed from --amber, so both themes and print follow
   the token. The flat background-color stays as the fallback. */
.btn-premium {
  --bp-hi: color-mix(in oklab, var(--amber) 58%, #ffe7a3);
  --bp-lo: color-mix(in oklab, var(--amber) 86%, #6b3300);
  --bp-glow: color-mix(in oklab, var(--amber) 62%, transparent);
  background-color: var(--amber);
  background-image: linear-gradient(180deg, var(--bp-hi) 0%, var(--amber) 58%, var(--bp-lo) 100%);
  color: #1c1305; border-color: var(--bp-lo);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .42), 0 1px 2px rgb(0 0 0 / .18), 0 8px 22px -8px var(--bp-glow), 0 0 26px -6px var(--bp-glow);
  transition: background-color .15s ease, border-color .15s ease, transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
.btn-premium:hover {
  filter: brightness(1.06) saturate(1.05); transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .5), 0 2px 4px rgb(0 0 0 / .2), 0 12px 28px -8px var(--bp-glow), 0 0 38px -4px var(--bp-glow);
}
.btn-premium:active { filter: none; transform: translateY(1px); box-shadow: inset 0 1px 0 rgb(255 255 255 / .3), 0 1px 2px rgb(0 0 0 / .2), 0 0 16px -6px var(--bp-glow); }
[data-theme="dark"] .btn-premium { --bp-glow: color-mix(in oklab, var(--amber) 55%, transparent); }
@media print { .btn-premium { box-shadow: none; background-image: none; } }
.trial-mark { color: var(--amber-text); font-weight: 700; margin-left: 1px; }
.trial-note { display: block; margin-bottom: var(--space-1); color: var(--text); font-weight: 600; }

/* Problem section Keepa chart; stacked Seller Central shots; helix under the Sales DNA modal. */
.problem-shot { margin-top: var(--space-5); max-width: 860px; }
.shot-stack { display: grid; gap: var(--space-4); justify-items: center; }
.helix-under { width: 100%; }

/* Testimonials. Placeholders carry data-placeholder and fail the release check.
   Each card wears the zone band on its top edge, an oversized green quote mark
   behind the words, and an initials badge beside the name. */
.quote { margin: 0; padding: var(--space-6) var(--space-6) var(--space-5); border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; }
.quote::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--red) 0 33.333%, var(--amber) 33.333% 66.666%, var(--green) 66.666% 100%); }
.quote::after { content: "\201C"; position: absolute; top: .02em; right: .14em; z-index: -1; font: 700 8rem/1 Georgia, "Times New Roman", serif; color: var(--green); opacity: .13; pointer-events: none; }
[data-theme="dark"] .quote::after { opacity: .2; }
.quote blockquote { margin: 0; flex: 1; }
.quote blockquote p { margin: 0; font-size: var(--step-2); line-height: 1.4; color: var(--text); font-weight: 600; letter-spacing: -.01em; text-wrap: pretty; }
.quote figcaption { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--rule-soft); display: flex; align-items: center; gap: var(--space-3); font-size: var(--step--1); color: var(--muted); }
.quote-avatar { flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; display: grid; place-items: center; background: var(--green-soft); color: var(--green-text); font: 700 .9rem/1 var(--font-ui); letter-spacing: .02em; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--green) 30%, transparent); }
.quote-who { display: grid; line-height: 1.3; }
.quote-who strong { color: var(--text); font-size: var(--step-0); font-weight: 600; }
.quote-band .quote { max-width: 760px; margin-inline: auto; }
.quote-band .quote blockquote p { font-size: var(--step-3); line-height: 1.32; }
.quote-band { padding-block: var(--space-7); }
.quote-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.quote-band .quote-grid .quote { max-width: none; }
.quote-grid .quote blockquote p, .quote-band .quote-grid .quote blockquote p { font-size: var(--step-1); line-height: 1.45; }
@media (prefers-reduced-motion: no-preference) {
  .quote { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
  .quote:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--green) 45%, var(--rule)); box-shadow: 0 1px 2px rgba(21, 22, 25, .06), 0 22px 44px -22px rgba(21, 22, 25, .35); }
}
@media (max-width: 860px) { .quote-grid { grid-template-columns: minmax(0, 1fr); } .quote-band .quote blockquote p { font-size: var(--step-2); } }
.pill-placeholder { display: inline-block; margin-bottom: var(--space-2); padding: .15em .6em; border-radius: 999px; border: 1px dashed var(--muted); color: var(--muted); font: 600 .7rem/1.4 var(--font-mono); text-transform: uppercase; letter-spacing: .06em; }

/* Trust: copy beside a photo of Brian and Robin. */
.trust-head { align-items: center; }
.trust-head .section-head { margin: 0; }
/* The photo is a portrait: keep it a modest size beside the copy instead of
   filling the wide media column, and give the copy the room. */
.team-photo { margin: 0; max-width: 380px; }
@media (min-width: 861px) {
  .trust-head { grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr); }
  .trust-head .team-photo { justify-self: end; }
}
.team-photo img { width: 100%; height: auto; border-radius: var(--radius); border: 1px solid var(--rule); box-shadow: var(--shadow); display: block; }
.team-photo figcaption { margin-top: var(--space-2); font-size: var(--step--1); color: var(--muted); }

/* Final CTA: the burning twenty beside the close. */
.cta-split { align-items: center; }
.cta-photo { margin: 0; }
.cta-photo img { width: 100%; height: auto; border-radius: var(--radius); display: block; box-shadow: var(--shadow); }

/* Premium page: feature rows with screenshots, alternating sides. */
.feature-rows { display: grid; gap: var(--space-8); }
.feature-row h3 { font-size: var(--step-2); }
.feature-smalls { margin-top: var(--space-7); }
@media (max-width: 860px) { .feature-smalls { grid-template-columns: minmax(0, 1fr); } }

/* Two real testimonials side by side. */
.quote-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Seller Central on home: your inventory on the metro map and in the list, side by side. */
.sc-media { display: grid; grid-template-columns: minmax(0, 2.6fr) minmax(0, 1fr); gap: var(--space-5); align-items: start; margin-top: var(--space-6); }
@media (max-width: 860px) { .sc-media { grid-template-columns: minmax(0, 1fr); } }