/* ============================================================================
   DATAVIRAL V4 — „MUNKAASZTAL"
   ---------------------------------------------------------------------------
   A koncepció: az oldal nem landing page, hanem munkafelület. Papír, amin
   dolgoztak: vonalzó a margón, regisztrációs jelek a sarkokban, hajszálvonalak,
   ragasztószalag, körbekarikázott számok, filmkocka-perforáció.

   Három dolog tartja össze:
   1) TINTA ÉS PAPÍR — meleg papír (#EFEEE9), meleg fekete tinta, semmi szürke
      dobozhalom. A hierarchiát vonal és méret adja, nem árnyék.
   2) A LIME MINDIG JEL — sosem szövegszín. Kiemelő blokk, karika, aláhúzás,
      kitöltött gomb. Amit lime-mal jelölünk, azt kézzel jelöltük meg.
   3) MOZGÁS = LETISZTUL / MEGRAJZOLÓDIK — a szöveg leülepszik (blur+lift),
      a vonalak balról jobbra megrajzolódnak, a lámpa követi a kurzort.

   Sorrend: tokenek · alap · segéd · keret (lámpa, szemcse, sáv, fejléc) ·
   szakaszok · komponensek · reszponzív · mozgáscsökkentés.
   ========================================================================== */

/* ══════════════ 1. TOKENEK ══════════════ */

:root {
  /* papír — meleg, nem kórházi fehér */
  --paper: #efeee9;
  --paper-deep: #e6e4dc;
  --paper-dark: #dcd9cf;
  --card: #fdfcf9;
  --white: #fff;

  /* tinta — meleg fekete, nem #000 */
  --ink: #1b1a17;
  --ink-rgb: 27, 26, 23;
  --ink-2: #3d3b35;
  /* A két halvány tinta WCAG AA-ra hangolva (4,5:1 normál szövegre), a meleg
     drapp karakter megtartásával. A korábbi értékek a sávos (mélypapír)
     szakaszokon buktak: --muted 4,44 és --faint 2,83 volt ott. Most:
     --muted 5,01–6,22 · --faint 4,58–5,83 minden papír-felületen. */
  --muted: #625f56;
  --faint: #68655c;

  /* vonalak */
  --line: #d9d5c9;
  --line-2: #c6c1b1;
  --line-ink: rgba(27, 26, 23, 0.14);

  /* akcent — a márka lime, mindig JEL */
  --lime: #e7ff63;
  --lime-rgb: 231, 255, 99;
  --lime-deep: #d3ee3e;
  --lime-ink: #4f5c0d;
  --warm: 255, 176, 92; /* a lámpa melegsége */

  /* A MÁSODIK ANYAG: képernyő.
     Az oldalnak két felülete van. A papír az ügynökség: szöveg, kép, munka.
     A képernyő a saját rendszer: riport, eszközök. Hidegebb és mélyebb, mint a
     tinta — nem „sötét papír", hanem kijelző. Ez a kontraszt mondja el, hogy
     kreatív csapat és eszközgyártó egyszerre. */
  --screen: #131419;
  --screen-2: #1b1d24;
  --screen-3: #23262f;
  --screen-line: rgba(255, 255, 255, 0.11);
  --screen-text: #eceae4;
  --screen-muted: #9b9a95;
  /* ugyanez a képernyő-oldalon: a riport-panel MINDEN másodlagos felirata
     (KPI-címkék, tengelyfeliratok, mutató-felirat, placeholder) ezen a
     tokenen ül, és 3,23–3,93 volt. Most 4,79–5,84. */
  --screen-faint: #93918b;

  /* méretek */
  --max: 1240px;
  --rail: 78px;
  --pad: clamp(1.15rem, 4vw, 2.6rem);
  --r: 3px; /* papír: majdnem éles sarok */
  --r-lg: 6px;

  /* A tartalomoszlop teljes szélessége (a margó-sávval együtt) és a mellette
     maradó szabad sáv. A % mindig a használat helyén oldódik fel, ezért
     ugyanez a két érték jó a .wrap-nak, a fixen álló margó-sávnak és a
     fejlécnek is — így mindhárom UGYANARRA a függőleges vonalra esik. */
  --colw: min(calc(var(--max) + var(--rail)), 100%);
  --gutter: max(0px, calc((100% - var(--colw)) / 2));

  --f-disp: "Archivo", system-ui, sans-serif;
  --f-body: "Inter", system-ui, sans-serif;
  --f-mono: "Geist Mono", ui-monospace, monospace;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (min-width: 1500px) { :root { --max: 1340px; } }
@media (min-width: 1750px) { :root { --max: 1440px; --rail: 96px; } }
/* Ultraszéles képernyőn a létra tovább nő, hogy a lap ne egy keskeny hasáb
   legyen egy nagy üres asztalon. A sorhosszak ettől nem nyúlnak meg, azokat
   saját ch-korlátok tartják (.h-display 18ch, .lede 54ch, .qa-body p 72ch) —
   csak a keret lesz nagyobb. */
@media (min-width: 2100px) { :root { --max: 1580px; --rail: 108px; } }
@media (min-width: 2400px) { :root { --max: 1720px; } }

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* a ragadós fejléc + a belső oldalak szakaszlistája együtt ~118px */
  scroll-padding-top: 124px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 1.0625rem;
  line-height: 1.62;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

::selection { background: var(--lime); color: var(--ink); }

/* ══════════════ 2. TIPOGRÁFIA ══════════════ */

h1, h2, h3 {
  font-family: var(--f-disp);
  font-weight: 700;
  margin: 0;
  line-height: 1.02;
  letter-spacing: -0.032em;
  text-wrap: balance;
}

.title {
  font-size: clamp(2.6rem, 7.6vw, 6.6rem);
  line-height: 0.96;
  letter-spacing: -0.045em;
}

.h-display {
  font-size: clamp(2.05rem, 4.6vw, 4rem);
  line-height: 1;
  letter-spacing: -0.038em;
  /* 18ch: a hosszabb címek is három sorban maradnak, nem lesz belőlük
     négysoros betűfal */
  max-width: 18ch;
}

.h-huge {
  font-size: clamp(2.4rem, 7vw, 5.6rem);
  line-height: 0.95;
  letter-spacing: -0.042em;
  max-width: 14ch;
}

/* mono meta — minden címke,
szám,
aláírás */
.kick,
.eyebrow,
.stamp,
.sheet-no,
.card-index-label,
.colm-tag,
.pr-label,
.clip-tag,
.step-no,
.qa-n,
.foot-h,
.reel-tc,
.step-out span {
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.arr { display: inline-block; transition: transform 0.32s var(--ease); }
a:hover .arr, .btn:hover .arr { transform: translateX(4px); }
.btn-line:hover .arr { transform: translateY(3px); }
.btn-line .arr { transition: transform 0.32s var(--ease); }

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

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--ink); color: var(--paper);
  padding: 0.8rem 1.2rem; font-family: var(--f-mono); font-size: 0.75rem;
}
.skip:focus { left: 1rem; top: 1rem; }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 2px;
}

/* A tinta-gyűrű a papíron erős, a képernyő-felületen viszont gyakorlatilag
   láthatatlan: #1b1a17 a #131419-en 1,07:1 — a WCAG a fókuszjelre 3:1-et kér.
   A sötét felületeken ezért lime a gyűrű (16,7:1), ami egyben a rendszer
   saját logikája is: amit lime jelöl, azt megjelöltük. */
.sec-screen :focus-visible,
.head.on-dark :focus-visible,
.reel-frame :focus-visible,
.lb :focus-visible {
  outline-color: var(--lime);
}

/* ══════════════ 3. KERET: LÁMPA · SZEMCSE · JELEK ══════════════ */

/* a kurzort követő meleg fény — a papír "felmelegszik" a kéz alatt */
.lamp {
  position: fixed;
  top: 0; left: 0;
  width: 620px; height: 620px;
  margin: -310px 0 0 -310px;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  border-radius: 50%;
  background: radial-gradient(
    circle closest-side,
    rgba(var(--warm), 0.34) 0%,
    rgba(var(--warm), 0.2) 28%,
    rgba(var(--warm), 0.085) 54%,
    transparent 76%
  );
  mix-blend-mode: multiply;
  transition: opacity 0.7s var(--ease);
  will-change: transform;
}
.lamp.on { opacity: 1; }

.grain {
  position: fixed; inset: 0;
  z-index: 92; pointer-events: none;
  opacity: 0.05; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* nyomdai vágójelek a képernyő sarkaiban */
.marks { position: fixed; inset: 0; z-index: 91; pointer-events: none; }
.marks i {
  position: absolute; width: 15px; height: 15px;
  border: 0 solid var(--line-2);
}
.marks-tl { top: 13px; left: 13px; border-top-width: 1px; border-left-width: 1px; }
.marks-tr { top: 13px; right: 13px; border-top-width: 1px; border-right-width: 1px; }
.marks-bl { bottom: 13px; left: 13px; border-bottom-width: 1px; border-left-width: 1px; }
.marks-br { bottom: 13px; right: 13px; border-bottom-width: 1px; border-right-width: 1px; }

/* ══════════════ 4. BAL MARGÓ-SÁV (vonalzó) ══════════════ */

/* A sáv fixen áll, de NEM a képernyő széléhez tapad: a tartalomoszlop bal
   széléhez igazodik, különben középre zárt lapnál leszakadna róla. */
.rail {
  position: fixed;
  top: 0; bottom: 0;
  left: var(--gutter);
  width: var(--rail);
  z-index: 40;
  pointer-events: none;
  display: none;
}

@media (min-width: 1180px) { .rail { display: block; } }

.rail-rule {
  position: absolute;
  top: 0; bottom: 0; right: 0;
  width: 1px;
  background: var(--line);
}

/* A szakasz sorszáma nagyban — ez az index, nem vonalzó.
   (Vonalzó-osztás volt itt korábban: az adta a „matekfüzet" érzetet.) */
.rail-no {
  position: absolute;
  top: 50%; right: 0;
  width: 100%;
  transform: translateY(calc(-50% - 5.4rem));
  text-align: center;
  padding-right: 6px;
}
.rail-no span {
  font-family: var(--f-disp);
  font-weight: 700;
  font-size: 1.55rem;
  letter-spacing: -0.04em;
  color: var(--ink);
  display: inline-block;
  transition: opacity 0.28s var(--ease), transform 0.28s var(--ease), color 0.3s var(--ease);
  mix-blend-mode: multiply;
}
.rail-no span.swap { opacity: 0; transform: translateY(-6px); }

/* az aktuális szakasz neve, elforgatva */
/* A forgatott felirat a SÁV KÖZEPÉHEZ igazodik, nem a jobb széléhez.
   Korábban `right: 20px` volt, ami a 78 px-es sávban 58 px-re tette a
   felirat tengelyét, miközben a fölötte lévő szám a 39 px-es középen ült —
   19 px-es, észrevehető elcsúszás. A `--rail` fele mindig a közép, akkor is,
   ha a sáv szélessége változik. */
/* ⚠️ A FELIRAT A SZÁM ALÓL NŐ LEFELÉ, nem a saját közepére van rögzítve.
   A korábbi `rotate(-90deg)` + `top: 50%` a szöveg KÖZEPÉT tette a sáv
   közepére, tehát minél hosszabb volt a felirat, annál feljebb nyúlt — a
   hosszabbak (pl. „Mire jók a számok") rá is futottak a fölöttük álló
   számra. A `writing-mode` viszont normál elemként kezeli: a doboz teteje
   fix ponton áll, és lefelé hosszabbodik, akármilyen hosszú a szöveg.
   A 180 fokos forgatás adja vissza az alulról felfelé olvasást. */
.rail-now {
  position: absolute;
  top: calc(50% - 2.9rem);
  left: 0; right: 0;
  display: flex;
  justify-content: center;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
}
.rail-now span {
  font-family: var(--f-mono);
  font-size: 0.78rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-2);
  transition: opacity 0.3s var(--ease), color 0.3s var(--ease);
  display: inline-block;
  padding: 0 0.4em;
  mix-blend-mode: multiply;
}
.rail-now span.swap { opacity: 0; }

/* teljes szélességű kép fölött a sáv karcnak látszana — ott eltűnik */
.rail {
  transition: opacity 0.45s var(--ease);
}
.rail.hush { opacity: 0; }

/* A sáv két azonos rétegben él (a paper.js duplázza): a tintás a papíron, a
   világos a sötét felületeken látszik. A JS clip-path-tal vágja szét őket
   pontosan a háttérváltás vonalán, így a csík színe ott hasad ketté, ahol a
   szakasz határa épp áll — nem a szakaszcsere pillanatában ugrik. */
.rail-layer { position: absolute; inset: 0; }
.rail-dark { clip-path: inset(0 0 100% 0); }
.rail-dark .rail-rule { background: rgba(255, 255, 255, 0.16); }
.rail-dark .rail-no span,
.rail-dark .rail-now span {
  color: var(--screen-text);
  mix-blend-mode: normal;
}
.rail-dark .rail-progress i { background: var(--lime); }

.rail-progress {
  position: absolute;
  top: 0; right: -1px; width: 3px; height: 100%;
}
.rail-progress i {
  display: block; width: 3px; height: 100%;
  background: var(--ink);
  transform: scaleY(0);
  transform-origin: top;
}

/* ══════════════ 5. FEJLÉC ══════════════ */

.head {
  position: sticky;
  top: 0;
  /* iOS Safari: görgetéskor a cím-sáv összecsukódása közben a sticky fejléc
     egy pillanatra "elindul", és megvágja a tartalmát. A saját kompozitor-
     réteg (translateZ) a bevált enyhítés — asztali böngészőben hatástalan.
     (2026-08-14, Krisztián mobil-átnézése) */
  transform: translateZ(0);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: clamp(0.8rem, 3vw, 2rem);
  padding: 0.85rem var(--pad);
  /* A lap tetején tömör lime sáv — ez a márka egyik jele. Görgetésre
     átvált papírra, hogy a tartalom fölött ne vibráljon. */
  background: var(--lime);
  /* A blur CSAK a görgetett (áttetsző) állapotban kell. Alaphelyzetben a
     háttér tömör lime, a homályosítás eredménye láthatatlan — a GPU viszont
     minden képkockán kiszámolta a teljes viewport-szélességű sávra. */
  border-bottom: 1px solid transparent;
  transition: border-color 0.4s var(--ease), background 0.4s var(--ease), padding 0.4s var(--ease);
}

/* A fejléc SÁVJA végigmegy a képernyőn (az a márkajel), de a tartalma a
   tartalomoszlophoz zár: így a logó, a nav és a szakaszok ugyanarra a két
   függőleges vonalra esnek. A % a szülő (body) szélességéhez mér, nem
   100vw-hez: az a görgetősáv szélességével tévedne. */
@media (min-width: 1180px) {
  .head { padding-right: calc(var(--gutter) + var(--pad)); }
}

/* ⚠️ A FEJLÉC CTA-JA MINDEN ÁLLAPOTBAN KAP SZÍNT, nem csak a lime sávon.
   Eddig egyetlen `:not(.stuck):not(.on-dark)` szabály festette át; amint a
   fejléc `on-dark` osztályt kapott (sötét szakasz fölött), a gomb visszaesett
   az alap `.btn-fill`-re — az pedig LIME háttér + tinta felirat. A fejléc
   háttere viszont 0,4 s alatt úszik át, tehát volt egy állapot, amikor a lime
   gomb a még lime sávon állt: a felirat eltűnt, a gombból csak egy halvány
   körvonal maradt. Ezért látszott néha, néha nem.
   Alap: grafit gomb lime felirattal (lime sávon és papíron is olvasható).
   Sötét fejlécen megfordul, mert ott a grafit beleolvadna. */
