/*
Theme Name: Tier One Digital
Theme URI: https://tieronedigital.hu
Author: Tier One Digital
Author URI: https://tieronedigital.hu
Description: Block theme for Tier One Digital. Hungarian-language marketing site for an automation and AI integration studio serving Hungarian SMEs. Zero plugins, zero external requests, self-hosted fonts.
Version: 5.12.2
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tier-one-digital
Tags: block-theme, one-column, custom-colors, custom-menu, accessibility-ready, blog, portfolio
*/

/*
 * Design tokens live in theme.json. This file carries only the component styles
 * that theme.json cannot express.
 *
 * Every value references a token. Raw numbers appear only where the pixel value
 * is the point: hairlines, logo heights, and motion timings.
 *
 * Naming: .tod-<block>__<element>--<modifier>
 */

/* ===========================================================================
   0. GÖRGETÉS
   =========================================================================== */

/*
 * Nincs túlgörgetés egyik irányban sem.
 *
 * A gumiszalag-effektus a lap tetején és alján kitakarta a viewporton kívüli
 * sávot, ami azt az érzetet keltette, mintha a tartalom kilógna valahol.
 *
 * Ennek ára van: Androidon a lehúzásos frissítés is elmarad, mert azt is a
 * függőleges túlgörgetés indítja. Ha ez hiányozna, a `-y` sor elhagyható.
 */
html {
	overscroll-behavior: none;
}

/* ===========================================================================
   1. SKIP LINK
   Keyboard users reach this first. Kept in the layout (not display:none) so
   screen readers announce it.
   =========================================================================== */

/*
 * Elrejtve nincs mérete, nem csak el van tolva.
 *
 * Korábban `translateY(-150%)` vitte ki a képből, vagyis a doboz teljes
 * méretében ott maradt a viewport fölött — felfelé túlgörgetve elő is bukkant
 * egy sötétkék téglalap a bal felső sarokban. Az 1×1 pixelre vágott változat
 * ugyanúgy felolvasható és fókuszálható, viszont nincs mit kitakarni.
 */
.tod-skip-link {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1000;
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	text-decoration: none;
}

.tod-skip-link:focus {
	width: auto;
	height: auto;
	padding: 0.75rem 1.25rem;
	overflow: visible;
	clip-path: none;
}

/* ===========================================================================
   2. HEADER
   Sticky, with a permanent hairline instead of a scroll-triggered shadow.
   No scroll listener means no JavaScript and no repaint on every frame.
   =========================================================================== */

/*
 * A tapadó fejléc a sablonrész BURKÁN ül, nem magán a fejlécen.
 *
 * A `position: sticky` mindig a közvetlen szülő dobozán belül ragad. A
 * WordPress a fejlécet egy saját `<div class="wp-block-template-part">`-ba
 * teszi, aminek a magassága pontosan a fejléc magassága — vagyis a sticky
 * elemnek nulla mozgástere volt, és az első képernyő után egyszerűen
 * kigörgött. Ránézésre a szabály helyes volt; a doboz volt rossz.
 *
 * A burok viszont a `.wp-site-blocks` közvetlen gyereke, aminek a magassága
 * a teljes oldal. Onnan van hová tapadni.
 */
.wp-site-blocks > .wp-block-template-part:has(> .tod-header) {
	position: sticky;
	top: 0;
	z-index: 100;
}

.admin-bar .wp-site-blocks > .wp-block-template-part:has(> .tod-header) {
	top: 32px;
}

/*
 * Tartalék azoknak a böngészőknek, amelyek nem ismerik a `:has()`-t.
 *
 * Ott a fejléc a régi módon próbál tapadni: a legfelső képernyőn működik,
 * lejjebb nem. Rosszabb, de nem törött — és 2023 óta minden böngésző tudja
 * a `:has()`-t, tehát ez néhány régi eszközre vonatkozik.
 */
.tod-header {
	--tod-focus-color: var(--wp--preset--color--accent);

	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--wp--preset--color--contrast);
	border-bottom: 1px solid var(--wp--custom--color--navy-line);
	color: var(--wp--preset--color--base);
}

.admin-bar .tod-header {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .wp-site-blocks > .wp-block-template-part:has(> .tod-header),
	.admin-bar .tod-header {
		top: 46px;
	}
}

/*
 * A fejléc ugyanarra a vonalra igazodik, mint a tartalom.
 *
 * Korábban a doboz szélessége volt 75rem, a térköz pedig azon belül — így a
 * logó és a gomb 48 pixellel beljebb ült, mint alattuk a címsorok. A szakaszok
 * ezzel szemben teljes szélességűek, és a térközt kívülre teszik. A 75rem-hez
 * ezért itt hozzá kell adni a két oldali térközt: a doboz így lesz szélesebb,
 * a belseje viszont pontosan 75rem, vagyis a tartalom oszlopa.
 */
.tod-header__inner {
	--tod-gutter: clamp(1.25rem, 4vw, 3rem);

	max-width: calc(var(--wp--style--global--wide-size) + 2 * var(--tod-gutter));
	margin-inline: auto;
	padding-block: var(--wp--preset--spacing--50);
	padding-inline: var(--tod-gutter);
	gap: var(--wp--preset--spacing--70);
}

.tod-header__nav {
	gap: var(--wp--preset--spacing--70);
}

/*
 * A belső sor a skip link után a második gyerek, ezért a WordPress 24px
 * felső blokktávolságot ad neki. A skip link abszolút pozíciós, így ez a
 * margó átcsúszott a fejlécen a lap tetejére: fehér csík lett a fejléc felett.
 */
.tod-header > .tod-header__inner {
	margin-block-start: 0;
}

.tod-header__cta .wp-block-button__link {
	padding-block: 0.625rem;
	padding-inline: 1.125rem;
	white-space: nowrap;
}

@media (max-width: 480px) {
	.tod-header__cta .wp-block-button__link {
		font-size: var(--wp--preset--font-size--x-small);
		padding-inline: 0.875rem;
	}
}

/*
 * Olvasási haladásjelző.
 *
 * A képernyő tetejére rögzítve fut végig, a fejléc fölött — így minden oldalon
 * látszik, és görgetés közben sem csúszik el.
 *
 * Először görgetéshez kötött CSS-animáció hajtotta (`animation-timeline:
 * scroll()`). A böngésző elfogadta a szabályt, az idővonal mégis inaktív
 * maradt: a `currentTime` végig `null` volt, a sáv pedig nulla szélességen
 * ragadt. Nem derítettem ki, mi tette el — de egy olyan funkciót, ami vagy
 * működik, vagy némán nem, nem érdemes kísérleti szolgáltatásra bízni. Ezért
 * most `progress.js` írja a szélességet, scroll-figyelővel.
 *
 * A figyelő passzív, és képkockánként legfeljebb egyszer fut le: a scroll
 * esemény csak egy jelzőt állít, a tényleges írás a következő rajzolás előtt
 * történik.
 */
.tod-progress {
	position: fixed;
	inset-inline: 0;
	top: 0;
	z-index: 200;
	height: 3px;
	overflow: hidden;
	pointer-events: none;
}

/*
 * A sáv mindig a képernyő legtetején ül — nincs eltolás, sem asztali gépen,
 * sem telefonon.
 *
 * Volt itt egy kivétel a bejelentkezett nézetre, ami az admin sáv magasságával
 * lejjebb tolta. Ez a látogatók nézetében is elmozdította a sávot a széltől, és
 * a menta vonal belelógott a tartalomba. Egy 3 pixeles jelző nem ér annyit,
 * hogy bárhol a szöveg fölé kerüljön: inkább tapadjon a legfelső élhez, és ha
 * bejelentkezve az admin sáv eltakarja, az nem a látogató baja.
 */
.tod-progress__bar {
	display: block;
	height: 100%;
	background: var(--wp--preset--color--accent);
	transform: scaleX(0);
	transform-origin: 0 50%;
}

/* ===========================================================================
   3. LOGO
   One drawing, two lockups. The header carries the full lockup at 44px, which
   is the smallest size where DIGITAL still resolves; below that it turns to
   mush and the wordmark alone is the honest choice.
   =========================================================================== */

.tod-logo {
	display: inline-flex;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	flex-shrink: 0;
}

/* The logo is an identity, not a link affordance: it never recolours on hover. */
.tod-logo:hover,
.tod-logo:focus {
	color: var(--wp--preset--color--contrast);
}

.tod-logo__mark {
	display: block;
	height: 44px;
	width: auto;
}

.tod-logo--footer .tod-logo__mark {
	height: 66px;
}

.tod-dark .tod-logo,
.tod-dark .tod-logo:hover {
	color: var(--wp--preset--color--base);
}

@media (max-width: 960px) {
	.tod-logo__mark {
		height: 38px;
	}
}

/* ===========================================================================
   4. NAVIGATION
   Core renders real anchors into the server HTML, including inside the mobile
   overlay, so every destination stays reachable with JavaScript disabled.
   =========================================================================== */

.tod-header .wp-block-navigation-item__content {
	text-decoration: none;
	font-weight: 500;
}

.tod-header .wp-block-navigation-item__content:hover,
.tod-header .current-menu-item > .wp-block-navigation-item__content {
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--accent);
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
}

/*
 * Sötétkék fejléc: a logó, a menüpontok, a lenyíló nyíl és a mobil menügomb
 * fehér. A hover-aláhúzás (menta) a fenti szabályból jön, ugyanaz, mint a
 * lenyíló menüben.
 */
.tod-header .tod-logo,
.tod-header .tod-logo:hover,
.tod-header .tod-logo:focus,
.tod-header .wp-block-navigation-item__content,
.tod-header .wp-block-navigation-submenu__toggle,
.tod-header .wp-block-navigation__responsive-container-open {
	color: var(--wp--preset--color--base);
}

.tod-header .wp-block-navigation__submenu-container {
	border: 1px solid var(--wp--custom--color--navy-line);
	border-radius: var(--wp--custom--radius--sm);
	box-shadow: var(--wp--preset--shadow--md);
	padding-block: var(--wp--preset--spacing--30);
}

.tod-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding-block: var(--wp--preset--spacing--40);
	padding-inline: var(--wp--preset--spacing--60);
}

/*
 * Mobile overlay.
 *
 * Everything aligns to the same right edge, and every item is the same size —
 * a submenu entry is not less important than a top-level one, it is just
 * further in. Depth is shown by the rule and the indent, not by shrinking the
 * text.
 *
 * The whole menu has to fit a phone without scrolling. Eleven entries at 20px
 * with 1rem gaps do not: on a 667px screen they run off the bottom. Two things
 * fix it — the submenu starts closed (see below), and every entry sits at the
 * body size rather than the large heading size.
 */
.tod-header .wp-block-navigation__responsive-container.is-menu-open {
	padding: var(--wp--preset--spacing--80) var(--wp--preset--spacing--70);
}

.tod-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.tod-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.tod-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	width: 100%;
	align-items: flex-end;
	justify-content: flex-start;
	text-align: right;
}

.tod-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: var(--wp--preset--spacing--60);
}

/*
 * One size for every entry, top level and submenu alike.
 *
 * The container-content class in the middle of these two selectors is not
 * decoration. Core styles the overlay through five-class selectors, and the
 * shorter version of these rules quietly lost to them — the submenu kept core's
 * 2rem padding and never showed our hairline. Naming the wrapper puts us one
 * class ahead, which is what makes the rules take effect at all.
 */
.tod-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 500;
	text-align: right;
	justify-content: flex-end;
	padding-inline: 0;
	width: auto;
}

.tod-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	align-items: flex-end;
	width: 100%;
}

/* The submenu is an indented list, not a floating panel. */
.tod-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container {
	position: static;
	border: 0;
	box-shadow: none;
	background: transparent;
	border-right: 1px solid var(--wp--custom--color--navy-line);
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60) 0 0;
	margin: var(--wp--preset--spacing--40) 0 0;
	gap: var(--wp--preset--spacing--50);
	min-width: 0;
	width: 100%;
	align-items: flex-end;
	text-align: right;
}

/*
 * A nyitás és zárás szabályai NEM itt vannak.
 *
 * Ezen a helyen három kör alatt négy egymásnak ellentmondó változat gyűlt
 * össze: `[aria-expanded="false"]`, `[aria-expanded="true"]`, saját osztály,
 * majd a kettő keveréke. Ezek részben halott kódként éltek tovább — egy
 * későbbi `!important` már úgyis felülírta őket —, de olvasva azt sugallták,
 * hogy a menü itt dől el. Nem itt dől el.
 *
 * A teljes logika egy helyen áll, a stíluslap végén: „28. A MOBIL ALMENÜ —
 * ZÁRÓ SZÓ". Egy viselkedés, egy hely.
 */

/*
 * The arrow that opens the submenu.
 *
 * Core hides its own icon in the overlay, and the icon is a sibling of the
 * button rather than a child of it, so it cannot be placed next to the label.
 * We draw the chevron on the button instead, to the left of the words, so the
 * labels themselves stay flush with the right edge.
 */
/*
 * A szülő menüpont link, a chevron külön gomb.
 *
 * A menü `openSubmenusOnClick: false` beállítással fut, tehát a core két külön
 * elemet rajzol: egy `<a>`-t a címkével, és mellé egy kis `<button>`-t a
 * nyíllal. Ez így helyes — a „Szolgáltatások" felirat magára a szolgáltatások
 * oldalra visz, a nyíl pedig csak nyit és csuk. Korábban az egész sor gomb
 * volt, és a gyűjtőoldalra a menüből egyáltalán nem lehetett eljutni.
 *
 * A sor ezért tördelhető: a link és a nyíl egymás mellett, az almenü alattuk
 * teljes szélességben.
 */
.tod-header .wp-block-navigation__responsive-container.is-menu-open .has-child {
	flex-wrap: wrap;
	justify-content: flex-end;
}

.tod-header .wp-block-navigation__responsive-container.is-menu-open .has-child > .wp-block-navigation__submenu-container {
	flex-basis: 100%;
}

/*
 * A nyíl gomb.
 *
 * Negyvennégy pixel tapintható felület — ennél kisebbet telefonon nehéz
 * eltalálni, és ez az egyetlen módja, hogy az almenü kinyíljon.
 */
.tod-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0;
	margin-left: var(--wp--preset--spacing--40);
	order: -1;
	background: none;
	border: 0;
	color: inherit;
	cursor: pointer;
}

.tod-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon {
	margin: 0;
}

.tod-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle svg {
	width: 16px;
	height: 16px;
	transition: transform 0.16s ease;
}

.tod-header .wp-block-navigation__responsive-container.is-menu-open .has-child.tod-submenu-open .wp-block-navigation-submenu__toggle svg {
	transform: rotate(180deg);
}

/*
 * Tableten már a hamburger jön.
 *
 * A hat menüpont, a logó és a foglalás gomb együtt nagyjából 830 pixel sávot
 * kér. A core 600 pixelnél vált át fekvő sorra, ezért 600 és 1024 között a
 * menüpontok két sorba törtek, és a fejléc kétszer olyan magas lett. Itt tehát
 * korábban váltunk: 1024-ig a hamburger marad, fölötte a teljes sor.
 *
 * A core szabályai `:where()`-rel írják elő a fekvő menüt, azoknak nulla a
 * súlyuk — a `.tod-header` előtag bőven elég, hogy ez legyen az erősebb.
 */
@media (max-width: 1024px) {
	.tod-header .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none;
	}

	.tod-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	/*
	 * A hamburger a külső szélre kerül, a foglalás gomb mögé — a logó és a
	 * gomb közé ékelt menügomb a gomb részének látszana.
	 */
	.tod-header__nav {
		flex-direction: row-reverse;
		gap: var(--wp--preset--spacing--50);
	}

	/*
	 * A menügomb nem zsugorodhat. Telefonon a logó és a foglalás gomb elvette
	 * előle a helyet, és 4 pixel szélesre nyomódott: látszott egy pötty, de nem
	 * lehetett rákoppintani.
	 */
	.tod-header .wp-block-navigation,
	.tod-header .wp-block-navigation__responsive-container-open,
	.tod-header .wp-block-navigation__responsive-container-open svg {
		flex-shrink: 0;
	}
}

@media (max-width: 480px) {
	.tod-header__inner,
	.tod-header__nav {
		gap: 0.75rem;
	}
}

/* 400px alatt a logó és a gomb kisebb, hogy a menügomb is elférjen. */
@media (max-width: 400px) {
	.tod-header .tod-logo .tod-logo__mark {
		height: 32px;
	}

	.tod-header__cta .wp-block-button__link {
		padding-inline: 0.625rem;
	}
}

/* A legkeskenyebb telefonokon a foglalás gomb a hero-ban marad, a fejlécből kikerül. */
@media (max-width: 340px) {
	.tod-header__cta {
		display: none;
	}
}

/* ===========================================================================
   5. SHARED UTILITIES
   =========================================================================== */

.tod-section {
	padding-block: var(--wp--custom--layout--section-padding);
}

.tod-section--tinted {
	background: var(--wp--preset--color--surface);
	border-block: 1px solid var(--wp--custom--color--line-subtle);
}

/*
 * Sections butt straight up against each other.
 *
 * WordPress puts a block gap between sibling blocks, which here appeared as a
 * strip of page background between two full-bleed bands — a seam that looks
 * like a mistake rather than a boundary. Each section carries its own vertical
 * padding, so it needs no margin at all.
 */
.tod-section,
.tod-hero {
	margin-block: 0;
}

/*
 * A hero címsora három, kézzel tört sor; a kiemelt középső sor nem törhet.
 * Mért arány: a „hatékony rendszereket” szélessége ≈ 10,5 × betűméret, ezért
 * a méret a hasáb szélességéhez (asztalon ~47vw, mobilon vw − 40px) igazodik.
 */
.tod-hero h1.has-display-font-size {
	font-size: clamp(1.875rem, 3.9vw, 3.25rem) !important;
}

.tod-hero h1 mark {
	white-space: nowrap;
}

@media (max-width: 781px) {
	.tod-hero h1.has-display-font-size {
		font-size: clamp(1.375rem, 7.3vw - 0.125rem, 2.125rem) !important;
	}
}

/*
 * Two plain white sections in a row have nothing between them but empty space,
 * which reads as a gap rather than as a boundary. A hairline gives the eye the
 * edge it is looking for. Tinted and dark sections bring their own edge, so
 * they are excluded.
 */
.tod-section + .tod-section:not(.tod-section--tinted):not(.tod-dark) {
	border-top: 1px solid var(--wp--custom--color--line-subtle);
}

.tod-label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	letter-spacing: 0.08em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-muted);
	margin: 0;
}

/*
 * Section numbers count themselves.
 *
 * They used to be typed into each pattern, which meant the numbering drifted
 * the moment a section was reordered or left out — a page could show 08 as its
 * seventh section. A CSS counter cannot drift: it counts what is actually on
 * the page, in the order it actually appears.
 */
.tod-main,
.wp-site-blocks {
	counter-reset: tod-section;
}

.tod-section {
	counter-increment: tod-section;
}

.tod-label--indexed::before {
	content: counter(tod-section, decimal-leading-zero) " / ";
	color: var(--wp--custom--color--line-strong);
}

/*
 * A bevezető egy fokkal a szövegtörzs fölött ül, nem kettővel. A 20px túl
 * hangosan versengett a címsorral; 18px már csak annyit mond, hogy ez a
 * bekezdés a belépő. A méret nem preset, mert a skálán nincs 17 és 20 között
 * fok — egyetlen komponens kedvéért pedig nem érdemes újat nyitni.
 *
 * A bal margó !important, és ez nem hanyagság. A WordPress a constrained
 * elrendezés minden gyermekére kiírja a `margin-left: auto !important;
 * margin-right: auto !important` párost, ezért a korábbi `margin-inline: 0
 * auto` soha nem érvényesült — a bevezetők ettől csúsztak középre. Csak azonos
 * fegyverrel lehet visszavenni tőle.
 *
 * A nulla viszont kevés volt: a szakasz belső doboza szélesebb, mint a 75rem-es
 * szövegoszlop, így a bevezető a szakasz széléhez tapadt, jóval a címsor bal
 * éle elé. Ez a képlet pontosan a szövegoszlop bal élét adja vissza — széles
 * képernyőn behúzza a címsorhoz, keskenyen pedig nullára esik, tehát oszlopon
 * vagy szűk sávon belül ugyanúgy balra zár, mint eddig.
 */
