/* ==========================================================================
   Wellenced — pilot bemutató
   1600 × 900. A tokenek a Figma fájlból jönnek:
   figma.com/design/O4KtUZNNyP9nx77wehLhaN — Color / Space / Radius gyűjtemény.
   Ha itt változtatsz értéket, vidd át oda is, különben elcsúszik a kettő.
   ========================================================================== */

:root {
  /* --- Color / Világos mód ---------------------------------------------- */
  /* A 2026.09.18-i logócsomag 6. változata: krém alap, mély zöld tinta,
     magenta csak akcentusként. A zöldeket a PDF hideg teáljánál melegebbre
     húztuk (több sárga a zöldben), hogy barátságosabb legyen. */
  --paper:      #FCF6EA;
  --mint:       #DFF3E6;
  --sage:       #E3EFEA;
  --cream:      #FAF0DC;

  /* Márkajelek. A magenta a logó #E31F99-éből sötétítve: az eredeti 3,4:1-en
     állt krémen, ez 4,69–5,14:1. A sea a korábbi --violet helyén. */
  --magenta:    #C4197F;
  --sea:        #3F7D6E;

  /* Tinta: mély zöld. Feketétől a meleg krém hidegnek látszik.
     Mindhárom fokozat AA a négy alapon: 7,08–7,76 / 5,12–5,61 / 4,70–5,15. */
  --ink:        #2C5457;
  --ink-soft:   #3D6B62;
  --ink-faint:  #427166;

  /* --- Space ------------------------------------------------------------- */
  --margin-x:   112px;
  --margin-top: 104px;
  --margin-bot: 116px;
  --content-h:  680px;

  /* --- Radius ------------------------------------------------------------ */
  --r-bezel:    46px;
  --r-screen:   36px;
  --r-marker:   15px;

  --font-display: "Baloo 2", ui-rounded, system-ui, sans-serif;
  --font-text: "DM Sans", ui-sans-serif, system-ui, sans-serif;
  --display-weight: 700;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: #D6E2D8; overflow: hidden;
  font-family: var(--font-text); color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

#viewport { position: fixed; inset: 0; overflow: hidden; }
#stage {
  position: absolute; left: 50%; top: 50%;
  width: 1600px; height: 900px;
  /* 50% 50%, NEM 0 0. A translate(-50%,-50%) skálázatlan pixelben mozgat, így
     0 0 origóval minden 1-nél kisebb nagyításnál kicsúszik a lap a bal szélen
     — 1440 px-en 80, 1000 px-en 300 pixellel. Ez a hiba az eredeti deckből
     jött, és változatlanul átkerült ide. */
  transform-origin: 50% 50%;
  overflow: hidden; box-shadow: 0 30px 90px rgba(28,58,56,.22);
}

/* ---- Dia-váz -------------------------------------------------------------
   A tartalomdoboz 900 mínusz a két margó. A régi deck 728-at írt egy 750-es
   dobozba, ezért maradt minden szöveges dia alján egy tenyérnyi üres lap. */
.slide {
  position: absolute; inset: 0;
  padding: var(--margin-top) var(--margin-x) var(--margin-bot);
  display: none; overflow: hidden;
  background: var(--paper); color: var(--ink);
}
.slide.is-active { display: block; }
.slide.mint { background: var(--mint); }
.slide.sage { background: var(--sage); }
.slide.cream  { background: var(--cream); }
.slide > .body {
  height: var(--content-h);
  display: flex; flex-direction: column; justify-content: center;
}

/* ---- Betűskála -----------------------------------------------------------
   A hierarchiát a méretarány hozza: 74–124 px főcím 18 px szöveg mellett.
   Nincs keret, nincs kártya, nincs tónusos panel — nem is kell. */
h1, h2, h3 { font-family: var(--font-display); font-weight: var(--display-weight); margin: 0; }
h1 { font-size: 96px; line-height: .98; letter-spacing: -.025em; }
h2 { font-size: 74px; line-height: 1.04; letter-spacing: -.02em; max-width: 17ch; }
h2.tight { font-size: 56px; line-height: 1.06; max-width: 16ch; }
h2.small { font-size: 48px; line-height: 1.08; max-width: 20ch; }
h3 { font-size: 26px; line-height: 1.25; letter-spacing: -.005em; }
h3.sm { font-size: 23px; }
p { margin: 0; }