.head .head-cta { background: var(--ink); color: var(--lime); }
.head .head-cta:hover { color: var(--ink); }
.head .head-cta::before { background: var(--lime); }
.head.on-dark .head-cta { background: var(--lime); color: var(--ink); }
.head.on-dark .head-cta:hover { color: var(--lime); }
.head.on-dark .head-cta::before { background: var(--ink); }
.head:not(.stuck):not(.on-dark) .nav a::after { background: rgba(var(--ink-rgb), 0.16); }
.head:not(.stuck):not(.on-dark) .nav a { color: var(--ink); }
.head:not(.stuck):not(.on-dark) .burger { border-color: rgba(var(--ink-rgb), 0.3); }
.head.stuck {
  background: rgba(239, 238, 233, 0.78);
  /* itt VAN értelme: a fejléc áttetsző, a tartalom átlátszik alatta */
  backdrop-filter: saturate(1.2) blur(14px);
  -webkit-backdrop-filter: saturate(1.2) blur(14px);
  border-bottom-color: var(--line);
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
}

/* sötét szakasz fölött a fejléc is átvált — különben világos folt marad a
   képernyő-felületen */
.head.on-dark {
  background: rgba(19, 20, 25, 0.82);
  border-bottom-color: rgba(255, 255, 255, 0.1);
}
.head.on-dark .brand img { filter: invert(1) brightness(1.9); }
.head.on-dark .nav a { color: rgba(236, 234, 228, 0.78); }
.head.on-dark .nav a:hover { color: var(--screen-text); }
.head.on-dark .burger { border-color: rgba(255, 255, 255, 0.22); }
.head.on-dark .burger i { background: var(--screen-text); }

.brand { flex: none; line-height: 0; }
.brand img { height: 34px; width: auto; transition: height 0.4s var(--ease), filter 0.4s var(--ease); }
.head.stuck .brand img { height: 29px; }

.nav {
  display: flex;
  gap: clamp(0.5rem, 1.6vw, 1.35rem);
  margin-left: auto;
  align-items: center;
}
.nav a {
  position: relative;
  text-decoration: none;
  font-size: 0.885rem;
  font-weight: 500;
  color: var(--ink-2);
  padding: 0.42rem 0;
  transition: color 0.25s var(--ease);
  white-space: nowrap;
}
/* aláhúzás: lime blokk, ami balról fut be */
.nav a::after {
  content: "";
  position: absolute;
  left: -0.22em; right: -0.22em; bottom: 0.1em;
  height: 0.5em;
  background: var(--lime);
  z-index: -1;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.36s var(--ease-out);
}
.nav a:hover { color: var(--ink); }
.nav a:hover::after, .nav a.here::after { transform: scaleX(1); }

/* ---------- fejléc-almenü: a szakaszlista a menüpont alatt ---------- */
/* Enélkül egy alszakaszhoz három lépés kellett: oldalra menni, legörgetni a
   szakaszlistáig, ott kattintani. A panelt a paper.js építi (submenus()),
   ezért JS nélkül a menüpont marad, ami volt: sima oldal-link. */

.nav-item { position: relative; display: inline-flex; align-items: center; }

.nav-panel {
  position: absolute;
  top: calc(100% + 0.55rem);
  left: 50%;
  transform: translate(-50%, -6px);
  min-width: 232px;
  padding: 0.5rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: 0 18px 44px rgba(27, 26, 23, 0.13);
  display: grid;
  gap: 0.1rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.22s var(--ease), transform 0.28s var(--ease), visibility 0.22s;
}
.nav-item.open .nav-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}
/* a panel és a menüpont közti rés ne szakítsa meg az egérutat */
.nav-item::after {
  content: "";
  position: absolute;
  top: 100%; left: 0; right: 0;
  height: 0.6rem;
}

.nav-panel a {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.46rem 0.6rem;
  border-radius: var(--r);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink-2);
  white-space: nowrap;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.nav-panel a::after { display: none; }
.nav-panel a b {
  font-family: var(--f-mono);
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--faint);
  min-width: 1.35em;
}
.nav-panel a:hover { background: var(--lime); color: var(--ink); }
.nav-panel a:hover b { color: var(--lime-ink); }

@media (prefers-reduced-motion: reduce) {
  .nav-panel { transition-duration: 0s; }
}

.head-cta { flex: none; }

.burger {
  display: none;
  flex: none;
  /* 44px az ajánlott minimum érintőfelület — 42-ről ennyi hiányzott. */
  width: 44px; height: 44px;
  border: 1px solid var(--line-2);
  background: transparent;
  border-radius: var(--r);
  position: relative;
  cursor: pointer;
}
.burger i {
  position: absolute; left: 11px; right: 11px; height: 1.5px;
  background: var(--ink);
  transition: transform 0.34s var(--ease), opacity 0.2s;
}
.burger i:nth-child(1) { top: 16px; }
.burger i:nth-child(2) { top: 24px; }
.burger[aria-expanded="true"] i:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.burger[aria-expanded="true"] i:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }

.drawer {
  position: fixed;
  inset: 62px 0 auto;
  z-index: 55;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  padding: 1rem var(--pad) 1.6rem;
  display: grid;
  gap: 0.2rem;
  /* Fekvő telefonon a viewport 320–414px magas, a fiók tartalma viszont
     ~384px — a „Beszéljünk" gomb kilógott az aljáról, és mivel a fiók fixed,
     görgetni sem lehetett hozzá. Innentől a fiók saját magában görgethető. */
  max-height: calc(100vh - 62px); /* tartalék a dvh-t nem ismerő böngészőknek */
  max-height: calc(100dvh - 62px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.drawer[hidden] { display: none; }
.drawer nav { display: grid; }
.drawer nav a {
  display: flex; align-items: baseline; gap: 0.85rem;
  padding: 0.72rem 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  font-family: var(--f-disp); font-weight: 700;
  font-size: 1.15rem; letter-spacing: -0.02em;
}
.drawer nav a span {
  font-family: var(--f-mono); font-weight: 400;
  font-size: 0.68rem; color: var(--faint); letter-spacing: 0.14em;
}
.drawer .btn { margin-top: 1rem; justify-self: start; }

/* ══════════════ 6. GOMBOK ══════════════ */

.btn {
  --btn-y: 0.78rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: var(--btn-y) 1.3rem;
  border-radius: 100px;
  font-family: var(--f-body);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease),
              color 0.3s var(--ease), border-color 0.3s var(--ease);
  will-change: transform;
}

/* lime kitöltés, tinta felirat — a "megjelölt" gomb */
.btn-fill {
  background: var(--lime);
  color: var(--ink);
  box-shadow: 0 1px 0 rgba(var(--ink-rgb), 0.16);
}
.btn-fill::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: var(--ink);
  transform: translateY(101%);
  transition: transform 0.44s var(--ease-out);
}
.btn-fill:hover { color: var(--lime); box-shadow: 0 6px 20px rgba(var(--ink-rgb), 0.16); }
.btn-fill:hover::before { transform: translateY(0); }

.btn-ink { background: var(--ink); color: var(--paper); }
.btn-ink::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--lime); transform: translateY(101%);
  transition: transform 0.44s var(--ease-out);
}
.btn-ink:hover { color: var(--ink); }
.btn-ink:hover::before { transform: translateY(0); }

.btn-line {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-2);
}
.btn-line:hover { border-color: var(--ink); }
.btn-line-on { border-color: rgba(27, 26, 23, 0.32); }

.acts { display: flex; flex-wrap: wrap; gap: 0.7rem; }

/* ══════════════ 7. ELRENDEZÉS ══════════════ */

.wrap {
  width: min(var(--max), 100%);
  margin: 0 auto;
  padding-inline: var(--pad);
}

/* A margó-sáv szélessége mindenhonnan hiányzik: a fejléc és a tartalomoszlop
   ennyivel beljebb kezdődik. A teljes szélességű elemek (szalag, záró blokk,
   filmkocka) szándékosan alábuknak.

   A lap KÖZÉPEN áll: a --gutter mindkét oldalon ugyanaz, és a fixen álló
   margó-sáv is ezt kapja, így együtt mozog a tartalommal. */
@media (min-width: 1180px) {
  .wrap { width: var(--colw); margin-inline: auto; padding-left: calc(var(--rail) + 0.6rem); }
  .head { padding-left: calc(var(--gutter) + var(--rail) + 0.6rem); }
}

.sec { padding: clamp(5rem, 9vw, 9rem) 0; position: relative; }
.sec-tight { padding-top: clamp(3rem, 5vw, 4.5rem); }

/* sávos szakasz: mélyebb papír, hajszálvonal fent-lent */
.sec-band {
  background: var(--paper-deep);
  border-block: 1px solid var(--line);
}

/* ---------- KÉPERNYŐ-SZAKASZ: itt a saját rendszer lakik ---------- */

/* FIGYELEM: itt nem lehet overflow:hidden — az elvágná a benne lévő
   position:sticky felületet (a scrollport a szakasz lenne). */
.sec-screen {
  position: relative;
  background: var(--screen);
  color: var(--screen-text);
}
/* megvilágított díszlet, nem lapos fekete: meleg fény jobbról felülről */
.sec-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 48% 52% at 80% 2%, rgba(231, 255, 99, 0.14), transparent 68%),
    radial-gradient(ellipse 56% 46% at 12% 0%, rgba(255, 176, 92, 0.1), transparent 72%);
  pointer-events: none;
}
.sec-screen > * { position: relative; z-index: 1; }
/* sötét felületen a TikTok hivatalos fehér változata (lásd a sprite-ot) */
.sec-screen { --tt-ink: #fff; }

.sec-screen .h-display,
.sec-screen h3 { color: var(--screen-text); }
.sec-screen .eyebrow { color: var(--screen-muted); }
.sec-screen .eyebrow::after { background: var(--screen-line); }
.sec-screen .answer {
  color: var(--screen-text);
  border-left-color: var(--screen-line);
}
.sec-screen .lede { color: var(--screen-muted); }
.sec-screen .sec-more a {
  color: var(--screen-text);
  border-bottom-color: var(--screen-line);
}
.sec-screen .sec-more a:hover { border-bottom-color: var(--lime); }
.sec-screen .btn-line {
  color: var(--screen-text);
  border-color: var(--screen-line);
}
.sec-screen .btn-line:hover { border-color: var(--screen-text); }

/* a szakasz tetején futó rendszer-sáv: ez nem díszítés {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.7rem 0;
  margin-bottom: clamp(2rem, 4vw, 3.2rem);
  border-bottom: 1px solid var(--screen-line);
  font-family: var(--f-mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--screen-faint);
}

/* szakasz-fej */
.sec-head { margin-bottom: clamp(2.6rem, 5vw, 4.4rem); }

.sec-head-split {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(1.4rem, 4vw, 3.5rem);
  align-items: end;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--muted);
  margin: 0 0 1.1rem;
}
.eyebrow b {
  font-weight: 500;
  color: var(--ink);
  background: var(--lime);
  padding: 0.24em 0.5em 0.2em;
  border-radius: 2px;
  letter-spacing: 0.1em;
}
.eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line-2);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.9s var(--ease-out) 0.15s;
  max-width: 90px;
}
[data-r].in .eyebrow::after, .sec-head.in .eyebrow::after { transform: scaleX(1); }

.eyebrow-on { color: var(--lime-ink); } /* a 0.6-os tinta lime-on 4,4:1 volt */
.eyebrow-on b { background: var(--ink); color: var(--lime); }
.eyebrow-on::after { background: rgba(27, 26, 23, 0.28); }

.answer {
  margin: 0;
  font-size: clamp(1rem, 1.35vw, 1.12rem);
  line-height: 1.58;
  color: var(--ink-2);
  max-width: 46ch;
  padding-left: clamp(0.9rem, 2vw, 1.8rem);
  border-left: 1px solid var(--line-2);
}
.sec-head-split .answer { padding-bottom: 0.2rem; }

.lede { color: var(--muted); max-width: 54ch; }

.sec-more { margin: clamp(2rem, 4vw, 3rem) 0 0; }
.sec-more-inline { margin: 0; align-self: end; justify-self: end; }
.sec-more a, .more a {
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid var(--line-2);
  padding-bottom: 0.35rem;
  transition: border-color 0.3s var(--ease);
}
.sec-more a:hover, .more a:hover { border-bottom-color: var(--ink); }

/* ══════════════ 8. NYITÁNY ══════════════ */

/* A `min-height` nem a szövegnek kell, hanem a SHADERNEK: a lábsáv törlése
   után a hero 948-ról 734 px-re esett, és a háttéranimációnak nem maradt
   hely kifutni — pont az a „levágott" érzés jött vissza, amit a maszkkal
   javítottunk. A többlet a tartalom ALÁ kerül, oda, ahol a maszk amúgy is
   elhalványítja a rajzot. A `vh` felső korlátja azért kell, hogy nagy
   képernyőn ne legyen üres félméteres folt. */
.hero {
  position: relative;
  min-height: min(84vh, 880px);
  /* SZIMMETRIKUS belső margó. Korábban fent 5rem, lent 3rem volt — a
     függőleges középre igazítással együtt ez 198/121 px-es egyenlőtlenséget
     adott, vagyis a szöveg a valódi közép ALÁ csúszott. */
  padding: clamp(2.6rem, 5vw, 4rem) 0;
  /* NEM vágunk: a shader átlóg a 01-es szakaszba. A `z-index: 1` kell hozzá,
     különben a következő szakasz átlátszatlan háttere egyszerűen kitakarná
     a kilógó vásznat — a `.sec` ugyanis `position: relative`, tehát később
     festődik. A hero tartalma sehol nem fedi a 01-est, csak a háttérrajz. */
  overflow: visible;
  z-index: 1;
  /* A hero és a 01-es szakasz is papír-felületű, tehát egybefolytak, amikor
     a lábsáv kikerült — az adta az egyetlen határvonalat (`border-top`).
     Ez a hajszálvonal ugyanaz, amit a `.sec-band` is használ, csak a sáv
     tartalma nélkül. */
  border-bottom: 1px solid var(--line);
  /* A tartalom FÜGGŐLEGESEN KÖZÉPEN áll, nem a tetején. A min-height
     bevezetése után a szöveg fent ragadt, és alatta ~345 px üres papír
     maradt, fölötte 125 — a hero „félig kitöltöttnek" látszott. A .plot és
     a .hero-glow abszolút, tehát a flex nem mozdítja el őket. */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* A hero háttere: FloatingLines shader (a v3-ból, jóváhagyott).
   A shader sötét háttérre rajzol fényes vonalakat, ezért invert(1) + multiply
   blenddel lesz belőle tintavonal a papíron — a JS-ben a kívánt szín INVERZÉT
   kell megadni. */
/* A `.hero` overflow:hidden, a vászon pedig pontosan a szakasz aljáig tart —
   emiatt a shader vonalai ÉLES VÍZSZINTES VONALBAN levágódtak ott, ahol a
   hero véget ér (mérve: 948 px hero, 948 px vászon). A maszk az alsó
   harmadban elhalványítja a rajzot, így kifut a papírba ahelyett, hogy
   elvágódna. Oldalt is kap egy keskeny lágyítást, mert a vonalak a bal-jobb
   szélen ugyanígy csonkoltak voltak. */
.plot {
  position: absolute;
  top: 0; left: 0; right: 0;
  bottom: clamp(-360px, -22vw, -160px);
  z-index: 0;
  pointer-events: none;
  -webkit-mask-image:
    linear-gradient(to bottom, #000 0%, #000 18%, rgba(0,0,0,0.5) 55%, transparent 88%),
    linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to bottom, #000 0%, #000 18%, rgba(0,0,0,0.5) 55%, transparent 88%),
    linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
  mask-composite: intersect;
}
.plot canvas {
  width: 100%;
  height: 100%;
  display: block;
  filter: invert(1);
  mix-blend-mode: multiply;
  opacity: 0;
  transition: opacity 1.6s var(--ease) 0.15s;
}
.plot.on canvas { opacity: 0.46; }

/* HALVÁNY VÁLTOZAT a 02-es és a 10-es szakaszban. Nem a heró erőssége kell
   ide: ott a rajz a főszereplő, itt csak textúra a szöveg mögött. A `.plot`
   maszkja is más — ott a hero aljáig fut ki, itt fönt-lent egyaránt beúszik,
   hogy a szakasz széleit ne vágja el egy éles vonal. */
.plot-soft {
  inset: 0;
  bottom: 0;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 78%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 78%, transparent 100%);
  -webkit-mask-composite: source-over;
  mask-composite: add;
}
.plot-soft.on canvas { opacity: 0.16; }

/* A szakasz tartalma a rajz FÖLÖTT: a `.plot` abszolút és pozicionált,
   a szöveg viszont statikus — enélkül a háttér kitakarná. Az általános
   testvér-szelektor minden utána következő `.wrap`-re áll, tehát a
   kétoszlopos szakaszoknál (pl. a riport) sem marad ki egyik sem. */
.plot-soft ~ .wrap { position: relative; z-index: 1; }

/* a kurzort követő lime kiemelő-folt a shader fölött */
.hero-glow {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.9s var(--ease);
  background: radial-gradient(
    520px circle at var(--mx, 70%) var(--my, 40%),
    rgba(var(--lime-rgb), 0.34),
    rgba(var(--lime-rgb), 0.13) 42%,
    transparent 66%
  );
  mix-blend-mode: multiply;
}
.hero-glow.on { opacity: 1; }
.plot.on { opacity: 1; }

/* nyitány lap nélkül: a címsor viszi a teljes szélességet, a shader mögötte
   végig látszik */
.hero-solo { position: relative; z-index: 2; }
.hero-solo .title { max-width: 17ch; }
.hero-solo .deck { max-width: 48ch; }

.hero-copy { padding-top: clamp(0.5rem, 3vw, 2.4rem); }

.kick {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--muted);
  margin: 0 0 clamp(1.2rem, 2.5vw, 1.9rem);
}
.kick .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--lime-deep);
  box-shadow: 0 0 0 3px rgba(211, 238, 62, 0.32);
  animation: pulse 2.6s var(--ease) infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(211, 238, 62, 0.32); }
  50% { box-shadow: 0 0 0 6px rgba(211, 238, 62, 0.08); }
}

