/* ── betuk.css ── */
/* ══════════════════════════════════════════════════════════════
   weblockai — A BETŰK A SAJÁT SZERVERRŐL (2026-09-30)
   /assets/betuk.css

   Eddig minden lap a Google szerveréről töltötte a betűket: a látogató
   IP-címe így hozzájárulás nélkül ment a Google-höz. A fájlok ugyanazok
   (Google Fonts, nyílt licenc), csak innen jönnek. Csak a latin és a
   latin-ext készlet van itt: a magyar ő és ű a latin-ext-ben lakik.
   Az Anton (a logó betűje) már korábban is helyben volt.
   ══════════════════════════════════════════════════════════════ */
/* Bricolage Grotesque · latin-ext */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 500 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/bricolage-grotesque-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Bricolage Grotesque · latin */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 500 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/bricolage-grotesque-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* IBM Plex Sans · latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 300 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/ibm-plex-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* IBM Plex Sans · latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 300 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/ibm-plex-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Inter · latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Inter · latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* JetBrains Mono · latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/assets/fonts/jetbrains-mono-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* JetBrains Mono · latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/assets/fonts/jetbrains-mono-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Plus Jakarta Sans · latin-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url(/assets/fonts/plus-jakarta-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Plus Jakarta Sans · latin */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url(/assets/fonts/plus-jakarta-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── landing.css ── */
/* ============================================================
   weblockai — NYILVÁNOS FELÜLET (főoldal + belépés).

   A DESIGN GONDOLATA — 2026-08-02, a három referencia (higgsfield.ai,
   openart.ai, magnific.com) átnézése után:

   Mindhárom AI-t mutat: generált képet, videót, galériát. Mi ezt NEM
   tudjuk megmutatni, mert nem generálunk — tervet és promptot adunk.
   Ezért a vizuális nyelvünk nem az AI, hanem a MOZI: vetítőgép-fénykúp,
   film-szemcse, perforált filmszalag, klaptábla. Ez egyszerre igaz a
   termékre, és megkülönböztet mindenkitől a piacon.

   MOZGÁS: halk és folyamatos, interakció NÉLKÜL. A látogatónak nem kell
   csinálnia semmit — a lap lélegzik. Minden mozgás kikapcsol
   `prefers-reduced-motion` esetén, és MINDEN tartalom látható marad
   animáció nélkül is (a keresőnek és JS nélkül).
   ============================================================ */

:root {
  --lp-bg:        var(--m-fekete);   /* majdnem fekete — vetítőterem */
  --lp-bg-2:      var(--m-sotet-sav);
  --lp-bg-3:      var(--m-sotet-doboz);
  --lp-kartya:    #10151f;
  --lp-kartya-2:  #161d2a;
  --lp-keret:     rgba(150,180,220,0.13);
  --lp-keret-2:   rgba(150,180,220,0.26);

  --lp-szoveg:    #f2f6fb;
  --lp-halvany:   #9db0c6;
  --lp-dim:       #6c7f96;

  --lime:         var(--m-lime);
  --lime-halk:    rgba(var(--m-lime-rgb),0.13);
  --lime-el:      rgba(var(--m-lime-rgb),0.42);
  --lime-sotet:   #06111d;
  --magenta:      var(--m-magenta);
  --magenta-halk: rgba(var(--m-magenta-rgb),0.13);
  --cyan:         #35e0ff;

  --lp-r:    4px;
  --lp-r-lg: 8px;
  --lp-r-xl: 14px;

  --lp-margo: clamp(18px, 5vw, 64px);
  /* 2026-09-29, a user: „mindenhol, minden legyen teljes szélességben” (volt: 1200px).
     A szövegek saját `ch`-korlátja marad; nagy kijelzőn a lap alján lévő zoom arányosít. */
  --lp-max:   100%;
  --lp-fej:   64px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body.lp {
  margin: 0;
  background: var(--lp-bg);
  color: var(--lp-szoveg);
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: clamp(15px, 0.95rem + 0.15vw, 17px);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  position: relative;
}

/* ── FILM-SZEMCSE az egész lapon ──────────────────────────────
   SVG-zaj data URI-ként: nulla hálózati kérés. Nagyon halkan
   kavarog, ettől lesz „filmes" a felület a lapos digitális helyett. */
body.lp::before {
  content: ""; position: fixed; inset: -120px; z-index: 1; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.052;
  animation: szemcse 900ms steps(4) infinite;
}
@keyframes szemcse {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-14px, 9px); }
  50%  { transform: translate(11px, -12px); }
  75%  { transform: translate(-8px, -7px); }
  100% { transform: translate(0, 0); }
}

/* Vignetta: a szélek felé sötétedik, mint a vetítővásznon. */
body.lp::after {
  content: ""; position: fixed; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 40%, transparent 52%, rgba(var(--m-fekete-tiszta-rgb),0.55) 100%);
}
@media (prefers-reduced-motion: reduce) {
  body.lp::before { animation: none; }
}

main, header, footer { position: relative; z-index: 3; }

img, svg { max-width: 100%; }

/* 🔴 2026-09-30: a közös ikonkészlet (`wlai_ikon()`, `<svg class="i">`) VONALAS.
   A szabálya eddig csak a belső `design.css`-ben volt, ezért a nyilvános lapokon
   22 ikon fekete foltként jelent meg (főoldal, Rólunk, Biztonság, Kapcsolat).
   A méretet szándékosan nem adjuk meg: azt a befoglaló doboz szabálya adja. */
.i {
  fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0;
}

.lp-skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--lime); color: var(--lime-sotet);
  padding: 10px 16px; font-weight: 600;
}
.lp-skip:focus { left: 0; }
a:focus-visible, summary:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--lime); outline-offset: 3px; border-radius: var(--lp-r);
}

.lp-belso { width: 100%; max-width: var(--lp-max); margin: 0 auto; padding: 0 var(--lp-margo); }
.lp-keskeny { max-width: 820px; }
.lp-kozep   { text-align: center; }

/* ── FEJLÉC ──────────────────────────────────────────────── */
.lp-fej {
  position: sticky; top: 0; z-index: 50;
  background: var(--m-fekete-tiszta); /* 2026-10-07, a user: „a menü legyen teljesen fekete” */
  border-bottom: 1px solid var(--lp-keret);
}
.lp-sav {
  height: var(--lp-fej); max-width: var(--lp-max); margin: 0 auto;
  padding: 0 var(--lp-margo); display: flex; align-items: center; gap: clamp(12px, 3vw, 32px);
}
.lp-logo {
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: var(--t-5);
  letter-spacing: -0.03em; color: var(--lime); text-decoration: none; white-space: nowrap;
  text-shadow: 0 0 26px rgba(var(--m-lime-rgb),0.35);
}
.lp-logo b { color: var(--magenta); font-weight: 800; text-shadow: 0 0 26px rgba(var(--m-magenta-rgb),0.4); }
.lp-logo-kicsi { font-size: var(--t-4); }

.lp-nav { display: flex; gap: clamp(10px, 2vw, 26px); margin-right: auto; }
.lp-nav a {
  color: var(--lp-halvany); text-decoration: none; font-size: var(--t-2); font-weight: 500;
  padding: 6px 2px; border-bottom: 2px solid transparent; transition: color .15s, border-color .15s;
}
.lp-nav a:hover { color: var(--lp-szoveg); border-bottom-color: var(--lime); }

.lp-fej-jobb { display: flex; align-items: center; gap: 10px; }
/* Nyelvválasztó zászlókkal (2026-09-28): a mostani kiemelve, a másik halkabb. */
.lp-zaszlok {
  display: inline-flex; align-items: center; gap: 2px; padding: 2px;
  border: 1px solid var(--lp-keret); border-radius: var(--lp-r-lg);
}
.lp-zaszlok > a, .lp-zaszlok > span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 34px; border-radius: var(--lp-r);
}
.lp-zaszlok > a { opacity: .5; transition: opacity .15s ease, background .15s ease; }
.lp-zaszlok > a:hover, .lp-zaszlok > a:focus-visible { opacity: 1; background: rgba(var(--m-feher-rgb),0.06); }
.lp-zaszlok > a:focus-visible { outline: 2px solid var(--cyan); outline-offset: 1px; }
.lp-zaszlok > span[aria-current] { background: var(--lime-halk); box-shadow: inset 0 0 0 1px var(--lime-el); }
.lp-zaszlok .zaszlo { width: 24px; height: 16px; border-radius: 2px; display: block; }
/* Telefonon a zászlók a menübe költöznek: a fejlécben nincs rá hely. */
.lp-mob-zaszlok { align-self: flex-start; margin: 2px 4px 8px; }
.lp-mob-lap .lp-mob-zaszlok > a { padding: 0; min-height: 44px; min-width: 48px; }
.lp-mob-lap .lp-mob-zaszlok > span { min-height: 44px; min-width: 48px; }
@media (max-width: 860px) {
  .lp-fej-zaszlok { display: none; }
}
.lp-link { color: var(--lp-halvany); text-decoration: none; font-size: var(--t-2); font-weight: 500; padding: 6px 4px; }
.lp-link:hover { color: var(--lp-szoveg); }

@media (max-width: 860px) {
  .lp-nav, .lp-link { display: none; }
  .lp-sav { justify-content: space-between; }
  .lp-logo { margin-right: auto; }
}

/* ── GOMBOK ──────────────────────────────────────────────── */
.lp-btn, .lp-btn2 {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: 'IBM Plex Sans', sans-serif; font-size: var(--t-2); font-weight: 600;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  padding: 11px 20px; border-radius: var(--lp-r-lg);
  transition: transform .14s ease, box-shadow .18s ease, background .15s ease, border-color .15s ease;
}
.lp-btn {
  background: var(--lime); color: var(--lime-sotet); border: 1px solid var(--lime);
  box-shadow: 0 0 0 rgba(var(--m-lime-rgb),0), 0 8px 26px -12px rgba(var(--m-lime-rgb),0.7);
}
.lp-btn:hover {
  background: var(--m-lime-vilagos); transform: translateY(-2px);
  box-shadow: 0 0 34px -6px rgba(var(--m-lime-rgb),0.55), 0 10px 30px -12px rgba(var(--m-lime-rgb),0.8);
}
.lp-btn2 { background: rgba(var(--m-feher-rgb),0.03); color: var(--lp-szoveg); border: 1px solid var(--lp-keret-2); }
.lp-btn2:hover { border-color: var(--lime); color: var(--lime); transform: translateY(-2px); }
.lp-btn-nagy { font-size: var(--t-3); padding: 15px 28px; }
@media (prefers-reduced-motion: reduce) { .lp-btn:hover, .lp-btn2:hover { transform: none; } }

/* ── CÍMEK ───────────────────────────────────────────────── */
h1, h2, h3 { font-family: 'Bricolage Grotesque', sans-serif; letter-spacing: -0.025em; line-height: 1.08; margin: 0; }
h1 { font-size: clamp(31px, 1.7rem + 3.1vw, 76px); font-weight: 800; margin: 0 0 22px; max-width: 15ch; }
h2 { font-size: clamp(27px, 1.5rem + 1.7vw, 44px); font-weight: 700; margin: 0 0 14px; max-width: 22ch; }
.lp-kozep h2 { max-width: none; margin-left: auto; margin-right: auto; }
h3 { font-size: var(--t-4); font-weight: 700; margin: 0 0 8px; }

/* A címben kiemelt szó: alá halk neon-vonás.
   🔴 A `nowrap` CSAK ott, ahol tényleg elfér: 480 px alatt az angol
   „Then the machine." kilógott a képernyőből, és mivel a lapon
   `overflow-x: hidden` van, nem görgött — LEVÁGÓDOTT. */
.lp-kiemel { position: relative; color: var(--lime); }
@media (min-width: 480px) { .lp-kiemel { white-space: nowrap; } }
.lp-kiemel::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0.08em; height: 0.09em;
  background: var(--lime); opacity: .32; filter: blur(1px);
}

/* ── HERO — vetítőgép-fénykúp ─────────────────────────────── */
.lp-hero { position: relative; padding: clamp(52px, 8vw, 104px) 0 clamp(46px, 6vw, 84px); overflow: hidden; }

/* A kúp: fentről-oldalról érkező fény, ami lassan lélegzik. */
.lp-hero::before {
  content: ""; position: absolute; top: -42%; left: 50%; width: 155%; height: 150%;
  transform: translateX(-50%);
  background:
    radial-gradient(46% 42% at 18% 6%, rgba(var(--m-lime-rgb),0.15), transparent 62%),
    radial-gradient(42% 40% at 84% 14%, rgba(var(--m-magenta-rgb),0.13), transparent 60%),
    radial-gradient(55% 46% at 50% 0%, rgba(53,224,255,0.07), transparent 66%);
  filter: blur(24px);
  animation: legzes 13s ease-in-out infinite;
  pointer-events: none;
}
@keyframes legzes {
  0%, 100% { opacity: .78; transform: translateX(-50%) scale(1); }
  50%      { opacity: 1;   transform: translateX(-50%) scale(1.07); }
}
@media (prefers-reduced-motion: reduce) { .lp-hero::before { animation: none; } }

.lp-hero-racs {
  display: grid; grid-template-columns: 1fr; gap: clamp(30px, 4vw, 54px); align-items: start;
}
@media (min-width: 1024px) { .lp-hero-racs { grid-template-columns: 1.08fr 0.92fr; } }

.lp-kis {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: 'JetBrains Mono', monospace; font-size: var(--t-0); letter-spacing: .14em;
  text-transform: uppercase; color: var(--magenta); margin: 0 0 18px;
  border: 1px solid var(--magenta-halk); border-radius: var(--lp-r); padding: 6px 12px;
  background: rgba(var(--m-magenta-rgb),0.06);
}
.lp-kis::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--magenta);
  box-shadow: 0 0 10px var(--magenta); animation: pislog 2.4s ease-in-out infinite;
}
@keyframes pislog { 0%,100% { opacity: 1 } 50% { opacity: .28 } }

.lp-alcim { font-size: clamp(16px, 1rem + 0.3vw, 19px); color: var(--lp-halvany); max-width: 56ch; margin: 0 0 30px; }
/* 🔴 2026-09-30, mérve: az `arculat.css` a nyitó alcím alsó térközét nullára húzza
   (`.lp-hero .lp-alcim { margin-bottom: 0 !important }`), ezért ahol közvetlenül gomb vagy
   doboz követi, az RÁTAPADT a szövegre (404, letöltés, köszönő lap, leiratkozás: 0 px rés).
   A következő elem kapja a térközt, így a felülírás nem számít. */
.lp-hero .lp-alcim + :is(.lp-btn, .lp-btn2, .vl-kesz, .lt-gombok, form) { margin-top: 26px; }
.lp-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.lp-apro { font-size: var(--t-2); color: var(--lp-dim); margin: 0; }

/* ── A PROMPT-KÁRTYA — a „termékfotónk" ───────────────────── */
.pr {
  position: relative; border-radius: var(--lp-r-xl); overflow: hidden;
  background: linear-gradient(168deg, var(--lp-kartya-2), var(--lp-kartya));
  border: 1px solid var(--lp-keret-2);
  box-shadow: 0 34px 80px -34px rgba(var(--m-fekete-tiszta-rgb),0.95), 0 0 70px -30px rgba(var(--m-lime-rgb),0.30);
}
@keyframes gepel {
  0%   { width: 0; }
  7%   { width: 100%; }
  92%  { width: 100%; }
  96%  { width: 0; }
  100% { width: 0; }
}

/* ══════════════════════════════════════════════════════════
   A FILM ÉPÜL — a főoldal gerince.
   Bal oldalon a lépések görögnek, jobb oldalon a kártya RAGAD,
   és minden lépésnél egy réteggel gazdagabb lesz.
   ══════════════════════════════════════════════════════════ */
.lp-hero-cim { max-width: none; margin-left: auto; margin-right: auto; }
@keyframes le {
  0%, 100% { transform: rotate(45deg) translate(0, 0); opacity: .45; }
  50%      { transform: rotate(45deg) translate(5px, 5px); opacity: 1; }
}

.film-szek { padding: clamp(30px, 4vw, 60px) 0 clamp(56px, 8vw, 104px); }
.film { display: grid; grid-template-columns: 1fr; gap: clamp(26px, 3vw, 48px); align-items: start; }
@media (min-width: 1000px) { .film { grid-template-columns: 0.92fr 1.08fr; } }

.film-bal { display: grid; gap: clamp(20px, 3vw, 34px); }
@media (min-width: 1000px) {
  /* Asztalon a lépések „szellősek", hogy legyen mit görgetni a kártya mellé. */
  .film-bal { gap: clamp(120px, 26vh, 300px); padding: 22vh 0; }
}
.lepes { max-width: 46ch; }
.lepes-jel {
  display: inline-block; font-family: 'JetBrains Mono', monospace;
  font-size: var(--t-0); letter-spacing: .12em; text-transform: uppercase;
  color: var(--magenta); margin-bottom: 14px;
  border-left: 2px solid var(--magenta); padding-left: 10px;
}
.lepes h2 { font-size: clamp(24px, 1.3rem + 1.4vw, 36px); margin-bottom: 12px; max-width: none; }
.lepes p  { color: var(--lp-halvany); font-size: clamp(15px, 0.9rem + 0.3vw, 17px); margin: 0; }

@media (min-width: 1000px) {
  .film-jobb { position: sticky; top: calc(var(--lp-fej) + 28px); }
}

@media (min-width: 1000px) {
  @keyframes erkezik {
    0%   { background: var(--lime-halk); }
    100% { background: transparent; }
  }
}
@keyframes gordul { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ── SZÁMOK — a mi „10M+ creators" helyünk ────────────────── */
.lp-szamok {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1px;
  background: var(--lp-keret); border: 1px solid var(--lp-keret); border-radius: var(--lp-r-xl); overflow: hidden;
}
@media (min-width: 720px)  { .lp-szamok { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (min-width: 1080px) { .lp-szamok { grid-template-columns: repeat(5, minmax(0,1fr)); } }
.lp-szam-cella { background: var(--lp-bg-2); padding: clamp(18px, 2.4vw, 26px); text-align: center; }
.lp-szam-ertek {
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800;
  font-size: clamp(30px, 1.6rem + 1.6vw, 44px); color: var(--lime); letter-spacing: -0.03em;
  text-shadow: 0 0 34px rgba(var(--m-lime-rgb),0.28);
}
.lp-szam-nev { font-size: var(--t-1); color: var(--lp-halvany); margin-top: 4px; }

/* ── SZAKASZOK ───────────────────────────────────────────── */
.lp-szek { padding: clamp(56px, 8vw, 108px) 0; position: relative; }
.lp-szek-sotet { background: var(--lp-bg-2); border-top: 1px solid var(--lp-keret); border-bottom: 1px solid var(--lp-keret); }
.lp-vezeto { font-size: clamp(15.5px, 0.95rem + 0.25vw, 18px); color: var(--lp-halvany); max-width: 66ch; margin: 0 0 clamp(28px, 4vw, 46px); }
.lp-kozep .lp-vezeto { margin-left: auto; margin-right: auto; }
/* 2026-09-30: a folyószövegben álló linknek nem volt színe, ezért a böngésző
   alapkékje jött (a Biztonság lap e-mail-címe: 2,2:1 a sötét háttéren). */
.lp-vezeto a { color: var(--lime); text-underline-offset: 3px; }

.lp-racs-3 { display: grid; gap: clamp(14px, 2vw, 22px); grid-template-columns: 1fr; }
@media (min-width: 640px) { .lp-racs-3 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 980px) {
  .lp-racs-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
}

/* Kártya: fent halk fény-vonal, ami rátéten felgyullad. */
.lp-kartya {
  position: relative; background: var(--lp-kartya); border: 1px solid var(--lp-keret);
  border-radius: var(--lp-r-xl); padding: clamp(19px, 2.2vw, 28px); overflow: hidden;
  transition: border-color .18s ease, transform .18s ease, box-shadow .22s ease;
}
.lp-kartya::before {
  content: ""; position: absolute; top: 0; left: 12%; right: 12%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--lime-el), transparent);
  opacity: .38; transition: opacity .22s ease;
}
.lp-kartya:hover {
  border-color: var(--lp-keret-2); transform: translateY(-3px);
  box-shadow: 0 24px 50px -30px rgba(var(--m-fekete-tiszta-rgb),0.9), 0 0 50px -26px rgba(var(--m-lime-rgb),0.3);
}
.lp-kartya:hover::before { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .lp-kartya:hover { transform: none; } }
.lp-kartya p { color: var(--lp-halvany); margin: 0; font-size: var(--t-2); }

.lp-szam-jel {
  display: block; font-family: 'JetBrains Mono', monospace; font-size: var(--t-1);
  letter-spacing: .1em; color: var(--magenta); margin-bottom: 13px;
}
.lp-ikon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; margin-bottom: 15px;
  background: var(--lime-halk); border: 1px solid var(--lime-el);
  border-radius: var(--lp-r-lg); color: var(--lime);
  box-shadow: 0 0 24px -10px rgba(var(--m-lime-rgb),0.7);
}
.lp-ikon svg { width: 20px; height: 20px; }

.lp-valasz {
  margin: clamp(26px, 4vw, 40px) 0 0; padding: clamp(19px, 2.4vw, 28px);
  background: linear-gradient(100deg, var(--lime-halk), transparent 70%);
  border-left: 3px solid var(--lime); border-radius: 0 var(--lp-r-lg) var(--lp-r-lg) 0;
  color: var(--lp-halvany); font-size: var(--t-3);
}
.lp-valasz b { color: var(--lp-szoveg); }

/* ── AZ ÖT SZAKASZ ───────────────────────────────────────── */
.lp-fazisok { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.lp-fazis {
  display: flex; gap: clamp(14px, 2vw, 24px); align-items: flex-start;
  background: var(--lp-kartya); border: 1px solid var(--lp-keret);
  border-left: 3px solid var(--lime); border-radius: var(--lp-r-lg);
  padding: clamp(16px, 2vw, 22px); transition: transform .18s ease, border-color .18s ease;
}
.lp-fazis:hover { transform: translateX(4px); border-color: var(--lp-keret-2); border-left-color: var(--lime); }
@media (prefers-reduced-motion: reduce) { .lp-fazis:hover { transform: none; } }
.lp-fazis-szam { font-family: 'JetBrains Mono', monospace; font-size: var(--t-2); color: var(--lime); flex: 0 0 auto; padding-top: 2px; }
.lp-fazis p { margin: 0; color: var(--lp-halvany); font-size: var(--t-2); }

/* ── CHIPEK ──────────────────────────────────────────────── */
.lp-chipek { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.lp-chipek li {
  font-family: 'JetBrains Mono', monospace; font-size: var(--t-1); color: var(--lp-halvany);
  border: 1px solid var(--lp-keret); border-radius: var(--lp-r); padding: 8px 15px;
  background: var(--lp-kartya); transition: border-color .16s, color .16s;
}
.lp-chipek li:hover { border-color: var(--lime-el); color: var(--lime); }

/* ── GYIK ────────────────────────────────────────────────── */
.lp-gyik { border: 1px solid var(--lp-keret); border-radius: var(--lp-r-lg); background: var(--lp-kartya); margin-bottom: 10px; overflow: hidden; transition: border-color .16s; }
.lp-gyik:hover { border-color: var(--lp-keret-2); }
.lp-gyik summary { cursor: pointer; list-style: none; padding: 17px 48px 17px 19px; font-weight: 600; font-size: var(--t-3); position: relative; }
.lp-gyik summary::-webkit-details-marker { display: none; }
.lp-gyik summary::after {
  content: ""; position: absolute; right: 21px; top: 50%; width: 9px; height: 9px; margin-top: -6px;
  border-right: 2px solid var(--lime); border-bottom: 2px solid var(--lime);
  transform: rotate(45deg); transition: transform .2s ease;
}
.lp-gyik[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.lp-gyik[open] summary { color: var(--lime); }
.lp-gyik p { margin: 0; padding: 0 19px 19px; color: var(--lp-halvany); font-size: var(--t-3); }

/* ── ZÁRÓ ────────────────────────────────────────────────── */
.lp-zaro { padding: clamp(60px, 9vw, 116px) 0; position: relative; overflow: hidden; background: var(--lp-bg-2); border-top: 1px solid var(--lp-keret); }
.lp-zaro::before {
  content: ""; position: absolute; inset: -50% 0 auto; height: 200%;
  background: radial-gradient(46% 40% at 50% 22%, rgba(var(--m-lime-rgb),0.13), transparent 64%),
              radial-gradient(40% 34% at 50% 30%, rgba(var(--m-magenta-rgb),0.10), transparent 62%);
  filter: blur(18px); animation: legzes 15s ease-in-out infinite; pointer-events: none;
}
@media (prefers-reduced-motion: reduce) { .lp-zaro::before { animation: none; } }
.lp-zaro .lp-belso { position: relative; z-index: 1; }
.lp-zaro h2 { margin-bottom: 12px; }

/* ── LÁBLÉC ──────────────────────────────────────────────── */
.lp-lab { padding: 32px 0; border-top: 1px solid var(--lp-keret); background: var(--lp-bg); }
.lp-lab nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.lp-lab a { color: var(--lp-halvany); text-decoration: none; font-size: var(--t-2); }
.lp-lab a:hover { color: var(--lime); }
.lp-copy { color: var(--lp-dim); font-size: var(--t-1); }

/* ── BEÚSZÁS ─────────────────────────────────────────────────
   Az alapállapot LÁTHATÓ; a rejtést a JS teszi rá, és csak a hajtás
   alatti elemekre. JS nélkül és a keresőnek minden ott van. */
.reveal { transition: opacity .55s ease, transform .55s ease; }
.reveal.rejtve { opacity: 0; transform: translateY(16px); }
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.rejtve { opacity: 1; transform: none; transition: none; }
}

/* ══════════════════════════════════════════════════════════
   BELÉPÉS / REGISZTRÁCIÓ — ugyanaz a vetítőterem, két hasábban.
   ══════════════════════════════════════════════════════════ */
.lp-auth { min-height: calc(100vh / var(--z, 1) - var(--lp-fej)); display: flex; align-items: center; padding: clamp(28px, 5vw, 64px) 0; }
.lp-auth-racs { display: grid; grid-template-columns: 1fr; gap: clamp(28px, 4vw, 60px); align-items: center; width: 100%; }
@media (min-width: 1000px) { .lp-auth-racs { grid-template-columns: 1.05fr 0.95fr; } }
@media (max-width: 999px)  { .lp-auth-bal { display: none; } }   /* telefonon az űrlap a fontos */

/* Nem h1, de úgy néz ki: a lap főcíme az űrlapé. */
.lp-auth-cim {
  font-family: 'Bricolage Grotesque', sans-serif; letter-spacing: -0.025em; line-height: 1.08;
  font-size: clamp(30px, 1.6rem + 1.9vw, 50px); font-weight: 800;
  margin: 0 0 18px; max-width: 14ch;
}
.lp-auth-lista { list-style: none; margin: 26px 0 0; padding: 0; }
.lp-auth-lista li { position: relative; padding-left: 30px; margin-bottom: 14px; color: var(--lp-halvany); font-size: var(--t-3); }
.lp-auth-lista li::before {
  content: ""; position: absolute; left: 0; top: 6px; width: 15px; height: 9px;
  border-left: 2px solid var(--lime); border-bottom: 2px solid var(--lime);
  transform: rotate(-45deg);
}

.lp-auth-doboz {
  background: linear-gradient(168deg, var(--lp-kartya-2), var(--lp-kartya));
  border: 1px solid var(--lp-keret-2); border-radius: var(--lp-r-xl);
  padding: clamp(24px, 3vw, 38px);
  box-shadow: 0 34px 80px -34px rgba(var(--m-fekete-tiszta-rgb),0.95), 0 0 80px -40px rgba(var(--m-lime-rgb),0.28);
}
.lp-auth-doboz h1 { font-size: clamp(24px, 1.3rem + 0.9vw, 32px); margin-bottom: 8px; max-width: none; }
.lp-auth-doboz .lp-alcim { font-size: var(--t-2); margin-bottom: 24px; }

.lp-mezo { margin-bottom: 17px; }
.lp-mezo label { display: block; font-size: var(--t-2); font-weight: 600; color: var(--lp-szoveg); margin-bottom: 7px; }
.lp-mezo label span { color: var(--lp-dim); font-weight: 400; }
.lp-mezo input {
  width: 100%; height: 46px; padding: 0 14px;
  background: rgba(var(--m-fekete-tiszta-rgb),0.32); color: var(--lp-szoveg);
  border: 1px solid var(--lp-keret-2); border-radius: var(--lp-r-lg);
  font-family: 'IBM Plex Sans', sans-serif; font-size: var(--t-2);
  transition: border-color .15s ease, box-shadow .18s ease;
}
.lp-mezo input::placeholder { color: var(--lp-dim); }
.lp-mezo input:focus {
  outline: none; border-color: var(--lime);
  box-shadow: 0 0 0 3px var(--lime-halk);
}
.lp-mezo small { display: block; margin-top: 6px; font-size: var(--t-1); color: var(--lp-dim); }
.lp-auth-doboz .lp-btn { width: 100%; margin-top: 6px; }
/* Robot-szűrő: a widget fix méretű, ezért csak helyet adunk neki. */
.lp-turnstile { margin: 4px 0 18px; min-height: 65px; }
/* Csapdamező (2026-11-10, a BusinessPont mintája): ember nem látja, robot kitölti. */
.lp-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.lp-auth-alt { margin: 20px 0 0; font-size: var(--t-2); color: var(--lp-halvany); text-align: center; }
.lp-auth-alt a { color: var(--lime); text-decoration: none; font-weight: 600; }
.lp-auth-alt a:hover { text-decoration: underline; }
.lp-auth-hiba {
  background: rgba(255,95,87,0.12); border: 1px solid rgba(255,95,87,0.45);
  color: var(--m-piros-halvany); border-radius: var(--lp-r-lg); padding: 12px 14px; margin-bottom: 18px; font-size: var(--t-2);
}

/* ── JELSZÓ-ERŐSSÉG MÉRŐ a belépő/regisztrációs képernyőn ──
   2026-08-02. Ugyanaz a komponens, mint a Műhelyben (`wlai_jelszo_ero()`),
   de ez a képernyő a NYILVÁNOS design-nyelvet használja (sötét vetítőterem),
   ezért a színek itt a saját változóiból jönnek. A szerkezet betűre azonos —
   a JS mindkét helyen ugyanaz. */
.jero { margin-top: 9px; }
.jero-sav { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.jero-sav i {
  display: block; height: 4px; border-radius: 2px;
  background: rgba(150,180,220,0.16); transition: background .2s ease;
}
.jero-alsó { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.jero-alsó b { font-size: var(--t-1); font-weight: 700; }
.jero-alsó span { font-size: var(--t-1); line-height: 1.45; color: var(--lp-dim); }

.jero.p0 .jero-sav i:nth-child(1)     { background: var(--m-piros); }
.jero.p0 .jero-alsó b                 { color: var(--m-piros-vilagos); }
.jero.p1 .jero-sav i:nth-child(-n+2)  { background: var(--m-borostyan); }
.jero.p1 .jero-alsó b                 { color: var(--m-borostyan); }
.jero.p2 .jero-sav i:nth-child(-n+3)  { background: var(--m-lime-sotet); }
.jero.p2 .jero-alsó b                 { color: var(--m-lime-sotet); }
.jero.p3 .jero-sav i                  { background: var(--lime, var(--m-lime)); }
.jero.p3 .jero-alsó b                 { color: var(--lime, var(--m-lime)); }

/* ── JELSZÓ-VISSZAÁLLÍTÁS képernyők (`_jelszo.php`) ── */
/* Itt nincs bal hasáb (nincs mit „eladni"), ezért a doboz középen áll. */
.lp-auth-racs.lp-auth-egy { grid-template-columns: minmax(0, 1fr); max-width: 460px; margin: 0 auto; }

/* Sikeres művelet visszajelzése — a hiba-doboz párja. */
.lp-auth-ok {
  margin-bottom: 16px; padding: 11px 14px;
  background: rgba(var(--m-lime-rgb),0.10); border: 1px solid rgba(var(--m-lime-rgb),0.34);
  border-radius: var(--lp-r-lg); color: var(--lime);
  font-size: var(--t-2); line-height: 1.5;
}
/* Az „Elfelejtetted a jelszavad?" a jelszó-mező alatt, halkan. */
.lp-elfelejtett { display: block; margin-top: 7px; }
.lp-elfelejtett a { color: var(--lp-dim); text-decoration: none; border-bottom: 1px solid transparent; }
.lp-elfelejtett a:hover { color: var(--lime); border-bottom-color: var(--lime); }

/* ── MEGHÍVÓ-KÓD a regisztrációnál ───────────────────────────
   Csukott sor annak, akinek nincs kódja; magától nyitva annak, aki
   meghívó-linkről érkezett. Így senkit nem zavar, és senki nem keresi. */
.lp-meghivo { margin: -4px 0 16px; }
.lp-meghivo summary {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 7px;
  font-size: var(--t-2); font-weight: 600; color: var(--lp-halvany);
}
.lp-meghivo summary::-webkit-details-marker { display: none; }
.lp-meghivo summary::before {
  content: ""; width: 7px; height: 7px; margin-top: -2px;
  border-right: 2px solid var(--lime); border-bottom: 2px solid var(--lime);
  transform: rotate(-45deg); transition: transform .18s ease;
}
.lp-meghivo[open] summary::before { transform: rotate(45deg); margin-top: -4px; }
.lp-meghivo summary:hover { color: var(--lp-szoveg); }
.lp-meghivo .lp-mezo input {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: 1.5px; text-transform: uppercase;
}

/* ── EGY BELÉPŐ LAP (2026-09-29) ──────────────────────────────
   Felül az e-mailes belépő link, alatta csukva a jelszó. A lenyíló sora
   ugyanúgy néz ki, mint a meghívó-kódé, csak elválasztóval és 44 px-es
   érintési felülettel. */
.lp-link-urlap { margin-bottom: 20px; }
.lp-jelszo { margin: 0 0 8px; padding-top: 12px; border-top: 1px solid var(--lp-vonal, rgba(var(--m-feher-rgb),0.10)); }
.lp-jelszo > summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; min-height: 44px;
  font-size: var(--t-2); font-weight: 600; color: var(--lp-halvany);
}
.lp-jelszo > summary::-webkit-details-marker { display: none; }
.lp-jelszo > summary::before {
  content: ""; width: 7px; height: 7px; margin-top: -2px;
  border-right: 2px solid var(--lime); border-bottom: 2px solid var(--lime);
  transform: rotate(-45deg); transition: transform .18s ease;
}
.lp-jelszo[open] > summary::before { transform: rotate(45deg); margin-top: -4px; }
.lp-jelszo > summary:hover { color: var(--lp-szoveg); }
.lp-jelszo[open] > summary { margin-bottom: 8px; }

/* ══════════════════════════════════════════════════════════════
   JOGI LAPOK (2026-08-04) — ÁSZF, adatvédelem, elállás, impresszum.

   🔑 A jogi szöveg attól még olvasható lehet, hogy kötelező. Három dolog
   dönti el: mérhető sorhossz (a `.lp-keskeny` 820 px-e ~75 karakter),
   levegő a szakaszok között, és egy tartalomjegyzék, amivel a 11. pont
   is megtalálható. Enélkül a lap egyetlen szövegfal.

   🔑 Minden szín a meglévő `--lp-*` változókból jön. Nem találunk ki újat:
   egy nem létező változó NÉMÁN megöli az egész deklarációt.
   ══════════════════════════════════════════════════════════════ */

/* ── Tartalomjegyzék ── */
.jogi-tj {
  background: var(--lp-kartya); border: 1px solid var(--lp-keret);
  border-radius: var(--lp-r-lg); padding: clamp(18px, 2.4vw, 26px);
  margin-bottom: clamp(32px, 4vw, 52px);
}
.jogi-tj > b {
  display: block; font-size: var(--t-1); font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--lp-dim); margin-bottom: 12px;
}
/* 🔴 NINCS CSS-SZÁMOZÁS. A szakasz-címek MAGUK tartalmazzák a sorszámot
   („5. Csomagok, árak, fizetés"), és egy `counter()` mellette „5. 5. Csomagok"-at
   adott — mérve. Egy szám elég. */
.jogi-tj ol {
  margin: 0; padding: 0; list-style: none;
  display: grid; gap: 7px;
}
@media (min-width: 720px) { .jogi-tj ol { grid-template-columns: 1fr 1fr; column-gap: 26px; } }
@media (min-width: 720px) { .jogi-tj ol > :last-child:nth-child(odd) { grid-column: 1 / -1; } }
.jogi-tj a {
  display: flex; gap: 9px; align-items: baseline;
  color: var(--lp-halvany); text-decoration: none;
  font-size: var(--t-2); line-height: 1.5;
  /* 44 px tap-cél telefonon: a link maga alacsony, a függőleges térköz adja. */
  padding: 5px 0; min-height: 32px;
}
.jogi-tj a::before {
  content: ""; width: 5px; height: 5px; margin-top: 0.55em;
  border-radius: 50%; background: var(--lime); flex: none; opacity: 0.75;
}
.jogi-tj a:hover { color: var(--lp-szoveg); }

/* ── A szöveg ── */
.jogi-szakasz { margin-bottom: clamp(34px, 4.5vw, 56px); scroll-margin-top: calc(var(--lp-fej) + 20px); }
.jogi-szakasz > h2 {
  font-size: clamp(19px, 1.05rem + 0.35vw, 23px); line-height: 1.3;
  font-weight: 700; color: var(--lp-szoveg);
  margin: 0 0 14px; padding-bottom: 11px;
  border-bottom: 1px solid var(--lp-keret);
}
.jogi-szoveg p {
  font-size: clamp(15px, 0.94rem + 0.12vw, 16.5px); line-height: 1.72;
  color: var(--lp-halvany); margin: 0 0 15px;
  /* Hosszú szó (URL, cégjegyzékszám) ne lógjon ki 375 px-en. */
  overflow-wrap: anywhere;
}
.jogi-szoveg a { color: var(--lime); text-decoration: none; border-bottom: 1px solid var(--lime-el); }
.jogi-szoveg a:hover { border-bottom-color: var(--lime); }

.jogi-kiemelt {
  background: var(--lp-kartya); border-left: 3px solid var(--lime);
  border-radius: 0 var(--lp-r) var(--lp-r) 0;
  padding: 15px 18px; color: var(--lp-szoveg) !important;
  margin: 0 0 18px !important;
}

.jogi-lista { margin: 0 0 18px; padding: 0; list-style: none; display: grid; gap: 9px; }
.jogi-lista li {
  position: relative; padding-left: 20px;
  font-size: clamp(15px, 0.94rem + 0.12vw, 16.5px); line-height: 1.68;
  color: var(--lp-halvany);
}
.jogi-lista li::before {
  content: ""; position: absolute; left: 2px; top: 0.72em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--lime);
}

/* ── Címke → érték rács ──
   🔑 SZÁNDÉKOSAN NEM `<table>`: telefonon a kétoszlopos táblázat vagy
   vízszintesen görget, vagy betűnként töri a szavakat. Ez 640 px alatt
   magától egymás alá rendeződik. */
.jogi-tabla {
  margin: 0 0 18px; display: grid; gap: 1px;
  background: var(--lp-keret); border: 1px solid var(--lp-keret);
  border-radius: var(--lp-r-lg); overflow: hidden;
}
.jogi-tabla dt, .jogi-tabla dd {
  background: var(--lp-bg-2); margin: 0; padding: 13px 16px;
  font-size: var(--t-2); line-height: 1.62; overflow-wrap: anywhere;
}
.jogi-tabla dt { font-weight: 600; color: var(--lp-szoveg); padding-bottom: 4px; }
.jogi-tabla dd { color: var(--lp-halvany); padding-top: 0; }
@media (min-width: 640px) {
  /* 🔑 `minmax(0, …)`: enélkül a rács-cella a leghosszabb szótól szélesedne,
     és a doboz kilógna a konténerből. */
  .jogi-tabla { grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr); }
  .jogi-tabla dt { padding-bottom: 13px; }
  .jogi-tabla dd { padding-top: 13px; }
}

