/* AI-radar értékesítő lap.
   A vezérlőpult arculatát viszi tovább: navy, meleg sárga, tört fehér, piros a hiányra.
   KÜLSŐ BETŰKÉSZLET NINCS, külső kérés nincs: a display-hatást szűk betűköz plusz nagy
   súly adja, nem letöltött font. A kép-fájlok mind a kep/ mappából jönnek, saját
   kiszolgálásból: a márka logója plusz a megnevezett cégek favikonjai. Rajzolt vázlat
   nincs a lapon: ami korábban szürke csík volt, az ma olvasható szöveg. */

:root {
	--navy: #0F1C38;
	--navy-2: #16294d;
	--navy-3: #22345c;
	--navy-halk: #46536b;
	--sarga: #ffc257;
	--sarga-sotet: #e8a92f;
	--piros: #BF1E2D;
	--piros-halk: #fdf2f1;
	--zold: #2e9e6b;
	--zold-halk: #eaf6f0;
	--lap: #ffffff;
	--tort: #eef2f7;
	--vonal: #d3dae4;
	--racs: #e1e7ef;
	--sugar: 10px;
	--sav: 1180px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--lap);
	color: var(--navy);
	font-family: ui-sans-serif, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
	font-size: 17px;
	line-height: 1.62;
	font-variant-numeric: tabular-nums;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, .ar-szam, .marka, .lepes-szam {
	font-weight: 800; letter-spacing: -0.02em; line-height: 1.12; margin: 0;
}
h1 { font-size: clamp(2rem, 4.7vw, 3.05rem); }
h2 { font-size: clamp(1.45rem, 3.4vw, 2.2rem); }
h3 { font-size: 1.06rem; letter-spacing: -0.01em; }
p { margin: 0 0 0.9rem; }
ul, ol, dl { margin: 0; padding: 0; list-style: none; }
svg { max-width: 100%; }
a { color: inherit; }
strong { font-weight: 800; }

/* --- fejléc --- */

.fejlec {
	position: sticky; top: 0; z-index: 30;
	background: rgba(255,255,255,.93); backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--vonal);
}
.fejlec .sav { max-width: var(--sav); margin: 0 auto; padding: 0.65rem 1.1rem; display: flex; align-items: center; gap: 0.7rem; }
.marka-logo { height: 30px; width: auto; display: block; flex: none; }
@media (min-width: 560px) { .marka-logo { height: 34px; } }
.termek {
	font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0;
	color: var(--navy); background: var(--sarga); padding: 0.16rem 0.45rem;
	border-radius: 3px; font-weight: 700;
}
.fejlec-cta {
	margin-left: auto; text-decoration: none; font-weight: 700; font-size: 0.86rem;
	background: var(--navy); color: #fff; padding: 0.48rem 0.9rem; border-radius: var(--sugar);
	white-space: nowrap;
}
.fejlec-cta:hover { background: var(--navy-2); }
/* A teljes gombszoveg 390 keppontnal 36 keppontot kilogott a lapbol, tehat vizszintes
   gorgetest okozott. Mobilon rovid felirat all, asztali szelessegen a teljes. */
.fejlec-cta .hosszu { display: none; }
.fejlec-cta .rovid { display: inline; }
.termek { display: none; }
@media (min-width: 560px) {
	.fejlec-cta .hosszu { display: inline; }
	.fejlec-cta .rovid { display: none; }
	.termek { display: inline; }
}

/* --- szakaszok --- */