.tod-lead {
	font-size: 1.125rem;
	line-height: 1.6;
	color: var(--wp--preset--color--text-muted);
	max-width: 52ch;
	margin-left: max(0px, (100% - 75rem) / 2) !important;
	margin-right: auto !important;
}

/* Mobilon a sáv úgyis keskeny: a 52ch korlát ott már csak akadály. */
@media (max-width: 782px) {
	.tod-lead {
		font-size: var(--wp--preset--font-size--medium);
		max-width: none;
	}
}

.tod-rule {
	border: 0;
	border-top: 1px solid var(--wp--custom--color--line-subtle);
	width: 100%;
	margin: 0;
	opacity: 1;
	max-width: none;
}

/* Drawing-sheet corner marks. Two per section: top-left and bottom-right. */
.tod-marked {
	position: relative;
}

.tod-marked::before,
.tod-marked::after {
	content: "";
	position: absolute;
	width: 11px;
	height: 11px;
	pointer-events: none;
	background:
		linear-gradient(var(--wp--preset--color--line) 0 0) center / 11px 1px no-repeat,
		linear-gradient(var(--wp--preset--color--line) 0 0) center / 1px 11px no-repeat;
}

.tod-marked::before {
	top: calc(var(--wp--custom--layout--section-padding) * -0.5);
	left: 0;
	transform: translate(-50%, -50%);
}

.tod-marked::after {
	bottom: calc(var(--wp--custom--layout--section-padding) * -0.5);
	right: 0;
	transform: translate(50%, 50%);
}

/* ===========================================================================
   5/B. SZOLGÁLTATÁSOLDAL FEJE
   Minden szolgáltatásoldal ezzel nyit. Nem hero: a főoldali nyitóblokk
   feladata, hogy döntésre vigyen, ezé az, hogy tájékoztasson.
   =========================================================================== */

/*
 * Nincs benne gomb.
 *
 * A szolgáltatásoldalra az jön be, aki már tudja, mit keres, és azt akarja
 * megnézni, mit kap és mennyiért. Ha rögtön két nagy gomb fogadja — foglalás
 * és árak —, azzal a lap tetején kérünk döntést attól, akinek még nincs mibe
 * kapaszkodnia. A döntés helye a lap alján lévő CTA-sáv és az árszakasz.
 *
 * Adatsáv (ár, határidő) sincs benne: az árnak az árszakaszban van a helye, a
 * hatókör után. Ami itt marad, az a morzsa, a címsor, a bevezető és a bizalmi
 * sor — ugyanez a négy elem minden szolgáltatásoldalon, hogy egy családnak
 * látsszanak.
 */
.tod-servicehead {
	padding-block: var(--wp--preset--spacing--100) var(--wp--preset--spacing--90);
	border-bottom: 1px solid var(--wp--custom--color--line-subtle);
}

.tod-servicehead__crumb {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	letter-spacing: 0.08em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-muted);
	margin: 0;
}

.tod-servicehead__crumb a {
	color: inherit;
	text-decoration: none;
}

.tod-servicehead__crumb a:hover {
	color: var(--wp--preset--color--accent-text);
	text-decoration: underline;
	text-underline-offset: 4px;
}

/*
 * Az ugrás célja ne bújjon el a ragadós fejléc alatt.
 */
:target {
	scroll-margin-top: 6rem;
}

/* ===========================================================================
   5/C. KOCKÁZATMENTESÍTÉS
   Négy vállalás közvetlenül a záró CTA előtt. Az utolsó kifogásokat veszi el
   attól, aki már majdnem rákattint.
   =========================================================================== */

/*
 * Kettő egy sorban, nem három.
 *
 * Négy elem háromoszlopos rácsban egy árva kártyát hagyna a második sorban.
 * A kártyarács itt ezért nem érvényes: saját osztályt kapnak, hogy a
 * `.tod-card` automatikus hármas rácsa ne fogja meg őket.
 *
 * A sávszélesség itt is sima hossz, nem `min()` — ugyanaz az ok, mint a
 * kártyarácsnál.
 */
.tod-guarantees {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--60);
}

.tod-guarantees > * {
	margin-block: 0;
}

@media (max-width: 782px) {
	.tod-guarantees {
		grid-template-columns: 1fr;
	}
}

/*
 * Nem doboz, hanem bejegyzés egy listában: bal oldali menta vonal jelöli, hogy
 * ez egy vállalás. Keretes kártya itt versenyezne az árkártyákkal, pedig ezek
 * nem eladnak, hanem megnyugtatnak.
 */
.tod-guarantee {
	border-left: 2px solid var(--wp--preset--color--accent);
	padding-left: var(--wp--preset--spacing--60);
}

.tod-guarantee__num {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--custom--color--line-strong);
	letter-spacing: 0.08em;
	display: block;
	margin: 0 0 var(--wp--preset--spacing--50);
	font-variant-numeric: tabular-nums;
}

/*
 * Vékony vonal két kártyacsoport között.
 *
 * Az árszakasz végén a „mi befolyásolja az árat” négy kártyája után rögtön a
 * „mi nincs benne” és a „fizetés” kártya jött, ugyanabban a formában — a szem
 * egyetlen, nyolc elemű halmazt látott ott, ahol két külön gondolat van.
 * Egy hajszálvonal és egy nagyobb térköz elválasztja őket, anélkül hogy új
 * szakaszt kellene nyitni.
 */
.tod-divide-top {
	border-top: 1px solid var(--wp--custom--color--line-subtle);
	padding-top: var(--wp--preset--spacing--80);
}

/* A záró sáv bizalmi sora sötét háttéren fut, ezért halványabb tintát kap. */
.tod-cta__meta li {
	color: var(--wp--custom--color--navy-text-muted);
}

/*
 * A problémalista zárómondata: nem újabb listaelem, hanem a szakasz
 * következtetése, ezért kiemelten, a szövegtörzs színén áll.
 */
.tod-numlist li strong {
	color: var(--wp--preset--color--contrast);
}

.tod-problem__close {
	font-weight: 700;
	color: var(--wp--preset--color--contrast);
}

/* ===========================================================================
   5/D. HASZNÁLATI ESETEK — „Ma” kontra „Automatizálva”
   =========================================================================== */

/*
 * Nem a kártyarácsba kerülnek.
 *
 * Öt eset, mindegyikben két bekezdés: háromoszlopos rácsban tornyokká nyúlnának,
 * és a szembeállítás — ami az egésznek az értelme — elveszne. Ezért teljes
 * szélességben, egymás alatt állnak, és a szembeállítás megy két hasábba.
 * Saját osztály kell hozzá, különben a `.tod-card` automatikus rácsa elkapná.
 */
.tod-usecase {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--custom--color--line-subtle);
	border-radius: var(--wp--custom--radius--sm);
	padding: var(--wp--preset--spacing--70);
}

.tod-usecase + .tod-usecase {
	margin-top: var(--wp--preset--spacing--60);
}

/*
 * A két hasáb térköze itt CSS-ből jön, nem a blokk soron belüli stílusából.
 * Kevesebb, amit a szerkesztő ellenőrizni tud — és kevesebb, ami elromolhat.
 */
.tod-usecase .wp-block-columns {
	margin-top: var(--wp--preset--spacing--60);
}

/*
 * A két állapot címkéje. A „ma” szürke, az „automatizálva” zöld — a szemnek ez
 * mondja meg, melyik oldal a jelen és melyik a javaslat, mielőtt elolvasná.
 * A zöld a szöveghez való árnyalat (#00805F, 4,94:1 fehéren), nem a kitöltésé.
 */
.tod-ba__key {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	letter-spacing: 0.08em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-muted);
	margin: 0 0 var(--wp--preset--spacing--40);
}

.tod-ba__key--auto {
	color: var(--wp--preset--color--accent);
}

/*
 * A két oldal súlya nem egyforma.
 *
 * A „ma” a jelen állapot: halvány, mint minden más másodlagos szöveg. Az
 * „automatizálva” a javaslat, ezért teljes erősségű szövegszínt és félkövérhez
 * közeli vastagságot kap. Ennyi elég — az egyik oldal olvashatóbb a másiknál,
 * és ez mondja meg a szemnek, melyik felé mutat a szakasz. Nagyobb kontraszthoz
 * (kitöltött háttér, keret) nem nyúlunk: öt eset alatt az már zajos lenne.
 */
.tod-ba__text {
	line-height: 1.6;
}

.tod-usecase .tod-ba__text--auto {
	color: var(--wp--preset--color--contrast);
	font-weight: 500;
}

/* ===========================================================================
   5/D2. MUNKÁINK KÁRTYA
   =========================================================================== */

/*
 * Fekvő kártya: kép balra, szöveg jobbra, egymás alatt három.
 *
 * A három munka rácsban keskeny hasábokká esne szét, és a borítókép akkora
 * lenne, amiből semmi nem látszik. Fekvő elrendezésben a kép kap helyet, a
 * leírás mellé fér, és a lista végigolvasható egyetlen függőleges mozdulattal.
 * Telefonon egymás alá kerül a kettő — ott a kép fölé, a szöveg alá.
 */
.tod-work {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
	gap: var(--wp--preset--spacing--70);
	align-items: center;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--custom--color--line-subtle);
	border-radius: var(--wp--custom--radius--sm);
	padding: var(--wp--preset--spacing--60);
	transition:
		border-color 0.16s ease,
		box-shadow 0.16s ease,
		transform 0.16s ease;
}

.tod-work:hover {
	border-color: var(--wp--preset--color--accent);
	box-shadow: var(--wp--preset--shadow--md);
	transform: translateY(-2px);
}

.tod-work > * {
	margin-block: 0;
}

.tod-work__media img {
	display: block;
	width: 100%;
	height: auto;
}

/*
 * A kártyakép kitölti a dobozát.
 *
 * Korábban `contain` volt, keretben és belső térrel — hogy a folyamatábrák
 * széle biztosan ne vesszen el. Az eredmény viszont az lett, hogy a kép a
 * kártya közepén lebegett, körülötte üres sávval, és a négy kártya nem
 * egyforma tömbnek látszott. A képek amúgy is 16/9 körüli arányúak, tehát a
 * `cover` alig vág belőlük.
 */
.tod-work__media:has(img[src]) {
	background: var(--wp--preset--color--surface);
	padding: 0;
	border: 0;
	min-height: 0;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--sm);
}

/*
 * Üres kép helye. Amíg nincs feltöltve borítókép, a figure magassága nulla
 * lenne, és a kártya féloldalasan összecsuklana. Ez a minimum tartja a helyet,
 * hogy az elrendezés már most is az legyen, ami a képekkel lesz.
 */
.tod-work__media {
	min-height: 12rem;
	background: var(--wp--preset--color--surface-2);
	border-radius: var(--wp--custom--radius--sm);
}

@media (max-width: 782px) {
	.tod-work {
		grid-template-columns: 1fr;
	}
}

/* ===========================================================================
   5/D3. ALAPÍTÓ
   =========================================================================== */

/*
 * Portré balra, szöveg jobbra. A kép 4:5, mert egy álló arckép jobban bírja a
 * keskeny hasábot, mint egy fekvő — és a Rólunk oldalon ez az egyetlen kép.
 */
.tod-founder {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
	gap: var(--wp--preset--spacing--80);
	align-items: start;
}

.tod-founder > * {
	margin-block: 0;
}

.tod-founder__media img {
	display: block;
	width: 100%;
	height: auto;
}

/* Amíg nincs portré, a helye akkor is meglegyen — különben az elrendezés
   féloldalasra csuklik, és nem az látszik, ami majd lesz. */
.tod-founder__media {
	min-height: 18rem;
	background: var(--wp--preset--color--surface-2);
	border-radius: var(--wp--custom--radius--sm);
}

@media (max-width: 782px) {
	.tod-founder {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--60);
	}

	.tod-founder__media {
		max-width: 20rem;
	}
}

/* ===========================================================================
   5/E. SÖTÉT SZAKASZ
   =========================================================================== */

/*
 * Miért van rá szükség.
 *
 * Az oldalak addig fehér és halványszürke sávok sorozatából álltak, és hosszú
 * görgetésnél a kettő közti különbség eltűnt: nem lehetett látni, hol ér véget
 * egy gondolat. A sötétkék sáv erős, ritkán használt jel — oldalanként egy-két
 * helyen, mindig a lap közepe táján, ahol a figyelem amúgy is lankad.
 *
 * Ami itt következik, az az összes komponens sötét változata. Nem díszítés:
 * a fehér háttérre tervezett tinták nagy része sötéten olvashatatlan lenne,
 * és egy szakaszt csak akkor szabad besötétíteni, ha minden benne lévő elemnek
 * van itt párja. A használt tinták: fehér a címsorokra (15,79:1), a halvány
 * navy-text-muted a folyószövegre (9,4:1), menta a jelölőkre.
 */
.tod-dark .tod-label,
.tod-dark .tod-servicehead__crumb {
	color: var(--wp--custom--color--navy-text-muted);
}

/*
 * A sorszámok mentát kapnak, nem halvány kéket.
 *
 * A navy-line (#384B62) a sötétkék háttéren 1,77:1 — vonalnak jó, számnak
 * olvashatatlan. A menta 7,29:1, és egyben ez az egyetlen hely a sötét sávon,
 * ahol szín kerül a lapra: a sorszámok vezetik a szemet lefelé.
 */
/*
 * A sorszámok mentája erősebb, mint a fenti fehér szabály.
 *
 * A folyószöveget `!important`-tal kell fehérre húzni (lásd lentebb), az pedig
 * a számokat is elérné — a menta hangsúly elveszne. Itt tehát ugyanaz a súly
 * kell, különben a szakasz egyetlen színes eleme is fehérré fakulna.
 */
.tod-dark .tod-label--indexed::before,
.tod-dark .tod-card__num,
.tod-dark .tod-guarantee__num,
.tod-dark .tod-step__num {
	color: var(--wp--preset--color--accent) !important;
}

/* A menta jelölők a listákon is menták maradnak, a vonalak sötétednek. */
.tod-dark .tod-step__list li {
	border-top-color: var(--wp--custom--color--navy-line);
}

.tod-dark .tod-price__list--minus li::before {
	background: var(--wp--custom--color--navy-text-muted);
}

/*
 * A félkövér kiemelés a számozott listában.
 *
 * A `.tod-numlist li strong` sötétkékre állítja a szöveget — világos háttéren
 * ez a helyes, sötéten viszont a felirat eltűnt a háttérben, és emiatt tűnt
 * úgy, mintha a sorok szövege elcsúszott volna: a láthatatlan bevezető tolta
 * el a látható részt.
 */
.tod-dark .tod-numlist li strong,
.tod-dark .tod-price__list li strong {
	color: var(--wp--preset--color--base);
}

.tod-dark h2,
.tod-dark h3,
.tod-dark h4 {
	color: var(--wp--preset--color--base);
}

/* Hajszálvonalak: a világos vonalak sötéten eltűnnének. */
.tod-dark .tod-step,
.tod-dark .tod-numlist li,
.tod-dark .tod-numlist,
.tod-dark .tod-problem__list li {
	border-color: var(--wp--custom--color--navy-line);
}

.tod-dark .tod-step:hover {
	background: var(--wp--preset--color--navy-soft);
}

.tod-dark .tod-usecase {
	background: var(--wp--preset--color--navy-soft);
	border-color: var(--wp--custom--color--navy-line);
}

.tod-dark .tod-price {
	background: var(--wp--preset--color--navy-soft);
	border-color: var(--wp--custom--color--navy-line);
}

.tod-dark .tod-tier {
	border-bottom-color: var(--wp--custom--color--navy-line);
}

.tod-dark .tod-tier__price {
	color: var(--wp--preset--color--base);
}

/*
 * A kiemelt doboz sötéten menta bal vonalat kap, és a háttere a navy-soft.
 * Fehér háttéren szürke sávként működik, itt viszont a szürke egybeolvadna.
 */
.tod-dark .tod-problem__note {
	background: var(--wp--preset--color--navy-soft);
	color: var(--wp--preset--color--base);
}

/*
 * Táblázat sötéten: a fejléc marad kék, de a sáv és a háttér közt így nem
 * lenne határ — a menta alsó vonal viszi tovább a szerepet, a cellák vonalai
 * pedig a navy-line-ra váltanak.
 */
.tod-dark .tod-table table {
	background: transparent;
}

.tod-dark .tod-table th,
.tod-dark .tod-table td {
	border-color: var(--wp--custom--color--navy-line);
}

.tod-dark .tod-table thead th {
	background: var(--wp--preset--color--navy-soft);
	border-color: var(--wp--preset--color--navy-soft);
	border-bottom: 2px solid var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
}

.tod-dark .tod-table tbody tr:hover td,
.tod-dark .tod-table tbody tr:hover th {
	background: var(--wp--preset--color--navy-soft);
}

.tod-dark .tod-table tbody tr:first-child td {
	color: var(--wp--preset--color--accent);
}

.tod-dark .tod-table tbody tr:last-child th,
.tod-dark .tod-table tbody tr:last-child td {
	border-bottom-color: var(--wp--custom--color--navy-line);
}

/*
 * Link sötét sávon: a sötétkék aláhúzás nem látszana, a menta viszont itt
 * szövegszínként is megfelel — sötétkéken 7,29:1.
 *
 * A szabály CSAK folyószövegben lévő linkre vonatkozik. Korábban minden `a`
 * elemre szólt, és két dolgot elrontott: a menta gomb feliratát is mentára
 * festette (menta a mentán: a szöveg eltűnt), a láblécben pedig a menüpontokat
 * zöldre váltotta. Egy gomb felirata sosem link-szín — a gombnak saját
 * háttere van, ahhoz kell igazodnia.
 */
.tod-dark p a,
.tod-dark li a,
.tod-dark td a,
.tod-dark th a,
.tod-dark .tod-faq__answer a {
	color: var(--wp--preset--color--accent) !important;
}

.tod-dark .tod-ba__key--auto {
	color: var(--wp--preset--color--accent);
}

.tod-dark .tod-ba__text--auto,
.tod-dark .tod-usecase .tod-ba__text--auto {
	color: var(--wp--preset--color--base);
}

/* ===========================================================================
   6. CARDS
   Depth comes from a hairline and a surface tint, never from a drop shadow.
   =========================================================================== */

.tod-card {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--custom--color--line-subtle);
	border-radius: var(--wp--custom--radius--sm);
	padding: var(--wp--preset--spacing--70);
	height: 100%;
}

.tod-card__num {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--custom--color--line-strong);
	letter-spacing: 0.08em;
	display: block;
	margin-bottom: var(--wp--preset--spacing--50);
	font-variant-numeric: tabular-nums;
}

.tod-dark .tod-card {
	background: var(--wp--preset--color--navy-soft);
	border-color: var(--wp--custom--color--navy-line);
}

