/* Novello V7.2 Experimental — V7.1.2 visual system unchanged; V7.2 adds the experience-proof line,
   the occupancy case, readable reassurance text, chart a11y fixes and mobile founder order (block at the end).
   Novello V7.1 Experimental — Swiss consulting system, warmed slightly.
   One family (Inter), one accent (blue), square corners, 12-column grid.
   V7.1 changes: a neutral-warm wash instead of the cool one, a document sheet,
   founder section and hatched "do uzupełnienia" slots for unfilled content. */

:root {
  --white: #FFFFFF;
  --soft: #F4F3F0;          /* alternate section ground; neutral-warm in V7.1 (V7: cool #F3F5F8) */
  --ink: #0F1B2D;           /* text, rules */
  --muted: #4B5565;         /* secondary text on white (7.4:1) */
  --navy: #0F2742;          /* bars, dark sections */
  --navy-2: #163556;        /* rules and fields inside navy */
  --on-navy: #FFFFFF;
  --on-navy-2: #C3CFDE;     /* secondary text on navy (9:1) */
  --blue: #1D4ED8;          /* action, links, accent phrase (6.7:1 on white) */
  --blue-hover: #1A3FB0;
  --blue-light: #8FB0FF;    /* accent on navy (7.5:1) */
  --line: #DCDCDA;           /* neutral hairline for white and the warm wash */
  --line-strong: #0F1B2D;
  --ghost: #E7E6E2;
  --slot-stroke: #8E949C;    /* dashed frame of unfilled content slots */
  --error: #B42318;
  --error-bg: #FEF3F2;

  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-body: 1.0625rem;
  --fs-small: .9375rem;
  --fs-micro: .8125rem;
  --fs-lead: 1.1875rem;
  --fs-h3: 1.125rem;
  --fs-h2: clamp(2rem, 1.3rem + 2.6vw, 3.25rem);
  --fs-h1: clamp(2.5rem, 1.35rem + 4.4vw, 4.5rem);

  --max: 1280px;
  --gutter: clamp(16px, 4vw, 48px);
  --col-gap: 24px;
  --section: clamp(72px, 9vw, 128px);
  --ease: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
  scrollbar-color: #9C9FA4 var(--soft);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.6;
  font-optical-sizing: auto;
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  caret-color: var(--blue);
}

::selection { background: var(--blue); color: var(--white); }

h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
table { border-collapse: collapse; }
svg { display: block; }
a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1px; }
button { font: inherit; color: inherit; }

:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.section--navy :focus-visible { outline-color: var(--blue-light); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }

.skip { position: absolute; left: var(--gutter); top: -80px; z-index: 50; background: var(--blue); color: var(--white); padding: 12px 16px; font-weight: 600; }
.skip:focus { top: 12px; }

.proto-bar { background: var(--ink); color: var(--on-navy-2); font-size: var(--fs-micro); text-align: center; padding: 6px var(--gutter); }

/* ---------- Type ---------- */

.h2 {
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.03em;
  text-wrap: balance;
  max-width: 18em;
}
.h3 { font-size: var(--fs-h3); font-weight: 600; line-height: 1.3; letter-spacing: -.01em; }
.h3--spaced { margin-top: 48px; }
.h3--list { margin-top: 36px; }
.body { color: var(--muted); max-width: 60ch; text-wrap: pretty; }
.lead { font-size: var(--fs-lead); line-height: 1.6; color: var(--muted); max-width: 46ch; text-wrap: pretty; }
.fine { font-size: var(--fs-small); line-height: 1.5; color: var(--muted); }
.accent { color: var(--blue); }

/* ---------- Controls ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 24px;
  background: var(--blue); color: var(--white);
  border: 0; border-radius: 0; cursor: pointer;
  font-size: 1rem; font-weight: 600; letter-spacing: -.005em;
  text-decoration: none; white-space: nowrap;
  transition: background-color .2s ease;
}
.btn:hover { background: var(--blue-hover); }
.btn:active { background: var(--navy); }
.btn--sm { min-height: 42px; padding: 0 18px; font-size: .875rem; }
.btn--block { width: 100%; }
.section--navy .btn { background: var(--white); color: var(--navy); }
.section--navy .btn:hover { background: #DCE6FF; }
.section--navy .panel .btn { background: var(--blue); color: var(--white); }
.section--navy .panel .btn:hover { background: var(--blue-hover); }
.section--navy .panel .btn:active { background: var(--navy); }
.panel :focus-visible { outline-color: var(--blue); }

.textlink {
  background: none; border: 0; padding: 0 0 2px; cursor: pointer;
  font-weight: 600; color: var(--ink); text-decoration: none;
  border-bottom: 2px solid currentColor;
  transition: color .2s ease;
}
.textlink:hover { color: var(--blue); }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.actions--section { margin-top: 40px; }

/* ---------- Masthead ---------- */

.masthead { position: sticky; top: 0; z-index: 30; background: rgba(255, 255, 255, .96); border-bottom: 1px solid var(--line); }
@supports (backdrop-filter: blur(8px)) { .masthead { background: rgba(255, 255, 255, .88); backdrop-filter: saturate(1.4) blur(8px); } }
.masthead__inner { display: flex; align-items: center; gap: 32px; min-height: 68px; }
.logo { font-size: 1.375rem; font-weight: 700; letter-spacing: -.035em; text-decoration: none; color: var(--ink); }
.logo span { color: var(--blue); }
.logo--small { font-size: 1.125rem; color: var(--on-navy); }
.logo--small span { color: var(--blue-light); }
.nav { margin-left: auto; }
.nav ul { display: flex; gap: 4px; }
.nav a { display: block; padding: 8px 12px; font-size: var(--fs-small); font-weight: 500; color: var(--muted); text-decoration: none; transition: color .2s ease; }
.nav a:hover { color: var(--ink); }
.menu-toggle {
  display: none; align-items: center; gap: 10px; min-height: 42px; padding: 0 12px;
  background: none; border: 1px solid var(--line); cursor: pointer; font-size: var(--fs-small); font-weight: 500;
}
.menu-toggle svg { width: 18px; height: 13px; }
.menu-toggle path { stroke: var(--ink); stroke-width: 1.8; fill: none; }

