/* jannafta.com, one stylesheet. Tokens first, then base, layout and components. */
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/plus-jakarta-sans-latin.woff2?v=5d78709c") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/jetbrains-mono-latin.woff2?v=6049469a") format("woff2");
}
/* Metric-matched fallback (premium QA 4-oct): Arial scaled to Plus Jakarta Sans, so the swap does not move the layout */
@font-face { font-family: "Plus Jakarta Sans Fallback"; font-weight: 400 600; src: local("Arial"), local("ArialMT"); size-adjust: 106%; ascent-override: 97.9%; descent-override: 20.9%; line-gap-override: 0%; unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: "Plus Jakarta Sans Fallback"; font-weight: 700 800; src: local("Arial Bold"), local("Arial-BoldMT"); size-adjust: 101.5%; ascent-override: 102.3%; descent-override: 21.9%; line-gap-override: 0%; unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122; }

:root {
  color-scheme: light;
  --bg: #F6F5F1;
  --bg-alt: #EEECE6;
  --surface: #FCFBF8;
  --text: #14161C;
  --muted: #5B6170;
  --line: #DFDCD3;
  --line-strong: #C8C4B8;
  --accent: #7A5C17;
  --accent-soft: rgba(122, 92, 23, 0.09);
  --proof: #C8281E;
  --positive: #15803D;
  --btn-bg: #14161C;
  --btn-fg: #F6F5F1;
  --btn-hover: #2B2E37;
  --ledger-bg: #0B0D12;
  --ledger-fg: #F5F3EE;
  --ledger-muted: #A3A8B4;
  --ledger-line: rgba(245, 243, 238, 0.13);
  --ledger-proof: #FF453A;
  --ledger-accent: #E2C07A;
  --shadow: 0 1px 2px rgba(20, 22, 28, 0.05), 0 12px 32px -12px rgba(20, 22, 28, 0.18);
  --header-bg: rgba(246, 245, 241, 0.86);
  --radius: 16px;
  --radius-sm: 10px;
  --font: "Plus Jakarta Sans", "Plus Jakarta Sans Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0B0D12;
    --bg-alt: #0F1218;
    --surface: #141720;
    --text: #F5F3EE;
    --muted: #A3A8B4;
    --line: #232731;
    --line-strong: #343944;
    --accent: #E2C07A;
    --accent-soft: rgba(226, 192, 122, 0.08);
    --proof: #FF453A;
    --positive: #22C55E;
    --btn-bg: #E2C07A;
    --btn-fg: #0B0D12;
    --btn-hover: #EDD39E;
    --ledger-bg: #141720;
    --ledger-line: rgba(245, 243, 238, 0.12);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 16px 40px -16px rgba(0, 0, 0, 0.7);
    --header-bg: rgba(11, 13, 18, 0.84);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0B0D12;
  --bg-alt: #0F1218;
  --surface: #141720;
  --text: #F5F3EE;
  --muted: #A3A8B4;
  --line: #232731;
  --line-strong: #343944;
  --accent: #E2C07A;
  --accent-soft: rgba(226, 192, 122, 0.08);
  --proof: #FF453A;
  --positive: #22C55E;
  --btn-bg: #E2C07A;
  --btn-fg: #0B0D12;
  --btn-hover: #EDD39E;
  --ledger-bg: #141720;
  --ledger-line: rgba(245, 243, 238, 0.12);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 16px 40px -16px rgba(0, 0, 0, 0.7);
  --header-bg: rgba(11, 13, 18, 0.84);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; text-decoration-color: var(--line-strong); transition: text-decoration-color 0.2s var(--ease), color 0.2s var(--ease); }
a:hover { text-decoration-color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--accent); color: var(--bg); }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.2em; }
li { margin: 0.25em 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 800; letter-spacing: -0.03em; line-height: 1.06; text-wrap: balance; }
h1 { font-size: clamp(2.3rem, 1.5rem + 3.4vw, 4rem); letter-spacing: -0.04em; line-height: 1.02; }
h2 { font-size: clamp(1.75rem, 1.25rem + 2vw, 2.75rem); }
h3 { font-size: 1.18rem; letter-spacing: -0.015em; line-height: 1.3; font-weight: 700; }
h4 { font-size: 1rem; letter-spacing: -0.01em; font-weight: 700; }
strong { font-weight: 700; }
small { font-size: 0.875rem; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--btn-bg); color: var(--btn-fg); padding: 10px 14px; border-radius: 8px; font-weight: 700; text-decoration: none; }
.skip-link:focus { top: 12px; }