/* soronkénti maszkolt beúszás */
/* ⚠️ LEÍRÓ SZÁRAK (2026-08-13): a sor `line-height`-ja 0,96 — vagyis a sordoboz
   ALACSONYABB, mint a betűméret —, az `overflow: hidden` pedig levágta a
   „hogy", „gy", „j" leíró szárait. A maszk kell a beúszó animációhoz, ezért
   nem törölhető: helyette lefelé nyújtjuk a vágódobozt, és a helyet negatív
   margóval visszavesszük, hogy a sorköz ne változzon. A beúszás kezdőpontja
   105% → 118%, különben a szöveg kilátszana ebbe a plusz sávba. */
.title .ln {
  display: block;
  overflow: hidden;
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}
.title .ln > span { display: block; }

/* a kiemelt szó: lime blokk a tinta MÖGÖTT, ami balról nő ki */
/* A kiemelt szó: lime sáv a tinta MÖGÖTT, ami balról nő ki.
   A .title .ln > span {display:block} korábban felülütötte az inline-block-ot,
   így a .hl BLOKK lett: 367px alatt a „mérhető rendszer." két sorba tört, a sáv
   pedig a teljes doboz aljára került, nem a szó alá. Ezért inline maradt, és a
   box-decoration-break gondoskodik róla, hogy sortöréskor MINDEN sor megkapja
   a saját sávját.

   A sáv HÁTTÉR, nem pszeudo-elem: az abszolút pozicionált ::before-t a
   box-decoration-break nem klónozza, tehát sortöréskor csak egy sor kapta
   volna meg. Háttérként minden sor megkapja a sajátját, a „balról nő ki"
   animáció pedig a background-size szélességén megy. */
.hl {
  position: relative;
  display: inline;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  z-index: 0;
  background-image: linear-gradient(var(--lime), var(--lime));
  background-repeat: no-repeat;
  background-position: 0 88%;
  background-size: 0% 0.38em;
  transition: background-size 0.85s var(--ease-out) 0.55s;
  padding-inline: 0.05em;
  margin-inline: -0.05em;
}
/* ⚠️ NEM CSAK a `.title`-ben. Eredetileg `.title.in .hl` volt, vagyis a lime
   kiemelés kizárólag a hero H1-jében rajzolódott ki — bárhol máshol a
   `background-size: 0%` maradt, és a jelölés NÉMÁN eltűnt. (Így állt a hero
   deck „miért" szava és a 05-ös idézet is.) Most bármelyik beúszó elem
   aktiválja a benne lévő kiemelést. */
.title.in .hl,
[data-r].in .hl,
.in .hl { background-size: 100% 0.38em; }
.hl b { font-weight: inherit; }

.deck {
  margin: clamp(1.3rem, 2.4vw, 1.9rem) 0 clamp(1.7rem, 3vw, 2.4rem);
  font-size: clamp(1.02rem, 1.5vw, 1.2rem);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 44ch;
}

/* ══════════════ 9. LAP (sheet) — a három szabály ══════════════ */

.sheet {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.6rem, 2.9vw, 2.4rem);
  box-shadow:
    0 1px 1px rgba(var(--ink-rgb), 0.03),
    0 14px 34px -18px rgba(var(--ink-rgb), 0.22);
  transform: rotate(-0.45deg);
  transition: transform 0.55s var(--ease), box-shadow 0.55s var(--ease);
}
.sheet:hover {
  transform: rotate(0deg) translateY(-3px);
  box-shadow:
    0 1px 1px rgba(var(--ink-rgb), 0.04),
    0 26px 50px -22px rgba(var(--ink-rgb), 0.28);
}

.sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--line);
}
.stamp {
  color: var(--lime-ink);
  border: 1px solid rgba(79, 92, 13, 0.35);
  border-radius: 2px;
  padding: 0.22em 0.5em 0.18em;
  transform: rotate(-1.2deg);
}
.sheet-no { color: var(--faint); }

.rules-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.1rem; }
.rules-list li {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 0.95rem;
  align-items: start;
  padding: 1.05rem 0;
  border-top: 1px solid var(--line);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--muted);
}
.rules-list li:first-child { border-top: 0; padding-top: 0; }
.rules-list strong { color: var(--ink); font-weight: 600; }

/* körbekarikázott szám — zsírkréta-jel */
.circ {
  position: relative;
  z-index: 0;
  isolation: isolate;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  font-family: var(--f-mono);
  font-size: 0.78rem;
  color: var(--ink);
  flex: none;
}
.circ::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: 48% 52% 51% 49% / 50% 47% 53% 50%;
  background: var(--lime);
  transform: rotate(-8deg);
}

/* ragasztószalag */
.tape {
  position: absolute;
  width: 96px; height: 26px;
  background: rgba(231, 255, 99, 0.5);
  border-left: 1px solid rgba(var(--ink-rgb), 0.05);
  border-right: 1px solid rgba(var(--ink-rgb), 0.05);
  box-shadow: 0 1px 3px rgba(var(--ink-rgb), 0.07);
}
.tape-tl { top: -13px; left: -22px; transform: rotate(-32deg); }

/* ══════════════ 10. RÖVIDEN — kartoték-lap ══════════════ */

.strip { padding: 0 0 clamp(3rem, 6vw, 5rem); }

.card-index {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.8rem, 3.4vw, 2.9rem) clamp(1.8rem, 3.4vw, 3.1rem);
  max-width: 100%;
  box-shadow: 0 12px 30px -22px rgba(var(--ink-rgb), 0.3);
  /* kartoték-lap: a piros margóvonal helyén lime sáv */
  border-left: 3px solid var(--lime);
}
.card-index-label {
  display: block;
  color: var(--faint);
  margin-bottom: 0.8rem;
}
.card-index p {
  margin: 0;
  font-size: clamp(0.98rem, 1.3vw, 1.06rem);
  line-height: 1.74;
  color: var(--ink-2);
  columns: 2;
  column-gap: clamp(1.6rem, 3vw, 3rem);
  column-rule: 1px solid var(--line);
}
@media (max-width: 820px) { .card-index p { columns: 1; } }

/* ══════════════ 11. 01 · KIK VAGYUNK ══════════════ */

/* kézzel húzott aláhúzás, ami megrajzolódik.
   Csak egybefüggő, nem törhető szakaszra tehető: ha a szöveg belül sortörne,
   a vonal a doboz teljes szélességén végigmenne. */
.ul { position: relative; display: inline-block; white-space: nowrap; }
/* Vastagabb, lejjebb ülő filctoll-vonal: a korábbi 5-ös vonalvastagság a
   nagy display-címek alatt vékony karcnak látszott, nem jelölésnek. */
/* ⚠️ A VONAL A BETŰK MÖGÖTT FUT (`z-index: -1`), és lejjebb ül, mint korábban.
   Fölöttük futva átvágta az alányúló szárakat — a „Törjük" j-je ketté volt
   szelve, és a vastag lime folt a mélyebb papíron (`--paper-deep`) foltnak
   látszott, nem jelölésnek. Mögé kerülve a betű marad az elöl lévő elem, a
   vonal pedig végigfut alatta. */
.ul .draw {
  position: absolute;
  left: 0; right: 0; bottom: -0.3em;
  width: 100%; height: 0.34em;
  overflow: visible;
  z-index: -1;
}
.ul .draw path {
  fill: none;
  stroke: var(--lime-deep);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 340;
  stroke-dashoffset: 340;
  transition: stroke-dashoffset 1.1s var(--ease-out) 0.35s;
}
[data-r].in .draw path, .in .draw path { stroke-dashoffset: 0; }
.more { margin-top: 1.6rem !important; }

/* főkönyvi sorok: címke — érték, hajszálvonallal */
.ledger { border-top: 1px solid var(--ink); }
.ledger-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.95rem 0;
  border-bottom: 1px solid var(--line);
}
.ledger-row span {
  font-family: var(--f-mono);
  font-size: 0.68rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--faint);
}
.ledger-row b {
  font-family: var(--f-disp);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: -0.02em;
  /* A hosszú, tördelhetetlen értékek (e-mail, URL) különben szétfeszítik az
     oszlopot: 320px-en a krisztian.toth@dataviral.net 272px-t követelt, ami a
     /contact teljes tartalomoszlopát 362px-re nyomta. A body overflow-x:clip
     ezt nem javította, csak levágta — a cím jobb fele eltűnt a képernyőről.
     A min-width:0 kell a flex-sorhoz, különben a b nem zsugorodhat. */
  min-width: 0;
  overflow-wrap: anywhere;
}

/* ugyanez a kartoték-lap és a folyószöveg hivatkozásaira (adatvédelmi
   e-mail címek a /privacy-n, mailto-linkek mindenhol) */
.card-index a,
.prose a { overflow-wrap: anywhere; }

@media (max-width: 780px) {
  .shots { grid-template-columns: 1fr 1fr; }
}

/* ══════════════ 12. 02 · LÉPÉSEK (hívólista) ══════════════ */

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--ink);
}

.step {
  position: relative;
  display: grid;
  grid-template-columns: 74px minmax(0, 1.6fr) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2.6rem);
  padding: clamp(1.85rem, 3.4vw, 2.9rem) 0;
  border-bottom: 1px solid var(--line);
  transition: background 0.4s var(--ease);
}
/* sor-kiemelés: a lime nem a szövegen, hanem a sor alatt fut végig */
.step::before {
  content: "";
  position: absolute;
  left: -1.4rem; right: -1.4rem;
  top: 0; bottom: 0;
  background: rgba(231, 255, 99, 0.28);
  opacity: 0;
  transition: opacity 0.4s var(--ease);
  pointer-events: none;
  z-index: -1;
}
.step:hover::before { opacity: 1; }
.step-last { border-bottom-width: 1px; border-bottom-color: var(--ink); }

.step-no {
  font-size: 0.78rem;
  color: var(--faint);
  padding-top: 0.35rem;
  letter-spacing: 0.1em;
  transition: color 0.35s var(--ease);
}
.step:hover .step-no { color: var(--lime-ink); }

.step-main h3 {
  font-size: clamp(1.24rem, 2.1vw, 1.72rem);
  margin-bottom: 0.6rem;
}
.step-main p {
  margin: 0;
  color: var(--muted);
  font-size: 0.99rem;
  line-height: 1.68;
  max-width: 54ch;
}

/* A hét lépés címe mellé a saját jele. A lista addig csupa vonalból,
   sorszámból és szövegtömbből állt — hét egyforma doboz egymás alatt. A jelek
   különböztetik meg őket egymástól, és ugyanabból a 22 darabos készletből
   valók, amit a /services használ: ajánlat, onboarding, stratégia, forgatás,
   posztolás, elemzés, riport. */
.step-main h3 {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}
.step-ico {
  width: 30px;
  height: 30px;
  flex: none;
  --ico-stroke: 1.6;
}

.step-out {
  padding-left: clamp(0.9rem, 2vw, 1.6rem);
  border-left: 1px solid var(--line);
}
/* ⚠️ NAGYOBB, MINT A TÖBBI MONO CÍMKE, ÉS JELE VAN. A 0,69 rem-es közös
   méretben az „Amit adunk" beleolvadt a mellette futó szövegbe, pedig ez a
   szakasz ígérete: minden lépés végén adunk valamit. Először egy teljes
   szélességű lime vonal került fölé — az viszont még egy vízszintest húzott
   egy amúgy is csupa-vonalas, dobozos listába. A jel ugyanazt a kezdetet
   jelöli, de megtöri a sok egyenest. */
.step-out span {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--lime-ink);
  font-size: 0.83rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  margin-bottom: 0.7rem;
}
.step-out span .ico {
  width: 22px;
  height: 22px;
  --ico-accent: var(--lime);
}
.step-out p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink-2);
}

/* ══════════════ 13. A FURCSA IPARÁG · A HUROK · UGYANAZ AZ ADAT ══════════════

   Itt állt korábban a futó ciklus-szalag (.belt). A szalag markupja kikerült
   az index.html-ből, a stílusa ezért törölve. A paper.js `marquee($('#belt'))`
   hívása maradhat: a függvény első sora `if (!track || reduced) return`.

   ══════════════ 01 · A FURCSA IPARÁG ══════════════
   Bal oldalt az ismerős mondat, jobb oldalt a kérdés, amit kikerül. A kérdés
   lime és mono — vagyis MARGÓJEGYZET, nem újabb állítás. Ez a v4
   „munkafelület" logikája: a lapon valaki dolgozott, és odaírt valamit. */

/* Az adatos szakasz zárómondata (a 05-ös „A rendszer" alján, sötét
   felületen). Korábban a heróban állt, de ott két bekezdés versengett
   egymással — itt a négy kártya összegzése lett belőle. */
.claim-line {
  position: relative;
  margin: clamp(2.2rem, 4vw, 3.4rem) 0 0;
  padding: clamp(1.6rem, 3vw, 2.4rem) 0 0 clamp(2.6rem, 4vw, 3.8rem);
  border-top: 1px solid var(--screen-line);
  font-family: var(--f-disp);
  font-size: clamp(1.55rem, 3.2vw, 2.5rem);
  line-height: 1.22;
  letter-spacing: -0.025em;
  color: var(--screen-text);
  max-width: 26ch;
}
/* Nagy lime idézőjel a mondat elé: ez emeli ki idézetté ahelyett, hogy csak
   nagyobb betű lenne. A `::before` kilóg a bal oldali behúzásba. */
.claim-line::before {
  content: "\201D";
  position: absolute;
  left: 0;
  top: clamp(0.6rem, 1.6vw, 1.1rem);
  font-family: var(--f-disp);
  font-size: clamp(3.2rem, 6vw, 5rem);
  line-height: 1;
  color: var(--lime);
}

/* ══ SZÁRAZ MEGJEGYZÉS ══
   A hangnem-doksi 90/10 szabálya szerinti odaszúrás (docs/hangnem-mondatbank.md).
   Szándékosan halkabb, mint a szakaszcímek: az ilyen mondat akkor működik, ha
   nem kiabálja magát. A lime csak a bal oldali jelölővonalban van jelen. */
.quip {
  margin: clamp(1.8rem, 3.4vw, 2.6rem) 0 0;
  padding-left: clamp(0.9rem, 1.8vw, 1.2rem);
  border-left: 2px solid var(--lime);
  font-family: var(--f-disp);
  font-size: clamp(1.05rem, 1.9vw, 1.3rem);
  line-height: 1.4;
  color: var(--ink-2);
  max-width: 54ch;
}