/* ---------- Hero ---------- */

.hero { position: relative; padding: clamp(36px, 3.6vw, 52px) 0 clamp(56px, 7vw, 96px); overflow: hidden; }
.guides { position: absolute; inset: 0; pointer-events: none; }
.guides__grid { height: 100%; display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--col-gap); }
.guides__grid i { border-inline: 1px solid rgba(15, 27, 45, .04); }

.hero__grid { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: start; }
.hero__title {
  grid-column: 1 / span 9;
  font-size: var(--fs-h1);
  font-weight: 600;
  line-height: 1.03;
  letter-spacing: -.038em;
  text-wrap: balance;
}
.hero__copy { grid-column: 1 / span 5; margin-top: clamp(24px, 2.4vw, 32px); }
.hero__copy .actions { margin-top: 28px; }
.hero__copy .fine { margin-top: 14px; }

/* Chart: the signature */
.chart { grid-column: 7 / span 6; margin-top: clamp(24px, 2.4vw, 32px); border: 1px solid var(--line); background: var(--white); padding: 20px 22px 18px; }
.chart__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 20px; }
.chart__title { font-size: var(--fs-small); font-weight: 600; }
.toggle { display: inline-flex; border: 1px solid var(--line); }
.toggle__btn { min-height: 34px; padding: 0 12px; border: 0; background: var(--white); cursor: pointer; font-size: var(--fs-micro); font-weight: 500; color: var(--muted); transition: background-color .2s ease, color .2s ease; }
.toggle__btn + .toggle__btn { border-left: 1px solid var(--line); }
.toggle__btn:hover { color: var(--ink); }
.toggle__btn[aria-pressed="true"] { background: var(--ink); color: var(--white); }

.bars { width: 100%; margin-top: 16px; font-size: var(--fs-small); }
.bar th { width: 7.5rem; padding: 4px 12px 4px 0; text-align: left; font-weight: 500; white-space: nowrap; }
.bar td { padding: 4px 0; }
.bar__track { position: relative; display: block; height: 20px; background: var(--soft); overflow: hidden; }
.bar__fill {
  position: absolute; inset: 0 auto 0 0; width: calc(var(--v) / 42 * 100%);
  background: var(--navy);
  transform-origin: left center;
  transition: transform .6s var(--ease), opacity .3s ease;
}
.bar--end .bar__fill { background: var(--blue); }
.bar__ghost {
  position: absolute; inset: 0; display: flex; align-items: center; padding-left: 10px;
  font-size: var(--fs-micro); color: var(--muted);
  background: repeating-linear-gradient(135deg, transparent 0 6px, rgba(15, 27, 45, .06) 6px 7px);
  opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s;
}
.bar__n { width: 2.5rem; padding-left: 12px; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.n-leads, .note-leads { display: none; }

.chart[data-view="leads"] .bar--hidden-in-leads .bar__fill { transform: scaleX(0); opacity: 0; }
.chart[data-view="leads"] .bar--hidden-in-leads .bar__ghost { opacity: 1; visibility: visible; }
.cap-leads { display: none; }
.chart[data-view="leads"] .cap-full { display: none; }
.chart[data-view="leads"] .cap-leads { display: inline; }
.chart[data-view="leads"] .n-full, .chart[data-view="leads"] .note-full { display: none; }
.chart[data-view="leads"] .n-leads, .chart[data-view="leads"] .note-leads { display: inline; }
.chart[data-view="leads"] .bar--hidden-in-leads .bar__n { color: var(--muted); font-weight: 500; }

.chart__note { margin-top: 12px; font-size: var(--fs-small); }
.chart__label { margin-top: 8px; font-size: var(--fs-micro); color: var(--muted); }
.chart__title small { display: block; font-size: var(--fs-micro); font-weight: 400; color: var(--muted); margin-top: 2px; }

/* The one authored motion: bars fill in route order on first view */
@keyframes fill-in { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: no-preference) {
  .chart.is-intro .bar__fill { animation: fill-in .9s var(--ease) both; }
  .chart.is-intro .bar:nth-child(2) .bar__fill { animation-delay: .12s; }
  .chart.is-intro .bar:nth-child(3) .bar__fill { animation-delay: .24s; }
  .chart.is-intro .bar:nth-child(4) .bar__fill { animation-delay: .36s; }
  .chart.is-intro .bar:nth-child(5) .bar__fill { animation-delay: .48s; }
}
@media (prefers-reduced-motion: reduce) {
  .bar__fill, .bar__ghost { transition: none; }
}

.facts { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--col-gap); margin-top: clamp(36px, 3.4vw, 48px); border-top: 2px solid var(--line-strong); }
.facts > div { padding-top: 16px; }
.facts dt { font-size: var(--fs-micro); font-weight: 500; color: var(--muted); }
.facts b { display: block; margin-top: 4px; font-size: 1.375rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.25; }
.facts span { display: block; margin-top: 4px; font-size: var(--fs-small); color: var(--muted); }

/* ---------- Sections ---------- */

.section { padding-block: var(--section); }
.section--soft { background: var(--soft); }
.section--navy { background: var(--navy); color: var(--on-navy); }
.section--navy .body { color: var(--on-navy-2); }
.section__head { display: grid; gap: 18px; padding-top: 20px; border-top: 2px solid var(--line-strong); }
.section--navy .section__head { border-top-color: var(--on-navy); }

.split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
.split__head { grid-column: 1 / span 5; display: grid; gap: 18px; align-content: start; padding-top: 20px; border-top: 2px solid var(--line-strong); }
.split__body { grid-column: 7 / span 6; padding-top: 20px; border-top: 2px solid var(--line-strong); }

