/* takebearing.app — kolory i czcionki aplikacji: tła systemowe Apple, akcent z AccentColor (DESIGN.md §6) */
:root {
  --paper: #FFFFFF;
  --paper-2: #F2F2F7;
  --ink: #1C1C1E;
  --ink-2: #6C6C70;
  --accent: #1F4A8C;
  --on-accent: #FFFFFF;
  --grid: rgba(60, 60, 67, .12);
  --track: #C9302C;
  --fix: #C9A227;
  --uncertain: #8E8E93;
  --unc-text: #6C6C70;
  --sleep: #B4C3E0;
  --outside: #E5E5EA;
  --c1: #1F4A8C;
  --c2: #5B8DEF;
  --c3: #C9A227;
  --tile: #F2F2F7;
  --g-low: #007AFF;
  --g-high: #FF3B30;
  --g-ok: #34C759;
  --g-mid: #C7C7CC;
  --g-low-text: #0A5CC2;
  --g-ok-text: #1E7A34;
  --gl-track: rgba(60, 60, 67, .14);
  --cell: #FFFFFF;
  /* panel dnia: kolory z makiety 1016 v5 */
  --d-track: #E5E5EA; --d-past: #D8D8DE; --d-meet: #E08A2C; --d-meet-past: #F0CFA6; --d-free: #58BD7A;
  --d-done: #2F6FDC; --d-other: #8E5BD1; --d-gap: #E3A21A; --d-futp: #B9CFFA; --d-over: #D23B3B; --d-ok: #2E9A5B;
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, "Segoe UI", sans-serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", sans-serif;
  --col: 34rem;
  --wide: 1040px;
  --chart: 820px;
  --site: 1360px;
  --stage-wide: clamp(440px, 62svh, 640px);
  --stage-top: clamp(64px, 8svh, 110px);
  --gutter: 24px;
  --stage: min(52svh, 500px);
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #111114;
    --paper-2: #1C1C1E;
    --ink: #F2F2F6;
    --ink-2: #9A9AA1;
    --accent: #7BA3E0;
    --on-accent: #111114;
    --grid: rgba(235, 235, 245, .12);
    --track: #FF6961;
    --fix: #D9B44A;
    --uncertain: #8E8E93;
    --unc-text: #9A9AA1;
    --sleep: #3A4F7A;
    --outside: #2C2C2E;
    --c1: #7BA3E0;
    --c2: #3F63A6;
    --c3: #D9B44A;
    --tile: #1C1C1E;
    --g-low: #0A84FF;
    --g-high: #FF453A;
    --g-ok: #30D158;
    --g-mid: #48484A;
    --g-low-text: #64A8FF;
    --g-ok-text: #30D158;
    --gl-track: rgba(235, 235, 245, .16);
    --cell: #2C2C2E;
    --d-track: #2C2C2E; --d-past: #3A3A3C; --d-meet: #F0A04B; --d-meet-past: #5A4527; --d-free: #4CC27E;
    --d-done: #5B97F5; --d-other: #B58AF0; --d-gap: #F0B83A; --d-futp: #2E4A80; --d-over: #FF6961; --d-ok: #4CC27E;
  }
}
@media (max-width: 639px) {
  :root { --gutter: 16px; --stage: min(46svh, 400px); }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 18px/1.6 var(--sans);
  font-feature-settings: "kern";
  overflow-x: hidden;
}
@media (max-width: 639px) { body { font-size: 17px; line-height: 1.55; } }

