/* ============================================================================
   slides-04.css — MIÉRT MI (PROI + díjak) → AI (4 termék) → ZÁRÁS
   ----------------------------------------------------------------------------
   Owns: site/slides/04-ai-zaras.html only. Namespace: s04-* (no collisions).
   Depends on shared tokens/components from site/css/components.css (c-*) —
   loaded before this file. Follows site/DIA-SPEC.md: 1 dia = 1 screen,
   height:100svh, overflow:hidden, never crops content (internal scroll is the
   safety valve, never a hard clip), --content-w / --nav-h shared contract.
   ============================================================================ */

:root {
  --content-w: 1180px;
  --nav-h: 72px;
}

/* ── dia base contract (DIA-SPEC rules 1, 3, 4) ─────────────────────────── */

#slide-miert-mi,
#slide-proi,
#slide-dijak,
#slide-ai-opener,
#slide-ai-megoldasok,
#slide-zaras {
  /* FONTOS (2026-08-14): `position` itt TILOS. Az id-választó felülírta a
     slides-base.css `position: absolute; inset: 0` keretét, ettől a 04-es blokk
     kilenc diája egymás ALÁ csúszott a képernyőn kívülre. */
  height: 100svh;
  min-height: 100svh;
  max-height: 100svh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.s04-chapter .slide__inner,
.s04-proi .slide__inner,
.s04-awards-slide .slide__inner,
.s04-ailab .slide__inner,
.s04-closing .slide__inner {
  width: 100%;
  max-width: var(--content-w);
  margin-inline: auto;
  padding-inline: clamp(24px, 4vw, 64px);
  padding-top: calc(var(--nav-h) + 32px);
  padding-bottom: clamp(20px, 3.4vh, 36px);
  box-sizing: border-box;
  max-height: 100%;
}

.s04-kicker {
  margin: 0 0 10px;
  color: var(--c-accent, #93d14f);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* Az AI-dia belső sávja NYÚJTVA tölti ki a menü és a lapozó közötti sávot: a
   négy sor pontosan ismeri a rendelkezésre álló helyet, és a nyitott sor
   ahhoz tud igazodni. Az `align-self` a gyerekre erősebb, mint a szülő
   `align-items: center !important`-je (elrendezes.css) — nem kell !important. */
#slide-ai-megoldasok {
  align-items: stretch;
}

/* MIÉRT (2026-08-14): a menü alatti helyet KÉTSZER tartottuk fenn — egyszer a
   közös `.slide` padding-topjában (nav-h + 16..32px), majd még egyszer itt, a
   belső sávon (nav-h + 32px). 900px-es képernyőn ez 192px, a magasság 21%-a,
   üresen. A nyitott kártya emiatt 48px-szel lelógott.
   A `.slide` már elszámolta a menüt, itt csak a levegő marad. */
.s04-ailab .slide__inner {
  padding-top: 0;
}

/* ============================================================================
   1 & 4 · chapter openers — MIÉRT MI? / AI
   ============================================================================ */

.s04-chapter .slide__inner {
  display: flex;
  align-items: center;
  padding-top: 0; /* the chapter card itself carries the nav offset via margin */
}

/* MÉRT HIBA (user képernyőképe, 2026-08-14): a kicker a panel FELSŐ ÉLÉN ült,
   félig kilógva — "le van vágva a teteje". Oka a negatív felső margó
   (`margin-top: calc(var(--nav-h) * -1)`), ami a régi, FELÜL TAPADÓ elrendezésben
   emelte középre a panelt. Mióta az elrendezes.css a menü és a lapozó közötti
   sáv közepére teszi a tartalmat, ez a negatív margó csak kitolja a panelből.
   Nulla margó + rendes belső felső margó: a kicker a panelen BELÜL kezdődik. */
.s04-chapter__inner {
  position: relative;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(36px, 5vw, 64px) clamp(32px, 5vw, 72px);
  text-align: center;
  border-radius: 24px;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.02) 45%, rgba(255, 255, 255, 0.05) 100%),
    rgba(9, 12, 18, 0.6);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 24px 60px rgba(4, 6, 12, 0.45);
}

.s04-chapter__inner::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 96px;
  height: 3px;
  border-radius: 3px;
  transform: translate(-50%, -50%);
  background: linear-gradient(90deg, transparent, var(--c-accent, #93d14f), transparent);
  box-shadow: 0 0 22px rgba(147, 209, 79, 0.6);
}

.s04-kicker--onchapter {
  display: inline-block;
  margin-bottom: 14px;
}

.s04-chapter__title {
  margin: 0;
  font-size: clamp(2.6rem, 7vw, 4.6rem);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: #fff;
}

/* MÉRT HIBA (user képernyőképe, 2026-08-14): az "AI" cím színátmenetes SZÖVEG
   volt (`background-clip: text`), és a képernyőképen szinte feketének látszott —
   a sötét videókockán a színátmenet halvány vége esett a betűkre. Ráadásul így a
   kontrasztja NEM MÉRHETŐ (a `color` szándékosan átlátszó), tehát a
   vizualis-csekk.py se tudja megfogni. Tömör fehér + lime izzás: minden
   videókockán olvasható, és mérhető is.
   Három osztály kell, mert az olvashatosag.css később töltődik be. */
.slide.s04-chapter--ai .s04-chapter__title {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: #ffffff;
  color: #ffffff;
  text-shadow:
    0 2px 6px rgba(0, 0, 0, 0.9),
    0 0 34px rgba(147, 209, 79, 0.45);
}

.s04-chapter__sub {
  max-width: 34ch;
  margin: 18px auto 0;
  color: var(--c-ink-dim, rgba(235, 237, 245, 0.72));
  font-size: clamp(0.95rem, 1.6vw, 1.15rem);
  line-height: 1.55;
}

/* ============================================================================
   2 · PROI
   ============================================================================ */

.s04-proi__grid {
  display: grid;
  grid-template-columns: minmax(320px, 1.08fr) minmax(280px, 0.92fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}

.s04-proi__eyebrow {
  margin: 0 0 4px;
  color: var(--c-ink-dim, rgba(235, 237, 245, 0.72));
  font-size: clamp(0.95rem, 1.6vw, 1.15rem);
  font-weight: 500;
}

.s04-proi__title {
  margin: 0 0 14px;
  font-size: clamp(1.9rem, 4.4vw, 2.9rem);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.05;
  color: #fff;
}

.s04-proi__p {
  max-width: 52ch;
  margin: 0 0 10px;
  color: var(--c-ink-dim, rgba(235, 237, 245, 0.72));
  font-size: 0.92rem;
  line-height: 1.55;
}

.s04-proi__text .c-stat-row {
  margin: 18px 0 0;
  width: 100%;
  max-width: 44rem;
  margin-inline: 0;
  gap: 14px;
}

.s04-proi__text .c-stat {
  padding: 18px 16px 16px;
}

.s04-proi__text .c-stat--hero .c-stat__value {
  font-size: clamp(2.1rem, 5vw, 3.1rem);
}

.s04-proi__media {
  position: relative;
}

.s04-proi__mapfig {
  margin: 0;
  border-radius: var(--c-radius, 20px);
  overflow: hidden;
  border: 1px solid var(--c-glass-line, rgba(255, 255, 255, 0.14));
  box-shadow: var(--c-shadow, 0 12px 40px rgba(0, 0, 0, 0.35));
  aspect-ratio: 4 / 3;
}

.s04-proi__mapfig img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.55) brightness(1.05);
}