/* ---------- layout ---------- */
.container { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: clamp(16px, 5vw, 40px); }
.container--narrow { max-width: 820px; }
.section { padding-block: clamp(44px, 6vw, 84px); }
.section--tight { padding-block: clamp(48px, 6vw, 80px); }
.section--alt { background: var(--bg-alt); }
.section--line { border-top: 1px solid var(--line); }
.section-head { display: grid; gap: 14px; margin-bottom: clamp(32px, 4vw, 52px); max-width: 760px; }
.section-head p { margin: 0; }
.eyebrow { font-family: var(--mono); font-size: 0.78rem; line-height: 1.4; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); font-weight: 500; }
.lead { font-size: clamp(1.1rem, 1rem + 0.45vw, 1.3rem); line-height: 1.55; color: var(--muted); max-width: 62ch; }
.grid { display: grid; gap: 16px; }
@media (min-width: 720px) { .grid-2, .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.split { display: grid; gap: clamp(32px, 5vw, 72px); }
@media (min-width: 1000px) { .split { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: start; } }
.stack > * + * { margin-top: 1rem; }

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 60; background: var(--bg); background: var(--header-bg); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid var(--line); }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; }
.wordmark { font-weight: 800; font-size: 1.2rem; letter-spacing: -0.035em; text-decoration: none; white-space: nowrap; display: inline-flex; align-items: center; gap: 10px; }
.wordmark-mark { width: 26px; height: 26px; border-radius: 7px; background: var(--ledger-bg); color: var(--ledger-accent); font-size: 0.7rem; display: inline-grid; place-items: center; letter-spacing: -0.02em; border: 1px solid var(--ledger-line); }
.nav-links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; list-style: none; margin: 0; padding: 0; }
.nav-links a { text-decoration: none; font-weight: 600; font-size: 0.95rem; color: var(--muted); padding: 6px 0; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--text); }
.nav-links a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--accent); }
.nav-tools { display: flex; align-items: center; gap: 10px; }
.icon-btn { width: 40px; height: 40px; display: inline-grid; place-items: center; border-radius: 10px; border: 1px solid var(--line); background: transparent; color: var(--text); cursor: pointer; padding: 0; transition: border-color 0.2s var(--ease), background 0.2s var(--ease); }
.icon-btn:hover { border-color: var(--line-strong); background: var(--accent-soft); }
.icon-btn svg { width: 18px; height: 18px; }
.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; }
}
.menu-toggle { display: none; }
@media (max-width: 959px) {
  .js .menu-toggle { display: inline-grid; }
  .nav-desktop { display: none; }
  .js .nav-panel { display: none; }
  .js .nav-open .nav-panel { display: block; }
  .nav-panel { border-top: 1px solid var(--line); padding: 8px 0 20px; }
  .nav-panel .nav-links { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-panel .nav-links a { display: block; padding: 14px 0; font-size: 1.05rem; color: var(--text); border-bottom: 1px solid var(--line); }
  .nav-panel .btn { margin-top: 16px; width: 100%; justify-content: center; }
}
@media (min-width: 960px) {
  .nav-panel { display: none !important; }
}
@media (max-width: 379px) {
  .site-header .nav-cta { display: none; }
}
@media (max-width: 959px) {
  .nav-tools .theme-toggle { display: none; }
  .nav-panel .theme-toggle { display: inline-flex; width: auto; height: auto; padding: 10px 14px; gap: 10px; margin-top: 12px; font: inherit; font-weight: 600; font-size: 0.95rem; }
  .ledger { padding: 20px; border-radius: 16px; }
  .ledger-row { padding: 14px 0; }
}
.theme-label { display: none; }
.nav-panel .theme-label { display: inline; }
@media (max-width: 719px) {
  .grid--compact .card { padding: 16px 18px; gap: 4px; }
  .grid--compact .card p { display: none; }
  .grid--compact .card .more { padding-top: 4px; }
  .grid--compact .card h3 { font-size: 1.05rem; }
}

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: 0.55em; padding: 0.86em 1.3em; border-radius: 12px; font-weight: 700; font-size: 0.98rem; line-height: 1.2; text-decoration: none; border: 1px solid transparent; cursor: pointer; font-family: inherit; transition: background 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease), box-shadow 0.2s var(--ease); }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--btn-bg); color: var(--btn-fg); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 8px 20px -10px rgba(0, 0, 0, 0.45); }
.btn-primary:hover { background: var(--btn-hover); }
.btn-ghost { border-color: var(--line-strong); color: var(--text); background: transparent; }
.btn-ghost:hover { border-color: var(--text); }
.btn-sm { padding: 0.62em 1em; font-size: 0.9rem; border-radius: 10px; }
.btn .arrow { transition: transform 0.2s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.text-link { font-weight: 700; color: var(--text); text-decoration: none; display: inline-flex; gap: 0.4em; align-items: center; }
.text-link .arrow { color: var(--accent); transition: transform 0.2s var(--ease); }
.text-link:hover .arrow { transform: translateX(3px); }

/* ---------- hero ---------- */
.hero { padding-block: clamp(28px, 5.5vw, 88px) clamp(32px, 4vw, 56px); position: relative; }
.hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 72px 72px; opacity: 0.35; -webkit-mask-image: radial-gradient(ellipse 70% 60% at 30% 30%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse 70% 60% at 30% 30%, #000 20%, transparent 75%); }
.hero > .container { position: relative; }
.hero-grid { display: grid; gap: clamp(36px, 5vw, 64px); align-items: center; }
@media (min-width: 1000px) { .hero-grid { grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr); } }
.hero h1 { font-size: clamp(2.5rem, 1.3rem + 5.3vw, 5.25rem); letter-spacing: -0.048em; line-height: 0.98; margin: 14px 0 18px; }
.hero h1 .accent { color: var(--accent); }
.hero .lead { margin-bottom: 26px; }
.hero-channels { margin-top: clamp(28px, 4vw, 52px); padding-top: 20px; border-top: 1px solid var(--line); }
.hero-meta { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 24px; font-family: var(--mono); font-size: 0.82rem; color: var(--muted); letter-spacing: 0.02em; }
.hero-meta span { display: inline-flex; align-items: center; gap: 8px; }
.hero-meta span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.page-hero { padding-block: clamp(44px, 6vw, 88px) clamp(36px, 5vw, 64px); border-bottom: 1px solid var(--line); }
.page-hero h1 { margin: 16px 0 18px; max-width: 18ch; }
.page-hero .lead { margin: 0; }
.page-hero--wide h1 { max-width: 24ch; }
.breadcrumb { font-family: var(--mono); font-size: 0.75rem; color: var(--muted); letter-spacing: 0.04em; }
.breadcrumb ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.breadcrumb li { margin: 0; }
.breadcrumb li + li::before { content: "/"; margin-right: 6px; color: var(--line-strong); }
.breadcrumb a { text-decoration: none; }
.breadcrumb a:hover { color: var(--text); }

/* ---------- ledger (the one red box per page) ---------- */
.ledger { transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease); background: var(--ledger-bg); color: var(--ledger-fg); border: 1px solid var(--ledger-line); border-radius: 20px; padding: clamp(22px, 3vw, 34px); box-shadow: var(--shadow); position: relative; overflow: hidden; }
.ledger::after { content: ""; position: absolute; right: -80px; top: -80px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(226, 192, 122, 0.14), transparent 70%); pointer-events: none; }
.ledger-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ledger-accent); margin-bottom: 18px; }
.ledger-head span:last-child { color: var(--ledger-muted); }
.ledger-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; border-top: 1px solid var(--ledger-line); }
.ledger-label { color: var(--ledger-muted); font-size: 0.95rem; line-height: 1.4; }
.ledger-label strong { display: block; color: var(--ledger-fg); font-weight: 600; font-size: 1rem; }
.ledger-label span { display: block; }
.nowrap { white-space: nowrap; }
.hero h1.h1--md { font-size: clamp(2.3rem, 1.3rem + 3.9vw, 4.2rem); max-width: 14ch; }
.ledger-value { font-family: var(--mono); font-weight: 500; font-size: clamp(2.1rem, 1.5rem + 2.2vw, 3rem); line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.ledger-value--muted { color: var(--ledger-muted); text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: rgba(163, 168, 180, 0.5); }
.ledger-quote { margin: 18px 0 0; padding-top: 18px; border-top: 1px solid var(--ledger-line); font-weight: 600; font-size: 1.05rem; line-height: 1.45; }
.ledger-foot { margin: 12px 0 0; font-family: var(--mono); font-size: 0.76rem; color: var(--ledger-muted); line-height: 1.5; }
.redbox { display: inline-block; border: 2px solid var(--ledger-proof); padding: 0.12em 0.32em; border-radius: 3px; box-shadow: 0 0 0 4px var(--ledger-bg), 0 0 0 6px var(--ledger-proof); color: var(--ledger-fg); animation: redbox-in 0.9s var(--ease) 0.5s both; }
.redbox--paper { border-color: var(--proof); box-shadow: 0 0 0 4px var(--surface), 0 0 0 6px var(--proof); color: inherit; }
@keyframes redbox-in { from { box-shadow: 0 0 0 4px var(--ledger-bg), 0 0 0 18px transparent; border-color: transparent; } to { box-shadow: 0 0 0 4px var(--ledger-bg), 0 0 0 6px var(--ledger-proof); border-color: var(--ledger-proof); } }

/* ---------- chips, cards, lists ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.chips li { margin: 0; }
.chip { display: inline-block; font-family: var(--mono); font-size: 0.82rem; letter-spacing: 0.01em; padding: 0.42em 0.8em; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--text); background: var(--surface); white-space: nowrap; }
.chip-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.chip-row .label { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(20px, 2.4vw, 28px); display: flex; flex-direction: column; gap: 10px; transition: border-color 0.25s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s var(--ease); }
.card p { margin: 0; color: var(--muted); }
.card h3 { margin: 0; }
a.card { text-decoration: none; color: inherit; }
a.card:hover { border-color: var(--line-strong); transform: translateY(-2px); box-shadow: var(--shadow); }
.card .more { margin-top: auto; padding-top: 8px; font-weight: 700; font-size: 0.92rem; color: var(--text); display: inline-flex; align-items: center; gap: 0.4em; }
.card .more .arrow { color: var(--accent); transition: transform 0.2s var(--ease); }
a.card:hover .more .arrow { transform: translateX(3px); }
.card-kicker { font-family: var(--mono); font-size: 0.76rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.group-title { display: flex; align-items: baseline; gap: 14px; margin: clamp(32px, 4vw, 48px) 0 16px; }
.group-title:first-child { margin-top: 0; }
.group-title h3 { font-size: 1rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; }
.group-title::after { content: ""; flex: 1; border-top: 1px solid var(--line); transform: translateY(-4px); }
.list-check { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.list-check li { position: relative; padding-left: 30px; margin: 0; }
.list-check li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 16px; height: 9px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); }
.list-dash { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.list-dash li { padding-left: 22px; position: relative; margin: 0; }
.list-dash li::before { content: ""; position: absolute; left: 0; top: 0.8em; width: 10px; border-top: 2px solid var(--accent); }

/* principles / numbered */
.numbered { list-style: none; padding: 0; margin: 0; counter-reset: n; display: grid; gap: 0; }
.numbered > li { counter-increment: n; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 4px 16px; padding: 22px 0; border-top: 1px solid var(--line); margin: 0; }
.numbered > li:last-child { border-bottom: 1px solid var(--line); }
.numbered > li::before { content: counter(n, decimal-leading-zero); font-family: var(--mono); font-size: 0.85rem; color: var(--accent); padding-top: 4px; grid-row: span 2; }
.numbered h3 { margin: 0; }
.numbered p { margin: 0; color: var(--muted); }

/* receipts */
.receipts { display: grid; gap: 28px 32px; }
@media (min-width: 720px) { .receipts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.receipt { border-top: 2px solid var(--text); padding-top: 18px; display: grid; gap: 10px; align-content: start; }
.receipt-figure { font-family: var(--mono); font-weight: 500; font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.4rem); letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.receipt-figure .unit { font-size: 0.55em; color: var(--muted); letter-spacing: 0; margin-left: 0.2em; }
.receipt p { margin: 0; color: var(--muted); }
.receipt-tag { font-family: var(--mono); font-size: 0.76rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }

/* seats timeline */
.seats { display: grid; gap: 0; list-style: none; padding: 0; margin: 0; }
@media (min-width: 900px) { .seats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.seats li { margin: 0; padding: 22px 20px 22px 0; border-top: 2px solid var(--line-strong); position: relative; }
.seats li::before { content: ""; position: absolute; top: -7px; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--bg); border: 2px solid var(--accent); }
.seats .when { font-family: var(--mono); font-size: 0.78rem; color: var(--accent); letter-spacing: 0.04em; }
.seats h3 { margin: 6px 0 6px; }
.seats p { margin: 0; color: var(--muted); font-size: 0.97rem; }

/* steps */
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; counter-reset: s; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.steps li { counter-increment: s; margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; display: grid; gap: 8px; align-content: start; }
.steps li::before { content: counter(s, decimal-leading-zero); font-family: var(--mono); font-size: 0.8rem; color: var(--accent); }
.steps h3 { margin: 0; }
.steps p { margin: 0; color: var(--muted); }

/* callout / cta band */
.cta-band { background: var(--ledger-bg); color: var(--ledger-fg); border-radius: 24px; padding: clamp(28px, 5vw, 56px); display: grid; gap: 24px; align-items: center; border: 1px solid var(--ledger-line); position: relative; overflow: hidden; }
.cta-band::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(245, 243, 238, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(245, 243, 238, 0.05) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: linear-gradient(90deg, transparent, #000); mask-image: linear-gradient(90deg, transparent, #000); pointer-events: none; }
.cta-band > * { position: relative; }
@media (min-width: 900px) { .cta-band { grid-template-columns: minmax(0, 1.4fr) auto; } }
.cta-band h2 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); }
.cta-band p { color: var(--ledger-muted); margin: 12px 0 0; max-width: 56ch; }
.cta-band .btn-primary { background: #E2C07A; color: #0B0D12; }
.cta-band .btn-primary:hover { background: #EDD39E; }
.cta-band .eyebrow { color: #E2C07A; }
.callout { border: 1px solid var(--line); border-left: 3px solid var(--accent); background: var(--surface); border-radius: 12px; padding: 20px 22px; }
.callout p:last-child { margin-bottom: 0; }
.note { font-size: 0.92rem; color: var(--muted); }
.kv { display: grid; gap: 0; margin: 0; }
.kv > div { display: grid; gap: 4px 24px; padding: 16px 0; border-top: 1px solid var(--line); }
.kv > div:last-child { border-bottom: 1px solid var(--line); }
@media (min-width: 760px) { .kv > div { grid-template-columns: 220px minmax(0, 1fr); } }
.kv dt { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); padding-top: 3px; }
.kv dd { margin: 0; }
.kv dd p:last-child, .kv dd ul:last-child { margin-bottom: 0; }

/* FAQ */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 20px 44px 20px 0; position: relative; font-weight: 700; font-size: 1.06rem; line-height: 1.4; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 14px; height: 14px; margin-top: -7px; background: linear-gradient(var(--accent), var(--accent)) center / 14px 2px no-repeat, linear-gradient(var(--accent), var(--accent)) center / 2px 14px no-repeat; transition: transform 0.25s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .answer { padding: 0 0 22px; color: var(--muted); max-width: 70ch; }
.faq .answer p:last-child { margin-bottom: 0; }

/* ---------- forms ---------- */
.form-shell { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: clamp(20px, 3.4vw, 40px); box-shadow: var(--shadow); }
.form { display: grid; gap: 20px; }
.form-row { display: grid; gap: 20px; }
@media (min-width: 720px) { .form-row { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; } }
.field { display: grid; gap: 8px; min-width: 0; }
.field label, .field legend { font-weight: 600; font-size: 0.95rem; }
.field .hint { font-size: 0.85rem; color: var(--muted); font-weight: 400; }
.req { color: var(--accent); }
fieldset.field { border: 0; padding: 0; margin: 0; }
fieldset.field legend { padding: 0; margin-bottom: 8px; }
input[type="text"], input[type="email"], input[type="url"], select, textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--text); background: var(--bg); border: 1px solid var(--line-strong); border-radius: 10px; padding: 0.78em 0.9em; min-height: 48px; transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease); -webkit-appearance: none; appearance: none;
}
textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
select { background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 20px) 52%, calc(100% - 14px) 52%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
input:user-invalid, select:user-invalid { border-color: var(--proof); }
.checks { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); }
.check { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border: 1px solid var(--line-strong); border-radius: 10px; font-size: 0.95rem; cursor: pointer; background: var(--bg); transition: border-color 0.2s var(--ease), background 0.2s var(--ease); }
.check:hover { border-color: var(--accent); }
.check input { width: 18px; height: 18px; accent-color: var(--accent); margin: 0; flex: none; }
.check:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.hp-field { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.form-foot { display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: center; }
.form-legal { font-size: 0.85rem; color: var(--muted); margin: 0; max-width: 52ch; }
.form-status { font-weight: 600; min-height: 1.4em; margin: 0; }
.form-status.is-error { color: var(--proof); }
.btn[disabled] { opacity: 0.6; cursor: wait; }
.thanks { display: grid; gap: 14px; }
.thanks[hidden] { display: none; }
.thanks h3 { font-size: 1.5rem; }
.thanks p { margin: 0; color: var(--muted); }

/* ---------- prose (articles, legal) ---------- */
.prose { max-width: 70ch; }
.prose > * + * { margin-top: 1.05em; }
.prose p, .prose ul, .prose ol { margin-bottom: 0; }
.prose h2 { font-size: clamp(1.45rem, 1.15rem + 1.1vw, 1.95rem); margin-top: 2.1em; letter-spacing: -0.025em; scroll-margin-top: 90px; }
.prose h3 { margin-top: 1.7em; }
.prose li { margin: 0.4em 0; }
.prose a { text-decoration-color: var(--accent); }
.prose blockquote { margin-left: 0; margin-right: 0; padding-left: 18px; border-left: 3px solid var(--accent); font-weight: 600; }
.formula { font-family: var(--mono); font-size: clamp(0.92rem, 0.85rem + 0.3vw, 1.05rem); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; line-height: 1.6; overflow-x: auto; }
.formula b { color: var(--accent); font-weight: 600; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
th, td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.article-meta { display: flex; flex-wrap: wrap; gap: 8px 20px; font-family: var(--mono); font-size: 0.78rem; color: var(--muted); margin-top: 22px; }
.toc { border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; background: var(--surface); }
.toc ol { margin: 8px 0 0; padding-left: 1.2em; }
.toc a { text-decoration: none; }
.toc a:hover { text-decoration: underline; }
.article-layout { display: grid; gap: 40px; }
@media (min-width: 1100px) { .article-layout { grid-template-columns: minmax(0, 1fr) 280px; } .article-aside { position: sticky; top: 96px; align-self: start; } }
.byline { display: flex; gap: 14px; align-items: center; }
.byline .avatar { width: 44px; height: 44px; border-radius: 12px; background: var(--ledger-bg); color: var(--ledger-accent); display: grid; place-items: center; font-weight: 800; font-size: 0.9rem; flex: none; border: 1px solid var(--ledger-line); }
.byline p { margin: 0; font-size: 0.92rem; color: var(--muted); line-height: 1.4; }
.byline strong { color: var(--text); }

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--line); background: var(--bg-alt); padding-block: clamp(48px, 6vw, 72px) 28px; font-size: 0.95rem; }
.footer-grid { display: grid; gap: 32px; }
@media (min-width: 900px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.footer-grid h2 { font-size: 0.75rem; font-family: var(--mono); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.footer-grid li { margin: 0; }
.footer-grid a { text-decoration: none; color: var(--text); }
.footer-grid a:hover { color: var(--accent); }
.footer-brand p { color: var(--muted); max-width: 40ch; }
.footer-legal { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; font-size: 0.8rem; color: var(--muted); }
.footer-legal p { margin: 0; }
.linklike { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 0.22em; }

/* ---------- consent ---------- */
.consent { position: fixed; z-index: 80; left: 16px; right: 16px; bottom: 16px; max-width: 440px; background: var(--surface); color: var(--text); border: 1px solid var(--line-strong); border-radius: 16px; padding: 18px 18px 16px; box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.45); }
.consent[hidden] { display: none; }
.consent p { margin: 0 0 12px; font-size: 0.92rem; color: var(--muted); }
.consent p strong { color: var(--text); }
.consent .btn-row { gap: 8px; }

/* ---------- motion ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.rise { animation: rise 0.7s var(--ease) both; }
.rise-1 { animation-delay: 0.05s; }
.rise-2 { animation-delay: 0.14s; }
.rise-3 { animation-delay: 0.23s; }
.rise-4 { animation-delay: 0.32s; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ---------- utilities ---------- */
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 12px; }
.mt-2 { margin-top: 24px; }
.mt-3 { margin-top: 40px; }
.mb-0 { margin-bottom: 0; }
.center { text-align: center; }
.maxw { max-width: 62ch; }
.pill { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.06em; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--muted); }
.pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--positive); box-shadow: 0 0 0 3px color-mix(in srgb, var(--positive) 20%, transparent); }
.not-found { min-height: 60vh; display: grid; align-content: center; }

