/* =====================================================================
   mailbox.hu / Postino — publikus felület
   =====================================================================
   MOBILE FIRST. Az alapstílusok a telefonra szólnak, a nagyobb
   képernyők a media query-kben kapnak többet.

   HÁTTÉRKÉP: mobilon SOHA. Ott gradiens megy, mert a háttérkép
   1-2 MB, és mobilneten fizet érte a felhasználó. A kép csak
   900 px-től töltődik le - a media query-be zárt background-image
   URL-t a böngésző nem tölti le, ha a feltétel nem teljesül.
   ===================================================================== */

:root {
	/* --- Márkaszínek, a logóból --- */
	--navy:        #001043;
	--navy-soft:   #0a1d5c;
	--grey:        #939393;

	/* --- Semleges skála --- */
	--ink:         #0d1117;
	--ink-soft:    #3d4451;
	--muted:       #6b7280;
	--line:        #e3e6ec;
	--surface:     #ffffff;
	--canvas:      #f4f5f8;

	/* --- Állapotszínek ---
	   Négyesével: keret, háttér, szöveg. A szöveg mindig sötétebb a
	   keretnél, hogy a kontraszt a világos háttéren is megfeleljen. */
	--info:        #1d4ed8;
	--info-bg:     #eff6ff;
	--info-text:   #1e3a8a;

	--ok:          #15803d;
	--ok-bg:       #f0fdf4;
	--ok-text:     #14532d;

	--warn-b:      #d97706;
	--warn-bg:     #fffbeb;
	--warn-text:   #92400e;

	--danger:      #b91c1c;
	--danger-bg:   #fef2f2;
	--danger-text: #7f1d1d;

	/* Visszafelé kompatibilitás a régi nevekkel */
	--warn:        #92400e;

	/* --- Tipográfia --- */
	--display: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--body:    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

	/* --- Ritmus --- */
	--r:   10px;      /* sarokkerekites */
	--r-s: 6px;
	--shadow:    0 1px 2px rgba(0,16,67,.06), 0 8px 24px rgba(0,16,67,.08);
	--shadow-lg: 0 2px 4px rgba(0,16,67,.06), 0 20px 48px rgba(0,16,67,.12);

	/* Fuggoleges ritmus. A belepooldalnak EL KELL FERNIE gorgetes nelkul
	   egy 1080p keperno magassagaban, ezert ezek szuk ertekek. */
	--head-pad: 16px;
	--hero-pad: 32px;

	/* EGYSEGES VEZERLOMAGASSAG.
	   Minden beviteli mezo, legordulo es gomb ezt hasznalja, hogy
	   egymas mellett ne csusszanak el. Ha valtoztatod, itt tedd —
	   egy helyen, ne mezonkent. */
	--control-h: 44px;
	--control-line: 1.25;
}

/* A Poppins CSAK a márkanévhez és a fő címekhez kell. Egyetlen vastagság,
   egyetlen fájl - a belépőoldalon a sebesség fontosabb, mint a
   tipográfiai gazdagság. */
@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('/brand/shared/font/poppins-semibold.woff2') format('woff2');
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	font-family: var(--body);
	font-size: 16px;
	line-height: 1.6;
	color: var(--ink);
	background: var(--canvas);
	-webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; height: auto; display: block; }

a { color: var(--navy); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--navy-soft); }

/* Billentyűzetes navigáció: mindig látható fókusz. Egérrel nem zavar,
   mert a :focus-visible csak billentyűzetnél aktivál. */
:focus-visible {
	outline: 2px solid var(--navy);
	outline-offset: 2px;
	border-radius: var(--r-s);
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
	}
}

/* Csak képernyőolvasónak */
.sr-only {
	position: absolute; width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden;
	clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Ugrás a tartalomra - billentyűzettel az első elem */
.skip {
	position: absolute; left: 12px; top: -60px; z-index: 100;
	background: var(--navy); color: #fff; padding: 10px 16px;
	border-radius: var(--r-s); transition: top .15s;
}
.skip:focus { top: 12px; color: #fff; }


/* =====================================================================
   MÁRKANÉV
   A MAILBOX-ban az "AI" navy, a többi szürke — az "AI Inside" szójáték.
   Weben ez CSS-sel megy (emailben kép, mert ott a webfont nem megbízható).
   ===================================================================== */

.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.brand__mark { height: 32px; width: auto; }

.brand__name {
	font-family: var(--display);
	font-weight: 600;
	font-size: 26px;          /* cap-height ~18px, a jelkép optikai magasságához */
	line-height: 1;
	letter-spacing: .01em;
	text-transform: uppercase;
	color: var(--grey);
	white-space: nowrap;
}
.brand__name em { font-style: normal; color: var(--navy); }

@media (min-width: 700px) {
	.brand__mark { height: 38px; }
	.brand__name { font-size: 31px; }
}


/* =====================================================================
   ELRENDEZÉS
   ===================================================================== */

.shell { min-height: 100dvh; display: flex; flex-direction: column; }

/* A <main> a flex gyerek, NEM a benne levo .hero. Ha ez kimarad, a main
   a tartalmahoz igazodik, a .hero flex-grow-ja nem ervenyesul, es holt ter
   marad a lablec alatt. Ezert a main is flex konteneme valik. */
.shell > main { flex: 1 1 auto; display: flex; flex-direction: column; }
.shell > main > * { flex: 1 1 auto; }

.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 20px; }
@media (min-width: 700px) { .wrap { padding: 0 32px; } }

.site-head {
	padding: var(--head-pad) 0;
	position: relative;
	z-index: 3;
}
.site-head__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }

.nav { display: none; gap: 28px; align-items: center; }
.nav a { color: var(--ink-soft); text-decoration: none; font-size: 15px; }
.nav a:hover { color: var(--navy); }
@media (min-width: 900px) { .nav { display: flex; } }

/* Nyelvváltó: a szerver dönt, ez csak jelzi és átirányít */
.lang { display: flex; gap: 2px; align-items: center; }
.lang a {
	font-size: 13px; text-transform: uppercase; letter-spacing: .04em;
	color: var(--muted); text-decoration: none;
	padding: 6px 8px; border-radius: var(--r-s);
}
.lang a:hover { color: var(--navy); background: rgba(0,16,67,.05); }
.lang a[aria-current="true"] { color: var(--navy); font-weight: 600; }


/* =====================================================================
   HERO — a belépőkártya
   Mobilon: gradiens háttér, a kártya teljes szélességben.
   Asztali: kétoszlopos, bal oldalt az állítás, jobb oldalt a kártya.
   ===================================================================== */

.hero {
	position: relative;
	/* 1 1 auto: kitolti a maradek helyet, de NEM no tul rajta.
	   A korabbi 'flex: 1 0 auto' + min-height egyutt tulnyomta a
	   viewportot, ezert kellett gorgetni nagy kepernyon is. */
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	padding: 8px 0 40px;
	/* MOBIL: csak gradiens. Nincs letöltendő kép. */
	background:
		radial-gradient(120% 80% at 50% 0%, rgba(0,16,67,.10) 0%, rgba(0,16,67,0) 60%),
		linear-gradient(178deg, #eef1f7 0%, var(--canvas) 55%);
}

.hero__grid { display: grid; gap: 32px; }

@media (min-width: 980px) {
	.hero { padding: var(--hero-pad) 0; }
	/* Asztalin a pitch nem korlatoz: a racs oszlopa adja a szelesseget. */
	.pitch { max-width: none; }

	.hero__grid {
		/* A ket oszlop egyutt legfeljebb ennyi - kulonben nagy kepernyon
		   tul nagy ures sav marad kozottuk. A racs kozepre kerul. */
		width: 100%;
		max-width: 1040px;

		/* 2:1 ARANY, nem fix kartyaszelesseg.
		   A szovegnek ketszer annyi hely jut, mint a kartyanak — igy a
		   rovid uzenetek nem tornek le mar ket szonal. A kartya
		   minimuma 340px, hogy az urlap ne szoruljon ossze. */
		grid-template-columns: 2fr minmax(340px, 1fr);
		gap: 52px;
		align-items: center;
	}
}

@media (min-width: 1400px) {
	.hero__grid { max-width: 980px; grid-template-columns: minmax(0, 1fr) 392px; gap: 60px; }
}

/* Alacsony, szeles keperno (pl. 1366x768): tovabb szukitjuk a fuggoleges
   ritmust, hogy gorgetes nelkul elferjen. */
@media (min-width: 980px) and (max-height: 800px) {
	:root { --hero-pad: 16px; --head-pad: 12px; }
	.card { padding: 24px 28px; }
	.pitch__title { font-size: 34px; }
	.claims { gap: 10px; }
}

/* ASZTALI HÁTTÉRKÉP — csak innentől töltődik le.
   A képet a szerver a --hero-image valtozoban adja; ha nincs, a
   gradiens marad.

   A `.hero.hero--image` KETTOS osztaly nem elgepeles: lentebb, a
   tema-valtozok atkotesenel all egy `.hero { background: ... }`
   szabaly, ami azonos fajsulyu es KESOBB jon a fajlban — az felulirna
   ezt a kepet. A ketszeres osztalynev magasabb fajsulyt ad, tehat a
   sorrendtol fuggetlenul ez nyer. */
@media (min-width: 980px) {
	/* A KEP FATYOL NELKUL
	   -------------------
	   Korabban vilagos fatyol borult a fotora, mert sotet szoveg allt
	   mellette. A szoveg elmaradt — a belepooldalra az erkezik, aki be
	   akar lepni, a meggyozes a /why dolga —, tehat a fatyolra sincs
	   szukseg.

	   Ez nem szepiteszeti dontes: 383 kep valtozatossaga mellett NINCS
	   olyan fatyol-beallitas, ami mindegyiknel jo. Egy sotet foton
	   olvashatatlan, amit egy vilagoson tulfednenk. A kartyanak sajat
	   hattere van, tehat az olvashatosaga a keptol fuggetlen.

	   A `--wash-*` valtozok es a hangolasukhoz keszult /curate eszkoz
	   ezzel egyutt megszuntek. */
	.hero.hero--image {
		background-image: var(--hero-image);
		background-size: cover;
		background-position: center right;
		background-repeat: no-repeat;
	}
}

/* --- Bal oldal: az állítás --- */
/* A 34ch mobilon jo, asztalin viszont MAR KET SZONAL letort. Mivel
   csak a cim marad, a korlat feloldhato — a racs 2:1 aranya adja a
   szelesseget. */
.pitch { max-width: 34ch; }

/* A CIM a lap legerosebb allitasa — „A leveleid a tieid." —, ezert
   nagyobb es NAGYBETUS. A nagybetus szedes ritkitast kivan: enelkul
   a betuk osszetapadnak, es pont az olvashatosag veszik el, amiert a
   meretet noveltuk. A negativ letter-spacing ezert POZITIVRA valt. */
.pitch__title {
	font-family: var(--display);
	font-weight: 600;
	font-size: clamp(28px, 5vw, 46px);
	line-height: 1.1;
	letter-spacing: .01em;
	text-transform: uppercase;
	color: var(--navy);
	margin: 0 0 16px;
}

/* A bevezeto a cim utani masodik szint. 17px-rol 20px-re: a hattérkep
   folott a kisebb szoveg nehezebben olvashato, mint feher lapon. */
.pitch__lead {
	font-size: clamp(18px, 1.6vw, 21px);
	line-height: 1.55;
	color: var(--ink-soft);
	margin: 0 0 26px;
}

/* A három állítás. Nem ikonok, nem kártyák — csak vonal és szöveg.
   A vonal a márka geometriájából jön, nem díszítés. */
.claims { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.claims li {
	padding-left: 18px;
	position: relative;
	font-size: 15px;
	color: var(--ink-soft);
}
.claims li::before {
	content: "";
	position: absolute; left: 0; top: .62em;
	width: 9px; height: 2px;
	background: var(--grey);
}

/* FONTOS a sorrend: ez a blokk a '.pitch { max-width: 34ch }' UTAN all,
   kulonben azonos specificitasnal az alapszabaly nyerne, es a szovegoszlop
   keskenyebb maradna a racs savjanal - holt terrel kozepen. */
@media (min-width: 980px) {
	.pitch { max-width: none; }
}

@media (max-width: 979px) {
	.pitch { max-width: none; }
	.pitch__title { font-size: clamp(24px, 7vw, 34px); }
	/* Mobilon az állítás a kártya ALÁ kerül — a belépés az első. */
	.pitch { order: 2; }
	.card-col { order: 1; }
}


/* =====================================================================
   BELÉPŐKÁRTYA
   ===================================================================== */

.card {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r);
	box-shadow: var(--shadow-lg);
	padding: 28px 22px;
}
@media (min-width: 700px) { .card { padding: 34px 32px; } }

.card__title {
	font-family: var(--display);
	font-weight: 600;
	font-size: 21px;
	line-height: 1.25;
	color: var(--ink);
	margin: 0 0 4px;
}
.card__sub { font-size: 14px; color: var(--muted); margin: 0 0 22px; }

.field { margin: 0 0 16px; }

.field__label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--ink-soft);
	margin: 0 0 6px;
}