.s04-proi__logoplate {
  position: absolute;
  right: -14px;
  bottom: -18px;
  width: min(190px, 42%);
  padding: 14px 18px;
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.97), rgba(235, 237, 245, 0.9));
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 16px 34px rgba(4, 6, 12, 0.4);
}

.s04-proi__logoplate img {
  width: 100%;
  height: auto;
  display: block;
}

/* ============================================================================
   3 · DÍJAK
   ============================================================================ */

.s04-awards-slide__inner {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.s04-awards-slide__head {
  text-align: center;
}

.s04-awards-slide__title {
  margin: 0;
  font-size: clamp(1.5rem, 3.2vw, 2rem);
  font-weight: 700;
  color: var(--c-ink-dim, rgba(235, 237, 245, 0.72));
  line-height: 1.25;
}

.s04-awards-slide__dim {
  color: var(--c-ink-faint, rgba(235, 237, 245, 0.45));
}

.s04-awards-slide__title-b {
  display: block;
  margin-top: 2px;
  font-size: clamp(2rem, 4.6vw, 3rem);
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.015em;
}

/* ── A TELJES DÍJLISTA, HÁROM HASÁBBAN ─────────────────────────────────────
   User, 2026-08-18: „a díjak slideon a képek nem kellenek, de díjakból az összes
   díjunk kellene." A régi 5fr/7fr rács a fotókhoz készült; fotó nélkül nincs
   értelme. Helyette EGY üveg-plakett (a `c-awards__list` komponens: lime bal él,
   ✦ jelölő) három hasábbal, öt csoportban — 28 tétel.

   A hasábok NEM `columns`-szal készülnek: a többhasábos folyam a csoportokat
   elvághatná a hasáb alján (címsor az egyik, tételek a másik hasábban). Három
   KÉZI oszlop determinisztikus: minden képernyőméreten ugyanaz a tördelés.
   Az oszlopok kiegyensúlyozva: 8 tétel · 11 tétel (3 csoport) · 9 tétel.

   MÉRETEZÉS: a fejlécen kívül ~390 px marad 768 px magas ablakban, ezért a
   tételek a KÖTELEZŐ betűskála alsó fokán állnak (--t-apro, 13,1 px — a
   VIZUALIS-SZABALYOK 13 px-es alsó korlátja), szoros sorközzel. */

.s04-awards-slide .s04-awards__plate {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 0 clamp(18px, 2.2vw, 30px);
  padding: clamp(12px, 1.8vh, 18px) clamp(16px, 1.8vw, 24px);
}

.s04-awards-slide .s04-awards__col {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.2vh, 14px);
  min-width: 0;
}

.s04-awards-slide .s04-awards__group {
  min-width: 0;
}

/* csoportcím: kis, ritkított lime kicker — ugyanaz a nyelv, mint az .s04-kicker */
.s04-awards-slide .s04-awards__gtitle {
  margin: 0 0 3px;
  font-size: var(--t-apro, 0.82rem);
  font-weight: 800;
  letter-spacing: 0.14em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--c-accent, #93d14f);
}

.s04-awards-slide .s04-awards__items {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* A tétel: a ✦ SAJÁT oszlopban áll, ezért a két sorba törő tételek szövege
   függő behúzással igazodik — nem csúszik a jelölő alá. (A komponens
   `inline-flex`-e a jelölőt a wrappelt sor KÖZEPÉRE tette volna.) */
.s04-awards-slide .s04-awards__plate .c-awards__chip {
  display: grid;
  grid-template-columns: 11px minmax(0, 1fr);
  align-items: start;
  gap: 0 7px;
  padding: 3px 0;
  /* 14,1 px 768 px magas ablakban (a 13 px-es alsó korlát FÖLÖTT), 15,9 px
     1080-on. A `vh`-ra kötött skála a MAGASSÁGgal nő — az szab határt, nem a
     szélesség. Mind a négy célméreten mérve: nulla kilógás. */
  font-size: clamp(0.88rem, 0.6rem + 0.58vh, 1rem);
  font-weight: 600;
  line-height: 1.34;
  letter-spacing: 0.005em;
  white-space: normal;
}

.s04-awards-slide .s04-awards__plate .c-awards__chip::before {
  line-height: 1.34;
}

/* A --gold módosító támogatott, de ezen a díjlistán az „Arany” fokozatot
   szöveg jelzi; a sorok vizuális súlya azonos. */
.s04-awards-slide .s04-awards__plate .c-awards__chip--gold {
  font-weight: 800;
}

.s04-awards-slide .s04-awards__more {
  grid-column: 1 / -1;
  margin: clamp(7px, 1vh, 11px) 0 0;
  padding-top: clamp(6px, 0.8vh, 9px);
  border-top: 1px solid rgba(235, 237, 245, 0.14);
  color: rgba(235, 237, 245, 0.76);
  font-size: var(--t-apro, 0.82rem);
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: 0.035em;
  text-align: center;
}

/* ============================================================================
   5 · AI-MEGOLDÁSOK — MIND A NÉGY TERMÉK EGY DIÁN (harmonika)
   ----------------------------------------------------------------------------
   User, 2026-08-14: "a 4 ai pedig egy oldalra mehet… ne legyen mind egy külön
   rész" → "az első alá legyen ott az összes, jelölve hogy kattinthatóak".
   Korábban négy dia volt, mindegyiken EGYETLEN csukott kártya és 70% üres hely.
   Most egy dia négy sorral: mind a négy termék címe + ígérete egyszerre látszik,
   és a kattintás HELYBEN bontja ki a részleteket.

   BETŰSKÁLA: ez a dia SZIGORÚAN az olvashatosag.css öt fokozatát használja
   (--t-apro 13,1px a legkisebb). Korábban 10,6–12,6px-es betűk is voltak itt,
   a mérés hat "TÚL APRÓ BETŰ" hibát írt diánként. Négy fokozat van használatban
   (13,1 / 15,2 / 17,3 / 25,6px), így a tipográfia is következetes.
   ============================================================================ */

/* ERŐSEBB SÖTÉTÍTÉS (user, 2026-08-14: "olvashatatlan, nagyobb sötétítés kell
   itt"). A videó világos kockái elnyelték a szöveget. Ez a réteg a dia teljes
   felületét sötétíti, a tartalom alatt — a `.slide` már `position: absolute`
   (slides-base.css), ezért NEM kell (és tilos is) pozíciót adni neki. */
#slide-ai-megoldasok::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    128% 96% at 50% 46%,
    rgba(5, 7, 12, 0.82) 0%,
    rgba(5, 7, 12, 0.62) 62%,
    rgba(5, 7, 12, 0.34) 100%
  );
}

