/* AION Surf — style podstron. Ładowany po surf.css; tokeny i klasy bazowe są w surf.css. */

/* ---------- Wspólne ---------- */
.surf a, .surf a:hover, .surf a:focus-visible { text-decoration: none; }
.nav__link[aria-current="page"] { color: var(--ocean); }
.menu__link[aria-current="page"] { color: var(--ocean); }
.sec--surface { background: var(--surface); }
.sec--frame { background: var(--frame); }
.sec--img { position: relative; overflow: hidden; }
.sec--img > .wrap { position: relative; }
.phero { position: relative; overflow: hidden; padding: 104px 0 96px; background: var(--frame); }
.phero .wrap { position: relative; }
.phero__in { display: grid; justify-items: start; gap: 20px; max-width: 760px; }
.phero__in .lead { max-width: 50ch; }
.phero__in, .entry__main, .entry__b { min-width: 0; }
.h1--page, .phero__in .lead, .prose p, .prose li, .callout .txt, .term__d { overflow-wrap: anywhere; }
.phero .eyebrow { color: var(--ink-silver); }
.phero__in .cta { margin-top: 12px; }
.phero__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 72px; align-items: center; }
.phero__vid, .phero__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; pointer-events: none; }
.phero__poster { display: none; }
.phero__poster--on { display: block; }
.phero__veil { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, var(--frame) 14%, rgba(6, 32, 44, 0.82) 42%, rgba(6, 32, 44, 0.66) 54%, rgba(6, 32, 44, 0) 74%), linear-gradient(0deg, var(--frame) 0, rgba(6, 32, 44, 0) 22%); }
.h1--page { font-size: 48px; line-height: 1.05; }
.h2--sm { font-size: 30px; line-height: 1.12; }
.jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.jump a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--line-control); border-radius: 22px; background: var(--frame); color: var(--ink); text-decoration: none; font: 500 15px/20px var(--font-sans); transition: background-color 140ms ease-out, border-color 140ms ease-out; }
.jump a:hover { background: var(--ocean-soft); border-color: var(--ocean); }
.closing { position: relative; overflow: hidden; padding: 112px 0; background: var(--frame); border-top: 1px solid var(--line); }
.sec--frame + .closing { padding-top: 0; border-top: 0; }
.closing__in { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 56px; }
.closing__txt { display: grid; justify-items: start; gap: 14px; max-width: 640px; }
.closing .cta { margin-top: 0; }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; margin-top: var(--gap-head); counter-reset: krok; }
.steps > li { display: grid; align-content: start; gap: 8px; counter-increment: krok; }
.steps > li::before { content: counter(krok); font: 500 14px/20px var(--font-mono); color: var(--ink-muted); }

/* ---------- Tabela ---------- */
.dtable { width: 100%; margin-top: var(--gap-head); border-collapse: collapse; font-size: 16px; line-height: 25px; }
.dtable th, .dtable td { padding: 18px 28px 18px 0; border-top: 1px solid var(--line); text-align: left; vertical-align: top; }
.dtable thead th { padding-top: 0; border-top: 0; font: 500 14px/20px var(--font-sans); color: var(--ink-muted); }
.dtable tbody th { font: 600 16px/25px var(--font-sans); color: var(--ink); }
.dtable td { color: var(--ink-silver); }
.dtable tbody tr:last-child th, .dtable tbody tr:last-child td { border-bottom: 1px solid var(--line); }
.dtable .num { padding-right: 0; text-align: right; font: 500 16px/25px var(--font-mono); color: var(--ink); white-space: nowrap; }
.dtable thead .num { font: 500 14px/20px var(--font-sans); color: var(--ink-muted); }
.dtable .is-hi th, .dtable .is-hi .num { color: var(--ocean); }
.dtable .code { white-space: normal; overflow-wrap: anywhere; }
.dtable--plain { margin-top: 8px; }
.dtable-note { margin-top: 16px; }
.todo--gap { margin-top: 32px; }

