/* ------------------------------------------------------------------------
   Funnel design system — „Éjszakai levél"
   A színek a funnel theme JSON-jából jönnek (inline :root a layoutban),
   itt csak a szerkezet, a tipográfia és a mozgás él.
   Mobil-first, egy oszlop, hüvelykujj-zóna, nulla harmadik feles kérés.
   ------------------------------------------------------------------------ */

@font-face {
    font-family: 'Fraunces';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/fonts/fraunces-display.woff2') format('woff2');
}
@font-face {
    font-family: 'Fraunces';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/fraunces-italic.woff2') format('woff2');
}

:root {
    --font-display: 'Fraunces', ui-serif, Georgia, 'Times New Roman', serif;
    --font-body: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
    --col: 480px;
    --gutter: 20px;
    --radius: 12px;
    --radius-sm: 8px;
    --ease: cubic-bezier(.2, .7, .2, 1);
    --t-fast: 180ms;
    --t: 260ms;
    --tap: 56px;
}

* { box-sizing: border-box; }
html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* clip, nem hidden: nem csinal gorgeto konteneret, igy a sticky elemek elnek */
    overflow-x: clip;
}

body {
    margin: 0;
    min-height: 100dvh;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

/* Desktopon a telefon-oszlop középen áll, körülötte a bg finom vignettával. */
@media (min-width: 640px) {
    body {
        background-image: radial-gradient(ellipse 70% 60% at 50% 0%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 70%);
    }
}

/* ------------------------------------------------------------- az égbolt */
/* Galaxis-háttér, tisztán CSS — nincs kép, nincs canvas, a mobil LCP-t nem érinti.
   Három rögzített réteg a tartalom mögött (z-index: -1):
     body::before  a köd: három lassú radiális folt (lila, arany, kékes)
     body::after   apró és közepes csillagok két csempéből, lassú sodródással
     html::after   a kilenc fényes csillag, lélegző fénnyel
   Csak transform és opacity animál, azt a kompozitor viszi, nem rajzol újra.
   Reduced motionnél a globális szabály megállítja; a kép akkor is marad. */
:root {
    --stars-1: radial-gradient(1px 1px at 337px 356px, rgba(242,239,233,0.48) 50%, transparent 100%),
        radial-gradient(1px 1px at 181px 68px, rgba(242,239,233,0.42) 50%, transparent 100%),
        radial-gradient(1px 1px at 448px 302px, rgba(242,239,233,0.33) 50%, transparent 100%),
        radial-gradient(1px 1px at 266px 169px, rgba(242,239,233,0.42) 50%, transparent 100%),
        radial-gradient(1px 1px at 97px 109px, rgba(242,239,233,0.34) 50%, transparent 100%),
        radial-gradient(1px 1px at 37px 59px, rgba(242,239,233,0.44) 50%, transparent 100%),
        radial-gradient(1px 1px at 219px 57px, rgba(242,239,233,0.31) 50%, transparent 100%),
        radial-gradient(1px 1px at 353px 185px, rgba(242,239,233,0.39) 50%, transparent 100%),
        radial-gradient(1px 1px at 305px 103px, rgba(242,239,233,0.29) 50%, transparent 100%),
        radial-gradient(1px 1px at 68px 432px, rgba(242,239,233,0.45) 50%, transparent 100%),
        radial-gradient(1px 1px at 260px 314px, rgba(242,239,233,0.52) 50%, transparent 100%),
        radial-gradient(1px 1px at 499px 174px, rgba(242,239,233,0.36) 50%, transparent 100%),
        radial-gradient(1px 1px at 125px 351px, rgba(242,239,233,0.41) 50%, transparent 100%),
        radial-gradient(1px 1px at 344px 136px, rgba(242,239,233,0.32) 50%, transparent 100%),
        radial-gradient(1px 1px at 399px 291px, rgba(242,239,233,0.29) 50%, transparent 100%),
        radial-gradient(1px 1px at 446px 483px, rgba(242,239,233,0.46) 50%, transparent 100%),
        radial-gradient(1px 1px at 398px 287px, rgba(242,239,233,0.29) 50%, transparent 100%),
        radial-gradient(1px 1px at 177px 387px, rgba(242,239,233,0.37) 50%, transparent 100%),
        radial-gradient(1px 1px at 440px 486px, rgba(242,239,233,0.4) 50%, transparent 100%),
        radial-gradient(1px 1px at 488px 60px, rgba(242,239,233,0.29) 50%, transparent 100%),
        radial-gradient(1px 1px at 270px 5px, rgba(242,239,233,0.42) 50%, transparent 100%),
        radial-gradient(1px 1px at 191px 241px, rgba(242,239,233,0.41) 50%, transparent 100%),
        radial-gradient(1px 1px at 369px 485px, rgba(242,239,233,0.37) 50%, transparent 100%),
        radial-gradient(1px 1px at 40px 1px, rgba(242,239,233,0.48) 50%, transparent 100%),
        radial-gradient(1px 1px at 223px 418px, rgba(242,239,233,0.42) 50%, transparent 100%),
        radial-gradient(1px 1px at 411px 285px, rgba(242,239,233,0.29) 50%, transparent 100%),
        radial-gradient(1px 1px at 152px 118px, rgba(242,239,233,0.5) 50%, transparent 100%),
        radial-gradient(1px 1px at 160px 475px, rgba(242,239,233,0.36) 50%, transparent 100%),
        radial-gradient(1px 1px at 495px 465px, rgba(242,239,233,0.42) 50%, transparent 100%),
        radial-gradient(1px 1px at 124px 331px, rgba(242,239,233,0.51) 50%, transparent 100%),
        radial-gradient(1px 1px at 31px 137px, rgba(242,239,233,0.3) 50%, transparent 100%),
        radial-gradient(1px 1px at 174px 62px, rgba(242,239,233,0.5) 50%, transparent 100%),
        radial-gradient(1px 1px at 339px 164px, rgba(242,239,233,0.48) 50%, transparent 100%),
        radial-gradient(1px 1px at 170px 256px, rgba(242,239,233,0.28) 50%, transparent 100%),
        radial-gradient(1px 1px at 357px 518px, rgba(242,239,233,0.43) 50%, transparent 100%),
        radial-gradient(1px 1px at 494px 332px, rgba(242,239,233,0.39) 50%, transparent 100%),
        radial-gradient(1px 1px at 447px 275px, rgba(242,239,233,0.3) 50%, transparent 100%),
        radial-gradient(1px 1px at 451px 256px, rgba(242,239,233,0.3) 50%, transparent 100%),
        radial-gradient(1px 1px at 182px 500px, rgba(242,239,233,0.55) 50%, transparent 100%),
        radial-gradient(1px 1px at 3px 268px, rgba(242,239,233,0.39) 50%, transparent 100%),
        radial-gradient(1px 1px at 440px 235px, rgba(242,239,233,0.29) 50%, transparent 100%),
        radial-gradient(1px 1px at 249px 190px, rgba(242,239,233,0.37) 50%, transparent 100%);
    --stars-2: radial-gradient(1.6px 1.6px at 28px 349px, rgba(242,239,233,0.48) 50%, transparent 100%),
        radial-gradient(1.6px 1.6px at 112px 486px, rgba(242,239,233,0.53) 50%, transparent 100%),
        radial-gradient(1.6px 1.6px at 730px 637px, rgba(242,239,233,0.4) 50%, transparent 100%),
        radial-gradient(1.6px 1.6px at 88px 127px, rgba(242,239,233,0.53) 50%, transparent 100%),
        radial-gradient(1.6px 1.6px at 500px 72px, rgba(242,239,233,0.67) 50%, transparent 100%),
        radial-gradient(1.6px 1.6px at 574px 568px, rgba(242,239,233,0.73) 50%, transparent 100%),
        radial-gradient(1.6px 1.6px at 622px 492px, rgba(242,239,233,0.7) 50%, transparent 100%),
        radial-gradient(1.6px 1.6px at 497px 637px, rgba(242,239,233,0.38) 50%, transparent 100%),
        radial-gradient(1.6px 1.6px at 180px 670px, rgba(217,169,106,0.56) 50%, transparent 100%),
        radial-gradient(1.6px 1.6px at 75px 127px, rgba(217,169,106,0.44) 50%, transparent 100%),
        radial-gradient(1.6px 1.6px at 607px 194px, rgba(242,239,233,0.47) 50%, transparent 100%),
        radial-gradient(1.6px 1.6px at 511px 512px, rgba(242,239,233,0.56) 50%, transparent 100%),
        radial-gradient(1.6px 1.6px at 720px 120px, rgba(242,239,233,0.64) 50%, transparent 100%),
        radial-gradient(1.6px 1.6px at 356px 665px, rgba(242,239,233,0.56) 50%, transparent 100%),
        radial-gradient(1.6px 1.6px at 651px 367px, rgba(217,169,106,0.6) 50%, transparent 100%),
        radial-gradient(1.6px 1.6px at 162px 27px, rgba(242,239,233,0.64) 50%, transparent 100%),
        radial-gradient(1.6px 1.6px at 47px 417px, rgba(217,169,106,0.52) 50%, transparent 100%),
        radial-gradient(1.6px 1.6px at 731px 432px, rgba(242,239,233,0.48) 50%, transparent 100%);
    --stars-3: radial-gradient(2.2px 2.2px at 317px 681px, rgba(242,239,233,0.93) 50%, transparent 100%),
        radial-gradient(2.2px 2.2px at 198px 362px, rgba(242,239,233,0.69) 50%, transparent 100%),
        radial-gradient(2.2px 2.2px at 518px 423px, rgba(242,239,233,0.73) 50%, transparent 100%),
        radial-gradient(2.2px 2.2px at 639px 602px, rgba(217,169,106,0.51) 50%, transparent 100%),
        radial-gradient(2.2px 2.2px at 254px 39px, rgba(217,169,106,0.87) 50%, transparent 100%),
        radial-gradient(2.2px 2.2px at 487px 1083px, rgba(242,239,233,0.67) 50%, transparent 100%),
        radial-gradient(2.2px 2.2px at 995px 28px, rgba(242,239,233,0.66) 50%, transparent 100%),
        radial-gradient(2.2px 2.2px at 644px 429px, rgba(242,239,233,0.55) 50%, transparent 100%),
        radial-gradient(2.2px 2.2px at 956px 360px, rgba(217,169,106,0.56) 50%, transparent 100%);
}

body::before,
body::after,
html::after {
    content: '';
    position: fixed;
    inset: -8%;               /* nagyobb a viewportnál, hogy a sodródás ne mutasson szélt */
    z-index: -1;
    pointer-events: none;
}
body::before {
    background:
        radial-gradient(ellipse 55% 45% at 20% 15%, rgba(112, 82, 214, .17), transparent 70%),
        radial-gradient(ellipse 42% 38% at 80% 28%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 70%),
        radial-gradient(ellipse 60% 50% at 55% 88%, rgba(64, 132, 190, .11), transparent 70%);
    animation: galaxy-nebula 110s ease-in-out infinite alternate;
}
body::after {
    background-image: var(--stars-2), var(--stars-1);
    background-size: 760px 760px, 520px 520px;
    animation: galaxy-drift 140s ease-in-out infinite alternate;
}
html::after {
    background-image: var(--stars-3);
    background-size: 1100px 1100px;
    animation: galaxy-drift-far 200s ease-in-out infinite alternate, galaxy-breathe 7s ease-in-out infinite;
}
@keyframes galaxy-nebula {
    from { transform: translate3d(-2%, -1%, 0) scale(1);    opacity: .85; }
    to   { transform: translate3d(2%, 1.5%, 0) scale(1.06); opacity: 1; }
}
@keyframes galaxy-drift {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-2.5%, -1.5%, 0); }
}
@keyframes galaxy-drift-far {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(1.5%, -1%, 0); }
}
@keyframes galaxy-breathe {
    0%, 100% { opacity: .6; }
    50%      { opacity: 1; }
}

.page {
    width: 100%;
    max-width: var(--col);
    margin: 0 auto;
    padding: 24px var(--gutter) 120px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}
.page.page-full { min-height: 100dvh; justify-content: center; padding-top: 32px; }

/* ------------------------------------------------------------- tipográfia */

.display, h1, h2 {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -.02em;
    text-wrap: balance;
    margin: 0;
}
h1 { font-size: clamp(30px, 8vw, 40px); line-height: 1.12; }
h2 { font-size: 23px; line-height: 1.25; }
h3 { font-size: 17px; font-weight: 600; margin: 0; }
p { margin: 0; }
p + p { margin-top: .9em; }
em { font-family: var(--font-display); font-style: italic; font-weight: 400; }

.lede { font-size: 18px; line-height: 1.5; }

/* Hosszú olvasnivaló: sorkizárt, elválasztással. Elválasztás nélkül a mobilos ~40 karakteres
   sorban egy hosszú magyar szó lyukakat húz a sor közepébe. Az elválasztás nyelvét a <html lang>
   adja. Ami rövid (cím, kérdés, lead, gomb, kártyacímke), az balra marad. */
:root { --hosszu-igazitas: justify; }
.prose .blokk:not(.szekcio-lead) > p,
.szekcio-irany > div > p,
.elem-szotar p,
.teaser-text p,
.legal,
.lp-proza,
.lp-sec-head > p.muted,
.lp-card p,
.im-bek,
.im-nem p,
.im-reszletek-test p,
.footer-disclaimer {
    text-align: var(--hosszu-igazitas);
    -webkit-hyphens: auto;
    hyphens: auto;
    hyphenate-limit-chars: 7 3 3;
}
.legal :is(h1, h2, h3, h4, dl, dt, dd) { text-align: left; -webkit-hyphens: manual; hyphens: manual; }
/* nagyon keskeny kijelzőn (kis Androidok) a sor ~32 karakter: ott elválasztással is lyukas lenne */
@media (max-width: 340px) { :root { --hosszu-igazitas: left; } }

.muted { color: var(--muted); }
.small { font-size: 14px; }
.micro { font-size: 13px; color: var(--muted); letter-spacing: .01em; }
.eyebrow {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
}
.eyebrow.accent { color: var(--accent); }
.num { font-variant-numeric: tabular-nums; }
.center { text-align: center; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.stack-lg { display: flex; flex-direction: column; gap: 22px; }
a { color: inherit; }

/* ------------------------------------------------------------------ gombok */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: var(--tap);
    padding: 0 26px;
    border: 0;
    border-radius: var(--radius);
    background: var(--accent);
    color: #17151F;
    font: inherit;
    font-size: 17px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: transform var(--t-fast) var(--ease), background var(--t-fast), box-shadow var(--t-fast);
    box-shadow: 0 8px 28px -10px color-mix(in srgb, var(--accent) 60%, transparent);
    -webkit-tap-highlight-color: transparent;
}
.btn:hover { background: var(--accent-2); }
.btn:active { transform: scale(.985); }
.btn:focus-visible { outline: 3px solid var(--accent-2); outline-offset: 3px; }
.btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.btn-block { width: 100%; }

