/* 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);
  --error: #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-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);
    --error: #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);
  --error: #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 (platform vs backend panel) ---------- */
.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; }
/* key figure: the one number that matters in a piece (Jan, 5-oct-2026: the red box is retired).
   No box, no border, no red: the figure in the brass accent, JetBrains Mono with tabular figures.
   proof-box.js warms it from the text colour to the accent when it enters the screen. Red is only for form errors. */
.keyfig { --key: var(--accent); color: var(--key); font-family: var(--mono); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.ledger .keyfig { --key: var(--ledger-accent); }

/* ---------- 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(--error); }
.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(--error); }
.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; }
  .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 for form errors.
   ===================================================================== */
: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; --error: #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--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: 760px; }   /* arreglos2-jannafta-2: was 640 px, labels of 13 to 16 units read at 6.9 to 8.5 px, now 8.2 to 10.1 px */
  .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; }
}

/* ---------- real photos of Jan (4-oct, web/foto-integracion.md) ---------- */
.plate--photo img, .contact-plate.plate--photo img { object-position: 50% 50%; }
.byline .avatar picture, .byline .avatar img { display: block; width: 44px; height: 44px; object-fit: cover; }
/* about on phones and tablets: the hero opens with the portrait in a wide crop, like every other page opens with its picture */
@media (max-width: 999px) {
  .page-hero--portrait .page-hero-visual { order: -1; margin-top: 0; }
  .page-hero--portrait .plate--photo { aspect-ratio: 2.4 / 1; }
  .page-hero--portrait .plate--photo img { object-position: 50% 0%; }
}
@media (max-width: 719px) {
  .page-hero--portrait .plate--photo { aspect-ratio: 16 / 9; }
}

/* ---------- Google Flow clips (5-oct-2026): the clip sits over its poster picture in the same box ----------
   The poster (AVIF, WebP, JPG) gives the size and the alt text. The video stays transparent until it really plays,
   so with reduced motion, Save-Data, 2G or no JavaScript the visitor sees the poster and nothing moves. */