.lead { font-size: 24px; line-height: 1.62; color: var(--ink-soft); max-width: 44ch; margin-top: 30px; }
.lead.wide { max-width: 62ch; }
.premise { font-size: 26px; line-height: 1.55; color: var(--ink-soft); max-width: 40ch; }
.body-txt { font-size: 18px; line-height: 1.6; color: var(--ink-soft); }
.small-txt { font-size: 16.5px; line-height: 1.55; color: var(--ink-soft); }
.src { font-size: 13.5px; line-height: 1.4; color: var(--ink-faint); }
b, strong { font-weight: 700; color: var(--ink); }

/* ---- Trend-gerinc --------------------------------------------------------
   A lapozó az app saját trendgrafikonja: páros pöttyök emelkedő lépéssel.
   Egyszerre oldalszám és márkajel, így nem kell logót bélyegezni minden lap
   sarkába. */
.spine { position: absolute; left: var(--margin-x); bottom: 54px; height: 22px; width: 130px; }
.spine i {
  position: absolute; bottom: 0; width: 7px; height: 7px; border-radius: 50%;
  background: var(--ink); opacity: .14;
}
.spine i.on { background: var(--magenta); opacity: 1; width: 9px; height: 9px; }
.mark {
  position: absolute; right: var(--margin-x); bottom: 51px;
  font-size: 13px; color: var(--ink-faint);
}

/* ---- 1 · Címlap ---------------------------------------------------------- */
.cover { padding: 0; }
.cover .wash {
  position: absolute; right: -260px; top: -300px; width: 1300px; height: 1300px;
  background: radial-gradient(closest-side,
              rgba(106,203,159,.42), rgba(63,125,110,.17) 52%, rgba(252,246,234,0) 74%);
}
.cover .mascot { position: absolute; right: 8px; bottom: 44px; width: 520px; }
.cover .inner { position: absolute; left: var(--margin-x); top: 50%; transform: translateY(-50%); }
.cover img.logo { width: 320px; display: block; margin-bottom: 46px; }
.cover h1 { max-width: 13ch; }
.cover .sub { font-size: 24px; line-height: 1.6; color: var(--ink-soft); max-width: 34ch; margin-top: 32px; }
.cover .when { position: absolute; left: var(--margin-x); bottom: 82px; font-size: 15px; color: var(--ink-faint); }

/* ---- 2 · Fejezetcím ------------------------------------------------------ */
.chapter {
  background:
    radial-gradient(120% 90% at 82% 18%, rgba(106,203,159,.44), rgba(106,203,159,0) 62%),
    radial-gradient(110% 100% at 12% 96%, rgba(63,125,110,.22), rgba(63,125,110,0) 60%),
    var(--mint);
}
.chapter .bloom {
  position: absolute; right: -260px; top: -200px; width: 1080px;
  opacity: .10; pointer-events: none;
}
.chapter .num {
  font-family: var(--font-display); font-weight: 600;
  font-size: 21px; color: var(--magenta); margin-bottom: 26px;
}
.chapter h2 { font-size: 124px; line-height: 1; letter-spacing: -.03em; max-width: 13ch; }
.chapter .premise { margin-top: 34px; }

/* ---- 3 · Állítás + megfigyelések ---------------------------------------- */
.observations { display: grid; grid-template-columns: 1fr 1fr; gap: 54px 96px; margin-top: 60px; }
.observations h3 { margin-bottom: 11px; }
.observations p { max-width: 42ch; }

/* Három hasáb ugyanezzel a logikával — dobozok nélkül. */
.cols3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 66px; margin-top: 56px; }
.cols3 h3 { margin-bottom: 12px; }
.cols3 .tag {
  display: block; font-family: var(--font-display); font-weight: 600;
  font-size: 17px; color: var(--magenta); margin-bottom: 10px;
}
.cols3 p + p { margin-top: 12px; }

/* ---- 4 · Számok ---------------------------------------------------------- */
.figures { display: grid; grid-template-columns: 1fr 360px; gap: 88px; align-items: end; }
.hero-fig {
  font-family: var(--font-display); font-weight: var(--display-weight);
  font-size: 310px; line-height: .8; letter-spacing: -.04em; color: var(--sea);
}
.hero-note { font-size: 26px; line-height: 1.5; color: var(--ink); max-width: 30ch; margin-top: 16px; }
.hero-fig + .hero-note { margin-top: 26px; }
.minor { display: grid; gap: 48px; }
.minor b {
  display: block; font-family: var(--font-display); font-weight: var(--display-weight);
  font-size: 68px; line-height: .98; letter-spacing: -.03em; color: var(--ink);
}
.minor p { margin-top: 13px; }
.minor .src { margin-top: 11px; }