/* ----------------------------------------------- figyelemfelhívó fő gomb */
/* Csak ott, ahol egyetlen dolga van az oldalnak: a kezdőlap hero-ja. Egy
   ötmásodperces ciklus, három egyszerre futó apró mozgás — a gomb lélegzik,
   egy fénypászma átfut rajta, a nyíl megbiccen. Elég ahhoz, hogy elkapja a
   szemet, ritka ahhoz, hogy ne legyen tolakodó. Interakcióra leáll, hogy a
   lenyomás visszajelzése tiszta maradjon. */
.btn-figyelem {
    position: relative;
    overflow: hidden;
    overflow: clip;
    animation: btn-figyelem-lelegzet 5s var(--ease) infinite;
}
.btn-figyelem::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -55%;
    width: 42%;
    pointer-events: none;
    background: linear-gradient(100deg, transparent, color-mix(in srgb, #fff 55%, transparent), transparent);
    transform: skewX(-18deg);
    animation: btn-figyelem-paszma 5s var(--ease) infinite;
}
.btn-figyelem-nyil {
    width: 20px;
    height: 20px;
    flex: none;
    animation: btn-figyelem-nyil 5s var(--ease) infinite;
}
.btn-figyelem:hover,
.btn-figyelem:active,
.btn-figyelem:focus-visible { animation: none; }

@keyframes btn-figyelem-lelegzet {
    0%, 100% { transform: scale(1);     box-shadow: 0 8px 28px -10px color-mix(in srgb, var(--accent) 60%, transparent); }
    50%      { transform: scale(1.02);  box-shadow: 0 14px 36px -8px color-mix(in srgb, var(--accent) 88%, transparent); }
}
@keyframes btn-figyelem-paszma {
    0%        { left: -55%; }
    45%, 100% { left: 125%; }
}
@keyframes btn-figyelem-nyil {
    0%, 40%, 62%, 100% { transform: translateX(0); }
    50%                { transform: translateX(5px); }
}

/* Kiemelt szó a copy-ban (**így**): vastagabb, ritkított. */
.kiemel {
    font-style: normal;
    font-weight: 800;
    letter-spacing: .06em;
}

.btn-ghost {
    background: transparent;
    color: var(--text);
    border: 1px solid var(--border);
    box-shadow: none;
}
.btn-ghost:hover { background: var(--surface); border-color: var(--muted); }
.btn-text {
    background: none;
    border: 0;
    color: var(--muted);
    font: inherit;
    font-size: 15px;
    padding: 10px 0;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ------------------------------------------------------------- felületek */

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
}
.notice {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--muted);
    font-size: 14px;
    line-height: 1.45;
}
.notice svg { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--accent); }
/* a kvíz e-mail lépésének doboza: ez a lépés egyetlen fontos mondata, nem halk */
.notice-kiemelt {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
    background: color-mix(in srgb, var(--accent) 8%, var(--surface));
    color: var(--text);
    font-size: 15px;
}
.notice-kiemelt .kiemel { letter-spacing: 0; font-weight: 700; color: var(--accent-2); }

/* --------------------------------------------------------------- kvíz */

/* a kerdes cime a valaszok elott erkezik */
.q-title { animation: fel-in 520ms var(--ease) backwards; }
.q-note  { animation: fel-in 520ms 90ms var(--ease) backwards; }

.quiz-head {
    display: grid;
    grid-template-columns: 44px 1fr 44px;
    align-items: center;
    gap: 8px;
}
.quiz-head .counter { text-align: center; font-size: 13px; color: var(--muted); letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.back {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    transition: background var(--t-fast), color var(--t-fast), opacity var(--t-fast);
}
.back:hover { background: var(--surface); color: var(--text); }
.back[disabled] { opacity: 0; pointer-events: none; }
.back svg { width: 22px; height: 22px; }

.progress { height: 3px; background: var(--border); border-radius: 2px; overflow: hidden; }
.progress > i {
    display: block;
    height: 100%;
    background: var(--accent);
    border-radius: 2px;
    box-shadow: 0 0 10px 1px color-mix(in srgb, var(--accent) 55%, transparent);
    transition: width 520ms var(--ease);
}

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

/* A valaszok egymas utan usznak be. `backwards` es nem `both`: az animacio a
   vege utan nem tapad ra az elemre, kulonben leutne az .opt:active scale-t. */
@keyframes opt-in { from { opacity: 0; transform: translateY(12px); } }
@keyframes fel-in { from { opacity: 0; transform: translateY(10px); } }
.opt {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: var(--tap);
    padding: 15px 18px;
    text-align: left;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font: inherit;
    line-height: 1.35;
    cursor: pointer;
    transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast) var(--ease);
    -webkit-tap-highlight-color: transparent;
    animation: opt-in 460ms var(--ease) backwards;
    animation-delay: calc(var(--i, 0) * 70ms + 120ms);
}
.opt:hover { border-color: var(--muted); background: var(--surface-2); }
.opt:active { transform: scale(.985); border-color: var(--accent); }
.opt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* a kvíz első lépése: gyors vagy alapos út. Kártya, nem egysoros válasz —
   itt a döntéshez el kell olvasni, mit kap cserébe a hosszabb kitöltésért. */
.melyseg-opt { flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px 18px; }
.melyseg-fej { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.melyseg-cim { font-weight: 600; font-size: 17px; }
.melyseg-jelzes {
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 12px;
    letter-spacing: .04em;
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 14%, transparent);
}
.melyseg-meta { font-size: 13px; color: var(--accent-2); letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.melyseg-leiras { font-size: 14px; line-height: 1.45; color: var(--muted); }
/* mit kérdezünk, és mit kezd vele a riport — a két út különbsége pontokban */
.melyseg-pontok { margin: 4px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 5px; }
.melyseg-pontok li { position: relative; padding-left: 14px; font-size: 13px; line-height: 1.45; color: var(--text); text-align: left; }
.melyseg-pontok li::before { content: ''; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 70%, transparent); }

/* A kviz oszlopa kitolti a kepernyot. Enelkul a megerosito lepes felul
   osszetorlodott, es alatta maradt egy fel kepernyonyi ures terulet. */
.page-quiz { min-height: 100svh; padding-bottom: 20px; }
.quiz-col { flex: 1; min-height: 0; }

/* A megerosito kepernyo kitolti a maradek helyet: a jel es a mondat egy blokk
   a fuggoleges kozepen, a vezerlok az aljan. A „koppints barhova” igy a szoveg
   alatti ures teruleten is ertelmes celpont. */
.confirm-screen {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 28px;
    min-height: 0;
    cursor: pointer;
}
.confirm-screen:focus-visible { outline: 2px solid var(--accent); outline-offset: 8px; border-radius: var(--radius); }

/* A jel es a mondat egy egyseg, fuggolegesen kozepen. A jel a mondat bal
   szelehez igazodik, nem kozepre: a kevert igazitas volt, ami tort. */
.confirm-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
    min-height: 0;
}
.confirm-foot { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }

/* égi jel a mondat fölött, a szövegoszlop bal szélén */
.confirm-mark {
    display: flex;
    justify-content: flex-start;
    padding-left: 18px;
    position: relative;
}
.confirm-mark svg {
    width: 48px;
    height: 48px;
    color: var(--accent);
    animation: jel-be 760ms var(--ease) backwards;
}
.confirm-mark::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 42px;
    width: 132px;
    height: 132px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    z-index: -1;
    background: radial-gradient(circle, color-mix(in srgb, var(--accent) 16%, transparent) 0%, transparent 66%);
    animation: jel-fény 900ms var(--ease) backwards;
}
@keyframes jel-be {
    from { opacity: 0; transform: rotate(-28deg) scale(.6); }
    60%  { opacity: 1; }
}
@keyframes jel-fény { from { opacity: 0; transform: translate(-50%, -50%) scale(.5); } }

.confirm {
    position: relative;
    padding: 4px 0 4px 18px;
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(21px, 5.6vw, 26px);
    line-height: 1.38;
    text-wrap: pretty;
    animation: fel-in 620ms var(--ease) backwards;
    animation-delay: 260ms;
}
/* a jelolo sav fentrol lefele huzodik le — ettol lesz „lerakott gondolat" */
.confirm::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    border-radius: 2px;
    background: var(--accent);
    transform-origin: top;
    animation: sav-le 560ms var(--ease) backwards;
}
@keyframes sav-le { from { transform: scaleY(0); } }
.confirm::before { animation-delay: 300ms; }

.confirm-hint { font-size: 13px; color: var(--muted); animation: fel-in 500ms 640ms var(--ease) backwards; }

/* Visszaszamlalo: latszik, hogy a lepes szandekos, nem akadas. Az idotartamot
   az Alpine adja be, mert szoveghosszfuggo. */
.confirm-bar {
    width: 100%;
    max-width: 220px;
    height: 2px;
    border-radius: 2px;
    background: var(--border);
    overflow: hidden;
}
.confirm-bar > i {
    display: block;
    height: 100%;
    background: var(--accent);
    transform-origin: left;
    animation: sav-fut linear both;
}
@keyframes sav-fut { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.confirm-foot .btn-ghost { animation: fel-in 500ms 520ms var(--ease) backwards; }

/* ------------------------------------------------------------- űrlapok */

.field { display: flex; flex-direction: column; gap: 6px; }
label, .label { font-size: 14px; color: var(--muted); }
input[type=text], input[type=date], input[type=time], input[type=email], input[type=search], select, textarea {
    width: 100%;
    min-height: 52px;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    font: inherit;
    font-size: 17px;
    color-scheme: dark;
    -webkit-appearance: none;
    appearance: none;
}
select { background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
textarea { resize: vertical; min-height: 110px; line-height: 1.5; }
input:disabled { opacity: .5; }
input::placeholder { color: var(--muted); opacity: .8; }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    cursor: pointer;
    color: var(--text);
    font-size: 15px;
}
.toggle input { width: 22px; height: 22px; margin: 0; accent-color: var(--accent); }

.err { color: var(--danger); font-size: 14px; }

/* időbecslés a kvízben: a két mód, a sáv-gombok, az események */
.idomod { padding: 12px; border: 1px dashed var(--border); border-radius: var(--radius); }
.idomod-opt { flex-direction: column; align-items: flex-start; gap: 4px; animation: none; }
.idomod-cim { font-weight: 600; }
.opt.is-on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.sav-gombok { display: flex; flex-wrap: wrap; gap: 8px; }
.sav-gomb { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-size: 14px; cursor: pointer; }
.sav-gomb.is-on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--surface)); color: var(--accent); }
.esemenyek { display: flex; flex-direction: column; gap: 6px; }
.esemeny-sor { padding: 4px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
.esemeny-sor.is-on { border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); }
.esemeny-sor .toggle { min-height: 40px; font-size: 14.5px; }
.esemeny-mezok { display: grid; grid-template-columns: 90px 1fr; gap: 8px; padding: 0 0 10px 34px; }
.esemeny-mezok input, .esemeny-mezok select { min-height: 42px; padding: 8px 12px; font-size: 15px; }

/* a teaseren: a becsült idő kártyája, átváltás, pontos idő */
.idobecsles { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.idobecsles-gombok { display: flex; flex-wrap: wrap; gap: 8px; }
.idobecsles-gombok .btn-ghost, .idobecsles-sor .btn-ghost { border-radius: var(--radius-sm); font: inherit; font-size: 14px; cursor: pointer; }
.idobecsles-gombok .btn-ghost { padding: 8px 14px; }
.idobecsles-pontos { display: flex; flex-direction: column; gap: 6px; padding-top: 10px; border-top: 1px solid var(--border); }
.idobecsles-sor { display: flex; gap: 8px; }
.idobecsles-sor input { flex: 1; min-width: 0; min-height: 46px; }
.idobecsles-sor .btn-ghost { flex: none; min-height: 46px; padding: 8px 14px; white-space: nowrap; }

/* gépelős kereső */
.typeahead { position: relative; }
.typeahead-list {
    position: absolute;
    left: 0; right: 0; top: calc(100% + 6px);
    z-index: 20;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: 0 16px 40px -12px rgba(0, 0, 0, .6);
    max-height: 264px;
    overflow-y: auto;
    padding: 6px;
}
.typeahead-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 11px 12px;
    background: none;
    border: 0;
    border-radius: 6px;
    color: var(--text);
    font: inherit;
    cursor: pointer;
}
.typeahead-item:hover, .typeahead-item.is-active { background: var(--surface-2); }
.typeahead-item b { color: var(--accent); font-weight: 600; }
.typeahead-empty { padding: 12px; color: var(--muted); font-size: 14px; }

/* ------------------------------------------------------------ felső sáv */

/* Halk: a logo balra, nem ker figyelmet. Csak a folyamat oldalain (kviz, eredmeny,
   fizetes); a kezdolapon nincs, ott a hely a kereke. A hajszalvonal a szelek fele
   eltunik, igy savnak latszik anelkul, hogy elvagna a tartalmat. */
.topbar {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 12px 0 10px;
}
.topbar::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(to right, transparent, color-mix(in srgb, var(--accent) 38%, transparent), transparent);
}
/* A kvizben a halado-sav mar ad egy vonalat: ne legyen ket vonal egymas alatt. */
.page-quiz .topbar::after { display: none; }
.topbar a { text-decoration: none; }

/* ------------------------------------------------------------------ a logo */
/* Jel + wordmark. A jel a kerek, a horizont es a kelo pont: az ascendens maga. */
.logo {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--accent);
    opacity: .92;
    transition: opacity var(--t) var(--ease);
}
.topbar a:hover .logo,
.topbar a:focus-visible .logo { opacity: 1; }
.logo-jel { width: 30px; height: 28px; flex: none; overflow: visible; }
.logo-jel .ring { fill: none; stroke: currentColor; stroke-width: 1.1; opacity: .55; }
.logo-jel .hz   { fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; opacity: .8; }
.logo-jel .rise { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.logo-jel .star { fill: var(--accent-2); }
.wordmark {
    display: inline-flex;
    align-items: baseline;
    gap: 1px;
    font-family: var(--font-display);
    font-size: 18px;
    letter-spacing: .01em;
    line-height: 1;
}
.wordmark b { font-weight: 600; }
.wordmark i { font-style: italic; font-weight: 400; color: color-mix(in srgb, var(--accent) 70%, var(--muted)); }

/* --------------------------------------------------------------- a kerék */

.wheel {
    width: 100%;
    max-width: 420px;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
    position: relative;
}
.wheel svg {
    width: 100%;
    height: 100%;
    display: block;
    /* A Kerykeion inline style-t tesz az <svg>-re (background-color: paper-1),
       ezért kell az !important — anélkül fekete négyzet marad a kerék mögött. */
    background-color: transparent !important;
    /* Kerykeion CSS-változók: a papír a funnel háttere, a vonalak a szövegszín. */
    --kerykeion-chart-color-paper-1: var(--bg);
    --kerykeion-chart-color-paper-0: var(--text);
    --kerykeion-chart-color-houses-radix-line: color-mix(in srgb, var(--accent) 55%, transparent);
    --kerykeion-chart-color-zodiac-radix-ring-0: var(--border);
    --kerykeion-chart-color-zodiac-radix-ring-1: var(--surface-2);
    --kerykeion-chart-color-zodiac-radix-ring-2: var(--border);
    --kerykeion-chart-color-house-number: var(--muted);
}
/* A háttérkor is paper-1-gyel van kitöltve — ez adja a fekete korongot.
   A belső körök (Second/Third_Circle) maradnak, azok adják a rétegződést. */
.wheel svg [kr\:node="Background_Circle"] circle {
    fill: transparent;
    stroke: transparent;
}
.wheel::after {
    /* halvány glow a kerék mögé, hogy „lebegjen" */
    content: '';
    position: absolute;
    inset: -8%;
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--accent) 12%, transparent) 0%, transparent 62%);
}
.wheel-in { animation: wheel-in 900ms var(--ease) both; }