/* ── Tovább a többi jogi lapra ── */
.jogi-tovabb {
  margin-top: clamp(38px, 5vw, 62px); padding-top: clamp(26px, 3vw, 36px);
  border-top: 1px solid var(--lp-keret);
  display: grid; gap: 10px;
}
@media (min-width: 720px) { .jogi-tovabb { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* 2026-09-30: négy kártyánál a három oszlop 3+1-et adott (a jogi lapok alján). Négynél 2+2. */
@media (min-width: 720px) { .jogi-tovabb:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.jogi-tovabb a {
  display: block; padding: 15px 17px; text-decoration: none;
  background: var(--lp-kartya); border: 1px solid var(--lp-keret);
  border-radius: var(--lp-r-lg); transition: border-color .16s ease, background .16s ease;
}
.jogi-tovabb a:hover { border-color: var(--lp-keret-2); background: var(--lp-kartya-2); }
.jogi-tovabb b { display: block; font-size: var(--t-2); font-weight: 600; color: var(--lp-szoveg); margin-bottom: 4px; }
.jogi-tovabb span { display: block; font-size: var(--t-1); line-height: 1.55; color: var(--lp-dim); }
.lp-lab-ceg { font-size: var(--t-1); line-height: 1.6; color: var(--lp-dim); margin: 10px 0 0; }

/* A regisztrációs gomb alatti jogi sor (2026-08-04). */
.lp-auth-jogi {
  font-size: var(--t-1); line-height: 1.6; color: var(--lp-dim);
  margin: 14px 0 0; text-align: center;
}
.lp-auth-jogi a { color: var(--lp-halvany); text-decoration: none; border-bottom: 1px solid var(--lp-keret-2); }
.lp-auth-jogi a:hover { color: var(--lime); border-bottom-color: var(--lime-el); }

/* A jogi lap feje SZŰKEBB, mint a nyitóoldalé.
   🔑 Mérve 2026-08-04: a `lp-hero-sz` + `lp-szek` együtt ~200 px üres teret
   hagyott a cím és a tartalomjegyzék között. A nyitóoldalon az levegő,
   itt viszont csak görgetés — a jogi lapra azért jön valaki, hogy ELOLVASSA. */
.jogi-fej { padding: clamp(38px, 5vw, 64px) 0 clamp(6px, 1vw, 14px); }
.jogi-fej .lp-hero-cim { margin-bottom: 12px; }
.jogi-fej .lp-alcim { margin-bottom: 10px; }
.jogi-torzs { padding: clamp(20px, 2.4vw, 32px) 0 clamp(56px, 7vw, 96px); }

/* Külső hivatkozás a jogi lapon — nyíl jelzi, hogy elvisz. */
.jogi-link { display: inline-flex; align-items: center; gap: 7px; font-weight: 500; }
.jogi-link::after { content: "↗"; font-size: 0.9em; opacity: 0.7; }

/* ══════════════════════════════════════════════════════════════
   2026-08-05 — A NYILVÁNOS OLDAL ALOLDALAKAT KAPOTT
   Mobil menü · morzsa · oszlopos lábléc · árlap.
   Minden mozgás kikapcsol `prefers-reduced-motion` mellett, és
   MINDEN tartalom látszik JS nélkül is.
   ══════════════════════════════════════════════════════════════ */

/* Vizuálisan rejtett, de felolvasható (táblázat-felirat, segédszöveg). */
.lp-rejtett {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── MOBIL MENÜ ────────────────────────────────────────────────
   🔴 TELEFONON EDDIG NEM VOLT MENÜ: a `.lp-nav` 860 px alatt eltűnt,
   és a látogató a főoldalról sehova nem jutott. `<details>`, tehát
   JS NÉLKÜL nyílik, és a kereső a linkeket így is olvassa. */
.lp-mob { display: none; position: relative; }
.lp-mob > summary {
  list-style: none; cursor: pointer; width: 44px; height: 44px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  border: 1px solid var(--lp-keret-2); border-radius: var(--lp-r);
}
.lp-mob > summary::-webkit-details-marker { display: none; }
.lp-mob > summary span {
  display: block; width: 17px; height: 2px; background: var(--lp-szoveg);
  transition: transform .18s ease, opacity .18s ease;
}
.lp-mob[open] > summary span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.lp-mob[open] > summary span:nth-child(2) { opacity: 0; }
.lp-mob[open] > summary span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (prefers-reduced-motion: reduce) { .lp-mob > summary span { transition: none; } }

.lp-mob-lap {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 60;
  min-width: 232px; display: flex; flex-direction: column;
  background: var(--m-fekete-tiszta); border: 1px solid var(--lp-keret-2);
  border-radius: var(--lp-r-lg); padding: 8px;
  box-shadow: 0 26px 60px -26px rgba(var(--m-fekete-tiszta-rgb),0.95);
}
.lp-mob-lap a {
  color: var(--lp-halvany); text-decoration: none; font-size: var(--t-2); font-weight: 500;
  padding: 11px 13px; border-radius: var(--lp-r);
}
.lp-mob-lap a:hover, .lp-mob-lap a[aria-current] { background: var(--lime-halk); color: var(--lime); }

@media (max-width: 860px) {
  .lp-mob { display: block; }
  /* A „Kezdd el ingyen" marad — az a lap célja. A többi a menübe költözik. */
  .lp-nav, .lp-link { display: none; }
}
@media (max-width: 460px) {
  .lp-fej-jobb .lp-btn { padding: 10px 13px; font-size: var(--t-2); }
}

/* ── MORZSA ───────────────────────────────────────────────────── */
.lp-morzsa {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: var(--t-1); color: var(--lp-dim); margin: 0 0 22px;
}
.lp-morzsa a { color: var(--lp-halvany); text-decoration: none; border-bottom: 1px solid transparent; }
.lp-morzsa a:hover { color: var(--lime); border-bottom-color: var(--lime-el); }
.lp-morzsa b { color: var(--lp-szoveg); font-weight: 600; }
.lp-morzsa span { color: var(--lp-dim); }

/* ── LÁBLÉC OSZLOPOKBAN ───────────────────────────────────────── */
.lp-lab-racs {
  display: grid; grid-template-columns: 1fr; gap: clamp(26px, 4vw, 48px);
  padding-bottom: 30px;
}
/* 🔴 ÁRVA SOR (mérve 768 px-en): a négy blokk három oszlopban azt jelenti,
   hogy a negyedik egyedül áll a második sorban. A user szabálya szerint ez
   nem ízlés kérdése — soha nincs árva sor. Ezért 620 px felett KETTŐ oszlop
   (két teli sor), és csak 940 px felett négy (egy teli sor). */
@media (min-width: 620px)  { .lp-lab-racs { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 940px)  { .lp-lab-racs { grid-template-columns: 1.5fr 1fr 1fr 1fr; } }
/* 🔴 2026-09-30, mérve: a láblécben ma HÁROM blokk van (a márka + két oszlop), nem négy.
   768 px-en ezért 2+1 lett (árva sor), asztalon pedig egy üres negyedik oszlop maradt.
   Az elemszámból döntünk: három blokknál a márka saját sort kap, alatta a két oszlop. */
@media (min-width: 620px) and (max-width: 939.98px) {
  .lp-lab-racs > :first-child:nth-last-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 940px) {
  .lp-lab-racs:has(> :nth-child(3):last-child) { grid-template-columns: 1.5fr 1fr 1fr; }
}

.lp-lab-fo p { color: var(--lp-halvany); font-size: var(--t-2); margin: 12px 0 18px; max-width: 40ch; }
.lp-lab-fo .lp-btn2 { font-size: var(--t-2); padding: 9px 16px; }

.lp-lab-oszlop b {
  display: block; font-size: var(--t-1); letter-spacing: .1em; text-transform: uppercase;
  color: var(--lp-dim); font-family: 'JetBrains Mono', monospace; margin-bottom: 14px;
}
.lp-lab-oszlop nav { display: flex; flex-direction: column; gap: 0; }
/* 2026-10-06: 44 px-es célterület (26 px volt); a régi 9 px-es rés a magasságba ment. */
.lp-lab-oszlop nav > a, .lp-lab-suti button { min-height: 44px; display: flex; align-items: center; }

.lp-lab-alja {
  border-top: 1px solid var(--lp-keret); padding-top: 20px;
  display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: baseline; justify-content: space-between;
}
.lp-lab-alja .lp-lab-ceg { margin: 0; max-width: 62ch; }

/* ══════════════════════════════════════════════════════════════
   ÁRLAP
   ══════════════════════════════════════════════════════════════ */

.ar-fej { padding: clamp(30px, 4vw, 52px) 0 clamp(14px, 2vw, 26px); }
.ar-fej .lp-hero-cim { max-width: 18ch; margin-left: 0; }
.ar-fej .lp-alcim { max-width: 62ch; margin-bottom: 26px; }

/* A próbaidő-sáv: a lap legfontosabb mondata, a hajtás fölött. */
.ar-proba {
  display: flex; align-items: center; gap: clamp(14px, 2vw, 22px); flex-wrap: wrap;
  padding: clamp(15px, 2vw, 20px) clamp(16px, 2.4vw, 26px);
  border: 1px solid var(--lime-el); border-radius: var(--lp-r-lg);
  background: linear-gradient(100deg, var(--lime-halk), transparent 62%);
  max-width: 760px; position: relative; overflow: hidden;
}
/* Halk fény, ami balról jobbra átvonul — nyugodt, nem villog. */
.ar-proba::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 20%, rgba(var(--m-lime-rgb),0.14) 46%, transparent 72%);
  transform: translateX(-60%);
  animation: ar-fenypaszta 7.5s ease-in-out infinite;
}
@keyframes ar-fenypaszta {
  0%, 100% { transform: translateX(-60%); }
  50%      { transform: translateX(60%); }
}
@media (prefers-reduced-motion: reduce) { .ar-proba::after { animation: none; opacity: .5; } }

/* 🔴 A SZÜLŐ-SZELEKTOR LECSAPOTT A GYEREKRE (mérve 2026-08-05):
   a lenti `.ar-proba span` szabály (halvány kék, 14,5 px) ERŐSEBB, mint a
   `.ar-proba-jel` egyetlen osztálya — így a lime jelvényen halványkék
   szöveg állt, 1,9:1 kontraszttal. Olvashatatlan volt, és a screenshoton
   „elmosódásnak" látszott, nem hibának.
   🔑 A javítás a SPECIFIKUSSÁG emelése, nem `!important`: a `!important`
   a következő ilyen ütközésnél már nem hagyna hova menekülni. */
.ar-proba .ar-proba-jel {
  flex: 0 0 auto; font-family: 'JetBrains Mono', monospace; font-weight: 500;
  font-size: var(--t-1); letter-spacing: .08em; color: var(--lime-sotet);
  background: var(--lime); border-radius: var(--lp-r); padding: 8px 12px;
  position: relative; z-index: 1;
}
.ar-proba div { position: relative; z-index: 1; }
.ar-proba b    { display: block; font-size: var(--t-3); color: var(--lp-szoveg); margin-bottom: 3px; }
.ar-proba span { font-size: var(--t-2); color: var(--lp-halvany); }

/* ── SZŰRŐK ──────────────────────────────────────────────────────
   A rádiógombok a szakasz elején állnak, a rács utánuk — így a CSS
   `~` szelektorával minden szűrhető, JS nélkül.
   🔑 A gombok nem `display:none`-nal tűnnek el, hanem a képernyőn
   kívülre tolva: így billentyűzettel is elérhetők maradnak. */
.ar-radio { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }

.ar-szurok {
  display: flex; flex-wrap: wrap; gap: clamp(16px, 2.4vw, 30px);
  align-items: flex-start; margin-bottom: clamp(26px, 3.4vw, 40px);
}
/* A „mire használod" a leghosszabb és a legfontosabb — saját sorba kerül,
   a fizetési ütem és a pénznem pedig alatta, egymás mellett. Mérésből:
   a három szűrő egy sorban 1280 px-en sem fért el. */
.ar-szuro-szeles { flex: 1 0 100%; }
.ar-szuro { display: flex; flex-direction: column; gap: 9px; }
.ar-szuro-cim {
  font-family: 'JetBrains Mono', monospace; font-size: var(--t-0); letter-spacing: .12em;
  text-transform: uppercase; color: var(--lp-dim);
}
.ar-szuro small { font-size: var(--t-1); color: var(--lp-dim); max-width: 30ch; }

.ar-kapcsolo {
  display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px;
  border: 1px solid var(--lp-keret); border-radius: var(--lp-r-lg);
  background: var(--lp-bg-2);
}
.ar-vlg {
  cursor: pointer; user-select: none; white-space: nowrap;
  font-size: var(--t-2); font-weight: 600; color: var(--lp-halvany);
  padding: 9px 15px; border-radius: var(--lp-r);
  border: 1px solid transparent;
  transition: color .15s, background .15s, border-color .15s;
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 44px;                      /* érintő-célpont, lásd a lap alján */
}
.ar-vlg:hover { color: var(--lp-szoveg); background: rgba(var(--m-feher-rgb),0.04); }
.ar-vlg i {
  font-style: normal; font-size: var(--t-0); font-family: 'JetBrains Mono', monospace;
  letter-spacing: .04em; color: var(--magenta);
  border: 1px solid var(--magenta-halk); border-radius: var(--lp-r); padding: 2px 6px;
}
@media (prefers-reduced-motion: reduce) { .ar-vlg { transition: none; } }

/* Az AKTÍV választás — tömör lime, ahogy a Műhelyben is: „ezt te választottad". */
#utem-havi:checked  ~ .ar-szurok .ar-vlg-havi,
#utem-eves:checked  ~ .ar-szurok .ar-vlg-eves,
#kinek-mind:checked ~ .ar-szurok .ar-vlg-mind,
#kinek-egyedul:checked    ~ .ar-szurok .ar-vlg-egyedul,
#kinek-rendszeres:checked ~ .ar-szurok .ar-vlg-rendszeres,
#kinek-csapat:checked     ~ .ar-szurok .ar-vlg-csapat {
  background: var(--lime); color: var(--lime-sotet); border-color: var(--lime);
}
#utem-eves:checked ~ .ar-szurok .ar-vlg-eves i { color: var(--lime-sotet); border-color: rgba(6,17,29,0.3); background: rgba(6,17,29,0.12); }

/* A billentyűzetes használó lássa, hol jár. */
.ar-radio:focus-visible ~ .ar-szurok .ar-vlg { outline: none; }
#utem-havi:focus-visible  ~ .ar-szurok .ar-vlg-havi,
#utem-eves:focus-visible  ~ .ar-szurok .ar-vlg-eves,
#kinek-mind:focus-visible ~ .ar-szurok .ar-vlg-mind,
#kinek-egyedul:focus-visible    ~ .ar-szurok .ar-vlg-egyedul,
#kinek-rendszeres:focus-visible ~ .ar-szurok .ar-vlg-rendszeres,
#kinek-csapat:focus-visible     ~ .ar-szurok .ar-vlg-csapat {
  outline: 2px solid var(--cyan); outline-offset: 2px;
}

/* Pénznem — szerveroldali linkek, tehát JS nélkül is működnek. */
.ar-penzek { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border: 1px solid var(--lp-keret); border-radius: var(--lp-r-lg); background: var(--lp-bg-2); }
.ar-penz {
  text-decoration: none; font-family: 'JetBrains Mono', monospace; font-size: var(--t-1);
  color: var(--lp-halvany); padding: 10px 13px; border-radius: var(--lp-r);
  border: 1px solid transparent; min-height: 44px; display: inline-flex; align-items: center;
}
.ar-penz:hover { color: var(--lp-szoveg); background: rgba(var(--m-feher-rgb),0.04); }
.ar-penz.ez { background: var(--lime); color: var(--lime-sotet); border-color: var(--lime); font-weight: 500; }

/* ── A HÁROM KÁRTYA ───────────────────────────────────────────── */
.ar-racs { display: grid; grid-template-columns: 1fr; gap: clamp(14px, 2vw, 22px); align-items: stretch; }
/* 🔑 A HÁROM HASÁB CSAK 880 PX FELETT. Mérve: 768 px-es tableten a
   kártyák 220 px szélesre nyomódtak, és egy „8 900 Ft" ára alig fért ki.
   Álló tableten inkább egymás alatt, teljes szélességben — ott a
   görgetés olcsóbb, mint az összenyomott szöveg. */
@media (min-width: 880px)  { .ar-racs { grid-template-columns: repeat(3, 1fr); } }

.ar-kartya {
  position: relative; display: flex; flex-direction: column;
  background: var(--lp-kartya); border: 1px solid var(--lp-keret);
  border-radius: var(--lp-r-xl); padding: clamp(20px, 2.6vw, 30px);
  transition: transform .18s ease, border-color .18s ease, box-shadow .2s ease, opacity .2s ease;
}
.ar-kartya:hover { transform: translateY(-3px); border-color: var(--lp-keret-2); }
@media (prefers-reduced-motion: reduce) { .ar-kartya, .ar-kartya:hover { transition: none; transform: none; } }

/* A kiemelt csomag: magenta felső fénycsík + halk aurora a háttérben. */
.ar-ki { border-color: var(--magenta-halk); box-shadow: 0 26px 64px -34px rgba(var(--m-magenta-rgb),0.55); }
.ar-ki::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--magenta), transparent);
  border-radius: var(--lp-r-xl) var(--lp-r-xl) 0 0;
}
/* 🔴 KONTRASZT (mérve): fehér szöveg magentán csak 3,4:1 — a WCAG AA
   4,5:1-et kér, és ez egy 11,5 px-es felirat, tehát nem számít „nagy
   szövegnek". Sötét betűvel 5,5:1, és a magenta „ide nézz" szerepe megmarad. */
.ar-jelvny {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  white-space: nowrap; font-size: var(--t-0); font-weight: 700; letter-spacing: .02em;
  background: var(--magenta); color: var(--lime-sotet); padding: 4px 12px; border-radius: var(--lp-r);
}

.ar-kartya-fej { margin-bottom: 16px; }
.ar-kartya h2 { font-size: var(--t-5); margin: 0 0 6px; max-width: none; }
.ar-kinek { margin: 0; font-size: var(--t-2); color: var(--lp-halvany); min-height: 2.9em; }

.ar-osszeg { margin-bottom: 20px; min-height: 78px; }
.ar-osszeg b {
  font-family: 'Bricolage Grotesque', sans-serif; font-size: clamp(34px, 2rem + 1.1vw, 44px);
  font-weight: 800; letter-spacing: -0.03em; color: var(--lp-szoveg); line-height: 1.05;
}
.ar-osszeg > span > span { font-size: var(--t-2); color: var(--lp-dim); font-weight: 400; }
.ar-osszeg i {
  display: block; font-style: normal; font-size: var(--t-1); color: var(--lime);
  font-family: 'JetBrains Mono', monospace; margin-top: 6px;
}
.ar-cs-ingyen .ar-osszeg > span:first-child { display: block; }
.ar-cs-ingyen .ar-osszeg span:last-child { font-size: var(--t-2); color: var(--lp-dim); }

/* HAVI ↔ ÉVES — mindkét ár a HTML-ben van, a CSS az egyiket rejti. */
.ar-eves { display: none; }
#utem-eves:checked ~ .ar-racs .ar-eves { display: inline-block; }
#utem-eves:checked ~ .ar-racs .ar-havi { display: none; }

.ar-mit { list-style: none; margin: 0 0 22px; padding: 0; flex: 1 1 auto; }
.ar-mit li {
  position: relative; padding-left: 24px; margin-bottom: 11px;
  color: var(--lp-halvany); font-size: var(--t-2); line-height: 1.55;
}
.ar-mit li::before {
  content: ""; position: absolute; left: 2px; top: 7px; width: 9px; height: 9px;
  border-radius: 2px; background: var(--lime);
}
.ar-mit li.nem { color: var(--lp-dim); }
.ar-mit li.nem::before { background: transparent; border: 1px solid var(--lp-keret-2); }
.ar-mit li b { color: var(--lp-szoveg); font-weight: 600; }
.ar-mit li em {
  display: block; font-style: normal; font-size: var(--t-1); color: var(--lp-dim);
  font-family: 'JetBrains Mono', monospace; margin-top: 2px;
}

.ar-kartya .lp-btn, .ar-kartya .lp-btn2 { width: 100%; }
.ar-apro { display: block; text-align: center; font-size: var(--t-1); color: var(--lp-dim); margin-top: 9px; }

/* MIRE HASZNÁLOD — a nem illő csomagok halkulnak, az illő emelkedik.
   🔑 Nem REJTJÜK el őket: aki a Stúdióra kíváncsi, attól még lássa. */
#kinek-egyedul:checked ~ .ar-racs .ar-cs-pro,
#kinek-egyedul:checked ~ .ar-racs .ar-cs-studio,
#kinek-rendszeres:checked ~ .ar-racs .ar-cs-ingyen,
#kinek-rendszeres:checked ~ .ar-racs .ar-cs-studio,
#kinek-csapat:checked ~ .ar-racs .ar-cs-ingyen,
#kinek-csapat:checked ~ .ar-racs .ar-cs-pro {
  opacity: .52;
}
#kinek-egyedul:checked    ~ .ar-racs .ar-cs-ingyen,
#kinek-rendszeres:checked ~ .ar-racs .ar-cs-pro,
#kinek-csapat:checked     ~ .ar-racs .ar-cs-studio {
  border-color: var(--lime-el);
  box-shadow: 0 26px 64px -34px rgba(var(--m-lime-rgb),0.5);
}
/* A „legtöbbeknek ez elég" jelvény csak akkor igaz, ha nem szűrtél másra. */
#kinek-egyedul:checked ~ .ar-racs .ar-jelvny,
#kinek-csapat:checked  ~ .ar-racs .ar-jelvny { opacity: 0; }

.ar-labjegyzet { margin: clamp(22px, 3vw, 32px) 0 0; font-size: var(--t-1); color: var(--lp-dim); max-width: 76ch; }