/* ---- 5 · Termék ----------------------------------------------------------
   Egy 1104 × 2400-as felvétel 900 px-es diába zsugorítva 290 px széles, azaz
   a terem hátuljából olvashatatlan. Ezért a telefon olvasható méretű, és
   szándékosan lelóg az alján. A dia levágja — ez döntés, nem hiba. */
.product { position: relative; height: var(--content-h); }
.product .copy { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 740px; }
.phone {
  position: absolute; right: -4px; top: 6px; width: 396px; padding: 11px;
  border-radius: var(--r-bezel); background: var(--ink);
  box-shadow: 0 26px 60px rgba(44,84,87,.16), 0 2px 6px rgba(44,84,87,.10);
}
.phone img { display: block; width: 100%; border-radius: var(--r-screen); }

/* Két telefon: itt nem lóghat le, mert egymás mellett kell olvasni őket.
   Magasságra méretezve férnek a tartalomdobozba. */
.twin { position: relative; height: var(--content-h); }
.twin .copy { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 700px; }
.twin .pair { position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: flex; gap: 30px; }
.twin .phone { position: relative; width: 268px; padding: 8px; border-radius: 32px; }
.twin .phone img { border-radius: 25px; }
.twin .twin figcaption { margin-top: 14px; font-size: 14px; color: var(--ink-faint); text-align: center; }

/* Jelölők a képernyőképen. A szám itt valódi információ: jelmagyarázatot köt
   a felülethez. Mindig a cél PEREMÉRE kerül, sosem az értékre, amit magyaráz. */
.pin, .n {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--magenta); color: #fff;
  font-family: var(--font-display); font-weight: 600; font-size: 16px;
  line-height: 30px; text-align: center; flex: none;
}
.pin { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%,-50%);
       box-shadow: 0 0 0 4px rgba(255,255,255,.92); }

.legend { display: grid; gap: 30px; }
.legend li { list-style: none; display: grid; grid-template-columns: 30px 1fr; gap: 20px; align-items: start; }
.legend h3 { margin-bottom: 7px; }
.legend p { max-width: 40ch; }

/* ---- 6 · Böngészős felvétel ---------------------------------------------- */
.admin { position: relative; height: var(--content-h); }
.admin .copy { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 560px; }
/* A 44ch-es alapértelmezett sormérték itt szélesebb, mint a hasáb, ezért
   belógott a böngészőkeret alá. A hasáb szabja meg, nem a karakterszám. */