/* ---------- Falcon ---------- */
.track { display: grid; gap: 8px; margin-top: var(--gap-head); }
.track__row { display: grid; grid-template-columns: 190px minmax(0, 1fr); align-items: center; gap: 20px; }
.track__lab { font: 500 14px/20px var(--font-sans); color: var(--ink-muted); }
.track__drv { display: grid; grid-template-columns: 3fr 5fr 2fr; gap: 4px; }
.track__seg { display: flex; align-items: center; height: 44px; padding: 0 16px; border-radius: var(--radius-sm); font: 600 15px/20px var(--font-sans); }
.track__seg--you { background: var(--ocean-soft); color: var(--ink); }
.track__seg--agent { background: var(--ocean); color: var(--on-ocean); }
.track__bar { display: flex; align-items: center; min-height: 36px; padding: 0 16px; border-radius: var(--radius-sm); background: var(--surface-raised); color: var(--ink-silver); font-size: 14px; line-height: 20px; }
.surf .frag--ruch { display: grid; gap: 16px; max-width: 520px; padding: 20px; }
.ruch__svg { display: block; width: 100%; height: auto; }
.ruch__svg path { fill: none; stroke-width: 2; stroke-linecap: round; }
.ruch__a { stroke: var(--line-control); }
.ruch__b { stroke: var(--crystal); }
.ruch__key { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; line-height: 18px; color: var(--ink-silver); }
.ruch__key span { display: inline-flex; align-items: center; gap: 8px; }
.ruch__key i { display: block; width: 18px; height: 2px; border-radius: 1px; background: var(--line-control); }
.ruch__key span + span i { background: var(--crystal); }
.ruch__params { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 14px; line-height: 20px; color: var(--ink-silver); }