a { color: inherit; text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:focus-visible, .cta:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- nagłówek ---------- */
.top {
  max-width: calc(var(--site) + 2 * var(--gutter)); margin: 0 auto; padding: 20px var(--gutter) 0;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 600 1.1rem/1 var(--display); }
.brand img { width: 28px; height: 28px; border-radius: 7px; }
.lang { font-size: .9rem; color: var(--ink-2); text-decoration: none; }
.lang:hover { color: var(--ink); text-decoration: underline; }

/* ---------- otwarcie ---------- */
.hero { max-width: var(--wide); margin: 0 auto; padding: clamp(28px, 6vh, 64px) var(--gutter) 0; text-align: center; }
.hero h1 {
  font: 700 clamp(2rem, 3.7vw, 3.3rem)/1.08 var(--display);
  letter-spacing: -.025em; margin: 0 auto; max-width: 20em;
}
.hero h1 > span { display: block; }
.u-plan, .u-true { white-space: nowrap; }
@media (max-width: 379px) { .hero h1 { font-size: 1.62rem; } }
.u-plan, .u-true { text-decoration-line: underline; text-decoration-thickness: .06em; text-underline-offset: .16em; }
.u-plan { text-decoration-style: dashed; text-decoration-color: var(--accent); }
.u-true { text-decoration-color: var(--track); }
.hero .sub { color: var(--ink-2); max-width: var(--col); margin: 18px auto 0; font-size: 1.05rem; text-wrap: pretty; }
.actions { margin: 22px 0 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 18px; }
.cta {
  display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; border-radius: 999px;
  background: var(--accent); color: var(--on-accent); text-decoration: none; font-weight: 600; font-size: .98rem;
}
.cta svg { width: 16px; height: 16px; }
.note { color: var(--ink-2); font-size: .9rem; }

/* ---------- opowieść: scena + kroki ---------- */
.story { position: relative; margin-top: clamp(14px, 3vh, 28px); }
.stage {
  position: sticky; top: 0; z-index: 2; height: var(--stage);
  background: var(--paper);
}
.stage::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 26px;
  background: linear-gradient(var(--paper), transparent); pointer-events: none;
}
.stage figure { margin: 0 auto; height: 100%; max-width: calc(var(--chart) + 2 * var(--gutter)); padding: 0 var(--gutter); }
.chart { display: block; width: 100%; height: 100%; overflow: visible; }

.steps { position: relative; z-index: 1; }
.step { min-height: 90svh; }
.step:last-child { min-height: 104svh; }
.step-inner {
  position: sticky; top: calc(var(--stage) + 3svh);
  max-width: calc(var(--col) + 2 * var(--gutter)); margin: 0 auto 14svh; padding: 0 var(--gutter);
}
.kicker {
  display: block; font: 600 .72rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-2); margin-bottom: 10px;
}
.step h2 { font: 700 clamp(1.45rem, 2.4vw, 1.9rem)/1.18 var(--display); letter-spacing: -.015em; margin: 0 0 10px; text-wrap: balance; }
.step p { margin: 0; color: var(--ink); text-wrap: pretty; }
.step p + p { margin-top: 10px; }
.step .ref { margin-top: 12px; font-size: .85rem; color: var(--ink-2); }
.step .ref a { color: var(--accent); text-decoration: none; }
.step .ref a:hover { text-decoration: underline; }
.findings li { scroll-margin-top: 24px; }
@media (max-width: 639px) {
  .step { min-height: 86svh; }
  .step-inner { top: calc(var(--stage) + 4svh); }
  .step p { font-size: 16px; }
}

/* elementy wykresu */
.chart text { font-family: var(--sans); font-size: 13px; font-variant-numeric: tabular-nums; fill: var(--ink-2); }
.chart .t-ink { fill: var(--ink); font-weight: 600; }
.chart .t-plan { fill: var(--accent); font-weight: 600; }
.chart .t-red { fill: var(--track); font-weight: 600; }
.chart .t-unc { fill: var(--unc-text); }
.chart .t-small { font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; }
.chart .grid line { stroke: var(--grid); stroke-width: 1; }
.chart .course { fill: none; stroke: var(--accent); stroke-dasharray: 7 6; stroke-linecap: round; }
.chart .track { fill: none; stroke: var(--track); stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; }
.chart .ghost { fill: none; stroke: var(--uncertain); stroke-width: 2.4; stroke-dasharray: 1.5 5; stroke-linecap: round; }
.chart .fix { fill: var(--fix); stroke: var(--paper); stroke-width: 1.6; }
.chart .bracket { fill: none; stroke: var(--track); stroke-width: 1.6; }
.chart .tick { stroke: var(--accent); stroke-width: 1.4; }
.chart .r-sleep { fill: var(--sleep); }
.chart .r-outside { fill: var(--outside); }
.chart .r-other { fill: var(--c2); }
.chart .unc-line { stroke: var(--uncertain); stroke-width: 2.4; stroke-dasharray: 1.5 5; stroke-linecap: round; }
@media (max-width: 639px) { .chart text { font-size: 12px; } .chart .t-small { font-size: 10.5px; } }