.admin .copy .lead, .admin .copy p { max-width: 100%; }
.browser {
  position: absolute; right: -4px; top: 50%; transform: translateY(-50%);
  width: 830px; border-radius: 16px; overflow: hidden; background: #fff;
  box-shadow: 0 26px 60px rgba(44,84,87,.16), 0 2px 6px rgba(44,84,87,.10);
}
.browser .chrome {
  height: 34px; background: var(--mint); display: flex; align-items: center; gap: 7px; padding: 0 14px;
}
.browser .chrome i { width: 9px; height: 9px; border-radius: 50%; background: #DCE7DC; }
.browser .chrome span { margin-left: 12px; font-size: 12px; color: var(--ink-faint); }
.browser .shot { position: relative; display: block; }
.browser img { display: block; width: 100%; }

/* ---- 7 · Lépések (valódi sorrend, ezért kap számot) --------------------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 48px; margin-top: 56px; }
.steps .k {
  font-family: var(--font-display); font-weight: 600;
  font-size: 19px; color: var(--magenta); display: block; margin-bottom: 12px;
}
.steps h3 { font-size: 24px; margin-bottom: 10px; }
.steps p { font-size: 16.5px; line-height: 1.55; color: var(--ink-soft); }

.give-take { display: grid; grid-template-columns: 1fr 1fr; gap: 96px; margin-top: 54px; }
.give-take .tag {
  display: block; font-family: var(--font-display); font-weight: 600;
  font-size: 17px; color: var(--magenta); margin-bottom: 16px;
}
.give-take ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.give-take li { font-size: 18px; line-height: 1.55; color: var(--ink-soft); }

/* ---- 8 · Keret-táblázat --------------------------------------------------
   Definíciós lista, nem táblázat: a sorok között levegő választ, nem vonal. */
.terms { display: grid; gap: 30px; margin-top: 54px; }
.terms .row { display: grid; grid-template-columns: 280px 1fr; gap: 56px; align-items: start; }
.terms dt {
  font-family: var(--font-display); font-weight: var(--display-weight);
  font-size: 23px; color: var(--ink);
}
.terms dd { margin: 0; font-size: 18px; line-height: 1.55; color: var(--ink-soft); max-width: 62ch; }
.terms dd .src { display: block; margin-top: 7px; }

/* ---- 9 · Merchandise ----------------------------------------------------- */
.merch { display: grid; grid-template-columns: 1fr 1fr; gap: 96px; }
.merch .cats { display: grid; gap: 34px; align-content: center; }
.merch .cat { display: grid; grid-template-columns: 58px 1fr; gap: 24px; align-items: baseline; }
.merch .cat .k {
  font-family: var(--font-display); font-weight: 600; font-size: 34px; color: var(--magenta);
}
.merch .cat h3 { margin-bottom: 6px; }
.merch .tech { margin-top: 40px; }
.merch .tech b { display: block; margin-bottom: 8px; font-size: 19px; }

/* ---- 10 · Zárás ---------------------------------------------------------- */
.closing { display: grid; grid-template-columns: 1fr 620px; gap: 96px; align-items: center; }
.closing .ask h3 { font-size: 30px; margin-bottom: 16px; }
.closing .contact { margin-top: 40px; }
.closing .contact .tag {
  display: block; font-family: var(--font-display); font-weight: 600;
  font-size: 17px; color: var(--magenta); margin-bottom: 12px;
}
.closing .contact p { font-size: 20px; line-height: 1.6; color: var(--ink-soft); }
.closing a { color: var(--magenta); text-decoration: none; }

.thanks { padding: 0; }
.thanks .wash {
  position: absolute; left: 50%; top: 50%; width: 1500px; height: 1500px;
  transform: translate(-50%,-50%);
  background: radial-gradient(closest-side,
              rgba(106,203,159,.38), rgba(63,125,110,.15) 52%, rgba(252,246,234,0) 72%);
}
.thanks .inner { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.thanks .mascot { width: 300px; margin: 0 auto 30px; display: block; }
.thanks h1 { font-size: 118px; }
.thanks .sub { margin-top: 26px; font-size: 22px; color: var(--ink-soft); }
.thanks a { color: var(--magenta); text-decoration: none; }

/* ---- Navigáció ----------------------------------------------------------- */
#nav {
  position: fixed; left: 0; right: 0; bottom: 0; height: 52px;
  display: flex; align-items: center; justify-content: center; gap: 22px;
  background: #D6E2D8; color: #5F7A6D; font-size: 13px; z-index: 5;
}
#nav button {
  background: none; border: 0; color: #3D6B62; font: inherit; cursor: pointer;
  padding: 6px 12px; border-radius: 4px;
}
#nav button:hover { background: #EAF3EB; color: var(--ink); }
#nav button:focus-visible { outline: 2px solid var(--magenta); outline-offset: 2px; }
#nav .hint { color: #7E9488; }