/* ---------- Dla kogo ---------- */
.role { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: center; gap: 80px; padding: 56px 0; border-top: 1px solid var(--line); scroll-margin-top: 72px; }
.role:first-child { padding-top: 0; border-top: 0; }
.role:nth-child(even) .role__txt { order: 2; }
.role__txt { display: grid; justify-items: start; gap: 14px; }
.role__txt .dots { margin-top: 4px; }
.surf .frag--fan, .surf .frag--team, .surf .frag--chg { display: grid; gap: 14px; max-width: 480px; padding: 20px; }
.fan__i { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 13px; line-height: 18px; color: var(--ink); }
.fan__i .sf-mono { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fan__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.team__i { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.team__i b { display: block; font: 600 14px/20px var(--font-sans); color: var(--ink); }
.chg__url { overflow-wrap: anywhere; font-size: 13px; line-height: 18px; color: var(--ink); }
.chg__t { font: 600 16px/22px var(--font-sans); color: var(--ink); }
.partner { display: grid; grid-template-columns: 200px minmax(0, 1fr) auto; align-items: center; gap: 40px; padding: 40px 0 0; border-top: 1px solid var(--line-control); }
.emblem { display: block; width: 160px; height: 160px; margin-top: 8px; }
.art { display: block; width: min(100%, 420px); height: auto; margin-top: 20px; }
.sec__bg--chart { opacity: 0.22; mix-blend-mode: normal; }
.partner__img { display: block; width: 200px; height: 112px; object-fit: cover; border-radius: var(--radius-md); }
.partner__txt { display: grid; gap: 8px; max-width: 720px; }

/* ---------- Dla deweloperów ---------- */
.codeblock { margin: 0; padding: 20px; overflow-x: auto; border-radius: var(--radius-md); background: var(--water-4); font: 400 13px/22px var(--font-mono); color: var(--ink-silver); scrollbar-width: thin; scrollbar-color: var(--line-control) transparent; }
.codeblock .ln { display: block; min-height: 22px; white-space: pre; }
.codeblock .cm { color: var(--ink-muted); }
.codefig { display: grid; gap: 10px; min-width: 0; }
.docs { display: grid; grid-template-columns: 220px minmax(0, 1fr); align-items: start; gap: 72px; }
.toc { display: grid; gap: 2px; }
.toc__h { margin-bottom: 8px; font: 500 14px/20px var(--font-sans); color: var(--ink-muted); }
.toc a { display: flex; align-items: center; min-height: 40px; padding: 9px 12px; border-radius: var(--radius-sm); color: var(--ink-silver); text-decoration: none; font-size: 15px; line-height: 22px; transition: background-color 140ms ease-out, color 140ms ease-out; }
.toc a:hover { background: var(--surface-raised); color: var(--ink); }
.doc-list { min-width: 0; }
.doc { display: grid; justify-items: start; gap: 16px; min-width: 0; padding: 56px 0; border-top: 1px solid var(--line); scroll-margin-top: 72px; }
.doc:first-child { padding-top: 0; border-top: 0; }
.doc:last-child { padding-bottom: 0; }
.doc > * { max-width: 100%; }
.doc .txt { max-width: 68ch; }
.doc .codeblock, .doc .dtable { width: 100%; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- Cena ---------- */
.kit { border-bottom: 1px solid var(--line); }
.kit li { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 24px; padding: 20px 0; border-top: 1px solid var(--line); }
.kit b { font: 600 17px/26px var(--font-sans); color: var(--ink); }
.kit span { color: var(--ink-silver); text-wrap: pretty; }
.steps .link { min-height: 0; }

/* ---------- Pytania ---------- */
.faq-grid { display: grid; grid-template-columns: 220px minmax(0, 1fr); align-items: start; gap: 72px; }
.faq-body { min-width: 0; }
.faq-group { display: grid; gap: 16px; padding-bottom: 56px; scroll-margin-top: 72px; }
.faq-group:last-child { padding-bottom: 0; }

/* ---------- Encyklopedia ---------- */
.stats { display: flex; flex-wrap: wrap; gap: 16px 56px; margin-top: 12px; }
.stats dt { font: 700 38px/1.08 var(--font-display); letter-spacing: -0.025em; color: var(--ink); }
.stats dd { font-size: 14px; line-height: 20px; color: var(--ink-silver); }
.areas { margin-top: var(--gap-head); border-bottom: 1px solid var(--line); }
.area { display: grid; grid-template-columns: 56px minmax(0, 4fr) minmax(0, 7fr); gap: 32px; padding: 32px 0; border-top: 1px solid var(--line); scroll-margin-top: 72px; }
.area__n { font: 500 14px/26px var(--font-mono); color: var(--ink-muted); }
.area__t { display: grid; justify-items: start; align-content: start; gap: 6px; }
.area__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 24px; }
.area__list a { display: inline-flex; align-items: center; min-height: 36px; color: var(--ink-silver); text-decoration: none; font-size: 15px; line-height: 22px; transition: color 140ms ease-out; }
.area__list a:hover { color: var(--ocean); }
.index a { color: inherit; text-decoration: none; }
.index a:hover { color: var(--ocean-deep); }

/* ---------- Hasło ---------- */
.entry { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); align-items: start; gap: 72px; }
.entry__main { display: grid; gap: 40px; min-width: 0; }
.entry__b { display: grid; gap: 12px; }
.callout { display: grid; justify-items: start; gap: 10px; padding: 24px; border-radius: var(--radius-md); background: var(--surface-raised); }
.entry__side { display: grid; gap: 28px; }
.side__b { display: grid; justify-items: start; gap: 6px; }
.side__b .flink { min-height: 32px; }
.side__b .fcol__h { margin-bottom: 2px; }
.entry__pn { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; padding-top: 24px; border-top: 1px solid var(--line); }
.entry__pn a { display: grid; gap: 2px; min-height: 44px; color: var(--ink); text-decoration: none; font-weight: 600; }
.entry__pn a:hover { color: var(--ocean-deep); }
.entry__pn a:last-child { justify-items: end; text-align: right; }
.entry__pn span { font-size: 14px; line-height: 20px; font-weight: 400; color: var(--ink-muted); }

/* ---------- 404 ---------- */
.nf { position: relative; overflow: hidden; padding: 104px 0 96px; background: var(--frame); }
.nf .wrap { position: relative; }
.nf .index { margin-top: 24px; width: 100%; max-width: 640px; }
.nf .index__d { color: var(--ink-silver); }

@container surf (max-width: 1080px) {
  .phero__grid { gap: 48px; }
  .role { gap: 48px; }
  .docs, .faq-grid { grid-template-columns: 190px minmax(0, 1fr); gap: 48px; }
  .entry { gap: 48px; }
  .area { grid-template-columns: 40px minmax(0, 4fr) minmax(0, 7fr); gap: 24px; }
}

@container surf (max-width: 980px) {
  .nav__in { gap: 20px; }
  .nav__links { gap: 14px; }
  .nav__link { font-size: 14px; }
}

@container surf (max-width: 860px) {
  .phero { padding: 56px 0 56px; }
  .phero__veil { background: linear-gradient(180deg, rgba(6, 32, 44, 0.62) 0, rgba(6, 32, 44, 0.82) 30%, rgba(6, 32, 44, 0.88) 70%, var(--frame)); }
  .phero__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .h1--page { font-size: 34px; line-height: 1.08; }
  .h2--sm { font-size: 24px; }
  .closing { padding: 72px 0; }
  .partner__img { width: 100%; height: 150px; }
  .shot--desk, .surf .crab-art.shot--desk { display: none; }
  .closing__in, .partner { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .closing .cta { flex-direction: column; align-items: stretch; }
  .steps { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .dtable--plain { margin-top: 8px; }
  .dtable--stack thead { display: none; }
  .dtable--stack, .dtable--stack tbody, .dtable--stack tr, .dtable--stack th, .dtable--stack td { display: block; width: 100%; }
  .dtable--stack tr { padding: 15px 0; border-top: 1px solid var(--line); }
  .dtable--stack tbody tr:last-child { border-bottom: 1px solid var(--line); }
  .dtable--stack th, .dtable--stack td, .dtable--stack tbody tr:last-child th, .dtable--stack tbody tr:last-child td { padding: 0; border: 0; }
  .dtable--stack td { margin-top: 10px; }
  .dtable--stack td[data-label]::before { content: attr(data-label); display: block; font: 500 14px/20px var(--font-sans); color: var(--ink-muted); }
  .dtable .num { padding-left: 16px; }
  .track { gap: 12px; }
  .track__row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .track__seg { padding: 0 12px; }
  .surf .frag--ruch, .surf .frag--fan, .surf .frag--team, .surf .frag--chg { max-width: none; }
  .role { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 40px 0; }
  .role:nth-child(even) .role__txt { order: 0; }
  .docs, .faq-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .toc { display: flex; flex-wrap: wrap; gap: 8px; }
  .toc__h { width: 100%; margin-bottom: 0; }
  .toc a { min-height: 44px; padding: 0 14px; border: 1px solid var(--line-control); border-radius: 22px; color: var(--ink); }
  .doc { padding: 40px 0; }
  .kit li { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 16px 0; }
  .faq-group { padding-bottom: 40px; }
  .stats { gap: 12px 40px; }
  .area { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 24px 0; }
  .area__n { display: none; }
  .area__list { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .area__list a { min-height: 44px; }
  .entry { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .side__b .flink { min-height: 44px; }
  .entry__pn { gap: 16px; }
  .nf { padding: 56px 0 56px; }
}


/* ---------- Obrazy w sekcjach ---------- */
.sec__bg { position: absolute; top: 0; right: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.4; mix-blend-mode: screen; pointer-events: none; }
.sec__art { position: absolute; top: 0; right: 0; width: 48%; height: 300px; object-fit: cover; object-position: center 12%; opacity: 0.7; mix-blend-mode: screen; pointer-events: none; -webkit-mask-image: linear-gradient(to right, transparent, #000 40%), linear-gradient(to bottom, #000 62%, transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent, #000 40%), linear-gradient(to bottom, #000 62%, transparent); mask-composite: intersect; }
.shot--side { max-width: 100%; aspect-ratio: 4 / 3; margin-top: 16px; }
.doc .shot { max-width: 640px; aspect-ratio: 16 / 9; margin-top: 8px; }
.side { display: grid; gap: 24px; min-width: 0; }
.sec--img .eyebrow, .sec--img .dtable thead th, .sec--img .meta { color: var(--ink-silver); }

/* ---------- Blog ---------- */
.post-note { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 32px; }
.post-feat { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: center; gap: 56px; }
.post-feat__img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-md); }
.post-feat__txt { display: grid; justify-items: start; gap: 14px; }
.post-feat__txt .h2 { font-size: 30px; line-height: 1.12; }
.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 16px; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.post-meta a { display: inline-flex; align-items: center; min-height: 28px; color: var(--ocean); }
.post-meta a:hover { color: var(--ink); }
.post-meta a:hover { color: var(--ink); }
.post-group { display: grid; gap: 8px; margin-top: var(--gap-head); scroll-margin-top: 72px; }
.post-list { border-bottom: 1px solid var(--line); }
.post-list--gap { margin-top: var(--gap-head); }
.post { display: grid; grid-template-columns: 200px minmax(0, 1fr); align-items: center; gap: 32px; padding: 24px 0; border-top: 1px solid var(--line); }
.post__img { display: block; width: 200px; height: 112px; object-fit: cover; border-radius: var(--radius-sm); }
.post__img--art { box-sizing: border-box; padding: 8px; object-fit: contain; background: var(--frame); }
.post__txt { display: grid; justify-items: start; gap: 6px; min-width: 0; }
.post__t { font: 600 20px/26px var(--font-sans); color: var(--ink); text-decoration: none; }
a.post__t { min-height: 26px; transition: color 140ms ease-out; }
a.post__t:hover { color: var(--ocean-deep); }
.post__t--lg { font: inherit; }
.prose { max-width: 700px; }
.prose .entry__b h2 { font: 600 24px/30px var(--font-sans); letter-spacing: -0.01em; color: var(--ink); scroll-margin-top: 72px; }
.prose .entry__b > p { font-size: 17px; line-height: 29px; color: var(--ink-silver); text-wrap: pretty; }
.prose .callout { margin-top: 8px; }
.inl { display: inline-block; min-height: 24px; color: var(--ocean); font-weight: 600; }
.inl:hover { color: var(--ink); }
.inl:hover { color: var(--ocean-deep); }
.byline { display: flex; align-items: center; gap: 12px; }
.avatar { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 50%; background: var(--ocean-soft); color: var(--ink); font: 600 15px/1 var(--font-sans); }
.avatar--md { width: 64px; height: 64px; font-size: 20px; }
.avatar--lg { width: 96px; height: 96px; font-size: 30px; }
.author-card { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 20px; padding: 24px; border-radius: var(--radius-md); background: var(--surface-raised); }
.author-card__txt { display: grid; justify-items: start; gap: 2px; }
.author-card .link { min-height: 36px; }
.author-head { display: flex; align-items: center; gap: 24px; }
.author-head__txt { display: grid; gap: 8px; }
.profiles { display: grid; justify-items: start; gap: 8px; }
.profiles .fph { margin-bottom: 0; }
.nf .post-meta { color: var(--ink-silver); }

/* ---------- Ruch ---------- */
.caret { display: inline-block; width: 7px; height: 14px; margin-left: 6px; vertical-align: -2px; background: var(--crystal); }
.live { display: inline-flex; align-items: center; gap: 6px; }
.live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--crystal); flex: none; }
.dtable tbody tr { transition: background-color 140ms ease-out; }
.dtable tbody tr:hover { background: rgba(53, 224, 239, 0.05); }
.toc a, .area__list a { transition: color 140ms ease-out, background-color 140ms ease-out, transform 140ms ease-out; }
.area__list a:hover { transform: translateX(3px); }

@media (prefers-reduced-motion: no-preference) {
  .sec__art { animation: su-float 9s ease-in-out infinite alternate; }
  .shot--pan { animation: su-pan 22s ease-in-out infinite alternate; }
  .track__seg { animation: pg-lead 9s linear infinite; }
  .track__seg:nth-child(2) { animation-delay: 3s; }
  .track__seg:nth-child(3) { animation-delay: 6s; }
  .ruch__b { stroke-dasharray: 1; animation: pg-draw 7s ease-in-out infinite; }
  .live::before { animation: su-pulse 2.8s ease-in-out infinite; }
  .fan__i.is-run { background: linear-gradient(var(--line-control), var(--line-control)) no-repeat 0 100% / 0 1px; animation: pg-fill 6s ease-in-out infinite; }
  .frag--log .log__i .sf-mono { animation: su-name 8s linear infinite; }
  .frag--log .log__i:nth-child(2) .sf-mono { animation-delay: 1.6s; }
  .frag--log .log__i:nth-child(3) .sf-mono { animation-delay: 3.2s; }
  .steps > li::before { animation: su-name 9s linear infinite; }
  .steps > li:nth-child(2)::before { animation-delay: 3s; }
  .steps > li:nth-child(3)::before { animation-delay: 6s; }
  .caret { animation: pg-blink 1.2s steps(2, jump-none) infinite; }
  .frag--chg .sf-datachip { animation: pg-flash 6s ease-out infinite; }
  .surf :is(.frag, .track, .steps, .codeblock):hover *, .surf :is(.frag, .track, .steps, .codeblock):hover *::before, .surf .steps:hover > li::before { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
  .phero__vid { display: none; }
  .phero__poster { display: block; }
}
@keyframes pg-drift { from { transform: scale(1) translateX(0); } to { transform: scale(1.05) translateX(-1%); } }
@keyframes pg-lead { 0%, 30% { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--crystal); } 34%, 100% { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px transparent; } }
@keyframes pg-draw { 0% { stroke-dashoffset: 1; } 70%, 100% { stroke-dashoffset: 0; } }
@keyframes pg-fill { from { background-size: 0 1px; } to { background-size: 100% 1px; } }
@keyframes pg-blink { from { opacity: 1; } to { opacity: 0; } }
@keyframes pg-flash { 0% { box-shadow: 0 0 0 2px var(--data); } 12%, 100% { box-shadow: 0 0 0 0 transparent; } }

/* ---------- Encyklopedia: obszar, porównanie, pomiary ---------- */
.row-link { display: inline-block; padding-block: 3px; margin-block: -3px; color: var(--ocean); }
.row-link:hover { color: var(--ink); }
.term-list { margin-top: var(--gap-head); border-bottom: 1px solid var(--line); }
.term { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: baseline; gap: 32px; padding: 20px 0; border-top: 1px solid var(--line); }
.term__t { font: 600 18px/26px var(--font-sans); color: var(--ocean); transition: color 140ms ease-out; }
.term__t:hover { color: var(--ink); }
.term__d { color: var(--ink-silver); text-wrap: pretty; }
.bridge { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 40px; padding: 32px; border-radius: var(--radius-md); background: var(--surface-raised); }
.bridge__txt { display: grid; justify-items: start; gap: 8px; }
.bridge__links { display: grid; justify-items: start; gap: 4px; }
.sec-head--gap { margin-top: var(--gap-head); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.chips a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--line-control); border-radius: 22px; color: var(--ink); text-decoration: none; font: 500 15px/20px var(--font-sans); transition: background-color 140ms ease-out, border-color 140ms ease-out; }
.chips a:hover { background: var(--ocean-soft); border-color: var(--ocean); }
.index--gap { margin-top: var(--gap-head); }
.probe { display: grid; gap: 14px; padding: 24px; border-radius: var(--radius-md); background: var(--frame); scroll-margin-top: 72px; }
.probe__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.prose .entry__b h3 { margin-top: 8px; font: 600 18px/26px var(--font-sans); color: var(--ink); }
.dtable--cmp th:first-child { width: 18%; }
.dots--cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 32px; margin-top: 16px; }
.measures { margin-top: var(--gap-head); border-bottom: 1px solid var(--line); }
.measure { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 48px; padding: 48px 0; border-top: 1px solid var(--line); scroll-margin-top: 72px; }
.measure__head { display: grid; align-content: start; justify-items: start; gap: 8px; }
.measure__body { display: grid; justify-items: start; gap: 12px; min-width: 0; }
.spec { display: grid; gap: 8px; }
.spec div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; }
.spec dt { font: 500 14px/24px var(--font-sans); color: var(--ink-muted); }
.spec dd { font-size: 15px; line-height: 24px; color: var(--ink-silver); text-wrap: pretty; }