.claims {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
  counter-reset: claim;
}
.claims li {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2.6rem);
  align-items: baseline;
  padding: clamp(1.1rem, 2.4vw, 1.7rem) 0;
  border-bottom: 1px solid var(--line);
  counter-increment: claim;
  transition: background 0.4s var(--ease);
}
/* Nagy, halvány sorszám: ritmust ad a listának, és rögzíti, hogy ez öt
   KÜLÖN eset, nem egy folyó szöveg. A ::before a rács első oszlopában ül. */
.claims li::before {
  content: counter(claim, decimal-leading-zero);
  font-family: var(--f-mono);
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  line-height: 1;
  color: var(--line-2);
  transition: color 0.4s var(--ease);
}
.claims li:hover { background: rgba(var(--ink-rgb), 0.02); }
.claims li:hover::before { color: var(--lime-ink); }
.claims .claim {
  margin: 0;
  font-family: var(--f-disp);
  font-size: clamp(1.15rem, 2.3vw, 1.75rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.claims .dodge {
  position: relative;
  margin: 0;
  padding-left: 1.6rem;
  font-family: var(--f-mono);
  font-size: clamp(0.85rem, 1.4vw, 1rem);
  color: var(--ink-2);
}
/* A lime nyíl JEL, nem dísz: ez köti a kérdést a mondathoz. */
.claims .dodge::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--lime-ink);
}

.stakes {
  margin-top: clamp(2.2rem, 4vw, 3.4rem);
  padding: clamp(1.6rem, 3vw, 2.4rem);
  background: var(--paper-deep);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.stakes-h {
  margin: 0 0 1.1rem;
  font-family: var(--f-mono);
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
}
.stakes-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem clamp(1.2rem, 3vw, 2.4rem);
}
.stakes-list li {
  position: relative;
  padding-left: 1.1rem;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink-2);
}
.stakes-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.66em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--lime-ink);
}
.stakes-punch {
  margin: clamp(1.4rem, 2.6vw, 2rem) 0 0;
  padding-top: clamp(1.2rem, 2.4vw, 1.7rem);
  border-top: 1px solid var(--line);
  font-family: var(--f-disp);
  font-size: clamp(1.15rem, 2.2vw, 1.6rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.stakes-punch b { background: linear-gradient(transparent 62%, var(--lime) 62%); }

/* ══════════════ 02 · A SZAKADÉK (tulaj vs. marketinges) ══════════════
   Két hasáb egymással szemben, köztük a törésvonal — a rés MAGA az érv.
   Alatta a feloldás fut teljes szélességben, hogy vizuálisan is „összeérjen"
   a két oldal. */
/* Felvezető a két hasáb elé — kimondja, MIÉRT jön a szembeállítás. */
.rift-lead {
  margin: 0 0 clamp(1rem, 2vw, 1.5rem);
  max-width: 62ch;
  font-family: var(--f-disp);
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.rift {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin-bottom: clamp(2.2rem, 4vw, 3.4rem);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.rift-side { padding: clamp(1.3rem, 2.6vw, 2rem); }
.rift-side + .rift-side { border-left: 1px solid var(--line); }
.rift-tag {
  display: block;
  margin-bottom: 0.6rem;
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--faint);
}
.rift-side p {
  margin: 0;
  font-family: var(--f-disp);
  font-size: clamp(1rem, 1.9vw, 1.28rem);
  line-height: 1.3;
  color: var(--ink);
}
/* A FELOLDÁS SÖTÉT SÁVON ÜL. Papírszínen ugyanolyan súlyú volt, mint a
   két hasáb fölötte — pedig ez a szakasz konklúziója. A sötét blokk
   ugyanaz a v4-metafora: a két világ fölött ott a rendszer, ami összeköti
   őket. A lime aláhúzás sötéten is működik, csak világos betűvel. */
.rift-punch {
  grid-column: 1 / -1;
  margin: 0;
  padding: clamp(1.4rem, 2.8vw, 2.1rem);
  background: var(--screen);
  font-size: clamp(1rem, 1.7vw, 1.12rem);
  line-height: 1.55;
  color: var(--screen-text);
}
.rift-punch b {
  font-weight: 600;
  color: var(--lime);
  background: none;
}
@media (max-width: 700px) {
  .rift { grid-template-columns: 1fr; }
  .rift-side + .rift-side { border-left: 0; border-top: 1px solid var(--line); }
}

/* ══════════════ 02 · A HUROK ══════════════
   Hat csomópont egy vonalon. A vonalat a ::before húzza a lista mögé; a
   korongok kitakarják ott, ahol a szám ül. A `↻` a végén mondja ki, hogy ez
   kör, nem egyenes — enélkül folyamatábrának olvasna. */
/* Felvezető az ábra fölé — enélkül a hat csomópont kontextus nélkül állt,
   és nem derült ki, hogy ez a MÓDSZERTAN, nem egy díszes felsorolás. */
.loop-h {
  margin: 0 0 clamp(1.1rem, 2.2vw, 1.7rem);
  font-family: var(--f-disp);
  font-size: clamp(1.05rem, 1.9vw, 1.3rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.loop {
  position: relative;
  display: grid;
  /* Négy lépés (volt hat): a lábléc-sáv és ez a lista ugyanazt a hurkot
     mondja — 2026-08-13-tól Megfigyelés → Tesztelés → Elemzés → Döntés. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.loop::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 15px;
  height: 1px;
  background: var(--line-2);
}
.loop li {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.8rem;
}
.loop b {
  display: grid;
  place-items: center;
  width: 31px; height: 31px;
  border-radius: 50%;
  background: var(--lime);
  color: var(--lime-ink);
  font-family: var(--f-mono);
  font-size: 0.72rem;
  font-weight: 500;
}
.loop span {
  font-family: var(--f-disp);
  font-size: clamp(0.92rem, 1.5vw, 1.08rem);
  line-height: 1.25;
  color: var(--ink);
}
/* A záró hurok-jel mondja ki, hogy ez KÖR, nem egyenes folyamat. Enélkül
   négylépéses folyamatábrának olvasna, aminek a végén vége van.
   2026-08-14: a ↻ KARAKTER helyett rajzolt SVG — a betűtípusból jövő jel
   vékony és apró volt, „mintha hibás lenne" (Krisztián). Most ugyanolyan
   31 px-es lime korong, mint a számozott lépések, benne kézzel húzott
   nyílvonal — így a sor ötödik, záró csomópontjaként olvasódik. */
.loop li:last-child::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 31px;
  height: 31px;
  border-radius: 50%;
  background-color: var(--lime);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234F5C0D' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19.2 8.2A8.1 8.1 0 1 0 20.1 12'/%3E%3Cpath d='M20.6 4.4v3.8h-3.8'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 17px 17px;
}

/* A hurok bezárása szövegben is: a ↻ jel mondanivalója kimondva. A lime
   csík a „tanulsággal előrébb" alatt JEL — ez a szakasz állítása. */
.loop-close {
  margin: clamp(1.6rem, 3vw, 2.2rem) 0 0;
  max-width: 58ch;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--ink-2);
}
.loop-close b { background: linear-gradient(transparent 62%, var(--lime) 62%); font-weight: 600; color: var(--ink); }

/* ══════════════ 03 · UGYANAZ AZ ADAT ══════════════
   Két hasáb: a bal az „ahogy általában hangzik" (halvány, idézőjeles,
   lezárt), a jobb az „ahogy nálunk" (világos, lime jelöléssel, nyitott).
   A kontraszt maga az érv — ezért nem egyforma a két doboz súlya. */
.swap { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
.swap-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  gap: clamp(1rem, 2.4vw, 2rem);
  align-items: stretch;
}
/* ⚠️ EZ A SZAKASZ PAPÍRON ÁLL, nem sötéten. Eredetileg a `sec-screen`-re
   készült: a bal hasáb `opacity: .62` + `--screen-muted` volt, ami világos
   háttéren alig olvasható szürkévé fakult. Papíron a halványítást NEM
   áttetszőség adja, hanem a szín és a keret — a szöveg így teljes
   erősséggel látszik, a kontraszt mégis megmarad a sötét jobb hasábbal. */
.swap-old,
.swap-new {
  padding: clamp(1.2rem, 2.4vw, 1.8rem);
  border-radius: var(--r-lg);
}
.swap-old {
  background: transparent;
  border: 1px dashed var(--line-2);
}
.swap-new {
  background: var(--screen-2);
  border: 1px solid var(--screen-2);
}
.swap-tag {
  display: block;
  margin-bottom: 0.9rem;
  font-family: var(--f-mono);
  font-size: 0.84rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--faint);
}
.swap-new .swap-tag { color: var(--lime); }
.swap-old p,
.swap-new p { margin: 0; line-height: 1.55; }
.swap-old p {
  font-family: var(--f-disp);
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  color: var(--ink-2);
}
.swap-new p { font-size: 1rem; color: var(--screen-text); }

/* ══ KÍSÉRLETI NAPLÓ ══
   A 04-es szakasz bizonyítéka: egy lezárt, valódi kísérlet hat kötött
   lépésben (feltételezés → változtatás → megfigyelés → eredmény →
   tanulság → következő lépés). Papír-anyag, kartoték-logika; a
   hipotézis-azonosító lime JELET kap, mert előre rögzítettük. */
.exp {
  margin-top: clamp(2.4rem, 4.5vw, 3.6rem);
  padding: clamp(1.6rem, 3vw, 2.4rem);
  background: var(--card);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
}
.exp-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1.2rem;
  margin-bottom: clamp(1.3rem, 2.4vw, 1.8rem);
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}
.exp-tag {
  font-family: var(--f-mono);
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
}
.exp-id {
  font-family: var(--f-mono);
  font-size: 0.82rem;
  color: var(--ink-2);
}
.exp-id i {
  font-style: normal;
  padding: 0.1em 0.35em;
  border-radius: 2px;
  background: var(--lime);
  color: var(--ink);
}
.exp-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.3rem, 2.6vw, 1.9rem) clamp(1.2rem, 2.6vw, 2rem);
}
.exp-steps li { border-top: 1px solid var(--line); padding-top: 0.7rem; }
.exp-l {
  display: block;
  margin-bottom: 0.45rem;
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}
.exp-l b { font-weight: 600; color: var(--lime-ink); margin-right: 0.55em; }
.exp-steps p { margin: 0; font-size: 0.98rem; line-height: 1.5; color: var(--ink-2); }
.exp-foot {
  margin: clamp(1.4rem, 2.6vw, 2rem) 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--muted);
}
.exp-foot a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.exp-foot a:hover { background: var(--lime); text-decoration: none; }

@media (max-width: 900px) {
  /* Mobilon a sorszám a mondat FÖLÉ kerül, nem mellé: 2,6rem oszlop 375 px-en
     a szöveg rovására menne. */
  .claims li { grid-template-columns: 1fr; gap: 0.35rem; }
  .claims li::before { font-size: 1.1rem; }
  .stakes-list { grid-template-columns: 1fr; }
  .loop { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.6rem; }
  .loop::before { display: none; }
  /* a 2×2 rácsban a záró hurok-korong a jobb szélen lebegett, sehova nem
     tartozott — a kör-üzenetet itt a lista alatti .loop-close mondat viszi */
  .loop li:last-child::after { display: none; }
  .swap-row { grid-template-columns: 1fr; }
  .exp-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .loop { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .exp-steps { grid-template-columns: 1fr; }
}

/* ══════════════ 14. 03 · HASÁBOK ══════════════ */

.spread {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--ink);
}

.colm {
  position: relative;
  padding: clamp(1.9rem, 3.2vw, 2.7rem) clamp(1.3rem, 2.6vw, 2.3rem);
  border-right: 1px solid var(--line);
  transition: background 0.45s var(--ease);
}
.colm:first-child { padding-left: 0; }
.colm:last-child { border-right: 0; }
/* KIEMELÉS FEHÉR FOLT NÉLKÜL. Eddig `rgba(255,255,255,.5)` töltötte ki a
   hasábot, ami a shader-háttér fölött tejes panelként ült, és félig
   kitakarta a mögötte futó rajzot — véletlen kijelölésnek látszott. Helyette
   ugyanaz a lime vonal-jel, amit a sötét kártyák (`.chit::after`) is
   használnak: jelöl, de nem takar. */
.colm::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: var(--lime);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease-out);
}
.colm:hover::after { transform: scaleX(1); }
.colm:hover { background: rgba(255, 255, 255, 0.16); }

.colm-tag { display: block; color: var(--faint); margin-bottom: 1rem; }

/* 24ch, nem 16: a hasábcímek egy mondatnyi állítássá hosszabbodtak
   („Arculattervezés, forgatás, … — egy kézben."), és 16ch-nél hat sorra
   tördeltek. */
.colm h3 {
  font-size: clamp(1.12rem, 1.7vw, 1.34rem);
  margin-bottom: 1.65rem;
  max-width: 24ch;
}

/* A hasábcím alatti második mondat. A cím azt mondja ki, mit csinálunk, ez
   pedig azt, mit nem — ha mindkettő címméretben áll, két címnek látszik és
   szétesik a hasáb teteje. Ezért kisebb, halványabb, és szorosan a cím alatt. */
.colm h3:has(+ .colm-lede) { margin-bottom: 0.55rem; }
.colm-lede {
  margin: 0 0 1.55rem;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--muted);
  max-width: 26ch;
}

/* A tétel alatti felsorolás: nem mondat, hanem a szállított anyagok neve.
   Mono és halvány, hogy a szemed átugorhassa, ha nem érdekli. */
.li-meta {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--f-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  line-height: 1.7;
  color: var(--faint);
}

/* A HÁROM HASÁB EGY VONALRÓL INDUL. A címek 2–4 sorosak (a 02-é a leghosszabb),
   és ha mindegyik a saját magasságán ül, a listák három különböző
   magasságban kezdődnek — ez az, ami rendezetlennek látszik. A `subgrid`
   közös sorokra fűzi a hármat: felütés, fejrész, lista. A cím és a
   második mondat EGY rácselem (`.colm-head`), különben a lede külön sort
   kapna, és a nélküle álló hasábokban lyuk maradna.

   ⚠️ A KÜSZÖB EGYÜTT JÁR AZ EGYHASÁBOS SZABÁLLYAL (1040 px, a fájl vége
   felé). 2026-08-14-ig ez a blokk 780-tól élt, az egyhasábos váltás pedig
   900-nál — a kettő KÖZÖTT mindkét szabály hatott: az egy oszlop mellé a
   `grid-row: 1/-1` implicit oszlopokba tolta a hasábokat, torz
   szélességekkel (129/350/363 px). Fekvő telefonon pontosan ez látszott
   („teljesen szétesett"). Ha az egyik küszöböt mozgatod, mozgasd a másikat is. */
@media (min-width: 1041px) {
  .spread { grid-template-rows: auto auto 1fr; }
  .colm {
    display: grid;
    grid-row: 1 / -1;
    grid-template-rows: subgrid;
    align-content: start;
  }
  .colm-head { align-self: start; }
  .colm-head :last-child { margin-bottom: 0; }
  .colm > ul { margin-top: clamp(1.2rem, 2.2vw, 1.65rem); }
}

.colm ul { list-style: none; margin: 0; padding: 0; }
.colm li {
  padding: 0.95rem 0;
  border-top: 1px solid var(--line);
  font-size: 1rem;
  line-height: 1.62;
  color: var(--muted);
}
.colm li strong { color: var(--ink); font-weight: 600; display: block; }

/* a megjelölt hasáb: lime blokk fut a teteje mentén */
.colm-mark::before {
  content: "";
  position: absolute;
  top: -1px; left: 0; right: 0;
  height: 4px;
  background: var(--lime);
}
.colm-mark { background: rgba(255, 255, 255, 0.55); }

/* ══════════════ 15. 04 · A RIPORT (nyomat) ══════════════ */

.report-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(2.4rem, 6vw, 6rem);
  align-items: start;
}

.report-copy .h-display { margin-bottom: 1.6rem; }
.report-copy .answer { margin-bottom: 2rem; }
.report-copy .lede { margin: 0 0 1.9rem; }
.report-copy .acts { margin-top: 2.2rem; }