/* nagyítás: a kerék gomb, kattintásra teljes képernyős réteg */
.wheel-zoom { width: 100%; margin: 0 auto; position: relative; }
.wheel-zoom-gomb { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; position: relative; -webkit-tap-highlight-color: transparent; }
.wheel-zoom-gomb:focus-visible { outline: 3px solid var(--accent-2); outline-offset: 6px; border-radius: 50%; }
.wheel-zoom-gomb .wheel { max-width: none; }
.wheel-zoom-jel {
    position: absolute;
    right: 4px;
    bottom: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--surface) 90%, transparent);
    color: var(--muted);
    transition: color .15s ease, border-color .15s ease;
}
.wheel-zoom-jel svg { width: 18px; height: 18px; }
.wheel-zoom-gomb:hover .wheel-zoom-jel { color: var(--accent); border-color: var(--accent); }
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: color-mix(in srgb, var(--bg) 94%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    cursor: zoom-out;
}
.lightbox-wheel { width: min(94vw, 94vh, 1100px); max-width: none; cursor: default; }
.lightbox-bezar {
    position: absolute;
    top: 14px;
    right: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
}
.lightbox-bezar svg { width: 20px; height: 20px; }
.lightbox-bezar:focus-visible { outline: 3px solid var(--accent-2); outline-offset: 3px; }
@keyframes wheel-in {
    from { opacity: 0; transform: rotate(-18deg) scale(.92); }
    to   { opacity: 1; transform: none; }
}
.rise { animation: rise 600ms var(--ease) both; }
.rise-2 { animation: rise 600ms 220ms var(--ease) both; }
.rise-3 { animation: rise 600ms 400ms var(--ease) both; }
@keyframes rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

.sign { text-align: center; }
.sign .eyebrow { margin-bottom: 6px; }
.sign h1 { font-size: clamp(44px, 13vw, 64px); line-height: 1; }
.sign .deg { display: block; margin-top: 6px; font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 22px; color: var(--accent); }
.ruler { text-align: center; color: var(--muted); font-size: 15px; }

/* kompakt pont-sáv: Nap · Hold · Asc */
.points {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
.points > div { background: var(--surface); padding: 14px 8px; text-align: center; }
.points .k { font-size: 12px; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; }
.points .v { font-family: var(--font-display); font-size: 19px; margin-top: 4px; }
.points .d { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* interaktív pontlista (riport) */
.points-list { display: flex; flex-direction: column; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.point-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 12px;
    align-items: center;
    padding: 12px 16px;
    background: var(--surface);
    border: 0;
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background var(--t-fast);
}
.point-row:hover { background: var(--surface-2); }
.point-row.is-active { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.point-row .n { font-weight: 600; }
.point-row .s { color: var(--muted); font-size: 15px; font-variant-numeric: tabular-nums; }
.point-row .h { color: var(--muted); font-size: 13px; }

/* ------------------------------------------------------- teaser-szöveg */

.teaser-text { font-family: var(--font-display); font-weight: 400; font-style: normal; font-size: 18px; line-height: 1.65; }
.teaser-text p { font-family: var(--font-body); }
/* az előzetes teljes terjedelmében látszik — nincs vágás, nincs elmosás */
.cutoff { position: relative; display: flex; flex-direction: column; gap: 22px; }
.cutoff-fade { position: relative; }
.cutoff-fade p + p { margin-top: .8em; }
/* az előzetes alatt: a kérdés, a magyarázat (benne a lakat), és a görgető link */
.cutoff-tovabb {
    position: relative;
    padding-top: 18px;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
}
.cutoff-label {
    margin: 0;
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: 22px;
    line-height: 1.3;
    color: var(--accent);
}
.cutoff-label .kiemel { color: var(--accent-2); }
.cutoff-lead {
    margin: 0;
    max-width: 34em;
    font-size: 15px;
    line-height: 1.55;
    color: var(--muted);
}
.cutoff-lead .kiemel { color: var(--text); font-style: normal; font-weight: 600; }
.lakat-inline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px; height: 20px;
    margin: 0 1px;
    border-radius: 5px;
    background: color-mix(in srgb, var(--accent) 16%, transparent);
    color: var(--accent);
    vertical-align: -5px;
}
.lakat-inline svg { width: 13px; height: 13px; }
.cutoff-scroll {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    padding: 9px 16px;
    border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
    border-radius: 999px;
    color: var(--accent);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .01em;
    text-decoration: none;
    transition: background var(--t-fast), border-color var(--t-fast);
}
.cutoff-scroll:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); border-color: var(--accent); }
.cutoff-scroll-nyil { width: 16px; height: 16px; transform: rotate(90deg); animation: cutoff-bob 1.6s ease-in-out infinite; }
@keyframes cutoff-bob { 0%, 100% { transform: rotate(90deg) translateX(0); } 50% { transform: rotate(90deg) translateX(3px); } }
@media (prefers-reduced-motion: reduce) { .cutoff-scroll-nyil { animation: none; } }

/* fejezetlista */
.chapters { display: flex; flex-direction: column; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.chapter {
    display: grid;
    grid-template-columns: 28px 1fr 22px;
    gap: 12px;
    align-items: center;
    padding: 13px 16px;
    background: var(--surface);
    color: var(--text);
    text-decoration: none;
    transition: background var(--t-fast);
}
.chapter .i { font-family: var(--font-display); font-style: italic; color: var(--muted); font-size: 15px; }
.chapter .t { font-size: 15.5px; line-height: 1.3; }
.chapter svg { width: 18px; height: 18px; color: var(--muted); }
.chapter.is-locked .t { color: var(--muted); }
.chapter.is-ready { background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.chapter.is-ready svg { color: var(--accent); }
.chapter.is-ready:hover { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); }
.chapter.is-pending .t { color: var(--muted); }

/* ár + CTA blokk */
.offer { display: flex; flex-direction: column; gap: 10px; align-items: stretch; text-align: center; }
.offer .price { font-family: var(--font-display); font-size: 40px; line-height: 1.05; }
.offer .price small { font-size: 15px; color: var(--muted); font-family: var(--font-body); font-weight: 400; }

/* a teaser fejezetvalasztoja: pipalhato sorok, hookkal es arral */
.chapter.is-selectable { cursor: pointer; }
.chapter.is-selectable .t { color: var(--text); }
.chapter.is-selectable:hover { background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.chapter.is-selectable:has(.ch-check:checked) { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); box-shadow: inset 3px 0 0 var(--accent); }
.chapter .ch-check { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.chapter .t small { display: block; }
/* az ar sajat cellaban, pirulaként: igy egy pillantasra latszik, mibe kerul egy fejezet kulon */
.chapter.has-price { grid-template-columns: 28px 1fr auto 22px; }
.chapter .ch-price {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 9px; border-radius: 999px;
    border: 1px solid var(--border); background: var(--surface-2);
    color: var(--text); font-size: 13px; font-weight: 600; white-space: nowrap;
}
.chapter .ch-price .ch-lock { width: 12px; height: 12px; color: var(--accent); }
.chapter.is-selectable:has(.ch-check:checked) .ch-price { border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: color-mix(in srgb, var(--accent) 14%, var(--surface)); }
/* a cutoff görgető linkjének célpontja — a felső sáv alá ne csússzon */
#ezt-kapod, #ajanlat { scroll-margin-top: 72px; }
/* az LLM egysorosa: ez az, amire bolint — a hook (teny) alatta halkabban */
.chapter .ch-line { color: var(--text); font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 14.5px; line-height: 1.35; margin-top: 3px; }
.chapter .ch-badge { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); font-size: 11px; font-weight: 600; letter-spacing: .04em; vertical-align: middle; }
.chapter.is-ajanlott { box-shadow: inset 3px 0 0 var(--accent); }
/* a kvizvalasz tukrozese */
.tukor { border-left: 3px solid var(--accent); padding: 8px 14px; color: var(--text); font-size: 15.5px; line-height: 1.5; }
.tukor b { font-family: var(--font-display); font-weight: 400; font-style: italic; }
.teaser-swap { transition: opacity var(--t) var(--ease); }

/* listaar athuzva, bevezeto ar kiemelve */
.price-block { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.price-list { font-family: var(--font-display); font-size: 18px; color: var(--muted); }
.price-list s { text-decoration-thickness: 2px; text-decoration-color: color-mix(in srgb, var(--danger) 75%, transparent); }
.price-list small { font-family: var(--font-body); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; margin-left: 8px; }
.badge-intro {
    display: inline-block;
    vertical-align: middle;
    margin-left: 8px;
    padding: 3px 9px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 16%, transparent);
    color: var(--accent);
    font-family: var(--font-body);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.price-block > .badge-intro { margin-left: 0; }
.price-list b { font-family: var(--font-body); font-size: 12px; font-weight: 700; color: var(--accent); margin-left: 8px; padding: 2px 7px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); white-space: nowrap; }
/* miért akciós az ár, és meddig: saját keretben, nem lábjegyzetként */
.akcio-miert {
    margin-top: 8px; padding: 12px 14px; text-align: left;
    border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border));
    border-left-width: 3px; border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--accent) 8%, var(--surface));
    font-size: 14.5px; line-height: 1.5;
}
.akcio-miert strong { display: block; font-family: var(--font-display); font-weight: 400; font-style: italic; font-size: 16px; margin-bottom: 2px; }
.akcio-miert p { margin: 0; color: var(--text); }
.offer .garancia a { color: var(--accent); }
/* a minta riport: keretes gomb, hogy ne vesszen el a lábjegyzetek közt */
.offer .minta { display: flex; flex-direction: column; gap: 6px; padding-top: 12px; border-top: 1px dashed var(--border); }
.offer .minta .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }

/* ezt kapod: a jelentes bemutatasa */
#ezt-kapod h2 { font-family: var(--font-display); font-weight: 400; }
.ezt-kapod-lead { font-size: 16px; line-height: 1.55; }
.ezt-kapod-lead .kiemel { color: var(--accent); }

/* egyben vagy fejezetenkent — ket egyenrangu ut egymas mellett */
.hasonlit { display: flex; flex-direction: column; gap: 14px; padding: 16px; }
.hasonlit-oszlopok { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hasonlit-opt {
    display: flex; flex-direction: column; gap: 3px;
    padding: 14px 12px 12px;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--surface-2);
    text-align: center;
}
.hasonlit-nev { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.hasonlit-ar { font-family: var(--font-display); font-size: 24px; line-height: 1.15; margin-top: 2px; }
.hasonlit-mellek { font-size: 12.5px; color: var(--muted); line-height: 1.35; }
.hasonlit-lead { font-size: 14.5px; line-height: 1.5; color: var(--muted); text-align: center; }
@media (max-width: 360px) { .hasonlit-oszlopok { grid-template-columns: 1fr; } }

/* a kijeloles elo savja: a lista utan all, de amig a lista latszik, a kepernyo aljahoz tapad */
.kijeloles {
    position: sticky; bottom: 10px; z-index: 5;
    padding: 14px 16px;
    background: color-mix(in srgb, var(--surface) 96%, var(--bg));
    box-shadow: 0 -8px 30px -12px rgba(0,0,0,.55), 0 10px 30px -14px rgba(0,0,0,.5);
    transition: border-color var(--t-fast), background var(--t-fast);
}
.kijeloles:not(.is-ures) { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.kijeloles.is-mind { background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.kijeloles-ures { display: flex; flex-direction: column; gap: 2px; text-align: center; font-size: 14.5px; }
.kijeloles-mind { font-size: 15px; line-height: 1.45; text-align: center; }
.kijeloles-sorok { display: flex; flex-direction: column; gap: 1px; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; background: var(--border); }
.kijeloles-sor { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 12px; background: var(--surface); font-size: 14.5px; }
.kijeloles-sor strong { font-family: var(--font-display); font-weight: 400; font-size: 20px; white-space: nowrap; }
.kijeloles-lead { line-height: 1.45; text-align: center; color: var(--muted); }
.kijeloles-gombok { display: flex; flex-direction: column; gap: 8px; }
@media (min-width: 640px) { .kijeloles-gombok { flex-direction: row; } .kijeloles-gombok .btn { flex: 1 1 0; } }

/* a fizetes osszesito sorai */
.tetel { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.tetel > .num { white-space: nowrap; }
.tetel-osszeg { border-top: 1px solid var(--border); padding-top: 10px; }
.tetel .price-list { font-size: 14px; }

/* zart fejezet a riporton: szaggatott kartya, kiegeszites-ajanlattal */
.upsell { border-style: dashed; gap: 10px; }
.upsell .btn, .upsell .btn-ghost { align-self: flex-start; }

/* ragadós CTA */
.sticky-cta {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 30;
    padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--border);
    transform: translateY(110%);
    transition: transform var(--t) var(--ease);
    font-size: 15px !important;
}
.sticky-cta.is-visible { transform: none; }
.sticky-cta .btn { width: 100%; max-width: var(--col); margin: 0 auto; display: flex; }

/* a megosztott oldal: a fejléc két gombja, és a két gombos alsó sáv */
.hero-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.hero-cta .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: 1 1 100%; }
@media (min-width: 640px) { .hero-cta .btn { flex: 1 1 auto; } }
.sticky-ketto .sticky-belso { display: flex; gap: 10px; max-width: 560px; margin: 0 auto; }
.sticky-ketto .btn { flex: 3; margin: 0; align-items: center; justify-content: center; white-space: nowrap; }
.sticky-ketto .btn-ghost { flex: 2; }
.page-megosztas .footer { padding-bottom: 90px; }

/* az eredményoldal: a két gombos alsó sáv betöltés után mindig lent van; a kijelölés sávja fölé áll */
.page-teaser .footer { padding-bottom: 90px; }
.page-teaser .kijeloles { bottom: calc(92px + env(safe-area-inset-bottom)); }
.page-teaser .sticky-ketto .btn { white-space: normal; text-align: center; line-height: 1.2; padding: 0 14px; font-size: 16px; }

/* az eredményoldalról megosztott ascendens: csak a jegy */
.asc-jel { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.asc-glyph { width: 72px; height: 72px; color: var(--accent); margin: 14px 0 6px; }
.asc-lead { max-width: 34ch; margin-top: 10px; text-align: center; }
.asc-benyomas-szoveg { font-family: var(--font-display); font-size: 21px; line-height: 1.4; }

/* betöltő réteg a teaseren */
.loader {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--gutter);
    transition: opacity 500ms var(--ease), visibility 500ms;
}
.loader.is-done { opacity: 0; visibility: hidden; }
.loader-box { width: 100%; max-width: 320px; display: flex; flex-direction: column; gap: 14px; }
.loader-line { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 16px; opacity: .35; transition: opacity var(--t); }
.loader-line.is-on { opacity: 1; color: var(--text); }
.loader-line.is-ok { opacity: .7; }
.loader-line i {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--border);
    flex: none;
}
.loader-line.is-on i { background: var(--accent); animation: pulse 900ms ease-in-out infinite; }
.loader-line.is-ok i { background: var(--accent); }
@keyframes pulse { 50% { transform: scale(1.7); opacity: .5; } }


/* --------------------------------------------------------------- riport */

/* fejezet-navigáció: mobilon ragadós sáv balra zárva, a lista hamburger mögött;
   desktopon (lent) állandó oldalsáv */
.riport-test, .riport-chart { display: contents; }
.fnav {
    position: sticky;
    top: 0;
    z-index: 25;
    margin: 0 calc(-1 * var(--gutter));
    padding: 6px var(--gutter);
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.fnav-gomb {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    padding: 6px 12px 6px 10px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 14px;
    cursor: pointer;
    text-align: left;
}
.fnav-gomb:hover { border-color: var(--muted); }
.fnav-gomb:focus-visible { outline: 3px solid var(--accent-2); outline-offset: 3px; }
.fnav-gomb svg { width: 16px; height: 16px; flex: none; }
.fnav-cimke { color: var(--muted); flex: none; }
.fnav-aktualis { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fnav-aktualis::before { content: '\00b7  '; color: var(--muted); }
.fnav-fejlec { display: none; }
.fnav-lista {
    position: absolute;
    left: var(--gutter);
    top: calc(100% - 4px);
    width: min(360px, calc(100vw - 2 * var(--gutter)));
    max-height: min(70vh, 520px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding: 6px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--surface);
    box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .55);
}
.fnav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    color: var(--muted);
    text-decoration: none;
    font-size: 14.5px;
    line-height: 1.3;
}
.fnav-item:hover { background: var(--surface-2); color: var(--text); }
.fnav-szam {
    flex: none;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--border);
    font-size: 12px;
}
.fnav-cim { flex: 1; min-width: 0; }
.fnav-ikon { width: 16px; height: 16px; flex: none; color: var(--muted); }
.fnav-item.is-ready { color: var(--text); }
.fnav-item.is-ready .fnav-ikon { color: var(--accent); }
.fnav-item.is-active { background: color-mix(in srgb, var(--accent) 10%, var(--surface)); color: var(--text); }
.fnav-item.is-active .fnav-szam { border-color: var(--accent); color: var(--accent); }
.fnav-item.is-writing .fnav-szam { border-color: var(--accent); animation: pulse 1s ease-in-out infinite; }
.fnav-item.is-locked { opacity: .55; }
.fnav-item.is-nyers { margin-top: 4px; border-top: 1px solid var(--border); border-radius: 0 0 var(--radius-sm) var(--radius-sm); color: var(--accent); }