/* interaction cues */
@media (hover: hover) {
  .ledger:hover { transform: translateY(-3px); }
  .receipt { transition: border-color 0.25s var(--ease); }
  .receipt:hover { border-top-color: var(--accent); }
  .faq summary:hover { color: var(--accent); }
  .steps li { transition: border-color 0.25s var(--ease), transform 0.25s var(--ease); }
  .steps li:hover { border-color: var(--line-strong); transform: translateY(-2px); }
}
.faq summary { transition: color 0.2s var(--ease); }
.faq details[open] .answer { animation: rise 0.35s var(--ease) both; }

/* compact proof panel and hero on small screens, so the proof sits above the fold */
@media (max-width: 719px) {
  .hero .lead { font-size: 1.04rem; line-height: 1.55; margin-bottom: 20px; }
  .hero-meta { margin-top: 18px; font-size: 0.76rem; gap: 6px 16px; }
  .hero-meta span:nth-child(n+2) { display: none; }
  .hero-grid { gap: 26px; }
  .ledger-rows { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; border-top: 1px solid var(--ledger-line); }
  .ledger-rows--3 { display: block; border-top: 0; }
  .ledger-rows--3 .ledger-row { flex-direction: row; align-items: center; justify-content: space-between; border-top: 1px solid var(--ledger-line); padding: 10px 0; }
  .ledger-rows--3 .ledger-label { min-height: 0; }
  .ledger-rows--3 .ledger-value { font-size: 1.9rem; }
  .ledger-rows .ledger-row { flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 10px; border-top: 0; padding: 14px 0 4px; }
  .ledger-rows .ledger-label { font-size: 0.82rem; }
  .ledger-rows .ledger-label strong { font-size: 0.9rem; }
  .ledger-rows .ledger-value { font-size: 2.1rem; }
  .ledger-quote { font-size: 0.98rem; margin-top: 14px; padding-top: 14px; }
  .ledger-foot { display: none; }
  .ledger-rows .ledger-row { justify-content: flex-start; }
  .ledger-rows .ledger-label { min-height: 2.6em; }
  .ledger-head { margin-bottom: 10px; }
}
/* reading progress, no JavaScript, only where scroll timelines are supported */
@supports (animation-timeline: scroll()) {
  .site-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--accent); transform-origin: 0 50%; transform: scaleX(0); animation: jn-progress linear both; animation-timeline: scroll(root); }
  @keyframes jn-progress { to { transform: scaleX(1); } }
}
@media (prefers-reduced-motion: reduce) { .site-header::after { display: none; } }