.checklist { list-style: none; margin: 0 0 2rem; padding: 0; border-top: 1px solid var(--screen-line); }
.checklist li {
  position: relative;
  padding: 0.8rem 0 0.8rem 1.75rem;
  border-bottom: 1px solid var(--screen-line);
  font-size: 1.06rem; /* 1rem itt 15 px alá esik — a folyószöveg-küszöb 16 px */
  color: var(--screen-muted);
}
.checklist li::before {
  content: "";
  position: absolute;
  left: 0; top: 1.05em;
  width: 8px; height: 8px;
  background: var(--lime);
  transform: rotate(45deg);
}

/* ---------- A FELÜLET: nem nyomat, hanem termék ----------
   A v3-ban ez fehér papírlap volt. Papíron a „mi felületet adunk, nem PDF-et"
   állítás önmagának mond ellent — ezért ez kijelzőn él. */

.device {
  display: block;
  text-decoration: none;
  position: sticky;
  top: 110px;
  border-radius: 12px;
  background: var(--screen-2);
  border: 1px solid var(--screen-line);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.3),
    0 40px 80px -40px rgba(0, 0, 0, 0.85);
  overflow: hidden;
  transition: transform 0.55s var(--ease), box-shadow 0.55s var(--ease), border-color 0.55s var(--ease);
}
.device:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.3),
    0 56px 96px -44px rgba(0, 0, 0, 0.9);
}

/* ablak-fejléc: ettől lesz felület, nem kép */
.device-bar {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.72rem 0.95rem;
  background: var(--screen-3);
  border-bottom: 1px solid var(--screen-line);
}
.device-dots { display: flex; gap: 5px; flex: none; }
.device-dots i {
  width: 9px; height: 9px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
}
.device-url {
  flex: 1;
  text-align: center;
  font-family: var(--f-mono);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  color: var(--screen-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.device-screen { padding: clamp(1.3rem, 2.7vw, 2.1rem); }

/* ---------- fülek ---------- */

.device-tabs {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.55rem clamp(1.1rem, 2.2vw, 1.7rem) 0;
  border-bottom: 1px solid var(--screen-line);
}
.device-tabs [role="tab"] {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--screen-muted);
  font-family: var(--f-body);
  font-size: 0.86rem;
  font-weight: 500;
  padding: 0.5rem 0.75rem 0.62rem;
  cursor: pointer;
  position: relative;
  transition: color 0.28s var(--ease);
}
.device-tabs [role="tab"]::after {
  content: "";
  position: absolute;
  left: 0.3rem; right: 0.3rem; bottom: -1px;
  height: 2px;
  background: var(--lime);
  transform: scaleX(0);
  transition: transform 0.36s var(--ease-out);
}
.device-tabs [role="tab"]:hover { color: var(--screen-text); }
.device-tabs [role="tab"][aria-selected="true"] { color: var(--screen-text); }
.device-tabs [role="tab"][aria-selected="true"]::after { transform: scaleX(1); }

.device-demo {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 0.42rem;
  font-family: var(--f-mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--screen-faint);
  padding-bottom: 0.4rem;
}
.device-demo i {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--lime);
  animation: pulse 2.6s var(--ease) infinite;
}

.pan[hidden] { display: none; }
.pan { animation: pan-in 0.42s var(--ease-out); }
@keyframes pan-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* ---------- pontszám + pillérek ---------- */

.score-row {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  gap: clamp(1rem, 2.4vw, 1.7rem);
  align-items: center;
  padding: clamp(1.3rem, 2.6vw, 1.9rem) 0;
  border-block: 1px solid var(--screen-line);
}

.gauge { position: relative; width: 128px; flex: none; }
.gauge svg { width: 128px; height: 128px; display: block; transform: rotate(-90deg); }
.gauge circle { fill: none; stroke-width: 8; }
.gauge-bg { stroke: rgba(255, 255, 255, 0.09); }
.gauge-fg {
  stroke: var(--lime);
  stroke-linecap: round;
  stroke-dasharray: 327;
  stroke-dashoffset: 327;
  filter: drop-shadow(0 0 8px rgba(var(--lime-rgb), 0.45));
  transition: stroke-dashoffset 1.7s var(--ease-out) 0.15s;
}
.gauge.run .gauge-fg { stroke-dashoffset: 88; }
.gauge-num {
  position: absolute; top: 0; left: 0; right: 0; height: 128px;
  display: grid; place-items: center;
  font-family: var(--f-disp);
  font-weight: 700;
  font-size: 2rem;
  letter-spacing: -0.04em;
  color: var(--screen-text);
  font-variant-numeric: tabular-nums;
}
.gauge-cap {
  display: block;
  margin-top: 0.55rem;
  text-align: center;
  font-family: var(--f-mono);
  font-size: 0.58rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--screen-faint);
}

.pillars { min-width: 0; display: grid; gap: 0.7rem; }
.pr-label {
  display: block;
  font-family: var(--f-mono);
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--screen-faint);
  margin-bottom: 0.2rem;
}

.pr-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 92px 26px;
  align-items: center;
  gap: 0.8rem;
  padding: 0.42rem 0;
}
/* ⚠️ NEM `nowrap`: a felirat alatt egy második sorban ott a MÉRT ÉRTÉK
   (`.pr-val`). Egysoros, levágó beállítással a szám elvágódott és a sáv alá
   csúszott — ez volt a törött állapot. */
.pr-bar span {
  font-size: 0.8rem;
  color: var(--screen-muted);
  line-height: 1.3;
  min-width: 0;
}
/* vékony jel, a záró vég lekerekítve, az alapvonalnál szögletes */
.pr-bar i {
  display: block; height: 8px; border-radius: 2px; overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
}
.pr-bar b {
  display: block; height: 100%; width: 0;
  background: var(--lime);
  border-radius: 0 4px 4px 0;
  transition: width 1.1s var(--ease-out);
}
.device.run .pr-bar b { width: var(--w); }
.pillars .pr-bar:nth-of-type(2) b { transition-delay: 0.07s; }
.pillars .pr-bar:nth-of-type(3) b { transition-delay: 0.14s; }
.pillars .pr-bar:nth-of-type(4) b { transition-delay: 0.21s; }
.pillars .pr-bar:nth-of-type(5) b { transition-delay: 0.28s; }
.pr-bar em {
  font-family: var(--f-mono);
  font-style: normal;
  font-size: 0.72rem;
  color: var(--screen-text);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ---------- idősor ---------- */

.chart { position: relative; margin-bottom: clamp(1rem, 2vw, 1.5rem); }
.chart-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.4rem;
}
.chart-head .pr-label { margin: 0; }
.chart-read {
  font-family: var(--f-mono);
  font-size: 0.72rem;
  color: var(--screen-text);
  font-variant-numeric: tabular-nums;
  opacity: 0;
  transition: opacity 0.2s var(--ease);
}
.chart.hot .chart-read { opacity: 1; }

/* ⚠️ `> svg`, NEM `svg`: a fejlécbe ikon került, és a leszármazott-válogatóra
   az is ráfogott — a 14 px-es jel 451×108-as grafikonná hízott. Csak a
   grafikon SAJÁT rajza kaphatja meg ezt a méretet. */
.chart > svg { display: block; width: 100%; height: 108px; overflow: visible; }
.ch-area { fill: rgba(var(--lime-rgb), 0.12); opacity: 0; transition: opacity 0.9s var(--ease) 0.55s; }
.ch-line {
  fill: none;
  stroke: var(--lime);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
  transition: stroke-dashoffset 1.8s var(--ease-out) 0.2s;
}
.device.run .ch-area { opacity: 1; }
.device.run .ch-line { stroke-dashoffset: 0; }

.ch-cross {
  stroke: rgba(255, 255, 255, 0.45); /* 2,52:1 volt, most 4,44:1 */
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  opacity: 0;
}
.ch-dot {
  fill: var(--lime);
  stroke: var(--screen-2);
  stroke-width: 2;
  opacity: 0;
}
.chart.hot .ch-cross, .chart.hot .ch-dot { opacity: 1; }

.chart-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 0.45rem;
  font-family: var(--f-mono);
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--screen-faint);
}

/* ---------- oszlopok ---------- */

.cols { padding-top: clamp(0.9rem, 2vw, 1.3rem); border-top: 1px solid var(--screen-line); }
.cols-plot {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7rem;
  margin-top: 0.6rem;
}
.col { display: grid; gap: 0.4rem; justify-items: center; }
.col b {
  font-family: var(--f-mono);
  font-size: 0.74rem;
  color: var(--screen-text);
  font-variant-numeric: tabular-nums;
}
/* a sávnak definit magassága van, hogy a százalék feloldható legyen */
.col-track {
  display: flex;
  align-items: flex-end;
  width: 100%;
  height: 84px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
  overflow: hidden;
}
.col i {
  display: block;
  width: 100%;
  height: 0;
  background: rgba(var(--lime-rgb), 0.55);
  border-radius: 4px 4px 0 0;
  transition: height 1s var(--ease-out), background 0.3s var(--ease);
}
.device.run .col i { height: var(--h); }
.col:nth-child(2) i { transition-delay: 0.09s; }
.col:nth-child(3) i { transition-delay: 0.18s; }
.col:hover i { background: var(--lime); }
.col-name {
  font-family: var(--f-mono);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--screen-faint);
}


.pr-verdict {
  margin: 1.5rem 0 0;
  padding: 1.15rem 1.3rem;
  background: rgba(255, 255, 255, 0.035);
  border-radius: var(--r);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--screen-muted);
  border-left: 3px solid var(--lime);
}
.pr-verdict span {
  display: block;
  font-family: var(--f-mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--screen-faint);
  margin-bottom: 0.35rem;
}

.device-hint {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1.1rem;
  border-top: 1px solid var(--screen-line);
  font-family: var(--f-mono);
  font-size: 0.66rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--screen-faint);
  transition: color 0.3s var(--ease), background 0.3s var(--ease);
}
.device:hover .device-hint { color: var(--lime); background: rgba(255, 255, 255, 0.03); }

/* ══════════════ 16. 05 · SHOWREEL (filmkocka) ══════════════ */

/* teljes szélességű film — a stúdiómunka nem fér bele a tartalomoszlopba */
.sec-reel { padding: clamp(2.4rem, 5vw, 4.5rem) 0; }
.reel { padding-inline: 0; }

.reel-frame {
  position: relative;
  width: 100%;
  background: var(--screen);
  padding: 15px 0;
  overflow: hidden;
}

/* a szakasz címe belelóg a filmbe: tipográfia a kép fölött */
/* FILMCÍM-ELRENDEZÉS: a felirat a képkocka KÖZEPÉN fut keresztbe, nem a bal
   alsó sarokban ül. Ezért `inset: 0` + flex-közép, és a szöveg középre zárt.
   A ::before egy halvány, függőleges lefutású fátyol a szöveg sávjában —
   enélkül világos snitteknél a fehér betű elveszik; a videó két széle
   viszont érintetlen marad, tehát a kép nem sötétedik be. */
.reel-title {
  position: absolute;
  z-index: 4;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
}
.reel-title::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    transparent 8%,
    rgba(0, 0, 0, 0.34) 38%,
    rgba(0, 0, 0, 0.34) 62%,
    transparent 92%
  );
}
/* A felirat a videó TELJES szélességét kitölti: a `.wrap` közös
   max-szélessége itt nem érvényes, csak egy keskeny oldalsó levegő marad.
   A `padding-bottom` feljebb tolja a középre zárt blokkot, hogy alatta
   elférjen a lejátszógomb — enélkül a cím pont rátakart. */
.reel-title .wrap {
  position: relative;
  pointer-events: none;
  max-width: none;
  width: 100%;
  padding-inline: clamp(1rem, 3vw, 2.5rem);
}
.reel-title { padding-bottom: clamp(6rem, 12vw, 11rem); }
.reel-title h2 { margin-inline: auto; }
.reel-title .reel-sub { margin-inline: auto; }

/* A felütés a képkocka BAL FELSŐ sarkában, sarokjelzésként — kikerül a
   középre zárt blokkból. A díszvonal (`eyebrow::after`) itt elmarad: a
   sarokban lógó vonalnak nincs mihez igazodnia. */
.reel-badge {
  position: absolute;
  top: clamp(1rem, 2.4vw, 1.9rem);
  left: clamp(1rem, 2.4vw, 2.2rem);
  margin: 0;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
}
.reel-badge::after { display: none; }
/* A VIDEÓN NAGYOBB A SZÖVEG, mint a papíron. Ott a lap tartja a hierarchiát;
   itt egy mozgó kép fut alatta, és ha a felirat a szokásos méret, elveszik
   benne. A cím ~40%-kal nagyobb a sima `.h-display`-nél, a kísérőmondat és a
   felütés arányosan követi. */
/* EGY SORBAN, NAGYBETŰVEL. A `nowrap` miatt a méret nem lehet fix: a
   4,3vw úgy van beállítva, hogy a 29 karakteres cím a keret szélessége alá
   maradjon minden képernyőn — ezért nincs `rem` felső korlát, csak alsó.
   A nagybetűsítés CSS-ből megy, nem a HTML-ből: a felolvasó így a normál
   szót mondja ki, nem betűzi. */
.reel-title h2 {
  color: #fff;
  max-width: none;
  white-space: nowrap;
  text-transform: uppercase;
  font-size: clamp(1rem, 5vw, 4.2rem);
  letter-spacing: -0.02em;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.5);
}
.reel-title .eyebrow { font-size: 0.92rem; letter-spacing: 0.14em; }
/* Mobilon a videókeret csak ~240 px magas: a nagyított felirat 193 px-et
   foglalt belőle, vagyis a szöveg kitakarta a videót. Kis képernyőn ezért
   visszavesszük — a nagyítás az asztali nézetnek szólt. */
@media (max-width: 700px) {
  .reel-title h2 { font-size: clamp(1.5rem, 6.4vw, 2.1rem); }
  .reel-title .eyebrow { font-size: 0.74rem; margin-bottom: 0.5rem; }
  /* 2026-08-14: mobilon a sávra öt szöveg jutott (sarokjelzés, cím, alcím,
     lejátszógomb-felirat, időkód-sor) egy ~240 px-es képkockán — Krisztián:
     „túlzsúfolt". Kis képernyőn a cím + gomb elég: az alcím és az időkód-sor
     csak ismétli, amit a gomb amúgy is mond. Asztali nézetben változatlan. */
  .reel-title .reel-sub { display: none; }
  .reel-tc { display: none; }
}
/* A kisebb kísérőmondat a cím alatt, szintén a videón. Külön elem, mert a
   címnél halványabb és kisebb kell legyen — a cím a felszólítás, ez az
   indoklás. Ugyanaz az árnyék tartja olvashatóan mozgó képen. */
.reel-sub {
  margin: 0.9rem 0 0;
  max-width: 38ch;
  font-size: clamp(1.05rem, 1.9vw, 1.45rem);
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.82);
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.6);
}
.reel-title .eyebrow { color: rgba(255, 255, 255, 0.8); text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5); /* a fátyol fönt 8%-nál átlátszó — világos képkockán is olvasható maradjon */ }
.reel-title .eyebrow::after { background: rgba(255, 255, 255, 0.3); }
.reel-title .eyebrow b { background: var(--lime); color: var(--ink); }

/* perforáció: filmszalag-lyukak fent és lent.
   A padding + content-box vágás adja a lyuk függőleges méretét, így a fekete
   keret megmarad a lyukak fölött és alatt. */
.perf {
  position: absolute;
  z-index: 3;
  left: 0; right: 0;
  height: 15px;
  padding: 4px 0;
  background-clip: content-box;
  background-image: repeating-linear-gradient(
    to right,
    transparent 0 17px,
    var(--paper) 17px 28px
  );
}
.perf-top { top: 0; }
.perf-bot { bottom: 0; }

.reel-inner {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.reel-video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  border: 0;
  pointer-events: none;
}