/* ---------- szeroki ekran: tekst po lewej, wykres po prawej (uwaga autora 26.10) ---------- */
@media (min-width: 960px) {
  .story {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); column-gap: clamp(40px, 5vw, 96px);
    max-width: calc(var(--site) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter);
  }
  .hero {
    grid-column: 1; grid-row: 1; container-type: inline-size; text-align: left; margin: 0; padding: 0; max-width: none;
    min-height: var(--stage-wide); padding-top: 8px; display: flex; flex-direction: column; justify-content: center;
  }
  .hero h1 { margin: 0; max-width: none; font-size: min(3.1rem, 7.4cqi); }
  .hero h1 .u-plan, .hero h1 .u-true { display: block; }
  .hero .sub { margin: 22px 0 0; max-width: 30rem; }
  .hero .actions { justify-content: flex-start; }
  .steps { grid-column: 1; grid-row: 2; }
  .stage {
    grid-column: 2; grid-row: 1 / span 2; align-self: start;
    top: var(--stage-top); height: var(--stage-wide); background: none;
  }
  .stage::after { display: none; }
  .stage figure { max-width: none; padding: 0; }
  /* odstęp kroków ograniczony z góry, żeby wysoki monitor nie robił pustki (uwaga autora 26.10) */
  .step { min-height: clamp(380px, 58svh, 600px); padding-bottom: 64px; }
  .step:first-child { padding-top: 40px; }
  .step:last-child { min-height: calc(var(--stage-wide) + 40px); }
  .step-inner { position: static; max-width: 30rem; margin: 0; padding: 0; }
  /* wyróżniony krok = ten, który pokazuje wykres; pozostałe przygaszone */
  .step { opacity: .38; transition: opacity .35s ease; }
  .step.is-active { opacity: 1; }
}
@media (min-width: 960px) and (prefers-reduced-motion: reduce) { .step { transition: none; } }