/* lebegő gyorsgombok a jobb alsó sarokban: kerek ikon, a felirat balra nyílik ki */
.fab-csoport {
    position: fixed;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom));
    z-index: 30;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    transition: transform .22s ease, opacity .22s ease;
}
/* olvasás közben (lefelé görgetve) lecsúszik a képernyő aljáról; felfelé görgetve visszajön */
.fab-csoport.is-rejtve { transform: translateY(calc(100% + 32px)); opacity: 0; pointer-events: none; }
.fab {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--text);
    font: inherit;
    text-decoration: none;
    cursor: pointer;
}
.fab-kor {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border));
    background: color-mix(in srgb, var(--surface) 92%, var(--accent));
    color: var(--accent);
    box-shadow: 0 10px 28px -10px rgba(0, 0, 0, .7);
    transition: transform .15s ease, border-color .15s ease;
}
.fab-kor svg { width: 22px; height: 22px; }
.fab:hover .fab-kor, .fab:focus-visible .fab-kor { transform: translateY(-1px); border-color: var(--accent); }
.fab:focus-visible { outline: none; }
.fab:focus-visible .fab-kor { outline: 3px solid var(--accent-2); outline-offset: 3px; }
.fab-cimke {
    font-size: 13.5px;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface);
    box-shadow: 0 8px 22px -10px rgba(0, 0, 0, .6);
    white-space: nowrap;
    opacity: 0;
    transform: translateX(6px);
    pointer-events: none;
    transition: opacity .15s ease, transform .15s ease;
}
.fab:hover .fab-cimke, .fab:focus-visible .fab-cimke, .fab.is-visszajelzes .fab-cimke { opacity: 1; transform: none; }
.fab.is-visszajelzes .fab-cimke { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); }

/* a nagy lebegő gombok: mobilon mindkettő felirata az első másodpercek után ikonra csukódik
   (is-csukodo), a riport végén újra kinyílik; desktopon mindkettő kint marad */
.fab-nagy .fab-cimke { opacity: 1; transform: none; pointer-events: auto; font-size: 14px; }
.fab-nagy.is-elsodleges .fab-kor { background: var(--accent); color: var(--bg); border-color: var(--accent); box-shadow: 0 10px 28px -8px color-mix(in srgb, var(--accent) 70%, transparent); }
.fab-nagy.is-elsodleges .fab-cimke { border-color: color-mix(in srgb, var(--accent) 60%, var(--border)); color: var(--text); }
.fab-nagy.is-elsodleges .fab-kor::after {
    /* egyszeri figyelemfelhívó gyűrű a betöltés után */
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid var(--accent);
    opacity: 0;
    animation: fab-gyuru 1.6s ease-out 3;
}
.fab-kor { position: relative; }
@keyframes fab-gyuru {
    0% { transform: scale(.85); opacity: .9; }
    100% { transform: scale(1.5); opacity: 0; }
}
.fab-jelveny {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--text);
    color: var(--bg);
    font-size: 11.5px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
    border: 2px solid var(--bg);
}
.fab-nagy.is-csukodo .fab-cimke { opacity: 0; transform: translateX(6px); pointer-events: none; }
.fab-csoport.is-nyitott .fab-nagy.is-csukodo .fab-cimke,
.fab-nagy.is-csukodo:hover .fab-cimke, .fab-nagy.is-csukodo:focus-visible .fab-cimke { opacity: 1; transform: none; }

/* az ajánló a riport tetején: ikon, szöveg, gomb, bezárás */
.ajanlo { position: relative; display: flex; gap: 14px; align-items: flex-start; border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); background: color-mix(in srgb, var(--accent) 6%, var(--surface)); padding-right: 44px; }
.ajanlo-ikon { flex: none; display: none; width: 36px; height: 36px; align-items: center; justify-content: center; border-radius: 50%; background: var(--accent); color: var(--bg); }
.ajanlo-ikon svg { width: 20px; height: 20px; }
@media (min-width: 640px) { .ajanlo-ikon { display: inline-flex; } }
.ajanlo-szoveg { gap: 6px; min-width: 0; }
.ajanlo-szoveg p { margin: 0; }
.ajanlo-gomb { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; margin-top: 4px; padding: 9px 14px; font-size: 14px; }
.ajanlo-bezar { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: none; color: var(--muted); cursor: pointer; }
.ajanlo-bezar:hover { color: var(--text); background: var(--surface-2); }
.ajanlo-bezar svg { width: 18px; height: 18px; }

/* a megosztás panelje: alul felcsúszó lap, desktopon középen */
.sheet-hatter {
    position: fixed;
    inset: 0;
    z-index: 40;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: rgba(0, 0, 0, .55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.sheet {
    width: 100%;
    max-width: 560px;
    max-height: 88vh;
    overflow-y: auto;
    padding: 22px 20px calc(22px + env(safe-area-inset-bottom));
    border: 1px solid var(--border);
    border-radius: var(--radius) var(--radius) 0 0;
    background: var(--surface);
    box-shadow: 0 -20px 60px -20px rgba(0, 0, 0, .8);
}
.sheet .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.sheet .btn-text { align-self: flex-start; padding: 6px 0; }
.sheet-link { display: flex; gap: 8px; }
.sheet-link input { flex: 1; min-width: 0; min-height: 44px; padding: 8px 12px; font-size: 13.5px; color: var(--muted); }
.sheet-link .btn-ghost { flex: none; min-height: 44px; padding: 8px 14px; }

/* a megosztás panel: mi látszik (zöld pipa), mi nem (piros X) */
.latszik-lista { display: grid; gap: 12px 20px; margin: 4px 0; }
@media (min-width: 640px) { .latszik-lista { grid-template-columns: 1fr 1fr; } }
.latszik-lista ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.latszik-lista li { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text); }
.latszik-lista li svg { width: 16px; height: 16px; flex: none; }
.latszik-lista .is-igen svg { color: #7BC47F; }
.latszik-lista .is-nem svg { color: var(--danger); }
.latszik-lista .is-nem li { color: var(--muted); }

/* a vélemény-űrlap hozzájárulása */
.toggle.velemeny-hozzajarul { align-items: flex-start; }
.toggle-felso { align-items: flex-start; }
.toggle-felso input { margin-top: 2px; flex: none; }
/* kiskorú alany: a nyilatkozat kiemelt dobozban, hogy ne olvadjon bele a többi pipába */
.kiskoru { gap: 6px; padding: 12px; border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border)); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.velemeny-figyelem { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface-2); color: var(--muted); font-size: 13px; line-height: 1.45; }
.velemeny-figyelem svg { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--accent); }