.rows { margin-top: 12px; }
.rows > div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.rows dt { font-weight: 600; letter-spacing: -.01em; }
.rows dt small { display: block; margin-top: 2px; font-size: var(--fs-micro); font-weight: 500; color: var(--muted); letter-spacing: 0; font-variant-numeric: tabular-nums; }
.rows dd { color: var(--muted); font-size: var(--fs-small); }

.nofit { margin-top: 12px; }
.nofit li { position: relative; padding: 12px 0 12px 28px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: var(--fs-small); }
.nofit li::before { content: ""; position: absolute; left: 2px; top: 1.45em; width: 14px; height: 2px; background: var(--muted); }

/* Steps */
.steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: repeat(4, auto); column-gap: var(--col-gap); row-gap: 0; margin-top: clamp(40px, 5vw, 64px); }
.step { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 10px; padding-top: 16px; border-top: 1px solid var(--line-strong); }
.step__n { font-size: var(--fs-small); font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.step__title { font-size: 1.25rem; font-weight: 600; letter-spacing: -.02em; }
.step p { font-size: var(--fs-small); color: var(--muted); }
.step .step__out { margin-top: 6px; align-self: start; padding-top: 10px; border-top: 1px solid var(--line); color: var(--ink); font-weight: 500; }
.step__out span { display: block; font-size: var(--fs-micro); font-weight: 500; color: var(--muted); }
.loopnote { display: flex; align-items: center; gap: 12px; margin-top: 36px; font-size: var(--fs-small); color: var(--muted); max-width: 70ch; }
.loopnote svg { width: 22px; height: 22px; flex: none; }
.loopnote path { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: square; }

/* Roles */
.roles { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); margin-top: 40px; }
.roles > div { grid-column: span 6; }
.roles__who { font-size: 1.25rem; font-weight: 600; letter-spacing: -.02em; padding-bottom: 12px; border-bottom: 1px solid var(--on-navy-2); }
.roles li { padding: 14px 0; border-bottom: 1px solid var(--navy-2); color: var(--on-navy-2); }
.roles__note { margin-top: 16px; font-size: var(--fs-small); color: var(--on-navy); max-width: 46ch; }
.roles__rule { grid-column: 1 / span 9; margin-top: 48px; font-size: clamp(1.375rem, 1rem + 1.2vw, 1.875rem); font-weight: 500; line-height: 1.3; letter-spacing: -.02em; color: var(--on-navy); text-wrap: balance; }

/* Audit: lists on the left, the document sheet on the right */
.ticks { margin-top: 12px; }
.ticks li { position: relative; padding: 14px 0 14px 30px; border-top: 1px solid var(--line); font-size: var(--fs-small); color: var(--muted); }
.ticks li:last-child { border-bottom: 1px solid var(--line); }
.ticks li b { color: var(--ink); font-weight: 600; }
.ticks li::before {
  content: ""; position: absolute; left: 2px; top: 19px; width: 14px; height: 8px;
  border-left: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(-45deg);
}
.split__body--doc { border-top: 0; padding-top: 0; }

/* The document: two stacked white sheets, flat and hairline-framed (No Lift Rule) */
.split--audit { grid-template-areas: "head head head head head . doc doc doc doc doc doc" "lists lists lists lists lists . doc doc doc doc doc doc"; grid-template-rows: auto 1fr; align-items: start; }
.split--audit > .split__head { grid-area: head; }
.split--audit > .audit__lists { grid-area: lists; }
.split--audit > .split__body--doc { grid-area: doc; }
.doc__stack { position: relative; }
.doc__sheet { position: relative; background: var(--white); border: 1px solid var(--line); padding: clamp(20px, 2.6vw, 34px); }
.doc__mast { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--line-strong); font-size: var(--fs-micro); font-weight: 500; color: var(--muted); }
.doc__brand { font-size: 1rem; font-weight: 700; letter-spacing: -.035em; color: var(--ink); }
.doc__brand span { color: var(--blue); }
/* 2026-10-19: the sheet mirrors the delivered Client Audit Brief v0.4 (src/client-brief/render.ts):
   title and scope lead, facility row over a hairline, numbered sections on 2px ink rules with a
   heading rail when the sheet is wide enough, warm-wash observation card with an ink number square,
   "Co zweryfikować" in the one blue, limitations as an unnumbered colophon on a hairline. */
.doc__sheet { container-type: inline-size; }
.doc__title { margin-top: 22px; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 600; line-height: 1.08; letter-spacing: -.032em; text-wrap: balance; }
.doc__lead { margin-top: 8px; max-width: 52ch; font-size: var(--fs-small); color: var(--muted); }
.doc__id { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 6px 24px; margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--line); }
.doc__name { display: block; font-size: 1.0625rem; font-weight: 600; line-height: 1.25; letter-spacing: -.02em; color: var(--ink); }
.doc__city, .doc__meta { display: block; font-size: var(--fs-micro); color: var(--muted); }
.doc__sec { display: grid; gap: 10px; margin-top: 20px; padding-top: 12px; border-top: 2px solid var(--ink); }
.doc__h { font-size: var(--fs-small); font-weight: 600; line-height: 1.3; letter-spacing: -.01em; color: var(--ink); }
.doc__n { display: block; margin-bottom: 2px; font-size: .75rem; font-weight: 500; letter-spacing: 0; color: var(--muted); font-variant-numeric: tabular-nums; }
.doc__body { min-width: 0; font-size: var(--fs-small); }
.doc__body b { font-weight: 600; }
.doc__note { margin-top: 4px; font-size: var(--fs-micro); color: var(--muted); }
.doc__body > .doc__note:first-child { margin-top: 0; }
.doc__rest { margin-top: 20px; }
/* Sections not shown in full: one compact row each, number inline, so the sheet stays close to its former height */
.doc__rest li { display: grid; gap: 2px; padding: 10px 0 10px 2.5rem; border-top: 2px solid var(--ink); font-size: var(--fs-micro); }
.doc__rest li:last-child { padding-bottom: 0; }
.doc__rest b { font-size: var(--fs-small); font-weight: 600; line-height: 1.3; letter-spacing: -.01em; color: var(--ink); }
.doc__rest .doc__n { display: inline-block; width: 2.5rem; margin: 0 0 0 -2.5rem; font-size: .75rem; }
.doc__rest li > span { color: var(--muted); }
.doc__rest .doc__colophon { margin-top: 8px; padding-left: 0; border-top: 1px solid var(--line); }
.doc__rest .doc__colophon b { font-size: var(--fs-micro); letter-spacing: 0; }
.doc__caption { margin-top: 14px; font-size: var(--fs-micro); color: var(--muted); max-width: 52ch; }