.form-intro { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 16px; }
.form-intro .hint { font-size: 0.85rem; color: var(--muted); }
.form-intro--sep { padding-top: 18px; border-top: 1px solid var(--line); }
@media (max-width: 719px) {
  .hide-sm { display: none !important; }
  .hero { padding-top: 22px; }
  .hero h1 { font-size: clamp(2.35rem, 1.3rem + 5.3vw, 3rem); }
  .hero .btn-row .btn { width: 100%; justify-content: center; }
}
@media (min-width: 1000px) {
  .hero .ledger { padding: 34px 36px; }
  .hero .ledger-value { font-size: 3.2rem; }
}
@media (max-width: 719px) {
  .hero .eyebrow { font-size: 0.72rem; letter-spacing: 0.1em; }
}
.chip-row .label, .hero-meta { font-weight: 500; }

.form-next { font-size: 0.88rem; color: var(--muted); margin: 0; padding: 12px 14px; border-radius: 10px; background: var(--accent-soft); }
.form-next strong { color: var(--text); }

/* ---------- services index (home) ---------- */
.svc-index { display: grid; gap: 8px clamp(32px, 4vw, 56px); }
@media (min-width: 1000px) { .svc-index { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
.svc-group + .svc-group { margin-top: 28px; }
.svc-col + .svc-col { margin-top: 20px; }
@media (min-width: 1000px) { .svc-col + .svc-col { margin-top: 0; } }
.svc-group h3 { font-family: var(--mono); font-size: 0.76rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); font-weight: 500; line-height: 1.4; padding-bottom: 12px; border-bottom: 1px solid var(--line-strong); }
.svc-rows { list-style: none; padding: 0; margin: 0; }
.svc-row { margin: 0; }
.svc-row a { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 20px; align-items: center; padding: 16px 10px 16px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; transition: background-color 0.25s var(--ease), padding 0.25s var(--ease); }
.svc-row strong { font-weight: 700; font-size: 1.04rem; letter-spacing: -0.012em; line-height: 1.35; }
.svc-row .s { grid-column: 1; color: var(--muted); font-size: 0.93rem; line-height: 1.5; }
.svc-row .arrow { grid-column: 2; grid-row: 1 / span 2; color: var(--accent); transition: transform 0.25s var(--ease); }
.svc-row a::before { content: ""; position: absolute; left: 0; top: -1px; height: 2px; width: 0; background: var(--accent); transition: width 0.35s var(--ease); }
@media (hover: hover) {
  .svc-row a:hover { background: var(--accent-soft); padding-left: 12px; }
  .svc-row a:hover::before { width: 100%; }
  .svc-row a:hover .arrow { transform: translateX(4px); }
}
.svc-row a:focus-visible { outline-offset: 0; }
@media (max-width: 719px) {
  .svc-row .s { display: none; }
  .svc-row a { padding: 14px 4px 14px 0; }
}

/* ---------- mobile proof panel: the three-row variant stays one line per row ---------- */
@media (max-width: 719px) {
  .ledger-rows.ledger-rows--3 { display: block; border-top: 0; }
  .ledger-rows.ledger-rows--3 .ledger-row { flex-direction: row; align-items: center; justify-content: space-between; gap: 14px; border-top: 1px solid var(--ledger-line); padding: 12px 0; }
  .ledger-rows.ledger-rows--3 .ledger-label { min-height: 0; font-size: 0.8rem; }
  .ledger-rows.ledger-rows--3 .ledger-label strong { font-size: 0.95rem; }
  .ledger-rows.ledger-rows--3 .ledger-value { font-size: 1.85rem; }
  .ledger-rows.ledger-rows--3 .redbox { box-shadow: 0 0 0 3px var(--ledger-bg), 0 0 0 5px var(--ledger-proof); }
  .hero .btn-row .text-link { width: 100%; justify-content: center; padding: 2px 0; }
}

/* ---------- scroll reveal (added by site.js only, so nothing hides without JavaScript) ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); transition-delay: var(--rd, 0ms); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }
@media print { .reveal { opacity: 1 !important; transform: none !important; } }

/* buttons: press and focus feedback */
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.btn-primary:hover { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 12px 26px -12px rgba(0, 0, 0, 0.55); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(1px); }

/* ---------- free diagnostic: apply column and optional fields ---------- */
.apply-list { margin-top: 6px; }
.apply-list li { font-weight: 600; }
.apply-alt { margin-top: 6px; padding: 16px 18px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface); font-size: 0.95rem; }
.apply-alt p { margin: 0; color: var(--muted); }
.apply-alt strong { color: var(--text); }
@media (min-width: 1000px) { .apply-aside { position: sticky; top: 96px; } }
.more-fields { border: 1px dashed var(--line-strong); border-radius: 12px; background: var(--bg); }
.more-fields summary { list-style: none; cursor: pointer; padding: 14px 44px 14px 16px; font-weight: 600; font-size: 0.95rem; position: relative; transition: color 0.2s var(--ease); }
.more-fields summary::-webkit-details-marker { display: none; }
.more-fields summary::after { content: ""; position: absolute; right: 18px; top: 50%; width: 12px; height: 12px; margin-top: -6px; background: linear-gradient(var(--accent), var(--accent)) center / 12px 2px no-repeat, linear-gradient(var(--accent), var(--accent)) center / 2px 12px no-repeat; transition: transform 0.25s var(--ease); }
.more-fields[open] summary::after { transform: rotate(45deg); }
.more-fields summary:hover { color: var(--accent); }
.more-fields-body { display: grid; gap: 18px; padding: 4px 16px 18px; animation: rise 0.35s var(--ease) both; }

/* long chip labels wrap instead of widening the page */
.chips li { max-width: 100%; }
.chip { max-width: 100%; }
@media (max-width: 719px) { .chip { white-space: normal; } }
.split > * { min-width: 0; }
@media (max-width: 719px) {
  .checks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .check { font-size: 0.88rem; padding: 10px; gap: 8px; line-height: 1.3; }
}

/* QA 4-oct: narrow screens (320 to 360 px) and button labels */
.btn-label { min-width: 0; }
.kv > div { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .kv > div { grid-template-columns: 220px minmax(0, 1fr); } }
.kv dd { min-width: 0; overflow-wrap: anywhere; }
.cta-band { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .cta-band { grid-template-columns: minmax(0, 1.4fr) auto; } }
.form, .form-row, .field { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .form-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.form select, .form input, .form textarea { max-width: 100%; min-width: 0; }

/* =====================================================================
   VISUAL SYSTEM (4-oct-2026): stage, plates, figures, icons, ribbon and motion.
   Assets come from web/visual/out through media.py. Rules: web/visual/direccion-de-arte.md.
   The cx images always sit on an ink plate, in both themes. Red is only the proof box.
   ===================================================================== */
:root {
  --t-fast: 160ms;
  --t-reveal: 600ms;
  --t-draw: 900ms;
  --stagger: 70ms;
  --ink: #0B0D12;
  --paper: #F5F3EE;
  --brass: #E2C07A;
  --icon-accent: var(--accent);
  --plate-line: rgba(20, 22, 28, 0.1);
  --tile: rgba(122, 92, 23, 0.08);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --plate-line: rgba(245, 243, 238, 0.09); --tile: rgba(226, 192, 122, 0.08); }
}
:root[data-theme="dark"] { --plate-line: rgba(245, 243, 238, 0.09); --tile: rgba(226, 192, 122, 0.08); }

/* ---------- brand ---------- */
.wordmark { color: var(--text); gap: 10px; }
svg.wordmark-mark { width: 28px; height: 28px; border-radius: 8px; flex: none; box-shadow: 0 0 0 1px var(--line-strong); background: none; border: 0; }
.wordmark-word { height: 18px; width: auto; flex: none; }
.footer-brand .wordmark-word { height: 20px; }
.footer-brand .wordmark { margin-bottom: 4px; }