/* ── MI AZ AZ AI-HÍVÁS ────────────────────────────────────────── */
.ar-hivas { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--lp-keret); border: 1px solid var(--lp-keret); border-radius: var(--lp-r-xl); overflow: hidden; margin-bottom: clamp(24px, 3vw, 36px); }
@media (min-width: 620px)  { .ar-hivas { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .ar-hivas { grid-template-columns: repeat(4, 1fr); } }
.ar-hivas-elem { background: var(--lp-bg-3); padding: clamp(18px, 2.2vw, 24px); }
.ar-hivas-szam {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: var(--lp-r);
  background: var(--lime-halk); color: var(--lime);
  font-family: 'JetBrains Mono', monospace; font-size: var(--t-1); margin-bottom: 11px;
}
.ar-hivas-elem b { display: block; font-size: var(--t-3); margin-bottom: 5px; }
.ar-hivas-elem > span:last-child { font-size: var(--t-2); color: var(--lp-halvany); }

.ar-szamlalo { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--lp-keret); border: 1px solid var(--lp-keret); border-radius: var(--lp-r-xl); overflow: hidden; }
@media (min-width: 760px) { .ar-szamlalo { grid-template-columns: repeat(4, 1fr); } }
.ar-szamlalo-elem { background: var(--lp-bg); padding: clamp(18px, 2.4vw, 28px); text-align: center; }
.ar-szamlalo-elem b {
  display: block; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800;
  font-size: clamp(30px, 1.8rem + 1.2vw, 44px); letter-spacing: -0.03em;
  color: var(--lp-szoveg); line-height: 1;
}
.ar-szamlalo-elem.ki b { color: var(--lime); }
.ar-szamlalo-elem span { display: block; font-size: var(--t-1); color: var(--lp-halvany); margin-top: 7px; }

/* ── ÖSSZEHASONLÍTÓ TÁBLÁZAT ──────────────────────────────────────
   🔑 SAJÁT görgetődobozban, nem a lapban: telefonon így nem tolja
   szét az egész oldalt. Ez a hiba egyszer már végigment a Műhelyen. */
.ar-tabla-doboz { overflow-x: auto; border: 1px solid var(--lp-keret); border-radius: var(--lp-r-xl); background: var(--lp-kartya); }
.ar-tabla { width: 100%; border-collapse: collapse; min-width: 620px; font-size: var(--t-2); }
.ar-tabla th, .ar-tabla td { padding: 14px 16px; text-align: center; border-bottom: 1px solid var(--lp-keret); }
.ar-tabla thead th { position: sticky; top: 0; background: var(--lp-bg-3); font-size: var(--t-1); letter-spacing: .04em; z-index: 1; }
.ar-tabla th[scope="row"] { text-align: left; font-weight: 500; color: var(--lp-halvany); min-width: 240px; }
.ar-tabla tbody tr:last-child th, .ar-tabla tbody tr:last-child td { border-bottom: 0; }
.ar-tabla tbody tr:hover { background: rgba(var(--m-feher-rgb),0.02); }
.ar-tabla .ki { background: rgba(var(--m-magenta-rgb),0.05); }
.ar-tabla thead .ki { color: var(--magenta); }
.ar-van   { color: var(--lime); font-size: var(--t-3); }
.ar-nincs { color: var(--lp-dim); }


/* ── HORGONY ÉS TÉRKÖZ ────────────────────────────────────────────
   🔴 A sticky fejléc RÁTAKARTA a szakasz tetejét, ha valaki horgonyra
   ugrott (`#csomagok`, `#gyik`). A jogi lapoknál ez már meg volt oldva —
   most minden azonosítóval ellátott nyilvános szakasz megkapja. */
.lp-szek[id], .lp-hero[id], .ar-lap section[id] {
  scroll-margin-top: calc(var(--lp-fej) + 18px);
}

/* A lap feje után a csomag-szakasz KÖZELEBB kezdődik: a hero alsó és a
   szekció felső paddingja együtt 190 px üres sávot adott a próbaidő-doboz
   és a szűrők között. Az levegő helyett görgetés volt. */
.ar-lap .ar-csomagok { padding-top: clamp(26px, 3vw, 42px); }

/* ── ÉRINTŐ-CÉLPONTOK ─────────────────────────────────────────────
   🔴 Mérve 2026-08-05, 375 px-en: a gombok 40–43 px magasak voltak, a
   követelmény 44×44. Egérrel a 42 px kényelmes, ujjal viszont mellé lehet
   nyúlni — ezért az EGÉRNÉL nem változtatunk, csak ott, ahol tényleg
   ujjal nyúlnak hozzá. Ugyanez a megoldás a Műhelyben már bevált. */
@media (pointer: coarse) {
  .lp-btn, .lp-btn2 { min-height: 44px; }
  .lp-mob-lap a     { min-height: 44px; display: flex; align-items: center; }
  .lp-gyik summary  { min-height: 44px; display: flex; align-items: center; }
}

/* ── MOZGÁS-CSÖKKENTÉS: A VÉGSŐ HÁLÓ ─────────────────────────────
   🔴 Mérve 2026-08-05: négy animáció (`pislog`, `gordul`, `erkezik`,
   `ar-fenypaszta`) egyenként volt kikapcsolva vagy sem — a `pislog` és a
   `gordul` NEM volt. Az egyenkénti kikapcsolás elfelejthető: minden új
   animációnál újra meg kell csinálni, és a hiba NÉMA (aki mozgás-érzékeny,
   nem ír nekünk, csak elmegy).

   Ez a blokk MINDENT lefog, ami eddig kimaradt vagy ezután születik.
   🔑 Nem `animation: none` — az a KEZDŐ állapotban fagyasztana. A
   „0,01 ms + egy ismétlés" a VÉGállapotba viszi, ami minden itteni
   animációnál a nyugalmi kép (a szalag féltolása duplikált tartalomnál
   ugyanaz a látvány, a pislogás vége teljes fedés, a beúszásé az alapszín).
   🔑 A gépelés-animáció szándékosan `no-preference` blokkban él, tehát itt
   el sem indul — a hat sor egyszerűen ott áll. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   FUNKCIÓK LAP
   ══════════════════════════════════════════════════════════════ */

.fn-elso { padding-top: clamp(26px, 3vw, 42px); }

/* ── A három réteg ────────────────────────────────────────────── */
.fn-harom { display: grid; grid-template-columns: 1fr; gap: clamp(16px, 2vw, 24px); }
@media (min-width: 820px) { .fn-harom { grid-template-columns: repeat(3, 1fr); } }
.fn-reteg {
  position: relative; background: var(--lp-kartya); border: 1px solid var(--lp-keret);
  border-radius: var(--lp-r-xl); padding: clamp(22px, 2.6vw, 30px);
  overflow: hidden;
}
/* Halk fény a kártya bal felső sarkából — nem villog, csak van. */
.fn-reteg::before {
  content: ""; position: absolute; top: -60%; left: -20%; width: 90%; height: 140%;
  background: radial-gradient(50% 40% at 50% 50%, var(--lime-halk), transparent 70%);
  pointer-events: none;
}
.fn-reteg-szam {
  position: relative; display: inline-block; font-family: 'JetBrains Mono', monospace;
  font-size: var(--t-1); letter-spacing: .1em; color: var(--lime); margin-bottom: 14px;
}
.fn-reteg h2 { position: relative; font-size: var(--t-5); margin: 0 0 10px; max-width: none; }
.fn-reteg p  { position: relative; margin: 0; color: var(--lp-halvany); font-size: var(--t-2); }

/* ── Jelmagyarázat ────────────────────────────────────────────── */
.fn-jelmagy {
  list-style: none; margin: 0 0 clamp(20px, 2.6vw, 30px); padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px 22px;
}
.fn-jelmagy li { display: inline-flex; align-items: center; gap: 9px; font-size: var(--t-2); color: var(--lp-halvany); }
.fn-pont { width: 10px; height: 10px; border-radius: 2px; flex: 0 0 auto; }
.fn-p-eszkoz  { background: var(--lime); }
.fn-p-ai      { background: var(--magenta); }
.fn-p-szamolt { background: var(--cyan); }
.fn-p-mezos   { background: var(--lp-dim); }

/* ── A 15 lépés térképe ───────────────────────────────────────── */
.fn-terkep { display: grid; gap: clamp(14px, 2vw, 20px); }
.fn-szakasz {
  display: grid; grid-template-columns: 1fr; gap: 14px;
  background: var(--lp-bg-3); border: 1px solid var(--lp-keret);
  border-radius: var(--lp-r-xl); padding: clamp(18px, 2.2vw, 26px);
}
@media (min-width: 900px) { .fn-szakasz { grid-template-columns: 250px 1fr; gap: clamp(20px, 2.4vw, 34px); } }

.fn-szakasz-fej { display: flex; flex-direction: column; gap: 5px; }
.fn-rom {
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: var(--t-5);
  color: var(--lime); letter-spacing: -0.02em; line-height: 1;
}
.fn-szakasz-fej b { font-size: var(--t-4); font-family: 'Bricolage Grotesque', sans-serif; }
.fn-szakasz-fej > span:last-child { font-size: var(--t-2); color: var(--lp-halvany); }

.fn-lepesek { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--lp-keret); border: 1px solid var(--lp-keret); border-radius: var(--lp-r-lg); overflow: hidden; }
.fn-lepes {
  display: grid; grid-template-columns: 30px 26px 1fr auto; align-items: center; gap: 10px;
  background: var(--lp-kartya); padding: 12px 14px; position: relative;
}
/* A bal élen a fajta színe — ez köti össze a jelmagyarázattal.
   🔴 A FAJTA-OSZTÁLYOK KÜLÖN ELŐTAGOT KAPNAK (`fn-f-`). Először `fn-eszkoz`
   volt a nevük — ugyanaz, mint az eszköz-KÁRTYÁÉ lentebb —, és a két
   szabálykészlet ráragadt egymásra: a kártyákra rákerült ez a színes él, a
   lépésekre pedig a kártya kerete és rátét-emelkedése. A mérés fogta meg:
   15 „eszközt" számolt ott, ahol 8 van. */
.fn-lepes::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; }
.fn-f-eszkoz::before  { background: var(--lime); }
.fn-f-ai::before      { background: var(--magenta); }
.fn-f-szamolt::before { background: var(--cyan); }
.fn-f-mezos::before   { background: var(--lp-dim); }

.fn-sorszam { font-family: 'JetBrains Mono', monospace; font-size: var(--t-1); color: var(--lp-dim); text-align: right; }
.fn-ikon svg { width: 17px; height: 17px; color: var(--lp-halvany); }
.fn-lepes b { font-size: var(--t-2); }
.fn-mit { grid-column: 3; font-size: var(--t-1); color: var(--lp-dim); }
.fn-fajta {
  grid-row: 1 / span 2; grid-column: 4; align-self: center;
  font-family: 'JetBrains Mono', monospace; font-size: var(--t-0); letter-spacing: .05em;
  color: var(--lp-halvany); border: 1px solid var(--lp-keret); border-radius: var(--lp-r);
  padding: 3px 8px; white-space: nowrap;
}
@media (max-width: 620px) {
  .fn-lepes { grid-template-columns: 26px 22px 1fr; row-gap: 4px; }
  .fn-fajta { grid-row: 3; grid-column: 1 / -1; justify-self: start; }
  .fn-mit   { grid-column: 1 / -1; }
}

/* ── Az eszközök ──────────────────────────────────────────────── */
.fn-eszkozok { display: grid; grid-template-columns: 1fr; gap: clamp(12px, 1.6vw, 18px); }
@media (min-width: 640px)  { .fn-eszkozok { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) { .fn-eszkozok { grid-template-columns: repeat(4, 1fr); } }
.fn-eszkoz {
  background: var(--lp-kartya); border: 1px solid var(--lp-keret);
  border-radius: var(--lp-r-xl); padding: clamp(18px, 2.2vw, 24px);
  transition: transform .16s ease, border-color .16s ease;
}
.fn-eszkoz:hover { transform: translateY(-3px); border-color: var(--lime-el); }
@media (prefers-reduced-motion: reduce) { .fn-eszkoz:hover { transform: none; } }
.fn-eszkoz-ikon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: var(--lp-r-lg);
  background: var(--lime-halk); color: var(--lime); margin-bottom: 13px;
}
.fn-eszkoz-ikon svg { width: 19px; height: 19px; }
.fn-eszkoz h3 { font-size: var(--t-3); margin: 0 0 7px; }
.fn-eszkoz p  { margin: 0; font-size: var(--t-2); color: var(--lp-halvany); line-height: 1.55; }

/* ── A három nyelv — inline SVG ───────────────────────────────────
   🔑 A feliratok VALÓDI <text> elemek, tehát a Google olvassa őket, és
   a színek CSS-ből jönnek — így az ábra a lap témájával együtt él, és
   JS nélkül is teljesen látszik. */
.fn-abra { margin: 0; }
.fn-svg  { width: 100%; height: auto; display: block; }
.fn-sav rect { fill: var(--lp-kartya); stroke: var(--lp-keret); stroke-width: 1; }
.fn-sav-lime    rect { stroke: var(--lime-el); }
.fn-sav-magenta rect { stroke: rgba(var(--m-magenta-rgb),0.42); }
.fn-sav-cyan    rect { stroke: rgba(53,224,255,0.42); }
.fn-sav-cim {
  font-family: 'JetBrains Mono', monospace; font-size: var(--t-1); letter-spacing: .1em;
  fill: var(--lp-szoveg);
}
.fn-sav-lime    .fn-sav-cim { fill: var(--lime); }
.fn-sav-magenta .fn-sav-cim { fill: var(--magenta); }
.fn-sav-cyan    .fn-sav-cim { fill: var(--cyan); }
.fn-sav-mit   { font-family: 'IBM Plex Sans', sans-serif; font-size: var(--t-2); fill: var(--lp-halvany); }
.fn-sav-kinek { font-family: 'IBM Plex Sans', sans-serif; font-size: var(--t-2); font-weight: 600; fill: var(--lp-szoveg); }
.fn-abra figcaption { margin-top: 14px; font-size: var(--t-1); color: var(--lp-dim); }
/* Kis képernyőn az SVG szövege olvashatatlanul összemenne, ezért ott
   nagyobb betűvel rajzoljuk (a viewBox arányát a böngésző kezeli). */
@media (max-width: 640px) {
  .fn-sav-cim   { font-size: var(--t-3); }
  .fn-sav-mit   { font-size: var(--t-4); }
  .fn-sav-kinek { font-size: var(--t-4); }
}

/* ── Amit a végén kapsz ───────────────────────────────────────── */
.fn-eredmeny { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--lp-keret); border: 1px solid var(--lp-keret); border-radius: var(--lp-r-xl); overflow: hidden; }
@media (min-width: 760px) { .fn-eredmeny { grid-template-columns: repeat(2, 1fr); } }
.fn-er { display: flex; gap: 14px; background: var(--lp-kartya); padding: clamp(16px, 2vw, 22px); }
.fn-er-ikon {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: var(--lp-r-lg);
  background: rgba(var(--m-feher-rgb),0.04); color: var(--lime);
}
.fn-er-ikon svg { width: 17px; height: 17px; }
.fn-er b    { display: block; font-size: var(--t-3); margin-bottom: 4px; }
.fn-er span { font-size: var(--t-2); color: var(--lp-halvany); line-height: 1.55; }

/* ── Amit NEM csinálunk ───────────────────────────────────────── */
.fn-nem { display: grid; gap: 12px; margin-bottom: 18px; }
.fn-nem-elem {
  border-left: 3px solid var(--magenta); padding: 14px 0 14px 18px;
  background: linear-gradient(90deg, var(--magenta-halk), transparent 40%);
}
.fn-nem-elem b { display: block; font-size: var(--t-3); margin-bottom: 5px; }
.fn-nem-elem p { margin: 0; font-size: var(--t-2); color: var(--lp-halvany); }

.fn-zaro-gombok { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* ══════════════════════════════════════════════════════════════
   HOGYAN MŰKÖDIK — IDŐVONAL
   🔑 Nem kártyarács: itt a SORREND a mondanivaló. Minden állomás
   abból él, amit az előző hagyott hátra, ezért fut végig egy vonal.
   ══════════════════════════════════════════════════════════════ */

.hg-elso { padding-top: clamp(26px, 3vw, 42px); }

.hg-cedula {
  margin-top: 26px; max-width: 620px;
  border: 1px dashed var(--lp-keret-2); border-radius: var(--lp-r-lg);
  padding: 16px 20px; background: rgba(var(--m-feher-rgb),0.02);
}
.hg-cedula-jel {
  display: block; font-family: 'JetBrains Mono', monospace; font-size: var(--t-0);
  letter-spacing: .12em; text-transform: uppercase; color: var(--magenta); margin-bottom: 7px;
}
.hg-cedula p { margin: 0; font-size: var(--t-3); color: var(--lp-szoveg); font-style: italic; }

.hg-vonal { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }

.hg-allomas { display: grid; grid-template-columns: 44px 1fr; gap: 18px; padding-bottom: clamp(26px, 3.4vw, 44px); }
@media (min-width: 820px) { .hg-allomas { grid-template-columns: 56px 1fr; gap: 26px; } }

/* A jelzés-oszlop: korong + a lefelé futó vonal. */
.hg-jel { position: relative; display: flex; flex-direction: column; align-items: center; }
.hg-jel::after {
  content: ""; position: absolute; top: 46px; bottom: -22px; width: 2px;
  background: linear-gradient(var(--lime-el), var(--lp-keret));
}
.hg-allomas:last-child .hg-jel::after { display: none; }

.hg-korong {
  position: relative; z-index: 1; flex: 0 0 auto;
  width: 44px; height: 44px; border-radius: var(--lp-r-lg);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--lp-kartya); border: 1px solid var(--lime-el); color: var(--lime);
  box-shadow: 0 0 26px -10px rgba(var(--m-lime-rgb),0.55);
}
.hg-korong svg { width: 20px; height: 20px; }
.hg-szam {
  margin-top: 9px; font-family: 'JetBrains Mono', monospace; font-size: var(--t-1);
  color: var(--lp-dim); background: var(--lp-bg); padding: 2px 0; position: relative; z-index: 1;
}

.hg-torzs { min-width: 0; }
.hg-fej { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px; margin-bottom: 8px; }
.hg-fej h2 { font-size: clamp(21px, 1.2rem + 0.7vw, 28px); margin: 0; max-width: none; }
.hg-perc {
  font-family: 'JetBrains Mono', monospace; font-size: var(--t-0); color: var(--lp-halvany);
  border: 1px solid var(--lp-keret); border-radius: var(--lp-r); padding: 3px 9px; white-space: nowrap;
}
.hg-mit { margin: 0 0 16px; color: var(--lp-halvany); font-size: var(--t-3); max-width: 68ch; }

/* A „mit írsz be / mi van meg" doboz: ez a termék maga, ezért gépbetűs. */
.hg-doboz {
  border: 1px solid var(--lp-keret); border-radius: var(--lp-r-lg);
  background: var(--lp-bg-3); padding: 15px 17px; max-width: 640px;
}
.hg-doboz-cim {
  display: block; font-family: 'JetBrains Mono', monospace; font-size: var(--t-0);
  letter-spacing: .12em; text-transform: uppercase; color: var(--lp-dim); margin-bottom: 9px;
}
.hg-doboz ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.hg-doboz li {
  font-family: 'JetBrains Mono', monospace; font-size: var(--t-1); color: var(--lp-halvany);
  padding-left: 16px; position: relative; overflow-wrap: anywhere;
}
.hg-doboz li::before { content: "›"; position: absolute; left: 0; color: var(--lime); }

.hg-ki { margin: 14px 0 0; font-size: var(--t-2); color: var(--lp-dim); max-width: 68ch; }

/* ── Ami a háttérben történik ─────────────────────────────────── */
.hg-hatter { display: grid; grid-template-columns: 1fr; gap: clamp(14px, 2vw, 20px); }
@media (min-width: 820px) { .hg-hatter { grid-template-columns: repeat(3, 1fr); } }
.hg-h-elem {
  background: var(--lp-kartya); border: 1px solid var(--lp-keret);
  border-radius: var(--lp-r-xl); padding: clamp(20px, 2.4vw, 26px);
}
.hg-h-ikon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: var(--lp-r-lg);
  background: var(--magenta-halk); color: var(--magenta); margin-bottom: 13px;
}
.hg-h-ikon svg { width: 18px; height: 18px; }
.hg-h-elem b { display: block; font-size: var(--t-3); margin-bottom: 7px; font-family: 'Bricolage Grotesque', sans-serif; }
.hg-h-elem p { margin: 0; font-size: var(--t-2); color: var(--lp-halvany); line-height: 1.6; }

/* ══════════════════════════════════════════════════════════════
   KINEK VALÓ
   ══════════════════════════════════════════════════════════════ */

.kv-elso { padding-top: clamp(26px, 3vw, 42px); }

.kv-racs { display: grid; grid-template-columns: 1fr; gap: clamp(14px, 2vw, 22px); }
@media (min-width: 720px)  { .kv-racs { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1180px) { .kv-racs { grid-template-columns: repeat(3, 1fr); } }

.kv-kartya {
  display: flex; flex-direction: column;
  background: var(--lp-kartya); border: 1px solid var(--lp-keret);
  border-radius: var(--lp-r-xl); padding: clamp(20px, 2.4vw, 28px);
  transition: border-color .16s ease, transform .16s ease;
}
.kv-kartya:hover { border-color: var(--lime-el); transform: translateY(-3px); }
@media (prefers-reduced-motion: reduce) { .kv-kartya:hover { transform: none; } }

.kv-ikon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--lp-r-lg);
  background: var(--lime-halk); color: var(--lime); margin-bottom: 14px;
}
.kv-ikon svg { width: 20px; height: 20px; }
.kv-kartya h2 { font-size: var(--t-4); margin: 0 0 16px; max-width: none; line-height: 1.25; }

.kv-blokk { margin-bottom: 14px; }
.kv-cimke {
  display: block; font-family: 'JetBrains Mono', monospace; font-size: var(--t-0);
  letter-spacing: .12em; text-transform: uppercase; margin-bottom: 6px;
}
.kv-baj .kv-cimke { color: var(--magenta); }
.kv-mit .kv-cimke { color: var(--lime); }
.kv-blokk p { margin: 0; font-size: var(--t-2); color: var(--lp-halvany); line-height: 1.6; }
.kv-mit     { flex: 1 1 auto; }

/* A kártya lába: a példa és a hozzá elég csomag. */
.kv-lab {
  margin-top: 4px; padding-top: 15px; border-top: 1px solid var(--lp-keret);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px;
}
.kv-pelda { font-size: var(--t-1); color: var(--lp-dim); font-style: italic; max-width: 24ch; }
.kv-csomag {
  font-family: 'JetBrains Mono', monospace; font-size: var(--t-0); letter-spacing: .04em;
  color: var(--lime); text-decoration: none; white-space: nowrap;
  border: 1px solid var(--lime-el); border-radius: var(--lp-r); padding: 5px 10px;
}
.kv-csomag:hover { background: var(--lime-halk); }

/* ── Ami mindegyikben közös ───────────────────────────────────── */
.kv-kozos { display: grid; grid-template-columns: 1fr; gap: clamp(16px, 2.2vw, 26px); }
@media (min-width: 860px) { .kv-kozos { grid-template-columns: repeat(3, 1fr); } }
.kv-k-elem { border-top: 2px solid var(--lime); padding-top: 18px; }
.kv-k-szam {
  display: block; font-family: 'JetBrains Mono', monospace; font-size: var(--t-1);
  color: var(--lime); letter-spacing: .1em; margin-bottom: 9px;
}
.kv-k-elem b { display: block; font-family: 'Bricolage Grotesque', sans-serif; font-size: var(--t-4); margin-bottom: 8px; }
.kv-k-elem p { margin: 0; font-size: var(--t-2); color: var(--lp-halvany); line-height: 1.62; }

/* ══════════════════════════════════════════════════════════════
   GYIK LAP
   ══════════════════════════════════════════════════════════════ */

/* Ugró-sáv a csoportokhoz — horgony-linkek, JS nélkül is működnek. */
.gy-ugro { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.gy-ugro a {
  display: inline-flex; align-items: center; gap: 9px; text-decoration: none;
  background: var(--lp-kartya); border: 1px solid var(--lp-keret);
  border-radius: var(--lp-r-lg); padding: 10px 14px; min-height: 44px;
  color: var(--lp-halvany); font-size: var(--t-2); font-weight: 500;
  transition: border-color .15s, color .15s;
}
.gy-ugro a:hover { border-color: var(--lime-el); color: var(--lp-szoveg); }
.gy-ugro svg { width: 17px; height: 17px; color: var(--lime); }
.gy-ugro b {
  font-family: 'JetBrains Mono', monospace; font-size: var(--t-0); font-weight: 500;
  color: var(--lp-dim); background: rgba(var(--m-feher-rgb),0.04);
  border-radius: var(--lp-r); padding: 2px 7px;
}

.gy-csoport { padding-top: clamp(34px, 4vw, 56px); padding-bottom: clamp(34px, 4vw, 56px); }
.gy-fej { display: flex; align-items: center; gap: 13px; margin-bottom: clamp(18px, 2.4vw, 26px); }
.gy-fej h2 { margin: 0; font-size: clamp(23px, 1.3rem + 0.8vw, 30px); max-width: none; }
.gy-fej-ikon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--lp-r-lg); flex: 0 0 auto;
  background: var(--lime-halk); color: var(--lime);
}
.gy-fej-ikon svg { width: 20px; height: 20px; }

/* ══════════════════════════════════════════════════════════════
   KAPCSOLAT
   ══════════════════════════════════════════════════════════════ */

/* „Lehet, hogy már megvan a válasz" */
.kp-elobb {
  display: grid; grid-template-columns: 1fr; gap: 20px; align-items: center;
  border: 1px solid var(--lp-keret); border-radius: var(--lp-r-xl);
  background: var(--lp-bg-3); padding: clamp(20px, 2.6vw, 30px);
}
@media (min-width: 900px) { .kp-elobb { grid-template-columns: 1fr auto; gap: 34px; } }
.kp-elobb h2 { font-size: var(--t-5); margin: 0 0 8px; max-width: none; }
.kp-elobb p  { margin: 0; color: var(--lp-halvany); font-size: var(--t-2); max-width: 56ch; }
.kp-elobb-gombok { display: flex; flex-wrap: wrap; gap: 10px; }

/* Cégadatok */
.kp-ceg {
  margin: 0 0 16px; display: grid; grid-template-columns: 1fr; gap: 2px 20px;
  border: 1px solid var(--lp-keret); border-radius: var(--lp-r-xl);
  background: var(--lp-kartya); padding: clamp(18px, 2.2vw, 26px);
}
@media (min-width: 620px) { .kp-ceg { grid-template-columns: minmax(0, 240px) 1fr; } }
.kp-ceg dt { font-size: var(--t-1); color: var(--lp-dim); padding: 7px 0; }
.kp-ceg dd { margin: 0; font-size: var(--t-2); color: var(--lp-szoveg); padding: 7px 0; }
.kp-ceg dd a { color: var(--lime); text-decoration: none; }
.kp-ceg dd a:hover { text-decoration: underline; }
@media (min-width: 620px) {
  .kp-ceg dt, .kp-ceg dd { border-top: 1px solid var(--lp-keret); }
  .kp-ceg dt:first-of-type, .kp-ceg dd:first-of-type { border-top: 0; }
}

/* ══════════════════════════════════════════════════════════════
   TUDÁSBÁZIS — lista és cikk
   ══════════════════════════════════════════════════════════════ */

.tb-elso { padding-top: clamp(26px, 3vw, 42px); }

.tb-temak { list-style: none; margin: 0 0 clamp(20px, 2.6vw, 30px); padding: 0; display: flex; flex-wrap: wrap; gap: 9px 20px; }
.tb-temak li { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-2); color: var(--lp-halvany); }
.tb-tema-pont { width: 8px; height: 8px; border-radius: 2px; background: var(--lime); }
.tb-temak b {
  font-family: 'JetBrains Mono', monospace; font-size: var(--t-0); font-weight: 500; color: var(--lp-dim);
  background: rgba(var(--m-feher-rgb),0.04); border-radius: var(--lp-r); padding: 1px 7px;
}

.tb-racs { display: grid; grid-template-columns: 1fr; gap: clamp(14px, 2vw, 20px); }
@media (min-width: 720px)  { .tb-racs { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1160px) { .tb-racs { grid-template-columns: repeat(3, 1fr); } }
/* 2026-10-06: nincs tört sor. Melyik kártya széles, azt a szerver számolja a cikkszámból (`_tb-lap.php`). */
@media (min-width: 720px) and (max-width: 1159.98px) { .tb-racs > .tb-kartya--teljes2 { grid-column: 1 / -1; } }
@media (min-width: 1160px) { .tb-racs { grid-auto-flow: dense; } .tb-racs > .tb-kartya--dupla3 { grid-column: span 2; } }

.tb-kartya {
  background: var(--lp-kartya); border: 1px solid var(--lp-keret);
  border-radius: var(--lp-r-xl); overflow: hidden;
  transition: border-color .16s ease, transform .16s ease;
}
.tb-kartya:hover { border-color: var(--lime-el); transform: translateY(-3px); }
@media (prefers-reduced-motion: reduce) { .tb-kartya:hover { transform: none; } }
.tb-link { display: flex; flex-direction: column; height: 100%; padding: clamp(20px, 2.4vw, 26px); text-decoration: none; }

.tb-fej { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 13px; }
.tb-tema {
  font-family: 'JetBrains Mono', monospace; font-size: var(--t-0); letter-spacing: .12em;
  text-transform: uppercase; color: var(--lime);
}
.tb-perc { font-family: 'JetBrains Mono', monospace; font-size: var(--t-0); color: var(--lp-dim); }
.tb-kartya h2 { font-size: var(--t-4); line-height: 1.28; margin: 0 0 10px; max-width: none; color: var(--lp-szoveg); }
.tb-kartya p  { margin: 0 0 16px; font-size: var(--t-2); color: var(--lp-halvany); line-height: 1.6; flex: 1 1 auto; }
.tb-tovabb { font-size: var(--t-2); font-weight: 600; color: var(--lime); }

/* ── A cikk ───────────────────────────────────────────────────── */
.tb-cikk-fej { padding: clamp(30px, 4vw, 52px) 0 clamp(8px, 1.4vw, 18px); }
.tb-cikk-fej .lp-hero-cim { font-size: clamp(28px, 1.5rem + 2.2vw, 50px); max-width: none; }
.tb-meta { margin: 6px 0 0; font-size: var(--t-1); color: var(--lp-dim); display: flex; gap: 9px; flex-wrap: wrap; }
.tb-torzs { padding: clamp(18px, 2.2vw, 30px) 0 clamp(50px, 6vw, 84px); }

.tb-szoveg p {
  font-size: clamp(16px, 0.98rem + 0.22vw, 18px); line-height: 1.72;
  color: var(--lp-halvany); margin: 0 0 20px; max-width: 68ch;
}
.tb-szoveg h2 {
  font-size: clamp(24px, 1.3rem + 1vw, 33px); margin: clamp(36px, 4vw, 54px) 0 16px;
  max-width: none; scroll-margin-top: calc(var(--lp-fej) + 18px);
}
.tb-szoveg h3 { font-size: var(--t-4); margin: 30px 0 12px; }

.tb-lista { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 10px; }
.tb-lista li {
  position: relative; padding-left: 24px; font-size: var(--t-3);
  color: var(--lp-halvany); line-height: 1.62;
}
.tb-lista li::before {
  content: ""; position: absolute; left: 3px; top: 9px;
  width: 8px; height: 8px; border-radius: 2px; background: var(--lime);
}

.tb-lepesek { list-style: none; margin: 0 0 24px; padding: 0; counter-reset: lep; display: grid; gap: 14px; }
.tb-lepesek li { counter-increment: lep; position: relative; padding-left: 48px; }
.tb-lepesek li::before {
  content: counter(lep); position: absolute; left: 0; top: 0;
  width: 32px; height: 32px; border-radius: var(--lp-r);
  display: flex; align-items: center; justify-content: center;
  background: var(--lime-halk); color: var(--lime);
  font-family: 'JetBrains Mono', monospace; font-size: var(--t-1);
}
.tb-lepesek b    { display: block; font-size: var(--t-3); margin-bottom: 5px; }
.tb-lepesek span { display: block; font-size: var(--t-2); color: var(--lp-halvany); line-height: 1.62; }

.tb-kiemelt {
  margin: 0 0 24px; padding: 18px 22px;
  border-left: 3px solid var(--lime);
  background: linear-gradient(90deg, var(--lime-halk), transparent 60%);
  font-size: var(--t-3); color: var(--lp-szoveg); line-height: 1.6;
}

.tb-idezet {
  margin: clamp(28px, 3.4vw, 40px) 0; padding: 0 0 0 26px;
  border-left: 2px solid var(--magenta);
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 500;
  font-size: clamp(19px, 1.05rem + 0.6vw, 24px); line-height: 1.45;
  color: var(--lp-szoveg); letter-spacing: -0.015em;
}

.tb-szamok {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--lp-keret); border: 1px solid var(--lp-keret);
  border-radius: var(--lp-r-xl); overflow: hidden; margin: 0 0 24px;
}
.tb-szamok > div { background: var(--lp-bg-3); padding: clamp(16px, 2vw, 22px); text-align: center; }
.tb-szamok b {
  display: block; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800;
  font-size: clamp(22px, 1.2rem + 1vw, 32px); color: var(--lime); line-height: 1.1; letter-spacing: -0.02em;
}
.tb-szamok span { display: block; margin-top: 6px; font-size: var(--t-1); color: var(--lp-halvany); line-height: 1.4; }