/*
 * Card grid.
 *
 * Any group that holds cards directly lays them out three across, then two,
 * then one. The rule lives here rather than in the pattern for a reason: a
 * pattern is copied into the page the moment it is inserted, so the layout
 * attribute in the file no longer reaches a page that was built earlier. CSS
 * reaches every page, old and new, which is what makes this the safe place for
 * it.
 *
 * auto-fit adja a töréspontokat: 20rem-nél három oszlophoz kell a teljes 75rem
 * szövegszélesség, kettőhöz nagyjából egy tablet.
 *
 * A sávszélesség sima hossz, nem `min(100%, 20rem)`. Az automatikus ismétlés
 * (`auto-fit`) határozott minimumot vár, a százalék viszont a doboz méretének
 * kiszámítása közben nem az — a motorok ezt eltérően kezelik. Ahol nullaként
 * veszi, ott az auto-fit annyi oszlopot pakol be, amennyi belefér, és a
 * kártyák pár tíz pixelesre esnek szét: a szöveg szótagonként tördelve, egy
 * függőleges létraként jelent meg telefonon. A telefonos egy oszlopot ezért
 * lentebb médialekérdezés adja, nem a sávszélesség trükkje.
 *
 * The selector asks for two cards side by side, not one. Some sections close
 * with a single full-width card as a direct child; matching on one card would
 * turn the whole section into a grid.
 */
.wp-block-group:has(> .tod-card ~ .tod-card) {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
	gap: var(--wp--preset--spacing--60);
	align-items: stretch;
}

/* Telefonon mindig egyetlen, teljes szélességű oszlop. */
@media (max-width: 782px) {
	.wp-block-group:has(> .tod-card ~ .tod-card) {
		grid-template-columns: 1fr;
	}
}

/*
 * WordPress writes vertical margins between the children of a flow-layout
 * group. On a grid those margins land inside the tracks and pull the rows
 * apart, so the gap above stays the only spacing.
 */
.wp-block-group:has(> .tod-card ~ .tod-card) > * {
	margin-block: 0;
}

/* ===========================================================================
   7. MOTION
   160ms is short enough to read as immediate. Accent appears on hover only,
   which keeps mint scarce at rest and makes it mean "you are here".
   =========================================================================== */

.tod-card,
.tod-project,
.tod-price,
.tod-step,
.wp-element-button,
.tod-faq summary {
	transition:
		border-color 0.16s ease,
		background-color 0.16s ease,
		color 0.16s ease,
		transform 0.16s ease,
		box-shadow 0.16s ease;
}

.tod-card__num,
.tod-step__num,
.tod-project h3 {
	transition: color 0.16s ease;
}

/*
 * A körvonalas gomb hoverje.
 *
 * Eddig semmi nem történt vele, pedig a mellette álló elsődleges gomb váltott
 * — ettől úgy nézett ki, mintha nem is lenne kattintható. Halvány menta
 * kitöltést kap, a kerete pedig felveszi a menta színt. A felirat marad
 * sötétkék: ezen a háttéren 14,19:1, vagyis bőven a küszöb fölött. Menta
 * betűszín itt bukna, kitöltésként viszont pontosan ez a szerepe.
 */
.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wp-block-button .wp-block-button__link.is-style-outline:hover {
	background-color: var(--wp--preset--color--accent-soft);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--contrast);
}

/*
 * A fő gomb hoverre ugyanazt kapja, mint a körvonalas: halvány menta kitöltés,
 * menta keret, sötétkék felirat. A keret belső árnyék, hogy a gomb mérete ne
 * változzon (a fő gombnak alapból nincs kerete).
 */
.wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover,
.wp-block-button:not(.is-style-outline) > .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--accent-soft);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--accent);
	color: var(--wp--preset--color--contrast);
}

/*
 * Sötét sávon a halvány menta világítana; ott a menta keret és a menta felirat
 * a helyes irány, mert a háttér adja a kontrasztot.
 */
/*
 * A tömör gomb felirata sötét sávon is a gomb saját színéhez igazodik.
 *
 * A menta kitöltésen sötétkék felirat áll (7,29:1) — ez a gomb alapértelmezése
 * világos háttéren is. Sötét sávban viszont a felirat egy ideig örökölte a
 * sáv link-színét, vagyis mentát a mentán: a gomb üresnek látszott. Ezért
 * mondjuk ki külön, hogy a gombfelirat nem link-szín.
 */
.tod-dark .wp-block-button:not(.is-style-outline) > .wp-block-button__link,
.tod-dark .wp-block-button:not(.is-style-outline) > .wp-block-button__link:visited {
	color: var(--wp--preset--color--contrast);
}

/* Sötét felületen a körvonalas gomb sötét hoverje: átlátszó, menta keret és felirat. */
.tod-dark .wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover,
.tod-dark .wp-block-button:not(.is-style-outline) > .wp-block-button__link:focus,
.tod-header .wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover,
.tod-header .wp-block-button:not(.is-style-outline) > .wp-block-button__link:focus,
.tod-problem__note--dark .wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover,
.tod-problem__note--dark .wp-block-button:not(.is-style-outline) > .wp-block-button__link:focus,
.tod-price-cta--strong .wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover,
.tod-price-cta--strong .wp-block-button:not(.is-style-outline) > .wp-block-button__link:focus {
	background-color: transparent;
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
}

.tod-dark .wp-block-button.is-style-outline > .wp-block-button__link:hover,
.tod-dark .wp-block-button .wp-block-button__link.is-style-outline:hover {
	background-color: transparent;
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
}

.tod-card:hover {
	border-color: var(--wp--preset--color--accent);
	transform: translateY(-2px);
	box-shadow: var(--wp--preset--shadow--md);
}

.tod-card:hover .tod-card__num {
	color: var(--wp--preset--color--accent);
}

/*
 * A folyamatlépés hoverkor menta keretet kap.
 *
 * Eddig csak a háttere világosodott, ami épp csak annyi visszajelzés volt, hogy
 * a látogató nem vette észre. A keret ugyanaz a menta, mint a kártyáknál — így
 * a lépések ugyanúgy „megszólíthatónak” látszanak, mint a többi doboz. A jobb
 * oldali elválasztó vonalat is felülírjuk, különben az utolsó él szürke marad.
 */
.tod-step:hover {
	background: var(--wp--preset--color--surface);
	border-color: var(--wp--preset--color--accent);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--accent);
	border-radius: var(--wp--custom--radius--sm);
}

.tod-step:hover .tod-step__num {
	color: var(--wp--preset--color--accent);
}

/*
 * Igen és nem.
 *
 * A „kinek való” és a „kinek nem való” kártya egymás mellett áll, azonos
 * szerkezettel — semmi nem mondja meg ránézésre, melyik melyik, csak a címsor.
 * Egy felső vonal elintézi: menta az egyiken, szürke a másikon. A hoverre külön
 * szabály kell, mert a kártya hoverje az egész keretet mentára váltja, és a
 * megkülönböztetés pont akkor tűnne el, amikor a látogató odaér.
 */
.tod-card--yes {
	border-top: 2px solid var(--wp--preset--color--accent);
}

.tod-card--no {
	border-top: 2px solid var(--wp--custom--color--line-strong);
}

.tod-card--yes:hover {
	border-top-color: var(--wp--preset--color--accent);
}

.tod-card--no:hover {
	border-top-color: var(--wp--custom--color--line-strong);
}

.tod-project:hover {
	border-color: var(--wp--preset--color--accent);
	transform: translateY(-2px);
	box-shadow: var(--wp--preset--shadow--md);
}

.tod-project:hover h3 {
	color: var(--wp--preset--color--accent);
}

.tod-price:hover {
	border-color: var(--wp--custom--color--line-strong);
}

.tod-price--recommended:hover {
	border-color: var(--wp--preset--color--accent);
}

.tod-faq summary:hover {
	color: var(--wp--preset--color--accent);
}

/* ===========================================================================
   8. HERO
   The h1 is deliberately excluded from the entrance animation. It is the
   largest element on the page, so fading it in would push back the moment the
   browser reports the page as painted — the number measured as loading speed.
   =========================================================================== */

@keyframes tod-rise {
	from {
		opacity: 0;
		transform: translateY(8px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.tod-hero__lead,
.tod-hero__actions,
.tod-hero__meta,
.tod-hero__media,
.tod-flow {
	animation: tod-rise 0.4s cubic-bezier(0.2, 0.6, 0.2, 1) both;
}

.tod-hero__lead { animation-delay: 0.06s; }
.tod-hero__media { animation-delay: 0.10s; }
.tod-hero__actions { animation-delay: 0.12s; }
.tod-hero__meta { animation-delay: 0.18s; }
.tod-flow { animation-delay: 0.24s; }

/*
 * A hero ábra: háttérszintű grafika, nem illusztráció.
 *
 * 15% átlátszóság mellett a vonalak világosszürkére halványulnak — az ábra
 * ott van, teret ad a szakasznak, de a szem nem áll meg rajta. Ez a lényeg:
 * a heróban a H1 és a két gomb a dolga, a kép csak a hátterét adja.
 *
 * Nincs vágás. A kép álló formátumú (1984 × 2150), a helye viszont a szöveg
 * melletti 42%-os oszlop — a korábbi `4/3`-as `cover` beállítás a gömb tetejét
 * és alját is levágta volna. Helyette a természetes arány marad, a magasságot
 * egy felső korlát fogja, hogy a hero ne nyúljon el.
 *
 * A `pointer-events: none` azért kell, mert a kép jóval nagyobb felületet fed,
 * mint amennyit láthatóan elfoglal: enélkül elnyelné a kattintást a szöveg
 * melletti üres területen.
 */
/*
 * 2026-09: a statikus ábra helyére a „hálózati pulzus” animáció került
 * (assets/img/network-pulse.svg, CSS-animáció az SVG-n belül), 60%-on.
 */
.tod-hero__image {
	margin: 0;
	opacity: 0.6;
	pointer-events: none;
}

.tod-hero__image img {
	display: block;
	width: 100%;
	height: auto;
}

/*
 * A kép kihasználja a jobb oldali margót is.
 *
 * A hasáb önmagában szűk volt hozzá: az ábra a szöveg mellett elveszett. A
 * szakasz oldalsó margója viszont üres, és egy 15%-os háttérgrafikánál semmi
 * nem indokolja, hogy a szövegre szabott rácson belül maradjon — a szöveg
 * marad a rácson, a háttér kiterül. A bal oldalon nincs kilógás: ott a
 * bekezdések állnak, azokba nem lóghat bele.
 */
@media (min-width: 782px) {
	.tod-hero__media {
		margin-right: calc(var(--wp--preset--spacing--80) * -1);
	}
}

/*
 * Telefonon a kép a szöveg alá kerülne, és csak görgetnivalót adna: a hero
 * lényege — cím, gombok — lejjebb csúszna egy ábra miatt, amit alig látni.
 */
@media (max-width: 781px) {
	.tod-hero__media {
		display: none;
	}
}

.tod-hero__meta {
	list-style: none;
	padding-left: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--70);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--text-muted);
	letter-spacing: 0.04em;
}

.tod-hero__meta li::marker {
	content: "";
}

.tod-hero__meta li::before {
	content: "✓";
	color: var(--wp--preset--color--accent);
	margin-right: 0.4em;
	font-family: var(--wp--preset--font-family--sans);
}

/* Side by side while there is room; stacked once there is not. */
@media (max-width: 600px) {
	.tod-hero__meta {
		flex-direction: column;
	}
}

/* ===========================================================================
   9. WORKFLOW STRIP
   Sits below the reading column, never beside it, so the movement stays
   peripheral. One 10s cycle. Only border-color and color animate: no layout
   work, no geometry repaint.
   =========================================================================== */

.tod-flow {
	margin-top: var(--wp--preset--spacing--90);
	padding-top: var(--wp--preset--spacing--60);
	border-top: 1px solid var(--wp--custom--color--line-subtle);
}

.tod-flow__row {
	align-items: center;
	margin-top: var(--wp--preset--spacing--50);
	overflow-x: auto;
	scrollbar-width: none;
}

.tod-flow__row::-webkit-scrollbar {
	display: none;
}

.tod-flow__step {
	position: relative;
	flex: 0 0 auto;
	margin: 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--text-muted);
	background: var(--wp--preset--color--base);
	white-space: nowrap;
	border: 1px solid var(--wp--custom--color--line-subtle);
	border-radius: var(--wp--custom--radius--xs);
	padding: 0.45rem 0.7rem;
	animation: tod-flow 10s linear infinite;
}

/* Connectors are drawn by the chips themselves, so the editor only ever sees
   five plain paragraphs — nothing to break by pressing Enter in the wrong place. */
.tod-flow__step + .tod-flow__step::before {
	content: "";
	position: absolute;
	left: calc(var(--wp--preset--spacing--60) * -1);
	top: 50%;
	width: var(--wp--preset--spacing--60);
	height: 1px;
	background: var(--wp--custom--color--line-subtle);
}

/* Delays are derived from position, not written into the markup, so reordering
   or removing a step in the editor cannot desynchronise the sequence. */
.tod-flow__step:nth-of-type(1) { animation-delay: 0s; }
.tod-flow__step:nth-of-type(2) { animation-delay: 1.2s; }
.tod-flow__step:nth-of-type(3) { animation-delay: 2.4s; }
.tod-flow__step:nth-of-type(4) { animation-delay: 3.6s; }
.tod-flow__step:nth-of-type(5) { animation-delay: 4.8s; }
.tod-flow__step:nth-of-type(6) { animation-delay: 6s; }

@keyframes tod-flow {
	0% {
		border-color: var(--wp--custom--color--line-subtle);
		color: var(--wp--preset--color--text-muted);
	}

	2%, 12% {
		border-color: var(--wp--preset--color--accent);
		color: var(--wp--preset--color--contrast);
	}

	16%, 100% {
		border-color: var(--wp--custom--color--line-subtle);
		color: var(--wp--preset--color--text-muted);
	}
}

/*
 * The strip fits on one line at the full 1200px content width. Below that it
 * turns vertical rather than scrolling sideways: a strip you have to drag is a
 * strip most people never finish reading, and a cut-off one looks broken.
 */
@media (max-width: 1100px) {
	.tod-flow__row {
		flex-direction: column;
		align-items: stretch;
		overflow: visible;
	}

	.tod-flow__step {
		white-space: normal;
		text-align: center;
	}

	.tod-flow__step + .tod-flow__step::before {
		left: 50%;
		top: calc(var(--wp--preset--spacing--60) * -1);
		width: 1px;
		height: var(--wp--preset--spacing--60);
	}
}

/* ===========================================================================
   10. PROBLEM SECTION
   =========================================================================== */

.tod-problem__list,
.tod-numlist {
	list-style: none;
	padding-left: 0;
	margin-top: var(--wp--preset--spacing--70);
	border-top: 1px solid var(--wp--custom--color--line-subtle);
	counter-reset: tod-problem;
}

.tod-problem__list li,
.tod-numlist li {
	position: relative;
	padding-block: var(--wp--preset--spacing--60);
	padding-inline-start: 3.25rem;
	border-bottom: 1px solid var(--wp--custom--color--line-subtle);
	color: var(--wp--preset--color--text-muted);
}

/*
 * Its own counter, not the built-in list-item one: setting display:grid on the
 * item removes its list-item status, and with it the automatic counter — which
 * is why every row read 00.
 */
.tod-problem__list li::before,
.tod-numlist li::before {
	position: absolute;
	left: 0;
	top: var(--wp--preset--spacing--60);
	counter-increment: tod-problem;
	content: counter(tod-problem, decimal-leading-zero);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	letter-spacing: 0.08em;
	color: var(--wp--custom--color--line-strong);
	font-variant-numeric: tabular-nums;
}

.tod-problem__note {
	margin-top: var(--wp--preset--spacing--70);
	padding: var(--wp--preset--spacing--60);
	border-left: 3px solid var(--wp--preset--color--accent);
	background: var(--wp--preset--color--surface);
}

/*
 * Sötét változat a főoldalon: sötétkék kártya, CTA-szerű lekerekítéssel.
 * A bal vonal itt elmarad, a lekerekített sarokkal csúnyán törne meg.
 */
.tod-problem__note--dark {
	--tod-focus-color: var(--wp--preset--color--accent);
	padding: var(--wp--preset--spacing--70);
	border-left: 0;
	border-radius: var(--wp--custom--radius--sm);
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

.tod-problem__note--dark strong {
	color: var(--wp--preset--color--base);
}

/*
 * A problémalista sorszáma hoverre mentára vált.
 */
.tod-problem__list li::before {
	transition: color 0.2s ease;
}

.tod-problem__list li:hover::before {
	color: var(--wp--preset--color--accent);
}

/*
 * Főoldali hero: sötétkék, a fejléc alatt kitölti a képernyőt.
 *
 * Flex oszlopban a `constrained` elrendezés auto margója összehúzná a
 * gyereket a tartalma szélességére, ezért kap `width: 100%`-ot — a max-width
 * és a középre igazítás így megmarad.
 */
.tod-hero {
	min-height: calc(100svh - 4.8rem);
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.tod-hero > * {
	width: 100%;
}

.tod-dark .tod-hero__meta {
	color: var(--wp--custom--color--navy-text-muted);
}

.tod-dark .tod-hero__meta li::before {
	color: var(--wp--preset--color--accent);
}

.tod-dark .wp-block-button.is-style-outline > .wp-block-button__link {
	border-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--base);
}

/*
 * Blogkártyák sötét szakaszban (főoldal): a kártya a navy-soft panel, a
 * szöveg fehér, a kategória halvány.
 */
.tod-dark .tod-post-grid > li {
	background: var(--wp--preset--color--contrast);
	border-color: rgb(255 255 255 / 0.18);
}

.tod-dark .tod-post-grid .tod-post-card__image {
	border-radius: var(--wp--custom--radius--sm);
	overflow: hidden;
}

.tod-dark .tod-post-grid .wp-block-post-date {
	color: rgb(255 255 255 / 0.65) !important;
}

.tod-dark .tod-post-grid > li:hover,
.tod-dark .tod-post-grid > li:focus-within {
	border-color: var(--wp--preset--color--accent);
}

/*
 * `!important` kell: a sötét szakasz általános linkszabálya (`.tod-dark li a`)
 * is az, és különben mindent mentára színezne a kártyán.
 */
.tod-dark .tod-post-grid .wp-block-post-title a {
	color: var(--wp--preset--color--base) !important;
}

.tod-dark .tod-post-grid .wp-block-post-title a:hover {
	color: var(--wp--preset--color--accent) !important;
}

.tod-dark .tod-post-grid .wp-block-post-terms a {
	color: var(--wp--preset--color--accent) !important;
}

/* Kézi sortörés, ami csak széles képernyőn érvényes. */
@media (max-width: 781px) {
	.tod-br-wide {
		display: none;
	}
}

/* Sötét kártya világos szakaszban (Mit csinálunk: 02, 04, 06). */
.tod-card.tod-card--dark {
	background: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--contrast);
}

.tod-card.tod-card--dark:hover {
	border-color: var(--wp--preset--color--accent);
}

/*
 * Sötét munkakártya a főoldalon: nincs belső margó, a kép a kártya széléig
 * ér, a szöveg kapja a teret. A kép kitölti a kártya magasságát.
 */
.tod-work.tod-work--flush {
	gap: 0;
	padding: 0;
	overflow: hidden;
	align-items: stretch;
	background: var(--wp--preset--color--base);
	border-color: var(--wp--custom--color--line-subtle);
}

.tod-work--flush .tod-work__media,
.tod-work--flush .tod-work__media:has(img[src]) {
	height: 100%;
	border-radius: 0;
}

.tod-work--flush .tod-work__media img {
	height: 100%;
	object-fit: cover;
	border-radius: 0 !important;
}

.tod-work--flush .tod-work__body {
	align-self: center;
	padding: var(--wp--preset--spacing--70);
}

/*
 * A folyamat lépései: a listák egy magasságból indulnak. Asztalon a három
 * hasáb egy rács, a lépések `subgrid`-del osztoznak a sorokon (szám, cím,
 * leírás, lista), így a rövidebb leírás mellett is egy vonalban kezdődnek.
 */