/* a vélemények: a riporton a lista, a megosztott oldalon az űrlap skálája */
.velemeny-lista { display: flex; flex-direction: column; }
.velemeny-sor { display: flex; flex-direction: column; gap: 6px; padding: 12px 0; border-top: 1px solid var(--border); }
.velemeny-sor p { margin: 0; }
.velemeny-fej { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 12px; font-size: 14px; }
.pontok { display: inline-flex; align-items: center; gap: 3px; }
.pontok i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--border); }
.pontok i.is-on { background: var(--accent); }
.pontok small { margin-left: 6px; color: var(--muted); font-size: 12.5px; }
.skala { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.skala-gomb {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 4px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    text-align: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.skala-gomb input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.skala-gomb:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--surface)); }
.skala-gomb:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.skala-szam { font-family: var(--font-display); font-size: 22px; line-height: 1; }
.skala-gomb:has(input:checked) .skala-szam { color: var(--accent); }
.skala-cimke { font-size: 11px; line-height: 1.2; color: var(--muted); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.page-megosztas .elem-link { display: none; }
.sajat-cta .btn, .masnak-cta .btn { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; }
.masnak-cta { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }

/* desktop: széles oldal, bal oldalsáv a fejezetekkel, a chart kerék és a pontok egymás mellett */
@media (min-width: 1024px) {
    .page-riport { max-width: 1160px; padding-top: 40px; }
    .riport-test {
        display: grid;
        grid-template-columns: 250px minmax(0, 1fr);
        gap: 48px;
        align-items: start;
    }
    .riport-test > .fnav {
        position: sticky;
        top: 24px;
        margin: 0;
        padding: 0;
        background: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    .fnav-gomb { display: none; }
    .fnav-fejlec { display: block; padding: 4px 12px 8px; }
    .fnav-lista {
        display: flex !important;
        position: static;
        width: auto;
        max-height: calc(100vh - 48px);
        padding: 0;
        border: 0;
        background: none;
        box-shadow: none;
    }
    .riport-fo { min-width: 0; max-width: 780px; }
    .riport-chart {
        display: grid;
        grid-template-columns: 300px minmax(0, 1fr);
        grid-template-areas: "kerek pontok" "elemek pontok";
        gap: 22px;
        align-items: start;
    }
    .riport-kerek { grid-area: kerek; }
    .riport-pontok { grid-area: pontok; }
    .riport-elemek { grid-area: elemek; }
    .section { scroll-margin-top: 24px; }
    .sheet-hatter { align-items: center; padding: 24px; }
    .sheet { border-radius: var(--radius); padding: 28px; }
    .skala-cimke { font-size: 12px; }
    .fab-nagy.is-csukodo .fab-cimke { opacity: 1; transform: none; pointer-events: auto; }

    /* a lábléc a széles oldalon: nyilatkozat balra, linkek és copyright jobbra */
    .page-riport .footer {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "nyilatkozat linkek" "nyilatkozat copy";
        gap: 10px 48px;
        align-items: start;
    }
    .page-riport .footer-disclaimer { grid-area: nyilatkozat; max-width: 72ch; }
    .page-riport .footer-links { grid-area: linkek; flex-direction: column; align-items: flex-end; gap: 6px; text-align: right; }
    .page-riport .footer-copy { grid-area: copy; text-align: right; align-self: end; }
}

.prose { font-size: 17.5px; line-height: 1.7; max-width: 66ch; }
.prose p + p { margin-top: 1.1em; }
.section { scroll-margin-top: 72px; display: flex; flex-direction: column; gap: 14px; padding-top: 10px; }
.section h2 { font-size: 26px; }
.section .eyebrow { margin-bottom: -6px; }

.bars { display: flex; flex-direction: column; gap: 10px; }
.bar-row { display: grid; grid-template-columns: 76px 1fr 40px; gap: 12px; align-items: center; font-size: 14px; }
.bar-row .l { color: var(--muted); }
.bar-track { height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; }
.bar-fill { height: 100%; background: var(--accent); border-radius: 3px; }
.bar-row .p { text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); }

.skeleton {
    border-radius: 6px;
    background: linear-gradient(90deg, var(--surface) 25%, var(--surface-2) 50%, var(--surface) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.4s linear infinite;
}
@keyframes shimmer { to { background-position: -200% 0; } }
.skeleton-line { height: 14px; margin: 8px 0; }
.skeleton-line.w-60 { width: 60%; }
.skeleton-line.w-80 { width: 80%; }

/* --------------------------------------------------------------- lábléc */

.footer {
    margin-top: auto;
    padding-top: 24px;
    border-top: 1px solid var(--border);
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--muted);
    display: flex;
    flex-direction: column;
    gap: 12px;
}
/* A jogi nyilatkozat: olvashatónak kell lennie, de nem viheti el a fókuszt. */
.footer-disclaimer { max-width: 62ch; opacity: .85; }
.footer-links { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.footer-links a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
.footer-links a:hover { color: var(--text); border-bottom-color: var(--border); }
.footer-copy { opacity: .7; }
/* a kompakt lábléc a kvízben: egy halk sor a lap alján, nem versenyez a kérdéssel */
.footer-kompakt { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 14px; padding-top: 14px; margin-top: 28px; font-size: 12px; opacity: .8; }
.footer-kompakt .footer-links { justify-content: center; gap: 4px 12px; }

.footer-suti { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; border-bottom: 1px solid transparent; }
.footer-suti:hover { color: var(--text); border-bottom-color: var(--border); }

/* ------------------------------------------------------- elállási funkció (/elallas) */

/* A rögzített nyilatkozat adatlapja: címke fölött, érték alatta — telefonon is olvasható. */
.adatlap { display: grid; gap: 2px 18px; margin: 0; }
.adatlap dt { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.adatlap dd { margin: 0 0 14px; }
.adatlap dd:last-child { margin-bottom: 0; }
.adatlap .adatlap-szoveg { white-space: pre-wrap; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
@media (min-width: 620px) {
    .adatlap { grid-template-columns: 200px 1fr; align-items: baseline; }
    .adatlap dt { padding-top: 2px; }
}

/* ------------------------------------------------------------- sütiwidget */

/* Alsó lap, nem modális: az oldal mögötte olvasható marad (nincs sütifal). A két fő gomb
   szándékosan egyforma — az elutasítás nem lehet nehezebb, mint az elfogadás. */
.suti {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 70;
    display: flex;
    justify-content: center;
    padding: 0 12px calc(12px + env(safe-area-inset-bottom));
    pointer-events: none;
}
.suti-kartya {
    pointer-events: auto;
    width: 100%;
    max-width: 560px;
    max-height: calc(100vh - 24px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 18px 50px -12px rgba(0, 0, 0, .55);
}
.suti-cim { margin: 0; font-size: 16px; font-weight: 600; }
.suti-szoveg { margin: 0; font-size: 14px; line-height: 1.55; color: var(--muted); }
.suti-szoveg a { color: var(--text); }
.suti-kategoriak { display: flex; flex-direction: column; gap: 10px; }
.suti-kategoria { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.suti-kategoria .micro { margin: 0; }
.suti-kategoria-fej { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 32px; font-size: 15px; font-weight: 600; }
/* A gombok HELYE az egyetlen, amivel az elfogadás felé terelünk: széles képernyőn az
   „Elfogadom mind” jobbra van (a megerősítő gomb megszokott helye), telefonon a lap
   legalján, teljes szélességben (hüvelykujj-zóna), a „Beállítások” pedig a gombok fölött.
   Ennél tovább NEM mehetünk: a két gomb mérete, színe, betűsúlya egyforma marad, és az
   elutasítás nem lehet link vagy halványabb gomb. Az EDPB 03/2022 iránymutatása és a NAIH
   szerint ilyenkor a hozzájárulás érvénytelen — és vele a pixel minden adata jogalap nélküli. */
.suti-gombok { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.suti-gombok .btn { padding: 0 12px; font-size: 15px; box-shadow: none; }
.suti-beallitas { align-self: flex-start; padding: 0; font-size: 14px; }
.suti-also { display: flex; flex-direction: column; align-items: center; gap: 4px; }
@media (max-width: 560px) {
    .suti-gombok { grid-template-columns: 1fr; }
}

/* ----------------------------------------------------------- jogi oldalak */

.legal { display: flex; flex-direction: column; gap: 14px; max-width: 68ch; font-size: 15.5px; line-height: 1.65; }
.legal h2 { font-size: 19px; margin-top: 12px; }
.legal ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
/* A Fogyasztóbarát-dokumentum (jogi/beagyazott) világos háttérre készült: a szövege fix
   majdnem fekete (rgb(26,26,26)), a mi sötét hátterünkön olvashatatlan volt. Ezért papírlapot
   kap, és a hosszú szöveg széles képernyőn szélesebb hasábot. A linkek a mi arany színünket
   öröklik, ami a világos lapon gyenge kontrasztú: azok sötétebb aranyat kapnak. */
.legal-beagyazott {
    max-width: none;
    background: #f7f4ee;
    color: #1a1a1a;
    border-radius: var(--radius);
    padding: 24px 18px 40px;
}
.legal-beagyazott a { color: #7a4e12; }
@media (min-width: 900px) {
    .page-jogi { max-width: 900px; }
    .legal-beagyazott { padding: 36px 40px 48px; }
}
.legal a { color: var(--accent); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); }
.legal-dl { margin: 0; }
.legal-dl dt { font-weight: 600; }
.legal-dl dd { margin: 2px 0 12px; color: var(--muted); }
.legal-nav { display: flex; flex-wrap: wrap; gap: 8px; }

/* Kitöltetlen cégadat: szándékosan kiabál, hogy élesben ne maradjon benne. */
.ph {
    background: color-mix(in srgb, var(--danger) 22%, transparent);
    color: var(--text);
    border-radius: 4px;
    padding: 0 5px;
    font-style: italic;
}
.ph::before { content: '['; }
.ph::after  { content: ']'; }

/* ------------------------------------------------------------- utilities */

[x-cloak] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
hr { border: 0; border-top: 1px solid var(--border); margin: 0; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0s !important; animation-delay: 0s !important; transition-duration: 0s !important; }
    html { scroll-behavior: auto; }
}

/* ========================================================================
   KEZDŐLAP
   A cél nem díszítés: a kerék a landing érve. Ami mozog, az mind egy
   kiszámolt értéket mutat — a gyűrű a valódi ascendenst, a szalag a valódi
   nyári időszámítás-sávokat. Minden animáció kikapcsol reduced-motionnél.
   ======================================================================== */

.page-landing { padding-bottom: 96px; gap: 0; }
.page-landing > * { width: 100%; }

/* szekcióritmus: nagy levegő a blokkok közt, szoros a blokkon belül */
.lp-sec { padding: 56px 0; display: flex; flex-direction: column; gap: 20px; }
.lp-sec + .lp-sec { border-top: 1px solid var(--border); }
.lp-sec-head { display: flex; flex-direction: column; gap: 10px; }

/* --------------------------------------------------------------- hero */

.lp-root { display: contents; }

.lp-hero {
    position: relative;
    overflow: hidden;
    overflow: clip;
    min-height: 100svh;
    padding: 18px 0 24px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}
/* lassan sodródó csillagpor a hero mögé */
.lp-sky {
    position: absolute;
    inset: -10% -20% auto;
    height: 120%;
    z-index: -2;
    pointer-events: none;
    background:
        radial-gradient(1.4px 1.4px at 12% 18%, color-mix(in srgb, var(--accent) 70%, transparent), transparent 60%),
        radial-gradient(1.2px 1.2px at 78% 12%, var(--text), transparent 60%),
        radial-gradient(1px 1px at 42% 34%, var(--muted), transparent 60%),
        radial-gradient(1.6px 1.6px at 88% 52%, color-mix(in srgb, var(--accent) 60%, transparent), transparent 60%),
        radial-gradient(1px 1px at 24% 62%, var(--muted), transparent 60%),
        radial-gradient(1.3px 1.3px at 62% 78%, var(--text), transparent 60%),
        radial-gradient(1px 1px at 8% 88%, var(--muted), transparent 60%),
        radial-gradient(1.1px 1.1px at 92% 86%, color-mix(in srgb, var(--accent) 60%, transparent), transparent 60%);
    opacity: .5;
    animation: sky-drift 140s linear infinite;
}
@keyframes sky-drift { to { transform: translate3d(-60px, 26px, 0); } }

.lp-glow {
    position: absolute;
    inset: -20% 0 auto;
    height: 70%;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(ellipse 60% 55% at 50% 0%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 72%);
}

.lp-hero h1 { font-size: clamp(31px, 8.4vw, 40px); line-height: 1.08; letter-spacing: -.025em; }

/* A jel a hero tetején: kicsi, halk. Nem link, itt nincs hova hazamenni. */
.lp-logo { align-self: flex-start; opacity: .8; }
.lp-logo .logo-jel { width: 26px; height: 24px; }
.lp-logo .wordmark { font-size: 14.5px; }

/* a cím és az egy bekezdés: a kettő között kis levegő, körülöttük nagy */
.lp-hero-szoveg { display: flex; flex-direction: column; gap: 16px; margin-top: auto; }
.lp-alcim {
    font-size: 16px;
    line-height: 1.5;
    color: var(--muted);
    text-wrap: pretty;
    max-width: 38ch;
}
.lp-hero-cta { margin-top: 8px; }

/* halk jelzés a gomb alatt: van tovább. Szándékosan nem gomb — a hangsúly
   a CTA-n marad, ez csak egy nyíl és egy sor. */
.lp-gorgetes {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    align-self: center;
    margin-top: 4px;
    min-height: 46px;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: .01em;
    color: var(--muted);
    text-decoration: none;
    transition: color var(--t-fast);
}
.lp-gorgetes:hover { color: var(--accent); }
.lp-gorgetes-nyil {
    width: 19px;
    height: 19px;
    flex: none;
    transform: rotate(90deg);
    animation: lp-gorgetes-bob 1.8s ease-in-out infinite;
}
@keyframes lp-gorgetes-bob {
    0%, 100% { transform: rotate(90deg) translateX(0); }
    50%      { transform: rotate(90deg) translateX(3px); }
}

/* az élő sor: egyetlen mért érték, a hero alján, halkan. A pont lassan lélegzik. */
.lp-elo {
    display: flex;
    align-items: baseline;
    gap: 9px;
    margin-top: auto;
    padding-top: 22px;
    font-size: 13px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}
.lp-elo i {
    align-self: center;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent);
    animation: elo-pulzus 3s ease-out infinite;
}
@keyframes elo-pulzus {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); }
    100% { box-shadow: 0 0 0 6px transparent; }
}
.lp-elo b { font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--text); white-space: nowrap; }

/* ------------------------------------------------- a hero alatti blokkok */
/* Nincs kártya, nincs jelvény: cím kurzív szerifben, egy bekezdés, egy link.
   A blokkokat egy-egy hajszálvonal választja el. */
.lp-blokk { padding: 34px 0; display: flex; flex-direction: column; gap: 12px; border-top: 1px solid var(--border); scroll-margin-top: 16px; }
.lp-cimke { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 17px; color: var(--accent); }
/* a becslés blokkja: ugyanaz a ritmus, egy vékony arany vonal a bal szélen, hogy kiugorjon */
.lp-becsles { padding-left: 16px; border-left: 2px solid color-mix(in srgb, var(--accent) 60%, transparent); }
.lp-proza { font-size: 16.5px; line-height: 1.55; text-wrap: pretty; }
.lp-proza s { color: var(--muted); text-decoration-color: color-mix(in srgb, var(--danger) 70%, transparent); text-decoration-thickness: 1.5px; }
.lp-proza b { font-weight: 600; color: var(--accent-2); white-space: nowrap; }
.lp-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    margin-top: 4px;
    min-height: 44px;
    font-size: 15px;
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
}
.lp-link svg { width: 15px; height: 15px; flex: none; transition: transform var(--t) var(--ease); }
.lp-link:hover svg { transform: translateX(3px); }
.lp-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* alacsony telefonokon a hero szorosabb, a gomb maradjon képernyőn */
@media (max-height: 700px) {
    .lp-hero { padding-top: 12px; padding-bottom: 18px; }
    .lp-hero h1 { font-size: clamp(27px, 7.4vw, 34px); }
    .lp-alcim { font-size: 15px; }
    .lp-elo { padding-top: 14px; }
    .lp-gorgetes { min-height: 36px; }
}


/* ------------------------------------------------------ ascendens-kerék */

.dial-wrap { position: relative; }
.dial {
    width: 100%;
    max-width: 380px;
    margin: 0 auto;
    aspect-ratio: 1 / 1;
    position: relative;
}
.dial svg { width: 100%; height: 100%; display: block; overflow: visible; }

/* a jegy szimbóluma a kerék közepén; a vonalvastagság a beágyazott svg
   kétszeres nagyításához igazítva, hogy ne legyen kövérebb a kerék vonalainál */
.dial-glyph { color: var(--accent); stroke-width: 1.25; overflow: visible; transition: color var(--t); }
.dial::before {
    content: '';
    position: absolute;
    inset: 4%;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--accent) 10%, transparent) 0%, transparent 66%);
    z-index: -1;
}

/* csak a zodiákusgyűrű forog, a horizont áll — mint az igazi keréken */
.dial-zodiac { transition: transform 620ms var(--ease); transform-origin: 200px 200px; }
.dial-zodiac.is-drag { transition: none; }

.dial-seg { fill: var(--surface); stroke: var(--border); stroke-width: 1; }
.dial-seg.is-asc { fill: color-mix(in srgb, var(--accent) 20%, var(--surface)); }
.dial-tick { stroke: var(--border); stroke-width: 1; }
.dial-tick.is-major { stroke: color-mix(in srgb, var(--muted) 70%, transparent); }
.dial-label {
    font-family: var(--font-display);
    font-size: 11px;
    letter-spacing: .06em;
    fill: var(--muted);
    text-transform: uppercase;
}
.dial-label.is-asc { fill: var(--accent); }

.dial-horizon { stroke: var(--accent); stroke-width: 1.4; }
.dial-meridian { stroke: var(--border); stroke-width: 1; stroke-dasharray: 3 5; }
.dial-mark { fill: var(--accent); }
.dial-axis-text { font-size: 10px; letter-spacing: .12em; fill: var(--muted); }

/* a téves állás szellemképe, amikor a csúszka nincs nullán */
.dial-ghost { stroke: var(--danger); stroke-width: 1.2; stroke-dasharray: 4 4; opacity: .85; }

.dial-core { text-anchor: middle; }
.dial-core .sign { font-family: var(--font-display); font-size: 27px; fill: var(--text); }
.dial-core .deg { font-family: var(--font-display); font-style: italic; font-size: 17px; fill: var(--accent); }
.dial-core .cap { font-size: 10px; letter-spacing: .14em; fill: var(--muted); text-transform: uppercase; }

/* ha a csúszka nincs nullán, a közép is jelzi, hogy ez már nem a valódi állás */
.dial-core.is-bad .deg { fill: var(--danger); }
.dial-core.is-bad .dial-glyph { color: var(--danger); }

/* -------------------------------------------------------------- vezérlő */

.dial-ctrl { display: flex; flex-direction: column; gap: 12px; }

.dial-clock {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 10px;
    font-family: var(--font-display);
    font-size: 26px;
    font-variant-numeric: tabular-nums;
}
.dial-clock .off { font-family: var(--font-body); font-size: 14px; font-weight: 600; color: var(--muted); letter-spacing: .04em; }
.dial-clock .off.is-bad { color: var(--danger); }

input[type=range].dial-range {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 34px;
    background: transparent;
    cursor: grab;
    padding: 0;
    min-height: 0;
    border: 0;
}
input[type=range].dial-range:active { cursor: grabbing; }
input[type=range].dial-range::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--danger) 0%, var(--border) 44%, var(--accent) 50%, var(--border) 56%, var(--danger) 100%);
}
input[type=range].dial-range::-moz-range-track {
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--danger) 0%, var(--border) 44%, var(--accent) 50%, var(--border) 56%, var(--danger) 100%);
}
input[type=range].dial-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 26px; height: 26px;
    margin-top: -11px;
    border-radius: 50%;
    background: var(--text);
    border: 5px solid var(--bg);
    box-shadow: 0 0 0 1px var(--accent), 0 6px 18px -6px rgba(0, 0, 0, .9);
}
input[type=range].dial-range::-moz-range-thumb {
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--text);
    border: 5px solid var(--bg);
    box-shadow: 0 0 0 1px var(--accent);
}
input[type=range].dial-range:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: 4px; }

.dial-scale {
    position: relative;
    height: 16px;
    margin-top: -4px;
    font-size: 11.5px;
    color: var(--muted);
    letter-spacing: .02em;
}
.dial-scale b, .dial-scale span {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    white-space: nowrap;
}
.dial-scale b { color: var(--danger); font-weight: 600; }
.dial-scale b::before {
    content: '';
    position: absolute;
    left: 50%;
    top: -12px;
    width: 1px;
    height: 6px;
    background: color-mix(in srgb, var(--danger) 60%, transparent);
}