.obs { background: var(--soft); padding: 14px 16px 8px; }
.obs__title { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; font-size: 1rem; font-weight: 600; line-height: 1.35; letter-spacing: -.01em; }
.obs__n { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-top: 1px; background: var(--ink); color: var(--white); font-size: .75rem; font-weight: 600; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.obs__body { margin-top: 10px; }
.obs__body > div { padding: 8px 0; border-top: 1px solid var(--line); }
.obs__body dt { font-size: var(--fs-micro); font-weight: 600; color: var(--muted); }
.obs__body dd { font-size: var(--fs-small); color: var(--ink); }
.obs__verify dt { color: var(--blue); }

@container (min-width: 500px) {
  .doc__sec { grid-template-columns: minmax(0, 9.5rem) minmax(0, 1fr); gap: 0 20px; align-items: start; }
  .obs__body { margin-left: 34px; }
}

/* After you submit: who does what */
.after { margin-top: clamp(56px, 7vw, 96px); }
.timeline { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--col-gap); margin-top: 16px; }
.timeline li { display: grid; gap: 6px; align-content: start; padding-top: 16px; border-top: 1px solid var(--line-strong); }
.timeline__mark { display: flex; align-items: center; gap: 10px; }
.timeline__n { display: grid; place-items: center; width: 28px; height: 28px; background: var(--ink); color: var(--white); border: 2px solid var(--ink); font-size: var(--fs-micro); font-weight: 600; font-variant-numeric: tabular-nums; }
.timeline__n--you { background: transparent; color: var(--ink); }
.timeline__who { font-size: var(--fs-micro); font-weight: 600; color: var(--ink); }
.timeline b { font-weight: 600; margin-top: 6px; }
.timeline li > span:last-child { font-size: var(--fs-small); color: var(--muted); }

/* Pilot */
.pilot { margin-top: clamp(40px, 5vw, 64px); }
.pilot__bar {
  position: relative; height: 40px; border: 1px solid var(--line-strong);
  background: repeating-linear-gradient(to right, transparent 0 calc(100% / 90 - 1px), var(--line) calc(100% / 90 - 1px) calc(100% / 90));
}
.pilot__launch { position: absolute; inset: 0 auto 0 0; width: calc(9 / 90 * 100%); background: var(--blue); }
.pilot__tick { position: absolute; top: -1px; bottom: -1px; left: var(--at); width: 2px; margin-left: -1px; background: var(--ink); }
.pilot__labels { position: relative; height: 52px; margin-top: 10px; }
.pilot__labels span { position: absolute; top: 0; left: var(--at); transform: translateX(-50%); font-size: var(--fs-micro); color: var(--muted); white-space: nowrap; }
.pilot__labels span:first-child { transform: none; }
.pilot__labels span:last-child { transform: translateX(-100%); text-align: right; }
.pilot__labels b { display: block; font-size: var(--fs-small); color: var(--ink); font-weight: 600; }
.coop { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); margin-top: 32px; }
.coop > div { grid-column: span 6; display: grid; gap: 12px; align-content: start; padding-top: 16px; border-top: 1px solid var(--line-strong); }
.coop p { color: var(--muted); font-size: var(--fs-small); max-width: 56ch; }
.plain li { position: relative; padding: 8px 0 8px 20px; font-size: var(--fs-small); color: var(--muted); }
.plain li::before { content: ""; position: absolute; left: 0; top: 18px; width: 8px; height: 2px; background: var(--ink); }
.coop .coop__aligned { color: var(--ink); font-weight: 500; padding-top: 12px; border-top: 1px solid var(--line); }

/* Founder */
.founder__photo {
  display: grid; align-content: end; gap: 4px; margin-top: 16px;
  width: 100%; max-width: 380px; aspect-ratio: 4 / 5; padding: 18px;
  font-size: var(--fs-small); color: var(--muted);
  border: 1px dashed var(--slot-stroke);
  background: var(--white) repeating-linear-gradient(135deg, transparent 0 6px, rgba(15, 27, 45, .05) 6px 7px);
}
img.founder__photo { display: block; height: auto; object-fit: cover; object-position: 50% 30%; padding: 0; border: 0; background: var(--ghost); }
.founder__name { font-size: clamp(1.625rem, 1.2rem + 1.3vw, 2.25rem); font-weight: 600; line-height: 1.1; letter-spacing: -.03em; }
.founder__role { margin-top: 6px; color: var(--muted); }
.founder__statement { margin: 28px 0 0; padding-top: 20px; border-top: 1px solid var(--line-strong); }
.founder__statement > p:not(.slot) { font-size: clamp(1.25rem, 1rem + .9vw, 1.625rem); font-weight: 500; line-height: 1.35; letter-spacing: -.02em; text-wrap: pretty; max-width: 30ch; }
.founder__body > .slot { margin-top: 12px; }
.founder__facts { display: grid; gap: 8px; margin-top: 8px; }