@media print {
  @page { size: 1600px 900px; margin: 0; }
  body { background: #fff; overflow: visible; }
  #nav { display: none; }
  #viewport { position: static; }
  #stage { position: static; transform: none !important; box-shadow: none; width: 1600px; height: auto; }
  .slide { position: relative; display: block !important; page-break-after: always; height: 900px; }
}

/* ==========================================================================
   SZERKEZETI RÉTEG
   Nem a saját ötleteim: minden eszköz egy konkrét referenciából jön.
   – futó fejléc + hajszálvonal ....... lululemon, minden tartalmi oldalon
   – lábléc vonallal + oldalszám ...... Andreas Maris capabilities deck
   – négy sarok metaadat .............. GHARAGE "From Function to Feeling"
   – vonal a főcím sorai alatt ........ Adobe "Connecting the Dots"
   – hajszálvonalas sorok ............. lululemon "Defining wellbeing"
   – kiemelő filc ..................... lululemon, törzsszövegben
   – függőleges hasábvonalak .......... The Grid Deck template (8×8 rács)
   – keret, amit a logó megtör ........ Arkive

   A legfontosabb: a tartalom a rácshoz tapad felül, nem lebeg
   függőlegesen középen. Ettől „állt" eddig minden szöveg a semmiben.
   ========================================================================== */

:root {
  --rule:       rgba(44,84,87,.20);
  --rule-soft:  rgba(44,84,87,.12);
  --rail-h:     46px;    /* fejléc + vonal */
  --foot-h:     40px;    /* vonal + lábléc */
}

/* ---- Futó fejléc ---------------------------------------------------------- */
.rail {
  position: absolute; left: var(--margin-x); right: var(--margin-x);
  display: flex; align-items: baseline; justify-content: space-between;
  font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faint);
}
.rail.top { top: 56px; padding-bottom: 13px; border-bottom: 1px solid var(--rule); }
.rail.top .sec { color: var(--magenta); }
.rail.top .sec i { font-style: normal; color: var(--ink-faint); margin-right: 14px; }
.rail.bot {
  bottom: 52px; padding-top: 13px; border-top: 1px solid var(--rule);
  text-transform: none; letter-spacing: 0; font-size: 13px;
}
.rail.bot .page { font-variant-numeric: tabular-nums; }

/* A tartalomdoboz a két sín közé szorul, és FELÜLRE tapad. */
.slide.railed > .body {
  height: calc(var(--content-h) - 6px);
  justify-content: flex-start; padding-top: 8px;
}
.slide.railed { padding-top: 126px; padding-bottom: 122px; }

/* ---- Vonal a főcím alatt -------------------------------------------------- */
.ruled { padding-bottom: 20px; border-bottom: 2px solid var(--ink); display: inline-block; }

/* ---- Kiemelő filc --------------------------------------------------------- */
mark, .hl {
  background: linear-gradient(transparent 12%, rgba(106,203,159,.48) 12%,
              rgba(106,203,159,.48) 88%, transparent 88%);
  color: inherit; padding: 0 .12em;
}

/* ---- Hasábvonalak --------------------------------------------------------- */
.observations {
  column-gap: 0;
  background: linear-gradient(var(--rule-soft), var(--rule-soft)) 50% 0 / 1px 100% no-repeat;
}
.observations > div { padding: 0 48px; }
.observations > div:nth-child(2n+1) { padding-left: 0; }
.cols3 { column-gap: 0; }
.cols3 > div { padding: 0 40px; border-left: 1px solid var(--rule-soft); }
.cols3 > div:first-child { padding-left: 0; border-left: 0; }
.steps { column-gap: 0; }
.steps > div { padding: 0 32px; border-left: 1px solid var(--rule-soft); }
.steps > div:first-child { padding-left: 0; border-left: 0; }

/* ---- Hajszálvonalas sorok ------------------------------------------------- */
.terms { gap: 0; }
.terms .row { padding: 22px 0; border-top: 1px solid var(--rule); }
.terms .row:last-child { border-bottom: 1px solid var(--rule); }

.give-take {
  column-gap: 0;
  background: linear-gradient(var(--rule-soft), var(--rule-soft)) 50% 0 / 1px 100% no-repeat;
}
.give-take > div { padding: 0 48px; }
.give-take > div:first-child { padding-left: 0; }
.give-take li { padding: 10px 0; border-top: 1px solid var(--rule-soft); }
.give-take li:first-child { border-top: 0; }

.legend li { padding-bottom: 22px; border-bottom: 1px solid var(--rule-soft); }
.legend li:last-child { border-bottom: 0; padding-bottom: 0; }

.merch .cat { padding: 20px 0; border-top: 1px solid var(--rule); }
.merch .cat:last-child { border-bottom: 1px solid var(--rule); }

/* ---- Számok: a nagy szám kap egy alapvonalat ------------------------------ */
.figures { align-items: stretch; }
.figures > div:last-child { padding-left: 88px; border-left: 1px solid var(--rule); }
.hero-fig { border-bottom: 2px solid var(--magenta); padding-bottom: 18px; display: inline-block; }