/* zegary celów (rysunek jak VUMeterGauge / VariometerGauge w aplikacji) */
.chart .tile-bg { fill: var(--tile); }
.chart .tile.is-sum .tile-bg { stroke: var(--accent); stroke-width: 1.4; }
.chart .t-name { font-size: 13px; font-weight: 600; fill: var(--ink); }
.chart .t-status { font-size: 11.5px; font-weight: 600; }
.chart .vu-arc { fill: none; stroke: url(#vu-grad); stroke-width: 3; stroke-linecap: round; }
.chart .vu-zone { fill: none; stroke: var(--g-ok); stroke-width: 5; }
.chart .vu-needle { stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; }
.chart .vu-pivot { fill: var(--ink); }
.chart .vu-mark { stroke-width: 1.6; stroke-linecap: round; }
.chart .var-track { stroke: var(--g-mid); stroke-width: 2.5; stroke-linecap: round; }
.chart .var-zero { stroke: var(--ink-2); stroke-width: 1.4; }
.chart .ruler { stroke: var(--grid); stroke-width: 2; stroke-linecap: round; }
.chart .ruler-fill { stroke: var(--accent); stroke-width: 2; stroke-linecap: round; }
.chart .ruler-dot { fill: var(--accent); }
.chart .t-tiny { font-size: 11px; fill: var(--ink-2); }
.chart .t-low { fill: var(--g-low-text); font-weight: 600; }
.chart .t-high { fill: var(--track); font-weight: 600; }
.chart .t-ok { fill: var(--g-ok-text); font-weight: 600; }
.chart .t-small2 { font-size: 12px; fill: var(--ink-2); }
.chart .t-row { font-size: 14px; fill: var(--ink); }
.chart .sheet-bg { fill: var(--tile); stroke: var(--grid); }
.chart .gl-track { stroke: var(--gl-track); stroke-linecap: round; }
.chart .gl-band { fill: rgb(94, 153, 97); opacity: .25; }
.chart .t-cap { font-size: 12px; fill: var(--ink-2); }
.chart .d-track { fill: var(--d-track); }
.chart .d-faint { opacity: .5; }
.chart .d-past { fill: var(--d-past); }
.chart .d-meet { fill: var(--d-meet); }
.chart .d-meet-past { fill: var(--d-meet-past); }
.chart .d-free { fill: var(--d-free); }
.chart .d-buf { fill: url(#d-hatch-buf); }
.chart .d-buf-stripe { fill: rgba(255, 255, 255, .75); }
.chart .d-gap { fill: url(#d-hatch-gap); stroke: var(--d-gap); stroke-width: 1; stroke-dasharray: 2 2; }
.chart .d-gap-stripe { fill: var(--d-gap); }
.chart .d-end { fill: var(--ink-2); opacity: .6; }
.chart .d-done { fill: var(--d-done); }
.chart .d-other { fill: var(--d-other); }
.chart .d-futp { fill: var(--d-futp); stroke: var(--d-done); stroke-width: 1; }
.chart .d-over { fill: var(--d-over); }
.chart .d-now { fill: var(--d-over); }
.chart .d-pace { fill: url(#pace-grad); }
.chart .d-mid { fill: var(--ink-2); }
.chart .d-ring { fill: var(--tile); stroke: var(--ink-2); stroke-width: 1.5; }
.chart .dd-done { fill: var(--d-ok); }
.chart .dd-wait { fill: none; stroke: var(--ink-2); stroke-width: 1.5; }
.chart .t-cnt { font-size: 12px; font-weight: 600; }
.chart .cnt-done { fill: var(--d-ok); }
.chart .cnt-wait { fill: var(--ink-2); font-weight: 500; }
.chart .t-pill { font-size: 11px; font-weight: 700; fill: #fff; }
.chart .t-pill-s { font-size: 9px; font-weight: 600; fill: #fff; opacity: .92; }
.chart .t-lab { font-size: 11px; font-weight: 700; fill: var(--ink); }
/* siatka nastroju (MoodGrid.swift), źródła, „Co mi służy” (MoodView.swift), historia dnia */
.chart .t-src { font-size: 10.5px; fill: var(--ink-2); }
.chart .t-sample { font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; fill: var(--ink-2); opacity: .85; }
.chart .cd-next { fill: none; stroke: var(--ink-2); stroke-width: 1.2; opacity: .6; }
.chart .cd-past { fill: var(--ink-2); opacity: .45; }
.chart .cd-now { fill: var(--accent); }
.chart .t-axis { font-size: 11px; fill: var(--ink-2); }
.chart .mood-ring { fill: none; stroke: var(--accent); stroke-width: 2.4; }
.chart .mood-ghost { fill: none; stroke: var(--ink-2); stroke-width: 1.4; stroke-dasharray: 3 3; }
.chart .ico { fill: none; stroke: var(--ink-2); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.chart .ico-heart { fill: var(--g-high); }
.chart .tg-off { fill: var(--g-mid); }
.chart .tg-on { fill: var(--g-ok); }
.chart .tg-knob { fill: #FFFFFF; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .25)); }
.chart .cell-bg { fill: var(--cell); }
.chart .sec-up { fill: var(--g-ok); }
.chart .sec-down { fill: var(--g-high); }
.chart .sec-arrow { fill: none; stroke: #FFFFFF; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.chart .t-sec { font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; fill: var(--ink-2); }
.chart .t-body { font-size: 13px; fill: var(--ink); }
.chart .t-time { font-size: 13px; fill: var(--ink-2); }
.chart .t-task { font-weight: 400; fill: var(--ink-2); }
.chart .t-note { font-size: 12px; font-style: italic; fill: var(--ink-2); }
.chart .r-ok { fill: var(--d-done); }
.chart .r-other { fill: var(--d-other); }
.chart .r-meet { fill: var(--d-meet); }
.chart .wk-0 { fill: var(--d-done); }
.chart .wk-1 { fill: var(--d-ok); }
.chart .wk-2 { fill: var(--ink-2); }
.chart .pill { fill: none; stroke: var(--accent); stroke-width: 1.4; }
.chart .mk-ok { fill: var(--g-ok); }
.chart .mk-no { fill: var(--g-mid); }
.chart .mk-glyph { fill: none; stroke: #FFFFFF; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.chart .t-done { fill: var(--ink-2); text-decoration: line-through; }
.chart .tk-open { fill: none; stroke: var(--ink-2); stroke-width: 1.5; }
.chart .tk-run { fill: none; stroke: var(--accent); stroke-width: 2; }
.chart .t-run { font-size: 13px; font-weight: 600; fill: var(--accent); }
.chart .src-pill { fill: none; stroke: var(--ink-2); stroke-width: 1; opacity: .55; }
.d-ok-stop { stop-color: var(--d-ok); }
.d-track-stop { stop-color: var(--d-track); }
.d-over-stop { stop-color: var(--d-over); }
.g-low-stop { stop-color: var(--g-low); }
.g-mid-stop { stop-color: var(--g-mid); }
.g-high-stop { stop-color: var(--g-high); }

/* ---------- oferta ---------- */
.block { max-width: calc(var(--col) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.offer { padding-top: 14vh; }
.offer h2, .terms h2, .finale h2 { font: 700 clamp(1.65rem, 2.9vw, 2.3rem)/1.12 var(--display); letter-spacing: -.02em; margin: 0 0 14px; text-wrap: balance; }
.devices {
  max-width: calc(900px + 2 * var(--gutter)); margin: 40px auto 0; padding: 0 var(--gutter);
  display: grid; grid-template-columns: minmax(0, 520px) 150px 112px; justify-content: center; align-items: end; gap: 40px;
}
.shot { margin: 0; display: flex; flex-direction: column; height: 100%; justify-content: flex-end; }
.frame {
  display: grid; place-items: center; text-align: center; padding: 14px;
  border: 1.5px solid color-mix(in srgb, var(--ink) 24%, transparent);
  background:
    repeating-linear-gradient(135deg, color-mix(in srgb, var(--ink) 4%, transparent) 0 1px, transparent 1px 9px),
    var(--paper-2);
  color: var(--ink-2); font-size: .78rem; line-height: 1.4;
}
.frame--mac { aspect-ratio: 16 / 10; border-radius: 12px; }
.frame--phone { aspect-ratio: 9 / 19.5; border-radius: 26px; }
.frame--watch { aspect-ratio: 4 / 5; border-radius: 30px; font-size: .7rem; }
.shot figcaption { margin-top: 14px; font-size: .9rem; line-height: 1.45; color: var(--ink-2); text-align: center; text-wrap: pretty; min-height: 5.8em; }
.shot figcaption b { display: block; font: 600 1.05rem/1.3 var(--display); color: var(--ink); margin-bottom: 2px; }
@media (max-width: 799px) {
  .devices { grid-template-columns: 1fr 1fr; gap: 28px 20px; max-width: calc(520px + 2 * var(--gutter)); }
  .shot--mac { grid-column: 1 / -1; }
  .shot--phone .frame { width: min(100%, 124px); margin: 0 auto; }
  .shot--watch .frame { width: min(100%, 96px); margin: 0 auto; }
  .shot figcaption { min-height: 0; }
}

/* ---------- warunki ---------- */
.terms { padding-top: 12vh; }
.terms p { margin: 0 0 14px; text-wrap: pretty; }
.terms blockquote {
  margin: 28px 0; padding: 0; font: 600 clamp(1.2rem, 2.1vw, 1.45rem)/1.35 var(--display); letter-spacing: -.01em; color: var(--ink);
}
.terms .honest { color: var(--ink-2); }

/* ---------- co mówią badania ---------- */
.science { padding-top: 16vh; }
.science h2 { font: 700 clamp(1.65rem, 2.9vw, 2.3rem)/1.12 var(--display); letter-spacing: -.02em; margin: 0 0 8px; text-wrap: balance; }
.findings { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 24px; }
.findings h3 { font: 600 1.15rem/1.3 var(--display); margin: 0 0 4px; }
.findings p { margin: 0; text-wrap: pretty; }
.findings .design { margin-top: 6px; }
.science .sci-intro { margin: 10px 0 0; color: var(--ink-2); }
.findings .src { margin-top: 6px; color: var(--ink-2); font-size: .85rem; overflow-wrap: anywhere; }
.science .honest { margin: 28px 0 0; color: var(--ink-2); }

/* ---------- finał ---------- */
.finale { position: relative; isolation: isolate; overflow: hidden; padding: 18vh 0 10vh; text-align: center; }
/* faktura: arkusz U.S. Coast Survey T104, 1835–1847 (NOAA, domena publiczna, źródło w CREDITS.md repo strony) — nastrój, nie dowód */
.finale::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: 50%; top: 9vh; width: min(780px, 150vw); aspect-ratio: 485 / 415; transform: translateX(-50%);
  background: url("media/noaa-t104-map.jpg") center / cover no-repeat;
  filter: grayscale(1) brightness(1.2) contrast(1.45);
  mix-blend-mode: multiply; opacity: .2;
  -webkit-mask-image: radial-gradient(closest-side, #000 40%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 40%, transparent 100%);
}
@media (prefers-color-scheme: dark) {
  .finale::before { filter: grayscale(1) invert(1) brightness(.85) contrast(1.4); mix-blend-mode: screen; opacity: .14; }
}
/* finał: wskazówka wychyla się od „za mało” i staje pionowo (na kursie) */
.finale-gauge { max-width: 320px; margin: 10px auto 28px; }
.finale-gauge svg { display: block; width: 100%; height: auto; overflow: visible; }
.finale-gauge .fg-arc { fill: none; stroke: url(#fin-grad); stroke-width: 6; stroke-linecap: round; }
.finale-gauge .fg-zone { fill: none; stroke: var(--g-ok); stroke-width: 11; }
.finale-gauge .fg-needle line { stroke: var(--ink); stroke-width: 3.2; stroke-linecap: round; }
.finale-gauge .fg-pivot { fill: var(--ink); }
.finale-gauge .fg-needle { transform-box: view-box; transform-origin: 160px 187px; transform: rotate(-40deg); }
.finale-gauge.in .fg-needle { transform: rotate(0deg); transition: transform 1.8s cubic-bezier(.34, 1.45, .5, 1) .15s; }
.credit { display: block; margin-top: 4px; font-size: .78rem; }
.badges { display: flex; flex-direction: column; align-items: center; gap: 12px; }
/* stan „wkrótce”: pigułka bez wypełnienia, żeby nie udawała przycisku */
.badge {
  display: inline-flex; align-items: center; gap: 9px; padding: 10px 18px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--ink) 30%, transparent); color: var(--ink-2); font-size: .95rem;
}
.badge.primary { border: 1.5px solid var(--accent); color: var(--accent); font-weight: 600; }
.badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--fix); }
@media (max-width: 639px) { .badge { font-size: .84rem; padding: 9px 14px; gap: 8px; } .badge::before { flex: none; } }
.finale .note { margin-top: 18px; }
.finale .lead { color: var(--ink-2); max-width: 30rem; margin: 0 auto; text-wrap: pretty; }
.finale .tag { font: 600 1.2rem/1.3 var(--display); margin: 0 0 18px; }
.finale .invite-text { max-width: 30rem; margin: 0 auto 20px; text-wrap: pretty; }
/* zaproszenie bez adresu: wygląda jak przycisk, ale nie udaje, że działa (adres wsparcia, #724) */
.cta--pending { opacity: .5; cursor: default; }

/* ---------- stopka ---------- */
.foot {
  max-width: var(--wide); margin: 0 auto; padding: 28px var(--gutter) 40px; color: var(--ink-2); font-size: .85rem;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px;
  border-top: 1px solid var(--grid);
}
.foot nav { display: flex; gap: 18px; }

/* ---------- podstrony ---------- */
.page { max-width: calc(var(--col) + 2 * var(--gutter)); margin: 0 auto; padding: 8vh var(--gutter) 10vh; }
.page h1 { font: 700 clamp(2rem, 4vw, 2.7rem)/1.1 var(--display); letter-spacing: -.02em; margin: 0 0 12px; }
.page h2 { font: 600 1.3rem/1.25 var(--display); margin: 36px 0 8px; }
.page p { margin: 0 0 12px; text-wrap: pretty; }
.page .lead { color: var(--ink-2); font-size: 1.08rem; }

@media (prefers-reduced-motion: reduce) {
  .finale-gauge .fg-needle { transform: none; }
  .finale-gauge.in .fg-needle { transition: none; }
}