/* Founder case (V7.1.1): a real, owner-supplied result shown in the chart's own language */
.case { margin-top: 28px; background: var(--white); border: 1px solid var(--line); padding: clamp(20px, 2.4vw, 30px); }
.case__where { font-size: 1.0625rem; font-weight: 600; letter-spacing: -.01em; }
.case__what { margin-top: 4px; font-size: var(--fs-small); color: var(--muted); max-width: 56ch; }
.case__figures { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--col-gap); margin-top: 22px; }
.case__figures > div { padding-top: 14px; border-top: 2px solid var(--line-strong); }
.case__figures dt { font-size: var(--fs-micro); font-weight: 500; color: var(--muted); }
.case__big { display: block; margin-top: 6px; font-size: clamp(2.5rem, 1.7rem + 2.4vw, 3.75rem); font-weight: 600; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.case__arrow { color: var(--muted); font-weight: 400; }
.case__to { color: var(--blue); }
.case__unit { display: block; margin-top: 8px; font-size: var(--fs-small); color: var(--ink); font-weight: 500; }
.bars--case { margin-top: 22px; }
.bars--case .bar th { width: 9rem; }
.bars--case .bar__fill { width: calc(var(--v) / 80 * 100%); }
.case__context { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: var(--fs-small); color: var(--muted); max-width: 60ch; }
.case__flag { margin-top: 10px; font-size: var(--fs-micro); }
.founder__scope { margin-top: 14px; font-size: var(--fs-small); color: var(--muted); max-width: 56ch; }
.founder__body .rows { margin-top: 4px; }

/* Founder V7.1.2: photo, headline, story and signature left; the result and the link to Novello right */
.founder__lead .founder__photo { margin-top: 0; max-width: 300px; }
.founder__lead .h2 { margin-top: 14px; }
.founder__sign { margin-top: 6px; padding-top: 16px; border-top: 1px solid var(--line); }
.founder__sign .founder__name { font-size: 1.25rem; line-height: 1.3; letter-spacing: -.02em; }
.founder__sign .founder__role { margin-top: 2px; font-size: var(--fs-small); }
.founder__body .case { margin-top: 0; }
.case__where span { display: block; margin-top: 2px; font-size: var(--fs-small); font-weight: 400; color: var(--muted); letter-spacing: 0; }
.founder__body .case__big { font-size: clamp(3rem, 1.9rem + 3.4vw, 5.25rem); }
.case__scope { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--line); }
.case__label { font-size: var(--fs-micro); font-weight: 600; }
.case__scope ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--col-gap); margin-top: 6px; }
.case__scope li { position: relative; padding: 6px 0 6px 18px; font-size: var(--fs-small); color: var(--ink); }
.case__scope li::before { content: ""; position: absolute; left: 0; top: 1.05em; width: 8px; height: 2px; background: var(--ink); }

/* Unfilled content: hatched like missing chart data, framed with a dashed rule */
.slot {
  display: block; padding: 12px 14px;
  font-size: var(--fs-small); color: var(--muted);
  border: 1px dashed var(--slot-stroke);
  background: var(--white) repeating-linear-gradient(135deg, transparent 0 6px, rgba(15, 27, 45, .05) 6px 7px);
}
.slot__tag { display: block; margin-bottom: 2px; font-size: var(--fs-micro); font-weight: 600; color: var(--ink); }

/* FAQ */
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-child { margin-top: -4px; }
.faq summary {
  position: relative; list-style: none; cursor: pointer;
  padding: 18px 44px 18px 0; font-size: 1.0625rem; font-weight: 600; letter-spacing: -.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before, .faq summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 14px; height: 2px; background: var(--ink); transition: transform .25s var(--ease); }
.faq summary::after { transform: rotate(90deg); }
.faq details[open] summary::after { transform: rotate(0); }
.faq summary:hover { color: var(--blue); }
.faq details p { padding: 0 44px 20px 0; color: var(--muted); font-size: var(--fs-small); max-width: 62ch; }

/* Request */
.request__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: start; }
.request__intro { grid-column: 1 / span 5; display: grid; gap: 20px; padding-top: 20px; border-top: 2px solid var(--on-navy); }
.recap li { position: relative; padding: 12px 0 12px 28px; border-bottom: 1px solid var(--navy-2); color: var(--on-navy); font-size: var(--fs-small); }
.recap li::before { content: ""; position: absolute; left: 2px; top: 17px; width: 12px; height: 7px; border-left: 2px solid var(--blue-light); border-bottom: 2px solid var(--blue-light); transform: rotate(-45deg); }
.request__person { color: var(--on-navy-2); font-size: var(--fs-small); }

.panel { grid-column: 7 / span 6; background: var(--white); color: var(--ink); padding: clamp(24px, 3vw, 36px); }
.panel__hint { font-size: var(--fs-micro); color: var(--muted); margin-bottom: 20px; }
.field { display: grid; gap: 6px; margin-bottom: 18px; }
.field label { font-size: var(--fs-small); font-weight: 600; }
.field__opt { font-weight: 400; color: var(--muted); }
.field input {
  width: 100%; min-height: 50px; padding: 0 14px;
  font: inherit; font-size: 1rem; color: var(--ink);
  background: var(--white); border: 1px solid #8A95A5; border-radius: 0;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.field input::placeholder { color: #6B7585; }
.field input:hover { border-color: var(--ink); }
.field input:focus-visible { outline: none; border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue), 0 0 0 4px rgba(29, 78, 216, .18); }
.field input[aria-invalid="true"] { border-color: var(--error); box-shadow: 0 0 0 1px var(--error); }
.field__help { font-size: var(--fs-micro); color: var(--muted); }
.field__error { font-size: var(--fs-micro); font-weight: 600; color: var(--error); }
.error-summary { margin-bottom: 20px; padding: 14px 16px; background: var(--error-bg); border: 1px solid var(--error); }
.error-summary p { font-weight: 600; color: var(--error); font-size: var(--fs-small); }
.error-summary ul { margin-top: 6px; }
.error-summary a { color: var(--error); font-size: var(--fs-small); }
.error-summary:focus-visible { outline-color: var(--error); }
.panel__warn { font-size: var(--fs-small); font-weight: 600; padding-top: 14px; border-top: 1px solid var(--line); }
.panel__noscript { margin-top: 12px; font-size: var(--fs-small); color: var(--ink); }
.panel__privacy { margin: 8px 0 22px; font-size: var(--fs-micro); color: var(--muted); }
.placeholder { background: #FFF3C4; color: var(--ink); padding: 0 3px; }
.done { display: grid; gap: 14px; justify-items: start; }
.done:focus { outline: none; }
.done__title { font-size: 1.25rem; font-weight: 600; letter-spacing: -.02em; }
.done p { color: var(--muted); font-size: var(--fs-small); }
.done .done__quote { color: var(--ink); padding: 14px 16px; background: var(--soft); font-size: 1rem; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) { .done:not([hidden]) { animation: rise .45s var(--ease) both; } }

/* Footer */
.footer { background: var(--ink); color: var(--on-navy-2); padding: 40px 0 48px; font-size: var(--fs-small); }
.footer__grid { display: grid; grid-template-columns: 2fr 5fr 3fr 2fr; gap: 16px var(--col-gap); align-items: baseline; }
.footer a { color: var(--on-navy); }
.footer .placeholder-text { color: var(--on-navy-2); }

/* ---------- Responsive ---------- */

@media (max-width: 1100px) {
  .menu-toggle { display: inline-flex; }
  .nav { position: absolute; left: 0; right: 0; top: 100%; display: none; background: var(--white); border-bottom: 1px solid var(--line); }
  .nav.is-open { display: block; }
  .nav ul { flex-direction: column; padding: 8px var(--gutter) 16px; }
  .nav a { padding: 14px 0; font-size: 1.0625rem; color: var(--ink); border-top: 1px solid var(--line); }
  .masthead__inner { gap: 12px; }
  .logo { margin-right: auto; }
  .masthead__cta { order: 2; }
  .menu-toggle { order: 3; }
  .hero__title { grid-column: 1 / -1; }
  .hero__copy { grid-column: 1 / span 6; }
  .chart { grid-column: 7 / span 6; }
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: none; row-gap: 36px; }
  .step { grid-row: auto; grid-template-rows: none; align-content: start; }
}