/* A másolható prompt-részlet: pont úgy néz ki, ahogy a generátorba kerül. */
.tb-prompt {
  margin: 0 0 24px; border: 1px solid var(--lp-keret-2); border-radius: var(--lp-r-lg);
  background: var(--lp-bg-3); overflow: hidden;
}
.tb-prompt figcaption {
  font-family: 'JetBrains Mono', monospace; font-size: var(--t-0); letter-spacing: .12em;
  text-transform: uppercase; color: var(--lp-dim);
  padding: 9px 16px; border-bottom: 1px solid var(--lp-keret); background: rgba(var(--m-fekete-tiszta-rgb),0.24);
}
.tb-prompt code {
  display: block; padding: 16px; font-family: 'JetBrains Mono', monospace;
  font-size: var(--t-2); line-height: 1.75; color: var(--cyan);
  white-space: pre-wrap; overflow-wrap: anywhere;
}

/* ══ SZEMLÉLTETŐ ÁBRÁK A CIKKEKBEN (2026-09-29, `_tb-abrak.php`) ══
   Vonalrajz a szöveg színével, kiemelés lime-mal és magentával.
   JS nélkül teljes; keskenyen minden egymás alá kerül. */
.tb-abra { margin: clamp(22px, 3vw, 34px) 0; padding: clamp(16px, 2.2vw, 24px); border: 1px solid var(--lp-keret); border-radius: var(--lp-r); background: var(--lp-bg-3); }
.tb-abra figcaption { margin: 14px 0 0; font-size: var(--t-1); color: var(--lp-halvany); line-height: 1.5; }
.tb-abra svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tb-abra svg .t { fill: currentColor; fill-opacity: .16; }
.tb-abra code { font-family: 'JetBrains Mono', monospace; font-size: var(--t-0); color: var(--cyan); overflow-wrap: anywhere; }
.tb-abra ol, .tb-abra ul { list-style: none; margin: 0; padding: 0; }
.tb-abra b span { color: var(--lp-dim); }
/* műanyag arc */
.tb-arc-par { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.tb-arc { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 16px 12px; border-radius: var(--lp-r); border: 1px solid var(--lp-keret); }
.tb-arc-rajz { width: min(120px, 60%); height: auto; }
.tb-arc--gep { color: var(--lp-dim); }
.tb-arc--gep b { color: var(--lp-halvany); }
.tb-arc--jo { color: var(--lime); border-color: var(--lime-el); background: linear-gradient(180deg, var(--lime-halk), transparent 70%); }
.tb-arc--jo b { color: var(--lp-szoveg); }
.tb-arc--jo .k { stroke: var(--magenta); }
.tb-arc--jo .h { stroke-width: 1.4; opacity: .8; }
.tb-arc--jo .p circle { fill: currentColor; stroke: none; }
.tb-arc b { margin: 10px 0 6px; font-size: var(--t-2); }
.tb-arc ul { display: grid; gap: 3px; font-size: var(--t-1); color: var(--lp-halvany); }
/* karakterlap */
.tb-sheet { display: grid; grid-template-columns: 1fr 1.1fr 0.9fr; border: 2px solid var(--lime-el); border-radius: 3px; background: var(--lp-bg-2); }
.tb-sheet-resz { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; padding: 14px 10px; color: var(--lime); }
.tb-sheet-resz + .tb-sheet-resz { border-left: 1px dashed var(--lp-keret-2); }
.tb-sheet-rajz { width: 100%; max-width: 170px; height: auto; margin-bottom: 8px; }
.tb-sheet-resz b { color: var(--lp-szoveg); font-size: var(--t-2); }
.tb-sheet-resz small { color: var(--lp-halvany); font-size: var(--t-0); }
/* ragaszkodás-skála */
.tb-skala { position: relative; height: 92px; margin: 6px 0 0; }
.tb-skala-sav { position: absolute; left: 0; right: 0; top: 10px; height: 10px; border-radius: 5px; background: linear-gradient(90deg, var(--lp-keret-2), var(--lp-halvany)); }
.tb-skala-jo { position: absolute; top: -4px; bottom: -4px; border-radius: 3px; background: var(--lime); box-shadow: 0 0 0 3px var(--lime-halk); }
.tb-skala-pont { position: absolute; top: 30px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; text-align: center; width: 150px; }
.tb-skala-pont::before { content: ''; position: absolute; top: -24px; width: 2px; height: 16px; background: var(--lp-halvany); }
.tb-skala-pont b { font-family: 'JetBrains Mono', monospace; font-size: var(--t-2); color: var(--lp-szoveg); }
.tb-skala-pont small { font-size: var(--t-0); color: var(--lp-halvany); line-height: 1.35; }
.tb-skala-pont--jo b { color: var(--lime); }
/* a két szélső felirat a skála végéhez igazodik, különben kilóg a dobozból (mérve) */
.tb-skala-pont--bal { transform: none; align-items: flex-start; text-align: left; }
.tb-skala-pont--bal::before { left: 0; }
.tb-skala-pont--jobb { transform: translateX(-100%); align-items: flex-end; text-align: right; }
.tb-skala-pont--jobb::before { right: 0; }
/* kamera hat dimenziója */
.tb-hat { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tb-hat li { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px; border-radius: var(--lp-r); border: 1px solid var(--lp-keret); color: var(--lime); }
.tb-hat .esz-abra { width: 44px; height: 44px; }
.tb-hat b { color: var(--lp-szoveg); font-size: var(--t-2); }
/* tiltólista */
.tb-tilt { display: grid; grid-template-columns: minmax(0, 3fr) auto minmax(0, 1.3fr); gap: 12px; align-items: stretch; }
.tb-szoveg .tb-tilt p { margin: 0 0 10px; font-size: var(--t-0); font-family: 'JetBrains Mono', monospace; letter-spacing: .06em; text-transform: uppercase; line-height: 1.4; }
.tb-tilt-alap, .tb-tilt-jelenet { padding: 14px; border-radius: var(--lp-r); }
.tb-tilt-alap { border: 1px solid var(--lime-el); }
.tb-szoveg .tb-tilt-alap p { color: var(--lime); }
.tb-tilt-jelenet { border: 1px solid var(--magenta); background: linear-gradient(180deg, var(--magenta-halk), transparent 80%); }
.tb-szoveg .tb-tilt-jelenet p { color: var(--magenta); }
.tb-tilt ol { display: grid; gap: 8px; }
.tb-tilt li { display: grid; gap: 2px; }
.tb-tilt b { font-size: var(--t-2); color: var(--lp-szoveg); }
.tb-tilt-plusz { align-self: center; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 28px; color: var(--lp-halvany); }
/* rövid videó íve */
.tb-iv-rajz { display: block; width: 100%; height: auto; }
.tb-iv-rajz .tb-iv-alap { stroke: var(--lp-keret-2); stroke-width: 1; }
.tb-iv-rajz .tb-iv-gorbe { stroke: var(--lime); stroke-width: 3; }
.tb-iv-sav { display: flex; gap: 3px; margin-top: 6px; }
.tb-iv-szak { flex-basis: 0; min-width: 0; padding: 8px 10px; border-radius: 3px; display: flex; flex-direction: column; gap: 1px; }
.tb-iv-szak b { font-size: var(--t-2); color: var(--lp-szoveg); }
.tb-iv-szak small { font-family: 'JetBrains Mono', monospace; font-size: var(--t-0); color: var(--lp-halvany); }
.tb-iv--horog { background: var(--magenta-halk); box-shadow: inset 0 3px 0 var(--magenta); }
.tb-iv--eszk { background: linear-gradient(90deg, var(--lp-bg-2), var(--lime-halk)); box-shadow: inset 0 3px 0 var(--lp-keret-2); }
.tb-iv--fel { background: var(--lime-halk); box-shadow: inset 0 3px 0 var(--lime); }
/* fénypult (2026-10-04): felülnézet + kamera képe + négy választósor + kész promptsor */
.tb-pult-kepek { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(12px, 2.4vw, 24px); align-items: end; }
.tb-pult-kepek > div { display: grid; gap: 8px; justify-items: center; min-width: 0; }
.tb-pult-kepek b { justify-self: start; font-family: 'JetBrains Mono', monospace; font-size: var(--t-0); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--lp-dim); }
.tb-pult-felul { display: block; width: 100%; max-width: 280px; height: auto; color: var(--lp-halvany); }
.tb-pult-arc { display: block; width: 100%; max-width: 210px; height: auto; border-radius: var(--lp-r); }
.tb-pult-felul .fov { stroke: var(--lp-keret-2); stroke-width: 1.5; stroke-dasharray: 4 5; }
.tb-pult-felul .ray { stroke: var(--lime); stroke-dasharray: 6 5; }
.tb-pult-felul .kamera { stroke: var(--magenta); }
.tb-pult-felul .alany { color: var(--lp-szoveg); }
.tb-pult-felul .arnyek { stroke: none; fill-opacity: .75; }
.tb-pult-felul .lampa { stroke: var(--lp-bg); stroke-width: 3; }
.tb-pult-arc .fej { fill: url(#tbp-arc); stroke: none; }
.tb-pult-arc .test { fill: url(#tbp-vall); stroke: none; }
.tb-pult-arc .perem { fill: none; stroke-width: 3.5; }
.tb-pult-arc .vonas { fill: none; stroke: var(--m-fekete-tiszta); stroke-opacity: .28; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tb-pult-valaszto { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; margin: clamp(16px, 2.4vw, 24px) 0 0; }
.tb-pult fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.tb-pult legend { padding: 0; margin: 0 0 8px; font-family: 'JetBrains Mono', monospace; font-size: var(--t-0); letter-spacing: .12em; text-transform: uppercase; color: var(--lp-halvany); }
.tb-pult fieldset > div { display: flex; flex-wrap: wrap; gap: 6px; }
.tb-pult label { position: relative; cursor: pointer; }
.tb-pult input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tb-pult label span { display: flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1px solid var(--lp-keret-2); border-radius: var(--lp-r); font-size: var(--t-1); color: var(--lp-szoveg); background: var(--lp-bg-2); }
.tb-pult label:hover span { border-color: var(--lime-el); }
.tb-pult input:checked + span { background: var(--lime); border-color: var(--lime); color: var(--lime-sotet); font-weight: 600; }
.tb-pult input:focus-visible + span { outline: 2px solid var(--lime); outline-offset: 2px; }
.tb-pult-ki { margin: clamp(16px, 2.4vw, 24px) 0 0; display: grid; gap: 10px; }
.tb-pult-hatas { margin: 0; font-size: var(--t-1); color: var(--lp-halvany); line-height: 1.5; }
.tb-pult-sor { display: grid; grid-template-columns: minmax(0, 1fr) auto; border: 1px solid var(--lime-el); border-radius: var(--lp-r); background: var(--lp-bg); }
.tb-pult .tb-pult-sor code { padding: 14px 16px; font-size: var(--t-1); line-height: 1.6; }
.tb-pult-masol { min-width: 96px; min-height: 44px; border: 0; border-left: 1px solid var(--lime-el); border-radius: 0 var(--lp-r) var(--lp-r) 0; background: var(--lime-halk); color: var(--lime); font: 600 var(--t-1) 'JetBrains Mono', monospace; cursor: pointer; }
.tb-pult-masol:hover { background: var(--lime); color: var(--lime-sotet); }
.tb-pult-masol:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .tb-pult-felul .lampa, .tb-pult-felul .arnyek, .tb-pult-arc rect { transition: cx .35s ease, cy .35s ease, rx .35s ease, fill .35s ease; }
}
@media (max-width: 640px) {
  .tb-pult-valaszto { grid-template-columns: minmax(0, 1fr); }
  .tb-pult-sor { grid-template-columns: minmax(0, 1fr); }
  .tb-pult-masol { border-left: 0; border-top: 1px solid var(--lime-el); border-radius: 0 0 var(--lp-r) var(--lp-r); }
  .tb-arc-par, .tb-sheet, .tb-tilt { grid-template-columns: minmax(0, 1fr); }
  .tb-sheet-resz + .tb-sheet-resz { border-left: 0; border-top: 1px dashed var(--lp-keret-2); }
  .tb-hat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tb-tilt-plusz { justify-self: center; }
  .tb-skala { height: auto; margin: 6px 0 0; display: grid; gap: 10px; padding-top: 30px; }
  .tb-skala-pont { position: static; transform: none; width: auto; flex-direction: row; gap: 10px; text-align: left; }
  .tb-skala-pont::before { display: none; }
  .tb-iv-szak { padding: 6px; }
  .tb-iv-szak b { font-size: var(--t-1); }
}

.tb-tabla-doboz { margin: 0 0 26px; }
.tb-tabla { min-width: 460px; }
.tb-tabla th[scope="row"] { min-width: 160px; }
/* 2026-11-11: telefonon nincs oldalra görgetés, minden sor egy kártya (a cella előtt az oszlop neve). */
@media (max-width: 640px) {
  .tb-tabla-doboz { overflow: visible; border: 0; background: none; }
  .tb-tabla, .tb-tabla tbody, .tb-tabla tr, .tb-tabla th, .tb-tabla td { display: block; min-width: 0; width: auto; }
  .tb-tabla thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tb-tabla tr { border: 1px solid var(--lp-keret); border-radius: var(--lp-r-xl); background: var(--lp-kartya); margin: 0 0 12px; }
  .tb-tabla th[scope="row"] { min-width: 0; color: var(--lp-szoveg, inherit); font-weight: 600; }
  .tb-tabla th, .tb-tabla td { text-align: left; padding: 10px 14px; }
  .tb-tabla [data-c]::before { content: attr(data-c); display: block; font-size: var(--t-1); color: var(--lp-halvany); letter-spacing: .04em; margin-bottom: 2px; }
  .tb-tabla [data-c=""]::before { display: none; }
  .tb-tabla th[scope="row"]::before { font-weight: 400; }
  .tb-tabla tbody tr:last-child td { border-bottom: 0; }
  .tb-tabla tr td:last-child { border-bottom: 0; }
}

.tb-tovabbiak { margin-top: clamp(40px, 5vw, 64px); padding-top: clamp(26px, 3vw, 38px); border-top: 1px solid var(--lp-keret); }
.tb-tovabbiak h2 { font-size: var(--t-5); margin: 0 0 18px; max-width: none; }

/* ══════════════════════════════════════════════════════════
   VÁRÓLISTA — a skill-csomag főoldala (2026-09-27).
   A doboz a belépő képernyő `lp-auth-doboz`-át használja, hogy a
   kirakat és a belépés ugyanabból a vetítőteremből álljon.
   ══════════════════════════════════════════════════════════ */
.vl-cim { font-size: clamp(26px, 1.4rem + 1.2vw, 38px); max-width: none; }
.vl-doboz .lp-btn { width: 100%; }
.lp-zaro .vl-doboz { max-width: 560px; margin: 0 auto; }
.vl-pipak { margin-top: 8px; }
#varolista { scroll-margin-top: calc(var(--lp-fej) + 16px); }

/* A hozzájárulás pipája: a doboz a teljes sort fogja, így telefonon is
   44 px fölötti a koppintási felület. */
.vl-pipa {
  display: flex; gap: 12px; align-items: flex-start; cursor: pointer;
  margin: 2px 0 18px; padding: 10px 0; min-height: 44px;
  font-size: var(--t-2); color: var(--lp-halvany); line-height: 1.5;
}
.vl-pipa input {
  flex: 0 0 auto; width: 20px; height: 20px; margin: 1px 0 0;
  accent-color: var(--lime); cursor: pointer;
}
.vl-pipa a { color: var(--lime); text-decoration: underline; text-underline-offset: 3px; }

.vl-kesz {
  display: grid; gap: 6px; padding: 18px 20px;
  background: linear-gradient(100deg, var(--lime-halk), transparent 75%);
  border-left: 3px solid var(--lime); border-radius: 0 var(--lp-r-lg) var(--lp-r-lg) 0;
}
.vl-kesz[hidden] { display: none; }
.vl-kesz b { color: var(--lp-szoveg); font-size: var(--t-3); }
.vl-kesz span { color: var(--lp-halvany); font-size: var(--t-2); }

.vl-lap .lp-fazis h3 { margin-bottom: 4px; }

/* 🔴 KESKENY TELEFONON LELÓGOTT A MENÜGOMB (mérve 375 px-en: a jobb széle
   387 px-en állt, 12 px-szel a képernyőn túl). A logó, a nyelvváltó, a fő
   gomb és a menü együtt szélesebb volt, mint a sáv. Itt húzzuk össze, nem
   rejtünk el semmit: mind a négy kell. */
@media (max-width: 420px) {
  .lp-sav { gap: 8px; }
  .lp-fej-jobb { gap: 6px; }
  /* 2026-09-30, a user: „mobilon kicsi” — 19 px-en eltörpült a gombok mellett.
     24 px (mint tableten): 360 px-en is 45 px hely marad a gombokig (mérve). */
  .lp-logo { font-size: 24px; }
  .lp-fej .lp-btn { padding: 11px 13px; }
}
/* 2026-09-30, mérve: 320 px-en a 24 px-es logóval a fejléc 24 px-szel kilógott
   (a lap 344 px széles lett). A legkeskenyebb telefonon a logó 20 px, a gomb szűkebb. */
@media (max-width: 345px) {
  .lp-sav { gap: 6px; }
  .lp-fej-jobb { gap: 4px; }
  .lp-logo { font-size: 19px; }
  .lp-fej .lp-btn { padding: 11px 8px; }
}

/* „Amit érdemes tudnod előre": két kártya egymás mellett, nem három. */
@media (min-width: 640px) { .vl-ketto { grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* ════════════════════════════════════════════════════════════
   SÜTI-SÁV (2026-09-28)
   Alul, a tartalom fölött lebegve, de nem takarja el az egész képernyőt.
   A két gomb egyforma súlyú: a „nem” ugyanolyan könnyű, mint az „igen”
   (a hozzájárulás csak így önkéntes).
   ════════════════════════════════════════════════════════════ */
.wlai-suti {
  position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 90;
  width: min(760px, calc(100% - 32px));
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px;
  padding: 16px 18px; background: var(--lp-kartya); color: var(--lp-szoveg);
  border: 1px solid var(--lp-keret-2); border-radius: var(--lp-r-lg);
  box-shadow: 0 18px 50px rgba(var(--m-fekete-tiszta-rgb),.55);
}
.wlai-suti p { flex: 1 1 320px; margin: 0; font-size: var(--t-2); line-height: 1.55; color: var(--lp-halvany); }
.wlai-suti a { color: var(--lp-szoveg); }
.wlai-suti form { display: flex; flex-wrap: wrap; gap: 8px; }
.wlai-suti button {
  min-height: 44px; padding: 0 18px; font: inherit; font-weight: 600; font-size: var(--t-2);
  border-radius: var(--lp-r); cursor: pointer;
}
/* 10-05 (a user: „csináld”): a két gomb PONTOSAN egyforma, az ICO egyenlő súlyt vár. */
.wlai-suti-igen, .wlai-suti-nem { background: var(--lime); color: var(--lime-sotet); border: 1px solid var(--lime); }
.wlai-suti button:hover { filter: brightness(1.08); }
.wlai-suti button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
@media (max-width: 480px) {
  .wlai-suti form, .wlai-suti button { flex: 1 1 100%; }
}

/* A láblécben: gombként működik, linkként néz ki. */
.lp-lab-suti { margin: 0; }
.lp-lab-suti button {
  padding: 0; background: none; border: 0; font: inherit;
  cursor: pointer; text-align: left;
  /* 2026-10-06: betűméret és szín, mint a lábléc többi linkjén (eddig nagyobb és világosabb volt). */
  color: var(--lp-halvany); font-size: var(--t-2);
}
.lp-lab-suti button:hover { color: var(--lime); }

/* ════════════════════════════════════════════════════════════
   VÁSÁRLÁS — a skill-csomag megrendelése (2026-09-28).
   Ugyanaz a doboz, mint a várólistáé (`lp-auth-doboz`). A két ár
   egy-egy választókártya: JS nélkül is működik, a kiválasztottat a
   `:has(:checked)` emeli ki.
   ════════════════════════════════════════════════════════════ */
.vs-doboz .lp-btn { width: 100%; }
.vs-rejtett { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.vs-ciklusok { display: grid; gap: 10px; margin: 18px 0 12px; padding: 0; border: 0; min-width: 0; }
.vs-ciklus {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px;
  min-height: 56px; padding: 12px 16px; cursor: pointer;
  background: rgba(var(--m-fekete-tiszta-rgb),0.28); border: 1px solid var(--lp-keret-2); border-radius: var(--lp-r-lg);
  transition: border-color .15s ease, background .15s ease;
}
.vs-ciklus:hover { border-color: var(--lime-el); }
.vs-ciklus:has(input:checked) { border-color: var(--lime); background: var(--lime-halk); }
.vs-ciklus input { width: 20px; height: 20px; margin: 0; accent-color: var(--lime); cursor: pointer; }
.vs-ciklus:has(input:focus-visible) { outline: 2px solid var(--cyan); outline-offset: 2px; }
.vs-ciklus-nev { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-weight: 600; color: var(--lp-szoveg); font-size: var(--t-3); }
.vs-jel {
  font-style: normal; font-size: var(--t-1); font-weight: 700; color: var(--lime-sotet);
  background: var(--lime); border-radius: var(--lp-r); padding: 2px 8px; white-space: nowrap;
}
.vs-ar { color: var(--lp-halvany); font-size: var(--t-2); white-space: nowrap; text-align: right; }
.vs-ar b { color: var(--lp-szoveg); font-size: var(--t-4); font-weight: 700; }
/* 2026-10-08: nyitási akció alatt a teljes díj a mai ár alatt. */
.vs-ar-utana { display: block; font-size: var(--t-1); color: var(--lp-dim); }
.vs-penznemek { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0 0 8px; font-size: var(--t-2); color: var(--lp-dim); }
.vs-penznemek span { margin-right: 4px; }
.vs-penznemek a, .vs-penznemek b {
  display: inline-flex; align-items: center; justify-content: center; min-width: 48px; min-height: 44px; padding: 0 8px;
  border-radius: var(--lp-r); font-family: 'JetBrains Mono', monospace; font-size: var(--t-1);
}
.vs-penznemek a { color: var(--lp-halvany); text-decoration: none; }
.vs-penznemek a:hover { color: var(--lp-szoveg); background: rgba(var(--m-feher-rgb),0.05); }
.vs-penznemek b { color: var(--lime); background: var(--lime-halk); font-weight: 600; }
.vs-apro { margin: 16px 0 0; font-size: var(--t-1); color: var(--lp-dim); line-height: 1.55; }
.vs-apro a { color: var(--lp-halvany); text-decoration: underline; text-underline-offset: 3px; }
.vs-koszi { max-width: 560px; margin: 0 auto; text-align: left; }
/* Bizalmi sor a fizetés gomb alatt (2026-10-05). Négy elem: 2×2 vagy 1 oszlop,
   a doboz SAJÁT szélessége dönt (konténer-lekérdezés), így tört sor nincs. */
.vs-doboz { container-type: inline-size; }
.vs-bizalom { list-style: none; margin: 18px 0 0; padding: 16px 0 0; border-top: 1px solid var(--lp-keret-2); display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.vs-bizalom li { display: flex; gap: 10px; align-items: flex-start; min-width: 0; }
.vs-bizalom .i { width: 20px; height: 20px; margin-top: 1px; color: var(--lime); }
.vs-bizalom span { display: grid; gap: 2px; min-width: 0; font-size: var(--t-1); color: var(--lp-halvany); line-height: 1.45; overflow-wrap: anywhere; }
.vs-bizalom b { color: var(--lp-szoveg); font-size: var(--t-2); font-weight: 600; }
@container (min-width: 400px) {
  .vs-bizalom { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
}
/* A „Mit kapsz a pénzedért” kártyái (2026-10-05, három csomag). */
.vs-csomag { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.vs-csomag--ajanlott { border-color: var(--lime); }
.vs-csomag h3 { margin: 0; }
.vs-csomag-ar { margin: 0; color: var(--lp-halvany); font-size: var(--t-2); }
.vs-csomag-ar b { color: var(--lp-szoveg); font-size: var(--t-5, 1.6rem); font-weight: 700; }
.vs-csomag-ar span { display: block; font-size: var(--t-1); color: var(--lp-dim); }
.vs-csomag-lista { list-style: none; margin: 4px 0 8px; padding: 0; display: grid; gap: 8px; flex: 1 1 auto; }
.vs-csomag-lista li { position: relative; padding-left: 24px; font-size: var(--t-2); color: var(--lp-szoveg); line-height: 1.45; overflow-wrap: anywhere; }
.vs-csomag-lista li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--lime); font-weight: 700; }
.vs-csomag-lista li b { display: block; font-weight: 600; color: var(--lp-halvany); font-size: var(--t-1); }
.vs-csomag-lista li.vs-nincs { color: var(--lp-dim); text-decoration: line-through; text-decoration-color: var(--lp-keret-2); }
.vs-csomag-lista li.vs-nincs::before { content: "–"; color: var(--lp-dim); }
.vs-csomag .lp-btn, .vs-csomag .lp-btn2 { width: 100%; white-space: normal; text-align: center; }
/* „Hamarosan” (2026-10-06): a még nem kapható csomag lakattal, nem választható. */
.vs-jel--hamar { display: inline-flex; align-items: center; gap: 4px; color: var(--lp-szoveg); background: rgba(var(--m-feher-rgb),0.08); border: 1px solid var(--lp-keret-2); vertical-align: middle; }
.vs-jel--hamar .i { width: 14px; height: 14px; }
.vs-ciklus--zar { cursor: not-allowed; opacity: .62; }
.vs-ciklus--zar:hover { border-color: var(--lp-keret-2); }
.vs-ciklus--zar input { cursor: not-allowed; }
.vs-csomag--zar .vs-csomag-ar, .vs-csomag--zar .vs-csomag-lista { opacity: .6; }
.vs-hamar { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 12px 14px; border: 1px dashed var(--lp-keret-2); border-radius: var(--lp-r); font-size: var(--t-2); color: var(--lp-halvany); line-height: 1.45; }
.vs-hamar .i { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--lime); }
/* Nyitási akció (2026-10-08): lime sáv fekete tintával a vásárlási lap tetején. */
.vs-akcio { position: relative; z-index: 3; margin: 0; padding: 12px 16px; background: var(--lime); color: var(--lime-sotet); text-align: center; font-size: var(--t-3); line-height: 1.4; overflow-wrap: anywhere; }
.vs-akcio b { font-weight: 800; }
.vs-koszi a { color: var(--lime); }
/* Főoldal, nyitott bolt (2026-09-28): az ár-doboz a várólista helyén. */
.ar-sorok { list-style: none; margin: 16px 0 18px; padding: 0; display: grid; gap: 10px; }
.ar-sorok li {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px;
  padding: 14px 16px; border: 1px solid var(--lp-keret-2); border-radius: var(--lp-r-lg);
  color: var(--lp-szoveg); font-size: var(--t-3); font-weight: 600;
}
.ar-sorok li span { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.ar-sorok b { font-size: var(--t-4); white-space: nowrap; }
.ar-sorok li.ar-zar > span { opacity: .6; }
.ar-sorok .ar-akcio { font-size: var(--t-1); font-weight: 400; color: var(--lp-halvany); }
/* 2026-10-06: a három csomagkártya 2+1 helyett egy oszlopban, amíg nem fér ki egy sorba. */
@media (min-width: 640px) and (max-width: 979.98px) { .lp-racs-3.vs-csomag-racs { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-inline: auto; } }
.ar-doboz .lp-btn { width: 100%; }
.lp-zaro .ar-doboz { max-width: 460px; margin: 0 auto; }
/* Letöltő lap (2026-09-28): licencszám + két nyelvű letöltés. */
.lt-licenc { max-width: 560px; margin: 0 auto 22px; text-align: left; }
.lt-licenc b { overflow-wrap: anywhere; }
.lt-gombok { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.lt-gombok form { margin: 0; }
/* A két nyelv egyenrangú: lime + a márka másik színe, a magenta.
   Sötét szöveg: fehérrel a magenta 3,4:1 (AA alatt), sötéttel 5,5:1. */
.lp-btn.lt-magenta {
  background: var(--magenta); border-color: var(--magenta); color: var(--lime-sotet);
  box-shadow: 0 8px 26px -12px rgba(var(--m-magenta-rgb),0.7);
}
.lp-btn.lt-magenta:hover {
  background: var(--m-magenta-vilagos);
  box-shadow: 0 0 34px -6px rgba(var(--m-magenta-rgb),0.55), 0 10px 30px -12px rgba(var(--m-magenta-rgb),0.8);
}
.lp-btn.lt-magenta:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
@media (max-width: 520px) {
  .lt-gombok { flex-direction: column; align-items: stretch; }
  .lt-gombok .lp-btn { width: 100%; white-space: normal; }
}
@media (max-width: 420px) {
  .vs-ciklus { grid-template-columns: auto minmax(0, 1fr); }
  .vs-ar { grid-column: 2; text-align: left; }
}

/* Claude-konnektor (2026-09-28): az engedélyező lap és a Fiókom kártyája. */
.kn-lista { margin: 0 0 16px; padding-left: 1.2em; display: grid; gap: 6px; color: var(--lp-szoveg); }
.kn-megse { width: 100%; margin-top: 10px; min-height: 44px; }
.kn-figy {
  margin: 0 0 18px; padding: 12px 14px; border: 1px solid var(--lime); border-left-width: 4px; border-radius: var(--lp-r);
  color: var(--lp-szoveg); font-size: var(--t-2); line-height: 1.5;
}
.kn-figy b { display: block; color: var(--lime); margin-bottom: 2px; }
.lp-auth-doboz .vs-apro, .lp-auth-doboz .lp-alcim { overflow-wrap: anywhere; }
.kn-masik { margin: 6px 0 0; text-align: center; }
.kn-masik button {
  background: none; border: 0; padding: 10px 0; min-height: 44px; cursor: pointer;
  color: var(--lp-halvany); font: inherit; font-size: var(--t-2); text-decoration: underline; text-underline-offset: 3px;
}
.kn-masik button:hover { color: var(--lime); }

/* Így készül a videó (2026-10-06, vásárlási lap): a „külön kell” lista pluszjellel, nem áthúzva. */
.vs-kulon li::before { content: "+"; color: var(--lp-halvany); }
.vs-kulon li b { color: var(--lp-szoveg); font-size: inherit; margin-bottom: 2px; }
.vs-video-racs .lp-kartya h3 { margin-bottom: 12px; }
.vs-video-alcim { margin: clamp(28px, 4vw, 44px) 0 14px; }
.kn-figy a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.lp-auth-lista li a { color: var(--lime); text-decoration: underline; text-underline-offset: 3px; }

/* A hőscím egy szókapcsolata nem törhet ketté (2026-09-28: a „Claude-ban”
   a kötőjelnél tört). 480 px alatt törhet, ott a képernyő a határ. */
@media (min-width: 480px) { .lp-egyben { white-space: nowrap; } }

/* ── NAGYON NAGY KIJELZŐN ARÁNYOSAN (2026-09-29, a user kérése) ──
   2200 px fölött az egész lap arányosan nő, így 2560-on is úgy néz ki,
   mint 1920-on. Ugyanez a belső lapokon: `belso-arculat.css`. */
/* 🔴 A nagyítás a `vh`-t is felszorozza (2026-10-05: a belépő lap alja kilógott):
   képernyőmagasságot mindig így írj: `calc(100vh / var(--z, 1))`. */
/* 2026-11-11, a user: nagy monitoron a nagyítás KI („mintha rossz felbontás”). A `--z` marad 1, a `calc(100vh / var(--z, 1))` alak így is jó. */

/* ══ „Így készül a videó” a tudásbázisban (2026-10-06) ══
   A listában az „Első lépések” cikk széles kártya „Kezdd itt” jellel; a cikkben a négy lépés ábrája:
   lime = ezt adja a weblockai, magenta = külön előfizetés. */
.tb-racs > .tb-kartya--kezd { grid-column: 1 / -1; border-color: var(--m-magenta); background: linear-gradient(135deg, rgba(var(--m-magenta-rgb),.10), transparent 60%), var(--lp-kartya); }
.tb-kartya--kezd h2 { font-size: var(--t-5, var(--t-4)); }
.tb-kartya--kezd .tb-fej { justify-content: flex-start; flex-wrap: wrap; }
.tb-kartya--kezd .tb-perc { margin-left: auto; }
.tb-kezd-jel { font-family: 'JetBrains Mono', monospace; font-size: var(--t-0); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; background: var(--m-magenta); color: var(--m-fekete); padding: 4px 9px; border-radius: 4px; }
.tb-ut { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; counter-reset: none; }
@media (min-width: 640px) { .tb-ut { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .tb-ut { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tb-ut li { display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: var(--lp-r); border: 1px solid var(--lp-keret); }
.tb-ut-szam { font-family: 'Anton', 'Inter', sans-serif; font-size: 30px; line-height: 1; color: var(--lp-dim); }
.tb-ut li b { color: var(--lp-szoveg); font-size: var(--t-2); }
.tb-ut li em { font-style: normal; font-family: 'JetBrains Mono', monospace; font-size: var(--t-0); letter-spacing: .06em; text-transform: uppercase; }
.tb-ut li small { color: var(--lp-halvany); font-size: var(--t-1); line-height: 1.45; }
.tb-ut--wl { border-color: var(--lime-el); }
.tb-ut--wl .tb-ut-szam, .tb-ut--wl em { color: var(--lime); }
.tb-ut--gen { border-color: var(--m-magenta); }
.tb-ut--gen .tb-ut-szam, .tb-ut--gen em { color: var(--m-magenta); }
.tb-ut--te em { color: var(--lp-halvany); }
.tb-szoveg .tb-ut-jel, .tb-ut-jel { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 14px 0 0; font-size: var(--t-1); color: var(--lp-halvany); }
.tb-ut-jel span { display: inline-flex; align-items: center; gap: 8px; }
.tb-ut-jel span::before { content: ""; width: 12px; height: 12px; border-radius: 3px; }
.tb-ut-jel--wl::before { background: var(--lime); }
.tb-ut-jel--gen::before { background: var(--m-magenta); }
.vs-video-tovabb { margin: clamp(18px, 2.4vw, 26px) 0 0; }
.vs-video-tovabb a { display: inline-flex; align-items: center; min-height: 44px; color: var(--lime); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* 2026-10-06: szövegközi link és a Források blokk a tudásbázis-cikkekben. */
.tb-szoveg p a, .tb-szoveg li a, .tb-szoveg td a, .tb-szoveg th a, .tb-kiemelt a, .tb-idezet a, .tb-lepesek span a {
  color: var(--lime); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.tb-szoveg p a:hover, .tb-szoveg li a:hover, .tb-szoveg td a:hover, .tb-kiemelt a:hover, .tb-lepesek span a:hover { text-decoration-thickness: 2px; }
.tb-forrasok { margin-top: clamp(36px, 5vw, 56px); padding-top: 24px; border-top: 1px solid var(--lp-keret); }
.tb-szoveg .tb-forrasok h2 { font-size: var(--t-4); margin: 0 0 14px; }
.tb-forrasok ol { margin: 0; padding-left: 1.4em; display: grid; gap: 8px; font-size: var(--t-1); color: var(--lp-halvany); }
.tb-forrasok li { overflow-wrap: anywhere; }
.tb-forrasok li a { display: inline-block; padding: 6px 0; min-height: 24px; }

/* ── arculat.css ── */
/* ══ MÁRKASZÍNEK — KÖZÖS TOKENEK (2026-10-24, a user: „Ha még nincs tokenizálva a rendszer, akkor tedd meg.”) ══
   Minden ismétlődő szín innen jön; ez a fájl minden lapon betölt (nyilvános és belső).
   Egy szín átírása itt az egész rendszeren átvezeti. A témafüggő jelentéseket (--bg, --text, --accent…)
   továbbra is a design.css / arculat-a.css adja; ezek a nyers márkaszínek, témától függetlenül. */
:root {
  --m-lime: #c9ff35;     /* a márka lime-ja */
  --m-lime-vilagos: #d8ff6b; /* lime hover */
  --m-lime-sotet: #9dcf35; /* lime árnyék / szegély */
  --m-fekete: #0f1113;   /* az A arculat fekete alapja */
  --m-fekete-mely: #0a0a0a; /* világos téma fekete tintája */
  --m-fekete-tiszta: #000; /* tiszta fekete */
  --m-tinta: #0a0f16;    /* betű lime felületen */
  --m-feher: #fff;       /* fehér */
  --m-feher-tort: #f3f5f8; /* törtfehér szöveg sötéten */
  --m-szurke-felulet: #202327; /* sötét hover-felület */
  --m-szurke-hover: #1a1d24; /* sötét sáv hover */
  --m-szurke-halk: #a3acb8; /* halk menüszöveg */
  --m-pala: #94a3b8;     /* palaszürke */
  --m-magenta: #fb23c2;  /* a márka magentája */
  --m-magenta-kozep: #d81ba6; /* magenta hover */
  --m-magenta-mely: #c4128f; /* mély magenta */
  --m-magenta-gomb: #b0107f; /* magenta gomb (fehér betűvel AA) */
  --m-magenta-sotet: #8c0c65; /* magenta gomb hover */
  --m-navy-kartya: #0d2137; /* a régi navy kártya */
  --m-piros-halvany: #fca5a5; /* hibaszöveg sötéten */
  --m-piros-halo: #fecaca; /* hiba-háttér */
  --m-borostyan: #f0a020; /* figyelmeztetés */
  --m-zold-mely: #0f7a5f; /* mély zöld (siker) */

  /* 2026-11-09, teljes tokenizálás (a user: „menjen a teljes tokenizálás”): a lapok saját stílusaiban
     beégetett színek is innen jönnek. A szinte azonos árnyalatok (szemmel megkülönböztethetetlenek) egy tokenre
     kerültek. Kivétel szándékosan: levelek, QR-kód, zászlók, a rajzolt előnézetek és a haj/szem/bőr színmintái. */
  --m-sotet-sav: #131518;      /* sötét sáv, mélyebb háttér */
  --m-sotet-doboz: #17191d;    /* sötét doboz (kártya) */
  --m-sotet-aktiv: #272a30;    /* kijelölt fül / gomb sötéten */
  --m-sotet-vonal: #2d333f;    /* vonal sötéten */
  --m-sotet-vonal-2: #3a4048;  /* erősebb vonal sötéten */
  --m-szurke-kozep: #7c8591;   /* középszürke (kikapcsolt jel, felirat) */
  --m-szurke-sotet: #55585e;   /* halk szöveg világos alapon */
  --m-szurke-csendes: #b3bcc7; /* csendes szöveg sötéten */
  --m-szurke-vilagos: #d5dbe3; /* világos szöveg sötéten */
  --m-vilagos-alap: #f4f5ef;   /* világos téma alapja */
  --m-vilagos-sav: #ebebe5;    /* világos sáv */
  --m-vilagos-vonal: #d9d9d2;  /* vonal világosban */
  --m-lime-ink: #3d5c08;       /* lime szöveg világos alapon */
  --m-lime-kozep: #8ab926;     /* középlime (sáv, gradiens) */
  --m-lime-eros: #9fe000;      /* lime gradiens vége */
  --m-lime-mely: #1d2510;      /* lime-ba hajló sötét alap */
  --m-lime-vonal: #3c4a1c;     /* lime-os vonal sötéten */
  --m-lime-vonal-2: #5b6b33;   /* lime-os vonal, rámutatás */
  --m-lime-halo: #eef8d6;      /* halvány lime alap világosban */
  --m-magenta-vilagos: #ff4fd0; /* világos magenta (hover, szöveg sötéten) */
  --m-magenta-halvany: #ff8ad8; /* halvány magenta hibaszöveg sötéten */
  --m-piros: #e5484d;          /* piros jel */
  --m-piros-vilagos: #ff6b6f;  /* piros szöveg sötéten */
  --m-piros-mely: #b3261e;     /* piros gomb, szöveg világosban */
  --m-piros-sotet: #8f1e17;    /* piros gomb hover */
  --m-borostyan-mely: #b3730a; /* borostyán szöveg világosban */
  --m-borostyan-sotet: #7d5400; /* borostyán gomb */
  --m-cian: #38bdf8;           /* cián jel */
  --m-kek: #4f8cff;            /* kék jel */
  --m-lila: #9b6bff;           /* lila jel */

  /* A gyakori átlátszó változatokhoz: rgba(var(--m-lime-rgb), .35) */
  --m-lime-rgb: 201,255,53;
  --m-magenta-rgb: 251,35,194;
  --m-feher-rgb: 255,255,255;
  --m-fekete-rgb: 15,17,19;
  --m-fekete-tiszta-rgb: 0,0,0;
}

/* ============================================================
   BETŰ-SKÁLA — A PROJEKT EGYETLEN MÉRETRENDJE (2026-09-19)

   🔬 MÉRVE, mielőtt kitaláltam volna: a két stíluslapban
   497 helyre volt BEÉGETVE a betűméret, változó nélkül —
   a műhelyben 336, a nyilvános oldalon 161. Nyolcféle méret
   szorongott 9,5 és 14 pixel között. Ezért nem volt rend, és
   ezért nem mozdult semmi, amikor a `--fs-body` tokent
   állítottam: a komponensek nem abból dolgoztak.

   Ez a hét lépcső a MOSTANI értékekből nőtt ki, sávosan és
   FELFELÉ kerekítve, mert a panasz az volt, hogy apró és
   olvashatatlan. A régi értékek sávjai:
       9,5 - 11,5  →  t-0
       12  - 13    →  t-1
       13,5 - 15   →  t-2
       15,5 - 17   →  t-3
       18  - 20    →  t-4
       21  - 26    →  t-5
       27 +        →  t-6
   ============================================================ */
:root{
  --t-0: 11.5px;   /* mono címkék, jelvények */
  --t-1: 13px;     /* meta, lábjegyzet */
  --t-2: 15px;     /* másodlagos szöveg */
  --t-3: 16.5px;   /* szövegtörzs */
  --t-4: 19px;     /* kártyacím */
  --t-5: 24px;     /* szakaszcím */
  --t-6: 32px;     /* lapcím */
}

/* ============================================================
   weblockai — ARCULAT-RÉTEG (2026-09-19)

   Mit csinál: a két meglévő stíluslap (landing.css a nyilvános
   oldalakon, design.css a műhelyben) FÖLÉ ül, és csak azt javítja,
   ami mérve hibás volt. A színvilág marad: sötét alap, lime,
   magenta, cián.

   🔴 MIÉRT KELLETT (mérve 2026-09-19, az ÉLŐ oldalon):
   1. A főcím sorköze 1,08-szoros volt (31 px betű, 33,48 px sor).
      Ekkora betűnél a sorok fizikailag összeérnek — a user szava:
      „egymáson vannak a karakterek". Itt 1,18-ra állítjuk, és a
      -0,025em betűtávolságot is lazítjuk, mert az is összetolja.
   2. A `--lp-dim` (#6c7f96) a kártyán 4,45:1 kontrasztot adott, a
      4,5-ös minimum ALATT. A user szava: „halványak". Az új érték
      (#aebfd2) ugyanaz a hideg kékesszürke, de 9,7:1 a kártyán.
   3. A sarkok 4 px-esek voltak. A user szava: „túl szögletes".
      10, 14 és 18 px-re nyitva. Pirula (999 px) továbbra sincs.

   ⚠️ Az `!important` itt SZÁNDÉKOS és ideiglenes: a két meglévő
   stíluslap együtt 500 KB, és a javításnak azok szabályai fölött
   kell nyernie. Ahogy egy lap átáll az új arculatra, az adott
   szabály innen kikerül.
   ============================================================ */

:root{
  /* ── lágyabb geometria, mindkét stíluslapnak ── */
  --lp-r:    10px;
  --lp-r-lg: 14px;
  --lp-r-xl: 18px;
  /* 🔑 2026-09-29, a user jóváhagyásával: a Műhely sarkai a szabály szerint
     (kis elem max 4 px, kártya 8, nagy panel 10). Eddig 10/14/18 volt.
     A nyilvános oldalak a `--lp-r*` változókat használják, azokat ez nem érinti. */
  --r:       4px;
  --r-lg:    8px;
  --r-xl:    10px;

  /* ── olvasható másodlagos szürke a sötét oldalon ──
     régi: #6c7f96 (4,45 a kártyán, BUKIK) · új: 9,7 a kártyán */
  --lp-dim: #aebfd2;

  /* ── a magenta szerepe: jelzés, nem felirat-háttér ──
     fehér szöveg magentán 3,43 = bukás, ezért a jelvényekre
     sötét felirat jár. */
  --magenta-ink: #0f1113;
}

/* ══ TIPOGRÁFIA — a sorok ne érjenek össze ══ */
h1, h2, h3{
  line-height: 1.18 !important;
  letter-spacing: -0.012em !important;
}
h2, h3{
  line-height: 1.28 !important;
}

/* nagyon nagy címnél még több levegő kell */
@media (min-width: 900px){
  h1{ line-height: 1.16 !important; }
}

/* ══ SZÖVEGTÖRZS — a nyilvános oldalon ══ */
body.lp, .lp-szoveg{
  line-height: 1.7;
}

/* ══ A KIEMELÉS FÉNYCSÍKJA ══
   Mérve 2026-09-19, 375 px szélességen: a csík `bottom: 0.08em`-en ült,
   ami pontosan a lelógó betűk sávja. A magyar szövegben ez folyton
   előjön („végigvezetjük", „gyorsan", „így"), és átvágja a betűt.
   Lejjebb visszük a sorköz aljára, és picit erősítjük, mert távolabbról
   halványabbnak látszana. */
.lp-kiemel::after{
  bottom: -0.14em !important;
  height: 0.075em !important;
  opacity: .5 !important;
}

/* ══ MAGENTA JELVÉNY — sötét felirattal, mérve 5,9 ══ */

/* ══ FÓKUSZ — billentyűzettel is látszódjon ══ */
:focus-visible{
  outline: 2px solid var(--lime, var(--m-lime));
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
}

/* ============================================================
   NYITÓLAP — LEVEGŐ ÉS REND (2026-09-19)

   A user: „nem átláthatóak az oldalak és a tartalom".
   Mérve, mi okozta: a nyitó képernyőn HAT elem áll egymás alatt
   (címke, cím, cédula, alcím, nyitva-sáv, nyíl), és mobilon a hat
   lépés közt csak 20-34 px hely van. Asztalon a lépések közti hely
   már jó volt (120-300 px), tehát csak a szűk helyeket tágítjuk.
   A TARTALOMHOZ NEM NYÚLUNK, csak a térközhöz és a súlyokhoz.
   ============================================================ */

/* ── a nyitó: több levegő, és egyetlen fő üzenet ── */
/* 2026-09-28: a user „a menü alatt sok a légrés” → a felső párna 150-ről 64 px-re */
.lp-hero{ padding: clamp(32px, 4.5vw, 64px) 0 clamp(48px, 6vw, 96px) !important; }
.lp-hero .lp-kis{ margin-bottom: 26px !important; }
.lp-hero-cim{ margin-bottom: 0 !important; }
.lp-hero .lp-alcim{ margin-bottom: 0 !important; }

/* ── a hat lépés: mobilon dupla annyi hely, és olvashatóbb szöveg ── */
@media (max-width: 999px){
  .film-bal{ gap: clamp(44px, 9vw, 72px) !important; }
}
.lepes{ max-width: 52ch !important; }
.lepes h2{ margin-bottom: 14px !important; }
.lepes p{
  font-size: clamp(16px, 0.95rem + 0.3vw, 17.5px) !important;
  line-height: 1.7 !important;
}
.lepes-jel{ margin-bottom: 16px !important; }

/* ── a szakaszok közti ritmus ── */
.film-szek{ padding: clamp(46px, 6vw, 88px) 0 clamp(64px, 9vw, 120px) !important; }

/* ============================================================
   ALOLDALAK — EGYSÉGES SZÖVEGMÉRET ÉS LEVEGŐ (2026-09-19)

   Mérve mind a 9 nyilvános lapon, 375 px-en: vízszintes kilógás
   SEHOL nincs, viszont a szövegméret lapról lapra ugrált
   (13 · 13,5 · 14 · 14,5 · 15,5 · 16,1 · 17,1 px). Ettől tűnik
   rendezetlennek a lap, pedig a szerkezet rendben van.

   🔑 Nem húzunk mindent 17-re: ezek kártyákban ülnek, és a
   szétfeszítenék. Alsó HATÁRT adunk nekik, és tisztességes sorközt.

   A cím és az utána jövő bekezdés közt MINDEN aloldalon 0 px volt
   a távolság (mérve). A nyitólap hőscíme kivétel, annak saját
   ritmusa van.
   ============================================================ */

/* másodlagos szövegek kártyákon: legalább 15,5 px */
.ar-kinek,
.hg-mit,
.hg-ki,
.tb-link p,
.hg-h-elem p{
  font-size: var(--t-3) !important;
  line-height: 1.65 !important;
}

/* lábjegyzet és apró szöveg: kicsi marad, de nem 13 px */
.ar-labjegyzet,
.lp-apro{
  font-size: var(--t-2) !important;
  line-height: 1.6 !important;
}

/* levegő a lapcím alá.
   🔴 Mérve: az ALOLDALAK címe is `lp-hero-cim` osztályt visel, ezért az
   előző, „a hőscímet kihagyjuk" szabály egyetlen lapon sem fogott. Most
   fordítva: mindenki kap levegőt, és a NYITÓLAP hőscíme (`lp-hero-sz`)
   az egyetlen kivétel, mert ott a cédula adja a ritmust. */
.lp-hero-cim{
  margin-bottom: clamp(16px, 2.6vw, 26px) !important;
}

/* a vezető bekezdés és az alcím sorköze */
.lp-vezeto,
.lp-alcim{
  line-height: 1.68 !important;
}

/* ============================================================
   MŰHELY — A BELSŐ FELÜLET (2026-09-19)

   A `design.css` színei mérve rendben vannak, ezért azokhoz nem
   nyúlunk. Két hely maradt, ahol a sorköz és a betűtávolság
   ugyanúgy összetolja a szöveget, mint a nyilvános oldalon volt:
   a lapcím (`.head h1`, 1,15) és a kártyacím (`.dont-cim`, 1,15),
   mindkettő -0,03em betűtávolsággal.

   ⚠️ A műhely belépés mögött van, ezt a két javítást KÓDBÓL
   írom, nem láttam működés közben. Ha valami elcsúszik, ez a
   két szabály törlendő először.
   ============================================================ */

.head h1,
.dont-cim{
  line-height: 1.22 !important;
  letter-spacing: -0.012em !important;
}

/* a logó egysoros, azt békén hagyjuk (`.brand`, 1,05) */

/* ============================================================
   MŰHELY — MÉRETREND (2026-09-19)

   🔬 MÉRVE az éles stíluslappal (másolaton, mert a lap belépés
   mögött van). Ezt találtam:

     lapcím        22,6 px
     szakaszcím    15 px
     súgószöveg    15 px
     szövegtörzs   15 px
     mezőfelirat   13,5 px
     mező          14 px
     prompt        12,5 px

   🔴 A BAJ: nincs méretrend. A lapcímtől a szövegtörzsig hét
   pontnyi a teljes tartomány, és a szakaszcím PONTOSAN akkora,
   mint a súgó meg a törzs. Ezért nem vezeti a szem: minden
   egyformán fontosnak látszik. Ez a „nem átlátható" mérhető oka.

   ✅ Amit csinálunk: szétnyitjuk a rendet. A cím nagyobb lesz,
   a szakaszcím kiemelkedik a törzsből, a súgó visszalép, a
   mezők kényelmesebbek.

   🔑 A user kérése: „a promptok betűtípusa maradjon ilyen, max
   lehetne picit nagyobb" → a JetBrains Mono MARAD, 12,5 → 14 px.
   ============================================================ */

:root{
  --fs-body: 16px;          /* 15 → 16 */
  --fs-lapcim: clamp(26px, 1.2rem + 0.9vw, 34px);   /* 21-28 → 26-34 */
  --fs-h2: clamp(19px, 1rem + 0.3vw, 22px);         /* 18-21 → 19-22 */
  --fs-h3: 17.5px;
}

/* a szakaszcím emelkedjen ki a törzsből */
.sec-label{
  font-size: var(--t-3) !important;
  padding: 13px var(--s4) !important;
}

/* a súgó lépjen vissza: kisebb és halkabb, mint a törzs */
.sec-hint{
  font-size: var(--t-2) !important;
  line-height: 1.65 !important;
}

/* mezők: kényelmesebb felirat és beviteli szöveg */
.field label{ font-size: var(--t-2) !important; }
.field input,
.field select,
.field textarea,
.wlai-select{
  font-size: var(--t-3) !important;
}

/* 🔑 A PROMPT — a betűtípus marad, csak nagyobb és levegősebb */
.out textarea{
  font-size: var(--t-2) !important;
  line-height: 1.75 !important;
}
.out-head b,
.out-head em{ font-size: var(--t-0) !important; }

/* ============================================================
   MŰHELY — REND ÉS OLVASHATÓSÁG (2026-09-19, elfogadva)

   A user: „nem a dobozokkal volt bajom, hanem azzal, hogy
   olvashatatlan és rendezetlen minden. A régi kék színei nagyon
   jók, a prompt lime színe szar."

   ➡️ A kék világ ÉRINTETLEN (lap #071523, kártya #0D2137,
      szöveg #EEF4FA), a dobozok maradnak. Csak a rend változik.

   ⚠️ A műhelynek VAN témaváltója (sötét/világos), ezért a
      színeket a rendszer saját változóival írjuk, nem beégetve.
      Egyetlen kivétel a prompt szövege, ami csak sötétben volt
      lime — azt csak sötét témában cseréljük.
   ============================================================ */

/* ── 1. A szakaszcím legyen valódi cím ── */
.sec-label{
  font-size: var(--t-4) !important;
  padding: 15px 20px !important;
  letter-spacing: -0.01em !important;
}
.sec-hint{
  font-size: var(--t-3) !important;
  line-height: 1.7 !important;
  margin-bottom: 20px !important;
}

/* ── 2. A kártyák kapjanak belső levegőt, és legyen köztük hely ── */
.sec{
  padding: 4px 20px 22px !important;
  margin-bottom: 30px !important;
}

/* ── 3. A mezőfelirat ránézésre különüljön el a tartalomtól ── */
.field{ margin-bottom: 20px !important; }
.field label{
  display: block !important;
  font-size: var(--t-1) !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
  margin-bottom: 8px !important;
}
.field input,
.field select,
.field textarea,
.wlai-select{
  width: 100% !important;
  font-size: var(--t-3) !important;
  padding: 13px 15px !important;
  border-radius: var(--r) !important;
  background: var(--bg-sunken) !important;
  border: 1px solid var(--field-border) !important;
  color: var(--text) !important;
}
.field input:focus,
.field select:focus,
.field textarea:focus{
  border-color: var(--cyan, #35e0ff) !important;
  outline: none !important;
}

/* ── 4. A prompt: a lime megy, a kék világ marad ──
   📏 Mérve a kártyán (#0D2137): lime 13,8 · lágy kékesfehér 13,1.
   Nem az olvashatóság volt a baj, hanem hogy telített zöld egy
   hosszú angol szövegen fárasztó. A lime NEM tűnik el: ott marad
   a doboz címkéjén és a másoló gombon, jelölőnek. */
.out{ border-radius: var(--r-lg) !important; margin-bottom: 44px !important; }
.out textarea{
  font-size: var(--t-2) !important;
  line-height: 1.8 !important;
  padding: 22px !important;
  min-height: 250px !important;
}
:root[data-theme="dark"] .out textarea{ color: #DCE8F5 !important; }
.out-head{ padding: 15px 20px !important; }
.out-head b{ color: var(--accent, var(--m-lime)) !important; font-size: var(--t-1) !important; letter-spacing: .14em !important; }
.out-foot{ padding: 16px 20px !important; }
.out-note{ font-size: var(--t-2) !important; line-height: 1.7 !important; }

/* ============================================================
   MŰHELY FŐOLDAL — A CSEMPÉK (2026-09-19)

   🔴 Ez az a lap, amit belépés után ELŐSZÖR látsz, és eddig
   egyetlen javításom sem érintette: más elemekből áll
   (`tile`, `dont`, `eszk-fej`), mint a szerszám-lapok
   (`sec`, `field`, `out`). Ezért nem látszott semmi.

   📏 MÉRVE az éles stíluslappal:
     csempe neve        17,5 px
     csempe leírása     13,5 px / 1,45 sorköz
     lépés-felirat      10,5 px
     szakaszcím (h2)    19 px
     alatta a mondat    13,5 px
     csempék közti hely 12 px

   🔴 A BAJ ugyanaz, mint mindenhol: a szakaszcím (19) és a
   csempe neve (17,5) között másfél pont a különbség, a leírás
   meg 13,5 px szűk sorközzel. Nincs rend, és apró a szöveg.
   ============================================================ */

/* a szakaszcím emelkedjen ki a csempék nevéből */
.eszk-fej h2{
  font-size: var(--t-5) !important;
  line-height: 1.25 !important;
  margin-bottom: 8px !important;
}
.eszk-fej p{
  font-size: var(--t-3) !important;
  line-height: 1.65 !important;
}

/* a csempe: nagyobb név, olvasható leírás, levegő */
.tiles{ gap: 18px !important; }
.tile{ padding: 20px !important; border-radius: var(--r-lg) !important; }
.tile-name{
  font-size: var(--t-4) !important;
  line-height: 1.3 !important;
}
.tile-desc{
  font-size: var(--t-2) !important;
  line-height: 1.6 !important;
  margin-top: 6px !important;
  /* 🔴 A leírás KÉT sorra volt vágva (`-webkit-line-clamp: 2`). A nagyobb
     betűbe már nem fért bele a mondat, és félbevágva jelent meg
     („a megadot…"). Három sor: a mondat kifér, a csempe alig nő. */
  -webkit-line-clamp: 3 !important;
}
.tile-lepes{
  font-size: var(--t-0) !important;
  letter-spacing: .1em !important;
  margin-bottom: 7px !important;
}

/* a folytatás-doboz és az új videó doboz */
.dont-cim{ font-size: var(--t-5) !important; line-height: 1.25 !important; }
.dont-uj-cim{ font-size: var(--t-4) !important; }
.dont-uj-mit,
.dont-elso-mit{ font-size: var(--t-3) !important; line-height: 1.65 !important; }
.dont-cimke{ font-size: var(--t-0) !important; letter-spacing: .1em !important; }

/* ============================================================
   MŰHELY — A HALVÁNY SZÜRKÉK (2026-09-19)

   A user, sokadszor: „ugyanazok a halvány szürke betűk".
   📏 Mérve a sötét témában, a kártyán (#0d2137):
       --text        #eef4fa   14,7   rendben
       --text-muted  #a3b6cb    7,8   átmegy, DE fakó 15 px-en
       --text-dim    #8fa3ba    6,3   átmegy, DE fakó

   🔑 A szabvány nem minden: 7,8 „megfelel", és mégis fakónak
   látszik, mert alacsony telítettségű kékesszürke, kis méretben.
   A user szeme a mérvadó, nem a küszöb.
   ============================================================ */

:root[data-theme="dark"]{
  --text-muted: #cfdcea;   /* 7,8 → 11,7 a kártyán */
  --text-dim:   #b8c9dc;   /* 6,3 →  9,6 a kártyán */
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --text-muted: #cfdcea;
    --text-dim:   #b8c9dc;
  }
}

/* ============================================================
   BETŰTÍPUS — A TELJES RENDSZERBEN (2026-09-19, elfogadva)

   A user: „szar betűtípussal". Négy párosítást nézett végig a
   választón, és az ajánlásomat fogadta el:

     CÍMEK   → Plus Jakarta Sans   (van jelleme, de tiszta)
     SZÖVEG  → Inter               (felületre tervezték, 13-15 px-en
                                     is éles, a magyar ő és ű
                                     kettős vesszője rendben marad)
     PROMPT  → JetBrains Mono      (VÁLTOZATLAN, a user kérése)

   ⚠️ A `landing.css` 14 helyen írja ki a 'Bricolage Grotesque'-ot
   és 6 helyen az 'IBM Plex Sans'-t közvetlenül, nem változóból.
   Ezért itt felül kell írni őket, nem elég a tokent cserélni.
   ============================================================ */

/* ── a műhely: változókon keresztül megy ── */
:root{
  --font-fo:  'Plus Jakarta Sans', 'Bricolage Grotesque', system-ui, sans-serif;
  --font-szo: 'Inter', 'IBM Plex Sans', system-ui, sans-serif;
  /* --font-gep (JetBrains Mono) SZÁNDÉKOSAN érintetlen */
}

/* ── a nyilvános oldal: közvetlen deklarációk, felül kell írni ── */
/* 🔴 A `body.lp` (két osztály-szintű szelektor) erősebb, mint a puszta
   `body`, ezért azt NÉV SZERINT is felül kell írni, különben minden
   elem, aminek nincs saját szabálya, a régi betűt örökli. Mérve. */
body, body.lp, .lp-alcim, .lp-vezeto, .lp-apro, p, li, td, th, input, select, textarea, button, .lp-btn, .lp-btn2, .lp-link, .btn, .copy-btn, .tool-btn, .ai-btn, .auth-btn, .dont-gomb, .tile-soon-tag{
  font-family: 'Inter', 'IBM Plex Sans', system-ui, sans-serif;
}
h1, h2, h3, h4, .lp-hero-cim, .jel, .logo, .brand, .tile-name, .dont-cim, .dont-uj-cim, .sec-label, .head h1{
  font-family: 'Plus Jakarta Sans', 'Bricolage Grotesque', system-ui, sans-serif;
}

/* a monospace MINDENHOL marad, ahol eddig is volt */
.out textarea, .lp-kis, .cimke, .lepes-jel, .tile-lepes, .ido,
code, pre, kbd, samp{
  font-family: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;
}

/* ============================================================
   MŰHELY — A VILÁGOS TÉMA HALK SZÖVEGEI (2026-09-19)

   🔴 A korábbi javításom CSAK a sötét témára vonatkozott. Ha a
   felhasználó világos témát használ (a `hgf-theme` a böngésző
   tárolójában), abból semmit nem látott.

   📏 Mérve a fehér kártyán:
       --text-muted  #56637a   6,07   fakó
       --text-dim    #626f85   5,08   fakó
   A lap szürkés hátterén (#f3f6fa) még rosszabb: 5,6 és 4,69.

   Az alábbi értékek ugyanaz a hideg kékesszürke, csak sötétebbek.
   ⚠️ Ez a bare `:root`, tehát a VILÁGOS témára hat. A sötét téma
   értékeit a fenti, nagyobb fajsúlyú szabály adja.
   ============================================================ */

:root{
  --text-muted: #3d4a60;   /* 6,07 → 8,95 a kártyán */
  --text-dim:   #46536a;   /* 5,08 → 7,76 a kártyán */
}

/* ============================================================
   A LOGÓ BETŰJE: ANTON (2026-09-28, a user választása)
   A logó (lime „weblock” + magenta „ai”) marad, csak a betű új:
   keskeny filmplakát-betű. CSAK a logóra: a lap szövegei maradnak.
   🔑 Saját szerverről (`assets/fonts/`), nem a Google-ről. Egy
      vastagsága van, ezért a `font-weight` 400, különben a böngésző
      műfélkövért rajzolna rá.
   ============================================================ */
@font-face{
  font-family: 'Anton';
  src: url('/assets/fonts/anton-latin.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
.brand, .lp-logo, .brand .brand-fo, .brand .brand-ai, .lp-logo b, .oldalsav .sav-brand::after{
  font-family: 'Anton', 'Plus Jakarta Sans', system-ui, sans-serif;
  font-weight: 400;
}
.brand, .lp-logo{ letter-spacing: 0.005em; }

/* A LOGÓ JELE: csapó, aminek a teste lejátszás gomb (2026-09-28, a user: „C”).
   CSAK CSS: minden lapon megjelenik, ahol a logó van (menü, nyilvános lapok,
   belépés), a PHP-hoz nem kell nyúlni. Keskeny ikon-módban a jel marad, az
   „ai” betűk helyett. */
.brand, .lp-logo{ display: inline-flex; align-items: center; }
.brand::before, .lp-logo::before{
  content: ''; flex-shrink: 0;
  width: 1.05em; height: 1.05em; margin-right: 0.3em;
  background: url('/assets/logo-jel.svg') center / contain no-repeat;
}
/* A „STUDIO” felirat a név alatt, két vékony lime vonal között (2026-10-31, a user: „E”).
   A sor a név szélességére nyúlik (a szülő oszlop a legszélesebb gyerekéhez igazodik). */
.lp-logo-nev{ display: flex; flex-direction: column; line-height: 1; }
.lp-logo-s{
  display: flex; align-items: center; justify-content: center; gap: .5em;
  margin-top: .2em; font-family: 'Anton', 'Plus Jakarta Sans', system-ui, sans-serif; font-weight: 400;
  font-size: max(.3em, 9px); letter-spacing: .5em; text-transform: uppercase; line-height: 1;
  color: #c9ff35; -webkit-text-fill-color: #c9ff35; text-shadow: none;
}
.lp-logo-s::before, .lp-logo-s::after{ content: ''; flex: 1; height: 2px; background: #c9ff35; opacity: .7; }
.lp-logo-s::after{ margin-left: -.5em; }
.brand .lp-logo-s{ margin-top: .15em; }
@media (min-width: 1024px) and (max-width: 1279px){
  .oldalsav .sav-brand::before{ width: 30px; height: 30px; margin-right: 0; }
  .oldalsav .sav-brand::after{ content: none; }
  .oldalsav .lp-logo-s{ display: none; }
}

/* ══ IZZÁS (neon glow) + NYOMHATÓ GOMB (2026-11-11, a user: „Javasolj hogy hova kerüljön lime és hova magenta. Elfogadom”) ══
   Magenta izzás = „figyelj, ez különleges”: csak a fizetéskérő ablak (_kirakat.php), a lime gombja is izzik.
   Lime izzás = „ezt nyomd meg”: a kiemelt csomag (vasarlas/index.php). A nyilvános lapokon magenta izzás NEM kerül.
   A fő (lime) gomb mindenhol nyomható gomb, izzás nélkül. Levétel: az `izzas` osztály kivétele, illetve ez a blokk. */
.izzas{ --izzas-rgb: var(--m-magenta-rgb); --izzas-belso: .5; }
.izzas--lime{ --izzas-rgb: var(--m-lime-rgb); --izzas-belso: .2; }
:root:root:root .izzas{
  border: 1px solid rgba(var(--izzas-rgb), .95) !important; border-top-color: rgba(var(--m-feher-rgb), .5) !important; border-radius: 4px;
  background-image: radial-gradient(120% 95% at 15% 120%, rgba(var(--izzas-rgb), var(--izzas-belso)), transparent 65%),
    radial-gradient(80% 60% at 100% 0%, rgba(var(--m-feher-rgb), .05), transparent 60%);
  box-shadow: inset 0 1px 0 rgba(var(--m-feher-rgb), .16), 0 0 0 1px rgba(var(--izzas-rgb), .35), 0 0 16px rgba(var(--izzas-rgb), .5),
    0 0 48px rgba(var(--izzas-rgb), .3), 0 0 110px rgba(var(--izzas-rgb), .15) !important;
}
:root:root:root[data-theme="light"] .izzas{
  background-image: none; border-top-color: rgba(var(--izzas-rgb), .95) !important;
  box-shadow: 0 0 0 1px rgba(var(--izzas-rgb), .35), 0 0 18px rgba(var(--izzas-rgb), .35) !important;
}
dialog.izzas::backdrop{ background: rgba(var(--m-fekete-tiszta-rgb), .72); backdrop-filter: blur(3px); }
:root:root:root :is(.wg--fo, .btn--lime, .btn--primary, .auth-btn, .ai-btn, .ment-btn, .ms-ai-gomb, .lept-btn.fo){
  box-shadow: inset 0 1px 0 rgba(var(--m-feher-rgb), .55), inset 0 -2px 0 rgba(var(--m-fekete-tiszta-rgb), .18), 0 3px 0 var(--m-lime-kozep) !important;
  transition: transform .08s ease, box-shadow .08s ease;
}
:root:root:root :is(.wg--fo, .btn--lime, .btn--primary, .auth-btn, .ai-btn, .ment-btn, .ms-ai-gomb, .lept-btn.fo):not(:disabled):active{
  transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(var(--m-feher-rgb), .4), 0 1px 0 var(--m-lime-kozep) !important;
}
:root:root:root[data-theme="light"] :is(.wg--fo, .btn--lime, .btn--primary, .auth-btn, .ai-btn, .ment-btn, .ms-ai-gomb, .lept-btn.fo){
  box-shadow: inset 0 1px 0 rgba(var(--m-feher-rgb), .55), 0 3px 0 var(--m-fekete) !important;
}
:root:root:root:not([data-theme="light"]) .izzas .wg--fo{
  box-shadow: inset 0 1px 0 rgba(var(--m-feher-rgb), .55), inset 0 -2px 0 rgba(var(--m-fekete-tiszta-rgb), .18), 0 3px 0 var(--m-lime-kozep),
    0 0 22px rgba(var(--m-lime-rgb), .55) !important;
}
@media (prefers-reduced-motion: reduce){ :root:root:root :is(.wg--fo, .btn--lime, .btn--primary){ transition: none; } }

/* ── uj-arculat.css ── */
/* ============================================================
   weblockai — AZ ÚJ ARCULAT A TÖBBI NYILVÁNOS LAPRA (2026-09-28)

   A jóváhagyott új főoldal (fooldal-uj.css) nyelve, a közös elemekre:
   lapfej, címek, címke, gombok, kártyák, szakaszok. A `landing.css` és az
   `arculat.css` UTÁN töltődik; ahol azok `!important`-tal döntenek, ott
   ez is azzal, különben a régi nyerne (pontosság-csapda).
   🔑 Csak meglévő tokenek, új szín nincs.
   🔑 Lekerekítés legfeljebb 4 px (a user szabálya): a két nagy token
      itt 4 px-re áll, ez 59 helyen hat egyszerre.
   ============================================================ */

:root {
  --lp-r-lg: 4px;
  --lp-r-xl: 4px;
  --u-cim: 'Bricolage Grotesque', 'Plus Jakarta Sans', system-ui, sans-serif;
  --u-mono: 'JetBrains Mono', ui-monospace, monospace;
}

/* ── Címek: a főoldal címbetűje ── */
body.lp h1, body.lp h2, body.lp .lp-hero-cim {
  font-family: var(--u-cim);
  font-weight: 800;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
body.lp h3 { font-family: var(--u-cim); font-weight: 700; letter-spacing: -0.01em; }
body.lp .lp-hero-cim {
  font-size: clamp(2.1rem, 1.2rem + 2.4vw, 3.6rem);
  line-height: 1.04;
}
body.lp .lp-szek h2, body.lp .lp-zaro h2 {
  font-size: clamp(1.8rem, 1.1rem + 2vw, 3rem);
  line-height: 1.06;
}

/* ── Lapfej: a főoldal fénye ── */
body.lp .lp-hero {
  background:
    radial-gradient(60% 50% at 85% 20%, rgba(251,35,194,.08), transparent 70%),
    radial-gradient(50% 60% at 10% 90%, rgba(201,255,53,.06), transparent 70%);
}

/* ── Címke: keret nélküli, mono, magenta pont ── */
body.lp .lp-kis {
  border: 0; background: none; padding: 0;
  font-family: var(--u-mono); font-size: 0.78rem;
}
body.lp .lp-kis::before { width: 9px; height: 9px; box-shadow: 0 0 0 4px var(--magenta-halk); }

/* ── Gombok ── */
body.lp .lp-btn, body.lp .lp-btn2 {
  min-height: 48px; padding: 0 22px; border-radius: 4px; font-weight: 700;
}
body.lp .lp-btn { box-shadow: none; }
body.lp .lp-btn:hover { box-shadow: none; }
body.lp .lp-btn-nagy { min-height: 52px; padding: 0 26px; font-size: 1rem; }
body.lp .lp-btn:focus-visible, body.lp .lp-btn2:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }

/* ── Kártyák: tiszta keret, a fény-vonal marad ── */
body.lp .lp-kartya:hover, body.lp .tb-kartya:hover {
  box-shadow: none; transform: translateY(-2px);
}

/* ── Szakaszok ── */
/* 2026-10-07, a user: „nagyon nagy térközöket hagy … ekkora nem kell sehol.” Mérve 1280 px-en: két szakasz
   között 200–250 px üres sáv volt. A lapfej alsó párnája az `arculat.css` !important szabálya miatt 96 px volt,
   a keskeny `.ar-fej` saját értéke sosem érvényesült. */
body.lp .lp-szek { padding: clamp(36px, 4vw, 56px) 0; }
body.lp .lp-hero { padding-bottom: clamp(28px, 3.5vw, 52px) !important; }
body.lp .lp-hero.ar-fej { padding-bottom: clamp(8px, 1.2vw, 16px) !important; }
body.lp .lp-hero + .lp-szek { padding-top: clamp(16px, 2vw, 32px); }
body.lp .lp-zaro {
  padding: clamp(44px, 5vw, 72px) 0;
  background: radial-gradient(60% 70% at 50% 100%, rgba(201,255,53,.08), transparent 70%), var(--lp-bg-2);
}
body.lp .lp-zaro::before { display: none; }

/* ── Jogi lapok: a kiemelés a főoldal „havonta” dobozának nyelvén ── */
body.lp .jogi-kiemelt { border-radius: 0 4px 4px 0; }

@media (prefers-reduced-motion: reduce) {
  body.lp .lp-kartya:hover, body.lp .tb-kartya:hover { transform: none; }
}

/* ── hirek.css ── */
/* ══════════════════════════════════════════════════════════════
   weblockai — HÍREK (2026-10-23). A színes rovat: a kártyák felváltva lime,
   magenta és sötét tömbök, a legfrissebb hír végigér a soron.
   Lime és magenta tömbön a szöveg fekete tinta (kontraszt: 15,9 és 6,1).
   ══════════════════════════════════════════════════════════════ */

.hir-racs { display: grid; grid-template-columns: 1fr; gap: clamp(14px, 2vw, 20px); }
@media (min-width: 720px)  { .hir-racs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1160px) { .hir-racs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.hir-racs > .hir-kartya--elso { grid-column: 1 / -1; }

body.lp .hir-kartya {
  border-radius: 16px; overflow: hidden; border: 1px solid transparent;
  transition: transform .16s ease, box-shadow .16s ease;
}
body.lp .hir-kartya:hover { transform: translateY(-3px); box-shadow: 0 24px 48px -28px rgba(0,0,0,.7); }
@media (prefers-reduced-motion: reduce) { body.lp .hir-kartya, body.lp .hir-kartya:hover { transform: none; transition: none; } }

.hir-link { display: flex; flex-direction: column; height: 100%; padding: clamp(22px, 2.6vw, 30px); text-decoration: none; color: inherit; }
.hir-link:focus-visible { outline: 3px solid currentColor; outline-offset: -6px; }

.hir-fej {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 14px;
  margin: 0 0 16px; font-family: 'JetBrains Mono', monospace; font-size: var(--t-0); letter-spacing: .06em;
}
.hir-cimke {
  display: inline-block; padding: 5px 9px; border-radius: 4px;
  font-family: 'JetBrains Mono', monospace; font-size: var(--t-0); font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
}

body.lp .hir-kartya h2 { font-size: clamp(1.45rem, 1.1rem + 1vw, 2rem); margin: 0 0 12px; max-width: none; color: inherit; }
body.lp .hir-kartya p { margin: 0 0 18px; font-size: var(--t-2); line-height: 1.6; flex: 1 1 auto; color: inherit; }
.hir-tovabb { font-size: var(--t-2); font-weight: 700; }

/* a legfrissebb: nagy cím, két hasáb széles szövegsor */
body.lp .hir-kartya--elso h2 { font-size: clamp(2rem, 1.2rem + 3vw, 4.2rem); max-width: 22ch; }
body.lp .hir-kartya--elso p { max-width: 62ch; font-size: var(--t-3, 1.125rem); }
@media (min-width: 1160px) { body.lp .hir-kartya--elso .hir-link { padding: 44px 48px; } }

/* a három szín */
body.lp .hir-kartya--lime    { background: var(--m-lime); color: var(--m-fekete); }
body.lp .hir-kartya--magenta { background: var(--m-magenta); color: var(--m-fekete); }
body.lp .hir-kartya--lime .hir-cimke, body.lp .hir-kartya--magenta .hir-cimke { background: var(--m-fekete); color: var(--m-feher-tort); }
body.lp .hir-kartya--lime time, body.lp .hir-kartya--magenta time { color: var(--m-fekete); font-weight: 500; }
body.lp .hir-kartya--sotet   { background: var(--lp-kartya); border-color: var(--lp-keret); color: var(--lp-szoveg); }
body.lp .hir-kartya--sotet .hir-cimke { background: var(--m-magenta); color: var(--m-fekete); }
body.lp .hir-kartya--sotet time { color: var(--lp-dim); }
body.lp .hir-kartya--sotet p { color: var(--lp-halvany); }
body.lp .hir-kartya--sotet .hir-tovabb { color: var(--m-lime); }

/* a hír lapja: a címke a cím fölött */
body.lp .hir-cikk-fej .hir-fej { justify-content: flex-start; margin-bottom: 14px; }
body.lp .hir-cikk-fej .hir-cimke { background: var(--m-magenta); color: var(--m-fekete); }

/* ── szerzok.css ── */
/* weblockai — szerzők: a cikkek szerző-sora, a szerzők listája és lapja (2026-10-27).
   Portré nincs: betű-monogram. Minden szín a márka-tokenekből jön (arculat.css). */

.szerzo-sor { display: flex; align-items: center; gap: .75rem; margin: .9rem 0 0; font-size: var(--t-1, 1rem); }
.szerzo-szoveg { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .5rem; min-width: 0; }
.szerzo-by { opacity: .75; }
.szerzo-sor a { font-weight: 700; display: inline-block; padding-block: .75rem; margin-block: -.75rem; }
.szerzo-mezo { flex-basis: 100%; font-size: .875em; opacity: .75; }

.szerzo-mon {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  inline-size: 2.75rem; block-size: 2.75rem; border-radius: 50%;
  font-family: 'Anton', 'Inter', sans-serif; font-size: 1.05rem; letter-spacing: .04em; line-height: 1;
}
.szerzo-mon--nagy { inline-size: 4.5rem; block-size: 4.5rem; font-size: 1.7rem; margin-block-end: 1rem; }
.szerzo-mon--lime    { background: var(--m-lime);          color: var(--m-tinta); }
.szerzo-mon--magenta { background: var(--m-magenta-gomb);  color: var(--m-feher); }
.szerzo-mon--navy    { background: var(--m-navy-kartya);   color: var(--m-feher); box-shadow: inset 0 0 0 2px var(--m-lime); }

.szerzo-racs { display: grid; grid-template-columns: 1fr; gap: clamp(14px, 2vw, 20px); }
@media (min-width: 640px)  { .szerzo-racs { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .szerzo-racs { grid-template-columns: repeat(3, 1fr); } }

.szerzo-kartya { border: 1px solid var(--m-szurke-felulet); border-radius: var(--doboz-sarok, 4px); background: var(--m-szurke-hover); }
.szerzo-link { display: flex; flex-direction: column; align-items: flex-start; block-size: 100%; padding: clamp(20px, 2.4vw, 28px); color: inherit; text-decoration: none; min-block-size: 44px; }
.szerzo-link h2 { margin: 0 0 .25rem; font-size: 1.35rem; }
.szerzo-link p { margin: 0 0 .6rem; }
.szerzo-mezo-kartya { font-size: .875rem; color: var(--m-lime); }
.szerzo-db { margin-top: auto; font-size: .875rem; color: var(--m-szurke-halk); }
.szerzo-link:hover .szerzo-db, .szerzo-link:focus-visible .szerzo-db { color: var(--m-lime); }
.szerzo-link:focus-visible { outline: 2px solid var(--m-lime); outline-offset: 2px; }

.szerzo-temak { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 1.25rem 0 2rem; }
.szerzo-temak li { padding: .3rem .75rem; border: 1px solid var(--m-szurke-felulet); border-radius: var(--doboz-sarok, 4px); font-size: .875rem; }

.szerzo-cikkek { list-style: none; padding: 0; margin: 0 0 2rem; }
.szerzo-cikkek li { display: flex; flex-direction: column; gap: .15rem; padding: .75rem 0; border-bottom: 1px solid var(--m-szurke-felulet); }
.szerzo-cikkek li span { font-size: .8125rem; color: var(--m-szurke-halk); }
@media (min-width: 640px) { .szerzo-cikkek li { flex-direction: row; justify-content: space-between; align-items: baseline; gap: 1rem; } }

@media (prefers-reduced-motion: no-preference) {
  .szerzo-kartya { transition: border-color .15s ease; }
  .szerzo-kartya:hover { border-color: var(--m-lime); }
}

/* ── gyik.css ── */
/* weblockai — GYIK a cikkek végén (2026-10-31). Minden szín a márka-tokenekből jön (arculat.css). */

.gyik { margin: 2.5rem 0 0; }
.gyik h2 { margin-block-end: 1rem; }

.gyik-elem { border: 1px solid var(--m-szurke-felulet); border-radius: var(--doboz-sarok, 4px); background: var(--m-szurke-hover); }
.gyik-elem + .gyik-elem { margin-top: .5rem; }

.gyik-elem summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-block-size: 44px; padding: .75rem 1rem; cursor: pointer; font-weight: 700; list-style: none;
}
.gyik-elem summary::-webkit-details-marker { display: none; }
.gyik-elem summary::after { content: '+'; flex: none; font-family: 'JetBrains Mono', monospace; color: var(--m-lime); font-size: 1.25rem; line-height: 1; }
.gyik-elem[open] summary::after { content: '\2212'; }
.gyik-elem summary:focus-visible { outline: 2px solid var(--m-lime); outline-offset: 2px; }

.gyik-elem p { margin: 0; padding: 0 1rem 1rem; }

/* ── plakat.css ── */
/* 🔒 CLAUDE_STABLE - 2026-09-30 - Plakát arculat: 24 lap × 7 szélességen mérve, túlcsordulás és kontraszthiba nincs */
/* ══════════════════════════════════════════════════════════════
   weblockai — „PLAKÁT”: a nyilvános lapok arculata (2026-09-30, a user választása
   három minta közül). Minden nyilvános lapon betöltődik, a lap saját stíluslapja UTÁN.
   A belépő lap Plakátja: a főoldal nyitó szakasza és minden lap záró szakasza lime tömb
   fekete tintával, közte fekete lap. Anton nagybetűs címek. A magenta 10-05 óta a második
   szín (a lap végén, „TÖBB MAGENTA”); az alábbi lime-szabályok egy részét az írja felül.
   ══════════════════════════════════════════════════════════════ */

/* ── KÖZÖS AZ A ARCULATBAN: Anton nagybetűs címek, kerekebb sarkok, a magenta csak a logóban marad ── */
body.lp .u-h1, body.lp .u-h2, body.lp h1, body.lp h2, body.lp .lp-hero-cim {
  font-family: 'Anton', 'Plus Jakarta Sans', system-ui, sans-serif; font-weight: 400;
  text-transform: uppercase; letter-spacing: .006em !important; line-height: 1.13 !important; text-wrap: balance;
}
body.lp .u-h1 { font-size: clamp(2.7rem, 1.1rem + 5.4vw, 6.8rem); }
body.lp .u-h2 { font-size: clamp(2.1rem, 1.1rem + 3.6vw, 4.8rem); }
body.lp h3, body.lp .u-lap h3, body.lp .u-gyik summary { font-family: 'Inter', system-ui, sans-serif; font-weight: 700; letter-spacing: -0.01em !important; }
body.lp .u-szam b, body.lp .u-futo-sor li, body.lp .u-lepes-szam {
  font-family: 'Anton', 'Plus Jakarta Sans', system-ui, sans-serif; font-weight: 400; letter-spacing: .01em; text-transform: uppercase;
}
body.lp .u-lepes-szam { font-size: 1.9rem; line-height: 1; }
body.lp .u-gomb, body.lp .u-gomb2, body.lp .lp-btn, body.lp .lp-btn2 { border-radius: 12px; }
body.lp .u-kartya, body.lp .u-demo, body.lp .u-film, body.lp .ar-doboz { border-radius: 16px; }
body.lp .u-snitt, body.lp .u-ikon, body.lp .u-film-play, body.lp .u-filmsav-gomb { border-radius: 10px; }
body.lp .u-gep { border-radius: 8px; }
body.lp .u-kiemelt { border-radius: 0 12px 12px 0; }
body.lp .u-hero, body.lp .u-zaro { background-image: none; }
body.lp .u-futo-sor li::after { color: var(--lime); }
body.lp .u-pottyok i:first-child { background: var(--lime); }
body.lp .u-gep { color: var(--lime); border-color: rgba(var(--m-lime-rgb),.35); }

:root { --lp-bg: var(--m-fekete); --lp-bg-2: var(--m-sotet-sav); --lp-kartya: var(--m-sotet-doboz); --lp-kartya-2: var(--m-szurke-felulet);
  --lp-keret: #1f242d; --lp-keret-2: var(--m-sotet-vonal); --lp-szoveg: var(--m-feher-tort); --lp-halvany: var(--m-szurke-csendes); --lp-dim: var(--m-szurke-halk); }
body.lp::after { display: none; }

/* a nyitó: lime tömb, fekete tinta */
body.lp .u-hero { background-color: var(--m-lime); color: var(--m-fekete); }
body.lp .u-hero .u-h1, body.lp .u-hero .u-h1 em { color: var(--m-fekete); }
body.lp .u-hero .u-alcim { color: var(--m-fekete); font-weight: 500; }
body.lp .u-hero .u-cimke { background: var(--m-fekete); color: var(--m-lime); padding: 10px 14px; border-radius: 8px; }
body.lp .u-hero .u-rec { background: var(--m-lime); box-shadow: none; }
body.lp .u-hero .u-gomb { background: var(--m-fekete); color: var(--m-lime); }
body.lp .u-hero .u-gomb-ar { border-left-color: rgba(var(--m-lime-rgb),.35); }
body.lp .u-hero .u-gomb2 { color: var(--m-fekete); border: 2px solid var(--m-fekete); }
body.lp .u-hero .u-gomb2:hover { background: var(--m-fekete); color: var(--m-lime); border-color: var(--m-fekete); }
body.lp .u-hero .u-gomb:focus-visible, body.lp .u-hero .u-gomb2:focus-visible { outline-color: var(--m-fekete); }
body.lp .u-hero .u-pipak { color: var(--m-fekete); font-weight: 500; }
body.lp .u-hero .u-pipak li::before { color: var(--m-fekete); }
body.lp .u-demo { background: var(--m-fekete); border-color: var(--m-fekete); color: var(--m-feher-tort); box-shadow: 0 30px 60px -30px rgba(var(--m-fekete-tiszta-rgb),.6); }

body.lp .u-cimke, body.lp .u-szek-cimke { color: var(--m-lime); }
body.lp .u-szek-cimke { font-family: 'Anton', sans-serif; font-size: 1.5rem; letter-spacing: .04em; }
body.lp .u-gepsav { background: var(--m-fekete); }

/* a záró: megint lime tömb (keretbe fogja a lapot) */
body.lp .u-zaro { background-color: var(--m-lime); color: var(--m-fekete); border-top: 0; }
body.lp .u-zaro .u-h2, body.lp .u-zaro .u-vezeto { color: var(--m-fekete); }
body.lp .u-zaro .u-vezeto { font-weight: 500; }
body.lp .u-zaro .ar-doboz { background: var(--m-fekete); border: 0; color: var(--m-feher-tort); box-shadow: 0 30px 60px -30px rgba(var(--m-fekete-tiszta-rgb),.55); }

/* ══ A TÖBBI NYILVÁNOS LAP (2026-09-30, a user a Plakátot választotta) ══ */

/* Az Anton alap-latin készletében nincs ő és ű: a bővített készlet is kell, különben
   a magyar címekben ez a két betű más betűtípusból jön. */
@font-face {
  font-family: 'Anton';
  src: url('/assets/fonts/anton-latin-ext.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
                 U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* lapfej: fekete, a magenta fény nélkül; a címke és a pontja lime */
body.lp .lp-hero { background: none; }
body.lp .lp-hero::before { display: none; }
body.lp .lp-kis { color: var(--m-lime); }
body.lp .lp-kis::before { background: var(--m-lime); color: var(--m-lime); box-shadow: 0 0 0 4px rgba(var(--m-lime-rgb),.16); }
body.lp .lp-szam-jel { color: var(--m-lime); }
body.lp .tb-idezet { border-left-color: var(--m-lime); }
body.lp .bt-ut-mi { border-color: var(--m-lime) !important; }

/* a záró szakasz itt is lime tömb, fekete tintával (mint a főoldalon) */
body.lp .lp-zaro { background: var(--m-lime); color: var(--m-fekete); border-top: 0; }
body.lp .lp-zaro h2, body.lp .lp-zaro h2 em, body.lp .lp-zaro .lp-vezeto { color: var(--m-fekete); }
body.lp .lp-zaro .lp-vezeto { font-weight: 500; }
body.lp .lp-zaro .lp-btn { background: var(--m-fekete); color: var(--m-lime); }
body.lp .lp-zaro .lp-btn2 { background: transparent; color: var(--m-fekete); border: 2px solid var(--m-fekete); }
body.lp .lp-zaro .lp-btn2:hover { background: var(--m-fekete); color: var(--m-lime); }
body.lp .lp-zaro .lp-link, body.lp .lp-zaro .lp-link:hover { color: var(--m-fekete); text-decoration-color: var(--m-fekete); }
body.lp .lp-zaro .lp-link:hover { text-decoration: underline; }
body.lp .lp-zaro .lp-btn:focus-visible, body.lp .lp-zaro .lp-btn2:focus-visible { outline-color: var(--m-fekete); }
body.lp .lp-zaro .ar-doboz, body.lp .lp-zaro .vl-doboz { background: var(--m-fekete); border: 0; color: var(--m-feher-tort); }

/* HÁROM BETŰ A NYILVÁNOS LAPOKON (2026-09-30): Anton (címek, nagy számok), Inter (szöveg),
   JetBrains Mono (adat). A Bricolage Grotesque hat elemfajtán maradt meg, és miattuk 107 KB
   betűfájl töltődött le. Ezek itt átkerülnek a három közül valamelyikre, így a Bricolage
   a nyilvános lapokon már nem töltődik le. (A belső lapok betűit ez nem érinti.) */
:root { --u-cim: 'Inter', system-ui, sans-serif; }
body.lp .u-film-cim, body.lp .tb-idezet, body.lp .tb-tilt-plusz, body.lp .kp-cim {
  font-family: 'Inter', system-ui, sans-serif;
}
body.lp .lp-szam-ertek, body.lp .tb-szamok b {
  font-family: 'Anton', 'Inter', system-ui, sans-serif; font-weight: 400; letter-spacing: .01em;
}
body.lp .tb-szamok b { white-space: nowrap; }   /* a „70–90%” telefonon a gondolatjelnél tört */

/* ══ TÖBB MAGENTA (2026-10-05, a user: „tegyél bele a public designba több magentát,
   mert az most nagyon kevés van”) ══════════════════════════════════════════════
   A lime marad a fő szín (nyitó és záró tömb, a vásárló gomb), a magenta a második:
   címkék, jelölők, a másodlagos gomb, a gépnevek, a lejátszó gomb.
   🔑 Kontraszt: magenta (#fb23c2) a fekete lapon 5,8:1, fekete tinta a magentán 5,8:1,
      mindkettő AA. Fehér szöveg magentán NEM (3,4:1), ezért a magenta gomb tintája fekete. */
body.lp .u-hero .u-cimke { color: var(--m-magenta); }
body.lp .u-hero .u-rec { background: var(--m-magenta); }
body.lp .u-hero .u-gomb2 { background: var(--m-magenta); color: var(--m-fekete); border-color: var(--m-magenta); }
body.lp .u-hero .u-gomb2:hover { background: var(--m-fekete); color: var(--m-magenta); border-color: var(--m-fekete); }
body.lp .u-pottyok i:first-child { background: var(--m-magenta); }
body.lp .u-keres-jel, body.lp .u-jatszik .u-gepel::after { color: var(--m-magenta); }
body.lp .u-gep { color: var(--m-magenta); border-color: rgba(var(--m-magenta-rgb),.45); }
body.lp .u-szek-cimke, body.lp .u-lepes-szam { color: var(--m-magenta); }
body.lp .u-futo-sor li::after { color: var(--m-magenta); }
body.lp .u-kartya:hover, body.lp .u-film:hover, body.lp .u-film:focus-visible { border-color: var(--m-magenta); }
body.lp .u-kartya:nth-child(even) .u-ikon { color: var(--m-magenta); background: rgba(var(--m-magenta-rgb),.12); }
body.lp .u-film-play { background: var(--m-magenta); color: var(--m-fekete); }
body.lp .u-kiemelt { border-left-color: var(--m-magenta); background: rgba(var(--m-magenta-rgb),.08); }
body.lp .lp-nav a:hover { border-bottom-color: var(--m-magenta); }
body.lp .lp-kis { color: var(--m-magenta); }
body.lp .lp-kis::before { background: var(--m-magenta); color: var(--m-magenta); box-shadow: 0 0 0 4px rgba(var(--m-magenta-rgb),.18); }
body.lp .lp-szam-jel { color: var(--m-magenta); }
body.lp .tb-idezet { border-left-color: var(--m-magenta); }
body.lp .u-lepes { border-top-color: var(--m-magenta); }
body.lp .u-szam:nth-child(even) b { color: var(--m-magenta); }
body.lp .u-gyik summary::after { color: var(--m-magenta); }
body.lp .tb-tema { color: var(--m-magenta); }

/* ══ FEHÉR BETŰ MINDEN GOMBON (2026-10-05, a user: „gombokon mindig fehér betűk legyenek
   az egész projektben”) ══════════════════════════════════════════════════════════════
   Lime gombon a fehér nem olvasható (1,1:1), ezért a lime gomb fekete lett, lime kerettel
   (a user választása). Fehér a magentán 3,4:1, ami csak a nagy, vastag betűre AA
   (18,66 px fölött): a magenta gomb felirata ezért 19 px. A lime tömbön az áttetsző
   gomb is fekete, különben a fehér felirat a lime-on állna. */
body.lp .lp-btn, body.lp .lp-skip, body.lp .u-gomb, body.lp .u-hero .u-gomb, body.lp .lp-zaro .lp-btn {
  background: var(--m-fekete); color: var(--m-feher); border: 1px solid var(--m-lime); box-shadow: none;
}
body.lp .lp-btn:hover, body.lp .u-gomb:hover, body.lp .lp-zaro .lp-btn:hover { background: var(--m-szurke-felulet); color: var(--m-feher); }
body.lp .u-gomb-ar, body.lp .u-hero .u-gomb-ar { border-left-color: rgba(var(--m-feher-rgb),.3); }
body.lp .lp-btn2, body.lp .lp-btn2:hover, body.lp .u-gomb2, body.lp .u-gomb2:hover { color: var(--m-feher); }
body.lp .lp-zaro .lp-btn2, body.lp .lp-zaro .lp-btn2:hover { background: var(--m-fekete); color: var(--m-feher); border-color: var(--m-fekete); }
body.lp .u-hero .u-gomb2, body.lp .lp-btn.lt-magenta {
  background: var(--m-magenta); color: var(--m-feher); border-color: var(--m-magenta); font-size: 1.1875rem;
}
body.lp .u-hero .u-gomb2:hover, body.lp .lp-btn.lt-magenta:hover { background: var(--m-fekete); color: var(--m-feher); border-color: var(--m-fekete); }

/* ══ A NYITÓ TÖMB GOMBJAI CSERÉLVE (2026-10-05, a user: „a gombok színét meg kellene cserélni”) ══
   A vásárló gomb magenta (fehér betű, 19 px a 3,4:1 miatt), az „Így dolgozik” fekete. */
body.lp .u-hero .u-gomb { background: var(--m-magenta); color: var(--m-feher); border-color: var(--m-magenta); font-size: 1.1875rem; }
body.lp .u-hero .u-gomb .u-gomb-ar { font-size: 1.1875rem; }
body.lp .u-hero .u-gomb:hover { background: var(--m-fekete); color: var(--m-feher); border-color: var(--m-fekete); }
/* 2026-10-06: 375 px alatt a 19 px-es ár félbetört („from £19 /” és „month” külön sorban): ott két tiszta sor, felül a felirat, alatta egészben az ár. */
@media (max-width: 374px) {
  body.lp .u-hero .u-gomb { flex-direction: column; justify-content: center; gap: 2px; padding: 8px 20px; }
  body.lp .u-hero .u-gomb .u-gomb-ar { border-left: 0; padding-left: 0; white-space: nowrap; }
}
body.lp .u-hero .u-gomb2 { background: var(--m-fekete); color: var(--m-feher); border-color: var(--m-fekete); }
body.lp .u-hero .u-gomb2:hover { background: var(--m-szurke-felulet); color: var(--m-feher); border-color: var(--m-szurke-felulet); }

/* ══ CSOMAGGOMBOK A VÁSÁRLÓ LAPON (2026-10-05, a user: „nem figyelemfelhívóak, lime vagy magenta”) ══
   A Pro magenta (fehér, 19 px), az Alap és a Stúdió teli lime. Lime-on fehér betű 1,1:1,
   ezért ott fekete tinta jár (a user jóváhagyta a dobozban). */
body.lp .vs-csomag .lp-btn { background: var(--m-magenta); color: var(--m-feher); border: 1px solid var(--m-magenta); font-size: 1.1875rem; }
body.lp .vs-csomag .lp-btn:hover { background: var(--m-fekete); color: var(--m-feher); border-color: var(--m-magenta); }
body.lp .vs-csomag .lp-btn2 { background: var(--m-lime); color: var(--m-fekete); border: 1px solid var(--m-lime); font-size: 1.1875rem; }
body.lp .vs-csomag .lp-btn2:hover { background: var(--m-fekete); color: var(--m-lime); border-color: var(--m-lime); }
/* „Tovább a fizetéshez”: tömör magenta (2026-10-05, a user kérése). */
body.lp form[action="/api/fizetes.php"] .lp-btn { background: var(--m-magenta); color: var(--m-feher); border: 1px solid var(--m-magenta); font-size: 1.1875rem; }
body.lp form[action="/api/fizetes.php"] .lp-btn:hover { background: var(--m-fekete); color: var(--m-feher); border-color: var(--m-magenta); }

/* A fejléc „Megveszem” gombja: tömör magenta (2026-10-06, a user kérése). Fehér betű 19 px a 3,4:1 miatt. */
body.lp .lp-fej .lp-btn.lp-fej-vasar { background: var(--m-magenta); color: var(--m-feher); border: 1px solid var(--m-magenta); font-size: 1.1875rem; }
body.lp .lp-fej .lp-btn.lp-fej-vasar:hover { background: var(--m-fekete); color: var(--m-feher); border-color: var(--m-magenta); }
/* 1024 px-en a nagyobb felirattal a fejléc 7 px-lel kilógott: ott szűkebb a gomb. */
@media (min-width: 1024px) and (max-width: 1199px) { body.lp .lp-fej .lp-btn.lp-fej-vasar { padding-inline: 12px; } }

/* ══ NAGYOBB MENÜPONTOK (2026-10-05, a user: „menüpontok lehetnek nagyobbak”) ══
   15 helyett 17 px, a mobilmenüben is. A „Gyakori kérdések” eddig is két sorba tört
   1024 px alatt, és 860–900 px között a fejléc kilógott: ott már a mobilmenü-gomb jön. */
/* 2026-10-07, a user: „a menü betűmérete mindenhol legyen azonos a Megveszem gombon lévő mérettel” → 19 px (1.1875rem). */
body.lp .lp-nav a, body.lp .lp-fej .lp-link, body.lp .lp-mob-lap a { font-size: 1.1875rem; white-space: nowrap; }
/* 2026-10-07: 19 px-es menüvel a négy pont magyarul 1140 px-től fér ki (mérve), ezért 1152 alatt jön a menügomb. */
@media (max-width: 1151px) {
  body.lp .lp-mob { display: block; }
  body.lp .lp-nav, body.lp .lp-fej .lp-link, body.lp .lp-fej-zaszlok { display: none; }
  body.lp .lp-sav { justify-content: space-between; }
  body.lp .lp-logo { margin-right: auto; }
}

/* 320 px-en a fejléc 11 px-lel kilógott (a minta előtt is): szűkebb gomb és térköz */
@media (max-width: 359px) {
  body.lp .lp-sav { gap: 8px; }
  body.lp .lp-fej-jobb { gap: 6px; }
  body.lp .lp-fej .lp-btn { padding: 0 12px; font-size: .86rem; }
}

/* 2026-10-06: a fejléc minden linkje legalább 44 px magas célterület (a menüpontok 43, a logó és a Belépés 41, a zászló 34 px volt).
   A display csak 1024 px felett: alatta a Belépés rejtve van, és az inline-flex újra megjelenítené (375 px-en 29 px kilógás). */
body.lp .lp-fej .lp-logo { min-height: 44px; }
@media (min-width: 1152px) {
  body.lp .lp-nav a, body.lp .lp-fej .lp-link { display: inline-flex; align-items: center; min-height: 44px; }
  body.lp .lp-fej-zaszlok > a, body.lp .lp-fej-zaszlok > span { height: 44px; }
  /* 2026-10-06 este: szélességben is 44 (a zászló 40, a .hu „Árak” 42 px volt). */
  body.lp .lp-nav a, body.lp .lp-fej .lp-link, body.lp .lp-fej-zaszlok > a, body.lp .lp-fej-zaszlok > span { min-width: 44px; justify-content: center; }
}

/* 2026-10-06: zárt boltnál az angol „Tell me when it launches” gomb 1024 px-en 87, 1100 px-en 25 px-lel kitolta a fejlécet:
   ott 1200 px alatt már a menügomb jön. */
@media (max-width: 1199px) {
  body.lp .lp-fej--zart .lp-mob { display: block; }
  body.lp .lp-fej--zart .lp-nav, body.lp .lp-fej--zart .lp-link, body.lp .lp-fej--zart .lp-fej-zaszlok { display: none; }
  body.lp .lp-fej--zart .lp-sav { justify-content: space-between; }
  body.lp .lp-fej--zart .lp-logo { margin-right: auto; }
}
/* Telefonon ugyanez a gomb 375 px-en 60, 320 px-en 52 px-lel lógott ki: ott két sorba törhet. */
@media (max-width: 479px) {
  body.lp .lp-fej--zart .lp-fej-jobb .lp-btn { white-space: normal; line-height: 1.1; text-align: center; max-width: 8.5rem; min-height: 44px; height: auto; padding: 4px 10px; }
}

/* 2026-11-11, a user: „NEM LEHET TÖRT SOR. SEHOL!” A lábléc linkjei és a szövegbe ágyazott rövid linkek egyben maradnak:
   ha nem férnek a sor végére, egészben ugranak a következő sorba. */
body.lp .lp-lab-oszlop nav a, body.lp :is(.u-pipak, .u-higgs) a{ white-space: nowrap; }

/* ── Egysoros felirat minden nyilvános lapon (2026-11-11, a user „mehet”-je a címjavításra) ──
   A `.cf` span-t a `wlai_cf()` / `wlai_cf_szuro()` (`_publikus.php`) teszi a címekre: a betű a doboz szélességéhez kicsinyedik,
   legfeljebb a saját méretéig, legalább 15 px (`--cmin`); ha így sem fér: „…”, a teljes szöveg a `title`-ben.
   `--cn` = karakterszám, `--ck` = egy betű átlagos szélessége em-ben, a 64 lapon mérve (2026-11-11): a nagybetűs Space Grotesk
   címek .54–.59, az Inter .50–.57, a nagybetűs JetBrains Mono .66. Az alap .6: inkább kicsit kisebb, mint „…”. */
:has(> .cf){ container-type: inline-size; }
.cf{ display: inline-block; vertical-align: top; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  font-size: max(min(1em, var(--cmin, .9375rem)), min(1em, calc(100cqi / (var(--cn) * var(--ck, .6))))); }
body.lp summary > .cf{ --ck: .58; }
body.lp .ar-alcim2 > .cf{ --ck: .67; }
body.lp .jogi-tj a:has(> .cf){ display: block; }
body.lp .jogi-tj a > .cf{ --ck: .56; }

/* Flex-gyerek konténernél a szélesség tartalomfüggő lenne (összeesik): kifeszítjük. */
body.lp .szerzo-link h2:has(> .cf){ align-self: stretch; }
body.lp .ar-doboz-fej .ar-nev:has(> .cf){ flex: 1 1 auto; min-width: 0; }
/* Táblafej és jogi link-gomb egy sorban; a tábla doboza úgyis görgethető. */
body.lp table th{ white-space: nowrap; }
body.lp .jogi-link{ white-space: nowrap; font-size: min(1em, 4.1vw); }
/* Szerzői lap cikklistája: a cikkcím-link egy sorban, ha nem fér, „…” (a teljes cím a cikk lapján). */
body.lp .szerzo-cikkek li a{ display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── profil.css ── */
/* weblockai — belépett profil a fejlécben + a köszönő lap „Így tovább” doboza (2026-10-06).
   Külön fájl, mert a plakat.css STABLE; a plakat.css UTÁN töltődik. */
/* ══ BELÉPVE: SZÖRNYECSKE + NÉV A FEJLÉCBEN (2026-10-06, a user: „egyértelmű legyen, hogy be vagyok lépve,
   olyan szörnyecskékkel, mint a podomedicnél”). A „Fiókom” gomb helyén áll, ugyanabba a Műhelybe visz. ══ */
body.lp .lp-profil {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; max-width: 15rem;
  padding: 4px 14px 4px 4px; border: 1px solid var(--m-lime); border-radius: 12px;
  background: var(--m-fekete); color: var(--m-feher); text-decoration: none;
}
body.lp .lp-profil:hover { background: var(--m-szurke-felulet); color: var(--m-feher); }
body.lp .lp-profil:focus-visible { outline: 2px solid var(--m-lime); outline-offset: 3px; }
body.lp .lp-szorny { display: block; flex: none; width: 36px; height: 36px; }
body.lp .lp-profil-szoveg { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
body.lp .lp-profil-szoveg small { display: flex; align-items: center; gap: 5px; font-size: .75rem; font-weight: 600; color: var(--m-lime); }
body.lp .lp-profil-szoveg small::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--m-lime); }
body.lp .lp-profil-szoveg b { max-width: 9rem; overflow: hidden; font-size: .95rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 479px) {
  body.lp .lp-profil { gap: 8px; padding-right: 10px; }
  body.lp .lp-szorny { width: 32px; height: 32px; }
  body.lp .lp-profil-szoveg b { max-width: 5.5rem; }
}
@media (max-width: 359px) { body.lp .lp-profil-szoveg b { max-width: 4.25rem; } }

/* ══ KÖSZÖNŐ LAP: „ÍGY TOVÁBB” (2026-10-06, a user: „nem egyértelmű, mire kell kattintanom”) ══
   Három számozott lépés és egy fő gomb az ügyfélkapuba. */
body.lp .ko-tovabb {
  max-width: 560px; margin: 0 auto 22px; padding: clamp(18px, 4vw, 26px);
  text-align: left; background: var(--m-sotet-sav); border: 1px solid var(--m-lime); border-radius: 12px;
}
body.lp .ko-tovabb h2 { margin: 0 0 14px; font-size: clamp(1.5rem, 4vw, 2rem); }
body.lp .ko-tovabb ol { display: grid; gap: 14px; margin: 0 0 20px; padding: 0; list-style: none; }
body.lp .ko-tovabb li { display: flex; gap: 12px; align-items: flex-start; min-width: 0; }
body.lp .ko-szam {
  display: inline-flex; flex: none; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 4px; background: var(--m-lime); color: var(--m-fekete); font-weight: 800;
}
body.lp .ko-tovabb li > span:last-child { display: grid; gap: 2px; min-width: 0; color: var(--lp-halvany); font-size: var(--t-2); line-height: 1.5; overflow-wrap: anywhere; }
body.lp .ko-tovabb li b { color: var(--m-feher); font-size: var(--t-3); }
body.lp .ko-tovabb .lp-btn { width: 100%; white-space: normal; text-align: center; }
/* 2026-10-07, a user: „a teli lime vagy magenta gomb egér alatt vagy kattintáskor csak keret lett, az is legyen teli”.
   A plakat.css (STABLE) fekete hovere helyett: teli marad, egy árnyalattal sötétebb. */
body.lp :is(.u-hero .u-gomb, .lp-btn.lt-magenta, .vs-csomag .lp-btn, form[action="/api/fizetes.php"] .lp-btn, .lp-fej .lp-btn.lp-fej-vasar):is(:hover, :active) {
  background: var(--m-magenta-kozep); color: var(--m-feher); border-color: var(--m-magenta-kozep);
}
body.lp .vs-csomag .lp-btn2:is(:hover, :active) { background: var(--m-lime-vilagos); color: var(--m-fekete); border-color: var(--m-lime-vilagos); }
/* 2026-10-06, a user: „ha ráhúzom az egeret, a gomb legyen lime” (a plakat.css fekete hovere helyett). */
body.lp .ko-tovabb .lp-btn.lt-magenta:hover { background: var(--m-lime); color: var(--m-fekete); border-color: var(--m-lime); }
/* 2026-10-07: a letöltés a fő gomb, az ügyfélkapu alatta körvonalas második. */
body.lp .ko-tovabb .lp-btn.ko-masod { margin-top: 18px; background: transparent; color: var(--m-lime); border: 1px solid var(--m-lime); }
body.lp .ko-tovabb .lp-btn.ko-masod:hover { background: var(--m-lime); color: var(--m-fekete); }
body.lp .ko-apro { margin: 12px 0 0; color: var(--lp-dim); font-size: var(--t-1); line-height: 1.5; }
/* Belépve a profil szélesebb a „Fiókom” gombnál: mérve 1280 px alatt kitolta a fejlécet, ezért 1360 alatt a menügomb jön. */
/* 2026-10-07, a user: „a logó mellé kérem a menüt”: 19 px-es menüvel mérve 1140 px-től fér ki, a leghosszabb névvel (9rem) 1256-tól. */
/* 2026-10-07, hibakereső kör, mérve: 360–374 px között a fejléc 8 px-lel kilógott (a 19 px-es „Megveszem” óta);
   a plakat.css szűkítése csak 359 px-ig tart. A betűméret marad (kontraszt), a térköz és a belső margó szűkül. */
@media (min-width: 360px) and (max-width: 374px) {
  body.lp .lp-sav { gap: 6px; }
  body.lp .lp-fej-jobb { gap: 4px; }
  body.lp .lp-fej .lp-btn.lp-fej-vasar { padding-inline: 9px; }
}
/* 2026-10-07, mérve: a morzsa „Főoldal” linkje 23 px magas volt; érintőképernyőn legalább 44 px. */
@media (max-width: 1023px) {
  body.lp .lp-morzsa a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
}
/* 2026-10-07, mérve: a cikk végi Források linkjei 34 px magasak voltak. */
body.lp .tb-forrasok ol { gap: 0; }
body.lp .tb-forrasok li a { padding: 11px 0; min-height: 44px; }
/* 2026-10-07, mérve: a tartalomjegyzék sorai (ÁSZF, adatvédelem, cikkek) 33 px magasak voltak, a csomaglink a vásárlás lapon 16 px.
   A sorköz a linkbe kerül át, így a lista alig nyúlik. */
body.lp .jogi-tj ol { gap: 0; }
body.lp .jogi-tj a { min-height: 44px; padding: 10px 0; }
body.lp .vs-apro a[href="#mit-kapsz"] { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 1279px) {
  body.lp .lp-fej--belepve .lp-mob { display: block; }
  body.lp .lp-fej--belepve .lp-nav, body.lp .lp-fej--belepve .lp-link, body.lp .lp-fej--belepve .lp-fej-zaszlok { display: none; }
  body.lp .lp-fej--belepve .lp-sav { justify-content: space-between; }
  body.lp .lp-fej--belepve .lp-logo { margin-right: auto; }
}

/* ── egyseges.css ── */
/* ══ EGYSÉGES FELÜLET (2026-11-09, a user: „ennek a mintájára az összes oldalt építsd át … nem vész el semmi,
   csak kicsit megszépül”). Minta: ~/Claude/_elonezet/belso-minta/ (jóváhagyva: „csodás”).
   Csak kinézet: a lapok működése, szövege és sorrendje nem változik. Minden lap UTOLSÓ stíluslapja
   (belső: `wlai_head()`, nyilvános: `_publikus.php`), a Hollywood Box lapjain NEM töltődik be.
   Sok régi szabály `:root:root … !important`, ezért itt `:root:root:root` + `!important`.

   GOMB = a fejléc Platform gombja (`_platform_fulek.php` pf_bar_gomb): 32 px magas, 0 12px, sarok 10,
   Inter 700 / 12,5 px, 1 px keret. A tapintható terület a láthatatlan ::after-rel 44 px (mint ott).
   DOBOZ: külső 16, benne ülő elem 12 (a Higgsfield-kártyák aránya, saját színekkel). */

:root{
  --gomb-mag: 32px; --gomb-sarok: 10px; --gomb-pad: 0 12px; --gomb-keret: 1px;
  --gomb-betu-meret: .8125rem; --gomb-betu-suly: 700; /* 2026-11-10: 12,5 → 13 px, a betűskála „s” lépcsője */
  --doboz-sarok: 16px; --belso-sarok: 12px;
  --egy-doboz-bg: var(--m-sotet-doboz); --egy-belso-bg: var(--m-szurke-felulet); --egy-belso-hover: var(--m-sotet-aktiv);
  --egy-vonal: rgba(var(--m-feher-rgb),.07); --egy-vonal-2: rgba(var(--m-feher-rgb),.12);
  --egy-szoveg: var(--m-feher-tort); --egy-halk: var(--m-szurke-halk); --egy-halk-2: var(--m-szurke-kozep);
  --egy-masod-bg: rgba(var(--m-feher-rgb),.06); --egy-masod-hover: rgba(var(--m-feher-rgb),.11);
  --egy-veszely: var(--m-piros-halvany); --egy-veszely-bg: rgba(252,165,165,.1); --egy-veszely-hover: rgba(252,165,165,.18);
  --egy-szel: clamp(16px, 2.5vw, 40px);
}

/* ── 1. GOMBOK: egy forma mindenhol ── */
:root:root:root :is(.wg, .btn, .tool-btn, .copy-btn, .ai-btn, .auth-btn, .kedv-btn, .ment-btn, .lept-btn,
  .proj-torol-btn, .sec-mini, .mh-mod-gomb, .ms-ai-gomb, .tbl-torol, .elof-gomb, .kl-gomb, .dont-gomb, .kp-tag-gomb,
  .lp-btn, .lp-btn2, .lp-btn-nagy, .u-gomb, .u-gomb2, .tb-aipay, .bar-uj, .rb-gomb, .wh-csuk, .menu-btn,
  .kedv-x, .btn--icon, .wlai-suti-igen, .wlai-suti-nem):not(.um-nyit){
  box-sizing: border-box !important;
  height: var(--gomb-mag) !important; min-height: var(--gomb-mag) !important;
  padding: var(--gomb-pad) !important;
  border-width: var(--gomb-keret) !important; border-radius: var(--gomb-sarok) !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: var(--gomb-betu-meret) !important; font-weight: var(--gomb-betu-suly) !important;
  line-height: 1 !important; letter-spacing: .01em !important;
  gap: .45em !important; white-space: nowrap; box-shadow: none !important;
}
/* A nyitó gomb ára (főoldal: „Megveszem | 4 900 Ft-tól / hó”) a gomb betűjével, külön elválasztva. */
:root:root:root .u-gomb .u-gomb-ar{ font-size: inherit !important; line-height: 1 !important; padding: 0 0 0 .55em !important; margin: 0 !important; }
/* A nyilvános fejléc telefonos menügombja: 32 px, mint a többi ikongomb. */
:root:root:root .lp-mob > summary{ width: var(--gomb-mag) !important; height: var(--gomb-mag) !important; border-radius: var(--gomb-sarok) !important; }
/* A piacajánló sáv („Go to weblockaistudio.com”, `_publikus.php`) gombja és bezárója. */
:root:root:root .lp-piacsav a{
  min-height: var(--gomb-mag) !important; height: var(--gomb-mag); padding: 0 12px !important;
  border-radius: var(--gomb-sarok) !important; font: 700 var(--gomb-betu-meret)/1 'Inter', system-ui, sans-serif !important;
  white-space: nowrap;
}
:root:root:root .lp-piacsav button{ width: var(--gomb-mag) !important; height: var(--gomb-mag) !important; border-radius: var(--gomb-sarok) !important; }
/* Csak ikon: négyzet. */
/* 2026-11-10: a `:not(.um-nyit)` kell, különben az 1. rész (0,5,0) nyer, a négyzet 12-12 px belső margót kap, és az ikonnak 6 px marad
   (a jobb sáv téma-kapcsolója ezért volt „miniatűr”). */
:root:root:root :is(.rb-gomb, .wh-csuk, .menu-btn, .kedv-x, .btn--icon, .proj-torol-btn):not(.um-nyit){
  width: var(--gomb-mag) !important; min-width: var(--gomb-mag) !important; padding: 0 !important;
}
:root:root:root :is(.wg, .btn, .tool-btn, .copy-btn, .ai-btn, .auth-btn, .kedv-btn, .ment-btn, .lept-btn,
  .proj-torol-btn, .sec-mini, .mh-mod-gomb, .ms-ai-gomb, .rb-gomb, .wh-csuk, .menu-btn, .lp-btn, .lp-btn2, .u-gomb, .u-gomb2) .i{
  width: 1rem !important; height: 1rem !important;
}
/* 44 px-es tapintható terület (a pozíciót a lap saját szabálya felülírhatja, ezért :where). */
:where(.wg, .btn, .tool-btn, .copy-btn, .ai-btn, .auth-btn, .kedv-btn, .ment-btn, .lept-btn, .sec-mini, .mh-mod-gomb,
  .ms-ai-gomb, .lp-btn, .lp-btn2, .u-gomb, .u-gomb2, .rb-gomb, .menu-btn, .btn--icon):not(.um-nyit){ position: relative; }
:where(.wg, .btn, .tool-btn, .copy-btn, .ai-btn, .auth-btn, .kedv-btn, .ment-btn, .lept-btn, .sec-mini, .mh-mod-gomb,
  .ms-ai-gomb, .lp-btn, .lp-btn2, .u-gomb, .u-gomb2, .rb-gomb, .menu-btn, .btn--icon):not(.um-nyit)::after{
  content: ""; position: absolute; inset: -6px -2px;
}

/* Színek a sötét felületen (a minta szerint): fő = lime, második szint = semleges, figyelj/fizess = magenta,
   törlés = halvány piros. A világos téma a régi szabályaival marad. */
:root:root:root:not([data-theme="light"]) :is(.wg--fekete, .wg--korvonal, .copy-btn, .tool-btn:not(.aik-torol):not(.mf-torol),
  .btn--secondary, .btn--ghost, .btn--dark, .sec-mini, .kedv-btn, .mh-mod-gomb:not(.aktiv), .lept-btn:not(.fo),
  button.btn:not([class*="btn--"]), a.btn:not([class*="btn--"]), .rb-gomb, .wh-csuk, .menu-btn, .kedv-x){
  background: var(--egy-masod-bg) !important; color: var(--egy-szoveg) !important; border-color: transparent !important;
}
:root:root:root:not([data-theme="light"]) :is(.wg--fekete, .wg--korvonal, .copy-btn, .tool-btn:not(.aik-torol):not(.mf-torol),
  .btn--secondary, .btn--ghost, .btn--dark, .sec-mini, .kedv-btn, .mh-mod-gomb:not(.aktiv), .lept-btn:not(.fo),
  button.btn:not([class*="btn--"]), a.btn:not([class*="btn--"]), .rb-gomb, .wh-csuk, .menu-btn, .kedv-x):hover{
  background: var(--egy-masod-hover) !important; color: var(--egy-szoveg) !important;
}
:root:root:root:not([data-theme="light"]) :is(.rb-gomb, .wh-csuk, .menu-btn, .kedv-x) .i{ color: inherit !important; }
:root:root:root:not([data-theme="light"]) :is(.wg--torol, .btn--danger, .tbl-torol, .proj-torol-btn, .tool-btn.aik-torol, .tool-btn.mf-torol){
  background: var(--egy-veszely-bg) !important; color: var(--egy-veszely) !important; border-color: transparent !important;
}
:root:root:root:not([data-theme="light"]) :is(.wg--torol, .btn--danger, .tbl-torol, .proj-torol-btn, .tool-btn.aik-torol, .tool-btn.mf-torol):hover{
  background: var(--egy-veszely-hover) !important; color: var(--egy-veszely) !important;
}
:root:root:root :is(.wg, .btn, .tool-btn, .copy-btn, .ai-btn, .auth-btn, .kedv-btn, .ment-btn, .lept-btn, .sec-mini,
  .mh-mod-gomb, .ms-ai-gomb, .rb-gomb, .wh-csuk, .menu-btn, .lp-btn, .lp-btn2, .u-gomb, .u-gomb2):focus-visible{
  outline: 2px solid var(--m-lime) !important; outline-offset: 2px !important;
}

/* ── 2. DOBOZOK ── */
:root:root:root :is(.doboz, .kartya){ border-radius: var(--doboz-sarok) !important; }
:root:root:root :is(.doboz, .kartya) :is(.doboz, .kartya){ border-radius: var(--belso-sarok) !important; }
:root:root:root:not([data-theme="light"]) body:not(.lp) :is(.doboz, .kartya):not([class*="doboz--"]):not([class*="kartya--"]){
  background: var(--egy-doboz-bg) !important; border: 1px solid var(--egy-vonal) !important;
}
:root:root:root:not([data-theme="light"]) body:not(.lp) :is(.doboz, .kartya) :is(.doboz, .kartya):not([class*="doboz--"]):not([class*="kartya--"]){
  background: var(--egy-belso-bg) !important; border-color: transparent !important;
}

/* ── 3. MEZŐK (belső lapokon): a gombbal egy sorban, egy magasság ── */
:root:root:root body:not(.lp) :is(input:is([type="text"], [type="email"], [type="password"], [type="number"], [type="url"],
  [type="search"], [type="tel"], [type="date"], [type="time"], :not([type])), select):not(.jszem-mezo){
  height: var(--gomb-mag) !important; min-height: var(--gomb-mag) !important;
  padding-top: 0 !important; padding-bottom: 0 !important; font-size: .8125rem !important;
  border-radius: var(--gomb-sarok) !important;
}
:root:root:root body:not(.lp) textarea{ border-radius: var(--belso-sarok) !important; }

/* ── 4. FEJLÉC: teljes szélesség, Inter menü ── */
:root:root:root .lp-fej{ font-family: 'Inter', system-ui, sans-serif; }
:root:root:root .lp-sav{ max-width: none !important; padding: 0 var(--egy-szel) !important; }
:root:root:root .lp-nav{ gap: 2px !important; }
/* 2026-11-09, a user: „felső menüt tedd középre úgy, ahogy hely van.” A logó és a jobb oldali eszközök közti szabad sáv közepére. */
@media (min-width: 1152px){
  :root:root:root .lp-nav{ flex: 1 1 auto; justify-content: center; margin-right: 0 !important; }
}
:root:root:root .lp-nav a{
  font-family: 'Inter', system-ui, sans-serif !important; font-size: .875rem !important; font-weight: 500 !important;
  letter-spacing: 0 !important; color: var(--m-szurke-halk) !important;
  display: inline-flex !important; align-items: center !important; min-height: 34px !important; height: 34px;
  padding: 0 12px !important; border: 0 !important; border-radius: 8px !important;
}
:root:root:root .lp-nav a:hover{ color: var(--egy-szoveg) !important; background: rgba(var(--m-feher-rgb),.05); }
:root:root:root .lp-nav a[aria-current]{ color: var(--m-lime) !important; }
:root:root:root .lp-fej .lp-btn{ font-size: var(--gomb-betu-meret) !important; }
:root:root:root .lp-mob-lap a{ font-family: 'Inter', system-ui, sans-serif !important; font-size: 1rem !important; font-weight: 500 !important; }

/* ── 5. BAL SÁV ── */
:root:root:root .oldalsav{ font-family: 'Inter', system-ui, sans-serif; }
:root:root:root .oldalsav :is(.sav-pont, .sav-lepes, .wh-al-elem){
  font-family: 'Inter', system-ui, sans-serif !important; font-size: .875rem !important; font-weight: 500 !important;
  letter-spacing: 0 !important; border-radius: var(--belso-sarok) !important;
}
:root:root:root .wh-menu .sav-pont{ min-height: 38px !important; padding-top: 0 !important; padding-bottom: 0 !important; }
/* 2026-11-11, a user („valami a menüvel nem stimmel”): a fakó szürke helyett világosabb szöveg és ikon (sötét témán). */
:root:root:root:not([data-theme="light"]) .wh-menu .sav-pont:not(.itt), :root:root:root:not([data-theme="light"]) .wh-menu .sav-pont:not(.itt) .lep-ikon{ color: #c9d1da !important; }
/* 2026-11-11, a user: „nagyon szét van húzva … igazítsd el normálisan”. Egérrel 32 px-es sor, szűkebb csoportcím;
   érintőképernyőn marad a 38 px (ujjnyi hely). */
@media (pointer: fine){
  :root:root:root .oldalsav .wh-menu{ gap: 1px !important; }
  :root:root:root .wh-menu .sav-pont{ min-height: 32px !important; }
  :root:root:root .wh-menu .sav-pont--elval{ margin-top: .25rem !important; padding-top: 0 !important; }
  :root:root:root .oldalsav .wh-menu-cim{ margin: .625rem 0 .125rem !important; }
}
:root:root:root .oldalsav .wh-menu-cim{
  font-family: 'Inter', system-ui, sans-serif !important; font-size: .6875rem !important; font-weight: 600 !important;
  letter-spacing: .08em !important;
}

/* ── 6. PLATFORM FÜLSOR (`_platform_fulek.php`, a lap saját <style>-ja után) ── */
:root:root:root .pf-sor{ flex-wrap: wrap !important; overflow: visible !important; }
:root:root:root .pf-sor-cs{
  width: fit-content; max-width: 100%; gap: 6px !important; padding: 4px !important;
  background: var(--egy-doboz-bg); border: 1px solid var(--egy-vonal); border-radius: var(--doboz-sarok);
}
:root:root:root[data-theme="light"] .pf-sor-cs{ background: var(--m-vilagos-sav); border-color: var(--m-vilagos-vonal); }
:root:root:root .pf-fulsor :is(.pf-cs, .pf-lap, .pf-al){
  box-sizing: border-box; height: var(--gomb-mag) !important; min-height: var(--gomb-mag) !important;
  font-family: 'Inter', system-ui, sans-serif !important; font-weight: 500 !important; letter-spacing: 0 !important;
}
:root:root:root .pf-fulsor .pf-cs{
  padding: 0 14px !important; border: 0 !important; border-radius: var(--belso-sarok) !important;
  background: transparent !important; color: var(--pf-ink3) !important; font-size: .875rem !important;
}
:root:root:root .pf-fulsor .pf-cs:hover{ color: var(--pf-ink) !important; }
:root:root:root .pf-fulsor .pf-cs.on{ background: var(--egy-belso-hover) !important; color: var(--egy-szoveg) !important; }
:root:root:root[data-theme="light"] .pf-fulsor .pf-cs.on{ background: var(--m-feher) !important; color: var(--m-fekete-mely) !important; }
:root:root:root .pf-sor-lap{ background: none !important; border: 0 !important; padding: 0 !important; gap: 4px !important; }
:root:root:root .pf-fulsor :is(.pf-lap, .pf-al){
  padding: 0 12px !important; border: 0 !important; border-radius: var(--gomb-sarok) !important;
  background: transparent !important; color: var(--pf-ink3) !important; font-size: .8125rem !important;
}
:root:root:root .pf-fulsor :is(.pf-lap, .pf-al):hover{ background: rgba(var(--m-feher-rgb),.05) !important; color: var(--pf-ink) !important; }
:root:root:root .pf-fulsor :is(.pf-lap, .pf-al).on{ background: rgba(var(--m-lime-rgb),.12) !important; color: var(--m-lime) !important; }
:root:root:root[data-theme="light"] .pf-fulsor :is(.pf-lap, .pf-al).on{ background: var(--m-lime) !important; color: var(--m-fekete) !important; }

/* ── 7. JOBB SÁV ── */
:root:root:root .jobbsav{ gap: 6px; }

/* ── 8. JOGI SOR a Profil panel alján (2026-11-09: a belső lapokon nincs lábléc) ── */
.wh-jogi{ display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 12px 14px 4px; border-top: 1px solid var(--egy-vonal, rgba(var(--m-feher-rgb),.07)); margin-top: 8px; }
.wh-jogi a{ font: 500 .75rem/1.6 'Inter', system-ui, sans-serif; color: var(--text-muted, #7c8591); text-decoration: none; }
.wh-jogi a:hover{ color: var(--text, #fff); text-decoration: underline; }

/* ── 9. FILMTERVEZŐ: 2026-11-09 óta a film.php saját .fx-tömbje adja a méreteket (tokenekkel), itt nincs felülírás. ── */

/* ── 10. A LAPOK SAJÁT ELEMEI: 2026-11-09 óta a lapok saját szabályai adják a méreteket (tokenekkel), itt nincs felülírás. ── */

/* ── 11. ALCÍMEK BETŰJE: Space Grotesk (2026-11-09, a user a Higgsfield-feliratot mutatta: „ezt a betűtípust használhatod
   mindenhol, ahol indokolt”). A belső lapok al-, doboz- és szakaszcímei eddig Inter 700 (arculat-a.css) és Plus Jakarta
   Sans 800 (.sec-label) voltak. A nagy, nagybetűs Anton főcím, a folyószöveg (Inter) és a gombok maradnak.
   A betű a saját szerverről jön (OFL licenc), a latin-ext a magyar ő és ű miatt kell. */
@font-face{ font-family: 'Space Grotesk'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url(/assets/fonts/space-grotesk-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face{ font-family: 'Space Grotesk'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url(/assets/fonts/space-grotesk-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root{ --font-alcim: 'Space Grotesk', 'Inter', system-ui, sans-serif; }
:root:root:root body:not(.lp) :is(h2, h3, h4):not(.md-lap > h2),
:root:root:root body:not(.lp) :is(.sec-label, .hb-doboz-fej b),
/* 2026-11-10, a user („volt egy utasításom a rendszerben lévő összes ilyen betűtípussal kapcsolatban”): a nagy, vastag
   számok és nevek is ugyanezt kapják, és mind a Higgsfield-cím mintája: csupa nagybetű, szoros betűköz, a saját színével. */
:root:root:root body:not(.lp) :is(.aik-ossz-szam b, .aik-szam b, .akt-mai b, .auk-nev b, .vv-csomag b, .adm-szam b){ font-family: var(--font-alcim) !important; font-weight: 700 !important; letter-spacing: -0.03em !important; text-transform: uppercase !important; }

/* ── 12. NINCS TÖRT FELIRAT (2026-11-10, a user: „nem akarok ilyen tört sorokat látni sehol a rendszerben”).
   Mérve: 631 tört felirat, ebből 349 a választócsempéken. Cím, címke, csempe-felirat egy sorban; ami így sem fér ki,
   annak a vége „…” (a teljes szöveg a title-ben, _kozos.php). A folyó szöveg (bekezdés, lista, táblázatcella) tördelődhet.
   A 40 karakternél hosszabb mondat (Hook-ötlet, hosszú mezőcímke, dokumentáció alcíme) is folyó szöveg: a _kozos.php
   `data-folyo`-val jelöli, az tördelődik, nem vágjuk le (mérve 11-10: a levágás tartalmat vitt el). ── */
:root:root:root body:not(.lp) :is(h2, h3, h4, .sec-label, label, th, summary, .adm-szam > :is(em, span)):not(.md-lap > h2):not(:has(input, select, textarea, img)):not([data-folyo]){ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
/* A választócsempék a szövegükhöz igazodnak és kitöltik a sort: nincs tört felirat, nincs magányos vagy teljes szélességű csempe. */
:root:root:root body:not(.lp) .opts:not(.media):not(.elonezetes):not(:has(.elonez, .opt-thumb)){ display: flex !important; flex-wrap: wrap; }
:root:root:root body:not(.lp) .opts:not(.media):not(.elonezetes):not(:has(.elonez, .opt-thumb)) > .opt{ flex: 1 1 auto; min-width: 0; max-width: 100%; }
:root:root:root body:not(.lp) .opts:not(.media):not(.elonezetes):not(:has(.elonez, .opt-thumb)) > :not(.opt){ flex: 1 1 100%; }
/* Az utolsó sor csempéi ne nyúljanak ki a teljes szélességre: egy láthatatlan töltelék nyeli el a maradék helyet. */
:root:root:root body:not(.lp) .opts:not(.media):not(.elonezetes):not(:has(.elonez, .opt-thumb))::after{ content: ""; flex: 999 1 0; min-width: 0; }
@media (max-width: 560px){ :root:root:root body:not(.lp) .opts:not(.media):not(.elonezetes):not(:has(.elonez, .opt-thumb))::after{ display: none; } :root:root:root body:not(.lp) .opts:not(.media):not(.elonezetes):not(:has(.elonez, .opt-thumb)) > .opt{ flex-basis: 100%; } }
/* Képes csempe: kötött rács marad, de olyan széles oszlopokkal, hogy a felirata elférjen. */
:root:root:root body:not(.lp) .opts:is(.media, .elonezetes, :has(.elonez, .opt-thumb)){ grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)) !important; }
:root:root:root body:not(.lp) .opt > :is(strong, b, span, em):not(.opt-jel):not([data-folyo]){ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
/* A Filmtervező csempéjében a leírás a cím alá igazodik (a design.css 13 px-es behúzása nem kell). */
:root:root:root body:not(.lp) .fx .opt > span{ padding: 0 !important; }
/* 2026-11-10, a user: „miért van több helyen félboxban a szabad karakteres mező? teljes szélességben kérem mindenhol”.
   Ok: a Filmtervező a mező címkéjét is `.mezok` rácsnak kapta (film.php mezo()), így a felirat és a szövegdoboz egymás mellé került.
   Szabály: a szövegdoboz (textarea) mindig a teljes szélességet kapja, a felirata fölötte áll, és rácsban is végigér a soron. */
:root:root:root body:not(.lp) :is(label, .field, .mezo, .mezok, .kp-mezo, .lp-mezo):has(> textarea){ grid-template-columns: minmax(0, 1fr) !important; grid-column: 1 / -1 !important; flex-basis: 100% !important; width: 100%; }
:root:root:root body:not(.lp) :is(label, .field, .mezo, .mezok, .kp-mezo, .lp-mezo) > textarea{ width: 100% !important; max-width: 100% !important; box-sizing: border-box; }

/* ── 13. A BELSŐ FEJLÉC KISEBB (2026-11-10, a user: „a menü magasságot vegyük kisebbre … ez a két elem indokolatlanul nagy,
   és ennek nagy része bemehetne a jobb oldali shellbe”). 1024 px felett a fej 64 → 52 px. A belső lapokon a nyelvváltó
   és a „Belépve” lapka kikerül a fejlécből: a két zászló a jobb sávban áll egymás alatt (`_kozos.php` wlai_jobbsav()),
   a fiókot a jobb sáv profilgombja nyitja. Telefonon (620 px alatt) marad a régi rend: a zászlók a ☰ menüben. */
@media (min-width: 1024px){
:root:root:root body:not(.lp):has(> .lp-fej) > .lp-fej{ --lp-fej: 52px !important; }
:root:root:root body:not(.lp):has(> .lp-fej) .lp-sav{ height: 52px !important; }
:root:root:root body:not(.lp):has(> .lp-fej) .site-bar{ top: 53px !important; }
:root:root:root body:not(.lp):has(> .lp-fej) :is(.oldalsav, .jobbsav){ top: 53px !important; }
}
@media (min-width: 621px){
:root:root:root body:not(.lp):has(.jobbsav .rb-nyelvek) .lp-fej :is(.lp-fej-zaszlok, .lp-profil){ display: none !important; }
:root:root:root body:not(.lp) .jobbsav .rb-nyelvek{ display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 0; padding: 0; border: 0; background: none; }
:root:root:root body:not(.lp) .jobbsav .rb-nyelvek > :is(a, span){ display: grid; place-items: center; width: var(--gomb-mag); height: var(--gomb-mag); min-width: 0; min-height: 0; padding: 0; border-radius: var(--gomb-sarok); }
:root:root:root body:not(.lp) .jobbsav .rb-nyelvek .zaszlo{ width: 20px; height: 14px; }
}
@media (max-width: 620px){
:root:root:root body:not(.lp) .jobbsav .rb-nyelvek{ display: none; }
}
/* A bal sáv csukó gombja: kerek és magenta, fehér nyíllal (a user kérése, 2026-10-07; kulso-fejlec.css).
   Az 1. rész semleges ikongomb-szabálya 11-09-én véletlenül felülírta (a `:is()` a legerősebb tagja, a `.tool-btn:not():not()`
   súlyát kapja, ezért kell a hármas osztály): itt visszakapja a saját színét. */
@media (min-width: 1280px){
:root:root:root:not([data-theme="light"]) body:has(> .lp-fej) .wh-csuk.wh-csuk.wh-csuk{ background: var(--m-magenta) !important; color: var(--m-feher) !important; border-radius: 50% !important; }
:root:root:root:not([data-theme="light"]) body:has(> .lp-fej) .wh-csuk.wh-csuk.wh-csuk:hover{ background: var(--m-magenta) !important; color: var(--m-feher) !important; filter: brightness(1.1); }
:root:root:root body:not(.lp):has(> .lp-fej) .wh-csuk{ top: 73px !important; }
}

/* ── 14. BELÉPVE NINCS FELSŐ MENÜ (2026-11-10, a user elfogadott terve: „belépve nincs felső menü, a logó a bal sáv tetején”).
   1024 px felett a külső fejléc eltűnik, a két sáv a lap tetejéig ér, a bal sáv feje újra a logót mutatja.
   2026-11-11, a user: „pont úgy kuka, mint a belső oldalon”: belépés nélkül is, a bal sávos lapokon (`.lp-fej--savos`).
   A nyilvános linkek a ☰ menüben és a láblécben maradnak. 1023 px alatt minden marad: ott a fejléc ☰-je nyitja a bal sávot. */
@media (min-width: 1024px){
:root:root:root body:is(:not(.lp), .lp--hej) > :is(.lp-fej--belepve, .lp-fej--savos){ display: none !important; }
:root:root:root body:is(:not(.lp), .lp--hej):has(> :is(.lp-fej--belepve, .lp-fej--savos)) :is(.oldalsav, .jobbsav, .site-bar){ top: 0 !important; }
:root:root:root:not([data-sav="zart"]) body:is(:not(.lp), .lp--hej):has(> :is(.lp-fej--belepve, .lp-fej--savos)) .oldalsav .sav-brand{ display: flex !important; }
}
@media (min-width: 1280px){
:root:root:root body:is(:not(.lp), .lp--hej):has(> :is(.lp-fej--belepve, .lp-fej--savos)) .wh-fej{ min-height: 4.4375rem !important; padding: 1rem .875rem !important; border-bottom: 1px solid var(--border) !important; justify-content: flex-start !important; }
:root:root:root body:is(:not(.lp), .lp--hej):has(> :is(.lp-fej--belepve, .lp-fej--savos)) .wh-csuk{ top: 21px !important; }
}

/* ── tipo.css ── */
/* ============================================================
   BETŰREND a nyilvános lapokon (2026-11-10, a user: „a betűtípusok teljes káoszba fulladnak, méretben is …
   használhatjuk a Higi betűtípusait és annak méretét”). A Higgsfield mért rendje: cím Space Grotesk 700,
   nagybetűs, −0,04em; menü Inter 500; gomb Inter 600. Az Anton csak a logóban marad (a user „C” változata).
   Mindig utolsóként töltődik (`_publikus.php`), ezért itt a szabály nyer.
   ============================================================ */
:root{ --t-h1: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem); --t-h2: clamp(1.625rem, 1.3rem + 1.4vw, 2.25rem);
       --t-h3: 1.125rem; --t-menu: .9375rem; --t-gomb: .875rem; }
:root:root:root body.lp :is(h1, h2, .lp-hero-cim, .u-h1, .u-h2){
  font-family: var(--font-alcim) !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: -.04em !important; }
:root:root:root body.lp :is(h1, .lp-hero-cim, .u-h1){ font-size: var(--t-h1) !important; line-height: 1.02 !important; }
:root:root:root body.lp :is(h2, .u-h2){ font-size: var(--t-h2) !important; line-height: 1.08 !important; }
:root:root:root body.lp main h3{ font-family: var(--font-alcim) !important; font-weight: 700 !important; font-size: var(--t-h3) !important;
  text-transform: uppercase; letter-spacing: -.02em !important; line-height: 1.2 !important; }
/* menü: minden pont egyforma, a „Belépés” is */
:root:root:root body.lp :is(.lp-nav a, .lp-fej .lp-link, .lp-mob-lap a){ font: 500 var(--t-menu)/1.2 Inter, system-ui, sans-serif !important; letter-spacing: 0 !important; }
:root:root:root body.lp .lp-fej .lp-btn{ font-size: var(--t-gomb) !important; font-weight: 600 !important; }
/* A régi 22ch-s cím-szélesség az Antonhoz készült; a Space Grotesk szélesebb, ezért a cím a teljes sort kapja. */
:root:root:root body.lp main :is(h2, .u-h2){ max-width: none !important; }
/* Kártyacím: telefonon kisebb, hogy ne törjön két sorba. */
:root:root:root body.lp main h3{ font-size: clamp(.875rem, .72rem + .7vw, var(--t-h3)) !important; }
/* Cikk-kártya címe hosszú mondat: nem nagybetűs, kártyacím-méret (a Higgsfield is így írja a kártyán). */
:root:root:root body.lp .tb-kartya h2{ text-transform: none; letter-spacing: -.01em !important; font-weight: 600 !important;
  font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem) !important; line-height: 1.25 !important; }
/* ── „Stúdiók ▾” lenyíló (2026-11-10) — JS nélkül is nyílik (<details>) ── */
:root:root:root body.lp .lp-le{ position: relative; }
:root:root:root body.lp .lp-le > summary{ list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 12px; border-radius: 4px; white-space: nowrap;
  font: 500 var(--t-menu)/1.2 Inter, system-ui, sans-serif; color: var(--m-szurke-halk); }
:root:root:root body.lp .lp-le > summary::-webkit-details-marker{ display: none; }
:root:root:root body.lp .lp-le > summary::after{ content: ""; width: 6px; height: 6px; margin-top: -3px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform .15s; }
:root:root:root body.lp .lp-le[open] > summary::after{ transform: rotate(-135deg); margin-top: 3px; }
:root:root:root body.lp .lp-le > summary:hover, :root:root:root body.lp .lp-le[open] > summary{ color: var(--m-feher-tort); background: rgba(var(--m-feher-rgb), .05); }
:root:root:root body.lp .lp-le-lap{ position: absolute; top: calc(100% + 8px); left: 0; z-index: 60; width: 21rem; padding: 6px;
  display: grid; gap: 2px; background: #121417; border: 1px solid #2a2e33; border-radius: 4px; box-shadow: 0 18px 40px rgba(0,0,0,.45); }
:root:root:root:root body.lp :is(.lp-le-lap, .lp-mob-studiok) .lp-le-elem{ display: grid !important; gap: 2px; height: auto !important; min-height: 44px !important;
  padding: 10px 12px !important; border-radius: 4px !important; text-decoration: none; align-items: start !important; }
:root:root:root:root body.lp .lp-le-elem b{ font: 600 .9375rem/1.25 Inter, system-ui, sans-serif; color: var(--m-feher-tort); white-space: nowrap; }
:root:root:root:root body.lp .lp-le-elem small{ font: 400 .8125rem/1.35 Inter, system-ui, sans-serif; color: var(--m-szurke-halk); }
:root:root:root:root body.lp .lp-le-elem em{ font: 600 .6875rem/1 Inter, system-ui, sans-serif; font-style: normal; text-transform: uppercase; letter-spacing: .04em;
  margin-left: 6px; padding: 3px 6px; border-radius: 4px; color: var(--m-tinta); background: var(--m-lime); vertical-align: 2px; }
:root:root:root:root body.lp a.lp-le-elem:hover{ background: rgba(var(--m-feher-rgb), .06) !important; }
:root:root:root:root body.lp .lp-le-elem--hamar b{ color: var(--m-szurke-halk); }
/* telefonon a ☰ menüben: kis címke, alatta a stúdiók */
:root:root:root body.lp .lp-mob-cimke{ margin: 6px 12px 2px; font: 600 .6875rem/1 Inter, system-ui, sans-serif; text-transform: uppercase; letter-spacing: .08em; color: var(--m-szurke-halk); }
:root:root:root body.lp .lp-mob-studiok{ display: grid; gap: 2px; padding-bottom: 6px; margin-bottom: 4px; border-bottom: 1px solid #2a2e33; }
:root:root:root:root body.lp :is(.lp-le-lap, .lp-mob-studiok) .lp-le-elem{ justify-content: start !important; justify-items: start !important; text-align: left !important; }

/* ============================================================
   SZÖVEG-SZEREPEK (2026-11-10 éjjel, a user: „van vagy 6 féle méret és stilus”). Mérve élesben: 58 betűkép
   9 lapon (szöveg 15 és 17 px vegyesen, Anton a számokban, mono 9–16 px). Innentől szerepenként EGY betűkép,
   a skála lépcsői: 11 · 13 · 14 · 16 · 18 · 22 · 28 · 36 (+ h1).
     szöveg Inter 400 16 · bevezető Inter 400 18 · apró Inter 400 14 · gomb Inter 600 16 (fejlécben 14)
     címke JetBrains Mono 600 13 nagybetűs · adat JetBrains Mono 500 14 · szám Space Grotesk 700 22/28/36
   Az Anton csak a logóban marad.
   ============================================================ */
:root{ --t-szoveg: 1rem; --t-vezeto: 1.125rem; --t-apro: .875rem; --t-cimke: .8125rem; --t-adat: .875rem;
       --t-szam-s: 1.375rem; --t-szam-m: 1.75rem; --t-szam-l: 2.25rem; }
/* alap: minden bekezdés, listaelem és mezőfelirat */
:root:root:root body.lp :is(main, .lp-lab) :is(p, li, label, dd, dt){ font-family: Inter, system-ui, sans-serif !important; font-size: var(--t-szoveg) !important; font-weight: 400 !important; }
:root:root:root body.lp main :is(p, li, label) :is(b, strong){ font-size: inherit !important; font-weight: 600 !important; }
/* bevezető */
:root:root:root:root body.lp :is(.u-vezeto, .lp-vezeto, .lp-alcim, .u-alcim, .kp-bal > p){ font: 400 var(--t-vezeto)/1.5 Inter, system-ui, sans-serif !important; }
/* apró: jogi sor, lábléc, morzsa, ár melletti „/ hó” */
:root:root:root:root body.lp :is(main small, .lp-apro, .vs-apro, .kp-apro, .kp-sugo, .partner-jel, .lp-copy, .lp-lab-ceg, .rl-megj, .u-hang,
  .kn-figy, .vs-bizalom span, .ar-ar span, .vs-csomag-ar span, .u-szam span, .lp-morzsa a, .lp-morzsa b, .lp-lab-fo p, .lp-lab-oszlop a,
  .rl-modell small, .rl-szerep, .pk-mire, .u-gomb-ar, .vl-pipa, .vl-pipa span, .vl-pipa a){
  font-family: Inter, system-ui, sans-serif !important; font-size: var(--t-apro) !important; font-weight: 400 !important; letter-spacing: 0 !important; text-transform: none !important; }
:root:root:root:root body.lp :is(.lp-morzsa b, .rl-szerep--alap){ font-weight: 600 !important; }
/* gomb */
:root:root:root:root body.lp :is(.lp-btn, .lp-btn2, .u-gomb, .u-gomb2, .pk-gomb, .kp-kuld, .kp-tag-gomb, .u-film-ujra, .rl-ful, .partner-gomb span){
  font-family: Inter, system-ui, sans-serif !important; font-size: var(--t-szoveg) !important; font-weight: 600 !important; letter-spacing: 0 !important; }
:root:root:root:root:root body.lp .lp-fej .lp-btn{ font-size: var(--t-gomb) !important; }
:root:root:root:root:root body.lp .ar-doboz .ar-gomb{ font-size: var(--t-szoveg) !important; }
:root:root:root:root body.lp :is(.vs-ar, .lp-lab-suti button){ font-family: Inter, system-ui, sans-serif !important; font-size: var(--t-apro) !important; }
/* szöveges tovább-link */
:root:root:root:root body.lp :is(.tb-tovabb, .hir-tovabb, .vs-video-tovabb a){ font: 600 var(--t-apro)/1.3 Inter, system-ui, sans-serif !important; }
/* kártya- és sorcím szövegben: félkövér, szövegméret */
/* filmkártya címe: apró félkövér (a jóváhagyott „A” irány: a kártyán kisebb, hogy ne törjön) */
:root:root:root:root body.lp .u-film-cim{ font: 600 var(--t-apro)/1.3 Inter, system-ui, sans-serif !important; }
:root:root:root:root body.lp :is(.kp-ido, .rl-modell b, .u-tb-racs b, .rl-pontok b, .kp-tag b, .rl-kor b, .u-kiemelt b, .ar-sorok span, .vs-ciklus-nev){
  font-family: Inter, system-ui, sans-serif !important; font-size: var(--t-szoveg) !important; font-weight: 600 !important; }
/* címke (kicker, mezőfelirat, lábléc-oszlop címe) */
:root:root:root:root body.lp :is(.u-cimke, .lp-kis, .u-gepsav-cim, .tb-tema, .bt-ut-honnan, .hir-cimke, .tb-kezd-jel, .rl-fej, .kp-mezo label,
  .kp-gyors-cim, .lp-lab-oszlop b, .ar-alcim2){
  font: 600 var(--t-cimke)/1.3 'JetBrains Mono', monospace !important; text-transform: uppercase !important; letter-spacing: .06em !important; }
:root:root:root:root body.lp .vs-jel{ font: 600 .6875rem/1 Inter, system-ui, sans-serif !important; text-transform: uppercase; letter-spacing: .04em !important; }
/* adat */
:root:root:root:root body.lp :is(.rl-szam, .rl-mert, .tb-perc, .u-snitt2 b, .u-snitt2 em, .u-snitt2 span){
  font-family: 'JetBrains Mono', monospace !important; font-size: var(--t-adat) !important; font-weight: 500 !important; }
/* számok: Space Grotesk, az Anton helyett */
:root:root:root:root body.lp :is(.u-szam b, .ar-ar b, .vs-csomag-ar b, .vs-ar b, .ar-sorok b, .u-kredit, .u-lepes-szam, .u-szek-cimke,
  .rl-hely, .rl-osszeg b, .pk-nev, .lp-fazis-szam, .lp-szam-jel, .u-futo-sor li){
  font-family: var(--font-alcim) !important; font-weight: 700 !important; letter-spacing: -.03em !important; line-height: 1 !important; }
:root:root:root:root body.lp .ar-ar b{ font-size: var(--t-szam-l) !important; }
/* a főoldal számsora a lap kirakata: h1-méret, nem új lépcső */
:root:root:root:root body.lp .u-szam b{ font-size: var(--t-h1) !important; }
:root:root:root:root body.lp :is(.vs-csomag-ar b, .u-kredit, .u-lepes-szam, .u-szek-cimke, .rl-hely, .rl-osszeg b, .pk-nev, .lp-fazis-szam, .lp-szam-jel){ font-size: var(--t-szam-m) !important; }
:root:root:root:root body.lp :is(.vs-ar b, .ar-sorok b, .u-futo-sor li){ font-size: var(--t-szam-s) !important; }
/* a főoldali termék-bemutató (rajzolt Műhely-ablak): egy mono méret, a legapróbb címkék sem kisebbek 11 px-nél */
:root:root:root:root body.lp :is(.u-demo-nev, .u-demo-ido, .u-tc, .u-gep, .u-bub, .u-chip, .u-gepnev, .u-gepel2, .u-kredit-mit, .u-jovahagy,
  .u-sor b, .u-sor span, .u-chat-fej span, .u-ablak){
  font-family: 'JetBrains Mono', monospace !important; font-size: .75rem !important; font-weight: 500 !important; }
:root:root:root:root body.lp :is(.u-csomag, .u-csomo, .u-sn b, .u-sn span){ font-family: 'JetBrains Mono', monospace !important; font-size: .6875rem !important; font-weight: 500 !important; }