/* AI Office Program — étlap oldal.
   Közös stíluslap a /hu és az /ae oldalhoz. A két oldal vizuálisan azonos.

   Színt, sugarat, vonalat és betűcsaládot KIZÁRÓLAG tokenből veszünk
   (tokens.css). Kivétel a nyomtatási blokk: a kánonnak nincs nyomdai
   skálája, ott a pt/mm értékek kézzel íródnak — lásd SKILL.md. */

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ds-color-ink);
  color: var(--ds-color-muted);
  font-family: var(--ds-font-body);
  font-size: var(--ds-text-long-size);
  line-height: var(--ds-text-long-lh);
  -webkit-font-smoothing: antialiased;
  min-width: 0;
}

/* A tartalomsáv szélessége. Nem márkatoken — a kánonban nincs
   elrendezési skála —, de egy helyen él. A törzsszöveget nem ez fogja
   olvasható hosszra, hanem a .measure és a .lead ch-ban megadott
   maximuma; a sáv csak a rácsoknak és a tábláknak ad helyet. */
:root {
  --etlap-wrap: 1440px;
  /* Oldalsó térköz. Nem fix érték: mobilon a tokenskála 24px-e, széles
     képernyőn viszont a tartalom nem tapadhat a sáv széléhez. */
  --etlap-gutter: clamp(var(--ds-space-5), 5vw, 88px);
}

.wrap { max-width: var(--etlap-wrap); margin: 0 auto;
        padding: 0 var(--etlap-gutter); min-width: 0; }
.measure { max-width: 68ch; }

p { margin: 0 0 var(--ds-space-4); }
p:last-child { margin-bottom: 0; }
strong { color: var(--ds-color-white); font-weight: 700; }
a { color: var(--ds-color-brand); }

/* ── Tipográfiai szerepek ────────────────────────────────────────────
   A skála minden foka használatban van: mono label → body → lead →
   h4 → h3 → h2 → display. Ez adja a hierarchiát, nem a szín. */
.eyebrow {
  font-family: var(--ds-font-mono); font-size: var(--ds-text-label-size);
  line-height: var(--ds-text-label-lh); letter-spacing: var(--ds-text-label-ls);
  text-transform: uppercase; color: var(--ds-color-brand);
  margin: 0 0 var(--ds-space-3);
}
.lead {
  font-size: var(--ds-text-lead-size); line-height: var(--ds-text-lead-lh);
  color: var(--ds-color-text); max-width: 62ch;
}
.small { font-size: var(--ds-text-small-size); color: var(--ds-color-muted); }

/* ── Szekcióritmus ──────────────────────────────────────────────────────
   ink → surface → ink → elevated → ink. Teljes szélességű surface és
   elevated sáv sosem érintkezik: mindig ink választja el őket. */
.sec { padding: var(--ds-space-9) 0; }
.sec-ink  { background: var(--ds-color-ink); }
.sec-surf { background: var(--ds-color-surface); }
.sec-elev { background: var(--ds-color-elevated); }

/* ── Olvasási haladásjelző ──────────────────────────────────────────── */
.progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 0;
  background: var(--ds-color-brand); z-index: 20;
  transition: width .1s linear;
}

/* ── Fejléc ─────────────────────────────────────────────────────────── */
.masthead {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--ds-space-4); flex-wrap: wrap;
  padding: var(--ds-space-6) 0;
  border-bottom: 1px solid var(--ds-border-hairline);
}
.masthead img { height: 30px; flex: 0 0 auto; max-width: 55vw; }
.only-print { display: none; }

/* ── Bevezető keret ─────────────────────────────────────────────────── */
.doc-title { margin: 0; color: var(--ds-color-white); }
.doc-sub {
  margin: var(--ds-space-4) 0 var(--ds-space-7);
  color: var(--ds-color-brand); max-width: 30ch;
}

/* ── Tétel ──────────────────────────────────────────────────────────── */
.item-head { display: flex; align-items: baseline; gap: var(--ds-space-4);
             flex-wrap: wrap; margin-bottom: var(--ds-space-4); }
.item-note {
  font-family: var(--ds-font-mono); font-size: var(--ds-text-label-size);
  letter-spacing: var(--ds-text-label-ls); text-transform: uppercase;
  color: var(--ds-color-muted);
}
.item-title, .sec-title { margin: 0 0 var(--ds-space-5);
                          color: var(--ds-color-white); max-width: 24ch; }