@media (max-width: 820px) {
  .hero__copy, .chart { grid-column: 1 / -1; }
  .chart { margin-top: 36px; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 24px; }
  .split__head, .split__body, .request__intro, .panel { grid-column: 1 / -1; }
  .split__body { margin-top: 40px; }
  .panel { margin-top: 36px; }
  .rows > div { grid-template-columns: 1fr; gap: 4px; }
  .steps { grid-template-columns: 1fr; row-gap: 28px; }
  .roles > div { grid-column: 1 / -1; }
  .roles > div + div { margin-top: 32px; }
  .roles__rule { grid-column: 1 / -1; }
  .split--audit { grid-template-areas: "head" "doc" "lists"; grid-template-columns: minmax(0, 1fr); }
  .split--audit > .split__body--doc { margin-top: 36px; }
  .founder__photo { max-width: 200px; padding: 12px; font-size: var(--fs-micro); }
  .founder__lead .founder__photo { max-width: 200px; }
  .founder .split__head { display: grid; }
  .timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
  .coop > div { grid-column: 1 / -1; }
  .coop > div + div { margin-top: 28px; }
  .pilot__labels { height: auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 16px; }
  .pilot__labels span, .pilot__labels span:first-child, .pilot__labels span:last-child { position: static; transform: none; text-align: left; white-space: normal; }
  .footer__grid { grid-template-columns: 1fr; }
  .guides { display: none; }
}

@media (max-width: 460px) {
  .masthead__cta { padding: 0 12px; font-size: .8125rem; }
  .menu-toggle__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .facts { grid-template-columns: 1fr; }
  .timeline { grid-template-columns: 1fr; }
  .actions .btn { width: 100%; }
  .bar th { width: 6.5rem; }
  .bars--case .bar th { width: 7.25rem; white-space: normal; }
  .case__figures { grid-template-columns: max-content minmax(0, 1fr); gap: 0 24px; }
  .founder__body .case__big { font-size: 2.75rem; }
  .case__scope ul { grid-template-columns: 1fr; }
  .doc__rest li { grid-template-columns: 1fr; }
}

@media (max-width: 360px) {
  .case__figures { grid-template-columns: 1fr; gap: 16px; }
  .hero { padding-top: 24px; }
  .hero__title { font-size: 2.125rem; }
  .lead { font-size: 1rem; }
  .proto-bar { font-size: .75rem; }
  .masthead__cta { font-size: .75rem; padding: 0 10px; }
  .logo { font-size: 1.25rem; }
}

/* ======================================================================
   V7.2 — sales, trust and conversion refinement. No new colours, fonts or radii.
   ====================================================================== */

/* Experience proof under the hero CTA: the founder's past result, linked to #zalozyciel */
.proof {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 18px; align-items: start;
  max-width: 46ch; margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--line-strong);
  color: var(--ink); text-decoration: none;
}
.proof__fig { font-size: 2.25rem; font-weight: 600; line-height: 1; letter-spacing: -.04em; color: var(--blue); font-variant-numeric: tabular-nums; }
.proof__text { display: grid; gap: 2px; }
.proof__label { font-size: var(--fs-micro); font-weight: 500; color: var(--muted); }
.proof__main { font-size: var(--fs-small); font-weight: 500; line-height: 1.45; }
.proof__more { justify-self: start; margin-top: 8px; padding-bottom: 1px; border-bottom: 2px solid currentColor; font-size: var(--fs-small); font-weight: 600; transition: color .2s ease; }
.proof:hover .proof__more { color: var(--blue); }