/* A MEZOK MAGASSAGA
   -----------------
   A `font: inherit` a font OSSZES alesetet orokli — a line-height-ot
   is. A body-n az 1.6, ami folyoszovegnek jo, de egy egysoros mezonek
   sok: 16px * 1.6 = 25,6px tartalom + 24px belso margo + 2px keret
   = 51,6px magas mezo. Ezert voltak tul nagyok a dobozok.
   A line-height-ot tehat KULON vissza kell venni a `font: inherit`
   utan, kulonben eszrevetlenul visszaszivargik.

   A .textarea-nal a szerzo ezt mar egyszer megtette (line-height:
   1.55) — csak a .input maradt ki. */
.input {
	width: 100%;
	font: inherit;
	font-size: 16px;          /* 16px alatt az iOS ráközelít a mezőre */
	line-height: var(--control-line);
	color: var(--ink);
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r-s);
	min-height: var(--control-h);
	padding: 10px 14px;
	transition: border-color .15s, box-shadow .15s;
}
.input::placeholder { color: #a8aeba; }
.input:hover { border-color: #c9cfda; }
.input:focus {
	outline: none;
	border-color: var(--navy);
	box-shadow: 0 0 0 3px rgba(0,16,67,.12);
}
.input[aria-invalid="true"] { border-color: var(--danger); }

/* Email cím + domain egy sorban. Több domain esetén a domain
   legördülő; egy domainnél statikus utótag. */
.input-group { display: flex; }
.input-group .input {
	border-top-right-radius: 0; border-bottom-right-radius: 0;
	border-right: 0; min-width: 0; flex: 1;
}
.input-group__suffix {
	display: inline-flex; align-items: center;
	flex: none;               /* a domain sosem torhet meg vagy zsugorodhat */
	padding: 0 12px;
	font-size: 15px; color: var(--muted);
	background: #f7f8fa;
	border: 1px solid var(--line);
	border-top-right-radius: var(--r-s); border-bottom-right-radius: var(--r-s);
}
.input-group select.input-group__suffix {
	font: inherit; font-size: 15px; cursor: pointer;
	appearance: none; padding-right: 30px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236b7280' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 11px center;
}

.field__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.field__aside { font-size: 13px; }

.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	width: 100%;
	font: inherit; font-size: 16px; font-weight: 600;
	line-height: var(--control-line);
	color: #fff;
	background: var(--navy);
	border: 1px solid var(--navy);
	border-radius: var(--r-s);
	min-height: var(--control-h);
	padding: 10px 20px;
	cursor: pointer;
	transition: background .15s, transform .05s;
}
/* A gomb lehet <button> VAGY <a>. Az <a> eseten az altalanos
   'a:hover { color: var(--navy-soft) }' szabaly felulirna a feher
   szoveget - navy szoveg navy hatteren, azaz elteno felirat.
   Ezert a szint minden allapotra explicit rogzitjuk. */
.btn,
.btn:link,
.btn:visited,
.btn:hover,
.btn:focus,
.btn:active { color: #fff; text-decoration: none; }

.btn:hover { background: var(--navy-soft); border-color: var(--navy-soft); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .55; cursor: not-allowed; }

/* A halvany valtozat sajat szinnel megy, ott a markaszin a helyes. */
.btn--ghost,
.btn--ghost:link,
.btn--ghost:visited,
.btn--ghost:hover,
.btn--ghost:focus,
.btn--ghost:active { color: var(--brand-text); }

.btn--ghost {
	color: var(--navy); background: transparent; border-color: var(--line);
}
.btn--ghost:hover { background: rgba(0,16,67,.04); border-color: #c9cfda; }

.check { display: flex; align-items: flex-start; gap: 9px; font-size: 14px; color: var(--ink-soft); }
.check input { margin: 3px 0 0; width: 16px; height: 16px; accent-color: var(--navy); flex: none; }

.card__foot {
	margin: 20px 0 0; padding: 18px 0 0;
	border-top: 1px solid var(--line);
	font-size: 14px; color: var(--muted); text-align: center;
}

/* =====================================================================
   ÜZENETSÁVOK
   =====================================================================
   Négy szint, és a különbség nem árnyalat kérdése:

     info   semleges tájékoztatás. Semmi nem történt rosszul, csak
            tudnia kell valamit. Ez a leggyakoribb, mégis ez hiányzott
            legtovább - warning színt kapott, ami feleslegesen riasztott.
     ok     sikeres művelet
     warn   figyelmeztetés: valami elromolhat, ha nem figyel
     error  hiba: a művelet nem sikerült

   A színek a szokásos konvenciót követik: kék tájékoztat, zöld
   megerősít, borostyán figyelmeztet, piros hibát jelez.
   ===================================================================== */

.note {
	border-radius: var(--r-s);
	padding: 12px 14px;
	font-size: 14px;
	line-height: 1.5;
	margin: 0 0 18px;
	border-left: 3px solid;
}

.note--info  { background: var(--info-bg);   border-color: var(--info);   color: var(--info-text); }
.note--ok    { background: var(--ok-bg);     border-color: var(--ok);     color: var(--ok-text); }
.note--warn  { background: var(--warn-bg);   border-color: var(--warn-b); color: var(--warn-text); }
.note--error { background: var(--danger-bg); border-color: var(--danger); color: var(--danger-text); }


/* =====================================================================
   LÁBLÉC
   ===================================================================== */

.site-foot {
	background: var(--surface);
	border-top: 1px solid var(--line);
	padding: 32px 0;
	font-size: 14px;
	color: var(--muted);
}
.site-foot__grid { display: grid; gap: 24px; }
@media (min-width: 760px) {
	.site-foot__grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
}

.site-foot h2 {
	font-size: 13px; font-weight: 600; text-transform: uppercase;
	letter-spacing: .06em; color: var(--ink-soft); margin: 0 0 10px;
}
.site-foot ul {
	list-style: none;
	margin: 0;
	padding: 0;
	/* Ket oszlop: negy link egymas alatt feleslegesen magas oszlopot ad,
	   miközben oldalt bőven van hely. Kettesevel tordelve a lablec
	   fele akkora, es a mobil gorgetes is megszunik. */
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px 18px;
}

/* Nagyon keskeny keperno alatt visszavaltunk egy oszlopra, kulonben
   a hosszabb feliratok (Altalanos Szerzodesi Feltetelek) tordelnek. */
@media (max-width: 380px) {
	.site-foot ul { grid-template-columns: 1fr; }
}
.site-foot a { color: var(--muted); text-decoration: none; }
.site-foot a:hover { color: var(--navy); text-decoration: underline; }

.slogan {
	font-family: var(--display);
	font-weight: 600; font-size: 12px;
	letter-spacing: .08em; text-transform: uppercase;
	color: var(--navy);
	margin: 14px 0 0;
}

/* A .legal blokk (copyright, szekhely, adoszam) kikerult a lablecbol.
   Ezek az adatok az impresszum oldalon vannak, ahova a lablec menu
   hivatkozik — a lablecben minden sorral egyutt no a mobil gorgetes. */


/* =====================================================================
   KESKENY LABLEC — a belepooldalhoz
   A teljes lablec harom oszlopa a belepooldalon feleslegesen magas,
   es kiszoritja a tartalmat a viewportbol. Ott ez a valtozat megy:
   egyetlen sor, a jogi linkekkel es a cegadatokkal.
   ===================================================================== */

.site-foot--slim { padding: 18px 0; }

.site-foot--slim .slim {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 24px;
	font-size: 13px;
	color: #9aa1ad;
}

.site-foot--slim .slim__links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-foot--slim .slim__brand {
	font-family: var(--display);
	font-weight: 600;
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--brand-text);
}

@media (max-width: 639px) {
	.site-foot--slim .slim {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}

	/* A negy jogi link ket oszlopban. Egymas alatt 4 sort foglalna,
	   miközben oldalt van hely - mobilon minden megsporolt pixel
	   kozelebb visz ahhoz, hogy a belepokartya gorgetes nelkul latszodjon. */
	.site-foot--slim .slim__links {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 6px 16px;
		width: 100%;
		font-size: 12px;
		line-height: 1.35;
	}

	/* A markanev es a copyright egy sorba, egymas melle. Kulonben ket
	   kulon sort foglalnak, ami a keskeny lablecben pazarlas. */
	.site-foot--slim .slim__brand { order: 1; }
	.site-foot--slim .slim__links { order: 2; }

	.site-foot--slim { padding: 14px 0; }
}

/* Nagyon keskeny keperno: vissza egy oszlopra, kulonben a hosszabb
   feliratok tordelnek, es az rosszabb, mint a magasabb lablec. */
@media (max-width: 380px) {
	.site-foot--slim .slim__links { grid-template-columns: 1fr; }
}


/* =====================================================================
   IMMERZÍV VÁLTOZAT — teljes felületű háttérkép
   =====================================================================
   A WeTransfer-mintát követi: a kép tölti ki a képernyőt, a belépőkártya
   lebeg rajta, a szöveg kevés és nagy.

   ELTÉRÉS A WETRANSFER-TŐL: ott 30 másodpercenként vált a háttér, mert
   a felhasználó a feltöltés alatt percekig nézi az oldalt. A belépésnél
   viszont 5-10 másodperc a tartózkodás — ott a forgatás értelmetlen,
   cserébe ötszörös adatforgalom. Ezért BETÖLTÉSENKÉNT EGY véletlen kép
   megy, amit a szerver választ.

   MOBILON továbbra sincs kép, csak gradiens.
   ===================================================================== */

.hero--full { padding: 0; }

@media (min-width: 980px) {
	.hero--full {
		background-image: var(--hero-image);
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		align-items: stretch;
	}

	/* Scrim: a kártya és a fejléc mögé sötétítés, hogy a fehér logó és a
	   tipp bármilyen képen olvasható maradjon. A kép közepe tiszta marad. */
	.hero--full::before {
		content: "";
		position: absolute; inset: 0;
		/* A .hero__bg z-index:0-t kap, tehat sajat retege van. Ez a
		   scrim enelkul ALA kerulne: azonos retegben a fanban elorebb
		   allo elem festodik eloszor, a ::before pedig mindig megelozi
		   a gyerekeket. Az 1-es ertek fole emeli — a tartalom (.hero__grid)
		   szinten 1, de a faban kesobb all, tehat az marad legfelul. */
		z-index: 1;
		background:
			linear-gradient(180deg, rgba(0,10,30,.55) 0%, rgba(0,10,30,.10) 14%, rgba(0,10,30,0) 26%),
			linear-gradient(0deg,   rgba(0,10,30,.62) 0%, rgba(0,10,30,.14) 12%, rgba(0,10,30,0) 24%),
			linear-gradient(90deg,  rgba(0,10,30,.34) 0%, rgba(0,10,30,0) 46%);
		pointer-events: none;
	}

	.hero--full .hero__grid {
		max-width: 1240px;
		grid-template-columns: 392px minmax(0, 1fr);
		gap: 48px;
		align-items: center;
		position: relative;
		z-index: 1;
		padding: 24px 0;
	}

	/* A kártya BALRA kerül, a kép jobb oldala szabadon marad. */
	.hero--full .card-col { order: 1; }
	.hero--full .pitch    { order: 2; align-self: center; }
}

/* --- Tipp a kép fölött --- */
.tip {
	max-width: 24rem;
	color: #fff;
	text-shadow: 0 1px 24px rgba(0,10,30,.55);
}

.tip__eyebrow {
	font-family: var(--display);
	font-weight: 600;
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	opacity: .82;
	margin: 0 0 10px;
}

.tip__text {
	font-family: var(--display);
	font-weight: 600;
	font-size: clamp(22px, 2.4vw, 34px);
	line-height: 1.2;
	letter-spacing: -.01em;
	margin: 0;
}

.tip__link {
	display: inline-block;
	margin: 14px 0 0;
	font-size: 15px;
	color: #fff;
	text-decoration-color: rgba(255,255,255,.5);
}
.tip__link:hover { color: #fff; text-decoration-color: #fff; }

/* Kép-forrás megjelölés, jobb alul — apró, nem tolakodó */
.credit {
	position: absolute;
	right: 20px; bottom: 14px;
	z-index: 1;
	font-size: 12px;
	color: rgba(255,255,255,.72);
	text-shadow: 0 1px 12px rgba(0,10,30,.6);
}
.credit a { color: inherit; text-decoration-color: rgba(255,255,255,.35); }

/* A fejléc a kép fölött: fehér logó, fehér menü */
.site-head--over { position: relative; z-index: 2; }

/* A fejlec a hero folott all, ezert sajat scrim kell ala - kulonben
   vilagos kepen a feher menu olvashatatlan. */
@media (min-width: 980px) {
	.site-head--over::before {
		content: "";
		position: absolute; inset: -8px 0 -24px;
		background: linear-gradient(180deg, rgba(0,10,30,.5) 0%, rgba(0,10,30,0) 100%);
		pointer-events: none;
	}
	.site-head--over > * { position: relative; z-index: 1; }
}
.site-head--over .brand__name { color: rgba(255,255,255,.8); }
.site-head--over .brand__name em { color: #fff; }
.site-head--over .nav a { color: rgba(255,255,255,.95); }
.site-head--over .nav a:hover { color: #fff; }
.site-head--over .lang a { color: rgba(255,255,255,.82); }
.site-head--over .lang a:hover { color: #fff; background: rgba(255,255,255,.12); }
.site-head--over .lang a[aria-current="true"] { color: #fff; }

/* MOBILON a kép nincs, tehát a fejléc sötét szövegű marad */
@media (max-width: 979px) {
	.site-head--over .brand__name { color: var(--grey); }
	.site-head--over .brand__name em { color: var(--navy); }
	.site-head--over .nav a,
	.site-head--over .lang a { color: var(--ink-soft); }
	.tip { color: var(--ink); text-shadow: none; }
	.tip__eyebrow { color: var(--muted); }
	.tip__link { color: var(--navy); }
	.credit { display: none; }
	.hero--full .pitch { order: 2; margin-top: 28px; }
}

/* A lábléc a képes változatban a kép fölött lebeg, áttetszően */
/* A lablec sajat sotetitest kap. Feher szoveg tetszoleges kepen nem
   olvashato - vilagos hattermotivumnal a scrim nelkul eltunne. */
.site-foot--over {
	background: linear-gradient(0deg, rgba(0,10,30,.62) 0%, rgba(0,10,30,.30) 60%, rgba(0,10,30,0) 100%);
	border-top: 0;
	position: relative;
	z-index: 2;
	padding: 0 0 18px;
	flex: 0 0 auto;
}
.site-foot--over { padding-top: 34px; }
.site-foot--over .slim,
.site-foot--over .slim a { color: rgba(255,255,255,.88); text-shadow: 0 1px 8px rgba(0,10,30,.5); }
.site-foot--over .slim a:hover { color: #fff; }
.site-foot--over .slim__brand { color: rgba(255,255,255,.9); }

@media (max-width: 979px) {
	.site-foot--over {
		background: var(--surface);
		padding-top: 18px;
		border-top: 1px solid var(--line);
		padding: 18px 0;
	}
	.site-foot--over .slim,
	.site-foot--over .slim a { color: #9aa1ad; }
	.site-foot--over .slim__brand { color: var(--navy); }
}


/* =====================================================================
   HÁTTÉRKÉP-FÜGGŐ ELRENDEZÉS
   =====================================================================
   Minden képhez tartozik, hogy a kompozíciója miatt a belépőkártya
   melyik oldalra kerüljön. Ezt a brand/<márka>/backgrounds/backgrounds.php
   jegyzék adja meg, a szerver pedig a megfelelő osztályt teszi ki.
   ===================================================================== */

/* A KET ELRENDEZES OSZLOPAI FORDITVA ALLNAK — ezert kulon szabaly kell.

     hero--full    392px | 1fr     a kartya az ELSO oszlopban
     hero--image   1fr   | 372px   a kartya a MASODIK oszlopban

   Az alabbi szabalyok korabban nem voltak elrendezesre szukitve, es a
   `hero--full`-hoz keszultek. Az `image` elrendezesen ez oda vezetett,
   hogy `login-left` eseten a kartya a SZELES oszlopba kerult, a
   szoveg pedig a keskenybe — ES a vilagos fatyol a kartya ala esett,
   nem a szoveg ala. Vagyis pont ott halvanyitottunk, ahol nem kellett,
   es ott nem, ahol a sotet betuk a fotora kerultek. */

@media (min-width: 980px) {
	/* --- Teljes kepernyos elrendezes (kartya lebeg a kepen) --- */
	.hero--full.hero--login-left  .card-col { order: 1; }
	.hero--full.hero--login-left  .pitch    { order: 2; }

	.hero--full.hero--login-right .hero__grid { grid-template-columns: minmax(0, 1fr) 392px; }
	.hero--full.hero--login-right .card-col   { order: 2; }
	.hero--full.hero--login-right .pitch      { order: 1; }

	/* --- Kep elrendezes ---
	   A kartya kozepen all (hero__grid--single), tehat oszlopot mar
	   nincs mit cserelni. A `login-left` jelzes viszont TOVABBRA IS
	   hasznos: a jegyzek (backgrounds.php) ezzel mondja meg, a kep
	   melyik felen van az erdekes resz — a hatteret arra igazitjuk,
	   hogy a kartya ne azt takarja el. */
	.hero.hero--image.hero--login-left {
		background-position: center left;
	}

	/* A scrim iránya követi a kártyát, hogy alatta legyen a sötétítés. */
	.hero--full.hero--login-right::before {
		background:
			linear-gradient(180deg, rgba(0,10,30,.55) 0%, rgba(0,10,30,.10) 14%, rgba(0,10,30,0) 26%),
			linear-gradient(0deg,   rgba(0,10,30,.62) 0%, rgba(0,10,30,.14) 12%, rgba(0,10,30,0) 24%),
			linear-gradient(270deg, rgba(0,10,30,.34) 0%, rgba(0,10,30,0) 46%);
	}
}

/* --- Tónus: a scrim erőssége a kép világosságához igazodik ---
   Világos képen a fehér fejléc- és lábléc-szöveg scrim nélkül eltűnik.
   Ez tesztelés során derült ki, nem elméleti kockázat. */

.hero--tone-light::before {
	--scrim-top: .68;
	--scrim-bottom: .74;
}
.hero--tone-dark::before {
	--scrim-top: .34;
	--scrim-bottom: .40;
}

@media (min-width: 980px) {
	.hero--tone-light::before,
	.hero--tone-dark::before {
		background:
			linear-gradient(180deg, rgba(0,10,30,var(--scrim-top)) 0%, rgba(0,10,30,.10) 16%, rgba(0,10,30,0) 28%),
			linear-gradient(0deg,   rgba(0,10,30,var(--scrim-bottom)) 0%, rgba(0,10,30,.14) 13%, rgba(0,10,30,0) 26%),
			linear-gradient(90deg,  rgba(0,10,30,.34) 0%, rgba(0,10,30,0) 46%);
	}
	.hero--login-right.hero--tone-light::before,
	.hero--login-right.hero--tone-dark::before {
		background:
			linear-gradient(180deg, rgba(0,10,30,var(--scrim-top)) 0%, rgba(0,10,30,.10) 16%, rgba(0,10,30,0) 28%),
			linear-gradient(0deg,   rgba(0,10,30,var(--scrim-bottom)) 0%, rgba(0,10,30,.14) 13%, rgba(0,10,30,0) 26%),
			linear-gradient(270deg, rgba(0,10,30,.34) 0%, rgba(0,10,30,0) 46%);
	}
}


/* =====================================================================
   JELSZÓ MEGJELENÍTŐ
   =====================================================================
   A gomb a mezőn BELÜL ül. Fontos, hogy ne <button> nélküli <span>
   legyen: billentyűzettel is elérhetőnek kell lennie, és a
   képernyőolvasónak közölnie kell az állapotot.
   ===================================================================== */

.pw { position: relative; }

.pw .input { padding-right: 46px; }

.pw__toggle {
	position: absolute;
	right: 4px; top: 50%;
	transform: translateY(-50%);
	width: 38px; height: 38px;
	display: inline-flex; align-items: center; justify-content: center;
	background: none; border: 0; padding: 0;
	color: var(--muted);
	cursor: pointer;
	border-radius: var(--r-s);
}
.pw__toggle:hover { color: var(--ink-soft); background: rgba(0,16,67,.05); }
.pw__toggle svg { width: 20px; height: 20px; }

/* A két ikon közül mindig csak az egyik látszik, az állapot szerint. */
.pw__toggle .icon-hide { display: none; }
.pw__toggle[aria-pressed="true"] .icon-show { display: none; }
.pw__toggle[aria-pressed="true"] .icon-hide { display: block; }


/* =====================================================================
   VISSZATÉRŐ FELHASZNÁLÓ ÜDVÖZLÉSE
   ===================================================================== */

.hello { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; }

.hello__avatar {
	width: 40px; height: 40px; flex: none;
	border-radius: 50%;
	background: var(--navy);
	color: #fff;
	display: inline-flex; align-items: center; justify-content: center;
	font-family: var(--display);
	font-weight: 600; font-size: 17px;
	text-transform: uppercase;
}

.hello__text { min-width: 0; }

.hello__name {
	font-family: var(--display);
	font-weight: 600; font-size: 18px; line-height: 1.25;
	color: var(--ink);
	margin: 0;
}

.hello__switch {
	font-size: 13px;
	color: var(--muted);
	background: none; border: 0; padding: 0;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.hello__switch:hover { color: var(--navy); }

/* Ha ismerjük a felhasználót, az email mező összecsukható állapotban van:
   a cím olvasható, de nem foglal külön mezőt. */
.known-email {
	font-size: 14px;
	color: var(--muted);
	margin: -8px 0 16px;
	word-break: break-all;
}


/* =====================================================================
   KÖZTES SÁV — 620 px és 980 px között
   =====================================================================
   Itt a képernyő már nem telefon, de még nem elég széles a kétoszlopos
   elrendezéshez. A korábbi megoldás a mobil elrendezést használta, ami
   teljes szélességű kártyát jelentett — egy 950 px széles ablakban ez
   feleslegesen szélesre nyújtotta a mezőket, és görgetést okozott.

   Itt a kártya megtartja az olvasható szélességét és középre kerül.
   ===================================================================== */

@media (min-width: 620px) and (max-width: 979px) {
	.hero { padding: 24px 0 32px; }

	.hero__grid {
		max-width: 460px;
		margin: 0 auto;
		gap: 28px;
	}

	.card { padding: 30px 32px; }

	/* Az állítás a kártya alatt marad, de középre igazítva, hogy ne
	   lógjon ki a kártya vonalából. */
	.pitch { max-width: 460px; margin: 0 auto; }
	.pitch__title { font-size: 28px; }
	.pitch__lead { font-size: 16px; }

	/* Az immerzív változatban a kártya ugyanígy középre kerül, a
	   háttérkép viszont még nem jelenik meg (az 980 px-től indul). */
	.hero--full .hero__grid { max-width: 460px; }
}

/* --- Alacsony, de széles ablak ---
   Pl. 1400x700: van elég szélesség a két oszlophoz, de kevés a magasság.
   A kártya belső ritmusa szűkül, hogy elférjen görgetés nélkül. */
@media (min-width: 980px) and (max-height: 720px) {
	.card { padding: 20px 26px; }
	.card__sub { margin-bottom: 16px; }
	.field { margin-bottom: 12px; }
	.card__foot { margin-top: 14px; padding-top: 12px; }
	.pitch__title { font-size: 30px; margin-bottom: 10px; }
	.pitch__lead { font-size: 15px; margin-bottom: 16px; }
	.claims { gap: 8px; }
	.claims li { font-size: 14px; }
}


/* =====================================================================
   SÖTÉT MÓD
   =====================================================================
   Három állapot: rendszer / világos / sötét. Az alapértelmezés a
   rendszeré — aki nem nyúl hozzá, azt kapja, amit az operációs
   rendszerében beállított.

   A színeket CSS változókkal cseréljük, ezért egyetlen szabályhalmaz
   elég. A .theme-dark osztály a <html> elemre kerül, még a CSS betöltése
   előtt (lásd theme.js) — így nincs villanás.
   ===================================================================== */

:root {
	--ink:        #0d1117;
	--ink-soft:   #3d4451;
	--muted:      #6b7280;
	--line:       #e3e6ec;
	--surface:    #ffffff;
	--canvas:     #f4f5f8;
	--input-bg:   #ffffff;
	--brand-text: var(--navy);
	--hero-a:     #eef1f7;
	--hero-b:     #f4f5f8;
	--hero-glow:  rgba(0,16,67,.10);

	/* Kiemelo cimke: tomor markaszin, feher szoveggel. */
	--badge-bg:   var(--navy);
	--badge-ink:  #ffffff;
	/* A kivalasztott csomag halvany markaszin kitoltese. */
	--plan-selected-bg: #eef1f8;
	/* Az ajanlott csomag kerete: markaszin, de halvanyabb a
	   kivalasztasnal — kulonben a ketto osszemosodik. */
	--plan-featured-line: #aab6d4;
}

.theme-dark {
	--ink:        #e8eaee;
	--ink-soft:   #b3b9c4;
	--muted:      #8b93a1;
	--line:       #2b3140;
	--surface:    #1a1f2b;
	--canvas:     #11141c;
	--input-bg:   #141924;
	/* A navy sötét háttéren olvashatatlan, ezért a márkaszín világosodik.
	   Az "AI" kiemelés így is elkülönül a szürkétől. */
	--brand-text: #8fa8d4;
	--hero-a:     #161b26;
	--hero-b:     #11141c;
	--hero-glow:  rgba(143,168,212,.08);
	/* Sotetben a navy alap beleolvadna a kartyaba, ezert megfordul:
	   vilagos markaszin alap, sotet szoveggel. */
	--badge-bg:   #8fa8d4;
	--badge-ink:  #11141c;
	--plan-selected-bg: #1e2740;
	--plan-featured-line: #4a5878;
	--shadow:     0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
	--shadow-lg:  0 2px 4px rgba(0,0,0,.4), 0 20px 48px rgba(0,0,0,.45);

	/* Sötét háttéren a világos pasztell hátterek vakítanak, a sötét
	   szövegszínek pedig olvashatatlanok - mindkettő megfordul. */
	--info-bg:     #12203a;  --info:   #60a5fa;  --info-text:   #bfdbfe;
	--ok-bg:       #12261a;  --ok:     #4ade80;  --ok-text:     #bbf7d0;
	--warn-bg:     #2a2113;  --warn-b: #fbbf24;  --warn-text:   #fde68a;
	--danger-bg:   #2a1618;  --danger: #f87171;  --danger-text: #fecaca;
}

/* Rendszerkövetés: ha a felhasználó nem választott, az OS dönt. */
@media (prefers-color-scheme: dark) {
	.theme-system {
		--ink:        #e8eaee;
		--ink-soft:   #b3b9c4;
		--muted:      #8b93a1;
		--line:       #2b3140;
		--surface:    #1a1f2b;
		--canvas:     #11141c;
		--input-bg:   #141924;
		--brand-text: #8fa8d4;
		--hero-a:     #161b26;
		--hero-b:     #11141c;
		--hero-glow:  rgba(143,168,212,.08);
	/* Sotetben a navy alap beleolvadna a kartyaba, ezert megfordul:
	   vilagos markaszin alap, sotet szoveggel. */
	--badge-bg:   #8fa8d4;
	--badge-ink:  #11141c;
	--plan-selected-bg: #1e2740;
	--plan-featured-line: #4a5878;
		--shadow:     0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
		--shadow-lg:  0 2px 4px rgba(0,0,0,.4), 0 20px 48px rgba(0,0,0,.45);

		--info-bg:     #12203a;  --info:   #60a5fa;  --info-text:   #bfdbfe;
		--ok-bg:       #12261a;  --ok:     #4ade80;  --ok-text:     #bbf7d0;
		--warn-bg:     #2a2113;  --warn-b: #fbbf24;  --warn-text:   #fde68a;
		--danger-bg:   #2a1618;  --danger: #f87171;  --danger-text: #fecaca;
	}
}

/* --- A meglévő szabályok átkötése a változókra --- */

body           { color: var(--ink); background: var(--canvas); }
.card          { background: var(--surface); border-color: var(--line); }
.card__title   { color: var(--brand-text); }
.card__sub     { color: var(--muted); }
.field__label  { color: var(--ink-soft); }
.input         { background: var(--input-bg); color: var(--ink); border-color: var(--line); }
.input::placeholder { color: var(--muted); }
.check         { color: var(--ink-soft); }
.card__foot    { color: var(--muted); border-top-color: var(--line); }
.site-foot     { background: var(--surface); border-top-color: var(--line); }
.pitch__lead   { color: var(--ink-soft); }
.claims li     { color: var(--ink-soft); }
.nav a         { color: var(--ink-soft); }
.brand__name   { color: var(--grey); }
.brand__name em { color: var(--brand-text); }
.pitch__title  { color: var(--brand-text); }
.slogan        { color: var(--brand-text); }
a              { color: var(--brand-text); }

.hero {
	background:
		radial-gradient(120% 80% at 50% 0%, var(--hero-glow) 0%, rgba(0,0,0,0) 60%),
		linear-gradient(178deg, var(--hero-a) 0%, var(--hero-b) 55%);
}

/* A gomb sötét módban is navy marad, mert az a márka. De a szegélye
   világosodik, hogy elváljon a sötét háttértől. */
.theme-dark .btn,
.theme-system .btn { border-color: rgba(255,255,255,.14); }

/* Az input fókusz-glóriája sötét módban erősebb kell legyen. */
.theme-dark .input:focus,
.theme-system .input:focus { box-shadow: 0 0 0 3px rgba(143,168,212,.25); }


/* =====================================================================
   TÉMAVÁLTÓ GOMB
   ===================================================================== */

.theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px; height: 34px;
	margin-left: 6px;
	padding: 0;
	background: none;
	border: 0;
	border-radius: var(--r-s);
	color: var(--muted);
	cursor: pointer;
}
.theme-toggle:hover { color: var(--brand-text); background: rgba(127,127,127,.12); }
.theme-toggle svg { width: 18px; height: 18px; }

/* Három állapot, három ikon. Mindig csak az aktuális látszik. */
.theme-toggle .icon-system,
.theme-toggle .icon-light,
.theme-toggle .icon-dark { display: none; }

.theme-toggle[data-theme="system"] .icon-system { display: block; }
.theme-toggle[data-theme="light"]  .icon-light  { display: block; }
.theme-toggle[data-theme="dark"]   .icon-dark   { display: block; }

/* A kép fölötti fejlécben világos ikon kell */
.site-head--over .theme-toggle { color: rgba(255,255,255,.82); }
.site-head--over .theme-toggle:hover { color: #fff; background: rgba(255,255,255,.12); }


/* --- Sötét mód: kontraszt-javítások ---
   A navy #001043 sötét háttéren olvashatatlan. Minden olyan elem, ami
   ezt használta, a világosabb --brand-text változóra vált. */

.lang a[aria-current="true"] { color: var(--brand-text); }
.lang a { color: var(--muted); }
.lang a:hover { color: var(--brand-text); background: rgba(127,127,127,.12); }

.slogan,
.site-foot--slim .slim__brand { color: var(--brand-text); }

.theme-dark .brand__mark,
.theme-system .brand__mark {
	/* A jelkép navy része sötét háttéren beleolvad. A fehér változatot
	   nem cserélhetjük ki CSS-ből (más fájl), ezért világosítunk rajta. */
	filter: brightness(1.9) saturate(.85);
}

.theme-dark .site-foot,
.theme-system .site-foot { background: var(--surface); }

.theme-dark .legal,
.theme-system .legal { color: var(--muted); border-top-color: var(--line); }




/* =====================================================================
   BELÉPŐOLDAL — a kártya a kép egyik szélén
   =====================================================================
   Nincs mit a kártya mellé tenni (a szöveg elmaradt), de KÖZÉPRE sem
   való: a fotó akkor él, ha a kártya az egyik szélen áll, és a kép
   érdekes fele szabadon marad. A középre igazított kártya kettévágja
   a kompozíciót.

   Ezért EGY oszlop van, kártyaszélességű, és a `justify-content`
   tolja a helyére. Így nincs üres rácsoszlop, amit méretezni kellene,
   és kép nélkül magától középre esik.

   Az oldalt a jegyzék dönti el képenként (`login` mező), amit a
   `Background` a `hero--login-left` / `hero--login-right` osztályba
   fordít. A válogatás a /curate belső eszközzel megy.
   ===================================================================== */

.hero__grid.hero__grid--login {
	max-width: 460px;
	margin: 0 auto;
	grid-template-columns: 1fr;
}

@media (min-width: 980px) {
	.hero__grid.hero__grid--login {
		max-width: 1040px;
		/* Fix kártyaszélesség, ugyanaz, mint a ketosz lopos elrendezesben. */
		grid-template-columns: 392px;
		/* Kep nelkul (nincs hero--login-* osztaly) ez marad ervenyben. */
		justify-content: center;
	}

	.hero--login-left  .hero__grid.hero__grid--login { justify-content: start; }
	.hero--login-right .hero__grid.hero__grid--login { justify-content: end; }
}

/* =====================================================================
   EGYOSZLOPOS KÁRTYA — elfelejtett jelszó, visszaigazolások
   =====================================================================
   Ezeken az oldalakon nincs mit a kártya mellé tenni, ezért középre
   kerül. A hero elrendezés egyébként változatlan.
   ===================================================================== */

.hero__grid--single {
	max-width: 460px;
	margin: 0 auto;
	grid-template-columns: 1fr !important;
	justify-items: stretch;
}

/* A REGISZTRACIOS URLAP SZELESSEGE
   -------------------------------
   A signup korabban a --wide modosítót hasznalta, az viszont a
   kapcsolati oldale: 860px folott ketoszlopos racsot csinal a
   .card-col-bol, jobb oldalt egy 240px-es savval az elerhetosegeknek.
   A regisztracion nincs ilyen oldalsav, tehat az a 240px + 36px res
   URESEN maradt — ettol tunt a kartya balra tolva. Nem is volt kozepen:
   a 880px-es racs kozepen allt, de a kartya csak az elso oszlopot
   toltotte ki.

   Sajat szelesseg kell neki: a 460px keves (a nevsor ketoszlopos),
   a 880px sok. */
.hero__grid--form { max-width: 580px; }

.card--centered { text-align: center; }
.card--centered .btn { margin-top: 6px; }

.card__icon {
	width: 56px; height: 56px;
	margin: 0 auto 18px;
	color: var(--brand-text);
}
.card__icon svg { width: 100%; height: 100%; }
.card__icon--ok   { color: var(--ok); }
.card__icon--warn { color: #d97706; }

.card__sub--lead {
	font-size: 15px;
	line-height: 1.6;
	color: var(--ink-soft);
	margin-bottom: 20px;
}

.field__hint {
	margin: 6px 0 0;
	font-size: 13px;
	line-height: 1.45;
	color: var(--muted);
}
.field__hint--error { color: var(--danger); }


/* =====================================================================
   JELSZÓ-ERŐSSÉG JELZŐ
   =====================================================================
   Nem kapuőr, csak visszajelzés: a beküldést a hosszkövetelmény
   szabályozza, ez csak mutatja, hol tart a felhasználó. A színek
   szándékosan visszafogottak — a piros sáv ne szégyenítsen meg senkit,
   csak jelezzen.
   ===================================================================== */

.meter {
	height: 4px;
	margin: 10px 0 0;
	background: var(--line);
	border-radius: 2px;
	overflow: hidden;
}

.meter__bar {
	display: block;
	height: 100%;
	width: 0;
	border-radius: 2px;
	background: var(--muted);
	transition: width .18s ease, background-color .18s ease;
}

.meter[data-level="1"] .meter__bar { width: 25%;  background: #d97706; }
.meter[data-level="2"] .meter__bar { width: 50%;  background: #d97706; }
.meter[data-level="3"] .meter__bar { width: 75%;  background: #65a30d; }
.meter[data-level="4"] .meter__bar { width: 100%; background: var(--ok); }


/* =====================================================================
   KAPCSOLAT OLDAL
   ===================================================================== */

.hero__grid--wide { max-width: 720px; }

@media (min-width: 860px) {
	/* A kártya és a mellette lévő elérhetőségek két oszlopban. Az
	   utóbbi nem az űrlap része, hanem alternatív út azoknak, akik
	   nem akarnak űrlapot használni. */
	.hero__grid--wide { max-width: 880px; }
	.hero__grid--wide .card-col {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 240px;
		gap: 36px;
		align-items: start;
	}
}

.field-row { display: grid; gap: 0; }

@media (min-width: 560px) {
	.field-row { grid-template-columns: 1fr 1fr; gap: 0 16px; }
}

.textarea {
	resize: vertical;
	min-height: 130px;
	font-family: inherit;
	/* Tobb soros szoveg, tehat itt a folyoszoveg-ritmus a jo — nem a
	   szuk vezerlo-line-height. A belso margo is nagyobb maradhat. */
	line-height: 1.55;
	padding: 12px 14px;
}

/* A select nyila: saját, mert a böngészők alapértelmezettje
   platformonként más, és a mezőhöz sem illik. */
select.input {
	appearance: none;
	padding-right: 38px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236b7280' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	cursor: pointer;
}

/* Rejtett mező botok ellen. NEM display:none — néhány bot arra szűr,
   és kihagyja. Így a kitöltése erős jel arra, hogy nem ember. */
.hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* --- Elérhetőségek a kártya mellett --- */

.aside {
	padding: 22px 0 0;
	font-size: 14px;
	line-height: 1.6;
}

@media (min-width: 860px) {
	.aside { padding: 8px 0 0; }
}

.aside__title {
	font-family: var(--display);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ink-soft);
	margin: 0 0 12px;
}

.aside__text { margin: 0 0 10px; color: var(--ink-soft); }
.aside__text--muted { color: var(--muted); font-size: 13px; }
.aside__rule { border: 0; border-top: 1px solid var(--line); margin: 18px 0; }


/* =====================================================================
   SZÖVEGKURZOR
   =====================================================================
   Ha a böngészőben be van kapcsolva a "caret browsing" (F7), a
   felhasználó villogó kurzort lát a sima szövegben is, ahova kattint.
   Ez a weboldalon zavaró — a szöveg nem szerkeszthető, tehát kurzor
   sem indokolt.

   A beviteli mezőkben viszont KELL a kurzor, ezért ott visszaállítjuk.
   ===================================================================== */

body { caret-color: transparent; }

input,
textarea,
select,
[contenteditable="true"] { caret-color: auto; }


/* =====================================================================
   HÁTTÉRKÉP: SÖTÉT MÓD ÉS OLVASHATÓSÁG
   =====================================================================
   Két külön probléma, amit együtt kell kezelni.

   1. SÖTÉT MÓDBAN a fényes kép bántja a szemet. Aki este, lámpaoltás
      után nyitja meg az oldalt, nem akar egy sarkvidéki verőfényes
      fotóval szembesülni. Ezért sötét módban a képet tompítjuk —
      nem elrejtjük, mert akkor elveszne a hangulat, csak visszavesszük
      a fényerőt és a telítettséget.

   2. A FEJLÉC ÉS A LÁBLÉC szövege a képre kerül. Világos és sötét
      képen más kontraszt kell. Ezt a jegyzék 'tone' mezője szabja meg,
      de a scrim önmagában nem elég erős sávos képeknél — ezért a
      fejléc és a lábléc SAJÁT, lokális sötétítést kap, ami csak a
      szöveg mögött hat, a kép közepét nem takarja.
   ===================================================================== */

@media (min-width: 980px) {
	/* A képet külön rétegre tesszük, hogy szűrhető legyen anélkül, hogy
	   a rajta lévő szöveget is szűrnénk. */
	.hero--full {
		background-image: none;
		isolation: isolate;
	}

	.hero--full .hero__bg {
		position: absolute;
		inset: 0;
		z-index: 0;
		background-image: var(--hero-image);
		background-size: cover;
		background-position: var(--hero-focus, center);
		background-repeat: no-repeat;
	}

	/* Sötét módban tompítunk. A 0.55-ös fényerő és a csökkentett
	   telítettség még megtartja a kép karakterét, de nem világít. */
	.theme-dark .hero--full .hero__bg,
	.theme-system .hero--full .hero__bg { filter: brightness(.55) saturate(.75); }

	/* Világos módban a nagyon fényes képeket is visszafogjuk egy kicsit,
	   hogy a fehér kártya elváljon tőlük. */
	.hero--tone-light .hero__bg { filter: brightness(.92); }
}

@media (prefers-color-scheme: dark) {
	@media (min-width: 980px) {
		.theme-system .hero--full .hero__bg { filter: brightness(.55) saturate(.75); }
	}
}

/* --- A fejléc és a lábléc lokális sötétítése ---
   Csak a szöveg mögött, sávban. A kép közepe érintetlen marad. */

@media (min-width: 980px) {
	.site-head--over::before {
		inset: 0 0 auto;
		height: 96px;
		background: linear-gradient(180deg,
			rgba(0,10,30,.62) 0%,
			rgba(0,10,30,.30) 55%,
			rgba(0,10,30,0) 100%);
	}

	.site-foot--over {
		background: linear-gradient(0deg,
			rgba(0,10,30,.70) 0%,
			rgba(0,10,30,.34) 55%,
			rgba(0,10,30,0) 100%);
		padding-top: 44px;
	}

	/* Világos tónusú képnél erősebb sötétítés kell, különben a fehér
	   felirat eltűnik. A jegyzék 'tone' mezője állítja be. */
	.hero--tone-light ~ .site-foot--over,
	.hero--tone-light .site-head--over::before { --scrim-boost: .12; }
}


/* =====================================================================
   REGISZTRÁCIÓS ŰRLAP
   ===================================================================== */

.fs {
	border: 0;
	padding: 0;
	margin: 0 0 26px;
}

.fs__legend {
	font-family: var(--display);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: .05em;
	text-transform: uppercase;
	/* Markaszin a szurke helyett: a lepesek szamozasa az urlap
	   vazszerkezete, ezt erdemes lathatova tenni. Sotet temaban a
	   --brand-text magatol vilagosodik. */
	color: var(--brand-text);
	padding: 0;
	margin: 0 0 14px;
}

/* FORINTOS TAJEKOZTATAS a csomagok alatt.
   Korabban a .field__hint--group osztalyt kapta, annak viszont
   `margin-top: -8px`-e van — az huzta be a kartyak ala, azok pedig
   letakartak. Sajat osztaly kell neki, pozitiv koznel.

   Kisebb betu, mint a mezosugok (13px): ez jogi jellegu labjegyzet,
   nem utmutatas. Olvashato maradjon, de ne versenyezzen az arral. */
/* A DOKUMENTUMLAPOKON ALSO MARGO IS KELL.
   A dijcsomag-oldalon a megjegyzes utan kozvetlenul a „Minden csomagban
   benne van" kartya kovetkezik, es also margo nelkul a ket elem
   osszeer. Az urlapokon (regisztracio) ez nem gond, mert ott a
   fieldset ad hezagot — ezert a `.doc` alatt szukitve. */
.doc .huf-note { margin-bottom: 22px; }

.huf-note {
	margin: 14px 0 0;
	font-size: 12px;
	line-height: 1.5;
	color: var(--muted);
}

.field__hint--group { margin-top: -8px; margin-bottom: 16px; }
.field__hint--center { text-align: center; margin-top: 14px; }

/* --- Csomagválasztó ---
   Rádiógomb, de kártyaként. A natív gombot elrejtjük, a kártya keretével
   jelezzük a kiválasztást — így nagyobb a kattintható felület, ami
   mobilon számít. A :focus-visible viszont megmarad, hogy billentyűzettel
   is látszódjon, hol áll a felhasználó. */

/* A karty­ak felso pereme fole logo cimke, ezert kell egy kis hely. */
.plans { display: grid; gap: 10px; margin-top: 14px; }

@media (min-width: 560px) {
	.plans { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
}

/* EGYENLO MAGASSAG
   ----------------
   A racs elemei magukban is nyulnak, de a .plan__body block volt,
   tehat csak a sajat tartalmanak magassagat vette fel. Emiatt lett a
   299 EUR-s kartya magasabb: hosszabb ar es forintosszeg, tobb sor.
   Flexszel a body kitolti a rendelkezesre allo helyet, a tarhely-sor
   pedig `margin-top: auto`-val mindharom kartyan azonos magassagba
   kerul — nem csak a doboz egyforma, hanem a sorok is egy vonalban. */
.plan { position: relative; display: flex; cursor: pointer; }

.plan input {
	position: absolute;
	opacity: 0;
	width: 100%; height: 100%;
	margin: 0;
	cursor: pointer;
}

.plan__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 16px 18px;
	border: 1px solid var(--line);
	border-radius: var(--r-s);
	background: var(--surface);
	transition: border-color .15s, box-shadow .15s;
}

.plan:hover .plan__body { border-color: #c9cfda; }

/* KIVALASZTAS vs. AJANLAS
   -----------------------
   A ketto korabban ugyanugy nezett ki: mindketto 1px markaszin keret.
   Emiatt tunt ugy, hogy a javasolt csomag mar ki is van valasztva.

   Most elvalik:
     ajanlas      halvany markaszin keret + cimke — ez csak jelzes
     kivalasztas  2px-es gyuru + halvany markaszin kitoltes — ez allapot

   A kitoltes a lenyeg: a keret vastagsaga onmagaban gyenge jel, a
   hatterszin viszont egy pillantasbol megmondja, melyik az aktiv. */
.plan input:checked + .plan__body {
	border-color: var(--brand-text);
	box-shadow: 0 0 0 2px var(--brand-text);
	background: var(--plan-selected-bg);
}

.plan input:focus-visible + .plan__body {
	outline: 2px solid var(--brand-text);
	outline-offset: 2px;
}

.plan__name {
	display: block;
	font-family: var(--display);
	font-weight: 600;
	font-size: 15px;
	color: var(--ink);
	margin-bottom: 4px;
}

.plan__price {
	display: block;
	font-size: 20px;
	font-weight: 600;
	color: var(--brand-text);
	line-height: 1.2;
}
.plan__price small { font-size: 13px; font-weight: 400; color: var(--muted); }

/* Forintbecslés a csomag ára alatt. Halványabb és kisebb, mint az ár:
   nem ár, csak tájékoztatás — a hangsúlynak az eurón kell maradnia. */
.plan__huf { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }

/* A tarhely-sor a kartya aljara tapad, hogy harom kartyan egy vonalban
   legyen akkor is, ha felette elteroen sok sor van. */
.plan__meta { display: block; font-size: 13px; color: var(--muted); margin-top: auto; padding-top: 4px; }

/* KIEMELT CSOMAG
   --------------
   A cimke a kartya felso perme FOLE lóg, nem a kartyan belulre. Igy
   nem szoritja lejjebb a csomag nevet, tehat a harom kartya szovege
   egy vonalban marad — ezert nem kell a masik kettonek ures helyet
   fenntartani a cimke szamara.

   A markaszin itt jelenik meg a legerosebben: tomor navy alap feher
   szoveggel. Sotet temaban megfordul, mert a navy sotet hatteren
   olvashatatlan lenne — ugyanaz a logika, mint a --brand-text-nel. */
.plan__badge {
	position: absolute;
	top: -10px; left: 16px;
	z-index: 1;
	padding: 2px 9px;
	font-family: var(--display);
	font-size: 11px; font-weight: 600;
	letter-spacing: .04em; text-transform: uppercase;
	color: var(--badge-ink);
	background: var(--badge-bg);
	border-radius: 999px;
	white-space: nowrap;
}

.plan--featured .plan__body { border-color: var(--plan-featured-line); }

/* A feltétel-elfogadó linkjei ne olvadjanak a szövegbe */
.check a { text-decoration: underline; text-underline-offset: 2px; }



/* =====================================================================
   TARTALMI OLDALAK — ASZF, adatvedelem, sutik, impresszum, GYIK,
   dijcsomagok, uzemallapot
   =====================================================================
   Ezek az oldalak UGYANAZT a formanyelvet hasznaljak, mint a belepo- es
   a regisztracios oldal: gradienses fejlecsav, alatta kartya. Nem uj
   design, hanem a meglevo kovetkezetes alkalmazasa — enelkul ugy
   hatottak, mintha egy masik weboldalrol keveredtek volna ide.
   ===================================================================== */

/* --- Fejlecsav ---
   Ugyanaz a gradiens, mint a hero-n, csak alacsonyabb. A cim igy kap
   sajat teret, es a kartya rautan "leul" a savra. */
.page-head {
	padding: 40px 0 72px;
	background:
		radial-gradient(120% 90% at 50% 0%, rgba(0,16,67,.10) 0%, rgba(0,16,67,0) 62%),
		linear-gradient(178deg, #eef1f7 0%, var(--canvas) 60%);
	border-bottom: 1px solid var(--line);
}

.page-head__eyebrow {
	margin: 0 0 8px;
	font-family: var(--display);
	font-size: 12px; font-weight: 600;
	letter-spacing: .08em; text-transform: uppercase;
	color: var(--muted);
}

.page-head__title {
	margin: 0;
	font-family: var(--display);
	font-size: clamp(28px, 4vw, 40px);
	font-weight: 600; line-height: 1.15;
	color: var(--brand-text);
}

.page-head__meta { margin: 10px 0 0; font-size: 13px; color: var(--muted); }
.page-head__lead {
	margin: 12px 0 0; max-width: 60ch;
	font-size: 17px; line-height: 1.6; color: var(--ink-soft);
}

/* --- Torzs ---
   A kartya FELCSUSZIK a fejlecsavra. Ez koti ossze a kettot: enelkul
   ket egymas alatti doboz lenne, nem egy oldal. */
.page-body { padding: 0 0 56px; }
.page-body .doc { margin-top: -40px; position: relative; z-index: 1; }

.doc { max-width: 800px; }
.doc--wide { max-width: 1000px; }

.doc__card { padding: 32px 34px; }

/* KET EGYMAST KOVETO KARTYA KOZE HEZAG.
   A dijcsomag-oldalon a „Minden csomagban benne van" es az „AI
   fogalmazo" kartya egymas ala kerul. Sajat margo nelkul a ket keret
   OSSZEER, es egyetlen, kozepen elvagott doboznak latszanak.
   A szomszed-valasztoval csak ott lesz hezag, ahol tenyleg ket kartya
   koveti egymast — az egykartyas lapokon (document, error) semmi nem
   valtozik. */
.doc__card + .doc__card { margin-top: 22px; }

@media (max-width: 640px) {
	.page-head { padding: 28px 0 56px; }
	.doc__card { padding: 22px 20px; }
	.doc__card + .doc__card { margin-top: 16px; }
}

.doc__intro { font-size: 17px; line-height: 1.65; color: var(--ink-soft); }
.doc__intro p { max-width: 66ch; margin: 0 0 14px; }

/* --- Tartalomjegyzek ---
   Csak 6+ szakasznal jelenik meg (lasd Application::documentPage()).
   Nem doboz a dobozban: vekony vonalak fogjak kozre, ket hasabban. */
.doc__toc {
	margin: 8px 0 30px; padding: 16px 0;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}
.doc__toc ol { margin: 0; padding-left: 18px; columns: 2; column-gap: 36px; }
.doc__toc li { margin: 4px 0; font-size: 14px; break-inside: avoid; }
.doc__toc a { color: var(--ink-soft); text-decoration: none; }
.doc__toc a:hover { color: var(--brand-text); text-decoration: underline; }

@media (max-width: 640px) { .doc__toc ol { columns: 1; } }

/* --- Szakaszok ---
   A sorszam a margora kerul, nem a cim ele: igy a cimek egy vonalban
   kezdodnek, es a szemnek van mibe kapaszkodnia vegiggorgeteskor. */
.doc__section { margin-top: 30px; scroll-margin-top: 20px; }
.doc__section:first-of-type { margin-top: 0; }

.doc__h2 {
	position: relative;
	font-family: var(--display); font-size: 19px; font-weight: 600;
	color: var(--ink); margin: 0 0 12px; padding-left: 38px;
	line-height: 1.3;
}
.doc__num {
	position: absolute; left: 0; top: 0;
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 26px; height: 26px; padding: 0 6px;
	font-size: 12px; font-weight: 600;
	color: var(--brand-text); background: var(--plan-selected-bg);
	border-radius: 999px;
}

.doc__h3 {
	font-size: 12px; font-weight: 600; letter-spacing: .06em;
	text-transform: uppercase; color: var(--muted);
	margin: 20px 0 6px;
}

.doc__section p { max-width: 66ch; margin: 0 0 12px; line-height: 1.65; }
.doc__list { max-width: 66ch; padding-left: 20px; }
.doc__list li { margin-bottom: 14px; line-height: 1.6; }

/* Zaro sav: kapcsolat, hivatkozas. Nem kartya — az mar sok doboz lenne. */
.doc__foot { margin: 22px 0 0; font-size: 14px; color: var(--muted); text-align: center; }

.doc__cta { margin-top: 18px; padding: 22px 26px; }
.doc__cta p { margin: 0 0 8px; color: var(--ink-soft); }
.doc__cta p:last-child { margin-bottom: 0; }
.doc__cta--center { text-align: center; background: none; border: 0; box-shadow: none; padding: 0; }

.btn--auto { width: auto; min-width: 220px; margin: 0 auto 12px; }

/* KITOLTETLEN HELY a szerzodestervezetekben. Rikito, mert elesiteni
   ilyennel NEM szabad — ha megis kimegy, azonnal latszodjon. */
.doc__todo { background: #fde68a; color: #7c2d12; padding: 0 3px; border-radius: 3px; }

/* --- GYIK ---
   Csoportonkent egy kartya, benne <details> elemek. A <details> azert
   kell, mert a bongeszo keresoje (Ctrl+F) a csukott valaszban is
   talal — a JavaScriptes harmonikaban nem. */
.faq__group { padding: 26px 30px; margin-bottom: 16px; }
.faq__group-title {
	font-family: var(--display); font-size: 13px; font-weight: 600;
	letter-spacing: .06em; text-transform: uppercase;
	color: var(--brand-text); margin: 0 0 6px;
}

.faq__item { border-top: 1px solid var(--line); }
.faq__item:first-of-type { border-top: 0; }

.faq__q {
	display: flex; align-items: flex-start; gap: 12px;
	padding: 14px 0; font-weight: 600; font-size: 16px;
	color: var(--ink); cursor: pointer; list-style: none;
	transition: color .15s;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--brand-text); }

/* A jel sajat elem, hogy a hosszu kerdes ne folyjon ala. */
.faq__q::before {
	content: "+";
	flex: none; width: 22px; height: 22px; margin-top: 1px;
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 15px; font-weight: 400; line-height: 1;
	color: var(--brand-text); background: var(--plan-selected-bg);
	border-radius: 50%;
}
.faq__item[open] .faq__q::before { content: "\2212"; }
.faq__item[open] .faq__q { color: var(--brand-text); }

.faq__a { padding: 0 0 16px 34px; color: var(--ink-soft); }
.faq__a p { margin: 0 0 10px; max-width: 64ch; line-height: 1.65; }
.faq__a p:last-child { margin-bottom: 0; }

/* --- Uzemallapot --- */
.status__row {
	display: flex; align-items: center; gap: 10px;
	padding: 14px 0; border-top: 1px solid var(--line);
}
.status__row:first-child { border-top: 0; }
.status__dot {
	flex: none; width: 9px; height: 9px; border-radius: 50%;
	background: var(--muted);
}

/* --- Dijcsomagok --- */
.plans--pricing { margin: 0 0 18px; }
.plans--pricing .plan__body { cursor: default; padding: 24px 22px; }
.plans--pricing .plan__price { font-size: 26px; }


/* =====================================================================
   WHY US — kampany landing oldal
   =====================================================================
   TELJES SZELESSEGU SAVOK, valtakozo hatterrel. Nem kartyak: a kartya
   azt sugallja, hogy a tartalom egy dobozba van zarva, egy landing
   oldalon viszont a savok viszik lefele a szemet.

   A savok valtakozva kapnak hatteret, es a kep valtakozva kerul balra
   vagy jobbra. A ketto EGYUTT ad ritmust — csak az egyik onmagaban
   monoton marad.
   ===================================================================== */

.band { padding: 52px 0; }
.band--alt { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.band--cta { padding: 44px 0 64px; }

.band__inner { display: grid; gap: 28px; align-items: center; }

@media (min-width: 860px) {
	.band__inner { grid-template-columns: 1fr 1fr; gap: 56px; }

	/* A kep atkerul a masik oldalra. Az `order` dont, nem a
	   DOM-sorrend: a szoveg igy MINDIG elobb all a forrasban, tehat
	   kepernyoolvasoval es kikapcsolt CSS-sel is logikus a sorrend. */
	.band--flip .band__media { order: 1; }
	.band--flip .band__body  { order: 2; }
}

.band__title {
	font-family: var(--display);
	font-size: clamp(21px, 2.2vw, 26px);
	font-weight: 600;
	color: var(--brand-text);
	margin: 0 0 12px;
	line-height: 1.25;
}

.band__text { color: var(--ink-soft); line-height: 1.7; margin: 0; max-width: 54ch; font-size: 17px; }
.band__text a { text-decoration: underline; text-underline-offset: 2px; }

/* --- Illusztracio-helykitolto ---
   Megtartja a helyet a vegleges kep aranyaival, es KIIRJA, mit var:
   fajlnev es meret. Igy az elrendezes mar most a vegleges, es nem kell
   kulon dokumentumban vezetni, milyen kepek hianyoznak. */
/* A helykitolto kotott aranyu (a vezerlo allitja be soronkent), a
   VEGLEGES kep viszont a sajat aranyat tartja: egy 1:2-es fotot 4:3-ba
   vagni annyi, mint kidobni belole azt, amiert kivalasztottak. */
.band__media {
	display: flex; flex-direction: column;
	align-items: center; justify-content: center;
	gap: 6px;
	background: var(--plan-selected-bg);
	border: 1px dashed var(--plan-featured-line);
	border-radius: var(--r-s);
	color: var(--muted);
	font-size: 13px; text-align: center;
	padding: 16px;
}

.band__media strong { display: block; color: var(--brand-text); font-size: 14px; }
.band__media code { font-size: 12px; opacity: .8; word-break: break-all; }

.band__media--real {
	display: block;
	background: none;
	border: 0;
	padding: 0;
	text-align: left;
}

.band__media--real img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--r-s);
}

/* A kredit halkan, a kep alatt. Kotelezo nem volna, de a fotos
   munkaja nelkul nem lenne mit mutatni. */
.band__credit { margin: 8px 0 0; font-size: 12px; color: var(--muted); }
.band__credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* --- Tenyek ---
   Nem felsorolas, hanem szam + magyarazat. A szam a horgony. */
.why__facts { display: grid; gap: 26px; }

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

.why__fact-num {
	display: block;
	font-family: var(--display);
	font-size: 38px; font-weight: 600; line-height: 1;
	color: var(--brand-text);
	margin-bottom: 8px;
}

.why__fact-text { font-size: 15px; color: var(--ink-soft); line-height: 1.55; }


/* =====================================================================
   HIBAOLDALAK
   =====================================================================
   Ugyanaz a formanyelv, mint a tobbi tartalmi oldalon. Egy hibaoldal
   ne nezzen ki ugy, mintha egy masik rendszerbol jonne — az azt
   sugallja, hogy valami tenyleg osszeomlott.
   ===================================================================== */

/* A hibakod NAGY es halvany: informacio, nem cimsor. Aki tudja, mit
   jelent, annak segit; aki nem, azt nem zavarja. */
.page-head--error .page-head__eyebrow {
	font-size: 56px;
	line-height: 1;
	letter-spacing: -.02em;
	text-transform: none;
	color: var(--plan-featured-line);
	margin-bottom: 4px;
}

.error__links { margin: 22px 0 8px; }

.error__suggest { margin: 18px 0 0; padding-left: 20px; }
.error__suggest li { margin-bottom: 6px; }

/* =====================================================================
   ZÁRÓ FELHÍVÁS — a why oldal alján
   =====================================================================
   Aki idáig elolvasta az oldalt, már meggyőzött. Itt nem érvelni kell
   tovább, hanem MEGKÖNNYÍTENI a lépést: nagyobb gomb, több levegő, és
   három rövid megnyugtatás, ami a döntés utolsó akadályait veszi el.

   A sáv sötét, mert a lap többi része világos — a kontraszt jelzi,
   hogy ez a vége, és ide kell nézni. */
.band--cta-strong {
	background: var(--navy, #001043);
	color: #fff;
	padding: 4.5rem 0;
}

.cta-final {
	max-width: 40rem;
	margin: 0 auto;
	text-align: center;
}

.cta-final__title {
	font-size: clamp(1.6rem, 3.2vw, 2.3rem);
	line-height: 1.2;
	font-weight: 700;
	margin: 0 0 0.75rem;
	color: #fff;
}

.cta-final__lead {
	font-size: 1.05rem;
	line-height: 1.65;
	margin: 0 0 2rem;
	color: rgba(255, 255, 255, 0.82);
}

/* A GOMB VILÁGOS a sötét sávon: a fordított kontraszt teszi a lap
   legerősebb elemévé. */
.band--cta-strong .btn--large {
	display: inline-block;
	background: #fff;
	color: var(--navy, #001043);
	font-size: 1.05rem;
	font-weight: 700;
	padding: 1rem 2.75rem;
	border-radius: 8px;
	border: 0;
	text-decoration: none;
	transition: transform .15s ease, box-shadow .15s ease;
}

.band--cta-strong .btn--large:hover {
	transform: translateY(-1px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
}

/* A HÁROM PONT nem felsorolás-jelekkel, hanem pipákkal: azok
   megerősítést sugallnak, nem tennivalót. */
.cta-final__points {
	list-style: none;
	margin: 2rem 0 0;
	padding: 0;
	display: inline-flex;
	flex-direction: column;
	gap: .55rem;
	text-align: left;
}

.cta-final__points li {
	position: relative;
	padding-left: 1.75rem;
	font-size: .95rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.88);
}

.cta-final__points li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .35em;
	width: 1rem;
	height: .55rem;
	border-left: 2px solid #6ee7a0;
	border-bottom: 2px solid #6ee7a0;
	transform: rotate(-45deg);
}

.cta-final__note {
	margin: 2rem 0 0;
	font-size: .85rem;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.6);
}

.cta-final__note a {
	color: rgba(255, 255, 255, 0.85);
}

@media (max-width: 640px) {
	.band--cta-strong { padding: 3rem 0; }
	.cta-final__points { display: flex; }
	.band--cta-strong .btn--large { display: block; padding: 1rem; }
}

/* =====================================================================
   LEBEGŐ "FEL" GOMB
   =====================================================================
   Hosszú lapokon (ÁSZF, adatvédelem, GYIK) segít a tetejére jutni.
   A megjelenítést JS kapcsolja; itt csak a kinézete van. */
.to-top {
	position: fixed;
	right: 1.25rem;
	bottom: 1.25rem;
	z-index: 60;

	width: 2.75rem;
	height: 2.75rem;
	border: 0;
	border-radius: 50%;

	background: var(--navy, #001043);
	color: #fff;
	cursor: pointer;

	display: flex;
	align-items: center;
	justify-content: center;

	box-shadow: 0 4px 16px rgba(0, 0, 0, .22);
	transition: transform .15s ease, box-shadow .15s ease, opacity .2s ease;
}

.to-top[hidden] { display: none; }

.to-top:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 22px rgba(0, 0, 0, .3);
}

.to-top:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* MOBILON KISEBB ÉS BELJEBB: ott a hüvelykujj útjában lenne, és a
   lap alján gyakran van gomb vagy link. */
@media (max-width: 640px) {
	.to-top {
		right: .9rem;
		bottom: .9rem;
		width: 2.5rem;
		height: 2.5rem;
	}
}

/* AKI NEM KÉR ANIMÁCIÓT, annak a görgetés is ugorjon. */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.to-top { transition: none; }
}

/* =====================================================================
   HOZZÁJÁRULÁSI SÁV
   =====================================================================
   A lap alján ül, nem takarja el a tartalmat, és NEM modális: a
   látogató elolvashatja az adatvédelmi tájékoztatót anélkül, hogy
   előbb döntenie kellene.

   A KÉT GOMB EGYENRANGÚ. Egy sáv, ahol az elutasítás egy kattintással
   messzebb van, nem érvényes hozzájárulás — a felügyeleti hatóságok
   ezt többször kimondták. Ezért van azonos méretben mindkettő; a
   különbség csak a kitöltésben van, nem az elérhetőségben. */
.consent {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 80;

	background: var(--navy, #001043);
	color: #fff;
	box-shadow: 0 -4px 20px rgba(0, 0, 0, .25);
}

.consent__inner {
	max-width: 68rem;
	margin: 0 auto;
	padding: 1rem 1.25rem;

	display: flex;
	gap: 1.25rem;
	align-items: center;
	flex-wrap: wrap;
}

.consent__text {
	flex: 1;
	min-width: 16rem;
	font-size: .9rem;
	line-height: 1.55;
	color: rgba(255, 255, 255, .88);
}

.consent__text strong { color: #fff; }

.consent__text a {
	color: #9ecbff;
	text-decoration: underline;
}

.consent__buttons {
	display: flex;
	gap: .6rem;
	flex-wrap: wrap;
}

.consent__btn {
	font: 600 .9rem/1 inherit;
	padding: .7rem 1.35rem;
	border: 1px solid #fff;
	border-radius: 6px;
	background: #fff;
	color: var(--navy, #001043);
	cursor: pointer;
	white-space: nowrap;
}

.consent__btn--ghost {
	background: transparent;
	color: #fff;
}

.consent__btn:hover { opacity: .88; }

.consent__btn:focus-visible {
	outline: 2px solid #9ecbff;
	outline-offset: 2px;
}

/* MOBILON a gombok teljes szélességben, egymás alatt — így egyik sem
   kerül hüvelykujj-távolságban előnybe a másikkal szemben. */
@media (max-width: 560px) {
	.consent__inner { padding: .9rem 1rem; }
	.consent__buttons { width: 100%; }
	.consent__btn { flex: 1; text-align: center; }
}

/* A FEL-GOMB ÜLJÖN FELJEBB, amíg a sáv látszik. */
.consent ~ .to-top { bottom: 6.5rem; }

/* =====================================================================
   ÁRAK OLDAL — a blokkok közti levegő
   =====================================================================
   A "Minden csomagban benne van" és az "AI fogalmazó" ugyanazt a
   `faq__group-title` osztályt használja, ami a GYIK-en jó, de itt
   egymás után két lista jön, és összeértek.

   Nem az osztályt írjuk át — azt a GYIK is használja —, hanem a
   szomszédossági viszonyt: ahol lista után cím jön, ott kell a hely. */
.page-body .doc__list + .faq__group-title,
.page-body .doc__list + h2 {
	margin-top: 2.75rem;
}

.page-body .doc__list {
	margin-bottom: 1.5rem;
}

/* =====================================================================
   KÁRTYÁS FIZETÉS — a mezők PayPal által hosztolt iframe-ek
   ===================================================================== */
.payment {
	max-width: 38rem;
	margin-inline: auto;
}

.payment__summary {
	display: grid;
	gap: .35rem;
	margin: 1.25rem 0 1.5rem;
	padding: 1rem 1.1rem;
	border-radius: 8px;
	background: var(--soft, #f4f5f8);
	font-size: .92rem;
}

.payment__amount {
	margin-top: .35rem;
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--navy, #001043);
}

.payment__method h2 {
	margin: 1.35rem 0 .35rem;
	font-size: 1.05rem;
}

.paypal-field {
	height: 3rem;
	width: 100%;
	border: 1px solid var(--line, #c8ccd8);
	border-radius: 6px;
	background: #fff;
	overflow: hidden;
}

.paypal-field:focus-within {
	border-color: var(--navy, #001043);
	box-shadow: 0 0 0 3px rgba(0, 16, 67, .12);
}

.payment__card-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}

.payment__pay {
	width: 100%;
	margin-top: .35rem;
}

.payment__alternative {
	display: flex;
	align-items: center;
	gap: .8rem;
	margin: 1.4rem 0 .8rem;
	color: var(--muted, #687086);
	font-size: .85rem;
	text-transform: uppercase;
}

.payment__alternative::before,
.payment__alternative::after {
	content: '';
	flex: 1;
	height: 1px;
	background: var(--line, #d8dbe3);
}

.payment paypal-button {
	display: block;
	width: 100%;
	--paypal-button-border-radius: 6px;
}

.payment__security,
.payment__loading {
	margin: 1.2rem 0 0;
	color: var(--muted, #687086);
	font-size: .82rem;
	line-height: 1.5;
	text-align: center;
}

.payment--busy .payment__method,
.payment--busy .payment__alternative {
	opacity: .62;
	pointer-events: none;
}

@media (max-width: 480px) {
	.payment__card-row { grid-template-columns: 1fr; gap: 0; }
}