/* ---------- Dokumenty prawne ---------- */
.phero--doc { padding: 72px 0 56px; border-bottom: 1px solid var(--line); }
.legal { display: grid; gap: 40px; min-width: 0; }
.legal__s { display: grid; gap: 10px; min-width: 0; scroll-margin-top: 72px; }
.legal__co { display: grid; justify-items: start; gap: 2px; font-style: normal; font-size: 15px; line-height: 24px; color: var(--ink-silver); }
.legal__co strong { font-weight: 600; color: var(--ink); }
.legal__tbl { min-width: 0; overflow-x: auto; }
.legal__ph { padding: 14px 16px; border: 1px dashed var(--line-control); border-radius: var(--radius-sm); font-size: 15px; line-height: 22px; color: var(--ink-silver); }
.legal__meta { display: flex; flex-wrap: wrap; gap: 8px 40px; }
.legal__meta dt { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.legal__meta dd { font-size: 15px; line-height: 22px; color: var(--ink-silver); }
.mapst--gap { margin-top: var(--gap-head); }
.steps .code { justify-self: start; }

/* Telefon: reguły dla klas zdefiniowanych niżej w pliku muszą stać po nich. */
@container surf (max-width: 860px) {
  .index li { display: block; }
  .index__t { display: block; }
  .index__d { display: block; margin-top: 2px; }
  .phero--doc { padding: 48px 0 40px; }
  .legal { gap: 32px; }
  .term { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 16px 0; }
  .bridge { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 24px; }
  .dots--cols { grid-template-columns: minmax(0, 1fr); }
  .measure { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 32px 0; }
  .spec div { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .dtable--cmp th:first-child { width: 100%; }
  .probe { padding: 20px; }
  .sec__bg { opacity: 0.25; }
  .sec__art { width: 100%; opacity: 0.2; -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent); mask-image: linear-gradient(to bottom, #000 62%, transparent); }
  .post-feat { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .post-feat__txt .h2 { font-size: 24px; }
  .post { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 20px 0; }
  .post__img { width: 100%; height: 170px; }
  .art { width: min(100%, 320px); }
  .sec__bg--chart { opacity: 0.16; }
  .post__t { font-size: 18px; line-height: 24px; }
  .prose .entry__b h2 { font-size: 21px; line-height: 27px; }
  .prose .entry__b > p { font-size: 16px; line-height: 27px; }
  .author-head { gap: 16px; }
  .avatar--lg { width: 72px; height: 72px; font-size: 24px; }
  .post-meta a { min-height: 32px; }
}
.legal__ul, .legal__ol { display: grid; gap: 10px; margin: 0; padding-left: 22px; font-size: 15px; line-height: 24px; color: var(--ink-silver); }
.legal__ul li::marker, .legal__ol li::marker { color: var(--ink-muted); }
.legal__ul b { font-weight: 600; color: var(--ink); }