.reel-play {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  border: 0;
  cursor: pointer;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.62) 4%, rgba(0, 0, 0, 0.12) 46%, rgba(0, 0, 0, 0.3));
  color: var(--paper);
  transition: background 0.4s var(--ease);
}
.reel-play:hover { background: linear-gradient(to top, rgba(0, 0, 0, 0.58) 4%, rgba(0, 0, 0, 0.04) 46%, rgba(0, 0, 0, 0.2)); }
/* lejátszógomb: lime korong grafit háromszöggel, a kép közepén */
.reel-play-ico,
.reel-play-txt {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
}
.reel-play-ico {
  /* A korong a KÖZÉPTŐL LEFELÉ ül: fölötte a filmcím-blokk fut, és a
     korábbi -37px (pontos közép) alatta pont a cím mögé esett. */
  top: 50%;
  margin-top: clamp(2.5rem, 6vw, 5.5rem);
  width: 74px; height: 74px;
  border-radius: 50%;
  background: var(--lime);
  display: grid;
  place-items: center;
  transition: transform 0.42s var(--ease-out), box-shadow 0.42s var(--ease);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
}
.reel-play-ico::after {
  content: "";
  width: 0; height: 0;
  border-left: 19px solid var(--ink);
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  margin-left: 5px;
}
.reel-play:hover .reel-play-ico { transform: translateX(-50%) scale(1.08); }
.reel-play-ico { transform: translateX(-50%); }
.reel-play-txt {
  top: 50%;
  margin-top: 48px;
  font-family: var(--f-mono);
  font-size: 0.68rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #fff;
}

.reel-tc {
  position: absolute;
  right: clamp(1.1rem, 4vw, 2.6rem); bottom: 25px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.62rem;
  z-index: 5;
  pointer-events: none;
}
.reel-frame.playing .reel-play,
.reel-frame.playing .reel-title { opacity: 0; pointer-events: none; }
.reel-frame.playing .reel-video { pointer-events: auto; }

/* márkanevek szalagja — nagyban, ez a névsor a munka mérlege */
.names {
  margin-top: clamp(2.4rem, 5vw, 3.6rem);
  overflow: hidden;
  border-block: 1px solid var(--ink);
  padding: clamp(0.9rem, 2vw, 1.4rem) 0;
  mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}
.names-track {
  display: flex;
  gap: clamp(2rem, 4vw, 3.4rem);
  white-space: nowrap;
  will-change: transform;
}
.names-track span {
  font-family: var(--f-disp);
  font-weight: 700;
  font-size: clamp(1.5rem, 3.2vw, 2.7rem);
  letter-spacing: -0.035em;
  color: var(--ink);
  /* A halvány névsor szándékos — de 0,26-nál a kontraszt 1,72:1 volt, azaz a
     márkanevek gyakorlatilag olvashatatlanok (nagy szövegre 3:1 a küszöb).
     0,55 → 3,63:1, a hover-halványítás 0,16 → 0,5 → 3,14:1. A hatás megmarad:
     halvány névsor, amiből a kurzor alatti név kiugrik. */
  opacity: 0.55;
  transition: opacity 0.35s var(--ease);
}
.names:hover .names-track span { opacity: 0.5; }
.names-track span:hover { opacity: 1; }

/* ══════════════ 18. 07 · MŰHELY ══════════════ */

/* ══ MŰKÖDÉSI ALAP ══
   Három szám a képernyő-felületen, mono betűvel — kijelző-adat, nem
   marketing-dicsekvés. A felirat mondja ki a keretet: ebből tanul a
   rendszer. */
.proof { margin: 0 0 clamp(1.8rem, 3.4vw, 2.6rem); }
.proof-h {
  margin: 0 0 0.9rem;
  font-family: var(--f-mono);
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--screen-faint);
}
.proof-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--screen-line);
  border: 1px solid var(--screen-line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.proof-cell { background: var(--screen-2); padding: clamp(1rem, 2.2vw, 1.5rem); }
.proof-cell b {
  display: block;
  font-family: var(--f-mono);
  font-weight: 600;
  font-size: clamp(1.55rem, 3.2vw, 2.3rem);
  line-height: 1.15;
  color: var(--screen-text);
}
.proof-cell span {
  font-family: var(--f-mono);
  font-size: 0.76rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--screen-muted);
}
@media (max-width: 560px) {
  .proof-cell { padding: 0.85rem 1rem; }
  .proof-cell b { font-size: 1.35rem; }
}

.bench {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.8rem, 1.8vw, 1.2rem);
}

/* szoftver-cédulák a képernyő-felületen */
.chit {
  position: relative;
  background: var(--screen-2);
  border: 1px solid var(--screen-line);
  border-radius: var(--r-lg);
  padding: clamp(1.4rem, 2.5vw, 1.95rem);
  overflow: hidden;
  transition: transform 0.45s var(--ease), border-color 0.45s var(--ease), background 0.45s var(--ease);
}
.chit::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: var(--lime);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease-out);
}
.chit:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, 0.22);
  background: var(--screen-3);
}
.chit:hover::after { transform: scaleX(1); }
.chit h3 { font-size: 1.12rem; margin-bottom: 0.55rem; color: var(--screen-text); }
.chit p { margin: 0; font-size: 1rem; line-height: 1.55; color: var(--screen-muted); }
/* A kártya-ikon. A kitöltést és a vonalat a sprite belső stílusa intézi, a
   befoglaló elem csak méretet, színt és az akcent-változókat adja — ezért
   szerepel a .chit-ico a lenti .ico/.svc-ico/.toc-ico csoportban is.

   VÉGIG LIME (2026-08-10, tulajdonosi kérés: „legalább neon színűek legyenek,
   hogy ne legyen unalmas"). Emiatt az akcent-elem is lime-ra vált — a
   sprite kétszínű hatása itt elveszik, de a sötét kártyán a neon vonal
   erősebb, mint a halvány kétszínűség.

   ⚠️ A szín SZÁNDÉKOSAN a .chit leszármazottjaként áll: a közös
   .ico/.svc-ico/.toc-ico/.chit-ico szabály lejjebb van a fájlban, és
   `color: var(--ink)`-et ad — azonos specifikusságnál az nyerne, és a
   sötét kártyán sötét ikon lenne, vagyis láthatatlan. */
.chit .chit-ico {
  width: 40px; height: 40px;
  margin-bottom: 0.9rem;
  color: var(--lime);
  --ico-accent: var(--lime);
  --ico-stroke: 1.5;
}

/* ══════════════ 19. 08 · KIVÁGÁSOK ══════════════ */

.clips {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.9rem, 2vw, 1.4rem);
}

.clip {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  text-decoration: none;
  padding: clamp(1.5rem, 2.7vw, 2.1rem);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  position: relative;
  overflow: hidden;
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
.clip::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--lime);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.5s var(--ease-out);
}
.clip:hover { transform: translateY(-4px); box-shadow: 0 24px 44px -28px rgba(var(--ink-rgb), 0.35); }
.clip:hover::before { transform: scaleY(1); }
/* NAGYOBB ÉS BESZÉDESEBB KÁRTYA. A cím 1,02 rem-en, a téma-címke 0,69 rem-es
   mono szürkén — három ilyen kártya egymás mellett egyforma szürke tömb volt,
   és a címeket el kellett olvasni ahhoz, hogy megkülönböztesd őket. A jel adja
   a különbséget, a nagyobb cím az olvashatóságot, az alsó sor pedig lezárja a
   kártyát: bal oldalt az idő, jobb oldalt a nyíl. */
.clip { min-height: 15.5rem; gap: 1.15rem; }
.clip-tag {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--faint);
}
.clip-tag .ico { color: var(--ink); }
.clip h3 { font-size: clamp(1.14rem, 1.75vw, 1.4rem); line-height: 1.24; flex: 1; }
.clip small {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--line);
  font-family: var(--f-mono);
  font-size: 0.68rem;
  color: var(--faint);
  letter-spacing: 0.06em;
}
.clip-arr { transition: transform 0.32s var(--ease); }
.clip:hover .clip-arr { transform: translateX(4px); color: var(--ink); }

/* ══════════════ 20. 09 · GYIK ══════════════ */

.qa { border-top: 1px solid var(--ink); }

.qa-item { border-bottom: 1px solid var(--line); }
.qa-item summary {
  display: grid;
  grid-template-columns: 58px 1fr 30px;
  align-items: center;
  gap: 0.6rem;
  padding: clamp(1.35rem, 2.5vw, 1.9rem) 0;
  cursor: pointer;
  list-style: none;
}
.qa-item summary::-webkit-details-marker { display: none; }
.qa-n { color: var(--faint); transition: color 0.3s var(--ease); }
.qa-item summary h3 {
  font-size: clamp(1.02rem, 1.6vw, 1.28rem);
  margin: 0;
  transition: transform 0.4s var(--ease);
}
.qa-item summary:hover .qa-n { color: var(--lime-ink); }
.qa-item summary:hover h3 { transform: translateX(4px); }

.qa-x { position: relative; width: 15px; height: 15px; justify-self: end; }
.qa-x::before, .qa-x::after {
  content: "";
  position: absolute;
  background: var(--ink);
  transition: transform 0.4s var(--ease-out), opacity 0.3s var(--ease);
}
.qa-x::before { left: 0; right: 0; top: 7px; height: 1.5px; }
.qa-x::after { top: 0; bottom: 0; left: 7px; width: 1.5px; }
.qa-item[open] .qa-x::after { transform: rotate(90deg); opacity: 0; }

.qa-body {
  padding: 0 30px clamp(1.5rem, 2.6vw, 2.1rem) 58px;
  overflow: hidden;
}
.qa-body p {
  margin: 0;
  color: var(--muted);
  font-size: 1.06rem;
  line-height: 1.74;
  max-width: 72ch;
}
.qa-item[open] .qa-body { animation: qa-open 0.5s var(--ease-out); }
@keyframes qa-open {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}

/* A VÁRÓLISTA-ŰRLAP stílusa. A markup ma lekerült a főoldalról, de a
   visszatétel dokumentáltan nyitott döntés (src/pages/v4/index.html,
   05-ös szakasz kommentje) — a stílus és a paper.js waitlist() kezelője
   ezért szándékosan marad, hogy a visszatett markup azonnal működjön. */
/* várólista-űrlap */
.signup {
  margin-top: clamp(2rem, 3.6vw, 3rem);
  padding: clamp(1.7rem, 3.2vw, 2.5rem);
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--screen-line);
  border-radius: var(--r-lg);
}
.signup-q { margin: 0 0 0.9rem; color: var(--screen-muted); }
.signup-q span { text-transform: none; letter-spacing: 0.02em; color: var(--screen-faint); }

.picks { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-bottom: 1.4rem; }
.picks label { cursor: pointer; }
.picks input { position: absolute; opacity: 0; pointer-events: none; }
.picks span {
  display: inline-block;
  padding: 0.5rem 0.85rem;
  border: 1px solid var(--screen-line);
  border-radius: 100px;
  background: transparent;
  color: var(--screen-text);
  font-size: 0.95rem;
  transition: background 0.28s var(--ease), border-color 0.28s var(--ease), color 0.28s var(--ease);
}
.picks label:hover span { border-color: rgba(255, 255, 255, 0.36); }
.picks input:checked + span {
  background: var(--lime);
  border-color: var(--lime);
  color: var(--ink);
  font-weight: 600;
}
.picks input:focus-visible + span { outline: 2px solid var(--lime); outline-offset: 2px; }

.signup-row { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.signup-row input {
  flex: 1 1 240px;
  min-width: 0;
  padding: 0.78rem 1rem;
  border: 1px solid var(--screen-line);
  border-radius: 100px;
  background: rgba(0, 0, 0, 0.25);
  font-family: inherit;
  font-size: 1rem;
  color: var(--screen-text);
  transition: border-color 0.28s var(--ease);
}
.signup-row input:focus { outline: none; border-color: var(--lime); box-shadow: 0 0 0 3px rgba(var(--lime-rgb), 0.35); }
.signup-row input::placeholder { color: var(--screen-faint); }

.consent {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  margin-top: 1rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--screen-muted);
  cursor: pointer;
}
.consent input { margin-top: 0.22rem; accent-color: var(--lime); flex: none; }
.consent a { color: var(--lime); }

.signup-note { margin: 0.85rem 0 0; font-size: 0.9rem; color: var(--screen-faint); }
.signup-note.err { color: #ff8b7e; }
.signup-note.ok { color: var(--lime); font-weight: 600; }

/* ══════════════ 21. ZÁRÓ BLOKK ══════════════ */

.closing {
  background: var(--lime);
  color: var(--ink);
  padding: clamp(4rem, 9vw, 8rem) 0;
  position: relative;
  overflow: hidden;
}
/* nyomdai raszter a lime blokkon */
.closing::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(var(--ink-rgb), 0.5) 1.4px, transparent 1.5px);
  background-size: 11px 11px;
  mask-image: radial-gradient(ellipse 62% 105% at 84% 42%, #000 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 62% 105% at 84% 42%, #000 0%, transparent 70%);
  pointer-events: none;
}
.closing-in { position: relative; z-index: 1; }
.closing .h-huge { margin-bottom: 1.3rem; }
.closing-lede {
  max-width: 50ch;
  margin: 0 0 2.2rem;
  font-size: clamp(1rem, 1.4vw, 1.14rem);
  line-height: 1.58;
  color: rgba(27, 26, 23, 0.78);
}
.closing .btn-ink:hover { color: var(--lime); }
.closing .btn-ink::before { background: rgba(27, 26, 23, 0.001); }
.closing .btn-ink:hover::before { transform: translateY(101%); }

/* ══════════════ 22. LÁBLÉC ══════════════ */

.foot {
  background: var(--screen);
  color: rgba(236, 234, 228, 0.66);
  padding: clamp(3rem, 6vw, 4.5rem) 0 1.6rem;
  font-size: 0.9rem;
}
.foot a { color: inherit; text-decoration: none; transition: color 0.28s var(--ease); }
.foot a:hover { color: var(--lime); }

.foot-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.6rem, 4vw, 3.5rem);
  padding-bottom: clamp(2rem, 4vw, 3rem);
  border-bottom: 1px solid rgba(239, 238, 233, 0.16);
}
.foot-brand img { height: 40px; width: auto; filter: invert(1) brightness(1.9); margin-bottom: 1.1rem; }
.foot-brand p { margin: 0; max-width: 34ch; font-size: 0.87rem; line-height: 1.6; }

.foot-h {
  display: block;
  font-family: var(--f-mono);
  font-size: 0.64rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(239, 238, 233, 0.6); /* 0.42 -> 3,7:1 volt; AA-hoz 4,5:1 kell */
  margin-bottom: 1rem;
}
.foot-nav { display: grid; gap: 0.5rem; align-content: start; }
.foot-nav a { justify-self: start; }
.foot-contact { display: grid; gap: 0.5rem; align-content: start; }
.foot-contact a { justify-self: start; }
.foot-contact p { margin: 0.3rem 0 0; font-size: 0.85rem; }

.foot-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  padding-top: 1.4rem;
  font-family: var(--f-mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  color: rgba(239, 238, 233, 0.62); /* 0,45 → 4,05:1 volt, most 5,4:1 */
}
.foot-legal strong { color: rgba(239, 238, 233, 0.72); font-weight: 500; }
.foot-links { display: flex; flex-wrap: wrap; gap: 1.1rem; }
.foot-links i { font-style: normal; }
/* A cookie-beállítások gomb a jogi linkek közt ül, ezért linknek is kell
   látszania — de gombnak kell lennie, mert felületet nyit, nem oldalra visz. */