/* ---- Négy sarok: fejezetcímek --------------------------------------------- */
.chapter .corners span {
  position: absolute; font-size: 11.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-faint);
}
.chapter .corners .tl { left: var(--margin-x); top: 56px; }
.chapter .corners .tr { right: var(--margin-x); top: 56px; }
.chapter .corners .bl { left: var(--margin-x); bottom: 56px; }
.chapter .corners .br { right: var(--margin-x); bottom: 56px; }
/* Keret, amit a fejezetszám megtör — Arkive. */
.chapter .frame {
  position: absolute; left: 72px; right: 72px; top: 92px; bottom: 92px;
  border: 1px solid var(--rule); pointer-events: none;
}
.chapter .body { position: relative; z-index: 1; }

/* ---- Termékdiák: a telefon kap egy alapvonalat ---------------------------- */
.product .copy > h2, .twin .copy > h2, .admin .copy > h2 {
  padding-bottom: 22px; border-bottom: 2px solid var(--ink);
}

/* ---- Sűrítés a sínek között ----------------------------------------------
   A felső tapadás láthatóvá tette, hogy a tartalom magasabb a doboznál —
   középre igazítva ez csak elrejtve volt, nem megoldva. */
.slide.railed h2 { font-size: 64px; line-height: 1.03; }
.slide.railed h2.small { font-size: 46px; }
.slide.railed h2.tight { font-size: 52px; }
.slide.railed .lead { font-size: 21px; line-height: 1.55; margin-top: 22px; max-width: 52ch; }
.slide.railed .lead.wide { max-width: 78ch; }
.slide.railed .body-txt { font-size: 17px; line-height: 1.52; }
.slide.railed .small-txt { font-size: 15.5px; line-height: 1.5; }
.slide.railed h3 { font-size: 23px; }
.slide.railed h3.sm { font-size: 20px; }
.slide.railed .observations { gap: 34px 0; margin-top: 40px; }
.slide.railed .cols3 { margin-top: 38px; }
.slide.railed .steps { margin-top: 38px; }
.slide.railed .give-take { margin-top: 34px; }
.slide.railed .legend { gap: 18px; }
.slide.railed .legend li { padding-bottom: 16px; }
.slide.railed .terms { margin-top: 34px; }
.slide.railed .terms .row { padding: 15px 0; }
.slide.railed .hero-fig { font-size: 236px; }
.slide.railed .hero-note { font-size: 22px; margin-top: 22px; }
.slide.railed .minor b { font-size: 58px; }
.slide.railed .product, .slide.railed .twin, .slide.railed .admin { height: 100%; }
.slide.railed .phone { top: 0; }

/* A termékdiákon a lábléc vonala csak a szövegoszlopot fogja át, nem vág
   keresztül a készüléken. lululemonnál is a hasábot kíséri a vonal, nem a
   teljes lapot. */
.slide.railed.has-device .phone { z-index: 3; }
.slide.railed.has-device .rail.bot { z-index: 1; }


/* A főcím alatti vonal szabály, nem kivétel — különben a 3. és 7. dia kap
   alapvonalat, a 4. és 5. nem, és a szekció szétesik. */
.slide.railed .body > h2 {
  padding-bottom: 20px; border-bottom: 2px solid var(--ink);
  display: block; width: fit-content; max-width: 100%;
}

/* ---- Bővebb diák ---------------------------------------------------------
   A sűrítés egységesen ment, de nem minden dián van ugyanannyi tartalom:
   a ritkábbak alatt 130–360 px üresen maradt a lábléc fölött. Ezeken a
   skála visszamegy, hogy a szöveg kitöltse a rácsot, ne lebegjen benne. */
.slide.railed.roomy h2 { font-size: 78px; }
.slide.railed.roomy h2.small { font-size: 58px; }
.slide.railed.roomy h2.tight { font-size: 62px; }
.slide.railed.roomy .lead { font-size: 25px; line-height: 1.6; margin-top: 30px; }
.slide.railed.roomy .body-txt { font-size: 19px; line-height: 1.6; }
.slide.railed.roomy .small-txt { font-size: 17.5px; line-height: 1.58; }
.slide.railed.roomy h3 { font-size: 27px; }
.slide.railed.roomy .observations { gap: 48px 0; margin-top: 56px; }
.slide.railed.roomy .cols3 { margin-top: 54px; }
.slide.railed.roomy .hero-fig { font-size: 300px; }
.slide.railed.roomy .hero-note { font-size: 26px; margin-top: 28px; }
.slide.railed.roomy .minor b { font-size: 70px; }
.slide.railed.roomy .terms .row { padding: 24px 0; }
.slide.railed.roomy .merch .cat { padding: 30px 0; }
.slide.railed.roomy .merch .cat .k { font-size: 40px; }
.slide.railed.roomy .closing .ask h3 { font-size: 34px; }
.slide.railed.roomy .closing .contact p { font-size: 22px; }

