/* Árkádia, "Hogyan működik?" methodology page (Zoltán TG 50801, card c3b7a5d0).
   Same paper palette as the Döntések page (C model), one numbered section per question, the credibility check on dark. */
:root {
  --ko: #D8D4CC;
  --papir: #F5F3EE;
  --tinta: #1B2026;
  --pala: #22343F;
  --halvany: #55534E;         /* 6.9:1 on --ko, 7.6:1 on --papir (measured 2026-10-09) */
  --vonal: #B9B2A4;
  --piros: #A3302A;
  --zold: #3F6E4A;            /* 5.9:1 on paper */
  --sotet: #101316;
  --sotet-szoveg: #EFE8D8;
  --sotet-halvany: #A9A497;   /* 8.1:1 on --sotet (measured 2026-10-09) */
  --serif: 'Newsreader', Georgia, serif;
  --sans: 'Public Sans', system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { background: var(--ko); color: var(--tinta); font: 400 17px/1.65 var(--sans); scroll-padding-top: 76px; }
body { margin: 0; overflow-x: hidden; }
a { color: inherit; }
code, pre { font-family: var(--sans); }
.apro { font-size: 14px; color: var(--halvany); }

/* header: title left, coat of arms right, contents below */
.fej { max-width: 1240px; margin: 0 auto; padding: 72px 32px 40px; display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 24px 48px; align-items: center; }
.felcim { margin: 0 0 12px; font: 500 13px/1 var(--sans); text-transform: uppercase; letter-spacing: 0.1em; color: var(--halvany); }
.fej h1 { margin: 0 0 18px; font: 700 clamp(40px, 5.4vw, 72px)/1.02 var(--serif); letter-spacing: -0.02em; text-wrap: balance; }
.alcim { margin: 0; font-size: 20px; max-width: 52ch; }
.fej-kep { margin: 0; justify-self: center; }
.fej-kep img { width: min(260px, 100%); height: auto; display: block; animation: lebeg 9s ease-in-out infinite; }
@keyframes lebeg { 50% { transform: translateY(-8px) rotate(-1.5deg); } }
.tartalom { grid-column: 1 / -1; border-top: 1px solid var(--tinta); padding-top: 16px; }
.tartalom ol { margin: 0; padding: 0; list-style: none; columns: 3 260px; column-gap: 32px; counter-reset: t; }
.tartalom li { counter-increment: t; break-inside: avoid; }
.tartalom a { display: flex; gap: 10px; align-items: baseline; min-height: 44px; padding: 10px 0; text-decoration: none; font-weight: 600; border-bottom: 1px solid var(--vonal); }
.tartalom a::before { content: counter(t, decimal-leading-zero); font: 500 13px/1 var(--sans); color: var(--halvany); }
.tartalom a:hover { color: var(--pala); text-decoration: underline; }

/* sections */
.szak { max-width: 1240px; margin: 0 auto; padding: 64px 32px; border-top: 1px solid var(--vonal); }
.szak h2 { margin: 0 0 28px; display: flex; gap: 18px; align-items: baseline; font: 700 clamp(30px, 3.4vw, 44px)/1.1 var(--serif); letter-spacing: -0.015em; text-wrap: balance; }
.sorszam { flex: none; font: 500 15px/1 var(--sans); color: var(--halvany); transform: translateY(-6px); }
.hasab { max-width: 68ch; }
.hasab p { margin: 0 0 16px; }
.hasab.ket { max-width: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; margin-top: 28px; }
.kiemelt { font: 500 22px/1.45 var(--serif); }

/* 02: the five programmes */
.jelkep-sor { display: flex; gap: 20px; flex-wrap: wrap; margin: 24px 0 0; padding: 0; list-style: none; }
.jelkep-sor li { width: 96px; height: 96px; display: grid; place-items: center; background: var(--papir); border: 1px solid var(--vonal); border-bottom: 4px solid var(--p); }
.jelkep-sor img { width: 64px; height: 64px; }

/* 03: one session as a flow, a pulse walks through the steps */
.folyam { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; counter-reset: f; position: relative; }
.folyam::before { content: ''; position: absolute; left: 7%; right: 7%; top: 26px; height: 2px; background: var(--tinta); }
.folyam li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; font: 600 15px/1.3 var(--sans); padding: 0 4px; }
/* step marker = the arched window of the Árkádia coat of arms, a pictogram per step instead of a number disc */
.folyam-pont { width: 46px; height: 52px; border-radius: 23px 23px 2px 2px; display: grid; place-items: center; background: var(--papir); border: 2px solid var(--tinta);
  font: 600 16px/1 var(--sans); position: relative; z-index: 1; animation: pulzus 7s steps(1) infinite; animation-delay: calc(var(--n) * 1s); }