/* a verdikt-sáv: ez mondja ki, mi történt */
.dial-verdict {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 13px 15px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface);
    font-size: 14.5px;
    line-height: 1.45;
    min-height: 68px;
    transition: border-color var(--t), background var(--t);
}
.dial-verdict i {
    flex: none;
    width: 7px; height: 7px;
    margin-top: 8px;
    border-radius: 50%;
    background: var(--accent);
}
.dial-verdict.is-bad { border-color: color-mix(in srgb, var(--danger) 50%, var(--border)); background: color-mix(in srgb, var(--danger) 8%, var(--surface)); }
.dial-verdict.is-bad i { background: var(--danger); }
.dial-verdict b { font-weight: 600; color: var(--text); }

.dial-src { font-size: 12px; color: var(--muted); line-height: 1.45; }

/* ------------------------------------------------- papír kontra számítás */

.cmp {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
.cmp-col {
    background: var(--surface);
    padding: 14px 10px 16px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    transition: background var(--t);
}
.cmp-col.is-bad { background: color-mix(in srgb, var(--danger) 10%, var(--surface)); }
.cmp-col .k { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.cmp-glyph { width: 40px; height: 40px; margin: 6px 0 2px; color: var(--accent); }
.cmp-col.is-bad .cmp-glyph { color: var(--danger); }
.cmp-col .v { font-family: var(--font-display); font-size: 21px; line-height: 1.1; }
.cmp-col .d { font-family: var(--font-display); font-style: italic; font-size: 16px; color: var(--accent); font-variant-numeric: tabular-nums; }
.cmp-col.is-bad .d { color: var(--danger); }
.cmp-col .t { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; margin-top: 4px; }

/* ------------------------------------------------- gyorsnavigáció a kvízhez */

.lp-jump {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 50px;
    padding: 0 18px;
    border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border));
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    color: var(--accent);
    font-size: 15.5px;
    font-weight: 600;
    text-decoration: none;
    transition: background var(--t-fast), border-color var(--t-fast);
}
.lp-jump:hover { background: color-mix(in srgb, var(--accent) 16%, transparent); border-color: var(--accent); }
.lp-jump svg { width: 17px; height: 17px; }

/* --------------------------------------------------------------- számok */

.lp-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
.lp-stats > div { background: var(--surface); padding: 16px 10px; text-align: center; }
.lp-stats .v { font-family: var(--font-display); font-size: 26px; line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums; }
.lp-stats .k { margin-top: 7px; font-size: 12px; color: var(--muted); line-height: 1.35; }

/* ------------------------------------------------------------- idősáv */

.tl { display: flex; flex-direction: column; gap: 10px; }
.tl-band {
    position: relative;
    height: 116px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background:
        repeating-linear-gradient(90deg, transparent 0 39px, color-mix(in srgb, var(--border) 60%, transparent) 39px 40px),
        var(--surface);
    overflow: hidden;
}
.tl-dst {
    position: absolute;
    top: 34px;
    bottom: 26px;
    background: linear-gradient(180deg, var(--accent-2), var(--accent));
    border-radius: 1.5px;
    min-width: 2px;
    transform: scaleY(0);
    transform-origin: bottom;
    opacity: 0;
}
.is-in .tl-dst { animation: tl-grow 520ms var(--ease) both; }
@keyframes tl-grow { to { transform: scaleY(1); opacity: 1; } }

.tl-gap {
    position: absolute;
    top: 34px;
    bottom: 26px;
    border-left: 1px dashed color-mix(in srgb, var(--danger) 55%, transparent);
    border-right: 1px dashed color-mix(in srgb, var(--danger) 55%, transparent);
    background: color-mix(in srgb, var(--danger) 9%, transparent);
    opacity: 0;
}
.is-in .tl-gap { animation: tl-fade 700ms 900ms var(--ease) both; }
@keyframes tl-fade { to { opacity: 1; } }

.tl-gap span {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 11px;
    color: color-mix(in srgb, var(--danger) 80%, var(--text));
    white-space: nowrap;
    letter-spacing: .04em;
}
.tl-axis { position: absolute; left: 0; right: 0; bottom: 0; height: 22px; border-top: 1px solid var(--border); }
.tl-axis b {
    position: absolute;
    top: 4px;
    transform: translateX(-50%);
    padding: 0 2px;
    background: var(--surface);
    font-size: 10.5px;
    font-weight: 400;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}
.tl-axis b.is-first { transform: none; left: 4px !important; }

/* a keréknél mutatott példa helye a szalagon */
.tl-pin { position: absolute; top: 6px; bottom: 26px; width: 0; opacity: 0; }
.is-in .tl-pin { animation: tl-fade 600ms 1300ms var(--ease) both; }
.tl-pin i {
    position: absolute;
    left: -1px; top: 22px; bottom: 0;
    width: 1px;
    background: linear-gradient(var(--text), transparent);
}
.tl-pin span {
    position: absolute;
    left: 0; top: 0;
    transform: translateX(-50%);
    white-space: nowrap;
    font-size: 10.5px;
    letter-spacing: .04em;
    color: var(--text);
    background: var(--surface);
    padding: 0 5px;
}

.tl-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--muted); }
.tl-legend span { display: inline-flex; align-items: center; gap: 7px; }
.tl-legend i { width: 12px; height: 4px; border-radius: 2px; background: var(--accent); flex: none; }
.tl-legend i.gap { background: color-mix(in srgb, var(--danger) 30%, transparent); border: 1px dashed color-mix(in srgb, var(--danger) 55%, transparent); height: 8px; }

/* ------------------------------------------------------------- okkártyák */

.lp-cards { display: flex; flex-direction: column; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.lp-card { background: var(--surface); padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.lp-card .eyebrow { font-size: 11px; }
.lp-card h3 { font-family: var(--font-display); font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
.lp-card p { font-size: 15px; color: var(--muted); line-height: 1.5; }
.lp-card .fact {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 16px;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------- módszer */

.lp-method ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.lp-method li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.5; color: var(--muted); }
.lp-method li b {
    display: block;
    margin-bottom: 3px;
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--text);
}
.lp-method svg { flex: none; width: 17px; height: 17px; margin-top: 3px; color: var(--accent); }
.lp-method code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13.5px; color: var(--text); background: var(--surface-2); padding: 1px 6px; border-radius: 4px; }

/* ---------------------------------------------------------------- záró */

.lp-close { text-align: center; align-items: center; }
.lp-close h2 { font-size: 27px; }
.lp-close .lede { font-size: 16.5px; }

/* ------------------------------------------------------- görgetés-felfedés */

.reveal { opacity: 0; transform: translateY(18px); }
.reveal.is-in { animation: rise 700ms var(--ease) both; }

/* a kvíz kérdésváltásának átmenete (a kviz.blade.php ezekre a nevekre hivatkozik) */
.tr-in { transition: opacity var(--t) var(--ease), transform var(--t) var(--ease); }
.tr-start { opacity: 0; transform: translateY(10px); }
.tr-end { opacity: 1; transform: none; }

/* nagyon keskeny keszuleken a gomb felirata ne torjon ket sorba */
@media (max-width: 360px) {
    .btn { font-size: 16px; padding: 0 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .lp-sky, .lp-elo i { animation: none; }
    .lp-gorgetes-nyil { animation: none; }
    .btn-figyelem, .btn-figyelem::after, .btn-figyelem-nyil { animation: none; }
    .btn-figyelem::after { display: none; }
    .reveal { opacity: 1; transform: none; }
    .tl-dst { transform: scaleY(1); opacity: 1; }
    .tl-gap { opacity: 1; }
}

/* ========================================================================
   A RIPORT KÉSZÜLÉSE
   Orrery (élő bolygórendszer), munkakártya, telemetria, módszer-ticker és a
   fejezetek „íródik" állapota. Minden mozgás a chart valódi adatán ül, és
   reduced-motionnél a végállapotba ugrik.
   ======================================================================== */

/* ------------------------------------------------------------- orrery */
/* Saját színvilág: mély indigó égbolt-panel csillagokkal, jégkék pályák, a
   bolygók a saját színükben (a x-planet rajzolja), a márka aranya csak az
   ascendensre és arra kerül, ami éppen íródik. A panel szögletes és szegély
   nélküli: a telefon tetején ez maga az „ég". A színek a layoutban
   felülírhatók (theme.orrery_*). */

.orrery {
    --sky:    #1B1D45;
    --sky-2:  #07081A;
    --ice:    #A9DDF0;
    --ice-2:  #4F9FCB;
    --rose:   #E27B92;
    --gold:   var(--accent);
    position: relative;
    margin: 0 calc(-1 * var(--gutter));
    padding: 26px var(--gutter) 22px;
    overflow: hidden;
    background:
        radial-gradient(ellipse 90% 70% at 50% 42%, var(--sky), transparent 100%),
        linear-gradient(180deg, var(--sky-2), color-mix(in srgb, var(--sky-2) 70%, var(--bg)));
}
/* a lap tetején: a felső padding fölé is felfut, a képernyő széléig */
.orrery-top { margin-top: -24px; padding-top: 44px; }
/* alul finoman beleolvad az oldal hátterébe */
.orrery::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 40px;
    pointer-events: none;
    background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--bg) 55%, transparent));
}

.orrery-stars {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.orrery-star { fill: #fff; animation: orr-twinkle 3.2s ease-in-out infinite alternate; }
.orrery-star.is-blue { fill: var(--ice); }
.orrery-star.is-warm { fill: var(--accent-2); }
@keyframes orr-twinkle { from { opacity: .12; } to { opacity: .85; } }

.orrery-wheel {
    width: 100%;
    max-width: 320px;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
    position: relative;
}
.orrery-wheel svg { width: 100%; height: 100%; display: block; overflow: visible; position: relative; }
.orrery-wheel::before {
    content: '';
    position: absolute;
    inset: -18%;
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--ice-2) 26%, transparent) 0%, transparent 50%),
        radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--gold) 14%, transparent) 0%, transparent 60%);
    animation: orr-glow 6s ease-in-out infinite alternate;
}
@keyframes orr-glow { from { opacity: .7; transform: scale(.97); } to { opacity: 1; transform: scale(1.03); } }