@media (min-width: 782px) {
	.tod-steps.wp-block-columns {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.tod-steps > .tod-step {
		display: grid;
		grid-template-rows: subgrid;
		grid-row: span 4;
		row-gap: 0;
		align-content: start;
	}
}

.tod-step__list li::before {
	content: "✓";
	margin-right: 0.5em;
	color: var(--wp--preset--color--accent);
}

/* A kis kiemelt szövegek a fő betűtípussal, nem a gépírásossal. */
/* `!important`: a komponensek saját (később álló) szabálya monót ír elő. */
.tod-step__list li,
.tod-hero__meta,
.tod-hero__meta li,
.tod-maint__price {
	font-family: var(--wp--preset--font-family--sans) !important;
	letter-spacing: 0 !important;
}

.tod-step__list li,
.tod-hero__meta {
	font-size: var(--wp--preset--font-size--small) !important;
}

/* ===========================================================================
   11. PROCESS
   =========================================================================== */

.tod-steps {
	border: 1px solid var(--wp--custom--color--line-subtle);
	border-radius: var(--wp--custom--radius--sm);
	overflow: hidden;
}

.tod-step {
	padding: var(--wp--preset--spacing--70);
	border-right: 1px solid var(--wp--custom--color--line-subtle);
}

.tod-step:last-child {
	border-right: 0;
}

.tod-step__num {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 2rem;
	font-weight: 500;
	color: var(--wp--custom--color--line-strong);
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.tod-step__list {
	list-style: none;
	padding-left: 0;
	margin-top: var(--wp--preset--spacing--60);
	display: grid;
	gap: var(--wp--preset--spacing--40);
}

.tod-step__list li {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--text-muted);
	padding-top: var(--wp--preset--spacing--40);
	border-top: 1px solid var(--wp--custom--color--line-subtle);
}

@media (max-width: 960px) {
	.tod-step {
		border-right: 0;
		border-bottom: 1px solid var(--wp--custom--color--line-subtle);
	}
}

/* ===========================================================================
   12. PROJECT CARDS
   =========================================================================== */

.tod-project {
	border: 1px solid var(--wp--custom--color--line-subtle);
	border-radius: var(--wp--custom--radius--sm);
	overflow: hidden;
	background: var(--wp--preset--color--base);
	height: 100%;
}

.tod-project__body {
	padding: var(--wp--preset--spacing--60);
}

.tod-project__result {
	margin-top: var(--wp--preset--spacing--50);
	padding-top: var(--wp--preset--spacing--50);
	border-top: 1px solid var(--wp--custom--color--line-subtle);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--accent);
	text-transform: uppercase;
}

/* ===========================================================================
   13. PRICING
   The tier block is a price list, not a stack of competing headlines. Each row
   names its level on the left and states its price on the right.
   =========================================================================== */

.tod-price {
	border: 1px solid var(--wp--custom--color--line-subtle);
	border-radius: var(--wp--custom--radius--sm);
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--base);
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.tod-price--recommended {
	border-color: var(--wp--preset--color--accent);
	border-width: 1px;
}

.tod-price__flag {
	justify-self: start;
	margin: 0 0 var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 0.25rem 0.5rem;
	border-radius: var(--wp--custom--radius--xs);
}

.tod-price__who {
	margin-top: var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.45;
	color: var(--wp--preset--color--text-muted);
	min-height: 2.9em;
}

.tod-tiers {
	margin: var(--wp--preset--spacing--60) 0 0;
	border-top: 1px solid var(--wp--custom--color--line-subtle);
}

.tod-tier {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--wp--preset--spacing--40);
	padding-block: var(--wp--preset--spacing--40);
	border-bottom: 1px solid var(--wp--custom--color--line-subtle);
}

/*
 * A csomag neve és a határideje két sor.
 *
 * Egy sorba írva („Starter · 1–2 hét”) a keskeny kártyaoszlopban a pont után
 * tört a sor, és a „1–” meg a „2 HÉT” két sorba került — a kötőjel lógott a sor
 * végén. Külön elemben a törés ott van, ahol értelme is van.
 */
.tod-tier__meta {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--custom--color--line-strong);
	line-height: 1.3;
	margin-top: 0.25rem;
	white-space: nowrap;
}

.tod-tier__name {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-muted);
	line-height: 1.3;
	max-width: 9em;
}

.tod-tier__price {
	margin: 0;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	letter-spacing: -0.01em;
	font-variant-numeric: tabular-nums;
	text-align: right;
	min-width: 0;
	overflow-wrap: anywhere;
}

/* "-tól" is written with the editor's italic control, then un-italicised here.
   That way the client never has to touch markup to change a price suffix. */
.tod-tier__price em {
	display: block;
	font-style: normal;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	line-height: 1.3;
	color: var(--wp--preset--color--text-muted);
}

/* The struck-through figure sits above, never inline: side by side the two
   numbers read as one string. */
.tod-tier__price s {
	display: block;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	color: var(--wp--preset--color--text-muted);
	text-decoration-color: var(--wp--custom--color--line-strong);
	margin-bottom: 0.1em;
}

.tod-tier__pop {
	width: fit-content;
	margin-top: 0.35em;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.625rem;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 0.15rem 0.4rem;
	border-radius: var(--wp--custom--radius--xs);
}

.tod-price__save {
	display: inline-block;
	margin-top: var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--accent-soft);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.04em;
	padding: 0.4rem 0.6rem;
	border-radius: var(--wp--custom--radius--xs);
}

.tod-price__list {
	list-style: none;
	padding-left: 0;
	margin-top: var(--wp--preset--spacing--50);
	display: grid;
	gap: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--small);
}

.tod-price__list li {
	padding-left: 1.25rem;
	position: relative;
	color: var(--wp--preset--color--text-muted);
	line-height: 1.5;
}

.tod-price__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.5em;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
}

/*
 * A tagadó lista — „kinek nem való”, „mi nincs benne”.
 *
 * Ugyanaz a vonás, csak szürkén. Külön jelet (×, tiltótábla) nem vezetünk be:
 * a lista fölött ott a címsor, ami megmondja, mit olvas az ember, a menta
 * viszont a rendszerben végig azt jelenti, hogy „ez jár neked” — ezeknél a
 * soroknál pont az ellenkezőjét mondaná.
 */
.tod-price__list--minus li::before {
	background: var(--wp--custom--color--line-strong);
}

.tod-price__foot {
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--60);
}

/* Booking sits below the grid, not on the cards: a price card is a surface for
   comparing, not for deciding. */
.tod-price-cta {
	margin-top: var(--wp--preset--spacing--80);
	padding: var(--wp--preset--spacing--70);
	border: 1px solid var(--wp--custom--color--line-subtle);
	border-radius: var(--wp--custom--radius--sm);
	background: var(--wp--preset--color--base);
	gap: var(--wp--preset--spacing--60);
}

/*
 * Az erős változat: sötétkék sáv az árszakasz közepén.
 *
 * A két szolgáltatás együtt olcsóbb — ez a lap legjobb ajánlata, és fehér
 * kártyaként pontosan úgy nézett ki, mint körülötte minden más. A sötét háttér
 * kiemeli a világos szakaszból, és a szemet a menta gombra viszi. Ezt az egyet
 * megéri hangosabbra venni; ha több ilyen sáv lenne az oldalon, egyik sem
 * jelentene semmit.
 */
.tod-price-cta--strong {
	background: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

.tod-price-cta--strong strong {
	color: var(--wp--preset--color--base);
}

/* ===========================================================================
   14. MAINTENANCE BAND
   Visually secondary on purpose. Maintenance is bought after a project, never
   instead of one; giving it equal weight invites the wrong comparison.
   =========================================================================== */

.tod-maint {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--custom--color--line-subtle);
	border-radius: var(--wp--custom--radius--sm);
	padding: var(--wp--preset--spacing--70);
	margin-top: var(--wp--preset--spacing--60);
	gap: var(--wp--preset--spacing--70);
}

.tod-maint__price {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	white-space: nowrap;
}

.tod-maint__price strong {
	display: block;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--large);
	font-variant-numeric: tabular-nums;
}

/* The VAT note. A Hungarian buyer assumes a 27% surprise unless told otherwise,
   and here there genuinely isn't one, so it is stated in plain sight. */
.tod-vat {
	margin-top: var(--wp--preset--spacing--60);
	padding: var(--wp--preset--spacing--60);
	background: var(--wp--preset--color--accent-soft);
	border-radius: var(--wp--custom--radius--sm);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
}

/* ===========================================================================
   15. FAQ
   Built on <details> so the answers exist in the server HTML. Search engines
   and answer engines read closed accordions; JavaScript-built ones they do not.
   =========================================================================== */

.tod-faq details {
	border-top: 1px solid var(--wp--custom--color--line-subtle);
	padding-block: var(--wp--preset--spacing--60);
}

.tod-faq details:last-of-type {
	border-bottom: 1px solid var(--wp--custom--color--line-subtle);
}

.tod-faq summary {
	font-weight: 700;
	font-size: var(--wp--preset--font-size--large);
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--60);
}

.tod-faq summary::-webkit-details-marker {
	display: none;
}

.tod-faq summary::after {
	content: "+";
	font-family: var(--wp--preset--font-family--mono);
	color: var(--wp--preset--color--accent);
	font-weight: 500;
}

.tod-faq details[open] summary::after {
	content: "–";
}

.tod-faq__answer {
	margin-top: var(--wp--preset--spacing--50);
	color: var(--wp--preset--color--text-muted);
}

/* ===========================================================================
   16. FOOTER
   =========================================================================== */

/*
 * No gap above the footer, a hairline instead.
 *
 * WordPress puts a block gap between every direct child of the page wrapper and
 * between the children of every layout — which left a strip of page background
 * between the dark closing band and the dark footer. The two are one continuous
 * block of colour, separated by a line rather than by a hole.
 */
.wp-site-blocks > *,
.wp-site-blocks > .wp-block-template-part {
	margin-block-start: 0;
}

.tod-main,
.tod-main > *,
.tod-main > .wp-block-template-part {
	margin-block: 0;
}

.tod-footer {
	border-top: 1px solid var(--wp--custom--color--navy-line);
}

.tod-footer__tagline {
	color: var(--wp--custom--color--navy-text-muted);
	max-width: 32ch;
}

.tod-footer .tod-label {
	color: var(--wp--custom--color--navy-text-muted);
}

.tod-footer__list {
	list-style: none;
	padding-left: 0;
	display: grid;
	gap: var(--wp--preset--spacing--40);
}

.tod-footer__list a,
.tod-footer__legal a {
	text-decoration: none;
}

/*
 * A lábléc linkjei.
 *
 * A navigációs oszlopok fehérek, a jogi sor világosszürke — ott másodlagos
 * információ áll, itt maga a menü.
 *
 * A `.tod-footer` előtag nem díszítés. A sötét sáv link-szabálya `.tod-dark li a`
 * alakban áll, ami két elemnevet is tartalmaz; egyetlen osztály (`.tod-footer__list a`)
 * kevés volt hozzá, ezért maradtak a linkek menták az előző körben. Két
 * osztállyal viszont már ez az erősebb — az osztályok száma előbbre való, mint
 * az elemneveké.
 */
/*
 * Minden lábléclink fehér, hoverre menta aláhúzással.
 *
 * A szín nem változik — a visszajelzést az aláhúzás adja. Így a menta ott
 * marad jelzésnek, ahol tényleg történik valami, a menü pedig nyugodt.
 *
 * Itt is `!important` kell: a sötét sáv link-szabálya és a WordPress
 * színsegédosztályai ugyanezt a tulajdonságot írják, utóbbi `!important`-tal.
 */
.tod-footer .tod-footer__list a,
.tod-footer .tod-footer__legal a,
.tod-footer__list a,
.tod-footer__legal a {
	color: var(--wp--preset--color--base) !important;
	text-decoration: none;
	text-underline-offset: 4px;
}

.tod-footer .tod-footer__list a:hover,
.tod-footer .tod-footer__legal a:hover,
.tod-footer .tod-footer__list a:focus-visible,
.tod-footer .tod-footer__legal a:focus-visible {
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--accent);
	text-decoration-thickness: 2px;
}

.tod-footer__list a:hover,
.tod-footer__legal a:hover {
	color: var(--wp--preset--color--base);
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--accent);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.tod-footer__rule.wp-block-separator {
	border: 0;
	border-top: 1px solid var(--wp--custom--color--navy-line);
	margin-block: var(--wp--preset--spacing--90) var(--wp--preset--spacing--60);
	opacity: 1;
	max-width: none;
}

.tod-footer__legal {
	gap: var(--wp--preset--spacing--50);
	color: var(--wp--custom--color--navy-text-muted);
}

.tod-footer__legal p {
	margin: 0;
}

/* ===========================================================================
   17. BREADCRUMBS
   =========================================================================== */

.tod-crumbs__list {
	list-style: none;
	padding-left: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--text-muted);
}

.tod-crumbs__item + .tod-crumbs__item::before {
	content: "›";
	margin-right: 0.5rem;
	color: var(--wp--custom--color--line-strong);
}

.tod-crumbs__item a {
	text-decoration: none;
}

.tod-crumbs__item a:hover {
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--accent);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.tod-crumbs__item [aria-current] {
	color: var(--wp--preset--color--contrast);
}

/* ===========================================================================
   18. ARTICLE LAYOUT AND META
   The reading measure is 42rem — 36rem left the column visibly squeezed on a
   desktop screen. The contents list sits above the article, in the same column.
   =========================================================================== */

.tod-article__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--60);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--text-muted);
}

.tod-article__meta p {
	margin: 0;
}

.tod-article__body {
	max-width: var(--wp--custom--layout--prose);
}

.tod-article__body > * {
	margin-block: var(--wp--preset--spacing--60);
}

.tod-article__body > h2 {
	margin-top: var(--wp--preset--spacing--90);
}

.tod-article__body > h3 {
	margin-top: var(--wp--preset--spacing--80);
}

/* ===========================================================================
   18/B. BLOG CARDS
   =========================================================================== */

/*
 * A bloglista kártyái.
 *
 * Eddig szabadon álló képek és szövegek voltak egy rácsban: ha az egyik
 * cikknek volt borítóképe, a másiknak nem, a kettő nem tűnt egy listának.
 * A keret nem díszítés — ez mondja meg, meddig tart egy cikk.
 *
 * A kép a keret belső széléig ér: a fölötte lévő negatív margó pontosan
 * annyi, amennyi a kártya belső tere, így a kép a doboz teteje lesz, nem egy
 * beljebb csúsztatott illusztráció.
 */
.tod-post-grid {
	list-style: none;
	padding-left: 0;
	/*
	 * A `blockGap` hiányzott a blokk beállításából, így a rács sorai
	 * összeértek: két kártya kerete egyetlen vastag vonalnak látszott. A
	 * térközt itt írjuk elő, nem a sablon attribútumában — így a
	 * kategóriaarchívum és a bloglista is ugyanazt kapja.
	 */
	gap: var(--wp--preset--spacing--60);
}

/*
 * A keret a core által generált `<li>`-n ül, nem a saját csoportomon.
 *
 * A post-template minden bejegyzést egy `li.wp-block-post` elembe tesz — ez
 * mindig ott van, akárhogy szerkesztik később a kártya belsejét. A `tod-post-card`
 * osztály viszont az én kézzel írt csoportomé: ha valaki a szerkesztőben
 * kicseréli a kártya tartalmát, az osztály eltűnik, és vele a keret is.
 * A dobozt az tartsa, ami nem tud elveszni.
 */
/*
 * A `[hidden]` erősebb kell legyen a kártya `display` értékénél.
 *
 * A kategóriaszűrő `card.hidden = true`-val rejti a kártyákat, ami a böngésző
 * alapstílusában `display: none`. Az alábbi szabály viszont `display: flex`-et
 * ad ugyanannak az elemnek, és egy szerzői szabály mindig erősebb a böngésző
 * alapértelmezésénél — a kártyák tehát láthatók maradtak, a szűrő pedig úgy
 * nézett ki, mintha nem csinálna semmit. Csinálta; csak nem látszott.
 */
.tod-post-grid > li[hidden] {
	display: none !important;
}

.tod-post-grid > li,
.tod-post-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: var(--wp--preset--spacing--60);
	border: 1px solid var(--wp--custom--color--line-subtle);
	border-radius: var(--wp--custom--radius--sm);
	background: var(--wp--preset--color--base);
	transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

/* Ha mindkettő ott van, csak a külső legyen doboz — nincs dupla keret. */
.tod-post-grid > li > .tod-post-card {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	transition: none;
}

/*
 * Hoverre menta keret.
 *
 * A `:focus-within` ugyanezt adja: a kártyán belül a cím és a kép is link,
 * és billentyűzettel érkezve ugyanaz a visszajelzés kell, mint egérrel.
 */
.tod-post-grid > li:hover,
.tod-post-grid > li:focus-within {
	border-color: var(--wp--preset--color--accent);
	transform: translateY(-2px);
	box-shadow: var(--wp--preset--shadow--md);
}

.tod-post-grid > li > .tod-post-card:hover,
.tod-post-grid > li > .tod-post-card:focus-within {
	transform: none;
	box-shadow: none;
}

.tod-post-card__image {
	margin: calc(var(--wp--preset--spacing--60) * -1) calc(var(--wp--preset--spacing--60) * -1) 0;
}

.tod-post-grid > li > .tod-post-card > .tod-post-card__image {
	margin: 0 0 var(--wp--preset--spacing--50);
}

.tod-post-card__image img {
	border-radius: var(--wp--custom--radius--sm) var(--wp--custom--radius--sm) 0 0;
	width: 100%;
	height: auto;
	display: block;
}

/* Kép nélküli cikknél nincs mit felfelé húzni. */
.tod-post-card > .tod-post-card__image:not(:first-child) {
	margin-top: 0;
}

.tod-post-card__excerpt {
	color: var(--wp--preset--color--text-muted);
	line-height: 1.6;
}

.tod-post-card__excerpt p {
	margin: 0;
}

/* A dátum a kártya aljára kerül, akármilyen hosszú a cím és a leírás. */
.tod-post-card > .wp-block-post-date {
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--50);
}

/*
 * Egy sorban álló kártyák belső sorai egy magasságban.
 *
 * A kártya (li) és a belső csoport is `subgrid`: öt sort kér a rácstól (kép,
 * kategória, cím, leírás, dátum), így a leghosszabb cím vagy leírás mind a
 * három kártyán ugyanannyi helyet kap, és a dátumok egy vonalban állnak.
 * A sorok ki vannak jelölve, hogy egy kép nélküli cikk se csússzon el.
 */
.tod-post-grid > li:has(> .tod-post-card),
.tod-post-grid > li > .tod-post-card {
	display: grid;
	grid-template-rows: subgrid;
	grid-row: span 5;
	row-gap: 0;
}

.tod-post-card > .tod-post-card__image { grid-row: 1; }
.tod-post-card > .wp-block-post-terms { grid-row: 2; }
.tod-post-card > .wp-block-post-title { grid-row: 3; }
.tod-post-card > .wp-block-post-excerpt { grid-row: 4; }
.tod-post-card > .wp-block-post-date { grid-row: 5; }

/* ===========================================================================
   19. TABLE OF CONTENTS
   Sticky sidebar from 1100px, collapsed list below that.
   =========================================================================== */

/*
 * A tartalomjegyzék a borítókép alatt, a cikk fölött áll.
 *
 * Korábban ragadós oldalsáv volt 1100 pixel fölött. Olvasás közben hasznos, de
 * a cikk elején álló, végignézhető lista többet ér: az olvasó ott dönti el,
 * hogy ez a cikk arról szól-e, amit keres — és ott ugorhat egyenesen a
 * kérdésére. A lista a H2 és H3 címsorokból épül, magától; nincs mit karban
 * tartani, és a horgonyok a kiszolgált HTML-ben is benne vannak.
 */
.tod-toc {
	margin-block: var(--wp--preset--spacing--80);
}

