/* ── 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:        #0f1113;   /* majdnem fekete — vetítőterem */
  --lp-bg-2:      #131518;
  --lp-bg-3:      #17191c;
  --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:         #c9ff35;
  --lime-halk:    rgba(201,255,53,0.13);
  --lime-el:      rgba(201,255,53,0.42);
  --lime-sotet:   #06111d;
  --magenta:      #fb23c2;
  --magenta-halk: rgba(251,35,194,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(0,0,0,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(201,255,53,0.35);
}
.lp-logo b { color: var(--magenta); font-weight: 800; text-shadow: 0 0 26px rgba(251,35,194,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(255,255,255,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(201,255,53,0), 0 8px 26px -12px rgba(201,255,53,0.7);
}
.lp-btn:hover {
  background: #d9ff64; transform: translateY(-2px);
  box-shadow: 0 0 34px -6px rgba(201,255,53,0.55), 0 10px 30px -12px rgba(201,255,53,0.8);
}
.lp-btn2 { background: rgba(255,255,255,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(201,255,53,0.15), transparent 62%),
    radial-gradient(42% 40% at 84% 14%, rgba(251,35,194,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(251,35,194,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(0,0,0,0.95), 0 0 70px -30px rgba(201,255,53,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(201,255,53,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(0,0,0,0.9), 0 0 50px -26px rgba(201,255,53,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(201,255,53,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(201,255,53,0.13), transparent 64%),
              radial-gradient(40% 34% at 50% 30%, rgba(251,35,194,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(0,0,0,0.95), 0 0 80px -40px rgba(201,255,53,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(0,0,0,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; }

.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: #ffb3ae; 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: #ff5c60; }
.jero.p0 .jero-alsó b                 { color: #ff7b7e; }
.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(201,255,53,0.10); border: 1px solid rgba(201,255,53,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(255,255,255,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(0,0,0,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(201,255,53,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(255,255,255,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(255,255,255,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(251,35,194,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(201,255,53,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(255,255,255,0.02); }
.ar-tabla .ki { background: rgba(251,35,194,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(251,35,194,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(255,255,255,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(255,255,255,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(201,255,53,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(255,255,255,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(255,255,255,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(0,0,0,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; }

.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(0,0,0,.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(0,0,0,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(255,255,255,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(255,255,255,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(251,35,194,0.7);
}
.lp-btn.lt-magenta:hover {
  background: #ff4fd0;
  box-shadow: 0 0 34px -6px rgba(251,35,194,0.55), 0 10px 30px -12px rgba(251,35,194,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))`. */
@media (min-width: 2200px) { html { zoom: 1.15; --z: 1.15; } }
@media (min-width: 2500px) { html { zoom: 1.3; --z: 1.3; } }

/* ══ „Í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(251,35,194,.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) */
}

/* ============================================================
   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;
}
@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; }
}

/* ── 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: #c9ff35; color: #0f1113; }
body.lp .hir-kartya--magenta { background: #fb23c2; color: #0f1113; }
body.lp .hir-kartya--lime .hir-cimke, body.lp .hir-kartya--magenta .hir-cimke { background: #0f1113; color: #f3f5f8; }
body.lp .hir-kartya--lime time, body.lp .hir-kartya--magenta time { color: #0f1113; 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: #fb23c2; color: #0f1113; }
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: #c9ff35; }

/* 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: #fb23c2; color: #0f1113; }

/* ── 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(201,255,53,.35); }

:root { --lp-bg: #0f1113; --lp-bg-2: #131518; --lp-kartya: #17191c; --lp-kartya-2: #202327;
  --lp-keret: #1f242d; --lp-keret-2: #2d333f; --lp-szoveg: #f3f5f8; --lp-halvany: #b3bcc7; --lp-dim: #9aa3ad; }
body.lp::after { display: none; }

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

body.lp .u-cimke, body.lp .u-szek-cimke { color: #c9ff35; }
body.lp .u-szek-cimke { font-family: 'Anton', sans-serif; font-size: 1.5rem; letter-spacing: .04em; }
body.lp .u-gepsav { background: #0f1113; }

/* a záró: megint lime tömb (keretbe fogja a lapot) */
body.lp .u-zaro { background-color: #c9ff35; color: #0f1113; border-top: 0; }
body.lp .u-zaro .u-h2, body.lp .u-zaro .u-vezeto { color: #0f1113; }
body.lp .u-zaro .u-vezeto { font-weight: 500; }
body.lp .u-zaro .ar-doboz { background: #0f1113; border: 0; color: #f3f5f8; box-shadow: 0 30px 60px -30px rgba(0,0,0,.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: #c9ff35; }
body.lp .lp-kis::before { background: #c9ff35; color: #c9ff35; box-shadow: 0 0 0 4px rgba(201,255,53,.16); }
body.lp .lp-szam-jel { color: #c9ff35; }
body.lp .tb-idezet { border-left-color: #c9ff35; }
body.lp .bt-ut-mi { border-color: #c9ff35 !important; }

/* a záró szakasz itt is lime tömb, fekete tintával (mint a főoldalon) */
body.lp .lp-zaro { background: #c9ff35; color: #0f1113; border-top: 0; }
body.lp .lp-zaro h2, body.lp .lp-zaro h2 em, body.lp .lp-zaro .lp-vezeto { color: #0f1113; }
body.lp .lp-zaro .lp-vezeto { font-weight: 500; }
body.lp .lp-zaro .lp-btn { background: #0f1113; color: #c9ff35; }
body.lp .lp-zaro .lp-btn2 { background: transparent; color: #0f1113; border: 2px solid #0f1113; }
body.lp .lp-zaro .lp-btn2:hover { background: #0f1113; color: #c9ff35; }
body.lp .lp-zaro .lp-link, body.lp .lp-zaro .lp-link:hover { color: #0f1113; text-decoration-color: #0f1113; }
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: #0f1113; }
body.lp .lp-zaro .ar-doboz, body.lp .lp-zaro .vl-doboz { background: #0f1113; border: 0; color: #f3f5f8; }

/* 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: #fb23c2; }
body.lp .u-hero .u-rec { background: #fb23c2; }
body.lp .u-hero .u-gomb2 { background: #fb23c2; color: #0f1113; border-color: #fb23c2; }
body.lp .u-hero .u-gomb2:hover { background: #0f1113; color: #fb23c2; border-color: #0f1113; }
body.lp .u-pottyok i:first-child { background: #fb23c2; }
body.lp .u-keres-jel, body.lp .u-jatszik .u-gepel::after { color: #fb23c2; }
body.lp .u-gep { color: #fb23c2; border-color: rgba(251,35,194,.45); }
body.lp .u-szek-cimke, body.lp .u-lepes-szam { color: #fb23c2; }
body.lp .u-futo-sor li::after { color: #fb23c2; }
body.lp .u-kartya:hover, body.lp .u-film:hover, body.lp .u-film:focus-visible { border-color: #fb23c2; }
body.lp .u-kartya:nth-child(even) .u-ikon { color: #fb23c2; background: rgba(251,35,194,.12); }
body.lp .u-film-play { background: #fb23c2; color: #0f1113; }
body.lp .u-kiemelt { border-left-color: #fb23c2; background: rgba(251,35,194,.08); }
body.lp .lp-nav a:hover { border-bottom-color: #fb23c2; }
body.lp .lp-kis { color: #fb23c2; }
body.lp .lp-kis::before { background: #fb23c2; color: #fb23c2; box-shadow: 0 0 0 4px rgba(251,35,194,.18); }
body.lp .lp-szam-jel { color: #fb23c2; }
body.lp .tb-idezet { border-left-color: #fb23c2; }
body.lp .u-lepes { border-top-color: #fb23c2; }
body.lp .u-szam:nth-child(even) b { color: #fb23c2; }
body.lp .u-gyik summary::after { color: #fb23c2; }
body.lp .tb-tema { color: #fb23c2; }

/* ══ 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: #0f1113; color: #fff; border: 1px solid #c9ff35; box-shadow: none;
}
body.lp .lp-btn:hover, body.lp .u-gomb:hover, body.lp .lp-zaro .lp-btn:hover { background: #202327; color: #fff; }
body.lp .u-gomb-ar, body.lp .u-hero .u-gomb-ar { border-left-color: rgba(255,255,255,.3); }
body.lp .lp-btn2, body.lp .lp-btn2:hover, body.lp .u-gomb2, body.lp .u-gomb2:hover { color: #fff; }
body.lp .lp-zaro .lp-btn2, body.lp .lp-zaro .lp-btn2:hover { background: #0f1113; color: #fff; border-color: #0f1113; }
body.lp .u-hero .u-gomb2, body.lp .lp-btn.lt-magenta {
  background: #fb23c2; color: #fff; border-color: #fb23c2; font-size: 1.1875rem;
}
body.lp .u-hero .u-gomb2:hover, body.lp .lp-btn.lt-magenta:hover { background: #0f1113; color: #fff; border-color: #0f1113; }

/* ══ 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: #fb23c2; color: #fff; border-color: #fb23c2; 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: #0f1113; color: #fff; border-color: #0f1113; }
/* 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: #0f1113; color: #fff; border-color: #0f1113; }
body.lp .u-hero .u-gomb2:hover { background: #202327; color: #fff; border-color: #202327; }

/* ══ 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: #fb23c2; color: #fff; border: 1px solid #fb23c2; font-size: 1.1875rem; }
body.lp .vs-csomag .lp-btn:hover { background: #0f1113; color: #fff; border-color: #fb23c2; }
body.lp .vs-csomag .lp-btn2 { background: #c9ff35; color: #0f1113; border: 1px solid #c9ff35; font-size: 1.1875rem; }
body.lp .vs-csomag .lp-btn2:hover { background: #0f1113; color: #c9ff35; border-color: #c9ff35; }
/* „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: #fb23c2; color: #fff; border: 1px solid #fb23c2; font-size: 1.1875rem; }
body.lp form[action="/api/fizetes.php"] .lp-btn:hover { background: #0f1113; color: #fff; border-color: #fb23c2; }

/* 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: #fb23c2; color: #fff; border: 1px solid #fb23c2; font-size: 1.1875rem; }
body.lp .lp-fej .lp-btn.lp-fej-vasar:hover { background: #0f1113; color: #fff; border-color: #fb23c2; }
/* 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; }
}

/* ── 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 #c9ff35; border-radius: 12px;
  background: #0f1113; color: #fff; text-decoration: none;
}
body.lp .lp-profil:hover { background: #202327; color: #fff; }
body.lp .lp-profil:focus-visible { outline: 2px solid #c9ff35; 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: #c9ff35; }
body.lp .lp-profil-szoveg small::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: #c9ff35; }
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: #131518; border: 1px solid #c9ff35; 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: #c9ff35; color: #0f1113; 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: #fff; 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: #d6129f; color: #fff; border-color: #d6129f;
}
body.lp .vs-csomag .lp-btn2:is(:hover, :active) { background: #d8ff6b; color: #0f1113; border-color: #d8ff6b; }
/* 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: #c9ff35; color: #0f1113; border-color: #c9ff35; }
/* 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: #c9ff35; border: 1px solid #c9ff35; }
body.lp .ko-tovabb .lp-btn.ko-masod:hover { background: #c9ff35; color: #0f1113; }
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; }
}