/* Founder case: 100% is the headline, 50 → 80 and the fixed capacity support it */
.case__where { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 16px; }
.case__where .case-name, .case__where .case-anon { margin: 0; font-size: inherit; font-weight: 600; color: var(--ink); }
.case__where .case__meta { margin: 0; }
.case__hero { margin-top: 18px; padding-top: 16px; border-top: 2px solid var(--line-strong); }
.founder__body .case__big { margin-top: 0; font-size: clamp(4.25rem, 2.6rem + 5vw, 7.5rem); line-height: .9; letter-spacing: -.05em; color: var(--blue); }
.case__hero .case__unit { margin-top: 10px; font-size: 1.0625rem; font-weight: 600; }
.founder .case__figures { margin-top: 22px; }
.founder .case__figures > div { padding-top: 12px; border-top: 1px solid var(--line); }
.case__mid { display: block; margin-top: 6px; font-size: clamp(1.75rem, 1.35rem + 1.1vw, 2.375rem); font-weight: 600; line-height: 1.05; letter-spacing: -.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.case__note { display: block; margin-top: 6px; font-size: var(--fs-small); color: var(--muted); }

/* 80 fixed places, filled column by column: navy at the start, blue added in six months */
.occ { margin-top: 24px; }
.occ__grid { display: grid; grid-template-columns: repeat(20, minmax(0, 1fr)); grid-template-rows: repeat(4, auto); grid-auto-flow: column; gap: 3px; }
.occ__grid i { aspect-ratio: 1; background: var(--navy); }
.occ__grid i:nth-child(n+51) { background: var(--blue); }
.occ__legend { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-top: 10px; font-size: var(--fs-small); color: var(--muted); }
.occ__key { display: inline-block; width: 10px; height: 10px; margin-right: 8px; background: var(--navy); }
.occ__key--new { background: var(--blue); }

.founder__story { display: grid; gap: 18px; }
.founder__line { color: var(--ink); font-weight: 500; }
.founder__body > .case__scope { margin-top: 24px; }

/* Proof switch on <html data-case>: named (default) | anonymous | off */
/* !important: these are switches and must beat component display rules such as .case__where span */
.case-anon { display: none !important; }
[data-case="anonymous"] .case-name, [data-case="off"] .case-name { display: none !important; }
[data-case="anonymous"] .case-anon, [data-case="off"] .case-anon { display: inline !important; }
[data-case="off"] .case-proof, [data-case="off"] .case-figs { display: none !important; }
[data-case="off"] .founder__body > .case__scope { margin-top: 0; padding-top: 0; border-top: 0; }

/* Audit: what the owner learns comes first */
.audit__lists > .h3:first-child { margin-top: 36px; }
.audit__limit { margin-top: 16px; font-size: var(--fs-small); color: var(--muted); max-width: 60ch; }

@media (max-width: 820px) {
  .split--audit { grid-template-areas: "head" "lists" "doc"; }
  .audit__lists > .h3:first-child { margin-top: 32px; }

  /* Founder on mobile: headline, result, story and scope, then a small portrait beside the signature
     (photo added 2026-10-18; side by side keeps the section no taller than with the placeholder) */
  .founder .split {
    grid-template-columns: clamp(104px, 30vw, 152px) minmax(0, 1fr); column-gap: 20px;
    grid-template-areas: "title title" "case case" "story story" "scope scope" "photo sign" "stmt stmt";
  }
  .founder .founder__lead, .founder .founder__body { display: contents; }
  .founder__title { grid-area: title; margin-top: 0; padding-top: 20px; border-top: 2px solid var(--line-strong); }
  .founder__lead .h2 { margin-top: 0; }
  .founder .case { grid-area: case; margin-top: 24px; }
  .founder__story { grid-area: story; margin-top: 28px; }
  .founder .case__scope { grid-area: scope; margin-top: 24px; }
  .founder__lead .founder__photo { grid-area: photo; margin-top: 32px; max-width: none; }
  .founder__sign { grid-area: sign; align-self: end; margin-top: 0; }
  .founder__statement { grid-area: stmt; }
  [data-case="off"] .founder .case__scope { margin-top: 24px; padding-top: 14px; border-top: 1px solid var(--line); }
}

@media (max-width: 460px) {
  :root { --section: 64px; }
  .after { margin-top: 48px; }
  .split__body { margin-top: 32px; }
  .proof { gap: 0 14px; }
  .proof__fig { font-size: 1.875rem; }
  .founder__body .case__big { font-size: 4.5rem; }
  .case__figures { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 16px; }
  .case__mid { font-size: 1.75rem; }
  .occ__grid { gap: 2px; }
}

@media (max-width: 360px) {
  .case__figures { grid-template-columns: 1fr; gap: 14px; }
  .founder__body .case__big { font-size: 4rem; }
}

/* ==========================================================================
   Production additions (site/, 2026-10-19). Everything above this block is
   output/website-v7-2-experimental/styles.css, byte for byte (approved, frozen).
   This block only adds what the prototype lacked: self-hosted Inter, CSP-safe
   classes for the former style attributes, real form states, the honeypot,
   the company line and the privacy page. Built by site/tools/build-css.py.
   ========================================================================== */

/* Inter 4 (variable: opsz 14–32, wght 100–900), SIL OFL 1.1, from @fontsource-variable/inter 5.2.8.
   Same family name as the prototype's Google Fonts import, so every rule above is unchanged. */
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("fonts/Inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("fonts/Inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Former inline custom properties (Content-Security-Policy: style-src 'self'). */
.bar--v42 { --v: 42; }
.bar--v36 { --v: 36; }
.bar--v18 { --v: 18; }
.bar--v11 { --v: 11; }
.bar--v3 { --v: 3; }
.at-0 { --at: 0%; }
.at-33 { --at: 33.333%; }
.at-67 { --at: 66.666%; }
.at-100 { --at: 100%; }

/* Form: spam trap, availability, live status, locked fields while a retry is pending. */
.honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.panel__availability { margin: -8px 0 20px; padding: 12px 14px; background: var(--soft); font-size: var(--fs-small); font-weight: 600; }
.panel__privacy a { color: var(--blue); }
.form-status { margin-top: 14px; font-size: var(--fs-small); color: var(--ink); }
.form-status:empty { display: none; }
.form-status:focus { outline: none; }
.form-status--error { padding: 12px 14px; background: var(--error-bg); border: 1px solid var(--error); }
.field input[readonly] { background: var(--soft); }
.btn:disabled { cursor: default; opacity: .7; }
.done a { color: var(--blue); }
.done .done__title { color: var(--ink); font-size: 1.25rem; } /* V7.2's `.done p` outranked `.done__title`. */

/* Footer: company identification (art. 206 KSH). */
.footer__legal { grid-column: 1 / -1; margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--navy-2); font-size: var(--fs-micro); color: var(--on-navy-2); }

/* Privacy page (prywatnosc.php). */
.legal { padding-block: clamp(48px, 7vw, 96px) var(--section); }
.legal__inner { max-width: 760px; }
.legal__title { font-size: var(--fs-h2); line-height: 1.08; letter-spacing: -.035em; font-weight: 600; }
.legal__meta { margin-top: 16px; color: var(--muted); font-size: var(--fs-small); }
.legal__lead { margin-top: 24px; font-size: var(--fs-lead); }
.legal__toc { margin-top: 32px; padding: 20px 24px; background: var(--soft); }
.legal__toc p { font-weight: 600; font-size: var(--fs-small); }
.legal__toc ol { margin-top: 8px; padding-left: 1.4em; list-style: decimal; columns: 2 16rem; column-gap: 32px; font-size: var(--fs-small); }
.legal__toc a { color: var(--blue); }
.legal section { margin-top: 48px; padding-top: 16px; border-top: 2px solid var(--line-strong); scroll-margin-top: 84px; }
.legal h2 { font-size: 1.375rem; line-height: 1.25; letter-spacing: -.02em; font-weight: 600; }
.legal h3 { margin-top: 24px; font-size: var(--fs-h3); font-weight: 600; }
.legal p, .legal ul { margin-top: 12px; }
.legal ul { padding-left: 1.25em; list-style: disc; }
.legal li + li { margin-top: 6px; }
.legal a { color: var(--blue); overflow-wrap: anywhere; }
.legal address { font-style: normal; margin-top: 12px; }
.legal__table { width: 100%; margin-top: 16px; font-size: var(--fs-small); }
.legal__table th, .legal__table td { padding: 10px 12px 10px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.legal__table thead th { border-bottom: 2px solid var(--line-strong); font-weight: 600; }
.legal__table tbody th { font-weight: 600; width: 34%; }
@media (max-width: 640px) {
  .legal__table, .legal__table tbody, .legal__table tr, .legal__table th, .legal__table td { display: block; width: 100%; }
  .legal__table thead { display: none; }
  .legal__table tr { padding: 10px 0; border-bottom: 1px solid var(--line); }
  .legal__table th, .legal__table td { padding: 2px 0; border: 0; }
  .legal__table td[data-label]::before { content: attr(data-label) ": "; color: var(--muted); }
}
.masthead--simple .masthead__inner { justify-content: space-between; }

/* V7.2 motion refinement: feedback only; hero, sections and document stay still.
   Keep this in the build input so build-css.py preserves the polish. */
:root { --motion-fast: 160ms; --motion-state: 220ms; }

.btn, .textlink, .nav a, .toggle__btn, .proof__more {
  transition-duration: var(--motion-fast);
  transition-timing-function: var(--ease);
}
.btn:disabled, .section--navy .panel .btn:disabled {
  background: var(--blue); cursor: not-allowed;
}
.panel [aria-busy="true"] .btn:disabled { background: var(--navy); cursor: progress; }
.textlink:active { color: var(--blue-hover); }
.nav a:focus-visible, .proof:focus-visible .proof__more { color: var(--blue); }
.toggle__btn:active { background: var(--soft); color: var(--ink); }
.toggle__btn[aria-pressed="true"]:active { background: var(--navy); color: var(--white); }
.menu-toggle { transition: border-color var(--motion-fast) var(--ease), background-color var(--motion-fast) var(--ease); }
.menu-toggle[aria-expanded="true"], .menu-toggle:active { border-color: var(--ink); background: var(--soft); }
.faq summary { transition: color var(--motion-fast) var(--ease); }
.faq summary::before, .faq summary::after { transition-duration: var(--motion-state); }

/* Informational stages: no extra tab stops or implied actions, no movement. */
.step { transition: border-color var(--motion-fast) var(--ease); }
.step__n { transition: color var(--motion-fast) var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .step:hover { border-top-color: var(--blue); }
  .step:hover .step__n { color: var(--blue); }
  .menu-toggle:hover { border-color: var(--ink); }
}

/* An invalid field retains its red border AND a distinct keyboard focus ring. */
.panel .field input:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.field input { transition-duration: var(--motion-fast); transition-timing-function: var(--ease); }
/* The media query is resolved before first paint: delayed JS cannot reflow the hero. */
@media (scripting: none) { .chart .toggle { display: none; } }

@keyframes feedback-in { from { opacity: .85; } to { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  /* Keep the original sequence, but cap the complete introduction at 760ms. */
  .chart.is-intro .bar__fill { animation-duration: .6s; }
  .chart.is-intro .bar:nth-child(2) .bar__fill { animation-delay: .04s; }
  .chart.is-intro .bar:nth-child(3) .bar__fill { animation-delay: .08s; }
  .chart.is-intro .bar:nth-child(4) .bar__fill { animation-delay: .12s; }
  .chart.is-intro .bar:nth-child(5) .bar__fill { animation-delay: .16s; }
  .nav.is-open { animation: feedback-in var(--motion-fast) var(--ease); }
  .field__error:not([hidden]), .error-summary:not([hidden]), .form-status--error {
    animation: feedback-in var(--motion-fast) var(--ease);
  }
  .done:not([hidden]) { animation: feedback-in var(--motion-state) var(--ease); }
}

@media (max-width: 1100px) and (scripting: none) {
  /* Without JavaScript, expose the links in normal flow instead of an inert menu. */
  .masthead:not(.masthead--simple) .masthead__inner { flex-wrap: wrap; }
  .masthead .menu-toggle { display: none; }
  .masthead .nav { position: static; display: block; order: 4; flex-basis: 100%; margin: 0; border-bottom: 0; }
  .masthead .nav ul { padding-inline: 0; }
  /* An expanded no-JS menu must not cover fragment destinations while scrolling. */
  .masthead:not(.masthead--simple) { position: relative; }
}

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