/* ==========================================================================
   /partner/ and /white-label/ (cards 0db8b295, 38e8f8e9, 2026-10-28)
   Loaded after /stilus.css: same night ink, lamp amber, radar cyan, Archivo +
   Instrument Sans, same header and footer, so the two pages read as one product.
   Concept: partner = "the recommendation comes back" (your link -> five clients a month ->
   their commission flows back; the one forint figure sits in the hero, rates and levels are
   shown after login, Zoltán TG 63034); white label = "your name on their phone" (the
   header is relabelled with the partner's name, mark and colour).
   Built by eszkoz/pp-epit.py, which copies this file to /partner-wl.css.
   ========================================================================== */

/* ---------- hero: text left, figure right; the figure never leaves more than half empty ---------- */
.pp-nyit{padding:0}
.pp-nyit-racs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center;
  min-height:min(780px,calc(100svh - var(--hd-h)));padding-top:56px;padding-bottom:56px}
.pp-nyit h1{font-size:clamp(2.3rem,4vw,3.6rem);font-weight:900;letter-spacing:-.025em;line-height:1.05;margin:0 0 20px}
.pp-nyit h1 .h1-sor{display:block;color:#fff;text-wrap:balance}
.pp-nyit h1 em.h1-sor{font-style:normal;color:var(--signal)}
.pp-nyit .hos-lead{font-size:1.18rem;max-width:32em}
.pp-nyit .hos-gomb-alatt{max-width:32em}
.pp-nyit-abra{position:relative;will-change:transform}
.pp-nyit-abra svg{width:100%;height:auto;max-height:calc(100svh - var(--hd-h) - 80px)}

/* H1 lines rise out of a mask on load (first filmic beat), then label, lead, CTA */
.js .pp-nyit h1 .h1-sor{clip-path:inset(0 0 0 0)}
.js .pp-nyit h1.belep{opacity:1;transform:none;animation:none}
.js .pp-nyit h1 .h1-sor{opacity:0;transform:translateY(.45em);animation:pp-sor 1s var(--ease-out) forwards}
.js .pp-nyit h1 .h1-sor + .h1-sor{animation-delay:.16s}
@keyframes pp-sor{to{opacity:1;transform:none}}

/* partner hero figure: lines draw, clients light up, pulses flow back (js), counter */
.js .pp-ajanlas .pp-ut{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.1s var(--ease-out);transition-delay:calc(.5s + var(--i) * .12s)}
.js .pp-ajanlas.el .pp-ut{stroke-dashoffset:0}
.js .pp-ajanlas .pp-ugyfel{opacity:0;transform:scale(.7);transform-box:fill-box;transform-origin:center;transition:opacity .6s var(--ease-out),transform .6s var(--ease-out);transition-delay:calc(1.1s + var(--i) * .12s)}
.js .pp-ajanlas.el .pp-ugyfel{opacity:1;transform:none}
.pp-ugyfel.kap circle{stroke:#FFB020}
.pp-impulzus{pointer-events:none}
.js .pp-ajanlas .pp-szamlalo{opacity:0;transition:opacity .8s var(--ease-out) 1.4s}
.js .pp-ajanlas.el .pp-szamlalo{opacity:1}

/* ---------- two-column text sections ---------- */
.pp-ket-has{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:56px;align-items:start}
.pp-ket-has .szakasz-fej{margin-bottom:0}
.pp-jelenet-szoveg p{font-size:1.2rem;line-height:1.65;color:var(--ink);max-width:34em}
.pp-jelenet-szoveg p:last-child{margin:0;font-family:var(--fd);font-weight:700;font-size:1.32rem;line-height:1.4}
.halvany .pp-jelenet-szoveg p:last-child{color:var(--ink)}

/* ---------- steps ---------- */
.pp-lepesek{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;position:relative}
.pp-lepesek-ket{grid-template-columns:repeat(2,minmax(0,1fr));max-width:900px}
.pp-lepesek li{position:relative;padding:26px 22px;border-radius:14px;background:#fff;border:1px solid var(--line);transition-delay:calc(var(--i) * .1s)}
.pp-lepesek b{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:10px;background:var(--ink);color:var(--signal);font-family:var(--fd);font-size:1.15rem;margin-bottom:16px}
.pp-lepesek li:last-child b{background:var(--signal);color:var(--ink)}
.pp-lepesek li:not(:last-child)::after{content:"";position:absolute;top:48px;right:-18px;width:18px;height:2px;background:var(--signal)}
.pp-lepesek h3{font-size:1.2rem;margin-bottom:8px}
.pp-lepesek p{color:var(--muted);font-size:.98rem;margin:0}
.pp-cim{display:inline-block;font-family:var(--fb);font-weight:700;font-size:.95em;color:var(--ink);background:var(--signal-soft);border:1px solid rgba(var(--szin-borostyan),.45);border-radius:6px;padding:1px 7px;overflow-wrap:anywhere}

/* ---------- cards ---------- */
.pp-kartyak{display:grid;gap:18px}
.pp-ket{grid-template-columns:repeat(2,minmax(0,1fr))}
.pp-kartyak li{padding:28px 26px;border-radius:14px;background:#fff;border:1px solid var(--line);transition-delay:calc(var(--i) * .1s)}
.pp-kartyak .ik{margin-bottom:16px;color:var(--ink)}
.pp-kartyak h3{font-size:1.18rem;margin-bottom:8px}
.pp-kartyak p{margin:0;color:var(--muted)}
.pp-kartyak p b{color:var(--ink);font-family:var(--fd)}
.pp-sotet-kartyak li{background:#141F36;border-color:rgba(255,255,255,.08)}
.pp-sotet-kartyak .ik{color:#fff}
.pp-sotet-kartyak h3{color:#fff}
.pp-sotet-kartyak p{color:var(--on-ink-2)}
.pp-sotet-kartyak p b{color:#fff}
.pp-kartyak li:hover{border-color:var(--signal);transform:translateY(-3px)}
.pp-kartyak li{transition:opacity .8s var(--ease-out),transform .45s var(--ease-out),border-color .25s}

/* ---------- partner dashboard mock ---------- */
.pp-felulet-racs{align-items:center}
.pp-felulet-tarto{margin:0;will-change:transform}
.pp-felulet{width:100%;height:auto;filter:drop-shadow(0 40px 60px rgba(7,12,24,.25))}
.pp-takart{filter:blur(1.5px)}

/* ---------- form ---------- */
.pp-jel-racs{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px;align-items:start}
.pp-urlap .mezo{margin-bottom:16px}
.pp-urlap fieldset.mezo{border:0;padding:0;margin:0 0 16px;min-width:0}
.pp-elotag{display:flex;align-items:stretch;border:1.5px solid #9AA6BC;border-radius:8px;overflow:hidden;background:#fff}
.pp-elotag span{display:flex;align-items:center;padding:0 4px 0 14px;color:var(--muted);font-weight:600;white-space:nowrap;background:var(--paper-2)}
.pp-elotag input[type=text]{border:0;border-radius:0;min-width:0}
.pp-elotag:focus-within{border-color:var(--ink);outline:3px solid rgba(255,176,32,.55);outline-offset:1px}
.pp-elotag input:focus{outline:0}
.mezo input[type=url]{width:100%;min-height:48px;padding:11px 14px;font:inherit;font-size:1rem;color:var(--ink);background:#fff;border:1.5px solid #9AA6BC;border-radius:8px}
.mezo input[type=url]:focus{border-color:var(--ink);outline:3px solid rgba(255,176,32,.55);outline-offset:1px}
.pp-urlap .pipa-mezo{margin:20px 0 18px}
.pp-urlap .pipa-mezo a{color:inherit}
.pp-nyilik{margin:12px 0 0;text-align:center;font-family:var(--fd);font-weight:700;color:var(--signal-text)}
.pp-urlap .urlap-megj{margin-top:6px}
/* Short white-label form: what the address is for, instead of a consent checkbox (Zoltán TG 63514) */
.pp-adat{font-size:.86rem;line-height:1.5;color:var(--muted);margin:14px 0 0;text-align:center}
.pp-adat a{color:inherit}
/* Home page logo image in header and footer (Zoltán TG 63514) */
.marka-kep img{display:block;height:40px;width:auto}
.lab .marka-kep img{height:30px}
.lab .marka-kep,.lab .marka-kep:hover{border-bottom:0}
@media (max-width:760px){.fej .marka-kep img{height:34px}}

/* ---------- white label hero: the phone ---------- */
.wl-szinpad{position:relative;display:flex;justify-content:center;align-items:center;gap:22px}
.wl-telefon{width:min(330px,100%);height:auto;filter:drop-shadow(0 50px 70px rgba(0,0,0,.5))}
/* without JS the phone shows the partner's name straight away; with JS it starts as Pilóta */
.wl-fej-pilota{opacity:0}
.js .wl-szinpad:not(.sajat) .wl-fej-pilota{opacity:1}
.js .wl-szinpad:not(.sajat) .wl-fej-sajat{opacity:0;transform:translateY(10px)}
.js .wl-szinpad.sajat .wl-fej-pilota{transform:translateY(-10px)}
.wl-fej-pilota,.wl-fej-sajat{transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.wl-szin-kitolt{transition:fill .5s var(--ease-out)}
.js .wl-buborek{opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.js .wl-szinpad.sajat .wl-b1{opacity:1;transform:none;transition-delay:.5s}
.js .wl-szinpad.sajat .wl-b2{opacity:1;transform:none;transition-delay:1s}
.wl-szinek{display:flex;flex-direction:column;gap:12px}
.wl-szin{width:44px;height:44px;border-radius:50%;border:3px solid rgba(255,255,255,.25);background:var(--c);cursor:pointer;padding:0;transition:transform .25s var(--ease-out),border-color .25s}
.wl-szin:hover{transform:scale(1.08)}
.wl-szin.aktiv{border-color:#fff}

/* ---------- white label layers figure ---------- */
.wl-tied-racs{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px;align-items:start}
.wl-retegek-tarto{margin:0;position:sticky;top:calc(var(--hd-h) + 32px)}
.wl-retegek{width:100%;height:auto}
.js .wl-reteg{opacity:0;transform:translateY(-34px);transition:opacity .7s var(--ease-out),transform .9s var(--ease-out);transition-delay:calc(.2s + var(--i) * .13s)}
.js .rv.on .wl-reteg{opacity:1;transform:none}
.wl-lap .kinek h3{font-size:1.2rem;margin-bottom:14px}
.wl-lap .kinek a{color:var(--ink);font-weight:600}

/* ---------- section figures (jelenet, hiedelem) ---------- */
.pp-abra-tarto{margin:36px 0 0;max-width:420px}
.pp-abra-tarto svg{width:100%;height:auto;display:block}
.js .pp-bub{opacity:0;transform:translateY(12px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out);transition-delay:calc(.15s + var(--i) * .32s)}
.js .rv.on .pp-bub{opacity:1;transform:none}
.wl-athuz{stroke-dasharray:1;stroke-dashoffset:0}
.js .wl-athuz{stroke-dashoffset:1;transition:stroke-dashoffset .7s var(--ease-out);transition-delay:calc(.5s + var(--i) * .3s)}
.js .rv.on .wl-athuz{stroke-dashoffset:0}
.pp-ket-has > .pp-kartyak{grid-template-columns:minmax(0,1fr)}

/* ==========================================================================
   Partner page, round 2 (Zoltán TG 63034, Lead brief 1028)
   ========================================================================== */

/* hero: amber is kept for the one figure, the H1 reads in one colour */
.partner-lap .pp-nyit-racs{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.partner-lap .pp-nyit h1{font-size:clamp(2.1rem,3.3vw,3.1rem);margin-bottom:26px}
.partner-lap .pp-nyit h1 em.h1-sor{color:#fff}
.pp-szam{margin:0 0 6px;font-size:1.25rem;line-height:1.2;color:#fff}
.pp-szam-elo,.pp-szam-uto{font-family:var(--fd);font-weight:700}
.pp-szam-elo{display:block;margin-bottom:6px}
/* Two figure rows since the Doc of 2026-11-02 (card 0db8b295): smaller than the single 4.4rem figure */
.pp-szam-sor{display:block}
.pp-szam-sor+.pp-szam-sor{margin-top:16px}
.pp-szam strong{font-family:var(--fd);font-weight:900;font-size:clamp(2.4rem,4vw,3.6rem);line-height:1;
  letter-spacing:-.03em;color:var(--signal);white-space:nowrap}
.pp-szam-uto{white-space:nowrap;margin-left:.3em}
.pp-jelenet .pp-ket-has{align-items:center}
.pp-szam-alatt{margin:0 0 22px;max-width:30rem;font-size:.95rem;color:var(--on-ink-2)}

/* "Így működik": one rail, two phases. Row 1 gets you to the first referral, row 2 is the
   money; the rail fills stop by stop as the row comes in (kk-design-guardrails 5) */
.pp-folyamat{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:0;row-gap:48px;margin:8px 0 0;padding:0;list-style:none}
.pp-folyamat li{position:relative;padding:34px 32px 0 0}
.pp-folyamat li::before,.pp-folyamat li::after{content:"";position:absolute;left:0;right:0;top:7px;height:3px;border-radius:2px}
.pp-folyamat li::before{background:var(--line)}
.pp-folyamat li::after{background:var(--ink);transform-origin:0 50%}
.pp-folyamat li.pp-penz::after{background:var(--signal)}
.pp-folyamat li:nth-child(3n)::before,.pp-folyamat li:nth-child(3n)::after{right:32px}
.pp-f-jel{position:absolute;left:0;top:0;width:17px;height:17px;border-radius:5px;background:var(--ink);box-shadow:0 0 0 5px #fff;z-index:1}
.pp-penz .pp-f-jel{background:var(--signal)}
.pp-folyamat h3{font-size:1.22rem;margin:0 0 8px}
.pp-folyamat p{margin:0;color:var(--muted);font-size:1rem;max-width:30em}
.js .pp-folyamat li{opacity:0;transform:translateY(12px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out);transition-delay:calc(var(--i) * .22s)}
.js .pp-folyamat li::after{transform:scaleX(0);transition:transform .7s var(--ease-out);transition-delay:calc(.15s + var(--i) * .22s)}
.js .pp-folyamat li.on{opacity:1;transform:none}
.js .pp-folyamat li.on::after{transform:scaleX(1)}

/* dashboard mock: blurred values, the discount slider moves once when it comes in */
.pp-takart{filter:blur(2px)}
.js .pp-felulet .pp-cs-tolt{transform:scaleX(.2);transform-box:fill-box;transform-origin:0 50%;transition:transform 1.2s var(--ease-out) .5s}
.js .pp-felulet .pp-cs-gomb{transform:translateX(-120px);transition:transform 1.2s var(--ease-out) .5s}
.js .pp-felulet-tarto.on .pp-cs-tolt,.js .pp-felulet-tarto.on .pp-cs-gomb{transform:none}

/* "Miért könnyű ajánlani": ruled list beside the 27-minute clock, no cards, no icons */
.pp-miert-racs{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:64px;align-items:center}
.pp-vonalzo{margin:28px 0 0;padding:0;list-style:none}
.pp-vonalzo li{padding:22px 0;border-top:1px solid rgba(255,255,255,.14);display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:28px;
  transition-delay:calc(var(--i) * .1s)}
.pp-vonalzo li:last-child{border-bottom:1px solid rgba(255,255,255,.14)}
.pp-vonalzo h3{margin:0;font-size:1.2rem;line-height:1.3;color:#fff}
.pp-vonalzo p{margin:0;color:var(--on-ink-2)}
.pp-perc{margin:0;max-width:340px;justify-self:end;width:100%}
.pp-perc-svg{width:100%;height:auto;display:block}
.pp-perc-iv{stroke-dasharray:1;stroke-dashoffset:0}
.js .pp-perc-iv{stroke-dashoffset:1;transition:stroke-dashoffset 1.4s var(--ease-out) .2s}
.js .pp-perc.on .pp-perc-iv{stroke-dashoffset:0}
.js .pp-perc-pont{opacity:0;transition:opacity .4s var(--ease-out) 1.4s}
.js .pp-perc.on .pp-perc-pont{opacity:1}

/* form: the left column carries the three steps (no empty half beside the form) */
.pp-jel .szakasz-fej{position:sticky;top:calc(var(--hd-h) + 32px)}
.pp-lepesjelzo{margin:32px 0 0;padding:0;list-style:none;counter-reset:none}
.pp-lepesjelzo li{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr);gap:16px;padding:0 0 26px}
.pp-lepesjelzo li:not(:last-child)::before{content:"";position:absolute;left:19px;top:44px;bottom:6px;width:2px;background:var(--line)}
.pp-lepesjelzo li.kesz:not(:last-child)::before{background:var(--ink)}
.pp-lj-jel{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:8px;border:2px solid #9AA6BC;
  background:#fff;font-family:var(--fd);font-weight:800;color:var(--muted);transition:background .3s var(--ease-out),border-color .3s,color .3s}
.pp-lj-szoveg{display:flex;flex-direction:column;gap:2px;padding-top:8px}
.pp-lj-szoveg b{font-family:var(--fd);font-size:1.08rem}
.pp-lj-szoveg span{color:var(--muted);font-size:.95rem}
.js .pp-lepesjelzo li[aria-current] .pp-lj-jel{background:var(--signal);border-color:var(--signal);color:var(--ink)}
.js .pp-lepesjelzo li.kesz .pp-lj-jel{background:var(--ink);border-color:var(--ink);color:var(--signal)}
html:not(.js) .pp-lepesjelzo li{padding-bottom:18px}
.pp-lepes{border:0;margin:0;padding:0;min-width:0}
.pp-lepes + .pp-lepes{margin-top:24px}
.js .lepeses-on .pp-lepes + .pp-lepes{margin-top:0}
.pp-lepes-cim{display:flex;align-items:baseline;gap:10px;padding:0;margin:0 0 18px;font-family:var(--fd);font-weight:800;font-size:1.35rem;color:var(--ink)}
.pp-lepes-cim:focus{outline:0}
.pp-lepes-cim:focus-visible{outline:3px solid rgba(255,176,32,.55);outline-offset:4px;border-radius:4px}
.pp-lepes-szam{font-family:var(--fb);font-weight:600;font-size:.95rem;color:var(--muted);font-variant-numeric:tabular-nums}
.pp-lepes-nav{display:flex;gap:12px;align-items:center;margin-top:8px}
.pp-lepes-nav .gomb{flex:1}
.gomb-vissza{min-height:52px;min-width:44px;padding:0 20px;font:inherit;font-weight:600;color:var(--ink);background:transparent;border:1.5px solid #9AA6BC;
  border-radius:10px;cursor:pointer;transition:border-color .2s,background .2s}
.gomb-vissza:hover{border-color:var(--ink);background:var(--paper-2)}
.gomb-vissza:active{transform:scale(.97)}
.gomb-vissza:focus-visible{outline:3px solid rgba(255,176,32,.55);outline-offset:2px}
html:not(.js) .csak-js,html:not(.js) [data-vissza]{display:none}
/* consent row as a grid: the error line sits under the text, the box never moves */
.pp-lepes .pipa-mezo{display:grid;grid-template-columns:22px minmax(0,1fr);column-gap:12px}
.pp-lepes .pipa-mezo .hiba{grid-column:2}
.pp-lepes .pipa-mezo.hibas .hiba{display:block}
.js .lepeses-on .pp-lepes:not([hidden]){animation:pp-lepes-be .35s var(--ease-out)}
@keyframes pp-lepes-be{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}

/* ---------- wide vs tall drawing of the same figure (labels stay >= 11 px at 320 px) ---------- */
.pp-csak-mobil{display:none}
@media (max-width:560px){
  .pp-csak-asztal{display:none}
  .pp-nyit-abra svg.pp-csak-mobil,svg.pp-csak-mobil{display:block}
}

/* ---------- white label 1/b: two paths (Zoltán TG 63514, reseller too) ----------
   Two equal cards: same size, same weight, same figure layout. The border glow follows the
   HorizonX "Border Glow" idea in plain CSS (a gradient ring masked to the 1.5px border), on
   both cards, so the reseller card is never the paler one. */
.wl-ket-ut .szakasz-fej{text-align:center;margin-left:auto;margin-right:auto;max-width:640px}
.wl-ket-ut .szakasz-fej p:not(.cimke){font-size:1.15rem;color:var(--muted);margin:12px 0 0}
.wl-utak{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;max-width:1040px;margin:0 auto;padding:0;list-style:none}
.wl-ut{position:relative;padding:30px 30px 32px;border-radius:18px;background:#fff;box-shadow:0 1px 0 rgba(7,12,24,.04),0 18px 40px -24px rgba(7,12,24,.25);
  transition:opacity .8s var(--ease-out),transform .45s var(--ease-out),box-shadow .3s;transition-delay:calc(var(--i) * .1s)}
.wl-ut::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;
  background:linear-gradient(135deg,var(--ut,#2ECF92),rgba(220,227,237,.9) 45%,rgba(220,227,237,.9) 60%,var(--ut,#2ECF92));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.wl-ut + .wl-ut{--ut:#FFB020}
.wl-ut:hover{transform:translateY(-3px);box-shadow:0 1px 0 rgba(7,12,24,.04),0 24px 48px -22px rgba(7,12,24,.32)}
.wl-ut-abra{display:block;width:100%;max-width:340px;height:auto;margin:0 0 22px}
.wl-ut h3{font-size:clamp(1.3rem,1.8vw,1.55rem);letter-spacing:-.01em;margin:0 0 10px}
.wl-ut p{margin:0;color:var(--muted);font-size:1.05rem;line-height:1.6}
.wl-utak-alatt{max-width:760px;margin:32px auto 0;text-align:center;text-wrap:balance;font-family:var(--fd);font-weight:700;font-size:1.18rem;line-height:1.45;color:var(--ink)}
/* figure: lines draw when the card reveals, the Pilot chip rides from you to the client */
.js .wl-ut .wl-ut-vonal{stroke-dashoffset:1;transition:stroke-dashoffset 1s var(--ease-out) .35s}
.js .wl-ut .wl-ut-vonal:not(.wl-ut-vissza){stroke-dasharray:1}
.js .wl-ut + .wl-ut .wl-ut-vissza{stroke-dasharray:1}
.js .wl-ut.on .wl-ut-vonal{stroke-dashoffset:0}
.js .wl-ut .wl-ut-vissza{transition-delay:.9s}
.js .wl-ut .wl-ut-chip{transform:translateX(-42px);opacity:0;transition:transform 1.1s var(--ease-out) .4s,opacity .4s .4s}
.js .wl-ut.on .wl-ut-chip{transform:none;opacity:1}

/* ---------- breakpoints ---------- */
@media (max-width:1080px){
  .pp-miert-racs{grid-template-columns:minmax(0,1fr) minmax(0,.6fr);gap:40px}
  .pp-vonalzo li{grid-template-columns:minmax(0,1fr);gap:6px}
  .pp-lepesek{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pp-lepesek li:nth-child(2)::after{display:none}
  .wl-tied-racs{grid-template-columns:minmax(0,1fr)}
  .wl-retegek-tarto{position:static;max-width:560px}
}
@media (max-width:860px){
  .pp-nyit-racs,.partner-lap .pp-nyit-racs{grid-template-columns:minmax(0,1fr);min-height:0;padding-top:28px;padding-bottom:40px;gap:20px}
  .pp-nyit-abra{max-width:460px;margin:0 auto;width:100%}
  .pp-ket-has,.pp-jel-racs{grid-template-columns:minmax(0,1fr);gap:28px}
  .pp-ket{grid-template-columns:minmax(0,1fr)}
  .wl-utak{grid-template-columns:minmax(0,1fr);max-width:560px}
  .pp-felulet-tarto{max-width:520px}
  /* the rail turns vertical: one column, the line runs down the left */
  .pp-folyamat{grid-template-columns:minmax(0,1fr);row-gap:0}
  .pp-folyamat li{padding:0 0 30px 40px}
  .pp-folyamat li::before,.pp-folyamat li::after,.pp-folyamat li:nth-child(3n)::before,.pp-folyamat li:nth-child(3n)::after{left:7px;right:auto;top:20px;bottom:0;width:3px;height:auto}
  .pp-folyamat li:last-child::before,.pp-folyamat li:last-child::after{display:none}
  .js .pp-folyamat li::after{transform:scaleY(0);transform-origin:50% 0}
  .js .pp-folyamat li.on::after{transform:scaleY(1)}
  .pp-f-jel{top:2px}
  .pp-miert-racs{grid-template-columns:minmax(0,1fr);gap:36px}
  .pp-perc{justify-self:start;max-width:300px}
  .pp-jel .szakasz-fej{position:static}
  /* steps above the form: one compact row */
  .pp-lepesjelzo{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:20px}
  .pp-lepesjelzo li{grid-template-columns:minmax(0,1fr);gap:8px;padding:0}
  .pp-lepesjelzo li:not(:last-child)::before{left:48px;right:4px;top:19px;bottom:auto;width:auto;height:2px}
  .pp-lj-szoveg{padding-top:0}
  .pp-lj-szoveg span{display:none}
  .pp-lj-szoveg b{font-size:.98rem}
}
@media (max-width:560px){
  .pp-lepesek,.pp-lepesek-ket{grid-template-columns:minmax(0,1fr)}
  .pp-lepesek li::after{display:none}
  .pp-jelenet-szoveg p{font-size:1.08rem}
  .pp-jelenet-szoveg p:last-child{font-size:1.15rem}
  .wl-szinpad{gap:14px}
  .wl-telefon{width:min(250px,72vw)}
  .wl-szin{width:44px;height:44px}
  .pp-elotag span{padding-left:10px;font-size:.92rem}
  .pp-kartyak li{padding:22px 20px}
  .wl-ut{padding:24px 20px 26px}
  .wl-utak-alatt{font-size:1.08rem;margin-top:24px}
  .pp-szam{font-size:1.1rem}
  .pp-szam strong{font-size:clamp(2.1rem,9.5vw,2.6rem)}
  .pp-lepes-cim{font-size:1.2rem}
  .gomb-vissza{padding:0 16px}
}

/* ---------- reduced motion: final states, nothing moves (lap.js and partner-wl.js also skip) ---------- */
@media (prefers-reduced-motion:reduce){
  .js .pp-nyit h1 .h1-sor,.js .pp-ajanlas .pp-ugyfel,.js .pp-ajanlas .pp-szamlalo,
  .js .wl-buborek,.js .wl-reteg,.js .pp-folyamat li,.js .pp-vonalzo li{opacity:1!important;transform:none!important}
  .js .pp-folyamat li::after{transform:none!important}
  .js .pp-perc-iv{stroke-dashoffset:0!important}
  .js .pp-perc-pont{opacity:1!important}
  .js .pp-ajanlas .pp-ut{stroke-dashoffset:0!important}
  .pp-impulzus{display:none}
  .js .pp-bub,.js .wl-hi-sor{opacity:1!important;transform:none!important}
  .js .wl-athuz{stroke-dashoffset:0!important}
  .pp-kartyak li:hover{transform:none}
  .js .wl-ut .wl-ut-vonal{stroke-dashoffset:0!important}
  .js .wl-ut .wl-ut-chip{transform:none!important;opacity:1!important}
  .wl-ut:hover{transform:none}
}

/* ---------- background from /vegleges/ (Zoltán TG 66236, Lead 86562, card f93dcc8d) ----------
   The hero colour field, glass panels and bottom fade, the colour pools and fades of the dark sections and the light
   section blend are the /vegleges/ rules (eszkoz/vegleges.css "background, round 2"), copied with their text unchanged
   where the selector is the same (.hos, .hos::after, .hos-uveg, .szakasz.halvany); the dark sections here are
   .pp-lap .szakasz.sotet and take the #hogyan-epul recipe. Only what the background needs on top: room under the hero
   content for the fade, and lighter small text on the coloured field. */
:root{
  --szin-kek:43,71,242;        /* vivid blue */
  --szin-indigo:30,28,150;
  --szin-ibolya:124,44,214;    /* violet */
  --szin-magenta:226,54,140;
  --szin-korall:255,98,70;
  --szin-borostyan:255,176,32; /* the Pilóta amber */
  --szin-cian:45,196,218;      /* the Pilóta cyan */
  /* hero bottom fade: room is reserved under the content (padding below), so no text ever sits on it */
  --hos-atmenet:200px;
}
@media (max-width:860px){:root{--hos-atmenet:120px}}
.hos-radar{display:none}
.hos{background:
  radial-gradient(34% 46% at 66% 0%,rgba(var(--szin-borostyan),1),rgba(var(--szin-borostyan),.55) 42%,transparent 74%),
  radial-gradient(30% 56% at 100% 16%,rgba(var(--szin-korall),1),rgba(var(--szin-korall),.5) 48%,transparent 76%),
  radial-gradient(36% 46% at 96% 70%,rgba(var(--szin-magenta),.95),rgba(var(--szin-magenta),.4) 50%,transparent 74%),
  radial-gradient(36% 42% at 62% 82%,rgba(var(--szin-ibolya),.9),transparent 72%),
  radial-gradient(30% 34% at 20% 100%,rgba(var(--szin-korall),.75),transparent 72%),
  radial-gradient(22% 30% at 80% 44%,rgba(var(--szin-cian),.6),transparent 72%),
  radial-gradient(56% 74% at 0% 0%,rgba(var(--szin-kek),1),rgba(var(--szin-kek),.6) 40%,transparent 72%),
  linear-gradient(165deg,#2338D8 0%,#1B23A6 38%,#2A1C94 66%,#4A1F96 100%)}
@media (max-width:860px){
  /* phone: the text runs the whole width; the warm colours go behind the 3D stage band (about 150-400 px into the
     hero, 390 capture 2026-11-01), sizes in px so they stay put however long the hero grows */
  .hos{background:
    radial-gradient(240px 190px at 82% 190px,rgba(var(--szin-borostyan),1),rgba(var(--szin-borostyan),.5) 46%,transparent 76%),
    radial-gradient(220px 230px at 104% 340px,rgba(var(--szin-korall),1),rgba(var(--szin-korall),.45) 50%,transparent 76%),
    radial-gradient(230px 210px at 0% 330px,rgba(var(--szin-magenta),.95),rgba(var(--szin-magenta),.4) 50%,transparent 76%),
    radial-gradient(150px 110px at 34% 210px,rgba(var(--szin-cian),.6),transparent 72%),
    radial-gradient(300px 260px at 100% 620px,rgba(var(--szin-ibolya),.9),transparent 74%),
    radial-gradient(260px 260px at 0% 100%,rgba(var(--szin-korall),.7),transparent 72%),
    radial-gradient(320px 300px at 100% 100%,rgba(var(--szin-magenta),.7),transparent 72%),
    radial-gradient(360px 260px at 0% 0%,rgba(var(--szin-kek),1),transparent 72%),
    linear-gradient(170deg,#2338D8 0%,#1B23A6 40%,#2A1C94 70%,#4A1F96 100%)}
}
.hos::after{content:"";position:absolute;left:0;right:0;bottom:0;height:var(--hos-atmenet);z-index:-1;pointer-events:none;
  background:linear-gradient(to top,var(--paper) 0%,rgba(255,255,255,.957) 12.5%,rgba(255,255,255,.844) 25%,rgba(255,255,255,.684) 37.5%,rgba(255,255,255,.5) 50%,rgba(255,255,255,.316) 62.5%,rgba(255,255,255,.156) 75%,rgba(255,255,255,.043) 87.5%,rgba(255,255,255,0) 100%)}
.pp-nyit-racs{padding-bottom:calc(56px + var(--hos-atmenet))}
/* white label: the phone is about 200 px taller than the centred text column, so the text already ends ~100 px above the
   grid row; 130 px under the row keeps the text above the fade (84 px gap at 1440) and the phone's foot reaches into the
   fade. Measured 2026-11-02 with vegleges-uresseg (300 px limit): 256 px gave a 408 px half-empty band at 1440, 160 px 312. */
/* when the text column sets the row height (short viewports: the phone is capped by 100svh, Codex P2 on 2323fe1db5,
   900x500), its own 86 px bottom padding still keeps the last line 16 px above the fade (200 - 130 = 70 px into the row);
   the same padding on top keeps the centred text where it was when the phone is the taller column */
@media (min-width:861px){.wl-nyit .pp-nyit-racs{padding-bottom:calc(var(--hos-atmenet) - 70px)}.wl-nyit .pp-nyit-szoveg{padding-block:calc(var(--hos-atmenet) - 114px)}}
/* glass panels: large rounded boxes, a lighter fill that also lifts the saturation behind them, a hairline edge.
   Placed off the text column (desktop) and off every text line (phone), measured on the 1440 and 390 captures. */
.hos-uveg{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.hos-uveg i{position:absolute;display:block;border-radius:56px;border:1px solid rgba(255,255,255,.30);
  background:linear-gradient(150deg,rgba(255,255,255,.20),rgba(255,255,255,.06) 46%,rgba(255,255,255,.02));
  -webkit-backdrop-filter:blur(22px) saturate(1.25);backdrop-filter:blur(22px) saturate(1.25);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 30px 80px -40px rgba(20,10,60,.55)}
.hos-uveg i:nth-child(1){left:55%;top:-120px;width:420px;height:470px}
.hos-uveg i:nth-child(2){left:calc(100% - 230px);top:120px;width:380px;height:420px;border-radius:64px}
/* the panels stay above the hero fade: a panel edge crossing the fade read as a hard line (M5: 58.7 at 1440) */
.hos-uveg i:nth-child(3){left:47%;top:calc(100% - var(--hos-atmenet) - 470px);width:340px;height:300px;border-radius:48px}
.hos-uveg i:nth-child(4){display:none}
@media (max-width:860px){
  .pp-nyit-racs,.partner-lap .pp-nyit-racs{padding-bottom:calc(16px + var(--hos-atmenet))}
  .hos-uveg i{border-radius:32px}
  .hos-uveg i:nth-child(1){left:52%;top:150px;width:240px;height:230px}
  .hos-uveg i:nth-child(2){left:calc(100% - 70px);top:300px;width:200px;height:120px;border-radius:28px}
  .hos-uveg i:nth-child(3){left:-70px;top:190px;width:150px;height:150px}
}
/* phone and tablet (single column): here the text runs from the top and the figure comes under it, so the warm
   colours sit in the figure band, anchored to the hero bottom (the fade is the last 120 px). Measured 2026-11-02 at
   390: figure 136-701 px (white label) and 136-568 px (partner) above the hero bottom, text ends 588 px above it. */
@media (max-width:860px){
  .pp-nyit.hos{background:
    radial-gradient(240px 160px at 82% calc(100% - 380px),rgba(var(--szin-borostyan),1),rgba(var(--szin-borostyan),.5) 46%,transparent 76%),
    radial-gradient(220px 200px at 104% calc(100% - 260px),rgba(var(--szin-korall),1),rgba(var(--szin-korall),.45) 50%,transparent 76%),
    radial-gradient(230px 180px at 0% calc(100% - 300px),rgba(var(--szin-magenta),.95),rgba(var(--szin-magenta),.4) 50%,transparent 76%),
    radial-gradient(150px 110px at 34% calc(100% - 420px),rgba(var(--szin-cian),.6),transparent 72%),
    radial-gradient(300px 260px at 100% 40%,rgba(var(--szin-ibolya),.9),transparent 74%),
    radial-gradient(260px 200px at 0% 100%,rgba(var(--szin-korall),.7),transparent 72%),
    radial-gradient(320px 240px at 100% 100%,rgba(var(--szin-magenta),.7),transparent 72%),
    radial-gradient(360px 260px at 0% 0%,rgba(var(--szin-kek),1),transparent 72%),
    linear-gradient(170deg,#2338D8 0%,#1B23A6 40%,#2A1C94 70%,#4A1F96 100%)}
  /* the glass panels go to the figure band too: on the /vegleges/ phone places they sat behind text lines here */
  .pp-nyit .hos-uveg i:nth-child(1){left:52%;top:calc(100% - 560px);width:240px;height:230px}
  .pp-nyit .hos-uveg i:nth-child(2){left:calc(100% - 70px);top:calc(100% - 420px);width:200px;height:120px;border-radius:28px}
  .pp-nyit .hos-uveg i:nth-child(3){left:-70px;top:calc(100% - 480px);width:150px;height:150px}
}
/* text on the coloured field: the lighter body grey (#AEB9CC) lost contrast over vivid blue and violet */
.hos-cimke,.hos-lead,.os-szoveg,.hos-bizalom{color:#E9EDF6}
.pp-nyit .hos-gomb-alatt,.pp-szam-alatt{color:#E9EDF6}
.pp-szamlalo text:first-child{fill:#E9EDF6}

/* section fades: smoothstep alpha (1 - 3t^2 + 2t^3), --f is the colour; the dark sections sit between white ones */
:root{--atmenet-h:64px}
@media (max-width:760px){:root{--atmenet-h:40px}}
.pp-lap .szakasz.sotet{position:relative;isolation:isolate;--elotte:var(--paper);--utana:var(--paper);background:
  radial-gradient(38% 46% at 86% 26%,rgba(var(--szin-ibolya),.42),transparent 72%),
  radial-gradient(42% 50% at 10% 74%,rgba(var(--szin-kek),.48),transparent 72%),
  radial-gradient(26% 30% at 70% 84%,rgba(var(--szin-magenta),.22),transparent 72%),
  var(--ink-2)}
.pp-lap .szakasz.sotet::before,.pp-lap .szakasz.sotet::after{content:"";position:absolute;left:0;right:0;height:var(--atmenet-h);z-index:-1;pointer-events:none;
  --a0:color-mix(in srgb,var(--f) 100%,transparent);--a1:color-mix(in srgb,var(--f) 95.7%,transparent);--a2:color-mix(in srgb,var(--f) 84.4%,transparent);
  --a3:color-mix(in srgb,var(--f) 68.4%,transparent);--a4:color-mix(in srgb,var(--f) 50%,transparent);--a5:color-mix(in srgb,var(--f) 31.6%,transparent);
  --a6:color-mix(in srgb,var(--f) 15.6%,transparent);--a7:color-mix(in srgb,var(--f) 4.3%,transparent)}
.pp-lap .szakasz.sotet::before{top:0;--f:var(--elotte,transparent);
  background:linear-gradient(to bottom,var(--a0) 0%,var(--a1) 12.5%,var(--a2) 25%,var(--a3) 37.5%,var(--a4) 50%,var(--a5) 62.5%,var(--a6) 75%,var(--a7) 87.5%,transparent 100%)}
.pp-lap .szakasz.sotet::after{bottom:0;--f:var(--utana,transparent);
  background:linear-gradient(to top,var(--a0) 0%,var(--a1) 12.5%,var(--a2) 25%,var(--a3) 37.5%,var(--a4) 50%,var(--a5) 62.5%,var(--a6) 75%,var(--a7) 87.5%,transparent 100%)}
/* light sections: white and the light grey (#F1F4F9) meet in a 48 px blend instead of an edge; --h-fel/--h-le name the
   neighbour's colour at the top and bottom (default white) */
.szakasz.halvany{background:linear-gradient(var(--h-fel,var(--paper)) 0,var(--paper-2) 48px,var(--paper-2) calc(100% - 48px),var(--h-le,var(--paper)) 100%)}

/* Logo-only header on /partner/ and /white-label/ (Zoltán TG 66339, 66344): no band, no blur, no bottom line; the
   header leaves the flow and the logo stands on the hero colour field. The hero takes the header height as top
   padding, so the hero content keeps its page position. stilus.css (home page, /vegleges/) is not touched. */
.fej.fej-csak-logo{position:absolute;left:0;right:0;top:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom:0}
.pp-lap .pp-nyit{padding-top:var(--hd-h)}

/* ---------- spacing, 2026-11-02 (Zoltán TG 66436, 66447, 66451; Lead 86903 pt 16, 86905 pt 20) ----------
   The gate's empty-band check (store/lap-atvetel-ures-sav.cjs, 160 px at 1440, 120 px at 390) measured 208-247 px
   between every two sections and 386 px under the partner hero on 2026-11-02. Sections take the /vegleges/ padding
   (48/36 px, commit 26b751c5ae), the hero fits its content (no min-height) and keeps the /vegleges/ 96/56 px fade. */
:root{--hos-atmenet:96px}
@media (max-width:860px){:root{--hos-atmenet:56px}}
.pp-lap .szakasz{padding:48px 0}
@media (max-width:760px){.pp-lap .szakasz{padding:36px 0}}
.pp-lap .pp-nyit-racs{min-height:0;padding-bottom:var(--hos-atmenet)}
@media (min-width:861px){.wl-nyit .pp-nyit-racs{padding-bottom:var(--hos-atmenet)}.wl-nyit .pp-nyit-szoveg{padding-block:0}}
.wl-hiedelem-racs{align-items:center;row-gap:32px}
.wl-hiedelem-racs > .szakasz-fej{grid-column:1/-1}
/* partner, desktop: point 16 asks at most 120 px between the hero's last line and "Megkérdezik" (170 px with the 96 px
   fade and the 48 px section padding, measured 2026-11-02); a shorter fade and a short top on the first section */
@media (min-width:861px){
  .partner-lap{--hos-atmenet:72px}
  .partner-lap .pp-nyit + .szakasz{padding-top:20px}
}
/* white label sign-up: the form is short, so the sticky heading column left 178-186 px empty under itself at
   1440/1280 (M15 column check, 2026-11-02); the heading column is centred next to the form instead */
@media (min-width:861px){
  .wl-lap .pp-jel-racs{align-items:center}
  .wl-lap .pp-jel .szakasz-fej{position:static}
}
/* dark section air (Zoltán TG 66770, card b5c71102): with 48/36 px padding under a 64/40 px white fade the /partner/
   pp-c5 and /white-label/ wl-c4 headings started 16/4 px INSIDE the fade (eszkoz/sotet-szakasz-levego-meres.cjs,
   2026-11-02). Same recipe as /vegleges/ (eszkoz/vegleges.css, 87277): fade + 36/24 px above the heading, fade +
   28/20 px under the last line; the light sections around it give back padding so the empty band stays under the gate's
   160/120 px. */
:root{--sotet-fent:36px;--sotet-lent:28px;--sotet-elotte:32px;--sotet-utan:24px}
@media (max-width:760px){:root{--sotet-fent:24px;--sotet-lent:20px;--sotet-elotte:20px;--sotet-utan:16px}}
.pp-lap .szakasz.sotet{padding-top:calc(var(--atmenet-h) + var(--sotet-fent));padding-bottom:calc(var(--atmenet-h) + var(--sotet-lent))}
.pp-lap .szakasz:has(+ .szakasz.sotet){padding-bottom:var(--sotet-elotte)}
/* the section after it gives back top padding too: with the full 48/36 px the band after the dark section was 167/123 px
   (lap-atvetel, 2026-11-02 11.07) */
.pp-lap .szakasz.sotet + .szakasz{padding-top:var(--sotet-utan)}