/* pásztázó fény: a zodiákus irányában (óramutatóval szemben) jár körbe */
.orrery-sweep {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    pointer-events: none;
    background: conic-gradient(from 0deg, transparent 0 250deg, color-mix(in srgb, var(--ice) 26%, transparent) 360deg);
    -webkit-mask: radial-gradient(circle closest-side, #000 0 91%, transparent 92.5%);
    mask: radial-gradient(circle closest-side, #000 0 91%, transparent 92.5%);
    mix-blend-mode: screen;
    animation: orr-sweep 7s linear infinite;
    will-change: transform;
}
@keyframes orr-sweep { to { transform: rotate(-360deg); } }

.orrery-ping circle {
    fill: none;
    stroke: var(--ice);
    stroke-width: 1;
    opacity: 0;
    transform-origin: 200px 200px;
    animation: orr-ping 3s ease-out 2.4s infinite;
}
@keyframes orr-ping {
    0%   { transform: scale(1);   opacity: .5; }
    100% { transform: scale(4.2); opacity: 0; }
}

/* az ég beáll a születési pillanatba, aztán alig láthatóan lélegzik */
.orrery-sky { transform-origin: 200px 200px; animation: orr-settle 2.4s var(--ease) both; }
@keyframes orr-settle { from { transform: rotate(-70deg); opacity: .2; } }
.orrery-breathe { transform-origin: 200px 200px; animation: orr-breathe 16s ease-in-out 2.4s infinite alternate; }
@keyframes orr-breathe { from { transform: rotate(-1.1deg); } to { transform: rotate(1.1deg); } }

/* zodiákusgyűrű: sötét indigó cikkek, világító él */
.orrery-seg { fill: color-mix(in srgb, var(--sky) 70%, #000); stroke: color-mix(in srgb, var(--ice) 24%, transparent); stroke-width: 1; }
.orrery-seg.is-asc { fill: color-mix(in srgb, var(--gold) 34%, var(--sky)); stroke: color-mix(in srgb, var(--gold) 60%, transparent); }
.orrery-label { font-family: var(--font-display); font-size: 10px; letter-spacing: .06em; fill: color-mix(in srgb, var(--ice) 72%, transparent); }
.orrery-label.is-asc { fill: var(--gold); }
.orrery-tick { stroke: color-mix(in srgb, var(--ice) 24%, transparent); stroke-width: 1; }
.orrery-tick.is-major { stroke: color-mix(in srgb, var(--ice) 58%, transparent); }
.orrery-rim { fill: none; stroke: url(#orr-rim); stroke-width: 1.5; opacity: .9; }
.orrery-rim-2 { fill: none; stroke: color-mix(in srgb, var(--ice) 30%, transparent); stroke-width: 1; }
.orrery-meridian { stroke: color-mix(in srgb, var(--ice) 30%, transparent); stroke-width: 1; stroke-dasharray: 3 5; fill: none; }
.orrery-orbit { fill: none; stroke: color-mix(in srgb, var(--ice) 26%, transparent); stroke-width: 1; stroke-dasharray: 2 5; }

/* kirajzolódó vonalak: házcsúcsok és fényszögek */
@keyframes orr-draw { to { stroke-dashoffset: 0; } }
.orrery-cusp {
    stroke: color-mix(in srgb, var(--ice) 22%, transparent);
    stroke-width: 1;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: orr-draw 800ms ease-out both;
}
.orrery-cusp.is-axis { stroke: color-mix(in srgb, var(--gold) 60%, transparent); }
.orrery-house { font-size: 8px; fill: var(--ice); opacity: 0; animation: orr-fade 600ms ease-out both; }
@keyframes orr-fade { to { opacity: .55; } }
.orrery-aspect {
    stroke-width: 1;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    opacity: .6;
    animation: orr-draw 1.1s ease-out both;
}
.orrery-aspect.is-trine, .orrery-aspect.is-sextile { stroke: var(--ice); }
.orrery-aspect.is-square, .orrery-aspect.is-opposition { stroke: var(--rose); }
.orrery-aspect.is-conjunction { stroke: #fff; opacity: .35; }

/* bolygók: a gömböt a x-planet rajzolja; itt a fény, a gyűrű és a felirat */
.orrery-orb {
    transform-box: fill-box;
    transform-origin: center;
    animation: orr-pop 600ms var(--ease) backwards;
    animation-delay: calc(1700ms + var(--i, 0) * 90ms);
}
@keyframes orr-pop { from { transform: scale(0); opacity: 0; } }
.orrery-orb .lead {
    stroke: var(--gold);
    stroke-width: 1;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    opacity: 0;
    transition: opacity var(--t);
}
.orrery-orb .halo { fill: var(--ice); opacity: .1; transition: fill var(--t), opacity var(--t); }
.orrery-orb .ring { fill: none; stroke: var(--ice); stroke-width: 1; opacity: 0; transform-box: fill-box; transform-origin: center; transition: stroke var(--t), opacity var(--t); }
.orrery-orb .lbl {
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .03em;
    fill: var(--ice);
    opacity: 0;
    transition: opacity var(--t), fill var(--t);
    paint-order: stroke;
    stroke: var(--sky-2);
    stroke-width: 3px;
    stroke-linejoin: round;
}
.orrery-orb.is-done .ring { opacity: .8; }
.orrery-orb.is-done .halo { opacity: .22; }
.orrery-orb.is-done .lbl { opacity: .8; }
.orrery-orb.is-on .lbl { opacity: 1; fill: var(--gold); }
.orrery-orb.is-on .lead { opacity: .85; animation: orr-draw 900ms ease-out both; }
.orrery-orb.is-on .ring { stroke: var(--gold); opacity: 1; animation: orr-ring 1.6s ease-out infinite; }
.orrery-orb.is-on .halo { fill: var(--gold); animation: orr-halo 1.6s ease-in-out infinite; }
@keyframes orr-ring { from { transform: scale(1); opacity: 1; } to { transform: scale(2.4); opacity: 0; } }
@keyframes orr-halo { 0%, 100% { opacity: .12; } 50% { opacity: .5; } }

/* a bolygó-miniatűrök részletei */
.planet .rays line { stroke: #FFD98A; stroke-width: 1.3; stroke-linecap: round; }
.planet .rays { transform-box: fill-box; transform-origin: center; animation: spin 40s linear infinite; }
.planet .corona { fill: #FFC85A; opacity: .22; }
.planet .ring-back, .planet .ring-front { fill: none; stroke: #E9D6A0; stroke-width: 1.5; stroke-linecap: round; }
.planet .ring-back { opacity: .55; }
.planet .ring-thin { fill: none; stroke: #BFF3F0; stroke-width: .8; opacity: .8; }
.planet .bands rect { fill: #8A5A38; opacity: .55; }
.planet .bands .spot { fill: #C6552F; opacity: .9; }
.planet .shade { fill: #07081A; opacity: .55; }
.planet .crater { fill: #7E7F94; opacity: .6; }
.planet .cap { fill: #fff; opacity: .7; }

/* MC és holdcsomópont */
.orrery-mark line { stroke: color-mix(in srgb, var(--ice) 60%, transparent); stroke-width: 1; }
.orrery-mark .halo { fill: var(--gold); opacity: 0; }
.orrery-mark .dot { fill: var(--ice); transition: fill var(--t); }
.orrery-mark.is-node .dot { fill: none; stroke: var(--ice); stroke-width: 1.4; }
.orrery-mark .lbl { font-size: 9px; font-weight: 600; letter-spacing: .06em; fill: var(--ice); opacity: 0; transition: opacity var(--t); paint-order: stroke; stroke: var(--sky-2); stroke-width: 3px; stroke-linejoin: round; }
.orrery-mark.is-done .lbl { opacity: .75; }
.orrery-mark.is-on .dot { fill: var(--gold); }
.orrery-mark.is-on.is-node .dot { fill: none; stroke: var(--gold); }
.orrery-mark.is-on .lbl { opacity: 1; fill: var(--gold); }
.orrery-mark.is-on .halo { animation: orr-halo 1.6s ease-in-out infinite; }

/* a horizont: AS bal, DS jobb — ez arany, ez a márka */
.orrery-axis .hz { stroke: var(--gold); stroke-width: 1.6; fill: none; transition: stroke-width var(--t), stroke var(--t); }
.orrery-axis .mark { fill: var(--gold); transform-box: fill-box; transform-origin: center; }
.orrery-axis .lbl { font-size: 10px; letter-spacing: .12em; fill: color-mix(in srgb, var(--ice) 75%, transparent); transition: fill var(--t); }
.orrery-axis.is-ds .hz { stroke: color-mix(in srgb, var(--ice) 40%, transparent); }
.orrery-axis.is-ds .mark { fill: color-mix(in srgb, var(--ice) 60%, transparent); }
.orrery-axis.is-done .lbl, .orrery-axis.is-on .lbl { fill: var(--gold); }
.orrery-axis.is-on .hz { stroke: var(--gold); stroke-width: 2.8; }
.orrery-axis.is-on .mark { fill: var(--gold); animation: pulse 1.2s ease-in-out infinite; }
.orrery-axis.is-done.is-ds .hz { stroke: var(--gold); }
.orrery-axis.is-done.is-ds .mark { fill: var(--gold); }

/* a mag: sötét korong, arany ascendens */
.orrery-coredisc { fill: color-mix(in srgb, var(--sky-2) 85%, transparent); }
.orrery-coreline { fill: none; stroke: color-mix(in srgb, var(--gold) 70%, transparent); stroke-width: 1; }
.orrery-core { text-anchor: middle; animation: orr-fade-full 900ms 1200ms ease-out both; }
@keyframes orr-fade-full { from { opacity: 0; } to { opacity: 1; } }
.orrery-core .glyph { color: var(--gold); stroke-width: 1.4; overflow: visible; }
.orrery-core .sign { font-family: var(--font-display); font-size: 13px; fill: #fff; }
.orrery-core .deg { font-family: var(--font-display); font-style: italic; font-size: 10px; fill: var(--gold); }

/* -------------------------------------------------------- munkakártya */

.work { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; }
.work-head { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.work-pulse { position: relative; width: 10px; height: 10px; flex: none; }
.work-pulse i { position: absolute; inset: 0; border-radius: 50%; background: var(--accent); transition: background var(--t); }
.work-pulse::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 50%;
    border: 1px solid var(--accent);
    animation: orr-ring 1.8s ease-out infinite;
}
.work-state { font-weight: 600; letter-spacing: .02em; }
.work-count { margin-left: auto; color: var(--muted); font-size: 13px; white-space: nowrap; }
.work-count b { color: var(--text); font-weight: 600; }
.work-now { display: flex; gap: 12px; align-items: flex-start; padding-top: 2px; }
.work-title { font-family: var(--font-display); font-size: 18px; line-height: 1.3; letter-spacing: -.01em; text-wrap: pretty; }
.work-src { margin-top: 3px; }
.work-pen { flex: none; width: 20px; height: 20px; margin-top: 3px; color: var(--accent); animation: pen-write 1.1s ease-in-out infinite; }
@keyframes pen-write {
    0%, 100% { transform: translate(0, 0) rotate(0); }
    25%      { transform: translate(1.5px, -1px) rotate(-6deg); }
    50%      { transform: translate(3px, 0) rotate(2deg); }
    75%      { transform: translate(1.5px, 1px) rotate(-3deg); }
}
.work-scan {
    flex: none;
    width: 20px; height: 20px;
    margin-top: 3px;
    border-radius: 50%;
    border: 1.5px solid var(--border);
    border-top-color: var(--accent);
    animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.caret {
    display: inline-block;
    width: 2px;
    height: .95em;
    margin-left: 3px;
    vertical-align: -2px;
    background: var(--accent);
    animation: caret 1s steps(2, start) infinite;
}
@keyframes caret { to { opacity: 0; } }
/* a buborék a kártya alján: miért tart ennyi ideig — kis farokkal, halk háttérrel */
.work-buborek {
    position: relative;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-top: 6px;
    padding: 10px 12px;
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--accent) 8%, var(--surface-2));
    border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
}
.work-buborek::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 18px;
    width: 10px;
    height: 10px;
    transform: rotate(45deg);
    background: inherit;
    border-left: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
    border-top: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
}
.work-buborek > svg { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--accent); }
.work-buborek p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--muted); text-wrap: pretty; }
.work.is-done .work-pulse::after { animation: none; opacity: 0; }
.work.is-failed .work-pulse i { background: var(--danger); }
.work.is-failed .work-pulse::after { border-color: var(--danger); }

/* --------------------------------------------------------- telemetria */

.tele {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
.tele-cell {
    background: var(--surface);
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    animation: fel-in 600ms var(--ease) backwards;
    animation-delay: calc(var(--i, 0) * 120ms + 300ms);
}
.tele-cell .k { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.tele-cell .v { font-family: var(--font-display); font-size: 17px; line-height: 1.2; overflow-wrap: anywhere; }
.tele-cell .v small { font-family: var(--font-body); font-size: 11px; font-weight: 400; color: var(--muted); }
.tele-cell .v code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 13px;
    color: var(--accent);
    background: var(--surface-2);
    padding: 2px 6px;
    border-radius: 4px;
}
.tele-cell .s { font-size: 12px; color: var(--muted); line-height: 1.35; }

/* --------------------------------------------------- módszer-ticker */

.ticker {
    position: relative;
    min-height: 132px;
    padding: 14px 16px;
    border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--accent) 6%, transparent);
}
.ticker-dots { display: flex; gap: 5px; margin-bottom: 10px; }
.ticker-dots i { width: 14px; height: 3px; border-radius: 2px; background: var(--border); transition: background var(--t), width var(--t); }
.ticker-dots i.is-on { width: 24px; background: var(--accent); }
.ticker-item { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.45; color: var(--muted); text-wrap: pretty; }
.ticker-item svg { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--accent); }
.ticker-item b { display: block; margin-bottom: 2px; font-family: var(--font-display); font-size: 16.5px; font-weight: 600; letter-spacing: -.01em; color: var(--text); }
.ticker-in { animation: fel-in 500ms var(--ease) both; }
.ticker-out { position: absolute; left: 16px; right: 16px; animation: ticker-out 280ms ease both; }
@keyframes ticker-out { to { opacity: 0; transform: translateY(-6px); } }

/* ------------------------------------------ fejezetlista, chipek, pontok */

.chapter .ch-ico { display: flex; justify-content: center; align-items: center; }
.chapter .dot { display: block; width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--muted); }
.chapter .ch-src { display: block; margin-top: 3px; font-size: 12px; line-height: 1.35; color: var(--accent); }
.chapter.is-writing { background: color-mix(in srgb, var(--accent) 5%, var(--surface)); box-shadow: inset 3px 0 0 var(--accent); }
.chapter.is-writing .t { color: var(--text); }
.chapter.is-writing .i { color: var(--accent); }
.chapter svg.is-writing { color: var(--accent); animation: pen-write 1.1s ease-in-out infinite; }
.chapter.is-failed svg { color: var(--danger); }
a.chapter:not([href]) { cursor: default; }


.point-row.is-writing { box-shadow: inset 3px 0 0 var(--accent); }
.point-row.is-writing .n { color: var(--accent); }

/* ----------------------------------------------- a fejezet, amíg íródik */

.section.is-writing .eyebrow { color: var(--accent); }

.ink {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 18px;
    border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
    border-radius: var(--radius);
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 7%, var(--surface)), var(--surface));
}
.ink::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--accent) 9%, transparent) 50%, transparent 70%);
    transform: translateX(-100%);
    animation: ink-sheen 2.8s ease-in-out infinite;
}
@keyframes ink-sheen { to { transform: translateX(100%); } }
.ink-head { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 17px; }
.ink-head .work-pen { margin-top: 0; }
.ink-src { text-wrap: pretty; }
.ink-lines { display: flex; flex-direction: column; gap: 9px; padding-top: 2px; }
.ink-lines i {
    display: block;
    height: 11px;
    width: var(--w, 100%);
    border-radius: 6px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 40%, var(--surface-2)), var(--surface-2));
    transform-origin: left;
    animation: ink-grow 3.8s var(--ease) infinite;
    animation-delay: calc(var(--i, 0) * 380ms);
}
@keyframes ink-grow {
    0%   { transform: scaleX(0); opacity: 0; }
    15%  { opacity: 1; }
    55%  { transform: scaleX(1); opacity: 1; }
    88%  { transform: scaleX(1); opacity: 1; }
    100% { transform: scaleX(1); opacity: 0; }
}
.ink.is-idle { border-color: var(--border); background: var(--surface); opacity: .8; }
.ink.is-idle::after { display: none; }
.ink.is-idle .skeleton { background: linear-gradient(90deg, var(--surface-2) 25%, var(--border) 50%, var(--surface-2) 75%); background-size: 200% 100%; }

/* a kész szöveg bekezdésenként úszik be */
.prose-in p { animation: rise 600ms var(--ease) backwards; animation-delay: calc(var(--i, 0) * 90ms); }

@media (max-width: 360px) {
    .orrery-wheel { max-width: 260px !important; }
    .tele { grid-template-columns: 1fr; }
    .ticker { min-height: 170px; }
}

@media (prefers-reduced-motion: reduce) {
    .orrery-sweep, .orrery-ping circle, .orrery-breathe, .work-pen, .work-scan, .caret,
    .chapter svg.is-writing, .ink::after, .ink-lines i, .work-pulse::after, .fnav-item.is-writing .fnav-szam,
    .orrery-orb.is-on .ring, .orrery-orb.is-on .halo, .orrery-mark.is-on .halo, .orrery-axis.is-on .mark { animation: none; }
    .orrery-orb.is-on .ring { transform: scale(1.6); opacity: .8; }
    .ink-lines i { transform: none; opacity: .7; }
    .orrery-sky, .orrery-star, .orrery-wheel::before, .planet .rays { animation: none; }
    .orrery-star { opacity: .5; }
}


/* --------------------------------------------------------------- nyers adatok
   A riport alján, alapból összecsukva. Annak szól, aki ellenőrizni akar; ezért
   sűrű, tabuláris számok, de telefonon is olvasható: soronként két sor, a
   fényszögmátrix az egyetlen, ami vízszintesen görget. */

.raw { border-top: 1px solid var(--border); padding-top: 22px; }
.raw-summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    -webkit-tap-highlight-color: transparent;
}
.raw-summary::-webkit-details-marker { display: none; }
.raw-summary::after {
    content: attr(data-nyit);
    font-size: 13px;
    color: var(--accent);
    margin-top: 4px;
}
.raw[open] .raw-summary::after { content: attr(data-zar); }
.raw[open] .raw-summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.raw-title { font-family: var(--font-display); font-size: 21px; line-height: 1.25; }
.raw-body {
    padding: 20px 0 0;
    font-size: 14.5px;
}
.raw-body .eyebrow { font-size: 11.5px; }

.raw-dl { display: grid; grid-template-columns: minmax(120px, 38%) 1fr; gap: 6px 12px; margin: 0; font-size: 13.5px; }
.raw-dl dt { color: var(--muted); }
.raw-dl dd { margin: 0; overflow-wrap: anywhere; }

.raw-rows { display: flex; flex-direction: column; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.raw-row { background: var(--surface); padding: 10px 14px; display: flex; flex-direction: column; gap: 4px; }
.raw-row .l1 { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: baseline; font-size: 14.5px; }
.raw-row .l1 .n { font-weight: 600; }
.raw-row .l1 .h { grid-column: 1 / -1; color: var(--muted); font-size: 12.5px; }
.raw-row .l2 { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--muted); font-size: 12.5px; }
.raw-row .l2 .dg { color: var(--accent); }
.raw-rows.compact .raw-row { padding: 8px 14px; }
.raw-row .g { color: var(--accent); }
.rx { color: var(--danger); font-weight: 600; margin-left: 4px; }

@media (min-width: 420px) {
    .raw-row .l1 { grid-template-columns: 1fr auto auto; }
    .raw-row .l1 .h { grid-column: auto; text-align: right; min-width: 56px; }
}