.folyam li:nth-child(1) .folyam-pont { --n: 0; } .folyam li:nth-child(2) .folyam-pont { --n: 1; } .folyam li:nth-child(3) .folyam-pont { --n: 2; }
.folyam li:nth-child(4) .folyam-pont { --n: 3; } .folyam li:nth-child(5) .folyam-pont { --n: 4; } .folyam li:nth-child(6) .folyam-pont { --n: 5; }
.folyam li:nth-child(7) .folyam-pont { --n: 6; }
@keyframes pulzus { 0% { background: var(--tinta); color: var(--papir); } 14.28% { background: var(--papir); color: var(--tinta); } }
.folyam-motor .folyam-pont { border-style: dashed; }
.folyam-naplo .folyam-pont { border-radius: 2px; }

/* 04: 48 sessions, an election at every cycle end */
.ido { position: relative; margin-bottom: 8px; }
.ido-sav { display: grid; grid-template-columns: repeat(48, minmax(0, 1fr)); gap: 3px; margin: 0; padding: 0; list-style: none; }
.ido-sav li { height: 56px; background: var(--papir); border: 1px solid var(--vonal); animation: telik 12s linear infinite; animation-delay: calc(var(--i) * 0.2s); }
.ido-sav li.ido-v { background: var(--pala); border-color: var(--pala); height: 72px; margin-top: -16px; }
@keyframes telik { 0%, 4% { background: var(--tinta); } 8% { background: var(--papir); } }
.ido-sav li.ido-v { animation-name: telik-v; }
@keyframes telik-v { 0%, 4% { background: var(--piros); } 8% { background: var(--pala); } }
.ido-jelek { position: relative; height: 44px; margin: 6px 0 0; padding: 0; list-style: none; }
.ido-jelek li { position: absolute; left: calc(var(--x) * 100%); transform: translateX(-100%); white-space: nowrap; font: 500 14px/1.3 var(--sans); color: var(--halvany); text-align: right; }
.ido-jelek b { color: var(--tinta); }
/* real days under the sessions: 7 sessions a day (Lead msg 65366) */
.ido-napok { display: grid; grid-template-columns: repeat(48, minmax(0, 1fr)); gap: 3px; margin: 2px 0 0; padding: 0; list-style: none; }
.ido-napok li { border-top: 2px solid var(--tinta); padding-top: 6px; font: 500 13px/1.2 var(--sans); color: var(--halvany); }

/* 05: chairs and the drawn model */
.szekek { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin: 24px 0; padding: 0; list-style: none; }
.szekek li { background: var(--papir); border: 1px solid var(--vonal); border-top: 5px solid var(--p); padding: 18px 16px 20px; display: flex; flex-direction: column; gap: 8px; }
.szekek img { width: 44px; height: 44px; }
.szek-part { font: 700 22px/1.1 var(--serif); }
.modell { font: 500 13px/1.35 var(--sans); color: var(--halvany); }
.szekek .modell > span[aria-hidden] { display: none; }
.modell-nyitott { font-style: italic; }
.sorsolas-sor { margin: 0; padding: 16px 20px; border-left: 4px solid var(--tinta); background: var(--papir); font: 500 19px/1.45 var(--serif); max-width: 80ch; }

/* 06: the finale in three steps */
.lepcso { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 28px 0 0; padding: 0; list-style: none; counter-reset: l; }
.lepcso li { counter-increment: l; background: var(--papir); border: 1px solid var(--vonal); padding: 22px; color: var(--pala); }
.lepcso svg { display: block; margin-bottom: 12px; }
.lepcso p { margin: 0; color: var(--tinta); }
.lepcso p::before { content: counter(l) '. '; font: 600 15px/1 var(--sans); color: var(--halvany); }
.villan { animation: villan 3s ease-in-out infinite; }
@keyframes villan { 50% { opacity: 0.25; } }