.plate--clip > picture { display: block; width: 100%; height: 100%; }
.flow-clip { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; opacity: 0; background: transparent; pointer-events: none; transition: opacity 0.6s var(--ease), transform 0.7s var(--ease); }
.flow-clip.is-playing { opacity: 1; }
.plate[data-parallax] > .flow-clip { transform: translate3d(0, var(--py, 0px), 0) scale(1.045); transition: opacity 0.6s var(--ease); }
.card-media--clip { position: relative; }
a.card:hover .card-media--clip .flow-clip { transform: scale(1.03); }
.clip-toggle { position: absolute; z-index: 3; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; padding: 0; cursor: pointer; color: #F5F3EE; background: rgba(11, 13, 18, 0.6); border: 1px solid rgba(245, 243, 238, 0.24); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0.78; transition: opacity var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.clip-toggle:hover, .clip-toggle:focus-visible { opacity: 1; border-color: #E2C07A; }
.clip-toggle:focus-visible { outline: 2px solid #E2C07A; outline-offset: 2px; }
.clip-toggle[hidden] { display: none; }
.clip-toggle svg { display: none; width: 15px; height: 15px; fill: currentColor; }
.clip-toggle .i-arc { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.clip-toggle[data-state="pause"] .i-pause, .clip-toggle[data-state="play"] .i-play, .clip-toggle[data-state="replay"] .i-replay { display: block; }
/* the button sits in the corner with the least detail over the whole clip, measured frame by frame on desktop and phone */
/* article cards with a clip (home, /insights/ and "Read next"): a button cannot live inside the card link, so the link and
   the clip's button share a shell. The button sits over the top right corner of the card media, 12 px in as on the plates
   (the card border is 1 px), never over the card text, and a click on it does not navigate. Hovering the button keeps the
   card in its hover state and the button lifts with it, so nothing jumps */
.card-shell { position: relative; display: flex; flex-direction: column; }
.card-shell > a.card { flex: 1 1 auto; }
.card-shell:hover > a.card { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); transform: translateY(-2px); box-shadow: var(--shadow); }
.card-shell:hover > a.card .more .arrow { transform: translateX(3px); }
.card-shell:hover > a.card .card-media img, .card-shell:hover > a.card .card-media--clip .flow-clip { transform: scale(1.03); }
.card-shell > .clip-toggle { top: 13px; right: 13px; transition: opacity var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform 0.25s var(--ease); }
.card-shell:hover > .clip-toggle { transform: translateY(-2px); }
/* phones and tablets crop the hero plates to 2.3:1: keep the moving part of each clip inside the crop. On phones the
   plates with a still go down to 2.8:1, the clip plates stay at 2.3:1 so the action still fits */
@media (max-width: 719px) {
  .page-hero--split .plate--clip.plate--3x2, .page-hero--article .plate--clip.plate--16x9 { aspect-ratio: 2.3 / 1; }
}
@media (max-width: 999px) {
  .clip-toggle { top: 10px; right: 10px; }
  .card-shell > .clip-toggle { top: 11px; right: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .flow-clip, .clip-toggle { display: none !important; }
}
@media print { .flow-clip, .clip-toggle { display: none !important; } }

/* =====================================================================
   NEW PIECES, 6-oct-2026 (web/mas-assets/plan.md, integration notes in web/mas-assets/integracion-jannafta.md):
   17 riso prints, 13 Flow loops and the code animations (la.css, appended after this file by the build).
   ===================================================================== */
/* riso prints and Flow loops sit on the paper they were printed on: light paper with the 1 px hairline of every plate,
   so in the dark theme they read as a printed sheet laid on the page, or near-black paper for the night prints */
.plate--print.plate--paper { background: #F2F2EC; }
.plate--print.plate--ink { background: #0B0D12; }
.plate--print img { object-position: 50% 50%; }
.plate--strip { aspect-ratio: 3 / 1; }
.band-plate.plate--strip { margin: 0; }
.sep-band--print { padding-block: 0 clamp(28px, 3.6vw, 48px); }
.section:has(+ .sep-band--print) { padding-bottom: clamp(28px, 3.6vw, 48px); }
/* phones and tablets: the opening print keeps the mechanism whole, a little wider than the print but never cut to a
   sliver like the old renders (2.8:1). The moving part of every loop stays inside the crop. */
@media (max-width: 999px) {
  .page-hero--split .plate--print.plate--3x2 { aspect-ratio: 2 / 1; }
  .page-hero--article .plate--print.plate--16x9 { aspect-ratio: 16 / 9; }
}
@media (max-width: 719px) {
  .page-hero--split .plate--print.plate--3x2 { aspect-ratio: 16 / 9; }
  .page-hero--article .plate--print.plate--16x9 { aspect-ratio: 16 / 9; }
}
/* focus of each print and loop inside the phone and tablet crop (measured on the posters) */
@media (max-width: 999px) {
  .plate--print[data-clip="jn-f02-meta-split-channels"] img, .plate--print[data-clip="jn-f02-meta-split-channels"] .flow-clip { object-position: 50% 62%; }
  .plate--print[data-clip="jn-f03-google-three-lamps"] img, .plate--print[data-clip="jn-f03-google-three-lamps"] .flow-clip { object-position: 50% 30%; }
  .plate--print[data-clip="jn-f05-dsp-leaky-bucket"] img, .plate--print[data-clip="jn-f05-dsp-leaky-bucket"] .flow-clip { object-position: 50% 45%; }
  .plate--print[data-clip="jn-f06-ua-payback-tube"] img, .plate--print[data-clip="jn-f06-ua-payback-tube"] .flow-clip { object-position: 50% 48%; }
  .plate--print[data-clip="jn-f07-tracking-leaky-joint"] img, .plate--print[data-clip="jn-f07-tracking-leaky-joint"] .flow-clip { object-position: 50% 48%; }
  .plate--print[data-clip="jn-f08-audit-flashlight"] img, .plate--print[data-clip="jn-f08-audit-flashlight"] .flow-clip { object-position: 50% 60%; }
  .plate--print[data-clip="jn-f09-creative-grid"] img, .plate--print[data-clip="jn-f09-creative-grid"] .flow-clip { object-position: 50% 45%; }
  .plate--print[data-clip="jn-f12-push-zone-cups"] img, .plate--print[data-clip="jn-f12-push-zone-cups"] .flow-clip { object-position: 50% 58%; }
}
/* stage heroes of /services/ and /insights/ with a night print: the object sits right of the copy, never under it */
@media (min-width: 1000px) {
  .stage--print .stage-media img { object-position: 100% 50%; }
}
/* the Flow loop is a print too: no scale, so nothing at the edge of the frame is cut */
.plate--print > .flow-clip { transform: none; }
.card-media--print { background: #F2F2EC; }
.card-media--print img { object-position: 50% 50%; }
a.card:hover .card-media--print img { transform: scale(1.02); }

/* closing card on the home page: copy and button on the left, the JN-F01 loop on the right, never under the text */
.section--closing { padding-bottom: clamp(56px, 7vw, 96px); }
.cta-band--clip { grid-template-columns: minmax(0, 1fr); gap: clamp(22px, 3vw, 36px); }
.cta-band--clip::before { opacity: 0.45; }
.cta-band--clip .cta-band-copy { max-width: 56ch; }
.cta-band--clip .cta-band-clip { aspect-ratio: 1280 / 548; box-shadow: 0 0 0 1px rgba(245, 243, 238, 0.1); }
@media (min-width: 900px) {
  .cta-band--clip { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); align-items: center; }
}
@media (max-width: 899px) {
  .cta-band--clip .cta-band-clip { order: -1; margin: 0; }
}

/* the one motion control of the site lives in the footer, next to the cookie choices */
.footer-actions { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.footer-actions [hidden] { display: none; }

/* 404 opener with the print */
.page-hero--404 .page-hero-copy .eyebrow { margin-top: 8px; }

@media print { .plate--print > .flow-clip { display: none !important; } }
/* "Read next" after an article: its own background, so it never runs into the footer */
.section--readnext { border-top: 1px solid var(--line); }
/* caption under a riso strip, in the voice of the receipts */
.band-caption { margin: 14px auto 0; max-width: 72ch; font-size: 0.95rem; line-height: 1.55; color: var(--muted); text-align: center; }
/* phones and tablets: the night print of /services/ and /insights/ shows whole above the copy, no fade and no text over it */
@media (max-width: 999px) {
  .stage--page.stage--print .stage-media { aspect-ratio: 16 / 9; -webkit-mask-image: linear-gradient(180deg, #000 86%, transparent 100%); mask-image: linear-gradient(180deg, #000 86%, transparent 100%); }
  .stage--page.stage--print .stage-media img { object-position: 50% 50%; }
  .stage--page.stage--print .stage-inner { padding-top: calc(56.25% + 12px); }
}
/* JN-F07 and JN-F11 come out of the export with one dark pixel column on their right edge (poster and video): it is
   clipped, and the paper of the plate shows through instead */
[data-clip="jn-f07-tracking-leaky-joint"] img, [data-clip="jn-f07-tracking-leaky-joint"] .flow-clip,
[data-clip="jn-f11-reconcile-sieve"] img, [data-clip="jn-f11-reconcile-sieve"] .flow-clip,
.card-media--print img[src*="jn-f11-reconcile-sieve-poster"] { clip-path: inset(0 2px 0 0); }

/* =====================================================================
   FIXES AFTER QA 1, 6-oct-2026 (web/mas-assets/arreglos-jannafta.md)
   ===================================================================== */
/* /services/ and /insights/ between 1000 and 1439 px: the night print sat under the lead paragraph (QA 1 measured
   1.85:1 and 1.19:1 on the words over the paper). The copy keeps its own column and the print gets the rest of the
   stage, from the end of that column to the right edge, centred in height. Every edge fades into the ink, so the box
   never shows, and the 16:9 print is cropped by at most 5 % a side, which only takes empty paper (subjects measured on
   the exports: JN-I01 from 30 to 76 % of the width, JN-I16 from 15 to 86 %). It holds from 1000 px up: at 1440 px the
   old layout still put the lead over the folder as soon as the window was taller than about 1000 px (54vh). */
@media (min-width: 1000px) {
  .stage--print { --copy-w: 440px; }
  .stage--print .stage-copy { max-width: var(--copy-w); }
  .stage--print .stage-media {
    top: 50%; bottom: auto; height: auto; width: auto; max-width: none;
    left: calc(clamp(20px, 5.4vw, 84px) + var(--copy-w) + 28px); right: 2.5%;
    aspect-ratio: 1.6; max-height: 88%; translate: 0 -50%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%), linear-gradient(180deg, transparent 0, #000 9%, #000 91%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%), linear-gradient(180deg, transparent 0, #000 9%, #000 91%, transparent 100%);
    mask-composite: intersect;
  }
  .stage--print .stage-media img { object-position: 50% 50%; }
  .stage--print::before { display: none; }
}
@media (min-width: 1200px) {
  .stage--print { --copy-w: 500px; }
}
/* caption under the opening loop of Google Ads (JN-F03) and Fractional advisory (JN-F10): the plate keeps its ratio,
   the sentence that says what the loop teaches sits under it, like the captions of digitalnafta.com */
.fig { margin: 0; }
.hero-fig { min-width: 0; }
.hero-fig .fig-cap { margin: 12px 2px 0; font-size: 0.9rem; line-height: 1.5; color: var(--muted); max-width: 62ch; }
@media (max-width: 999px) {
  .hero-fig .fig-cap { margin-top: 10px; font-size: 0.86rem; }
}
/* phones and tablets: the opening loops of the services show their whole mechanism, including what moves. At 2:1 the
   tablets cut the hopper of JN-F02, the tap of JN-F05, the chute of JN-F06, the card box of JN-F09 and the top post of
   JN-F10 (measured on every frame of each loop, QA after QA 1), so the loops open at 16:9 below 1000 px, like on
   phones, and each one is framed on its own moving parts */
@media (max-width: 999px) {
  .page-hero--split .plate--print.plate--clip.plate--3x2 { aspect-ratio: 16 / 9; }
  .plate--print[data-clip="jn-f02-meta-split-channels"] img, .plate--print[data-clip="jn-f02-meta-split-channels"] .flow-clip { object-position: 50% 29%; }
  .plate--print[data-clip="jn-f05-dsp-leaky-bucket"] img, .plate--print[data-clip="jn-f05-dsp-leaky-bucket"] .flow-clip { object-position: 50% 5%; }
  .plate--print[data-clip="jn-f06-ua-payback-tube"] img, .plate--print[data-clip="jn-f06-ua-payback-tube"] .flow-clip { object-position: 50% 50%; }
  .plate--print[data-clip="jn-f09-creative-grid"] img, .plate--print[data-clip="jn-f09-creative-grid"] .flow-clip { object-position: 50% 46%; }
  .plate--print[data-clip="jn-f12-push-zone-cups"] img, .plate--print[data-clip="jn-f12-push-zone-cups"] .flow-clip { object-position: 50% 45%; }
  .plate--print[data-clip="jn-f10-advisory-stamp"] img, .plate--print[data-clip="jn-f10-advisory-stamp"] .flow-clip { object-position: 50% 55%; }
}
/* free diagnostic from 1200 px: the sample pages start where the copy column ends (the left page reached under the lead
   at 1280 px and the brass line of the surface ran under the hero facts at 1440 px). The copy keeps a 500 px column,
   the pages float from just before its end to the right edge (the first page starts 18 % into the picture), and the
   surface fades out under the copy so no line of it crosses a word */
@media (min-width: 1200px) {
  .stage--audit { --copy-w: 500px; }
  .stage--audit .stage-copy { max-width: var(--copy-w); }
  .stage--audit .stage-float { left: calc(clamp(20px, 5.4vw, 84px) + var(--copy-w) - 40px); right: 2%; width: auto; }
}
@media (min-width: 1000px) {
  .stage--audit .stage-media {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, transparent 30%, #000 56%); mask-image: linear-gradient(90deg, transparent 0, transparent 30%, #000 56%); }
}
/* home on phones: the copy starts under the brass cube of the loop (at 360 and 390 px the eyebrow touched it) */
@media (max-width: 719px) {
  .stage--home .stage-inner { padding-top: calc(42vw + 4px); }
}
/* home between 1200 and 1359 px: the loop was drawn at 86 % of the stage height and its glass panes and brass cube
   reached under the end of the lead lines in windows 900 px tall or more. A little smaller, like at 1000 to 1199 px */
@media (min-width: 1200px) and (max-width: 1359px) {
  .stage--home .stage-media { height: 74%; }
}

/* =====================================================================
   SECOND ROUND, 6-oct-2026 (web/mas-assets/integracion2-jannafta.md): JN-F14 to JN-F17, the real product captures
   PR-01 to PR-04, the strips JN-I12v2 and JN-I18 and the code animations JN-C11 to JN-C13 (la-extra.css).
   ===================================================================== */
/* /services/ and /insights/ open with a Flow loop over its poster: the video takes the same box, crop and fades as the
   night print it replaces, at every width */
.stage--print .stage-media video { object-position: 50% 50%; }
/* product captures in the band between "Deliverables" and "From my own work": flat, whole, on their own dark surface,
   with the caption under the picture and never over it */
.sep-band--product { padding-block: 0 clamp(28px, 3.6vw, 48px); }
.section:has(+ .sep-band--product) { padding-bottom: clamp(28px, 3.6vw, 48px); }
.product-fig { margin: 0; }
.plate--product { background: #0B0D12; }
.plate--product > picture { height: auto; }
.plate--product img { height: auto; object-fit: initial; }
/* links in a caption (full-size sample pages): body text colour with a brass underline, like links in the articles */
.band-caption a, .fig-cap a { color: var(--text); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 0.2em; }
.band-caption a:hover, .fig-cap a:hover { text-decoration-thickness: 2px; }
/* home, "A free 30-minute diagnostic": the two flat pages of the second sample (PR-04) with their caption */
.sample-fig { margin: 4px 0 0; }
.sample-fig .fig-cap { margin: 12px 2px 0; font-size: 0.9rem; line-height: 1.5; color: var(--muted); max-width: 62ch; }
/* a receipts block left with one card (the other one is told by the animation above it) keeps a reading width */
.receipts > .receipt:only-child { grid-column: 1 / -1; max-width: 640px; }
/* JN-F16 and JN-F17 came out of Flow on a greenish near-black (6,9,8 and 8,11,10 measured on the frames and posters)
   while the stage is #0B0D12, so a soft dark box showed around the drawing. The opening media is blended with the
   stage in "lighten": every pixel darker than the ink becomes the ink, the light drawing stays as it is. The paper of
   the loop is the stage itself, in both themes and at every width, with no frame around it. */
.stage--clip .stage-media { mix-blend-mode: lighten; }

/* =====================================================================
   THIRD ROUND, 6-oct-2026 (web/mas-assets/arreglos2-jannafta-1.md): fixes after qa2-jannafta-1
   ===================================================================== */
/* Form placeholders were the browser grey #757575 (4.22:1 light, 4.2:1 dark). They take the muted text colour,
   6.8:1 on the light field and 9.3:1 on the dark one (measured). Firefox dims placeholders with opacity, so it is reset. */
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
#worksheets { scroll-margin-top: 90px; }

/* FOURTH ROUND (arreglos2-jannafta-2, 7-oct-2026)
   Receipts whose "figure" was a word (Halved, Open source, Five figures, From zero, 1+ year, Postback, CPM to CPA) read
   as a plain note: no big-number slot, the sentence in the text colour. */
.receipt--plain p { color: var(--text); }

/* FIFTH ROUND (cierre-arreglos-jn, 7-oct-2026): diagram labels on tablets (qa2-jannafta-3)
   From 720 to 1023 px the wide service diagrams shrank to the column and their labels fell to 7 to 8.7 px. They get the
   phone treatment: a sideways scroll box, with the drawing at the width where its smallest label reads at 11 px
   (--dg-min, measured from the SVG by media.diagram). The hint shows only while that width does not fit. */
@media (min-width: 720px) and (max-width: 1023px) {
  .figure-scroll:not(.seats-figure) .figure-body { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
  .figure-scroll:not(.seats-figure) .figure-body > svg.dg { min-width: var(--dg-min, 0px); }
  .figure-scroll.dg-hint-1024 .figure-hint { display: block; }
}
@media (min-width: 720px) and (max-width: 959px) { .figure-scroll.dg-hint-960 .figure-hint { display: block; } }
@media (min-width: 720px) and (max-width: 909px) { .figure-scroll.dg-hint-910 .figure-hint { display: block; } }
/* The two diagrams with a phone version keep it up to the width where the full drawing reaches 11 px labels:
   the weekly wheel of Fractional below 960 px, the UA loop below 760 px (and 624 px wide above, its labels 11.1 px). */
.figure .dg-desktop svg.dg-ua-loop { max-width: 624px; }
@media (min-width: 640px) and (max-width: 959px) {
  .dg-swap-960 .dg-desktop { display: none; }
  .dg-swap-960 .dg-mobile { display: block; }
  .dg-swap-960 .dg-mobile svg { max-width: 480px; margin-inline: auto; }
}
@media (min-width: 640px) and (max-width: 759px) {
  .dg-swap-760 .dg-desktop { display: none; }
  .dg-swap-760 .dg-mobile { display: block; }
  .dg-swap-760 .dg-mobile svg { max-width: 480px; margin-inline: auto; }
}


/* la.css, jannafta.com: looping code animations JN-C01 to JN-C10 (6-oct-2026).
   Only the site tokens (--text, --muted, --accent, --line, --surface...), so light and dark themes follow the page.
   The markup holds the final state: without JavaScript or with reduced motion this is what a visitor sees. */
.la-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.la-fig { margin: 0; }
.la-fig .figure-body { position: relative; }
.la-fig--svc { margin: 0 0 clamp(28px, 4vw, 44px); }
.la-fig--side { margin-top: 24px; }
.la-mono { font-family: var(--mono); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.la-acc { color: var(--accent); }
.la-k { font-family: var(--mono); font-size: 0.74rem; line-height: 1.4; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.la-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 20px; margin: 0 0 clamp(16px, 2.4vw, 24px); }
.la-title { margin: 0; font-weight: 700; font-size: 1rem; line-height: 1.4; letter-spacing: -0.01em; color: var(--text); }
.la-sub { margin: 0; font-size: 0.875rem; line-height: 1.45; color: var(--muted); }
.la-note { margin: clamp(14px, 2vw, 20px) 0 0; font-size: 0.875rem; line-height: 1.5; color: var(--muted); }
.la-fig figcaption { max-width: 72ch; }

/* ---------- JN-C01, home receipts: every figure arrives with its denominator ---------- */
.la-denom { margin: -4px 0 2px; font-family: var(--mono); font-size: 0.78rem; line-height: 1.45; letter-spacing: 0.01em; color: var(--muted); }
.la-denom b { font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.75rem; margin-right: 0.5em; }
.la-c01 .receipt { transition: border-color 0.45s var(--ease, ease); }
.la-c01 .receipt.la-on { border-top-color: var(--accent); }

/* ---------- JN-C02, reconcile article: 23 claimed, 4 seen ---------- */
.la-c02-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: end; }
.la-c02-side { margin: 0; display: grid; gap: 4px; justify-items: start; }
.la-c02-be { justify-items: end; text-align: right; }
.la-c02-n { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 500; font-size: clamp(2.3rem, 1.7rem + 2.4vw, 3.3rem); line-height: 1; letter-spacing: -0.03em; color: var(--text); }
.la-c02-be .la-c02-n { color: var(--accent); }
.la-c02-u { font-size: 0.875rem; line-height: 1.35; color: var(--muted); }
.la-c02-dots { display: block; width: 100%; max-width: 620px; height: auto; margin: clamp(16px, 2.6vw, 26px) auto clamp(12px, 2vw, 18px); overflow: visible; }
.la-c02-dots .d { fill: var(--text); fill-opacity: 0; stroke: var(--line-strong); stroke-width: 1.5; }
.la-c02-dots .s .d { fill-opacity: 1; stroke-opacity: 0; }
.la-c02-dots .b { fill: var(--accent); }
.la-c02-tag { margin: 0; font-family: var(--mono); font-size: 0.74rem; line-height: 1.45; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }

/* ---------- JN-C03, Apple Ads article: the worksheet that builds itself ---------- */
.la-ws { width: 100%; border-collapse: collapse; font-size: 0.95rem; line-height: 1.35; margin: 0; }
.la-ws th, .la-ws td { padding: 11px 10px; border: 0; border-bottom: 0; text-align: left; vertical-align: middle; background: transparent; }
.la-ws thead th { font-family: var(--mono); font-weight: 500; font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding-top: 0; }
.la-ws thead th.la-ws-v { color: var(--text); }
.la-ws tbody th { font-family: var(--font); font-size: 0.95rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--text); width: 40%; }
.la-ws tbody th small { display: block; font-family: var(--font); font-weight: 400; font-size: 0.8rem; letter-spacing: 0; text-transform: none; color: var(--muted); margin-top: 2px; }
.la-ws .la-ws-v { text-align: right; width: 30%; font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.la-ws tbody tr { position: relative; }
.la-ws tbody tr + tr th, .la-ws tbody tr + tr td { border-top: 1px solid var(--line); }
.la-ws tr.la-ws-sum th, .la-ws tr.la-ws-sum td { border-top: 2px solid var(--text); }
.la-ws tr.la-ws-res th, .la-ws tr.la-ws-res td { border-top: 2px solid var(--text); padding-top: 14px; padding-bottom: 14px; }
.la-ws tr.la-ws-res .la-ws-v { font-size: 1.35rem; font-weight: 500; letter-spacing: -0.02em; }
.la-ws tr.la-ws-res .la-ws-v.la-acc { color: var(--accent); }
.la-ws-bar { display: block; height: 6px; margin: 8px 0 0 auto; width: 100%; max-width: 160px; border-radius: 3px; background: var(--line); overflow: hidden; }
.la-ws-bar i { display: block; height: 100%; width: 100%; border-radius: 3px; background: var(--text); transform-origin: 100% 50%; transform: scaleX(var(--v, 1)); }
.la-ws-v.la-acc .la-ws-bar i { background: var(--accent); }
.la-ws .la-hl th, .la-ws .la-hl td { background: var(--accent-soft); }
.la-ws th, .la-ws td { transition: background-color 0.35s ease; }
@media (max-width: 599px) {
  .la-ws { font-size: 0.875rem; }
  .la-ws tbody th { font-size: 0.875rem; width: 46%; }
  .la-ws th, .la-ws td { padding: 10px 6px; }
  .la-ws thead th { font-size: 0.75rem; letter-spacing: 0.02em; }
  .la-ws tr.la-ws-res .la-ws-v { font-size: 1.15rem; }
  .la-ws .la-ws-v { width: 27%; }
}

/* ---------- JN-C04, Apple Ads service: three groups of search terms ---------- */
.la-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(16px, 2.4vw, 22px); }
.la-bars li { margin: 0; display: grid; grid-template-columns: minmax(150px, 0.34fr) minmax(0, 1fr) 4.2em; gap: 6px 18px; align-items: center; }
.la-bars-k { font-weight: 600; font-size: 0.95rem; line-height: 1.3; color: var(--text); }
.la-bars-track { position: relative; height: 14px; border-radius: 7px; background: var(--line); overflow: hidden; }
.la-bars-fill { position: absolute; inset: 0; border-radius: 7px; background: var(--muted); transform-origin: 0 50%; transform: scaleX(var(--v, 1)); }
.la-bars-v { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 500; font-size: 1.25rem; letter-spacing: -0.02em; text-align: right; color: var(--text); }
.la-bars li.is-key .la-bars-fill { background: var(--accent); }
.la-bars li.is-key .la-bars-v { color: var(--accent); }
.la-bars-n { grid-column: 2 / 4; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.la-bars-n .la-k { color: var(--text); letter-spacing: 0.04em; }
.la-dots { display: grid; grid-template-columns: repeat(auto-fill, 7px); gap: 3px; flex: 1 1 260px; min-width: 0; }
.la-dots i { display: block; width: 7px; height: 7px; border-radius: 2px; background: var(--line); }
.la-dots i.on { background: var(--accent); }
@media (max-width: 599px) {
  .la-bars li { grid-template-columns: minmax(0, 1fr) 4em; gap: 6px 12px; }
  .la-bars-k { grid-column: 1 / 3; }
  .la-bars-track { grid-column: 1; }
  .la-bars-n { grid-column: 1 / 3; }
}

/* ---------- JN-C05, programmatic: two linked bars that fall together ---------- */
.la-c05-plot { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; max-width: 720px; margin-inline: auto; }
.la-c05-col { position: relative; z-index: 1; display: grid; gap: 10px; justify-items: center; text-align: center; padding: 0 8px; }
.la-c05-k { font-weight: 700; font-size: 0.95rem; line-height: 1.3; color: var(--text); }
.la-c05-area { position: relative; width: min(120px, 60%); height: clamp(170px, 26vw, 240px); border-bottom: 2px solid var(--text); }
.la-c05-ghost, .la-c05-bar { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 8px 8px 0 0; height: calc(var(--h) * 100%); }
.la-c05-ghost { border: 1.5px dashed var(--line-strong); border-bottom: 0; }
.la-c05-bar { background: var(--muted); }
.la-c05-col.is-key .la-c05-bar { background: var(--accent); }
.la-c05-v { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 0.95rem; color: var(--muted); white-space: nowrap; }
.la-c05-v b { font-weight: 500; font-size: 1.45rem; letter-spacing: -0.02em; color: var(--text); margin-left: 0.25em; }
.la-c05-col.is-key .la-c05-v b { color: var(--accent); }
.la-c05-say { font-size: 0.875rem; line-height: 1.35; color: var(--muted); }
.la-c05-link { position: absolute; left: 0; top: 0; z-index: 0; width: 100%; height: clamp(170px, 26vw, 240px); pointer-events: none; overflow: visible; }
.la-c05-link line { stroke: var(--line-strong); stroke-width: 1.5; stroke-dasharray: 4 5; vector-effect: non-scaling-stroke; }

/* ---------- JN-C06, iGaming: one line stays flat, the other takes off ---------- */
.la-legend { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 0.875rem; line-height: 1.4; color: var(--muted); }
.la-legend li { margin: 0; display: inline-flex; align-items: center; gap: 8px; }
.la-legend i { display: inline-block; width: 22px; height: 0; border-top: 3px solid var(--text); border-radius: 2px; }
.la-legend i.acc { border-top-color: var(--accent); }
.la-c06-plot { position: relative; height: clamp(220px, 30vw, 300px); margin: 0 4.2em 30px 3.4em; }
.la-c06-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.la-c06-svg .g { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 5; vector-effect: non-scaling-stroke; }
.la-c06-svg .ln { fill: none; stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.la-c06-svg .ln-lead { stroke: var(--text); }
.la-c06-svg .ln-dep { stroke: var(--accent); }
.la-c06-y { position: absolute; left: -3.4em; transform: translateY(-50%); font-family: var(--mono); font-size: 0.72rem; color: var(--muted); }
.la-c06-x { position: absolute; top: calc(100% + 10px); transform: translateX(-50%); font-size: 0.85rem; color: var(--muted); }
.la-c06-pt { position: absolute; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; background: var(--surface); border: 2.5px solid var(--text); }
.la-c06-pt.acc { border-color: var(--accent); }
.la-c06-lab { position: absolute; font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 0.85rem; line-height: 1.25; white-space: nowrap; color: var(--text); }
.la-c06-lab.acc { color: var(--accent); font-weight: 500; font-size: 1rem; }
.la-c06-lab small { display: block; font-family: var(--font); font-size: 0.75rem; color: var(--muted); }

/* ---------- JN-C07, tracking: 10,000 server events and a 48-hour clock ---------- */
.la-c07-grid { display: grid; gap: clamp(18px, 3vw, 40px); align-items: center; }
@media (min-width: 720px) { .la-c07-grid { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); } }
.la-c07-field { position: relative; width: 100%; aspect-ratio: 1 / 1; }
.la-c07-field svg, .la-c07-field canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.la-c07-field canvas { display: none; }
.la-armed .la-c07-field canvas { display: block; }
.la-armed .la-c07-field svg { visibility: hidden; }
.la-c07-field .off { fill: var(--line); }
.la-c07-field .keep { fill: var(--accent); }
.la-c07-read { display: grid; gap: 16px; }
.la-c07-clock { display: flex; align-items: center; gap: 14px; }
.la-c07-ring { width: 54px; height: 54px; flex: none; transform: rotate(-90deg); }
.la-c07-ring circle { fill: none; stroke-width: 4; }
.la-c07-ring .t { stroke: var(--line); }
.la-c07-ring .p { stroke: var(--text); stroke-linecap: round; }
.la-c07-h { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 500; font-size: 1.6rem; letter-spacing: -0.02em; color: var(--text); }
.la-c07-rows { margin: 0; display: grid; gap: 0; }
.la-c07-rows div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 10px 0; border-top: 1px solid var(--line); }
.la-c07-rows div:last-child { border-bottom: 1px solid var(--line); }
.la-c07-rows dt { margin: 0; font-size: 0.92rem; color: var(--muted); }
.la-c07-rows dd { margin: 0; font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 500; font-size: 1.15rem; color: var(--text); white-space: nowrap; }
.la-c07-rows .is-key dd { color: var(--accent); font-size: 1.45rem; }

/* ---------- JN-C08, AI creative: 86 installs, two concepts, compare CPI ---------- */
.la-c08-stage { max-width: 720px; margin: 0 auto; }
.la-c08-pool { margin: 0 0 6px; text-align: center; font-size: 0.875rem; color: var(--muted); }
.la-c08-pool b { font-family: var(--mono); font-weight: 500; color: var(--text); }
.la-c08-svg { display: block; width: 100%; height: auto; overflow: visible; }
.la-c08-svg .bin { fill: none; stroke: var(--line-strong); stroke-width: 1.5; }
.la-c08-svg .bin-small { stroke-dasharray: 5 6; }
.la-c08-svg .i { fill: var(--text); }
.la-c08-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4%; margin-top: 14px; }
.la-c08-col { display: grid; gap: 6px; align-content: start; }
.la-c08-k { font-weight: 700; font-size: 0.95rem; line-height: 1.3; color: var(--text); }
.la-c08-n { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 0.95rem; color: var(--text); }
.la-c08-cpi { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; margin-top: 4px; }
.la-c08-bar { height: 10px; border-radius: 5px; background: var(--line); overflow: hidden; }
.la-c08-bar i { display: block; height: 100%; border-radius: 5px; background: var(--text); transform-origin: 0 50%; transform: scaleX(var(--v, 1)); }
.la-c08-col.is-key .la-c08-bar i { background: var(--accent); }
.la-c08-cv { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 500; font-size: 1.05rem; white-space: nowrap; color: var(--text); }
.la-c08-col.is-key .la-c08-cv { color: var(--accent); }
.la-c08-small { font-size: 0.82rem; line-height: 1.4; color: var(--muted); }
@media (max-width: 599px) { .la-c08-k { font-size: 0.875rem; } .la-c08-cv { font-size: 0.95rem; } }

/* ---------- JN-C09, free audit: seven findings fall into rank ---------- */
.la-c09-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.la-c09-cols, .la-c09-row { display: grid; grid-template-columns: 5.6em minmax(0, 1fr) auto; gap: 4px 14px; align-items: center; }
.la-c09-cols { padding: 0 0 8px; }
.la-c09-cols span:last-child { text-align: right; }
.la-c09-row { position: relative; margin: 0; padding: 11px 0; border-top: 1px solid var(--line); background: var(--surface); }
.la-c09-row:last-child { border-bottom: 1px solid var(--line); }
.la-c09-imp { justify-self: start; font-family: var(--mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; border: 1.5px solid var(--line-strong); color: var(--text); line-height: 1.3; }
.la-c09-row.is-high .la-c09-imp { background: var(--accent); border-color: var(--accent); color: var(--surface); }
.la-c09-t { font-weight: 600; font-size: 0.95rem; line-height: 1.35; color: var(--text); }
.la-c09-eff { font-family: var(--mono); font-size: 0.8rem; color: var(--muted); text-align: right; white-space: nowrap; }
.la-fig .la-c09-body { padding: clamp(16px, 2.4vw, 26px); }
@media (max-width: 599px) {
  .la-c09-cols { display: none; }
  .la-c09-row { grid-template-columns: auto minmax(0, 1fr); }
  .la-c09-eff { grid-column: 2; text-align: left; }
  .la-c09-eff::before { content: "Effort: "; }
}

/* ---------- JN-C10, about: four seats on one line ---------- */
.la-c10-head { margin: 0 0 18px; }
.la-c10-line { list-style: none; margin: 0; padding: 0; position: relative; }
.la-c10-st { position: relative; margin: 0; padding: 0 0 22px 46px; display: grid; gap: 2px; }
.la-c10-when { font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.la-c10-seat { font-weight: 700; font-size: 1.05rem; line-height: 1.3; color: var(--text); }
.la-c10-what { font-size: 0.9rem; line-height: 1.4; color: var(--muted); }
.la-c10-dot { position: absolute; left: 7px; top: 4px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--accent); border: 2px solid var(--accent); z-index: 1; }
.la-c10-st--branch .la-c10-dot { left: 23px; }
.la-c10-seg { position: absolute; left: 7px; top: 11px; bottom: -11px; width: 2px; margin-left: -1px; background: var(--text); transform-origin: 50% 0; transform: scaleY(var(--p, 1)); }
.la-c10-seg--b { left: 23px; }
.la-c10-con { position: absolute; left: 7px; top: 10px; width: 16px; height: 2px; background: var(--text); transform-origin: 0 50%; transform: scaleX(var(--p, 1)); }
.la-c10-today { position: relative; margin: 0; padding: 0 0 0 46px; font-size: 0.9rem; line-height: 1.4; color: var(--muted); }
.la-c10-today b { font-family: var(--mono); font-weight: 500; font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text); margin-right: 0.6em; }
.la-c10-today::before { content: ""; position: absolute; left: 0; top: 3px; width: 30px; height: 12px; border-radius: 6px; background: var(--text); }
.la-c10-run { position: absolute; left: 7px; top: 0; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); opacity: 0; pointer-events: none; z-index: 2; }

/* ---------- additions: shared counters, labels and loop states ---------- */
.la-num { display: inline-block; min-width: var(--w, auto); text-align: right; font-variant-numeric: tabular-nums; }
.la-c07-lab { margin: 0 0 10px; }
.la-c06-plot { margin-right: 5em; }
.la-c06-l0 { left: 0; top: 85%; transform: translate(12px, 4px); }
.la-c06-l1 { left: 100%; top: 4.69%; transform: translate(12px, -50%); }
.la-c06-l2 { left: 100%; top: 99.54%; transform: translate(12px, -50%); }
.la-c06-l3 { right: 0; top: 99.54%; transform: translate(0, calc(-100% - 8px)); text-align: right; font-family: var(--font); font-size: 0.82rem; color: var(--muted); }
.la-c06-l1, .la-c06-l2 { margin-top: 0; }
@media (max-width: 599px) { .la-c06-l3x { display: none; } .la-c06-plot { margin-left: 3em; } }
.la-c09-row { transition: none; }
.la-c09-imp { transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease; }
.la-c09-row.la-pend .la-c09-imp { background: transparent; border-color: var(--line-strong); border-style: dashed; color: var(--muted); }
.la-c10-wrap { position: relative; }
.la-c10-dot { transition: background-color 0.25s ease, border-color 0.25s ease; }
.la-c10-dot.la-hollow { background: var(--surface); border-color: var(--text); }


/* la-extra.css, jannafta.com: JN-C11 to JN-C13 (6-oct-2026, mas-piezas-jannafta). Appended after la.css.
   Site tokens only, so both themes follow the page. The markup holds the final state. */

/* ---------- JN-C11, mobile app UA: the store fee on my own account (P30) ---------- */
.la-c11 .la-denom { margin: 0 0 clamp(16px, 2.4vw, 22px); }
.la-c11-cols { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 3vw, 40px); align-items: end; }
.la-c11-col { margin: 0; display: grid; gap: 8px; justify-items: start; min-width: 0; }
.la-c11-when { font-family: var(--mono); font-size: 0.75rem; line-height: 1.3; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.la-c11-bar { position: relative; display: block; width: 100%; height: clamp(120px, 16vw, 168px); border-radius: 6px; overflow: hidden; background: var(--line); }
.la-c11-fee, .la-c11-keep { position: absolute; left: 0; right: 0; display: block; }
.la-c11-fee { top: 0; height: calc(var(--fee) * 100%); background: repeating-linear-gradient(135deg, var(--line-strong) 0 2px, transparent 2px 7px); transform-origin: 50% 0; }
.la-c11-keep { bottom: 0; height: calc((1 - var(--fee)) * 100%); background: var(--text); opacity: 0.82; transform-origin: 50% 100%; }
.la-c11-col.is-key .la-c11-fee { background: repeating-linear-gradient(135deg, var(--accent) 0 2px, transparent 2px 7px); }
.la-c11-fv { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 500; font-size: clamp(1.25rem, 1rem + 1vw, 1.6rem); line-height: 1.1; letter-spacing: -0.02em; color: var(--text); }
.la-c11-fv > span { color: inherit; }
.la-c11-col.is-key .la-c11-fv { color: var(--accent); }
.la-c11-kv { font-size: 0.875rem; line-height: 1.35; color: var(--muted); }
.la-c11-cpi { display: block; width: 100%; height: 4px; border-radius: 2px; background: transparent; margin-top: 2px; }
.la-c11-cpi i { display: block; height: 100%; width: 100%; border-radius: 2px; background: var(--text); transform-origin: 0 50%; transform: scaleX(var(--v, 1)); }
.la-c11-col.is-key .la-c11-cpi i { background: var(--accent); }
.la-c11-leg { margin: clamp(16px, 2.4vw, 22px) 0 0; display: flex; gap: 10px; align-items: baseline; font-size: 0.875rem; line-height: 1.5; color: var(--muted); }
.la-c11-leg i { flex: 0 0 22px; height: 0; border-top: 4px solid var(--text); border-radius: 2px; transform: translateY(-3px); }
@media (max-width: 599px) {
  .la-c11-cols { gap: 10px; }
  .la-c11-when { font-size: 0.75rem; letter-spacing: 0.02em; }
  .la-c11-kv { font-size: 0.8125rem; }
}

/* ---------- JN-C12, fractional advisory: 39 of 46 first deposits from 4 creatives (P11) ---------- */
.la-c12 .la-denom { margin: 0 0 clamp(16px, 2.4vw, 22px); }
.la-c12-strip { display: grid; grid-template-columns: repeat(23, minmax(0, 1fr)); gap: clamp(3px, 0.6vw, 6px); }
.la-c12-strip .c { display: block; aspect-ratio: 1; border-radius: 3px; background: var(--line-strong); }
.la-c12-strip .c.k { background: var(--accent); }
.la-c12-split { display: grid; grid-template-columns: 39fr 7fr; gap: clamp(3px, 0.6vw, 6px); margin-top: 10px; }
.la-c12-split p { margin: 0; padding-top: 10px; border-top: 2px solid var(--line-strong); display: grid; gap: 4px; align-content: start; }
.la-c12-a { border-top-color: var(--accent) !important; }
.la-c12-n { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 500; font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem); line-height: 1; letter-spacing: -0.02em; color: var(--text); }
.la-c12-a .la-c12-n { color: var(--accent); }
.la-c12-u { font-size: 0.875rem; line-height: 1.4; color: var(--muted); }
.la-c12-u b { color: var(--text); font-weight: 600; }
.la-c12-did { margin: clamp(16px, 2.4vw, 22px) 0 0; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; font-weight: 600; font-size: 0.95rem; line-height: 1.4; color: var(--text); }
@media (max-width: 599px) {
  .la-c12-strip { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .la-c12-split { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .la-c12-split p + p { margin-top: 12px; }
}

/* ---------- JN-C13, native, push and pops: five ways to pay for the same traffic ---------- */
.la-c13 .la-denom { margin: 0 0 clamp(16px, 2.4vw, 22px); }
.la-c13-grid { --lab: clamp(92px, 14vw, 170px); }
.la-c13-heads, .la-c13-row { display: grid; grid-template-columns: var(--lab) minmax(0, 1fr); gap: 0 clamp(10px, 1.6vw, 18px); align-items: center; }
.la-c13-st, .la-c13-track { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(3px, 0.6vw, 6px); }
.la-c13-st span { font-family: var(--mono); font-size: 0.72rem; line-height: 1.25; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); text-align: center; padding-bottom: 8px; }
.la-c13-st b { font-weight: 400; }
.la-c13-st .sh { display: none; }
.la-c13-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(6px, 0.9vw, 10px); }
.la-c13-row { margin: 0; }
.la-c13-m { display: grid; gap: 1px; min-width: 0; }
.la-c13-m b { font-family: var(--mono); font-weight: 500; font-size: 1.05rem; line-height: 1.2; color: var(--text); }
.la-c13-m small { font-size: 0.8rem; line-height: 1.3; color: var(--muted); }
.la-c13-row.is-key .la-c13-m b { color: var(--accent); }
.la-c13-track .s { position: relative; display: block; height: clamp(26px, 3.2vw, 34px); border-radius: 5px; }
.la-c13-track .net { background: var(--line); }
.la-c13-track .risk { background: repeating-linear-gradient(135deg, var(--line-strong) 0 2px, transparent 2px 7px); box-shadow: inset 0 0 0 1px var(--line-strong); }
.la-c13-track .pay { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.la-c13-track .coin { position: absolute; left: 50%; top: 50%; width: clamp(12px, 1.6vw, 16px); height: clamp(12px, 1.6vw, 16px); margin: calc(clamp(12px, 1.6vw, 16px) / -2) 0 0 calc(clamp(12px, 1.6vw, 16px) / -2); border-radius: 50%; background: var(--accent); }
.la-c13-leg { margin: clamp(16px, 2.4vw, 22px) 0 0; }
.la-c13-leg i { width: 18px; height: 12px; border: 0; border-radius: 3px; }
.la-c13-leg i.acc { background: var(--accent); border-radius: 50%; width: 12px; }
.la-c13-leg i.risk { background: repeating-linear-gradient(135deg, var(--line-strong) 0 2px, transparent 2px 6px); box-shadow: inset 0 0 0 1px var(--line-strong); }
.la-c13-leg i.net { background: var(--line); }
@media (max-width: 599px) {
  .la-c13-grid { --lab: 46px; }
  .la-c13-heads, .la-c13-row { column-gap: 8px; }
  .la-c13-st, .la-c13-track { gap: 3px; }
  .la-c13-m small { display: none; }
  .la-c13-st span { font-size: 0.72rem; letter-spacing: 0; text-transform: none; }
  .la-c13-st .f { display: none; }
  .la-c13-st .sh { display: inline; }
}
.la-c13-row.la-on .la-c13-track .pay { box-shadow: inset 0 0 0 2px var(--accent); }
.la-c13-row.la-on .la-c13-m b { color: var(--accent); }
.la-c13-track .s, .la-c13-m b { transition: box-shadow 0.3s ease, color 0.3s ease; }
@media (max-width: 379px) { .la-c13-st span { font-size: 0.66rem; letter-spacing: -0.02em; } }