/* ---------- icons ---------- */
.ico { width: 24px; height: 24px; flex: none; color: currentColor; --icon-accent: var(--accent); }
.glyph { width: 16px; height: 16px; flex: none; color: var(--accent); --icon-accent: var(--accent); }
.ico-inline { width: 18px; height: 18px; display: inline-block; vertical-align: -3px; margin-right: 8px; }
.card-ico, .aud-ico, .rule-ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; flex: none; background: var(--tile); border: 1px solid var(--line); color: var(--text); transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); }
.card-ico .ico, .aud-ico .ico, .rule-ico .ico { width: 22px; height: 22px; }
.card-ico { margin-bottom: 6px; }

/* ---------- cards: hover feedback from the art direction (accent border at 40 %, lift, icon to accent) ---------- */
a.card:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
a.card:hover .card-ico { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.card--media { padding-top: 0; overflow: hidden; }
.card-media { display: block; margin: 0 calc(-1 * clamp(20px, 2.4vw, 28px)) 8px; aspect-ratio: 16 / 9; overflow: hidden; background: var(--ink); border-bottom: 1px solid var(--line); }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); }
a.card:hover .card-media img { transform: scale(1.03); }
.card-media--shot { aspect-ratio: 16 / 10; padding: 16px 16px 0; }
.card-media--shot img { object-fit: cover; object-position: 50% 0; border-radius: 8px 8px 0 0; }
.card-media--paper { aspect-ratio: 16 / 10; }
.card-media--paper img { object-position: 50% 0; }
.card--article h3 { font-size: 1.28rem; line-height: 1.3; }

/* ---------- services index rows (home) with their icon ---------- */
.svc-row a { grid-template-columns: 30px minmax(0, 1fr) auto; }
.svc-row .svc-ico { grid-column: 1; grid-row: 1 / span 2; width: 22px; height: 22px; align-self: start; margin-top: 2px; color: var(--muted); transition: color var(--t-fast) var(--ease); }
.svc-row strong, .svc-row .s { grid-column: 2; }
.svc-row .arrow { grid-column: 3; }
.svc-row a:hover .svc-ico { color: var(--accent); }
@media (max-width: 719px) { .svc-row .svc-ico { grid-row: 1; margin-top: 1px; } }

/* ---------- lists with icons (audiences, fit) ---------- */
.list-icons { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.list-icons li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; align-items: center; margin: 0; padding: 12px 16px 12px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); line-height: 1.5; transition: border-color var(--t-fast) var(--ease), transform 0.25s var(--ease); }
@media (hover: hover) {
  .list-icons li:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); transform: translateX(3px); }
  .list-icons li:hover .aud-ico { color: var(--accent); }
}

/* ---------- rules with icons ---------- */
.numbered--icons > li { grid-template-columns: 44px minmax(0, 1fr); gap: 4px 18px; align-items: start; }
.numbered--icons > li::before { display: none; }
.numbered--icons > li > div { display: grid; gap: 4px; }
@media (hover: hover) { .numbered--icons > li:hover .rule-ico { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); } }