/* A záródián a legkevesebb a tartalom — a kérdés kap akkora léptéket,
   amekkorát megérdemel, különben a lap alja üresen kong. */
.slide.railed.airy h2 { font-size: 92px; line-height: 1.02; max-width: 15ch; }
.slide.railed.airy .closing { gap: 110px; align-items: start; }
.slide.railed.airy .closing .ask h3 { font-size: 36px; }
.slide.railed.airy .closing .ask .body-txt { font-size: 21px; line-height: 1.6; }

/* ==========================================================================
   JAVÍTÁSOK — három független átnézés után
   ========================================================================== */

/* A. A szövegoszlop és a böngészőkártya együtt szélesebb volt a tartalom-
   doboznál, ezért a szöveg BEcsúszott a kártya alá: a kiemelő filc félbe-
   vágva, három hajszálvonal pedig a kártya árnyéka mögött halt el. */
.admin .copy { width: 500px; }
.browser { width: 800px; }

/* B. A tartalom felülre tapad a termék-, iker- és admindiákon is. Eddig
   függőlegesen középre ült, ezért a főcím diáról diára 27 px-et ugrált,
   miközben a fej- és lábléc szilárdan állt. */
.product .copy, .twin .copy, .admin .copy {
  top: 0; transform: none;
}
.merch .cats { align-content: start; }

/* C. A főcím alatti vonal a merch-dián is kell — ott a h2 nem közvetlen
   gyereke a .body-nak, ezért kimaradt. */
.slide.railed .merch h2, .slide.railed .closing h2 {
  padding-bottom: 20px; border-bottom: 2px solid var(--ink);
  display: block; width: fit-content; max-width: 100%;
}

/* D. A give-take sorvonalai 48 px-cel a margó előtt értek véget, mert a
   jobb oldali belső margót semmi nem nullázta. */
.give-take > div:last-child { padding-right: 0; }

/* E. Három tétel köré négy vonal zárt dobozt rajzolt. Elválasztó csak a
   tételek KÖZÉ kell, ahogy a többi listán is. */
.merch .cat { border-top: 0; border-bottom: 1px solid var(--rule); }
.merch .cat:last-child { border-bottom: 0; }

/* F. A keretek utolsó sora alatti vonal és a lábléc vonala két párhuzamos
   hajszálvonalat adott üres sávval köztük. */
.terms .row:last-child { border-bottom: 0; }

/* G. A zárás két hasábja 56 px-nyire eltérő magasságban indult, és a
   kettéosztást semmi nem jelölte — miközben a 18. dián ugyanezt vonal
   jelzi. */
.closing { align-items: start; column-gap: 0; }
.closing > div:first-child { padding-right: 88px; }
.closing .ask { padding-left: 88px; border-left: 1px solid var(--rule); }

/* H. A kilógó telefon miatt a dia programból görgethető maradt: egy tab-
   nyomás vetítés közben elcsúsztatta az egész lapot, sínekkel együtt. */
.slide { overflow: clip; }

/* A jelmagyarázat számozás nélkül: egy oszlop, hajszálvonallal elválasztva.
   A .n badge helye megszűnt, a rács egyhasábos lesz. */
.legend li { grid-template-columns: 1fr; gap: 0; }
.pin, .legend .n { display: none; }

/* A kártya is a rácshoz tapad, mint a szövegoszlop — így a főcím és a
   kártya teteje egy vonalban indul, nem egymáshoz képest elcsúszva. */
.browser { top: 0; transform: none; }

/* A számok és a merch dián maradt még ~170 px holttér a lábléc fölött. */
.slide.railed.roomy .figures .hero-fig { font-size: 330px; }
.slide.railed.roomy .figures .hero-note { font-size: 28px; }
.slide.railed.roomy .minor { gap: 62px; }
.slide.railed.roomy .merch .cat { padding: 40px 0; }
.slide.railed.roomy .merch .tech { margin-top: 52px; }