.foot-links button[data-cookie-settings] {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.foot-links button[data-cookie-settings]:hover { color: var(--lime); }

/* ══════════════ 23. BEÚSZÁS (a mozgás nyelve) ══════════════ */

[data-r] {
  opacity: 0;
  transform: translateY(16px);
  filter: blur(5px);
  transition:
    opacity 0.85s var(--ease-out),
    transform 0.85s var(--ease-out),
    filter 0.7s var(--ease-out);
}
[data-r].in { opacity: 1; transform: none; filter: blur(0); }

/* címsor: soronként, maszkolva */
[data-r-lines] .ln > span {
  transform: translateY(118%);
  transition: transform 0.95s var(--ease-out);
}
[data-r-lines].in .ln > span { transform: none; }
[data-r-lines] .ln:nth-child(2) > span { transition-delay: 0.08s; }
[data-r-lines] .ln:nth-child(3) > span { transition-delay: 0.16s; }

/* ══════════════ 24. RESZPONZÍV ══════════════ */

@media (max-width: 1180px) {
  .nav { display: none; }
  .burger { display: block; }
  /* A „Kapcsolat" gomb 2026-08-14-ig el volt rejtve mobilon — vagyis a
     görgetéssel együtt utazó fejléc-CTA a látogatók többségénél egyszerűen
     nem létezett, konverziós út csak az oldaltörzs gombjain át volt.
     Marad, tömörebb paddinggal: 375 px-en a logó + gomb + menünyitó hármas
     kényelmesen kifér. */
  .head-cta { padding-inline: 0.95rem; }
  .head { justify-content: space-between; }
  .head .brand { margin-right: auto; }
}

@media (max-width: 1040px) {
  .hero-grid { grid-template-columns: 1fr; }
  .sheet { max-width: 560px; }
  .report-grid { grid-template-columns: 1fr; }
  .device { position: static; }
  .bench { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* A hasábok küszöbe 1040, nem 900 (2026-08-14): a fekvő telefon CSS-szélessége
   926–932 px, vagyis a 900-as küszöb FÖLÖTT ült — három ~300 px-es hasábot
   kapott, amiben a címek egymásba értek ("teljesen szétesett"). 900 és 1040
   között amúgy is csak kis asztali ablakok vannak. */
@media (max-width: 1040px) {
  .spread { grid-template-columns: 1fr; border-top: 0; }
  .colm { border-right: 0; border-top: 1px solid var(--ink); padding-inline: 0; }
  .colm h3 { max-width: none; }
  .colm-mark::before { top: -1px; }
}

@media (max-width: 900px) {
  .sec-head-split { grid-template-columns: 1fr; align-items: start; }
  .sec-head-split .answer { max-width: 60ch; }
  .sec-more-inline { justify-self: start; margin-top: 1rem; }
  .clips { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-brand { grid-column: span 2; }
}

@media (max-width: 720px) {
  body { font-size: 1rem; }
  .score-row { grid-template-columns: 1fr; justify-items: center; }
  .pillars { width: 100%; }
  .device-tabs { flex-wrap: wrap; }
  .device-demo { margin-left: 0; flex: 1 0 100%; padding-bottom: 0.5rem; }
  .step { grid-template-columns: 44px 1fr; gap: 0.9rem 1rem; }
  .step-out {
    grid-column: 2;
    border-left: 0;
    padding-left: 0;
    padding-top: 0.9rem;
    margin-top: 0.3rem;
    border-top: 1px solid var(--line);
  }
  .bench { grid-template-columns: 1fr; }
  .qa-item summary { grid-template-columns: 36px 1fr 22px; }
  .qa-body { padding-left: 36px; padding-right: 0; }
  .pr-bar { grid-template-columns: minmax(0, 1fr) 60px 24px; }
  .foot-grid { grid-template-columns: 1fr; }
  .foot-brand { grid-column: auto; }
}

/* ══════════════ 25. MOZGÁSCSÖKKENTÉS ══════════════ */

/* ?nomotion — ugyanaz, mint a rendszerszintű mozgáscsökkentés (teszteléshez) */
.nomotion, .nomotion *, .nomotion *::before, .nomotion *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  animation-delay: 0s !important;
  transition-duration: 0.001ms !important;
  transition-delay: 0s !important;
}
.nomotion [data-r] { opacity: 1; transform: none; filter: none; }
.nomotion [data-r-lines] .ln > span { transform: none; }
.nomotion .hl { background-size: 100% 0.38em; }
.nomotion .ul .draw path { stroke-dashoffset: 0; }
.nomotion .lamp { display: none; }
.nomotion .eyebrow::after { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0s !important;
  }
  [data-r] { opacity: 1; transform: none; filter: none; }
  [data-r-lines] .ln > span { transform: none; }
  .hl { background-size: 100% 0.38em; }
  .ul .draw path { stroke-dashoffset: 0; }
  .lamp, .plot { display: none; }
  .belt { transform: rotate(-0.55deg); }
}

/* ══════════════ MUNKA-ÁLLVÁNY (pörgethető, teljes szélességű) ══════════════ */
/* Mint a boltokban a forgó állvány: a középső darab szemben áll, a többi
   elfordul. Csak a középső játszik le — 13 egyszerre futó beágyazás
   használhatatlanná tenné az oldalt. */

.rack {
  /* A kártyaszélesség az egész állvány alapmértéke: ebből származik a
     térhatás (perspective), a rés és a mélységeltolás is — így nagyobb
     kártyáknál is ugyanaz marad az arány, nem torzul el a forgatás.
     A 34vh-s felső korlát miatt alacsony képernyőn sem lóg ki a hasáb. */
  /* Nagyobb alapméret: a sáv és vele a középső videó is hangsúlyosabb.
     A vh-korlát megmarad, hogy alacsony képernyőn se lógjon ki. */
  --card: clamp(280px, min(27vw, 44vh), 440px);
  position: relative;
  /* Éltől élig — de a HTML-ben a tartalomoszlopon kívül áll, ezért nincs
     szükség 100vw-re és negatív margóra. A vw a görgetősávot is
     beleszámolná, a % pedig a szülő aszimmetrikus belső dobozához mérne;
     mindkettőtől elcsúszott az állvány. */
  width: auto;
  padding: clamp(1.4rem, 3vw, 2.6rem) 0 clamp(1rem, 2vw, 1.6rem);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  perspective: calc(var(--card) * 5.2);
  cursor: grab;
  /* FIGYELEM, ha ide hátteret tennél: az alábbi oldal-maszk nem csak a
     kártyák szélét halványítja, hanem a háttérét is — sötét sávból ettől
     szürke elkenődés lesz a két szélén. Tiszta sávhoz külön, maszkolatlan
     réteg kell a scroller mögé. */
  /* JS nélkül a natív ráugrás marad a tartalék — a .rack-js osztályt a
     rack() teszi ki, és onnantól a saját lendület-animáció visz be */
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
}
.rack::-webkit-scrollbar { display: none; }
.rack.rack-js { scroll-snap-type: none; }
.rack.dragging { cursor: grabbing; scroll-snap-type: none; }

.rack-track {
  display: flex;
  align-items: center;
  gap: calc(var(--card) * 0.075);
  /* a bal belső margót és a záró térkitöltőt a JS állítja be (lásd rack()) */
  transform-style: preserve-3d;
}

.rack-item {
  flex: none;
  width: var(--card);
  scroll-snap-align: center;
  transform-style: preserve-3d;
  will-change: transform;
}

/* Fekvő (16:9) darab az állványon: a kártya az álló kártya transzponáltja —
   ugyanaz a két oldalhossz, csak felcserélve. A 88vw-s korlát azért kell,
   mert az álló kártya alsó határa 230px, aminek a transzponáltja 409px, és
   az egy 390px-es telefonon már kilógna a képernyőből. Ott tehát a fekvő
   darab nem pontos transzponált, hanem a képernyőhöz igazodik. */
.rack-item.is-wide { width: min(calc(var(--card) * 16 / 9), 88vw); }
.rack-item.is-wide .rack-frame { aspect-ratio: 16 / 9; }

.rack-frame {
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--screen-2);
  border: 1px solid var(--screen-line);
  box-shadow: 0 24px 50px -30px rgba(var(--ink-rgb), 0.6);
  transition: box-shadow 0.5s var(--ease), border-color 0.5s var(--ease);
}
/* a középső kártya kattintásra nagyban nyílik, a többi előbb középre jön */
/* A KÖZÉPSŐ (lejátszó) kártya: nagyobb, világosabb keret, mélyebb vetett
   árnyék és halvány lime perem — eddig csak egy erősebb szegélyt kapott,
   ezért alig vált el a szomszédaitól. */
.rack-item.is-live { z-index: 2; }
.rack-item.is-live .rack-frame {
  border-color: rgba(231, 255, 99, 0.55);
  box-shadow:
    0 44px 96px -30px rgba(var(--ink-rgb), 0.85),
    0 0 0 1px rgba(231, 255, 99, 0.18);
  transform: scale(1.07);
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease);
  cursor: zoom-in;
}
.rack-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  pointer-events: none;
  z-index: 1;
}

/* Előnézeti kép minden kártyán. Beágyazást egyszerre csak a középső kap —
   a poszter miatt a többi mégsem üres sötét téglalap. A beágyazás a poszter
   fölé kerül, a poszter pedig marad akkor is, ha a videó nem tölt be. */
.rack-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 0;
}

.rack-no {
  position: absolute;
  top: 0.7rem; left: 0.8rem;
  z-index: 2;
  font-family: var(--f-mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.72);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55); /* világos poszteren is látsszon */
}
/* a nem középső kártyákon halvány raszter, hogy a fókusz a középsőn legyen */
.rack-hint {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(19, 20, 25, 0.42);
  transition: opacity 0.5s var(--ease);
}
.rack-item.is-live .rack-hint { opacity: 0; }

/* felirat + léptetés */
.rack-bar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.4rem;
  margin-top: clamp(0.8rem, 2vw, 1.4rem);
}
.rack-cap { margin: 0; }
.rack-cap strong {
  display: block;
  font-family: var(--f-disp);
  font-weight: 700;
  font-size: clamp(1.15rem, 2vw, 1.6rem);
  letter-spacing: -0.028em;
}
.rack-cap span {
  display: block;
  margin-top: 0.25rem;
  font-family: var(--f-mono);
  font-size: 0.66rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--faint);
}

.rack-nav { display: flex; gap: 0.5rem; flex: none; }
.rack-btn {
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: transparent;
  cursor: pointer;
  position: relative;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.rack-btn::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 9px; height: 9px;
  border-left: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
  transform: translate(-40%, -50%) rotate(45deg);
}
.rack-btn.rack-next::before { transform: translate(-60%, -50%) rotate(-135deg); }
.rack-btn:hover { border-color: var(--ink); background: var(--lime); }


@media (max-width: 720px) {
  .rack-bar { flex-direction: column; align-items: flex-start; }
}

/* ══════════════ NAGYÍTÓ ══════════════ */
/* Közös komponens: a stúdió-oldal gombjai és a főoldali munka-állvány is
   ezt nyitja, ezért itt van, nem a pages.css-ben (azt a főoldal nem
   tölti be). A gomb (.lb-open) stílusa marad a pages.css-ben. */

.lb {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(19, 20, 25, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 0.26s var(--ease);
}
.lb.on { opacity: 1; }
.lb-in {
  /* A magasság is korlátoz, hogy a 9:16-os kép sose lógjon ki a képernyőből.
     A 430px-es plafon 2026-08-14-én 520-ra nőtt: nagy képernyőn az álló
     anyag is elfért bőven, csak a fix korlát fogta vissza. */
  width: min(520px, 100%, calc((100dvh - 11rem) * 9 / 16));
  transform: translateY(10px) scale(0.98);
  transition: transform 0.42s var(--ease-out);
}
.lb.on .lb-in { transform: none; }
.lb-frame {
  aspect-ratio: 9 / 16;
  background: #000;
  border-radius: var(--r-lg);
  overflow: hidden;
}
.lb-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Fekvő forrás: szélesebb doboz, 16:9 keret.
   2026-08-14: a 960px-es fix plafon nagy képernyőn nem hatott „nagyban"
   megnyitásnak — a kép a viewport felét sem töltötte ki. Most 1360px-ig nő,
   de a MAGASSÁG is korlátoz (a felirat és a padding helyét levonva), így a
   keret sosem lóg ki függőlegesen. */
.lb.is-wide .lb-in { width: min(1360px, 100%, calc((100dvh - 9.5rem) * 16 / 9)); }
.lb.is-wide .lb-frame { aspect-ratio: 16 / 9; }

.lb-cap {
  margin: 0.9rem 0 0;
  color: var(--screen-text);
  font-size: 0.95rem;
}
.lb-cap span {
  display: block;
  font-family: var(--f-mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--screen-faint);
  margin-bottom: 0.3rem;
}
.lb-close {
  position: absolute;
  top: clamp(0.8rem, 2vw, 1.6rem);
  right: clamp(0.8rem, 2vw, 1.6rem);
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: transparent;
  cursor: pointer;
}
.lb-close::before, .lb-close::after {
  content: "";
  position: absolute;
  left: 13px; right: 13px; top: 21px;
  height: 1.5px;
  background: var(--screen-text);
}
.lb-close::before { transform: rotate(45deg); }
.lb-close::after { transform: rotate(-45deg); }
.lb-close:hover { border-color: var(--lime); }

/* ══════════════ IKONOK, PLATFORM-JELEK, „AMIVEL DOLGOZUNK" ══════════════ */
/* Közös komponensek: a főoldalon és a belső oldalakon is kellenek,
   ezért itt vannak, nem a pages.css-ben (azt a főoldal nem tölti be). */

/* A hat szakasz szerkezete szándékosan azonos — a görgetés közbeni
   tájékozódást ezért három dolog adja: a bal margó-sáv sorszáma, a ragadós
   tartalomjegyzék aktív pirulája, és a szakaszonként eltérő ikon. */

.ico,
.svc-ico,
.toc-ico,
.chit-ico {
  --ico-accent: var(--lime);
  --ico-accent-line: var(--lime-ink);
  display: block;
  flex: none;
  color: var(--ink);
}

.svc-ico {
  width: clamp(38px, 4vw, 52px);
  height: clamp(38px, 4vw, 52px);
  margin-bottom: 1.1rem;
  --ico-stroke: 1.5;
}

.toc-ico {
  width: 17px;
  height: 17px;
  --ico-stroke: 1.9;
  color: var(--faint);
  transition: color 0.3s var(--ease);
}
.toc-in a { align-items: center; }
.toc-in a:hover .toc-ico { color: var(--ink-2); }
.toc-in a.here .toc-ico { color: var(--ink); }

/* az aktív pirula legyen félreérthetetlen */
.toc-in a.here {
  background: var(--lime);
  color: var(--ink);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--lime-deep);
}
.toc-in a.here b { color: var(--lime-ink); }

/* a szomszédos szakaszok felülete váltakozik, hogy a határ látszódjon */
.svc.sec-band { border-top-color: var(--line-2); }

/* platform-jelek: ott, ahol a szöveg maga is megnevezi őket */
.marks-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 0.6rem;
}
.marks-row .ico { color: var(--faint); transition: color 0.3s var(--ease); }
.marks-row .ico:hover { color: var(--ink); }
.ico-sm { width: 19px; height: 19px; }
.ico-xs { width: 14px; height: 14px; }

/* ══════════════ IKONOK A RIPORT-MAKETTBEN ══════════════
   A makett csupa felirat és sáv volt: minden panel ugyanúgy nézett ki, ezért
   üresnek és általánosnak hatott. A panelcímkék elé kerülő jel adja meg, hogy
   melyik panel miről szól, a hasábdiagramnál pedig a platform jele mondja meg,
   melyik oszlop kié — a 0,58 rem-es mono feliratot ehhez el kellett olvasni. */
