/**
 * story-player.css — rövid, rajzfilmes „sztori" egy termékképernyőkkel (js/story-player.js).
 *
 * Két réteg:
 *   1. .sp        — a szekció: bal oldalt a 4:5-ös színpad, jobbra cím + lépés-pillek + vezérlők.
 *                   Mobilon egy oszlop, a pillek vízszintesen görgethetők. A lap tokenjeit használja,
 *                   így a sötét témát is követi.
 *   2. .sp-scene  — maga a jelenet egy 1080×1350-es vásznon, amit a JS a színpad szélességére skáláz.
 *                   Szándékosan SAJÁT, fix (világos, krémszínű) palettát kap: ez egy illusztráció,
 *                   mint egy videó — sötét témában sem invertálódik.
 *
 * Nincs CSS-animáció a jelenetben: minden mozgást a render(t) állít be, ezért a jelenet bármely
 * pillanatra determinisztikusan „tekerhető" (pill-kattintás, progress-sáv, reduced motion).
 */

/* ============================================================ 1 · szekció */
.sp {
    padding: clamp(48px, 6.4vw, 92px) 0;
    border-bottom: 1px solid var(--border-light, #e6eaf0);
}
.sp-grid {
    display: grid;
    grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
    grid-template-areas: "stage head" "stage steps" "stage ctrl" "stage ends";
    grid-template-rows: auto auto auto 1fr;
    column-gap: clamp(32px, 5vw, 72px);
    align-content: center;
    max-width: 1040px;
    margin: 0 auto;
}
.sp-head { grid-area: head; align-self: end; }
.sp-steps { grid-area: steps; }
.sp-status { display: none; }
.sp-ctrl { grid-area: ctrl; }
.sp-ends { grid-area: ends; align-self: start; }
.sp-stage { grid-area: stage; align-self: center; }

.sp-kicker {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
    color: var(--accent-current, #4A55B8); margin: 0 0 10px;
}
.sp-kicker::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.sp-title { font-size: clamp(1.5rem, 2.6vw, 2.05rem); line-height: 1.2; margin: 0 0 12px; color: var(--text-primary, #16202e); }
.sp-lead { margin: 0 0 clamp(20px, 2.4vw, 28px); font-size: clamp(1rem, 1.5vw, 1.1rem); line-height: 1.6; color: var(--text-secondary, #5a6678); max-width: 46ch; }

/* --- színpad */
.sp-stage {
    position: relative; width: 100%; aspect-ratio: 4 / 5; overflow: hidden;
    border-radius: var(--proof-radius, 18px);
    border: 1px solid var(--border-light, #e6eaf0);
    background: #FBF6EC;
    box-shadow: var(--proof-shadow, 0 18px 46px -34px rgba(16, 30, 54, .42));
    cursor: pointer;
}
.sp-canvas { position: absolute; left: 0; top: 0; width: 1080px; height: 1350px; transform-origin: 0 0; }
.sp-bigplay {
    position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px;
    border-radius: 50%; border: 0; background: var(--accent-current, #4A55B8); color: #fff;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    box-shadow: 0 14px 30px -12px rgba(16, 30, 54, .55); transition: transform .2s, opacity .25s;
}
.sp-bigplay:hover { transform: scale(1.06); }

/* --- desktop: a vezérlő a kártya alján (story-player.js placeCtrl) — csak hoverre / fókuszra / megállítva látszik,
       közben egy vékony haladásjelző fut a kártya alsó szélén (a néző lássa, hogy véget érő videó). */
.sp-hair { display: none; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: 3; pointer-events: none;
    background: color-mix(in srgb, var(--accent-current, #4A55B8) 18%, transparent); transition: opacity .2s; }
.sp-hair i { position: absolute; inset: 0; background: var(--accent-current, #4A55B8); transform-origin: 0 50%; transform: scaleX(0); }
.sp-stage.has-ctrl .sp-hair { display: block; }
.sp-stage.has-ctrl .sp-ctrl {
    position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 4; max-width: none; width: auto; margin: 0;
    padding: 6px 8px; border-radius: 14px; cursor: default;
    background: color-mix(in srgb, var(--bg-primary, #fff) 92%, transparent);
    box-shadow: 0 10px 26px -14px rgba(16, 30, 54, .5);
    opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .2s, transform .2s;
}
.sp-stage.has-ctrl:hover .sp-ctrl, .sp-stage.has-ctrl:focus-within .sp-ctrl,
.sp:not(.is-playing) .sp-stage.has-ctrl .sp-ctrl { opacity: 1; transform: none; pointer-events: auto; }
.sp-stage.has-ctrl:hover .sp-hair, .sp-stage.has-ctrl:focus-within .sp-hair,
.sp:not(.is-playing) .sp-stage.has-ctrl .sp-hair { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .sp-stage.has-ctrl .sp-ctrl, .sp-hair { transition: none; } }
.sp.is-playing .sp-bigplay { opacity: 0; pointer-events: none; }

/* --- több sztori egy lejátszóban (közös motor): választók + egy színpad + állapotsor */
.sp--multi .sp-grid {
    /* bal oszlop: a videó és KÖZVETLENÜL alatta a vezérlő + állapotsor (egy objektum);
       jobb oszlop: cím, a két választó, halk ajánló — függőlegesen a videó mellé középre */
    grid-template-areas: "stage ." "stage head" "stage picks" "stage ends" "stage ." "ctrl ." "meta .";
    grid-template-rows: 1fr auto auto auto 1fr auto auto;
}
.sp--multi .sp-stage { align-self: start; }
.sp--multi .sp-ctrl { margin-top: 14px; }
.sp--multi .sp-meta { margin-top: 12px; }
.sp--multi .sp-picks { margin-bottom: 0; }
/* az ajánló visszafogottabb: nincs tónusos sáv, a fő gomb körvonalas — a történet domináljon */
.sp--multi .sp-ends { background: none; border: 0; padding: 0; margin-top: 22px; }
.sp--multi .sp-ends .btn.sp-end-main {
    background: transparent; color: var(--accent-current, #4A55B8);
    border: 1.5px solid color-mix(in srgb, var(--accent-current, #4A55B8) 55%, transparent);
    box-shadow: none; padding: 8px 18px; font-size: .9rem;
}
.sp--multi .sp-ends .btn.sp-end-main .btn-content { color: inherit; }
.sp--multi .sp-ends .btn.sp-end-main:hover { background: color-mix(in srgb, var(--accent-current, #4A55B8) 8%, transparent); }
.sp--multi .sp-end-link { font-size: .88rem; }
.sp-picks { grid-area: picks; display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 10px; margin: 0 0 18px; }
.sp-pick {
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0;
    padding: 12px 16px; border-radius: 14px; text-align: left; cursor: pointer; font: inherit;
    background: var(--bg-primary, #fff); color: var(--text-primary, #16202e);
    border: 1px solid var(--border-light, #dfe5ee);
    transition: border-color .2s, background-color .2s, box-shadow .2s;
}
.sp-pick:hover { border-color: color-mix(in srgb, var(--accent-current, #4A55B8) 45%, var(--border-light, #dfe5ee)); }
.sp-pick:focus-visible { outline: 2px solid var(--accent-current, #4A55B8); outline-offset: 2px; }
.sp-pick-top { font-weight: 700; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.sp-pick-num { font-variant-numeric: tabular-nums; color: var(--text-secondary, #5a6678); }
.sp-pick-q { font-size: .88rem; color: var(--text-secondary, #5a6678); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
/* aktív: felismerhető, de nem harsány — akcentus-keret és halvány tónus */
.sp-pick.is-current {
    border-color: var(--accent-current, #4A55B8);
    background: color-mix(in srgb, var(--accent-current, #4A55B8) 6%, var(--bg-primary, #fff));
    box-shadow: inset 0 0 0 1px var(--accent-current, #4A55B8);
}
.sp-pick.is-current .sp-pick-num { color: var(--accent-current, #4A55B8); }
.sp-meta { grid-area: meta; display: flex; justify-content: space-between; gap: 12px; margin: 10px 0 0; font-size: .82rem; color: var(--text-secondary, #5a6678); font-variant-numeric: tabular-nums; }
.sp-meta-now { font-weight: 600; }
.sp--multi .sp-canvas { transition: opacity .35s ease, visibility 0s linear 0s; }
.sp--multi .sp-canvas.is-off { opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s linear .35s; }
@media (prefers-reduced-motion: reduce) { .sp--multi .sp-canvas, .sp--multi .sp-canvas.is-off { transition: none; } }

/* --- lépés-pillek (linkek a részletekhez) */
.sp-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.sp-step a {
    position: relative; overflow: hidden;
    display: grid; grid-template-columns: 26px 1fr auto; column-gap: 12px; align-items: center;
    padding: 9px 12px; border-radius: 12px; text-decoration: none;
    color: var(--text-secondary, #5a6678); transition: background-color .25s, color .25s;
}
.sp-step-num {
    width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: .78rem; font-weight: 700; border: 1.5px solid var(--border-light, #dfe5ee);
    color: var(--text-secondary, #5a6678); transition: all .25s;
}
.sp-step-label { font-weight: 700; color: var(--text-primary, #16202e); font-size: 1rem; }
.sp-step-desc { grid-column: 2; font-size: .9rem; line-height: 1.45; }
.sp-step-go { grid-row: 1 / span 2; grid-column: 3; opacity: 0; transform: translateX(-4px); transition: all .25s; color: var(--accent-current, #4A55B8); font-weight: 700; }
.sp-step-fill { position: absolute; left: 12px; right: 12px; bottom: 0; height: 2px; background: var(--accent-current, #4A55B8); transform-origin: 0 50%; transform: scaleX(0); opacity: 0; }
.sp-step a:hover, .sp-step a:focus-visible { background: var(--bg-tint-current, #f1f2fb); }
.sp-step a:hover .sp-step-go, .sp-step a:focus-visible .sp-step-go { opacity: 1; transform: none; }
.sp-step.is-active a { background: var(--bg-tint-current, #f1f2fb); color: var(--text-primary, #16202e); }
.sp-step.is-active .sp-step-fill { opacity: 1; }
.sp-step.is-active .sp-step-num,
.sp-step.is-done .sp-step-num { background: var(--accent-current, #4A55B8); border-color: var(--accent-current, #4A55B8); color: #fff; }

/* --- vezérlők */
.sp-ctrl { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.sp-btn {
    flex: none; width: 38px; height: 38px; border-radius: 50%;
    border: 1px solid var(--border-light, #dfe5ee); background: var(--bg-primary, #fff);
    color: var(--text-primary, #16202e); display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.sp-btn:hover { border-color: var(--accent-current, #4A55B8); color: var(--accent-current, #4A55B8); }
.sp-btn svg { width: 16px; height: 16px; }
.sp .sp-ico-pause, .sp.is-playing .sp-ico-play { display: none; }
.sp.is-playing .sp-ico-pause { display: block; }
.sp-bar { flex: 1; height: 18px; display: flex; align-items: center; cursor: pointer; }
.sp-bar span { position: relative; display: block; width: 100%; height: 4px; border-radius: 2px; background: var(--border-light, #e6eaf0); overflow: hidden; }
.sp-bar i { position: absolute; inset: 0; background: var(--accent-current, #4A55B8); transform-origin: 0 50%; transform: scaleX(0); }
.sp-time { font-size: .8rem; color: var(--text-secondary, #5a6678); font-variant-numeric: tabular-nums; min-width: 3.2em; text-align: right; }

/* --- zárás: ajánló */
/* Halk, enyhén tónusos sáv: elválik a videó aljától és a lenti nézetválasztótól is,
   így a három elem (videó · ajánló · választó) külön ütemre olvasódik, nem folyik egybe. */
.sp-ends {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px;
    margin-top: 26px; padding: 14px 18px;
    background: color-mix(in srgb, var(--accent-current, #4A55B8) 6%, var(--bg-primary, #fff));
    border: 1px solid color-mix(in srgb, var(--accent-current, #4A55B8) 14%, transparent);
    border-radius: 16px;
}
.sp-ends .btn.sp-end-main { padding: 10px 22px; font-size: .95rem; box-shadow: none; }
/* Ha a sztori után rögtön egy tónusos sáv jön (oneDashboard Áttekintés: framing-band),
   két színes blokk kerülne egymás alá — ott az ajánló sima marad, csak a gombok tömörek. */
.sp:has(+ .framing-band) .sp-ends,
.sp:has(+ style + .framing-band) .sp-ends { background: none; border-color: transparent; padding-left: 0; padding-right: 0; }
.sp-ends .sp-end-main { transition: box-shadow .3s, transform .3s; }
.sp.is-ended .sp-ends .sp-end-main { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent-current, #4A55B8) 18%, transparent); }
.sp-end-link { font-size: .92rem; font-weight: 600; color: var(--accent-current, #4A55B8); text-decoration: none; }
.sp-end-link:hover { text-decoration: underline; }

.sp-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@media (max-width: 880px) {
    .sp-grid {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "head" "stage" "ctrl" "steps" "ends";
        grid-template-rows: none;
    }
    .sp-head { text-align: center; }
    .sp-lead { margin-left: auto; margin-right: auto; }
    .sp--multi .sp-grid { grid-template-areas: "head" "picks" "stage" "ctrl" "meta" "ends"; grid-template-rows: none; }
    .sp--multi .sp-ctrl { margin-top: 0; }
    .sp--multi .sp-ends { flex-direction: row; justify-content: center; margin-top: 18px; padding: 0; }
    .sp-picks, .sp-meta { max-width: 460px; width: 100%; justify-self: center; }
    .sp-stage { max-width: 460px; justify-self: center; }
    .sp-ctrl { max-width: 460px; width: 100%; justify-self: center; }
    .sp-steps {
        flex-direction: row; overflow-x: auto; gap: 8px; margin-top: 14px; padding: 2px 2px 6px;
        scroll-snap-type: x proximity; scrollbar-width: none;
    }
    .sp-steps::-webkit-scrollbar { display: none; }
    .sp-step { flex: none; scroll-snap-align: center; }
    .sp-step a { grid-template-columns: auto auto; padding: 6px 14px 6px 6px; border: 1px solid var(--border-light, #dfe5ee); border-radius: 999px; }
    .sp-step-desc, .sp-step-go { display: none; }
    .sp-step-fill { left: 14px; right: 14px; }
    .sp-ends {
        justify-content: center; flex-direction: column; gap: 6px;
        max-width: 460px; width: 100%; justify-self: center; box-sizing: border-box;
        margin-top: 22px; margin-bottom: 8px; padding: 14px 16px 12px;
    }
    .sp-ends .btn.sp-end-main { padding: 9px 20px; font-size: .9rem; }
    .sp-end-link { font-size: .88rem; padding: 4px 0; }
}

/* Mobilon a "Nézd meg" gomb ide ugrik: a videónak (és a vezérlőnek) kell kitöltenie a képernyőt,
   nem a fejlécszövegnek. Ezért a szekció teteje, a cím és az alcím itt tömörebb. */
@media (max-width: 640px) {
    .sp { padding-top: 14px; scroll-margin-top: var(--header-h, 72px); }
    .sp-kicker { font-size: .72rem; margin-bottom: 4px; }
    .sp-title { font-size: 1.3rem; margin-bottom: 6px; }
    .sp-lead { font-size: .9rem; line-height: 1.45; margin-bottom: 14px; }
    /* alacsony kijelzőn a videó zsugorodik, hogy vezérlővel együtt kiférjen (4:5 képarány) */
    .sp:has(+ .framing-band), .sp:has(+ style + .framing-band) { padding-bottom: 28px; }
    /* mobilon a videó maga meséli a lépéseket: a görgethető pill-sor helyett egy halk állapotsor */
    .sp-steps { display: none; }
    .sp-status {
        display: block; grid-area: steps; margin: 10px 0 0; min-height: 1.4em; text-align: center;
        font-size: .82rem; font-weight: 600; letter-spacing: .01em; color: var(--text-secondary, #5a6678);
        font-variant-numeric: tabular-nums;
    }
    .sp-stage, .sp-ctrl, .sp-picks, .sp-meta { max-width: min(460px, calc((100svh - var(--header-h, 72px) - 150px) * .8)); }
    /* több sztorinál a videót NEM zsugorítjuk (olvashatóság) — a cím és a választók körüli térközből veszünk vissza */
    .sp--multi .sp-kicker { margin-bottom: 2px; }
    .sp--multi .sp-title { margin-bottom: 4px; }
    .sp--multi .sp-lead { margin-bottom: 10px; line-height: 1.4; }
    .sp-picks, .sp--multi .sp-picks { gap: 8px; margin-bottom: 10px; }
    .sp--multi .sp-ctrl { margin-top: 4px; }
    .sp-pick { padding: 8px 12px; border-radius: 12px; }
    .sp-pick-top { font-size: .86rem; }
    /* mobilon a választók második sora („Jóváhagyhatom?") kicsit erősebb: kisebb betű mellett is olvasható legyen */
    .sp-pick-q { font-size: .8rem; color: color-mix(in srgb, var(--text-primary, #16202e) 88%, var(--bg-primary, #fff)); font-weight: 500; }
    .sp-meta { margin-top: 8px; font-size: .78rem; }
}

/* ============================================================ 2 · jelenet */
.sp-scene {
    --n: #1B2A4A; --i: #4A55B8; --g: #22A06B; --r: #E5484D; --y: #FFC83D;
    font-family: var(--font-family, 'Inter', system-ui, sans-serif);
    color: var(--n); background: #FBF6EC;
    background-image: radial-gradient(#E9DFCB 2.2px, transparent 2.4px); background-size: 34px 34px;
    overflow: hidden; line-height: 1.2; text-align: left;
    -webkit-font-smoothing: antialiased;
}
.sp-scene *, .sp-scene *::before { box-sizing: border-box; }
.sp-scene .abs { position: absolute; }
.sp-scene .card { background: #fff; border: 5px solid var(--n); border-radius: 22px; box-shadow: 10px 10px 0 var(--n); }
/* A webhely közös .card szabálya (modern-design-system.css) transform-ÁTMENETET és hover-emelést ad. A jelenetben
   a mozgást a render(t) állítja képkockánként — egy CSS-átmenet ezt késleltetve követné (lassú indulás, majd
   felzárkózó rándulás). A jelenet kártyáin ezért nincs átmenet és nincs hover-hatás. */
/* Ugyanez a szabály belső margót (padding) és üveg-elmosást (backdrop-filter) is adna — a jelenet ezek nélkül
   készült (a render-eszköz és az MP4 sem tölti be), és az elmosás mozgás közben a legdrágább réteg. */
/* :where() = nulla súly: a közös .card-ot (és a .card:hover-t) felülírja, de a jelenetek saját, a <head>-be injektált
   szabályait (pl. .sp-scene--occ .strip { padding }) NEM — azok a lap törzsében betöltött CSS-nél korábban állnak. */
:where(.sp-scene) .card, :where(.sp-scene) .card:hover { transition: none; padding: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
:where(.sp-scene) .card:hover { box-shadow: 10px 10px 0 var(--n); transform: none; }
.sp-scene .hl { background: linear-gradient(var(--y), var(--y)) no-repeat 0 88% / 0% 42%; padding: 0 6px; margin: 0 -6px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.sp-scene .head { position: absolute; left: 60px; top: 104px; width: 960px; font-weight: 700; font-size: 64px; line-height: 1.1; letter-spacing: -.02em; }
.sp-scene .head .blk { display: block; }
.sp-scene .head .sub { font-size: .82em; color: var(--i); margin-top: 10px; }
.sp-scene .fin { top: 150px; text-align: center; font-size: 78px; }
.sp-scene [data-k="h6"], .sp-scene [data-k="h7"] { font-size: 54px; }
.sp-scene [data-k="h2"] { font-size: 58px; }

/* szabályzat */
.sp-scene .doc { left: 80px; top: 390px; width: 540px; height: 690px; }
.sp-scene .sheet { position: absolute; inset: 0; background: #EEE7D4; border: 5px solid var(--n); border-radius: 10px; }
.sp-scene .docmain { background: #F4EEDD; padding: 34px; overflow: hidden; }
.sp-scene .docmain h3 { font-family: Georgia, serif; font-size: 30px; text-align: center; letter-spacing: 3px; margin: 0; color: var(--n); }
.sp-scene .docmain h4 { font-family: Georgia, serif; font-size: 16px; text-align: center; font-weight: 400; margin: 6px 0 16px; color: #555; }
.sp-scene .doctext { font-family: Georgia, serif; font-size: 11.5px; line-height: 1.45; color: #77705F; text-align: justify; }
.sp-scene .docfoot { position: absolute; left: 0; right: 0; bottom: 12px; text-align: center; font-family: Georgia, serif; font-size: 15px; color: #6b6352; background: #F4EEDD; padding-top: 6px; }
.sp-scene .coffee { left: 350px; top: 490px; width: 150px; height: 150px; border-radius: 50%; border: 12px solid rgba(140, 90, 40, .28); }
.sp-scene .fname { left: 80px; top: 338px; background: var(--n); color: #fff; font-weight: 700; font-size: 22px; padding: 8px 18px; border-radius: 12px 12px 0 0; white-space: nowrap; }
.sp-scene .stamp { left: 170px; top: 600px; border: 7px solid var(--r); color: var(--r); font-weight: 700; font-size: 48px; padding: 6px 22px; border-radius: 14px; background: rgba(255, 255, 255, .55); white-space: nowrap; }
.sp-scene .dust { position: absolute; border-radius: 50%; background: #D9CDB3; border: 4px solid var(--n); }
.sp-scene .guy { width: 280px; height: 420px; transform-origin: 50% 100%; }
.sp-scene .z { position: absolute; left: 0; top: 0; font-weight: 700; color: var(--i); font-size: 60px; }

/* gép */
.sp-scene .machine { left: 330px; top: 400px; width: 420px; height: 470px; transform-origin: 50% 100%; }
.sp-scene .fly { position: absolute; left: 0; top: 0; width: 90px; height: 116px; background: #F4EEDD; border: 4px solid var(--n); border-radius: 6px;
    background-image: repeating-linear-gradient(#F4EEDD 0 14px, #C9BFA6 14px 18px); background-size: 60px 100%; background-position: 12px 10px; background-repeat: no-repeat; }
.sp-scene .chips { left: 0; top: 960px; width: 1080px; display: flex; justify-content: center; align-items: center; gap: 12px; }
.sp-scene .chip { height: 84px; padding: 0 26px; display: flex; align-items: center; font-weight: 700; font-size: 34px; border-radius: 44px; border: 5px solid var(--n); background: #fff; box-shadow: 6px 6px 0 var(--n); white-space: nowrap; }
.sp-scene .chip.ok { background: var(--g); color: #fff; }
.sp-scene .arr { font-weight: 700; font-size: 44px; }

/* laptop */
.sp-scene .laptop { left: 90px; top: 380px; width: 900px; height: 640px; }
.sp-scene .bezel { position: absolute; left: 0; top: 0; width: 900px; height: 580px; background: var(--n); border-radius: 30px; padding: 22px; }
.sp-scene .screen { position: relative; width: 856px; height: 536px; background: #fff; border-radius: 10px; overflow: hidden; }
.sp-scene .lbase { position: absolute; left: -60px; top: 580px; width: 1020px; height: 44px; background: #C9CFE8; border: 5px solid var(--n); border-radius: 0 0 40px 40px; }
.sp-scene .lbase::after { content: ""; position: absolute; left: 430px; top: -5px; width: 150px; height: 16px; background: var(--n); border-radius: 0 0 12px 12px; }
.sp-scene .panel { position: absolute; left: 0; top: 0; width: 856px; height: 536px; background: #fff; overflow: hidden; }
.sp-scene .nat { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.sp-scene .nat > img { display: block; max-width: none; }
.sp-scene .lov { background: #E8F0FE; display: flex; align-items: center; padding-left: 14px; font-size: 27px; font-weight: 600; color: #111; font-family: "Segoe UI", var(--font-family, sans-serif); }
.sp-scene .caret { display: inline-block; width: 3px; height: 28px; background: var(--i); margin-left: 2px; vertical-align: middle; }
.sp-scene .lbtn { left: 785px; top: 786px; width: 628px; height: 82px; border-radius: 12px; background: var(--g); color: #fff; font-weight: 700; font-size: 44px; display: flex; align-items: center; justify-content: center; }
.sp-scene .pill { left: 1098px; top: 1170px; width: 170px; height: 54px; background: #F6F5F3; display: flex; align-items: center; gap: 8px; color: #16A34A; font-weight: 700; font-size: 24px; }
.sp-scene .pill .pb { width: 60px; height: 8px; border-radius: 4px; background: #DCEFE2; }
.sp-scene .pill .pb span { display: block; height: 8px; border-radius: 4px; background: #16A34A; width: 0; }
.sp-scene .topbar { position: absolute; left: 0; top: 0; right: 0; height: 62px; background: var(--i); display: flex; align-items: center; padding: 0 22px; gap: 12px; color: #fff; font-weight: 700; font-size: 24px; }
.sp-scene .topbar img { width: 36px; }
.sp-scene .avatar { margin-left: auto; width: 42px; height: 42px; border-radius: 50%; background: var(--y); color: var(--n); display: flex; align-items: center; justify-content: center; font-size: 18px; border: 3px solid #fff; }
.sp-scene .exn { left: 48px; top: 86px; font-size: 19px; font-weight: 700; color: var(--i); }
.sp-scene .exq { left: 48px; top: 118px; width: 780px; font-size: 31px; font-weight: 700; line-height: 1.2; }
.sp-scene .opt { position: absolute; left: 48px; width: 760px; height: 74px; border: 4px solid #C3C8E0; border-radius: 16px; display: flex; align-items: center; gap: 16px; padding: 0 18px; font-size: 23px; font-weight: 600; background: #fff; }
.sp-scene .opt b { flex: none; width: 40px; height: 40px; border-radius: 50%; background: #EEF0FA; display: flex; align-items: center; justify-content: center; font-weight: 700; }
.sp-scene .opt.is-ok { border-color: var(--g); background: #E3F6EC; }
.sp-scene .opt.is-ok b { background: var(--g); color: #fff; }
.sp-scene .result { position: absolute; inset: 0; background: rgba(27, 42, 74, .55); display: flex; align-items: center; justify-content: center; opacity: 0; }
.sp-scene .rescard { background: #fff; border-radius: 24px; border: 5px solid var(--n); padding: 30px 50px; text-align: center; }
.sp-scene .rescard .big { width: 110px; height: 110px; margin: 0 auto 12px; border-radius: 50%; background: var(--g); color: #fff; font-size: 70px; font-weight: 700; display: flex; align-items: center; justify-content: center; border: 5px solid var(--n); }
.sp-scene .rescard .rt { font-size: 42px; font-weight: 700; }
.sp-scene .rescard .rs { font-size: 23px; font-weight: 600; color: #6A7390; margin-top: 4px; }
.sp-scene .cursor { left: 0; top: 0; width: 44px; height: 56px; z-index: 50; }
.sp-scene .ripple { left: 0; top: 0; width: 80px; height: 80px; border-radius: 50%; border: 6px solid var(--y); margin: -40px 0 0 -40px; }

/* ablakok: csak címsor, nincs Mac-pötty — a keret nyelve a lap proof-frame-jéé */
.sp-scene .win { position: absolute; overflow: hidden; padding-top: 50px; }
.sp-scene .chrome { position: absolute; left: 0; right: 0; top: 0; height: 50px; background: #E8EAF4; border-bottom: 4px solid var(--n); display: flex; align-items: center; padding: 0 20px; }
.sp-scene .chrome span { font-size: 19px; font-weight: 700; color: #56607e; }
.sp-scene .view { position: relative; overflow: hidden; }
.sp-scene .stampOk { position: absolute; width: 96px; height: 96px; margin: -48px 0 0 -48px; border-radius: 50%; background: var(--g); border: 6px solid var(--n); color: #fff; font-size: 60px; font-weight: 700; display: flex; align-items: center; justify-content: center; }

/* checklist */
.sp-scene .clip { left: 230px; top: 400px; width: 620px; height: 700px; padding: 70px 40px 30px; }
.sp-scene .clipbar { left: 210px; top: -34px; width: 200px; height: 64px; background: #C9CFE8; border: 5px solid var(--n); border-radius: 16px; }
.sp-scene .clk { font-size: 20px; font-weight: 700; color: var(--i); text-transform: uppercase; letter-spacing: .04em; }
.sp-scene .clt { font-size: 34px; font-weight: 700; margin: 4px 0 22px; line-height: 1.1; }
.sp-scene .cli { display: flex; align-items: center; gap: 18px; font-size: 27px; font-weight: 600; padding: 14px 0; border-bottom: 3px dashed #E1E3EF; }
.sp-scene .cli i { flex: none; width: 44px; height: 44px; border-radius: 10px; border: 4px solid var(--n); display: flex; align-items: center; justify-content: center; font-style: normal; font-size: 30px; font-weight: 700; color: #fff; background: #fff; }
.sp-scene .cli i.on { background: var(--g); }
.sp-scene .clf { left: 40px; right: 40px; bottom: 34px; display: flex; justify-content: space-between; align-items: center; font-size: 24px; font-weight: 700; }
.sp-scene .clc { background: #E3F6EC; color: var(--g); padding: 6px 16px; border-radius: 20px; border: 3px solid var(--g); }

/* zárókép */
.sp-scene .minidoc { left: 90px; top: 520px; width: 170px; height: 220px; }
.sp-scene .mdl { left: 26px; top: 30px; right: 26px; height: 120px; background: repeating-linear-gradient(#E6DFCB 0 12px, #BDB397 12px 17px); }
.sp-scene .mdt { left: -20px; right: -20px; bottom: -44px; text-align: center; font-weight: 700; font-size: 24px; color: #8a8069; }
.sp-scene .grid { left: 560px; top: 520px; display: grid; grid-template-columns: repeat(5, 46px); gap: 8px; padding: 18px; }
.sp-scene .grid div { width: 46px; height: 46px; border-radius: 10px; background: #E8E3D6; border: 3px solid var(--n); }
.sp-scene .grid div.on { background: var(--g); }
.sp-scene .gridlab { left: 520px; top: 846px; width: 398px; text-align: center; font-weight: 700; font-size: 24px; }
.sp-scene .logocard { left: 290px; top: 890px; width: 500px; height: 330px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.sp-scene .logocard img { height: 220px; }
.sp-scene .logocard div { font-weight: 700; font-size: 36px; color: var(--i); margin-top: -8px; }
@media (max-width: 880px) {
    .sp-step-label { font-size: .92rem; }
    .sp-step-num { width: 24px; height: 24px; }
}

/* ============================================================ 3 · hero, ha sztori követi
   A homepage.css a mélység-nézetekben a herót --depth-peek-nyivel rövidebbre veszi, hogy a
   nézetválasztó bekandikáljon. Ahol a hero után a sztori jön (a választó csak alatta), ott a
   bekandikáló sáv csak a sztori üres felső paddingje lenne — fehér csík a mesh alatt. Ezért itt a hero
   a teljes viewportot kitölti; a két hero-gomb viszi tovább a látogatót. Csak a Rövidenben: az
   Áttekintésben (oneDashboard) a sztori a választó UTÁN jön, ott a választó marad a bekandikáló. A :has(#story) miatt egy
   depth-swap után (amikor ez a stíluslap a head-ben marad) a sztori nélküli nézetek érintetlenek. */
body[data-depth="brief"]:has(#story) .hero-section { min-height: 100vh; }
@supports (height: 100svh) {
    body[data-depth="brief"]:has(#story) .hero-section { min-height: 100svh; }
}

/* ============================================================ 4 · közös kit-elemek (js/stories/_kit.js)
   Telefon-keret: 420×860-as test, a képernyő 390×800-as belső. */
.sp-scene .phone { left: 0; top: 0; width: 420px; height: 860px; background: var(--n); border-radius: 64px; padding: 30px 15px; box-shadow: 10px 10px 0 rgba(27, 42, 74, .9); }
.sp-scene .phone-notch { position: absolute; left: 150px; top: 14px; width: 120px; height: 26px; border-radius: 13px; background: #0d1628; z-index: 2; }
.sp-scene .phone-screen { position: relative; width: 390px; height: 800px; border-radius: 44px; overflow: hidden; background: #fff; }

/* ============================================================ 5 · Áttekintés: teaser-kártya + lightbox (story-teaser.php)
   Halk, vékony kártya egy ÁLLÓ előnézettel — nem autoplay, nem mozog. A lightbox ugyanazt a lejátszót
   használja; a végén két út: „Röviden nézet" · „Maradok az Áttekintésen". */
.spt { padding: clamp(18px, 2.6vw, 32px) 0; }
/* szekción belüli teaser (pl. a oneTiming kérdés- és monitor-szekciójában): nincs saját sáv */
.spt--inline { padding: 0; margin-top: 18px; }
.spt-row { display: flex; justify-content: center; margin-top: clamp(18px, 2.4vw, 28px); }
.spt-row .spt--inline { margin-top: 0; width: 100%; max-width: 560px; }
.spt-card {
    display: flex; align-items: center; gap: 16px; margin: 0 auto; max-width: 560px; width: 100%;
    padding: 10px 20px 10px 10px; border-radius: 16px; text-align: left; cursor: pointer;
    border: 1px solid var(--border-light, #e6eaf0); background: var(--bg-primary, #fff); color: inherit;
    box-shadow: 0 12px 28px -24px rgba(16, 30, 54, .35); transition: border-color .2s, transform .2s, box-shadow .2s;
}
.spt-card:hover, .spt-card:focus-visible { border-color: var(--accent-current, #4A55B8); transform: translateY(-1px); box-shadow: 0 16px 34px -24px rgba(16, 30, 54, .45); }
.spt-thumb { position: relative; flex: none; width: 72px; height: 90px; border-radius: 10px; overflow: hidden; background: #FBF6EC; border: 1px solid var(--border-light, #e6eaf0); }
.spt-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.spt-play { position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; background: var(--accent-current, #4A55B8); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 14px -6px rgba(16, 30, 54, .6); }
.spt-play svg { margin-left: 2px; }
.spt-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.spt-q { font-weight: 600; font-size: 1.02rem; color: var(--text-primary, #16202e); }
.spt-sub { font-size: .9rem; color: var(--text-secondary, #5a6678); }
.spt-go { margin-top: 4px; font-size: .86rem; font-weight: 600; color: var(--accent-current, #4A55B8); letter-spacing: .01em; }
.spt-card:hover .spt-go, .spt-card:focus-visible .spt-go { text-decoration: underline; text-underline-offset: 3px; }

html.spm-lock { overflow: hidden; }
.spm-backdrop { position: fixed; inset: 0; z-index: 3000; background: rgba(10, 16, 30, .74); display: flex; align-items: center; justify-content: center; padding: 16px; }
.spm-backdrop[hidden] { display: none; }
.spm { position: relative; width: min(92vw, calc((100svh - 150px) * .8)); max-width: 560px; background: var(--bg-primary, #fff); border-radius: 20px; padding: 14px 14px 10px; box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .6); }
.spm .sp-stage { cursor: pointer; }
.spm .sp-ctrl { margin-top: 10px; }
.spm-close { position: absolute; right: -14px; top: -14px; z-index: 3; width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--bg-primary, #fff); color: var(--text-primary, #16202e); font-size: 26px; line-height: 1; cursor: pointer; box-shadow: 0 6px 18px -6px rgba(0, 0, 0, .5); }
.spm-end { position: absolute; inset: auto 0 0 0; z-index: 2; display: none; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 18px 16px 20px; background: linear-gradient(transparent, rgba(251, 246, 236, .96) 35%); }
.spm.is-ended.sp-played .spm-end { display: flex; }
@media (max-width: 560px) {
    .spm-close { right: 6px; top: 6px; }
    /* mobilon közel teljes szélesség: kisebb keret és padding */
    .spm-backdrop { padding: 8px; }
    .spm { width: min(100%, calc((100svh - 120px) * .8)); padding: 10px 10px 8px; border-radius: 16px; }
}
.spm.is-ended.sp-played .sp-bigplay { opacity: 0; pointer-events: none; }