.gomb { display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px; background: var(--tinta); color: var(--papir); font-weight: 700; text-decoration: none; border-radius: 2px; }
.gomb:hover { background: var(--pala); }
/* citizenship band in the flag colour (--pala), the one signal surface of the page */
.szak-polgar { background: var(--pala); color: var(--sotet-szoveg); max-width: none; border-top: 0; }
.szak-polgar .sorszam { color: var(--sotet-halvany); }
.szak-polgar .gomb { background: var(--sotet-szoveg); color: var(--pala); }
.szak-polgar .gomb:hover { background: #fff; }
/* full-bleed bands: children centred on the 1176 px column; doubled class beats `.szak h2` and `.hasab.ket` (gate 2026-10-09: h2 + two-column text sat at 32 px) */
.szak.szak-polgar > *, .szak.szak-sotet > * { max-width: 1176px; margin-left: auto; margin-right: auto; }
.szak-polgar .hasab p, .szak-sotet > .hasab:not(.ket) p { max-width: 68ch; }

/* 08: credibility on dark */
.szak-sotet { max-width: none; background: var(--sotet); color: var(--sotet-szoveg); border-top: 0; }
.szak-sotet .sorszam, .szak-sotet .apro { color: var(--sotet-halvany); }
.lanc-abra { display: block; width: 100%; height: auto; margin: 28px auto 0; color: var(--sotet-szoveg); }
.lanc-kapocs { stroke-dasharray: 8 6; animation: kapocs 1.6s linear infinite; }
@keyframes kapocs { to { stroke-dashoffset: -28; } }
.ellenorzes { margin-top: 40px; }
.ellenorzes h3 { margin: 0 0 6px; font: 700 26px/1.2 var(--serif); }
.ellenorzes h4 { margin: 0 0 8px; font: 700 20px/1.2 var(--serif); }
.kartya { margin-top: 18px; padding: 22px; border: 1px solid #333b43; background: #171b1f; }
.kartya p { margin: 0 0 10px; }
.gomb-vilagos { background: var(--sotet-szoveg); color: var(--sotet); }
.gomb-vilagos:hover { background: #fff; }
.kartya code { color: var(--sotet-szoveg); word-break: break-all; }
.h-itelet { font-weight: 700; min-height: 1.6em; }
.h-itelet.ok { color: #8FD19E; } .h-itelet.bukik { color: #F08A80; } .h-itelet.nem-tudom { color: #E6C76A; }
.tabla-burok { overflow-x: auto; }
.ujj-tabla { width: 100%; border-collapse: collapse; font-size: 13px; }
.ujj-tabla th, .ujj-tabla td { text-align: left; padding: 6px 8px; border-bottom: 1px solid #333b43; vertical-align: top; }
.ujj-tabla td:first-child code { word-break: normal; white-space: nowrap; }
.ujj-tabla .ok { color: #8FD19E; font-weight: 700; } .ujj-tabla .bukik { color: #F08A80; font-weight: 700; }
.modellek, .lanc-lista { margin: 8px 0 14px; padding-left: 18px; line-height: 1.7; }
pre.lanc { margin: 0 0 14px; padding: 12px; background: #0b0d0f; border: 1px solid #333b43; overflow-x: auto; font-size: 13px; white-space: pre-wrap; word-break: break-all; }

/* 09: FAQ */
.gyik { max-width: 80ch; border-top: 1px solid var(--tinta); }
.gyik details { border-bottom: 1px solid var(--vonal); }
.gyik summary { min-height: 56px; padding: 14px 40px 14px 0; display: flex; align-items: center; cursor: pointer; font: 600 19px/1.35 var(--serif); list-style: none; position: relative; }
.gyik summary::-webkit-details-marker { display: none; }
.gyik summary::after { content: '+'; position: absolute; right: 6px; font: 400 26px/1 var(--sans); }
.gyik details[open] summary::after { content: '–'; }
.gyik details p { margin: 0 0 18px; }

.lab { max-width: 1240px; margin: 0 auto; padding: 40px 32px 56px; border-top: 1px solid var(--tinta); }
.lab p { margin: 0 0 8px; }

/* consent bar, same as the Döntések page */
.suti { position: fixed; z-index: 20; left: 28px; bottom: 24px; max-width: 360px; padding: 14px 16px; background: var(--papir);
  border: 1px solid var(--tinta); font-size: 14px; box-shadow: 0 10px 30px rgba(27, 32, 38, 0.2); }
.suti p { margin: 0 0 10px; }
.suti button { min-height: 40px; padding: 0 14px; margin-right: 6px; border: 1px solid var(--tinta); background: transparent; color: var(--tinta);
  font: 600 14px/1 var(--sans); cursor: pointer; }
.suti button[data-suti='igen'] { background: var(--tinta); color: var(--papir); }

@media (max-width: 1023px) {
  .folyam { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 24px; }
  .folyam::before { display: none; }
  .szekek { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  html { font-size: 16px; }
  .fej { grid-template-columns: 1fr; padding: 40px 18px 28px; }
  .fej-kep { grid-row: 1; justify-self: start; }
  .fej-kep img { width: 120px; }
  .alcim { font-size: 18px; }
  .szak { padding: 48px 18px; }
  .hasab.ket { grid-template-columns: 1fr; }
  .kiemelt { font-size: 19px; }
  .jelkep-sor { gap: 10px; }
  .jelkep-sor li { width: 58px; height: 58px; }
  .jelkep-sor img { width: 40px; height: 40px; }
  .folyam { grid-template-columns: 1fr; row-gap: 10px; }
  .folyam li { flex-direction: row; text-align: left; }
  .ido-sav { grid-template-columns: repeat(16, minmax(0, 1fr)); }
  .ido-sav li { height: 30px; } .ido-sav li.ido-v { height: 30px; margin-top: 0; }
  .ido-jelek, .ido-napok { display: none; }
  /* chain labels: 30 viewBox units = about 14.7 px at 390 (gate min 11 px, measured 2026-10-09) */
  .lanc-abra text { font-size: 30px; }
  .szekek { grid-template-columns: 1fr; }
  .szekek li { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .szekek .modell { flex-basis: 100%; }
  .lepcso { grid-template-columns: 1fr; }
  .lab { padding: 32px 18px 48px; }
  .suti { left: 8px; right: 8px; bottom: 8px; max-width: none; }
  /* fingerprint table: scroll sideways inside .tabla-burok instead of crushing 64-char hashes into 6-char columns (seen at 390, 2026-10-09) */
  .ujj-tabla { min-width: 680px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
}