.pr-label-ico,
.pr-verdict span {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.pr-label-ico .ico,
.pr-verdict span .ico { color: var(--lime); --ico-accent: var(--lime); }

/* A jel és a név egy sorban, a százalék alattuk marad a saját sorában
   (`small` — a `flex-basis: 100%` töri a sort). */
.col-name {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.34rem;
}
.col-name small { flex: 0 0 100%; }
.col-name .ico-brand { opacity: 1; }

/* Hivatalos márkajel (sprite: `brand-` előtag). Ezek a saját színüket hozzák,
   nem a szövegszínt — a currentColor-os halványítás és a hover-színváltás
   tehát nem fog rajtuk. A tompítást viszont ki kell kapcsolni: az átlátszóság
   is a jel módosítása, amit a legtöbb márka irányelve tilt. */
.tools-list .ico-brand,
.marks-row .ico-brand { opacity: 1; }

/* A SAJÁT eszköz a listában. A többi tétel külső szolgáltató; a Nova a
   miénk, ezért kap egy halk lime jelet — de nem ugrik ki a sorból, mert
   a sáv arról szól, mivel dolgozunk, nem arról, mit árulunk.
   (A logó egyelőre a Dataviral-jel: a Novának még nincs saját jele.) */
.tools-list .tools-own {
  font-weight: 500;
  color: var(--ink);
}
.tools-list .tools-own::after {
  content: "";
  width: 5px;
  height: 5px;
  margin-left: 0.1rem;
  border-radius: 50%;
  background: var(--lime-deep);
}
.marks-row-wide { margin: 1.2rem 0 0; gap: 0.8rem; }
.marks-row-wide .ico { width: 26px; height: 26px; }

/* ══════════════ AMIVEL DOLGOZUNK ══════════════ */
/* Platformok és felületek — NEM ügyféllogók. A címke ezért mondja ki, hogy
   ezekkel dolgozunk, nem azt, hogy ezek az ügyfeleink. Csak olyan platform
   kerülhet ide, amit a szövegünk maga is megnevez. */

.tools {
  display: grid;
  grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2.4rem);
  align-items: center;
  padding: clamp(1.3rem, 2.6vw, 2rem) 0;
  border-block: 1px solid var(--line-2);
}
/* 2026-08-14: a cím és az alcím „egybefolyt" (Krisztián) — mindkettő
   ugyanakkora mono kiskapitális volt, csak a színük tért el. Most a cím
   nagyobb és félkövér, az alcím kisebb marad, és nagyobb köz választja el
   őket: a méret + súly + szín hármasa már két külön szintként olvastatja. */
.tools-label {
  margin: 0;
  font-family: var(--f-mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
}
.tools-label b {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 0.4rem;
}

.tools-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.9rem, 2.4vw, 2rem);
}
.tools-list li {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--muted);
  transition: color 0.3s var(--ease);
}
.tools-list li:hover { color: var(--ink); }
.tools-list .ico {
  width: 24px; height: 24px;
  color: var(--ink-2);
  opacity: 0.75;
  transition: opacity 0.3s var(--ease);
}
.tools-list li:hover .ico { opacity: 1; }

@media (max-width: 780px) {
  .tools { grid-template-columns: 1fr; }
}

/* a mérés-sáv a platform-sáv alatt fut, közös felső vonal nélkül */
.tools-data { border-top: 0; }


/* ══════════════ SÖTÉT FELÜLETEN (.sec-screen) ══════════════ */
/* A közös komponensek papírra készültek — hajszálvonal, grafit szöveg, olív
   lime. Sötét szakaszban mindegyiknek kell párja. A lime SZÖVEGKÉNT itt
   --lime, nem --lime-ink: az olív a sötéten eltűnne. */

/* lépéslista (rólunk · Hogyan gondolkodunk) */
.sec-screen .steps { border-top-color: var(--screen-text); }
.sec-screen .step { border-bottom-color: var(--screen-line); }
.sec-screen .step-no { color: var(--screen-faint); }
.sec-screen .step-out { border-left-color: var(--screen-line); }
/* A jelek `currentColor`-ral rajzolnak, az alap `--ink` viszont a papírhoz
   készült: a fekete felületen fekete vonal = láthatatlan. */
.sec-screen .step-ico { color: var(--screen-text); --ico-accent-line: var(--ink); }
.sec-screen .step-out span { color: var(--lime); }
.sec-screen .step-out span .ico { color: var(--lime); --ico-accent-line: var(--screen-2); }
.sec-screen .step-main p,
.sec-screen .step-out p { color: var(--screen-muted); }

/* ══════════════ MOBIL: ÉRINTŐFELÜLETEK ══════════════ */
/* 375 px-en mérve, a megrenderelt oldalon. Az ajánlott minimum 44×44 — ezek
   maradtak alatta. Kizárólag a magasságot emeljük belső margóval, a
   tipográfiához nem nyúlunk: a felirat mérete a felület saját ritmusa. */
@media (max-width: 780px) {
  /* riport-fülek: 34 px voltak */
  .device-tabs [role="tab"] { padding-block: 0.78rem 0.9rem; }
}


/* ══════════════ SÖTÉT FELÜLETRE IGAZÍTÁSOK (09 · hét lépés) ══════════════
   A `.step::before` lime derengése (28% alfa) papírra készült; a képernyő-
   feketén zavaros olívazöld folttá vált. Sötéten a kiemelés HALVÁNY FEHÉR,
   a sorszám pedig világos lime — az olív `--lime-ink` ott gyakorlatilag
   láthatatlan. */
.sec-screen .step::before { background: rgba(255, 255, 255, 0.055); }
.sec-screen .step:hover .step-no { color: var(--lime); }

/* ══════════════ A 06 · RIPORT VILÁGOS FELÜLETEN ══════════════
   A szakasz papírra került, a `.checklist` viszont a képernyő-színekből élt
   (`--screen-line`, `--screen-muted`) — világos háttéren ez alig olvasható
   szürkévé fakult. */
#riport .checklist { border-top-color: var(--line); }
#riport .checklist li { border-bottom-color: var(--line); color: var(--ink-2); }

/* ⚠️ A KÉT OSZLOP NEM NYÚLIK EGYMÁSHOZ. Korábban `align-items: stretch` volt,
   és a bal hasáb listája `space-between`-nel töltötte ki a makett magasságát:
   14 egysoros tétel szóródott szét 1145 px-en, tételenként ~80 px üres
   közzel. Felsorolásnak sem látszott, és a szakaszt 1727 px magasra húzta.
   Most a lista két hasábban fut a saját magasságán, a makett pedig
   ragadósan mellette marad — a hasáb akkor is rendben néz ki, ha a makett
   hosszabb nála. */


/* ══════════════ 04 · OSZLOPFEJEK ÉS A RAJZOLT NYÍL ══════════════
   A rács ugyanaz, mint a `.swap-row`-é, hogy a feliratok pontosan a
   hasábjaik fölött álljanak. A nyíl a középső oszlopba kerül — a `.draw`
   aláhúzásokkal azonos filctoll-vonal, itt nyílheggyel. */
/* A fejléc rácsa PONTOSAN a `.swap-row`-é, hogy a feliratok az oszlopaik
   fölött álljanak — középre zárva. A nyíl abszolút, és a két oszlop
   HATÁRÁRA kerül: a bal sáv szélessége (1fr a 1fr+1.3fr-ből) plusz a fél
   rés. Ugyanaz a `--shgap` érték fut a rácsban és a képletben, tehát nem
   tud elcsúszni, ha a rés változik. */
.swap-head {
  --shgap: clamp(1rem, 2.4vw, 2rem);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  align-items: center;
  gap: var(--shgap);
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
}
.swap-head-old,
.swap-head-new {
  text-align: center;
  font-family: var(--f-disp);
  font-size: clamp(0.95rem, 1.7vw, 1.2rem);
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.swap-head-old { color: var(--faint); }
.swap-head-new { color: var(--ink); }
/* A viewBox aránya MEGMARAD (nincs `preserveAspectRatio="none"`), különben a
   nyílhegy vízszintesen szétnyúlik és vonallá lapul. */
.swap-arrow {
  position: absolute;
  top: 50%;
  left: calc((100% - var(--shgap)) / 2.3 + var(--shgap) / 2);
  transform: translate(-50%, -50%);
  width: clamp(70px, 8.5vw, 132px);
  height: auto;
  overflow: visible;
}
/* Tintafekete, nem lime: világos papíron a neon halvány volt.
   A filctoll-vonal így olvasható, és ugyanaz a szín, mint a szövegé. */
.swap-arrow path {
  fill: none;
  stroke: var(--ink);
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (max-width: 900px) {
  /* Mobilon a hasábok egymás alá kerülnek, tehát a vízszintes nyílnak
     nincs értelme — a két felirat viszont marad, egymás alatt. */
  .swap-head { grid-template-columns: 1fr; gap: 0.3rem; }
  .swap-head-old, .swap-head-new { text-align: left; }
  .swap-arrow { display: none; }
}

/* ══════════════ MINTA RIPORT — ÚJ ELEMEK ══════════════
   Az eddigi makett általános „sample dashboard" volt: KPI-k, mérce, sávok.
   Ezek a blokkok azt mutatják meg, amit a Nova valóban ad a szám MELLÉ —
   nevesített hajtóerőket, megbízhatóságot, poszt-szintű összevetést,
   versenytárs-benchmarkot és komment-témákat. Mindegyik KÖVETKEZTETÉSSEL
   zárul: a szám önmagában nem válasz. */

.why-list { margin-top: 1.4rem; }
.why {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 0.6rem;
  padding: 0.62rem 0;
  border-top: 1px solid var(--screen-line);
}
.why i { font-style: normal; font-size: 0.95rem; line-height: 1.5; }
.why.up i { color: var(--lime); }
.why.down i { color: #e08a7a; }
.why p { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--screen-muted); }
.why p b { color: var(--screen-text); font-weight: 600; }

@media (max-width: 560px) {
  .bench-line { grid-template-columns: 1fr auto; }
}

/* A pillér alatt a MÉRT ÉRTÉK. Eddig csak a szempont neve állt ott („Mennyire
   reagálnak"), vagyis a pontszám mögött nem volt egyetlen szám sem — kérdés
   volt, nem adat. */
/* ⚠️ `<small>`, NEM `<i>`: a `.pr-bar i` szabály minden `i`-t 8 px magas,
   szürke hátterű SÁVVÁ alakít (az a pillér-csík) — a mért érték abba
   beleragadt és levágódott. Ez okozta a szürke csíkot a szám helyén. */
.pr-bar .pr-val {
  display: block;
  font-style: normal;
  font-family: var(--f-mono);
  font-size: 0.68rem;
  letter-spacing: 0.02em;
  color: var(--screen-faint);
  margin-top: 0.12rem;
}
.pr-foot {
  margin: 0.9rem 0 0;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--screen-faint);
}
.pr-foot b { color: var(--lime); font-weight: 500; }


/* A kézzel húzott aláhúzás SÖTÉT felületen: a `--lime-deep` a papírhoz volt
   hangolva, feketén a világosabb `--lime` olvashatóbb. */
.sec-screen .ul .draw path { stroke: var(--lime); }

/* ══════════════ DIAGRAM-KÖVETKEZTETÉSEK ══════════════
   A két alsó ábra eddig csak ADAT volt. A szakasz állítása viszont az, hogy
   nem adatot adunk, hanem döntést segítünk — ezért mindkettő alatt ott a
   következtetés, ugyanabban a formában, mint a „Miért ennyi?" hajtóerőknél. */
.chart-note {
  margin: 0.7rem 0 0;
  font-size: 1rem; /* a makett következtetései valódi olvasnivalók — 16 px */
  line-height: 1.5;
  color: var(--screen-faint);
}
.chart-note b { color: var(--screen-text); font-weight: 600; }

/* A trend-terület halványabb: 0.12 alfa a sötéten mustárszínű foltot adott. */
.device-screen .ch-area { fill: rgba(var(--lime-rgb), 0.06); }
.device-screen .ch-line { stroke-width: 2.4; }

/* A platform-oszlopok: a vezető lime, a növekvő világos, a többi semleges —
   így a szín is információ, nem dekoráció. */
.device-screen .col i { background: rgba(255, 255, 255, 0.22); }
.col.is-lead i { background: var(--lime); }
.col.is-rise i { background: rgba(var(--lime-rgb), 0.55); }
.col-name small {
  display: block;
  margin-top: 0.1rem;
  font-family: var(--f-mono);
  font-size: 0.66rem;
  color: var(--screen-faint);
}
.col.is-rise .col-name small { color: var(--lime); }

/* ⚠️ A NAGY IDÉZETBEN a `.hl` sáv NEM működik: a kiemelés 0.38em vastag és
   88%-nál ül, ami a 40 px-es display-betűnél a glifák közepére esik — a
   szöveg beleveszett, két sorban pedig a második sort teljesen elnyelte.
   Ekkora méretnél a lime SZÍNKÉNT jelöl, nem háttérként. */
.claim-line .hl {
  background: none;
  color: var(--lime);
  padding-inline: 0;
  margin-inline: 0;
}

/* A 14 tétel KÉT HASÁBBAN fut. Egy hasábban vagy szétnyúlik (lásd a fenti
   megjegyzést), vagy 630 px-es egysoros oszlop lesz belőle — mindkettő
   soványnak látszik. Kétszer hét sor tömbnek néz ki: ez a felület
   tartalomjegyzéke, nem egy lista. A felső sor két tétele kapja a
   záróvonalat felülről, mert a rácsban ők állnak legfelül. */
/* A RAGADÓS OSZLOP MEGFORDULT. A makett kétszer olyan hosszú, mint a
   magyarázat: ha a makett tapad, a bal hasáb alja ~580 px-en át üres. Így
   viszont a magyarázat marad a szemed előtt, és a makett gördül el mellette
   — a felületet végig lehet nézni úgy, hogy közben ott a szöveg, ami
   megmondja, mit nézel. */
/* 1041 px, nem 900: a `.report-grid` 1040 alatt EGY hasábra vált, és ott a
   ragadós szöveg a saját makettje elé tapadna. A tapadás csak akkor van
   értelme, amíg a kettő egymás mellett áll. */
@media (min-width: 1041px) {
  #riport .report-copy { position: sticky; top: 104px; align-self: start; }
  #riport .device { position: static; }
}

/* A makett belső ritmusa EGY helyen dől el. Az elemek saját margói külön-külön
   más-más közt adtak (a „Mit lépünk" doboznak például csak felül volt), ezért
   a doboz alja nekiment a következő felirat vonalának. Itt a hasáb ad egyetlen
   közt, a gyerekek margóját pedig nullázzuk, hogy ne adódjon hozzá. */
#riport .device-screen .pan {
  display: flex;
  flex-direction: column;
  gap: clamp(1.1rem, 2.2vw, 1.7rem);
}
#riport .device-screen .pan > * { margin-top: 0; margin-bottom: 0; }

/* A lelet és a lépés egymás mellett. Keskeny felületen egymás alá esik —
   ott a magasság úgysem szűkös. */
.pan-row { display: grid; gap: clamp(0.9rem, 1.8vw, 1.4rem); }
@media (min-width: 1040px) {
  .pan-row { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; }
}

@media (min-width: 780px) {
  #riport .checklist {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(1.4rem, 3vw, 2.6rem);
    border-top: 0;
    margin-bottom: 0;
  }
  #riport .checklist li { padding-block: 0.62rem; font-size: 1rem; }
  #riport .checklist li:nth-child(-n + 2) { border-top: 1px solid var(--line); }
}

/* A „Röviden" doboz hasábokra van osztva; több bekezdésnél a hasábtörés
   bekezdés KÖZEPÉN vágott, és félbeszakadt mondatnak látszott. */
/* ⚠️ TÖBB BEKEZDÉSNÉL A HASÁBOK A BEKEZDÉSEK KÖZÖTT VANNAK, NEM BENNÜK.
   A `.card-index p` szabály minden bekezdést KÉTHASÁBOSRA tör. Egyetlen
   hosszú bekezdésnél ez a helyes: szép, tömör kartoték-lap lesz belőle. Három
   rövid bekezdésnél viszont mindegyik KÜLÖN tört ketté, és mondat közepén
   ugrott át a jobb hasábba — félbeszakadt szövegnek látszott. Ilyenkor a
   bekezdés marad egyben, és a KÁRTYA rendezi őket két hasábba. */
.card-index:has(.card-index-text + .card-index-text) {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(1.6rem, 3vw, 3rem);
  row-gap: 0.9rem;
  align-content: start;
}
.card-index:has(.card-index-text + .card-index-text) .card-index-label { grid-column: 1 / -1; }
.card-index:has(.card-index-text + .card-index-text) p { columns: auto; }
.card-index:has(.card-index-text + .card-index-text) .card-index-text + .card-index-text { margin-top: 0; }
@media (max-width: 720px) {
  .card-index:has(.card-index-text + .card-index-text) { grid-template-columns: 1fr; }
}