.tod-toc__details {
	border: 1px solid var(--wp--custom--color--line-subtle);
	border-left: 2px solid var(--wp--preset--color--accent);
	border-radius: var(--wp--custom--radius--sm);
	background: var(--wp--preset--color--surface);
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--70);
}

.tod-toc__summary {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.3;
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--50);
}

.tod-toc__summary::-webkit-details-marker {
	display: none;
}

.tod-toc__summary::after {
	content: "+";
	color: var(--wp--preset--color--accent);
}

.tod-toc__details[open] .tod-toc__summary::after {
	content: "–";
}

.tod-toc__list {
	list-style: none;
	padding-left: 0;
	margin: var(--wp--preset--spacing--50) 0 0;
	display: grid;
	gap: var(--wp--preset--spacing--40);
	counter-reset: tod-toc;
}

.tod-toc__item--h3 {
	padding-left: var(--wp--preset--spacing--60);
}

.tod-toc__link {
	display: block;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.45;
	text-decoration: none;
	color: var(--wp--preset--color--text-muted);
	border-left: 2px solid transparent;
	padding-left: var(--wp--preset--spacing--40);
	transition: color 0.16s ease, border-color 0.16s ease;
}

.tod-toc__link:hover {
	color: var(--wp--preset--color--contrast);
	border-left-color: var(--wp--custom--color--line-strong);
}

.tod-toc__link.is-current {
	color: var(--wp--preset--color--contrast);
	border-left-color: var(--wp--preset--color--accent);
	font-weight: 500;
}

@media (min-width: 1100px) {
	.tod-toc__summary {
		font-size: var(--wp--preset--font-size--small);
	}
}

/* ===========================================================================
   20. COMPARISON TABLE
   The scope table is the argument on the pricing pages, so it gets real table
   semantics: a header row, row headers, and horizontal scrolling on narrow
   screens rather than a collapsed layout that loses the column relationship.
   =========================================================================== */

.tod-table {
	overflow-x: auto;
	overscroll-behavior-x: contain;
	margin-inline: 0;
	max-width: 100%;
}

/*
 * On a narrow screen the table keeps its columns and scrolls sideways inside
 * its own box. Collapsing it into stacked rows would destroy the comparison —
 * the whole point is reading the three offers against each other.
 *
 * A görgetés eddig is működött, csak nem látszott rajta. Telefonon a
 * gördítősáv alaphelyzetben rejtve van, így a táblázat egyszerűen elvágottnak
 * tűnt a képernyő szélén — jogosan tűnt hibának. Két dolog teszi láthatóvá:
 * a jobb szélen egy árnyék, ami csak addig van ott, amíg van jobbra tovább, és
 * egy vékony, mindig kirajzolt gördítősáv.
 */
@media (max-width: 782px) {
	.tod-table {
		margin-inline: 0;
		width: 100%;
		scrollbar-width: thin;
		scrollbar-color: var(--wp--custom--color--line-strong) transparent;

		/*
		 * A két fehér folt a tartalommal együtt mozog (`local`), a két árnyék a
		 * dobozhoz van szögezve (`scroll`). Amíg a táblázat a bal szélén áll, a
		 * fehér folt eltakarja a bal oldali árnyékot; ahogy elgörgetjük, kicsúszik
		 * alóla és megjelenik. A jobb oldalon ugyanez fordítva. Így az árnyék
		 * pontosan azt jelzi, amerre még van tartalom.
		 */
		background-image:
			linear-gradient(to right, var(--wp--preset--color--base), rgba(255, 255, 255, 0)),
			linear-gradient(to left, var(--wp--preset--color--base), rgba(255, 255, 255, 0)),
			linear-gradient(to right, rgba(12, 35, 64, 0.18), rgba(12, 35, 64, 0)),
			linear-gradient(to left, rgba(12, 35, 64, 0.18), rgba(12, 35, 64, 0));
		background-position: left center, right center, left center, right center;
		background-repeat: no-repeat;
		background-size: 2rem 100%, 2rem 100%, 0.75rem 100%, 0.75rem 100%;
		background-attachment: local, local, scroll, scroll;
	}

	.tod-table::-webkit-scrollbar {
		height: 6px;
	}

	.tod-table::-webkit-scrollbar-thumb {
		background: var(--wp--custom--color--line-strong);
		border-radius: 3px;
	}

	/*
	 * Telefonon kötött oszlopszélesség.
	 *
	 * A fejlécek `white-space: nowrap`-je asztali gépen tartja egy sorban a
	 * címkéket, telefonon viszont az „Amit összehasonlítasz” felirat 218
	 * pixelre hizlalta az első oszlopot — a látható 335-ből. A címkékre ment el
	 * a hely kétharmada, az összehasonlítandó értékekre alig maradt. Itt tehát
	 * törhetnek a feliratok.
	 *
	 * A `table-layout: fixed` azért kell, mert automatikus elrendezésnél a
	 * szélesség csak javaslat: a hosszabb cellák így is szétfeszítették az
	 * oszlopot. Kötött elrendezésnél a három adatoszlop egyforma lesz, és a
	 * címkeoszlop mellett pontosan elfér egy teljes ajánlat.
	 */
	.tod-table table {
		table-layout: fixed;
		min-width: 34rem;
	}

	/*
	 * A fejléccímkék törhetnek, akár szó közben is.
	 *
	 * A sortörés engedélyezése önmagában kevés volt: az „ÖSSZEHASONLÍTASZ” egy
	 * darab tizenhat karakteres szó, ami monospace-ben, ritkítva szélesebb, mint
	 * a rá jutó oszlop — nem volt hol törnie, így kilógott a cellából. Kötőjeles
	 * elválasztás a nyelv szerint (az oldal `lang="hu"`), és ha az sem elég,
	 * töréspont szó közben is. Egy kicsit kisebb betű és szűkebb ritkítás
	 * segít, hogy erre minél ritkábban legyen szükség.
	 */
	.tod-table thead th,
	.tod-table tbody th {
		white-space: normal;
		hyphens: auto;
		overflow-wrap: break-word;
	}

	.tod-table thead th {
		font-size: 0.6875rem;
		letter-spacing: 0.04em;
	}

	.tod-table th,
	.tod-table td {
		padding-inline: var(--wp--preset--spacing--50);
	}

	.tod-table th:first-child,
	.tod-table td:first-child {
		width: 9rem;
	}

	/*
	 * A lépéstáblázat marad táblázat, csak arányosabb oszlopokkal.
	 *
	 * Egy körrel korábban blokkokra bontottam telefonon — és rosszabb lett:
	 * a fejléc elveszett, a sorok összefolytak, a hosszabb magyarázatok pedig
	 * továbbra is kilógtak. A vízszintes görgetés viszont működik, és az
	 * összehasonlító táblázatoknál bizonyítottan olvasható marad. Ugyanaz a
	 * megoldás kell ide is; csak az oszlopok aránya volt rossz.
	 *
	 * A sorszámoszlop annyi, amennyi két számjegy — a maradékon a lépés neve
	 * és a magyarázat osztozik.
	 */
	/*
	 * A szélességet a FEJLÉCSORRA kell írni, nem a törzs celláira.
	 *
	 * A táblázat `table-layout: fixed` — és ott a böngésző kizárólag az első
	 * sor celláiból olvassa ki az oszlopszélességet. Az első sor a `<thead>`,
	 * amiben `th` elemek állnak; a `td:nth-child(2) { width: 8rem }` tehát
	 * szó szerint semmit nem csinált. A „Lépés" oszlop ezért nyúlt el a
	 * képernyő széléig, és ezért látszott úgy, hogy jobbra már nincs tartalom.
	 */
	.tod-table--steps th:first-child,
	.tod-table--steps td:first-child {
		width: 2.75rem;
		padding-inline: 0.5rem;
		text-align: center;
	}

	.tod-table--steps th:nth-child(2),
	.tod-table--steps td:nth-child(2) {
		width: 6rem;
		padding-inline: 0.5rem;
	}

	/*
	 * A lépés neve törhet két sorba — ez olcsóbb, mint a hely, amit elvenne.
	 */
	.tod-table--steps td:nth-child(2) {
		font-weight: 700;
		color: var(--wp--preset--color--contrast);
		overflow-wrap: anywhere;
		hyphens: auto;
	}

	/*
	 * Keskenyebb teljes szélesség: kevesebb görgetnivaló.
	 *
	 * A harmadik oszlop így is nyolcvan pixellel túlnyúlik a képernyőn — ez
	 * szándékos. Ha pontosan beleférne, semmi nem jelezné, hogy van tovább;
	 * ha sokkal túlnyúlna, hosszan kellene görgetni. Ennyi épp elég ahhoz,
	 * hogy a levágott szó elárulja: jobbra még van szöveg.
	 */
	.tod-table--steps table {
		min-width: 30rem;
	}

	/*
	 * Utolsó védvonal a kilógás ellen.
	 *
	 * A `break-word` csak akkor tör szó közben, ha a szó egyedül is túllóg a
	 * soron. Az `anywhere` már akkor is, ha a sor eleve szűk — ez az, ami egy
	 * kötött szélességű cellában garantálja, hogy semmi nem lép ki a keretből.
	 */
	.tod-table th,
	.tod-table td {
		overflow-wrap: anywhere;
	}

	/*
	 * A sorfejléc oszlopa a helyén marad oldalra görgetés közben. Enélkül a
	 * látogató a harmadik oszlopnál már nem tudja, melyik sort nézi — pont az
	 * összehasonlítás veszne el, amiért a táblázat egyáltalán táblázat.
	 */
	/*
	 * Telefonon nincs rögzített oszlop.
	 *
	 * A `position: sticky` egy `border-collapse: collapse` táblázat cellájára
	 * a mobil böngészőkben rendre félremegy: a cella kikerül a normál
	 * rétegsorrendből, és ha a tartalma bármiért túlnyúlik, a szomszéd oszlop
	 * fölé rajzolódik. Kétszer javítottam a tüneteit ahelyett, hogy az okát
	 * vettem volna ki. Az oszlop rögzítése kényelmi funkció; az olvashatóság
	 * nem az. A vízszintes görgetés a szélárnyékokkal enélkül is működik.
	 */
	.tod-table tbody th,
	.tod-table thead th:first-child {
		position: static;
	}

	/*
	 * A rögzített oszlop jobb élét árnyék rajzolja, nem keret.
	 *
	 * `border-collapse: collapse` mellett két szomszédos cella egyetlen közös
	 * keretet oszt meg, és azt itt a jobb oldali, elgörgetett cella festi — a
	 * rögzített oszlopnak így nem maradt jobb széle, a mellette elcsúszó szöveg
	 * pedig nekifutott. Az árnyék nem vesz részt az egyesítésben, és a cella
	 * fölött rajzolódik, ezért a helyén marad.
	 */

}

/*
 * A táblázat teste mindig fehér, akkor is, ha halványszürke szakaszban áll.
 *
 * A tintázott sávon a sorok beleolvadtak a háttérbe, és a táblázat inkább
 * tűnt szövegblokknak, mint táblázatnak. Fehér alapon a hajszálvonalak
 * visszakapják a dolgukat, a keret pedig kívül-belül megmarad.
 */
.tod-table table {
	background: var(--wp--preset--color--base);
	border-collapse: collapse;
	width: 100%;
	min-width: 44rem;
	font-size: var(--wp--preset--font-size--small);
	font-variant-numeric: tabular-nums;
}

/*
 * A keretszínt mindenhol kiírjuk.
 *
 * A blokk alapstílusa `border: 1px solid` szín nélkül, ami currentColor-t
 * jelent. Amikor a fejléc szövege fehér lett, a keretei is fehérre váltottak,
 * és a sötétkék sáv minden cella körül egy pixelnyit visszahúzódott — ettől
 * látszott keskenyebbnek az alatta lévő soroknál. A törzsben ugyanez fordítva
 * ütött ki: a sorfejlécek sötétkék szövege sötétkék oszlopvonalakat rajzolt.
 */
.tod-table th,
.tod-table td {
	text-align: left;
	vertical-align: top;
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
	border: 1px solid var(--wp--custom--color--line-subtle);
}

/*
 * A fejléc sötétkék sáv, alatta menta hajszálvonal.
 *
 * A táblázat a döntés helye, ezért kap színt: a kék lezárja fölül, a menta
 * vonal pedig azt a sort emeli ki alatta, amelyik a legtöbbet számít. A menta
 * itt kitöltés és vonal, nem szöveg — fehér háttéren 2,16:1 lenne, ami bukik.
 */
.tod-table thead th {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	letter-spacing: 0.07em;
	line-height: 1.4;
	text-transform: uppercase;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--contrast);
	border-bottom: 2px solid var(--wp--preset--color--accent);
}

.tod-table tbody th {
	font-weight: 500;
	color: var(--wp--preset--color--contrast);
}

/*
 * A címkék egy sorban tartása CSAK asztali gépen.
 *
 * Ez a két `nowrap` korábban feltétel nélkül állt itt, a fájlban lejjebb, mint
 * a mobil felülírás. A media query viszont nem ad specificitást — azonos súlynál
 * a későbbi szabály nyer, tehát a `nowrap` telefonon is érvényesült. A kötött
 * szélességű cellába nem fért be a szöveg, kilógott belőle, és rárajzolódott a
 * szomszéd oszlopra: pontosan ez volt a képernyőképeken látszó összefolyás.
 *
 * Most a nowrap maga ül media queryben, tehát fizikailag nem tud átszivárogni.
 */
@media (min-width: 783px) {
	.tod-table thead th,
	.tod-table tbody th {
		white-space: nowrap;
	}
}

.tod-table td {
	color: var(--wp--preset--color--text-muted);
}

.tod-table tbody tr:hover td,
.tod-table tbody tr:hover th {
	background: var(--wp--preset--color--surface);
}

/*
 * The price row is the one people scan for; give it weight.
 *
 * Az ár zölden áll, de a szöveghez való zölddel (#00805F), nem a
 * kitöltés-mentával. A sorfejléc marad kék, így a szem a kék címkétől a zöld
 * számig fut — ugyanaz a két szín, mint a fejlécben.
 *
 * Fehér háttéren marad, nem kap menta alapot. A halvány mentán (#E0F8F2) ez a
 * zöld 4,44:1-re esik, a sor pedig 17px félkövér — az a WCAG szerint még nem
 * „nagy szöveg”, tehát 4,5:1 járna neki. Fehéren 4,94:1, és megvan.
 */
.tod-table tbody tr:first-child td {
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	color: var(--wp--preset--color--accent);
}

.tod-table tbody tr:first-child th,
.tod-table tbody tr:first-child td {
	border-bottom: 1px solid var(--wp--custom--color--line-strong);
}

/*
 * A táblázatot alul ugyanaz a sötétkék zárja le, ami fölül nyitja. Enélkül az
 * utolsó sor halvány hajszálvonala egyszerűen elszivárgott a fehérbe, és a
 * táblázatnak nem volt alja.
 */
.tod-table tbody tr:last-child th,
.tod-table tbody tr:last-child td {
	border-bottom: 2px solid var(--wp--preset--color--contrast);
}

/* The lead result line on a project detail page, one step up in size. */
.tod-project__result--lead {
	font-size: var(--wp--preset--font-size--large);
	text-transform: none;
	letter-spacing: 0;
	font-family: var(--wp--preset--font-family--sans);
	border-top: 0;
	padding-top: 0;
}

/* ===========================================================================
   21. CATEGORY FILTER
   Chips are links. The current one is marked by colour *and* by weight and
   border, so the state is not carried by colour alone.
   =========================================================================== */

.tod-filter__list {
	list-style: none;
	padding-left: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--40);
}

.tod-filter__chip {
	display: inline-flex;
	align-items: baseline;
	gap: 0.4em;
	padding: 0.5rem 0.85rem;
	border: 1px solid var(--wp--custom--color--line-subtle);
	border-radius: var(--wp--custom--radius--pill);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--text-muted);
	text-decoration: none;
	white-space: nowrap;
	transition: border-color 0.16s ease, color 0.16s ease, background-color 0.16s ease;
}

.tod-filter__chip:hover {
	border-color: var(--wp--custom--color--line-strong);
	color: var(--wp--preset--color--contrast);
}

.tod-filter__chip.is-current {
	background: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	font-weight: 500;
}

.tod-filter__count {
	font-variant-numeric: tabular-nums;
	opacity: 0.65;
}

/* Announcement region for the filter: read by screen readers, seen by nobody. */
.tod-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ===========================================================================
   22. AUTHOR BOX AND RELATED POSTS
   =========================================================================== */

.tod-author {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--60);
	align-items: flex-start;
	padding: var(--wp--preset--spacing--70);
	border: 1px solid var(--wp--custom--color--line-subtle);
	border-radius: var(--wp--custom--radius--sm);
	max-width: var(--wp--custom--layout--prose);
}

.tod-author img {
	border-radius: var(--wp--custom--radius--sm);
}

/* ===========================================================================
   23. CONTACT FORM
   Input borders use their own darker token: the decorative hairline grey used
   for table rules measures 1.65:1 against white and fails the 3:1 the standard
   requires for the edge of an interface control.
   =========================================================================== */

.tod-form {
	max-width: var(--wp--custom--layout--prose);
	display: grid;
	gap: var(--wp--preset--spacing--60);
}

.tod-form__row {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	margin: 0;
}

.tod-form__label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	line-height: 1.4;
	color: var(--wp--preset--color--text-muted);
}

.tod-form__control {
	width: 100%;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.5;
	color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--custom--color--input-border);
	border-radius: var(--wp--custom--radius--sm);
	padding: 0.7rem 0.9rem;
	transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.tod-form__control:hover {
	border-color: var(--wp--preset--color--contrast);
}

.tod-form__control:focus {
	outline: 2px solid var(--wp--preset--color--contrast);
	outline-offset: 1px;
	border-color: var(--wp--preset--color--contrast);
}

.tod-form__row.is-invalid .tod-form__control {
	border-color: var(--wp--custom--color--error);
	border-width: 2px;
}

.tod-form__error {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.45;
	color: var(--wp--custom--color--error);
}

/* Error state is carried by a message and a thicker border, not by colour
   alone — colour is not information a colour-blind reader can rely on. */
.tod-form__error::before {
	content: "▲ ";
}

.tod-form__errors {
	padding: var(--wp--preset--spacing--60);
	background: var(--wp--custom--color--error-soft);
	border-left: 3px solid var(--wp--custom--color--error);
	border-radius: var(--wp--custom--radius--sm);
}

.tod-form__errors:focus-visible {
	outline: 2px solid var(--wp--preset--color--contrast);
	outline-offset: 2px;
}

.tod-form__errors-title {
	font-weight: 700;
	margin: 0 0 var(--wp--preset--spacing--40);
}

.tod-form__errors ul {
	margin: 0;
	padding-left: 1.25rem;
	display: grid;
	gap: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--small);
}

.tod-form__consent {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--wp--preset--spacing--50);
	align-items: start;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.55;
	color: var(--wp--preset--color--text-muted);
	cursor: pointer;
}

.tod-form__consent input {
	width: 1.15rem;
	height: 1.15rem;
	margin-top: 0.15rem;
	accent-color: var(--wp--preset--color--accent-text);
}

/*
 * The honeypot. Kept out of view without display:none — some bots skip hidden
 * fields but fill anything still in the layout. aria-hidden and tabindex="-1"
 * keep it away from assistive technology and the keyboard.
 */
.tod-form__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.tod-form__actions {
	margin: 0;
}

.tod-form__submit {
	cursor: pointer;
	border: 0;
}

.tod-form__success {
	padding: var(--wp--preset--spacing--70);
	background: var(--wp--preset--color--accent-soft);
	border-radius: var(--wp--custom--radius--sm);
}

.tod-form__success-title {
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 700;
	margin: 0 0 var(--wp--preset--spacing--40);
}

/* ===========================================================================
   24. RETURN-ON-INVESTMENT CALCULATOR
   The table is the baseline and is always visible. The input fields start
   hidden and are revealed by the script, so a visitor without JavaScript never
   sees controls that would do nothing.
   =========================================================================== */