.szakasz { max-width: var(--sav); margin: 0 auto; padding: 4.2rem 1.1rem; }
.szakasz-tort, .szakasz-sotet { max-width: none; padding: 4.2rem 1.1rem; }
.szakasz-tort { background: var(--tort); }
.szakasz-sotet { background: var(--navy); color: #fff; }
.szakasz-tort > *, .szakasz-sotet > * { max-width: calc(var(--sav) - 3rem); margin-left: auto; margin-right: auto; }

.szakasz-fej { max-width: 46rem; margin-bottom: 2.1rem; }
.felcim {
	font-size: 0.92rem; letter-spacing: 0;
	font-weight: 700; color: var(--navy); margin: 0 0 0.55rem;
	display: flex; align-items: center; gap: 0.6rem;
}
.felcim[data-jel]::before {
	content: attr(data-jel);
	font-size: 0.74rem; font-weight: 800; letter-spacing: 0;
	color: var(--navy); background: var(--sarga);
	padding: 0.13rem 0.4rem; border-radius: 3px; flex: none;
	font-variant-numeric: tabular-nums;
}
.felcim-vilagos { color: #eef2f7; }
.felcim-vilagos[data-jel]::before { background: var(--sarga); color: var(--navy); }
.alcim { color: var(--navy-halk); font-size: 1.04rem; margin-top: 0.7rem; }
.szakasz-sotet .alcim { color: #c8d0e0; }

.szoveg-hasab, .szoveg-szeles { max-width: 40rem; color: var(--navy-halk); }
.szoveg-szeles { max-width: 46rem; margin-top: 1.8rem; }
.szoveg-vilagos { color: #c8d0e0; max-width: 44rem; margin-bottom: 2rem; }
.mit-jelent {
	border-left: 3px solid var(--sarga); padding-left: 0.9rem;
	color: var(--navy); font-style: italic;
}
.szakasz-sotet .mit-jelent { color: #e7ecf5; }
.zaro-mondat { margin-top: 1.8rem; font-size: 1.08rem; color: #fff; max-width: 44rem; font-weight: 600; }

/* --- gombok --- */

.gomb {
	display: inline-flex; align-items: center; justify-content: center; text-align: center;
	text-decoration: none; font-weight: 700; border-radius: var(--sugar);
	padding: 0.9rem 1.5rem; border: 2px solid transparent; line-height: 1.25;
	transition: transform .14s ease, background-color .14s ease;
}
.gomb:hover { transform: translateY(-1px); }
.gomb-fo { background: var(--navy); color: #fff; }
.gomb-fo:hover { background: var(--navy-2); }
.gomb-halk { background: transparent; color: var(--navy); border-color: var(--vonal); }
.gomb-halk:hover { border-color: var(--navy); }
.gomb-teljes { width: 100%; margin-top: auto; }
.gomb-nagy { font-size: 1.04rem; padding: 1rem 1.9rem; }
.mikro { font-size: 0.86rem; color: var(--navy-halk); max-width: 30rem; }
.mikro-vilagos { color: #b9c4d8; margin: 0.9rem auto 0; }

/* --- hős --- */

.hos { max-width: var(--sav); margin: 0 auto; padding: 3rem 1.1rem 3.4rem; }
.hos-racs { display: grid; gap: 2.2rem; }
.kiemel { background: linear-gradient(transparent 62%, var(--sarga) 62%); }
.bevezeto { font-size: 1.1rem; color: var(--navy-halk); max-width: 34rem; margin-top: 1rem; }
.gombsor { margin: 1.5rem 0 0.9rem; }
/* Kockazat-oldo sav kozvetlenul a gomb alatt. Ugyanezt a fogast hasznalja az
   otterly.ai is: a gomb ala rogton az kerul, ami a kattintas koltseget csokkenti. */
.kockazat {
	display: flex; flex-wrap: wrap; gap: 0.35rem 0.9rem; margin: 0.2rem 0 0; padding: 0;
	list-style: none; font-size: 0.83rem; color: var(--navy-halk); font-weight: 600;
}
.kockazat li { display: flex; align-items: center; gap: 0.4rem; }
.kockazat li::before {
	content: ""; width: 13px; height: 13px; flex: none; border-radius: 50%;
	background: var(--zold-halk);
	box-shadow: inset 0 0 0 1.5px var(--zold);
}

/* 3. harom gep. A kontraszt a fo uzenet: az egyik oszlop teljesen ures, a masik
   harom kockaval all. Nulla ikon, nulla diszites, a puszta szamok viszik. */
/* A harom kartya ugyanarra a racsra all, mint a szakasz szovege. Korabban az
   .abra{margin:0} kiutotte az automatikus margot, ezert az abra a 24. kepponttol
   indult, kozben a szoveg a 368.-tol: ettol nezett ki balra tolva. */
.abra.abra-gepek { margin: 0 auto 1.6rem; max-width: 44rem; }
#gepek .szakasz-fej { max-width: 44rem; }
.gep-jelmagyarazat {
	display: flex; flex-wrap: wrap; gap: 0.4rem 1.3rem; margin: 0 0 0.85rem;
	font-size: 0.82rem; color: #c8d0e0;
}
.gep-jelmagyarazat span { display: flex; align-items: center; gap: 0.45rem; }
.jm-kocka {
	width: 13px; height: 13px; flex: none; border-radius: 3px;
	background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.24);
}
.jm-kocka.jm-tele { background: var(--sarga); border-color: var(--sarga); }
.gep-racs { display: grid; gap: 1rem; }
@media (min-width: 700px) { .gep-racs { grid-template-columns: repeat(3, 1fr); } }
.gep {
	background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16);
	border-radius: var(--sugar); padding: 1.1rem 1.2rem;
}
.gep-nev {
	display: flex; flex-direction: column; gap: 0.15rem; color: #fff;
	font-size: 1.14rem; margin-bottom: 0.9rem;
}
.gep-nev span {
	font-size: 0.7rem; font-weight: 600; letter-spacing: 0.05em; color: #9fabc2;
	text-transform: none;
}
.kockak { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin: 0 0 0.9rem; padding: 0; list-style: none; }
.kockak li {
	aspect-ratio: 1; border-radius: 4px;
	background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14);
}
.kockak li.tele { background: var(--sarga); border-color: var(--sarga); }
/* A fel-kocka a haromkoros atlag tort reszet jelzi: a ChatGPT harom kore 2, 1, 1. */
.kockak li.fel { background: linear-gradient(135deg, var(--sarga) 0 50%, rgba(255,255,255,.07) 50% 100%); border-color: rgba(255,194,87,.6); }
.gep-korok { margin: 0.5rem 0 0; font-size: 0.78rem; color: #9fabc2; font-variant-numeric: tabular-nums; }
.gep-szam {
	display: flex; align-items: baseline; gap: 0.5rem; margin: 0;
	font-weight: 800; font-size: 2.9rem; line-height: 1; color: var(--sarga); letter-spacing: -0.03em;
}
.gep-szam span { font-size: 0.82rem; font-weight: 600; color: #9fabc2; letter-spacing: 0; }
.gep-szam-nulla { color: #ff9aa2; }

/* 3b. sajat meres, kreativkontroll.hu -- vilagos szakaszon all, ezert kulon
   szinkeszlet kell a sotet .gep-hez kepest (Lead brief #438, harmadik
   kiegeszites, 2026-08-14). */
.sm-racs { display: grid; gap: 1rem; margin: 1.6rem 0; }
@media (min-width: 700px) { .sm-racs { grid-template-columns: repeat(3, 1fr); } }
.sm-kartya { background: #fff; border: 1px solid var(--vonal); border-radius: var(--sugar); padding: 1.2rem 1.3rem; text-align: center; }
.sm-nev { font-size: 1rem; font-weight: 700; color: var(--navy); margin: 0 0 0.8rem; }
.sm-nev span { display: block; font-size: 0.72rem; font-weight: 600; color: var(--navy-halk); margin-top: 0.15rem; letter-spacing: 0.03em; }
.sm-szam { display: flex; align-items: baseline; justify-content: center; gap: 0.5rem; margin: 0; font-weight: 800; font-size: 2.9rem; line-height: 1; color: var(--navy); letter-spacing: -0.03em; }
.sm-szam span { font-size: 0.82rem; font-weight: 600; color: var(--navy-halk); letter-spacing: 0; }
.sm-szam-nulla { color: var(--piros); }

/* --- ábrák, közös --- */

.abra { margin: 0; }
.abra svg { display: block; width: 100%; height: auto; }
.abra-cim {
	font-size: 0.84rem; letter-spacing: 0;
	font-weight: 700; color: var(--navy-halk); margin-bottom: 0.55rem;
}
.mintaadat { font-size: 0.75rem; color: var(--navy-halk); margin: 0.6rem 0 0; font-style: italic; }
.szakasz-sotet .mintaadat { color: #9fabc2; }
.nevsav { fill: var(--sarga); }
.leiras { fill: #c3ccdb; }
.fel-cim { font-size: 9.5px; fill: var(--navy-halk); font-weight: 700; letter-spacing: .08em; }

/* 1. hős buborék */
.abra-buborek { background: var(--tort); border: 1px solid var(--vonal); border-radius: var(--sugar); padding: 1rem; }
/* 1. amit a vevo lat. Chat-alaku, viszont minden szava valodi. */
.abra-chat { display: flex; flex-direction: column; gap: 0.7rem; }
.chat-kerdes {
	align-self: flex-end; max-width: 88%; background: var(--navy); color: #fff;
	border-radius: 14px 14px 4px 14px; padding: 0.7rem 0.95rem;
	font-size: 0.95rem; font-weight: 600; line-height: 1.45;
}
.chat-valasz {
	background: #fff; border: 1px solid var(--vonal); border-radius: 14px 14px 14px 4px;
	padding: 0.9rem 1rem 0.2rem; box-shadow: 0 10px 30px rgba(15,28,56,.1);
}
.chat-bevezeto { margin: 0 0 0.6rem; font-size: 0.89rem; color: var(--navy); line-height: 1.5; }
.chat-cegek { list-style: none; margin: 0; padding: 0; }
.chat-cegek li {
	display: flex; align-items: center; gap: 0.6rem;
	padding: 0.5rem 0; border-top: 1px solid var(--racs);
}
.ceg-nev { display: flex; flex-direction: column; font-weight: 800; font-size: 0.92rem; color: var(--navy); line-height: 1.25; }
.ceg-domain { font-size: 0.75rem; font-weight: 600; color: var(--navy-halk); }
.chat-ures {
	margin: 0.3rem -1rem 0; padding: 0.6rem 1rem; font-size: 0.83rem; font-weight: 700;
	color: var(--piros); background: var(--piros-halk); border-top: 1px solid rgba(191,30,45,.18);
	border-radius: 0 0 13px 4px;
}
.chat-labjegyzet { font-size: 0.74rem; line-height: 1.5; color: var(--navy-halk); font-style: italic; }

/* 2. ugyanaz a kerdes ket feluleten. Ket VALODI panel: bal oldalt a Google
   talalati lapjanak kepernyokepe, jobb oldalt a mérőmotorunk valodi valasza.
   Korabban rajzolt szurke csikok alltak itt: latvanynak elmentek, tartalomnak
   nullat adtak. */
.abra-ketoldal { margin: 2rem 0 0; }
/* A ket hasab egy magassagon zar, tehat a ket labjegyzet egy vonalban all.
   A bal oldalon marado ures hely nem hiany, hanem maga az allitas: a
   keresoben tiz hely van, a valaszban nehany nev. */
.ketoldal { display: grid; gap: 1.6rem; align-items: stretch; }
.oldal > .serp-rajz, .oldal > .abra-valasz { flex: 1 1 auto; }
.oldal-labjegyzet { margin-top: auto; }
@media (min-width: 900px) {
	.ketoldal { grid-template-columns: 1fr auto 1fr; gap: 1.1rem; }
}
.oldal { display: flex; flex-direction: column; min-width: 0; }
.oldal-fej {
	display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
	margin-bottom: 0.5rem;
}
.oldal-cimke {
	font-size: 0.86rem; letter-spacing: 0;
	font-weight: 800; color: var(--navy-halk);
}
.oldal-jel { font-size: 0.7rem; font-weight: 600; color: var(--navy-halk); }
.serp-keret {
	border: 1px solid var(--vonal); border-radius: var(--sugar); overflow: hidden;
	background: #fff; box-shadow: 0 10px 30px rgba(15,28,56,.09);
}
.serp-kep { display: block; width: 100%; height: auto; }
.oldal-labjegyzet { margin: 0.6rem 0 0; padding-top: 0.6rem; font-size: 0.78rem; color: var(--navy-halk); font-style: italic; }
.ketoldal-kozott {
	align-self: center; font-size: 0.78rem; letter-spacing: 0;
	font-weight: 800; color: var(--navy-halk); text-align: center;
}
@media (min-width: 900px) {
	.ketoldal-kozott { writing-mode: vertical-rl; padding: 0 0.2rem; }
}
.ketoldal-labjegyzet {
	margin: 1rem 0 0; font-size: 0.76rem; line-height: 1.55; color: var(--navy-halk);
	font-style: italic; max-width: 52rem;
}

/* A valasz-panel. */
.abra-valasz {
	background: #fff; border: 1px solid var(--vonal); border-radius: var(--sugar);
	padding: 0; overflow: hidden; box-shadow: 0 10px 30px rgba(15,28,56,.09);
}
.valasz-fej {
	display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
	background: var(--navy); color: #fff; padding: 0.55rem 0.95rem;
}
.valasz-motor { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.04em; }
.valasz-datum { font-size: 0.7rem; color: #a9b6cd; font-weight: 600; }
.valasz-kerdes {
	margin: 0; padding: 0.85rem 0.95rem 0.6rem; font-size: 0.97rem; font-weight: 700;
	color: var(--navy); border-bottom: 1px solid var(--racs);
}
.valasz-kerdes::before { content: "„"; }
.valasz-kerdes::after { content: "”"; }
.valasz-bevezeto { margin: 0; padding: 0.7rem 0.95rem 0.2rem; font-size: 0.87rem; color: var(--navy-halk); }
.valasz-cegek { list-style: none; margin: 0; padding: 0.5rem 0.95rem 0.3rem; }
.valasz-cegek li {
	display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto;
	column-gap: 0.6rem; align-items: center; padding: 0.5rem 0; border-bottom: 1px solid var(--racs);
}
.valasz-cegek li:last-child { border-bottom: 0; }
.valasz-cegek .favikon { grid-row: 1 / 3; width: 30px; height: 30px; }
.ceg-nev { font-weight: 800; font-size: 0.92rem; color: var(--navy); line-height: 1.25; }
.ceg-domain { font-size: 0.75rem; font-weight: 600; color: var(--navy-halk); }
.valasz-hiany {
	display: flex; align-items: center; gap: 0.5rem; margin: 0;
	padding: 0.6rem 0.95rem 0.7rem; font-size: 0.87rem; color: var(--piros); font-weight: 700;
	background: var(--piros-halk); border-top: 1px solid rgba(191,30,45,.18);
}
.hiany-jel {
	font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0;
	background: var(--piros); color: #fff; padding: 0.16rem 0.45rem; border-radius: 3px;
}
.valasz-labjegyzet {
	margin: 0; padding: 0.6rem 0.95rem 0.8rem; font-size: 0.74rem; line-height: 1.5;
	color: var(--navy-halk); font-style: italic; background: var(--tort);
}

/* 3. tízből egy */
.abra-tizbolegy {
	background: #fff; border: 1px solid var(--vonal); border-radius: var(--sugar);
	padding: 1rem; display: flex; flex-direction: column; gap: 0.9rem;
}
.tiz-cim {
	margin: 0 0 0.6rem; font-size: 0.88rem; letter-spacing: 0;
	font-weight: 800; color: var(--navy-halk);
}
.tiz-cim-vilagos { color: rgba(255,255,255,.72); }
.tiz-helyek { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.tiz-helyek li {
	width: 2.35rem; height: 2.35rem; flex: none; display: flex; align-items: center; justify-content: center;
	border: 1px solid var(--vonal); border-radius: 8px; background: var(--tort);
	font-weight: 800; font-size: 0.95rem; color: var(--navy);
}
.tiz-jegyzet, .egy-jegyzet { margin: 0.6rem 0 0; font-size: 0.79rem; line-height: 1.45; color: var(--navy-halk); }
.egy-blokk { background: var(--navy); border-radius: var(--sugar); padding: 0.9rem 1rem; }
.egy-nevek { list-style: none; margin: 0; padding: 0; }
.egy-nevek li { display: flex; align-items: center; gap: 0.6rem; padding: 0.45rem 0; border-top: 1px solid rgba(255,255,255,.14); }
.egy-nevek li:first-child { border-top: 0; }
.egy-nevek .ceg-nev { color: #fff; }
.egy-nevek .ceg-domain { color: #a9b6cd; }
.egy-jegyzet { color: #b7c2d6; }

/* 4. Venn */
.abra-venn { background: #fff; border: 1px solid var(--vonal); border-radius: var(--sugar); padding: 1.2rem; }
.kor { fill-opacity: .18; stroke-width: 2; }
.kor-bal { fill: var(--navy); stroke: var(--navy); }
.kor-jobb { fill: var(--sarga-sotet); stroke: var(--sarga-sotet); }
.kor-cimke { font-size: 12px; font-weight: 700; fill: var(--navy); text-anchor: middle; }
.metszet-jel { font-size: 11px; fill: var(--navy-halk); text-anchor: middle; font-weight: 600; }
.metszet-nyil { stroke: var(--navy-halk); stroke-width: 1.2; stroke-dasharray: 3 3; }
.szam { font-size: 26px; font-weight: 800; fill: var(--navy); letter-spacing: -0.02em; }
.szam-piros { fill: var(--piros); }
.szam-szoveg { font-size: 11px; fill: var(--navy-halk); }

/* 5. lépések */
.lepesek { display: grid; gap: 1.7rem; }
.lepes { background: #fff; border: 1px solid var(--vonal); border-radius: var(--sugar); padding: 1.3rem; position: relative; }
.lepes-szam {
	position: absolute; top: -0.8rem; left: 1.2rem;
	border-radius: 3px; background: var(--sarga); color: var(--navy);
	display: inline-flex; align-items: baseline; gap: 0.3rem;
	padding: 0.2rem 0.55rem; font-size: 0.78rem; font-weight: 800;
	font-variant-numeric: tabular-nums;
}
.lepes-szo { font-weight: 600; opacity: 0.75; }
.lepes-abra { margin: 0.7rem 0 1rem; }
.lepes h3 { margin-bottom: 0.45rem; }
.lepes p { color: var(--navy-halk); font-size: 0.95rem; }
.lepes .mit-jelent { font-size: 0.92rem; margin-bottom: 0; }
.mezo-cimke { font-size: 14px; fill: var(--navy-halk); font-weight: 700; letter-spacing: .06em; }
.mezo { fill: #fff; stroke: var(--navy); stroke-width: 1.6; }
.mezo-ertek { font-size: 15px; fill: var(--navy); font-weight: 600; }
.gomb-forma { fill: var(--navy); }
.gomb-szoveg { font-size: 14px; fill: #fff; font-weight: 700; text-anchor: middle; }
.javaslat { fill: var(--tort); stroke: var(--vonal); stroke-width: 1; }
.vt-sor { fill: var(--tort); }
.vt-pont.vt-1 { fill: var(--piros); }
.vt-pont.vt-2 { fill: var(--sarga-sotet); }
.vt-pont.vt-3 { fill: var(--zold); }
.lepes-abra .nevsav { fill: #b9c2d4; }
.bontas-sor { fill: var(--tort); }
.lepes-abra .leiras, .ut .leiras { fill: #b9c2d4; }
.jel-zold { fill: var(--zold); }
.jel-piros { fill: var(--piros); }

/* 5b. mit merunk -- logos tablazat, Lead brief #438 negyedik kiegeszitese,
   2026-08-14. */
.abra-mitmerunk { margin: 1.6rem 0; overflow-x: auto; }
/* A tablazat (logo + modell-nev + pipa/iksz oszlop) 390px-en szelesebb, mint a
   nezet -- ITT, a sajat figure-jeben gorgethesse magat, ne a body-t nyujtsa.
   brief-mate-zsarlaszlo-osszefesules-plusz-hiba-sulyossagu-kilogas-0912,
   lap-atvetel.cjs kilogo (airadar.siposzoltain.hu, geo-figyelo.siposzoltain.hu,
   ugyanaz a sablon). */
.mm-tabla { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--vonal); border-radius: var(--sugar); overflow: hidden; }
.mm-tabla th { text-align: left; font-size: 0.78rem; font-weight: 700; color: var(--navy-halk); text-transform: uppercase; letter-spacing: 0.03em; padding: 0.7rem 1rem; border-bottom: 2px solid var(--navy); }
.mm-tabla td { padding: 0.8rem 1rem; border-bottom: 1px solid var(--racs); font-size: 0.92rem; color: var(--navy); vertical-align: middle; }
.mm-tabla tr:last-child td { border-bottom: 0; }
.mm-jel { display: flex; align-items: center; gap: 0.6rem; font-weight: 700; }
.mm-jel img { height: 20px; width: auto; max-width: 90px; object-fit: contain; flex: none; }
.mm-nev-szoveges { font-weight: 700; color: var(--navy); }
.mm-modell { font-family: ui-monospace, "SF Mono", Consolas, monospace; font-size: 0.82rem; color: var(--navy-halk); }
.mm-pipa { color: var(--zold); font-weight: 800; font-size: 1.15rem; text-align: center; }
.mm-iksz { color: var(--piros); font-weight: 800; font-size: 1.15rem; text-align: center; }

/* 6. ki látszik helyetted, HTML-tábla */
.abra-tabla { background: #fff; border-radius: var(--sugar); padding: 1.1rem; color: var(--navy); }
/* Mobilon egymas ala kerul a kerdes meg a ceg: a ceg-doboz a favikonnal egyutt
   nem fer el 390 keppontnal egy sorban, kilogott a nezetbol. */
.tabla-fej {
	display: grid; grid-template-columns: 1fr; gap: 0.8rem;
	font-size: 0.8rem; letter-spacing: 0;
	font-weight: 700; color: var(--navy-halk); padding: 0 0 0.5rem;
	border-bottom: 2px solid var(--navy);
}
.tabla-fej span:last-child { display: none; }
.tabla li {
	display: grid; grid-template-columns: 1fr; gap: 0.45rem; align-items: start;
	padding: 0.6rem 0; border-bottom: 1px solid var(--racs); font-size: 0.93rem;
}
@media (min-width: 760px) {
	.tabla-fej { grid-template-columns: 1fr auto; }
	.tabla-fej span:last-child { display: block; }
	.tabla li { grid-template-columns: 1fr auto; gap: 0.8rem; align-items: center; padding: 0.55rem 0; }
}
.tabla .k { color: var(--navy); }
.tabla .v, .zaro-tabla .v {
	font-size: 0.8rem; font-weight: 700; padding: 0.18rem 0.55rem; border-radius: 4px;
	white-space: normal; justify-self: start;
}
@media (min-width: 760px) { .zaro-tabla .v { white-space: nowrap; } }
.v-mas { background: var(--piros-halk); color: var(--piros); }
.v-te { background: var(--zold-halk); color: var(--zold); }

/* A megnevezett ceg a sajat favikonjaval all a sorban. A favikon a hitelesites:
   Peec AI is igy hozza be a versenytars-tablat, plusz ettol hiszi el az olvaso,
   hogy valodi mereset lat, nem kitalalt neveket. */
.v-ceg {
	display: flex; align-items: center; gap: 0.55rem; background: var(--tort);
	border: 1px solid var(--vonal); border-radius: 7px; padding: 0.3rem 0.6rem 0.3rem 0.35rem;
	white-space: normal; max-width: 17rem;
}
.favikon {
	width: 26px; height: 26px; flex: none; border-radius: 5px; background: #fff;
	border: 1px solid var(--racs); object-fit: contain; padding: 2px;
}
.v-nev {
	display: flex; flex-direction: column; line-height: 1.25;
	font-size: 0.83rem; font-weight: 700; color: var(--navy);
}
.v-domain { font-size: 0.7rem; font-weight: 600; color: var(--navy-halk); letter-spacing: 0.01em; }
.sor-te .v-te { white-space: normal; }

/* 7. idősor */
.abra-idosor { background: var(--tort); border: 1px solid var(--vonal); border-radius: var(--sugar); padding: 1rem; }
.racs line { stroke: var(--racs); stroke-width: 1; }
.tengely-felirat text { font-size: 13px; fill: var(--navy-halk); text-anchor: end; }
.tengely-felirat .balra { text-anchor: start; }
.tengely-felirat .jobbra { text-anchor: end; }
.vonal { fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.vonal-sajat { stroke: var(--navy); }
.vonal-vt { stroke: var(--piros); stroke-width: 1.8; stroke-dasharray: 5 4; opacity: .85; }
.vonal-vt2 { stroke: var(--sarga-sotet); stroke-width: 1.8; stroke-dasharray: 2 4; opacity: .85; }
.terulet { fill: url(#alaszin); }
.veg-pont { fill: var(--sarga); stroke: var(--navy); stroke-width: 2.4; }
.jelolt-nap { fill: var(--piros); }
.jelolo-vonal { stroke: var(--piros); stroke-width: 1.2; stroke-dasharray: 3 3; }
.ertesito-doboz { fill: #fff; stroke: var(--piros); stroke-width: 1.5; }
.ertesito-cimke { font-size: 13px; fill: var(--piros); font-weight: 700; letter-spacing: .04em; }
.ertesito-szoveg { font-size: 13px; fill: var(--navy); }
.abra-jelmagyarazat { display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; margin-top: 0.5rem; font-size: 0.78rem; color: var(--navy-halk); }
.jel { display: flex; align-items: center; gap: 0.4rem; }
.jel::before { content: ""; width: 16px; height: 3px; border-radius: 2px; }
.jel-sajat::before { background: var(--navy); }
.jel-vt::before { background: var(--piros); }
.jel-vt2::before { background: var(--sarga-sotet); }

/* 8. két út */
.ket-ut { display: grid; gap: 1.1rem; margin: 1.8rem 0 0; }
.ut { background: #fff; border: 1px solid var(--vonal); border-radius: var(--sugar); padding: 1.2rem; }
.ut h3 { margin-bottom: 0.8rem; }
.ut svg { margin-bottom: 0.8rem; }
/* Korabban itt ket rajzolt vazlat allt, egyetlen olvashato szo nelkul. Most
   ugyanaz a tartalom szoveggel all, tehat mond is valamit. */
.bontas-lista, .munka-lista { margin: 0 0 0.9rem; padding: 0; }
.bontas-lista { list-style: none; }
.bontas-lista li {
	display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
	background: var(--tort); border: 1px solid var(--vonal); border-radius: 7px;
	padding: 0.42rem 0.6rem; margin-bottom: 0.35rem; font-size: 0.85rem;
}
.jel {
	flex: none; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.04em;
	padding: 0.14rem 0.45rem; border-radius: 4px;
}
.jel-piros { background: var(--piros); color: #fff; fill: var(--piros); }
.munka-lista { padding-left: 1.15rem; }
.munka-lista li { font-size: 0.88rem; color: var(--navy); margin-bottom: 0.32rem; }
.ut p { color: var(--navy-halk); font-size: 0.94rem; margin: 0; }
.lista-kor { fill: var(--navy); }
.lista-szam { font-size: 10px; fill: #fff; font-weight: 700; text-anchor: middle; }

/* 9. kizárások, szándékosan kép nélkül */
.kizarasok { display: grid; gap: 1rem; max-width: 52rem; }
.kizaras { background: var(--tort); border-left: 4px solid var(--navy-halk); border-radius: 0 6px 6px 0; padding: 1.1rem 1.2rem; }
.kizaras h3 { margin-bottom: 0.4rem; font-size: 1rem; }
.kizaras p { margin: 0; color: var(--navy-halk); font-size: 0.95rem; }

/* 10. csomagok */
.csomagok { display: grid; gap: 1.1rem; align-items: stretch; }
.csomag { background: #fff; border: 1px solid var(--vonal); border-radius: var(--sugar); padding: 1.5rem 1.3rem; display: flex; flex-direction: column; position: relative; }
.csomag-kiemelt { border: 2px solid var(--navy); box-shadow: 0 14px 34px rgba(15,28,56,.13); }
.csomag-cimke {
	position: absolute; top: -0.75rem; left: 1.3rem; background: var(--sarga); color: var(--navy);
	font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0; font-weight: 800;
	padding: 0.2rem 0.6rem; border-radius: 3px;
}
.csomag h3 { font-size: 1.18rem; }
.ar { display: flex; align-items: baseline; gap: 0.35rem; margin: 0.5rem 0 1rem; }
.ar-szam { font-size: 1.95rem; }
.ar-egyseg { font-size: 0.88rem; color: var(--navy-halk); font-weight: 600; }
/* Eves ar a havi alatt (Lead brief #438 otodik kiegeszitese, 2026-08-14).
   Az eves dij a havi TIZSZERESE, tehat ket honap ajandek: ezt a jelolo
   mondja ki a szam mellett, mert ez az erv, nem a szam maga. */
.ar-evi { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.5rem; margin: -0.7rem 0 1rem; }
.ar-evi-szam { font-size: 0.95rem; font-weight: 700; color: var(--navy); }
.ar-evi-jel {
	font-size: 0.72rem; font-weight: 800; letter-spacing: 0.01em;
	color: var(--zold); background: var(--zold-halk);
	padding: 0.14rem 0.45rem; border-radius: 4px;
}
.csomag-sorok { border-top: 1px solid var(--racs); margin-bottom: 1rem; }
.csomag-sorok > div { display: flex; justify-content: space-between; gap: 0.8rem; padding: 0.4rem 0; border-bottom: 1px solid var(--racs); font-size: 0.92rem; }
.csomag-sorok dt { color: var(--navy-halk); }
.csomag-sorok dd { margin: 0; font-weight: 700; }
.kiemelt-sor { background: var(--tort); margin: 0 -0.5rem; padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
.csomag-mondat { font-size: 0.9rem; color: var(--navy-halk); }
.ar-labjegyzet { font-size: 0.88rem; color: var(--navy-halk); margin-top: 1.2rem; max-width: 44rem; }
/* A probaido-kartya cimkeje nem versenyez a fizetos csomageval: ugyanaz a forma,
   halkabb szin. Ket kartyanal a racs is ketosztatu, kulonben a masodik elfekszik. */
.csomag-cimke-halk { background: var(--tort); color: var(--navy-halk); border: 1px solid var(--vonal); }

/* 11. gyik */
.gyik { display: grid; gap: 0.55rem; max-width: 48rem; }
.gyik details { border: 1px solid var(--vonal); border-radius: var(--sugar); background: #fff; }
.gyik summary {
	cursor: pointer; padding: 1.05rem 1.15rem; font-weight: 700; list-style: none;
	display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.gyik summary::-webkit-details-marker { display: none; }
.gyik summary::after { content: "+"; font-size: 1.3rem; color: var(--navy-halk); line-height: 1; }
.gyik details[open] summary::after { content: "\2212"; }
.gyik p { padding: 0 1.15rem 1.05rem; margin: 0; color: var(--navy-halk); }

/* 12. záró */
.zaro { background: var(--navy); color: #fff; padding: 4.2rem 1.1rem; }
.zaro-belso { max-width: 44rem; margin: 0 auto; text-align: center; }
.zaro h2 { margin-bottom: 1rem; }
.zaro p { color: #c8d0e0; }
/* A korabbi .abra-zarotabla (a 6. szakasz tablajanak szo szerinti ismetlese)
   TOROLVE 2026-08-14 (Felix, Lead brief #438 plusz kiegeszites): ugyanaz a harom
   kerdes-ceg par allt itt masodszor, ugyanazokkal a favikonokkal. A helyere a
   Lead altal kert szembeallito abra kerult: talalati oldal azelott plusz az
   AI-valasz ma. Rajzolt SVG, nem kepernyokep, nincs benne kitalalt cegnev -- a
   valodi, cegnevvel alatamasztott peldak fentebb, a 2. plusz a 6. szakaszban
   allnak. */
.abra-szembeallitas {
	margin: 1.8rem auto; text-align: left; max-width: 44rem;
}
.abra-szembeallitas figcaption {
	font-size: 0.8rem; font-weight: 700; color: #9fabc2; text-align: center;
	margin-bottom: 0.7rem; letter-spacing: 0;
}
.szem-cimke { font-size: 12.5px; font-weight: 700; fill: #9fabc2; }
.szem-lablec { font-size: 11.5px; fill: #9fabc2; }
.szem-lablec-kiemelt { font-size: 11.5px; font-weight: 700; fill: var(--sarga); }
/* Bal oldal: valodi feher kartya, mint egy tenyleges talalati oldal. */
.szem-lap-hattere { fill: #fff; }
.szem-sav-hattere { fill: var(--tort); stroke: var(--vonal); stroke-width: 1; }
.szem-sav-jel { fill: var(--navy); opacity: .26; }
.szem-nagyito { stroke: var(--navy-halk); stroke-width: 2; fill: none; }
.szem-url { fill: var(--zold); opacity: .85; }
.szem-cim { fill: var(--navy); }
.szem-sor { fill: var(--navy); opacity: .18; }
/* Jobb oldal: kulon, vilagosabb navy kartya, hogy elusszon a zaro sotet hattertol. */
.szem-doboz { fill: var(--navy-3); }
.szem-prozasor { fill: rgba(248,244,238,.4); }
.szem-sor-doboz { fill: rgba(248,244,238,.08); }
.szem-pont { fill: var(--zold); }
.szem-sor-jel { fill: rgba(248,244,238,.5); }
.szem-nyil { stroke: var(--piros); stroke-width: 2; }
.figlegal { font-size: 0.72rem; color: #7c88a3; margin: 0.6rem 0 0; font-style: italic; }
@media (min-width: 760px) {
	.zt-fejsor { grid-template-columns: 1fr auto; }
	.zt-fejsor span:last-child { display: block; }
	.zt-sorok li { grid-template-columns: 1fr auto; gap: 0.9rem; align-items: center; }
}
.zaro .gomb-fo { background: var(--sarga); color: var(--navy); }
.zaro .gomb-fo:hover { background: var(--sarga-sotet); }

/* Mibol all egy meres: tiz kerdes gepenkent. A kockak sorra jelennek meg, mert
   a szamuk maga az uzenet: a szem megszamolja oket, ha egymas utan erkeznek. */
.lf-kocka { fill: var(--navy); opacity: .88; }
.lf-osszeg { font-size: 15px; fill: var(--navy-halk); font-weight: 700; }
.mozgas-kesz .abra-lefedes .lf-kocka { opacity: .18; }
.mozgas-kesz .abra-lefedes.lat .lf-kocka { animation: kocka-be .34s ease-out forwards; }
.mozgas-kesz .abra-lefedes.lat .lf-sor .lf-kocka:nth-child(1) { animation-delay: .02s }
.mozgas-kesz .abra-lefedes.lat .lf-sor .lf-kocka:nth-child(2) { animation-delay: .06s }
.mozgas-kesz .abra-lefedes.lat .lf-sor .lf-kocka:nth-child(3) { animation-delay: .10s }
.mozgas-kesz .abra-lefedes.lat .lf-sor .lf-kocka:nth-child(4) { animation-delay: .14s }
.mozgas-kesz .abra-lefedes.lat .lf-sor .lf-kocka:nth-child(5) { animation-delay: .18s }
.mozgas-kesz .abra-lefedes.lat .lf-sor .lf-kocka:nth-child(6) { animation-delay: .22s }
.mozgas-kesz .abra-lefedes.lat .lf-sor .lf-kocka:nth-child(7) { animation-delay: .26s }
.mozgas-kesz .abra-lefedes.lat .lf-sor .lf-kocka:nth-child(8) { animation-delay: .30s }
.mozgas-kesz .abra-lefedes.lat .lf-sor .lf-kocka:nth-child(9) { animation-delay: .34s }
.mozgas-kesz .abra-lefedes.lat .lf-sor .lf-kocka:nth-child(10) { animation-delay: .38s }
@keyframes kocka-be { from { opacity: .18; transform: translateY(4px) } to { opacity: .88; transform: none } }

/* Csomag-lefedes: melyik csomag melyik gepet meri. */
.abra-lefedes {
	margin: 1.8rem auto 0; max-width: 44rem; background: #fff; border: 1px solid var(--vonal);
	border-radius: var(--sugar); padding: 1.1rem 1.2rem;
}
.lf-fej { font-size: 15px; fill: var(--navy-halk); font-weight: 700; letter-spacing: .04em; }
.lf-nev { font-size: 15px; fill: var(--navy); font-weight: 700; }
.lf-kiemelt { fill: var(--navy); font-weight: 800; }
.lf-vonal { stroke: var(--racs); stroke-width: 1; }
.lf-vastag { stroke: var(--navy); stroke-width: 1.6; }
.lf-be { fill: var(--zold-halk); stroke: var(--zold); stroke-width: 1.4; }
.lf-ki { fill: var(--piros-halk); stroke: var(--piros); stroke-width: 1.4; }
.lf-pipa { stroke: var(--zold); stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.lf-x { stroke: var(--piros); stroke-width: 1.6; fill: none; stroke-linecap: round; }
.lefedes-mobil { display: block; margin: 0; }
.lefedes-mobil div {
	display: flex; justify-content: space-between; gap: 0.8rem; align-items: baseline;
	padding: 0.5rem 0; border-bottom: 1px solid var(--racs);
}
.lefedes-mobil div:last-child { border-bottom: 0; }
.lefedes-mobil dt { font-weight: 800; color: var(--navy); font-size: 0.92rem; }
.lefedes-mobil dd { margin: 0; font-size: 0.83rem; color: var(--navy-halk); text-align: right; }
@media (min-width: 620px) {
	.lefedes-mobil { display: none; }
}
@media (max-width: 619px) {
	.abra-lefedes svg { display: none; }
}

/* A zaro tablaban a favikon nagyobb: 26 kepponton a szem atsiklott rajta. */
.zt-v .favikon { width: 40px; height: 40px; }

/* --- lábléc --- */

.lablec { max-width: var(--sav); margin: 0 auto; padding: 2rem 1.1rem 3rem; font-size: 0.86rem; }
.lablec p { margin: 0 0 0.25rem; }
.lablec-marka { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.5rem; }
.lablec-marka img { height: 32px; width: auto; }
.lablec-marka span {
	font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0; font-weight: 700;
	color: var(--navy); background: var(--sarga); padding: 0.16rem 0.45rem; border-radius: 3px;
}
.lablec .halk { color: var(--navy-halk); font-size: 0.79rem; max-width: 44rem; }

/* --- mozgás: görgetésre indul, elemenként egyszer --- */

.mozgas-kesz [data-mozgas] { opacity: 0; transform: translateY(14px); }
.mozgas-kesz [data-mozgas].lat { opacity: 1; transform: none; transition: opacity .5s ease, transform .5s ease; }

/* a vonalak felrajzolása */
.mozgas-kesz .abra-idosor .vonal { stroke-dasharray: var(--hossz); stroke-dashoffset: var(--hossz); }
.mozgas-kesz .abra-idosor.lat .vonal { transition: stroke-dashoffset 1.6s ease .15s; stroke-dashoffset: 0; }
.mozgas-kesz .abra-idosor .terulet,
.mozgas-kesz .abra-idosor .veg-pont,
.mozgas-kesz .abra-idosor .ertesito { opacity: 0; }
.mozgas-kesz .abra-idosor.lat .terulet { transition: opacity .7s ease 1.2s; opacity: 1; }
.mozgas-kesz .abra-idosor.lat .veg-pont { transition: opacity .35s ease 1.6s; opacity: 1; }
.mozgas-kesz .abra-idosor.lat .ertesito { transition: opacity .45s ease 1.85s; opacity: 1; }

/* a válasz sorról sorra épül fel, EGYSZER */
.mozgas-kesz .abra-buborek .sor { opacity: 0; }
.mozgas-kesz .abra-buborek.lat .sor { animation: beussz .45s ease forwards; }
.mozgas-kesz .abra-buborek.lat .sor-1 { animation-delay: .3s; }
.mozgas-kesz .abra-buborek.lat .sor-2 { animation-delay: .65s; }
.mozgas-kesz .abra-buborek.lat .sor-3 { animation-delay: 1s; }
.mozgas-kesz .abra-buborek.lat .sor-4 { animation-delay: 1.5s; }
@keyframes beussz { from { opacity: 0; } to { opacity: 1; } }

/* a nyolc kieső találat elhalványul */
.mozgas-kesz .abra-tizbolegy .fakul { opacity: 1; }
.mozgas-kesz .abra-tizbolegy.lat .fakul { transition: opacity .8s ease .4s; opacity: .22; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.mozgas-kesz [data-mozgas] { opacity: 1; transform: none; }
	.mozgas-kesz .abra-idosor .vonal { stroke-dashoffset: 0; }
	.mozgas-kesz .abra-idosor .terulet,
	.mozgas-kesz .abra-idosor .veg-pont,
	.mozgas-kesz .abra-idosor .ertesito { opacity: 1; }
	.mozgas-kesz .abra-buborek .sor { opacity: 1; }
	.mozgas-kesz .abra-buborek.lat .sor { animation: none; }
	.mozgas-kesz .abra-lefedes .lf-kocka { opacity: .88; }
	.mozgas-kesz .abra-lefedes.lat .lf-kocka { animation: none; }
	.mozgas-kesz .abra-tizbolegy.lat .fakul { transition: none; opacity: .3; }
	.gomb:hover { transform: none; }
}

/* --- töréspontok --- */

@media (min-width: 760px) {
	.szakasz, .szakasz-tort, .szakasz-sotet, .hos, .zaro { padding-left: 1.5rem; padding-right: 1.5rem; }
	/* 2026-08-15, meres: 3 oszlopon 760-1123 kozott a lepes-abra doboza a
	   viewBox ALA szukult (a kapu 300-as viewBoxhoz kepest apro dobozt mert),
	   tehat a feliratok 11 keppont ala estek. Ket oszlop 1170-ig, harom csak
	   utana, ahol a szakasz mar a sajat max-szelesseget eri el, tehat a doboz
	   nem szukulhet tovabb. */
	.lepesek { grid-template-columns: repeat(2, 1fr); }
	.csomagok { grid-template-columns: repeat(3, 1fr); }
	/* Ket kartya harom oszlopban elfekudne, ezert sajat racs jar neki. */
	.csomagok-ketto { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 46rem; }
	.ket-ut { grid-template-columns: repeat(2, 1fr); }
	.kizarasok { grid-template-columns: repeat(2, 1fr); }
	.tabla li, .zaro-tabla li { font-size: 0.95rem; }
}

@media (min-width: 1170px) {
	.lepesek { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1020px) {
	.hos-racs { grid-template-columns: 1.05fr 1fr; align-items: center; gap: 3rem; }
	.ketoszlop { display: grid; grid-template-columns: 1fr 1fr; gap: 2.6rem; align-items: center; }
	.ketoszlop .szoveg-hasab { max-width: none; }
}

/* A hos jobb oszlopa: Vera hos-videoja, 2026-08-15 ota elesben. Az aranyt a
   dobozon aliitjuk, ugyanazokon a toresponton, ahol a <source media> valt:
   1020 folott 16:9, 760-1019 kozott 1:1, alatta 4:5. object-fit:cover, hogy
   a poszter plusz a video ne torzuljon, ha a doboz aranya nem pontosan
   egyezik a klipevel. */
.hos-video-lejatszo {
	display: block; width: 100%; height: auto; aspect-ratio: 4 / 5;
	object-fit: cover; border-radius: var(--sugar); background: var(--navy);
	box-shadow: 0 10px 30px rgba(15,28,56,.16);
}
@media (min-width: 760px) {
	.hos-video-lejatszo { aspect-ratio: 1 / 1; }
}
@media (min-width: 1020px) {
	.hos-video-lejatszo { aspect-ratio: 16 / 9; }
}

/* Gomb plusz ritmus-jegyzet a "Harom lepes" szakasz alatt. */
.gombsor-kozep { margin-top: 1.6rem; text-align: center; }
.gomb-jegyzet { margin: 0.7rem auto 0; max-width: 30rem; font-size: 0.82rem; color: var(--navy-halk); }

/* A zaro CTA-blokk SZO SZERINT ugyanaz, mint a hos alatti: ugyanaz a gombszoveg,
   ugyanaz a harom kockazat-oldo pont. Egy lap, egy cselekves. */
.zaro .kockazat { justify-content: center; margin-top: 1rem; color: #b9c4d8; }
.zaro .kockazat li::before { background: rgba(46,158,107,.25); box-shadow: inset 0 0 0 1.5px var(--sarga); }

/* A vp-* kartya-vaz eredetileg a TELJES hos-kep kerete volt (a vezerlopult
   kerdesenkenti bontasanak KEPERNYOKEPE); 2026-08-15-ben Zoltan ezt "csunya
   hajtas folott"-kent utasitotta el (suru, apro betus screenshot), a hos akkor
   videora valtott, a vaz itt maradt hasznalat nelkul. 2026-08-31-ben a mini
   eredmeny-elonezet kartya (.mini-eredmeny) ujra hasznalja a vp-fej/vp-keret/
   vp-labjegyzet kulsot, DE a belseje mar nem kep, hanem valodi HTML/CSS -- igy a
   szoveg akkora, amekkorat akarunk, sosem "apro betus". A .vp-kep (nyers <img>
   stilus) mar senkinek nem kell, ezert torolve. */
.abra-vp { display: flex; flex-direction: column; }
.vp-fej {
	display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
	background: var(--navy); color: #fff; padding: 0.55rem 0.95rem;
	border-radius: var(--sugar) var(--sugar) 0 0;
}
.vp-cimke { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.04em; }
.vp-jel { font-size: 0.7rem; color: #a9b6cd; font-weight: 600; }
.vp-keret {
	border: 1px solid var(--vonal); border-top: 0; border-radius: 0 0 var(--sugar) var(--sugar);
	overflow: hidden; background: #fff; box-shadow: 0 10px 30px rgba(15,28,56,.1);
}
.vp-labjegyzet { margin-top: 0.6rem; font-size: 0.74rem; line-height: 1.5; color: var(--navy-halk); font-style: italic; }

/* A hos jobb oldali doboza a video ALATT: mini eredmeny-elonezet, 2026-08-31,
   Lead brief (msg 30456). A doboz a video alatt ures maradt, semmi nem mutatta
   meg elore, MIT ad a termek gorgetes elott. Az adat VALODI meres, ugyanaz,
   amit a kep/vezerlopult.jpg is mutat: egy magyar konyveloiroda 2026.08.02-i
   kerdese. */
.hos-vizual { display: flex; flex-direction: column; gap: 1.1rem; }
.mini-test { padding: 0.95rem 1rem 1rem; }
.mini-cimke-mezo {
	font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em;
	font-weight: 800; color: var(--navy-halk); margin: 0 0 0.3rem;
}
.mini-kerdes { margin: 0 0 0.85rem; font-size: 0.95rem; font-weight: 700; color: var(--navy); line-height: 1.4; }
.mini-statsor { display: flex; gap: 1.8rem; margin: 0 0 0.9rem; }
.mini-stat dt {
	font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em;
	font-weight: 800; color: var(--navy-halk); margin: 0 0 0.2rem;
}
.mini-stat dd { margin: 0; font-weight: 800; font-size: 1rem; color: var(--navy); }
.mini-stat dd.nem { color: var(--piros); }
.mini-stat dd.igen { color: var(--zold); }
.mini-chip-lista { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.35rem 0 0; padding: 0; list-style: none; }
.mini-chip {
	font-size: 0.78rem; font-weight: 600; color: var(--navy-halk);
	background: var(--tort); border: 1px solid var(--vonal); border-radius: 5px;
	padding: 0.28rem 0.55rem;
}

/* Idovonal a "Harom lepes" szakaszban: a beallitas ket perc, a tobbi mar meres.
   A ket sav hossza aranyos: az elso harmad a latogatoe, a tobbi a miénk. */
.abra-idovonal {
	margin: 1.8rem auto 0; max-width: 44rem; background: #fff; border: 1px solid var(--vonal);
	border-radius: var(--sugar); padding: 1.5rem 1.4rem 1.2rem;
}
.iv-tengely { stroke: var(--racs); stroke-width: 2; }
.iv-pont { fill: #fff; stroke: var(--navy-halk); stroke-width: 2; }
.iv-pont-fo { fill: var(--sarga); stroke: var(--navy); stroke-width: 2.4; }
.iv-ido { font-size: 15px; font-weight: 800; fill: var(--navy); text-anchor: middle; }
.iv-ido-fo { fill: var(--navy); }
.iv-cimke { font-size: 15px; fill: var(--navy-halk); text-anchor: middle; }
.iv-sav { fill: var(--racs); }
.iv-sav-mi { fill: var(--sarga); }
.iv-sav-cimke { font-size: 15px; font-weight: 800; fill: var(--navy-halk); letter-spacing: .04em; }
/* A ket szelso felirat kilogna a keretbol, ezert azok a tengely vege fele huznak. */
.iv-pont-csoport:first-of-type .iv-ido,
.iv-pont-csoport:first-of-type .iv-cimke { text-anchor: start; }
.iv-pont-csoport:last-of-type .iv-ido,
.iv-pont-csoport:last-of-type .iv-cimke { text-anchor: end; }
/* Gorgetesre a pontok balrol jobbra allnak be: az idorendet a mozgas iranya mondja. */
.mozgas-kesz .abra-idovonal .iv-pont-csoport { opacity: 0; }
.mozgas-kesz .abra-idovonal.lat .iv-pont-csoport { animation: iv-be .38s ease-out forwards; }
.mozgas-kesz .abra-idovonal.lat .iv-pont-csoport:nth-of-type(1) { animation-delay: .05s }
.mozgas-kesz .abra-idovonal.lat .iv-pont-csoport:nth-of-type(2) { animation-delay: .17s }
.mozgas-kesz .abra-idovonal.lat .iv-pont-csoport:nth-of-type(3) { animation-delay: .29s }
.mozgas-kesz .abra-idovonal.lat .iv-pont-csoport:nth-of-type(4) { animation-delay: .41s }
.mozgas-kesz .abra-idovonal.lat .iv-pont-csoport:nth-of-type(5) { animation-delay: .53s }
@keyframes iv-be { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: none } }
@media (prefers-reduced-motion: reduce) {
	.mozgas-kesz .abra-idovonal .iv-pont-csoport { opacity: 1; }
	.mozgas-kesz .abra-idovonal.lat .iv-pont-csoport { animation: none; }
}

/* A javitas-kor: negy allomas, a negyedikbol vissza az elsobe. A harmadik doboz
   kap kiemelest, mert az a szakasz temaja. Szam nincs rajta, mert a valtozas
   merteke a latogato sajat mereseibol jon, nem a mi igeretunkbol. */
.abra-kor {
	margin: 1.8rem auto 0; max-width: 44rem; background: #fff; border: 1px solid var(--vonal);
	border-radius: var(--sugar); padding: 1.4rem 1.4rem 1rem;
}
.kor-doboz { fill: var(--tort); stroke: var(--vonal); stroke-width: 1; }
.kor-doboz-fo { fill: #fff; stroke: var(--navy); stroke-width: 2; }
.kor-szam { font-size: 15px; font-weight: 800; fill: var(--sarga-sotet); }
.kor-cim { font-size: 15px; font-weight: 800; fill: var(--navy); }
.kor-nyil { stroke: var(--navy-halk); stroke-width: 1.6; fill: none; marker-end: none; }
.kor-vissza { stroke-dasharray: 4 4; }
.kor-vissza-cimke { font-size: 15px; fill: var(--navy-halk); text-anchor: middle; }
.mozgas-kesz .abra-kor .kor-lepes { opacity: 0; }
.mozgas-kesz .abra-kor.lat .kor-lepes { animation: iv-be .36s ease-out forwards; }
.mozgas-kesz .abra-kor.lat .kor-lepes:nth-of-type(1) { animation-delay: .05s }
.mozgas-kesz .abra-kor.lat .kor-lepes:nth-of-type(2) { animation-delay: .2s }
.mozgas-kesz .abra-kor.lat .kor-lepes:nth-of-type(3) { animation-delay: .35s }
.mozgas-kesz .abra-kor.lat .kor-lepes:nth-of-type(4) { animation-delay: .5s }
@media (prefers-reduced-motion: reduce) {
	.mozgas-kesz .abra-kor .kor-lepes { opacity: 1; }
	.mozgas-kesz .abra-kor.lat .kor-lepes { animation: none; }
}

/* --- Abrak keskeny kepernyon ---------------------------------------------
   Mert allapot 390 kepponton: az SVG-k feliratai 4-5,4 keppontra estek, mert a
   viewBox fele akkorara skalazodik. Az SVG-n beluli betumeret novelese nem
   megoldas, mert a szoveg helye fix koordinatan all, tehat egymasra futna.
   Ezert 620 keppont alatt ugyanaz az adat HTML-ben all, ahogy a csomag-abranal
   is. Ez a .abra-mobil blokk. */
.abra-mobil { display: block; margin: 0.9rem 0 0; }
.abra-mobil div {
	display: flex; gap: 0.9rem; align-items: baseline;
	padding: 0.5rem 0; border-bottom: 1px solid var(--racs);
}
.abra-mobil div:last-child { border-bottom: 0; }
.abra-mobil dt { font-weight: 800; color: var(--navy); font-size: 0.92rem; flex: none; min-width: 3.6rem; }
.abra-mobil dd { margin: 0; font-size: 0.86rem; color: var(--navy-halk); }
.abra-mobil-fo dt { color: var(--sarga-sotet); }
.abra-mobil-piros dt { color: var(--piros); }
@media (max-width: 619px) {
	.abra-idovonal svg:not(.venn-mobil),
	.abra-kor svg:not(.venn-mobil),
	.abra-szembeallitas svg,
	.abra-venn > svg:first-of-type { display: none; }
	/* 2026-08-15 meres: 720-as viewBox egy 285-355 keppontos mobil dobozban
	   0,40-0,49-es skalat adott, a 12,5-os felirat 4,5-4,9 keppontra esett.
	   Font-meretbol ezt nem lehetne kihozni (11/0,40 = 27,5px szetfeszitene a
	   rajzot), ezert itt is az idovonal/kor mintajat kovetjuk: a rajz eltunik,
	   ugyanaz az allitas HTML-listaban all mellette. */
	.abra-szembeallitas .szem-mobil { display: block; }
	/* Az idosornal a vonal marad, csak a beleirt szoveg megy at HTML-be. Az SVG
	   also savja (a rejtett ertesito-kartya helye) igy ures maradna: a viewBox
	   300 egysegebol az also 56 (18,7 szazalek), amit negativ margoval vagunk le. */
	/* A rejtes a SZOVEG-ELEMEKEN all, nem a korulottuk levo <g>-n: Chromium
	   getBBox()-a nem veszi figyelembe az OS elrejtett elemet, tehat egy
	   `<g style="display:none">` alatti szoveg meretei a lap-atvetel.cjs
	   meroje szamara VALODINAK latszanak (merve, 2026-08-15). Kozvetlenul a
	   szovegen allo display:none-t viszont mar korrektul nullanak meri. */
	.abra-idosor .ertesito text, .abra-idosor .tengely-felirat text { display: none; }
	.abra-idosor .ertesito rect { display: none; }
	.abra-idosor > svg { margin-bottom: -34px; }
}
/* A Venn allo valtozata: ugyanaz a ket kor, olvashato feliratokkal. */
.venn-mobil { display: block; max-width: 330px; margin: 0 auto; }
.vm-cimke { font-size: 13px; font-weight: 800; fill: var(--navy); text-anchor: start; }
.vm-jobb { text-anchor: end; }
.vm-metszet { font-size: 12px; fill: var(--navy-halk); text-anchor: middle; font-weight: 700; }
.venn-mobil-szamok { margin-top: 1rem; }
.venn-mobil-szamok dt { font-size: 1.3rem; min-width: 3.4rem; }
/* Az idosor ertesitoje mobilon: ugyanaz a mondat, olvashato meretben. */
.ertesito-mobil {
	margin-top: 0.9rem; border: 1px solid var(--piros); border-left: 4px solid var(--piros);
	border-radius: 6px; background: var(--piros-halk); padding: 0.7rem 0.85rem;
}
.ertesito-mobil-cimke {
	display: block; font-size: 0.8rem; letter-spacing: 0;
	font-weight: 800; color: var(--piros); margin-bottom: 0.25rem;
}
.ertesito-mobil p { margin: 0; font-size: 0.88rem; color: var(--navy); }

/* Az elrejtes a blokk VEGEN all, kulonben a kesobbi .venn-mobil szabaly
   felulirja (azonos sulyu szelektorbol a kesobbi nyer). */
@media (min-width: 620px) {
	/* A szelektor sulya szandekosan a `.abra svg` (0,1,1) szintjen all, kulonben
	   az elrejtes alulmarad vele szemben, plusz az allo Venn asztalin is kint
	   maradna. Ezt merve talaltam meg: 1440-en 330 keppont szelesen ott allt. */
	.abra .abra-mobil, svg.venn-mobil, .abra .ertesito-mobil { display: none; }
	.abra-szembeallitas .szem-mobil { display: none; }
}
/* Sotet hatteren all (.zaro), tehat a szinei NEM az .abra-mobil vilagos
   parjat kovetik: 2026-08-15-on eloszor navy-t irtam navy hatterre, nulla
   kontraszttal, kepernyokeppel kiderult. */
.szem-mobil { display: none; margin: 0.9rem 0 0; text-align: left; }
.szem-mobil div {
	display: flex; gap: 0.9rem; align-items: baseline;
	padding: 0.5rem 0; border-bottom: 1px solid rgba(255,255,255,.14);
}
.szem-mobil div:last-child { border-bottom: 0; }
.szem-mobil dt { font-weight: 800; color: var(--sarga); font-size: 0.92rem; flex: none; min-width: 4.4rem; }
.szem-mobil dd { margin: 0; font-size: 0.86rem; color: #c8d0e0; }

/* Az allo Venn ket kor-felirata egy sorban egymasra futott, ezert kulon sorban
   all, plusz egy rovid mutato-vonal koti a sajat korehez. */
.vm-mutato { stroke: var(--navy-halk); stroke-width: 1; fill: none; }

/* --- A jelenet lejatszasa (2. szakasz) -----------------------------------
   Lead kerese: a valasz gepelve jelenjen meg, plusz a hianyzo ceg helye
   emelodjon ki. Eloszor karakterenkenti gepelest irtam clip-path-tal: az
   egysoros szovegen mukodik, tobb soron viszont fuggonykent vagja le a masodik
   sort is, plusz a kurzort maga a vagas tunteti el. Lemertem, ezert all itt a
   valodi felulet fogasa: eloszor pottyog a gepel-jelzes, aztan erkezik a valasz
   reszenkent. Minden EGYSZER fut le, a `.lat` felkerulese utan. */

/* Gepel-jelzes: harom pont, egymas utan emelkedik. */
.valasz-gepel { display: none; gap: 5px; margin: 0; padding: 0.9rem 0.95rem 0.5rem; }
.valasz-gepel span {
	width: 7px; height: 7px; border-radius: 50%; background: var(--navy-halk); display: block;
}
.mozgas-kesz .abra-ketoldal .valasz-gepel { display: flex; }
.mozgas-kesz .abra-ketoldal.lat .valasz-gepel { animation: gepel-el .25s ease 1.75s forwards; }
.mozgas-kesz .abra-ketoldal.lat .valasz-gepel span { animation: pottyan 1s ease-in-out infinite; }
.mozgas-kesz .abra-ketoldal.lat .valasz-gepel span:nth-child(2) { animation-delay: .16s; }
.mozgas-kesz .abra-ketoldal.lat .valasz-gepel span:nth-child(3) { animation-delay: .32s; }
@keyframes pottyan { 0%, 60%, 100% { transform: none; opacity: .45 } 30% { transform: translateY(-5px); opacity: 1 } }
/* A display nem minden bongeszoben animalhato, ezert a jelzes magassaga plusz
   az atlatszosaga viszi el: igy a regi bongeszoben sem marad ott a valasz alatt. */
@keyframes gepel-el { to { opacity: 0; height: 0; padding-top: 0; padding-bottom: 0; overflow: hidden; } }

/* A valasz reszei a gepel-jelzes UTAN erkeznek, egymas utan. */
.mozgas-kesz .abra-ketoldal .valasz-lepes { opacity: 0; }
.mozgas-kesz .abra-ketoldal.lat .valasz-lepes { animation: beussz .4s ease forwards; }
.mozgas-kesz .abra-ketoldal.lat .valasz-bevezeto { animation-delay: 1.9s; }
.mozgas-kesz .abra-ketoldal.lat .valasz-cegek li:nth-child(1) { animation-delay: 2.3s; }
.mozgas-kesz .abra-ketoldal.lat .valasz-cegek li:nth-child(2) { animation-delay: 2.6s; }
.mozgas-kesz .abra-ketoldal.lat .valasz-cegek li:nth-child(3) { animation-delay: 2.9s; }
/* A zaro sav a harom nev UTAN jon, plusz egyszer felvillan: ez a jelenet lenyege. */
.mozgas-kesz .abra-ketoldal.lat .valasz-hiany {
	animation: beussz .4s ease 3.4s forwards, hiany-villan 1.1s ease 3.8s 1;
}
@keyframes hiany-villan {
	0% { box-shadow: 0 0 0 0 rgba(191,30,45,.45); }
	60% { box-shadow: 0 0 0 8px rgba(191,30,45,0); }
	100% { box-shadow: 0 0 0 0 rgba(191,30,45,0); }
}

@media (prefers-reduced-motion: reduce) {
	.mozgas-kesz .abra-ketoldal .valasz-gepel { display: none; }
	.mozgas-kesz .abra-ketoldal .valasz-lepes { opacity: 1; }
	.mozgas-kesz .abra-ketoldal.lat .valasz-lepes,
	.mozgas-kesz .abra-ketoldal.lat .valasz-hiany { animation: none; }
}

/* --- Rajzolt Google-talalati lista (2. szakasz, bal oldal) -----------------
   Miert rajzolt: Google-helyezest nem merunk, tehat valodi kepernyokep sem
   allithat sorrendet. A sajat vevonk neve all ki az elso helyen, a tobbi talalat
   helye egyszinu sav, olvashatatlan betuk nelkul. Kitalalt cegnev sehol.
   A jeloles a fejlecben all, nem apro labjegyzetben: "illusztracio". */
.serp-rajz { background: #fff; border: 1px solid var(--vonal); border-radius: var(--sugar); padding: 0.9rem; }
.serp-mezo {
	display: flex; align-items: center; gap: 0.5rem; border: 1px solid var(--vonal);
	border-radius: 999px; padding: 0.5rem 0.9rem; margin-bottom: 0.9rem; background: var(--tort);
}
/* A Google sajat "G" jele a keresosavon, 2026-08-15 ota: Zoltan kerte, hogy
   a talalati abra logoval alljon, ugyanugy mint az angol GEO-audit lapon
   (en.kreativkontroll.hu/geo-package/). A fajl a Google sajat gstatic-eszkoze,
   valtozatlan aranyban, csak a keresofelulet azonositasara. */
.serp-google-jel { width: 22px; height: 22px; flex: none; }
.serp-mezo-szoveg { font-size: 0.84rem; color: var(--navy-halk); }
.serp-talalat {
	display: grid; grid-template-columns: 1.4rem 1.5rem 1fr auto; gap: 0.2rem 0.55rem;
	align-items: center; padding: 0.6rem 0; border-bottom: 1px solid var(--racs);
}
.serp-talalat:last-child { border-bottom: 0; }
.serp-hely { grid-row: span 2; font-size: 0.9rem; font-weight: 800; color: var(--navy-halk); }
.serp-talalat .favikon { grid-row: span 2; width: 26px; height: 26px; }
.serp-cim { font-weight: 800; font-size: 0.94rem; color: var(--navy); }
.serp-url { grid-column: 3; font-size: 0.8rem; color: var(--zold); font-weight: 600; }
.serp-te {
	grid-row: span 2; background: var(--zold-halk); color: #1c6b48; border: 1px solid var(--zold);
	font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0;
	padding: 0.15rem 0.5rem; border-radius: 3px;
}
.serp-talalat-tied { background: var(--zold-halk); margin: 0 -0.4rem; padding-left: 0.4rem; padding-right: 0.4rem; border-radius: 6px; }
/* A 2-10. hely: OLVASHATO osszegzo sor, nem ures skeleton-sav. A negy szurke
   csik abranak latszott, kozben egyetlen szot sem adott, plusz a lap azt
   mondta ra, hogy "kitakarva", holott nem volt mogotte semmi. */
.serp-tobbi {
	display: grid; grid-template-columns: 3.4rem 1fr; gap: 0.7rem;
	align-items: baseline; padding: 0.75rem 0 0.2rem;
	border-top: 1px dashed var(--vonal);
}
.serp-tobbi-hely { font-size: 0.9rem; font-weight: 800; color: var(--navy-halk); font-variant-numeric: tabular-nums; }
.serp-tobbi-szoveg { font-size: 0.88rem; color: var(--navy-halk); line-height: 1.5; }
.oldal-jel-illu { background: var(--tort); color: var(--navy-halk); border: 1px solid var(--vonal); border-radius: 3px; padding: 0.1rem 0.4rem; }
/* A ket oszlop kozos kerdese: ez koti ossze a ket felulet, tehat kiemelten all. */
.ketoldal-kerdes {
	max-width: 44rem; margin: 0 auto 1.4rem; text-align: center; font-weight: 800;
	font-size: 1.02rem; color: var(--navy);
}
.kk-cimke {
	display: block; font-size: 0.86rem; letter-spacing: 0;
	color: var(--navy-halk); font-weight: 700; margin-bottom: 0.25rem;
}

/* ============================================================================
   BAL-EL EGYSEGESITES (Felix, 2026-08-14, Lead brief #438 otodik kiegeszitese).

   Zoltan: "sokszor balra teljesen kicsuszik elemek, mikor a szoveg be van
   huzva". A lap-atvetel.cjs uj bal-el merese ezt szakaszonkent ki is mutatta:
   a fo bal el 154px, kozben ot szakasz 24, 44, 130, illetve 368 keppontnal
   kezdodott.

   AZ OK, nem izles-kerdes:
   - a sima .szakasz egy 1180 keppontos, KOZEPRE ZART dobozt csinal, amiben a
     gyerekek BALRA zarnak, tehat mind ugyanott, 154 keppontnal kezdodik;
   - a .szakasz-tort meg a .szakasz-sotet ezzel szemben teljes szelessegu (a
     hatterszin miatt), es a fenti 91. sor MINDEN GYEREKET KULON kozepre zar
     (margin-left:auto). Mivel a gyerekek sajat max-width-je kulonbozo
     (46rem fejlec, 40rem szoveg, 44rem abra, 1180 racs), mindegyik MAS
     bal elen all: 736-nal 352, 704-nel 368, 1180-nal 130.
   - raadasul minden kesobbi `margin: 0` illetve `margin: 1.6rem 0` rovidites
     (.abra, .ket-ut, .abra-mitmerunk) feluluta a 91. sor margin-left:auto-jat,
     ezert azok az elemek 24 keppontra, a padding szelere ugrottak.

   A JAVITAS: a gyerekeket nem kozepre zarjuk, hanem ugyanahhoz a savhoz
   igazitjuk balra, mint a sima .szakasz-ban, tehat a sav bal ele mindenhol
   ugyanoda esik. A gyerekek SAJAT max-width-jehez nem nyulunk, csak a bal
   margojukhoz, tehat a keskenyebb szovegoszlopok keskenyek maradnak, csak
   balra zarnak, ahogy a sima szakaszokban is.

   A duplazott osztalynev (.szakasz-tort.szakasz-tort) csak fajsulyt ad, hogy
   a fenti `margin` roviditeseket is felulirja, !important nelkul.
   ========================================================================== */
.szakasz-tort.szakasz-tort > *,
.szakasz-sotet.szakasz-sotet > * {
	margin-left: max(0px, calc((100% - (var(--sav) - 3rem)) / 2));
	margin-right: auto;
}

/* ============================================================================
   HOGYAN MERUNK ALOLDAL (2026-08-15). A landingrol levett szakertoi anyag uj
   helye: kulon cim, /lp/hogyan-merunk.html, a fajlkiszolgalo nem old fel
   konyvtar-indexet, ezert .html vegzodessel. Ugyanaz a design-rendszer, mint
   a landingen. ============================================================ */
.merunk-fej { padding-top: 3.4rem; }
.merunk-fej h1 { margin: 0.4rem 0 0.8rem; }
.sm-korok { margin: 0.4rem 0 0; font-size: 0.78rem; color: var(--navy-halk); }

.merunk-tabla-keret { overflow-x: auto; margin: 1.4rem 0 0.8rem; }
.merunk-tabla { border-collapse: collapse; width: 100%; min-width: 32rem; background: #fff; }
.merunk-tabla th, .merunk-tabla td {
	text-align: left; padding: 0.65rem 0.9rem; border-bottom: 1px solid var(--racs); font-size: 0.92rem;
}
.merunk-tabla th { font-size: 0.74rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--navy-halk); }
.merunk-tabla td { color: var(--navy); }
.merunk-igen { color: var(--zold); font-weight: 700; }
.merunk-nem { color: var(--navy-halk); }

.merunk-zaro { text-align: center; padding: 1.4rem 1.1rem 4.2rem; }

/* Mutatók plus Forrástérkép section (card 8a99ec7c, 2026-10-01). Two figures drawn
   from the Doc's own numbers only. SVG text is 20px+ in a 520 viewBox, so at 390
   (about 350px wide) it renders near 13px; the idosor figure needed an HTML
   fallback at 13px in the SVG, these do not. */
.ketoszlop-uj + .ketoszlop-uj { margin-top: 3rem; }
.ketoszlop-uj .szoveg-hasab h3 { margin-bottom: 0.8rem; }
.abra-mutato, .abra-reslista { background: var(--tort); border: 1px solid var(--vonal); border-radius: var(--sugar); padding: 1rem; margin-top: 1.6rem; }
@media (min-width: 1020px) { .abra-mutato, .abra-reslista { margin-top: 0; } }
.am-szam { font-size: 34px; font-weight: 800; fill: var(--navy); letter-spacing: -0.02em; }
.am-cimke { font-size: 23px; fill: var(--navy-halk); }
.am-hely { font-size: 34px; font-weight: 800; fill: var(--piros); }
.am-sav-alap { fill: #fff; stroke: var(--vonal); }
.am-sav-sajat { fill: var(--navy); }
.am-sav-elso { fill: var(--sarga-sotet); }
.rl-vt { fill: var(--piros); }
.rl-ures { fill: #fff; stroke: var(--vonal); stroke-width: 1.5; }
/* 5c. AI-botforgalom figure (card 8a99ec7c): same frame as the two figures above, plus bot-name chips. */
.abra-botforgalom { background: var(--tort); border: 1px solid var(--vonal); border-radius: var(--sugar); padding: 1rem; margin-top: 1.6rem; }
@media (min-width: 1020px) { .abra-botforgalom { margin-top: 0; } }
.bf-chip { fill: #fff; stroke: var(--vonal); stroke-width: 1.5; }
.bf-chip-szoveg { font-size: 24px; /* 24 x 0.48 viewBox scale at 320 px = 11.5 px, gate floor 11 (measured 2026-10-01: 21 px gave 10.1) */ font-weight: 500; letter-spacing: -0.01em; fill: var(--navy); text-anchor: middle; }
.csomag-sorok .bf-sor dt { white-space: nowrap; } /* "AI-botforgalom" broke after the hyphen next to the long Agency value (1440, 2026-10-01) */

/* Deployed ahead of the AI-radar launch (card 0677c3cd, 2026-10-13): only the two rules the live landing needs. */
.lefedes-mobil .nincs-tores { white-space: nowrap; }
.lf-ures { fill: none; stroke: var(--racs); stroke-width: 1.2; }