/* ---------- stage: the ink plate that opens a page ---------- */
.hero--stage { padding: 0 0 clamp(36px, 5vw, 64px); }
.hero--stage::before { display: none; }
.stage-wrap { padding: clamp(0px, 1.1vw, 16px) clamp(0px, 1.6vw, 24px) 0; }
.stage {
  position: relative; isolation: isolate; overflow: hidden; max-width: 1440px; margin-inline: auto;
  background: var(--ink); color: var(--paper); color-scheme: dark;
  --bg: #0B0D12; --bg-alt: #0F1218; --surface: #141720; --text: #F5F3EE; --muted: #A9AEB9;
  --line: rgba(245, 243, 238, 0.12); --line-strong: rgba(245, 243, 238, 0.26);
  --accent: #E2C07A; --accent-soft: rgba(226, 192, 122, 0.1); --tile: rgba(226, 192, 122, 0.08);
  --btn-bg: #E2C07A; --btn-fg: #0B0D12; --btn-hover: #EDD39E; --proof: #FF453A;
}
.stage::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(245, 243, 238, 0.07); pointer-events: none; z-index: 5; }
@media (min-width: 720px) { .stage { border-radius: 24px; } }
.stage-media {
  position: absolute; z-index: 0; top: 0; bottom: 0; right: 0; height: 100%; width: auto; aspect-ratio: 16 / 9; max-width: none;
  pointer-events: none; transform: translate3d(0, var(--py, 0px), 0);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28%); mask-image: linear-gradient(90deg, transparent 0, #000 28%);
}
.stage-media > picture { position: absolute; inset: 0; display: block; }
.stage-media img, .stage-media video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 100% 50%; }
.stage-video { opacity: 0; transition: opacity 0.9s var(--ease); background: transparent; }
.stage-video.is-playing { opacity: 1; }
.stage::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(11, 13, 18, 0.9) 0%, rgba(11, 13, 18, 0.62) 30%, rgba(11, 13, 18, 0) 56%); }
.stage-inner { position: relative; z-index: 2; display: grid; align-items: center; min-height: clamp(540px, 70vh, 680px); padding: clamp(40px, 6vw, 84px) clamp(20px, 5.4vw, 84px); }
.stage-copy { max-width: 590px; }
.stage--page .stage-inner { min-height: clamp(420px, 54vh, 540px); }
.hero--stage h1 { font-size: clamp(2.4rem, 1rem + 3.3vw, 4.15rem); letter-spacing: -0.045em; line-height: 1; margin: 14px 0 18px; color: #F5F3EE; }
.hero--stage h1.h1--md { font-size: clamp(2.3rem, 1rem + 2.9vw, 3.75rem); max-width: 15ch; }
.hero--stage .lead { color: #B9BEC8; }
.hero--stage .breadcrumb { color: #9AA0AC; }
.hero--stage .breadcrumb li + li::before { color: rgba(245, 243, 238, 0.3); }
.hero--stage .hero-meta { color: #A9AEB9; }
.hero--stage .text-link { color: #F5F3EE; }
@media (min-width: 1000px) {
  .stage-inner--aside { grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr); gap: clamp(32px, 4vw, 64px); }
  .stage-inner--aside .ledger { justify-self: end; width: 100%; max-width: 440px; }
}
@media (max-width: 999px) {
  .stage-media { inset: 0 0 auto 0; width: 100%; height: auto; aspect-ratio: 16 / 9;
    -webkit-mask-image: linear-gradient(180deg, #000 58%, transparent 100%); mask-image: linear-gradient(180deg, #000 58%, transparent 100%); }
  .stage::before { display: none; }
  .stage-inner { min-height: 0; align-items: end; padding-top: calc(56.25vw - 56px); padding-bottom: clamp(28px, 6vw, 48px); }
  .stage--page .stage-inner { min-height: 0; }
  .stage-inner--aside { gap: 28px; }
}
@media (max-width: 719px) {
  .stage-wrap { padding: 0; }
  .stage-inner { padding-top: calc(56.25vw - 40px); }
}

/* hero loop pause control (WCAG 2.2.2), only shown while the loop plays */
.motion-toggle { position: absolute; z-index: 6; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; padding: 0; cursor: pointer; color: #F5F3EE; background: rgba(11, 13, 18, 0.55); border: 1px solid rgba(245, 243, 238, 0.2); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0.72; transition: opacity var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.motion-toggle:hover, .motion-toggle:focus-visible { opacity: 1; border-color: #E2C07A; }
.motion-toggle .i-pause { width: 10px; height: 11px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.motion-toggle .i-play { display: none; width: 0; height: 0; margin-left: 3px; border-left: 10px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.motion-toggle[aria-pressed="true"] .i-pause { display: none; }
.motion-toggle[aria-pressed="true"] .i-play { display: block; }

/* home: the proof panel hangs over the bottom of the stage, next to the platform ribbon */
.hero-foot { position: relative; z-index: 6; display: grid; gap: 22px; margin-top: 22px; }
.hero-foot > * { min-width: 0; }
@media (min-width: 1000px) {
  .hero-foot { grid-template-columns: minmax(0, 1fr) minmax(340px, 420px); align-items: end; gap: clamp(32px, 4vw, 56px); margin-top: -118px; pointer-events: none; }
  .hero-foot > * { pointer-events: auto; }
  .hero-foot-ribbon { padding-bottom: 4px; }
}
.ledger { --proof: var(--ledger-proof); }
.ledger--float { box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(245, 243, 238, 0.06); }
.ledger--glass { background: rgba(20, 23, 32, 0.74); -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2); border-color: rgba(245, 243, 238, 0.12); box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.6); }

/* ---------- platform ribbon (one glyph per category, the name in text) ---------- */
.ribbon-row { display: grid; gap: 12px; }
.ribbon-row .label { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.ribbon { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.ribbon__track { display: flex; width: max-content; animation: ribbon 70s linear infinite; }
.ribbon__list { display: flex; gap: 10px; list-style: none; margin: 0; padding: 0 10px 0 0; }
.ribbon__list li { margin: 0; display: inline-flex; align-items: center; gap: 8px; padding: 0.42em 0.85em; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); font-family: var(--mono); font-size: 0.82rem; white-space: nowrap; }
.ribbon:hover .ribbon__track, .motion-paused .ribbon__track { animation-play-state: paused; }
@keyframes ribbon { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .ribbon { -webkit-mask-image: none; mask-image: none; }
  .ribbon__track { animation: none; width: auto; }
  .ribbon__list { flex-wrap: wrap; padding: 0; }
  .ribbon__list[aria-hidden="true"] { display: none; }
}
.chip--glyph { display: inline-flex; align-items: center; gap: 8px; }

/* ---------- plates: cx images on ink ---------- */
.plate { position: relative; margin: 0; border-radius: var(--radius); overflow: hidden; background: var(--ink); box-shadow: 0 0 0 1px var(--plate-line), var(--shadow); }
.plate > picture { display: block; width: 100%; height: 100%; }
.plate img, .plate > svg { display: block; width: 100%; height: 100%; object-fit: cover; }
.plate--3x2 { aspect-ratio: 3 / 2; }
.plate--4x5 { aspect-ratio: 4 / 5; }
.plate--16x9 { aspect-ratio: 16 / 9; }
.plate--band { aspect-ratio: 3 / 1; }
@media (max-width: 719px) { .plate--band { aspect-ratio: 2 / 1; } }
.plate[data-parallax] > picture { transform: translate3d(0, var(--py, 0px), 0) scale(1.045); }
.plate figcaption { position: absolute; left: 14px; bottom: 12px; font-family: var(--mono); font-size: 0.72rem; color: #A9AEB9; }
.photo-slot { box-shadow: 0 0 0 1px var(--plate-line); }
.contact-plate { max-width: 420px; }

/* ---------- mockups ---------- */
.mock { display: block; border-radius: var(--radius); overflow: hidden; background: var(--ink); box-shadow: 0 0 0 1px var(--plate-line), var(--shadow); }
.mock img { width: 100%; height: auto; }
.section-head + .mock { margin-top: 4px; }

/* ---------- inner page opener: copy left, plate right ---------- */
.page-hero--split { border-bottom: 1px solid var(--line); }
.page-hero-grid { display: grid; gap: clamp(28px, 4vw, 60px); align-items: center; }
@media (min-width: 1000px) { .page-hero-grid { grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr); } }
.page-hero-copy > * { max-width: 640px; }
.page-hero--split h1 { max-width: 19ch; font-size: clamp(2.2rem, 1.3rem + 2.5vw, 3.55rem); }
.page-hero--article h1 { max-width: 22ch; font-size: clamp(2rem, 1.2rem + 2.1vw, 3.05rem); }
.page-hero--portrait .page-hero-visual { width: 100%; max-width: 360px; justify-self: end; }
@media (max-width: 999px) { .page-hero--portrait .page-hero-visual { max-width: 300px; justify-self: start; } }

/* ---------- figures: inline SVG diagrams ---------- */
.figure { margin: 0; }
.figure-body { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(14px, 2.6vw, 36px); }
.figure--bare .figure-body { background: transparent; border: 0; padding: 0; }
.figure figcaption { margin-top: 12px; font-size: 0.92rem; line-height: 1.5; color: var(--muted); max-width: 72ch; }
.figure svg.dg { display: block; width: 100%; height: auto; }
.figure .dg-ua-loop { max-width: 600px; margin-inline: auto; }
.prose .figure { margin-block: 1.8em; }
.prose .figure-body { padding: clamp(10px, 2vw, 22px); }
.dg-mobile { display: none; }
@media (max-width: 639px) {
  .dg-desktop { display: none; }
  .dg-mobile { display: block; }
  .dg-mobile svg { max-width: 420px; margin-inline: auto; }
}
@media (max-width: 719px) {
  .figure-scroll .figure-body { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
  .figure-scroll .figure-body > svg.dg:not(.dg-ua-loop) { min-width: 640px; }
  .figure-scroll .figure-body > svg.dg-ua-loop { min-width: 0; }
  .seats-figure { display: none; }
}
@media (min-width: 720px) { .seats--fallback { display: none; } }
.seats-figure .figure-body { max-width: 1040px; margin-inline: auto; }

/* ---------- separators ---------- */
.sep-band { padding-block: clamp(4px, 1.4vw, 12px); }
.sep-band > picture { display: block; aspect-ratio: 6 / 1; border-radius: var(--radius); overflow: hidden; background: var(--ink); box-shadow: 0 0 0 1px var(--plate-line); }
.sep-band > picture img { width: 100%; height: 100%; object-fit: cover; }
.sep-band--prose > picture { aspect-ratio: 5 / 1; }
.sep-band--hero { margin-top: clamp(28px, 4vw, 44px); }
.sep-band--hero > picture { aspect-ratio: 8 / 1; }
@media (max-width: 719px) { .sep-band > picture { aspect-ratio: 3 / 1; } .sep-band--hero > picture { aspect-ratio: 4 / 1; } }
.divider { padding-block: clamp(8px, 2vw, 16px); color: var(--line-strong); }
.divider svg { display: block; width: 100%; height: 12px; overflow: visible; }

/* ---------- closing call to action on its image ---------- */
.cta-band--media { isolation: isolate; background: var(--ink); }
.cta-band > .cta-band-media { position: absolute; inset: 0; z-index: -1; display: block; }
.cta-band-media img { width: 100%; height: 100%; object-fit: cover; object-position: 72% 50%; }
.cta-band-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11, 13, 18, 0.94) 0%, rgba(11, 13, 18, 0.7) 46%, rgba(11, 13, 18, 0.12) 100%); }
@media (max-width: 899px) { .cta-band-media::after { background: linear-gradient(180deg, rgba(11, 13, 18, 0.82), rgba(11, 13, 18, 0.94)); } }
.cta-band--media::before { opacity: 0.5; }

/* ---------- layout helpers ---------- */
.split--media { align-items: center; }
.split--center { align-items: center; }
.mb-0 { margin-bottom: 0 !important; }
.steps.steps--stack { grid-template-columns: minmax(0, 1fr); }
.steps--stack li { padding: 20px 22px; }
.kv--timeline > div { position: relative; }
.byline .avatar { background: none; border: 0; overflow: hidden; }
.byline .avatar svg { width: 44px; height: 44px; display: block; }

/* ---------- counters (bible figures only) ---------- */
.count { display: inline-block; min-width: var(--w, auto); text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- text links: underline that grows from the left ---------- */
.text-link { background-image: linear-gradient(currentColor, currentColor); background-size: 0% 1px; background-repeat: no-repeat; background-position: 0 100%; padding-bottom: 2px; transition: background-size 0.35s var(--ease); }
.text-link:hover { background-size: calc(100% - 1.4em) 1px; }

/* ---------- reveal: drawn lines and rising blocks, once ---------- */
.reveal { transition-duration: var(--t-reveal); }
@media (prefers-reduced-motion: reduce) {
  .stage-media, .plate[data-parallax] > picture { transform: none !important; }
  .stage-video { display: none; }
  .text-link { transition: none; }
}
@media print { .stage-video, .motion-toggle, .ribbon__list[aria-hidden="true"] { display: none !important; } }

/* ---------- integration QA, round 1 ---------- */
.stage-copy { max-width: 548px; }
@media (min-width: 1000px) { .hero-foot-ribbon { align-self: start; padding-top: 146px; } }
.seats-figure .figure-body { max-width: 940px; }
.nav-cta { white-space: nowrap; }
@media (max-width: 439px) {
  .nav { gap: 10px; }
  .nav-tools { gap: 8px; }
  svg.wordmark-mark { width: 24px; height: 24px; border-radius: 7px; }
  .wordmark { gap: 8px; }
  .site-header .wordmark-word { height: 15px; }
  .site-header .nav-cta { padding: 0.6em 0.8em; font-size: 0.86rem; }
}
@media (max-width: 999px) { .motion-toggle { right: auto; left: 12px; top: 12px; } }
.figure--square .figure-body { max-width: 760px; margin-inline: auto; }
.figure--square figcaption { max-width: 760px; margin-inline: auto; }
.figure-hint { display: none; margin: 0 0 8px; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.06em; color: var(--muted); }
.figure-hint::after { content: " \2192"; color: var(--accent); }
@media (max-width: 719px) { .figure-scroll:not(.seats-figure):not(.figure--square) .figure-hint { display: block; } }
.article-layout > *, .prose, .figure { min-width: 0; }
.figure { max-width: 100%; }

/* ---------- integration QA, round 2 (judge feedback) ---------- */
/* home: the proof panel lives inside the stage, on the empty floor under the loop's subject */
.hero-foot { margin-top: clamp(20px, 2.6vw, 32px); pointer-events: auto; display: block; }
@media (min-width: 1000px) {
  .hero-foot { margin-top: clamp(22px, 2.4vw, 32px); }
  .stage--home .stage-inner { min-height: clamp(600px, 76vh, 720px); }
  .stage--home .stage-inner--aside { grid-template-columns: minmax(0, 1.1fr) minmax(360px, 0.9fr); }
  .stage--home .ledger { align-self: end; max-width: 430px; margin-bottom: -8px; }
}
.ledger--compact .ledger-head { margin-bottom: 10px; }
.ledger--compact .ledger-rows { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; border-top: 1px solid var(--ledger-line); }
.ledger--compact .ledger-row { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 10px; border-top: 0; padding: 14px 0 6px; }
.ledger--compact .ledger-label { font-size: 0.85rem; min-height: 2.6em; }
.ledger--compact .ledger-label strong { font-size: 0.95rem; }
.hero .ledger--compact .ledger-value { font-size: clamp(2.2rem, 1.6rem + 1.2vw, 2.7rem); }
.ledger--compact .ledger-quote { font-size: 1rem; margin-top: 14px; padding-top: 14px; }
.ledger--compact .ledger-foot { margin-top: 8px; }
/* mobile: a shorter picture above the headline, so the promise and the button sit higher */
@media (max-width: 719px) {
  .stage-media { aspect-ratio: 2 / 1; }
  .stage-inner { padding-top: calc(50vw - 64px); }
  .stage--home .ledger { margin-top: 4px; }
}
/* FAQ and optional fields: the plus folds into a minus, nothing rotates */
.faq summary::after, .more-fields summary::after { transform: none !important; transition: background-size 0.25s var(--ease); }
.faq details[open] summary::after { background-size: 14px 2px, 2px 0; }
.more-fields[open] summary::after { background-size: 12px 2px, 2px 0; }
/* a little more contrast on secondary text and small mono labels */
:root { --muted: #4F5564; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --muted: #AEB3BE; } }
:root[data-theme="dark"] { --muted: #AEB3BE; }
.stage { --muted: #AEB3BE; }
/* home stage on desktop: the loop sits a little smaller and higher, so the panel rests on the empty floor */
@media (min-width: 1000px) {
  .stage--home .stage-media { height: 86%; bottom: auto;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 26%), linear-gradient(180deg, #000 80%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent 0, #000 26%), linear-gradient(180deg, #000 80%, transparent 100%);
    mask-composite: intersect; }
  .stage--home .stage-inner { padding-bottom: 44px; min-height: clamp(620px, 76vh, 720px); }
  .stage--home .ledger { max-width: 420px; padding: 22px 26px 20px; margin-bottom: 0; }
  .stage--home .ledger-label { min-height: 0; }
  .hero.stage--home .ledger--compact .ledger-value, .stage--home .ledger--compact .ledger-value { font-size: 2.35rem; }
  .stage--home .ledger-quote { font-size: 0.97rem; }
}
@media (min-width: 1000px) and (max-width: 1359px) { .stage--home .stage-copy { max-width: 500px; } }
@media (min-width: 1000px) and (max-width: 1199px) {
  .stage--home .stage-media { height: 60%; }
  .stage--home .stage-copy { max-width: 460px; }
  .stage--home .stage-inner--aside { grid-template-columns: minmax(0, 1fr) minmax(0, 380px); }
  .stage--home .ledger { max-width: 380px; padding: 20px 22px 18px; }
  .stage--home .ledger-head { flex-direction: column; }
}
@media (min-width: 1000px) and (max-width: 1199px) { .stage--page .stage-copy, .stage--audit .stage-copy { max-width: 470px; } }

/* ---------- integration QA, round 3 (judge: tighter hero, proof above the fold on phones) ---------- */
@media (min-width: 1200px) { .stage--home .stage-inner { min-height: clamp(600px, 70vh, 680px); padding-top: 56px; } }
@media (max-width: 719px) {
  .stage--home .hero-meta, .stage--home .btn-row .text-link { display: none; }
  .stage--home .lead { font-size: 1rem; line-height: 1.5; margin-bottom: 18px; }
  .stage--home h1 { margin: 10px 0 12px; }
  .stage--home .stage-inner { padding-bottom: 20px; }
  .stage--home .ledger { padding: 16px 18px 14px; }
  .stage--home .ledger-head { flex-wrap: nowrap; font-size: 0.66rem; letter-spacing: 0.1em; margin-bottom: 6px; }
  .stage--home .ledger-label { font-size: 0.78rem; min-height: 0; }
  .stage--home .ledger-label strong { font-size: 0.86rem; }
  .stage--home .ledger-rows .ledger-value { font-size: 1.9rem; }
  .stage--home .ledger-quote { font-size: 0.9rem; margin-top: 10px; padding-top: 10px; }
}
.svc-row .s { font-size: 0.95rem; }
.ribbon-row .label, .chip-row .label { color: var(--muted); }

/* ---------- integration QA, round 4 ---------- */
@media (min-width: 1000px) { .section { padding-block: clamp(44px, 5.2vw, 76px); } }
.seats-figure .figure-body { max-width: 860px; }
.eyebrow { font-size: 0.8rem; }
.hero--stage .btn-primary { font-size: 1.02rem; padding: 0.95em 1.45em; box-shadow: 0 10px 30px -12px rgba(226, 192, 122, 0.55); }
.hero--stage .btn-primary:hover { box-shadow: 0 14px 34px -12px rgba(226, 192, 122, 0.7); }
.stage--home .ledger { border-color: rgba(245, 243, 238, 0.1); }
@media (min-width: 1200px) { .stage--home .ledger--compact .ledger-value { font-size: 2.15rem; } }
/* nav links and chips: the same quiet feedback as the rest */
.nav-desktop .nav-links a { background-image: linear-gradient(var(--accent), var(--accent)); background-size: 0 2px; background-repeat: no-repeat; background-position: 0 100%; transition: color var(--t-fast) var(--ease), background-size 0.3s var(--ease); }
.nav-desktop .nav-links a:hover { background-size: 100% 2px; }
.chip, .ribbon__list li { transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.chip:hover, .ribbon__list li:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--line-strong)); }
/* the ribbon starts after a short pause with the first chip in full view; on phones it is a calm wrapped row */
.ribbon { -webkit-mask-image: linear-gradient(90deg, transparent, #000 2.5%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 2.5%, #000 94%, transparent); }
.ribbon__track { animation-delay: 2.5s; }
@media (max-width: 719px) {
  .ribbon { -webkit-mask-image: none; mask-image: none; }
  .ribbon__track { animation: none; width: auto; }
  .ribbon__list { flex-wrap: wrap; padding: 0; gap: 8px; }
  .ribbon__list[aria-hidden="true"] { display: none; }
}
.footer-grid h2 { color: var(--muted); }
.site-footer { color: var(--text); }

/* ---------- free diagnostic: the sample pre-read in the stage, the three numbers as one strip ---------- */
@media (min-width: 1000px) {
  .stage--audit .stage-media { height: 74%; bottom: auto; top: 3%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24%), linear-gradient(180deg, #000 82%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent 0, #000 24%), linear-gradient(180deg, #000 82%, transparent 100%);
    mask-composite: intersect; }
  .stage--audit .stage-inner { min-height: clamp(580px, 70vh, 660px); padding-bottom: 40px; }
  .stage--audit .stage-inner--aside { grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); }
  .stage--audit .ledger { align-self: end; max-width: 520px; }
}
@media (min-width: 1000px) and (max-width: 1199px) { .stage--audit .stage-media { height: 56%; } }
.ledger--strip { padding: 18px 22px 16px; }
.ledger--strip .ledger-head { margin-bottom: 8px; }
.ledger--strip .ledger-rows, .ledger--strip .ledger-rows.ledger-rows--3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 18px; border-top: 1px solid var(--ledger-line); }
.ledger--strip .ledger-row, .ledger--strip .ledger-rows.ledger-rows--3 .ledger-row { flex-direction: column-reverse; align-items: flex-start; justify-content: flex-end; gap: 6px; border-top: 0; padding: 12px 0 2px; }
.ledger--strip .ledger-label, .ledger--strip .ledger-rows.ledger-rows--3 .ledger-label { font-size: 0.8rem; min-height: 0; }
.ledger--strip .ledger-label strong, .ledger--strip .ledger-rows.ledger-rows--3 .ledger-label strong { font-size: 0.92rem; }
.hero .ledger--strip .ledger-value, .ledger--strip .ledger-rows.ledger-rows--3 .ledger-value { font-size: 2.2rem; }
.ledger--strip .ledger-foot { margin-top: 10px; display: block; }
@media (max-width: 719px) {
  .ledger--strip .ledger-label span, .ledger--strip .ledger-rows.ledger-rows--3 .ledger-label span { display: none; }
  .hero .ledger--strip .ledger-value, .ledger--strip .ledger-rows.ledger-rows--3 .ledger-value { font-size: 1.85rem; }
  .stage--audit .hero-meta { display: none; }
  .stage--audit .lead { font-size: 1rem; line-height: 1.5; margin-bottom: 18px; }
  .stage--audit .stage-media img { object-position: 38% 50%; }
}
.mock--paper { aspect-ratio: 4 / 3; }
.mock--paper img { height: 100%; object-fit: cover; }
/* small mono labels: a touch larger everywhere */
.receipt-tag, .card-kicker, .kv dt { font-size: 0.8rem; }
.breadcrumb { font-size: 0.8rem; }
.hero-meta { font-size: 0.85rem; }
.svc-group h3, .footer-grid h2, .chip-row .label, .ribbon-row .label { font-size: 0.78rem; }
.ledger-foot { font-size: 0.8rem; }
@media (min-width: 1000px) {
  .stage--audit .stage-media {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24%), linear-gradient(180deg, transparent 0, #000 9%, #000 80%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 24%), linear-gradient(180deg, transparent 0, #000 9%, #000 80%, transparent 100%); }
}
@media (max-width: 719px) {
  .stage--audit .stage-inner { padding-top: calc(50vw + 4px); }
  .stage--audit .stage-media { -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%); mask-image: linear-gradient(180deg, #000 70%, transparent 100%); }
}

/* ---------- integration QA, round 5 ---------- */
@media (min-width: 1000px) {
  .section { padding-block: clamp(44px, 4.6vw, 68px); }
  .section-head { margin-bottom: clamp(28px, 3vw, 44px); }
  .page-hero { padding-block: clamp(36px, 4.6vw, 64px) clamp(32px, 4vw, 56px); }
}
@media (max-width: 719px) {
  .stage--page .stage-media, .stage--audit .stage-media { aspect-ratio: 2.3 / 1; }
  .stage--page .stage-inner { padding-top: calc(43.5vw - 48px); }
  .stage--audit .stage-inner { padding-top: calc(43.5vw + 2px); }
  .page-hero--split .plate--3x2, .page-hero--article .plate--16x9 { aspect-ratio: 2 / 1; }
  .page-hero--portrait .page-hero-visual { max-width: none; width: 100%; }
  .page-hero--portrait .plate--4x5 { aspect-ratio: 3 / 1; }
  .page-hero-grid { gap: 24px; }
}
.ledger--strip.ledger--glass { background: rgba(20, 23, 32, 0.66); }

/* ---------- integration QA, round 6 ---------- */
.page-hero .hero-meta { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 22px; font-family: var(--mono); font-size: 0.85rem; color: var(--muted); }
.page-hero .hero-meta span { display: inline-flex; align-items: center; gap: 8px; }
.page-hero .hero-meta span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
@media (max-width: 719px) {
  .page-hero .hero-meta span:nth-child(n+2) { display: none; }
  .page-hero--portrait .page-hero-visual { display: none; }
}
.steps-figure .figure-body { padding: clamp(18px, 2.6vw, 32px) clamp(14px, 2vw, 28px); }
.form { gap: 22px; }

/* ---------- integration QA, round 7 ---------- */
.page-hero--split h1 { font-size: clamp(2.1rem, 1.25rem + 2.1vw, 3.15rem); max-width: 20ch; }
.page-hero--article h1 { font-size: clamp(1.95rem, 1.2rem + 1.9vw, 2.85rem); }
.section--alt { box-shadow: inset 0 1px 0 var(--line), inset 0 -1px 0 var(--line); }
.receipt { border-top-width: 2px; }
.receipt-figure { color: var(--text); }
@media (hover: hover) { .receipt:hover .receipt-figure { color: var(--accent); transition: color var(--t-fast) var(--ease); } }

/* ---------- integration QA, round 8: on phones and tablets every page opens with its picture, like the stage ---------- */
@media (max-width: 999px) {
  .page-hero--split .page-hero-visual { order: -1; }
  .page-hero--split .plate--3x2, .page-hero--article .plate--16x9 { aspect-ratio: 2.3 / 1; }
  .page-hero--portrait .page-hero-visual { display: block; max-width: none; width: 100%; }
  .page-hero--portrait .plate--4x5 { aspect-ratio: 3.2 / 1; }
  .page-hero--split { padding-top: clamp(16px, 4vw, 28px); }
  .page-hero--split .breadcrumb { margin-top: 2px; }
}
@media (min-width: 1200px) { .stage--home .stage-inner { min-height: clamp(580px, 66vh, 640px); } }
@media (max-width: 999px) { .page-hero--portrait .plate--4x5 > svg { width: auto; height: 100%; margin-inline: auto; } }
@media (min-width: 1200px) { .stage--home .stage-inner { min-height: clamp(620px, 76vh, 690px); } }

/* free diagnostic: the approved surface fills the stage, the sample pages float on it */
.stage-float { position: absolute; right: 3%; top: 5%; width: 64%; aspect-ratio: 16 / 9;
  -webkit-mask-image: radial-gradient(ellipse 72% 70% at 50% 48%, #000 58%, transparent 100%);
  mask-image: radial-gradient(ellipse 72% 70% at 50% 48%, #000 58%, transparent 100%); }
.stage-float > picture, .stage-float img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 1000px) {
  .stage--audit .stage-media { height: 100%; top: 0; bottom: 0;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%); mask-image: linear-gradient(90deg, transparent 0, #000 22%);
    -webkit-mask-composite: source-over; mask-composite: add; }
  .stage--audit .stage-float { right: 4%; top: 2%; width: 66%; }
}
@media (max-width: 999px) { .stage-float { right: 6%; top: 0; width: 82%; } }
@media (min-width: 1000px) and (max-width: 1199px) {
  .stage--audit .stage-media { height: 100%; }
  .stage--audit .stage-float { width: 42%; right: 2%; top: 0; }
}

/* ---------- premium QA (4-oct): fixes found in the adversarial review, see web/jannafta-qa-premium.md ---------- */
/* spacing utilities lost against .plate { margin: 0 } (contact plate and the about photo slot sat glued to the text above) */
.plate.mt-1 { margin-top: 12px; }
.plate.mt-2 { margin-top: 24px; }
.plate.mt-3 { margin-top: 40px; }
/* contact: the details column is narrow inside the split, so the label column shrinks and the plate is cropped to 3:2 */
@media (min-width: 760px) { .split .kv > div { grid-template-columns: 148px minmax(0, 1fr); } }
.contact-plate { aspect-ratio: 3 / 2; max-width: 460px; }
.contact-plate img { object-position: 50% 82%; }
/* breadcrumbs stay on one line, the last crumb (the page itself) is cut with an ellipsis */
.breadcrumb ol { flex-wrap: nowrap; min-width: 0; }
.breadcrumb li { flex: none; white-space: nowrap; }
.breadcrumb li:last-child { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.breadcrumb { min-width: 0; max-width: 100%; }
.stage-inner > *, .page-hero-grid > * { min-width: 0; }
/* closing band: text and button on the left, the brass line runs out from behind the copy and reaches the block */
.cta-band--media { grid-template-columns: minmax(0, 1fr); }
.cta-band--media > div:not(.cta-band-media) { max-width: min(620px, 100%); }
@media (min-width: 900px) {
  .cta-band--media { gap: 26px; }
  .cta-band--media > div:not(.cta-band-media) { max-width: 56%; }
  .cta-band--media .cta-band-media::after { background: linear-gradient(90deg, rgba(11, 13, 18, 0.97) 0%, rgba(11, 13, 18, 0.93) 50%, rgba(11, 13, 18, 0.45) 64%, rgba(11, 13, 18, 0.06) 100%); }
  .cta-band--media .cta-band-media img { object-position: 100% 50%; }
}
/* service separator: thinner and with the same air above and below */
.section:has(+ .sep-band) { padding-bottom: clamp(28px, 3.6vw, 48px); }
.section + .sep-band { padding-block: 0 clamp(28px, 3.6vw, 48px); }
.section + .sep-band > picture { aspect-ratio: 9 / 1; }
@media (max-width: 719px) { .section + .sep-band > picture { aspect-ratio: 4 / 1; } }
/* free diagnostic: the glass panel sits on white paper, so it gets enough ink for AA contrast on its labels */
.stage--audit .ledger--glass { background: rgba(17, 20, 28, 0.9); }
/* one clear action per hero: the secondary link steps back (premium QA 4-oct) */
.hero .btn-row .text-link, .page-hero .btn-row .text-link { font-weight: 600; color: var(--muted); }
.hero--stage .btn-row .text-link { color: #B9BEC8; }
.hero .btn-row .text-link:hover, .page-hero .btn-row .text-link:hover { color: var(--text); }
.hero--stage .btn-row .text-link:hover { color: #F5F3EE; }
/* phones: the opening picture stays, a little shorter, so the headline and the button come up sooner */
@media (max-width: 719px) {
  .page-hero--split .plate--3x2, .page-hero--article .plate--16x9 { aspect-ratio: 2.8 / 1; }
  .page-hero--portrait .plate--4x5 { aspect-ratio: 4 / 1; }
}
/* free diagnostic on phones: the sample pages a little smaller, so the offer starts higher */
@media (max-width: 719px) {
  .stage--audit .stage-float { width: 70%; right: 8%; }
  .stage--audit .stage-inner { padding-top: calc(43vw + 4px); }
}
/* about on phones and tablets: the photo slot is still a placeholder, so it follows the introduction instead of leading it */
@media (max-width: 999px) {
  .page-hero--portrait .page-hero-visual { order: 0; margin-top: 4px; }
}