.tod-roi {
	padding-block: var(--wp--custom--layout--section-padding);
	scroll-margin-top: var(--wp--custom--layout--scroll-offset);
}

.tod-roi__title {
	font-size: var(--wp--preset--font-size--xx-large);
	line-height: 1.15;
	letter-spacing: -0.015em;
	margin: var(--wp--preset--spacing--50) 0 var(--wp--preset--spacing--60);
}

.tod-roi__inputs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--60);
	margin-top: var(--wp--preset--spacing--70);
}

.tod-roi__field {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	margin: 0;
}

.tod-roi__field label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-muted);
}

.tod-roi__field input {
	font-family: inherit;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--custom--color--input-border);
	border-radius: var(--wp--custom--radius--sm);
	padding: 0.55rem 0.75rem;
	width: 9rem;
}

.tod-roi__field input:focus {
	outline: 2px solid var(--wp--preset--color--contrast);
	outline-offset: 1px;
}

.tod-roi__result {
	margin-top: var(--wp--preset--spacing--70);
	padding: var(--wp--preset--spacing--70);
	background: var(--wp--preset--color--accent-soft);
	border-radius: var(--wp--custom--radius--sm);
}

.tod-roi__headline {
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.3;
	margin: 0;
}

.tod-roi__figures {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--80);
	margin: var(--wp--preset--spacing--60) 0 0;
}

.tod-roi__figures dt {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-muted);
}

.tod-roi__figures dd {
	margin: 0.25rem 0 0;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.tod-roi__table {
	margin-top: var(--wp--preset--spacing--70);
}

.tod-roi__caption {
	caption-side: bottom;
	text-align: left;
	padding-top: var(--wp--preset--spacing--50);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--text-muted);
}

/* The assumptions sit next to the numbers, not in a footnote nobody reads. */
.tod-roi__note {
	margin-top: var(--wp--preset--spacing--70);
	padding: var(--wp--preset--spacing--60);
	border-left: 3px solid var(--wp--custom--color--line-strong);
	background: var(--wp--preset--color--surface);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
	color: var(--wp--preset--color--text-muted);
	max-width: 68ch;
}

.tod-roi__cta {
	margin-top: var(--wp--preset--spacing--70);
}

/* ===========================================================================
   25. REDUCED MOTION
   Honours the operating system setting. With animations removed the workflow
   strip renders as a static diagram with its full text intact.
   =========================================================================== */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.tod-flow__step {
		animation: none !important;
	}

	.tod-card:hover,
	.tod-project:hover {
		transform: none;
	}
}

/* ===========================================================================
   25/B. LEGAL PAGES
   Impresszum és adatkezelési tájékoztató. Hosszú, sűrű, jogszabály diktálta
   szöveg — a dolga nem az, hogy szép legyen, hanem hogy meg lehessen benne
   találni egy adott pontot.
   =========================================================================== */

.tod-legal__effective {
	color: var(--wp--preset--color--text-muted);
}

/*
 * Nagyobb térköz a szakaszok között, mint a szokásos szövegben.
 *
 * A tájékoztató tizenöt számozott pontból áll, és a legtöbb olvasó nem
 * végigolvassa, hanem keresi az egyiket. A címsorok előtti levegő az, ami
 * görgetés közben megmutatja, hol kezdődik új pont.
 */
.tod-legal > h2 {
	margin-top: var(--wp--preset--spacing--90);
	padding-top: var(--wp--preset--spacing--60);
	border-top: 1px solid var(--wp--custom--color--line-subtle);
}

.tod-legal > h2:first-of-type {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.tod-legal > h3 {
	margin-top: var(--wp--preset--spacing--80);
}

.tod-legal > h4 {
	margin-top: var(--wp--preset--spacing--70);
}

.tod-legal > p,
.tod-legal > ul {
	margin-top: var(--wp--preset--spacing--50);
	line-height: 1.7;
}

.tod-legal > ul {
	padding-left: 1.25rem;
}

.tod-legal > ul li + li {
	margin-top: var(--wp--preset--spacing--40);
}

/*
 * A táblázatok vízszintesen görgethetők.
 *
 * Az adatfeldolgozók táblázata három oszlop, és az egyik cellában egy angliai
 * postacím áll. Telefonon ezt nem lehet úgy tördelni, hogy olvasható maradjon
 * — a görgetés őszintébb megoldás, mint a szétesett szöveg.
 */
.tod-legal__table {
	margin-top: var(--wp--preset--spacing--60);
	overflow-x: auto;
}

.tod-legal__table table {
	border-collapse: collapse;
	width: 100%;
	font-size: var(--wp--preset--font-size--small);
}

.tod-legal__table th,
.tod-legal__table td {
	border: 1px solid var(--wp--custom--color--line-subtle);
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	text-align: left;
	vertical-align: top;
	line-height: 1.5;
}

.tod-legal__table thead th {
	background: var(--wp--preset--color--surface);
	border-bottom: 2px solid var(--wp--preset--color--contrast);
	font-weight: 700;
	white-space: nowrap;
}

/* A kétoszlopos adatlapoknál a címke oszlopa nem törik. */
.tod-legal__table tbody td:first-child {
	white-space: nowrap;
}

.tod-legal__table tbody tr:nth-child(even) td {
	background: var(--wp--preset--color--surface);
}

@media (max-width: 600px) {
	.tod-legal__table tbody td:first-child {
		white-space: normal;
	}
}

/* ===========================================================================
   26. DARK SURFACE — THE LAST WORD ON TEXT COLOUR
   Ez a szakasz szándékosan a fájl legvégén áll, és szándékosan `!important`.

   Három kör ment rá, és mindháromszor ugyanaz buktatta el, két irányból:

   1. A WordPress minden palettaszínhez legenerál egy segédosztályt, és
      `!important`-tal írja ki:
          .has-text-muted-color { color: var(--wp--preset--color--text-muted) !important }
      Amíg a blokkon rajta van a `textColor` attribútum, ezt normál szabállyal
      nem lehet legyőzni — a fejlesztői eszközben pontosan ezért volt áthúzva
      minden korábbi próbálkozásom.
   2. A komponensszabályok (`.tod-numlist li`, `.tod-price__list li`,
      `.tod-step__text`) a fájlban lentebb álltak, mint a `.tod-dark li`.
      Azonos súlynál a későbbi nyer, tehát a halványszürke visszajött.

   Egy szabálykészletet előre nem lehet minden jövőbeli komponens elé
   pozicionálni — de a fájl végére igen. Innen nincs „lentebb”, és az
   `!important` a WordPress saját fegyvere ugyanarra a tulajdonságra.

   A #556579 sötétkéken 2,65:1 — ez nem ízlés kérdése, hanem bukott
   akadálymentességi küszöb. Fehéren 15,79:1.
   =========================================================================== */

/*
 * Minden szöveghordozó elem fehér. A lista hosszú, mert elemnevekre szól:
 * így a most nem létező, később írt komponensek is bele fognak esni anélkül,
 * hogy bárkinek eszébe kellene jutnia felvenni ide egy osztályt.
 */
.tod-dark p,
.tod-dark li,
.tod-dark dt,
.tod-dark dd,
.tod-dark td,
.tod-dark th,
.tod-dark strong,
.tod-dark b,
.tod-dark em,
.tod-dark i,
.tod-dark small,
.tod-dark cite,
.tod-dark address,
.tod-dark figcaption,
.tod-dark blockquote,
.tod-dark summary,
.tod-dark h1,
.tod-dark h2,
.tod-dark h3,
.tod-dark h4,
.tod-dark h5,
.tod-dark h6,
.tod-dark .tod-lead,
.tod-dark .tod-ba__text,
.tod-dark .tod-price__who,
.tod-dark .tod-price__note,
.tod-dark .tod-tier__name,
.tod-dark .tod-tier__meta,
.tod-dark .tod-tier__price,
.tod-dark .tod-project__result,
.tod-dark .tod-faq__answer,
.tod-dark .tod-step__text,
.tod-dark .tod-step__list li,
.tod-dark .tod-numlist li,
.tod-dark .tod-problem__list li,
.tod-dark .tod-price__list li,
.tod-dark .has-text-muted-color,
.tod-dark .has-contrast-color,
.tod-dark .has-line-color,
.tod-dark .has-surface-color,
.tod-dark .has-surface-2-color {
	color: var(--wp--preset--color--base) !important;
}

/*
 * Kivétel 1: a menta jelölők.
 *
 * A sorszámok és a jelölők adják a sötét sáv egyetlen színes rétegét — ezek
 * vezetik a szemet lefelé. Ha a fenti szabály elmosná őket, a szakasz egy
 * egybefüggő fehér tömbbé válna. Két osztály itt amúgy is erősebb, mint egy
 * osztály + egy elemnév, de az `!important` a segédosztályok miatt kell.
 */
.tod-dark .tod-label--indexed::before,
.tod-dark .tod-card__num,
.tod-dark .tod-guarantee__num,
.tod-dark .tod-step__num,
.tod-dark .tod-ba__key--auto,
.tod-dark .tod-table tbody tr:first-child td,
.tod-dark .has-accent-color,
.tod-dark .has-accent-text-color {
	color: var(--wp--preset--color--accent) !important;
}

/*
 * Kivétel 2: a szakaszcímke halvány marad.
 *
 * A #BBC1CA sötétkéken 8,72:1 — bőven megfelel, viszont egy fokkal hátrébb
 * lép a címsor mögé. Ha ez is fehér lenne, a „03 / HOGYAN MŰKÖDIK” ugyanolyan
 * hangsúlyt kapna, mint maga a cím.
 */
.tod-dark .tod-label,
.tod-dark .tod-servicehead__crumb {
	color: var(--wp--custom--color--navy-text-muted) !important;
}

/*
 * Kivétel 3: folyószövegben a link menta marad.
 *
 * Csak folyószövegben. Egy gomb felirata sosem link-szín — a gombnak saját
 * háttere van, ahhoz kell igazodnia; menta a mentán olvashatatlan.
 */
.tod-dark p a,
.tod-dark li a,
.tod-dark td a,
.tod-dark th a,
.tod-dark dd a,
.tod-dark .tod-faq__answer a {
	color: var(--wp--preset--color--accent) !important;
}

/*
 * Kivétel 4: a lábléc menüoszlopai és a jogi sor.
 *
 * Ez áll a legvégén, mert ez veri a fenti link-szabályt is: a láblécben a
 * menü nem „hivatkozás a szövegben”, hanem maga a navigáció. Fehér marad,
 * a visszajelzést hoverre a menta aláhúzás adja — a szín nem változik.
 */
.tod-dark .tod-footer__list a,
.tod-dark .tod-footer__legal a,
.tod-footer .tod-footer__list a,
.tod-footer .tod-footer__legal a {
	color: var(--wp--preset--color--base) !important;
	text-decoration: none;
	text-underline-offset: 4px;
}

.tod-dark .tod-footer__list a:hover,
.tod-dark .tod-footer__legal a:hover,
.tod-dark .tod-footer__list a:focus-visible,
.tod-dark .tod-footer__legal a:focus-visible {
	color: var(--wp--preset--color--base) !important;
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--accent);
	text-decoration-thickness: 2px;
}

/*
 * A gombfelirat a gomb hátteréhez igazodik, nem a sáv szövegszínéhez.
 *
 * A hover külön sor, és ez nem formaság: hoverre a tömör gomb háttere a
 * sötétebb mentára (#00805F) vált, amin a sötétkék felirat 2:1 körül lenne.
 * Ha csak az alapállapotot írnám felül `!important`-tal, az a hover fehérjét
 * is elvinné — vagyis a javítás maga csinálna egy olvashatatlan állapotot.
 */
.tod-dark .wp-block-button:not(.is-style-outline) > .wp-block-button__link,
.tod-dark .wp-block-button:not(.is-style-outline) > .wp-block-button__link:visited {
	color: var(--wp--preset--color--contrast) !important;
}

.tod-dark .wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover,
.tod-dark .wp-block-button:not(.is-style-outline) > .wp-block-button__link:focus {
	color: var(--wp--preset--color--accent) !important;
}

.tod-dark .wp-block-button.is-style-outline > .wp-block-button__link {
	color: var(--wp--preset--color--base) !important;
}

/* A körvonalas gomb hoverre mentára vált — sötétkéken 7,29:1. */
.tod-dark .wp-block-button.is-style-outline > .wp-block-button__link:hover,
.tod-dark .wp-block-button.is-style-outline > .wp-block-button__link:focus {
	color: var(--wp--preset--color--accent) !important;
}

/* ===========================================================================
   26/B. MUNKÁINK ÉS ESETTANULMÁNY
   =========================================================================== */

/*
 * A munkák szűrője.
 *
 * A `hidden` attribútummal indul a HTML-ben, és a szkript veszi le róla. Ez
 * szándékos: a kártyák statikusan ott vannak, JavaScript nélkül mind látszik,
 * és egy gombsor, ami nem csinál semmit, rosszabb, mint ha nem is lenne ott.
 */
.tod-workfilter {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--40);
	margin-top: var(--wp--preset--spacing--70);
}

.tod-workfilter__chip {
	padding: 0.5rem 0.85rem;
	border: 1px solid var(--wp--custom--color--line-subtle);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--text-muted);
	cursor: pointer;
	transition: border-color 0.16s ease, color 0.16s ease, background-color 0.16s ease;
}

.tod-workfilter__chip:hover {
	border-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--contrast);
}

.tod-workfilter__chip.is-current {
	background: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

/*
 * A kiszűrt kártya eltűnik.
 *
 * Ugyanaz a csapda, mint a bloglistán: a `.tod-work` `display: grid`-et kap, és
 * egy szerzői szabály erősebb a böngésző `[hidden] { display: none }`
 * alapértelmezésénél. `!important` nélkül a szűrő nem csinálna semmit.
 */
.tod-works .tod-work[hidden] {
	display: none !important;
}

/*
 * A típusjelölő osztályok.
 *
 * A `tod-work--automatizalas` és a `tod-work--weboldal` nem fest semmit — a
 * szűrő ezekből tudja, melyik kártya micsoda. Azért állnak mégis itt, hogy egy
 * későbbi olvasó ne „használaton kívüli osztály" címén törölje ki őket a
 * sablonból: ez a szabály a bizonyíték, hogy szándékosan vannak ott.
 */
.tod-work--automatizalas,
.tod-work--weboldal {
	/* Csak jelölő. A megjelenést a .tod-work adja. */
	position: relative;
}

/* Kulcsszámok az esettanulmány fejlécében. */
.tod-keyfigures {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: var(--wp--preset--spacing--60);
	align-items: stretch;
}

/*
 * A rácsba tett csoportok gyerekei nem kaphatnak függőleges margót.
 *
 * A WordPress a „flow" elrendezésű csoport minden gyerekére kiír egy
 * `margin-block-start`-ot az elsőn kívül. Egymás alatti blokkoknál ez helyes,
 * rácsban viszont lefelé tolja a második és harmadik kártyát — pontosan ezért
 * álltak lépcsőzetesen. A `gap` már megadja a térközt; a margó itt csak kárt
 * okoz.
 */
.tod-keyfigures > *,
.tod-gallery > * {
	margin-block: 0;
}

.tod-keyfigure {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: var(--wp--preset--spacing--60);
	border: 1px solid var(--wp--custom--color--line-subtle);
	border-left: 2px solid var(--wp--preset--color--accent);
	border-radius: var(--wp--custom--radius--sm);
	background: var(--wp--preset--color--base);
}

.tod-keyfigure__value {
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: 700;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
	margin: 0;
}

.tod-keyfigure__label {
	margin-top: var(--wp--preset--spacing--40);
	margin-bottom: 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
	color: var(--wp--preset--color--text-muted);
}

.tod-case__sub {
	color: var(--wp--preset--color--text-muted);
	line-height: 1.3;
}

/*
 * Az átadás dátuma és a megrendelő.
 *
 * Egy esettanulmánynál ez nem apróbetűs rész: a dátum teszi ellenőrizhetővé,
 * a megnevezett ügyfél pedig bizonyíthatóvá. Halványabb a bevezetőnél, de a
 * cím közelében marad, mert aki a hitelességet keresi, itt keresi.
 */
.tod-case__meta {
	color: var(--wp--preset--color--text-muted);
	font-family: var(--wp--preset--font-family--mono);
	line-height: 1.6;
}

/*
 * Képgaléria — egy, két vagy három képpel is működik.
 *
 * `auto-fit` és egy alsó korlát: egy képnél teljes szélességű lesz, kettőnél
 * felezve, háromnál harmadolva. Nincs benne oszlopszám, tehát a következő
 * esettanulmányhoz nem kell hozzányúlni — ott lehet két kép, vagy négy.
 */
.tod-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	gap: var(--wp--preset--spacing--60);
}

.tod-gallery__item {
	display: flex;
	flex-direction: column;
}

.tod-gallery__media {
	margin: 0;
	width: 100%;
}

/*
 * Minden galériakép ugyanakkora dobozban.
 *
 * A `figure` alapból a tartalmához méretezné magát, ezért látszottak a képek
 * eltérő szélességűnek, a feliratok pedig más-más magasságban kezdődtek. A
 * rögzített négyzetes arány egységes rácsot ad, és mivel a képek eredetileg is
 * négyzetesek, a `cover` nem vág le belőlük semmit.
 */
.tod-gallery__media img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--sm);
	border: 1px solid var(--wp--custom--color--line-subtle);
}

.tod-gallery__caption {
	margin-top: var(--wp--preset--spacing--50);
	color: var(--wp--preset--color--text-muted);
	line-height: 1.5;
}

/* ===========================================================================
   27. MOBIL JAVÍTÁSOK
   Ezek a szabályok a fájl legvégén állnak, hogy a fentebbi komponensszabályok
   ne tudják felülírni őket. Media query nem ad specificitást — ez a projekt
   már háromszor bukott el ezen.
   =========================================================================== */

/*
 * Az űrlapmezők nem lóghatnak ki a konténerükből.
 *
 * A `width: 100%` a mezőkön alapértelmezett `content-box` dobozmodellel a
 * *tartalom* szélességét jelenti — a bal-jobb belső tér és a keret még
 * hozzáadódik. A mező így pontosan 1,8rem + 2px-szel szélesebb lett a
 * szülőjénél, és telefonon kilógott a képernyőből. Sehol a témában nem volt
 * `box-sizing` beállítás, tehát ez nem elrontott érték, hanem hiányzó alap.
 *
 * Nem globális `*` reset: ilyen későn az az egész elrendezést elmozdítaná.
 * Az űrlap minden eleme viszont biztonsággal kaphatja meg.
 */
.tod-form,
.tod-form *,
.tod-formwrap,
.tod-formwrap * {
	box-sizing: border-box;
}

/*
 * A beágyazott űrlapbővítmények (WPForms, Contact Form 7) is beleférnek.
 *
 * Ha később bővítményre váltasz, a mezői ugyanebbe a konténerbe kerülnek. A
 * `max-width` és a `box-sizing` így rájuk is vonatkozik, anélkül hogy a
 * bővítmény saját stíluslapjához hozzá kellene nyúlni.
 */
.tod-formwrap {
	max-width: 100%;
	overflow-x: clip;
}

.tod-formwrap input,
.tod-formwrap textarea,
.tod-formwrap select,
.tod-formwrap .wpforms-container,
.tod-formwrap .wpcf7 {
	max-width: 100%;
}

/*
 * Térköz a bloglista kártyái között telefonon.
 *
 * A rács `blockGap`-je hasábközként érvényesül, egy oszlopban viszont a
 * kártyák közvetlenül egymáshoz értek: két keret egymás alatt egyetlen vastag
 * vonalnak látszott, és nem lehetett látni, hol ér véget egy cikk.
 */