/* Kompakt tétel: kis kiegészítés, ami nem érdemel teljes sávot.
   A szöveg és az ár egymás mellett fut, a sáv is szűkebb. A rács
   auto-fit — töréspont nélkül esik egy oszlopra. */
.sec-tight { padding: var(--ds-space-7) 0; }
.item-compact {
  border-radius: var(--ds-radius-md); padding: var(--ds-space-6);
  border: 1px solid var(--ds-border-hairline-strong);
  display: grid; gap: var(--ds-space-6); align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.item-compact .item-title { margin-bottom: var(--ds-space-3); max-width: none; }
.item-compact table.price { margin: 0; }
.panel-surf { background: var(--ds-color-surface); }  /* elevated szekcióban */
.panel-elev { background: var(--ds-color-elevated); } /* ink vagy surface szekcióban */

/* ── Mérőszámsáv. A lime itt legális: mérőszám-kiemelés. ─────────────── */
.stats { display: grid; gap: var(--ds-space-5); margin: var(--ds-space-6) 0 0;
         grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.stat { border-left: 2px solid var(--ds-border-hairline-strong);
        padding-left: var(--ds-space-4); }
.stat-n { font-family: var(--ds-font-display); font-size: var(--ds-text-h3-size);
          line-height: 1.15em; letter-spacing: var(--ds-text-h3-ls);
          text-transform: uppercase; color: var(--ds-color-action); }
.stat-n.is-word { color: var(--ds-color-white); }
.stat-l { font-family: var(--ds-font-mono); font-size: var(--ds-text-label-size);
          letter-spacing: var(--ds-text-label-ls); text-transform: uppercase;
          color: var(--ds-color-muted); margin-top: var(--ds-space-2); }

/* ── Mező: minden tételben ugyanaz a sorrend, ugyanaz a jelölés ─────── */
.field { margin-top: var(--ds-space-8); padding-top: var(--ds-space-6);
         border-top: 1px solid var(--ds-border-hairline); }
.field-h { display: flex; align-items: baseline; gap: var(--ds-space-4);
           flex-wrap: wrap; margin: 0 0 var(--ds-space-5); }
.field-h .n {
  font-family: var(--ds-font-mono); font-size: var(--ds-text-label-size);
  letter-spacing: var(--ds-text-label-ls); text-transform: uppercase;
  color: var(--ds-color-brand);
}
.field-h h3 { margin: 0; color: var(--ds-color-white); }

/* ── Dobozok ────────────────────────────────────────────────────────── */
.grid { display: grid; gap: var(--ds-space-4); }
/* A szélesebb sávban a 320px-es minimum négy oszlopot engedne, és az öt
   „miért online" doboz 4+1-re szakadna. A 400px legfeljebb hármat enged. */
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }

.box {
  border-radius: var(--ds-radius-md); padding: var(--ds-space-6);
  border: 1px solid var(--ds-border-hairline-strong);
  transition: border-color .18s ease, transform .18s ease;
}
.box:hover { border-color: var(--ds-color-brand); transform: translateY(-2px); }
.box-elev { background: var(--ds-color-elevated); }
.box-surf { background: var(--ds-color-surface); }
.box .k {
  font-family: var(--ds-font-mono); font-size: var(--ds-text-label-size);
  letter-spacing: var(--ds-text-label-ls); text-transform: uppercase;
  color: var(--ds-color-brand); margin-bottom: var(--ds-space-4);
}
.box h4 { margin: 0 0 var(--ds-space-3); color: var(--ds-color-white); }
/* Mondat hosszú „cím": nem Tomorrow, hanem Satoshi lead — a kánon
   szerint a nagybetűs Tomorrow beállítása mondatra nincs hangolva. */
.box .t {
  font-size: var(--ds-text-lead-size); line-height: 1.35em; font-weight: 700;
  color: var(--ds-color-white); margin: 0 0 var(--ds-space-3);
}
.box p { color: var(--ds-color-muted); }
.box p:last-child { margin-bottom: 0; }
.box .note { margin-top: var(--ds-space-4); font-size: var(--ds-text-small-size);
             color: var(--ds-color-brand); }


/* ── Ártáblázat. Nem kártya, nem pricing box. ───────────────────────── */
table.price { width: 100%; max-width: 900px; border-collapse: collapse;
              margin: 0 0 var(--ds-space-4); }
table.price th {
  font-family: var(--ds-font-mono); font-size: var(--ds-text-label-size);
  letter-spacing: var(--ds-text-label-ls); text-transform: uppercase;
  font-weight: 400; color: var(--ds-color-muted);
  text-align: right; padding: 0 var(--ds-space-4) var(--ds-space-3);
  border-bottom: 1px solid var(--ds-border-hairline);
}
table.price th:first-child { text-align: left; }
table.price td { padding: var(--ds-space-4); vertical-align: baseline;
                 border-bottom: 1px solid var(--ds-border-hairline);
                 transition: background-color .15s ease; }
table.price td:first-child { padding-left: 0; }
table.price tbody tr:hover td { background: var(--ds-color-elevated); }
table.price tr:first-child td { border-top: 1px solid var(--ds-border-hairline); }
table.price thead + tbody tr:first-child td { border-top: 0; }
table.price td:last-child {
  text-align: right; white-space: nowrap; padding-right: 0;
  font-family: var(--ds-font-mono); color: var(--ds-color-white);
}
.price-note { font-size: var(--ds-text-small-size); color: var(--ds-color-muted); }

/* ── CTA: gomb és mellette az e-mail ────────────────────────────────
   A lime itt akció — ez az oldal egyetlen olyan szerepe a mérőszámokon
   kívül, ami lime-ot kap. Lime háttéren a szöveg kötelezően ink. */
.cta-row { display: flex; flex-wrap: wrap; align-items: center;
           gap: var(--ds-space-5); margin-top: var(--ds-space-7); }
.btn { display: inline-block; border-radius: var(--ds-radius-sm);
       padding: 14px 24px; font-family: var(--ds-font-body); font-weight: 700;
       font-size: var(--ds-text-body-size); text-decoration: none; border: 0;
       cursor: pointer; }
.btn-action { background: var(--ds-color-action); color: var(--ds-color-ink);
              transition: background-color .15s ease; }
.btn-action:hover { background: var(--ds-color-action-hover); }
.cta-mail { color: var(--ds-color-muted); text-decoration: none;
            border-bottom: 1px solid var(--ds-border-hairline-strong);
            transition: color .15s ease, border-color .15s ease; }
.cta-mail:hover { color: var(--ds-color-brand);
                  border-bottom-color: var(--ds-color-brand); }

/* ── Vezetői referenciák ─────────────────────────────────────────────
   A név periwinkle, a pozíció muted — az idézet marad a hangsúlyos.
   A figcaption margin-top:auto-val a kártya aljára ül, így a nevek egy
   vonalban állnak eltérő hosszú idézetek mellett is. */
.quotes { display: grid; gap: var(--ds-space-4);
          grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
          margin-top: var(--ds-space-7); }
.quote { display: flex; flex-direction: column; margin: 0;
         border-radius: var(--ds-radius-md); padding: var(--ds-space-6);
         border: 1px solid var(--ds-border-hairline-strong); }
.quote blockquote { margin: 0 0 var(--ds-space-6);
                    font-size: var(--ds-text-lead-size);
                    line-height: var(--ds-text-lead-lh);
                    color: var(--ds-color-text); }
.quote figcaption {
  margin-top: auto; padding-top: var(--ds-space-4);
  border-top: 1px solid var(--ds-border-hairline-strong);
  font-family: var(--ds-font-mono); font-size: var(--ds-text-label-size);
  letter-spacing: var(--ds-text-label-ls); text-transform: uppercase;
  color: var(--ds-color-brand);
}
.quote figcaption span { color: var(--ds-color-muted); }

/* ── Referenciák ─────────────────────────────────────────────────────
   Fehér, átlátszó hátterű PNG-k (lásd referenciak/). A méretük NEM itt
   dől el: minden fájl a saját, optikailag kiegyensúlyozott méretére van
   exportálva, és a width/height attribútum hordozza — az egyforma
   magasságtól a keskeny jelek eltörpülnének, a szélesek uralkodnának.
   Tördelő flex, nem rács: a jelek eltérő szélessége miatt a rács
   oszlopai üresen tátonganának. A max-width nem esztétikai dísz: a
   teljes sávszélességen tizenegy logó 9+2-re szakadna, ezzel 6+5 lesz.
   Balra igazítva, mint az oldal minden más eleme. */
.refs { display: flex; flex-wrap: wrap; align-items: center;
        gap: var(--ds-space-7) var(--ds-space-8);
        max-width: 1040px; margin-top: var(--ds-space-7); }
.refs img { display: block; max-width: 100%; height: auto; }

/* ── Vissza a tetejére ──────────────────────────────────────────────── */
.totop {
  position: fixed; right: var(--ds-space-5); bottom: var(--ds-space-5); z-index: 15;
  background: var(--ds-color-elevated); color: var(--ds-color-text);
  border: 1px solid var(--ds-border-hairline-strong);
  border-radius: var(--ds-radius-pill); padding: 10px 18px;
  font-family: var(--ds-font-mono); font-size: var(--ds-text-label-size);
  letter-spacing: var(--ds-text-label-ls); text-transform: uppercase;
  cursor: pointer; opacity: 0; pointer-events: none;
  transition: opacity .2s ease, border-color .15s ease;
}
.totop.on { opacity: 1; pointer-events: auto; }
.totop:hover { border-color: var(--ds-color-brand); color: var(--ds-color-brand); }

/* ── Lábléc ─────────────────────────────────────────────────────────── */
footer { border-top: 1px solid var(--ds-border-hairline);
         padding: var(--ds-space-6) 0 var(--ds-space-8);
         color: var(--ds-color-muted); font-size: var(--ds-text-small-size); }
footer p { margin: 0 0 var(--ds-space-2); }
/* A jogi sorok fölött a copyright halkabb és kap egy kis levegőt. */
.copyright { margin-top: var(--ds-space-5); }

/* Az elérhetőségek linkek maradnak, csak nem a böngésző alapértelmezett
   aláhúzásával: hajszálvonal alattuk, periwinkle hoverrel. */
/* Az elérhetőségek sora: nincs „·" szövegelválasztó, a rés adja a
   tagolást — mobilon így tud töréspontnál oszlopba fordulni. */
.footer-contact { display: flex; flex-wrap: wrap;
                  gap: var(--ds-space-2) var(--ds-space-5);
                  margin: 0 0 var(--ds-space-2); }

footer a { color: var(--ds-color-muted); text-decoration: none;
           border-bottom: 1px solid var(--ds-border-hairline-strong);
           transition: color .15s ease, border-color .15s ease; }
footer a:hover { color: var(--ds-color-brand);
                 border-bottom-color: var(--ds-color-brand); }

/* A csatornák viszont gombok: pill, hajszálkeret, mono felirat.
   Nem lime — az az oldalon végig a mérőszámoké; ezek nem akciók,
   hanem célok, tehát a hover periwinkle, az identitás színe. */
.footer-links { display: flex; flex-wrap: wrap; gap: var(--ds-space-3);
                margin-top: var(--ds-space-5); }
.footer-links a {
  display: inline-flex; align-items: center; gap: var(--ds-space-3);
  padding: 10px 18px; border-radius: var(--ds-radius-pill);
  background: var(--ds-color-elevated);
  border: 1px solid var(--ds-border-hairline-strong);
  color: var(--ds-color-text);
  font-family: var(--ds-font-mono); font-size: var(--ds-text-label-size);
  letter-spacing: var(--ds-text-label-ls); text-transform: uppercase;
  transition: border-color .18s ease, color .18s ease, transform .18s ease;
}
.footer-links a:hover { border-color: var(--ds-color-brand);
                        color: var(--ds-color-brand); transform: translateY(-1px); }
.footer-links svg { flex: 0 0 auto; opacity: .6; }
.footer-links a:hover svg { opacity: 1; }

/* ── Belépő névjegy (index.html) ─────────────────────────────────────
   Nem dokumentum, hanem egyetlen, függőlegesen középre húzott blokk.
   A 100svh a mobil böngészők csúszó címsorát kezeli; a 100vh előtte
   marad tartaléknak azoknak, amik az svh-t nem ismerik. */
.entry {
  min-height: 100vh; min-height: 100svh;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  padding: var(--ds-space-8) var(--etlap-gutter);
}
.entry-inner { max-width: 560px; }
/* A logó a lap főszereplője, ezért SZÉLESSÉGRE méretezzük, nem
   magasságra: a lockup 5.5:1, magasság alapján megadva pillanatok alatt
   kifutna a 560px-es sávból. A clamp mobilon is arányos marad.
   Itt NINCS display: block. A .entry már középre igazít, egy inline kép
   magától középre kerül — a display:block viszont felülütötte volna a
   .only-print { display: none } szabályt, és mindkét logó látszana. */
.entry img { width: clamp(240px, 62vw, 400px); height: auto; max-width: 100%;
             vertical-align: middle; }

/* A logó egyben a lap H1-e: a jel az egyetlen tartalom, így az
   akadálymentes címe a logó alt szövege. A font-size: 0 az inline kép
   után maradó sorköz-hézagot nyeli el. */
.entry-logo { margin: 0 0 var(--ds-space-8); font-size: 0; line-height: 0; }

.entry-links { display: flex; flex-wrap: wrap; justify-content: center;
               gap: var(--ds-space-3); }
.entry-links + .entry-links { margin-top: var(--ds-space-3); }
.entry-links a {
  display: inline-flex; align-items: baseline; gap: var(--ds-space-3);
  padding: 12px 20px; border-radius: var(--ds-radius-pill);
  background: var(--ds-color-elevated);
  border: 1px solid var(--ds-border-hairline-strong);
  color: var(--ds-color-text); text-decoration: none;
  /* Mono, de NEM nagybetűs: az e-mail-cím nagybetűsen idegenül olvasódik. */
  font-family: var(--ds-font-mono); font-size: var(--ds-text-small-size);
  transition: border-color .18s ease, color .18s ease, transform .18s ease;
}
.entry-links a:hover { border-color: var(--ds-color-brand);
                       color: var(--ds-color-brand); transform: translateY(-1px); }
.entry-links .l {
  font-size: var(--ds-text-label-size); letter-spacing: var(--ds-text-label-ls);
  text-transform: uppercase; color: var(--ds-color-muted);
}

/* ── Mobil ───────────────────────────────────────────────────────────
   A töréspont NEM új érték: ugyanaz a 720px, amit a tokens.css használ
   a típusskála lelépéséhez. A kánon szerint a töréspont egy helyen él,
   ezért itt csak követjük, nem definiáljuk újra.

   A típusskálát a tokens.css magától lelépteti; itt a térközök és a
   rácsok igazodnak, mert azok nincsenek a kánonban. */
@media screen and (max-width: 720px) {
  /* 96px szekciótérköz telefonon fél képernyőnyi üres sáv. */
  .sec { padding: var(--ds-space-8) 0; }
  .sec-tight { padding: var(--ds-space-6) 0; }
  .masthead { padding: var(--ds-space-5) 0; }

  /* A mérőszámok egymás alá: két oszlopban a mono feliratok a sáv
     széléhez tapadnak, a harmadik pedig árván marad egy sorban. */
  .stats { grid-template-columns: 1fr; gap: var(--ds-space-4); }

  .field { margin-top: var(--ds-space-7); padding-top: var(--ds-space-5); }
  .box, .quote, .item-compact { padding: var(--ds-space-5); }
  .item-compact { gap: var(--ds-space-5); }
  .doc-sub { margin-bottom: var(--ds-space-6); }
  .refs { gap: var(--ds-space-6) var(--ds-space-7); }

  /* A CTA teljes szélességű: hüvelykkel így biztosan eltalálható,
     és nem lóg be mellé félsornyi üres hely. */
  .cta-row { gap: var(--ds-space-4); }
  .cta-row .btn { display: block; width: 100%; text-align: center; }

  /* Koppintási felületek: érintőn a 44px az alsó határ. Ezek asztali
     nézetben szövegméretű inline linkek, itt kapnak függőleges teret. */
  .cta-mail { display: inline-block; padding: 10px 0; }
  .footer-contact { flex-direction: column; gap: 0; }
  .footer-contact a { display: inline-block; align-self: flex-start;
                      padding: 11px 0; }
  .totop { right: var(--ds-space-4); bottom: var(--ds-space-4);
           padding: 14px 20px; }
  footer { padding-bottom: var(--ds-space-10); }
}

/* ── Nyomtatás / PDF ────────────────────────────────────────────────────
   Az oldalt elküldve is használjuk, ezért nyomtatásra világos háttérre
   váltunk. A kánon ezt az esetet nevesíti: világos háttéren a logó
   det-black.svg és a szöveg graphite — periwinkle NEM, mert fehéren
   olvashatatlan. A pt/mm értékek kézzel írtak: nyomdai skála nincs a
   tokenrendszerben. */
@media print {
  /* A teljes szövegpaletta graphite-ra esik össze. Ezt tokenszinten
     tesszük, nem szelektoronként: papíron a text / muted / white / brand
     / action mind ugyanaz a szürke, és így nem maradhat fehéren fehér
     szöveg egy olyan elemben, amiről itt elfelejtkeztünk. */
  :root {
    --ds-color-text:   var(--ds-color-graphite);
    --ds-color-muted:  var(--ds-color-graphite);
    --ds-color-white:  var(--ds-color-graphite);
    --ds-color-brand:  var(--ds-color-graphite);
    --ds-color-action: var(--ds-color-graphite);
    --ds-border-hairline:        rgba(67,67,67,0.20);
    --ds-border-hairline-strong: rgba(67,67,67,0.35);
  }

  html { scroll-behavior: auto; }
  @page { margin: 18mm 16mm; }

  body { background: #FFFFFF; color: var(--ds-color-graphite);
         font-size: 10.5pt; line-height: 1.5; }
  .wrap { max-width: none; padding: 0; }
  .measure, .lead, .doc-sub, table.price { max-width: none; }

  .sec { padding: 10pt 0; background: #FFFFFF; }
  .sec-surf, .sec-elev { background: #FFFFFF; }

  a { text-decoration: none; }

  /* Képernyő-only vezérlők papíron nem léteznek. */
  .progress, .totop { display: none; }
  .only-screen { display: none; }
  .only-print  { display: inline; }
  .masthead { padding: 0 0 10pt; }

  .item-compact { background: #FFFFFF; padding: 5mm; break-inside: avoid; }
  .sec-tight { padding: 6pt 0; }

  /* A referencia-PNG-k fehér jelek: papíron láthatatlanok lennének.
     Az invert az átlátszóságot érintetlenül hagyja, csak a fehéret
     forgatja feketébe — így ugyanaz a fájl szolgál ki mindkét médiumot. */
  .entry { min-height: 0; padding: 0; display: block; text-align: left; }
  .entry-inner { max-width: none; }
  .entry img { width: 60mm; }
  .entry-logo { margin: 0 0 6mm; }
  .entry-links { justify-content: flex-start; }
  .entry-links a { border: 0; background: none; padding: 0 6mm 0 0; }

  .refs { gap: 6mm 8mm; margin-top: 5mm; }
  .refs img { filter: invert(1); }

  .stat-n { font-size: 15pt; line-height: 1.15em; }
  .box, .quote { background: #FFFFFF; transform: none; padding: 5mm; }
  .quote { break-inside: avoid; }
  .cta-row { display: block; margin-top: 5mm; }
  .btn { background: transparent; color: var(--ds-color-graphite);
         padding: 0; font-size: 10.5pt; }
  .btn[data-url]::after { content: " (" attr(data-url) ")"; font-weight: 400; }
  .cta-mail { border-bottom: 0; }
  .cta-mail::before { content: " · "; }
  .grid-2, .grid-3 { grid-template-columns: repeat(2, 1fr); }
  table.price tbody tr:hover td { background: transparent; }

  /* Szűk lábléc, egészben: így ráfér az utolsó lapra az utolsó tétel alá. */
  footer { padding: 8pt 0 0; break-inside: avoid; }
  footer a { border-bottom: 0; }
  /* Papíron a pill értelmetlen: marad a felirat és mellette a cím. */
  .footer-links { display: block; margin-top: 3mm; }
  .footer-links a { display: inline; padding: 0; border: 0; background: none;
                    text-transform: none; font-family: var(--ds-font-body);
                    font-size: 10.5pt; letter-spacing: normal; }
  .footer-links a::after { content: " (" attr(data-url) ")"; }
  .footer-links a + a::before { content: " · "; }
  .footer-links svg { display: none; }
  .sec:last-of-type { padding-bottom: 4pt; }

  /* Ne törjön ketté az, ami összetartozik — de a mezőre NEM teszünk
     tiltást: attól minden mező új lapon kezdődne, és félig üres oldalak
     sorozata lenne belőle. A dobozok és a táblázatok maradnak egyben. */
  .field { margin-top: 6mm; padding-top: 5mm; }
  .field-h { margin-bottom: 4mm; }
  .box, table.price, .item-head, .stats, .refs { break-inside: avoid; }
  h1, h2, h3, .item-head { break-after: avoid; break-inside: avoid; }
}