/* A belső sáv a menü és a lapozó közötti TELJES sávot kitölti, hogy a négy sor
   ismerje a rendelkezésre álló helyet. Az `align-self` a gyerekre erősebb, mint
   az elrendezes.css `align-items: center !important`-je a szülőn. */
.slide.s04-ailab .slide__inner {
  position: relative;   /* a sötétítő réteg FÖLÉ kerüljön a tartalom */
  z-index: 1;
  align-self: stretch;
  justify-self: stretch;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin-block: 0;
  /* 10px volt, a nyitott kártya kerete és ragyogása összeért a címmel; a stack alatt 24–30px tartalék van. */
  gap: clamp(14px, 2.2vh, 24px);
}

/* ── fejléc: balra a fejezetjelölő + cím, jobbra a KATTINTHATÓSÁG szava ──── */
.s04-ailab__head {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

.s04-ailab__headtext .s04-kicker {
  margin-bottom: 3px;
}

.s04-ailab__title {
  margin: 0;
  font-size: var(--t-cim, 1.6rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: #fff;
}

.s04-ailab__hint {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 3px;
  color: var(--c-accent-hi, #a1e657);
  font-size: var(--t-apro, 0.82rem);
  font-weight: 700;
}

/* ugyanaz a "+" jel, mint a sorokon — a fejlécben ez MAGYARÁZZA a jelölést */
.s04-ailab__hintplus {
  position: relative;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid var(--c-accent, #93d14f);
  background: rgba(147, 209, 79, 0.12);
}

.s04-ailab__hintplus::before,
.s04-ailab__hintplus::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--c-accent-hi, #a1e657);
  transform: translate(-50%, -50%);
}

.s04-ailab__hintplus::before { width: 9px; height: 2px; }
.s04-ailab__hintplus::after  { width: 2px; height: 9px; }

/* ── a négy sor ──────────────────────────────────────────────────────────
   A stack a maradék helyet kapja, és a tartalmát KÖZÉPRE zárja: így csukott
   állapotban sincs egyoldalas lyuk, nyitottan pedig a nyitott sor a
   képernyő közepén marad. `space-between` TILOS (VIZUALIS-SZABALYOK 3.). */
.s04-ailab__stack {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(8px, 1.1vh, 12px);
}

/* Egy sor = egy <details>. */
.s04-card {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;   /* csukva a sor közepén ül a cím, nem a tetején */
  min-height: 0;
  border-radius: var(--c-radius, 20px);
  /* SÖTÉTÍTÉS (user, 2026-08-14): a korábbi ~0,38 fedettségű üveg alatt átütött
     a videó, a szöveg olvashatatlan volt. 0,88 alfa + elmosás: a videó már csak
     sejlik, a szöveg minden kockán tiszta. */
  background:
    linear-gradient(
      160deg,
      rgba(255, 255, 255, 0.07),
      rgba(255, 255, 255, 0.015) 46%,
      rgba(255, 255, 255, 0.045) 100%
    ),
    rgba(7, 10, 16, 0.88);
  -webkit-backdrop-filter: blur(var(--c-blur, 16px)) saturate(140%);
  backdrop-filter: blur(var(--c-blur, 16px)) saturate(140%);
  /* KATTINTHATÓSÁG-JELZÉS (UI-DONTESEK): lime keret MINDEN soron, mert
     mindegyik nyitható — nem csak az elsőn. */
  border: 1px solid rgba(147, 209, 79, 0.55);
  box-shadow: var(--c-shadow, none), 0 0 0 rgba(147, 209, 79, 0);
  overflow: hidden;
  transition: box-shadow 0.35s ease, transform 0.35s ease, border-color 0.35s ease;
}

.s04-card:hover {
  border-color: var(--c-accent, #93d14f);
  box-shadow: var(--c-shadow, none), 0 0 30px rgba(147, 209, 79, 0.22);
  transform: translateY(-2px);
}

.s04-card[open] {
  border-color: var(--c-accent, #93d14f);
  box-shadow: var(--c-shadow, none), 0 0 34px rgba(147, 209, 79, 0.18);
  transform: none;
}

/* MÉRT HIBA (2026-08-14): a CSUKOTT sor törzse a Chrome-ban megtartja a
   layout-dobozát (::details-content + content-visibility), ezért a mérő
   "alul kilóg 170px"-et jelzett olyan tartalomra, ami nem is látszik.
   Csukva tehát tényleg nincs doboza. */
.s04-card:not([open]) .s04-card__body {
  display: none;
}

/* ALAPÁLLAPOT — user, 2026-08-14: "ne legyen semmi nyitva, csak legyen jelzés,
   hogy kattintson". Ilyenkor a négy sor EGYENLŐEN osztozik a dián, de van felső
   korlát: korlát nélkül 1080px-en 187px magas, majdnem üres dobozok lettek. */
.s04-ailab__stack:not(:has(.s04-card[open])) .s04-card {
  flex: 1 1 0;
  max-height: clamp(92px, 14vh, 148px);
}

/* Ha EGY sor nyitva van, a másik három összehúzódik, és a sorköz is szűkül —
   így a nyitott sor részletei 900px magas képernyőn is kiférnek, görgetés
   nélkül (mérve: a négy sor együtt 600px a 597px-es sávban). */
.s04-ailab__stack:has(.s04-card[open]) {
  gap: clamp(6px, 0.9vh, 10px);
}

.s04-ailab__stack:has(.s04-card[open]) .s04-card:not([open]) .s04-card__summary {
  padding-block: clamp(9px, 1.2vh, 13px);
}

/* a kattintható sor maga */
.s04-card__summary {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.6vw, 20px);
  padding: clamp(10px, 1.5vh, 15px) clamp(18px, 2.4vw, 28px);
  cursor: pointer;
  list-style: none;
}

.s04-card__summary::-webkit-details-marker {
  display: none;
}

/* fókuszgyűrű: billentyűzettel is látszik, melyik soron áll (Enter nyitja) */
.s04-card__summary:focus-visible {
  outline: 3px solid var(--c-accent-hi, #a1e657);
  outline-offset: -3px;
  border-radius: var(--c-radius, 20px);
}

.s04-card__no {
  flex: 0 0 auto;
  color: var(--c-accent, #93d14f);
  font-size: var(--t-apro, 0.82rem);
  font-weight: 800;
  letter-spacing: 0.14em;
  font-variant-numeric: tabular-nums;
}

.s04-card__headtext {
  flex: 1 1 auto;
  min-width: 0;
}

.s04-card__title {
  display: block;
  margin: 0 0 2px;
  font-size: var(--t-emelt, 1.08rem);
  font-weight: 800;
  line-height: 1.16;
  letter-spacing: -0.01em;
  color: #fff;
}

.s04-card__value {
  display: block;
  margin: 0;
  color: var(--c-accent-hi, #a1e657);
  font-size: var(--t-alap, 0.95rem);
  font-weight: 600;
  line-height: 1.3;
}

/* A kattinthatóság jelzése SZÓVAL is, nem csak jellel: "Részletek +" — nyitva
   "Bezárás ×". Így a vetítővásznon is egyértelmű, hogy a sor megnyitható. */
.s04-card__cta {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--c-accent-hi, #a1e657);
  font-size: var(--t-apro, 0.82rem);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.s04-card:not([open]) .s04-card__ctalabel--nyitott,
.s04-card[open] .s04-card__ctalabel--zart {
  display: none;
}

/* "+" jelölő: nyitva 45 fokkal elfordul (× lesz belőle) — a zárás módja is látszik */
.s04-card__plus {
  position: relative;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--c-accent, #93d14f);
  background: rgba(147, 209, 79, 0.1);
  box-shadow: 0 0 16px rgba(147, 209, 79, 0.22);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), background 0.3s ease;
}

.s04-card__plus::before,
.s04-card__plus::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--c-accent-hi, #a1e657);
  transform: translate(-50%, -50%);
}

.s04-card__plus::before { width: 13px; height: 2px; }
.s04-card__plus::after  { width: 2px; height: 13px; }

.s04-card[open] > .s04-card__summary .s04-card__plus {
  transform: rotate(135deg);
  background: rgba(147, 209, 79, 0.22);
}

/* ── a nyitott sor törzse: KÉT HASÁB ──────────────────────────────────────
   Balra a bevezető + a bizalmi elem, jobbra a "Működés" lépései.
   MIÉRT KÉT HASÁB: egy hasábban a leghosszabb termék (5 lépés + bevezető)
   ~560px magas lenne, a három csukott sor mellett ez 900px-es képernyőn nem fér
   ki. Két hasábban a legmagasabb nyitott törzs is 250–300px.
   Az overflow-y csak VÉSZSZELEP (a görgetést a dia-motor amúgy is lapozásnak
   veszi) — a mért állapot: egyik terméknél sincs görgetés. */
.s04-card__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: grid;
  grid-template-columns: minmax(220px, 0.9fr) minmax(0, 1.55fr);
  gap: clamp(16px, 2vw, 30px);
  align-content: center;
  padding: clamp(10px, 1.4vh, 14px) clamp(18px, 2.4vw, 28px) clamp(12px, 1.6vh, 16px);
  border-top: 1px solid var(--c-glass-line-2, rgba(255, 255, 255, 0.08));
  scrollbar-color: rgba(161, 230, 87, 0.55) rgba(235, 237, 245, 0.06);
  scrollbar-width: thin;
}

.s04-card__body::-webkit-scrollbar {
  width: 5px;
}

.s04-card__body::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(161, 230, 87, 0.55);
}

.s04-card__intro {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.s04-card__lead {
  margin: 0;
  color: var(--c-ink-dim, rgba(235, 237, 245, 0.88));
  font-size: var(--t-alap, 0.95rem);
  line-height: 1.5;
}

.s04-card__subhead {
  margin: 0 0 8px;
  color: var(--c-accent, #93d14f);
  font-size: var(--t-apro, 0.82rem);
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* A lépések KÉT OSZLOPBAN folynak (CSS-hasábok, nem rács): a hasábok maguktól
   kiegyenlítődnek, így nem keletkezik üres sor a rövidebb lépések alatt. */
.s04-steps {
  width: 100%;
  margin: 0;
  columns: 2;
  column-gap: clamp(14px, 1.6vw, 24px);
}

.s04-steps .c-timeline__step {
  break-inside: avoid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  padding-bottom: 10px;
}

/* a lépéseket összekötő szál egy hasábtörésnél félbevágódna — hasábos
   elrendezésben inkább nincs, a sorszámozott golyók viszik a sorrendet */
.s04-steps .c-timeline__step::before {
  display: none;
}

.s04-steps .c-timeline__marker {
  width: 28px;
  height: 28px;
  font-size: var(--t-apro, 0.82rem);
}

.s04-steps .c-timeline__card {
  padding: 5px 10px;
}

.s04-steps .c-timeline__title {
  font-size: var(--t-alap, 0.95rem);
  line-height: 1.25;
  margin: 0 0 2px;
}

.s04-steps .c-timeline__text {
  font-size: var(--t-apro, 0.82rem);
  line-height: 1.45;
}

/* ── bizalmi elemek — külön jelöléssel (gambling-sector trust signal) ──── */
/* MÉRVE (2026-08-14): 12,6px volt, a mérő "TÚL APRÓ BETŰ"-t jelzett rá.
   A skála legkisebb fokozata (13,1px) az alsó határ. */
.s04-trust {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0;
  color: #eafbd6;
  font-size: var(--t-apro, 0.82rem);
  font-weight: 600;
  line-height: 1.45;
}

.s04-trust__mark {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: var(--c-accent, #93d14f);
  color: #11131c;
  font-size: var(--t-apro, 0.82rem);
  font-weight: 900;
  line-height: 1;
}

.s04-trust--inline {
  margin-top: 4px;
  padding: 6px 9px;
  border-radius: 10px;
  background: rgba(147, 209, 79, 0.1);
  border: 1px solid rgba(147, 209, 79, 0.3);
}

.s04-trust--block {
  padding: 8px 12px;
  border-radius: var(--c-radius-sm, 12px);
  background: rgba(147, 209, 79, 0.1);
  border-left: 3px solid var(--c-accent, #93d14f);
}

.s04-trust--value .s04-trust__mark {
  background: var(--c-gold, #fed901);
}

/* ============================================================================
   9 · ZÁRÁS
   ============================================================================ */

.s04-closing {
  flex-direction: column;
  align-items: stretch;
}

/* MIÉRT (2026-08-14): a `Köszönjük.` sáv a dia legalján ül, a lapozó pedig
   fix pozícióban, szintén középen alul (.dia-nav, bottom ~23px, ~40px magas).
   A kettő pontosan egymásra került — a záró gesztus olvashatatlan volt.
   Nagyobb alsó margóval a szöveg a lapozó FÖLÉ kerül.
   `.slide.s04-closing` (két osztály) kell, mert a kepek-teljes.css később
   töltődik be, és a sima `.slide { padding-bottom: 20px }` különben nyerne. */
.slide.s04-closing {
  padding-bottom: clamp(76px, 9vh, 104px);
}

.s04-closing .slide__inner {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  padding-bottom: 0;
}

/* MIÉRT A DUPLA OSZTÁLY (2026-08-14): a fenti `.s04-closing .slide__inner`
   szabály (két osztály) erősebb volt, mint a sima `.s04-closing__grid` (egy
   osztály), ezért a `display: grid` NEM érvényesült — a dia flex-oszlopként
   rendeződött, az adatok fölé/alá csúszott a fotó, és a belső sáv 80px-szel
   túlcsordult (a `Köszönjük.` sáv miatt a vége LEVÁGÓDOTT).
   A `.slide__inner.s04-closing__grid` visszaadja a tervezett két hasábot:
   balra az adatok, jobbra a fotó — így fele akkora a függőleges igény. */
.s04-closing .slide__inner.s04-closing__grid {
  display: grid;
  grid-template-columns: minmax(300px, 0.95fr) minmax(280px, 1.05fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  align-content: center;
  width: 100%;
}

.s04-closing__title {
  margin: 0 0 16px;
  font-size: clamp(1.8rem, 4vw, 2.7rem);
  font-weight: 800;
  letter-spacing: -0.015em;
  color: #fff;
}

.s04-closing__facts {
  margin: 0;
  display: grid;
  gap: 9px;
}

.s04-closing__fact {
  display: grid;
  /* 148 → 186px: a címkék 10,9px-ről a skála legkisebb fokozatára (13,1px)
     nőttek, a leghosszabb ("ÜGYVEZETŐ IGAZGATÓK") a régi hasábban tördelt volna */
  grid-template-columns: 186px 1fr;
  gap: 12px;
  align-items: baseline;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--c-glass-line-2, rgba(255, 255, 255, 0.08));
}

/* MÉRVE (2026-08-14): 10,9px — a mérő hat "TÚL APRÓ BETŰ"-t jelzett a záródián.
   A skála öt fokozata a kötelező (olvashatosag.css), 13px alá semmi nem mehet. */
.s04-closing__fact dt {
  margin: 0;
  color: var(--c-accent, #93d14f);
  font-size: var(--t-apro, 0.82rem);
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.s04-closing__fact dd {
  margin: 0;
  color: var(--c-ink, #ebedf5);
  font-size: var(--t-alap, 0.95rem);
  line-height: 1.4;
}

.s04-closing__fact a {
  color: var(--c-accent-hi, #a1e657);
  text-decoration-color: rgba(147, 209, 79, 0.5);
  text-underline-offset: 0.2em;
}

.s04-closing__media {
  margin: 0;
  /* Mérés: 528x340 elem / 347x340 festett / 181px holt sáv. */
  width: max-content;
  max-width: 100%;
  border-radius: var(--c-radius, 20px);
  overflow: hidden;
  border: 1px solid var(--c-glass-line, rgba(255, 255, 255, 0.14));
  box-shadow: var(--c-shadow, 0 12px 40px rgba(0, 0, 0, 0.35));
  max-height: min(42vh, 340px);
}

/* A kép TELJESEN látszik (contain, a kepek-teljes.css szabálya). A magasságot
   itt adjuk meg, két osztállyal — a globális `.slide img { max-height: 30vh }`
   biztonsági korlátnál erősebben —, hogy a záródián az irodakép ne essen
   apró bélyeggé a hasáb mellett. */
.s04-closing .s04-closing__media img {
  /* Mérés: 528x340 elem / 347x340 festett / 181px holt sáv. */
  width: auto;
  height: min(42vh, 340px);
  max-width: 100%;
  display: block;
}

.s04-closing__thanks {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  /* az alsó levegőt már a .slide.s04-closing padding-bottomja adja (lapozó!) */
  padding: 14px clamp(24px, 4vw, 64px) 0;
}

/* MIÉRT KÉT OSZTÁLY (2026-08-14): a `.slide img { width:100%; height:100% }`
   (kepek-teljes.css) erősebb volt a sima `.s04-closing__mark`-nál, ezért a
   monogram 40px helyett 200px-re fújódott, a `Köszönjük.` sáv 243px-et evett a
   diából, és a fölötte lévő tartalom vége levágódott. Két osztály + !important
   nélkül is felülír. */
.s04-closing .s04-closing__mark {
  width: 40px;
  height: 40px;
  max-height: 40px;
  flex: 0 0 auto;
  object-fit: contain;
}

.s04-closing__thanks-text {
  margin: 0;
  color: #fff;
  font-size: clamp(1.3rem, 3vw, 1.9rem);
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* ============================================================================
   responsive — mobile narrow centre column
   ============================================================================ */

@media (max-width: 720px) {
  #slide-miert-mi,
  #slide-proi,
  #slide-dijak,
  #slide-ai-opener,
  #slide-ai-megoldasok,
  #slide-zaras {
    /* egy dia = egy képernyő mobilon is; a tartalom sűrűsödik, nem lóg ki */
    height: 100svh;
    min-height: 100svh;
    max-height: 100svh;
    overflow: hidden;
    padding-block: 24px;
  }

  .s04-proi__grid,
  .s04-closing__grid {
    grid-template-columns: 1fr;
  }

  .s04-proi__media {
    order: -1;
  }

  .s04-proi__logoplate {
    right: 8px;
    bottom: -14px;
    width: 120px;
    padding: 10px 14px;
  }

  /* keskeny képernyőn a három díj-hasáb egyre olvad (a plakett belül görgethető) */
  .s04-awards-slide .s04-awards__plate {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .s04-closing__fact {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .s04-card__summary {
    padding: 12px 16px;
    gap: 12px;
  }

  /* keskeny képernyőn egy hasáb: a két hasáb 220px alatt olvashatatlan lenne */
  .s04-card__body {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 12px 16px 14px;
  }

  .s04-steps {
    columns: 1;
  }

  .s04-chapter__inner {
    margin-top: 0;
    padding: 28px 22px;
  }
}

/* ============================================================================
   prefers-reduced-motion
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
  .s04-card,
  .s04-card__plus {
    transition: none;
  }
  .s04-card:hover {
    transform: none;
  }
}

/* --- NYITOTT AI-KÁRTYA RÖVID KÉPERNYŐN ------------------------------------
   Mérve 2026-08-17: nyitott kártyával a negyedik sor kicsúszott a diából és az
   `overflow:hidden` némán levágta — 1366x768-on 19–34px, 1280x720-on több.
   A helyet a CSUKOTT sorokból és a térközökből vesszük el, a nyitott kártya
   tartalmához nem nyúlunk. A mérőnk ezt nem fogja: nem nyit kártyát. */
@media (max-height: 820px) {
  .s04-ailab__stack:has(.s04-card[open]) { gap: 4px; }
  .s04-ailab__stack:has(.s04-card[open]) .s04-card:not([open]) .s04-card__summary { padding-block: 1px; }
  .s04-card[open] .s04-card__body { padding-top: 6px; padding-bottom: 6px; }
}
/* Nagyon alacsony ablakban (1280x720) ennyi sem elég: a csukott sorok alcíme
   lekerül, a sorszám és a cím marad. Mérve: mind a négy kártyánál 0px levágás. */
@media (max-height: 760px) {
  .s04-ailab__stack:has(.s04-card[open]) .s04-card:not([open]) .s04-card__value { display: none; }
}

/* ============================================================================
   KÖZTES SÁV (706–740 px magas ablak) — ENYHE sűrítés
   ----------------------------------------------------------------------------
   MÉRVE 2026-08-18: 730 px fölött minden dia tiszta, 706 px-en viszont a
   díjak-dia belső sávja 10 px-et levág (1366 és 1920 szélességen egyaránt), és
   1920x706-on a nyitott AI-kártya is 9 px-et. Ez a néhány pixel NEM indokolja a
   705 px alatti erős sűrítést — az 768/720-as ablakban láthatóan levegőtlenné
   tenné a diákat (összevetve mérve). Ezért itt csak annyit veszünk el, amennyi
   hiányzik.
   ============================================================================ */

@media (min-height: 706px) and (max-height: 740px) {
  .s04-awards-slide .s04-awards-slide__inner { gap: 12px; }

  .s04-awards-slide .s04-awards-slide__title-b {
    font-size: clamp(1.7rem, 3.6vw, 2.4rem);
  }

  .s04-awards-slide .s04-awards__plate {
    padding: 10px clamp(14px, 1.6vw, 22px);
  }

  .s04-awards-slide .s04-awards__col { gap: 8px; }
  .s04-awards-slide .s04-awards__gtitle { margin-bottom: 2px; }

  .s04-awards-slide .s04-awards__plate .c-awards__chip {
    padding: 2px 0;
    line-height: 1.28;
  }

  .s04-awards-slide .s04-awards__plate .c-awards__chip::before {
    line-height: 1.28;
  }

  .s04-ailab__stack:has(.s04-card[open]) { gap: 3px; }

  .s04-card[open] .s04-card__body {
    padding-top: 4px;
    padding-bottom: 5px;
  }

  .s04-ailab .s04-steps .c-timeline__step { padding-bottom: 6px; }
  .s04-ailab .s04-steps .c-timeline__card { padding: 3px 9px; }

  .slide.s04-ailab .s04-card__lead { line-height: 1.4 !important; }
  .slide.s04-ailab .s04-steps .c-timeline__text { line-height: 1.35 !important; }
}

/* Az alsó összegző mondat 768 px-es magasságnál még ugyanazt a mérsékelt
   sűrítést igényli, mint a 706–740 px-es díjnézet; más diát ez nem érint. */
@media (min-height: 741px) and (max-height: 820px) {
  .s04-awards-slide .s04-awards-slide__inner { gap: 12px; }
  .s04-awards-slide .s04-awards__plate {
    padding: 10px clamp(14px, 1.6vw, 22px);
  }
  .s04-awards-slide .s04-awards__col { gap: 8px; }
  .s04-awards-slide .s04-awards__gtitle { margin-bottom: 2px; }
  .s04-awards-slide .s04-awards__plate .c-awards__chip {
    padding: 2px 0;
    line-height: 1.28;
  }
  .s04-awards-slide .s04-awards__plate .c-awards__chip::before { line-height: 1.28; }
  .s04-awards-slide .s04-awards__more {
    margin-top: 6px;
    padding-top: 5px;
  }
}

/* ============================================================================
   KESKENY, DE NEM ALACSONY ABLAK — csak az AI-dia
   ----------------------------------------------------------------------------
   MÉRVE 2026-08-18: 1024 px SZÉLES ablakban a nyitott AI-kártya 706–960 px
   magasságig levágódik (768-on 30 px, 860-on 25 px), mert a kétnyelvű
   szövegoszlopok keskenyebbek és több sorba tördelnek. Ez nem magasság-, hanem
   szélességprobléma, ezért külön feltétel — a 1152 px-nél szélesebb ablakokat
   nem érinti, ott a dia amúgy is tiszta.
   ============================================================================ */

@media (max-width: 1120px) and (min-height: 706px) and (max-height: 960px) {
  .s04-ailab__stack:has(.s04-card[open]) { gap: 5px; }

  .s04-ailab__stack:has(.s04-card[open]) .s04-card:not([open]) .s04-card__summary {
    padding-block: 3px;
  }

  .s04-ailab__stack:has(.s04-card[open]) .s04-card:not([open]) .s04-card__value {
    display: none;
  }

  .s04-card[open] .s04-card__body {
    padding-top: 6px;
    padding-bottom: 7px;
  }

  .s04-ailab .s04-steps .c-timeline__step { padding-bottom: 6px; }
  .s04-ailab .s04-steps .c-timeline__card { padding: 3px 9px; }
  .s04-ailab .s04-trust--block { padding: 6px 10px; }

  .slide.s04-ailab .s04-card__lead { line-height: 1.38 !important; }
  .slide.s04-ailab .s04-steps .c-timeline__text { line-height: 1.32 !important; }
}

/* ============================================================================
   ALACSONY ABLAK — a 04-es blokk sűrítése 705 px alatt
   ----------------------------------------------------------------------------
   MÉRVE 2026-08-18 (vizualis-csekk.py + azonos műszerű gyorspróba):
   a tulajdonos NEM teljes képernyőn nézi az oldalt. 1030x545-ben
     · slide-proi   : a belső sáv 131 px-et LEVÁGOTT, a három statisztikakártya
                      27 px-rel lelógott a képernyőről,
     · slide-dijak  : 83 px levágás, a fejléc 66 px-rel a menü ALÁ csúszott,
     · slide-zaras  : 38 px levágás, 21 px menü alá csúszás,
     · slide-ai-megoldasok NYITOTT kártyával: 77–113 px levágás.
   1280x720 és fölötte minden dia tiszta volt, ezért a határ 705 px: a 720-as
   ablak érintetlen marad, a 600/545/520-as pedig sűrűbb szedést kap.

   AMIT NEM CSINÁLUNK: nem hagyunk el tartalmat. Egyetlen díj, egyetlen adat,
   egyetlen mondat sem tűnik el — a hely a sorközből, a paddingből, a
   hasábarányból és a címméretekből jön. Betűméret 13 px alá SEHOL nem megy
   (0.82rem = 13.12 px a padló, VIZUALIS-SZABALYOK).

   A `!important` ott kell, ahol a később betöltődő közös lapok (kepek-teljes.css
   `.slide h2`, `.slide p`) `!important`-tal írnak felül — ezért három osztályos
   szűkítéssel nyerünk, nem csupasz elemszelektorral.
   ============================================================================ */

@media (max-height: 705px), (max-width: 1120px) and (max-height: 745px) {

  /* ── közös: a belső sáv alsó levegője, oldalsó levegője és a kickerek ─────
     A SZÉLESSÉG a legolcsóbb hely: 41 px oldalpaddingból 16 px-et visszaadva a
     díjhasábok és a szövegoszlopok kevesebb sorba tördelnek — betűméret-áldozat
     nélkül. A dia saját `--content-pad`-jét nem bántjuk, tehát a tartalom
     továbbra is a felső menü sávján belül marad. */
  .s04-proi .slide__inner,
  .s04-awards-slide .slide__inner,
  .s04-ailab .slide__inner,
  .s04-closing .slide__inner {
    padding-inline: clamp(10px, 1.6vw, 26px);
    padding-bottom: 8px;
  }

  .s04-proi .s04-kicker,
  .s04-awards-slide .s04-kicker,
  .s04-closing .s04-kicker {
    margin-bottom: 3px;
  }

  /* ── 2 · PROI ──────────────────────────────────────────────────────────────
     A szövegoszlop SZÉLESEBB lesz: a két bekezdés így kevesebb sorba tördel,
     ami többet nyer, mint amennyit a kisebb térkép veszít. */
  .s04-proi .slide__inner.s04-proi__grid {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.85fr);
    gap: clamp(16px, 2.4vw, 32px);
  }

  .slide.s04-proi .s04-proi__eyebrow {
    margin-bottom: 2px;
    font-size: 0.88rem;
  }

  .slide.s04-proi .s04-proi__title {
    margin-bottom: 6px;
    font-size: clamp(1.2rem, 2.3vw, 1.6rem) !important;
    line-height: 1.12 !important;
  }

  .slide.s04-proi .s04-proi__p {
    max-width: none;
    margin-bottom: 6px;
    font-size: 0.85rem;
    line-height: 1.34 !important;
  }

  /* a három statisztikakártya lapos plakett lesz, nem magas doboz */
  .s04-proi .s04-proi__text .c-stat-row {
    margin-top: 9px;
    gap: 9px;
  }

  .s04-proi .s04-proi__text .c-stat {
    padding: 7px 10px 8px;
  }

  .s04-proi .s04-proi__text .c-stat--hero .c-stat__value {
    font-size: clamp(1.4rem, 2.8vw, 1.9rem);
  }

  .s04-proi .s04-proi__text .c-stat__label {
    margin-top: 2px;
    letter-spacing: 0.05em;
    line-height: 1.15;
  }

  .s04-proi .s04-proi__logoplate {
    right: -8px;
    bottom: -10px;
    width: min(130px, 40%);
    padding: 8px 11px;
  }

  /* ── 3 · DÍJAK ─────────────────────────────────────────────────────────────
     A fejléc adja a legtöbb helyet (a „…a díjak" sor egymaga 47 px volt).
     A 28 tétel MIND megmarad: a hasábok sorköze és a plakett paddingja szűkül,
     a tétel betűje a skála alsó fokára (13.12 px) áll. */
  .s04-awards-slide .s04-awards-slide__inner {
    gap: 6px;
  }

  .slide.s04-awards-slide .s04-awards-slide__title {
    font-size: clamp(0.95rem, 1.6vw, 1.1rem) !important;
    line-height: 1.12 !important;
  }

  .s04-awards-slide .s04-awards-slide__title-b {
    margin-top: 0;
    font-size: clamp(1.05rem, 2.1vw, 1.45rem);
    line-height: 1.1;
  }

  .s04-awards-slide .s04-awards__plate {
    padding: 4px clamp(10px, 1.2vw, 16px);
    gap: 0 clamp(10px, 1.4vw, 20px);
  }

  .s04-awards-slide .s04-awards__col {
    gap: 4px;
  }

  .s04-awards-slide .s04-awards__gtitle {
    margin-bottom: 0;
    letter-spacing: 0.08em;
    line-height: 1.1;
  }

  .s04-awards-slide .s04-awards__plate .c-awards__chip {
    grid-template-columns: 9px minmax(0, 1fr);
    gap: 0 5px;
    padding: 1px 0;
    font-size: 0.82rem;
    line-height: 1.18;
    letter-spacing: 0;
  }

  .s04-awards-slide .s04-awards__plate .c-awards__chip::before {
    line-height: 1.18;
  }

  /* ── 5 · AI-MEGOLDÁSOK (nyitott kártyával) ─────────────────────────────────
     A mérő végiglépteti a négy kártyát, tehát a NYITOTT állapotnak is ki kell
     férnie. A hely a fejlécből, a lépéskártyák paddingjából és a sorközökből
     jön — egyetlen lépés, egyetlen mondat sem tűnik el. */
  .slide.s04-ailab .slide__inner {
    gap: 4px;
  }

  .slide.s04-ailab .s04-ailab__title {
    font-size: clamp(1rem, 1.85vw, 1.25rem) !important;
    line-height: 1.1 !important;
  }

  /* négy osztály kell: az olvashatosag.css `.s04-kicker` szabálya és a
     kepek-teljes.css `.slide p { line-height: 1.45 !important }` később tölt be */
  .slide.s04-ailab .s04-ailab__headtext .s04-kicker {
    margin-bottom: 1px;
    line-height: 1.15 !important;
  }

  .s04-ailab .s04-ailab__hint { margin-bottom: 0; }

  .s04-ailab .s04-ailab__hintplus {
    width: 16px;
    height: 16px;
  }

  .s04-ailab .s04-ailab__hintplus::before { width: 7px; }
  .s04-ailab .s04-ailab__hintplus::after  { height: 7px; }

  /* A "+" korong 30 px-es volt, és ez SZABTA MEG a csukott sorok magasságát:
     a sorszám és a cím együtt csak 22 px, a korong mégis 34 px-esre húzta a
     sort. 20 px-re véve a három csukott sor 30 px-et ad vissza a nyitottnak. */
  .s04-card__plus {
    width: 18px;
    height: 18px;
  }

  .s04-card__plus::before { width: 8px; }
  .s04-card__plus::after  { height: 8px; }

  .s04-card__cta { gap: 7px; }

  .s04-ailab__stack:has(.s04-card[open]) {
    gap: 1px;
  }

  .s04-ailab__stack:has(.s04-card[open]) .s04-card[open] > .s04-card__summary {
    padding-block: 1px;
  }

  .s04-ailab__stack:has(.s04-card[open]) .s04-card__title {
    margin-bottom: 1px;
    font-size: 1rem;
    line-height: 1.12;
  }

  .s04-ailab__stack:has(.s04-card[open]) .s04-card:not([open]) .s04-card__title {
    margin-bottom: 0;
    font-size: 0.95rem;
  }

  .s04-ailab__stack:has(.s04-card[open]) .s04-card__value {
    font-size: 0.85rem;
    line-height: 1.2;
  }

  /* A nyitott törzs a SZÉLESSÉGBŐL nyer magasságot: keskenyebb belső levegő és
     hasábköz → a bevezető és a lépések szövege kevesebb sorba tördel. */
  .s04-card[open] .s04-card__body {
    gap: clamp(10px, 1.2vw, 18px);
    padding-top: 1px;
    padding-right: clamp(12px, 1.4vw, 18px);
    padding-bottom: 2px;
    padding-left: clamp(12px, 1.4vw, 18px);
  }

  .s04-ailab .s04-steps {
    column-gap: clamp(10px, 1.1vw, 16px);
  }

  .s04-card[open] .s04-card__intro {
    gap: 3px;
  }

  .slide.s04-ailab .s04-card__lead {
    font-size: 0.83rem;
    line-height: 1.2 !important;
  }

  .s04-ailab .s04-card__subhead {
    margin-bottom: 0;
    line-height: 1.1;
  }

  .s04-ailab .s04-trust {
    gap: 6px;
    line-height: 1.2;
  }

  .s04-ailab .s04-trust__mark {
    width: 16px;
    height: 16px;
  }

  .s04-ailab .s04-trust--block { padding: 2px 6px; }
  .s04-ailab .s04-trust--inline { margin-top: 2px; padding: 2px 6px; }

  .s04-ailab .s04-steps .c-timeline__step {
    grid-template-columns: 18px 1fr;
    gap: 5px;
    padding-bottom: 1px;
  }

  .s04-ailab .s04-steps .c-timeline__marker {
    width: 18px;
    height: 18px;
  }

  .s04-ailab .s04-steps .c-timeline__card {
    padding: 0 6px;
  }

  .slide.s04-ailab .s04-steps .c-timeline__title {
    margin-bottom: 0;
    font-size: 0.85rem;
    line-height: 1.1;
  }

  .slide.s04-ailab .s04-steps .c-timeline__text {
    font-size: 0.82rem;
    line-height: 1.15 !important;
  }

  /* ── 9 · ZÁRÁS ─────────────────────────────────────────────────────────────
     Az adathasáb szélesebb (kevesebb tördelés a hosszú értékeknél), a
     címkeoszlop szűkebb, a fotó és a `Köszönjük.` sáv alacsonyabb. */
  .s04-closing .slide__inner.s04-closing__grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: clamp(16px, 2.4vw, 32px);
  }

  .slide.s04-closing .s04-closing__title {
    margin-bottom: 7px;
    font-size: clamp(1.15rem, 2.2vw, 1.55rem) !important;
    line-height: 1.12 !important;
  }

  .s04-closing .s04-closing__facts {
    gap: 4px;
  }

  .s04-closing .s04-closing__fact {
    grid-template-columns: 168px 1fr;
    gap: 10px;
    padding-bottom: 4px;
  }

  .s04-closing .s04-closing__fact dt {
    letter-spacing: 0.03em;
    line-height: 1.2;
  }

  .slide.s04-closing .s04-closing__fact dd {
    font-size: 0.88rem;
    line-height: 1.28 !important;
  }

  .s04-closing .s04-closing__media {
    max-height: min(34vh, 200px);
  }

  .s04-closing .s04-closing__media img {
    height: min(34vh, 200px);
  }

  .s04-closing__thanks {
    gap: 10px;
    padding-top: 6px;
  }

  .s04-closing .s04-closing__mark {
    width: 26px;
    height: 26px;
    max-height: 26px;
  }

  .s04-closing .s04-closing__thanks-text {
    font-size: clamp(1rem, 2.2vw, 1.3rem);
  }
}

/* ============================================================================
   TARTALÉK SÁV — 515 px alatti ablakmagasság
   ----------------------------------------------------------------------------
   A megrendelt legalacsonyabb méret 520 px, és ott tiszta. Ez a sáv csak
   tartalék: 500 px-en a díjak-dia még 11 px-et, a nyitott AI-kártya 10 px-et
   vágott. Csak térközt és sorközt veszünk el — betűméret itt sem megy 13 px alá.
   ============================================================================ */

@media (max-height: 545px) {
  .s04-awards-slide .s04-awards-slide__inner { gap: 4px; }
  .s04-awards-slide .s04-awards__plate { padding-block: 2px; }
  .s04-awards-slide .s04-awards__col { gap: 3px; }

  .s04-awards-slide .s04-awards__plate .c-awards__chip {
    padding: 0;
    line-height: 1.13;
  }

  .s04-awards-slide .s04-awards__plate .c-awards__chip::before { line-height: 1.13; }

  .s04-awards-slide .s04-awards__more {
    margin-top: 3px;
    padding-top: 3px;
    line-height: 1.15;
  }

  .slide.s04-ailab .slide__inner { gap: 3px; }
  .s04-ailab__stack:has(.s04-card[open]) { gap: 0; }

  .s04-card[open] .s04-card__body {
    padding-top: 0;
    padding-bottom: 1px;
  }

  .s04-ailab .s04-steps .c-timeline__step { padding-bottom: 0; }
  .s04-ailab .s04-steps .c-timeline__marker { width: 16px; height: 16px; }
  .s04-ailab .s04-steps .c-timeline__step { grid-template-columns: 16px 1fr; }

  .slide.s04-ailab .s04-card__lead { line-height: 1.15 !important; }
  .slide.s04-ailab .s04-steps .c-timeline__text { line-height: 1.11 !important; }
  .s04-ailab .s04-trust { line-height: 1.15; }
}