@media (max-width: 781px) {
	.tod-post-grid {
		display: grid;
		grid-template-columns: 1fr;
		gap: 1.25rem;
	}

	.tod-post-grid > li {
		margin: 0;
	}

	/* Telefonon egy oszlop, kártyák között valódi térközzel. */
	.tod-works {
		display: grid;
		grid-template-columns: 1fr;
		gap: 1.25rem;
	}

	.tod-gallery {
		grid-template-columns: 1fr;
	}
}

/* ===========================================================================
   28. A MOBIL ALMENÜ — ZÁRÓ SZÓ
   Ez a szakasz a stíluslap végén áll, és `!important`-tal dolgozik.

   Három körön át próbáltam a specificitással megnyerni: a core a lenyíló menüt
   négy-hat osztályos szelektorokkal írja, és minden alkalommal találtam egy
   újabbat, ami fölém került. A menü viszont nem az a hely, ahol egy elvi
   szabály kedvéért kockáztatni érdemes: ha az almenü nyitva ragad, a látogató
   telefonján a fél menü lelóg a képernyőről.

   Innen nincs „lentebb", és az `!important` egyértelmű. A négy szabály együtt
   határozza meg a teljes viselkedést, tehát egy helyen látszik, mi történik.
   =========================================================================== */

/*
 * 1. Csukva az alapállapot — de csak akkor, ha a nyitáshoz van eszköz.
 *
 * A `tod-js` osztályt a nav.js teszi a gyökérelemre. Ha az nem futott le,
 * nincs rejtés: minden almenüpont látszik. Egy összecsukott menü, amit nem
 * lehet kinyitni, elérhetetlenné tenné a négy szolgáltatásoldalt.
 */
.tod-js .tod-header .wp-block-navigation__responsive-container.is-menu-open .has-child .wp-block-navigation__submenu-container {
	display: none !important;
}

/*
 * 2. Nyitva KIZÁRÓLAG a saját osztálytól.
 *
 * Az `aria-expanded` korábban is nyitott — és ez volt a hiba oka. A core a
 * lenyíló rétegben szándékosan minden almenüt nyitva tart (a saját nyílgombját
 * el is rejti ott), ezért a `state.isSubmenuOpen` kötés már a menü
 * megnyitásakor „true"-ra állítja az attribútumot. Vagyis az én „nyitva"
 * szabályom azonnal érvénybe lépett, és a négy szolgáltatás lenyomta a
 * képernyőről a többi menüpontot.
 *
 * A `tod-submenu-open` osztályt csak a nav.js teszi rá, csak kattintásra.
 * Egyetlen forrás, egyetlen igazság.
 */
.tod-js .tod-header .wp-block-navigation__responsive-container.is-menu-open .has-child.tod-submenu-open .wp-block-navigation__submenu-container {
	display: flex !important;
}

/*
 * 3. A nyíl közvetlenül a felirat mellett.
 *
 * A core a menüpont linkjét teljes szélességűre húzza, és ettől a nyíl a sor
 * másik végére, a képernyő közepére került — látszatra semmi köze nem volt a
 * „Szolgáltatások" felirathoz. A link ezért csak akkora, amekkorát a szöveg
 * kér, a sor pedig jobbra zár: így a kettő egymás mellett marad.
 */
.tod-header .wp-block-navigation__responsive-container.is-menu-open .has-child {
	display: flex !important;
	/*
	 * `flex-direction: row` — ez volt a hiányzó sor.
	 *
	 * A core minden menüelemre `flex-direction: column`-t ad a lenyíló
	 * rétegben. A `display: flex` felülírása ezt nem érinti, ezért került a
	 * nyíl a „Szolgáltatások" felirat FÖLÉ, külön sorba, középre — miközben a
	 * többi menüpont jobbra zárt. Egy oszlopirányú sorban nincs „mellette".
	 */
	flex-direction: row !important;
	flex-wrap: wrap !important;
	justify-content: flex-end !important;
	align-items: center !important;
	width: 100%;
}

.tod-header .wp-block-navigation__responsive-container.is-menu-open .has-child > .wp-block-navigation-item__content {
	width: auto !important;
	flex: 0 0 auto !important;
	order: 2;
}

.tod-header .wp-block-navigation__responsive-container.is-menu-open .has-child > .wp-block-navigation-submenu__toggle {
	order: 1;
	flex: 0 0 auto !important;
	width: auto !important;
	margin: 0 0.5rem 0 0 !important;
	padding: 0.5rem !important;
}

/*
 * A logó a lenyíló menüben.
 *
 * Alapból rejtve: a réteg konténere asztali nézetben is ott van a DOM-ban,
 * csak nem rétegként viselkedik — a másolat ott nem kellene. Kizárólag nyitott
 * menüben jelenik meg.
 *
 * A bezáró X a core-tól `position: absolute; right: 0; top: 0` értéket kap a
 * párbeszédpanelhez képest. A logó ugyanabba a sarokba kerül, csak balra, így
 * a kettő magától egy vonalba esik — nem méricskélt eltolással, hanem mert
 * ugyanahhoz a dobozhoz igazodnak.
 */
.tod-nav__logo {
	display: none;
}

.tod-header .wp-block-navigation__responsive-container.is-menu-open .tod-nav__logo {
	display: flex;
	align-items: center;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 2;
	height: 24px;
}

.tod-header .wp-block-navigation__responsive-container.is-menu-open .tod-nav__logo .tod-logo__mark {
	height: 30px;
	width: auto;
}

/* 4. Az almenü a saját sorába kerül, a felirat és a nyíl alá. */
.tod-header .wp-block-navigation__responsive-container.is-menu-open .has-child > .wp-block-navigation__submenu-container {
	order: 3;
	flex-basis: 100% !important;
}

/*
 * Build-jelző.
 *
 * Három kör ment el azon, hogy nem lehetett eldönteni: a szabály rossz, vagy
 * a böngésző régi fájlt rajzol. Ez egy sorral eldönti. A konzolba:
 *
 *     getComputedStyle(document.documentElement).getPropertyValue('--tod-css-build')
 *
 * Ha nem "5.12.2" jön vissza, akkor nem ez a stíluslap fut, és a CSS-t nem
 * érdemes tovább javítani, amíg az nem oldódik meg.
 */
:root {
	--tod-css-build: "5.12.2";
}

/* ===========================================================================
   2026-09 — FŐOLDAL: PROBLÉMA SZAKASZ RÁCS, SAROKJELEK NÉLKÜL
   =========================================================================== */

/* A „+” sarokjelek sehol nem kellenek. */
.tod-marked::before,
.tod-marked::after {
	content: none;
}

/*
 * Felül a címke teljes szélességben; alatta balra a cím, jobbra vele egy
 * magasságban a bevezető; alatta balra a (kisebb) problémalista és a zárómondat,
 * jobbra a CTA-doboz.
 */
.tod-problem-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	row-gap: var(--wp--preset--spacing--60);
	align-items: start;
}

.tod-problem-grid > * {
	margin-block: 0 !important;
}

.tod-problem-grid > .tod-label {
	grid-column: 1 / -1;
}

@media (min-width: 782px) {
	.tod-problem-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--wp--preset--spacing--100);
		row-gap: var(--wp--preset--spacing--70);
	}

	.tod-problem-grid > .tod-label {
		margin-bottom: calc(var(--wp--preset--spacing--50) - var(--wp--preset--spacing--70)) !important;
	}
}

.tod-problem-grid .tod-problem__list {
	margin-top: 0;
}

.tod-problem-grid .tod-problem__list li {
	padding-block: var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--small);
}

.tod-problem-grid .tod-problem__list li::before {
	top: var(--wp--preset--spacing--40);
}

.tod-problem-grid__list .tod-problem__close {
	margin-top: var(--wp--preset--spacing--60);
}

/* ===========================================================================
   2026-09 — COOKIEYES: A TÉMA SZÍNEIVEL
   A CookieYes inline stílust ír az elemekre, ezért kell az `!important`.
   =========================================================================== */

/* Minden süti-gomb olyan, mint a fő CTA. */
.cky-btn {
	background-color: var(--wp--preset--color--accent) !important;
	border-color: var(--wp--preset--color--accent) !important;
	color: var(--wp--preset--color--contrast) !important;
	border-radius: 999px !important;
	font-weight: 600 !important;
	transition: background-color 0.16s ease, box-shadow 0.16s ease, color 0.16s ease;
}

.cky-btn:hover,
.cky-btn:focus {
	background-color: var(--wp--preset--color--accent-soft) !important;
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--accent);
	color: var(--wp--preset--color--contrast) !important;
	opacity: 1 !important;
}

/* Bekapcsolt kapcsoló: sötétkék. */
.cky-switch input[type="checkbox"]:checked {
	background-color: var(--wp--preset--color--contrast) !important;
}

/* A lebegő süti-ikon háttere sötétkék, az ikon fehér marad. */
.cky-btn-revisit-wrapper {
	background-color: var(--wp--preset--color--contrast) !important;
}

/* „Mutass többet / kevesebbet” és „Mindig aktív”: menta. */
.cky-show-desc-btn,
.cky-always-active {
	color: var(--wp--preset--color--accent) !important;
}

/* ===========================================================================
   2026-09 — PROBLÉMÁK 2×3-AS RÁCSBAN, KÁRTYAIKONOK
   =========================================================================== */

.tod-problem__list.tod-problem__list--grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--50);
	margin-top: var(--wp--preset--spacing--80);
	border-top: 0;
}

@media (min-width: 600px) {
	.tod-problem__list.tod-problem__list--grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1000px) {
	.tod-problem__list.tod-problem__list--grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.tod-problem__list--grid li {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	text-align: left;
	margin: 0;
	padding: var(--wp--preset--spacing--60);
	border: 1px solid var(--wp--custom--color--line-subtle);
	border-radius: var(--wp--custom--radius--sm);
	background: var(--wp--preset--color--base);
}

.tod-problem__list--grid li::before {
	display: none;
}

.tod-card__icon {
	display: inline-flex;
	width: 2rem;
	height: 2rem;
	margin-bottom: var(--wp--preset--spacing--50);
	color: var(--wp--preset--color--accent);
}

.tod-card__icon svg {
	width: 100%;
	height: 100%;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.75;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ===========================================================================
   2026-09 — PROBLÉMAKÁRTYA-CÍMEK, STATISZTIKA-DOBOZ, ÁRKAPCSOLÓ
   =========================================================================== */

.tod-problem__icon {
	display: inline-flex;
	width: 2rem;
	height: 2rem;
	margin-bottom: var(--wp--preset--spacing--50);
	color: var(--wp--preset--color--accent);
}

.tod-problem__icon svg,
.tod-card__icon svg {
	width: 100%;
	height: 100%;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.75;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.tod-problem__title {
	display: block;
	margin-bottom: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	color: var(--wp--preset--color--contrast);
}

/* A CTA-doboz: balra a nagy szám, jobbra a szöveg és a gomb. */
.tod-problem__note--dark {
	display: grid;
	gap: var(--wp--preset--spacing--70);
	align-items: center;
}

@media (min-width: 782px) {
	.tod-problem__note--dark {
		grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
	}
}

.tod-problem__note--dark > * {
	margin-block: 0;
}

.tod-stat__num {
	margin: 0;
	font-size: clamp(2.5rem, 5vw, 4rem);
	font-weight: 700;
	line-height: 1.1;
	color: var(--wp--preset--color--accent);
}

.tod-stat__label {
	margin: var(--wp--preset--spacing--30) 0 0;
	color: var(--wp--custom--color--navy-text-muted);
}

.tod-stat-body > * {
	margin-block: 0;
}

.tod-stat-body > * + * {
	margin-top: var(--wp--preset--spacing--50);
}

/*
 * Árkártya-kapcsoló: CSS-ből, JavaScript nélkül. Kikapcsolva az alapcsomag
 * (Starter, Landing page), bekapcsolva az összetettebb (Growth, Több oldalas).
 */
.tod-switch {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
	margin-top: var(--wp--preset--spacing--50);
	cursor: pointer;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-muted);
}

.tod-switch__input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.tod-switch__track {
	position: relative;
	flex-shrink: 0;
	width: 2.5rem;
	height: 1.375rem;
	border-radius: 999px;
	background: var(--wp--custom--color--line-strong);
	transition: background-color 0.16s ease;
}

.tod-switch__track::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: calc(1.375rem - 6px);
	height: calc(1.375rem - 6px);
	border-radius: 50%;
	background: #fff;
	transition: transform 0.16s ease;
}

.tod-switch__input:checked + .tod-switch__track {
	background: var(--wp--preset--color--contrast);
}

.tod-switch__input:checked + .tod-switch__track::after {
	transform: translateX(1.125rem);
}

.tod-switch__input:focus-visible + .tod-switch__track {
	outline: 2px solid var(--tod-focus-color);
	outline-offset: 2px;
}

/*
 * A két állapot (ár és lista) ugyanabban a rácscellában áll egymáson; a
 * rejtett `visibility: hidden`, így a doboz magassága váltáskor nem ugrik.
 */
.tod-tiers,
.tod-price__lists {
	display: grid;
}

.tod-tiers > .tod-tier,
.tod-price__lists > .tod-price__list {
	grid-area: 1 / 1;
	margin: 0;
}

.tod-price:has(.tod-switch__input:checked) :is(.tod-tier--basic, .tod-price__list--basic),
.tod-price:not(:has(.tod-switch__input:checked)) :is(.tod-tier--advanced, .tod-price__list--advanced) {
	visibility: hidden;
}

/* ===========================================================================
   2026-09 — ÁRKÁRTYÁK: IKON, EGY MAGASSÁGBAN ÁLLÓ ÁRAK, KAPCSOLÓ-FELIRAT
   =========================================================================== */

.tod-price__title {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
}

.tod-price__icon {
	display: inline-flex;
	flex-shrink: 0;
	width: 1.75rem;
	height: 1.75rem;
	color: var(--wp--preset--color--accent);
}

.tod-price__icon svg {
	width: 100%;
	height: 100%;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.75;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/*
 * A kártyák sorai (cím, leírás, kapcsoló, árak, lista, gomb) közösek, így az
 * árak mindhárom kártyán egy vonalban állnak — a webshopnál a kapcsoló sora
 * üresen marad.
 */
.tod-price:has(> .tod-tiers) {
	display: grid;
	grid-template-rows: subgrid;
	grid-row: span 6;
	row-gap: 0;
	align-content: start;
}

.tod-price > .tod-price__title { grid-row: 1; }
.tod-price > .tod-price__who { grid-row: 2; }
.tod-price > .tod-switch { grid-row: 3; justify-self: start; }
.tod-price > .tod-tiers { grid-row: 4; }
.tod-price > .tod-price__lists { grid-row: 5; }
.tod-price > .tod-price__foot { grid-row: 6; align-self: end; }

/* A kapcsoló felirata is kattintható, hoverre sötétebb és aláhúzott. */
.tod-switch__text {
	transition: color 0.16s ease;
}

.tod-switch:hover .tod-switch__text {
	color: var(--wp--preset--color--contrast);
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--accent);
	text-underline-offset: 3px;
}

.tod-price__system {
	margin-top: var(--wp--preset--spacing--70);
	text-align: center;
	color: var(--wp--preset--color--text-muted);
}

.tod-price__system strong {
	color: var(--wp--preset--color--contrast);
}

/* ===========================================================================
   2026-09 — STATISZTIKA-SOR, TELJES RENDSZER SOR, KARBANTARTÁSI KÁRTYÁK
   =========================================================================== */

/* A doboz egy hasáb: felül a szám és mellette a felirat, alatta a szöveg. */
@media (min-width: 782px) {
	.tod-problem__note--dark {
		grid-template-columns: minmax(0, 1fr);
	}
}

.tod-stat {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 1.25rem;
	row-gap: var(--wp--preset--spacing--30);
}

.tod-stat > * {
	margin: 0 !important;
}

.tod-price__system-icon {
	display: inline-flex;
	width: 1.25rem;
	height: 1.25rem;
	margin-right: 0.5rem;
	vertical-align: -0.2em;
	color: var(--wp--preset--color--accent);
}

.tod-price__system-icon svg,
.tod-maint__icon svg {
	width: 100%;
	height: 100%;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.75;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Karbantartás: két kis, minimál kártya ikonnal. */
.tod-maint__price {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: var(--wp--preset--spacing--40);
	align-items: center;
	min-width: 12rem;
	margin: 0;
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
	border: 1px solid var(--wp--custom--color--line-subtle);
	border-radius: var(--wp--custom--radius--sm);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--text-muted);
	transition: border-color 0.16s ease;
}

.tod-maint__price:hover {
	border-color: var(--wp--preset--color--accent);
}

.tod-maint__icon {
	display: inline-flex;
	width: 1.25rem;
	height: 1.25rem;
	color: var(--wp--preset--color--accent);
}

/* ===========================================================================
   2026-09 — STATISZTIKA-CTA (SZÁM | SZÖVEG | GOMB), KAPCSOLÓ-FELIRATOK,
   KARBANTARTÁSI KÁRTYA NÉV + ÁR
   =========================================================================== */

.tod-problem__note.tod-problem__note--dark {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--50);
	align-items: center;
	padding: var(--wp--preset--spacing--70);
	background: linear-gradient(110deg, var(--wp--preset--color--contrast) 0%, #16345a 100%);
}

@media (min-width: 900px) {
	.tod-problem__note.tod-problem__note--dark {
		grid-template-columns: auto minmax(0, 1fr) auto;
		column-gap: var(--wp--preset--spacing--70);
	}
}

.tod-problem__note--dark .tod-stat__num {
	margin: 0;
	font-size: clamp(2.75rem, 5vw, 4rem);
	font-weight: 700;
	line-height: 1.1;
	white-space: nowrap;
	color: var(--wp--preset--color--accent);
}

.tod-stat-body > *,
.tod-stat-action > * {
	margin: 0 !important;
}

.tod-stat__label {
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--base);
}

.tod-stat__facts {
	margin-top: var(--wp--preset--spacing--30) !important;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--custom--color--navy-text-muted);
}

.tod-stat-action {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
}

@media (min-width: 900px) {
	.tod-stat-action {
		align-items: flex-end;
		text-align: right;
	}
}

.tod-stat__ask {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--custom--color--navy-text-muted);
}

.tod-stat-action .wp-block-button__link {
	white-space: nowrap;
}

/* Kapcsoló-felirat állapot szerint. */
.tod-switch__on {
	display: none;
}

.tod-switch__input:checked ~ .tod-switch__text .tod-switch__on {
	display: inline;
}

.tod-switch__input:checked ~ .tod-switch__text .tod-switch__off {
	display: none;
}

/* Karbantartás: pajzs + név egy sorban, azonos magassággal; alatta az ár. */
.tod-maint__name {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.25rem;
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
}

.tod-maint__price strong {
	grid-column: 1 / -1;
	margin-top: var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--contrast);
}

/* ===========================================================================
   2026-09 — LOGÓSÁV A HERO ALJÁN
   Két azonos logócsoport fut egymás után, a mozgás a felénél ugrik vissza,
   ezért a szem nem lát vágást.
   =========================================================================== */

.tod-marquee {
	margin-top: 0;
}

.tod-marquee__label {
	margin: 0 0 var(--wp--preset--spacing--70);
	text-align: center;
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--custom--color--navy-text-muted);
}