.raw-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.raw-matrix { border-collapse: collapse; font-size: 11.5px; min-width: 100%; }
.raw-matrix th, .raw-matrix td { width: 44px; min-width: 44px; height: 40px; text-align: center; border: 1px solid var(--border); padding: 0; }
.raw-matrix th { color: var(--muted); font-weight: 600; background: var(--surface-2); font-size: 11px; }
.raw-matrix tbody th { position: sticky; left: 0; z-index: 1; }
.raw-matrix td.empty { background: color-mix(in srgb, var(--border) 40%, var(--surface)); border-color: transparent; }
.raw-matrix td.asp { line-height: 1.1; }
.raw-matrix td.asp .g { display: block; font-size: 14px; color: var(--accent); }
.raw-matrix td.asp .o { display: block; color: var(--muted); font-size: 10.5px; }
.raw-matrix td.asp-square .g, .raw-matrix td.asp-opposition .g { color: var(--danger); }
.raw-matrix td.asp-trine .g, .raw-matrix td.asp-sextile .g { color: var(--accent-2); }

.raw-actions { display: flex; flex-direction: column; gap: 10px; }
.raw-actions .btn { width: 100%; font-size: 15px; }

/* --------------------------------------------------------------- nyomtatás
   Fehér papír, fekete betű, a kerék a saját CSS-változóin át világosodik ki. */
@media print {
    :root { --bg: #fff; --surface: #fff; --surface-2: #f2f2f2; --border: #cfcfcf; --text: #111; --muted: #555; --accent: #333; --accent-2: #444; --danger: #a33; }
    body { background: #fff; color: #111; font-size: 12pt; }
    .page { max-width: none; padding: 0; gap: 14px; }
    .fnav, .fab-csoport, .sheet-hatter, .lightbox, .wheel-zoom-jel, .ajanlo, .velemeny form, .sticky-cta, .raw-actions, .btn, .skeleton, .footer a { display: none !important; }
    body::before, body::after, html::after { display: none !important; }
    .points-list, .point-row { break-inside: avoid; }
    .section { break-inside: avoid-page; }
    .raw { border-top: 2px solid #111; }
    .raw-summary { border: 0; padding: 0 0 8px; }
    .raw-summary::after { content: none; }
    .raw-body { display: block !important; }
    .raw-scroll { overflow: visible; }
    .raw-matrix { font-size: 8pt; }
    .raw-matrix th, .raw-matrix td { width: auto; min-width: 0; height: 26px; }
    .wheel { max-width: 380px; }
    .wheel::after { display: none; }
    a { text-decoration: none; }
}

/* a nyers blokkban a szazalek mellett a darabszam is elfer */
.raw .bar-row { grid-template-columns: 76px 1fr 66px; }
.raw .bar-row .p small { color: var(--muted); font-size: 11px; }
.raw-matrix thead th:first-child { position: sticky; left: 0; z-index: 2; }

/* ========================================================================
   KOMPAKT KEZDŐLAP + INFO-OLDALAK (/miert-hibas, /mi-az-ascendens)
   A landing csak a kereket, egy állítást és a gombot mutatja; a bizonyítás
   és a magyarázat külön oldalon van, mindkettőn gyors gombbal a kvízre.
   ======================================================================== */


/* info-oldal fejléce */
.page-info { padding-top: 0; }
.ip-head { padding: 12px 0 8px; display: flex; flex-direction: column; gap: 10px; }
.ip-head h1 { font-size: clamp(26px, 6.8vw, 34px); line-height: 1.12; }
.ip-head .lede { font-size: 16px; }
.ip-back { align-self: flex-start; padding: 0; font-size: 14px; }

.info-cta { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.info-cta .micro { text-align: center; }

.dial-info { max-width: 320px; }
.dial-core .clock { font-family: var(--font-display); font-size: 30px; fill: var(--text); font-variant-numeric: tabular-nums; }

/* a 24 órás kerék vezérlője */
.ip-day { display: flex; align-items: center; gap: 12px; }
.ip-day .dial-range { flex: 1; }
.ip-play {
    flex: none;
    min-width: 92px;
    height: 40px;
    padding: 0 14px;
    border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border));
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    color: var(--accent);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.ip-play:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); }

/* kelési idők — vízszintes sávok, felfedéskor nőnek ki */
.ip-bars { display: flex; flex-direction: column; gap: 7px; }
.ip-bar { display: grid; grid-template-columns: 112px 1fr 68px; align-items: center; gap: 10px; font-size: 14px; }
.ip-bar .n { display: inline-flex; align-items: center; gap: 7px; color: var(--text); }
.ip-bar .n svg { width: 16px; height: 16px; color: var(--accent); flex: none; }
.ip-bar .b { height: 12px; border-radius: 6px; background: var(--surface-2); overflow: hidden; }
.ip-bar .b i { display: block; height: 100%; width: var(--w); border-radius: 6px; background: linear-gradient(90deg, var(--accent-2), var(--accent)); transform: scaleX(0); transform-origin: left; }
.is-in .ip-bar .b i { animation: ip-bar-grow 700ms var(--d) var(--ease) both; }
@keyframes ip-bar-grow { to { transform: scaleX(1); } }
.ip-bar .v { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; font-size: 13px; }

/* napjegy vs. ascendens */
.ip-cmp .cmp-col { text-align: left; align-items: stretch; padding: 14px 12px 16px; }
.ip-cmp .cmp-col .k { text-align: center; }
.ip-cmp .cmp-glyph { align-self: center; }
.ip-cmp .cmp-col.is-accent { background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.ip-cmp ul { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; line-height: 1.4; color: var(--muted); }
.ip-cmp li { padding-left: 14px; position: relative; }
.ip-cmp li::before { content: ''; position: absolute; left: 0; top: .55em; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.ip-cmp .is-accent li { color: var(--text); }

/* a tizenkét jegy urai */
.ip-urak { display: flex; flex-direction: column; gap: 10px; }
.ip-urak h3 { font-family: var(--font-display); font-size: 18px; font-weight: 600; }
.ip-urak ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.ip-urak li { display: grid; grid-template-columns: 18px 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; padding: 10px 12px; background: var(--surface); font-size: 13.5px; }
.ip-urak li svg { grid-row: 1 / 3; width: 18px; height: 18px; color: var(--accent); }
.ip-urak li span { color: var(--muted); }
.ip-urak li b { font-weight: 600; color: var(--text); }
.ip-urak li small { display: block; font-weight: 400; font-size: 11.5px; color: var(--muted); }

/* /hogyan-szamolunk — közérthető kártyák, a „jó tudni" keretben, a technika lenyitható részben */
.im-bek { font-size: 15px; line-height: 1.55; text-wrap: pretty; }
.im-nem h3 { font-family: var(--font-display); font-size: 17px; font-weight: 600; color: var(--text); }

.im-reszletek { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
.im-reszletek summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 16px;
    cursor: pointer;
    list-style: none;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--text);
}
.im-reszletek summary::-webkit-details-marker { display: none; }
.im-reszletek summary::after { content: '+'; font-size: 20px; line-height: 1; font-weight: 400; color: var(--accent); }
.im-reszletek[open] summary::after { content: '−'; }
.im-reszletek-test { display: flex; flex-direction: column; gap: 10px; padding: 0 16px 16px; font-size: 13.5px; line-height: 1.5; color: var(--muted); }

.im-nem {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-sm);
    background: var(--surface);
    font-size: 14px;
    line-height: 1.5;
    color: var(--muted);
}

.im-forras-cim { margin-top: 6px; font-weight: 600; color: var(--text); }
.im-meres { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.im-meres table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.im-meres th, .im-meres td { padding: 7px 12px; text-align: right; white-space: nowrap; }
.im-meres th:first-child, .im-meres td:first-child { text-align: left; color: var(--text); }
.im-meres th { font-weight: 600; color: var(--muted); border-bottom: 1px solid var(--border); background: var(--surface-2); }
.im-meres tr + tr td { border-top: 1px solid var(--border); }
.im-forrasok { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.im-forrasok li + li { border-top: 1px solid var(--border); }
.im-forrasok a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    background: var(--surface);
    color: var(--text);
    text-decoration: none;
    font-size: 14.5px;
    line-height: 1.35;
    transition: background var(--t);
}
.im-forrasok a:hover { background: var(--surface-2); }
.im-forrasok small { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }
.im-forrasok svg { width: 16px; height: 16px; flex: none; color: var(--accent); }

@media (max-width: 380px) {
    .ip-bar { grid-template-columns: 96px 1fr 60px; }
    .ip-urak ul { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .ip-bar .b i { transform: none; }
}

/* ========================================================================
   RIPORT 2.0 — strukturált fejezet: lead, elem-blokkok (widget + értelmezés),
   „neked”, „irány”. A widget a tényt mutatja (determinisztikus, charts.data),
   a szöveg csak értelmez. Mobil-first: minden egy oszlopban, nincs vízszintes görgetés.
   ======================================================================== */

.prose-in > .blokk { animation: rise 600ms var(--ease) backwards; animation-delay: calc(var(--i, 0) * 90ms); }
.blokk + .blokk { margin-top: 26px; }
.szekcio-lead p { font-family: var(--font-display); font-size: 21px; line-height: 1.45; letter-spacing: -.01em; text-wrap: pretty; }
.elem-cim { font-family: var(--font-display); font-size: 19px; line-height: 1.3; margin: 14px 0 6px; letter-spacing: -.01em; }
.elem-blokk p + p { margin-top: .9em; }

.elem {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 16px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    font-size: 14px;
}
.elem-eyebrow { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.elem-fej { display: flex; align-items: center; gap: 12px; }
.elem-glyph { flex: none; display: inline-flex; width: 34px; height: 34px; align-items: center; justify-content: center; border-radius: 50%; background: var(--surface-2); color: var(--accent); }
.elem-glyph svg { width: 20px; height: 20px; }
.elem-fo { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.elem-nev { font-family: var(--font-display); font-size: 18px; line-height: 1.2; }
.elem-poz { color: var(--muted); font-size: 14px; }
.elem-haz { margin-left: auto; flex: none; color: var(--text); font-size: 13px; padding: 4px 9px; border-radius: 999px; background: var(--surface-2); }
.elem-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--muted); font-size: 12.5px; }
.elem-meta .dg { color: var(--accent); }
.elem-cimke { color: var(--muted); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; margin-right: 2px; }
.elem-aspektusok { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13px; }
.elem-asp { padding: 3px 8px; border-radius: 999px; background: var(--surface-2); white-space: nowrap; }
.elem-asp .g { color: var(--accent); font-weight: 600; }
.elem-asp small { color: var(--muted); font-size: 12px; }
.elem-link { align-self: flex-start; font-size: 12.5px; color: var(--accent); text-decoration: none; margin-top: 2px; }
.elem-link::after { content: ' →'; }
.elem-emoji { font-size: 28px; line-height: 1; }

/* fényszög-kártya: két pont, középen a glifa */
.elem-par { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; }
.elem-mini { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; min-width: 0; }
.elem-mini .elem-nev { font-size: 16px; }
.elem-mini .elem-poz { font-size: 12.5px; }
.elem-mini .elem-haz { margin: 2px 0 0; font-size: 11.5px; padding: 2px 8px; }
.elem-kozep { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 0 4px; }
.elem-kozep .g { font-size: 26px; line-height: 1; color: var(--accent); }
.elem-kozep .t { font-size: 11.5px; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; }
.elem-fenyszog.asp-square .elem-kozep .g, .elem-fenyszog.asp-opposition .elem-kozep .g, .elem-fenyszog.asp-quincunx .elem-kozep .g { color: var(--danger); }
.elem-fenyszog.asp-trine .elem-kozep .g, .elem-fenyszog.asp-sextile .elem-kozep .g { color: var(--accent-2); }
.elem-orbis { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; font-size: 12.5px; color: var(--muted); }
.elem-orbis .bar-track { height: 5px; }
.elem-fenyszog.asp-square .elem-orbis .bar-fill, .elem-fenyszog.asp-opposition .elem-orbis .bar-fill { background: var(--danger); }
.elem-fenyszog.asp-trine .elem-orbis .bar-fill, .elem-fenyszog.asp-sextile .elem-orbis .bar-fill { background: var(--accent-2); }

/* alakzat tagjai */
.elem-tagok { display: flex; flex-wrap: wrap; gap: 6px 10px; }
.elem-tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 999px; background: var(--surface-2); font-size: 13px; }
.elem-tag .elem-glyph { width: 24px; height: 24px; }
.elem-tag .elem-glyph svg { width: 14px; height: 14px; }
.elem-tag small { color: var(--muted); font-size: 12px; }

/* szótár: összecsukva, aki ismeri, átugorja */
.elem-szotar { margin-top: 10px; font-size: 14px; color: var(--muted); }
.elem-szotar summary { cursor: pointer; list-style: none; color: var(--accent); font-size: 13.5px; -webkit-tap-highlight-color: transparent; }
.elem-szotar summary::-webkit-details-marker { display: none; }
.elem-szotar summary::before { content: '?'; display: inline-flex; width: 18px; height: 18px; align-items: center; justify-content: center; margin-right: 8px; border-radius: 50%; border: 1px solid currentColor; font-size: 11px; }
.elem-szotar[open] summary::before { content: '–'; }
.elem-szotar p { margin: 8px 0 0; line-height: 1.55; }

/* neked / irány */
.szekcio-neked { padding: 16px 18px; border-left: 3px solid var(--accent); border-radius: 0 var(--radius) var(--radius) 0; background: color-mix(in srgb, var(--accent) 7%, var(--surface)); }
.szekcio-neked .eyebrow { margin-bottom: 6px; }
/* az ítélet az önképről: a „Neked” felirat mellett; a cáfolat és az árnyalás más színt kap, hogy ne olvassa át */
.szekcio-neked .egyezes { margin-left: 8px; padding-left: 8px; border-left: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border)); color: var(--muted); font-weight: 500; }
.szekcio-neked.is-cafol { border-left-color: var(--danger); background: color-mix(in srgb, var(--danger) 6%, var(--surface)); }
.szekcio-neked.is-cafol .egyezes { color: var(--danger); }
.szekcio-neked.is-arnyal .egyezes { color: var(--text); }
.szekcio-irany { display: flex; gap: 12px; align-items: flex-start; padding-top: 4px; }
.szekcio-irany > svg { flex: none; width: 22px; height: 22px; margin-top: 4px; color: var(--accent); }
.szekcio-irany .eyebrow { margin-bottom: 4px; }
.szekcio-irany p { color: var(--text); }

/* a nyers adatok kiemelése a fejezetek után */
.nyers-kartya { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.nyers-kartya .nyers-linkek { display: flex; flex-wrap: wrap; gap: 8px; }
.nyers-kartya .nyers-linkek a { font-size: 13px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border); color: var(--text); text-decoration: none; background: var(--surface-2); }

@media (max-width: 380px) {
    .elem-par { grid-template-columns: 1fr; }
    .elem-kozep { flex-direction: row; gap: 8px; justify-content: center; }
    .elem-mini { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 4px 8px; }
}

@media print {
    .elem, .elem-blokk { break-inside: avoid; }
    .elem-link, .elem-szotar summary::before { display: none; }
    .elem-szotar { display: none; }
}