.tod-marquee__viewport {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.tod-marquee__track {
	display: flex;
	width: max-content;
	animation: tod-marquee var(--tod-marquee-duration, 31.5s) linear infinite;
	will-change: transform;
}

.tod-marquee__group {
	display: flex;
	align-items: center;
	gap: clamp(2.5rem, 6vw, 5rem);
	padding-right: clamp(2.5rem, 6vw, 5rem);
	flex-shrink: 0;
}

.tod-marquee img {
	height: clamp(1.5rem, 2.2vw, 2rem);
	width: auto;
	max-width: 9rem;
	object-fit: contain;
	opacity: 0.75;
	filter: brightness(0) invert(1);
}

.tod-marquee:hover .tod-marquee__track {
	animation-play-state: paused;
}

@keyframes tod-marquee {
	from { transform: translateX(0); }
	to { transform: translateX(-25%); }
}

@media (prefers-reduced-motion: reduce) {
	.tod-marquee__track {
		animation: none;
	}

	.tod-marquee__viewport {
		overflow-x: auto;
	}
}

/* ===========================================================================
   2026-09 — HERO TELJES KÉPERNYŐ, LOGÓSÁV KÜLÖN, PILLE ALAKÚ GOMBOK
   =========================================================================== */

.tod-hero {
	min-height: 100svh;
}

/* Három kis mutató a gombok alatt, finom függőleges elválasztókkal. */
.tod-hero__stats {
	display: flex;
	flex-wrap: wrap;
	row-gap: var(--wp--preset--spacing--40);
	margin-top: var(--wp--preset--spacing--60);
}

.tod-hero__stat {
	padding: 0 1rem;
	border-left: 1px solid var(--wp--custom--color--navy-line);
}

.tod-hero__stat:first-child {
	padding-left: 0;
	border-left: 0;
}

.tod-hero__stat strong {
	display: block;
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--base);
}

.tod-hero__stat span {
	display: block;
	margin-top: 0.15rem;
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.4;
	color: var(--wp--custom--color--navy-text-muted);
}

/* A logósáv önálló, hajszálvonallal határolt sáv a hero alatt. */
.tod-logos {
	padding-block: var(--wp--preset--spacing--80);
	border-top: 1px solid var(--wp--custom--color--navy-line);
	border-bottom: 1px solid var(--wp--custom--color--navy-line);
}

/* Pille alakú gombok, vékony kerettel. */
.wp-block-button__link,
.wp-element-button {
	border-radius: 999px;
	font-weight: 600;
	letter-spacing: 0.01em;
}

.wp-block-button.is-style-outline > .wp-block-button__link,
.wp-block-button .wp-block-button__link.is-style-outline {
	border-width: 1px;
}

/* ===========================================================================
   2026-09 — PONTRÁCS A PROBLÉMASZAKASZ HÁTTERÉBEN
   Alaprétegként halvány pontok; a kurzor körül egy második, sötétebb réteg
   világít át rajta. A helyét a `dots.js` írja két változóba.
   =========================================================================== */

.tod-dots {
	--tod-dots-x: 50%;
	--tod-dots-y: 50%;
	--tod-dots-o: 0;

	position: relative;
	isolation: isolate;
}

.tod-dots::before,
.tod-dots::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image: radial-gradient(circle, var(--tod-dot-color) 1.5px, transparent 1.6px);
	background-size: 28px 28px;
}

.tod-dots::before {
	--tod-dot-color: rgb(12 35 64 / 0.10);
}

.tod-dots::after {
	--tod-dot-color: rgb(12 35 64 / 0.4);

	opacity: var(--tod-dots-o);
	transition: opacity 0.3s ease;
	-webkit-mask-image: radial-gradient(170px circle at var(--tod-dots-x) var(--tod-dots-y), #000 0%, transparent 70%);
	mask-image: radial-gradient(170px circle at var(--tod-dots-x) var(--tod-dots-y), #000 0%, transparent 70%);
}

@media (hover: none) {
	.tod-dots::after {
		display: none;
	}
}

/* A sötét szakaszokban a pontrács világos. */
.tod-dark.tod-dots::before {
	--tod-dot-color: rgb(255 255 255 / 0.08);
}

.tod-dark.tod-dots::after {
	--tod-dot-color: rgb(255 255 255 / 0.28);
}

/* A hero saját, kisebb belső margója (a tartalom így marad középen). */
.tod-hero {
	padding-block: var(--wp--preset--spacing--80);
}

/*
 * A folyamat három lépése önálló kártya, az árkártyák modorában: keret,
 * lekerekítés, saját háttér — nem egyetlen, vonalakkal osztott doboz.
 */
.tod-steps {
	border: 0;
	border-radius: 0;
	overflow: visible;
	gap: var(--wp--preset--spacing--50);
}

.tod-steps > .tod-step {
	padding: var(--wp--preset--spacing--70);
	border: 1px solid var(--wp--custom--color--line-subtle);
	border-radius: var(--wp--custom--radius--sm);
	background: var(--wp--preset--color--base);
}

.tod-dark .tod-steps > .tod-step {
	border-color: var(--wp--custom--color--navy-line);
	background: var(--wp--preset--color--navy-soft);
}

.tod-steps > .tod-step:hover {
	border-color: var(--wp--preset--color--accent);
	box-shadow: none;
}

/* ===========================================================================
   2026-09 — GRADIENS FELSŐ VONAL A KÁRTYÁKON
   Balról sötétkék, jobbra menta. A vonal a kártya saját felső keretén ül.
   =========================================================================== */

.tod-card,
.tod-price,
.tod-steps > .tod-step {
	position: relative;
	overflow: hidden;
}

.tod-card::before,
.tod-price::before,
.tod-steps > .tod-step::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 2px;
	background: linear-gradient(90deg, var(--wp--preset--color--contrast) 0%, var(--wp--preset--color--contrast) 50%, var(--wp--preset--color--accent) 100%);
}

/* Sötét szakaszban a vonal kékebbik vége világosabb, különben eltűnne. */
.tod-dark .tod-card::before,
.tod-dark .tod-price::before,
.tod-dark .tod-steps > .tod-step::before {
	background: linear-gradient(90deg, var(--wp--custom--color--navy-line) 0%, var(--wp--custom--color--navy-line) 50%, var(--wp--preset--color--accent) 100%);
}

/* A kártya záró sora: menta nyíl, kiemelt eredmény. */
.tod-card__note {
	margin-top: var(--wp--preset--spacing--50);
	padding-top: var(--wp--preset--spacing--50);
	border-top: 1px solid var(--wp--custom--color--line-subtle);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast);
}

.tod-card__note::before {
	content: "✓";
	margin-right: 0.5em;
	color: var(--wp--preset--color--accent);
}

.tod-dark .tod-card__note {
	border-top-color: var(--wp--custom--color--navy-line);
}

/* Az előnykártyák sorai közösek: a leírás és az elválasztó egy vonalban. */
.tod-card:has(.tod-card__note) {
	display: grid;
	grid-template-rows: subgrid;
	grid-row: span 4;
	row-gap: 0;
	align-content: start;
}

.tod-card:has(.tod-card__note) > .tod-card__icon { grid-row: 1; }
.tod-card:has(.tod-card__note) > .wp-block-heading { grid-row: 2; }
.tod-card:has(.tod-card__note) > p:not(.tod-card__note) { grid-row: 3; }
.tod-card:has(.tod-card__note) > .tod-card__note { grid-row: 4; align-self: end; }

/* ===========================================================================
   2026-09 — ÁRAK: KÉT KÁRTYA
   =========================================================================== */

.tod-price__eyebrow {
	margin: 0 0 var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-muted);
}

.tod-price__amount {
	margin: var(--wp--preset--spacing--50) 0 0;
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 700;
	line-height: 1.2;
	color: var(--wp--preset--color--contrast);
}

.tod-price__meta {
	margin: 0.25rem 0 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-muted);
}

.tod-price__seats {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: var(--wp--preset--spacing--50) 0 var(--wp--preset--spacing--50);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast);
}

.tod-price__seats::before {
	content: "";
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
}

.tod-price-note {
	margin-top: var(--wp--preset--spacing--70);
	padding: var(--wp--preset--spacing--70);
	border: 1px solid var(--wp--custom--color--line-subtle);
	border-radius: var(--wp--custom--radius--sm);
	background: var(--wp--preset--color--surface);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-muted);
}

.tod-price-note > * {
	margin-block: 0;
}

.tod-price-note > * + * {
	margin-top: var(--wp--preset--spacing--40);
}

.tod-price-note strong {
	color: var(--wp--preset--color--contrast);
}

/* ===========================================================================
   2026-09 — ÁRKÁRTYÁK: KÖZÖS SOROK, TELJES SZÉLESSÉGŰ GOMB
   A két kártya ugyanazokat a sorokat használja (címke, név, ár, megjegyzés,
   gomb, szabad helyek, lista), így minden elem egy vonalban áll — akkor is,
   ha az egyik kártyán valamelyik sor üres.
   =========================================================================== */

.tod-price {
	display: grid;
	grid-template-rows: subgrid;
	grid-row: span 8;
	row-gap: 0;
	align-content: start;
	padding: var(--wp--preset--spacing--60);
}

.tod-price > .tod-price__flag { grid-row: 1; }
.tod-price > .tod-price__eyebrow { grid-row: 2; }
.tod-price > .wp-block-heading { grid-row: 3; }
.tod-price > .tod-price__amount { grid-row: 4; }
.tod-price > .tod-price__meta { grid-row: 5; }
.tod-price > .tod-price__seats { grid-row: 6; }
.tod-price > .tod-price__foot { grid-row: 7; margin-top: var(--wp--preset--spacing--50); }
.tod-price > .tod-price__list { grid-row: 8; }

.tod-price:not(:has(.tod-price__flag))::after {
	content: "";
	grid-row: 1;
}

.tod-price__seats--empty {
	min-height: 0;
	margin: 0;
}

.tod-price__foot .wp-block-button {
	width: 100%;
}

.tod-price__foot .wp-block-button__link {
	width: 100%;
	text-align: center;
}

/* ===========================================================================
   2026-09 — LEKEREKÍTÉS, ÁRKÁRTYA FEJLÉC, KALKULÁTOR
   =========================================================================== */

.tod-card,
.tod-price,
.tod-steps > .tod-step,
.tod-work,
.tod-post-grid > li,
.tod-problem__note--dark,
.tod-price-cta,
.tod-price-note,
.tod-calc,
.tod-project,
.tod-usecase,
.tod-guarantee {
	border-radius: 8px;
}

.tod-work__media img,
.tod-post-card__image,
.tod-post-card__image img {
	border-radius: 8px;
}

.tod-work--flush .tod-work__media img {
	border-radius: 0 !important;
}

/* Az árkártya fejléce: balra a csomag neve, jobbra a címke, egy sorban. */
.tod-price {
	grid-template-columns: 1fr auto;
}

.tod-price > * {
	grid-column: 1 / -1;
}

.tod-price > .tod-price__eyebrow {
	grid-row: 1;
	grid-column: 1;
	margin-bottom: var(--wp--preset--spacing--50);
	align-self: center;
}

.tod-price > .tod-price__flag {
	grid-row: 1;
	grid-column: 2;
	align-self: center;
	margin: 0 0 var(--wp--preset--spacing--50);
}

/* Kalkulátor */
.tod-calc {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	margin-top: var(--wp--preset--spacing--80);
	border: 1px solid var(--wp--custom--color--line-subtle);
	overflow: hidden;
	background: var(--wp--preset--color--base);
}

@media (max-width: 781px) {
	.tod-calc {
		grid-template-columns: minmax(0, 1fr);
	}
}

.tod-calc__inputs {
	padding: var(--wp--preset--spacing--70);
}

.tod-calc__field + .tod-calc__field {
	margin-top: var(--wp--preset--spacing--70);
}

.tod-calc__top {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--40);
	margin-bottom: var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--small);
}

.tod-calc__top span {
	font-weight: 700;
	color: var(--wp--preset--color--accent-text);
	white-space: nowrap;
}

.tod-calc input[type="range"] {
	width: 100%;
	height: 4px;
	appearance: none;
	-webkit-appearance: none;
	border-radius: 999px;
	background: var(--wp--custom--color--line-subtle);
}

.tod-calc input[type="range"]::-webkit-slider-thumb {
	appearance: none;
	-webkit-appearance: none;
	width: 20px;
	height: 20px;
	border: 3px solid var(--wp--preset--color--base);
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
	box-shadow: 0 0 0 1px var(--wp--custom--color--line-strong);
	cursor: pointer;
}

.tod-calc input[type="range"]::-moz-range-thumb {
	width: 20px;
	height: 20px;
	border: 3px solid var(--wp--preset--color--base);
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
	cursor: pointer;
}

.tod-calc__hint {
	margin: var(--wp--preset--spacing--30) 0 0;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--text-muted);
}

.tod-calc__results {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--wp--preset--spacing--60);
	padding: var(--wp--preset--spacing--70);
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

.tod-calc__results > * {
	margin: 0;
}

.tod-calc__hero {
	padding-bottom: var(--wp--preset--spacing--60);
	border-bottom: 1px solid var(--wp--custom--color--navy-line);
}

.tod-calc__label {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--custom--color--navy-text-muted);
}

.tod-calc__big {
	margin: var(--wp--preset--spacing--30) 0 0;
	font-size: clamp(2rem, 4vw, 2.75rem);
	font-weight: 700;
	line-height: 1.15;
	color: var(--wp--preset--color--accent);
}

.tod-calc__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--40);
	padding-bottom: var(--wp--preset--spacing--50);
	border-bottom: 1px solid var(--wp--custom--color--navy-line);
}

.tod-calc__value {
	font-weight: 700;
	white-space: nowrap;
}

.tod-calc__compare {
	padding: var(--wp--preset--spacing--50);
	border: 1px solid var(--wp--custom--color--navy-line);
	border-radius: 8px;
	background: rgb(255 255 255 / 0.04);
}

.tod-calc__compare-top {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.25rem 0.75rem;
	padding-bottom: var(--wp--preset--spacing--40);
	margin-bottom: var(--wp--preset--spacing--40);
	border-bottom: 1px solid var(--wp--custom--color--navy-line);
}

.tod-calc__price {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	white-space: nowrap;
}

.tod-calc__result {
	margin: 0;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
}

.tod-calc__compare.is-retainer {
	border-color: rgb(0 200 150 / 0.35);
	background: rgb(0 200 150 / 0.1);
}

.tod-calc__compare.is-retainer .tod-calc__result {
	color: var(--wp--preset--color--accent);
}

.tod-calc__verdict {
	margin: var(--wp--preset--spacing--30) 0 0;
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.5;
	color: var(--wp--custom--color--navy-text-muted);
}

.tod-calc__disclaimer {
	margin-top: var(--wp--preset--spacing--50);
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--text-muted);
}

/* A szabad helyek jelölése kis keretes pirulaként, a gomb fölött. */
.tod-price__seats {
	justify-self: start;
	margin: var(--wp--preset--spacing--50) 0 0;
	padding: 0.375rem 0.75rem;
	border: 1px solid rgb(0 200 150 / 0.4);
	border-radius: 999px;
	background: rgb(0 200 150 / 0.08);
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--contrast);
}

/* Kalkulátor: szöveg balra, a doboz mellette, szűkebben. */
.tod-calc-layout {
	display: grid;
	gap: var(--wp--preset--spacing--80);
	align-items: center;
}

@media (min-width: 1000px) {
	.tod-calc-layout {
		grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
	}
}

.tod-calc-intro > * {
	margin-block: 0;
}

.tod-calc-intro > * + * {
	margin-top: var(--wp--preset--spacing--50);
}

.tod-calc-intro .tod-lead {
	max-width: 42ch;
}

.tod-calc {
	grid-template-columns: minmax(0, 1fr);
	margin-top: 0;
}

.tod-calc__inputs,
.tod-calc__results {
	padding: var(--wp--preset--spacing--60);
}

.tod-calc__results {
	gap: var(--wp--preset--spacing--50);
}

/* Horgonyos szakaszok: a fejléc ne takarja el a tetejüket. */
section[id] {
	scroll-margin-top: var(--wp--custom--layout--scroll-offset);
}

/* Kalkulátor: kompaktabb, hogy elférjen a szöveg mellett. */
.tod-calc__inputs,
.tod-calc__results {
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
}

.tod-calc__field + .tod-calc__field {
	margin-top: var(--wp--preset--spacing--50);
}

.tod-calc__top {
	font-size: var(--wp--preset--font-size--x-small);
	margin-bottom: var(--wp--preset--spacing--30);
}

.tod-calc__results {
	gap: var(--wp--preset--spacing--40);
}

.tod-calc__hero {
	padding-bottom: var(--wp--preset--spacing--50);
}

.tod-calc__big {
	font-size: clamp(1.75rem, 2.6vw, 2.25rem);
}

.tod-calc__row {
	padding-bottom: var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--small);
}

.tod-calc__result {
	font-size: var(--wp--preset--font-size--medium);
}

/* A „külön ember” összevetés a Partnerség kártya alján. */
.tod-price__hire {
	grid-row: 9;
	margin-top: var(--wp--preset--spacing--60);
	padding-top: var(--wp--preset--spacing--50);
	border-top: 1px solid var(--wp--custom--color--line-subtle);
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.5;
	color: var(--wp--preset--color--text-muted);
}

.tod-price__hire > * {
	margin-block: 0;
}

.tod-price__hire > * + * {
	margin-top: var(--wp--preset--spacing--30);
}

.tod-price__hire strong {
	color: var(--wp--preset--color--contrast);
}

.tod-price {
	grid-row: span 9;
}

/* A lábléc gombja ne törjön ketté. */
.tod-footer .wp-block-button__link {
	white-space: nowrap;
}

/* A közös záró CTA jelölői a gomb alatt. */
.tod-cta__meta {
	list-style: none;
	padding-left: 0;
	margin-bottom: 0;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--custom--color--navy-text-muted);
}

.tod-cta__meta li::marker {
	content: "";
}

.tod-cta__meta li::before {
	content: "✓";
	margin-right: 0.5em;
	color: var(--wp--preset--color--accent);
}

/* ===========================================================================
   2026-09 — ZÁRÓ CTA A BELSŐ OLDALAKON
   A főoldalon teljes szélességű sáv marad; máshol a cikk szövegszélességéhez
   igazodó kártya, hogy ne törje ketté az olvasás ritmusát.
   =========================================================================== */

body.single .tod-cta {
	margin-top: var(--wp--preset--spacing--90);
	padding-block: 0;
	background: transparent !important;
}

body.single .tod-cta::before,
body.single .tod-cta::after {
	content: none;
}

body.single .tod-cta > .wp-block-group {
	margin-inline: auto;
	padding: var(--wp--preset--spacing--70);
	border-radius: 8px;
	background: var(--wp--preset--color--contrast);
}

@media (min-width: 782px) {
	body.single .tod-cta > .wp-block-group {
		flex-wrap: nowrap;
	}
}

/* A kapcsolódó cikkek kártyái hoverre kiemelkednek. */
.tod-project {
	transition: border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}

/* A lábléc szlogenje szélesebb hasábban, hogy ne törjön korán. */
.tod-footer__tagline {
	max-width: 38ch;
}

/* Belső oldalakon a CTA kártya tartalma egymás alatt áll. */
body.single .tod-cta > .wp-block-group {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--60);
}

body.single .tod-cta .tod-cta__actions {
	width: 100%;
}

body.single .tod-cta .wp-block-button__link {
	white-space: nowrap;
}

/* A CTA pipái egy sorban állnak, és csak szűk képernyőn törnek. */
.tod-cta__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--60);
}

.tod-cta__meta li {
	margin: 0;
}

/* A logók fix magasságúak, hogy a betöltésük ne mozdítsa el a sort. */
.tod-marquee img {
	flex: 0 0 auto;
}

/* Telefonon még ennél is gyorsabb. */
@media (max-width: 781px) {
	.tod-marquee__track {
		--tod-marquee-duration: 29s;
	}
}

/* A kártyaszöveg záró „Extra” sora. */
.tod-card__extra {
	display: block;
	margin-top: var(--wp--preset--spacing--40);
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
}

.tod-dark .tod-card__extra {
	color: var(--wp--preset--color--base);
}

/* A „+” a kártyák záró sorában. */
.tod-card__extra strong {
	color: var(--wp--preset--color--accent);
}