/* OddsGainer weboldal — a giveaway-oldal design-rendszere, több oldalra kiterjesztve.
   A tokeneket és az alapkomponenseket a gw_page.html-ből vettük át változtatás nélkül,
   hogy a két felület ugyanannak a márkának látsszon. */
:root{
  --bg:#070C09;--ink1:#0C120E;--ink:#ECF3ED;--soft:#CBD8CD;--meta:#7E8C81;
  --line:rgba(236,243,237,.12);--line-strong:rgba(236,243,237,.3);
  --green:#96C86E;--green-b:#B9E294;--abyss:#0A1E0A;--neg:#E8896B;--gold:#D8C07A;
  --disp:'Barlow Condensed',Impact,'Arial Narrow',sans-serif;
  --body:'DM Sans',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --surface:rgba(7,12,9,.6);--header:rgba(7,12,9,.86);--shade:rgba(150,200,110,.08);
  --gut:22px;--max:1280px
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:var(--body);color:var(--ink);background:var(--bg);line-height:1.68;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;min-height:100vh;position:relative;isolation:isolate}
body::before{content:"";position:absolute;left:0;right:0;top:0;height:min(125vh,1150px);z-index:-1;pointer-events:none;
  background:radial-gradient(1100px 720px at 80% -12%,rgba(150,200,110,.17),transparent 62%),
             radial-gradient(820px 640px at -10% 36%,rgba(111,168,78,.13),transparent 66%)}
body::after{content:"";position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.055;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:220px 220px}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:4px}

/* ── tipográfia ─────────────────────────────────────────────────────────── */
.mono{font-family:var(--body);font-weight:500;font-size:13px;line-height:1.4;color:var(--meta)}
.disp{font-family:var(--disp);font-weight:800;text-transform:uppercase;letter-spacing:-.02em;line-height:1.04}
.g{color:var(--green)}.m{color:var(--meta)}
.lead{color:var(--soft);font-size:16px;line-height:1.72;max-width:50ch}
.kick{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.kick .n{font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.16em;color:var(--green)}
.sports{display:inline-flex;align-items:center;gap:7px;flex:0 0 auto}
.sports .ico{width:23px;height:23px;color:var(--green);opacity:.95}
.sports{display:inline-flex;align-items:center;gap:9px}
.sports .ico:nth-child(2){opacity:.6}
.sports .ico:nth-child(3){opacity:.42}
.kick .lab{font-family:var(--body);font-weight:600;font-size:14.5px;letter-spacing:0;color:var(--soft)}

/* ── futófényes sorszámok ───────────────────────────────────────────────────
   Két SVG-szöveg egymáson: egy halvány kontúr, fölötte egy rövid, világító
   szakasz, ami körbejárja a számjegy vonalát. A szaggatás ciklusa (36+264=300)
   pontosan annyi, amennyit az animáció eltol — így a kör varrat nélkül zárul,
   bármilyen hosszú is a betű kontúrja. */
.n.num{position:relative;display:block}
.n.num svg{display:block;width:100%;height:auto;overflow:visible}
.n.num b{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.n.num text{font-family:var(--disp);font-weight:800;font-size:34px;fill:none;letter-spacing:-.01em}
.kick .n.num text{font-size:36px}
.n.num .bg{stroke:var(--line-strong);stroke-width:1}
.n.num .run{stroke:var(--green-b);stroke-width:1.2;stroke-linecap:round;
  stroke-dasharray:36 264;stroke-dashoffset:0;
  filter:drop-shadow(0 0 5px rgba(150,200,110,.9)) drop-shadow(0 0 12px rgba(150,200,110,.45));
  animation:runline 7s linear infinite}
@keyframes runline{to{stroke-dashoffset:-300}}
.kick .n.num{flex:0 0 68px;width:68px;margin-top:-4px}
.step .n.num{width:38px}
/* a lépések fénye ne egyszerre fusson — kicsit eltolva élőbb */
.steps .step:nth-of-type(2) .n.num .run{animation-delay:-1.8s}
.steps .step:nth-of-type(3) .n.num .run{animation-delay:-3.5s}
.steps .step:nth-of-type(4) .n.num .run{animation-delay:-5.2s}
@media (prefers-reduced-motion:reduce){
  .n.num .run{animation:none;stroke-dasharray:none;opacity:.55}
}

/* ── váz ────────────────────────────────────────────────────────────────── */
.shell{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
/* A szekciók elválasztása nem lehet ugyanaz a hajszálvonal, ami a kártyák és
   a listasorok kerete — akkor semmit nem jelent. Itt a vonal balról indul és
   jobbra elhal, a bal szélén pedig egy rövid, vastag zöld nyelv ül rajta:
   ugyanaz a jel, ami a paneleken is jelzi a blokk kezdetét. */
section{padding:66px 0;position:relative}
section::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,var(--line-strong) 0%,var(--line) 42%,transparent 86%)}
section::after{content:"";position:absolute;top:-1px;left:0;width:54px;height:3px;
  background:var(--green);border-radius:0 3px 3px 0}
section:first-of-type::before,section:first-of-type::after{display:none}
.h2{font-family:var(--disp);font-weight:800;text-transform:uppercase;letter-spacing:-.02em;line-height:1.04;font-size:40px;margin-bottom:20px}

/* ── fejléc ─────────────────────────────────────────────────────────────── */
header{position:sticky;top:0;z-index:50;background:var(--header);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
header .bar{max-width:var(--max);margin:0 auto;padding:14px var(--gut);display:flex;align-items:center;gap:20px}
header img.logo{height:44px;width:auto}   /* 34 -> 44: 30%-kal nagyobb (tulaj, 2026-09-22) */
header nav{display:none;gap:22px;margin-left:auto}
header nav a{font-family:var(--body);font-size:14.5px;font-weight:500;color:var(--soft);padding:6px 0;border-bottom:1px solid transparent}
header nav a:hover,header nav a[aria-current]{color:var(--green-b);border-bottom-color:var(--green)}
header .cta{margin-left:auto}
.burger{margin-left:auto;width:44px;height:44px;border:1px solid var(--line-strong);border-radius:999px;display:flex;align-items:center;justify-content:center}
.burger svg{width:18px;height:18px}
.menu{display:none;border-top:1px solid var(--line);background:var(--ink1)}
.menu.on{display:block}
.menu a{display:block;padding:17px var(--gut);border-bottom:1px solid var(--line);font-size:15px;max-width:var(--max);margin:0 auto}

/* ── gombok ─────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;font-family:var(--body);font-weight:700;font-size:15.5px;
  letter-spacing:0;line-height:1;color:var(--abyss);background:var(--green);padding:17px 26px;
  border:1px solid var(--green);border-radius:999px;cursor:pointer;transition:background .25s,border-color .25s,color .25s;min-height:52px}
.btn:hover{background:var(--green-b);border-color:var(--green-b)}
.btn svg{width:15px;height:15px;flex:0 0 auto;transition:transform .35s cubic-bezier(.16,1,.3,1)}
.btn:hover svg{transform:translateX(5px)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.btn.ghost:hover{background:var(--shade);border-color:var(--green);color:var(--green-b)}
.btn.sm{min-height:42px;padding:11px 20px;font-size:14px}
.btn.block{width:100%;justify-content:space-between}
.btn[disabled]{opacity:.5;cursor:default}
.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}

/* ── hero ───────────────────────────────────────────────────────────────── */
.hero{padding:44px 0 10px}
.hero h1{font-family:var(--disp);font-weight:800;text-transform:uppercase;letter-spacing:-.025em;line-height:1.04;font-size:clamp(44px,12vw,74px)}
.hero h1 em{font-style:normal;color:var(--green)}
.hero .lead{margin-top:24px;font-size:17px;line-height:1.7}
/* Több soros címsor: minden sor egy kicsit kisebb az előzőnél. A sorokat a
   sablon külön <span>-ekre bontja, a méret pedig em-ben megy, hogy a hero
   folyékony (clamp) mérete mellett is tartsa az arányt. */
.hero h1 span{display:block}
.hero h1 span:nth-child(2){font-size:.9em}
.hero h1 span:nth-child(3){font-size:.81em}
.hero h1 span:nth-child(4){font-size:.73em}
.h2 span{display:block}
.h2 span:nth-child(2){font-size:.88em}
.h2 span:nth-child(3){font-size:.79em}

.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:18px;overflow:hidden;margin-top:34px}
.fact{background:var(--bg);padding:22px 18px}
.fact .v{font-family:var(--disp);font-weight:800;font-size:34px;line-height:1.05;font-variant-numeric:tabular-nums}
.fact .k{font-family:var(--body);font-size:13px;line-height:1.45;color:var(--meta);margin-top:8px}


/* ── a főoldal hero-képe ────────────────────────────────────────────────────
   A kép a meglévő gradiens-réteg ALATT ül, fölötte pedig két sötétítés: egy
   fentről lefelé, hogy a kép a szekció aljára elhaljon, és egy balról jobbra,
   hogy a címsor mögött mindig tiszta sötét legyen. Így a szöveg kontrasztja
   nem a kép véletlenén múlik. */
body[data-page="home"]::before{
  height:min(118vh,1020px);
  background:
    linear-gradient(180deg,rgba(7,12,9,.35) 0%,rgba(7,12,9,.72) 58%,var(--bg) 99%),
    linear-gradient(90deg,var(--bg) 4%,rgba(7,12,9,.55) 46%,rgba(7,12,9,.1) 82%),
    radial-gradient(1100px 720px at 80% -12%,rgba(150,200,110,.14),transparent 62%),
    url("/assets/hero-stadion.webp") 60% 0 / cover no-repeat;
}
@media (max-width:859px){
  /* mobilon a kép a fejléc alatti sávra szorul, a szöveg alatt teljesen sötét */
  body[data-page="home"]::before{
    height:min(74vh,560px);
    background:
      linear-gradient(180deg,rgba(7,12,9,.42) 0%,rgba(7,12,9,.88) 66%,var(--bg) 100%),
      radial-gradient(900px 600px at 80% -12%,rgba(150,200,110,.14),transparent 62%),
      url("/assets/hero-stadion.webp") 62% 0 / cover no-repeat;
  }
}

/* ── ikonok ────────────────────────────────────────────────────────────────
   Egy SVG-sprite, a szöveg színét veszi fel (stroke=currentColor). */
.ico{width:16px;height:16px;flex:0 0 auto;color:inherit}
.ico.g{color:var(--green)}
.tcard .sp{display:flex;align-items:center;gap:6px}
.tcard .sp .ico{width:13px;height:13px;color:var(--green)}

/* ── e-mail-befogás a hero-ban ─────────────────────────────────────────────
   A funnel legnagyobb vesztesége az a kattintás, ami a főoldalról a
   regisztrációs oldalra visz. Itt az első lépés maga a mező: egy e-mail-cím,
   egy gomb. A többit (tippszter, feltételek) a megerősítés után kérdezzük. */
.catch{margin-top:30px;max-width:520px}
.catch .row{display:flex;gap:10px;flex-wrap:wrap}
.catch .in{flex:1 1 220px;min-width:0;padding:16px 18px;font-size:16.5px;
  background:rgba(7,12,9,.72);border-radius:16px}
.catch .btn{flex:0 0 auto;min-height:56px;padding:17px 24px}
.catch .err{margin-top:10px}
.catch-fine{margin-top:12px;font-size:13px;line-height:1.6;color:var(--meta)}
.catch-done{display:none;margin-top:30px;max-width:520px;gap:16px;align-items:flex-start;
  border:1px solid rgba(150,200,110,.45);border-radius:18px;padding:20px 22px;
  background:var(--surface);font-size:15px;line-height:1.66;color:var(--soft)}
.catch-done.on{display:flex}
.catch-done b{color:var(--ink)}
.catch-done .ok-mark{width:44px;height:44px;flex:0 0 44px}
.catch-done .ok-mark svg{width:21px;height:21px}
@media (min-width:560px){.catch .in{flex:1 1 260px}}

/* ── hero-telefon ──────────────────────────────────────────────────────────
   A kép átlátszó hátterű PNG-telefon; nem kap keretet, csak egy halvány zöld
   fényudvart alá, hogy ne lebegjen súlytalanul a sötét háttéren. */
.device{position:relative;margin:34px auto 0;width:min(300px,72vw);line-height:0}
.device::before{content:"";position:absolute;left:50%;top:14%;width:132%;height:78%;
  transform:translateX(-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(150,200,110,.2),transparent 72%);filter:blur(6px)}
.device img{position:relative;width:100%;height:auto;
  filter:drop-shadow(0 34px 60px rgba(0,0,0,.6))}
.device-m{margin:30px 0 0;border:1px solid var(--line-strong);border-radius:20px;
  overflow:hidden;background:var(--surface)}
.device-m img{width:100%;height:auto;display:block}
.device-m figcaption{padding:12px 16px;border-top:1px solid var(--line);color:var(--meta)}
/* Telefonon nem mutatunk telefon-mockupot — ott a tippek maguk a képernyőn a
   meggyőzőek; a készülékkeret csak helyet visz el. */
.device{display:none}
@media (min-width:860px){
  .device{display:block;margin:0 0 0 auto;width:min(340px,34vw)}
  .device-m{display:none}
}
@media (prefers-reduced-motion:no-preference){
  .device img{animation:floaty 7s ease-in-out infinite}
  @keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
}

/* ── tippszter-sáv (vízszintesen görgethető) ────────────────────────────── */
.rail{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  padding:4px var(--gut) 14px;margin:0 calc(var(--gut) * -1);scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.tcard{flex:0 0 222px;scroll-snap-align:start;border:1px solid var(--line-strong);border-radius:20px;padding:20px;
  background:var(--surface);display:flex;flex-direction:column;gap:14px;transition:border-color .25s,transform .25s}
.tcard:hover{border-color:var(--green);transform:translateY(-2px)}
.tcard .top{display:flex;align-items:center;gap:12px}
.av{width:44px;height:44px;border-radius:999px;flex:0 0 44px;background:rgba(150,200,110,.14);border:1px solid var(--line-strong);
  display:flex;align-items:center;justify-content:center;font-family:var(--disp);font-size:20px;color:var(--green-b);overflow:hidden}
.av img{width:100%;height:100%;object-fit:cover}
.tcard .nm{font-size:15px;font-weight:600;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tcard .sp{font-family:var(--body);font-size:12.5px;color:var(--meta);margin-top:3px}
.tstats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.tstat .v{font-family:var(--disp);font-weight:800;font-size:22px;line-height:1.1;font-variant-numeric:tabular-nums}
.tstat .k{font-family:var(--body);font-size:12px;color:var(--meta);margin-top:5px}
.rail-hint{display:flex;align-items:center;gap:8px;margin-top:2px}

/* ── lépések ────────────────────────────────────────────────────────────── */
.steps{display:flex;flex-direction:column;margin-top:8px}
.step{display:grid;grid-template-columns:38px minmax(0,1fr);gap:16px;padding:22px 0;border-bottom:1px solid var(--line);align-items:baseline}
.step:first-child{border-top:1px solid var(--line)}
.step .n{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--green)}
.step .t{font-size:16px;line-height:1.5;font-weight:600}
.step .t span{display:block;color:var(--meta);font-size:14.5px;line-height:1.66;margin-top:7px;font-weight:400}

/* ── panel / kiemelés ───────────────────────────────────────────────────── */
.panel{border:1px solid var(--line-strong);border-radius:22px;padding:28px 26px;position:relative;overflow:hidden;background:var(--surface)}
.panel::before{content:"";position:absolute;left:0;top:26px;width:4px;height:44px;background:var(--green);border-radius:0 2px 2px 0}
.panel h3{font-family:var(--disp);font-weight:800;text-transform:uppercase;font-size:24px;line-height:1.06;margin-bottom:14px}
.panel p{color:var(--soft);font-size:15px;line-height:1.72}

/* ── promo-doboz (nyereményjáték, VIP) ──────────────────────────────────── */
.promo{border:1px solid var(--line-strong);border-radius:22px;padding:26px 24px;background:var(--surface);
  position:relative;overflow:hidden;display:flex;flex-direction:column;gap:12px}
.promo::after{content:"";position:absolute;right:-70px;top:-70px;width:190px;height:190px;border-radius:999px;
  background:radial-gradient(circle,rgba(150,200,110,.2),transparent 68%);pointer-events:none}
.promo h3{font-size:34px;line-height:1.04}
.promo p{color:var(--soft);font-size:15px}
.promo .btns{margin-top:6px}

/* ── ranglista ──────────────────────────────────────────────────────────── */
.lb{border-top:1px solid var(--line)}
.lb a{display:grid;grid-template-columns:34px 1fr auto;gap:16px;align-items:center;padding:19px 0;border-bottom:1px solid var(--line)}
.lb a:hover{background:var(--shade)}
.lb .pos{font-family:var(--disp);font-weight:800;font-size:22px;line-height:1.1;color:var(--meta);text-align:center}
.lb a:nth-child(-n+3) .pos{color:var(--gold)}
.lb .who{display:flex;align-items:center;gap:12px;min-width:0}
.lb .nm{font-size:15px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb .sub{font-family:var(--body);font-size:12.5px;color:var(--meta)}
.lb .val{font-family:var(--disp);font-weight:800;font-size:24px;font-variant-numeric:tabular-nums;text-align:right}
.lb .val small{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;color:var(--meta);font-weight:400}

/* ── űrlap ──────────────────────────────────────────────────────────────── */
.f{display:block;margin-bottom:16px}
.f .l{font-family:var(--body);font-size:13.5px;font-weight:600;color:var(--soft);display:block;margin-bottom:8px}
.f .l b{color:var(--green);font-weight:500}
.in{width:100%;font-family:var(--body);font-size:16px;color:var(--ink);background:transparent;border:1px solid var(--line-strong);
  border-radius:14px;padding:13px 16px;outline:0}
.in::placeholder{color:rgba(126,140,129,.8)}
.in:focus{border-color:var(--green)}
.in.bad{border-color:var(--neg)}
.err{display:none;font-size:13px;color:var(--neg);margin-top:8px;line-height:1.45}
.err.on{display:block}
.help{font-size:13px;color:var(--meta);margin:-2px 0 10px}
.chks{display:flex;flex-direction:column;gap:12px;margin:14px 0 6px}
.chk{display:flex;gap:12px;align-items:flex-start;font-size:14px;color:var(--soft);line-height:1.5;cursor:pointer}
.chk input{position:absolute;opacity:0;pointer-events:none}
.chk .box{width:20px;height:20px;flex:0 0 auto;border:1px solid var(--line-strong);border-radius:5px;margin-top:1px;position:relative}
.chk input:checked + .box{border-color:var(--green);background:var(--green)}
.chk input:checked + .box::after{content:"";position:absolute;left:6px;top:2px;width:5px;height:10px;border:solid var(--abyss);border-width:0 2px 2px 0;transform:rotate(45deg)}
.lnk{color:var(--green);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.fine{font-size:12.5px;color:var(--meta);margin-top:16px;line-height:1.66}


/* ── több lépéses felületek (regisztráció) ─────────────────────────────────
   Enélkül az űrlap és a „kész" panel EGYSZERRE látszik — ezek a giveaway-
   oldalról maradtak ki az átemeléskor. */
.screen{display:none}
.screen.on{display:block}
.ok-mark{width:56px;height:56px;border-radius:999px;border:1px solid var(--green);
  display:flex;align-items:center;justify-content:center;color:var(--green)}
.ok-mark svg{width:26px;height:26px}
.mailbox{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:16px 0;
  font-size:17px;font-weight:600;overflow-wrap:anywhere}

/* ── dokumentum-oldalak (ÁSZF, adatkezelés, felelős játék) ───────────────── */
.doclist{max-width:660px}
.docsec{padding:24px 0;border-bottom:1px solid var(--line)}
.docsec:first-child{border-top:1px solid var(--line)}
.docsec h3{font-family:var(--body);font-size:16px;font-weight:700;margin-bottom:8px}
.docsec p{color:var(--soft);font-size:15px;line-height:1.75}

/* ── lábléc ─────────────────────────────────────────────────────────────── */
footer{border-top:1px solid var(--line);margin-top:26px;padding:44px 0 52px}
footer .cols{display:flex;flex-direction:column;gap:24px}
footer .links{display:flex;gap:18px;flex-wrap:wrap;font-size:13.5px}
footer .links a{color:var(--soft);text-decoration:underline;text-underline-offset:3px}
.age{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--line-strong);border-radius:999px;padding:8px 14px}
.age b{font-family:var(--disp);font-size:16px;color:var(--green-b);line-height:1}
.age span{font-size:12.5px;color:var(--meta)}


/* ── tippszter-rács, profil, üres állapot ──────────────────────────────── */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.grid .tcard{flex:auto}
.phead{display:flex;align-items:center;gap:18px}
.av.big{width:78px;height:78px;flex:0 0 78px;font-size:32px}
.statgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:18px;overflow:hidden}
.statgrid .fact{background:var(--bg)}
.empty{border:1px dashed var(--line-strong);border-radius:18px;padding:26px 24px;color:var(--meta);font-size:14.5px;line-height:1.7}
.empty b{color:var(--soft);font-weight:600;display:block;margin-bottom:5px;font-size:15px}
.notice{border-left:3px solid var(--neg);border-radius:10px;padding:12px 14px;font-size:14px;color:var(--soft);
  background:rgba(232,137,107,.07);margin-bottom:16px;display:none}
.notice.on{display:block}
@media (min-width:860px){.statgrid{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ── asztali ────────────────────────────────────────────────────────────── */
@media (min-width:860px){
  :root{--gut:48px}
  header nav{display:flex}
  .burger{display:none}
  section{padding:100px 0}
  .h2{font-size:52px}
  .hero{padding:84px 0 24px;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:72px;align-items:end}
  .hero h1{font-size:clamp(64px,7vw,96px)}
  .facts{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:0}
  .hero .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rail{padding-left:0;padding-right:var(--gut);margin-left:0}
  .two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:start}
  footer .cols{flex-direction:row;justify-content:space-between;align-items:center}
}
@media (min-width:1180px){
  .hero h1{font-size:104px}
}

/* ── világos változat ──────────────────────────────────────────────────────
   Ugyanaz a felépítés, fordított alappal: fehér háttér, sötét szöveg, és egy
   sötétebb zöld, mert a #96C86E fehéren már nem olvasható kontraszttal.
   Bekapcsolás: bármelyik oldal ?feher=1 végződéssel. */
:root[data-theme="light"]{
  --bg:#FFFFFF;--ink1:#F2F6F1;--ink:#0C130E;--soft:#39473C;--meta:#66746A;
  --line:rgba(12,19,14,.13);--line-strong:rgba(12,19,14,.24);
  --green:#4B8A28;--green-b:#3C7020;--abyss:#FFFFFF;--neg:#B4453A;--gold:#9A7E17;
  --surface:#FFFFFF;--header:rgba(255,255,255,.9);--shade:rgba(75,138,40,.07);
}
:root[data-theme="light"] body::before{
  background:radial-gradient(1100px 720px at 82% -14%,rgba(75,138,40,.1),transparent 62%),
             radial-gradient(820px 640px at -10% 34%,rgba(75,138,40,.07),transparent 66%);
}
:root[data-theme="light"] body::after{opacity:.03}
:root[data-theme="light"] body[data-page="home"]::before{
  background:
    linear-gradient(180deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,.88) 58%,var(--bg) 99%),
    linear-gradient(90deg,var(--bg) 4%,rgba(255,255,255,.72) 46%,rgba(255,255,255,.2) 82%),
    url("/assets/hero-stadion.webp") 60% 0 / cover no-repeat;
}
:root[data-theme="light"] .device img{filter:drop-shadow(0 26px 46px rgba(12,19,14,.22))}
:root[data-theme="light"] .device::before{background:radial-gradient(closest-side,rgba(75,138,40,.12),transparent 72%)}
:root[data-theme="light"] .panel,
:root[data-theme="light"] .tcard,
:root[data-theme="light"] .promo{box-shadow:0 1px 2px rgba(12,19,14,.04),0 8px 24px rgba(12,19,14,.05)}
:root[data-theme="light"] .n.num .run{filter:none;stroke-width:1.4}

/* ── profilépítő ────────────────────────────────────────────────────────── */
/* Négy lépés egymás alatt. Az aktuális nyitva áll, a többi össze van csukva —
   így egyszerre egy dolgot kell csinálni, és mégis látszik, mi jön még. */
.pb{margin-top:34px;display:flex;flex-direction:column}
.pbstep{border-top:1px solid var(--line)}
.pbstep:last-child{border-bottom:1px solid var(--line)}
.pbhead{display:grid;grid-template-columns:38px minmax(0,1fr);gap:16px;padding:22px 0;align-items:baseline}
.pbhead .n{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--meta)}
.pbhead .t{font-size:16px;line-height:1.5;font-weight:600;color:var(--meta)}
.pbhead .t span{display:block;color:var(--meta);font-size:14.5px;line-height:1.66;margin-top:7px;font-weight:400}
/* Összecsukva: grid-template-rows 0fr -> 1fr, hogy a nyitott magasság ne legyen
   bedrótozva. Egyetlen gyereke lehet (.pbin), mert a 0fr csak az első sort zárja
   — a többi gyerek implicit sorba kerülne, és az nyitva maradna. */
.pbbody{display:grid;grid-template-rows:0fr;transition:grid-template-rows .32s ease}
.pbbody>.pbin{overflow:hidden;min-height:0}
.pbstep.now .pbbody{grid-template-rows:1fr}
/* a tartalom a lépés CÍMÉHEZ igazodik, nem a sorszámhoz: a bal oszlop
   szélessége (38px) plusz a rács köze (16px) */
.pbstep.now .pbbody>.pbin{padding:0 0 30px 54px}
@media (max-width:560px){.pbstep.now .pbbody>.pbin{padding-left:0}}
.pbstep.now .pbhead .n{color:var(--green)}
.pbstep.now .pbhead .t{color:var(--ink)}
.pbstep.done .pbhead .t{color:var(--soft)}
.pbstep.done .pbhead .t span{opacity:.6}
/* A kész lépés száma helyett pipa — a szám ott már nem mond semmit. A számot a
   render animált SVG-re cseréli, ezért azt is el kell tüntetni, nem csak a
   szöveget. */
.pbstep.done .pbhead .n{font-size:0;color:var(--green)}
.pbstep.done .pbhead .n svg{display:none}
.pbstep.done .pbhead .n::after{content:"✓";font-size:15px;line-height:1}
.pbstep.wait{opacity:.45}
.pbstep.wait .pbhead{cursor:default}
.pb .grid{margin-top:2px}
.pb .btns{margin-top:0}
@media (prefers-reduced-motion:reduce){.pbbody{transition:none}}

/* A választó csempéje: nem link, hanem két külön művelet ül rajta — választás
   és a profil megnyitása. Ezért az egész csempe nem emelkedik hoverre, mert az
   azt ígérné, hogy bárhol rákattintva történik valami. */
.tcard.pick{flex:auto;cursor:default}
.tcard.pick:hover{border-color:var(--line-strong);transform:none}
.tcard.pick:focus-within{border-color:var(--green)}
.tact{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin-top:2px;padding-top:14px;border-top:1px solid var(--line)}
.tact .lnk{font-size:13px}

/* ── harmonika (Kérdések) ────────────────────────────────────────────────
   Szándékosan keret nélküli: a többi szekció dobozos, ez a sorok ritmusából
   él. A nyitott elem zöld sávot kap bal oldalt, hogy látszódjon, hol tartasz. */
.faq{margin-top:28px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:16px;
  padding:22px 4px 22px 0;font-size:16.5px;font-weight:600;line-height:1.45;
  transition:color .2s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--green-b)}
.faq summary i{margin-left:auto;flex:0 0 auto;width:13px;height:13px;position:relative}
.faq summary i::before,.faq summary i::after{content:"";position:absolute;background:var(--green);border-radius:2px}
.faq summary i::before{left:0;top:5px;width:13px;height:2px}
.faq summary i::after{left:5px;top:0;width:2px;height:13px;transition:opacity .2s,transform .2s}
/* nyitva mínusz lesz belőle: a függőleges szár tűnik el, a vízszintes marad.
   Forgatással a vízszintes szár állna élére, és abból „|" lenne, ami semmit
   nem jelent. */
.faq details[open] summary i::after{opacity:0;transform:scaleY(0)}
.faq details[open] summary{color:var(--green-b)}
.faq details p{color:var(--soft);font-size:14.5px;line-height:1.75;max-width:70ch;
  padding:0 0 24px 0;margin-top:-4px}
.faq details[open]{border-left:2px solid var(--green);padding-left:18px;margin-left:-20px}
@media (prefers-reduced-motion:reduce){.faq summary i::after{transition:none}}

/* ── bizalmi sáv ─────────────────────────────────────────────────────────
   Oldalra húzható, de szándékosan MÁS, mint a tippszter-sín: ott arcokkal és
   számokkal teli csempék állnak, itt keret nélküli, ikonnal nyitott állítások.
   A zöld felső vonal az egyetlen díszítés, és az is csak a kártya szélességének
   harmadán fut végig — nem doboz, hanem jelölt szakasz. */
.trust{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
  margin-top:30px;padding-bottom:16px;scrollbar-width:none;-ms-overflow-style:none}
.trust::-webkit-scrollbar{display:none}
.tt{flex:0 0 258px;scroll-snap-align:start;padding:24px 20px 22px;position:relative;
  background:linear-gradient(180deg,var(--shade),transparent 58%);border-radius:16px}
.tt::before{content:"";position:absolute;left:20px;right:auto;top:0;width:34%;height:2px;
  background:var(--green);border-radius:0 0 2px 2px}
.tt .ico{width:24px;height:24px;color:var(--green);opacity:.9;display:block;margin-bottom:16px}
.tt h3{font-family:var(--disp);font-weight:800;text-transform:uppercase;font-size:19px;
  line-height:1.08;letter-spacing:-.01em}
.tt p{color:var(--soft);font-size:13.5px;line-height:1.7;margin-top:9px}
@media (min-width:860px){.tt{flex-basis:288px}}


/* ── bizonyíték-tábla ────────────────────────────────────────────────────
   Nem doboz és nem kártya: sorok, mint egy eredményközlő. A bal szélén futó
   színes sáv mondja meg a kimenetet, így egy pillantással végigfut a szemed a
   nyert/bukott arányon — és nem kell hozzá elolvasni egyetlen szót sem. */
.proof{list-style:none;margin:28px 0 0;padding:0;border-top:1px solid var(--line)}
.pv{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:4px 14px;align-items:center;
  padding:16px 0 16px 14px;border-bottom:1px solid var(--line);position:relative}
.pv::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:2px;
  background:var(--line-strong)}
.pv.w::before{background:var(--green)}
.pv.l::before{background:var(--neg)}
.pv.v::before{background:var(--gold)}
.pv .d{font-size:11.5px;color:var(--meta);letter-spacing:.06em;white-space:nowrap}
.pv .m{grid-column:2;min-width:0}
.pv .m b{display:block;font-size:15px;font-weight:600;line-height:1.35;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pv .m span{display:block;font-size:12.5px;color:var(--meta);line-height:1.5;margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pv .o{grid-row:1;grid-column:3;font-size:12.5px;color:var(--meta);white-space:nowrap}
.pv .s{grid-row:1;grid-column:1;font-family:var(--disp);font-weight:800;font-size:19px;
  color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.pv .d{grid-row:2;grid-column:1}
.pv .r{grid-row:2;grid-column:3;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--meta);white-space:nowrap}
.pv.w .r{color:var(--green)}
.pv.l .r{color:var(--neg)}
.pv.v .r{color:var(--gold)}
.proof-note{max-width:66ch;margin-top:20px;border-left:2px solid var(--line-strong);padding-left:16px}
@media (min-width:700px){
  .pv{grid-template-columns:62px auto minmax(0,1fr) auto auto;gap:0 18px;padding-left:16px}
  .pv .d{grid-row:1;grid-column:1}
  .pv .s{grid-row:1;grid-column:2}
  .pv .m{grid-row:1;grid-column:3}
  .pv .o{grid-row:1;grid-column:4}
  .pv .r{grid-row:1;grid-column:5;text-align:right;min-width:76px}
}


/* ── kis gomb ──────────────────────────────────────────────────────────────
   A csempéken két művelet ül egymás mellett, és egy 375 pixeles kijelzőn a
   teljes méretű gomb kettesével már nem fér el. Ugyanaz a gomb, kisebb
   hangerőn — nem másik komponens, mert akkor előbb-utóbb el is csúszna tőle. */
.btn.sm{font-size:13.5px;padding:10px 16px;gap:8px;border-radius:12px}
.btn.sm svg{width:13px;height:13px}

/* ── tippszter-csempe: két művelet ─────────────────────────────────────────
   Eddig az egész csempe egy link volt, tehát csak egyetlen dolgot lehetett
   csinálni vele. A látogatónak viszont két útja van innen: megnézni a profilt,
   vagy bemenni az ingyenes csoportba és a saját szemével látni a posztokat. */
.tacts{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:4px}
.tacts .btn{flex:1 1 auto;justify-content:center}
.grid .tcard{gap:12px}

/* ── profil-fejléc ─────────────────────────────────────────────────────────
   A név mobilon a legtöbb bajt okozó elem: a hosszú tippszternevek 10vw-s
   betűvel kilógtak. Itt a méret a NÉV hosszához is igazodik, és a törés
   engedélyezett — egy levágott név rosszabb, mint egy kisebb név. */
.hero.prof{padding-top:34px}
.back{display:inline-flex;align-items:center;gap:8px;margin-bottom:20px;color:var(--meta)}
.back:hover{color:var(--ink)}
.phead{display:flex;align-items:center;gap:16px}
.pmeta{min-width:0}
.pmeta h1{font-size:clamp(30px,8.4vw,60px);line-height:1.02;overflow-wrap:anywhere}
.pmeta .mono{margin-top:8px}
.hero.prof .lead{margin-top:20px}
.hero.prof .btns{margin-top:22px}
.hero.prof .notice{margin-top:16px}
.hero.prof .notice:empty{display:none;margin:0}

/* a fal számsora: poszt / tipp / lezárva */
.wallbar{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:20px;padding:14px 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  font-family:var(--body);font-size:13.5px;color:var(--meta)}
.wallbar b{font-family:var(--disp);font-weight:800;font-size:21px;color:var(--ink);
  margin-right:7px;font-variant-numeric:tabular-nums;line-height:1}
.wallbar span{display:inline-flex;align-items:baseline}

/* ── a fal ────────────────────────────────────────────────────────────────
   Három hasáb, telefonon is. Ez a fal nem olvasásra van, hanem arra, hogy egy
   pillantás alatt látsszon a MENNYISÉG és a ritmus: hogy ez az ember nem három
   hete kezdte. Egy hasábban ugyanez húsz görgetés lenne, és a látogató a
   harmadik poszt után elmegy.

   Az olvasás nem vész el: a csempére koppintva a poszt teljes egészében
   megnyílik. A rács így felderítés, a réteg pedig az olvasás — a kettőt egy
   nézetbe zsúfolni azt jelentené, hogy egyik sem működik jól. */
.wall{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;margin-top:22px}
@media (min-width:760px){.wall{gap:6px}}
/* Asztali gepen is harom hasab: a racs merete nem a kepernyotol fugg, hanem
   attol, hogy harom kep fer egy pillantasba. Negy mar bongeszes, nem attekintes. */
@media (min-width:1180px){.wall{gap:8px}}

.post{position:relative;cursor:pointer;border:0;background:none;border-radius:0}
.post .tile{position:relative;aspect-ratio:1;overflow:hidden;background:rgba(236,243,237,.05);
  border-radius:4px}
@media (min-width:760px){.post .tile{border-radius:8px}}
.post .tile img{width:100%;height:100%;object-fit:cover;transition:transform .35s cubic-bezier(.16,1,.3,1)}
.post:hover .tile img{transform:scale(1.05)}
.post:focus-visible{outline:2px solid var(--green);outline-offset:2px}

/* Kép nélküli poszt is kap csempét, különben a rácsban lyukak lennének és pont
   a napi jelenlét tűnne el. A szöveg kicsi, mert nem elolvasni kell, hanem
   látni, hogy van. */
.post .txtile{width:100%;height:100%;display:flex;align-items:center;padding:10px;
  background:linear-gradient(160deg,rgba(150,200,110,.12),rgba(7,12,9,.9));
  border:1px solid var(--line)}
.post .txtile span{font-size:11.5px;line-height:1.35;color:var(--soft);
  display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
@media (min-width:760px){.post .txtile span{font-size:13px;-webkit-line-clamp:6}}

/* Az eredményjel sarokban: színvakon és napfényben is olvasható, mert alakja
   van, nem csak színe. */
.post .mk{position:absolute;left:5px;bottom:5px;width:19px;height:19px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;
  background:rgba(7,12,9,.86);line-height:1}
.post.nyert .mk{color:var(--green-b);box-shadow:inset 0 0 0 1px rgba(150,200,110,.6)}
.post.vesztett .mk{color:var(--neg);box-shadow:inset 0 0 0 1px rgba(232,137,107,.5)}
.post .multi{position:absolute;right:5px;top:5px;width:12px;height:12px;border-radius:2px;
  border:1.6px solid rgba(236,243,237,.9);
  box-shadow:3px -3px 0 -1.6px rgba(7,12,9,.7),3px -3px 0 0 rgba(236,243,237,.9)}

/* ── a megnyitott poszt ────────────────────────────────────────────────────
   Teljes képernyős réteg: itt már olvasni kell, tehát a kép `contain` (a
   szelvényen az összeg és az odds a lényeg, azt levágni értelmetlen), és a
   szöveg is teljes hosszában ott van. */
.lbox{position:fixed;inset:0;z-index:80;background:rgba(3,6,4,.94);
  backdrop-filter:blur(8px);overflow-y:auto;overscroll-behavior:contain;
  padding:56px 14px calc(34px + env(safe-area-inset-bottom,0px))}
.lbox .in{max-width:520px;margin:0 auto;border:1px solid var(--line-strong);border-radius:18px;
  background:var(--bg);overflow:hidden}
.lbox .x,.lbox .nav{position:fixed;z-index:2;width:44px;height:44px;border-radius:999px;
  background:rgba(7,12,9,.8);border:1px solid var(--line-strong);color:var(--ink);
  display:flex;align-items:center;justify-content:center;font-size:24px;line-height:1}
.lbox .x{top:10px;right:12px}
.lbox .nav{top:50%;transform:translateY(-50%);font-size:30px}
.lbox .prev{left:8px}
.lbox .next{right:8px}
.lbox .nav[disabled]{opacity:.25;pointer-events:none}
@media (min-width:760px){.lbox{padding-top:70px}.lbox .prev{left:24px}.lbox .next{right:24px}}

.lbox .ph{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:14px 16px;border-bottom:1px solid var(--line)}
.lbox .ph time{font-size:12.5px;color:var(--meta)}
.lbox .vd{font-weight:700;font-size:12px;padding:4px 10px;border-radius:999px;white-space:nowrap}
.lbox.nyert .vd{background:rgba(150,200,110,.16);color:var(--green-b)}
.lbox.vesztett .vd{background:rgba(232,137,107,.14);color:var(--neg)}
.lbox.semmis .vd{background:rgba(216,192,122,.14);color:var(--gold)}
.lbox .vd.nyit{background:transparent;color:var(--meta);border:1px solid var(--line-strong)}
.lbox .shot{background:rgba(236,243,237,.04);display:flex;align-items:center;justify-content:center;
  max-height:62vh}
.lbox .shot img{width:100%;max-height:62vh;object-fit:contain}
.lbox .legs{padding:14px 16px;display:flex;flex-direction:column;gap:12px}
.lbox .leg{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;align-items:baseline}
.lbox .leg .mt{font-weight:600;font-size:15px;line-height:1.35;overflow-wrap:anywhere}
.lbox .leg .mk{grid-column:1;font-size:13px;color:var(--soft);line-height:1.45}
.lbox .leg .od{grid-column:2;grid-row:1/3;font-family:var(--disp);font-weight:800;font-size:22px;
  color:var(--green);font-variant-numeric:tabular-nums;line-height:1}
.lbox .txt{padding:14px 16px;font-size:14.5px;line-height:1.65;color:var(--soft);
  white-space:pre-line;overflow-wrap:anywhere}
.lbox .src{padding:12px 16px;border-top:1px solid var(--line);display:flex;align-items:center;
  gap:8px;font-size:12px;color:var(--meta)}
.lbox .src i{width:6px;height:6px;border-radius:50%;background:var(--meta);flex:0 0 auto}
.lbox.nyert .src i{background:var(--green)}
.lbox.vesztett .src i{background:var(--neg)}
body.lbnyit{overflow:hidden}

/* ── koppintási felületek ──────────────────────────────────────────────────
   Mérve derült ki, hogy nem a doboz csúszott el sehol (vízszintes görgetés
   egyetlen oldalon sincs, a margó mindenhol 22 px), hanem az, hogy amire
   nyomni kell, az 16–27 pixel magas. Telefonon az ujj ennél nagyobb, és a
   találat elvétése pont annak látszik, mintha „össze lenne csúszva" az oldal.

   Az ÖNÁLLÓ hivatkozások kapnak nagyobb felületet — a folyó szövegbe ágyazott
   linkek nem, mert ott a 44 pixeles magasság széttépné a bekezdést, és a
   sorköz miatt egymásra is csúsznának. */
footer .links{gap:4px 18px}
footer .links a{display:inline-flex;align-items:center;min-height:44px;padding:0 2px}
.foot-note a{display:inline-flex;align-items:center;min-height:40px}

/* a profil visszaútja és az előnézet linkjei önálló műveletek */
.mono.back{min-height:44px;margin-bottom:12px}
.pvacts .lnk,.tact .lnk{display:inline-flex;align-items:center;min-height:44px}
.pvacts{gap:0 18px}

/* A fejléc logója is gomb, nem dísz: kapjon rendes érintési felületet.
   A szelektor szándékosan `header .bar > a:first-child`, NEM `header
   a:first-child`. Az utóbbi minden olyan linkre ráillett, ami az első gyerek
   a saját szülőjében — tehát a fiókos menü első elemére is, és az attól
   `inline-flex`-re váltott: 390 pixel helyett 119 széles lett, az alatta
   futó elválasztó vonal pedig a szöveg után megállt, miközben az összes
   többi végigért. Pontosan ez a „szétcsúszott menü", amit látni lehetett. */
.top .brand,header .brand,header .bar > a:first-child{
  min-height:44px;display:inline-flex;align-items:center}

/* A jelölőnégyzet maga rejtett (a címke a koppintási felület), de a címke
   sorköze így is alacsony maradt egysoros szövegnél. */
.chk{min-height:44px;align-items:center}
.chks{gap:6px}


/* ── profil: kategória-sor ─────────────────────────────────────────────────
   A sport ikonja a név alatt, nem csak a szó. A csempéken már ott volt, a
   profilon nem — és épp a profil az a hely, ahol a látogató először dönti el,
   hogy ez az ő sportja-e. */
.sportline{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.sportline .ico{width:15px;height:15px;color:var(--green)}
.sportline .dot{color:var(--line-strong)}
.hero.prof .bio{margin-top:18px;font-size:17px}

/* ── csomagok ──────────────────────────────────────────────────────────────
   A kártya egyetlen dolgot mond: ennyi lenne nála, és ennyi nálunk. A két sor
   egymás alatt van, nem egymás mellett — telefonon az áthúzott ár és a nulla
   egymás mellett elfér ugyan, de olvasni nem lehet, melyik melyik. */
.pkgs{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin-top:26px}
@media (min-width:760px){.pkgs{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}}
.pkg{border:1px solid var(--line-strong);border-radius:18px;padding:20px;background:var(--surface);
  display:flex;flex-direction:column;gap:4px}
.pkg .nm{font-family:var(--disp);font-weight:800;text-transform:uppercase;letter-spacing:-.01em;
  font-size:24px;line-height:1.1}
.pkg .ds{font-size:13.5px;color:var(--meta);line-height:1.55;margin-bottom:10px}
.pkg .row{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:11px 0;border-top:1px solid var(--line)}
.pkg .row .k{font-size:13.5px;color:var(--meta)}
.pkg .row .v{font-family:var(--disp);font-weight:800;font-size:23px;line-height:1;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.pkg .row .v i{font-family:var(--body);font-style:normal;font-weight:400;font-size:12.5px;
  color:var(--meta);margin-left:3px}
/* Az áthúzás nem dísz: ez az egyetlen jel, ami egy pillantás alatt elmondja,
   hogy ezt az összeget NEM kell kifizetni. */
.pkg .row .v.strike{color:var(--soft);text-decoration:line-through;
  text-decoration-color:var(--neg);text-decoration-thickness:2px}
.pkg .row.on .v{color:var(--green-b);font-size:27px}
.pkg .src{font-size:11.5px;color:var(--meta);line-height:1.5;margin-top:8px;opacity:.8}
.pkgnote{margin-top:20px}
.pkgnote b{color:var(--ink);font-weight:700}

/* ── „ha vele játszottál volna" ────────────────────────────────────────────
   Egy szám, akkorára írva, hogy ne lehessen félreolvasni, és alatta MINDIG ott
   a mintája: hány tippből, mikortól meddig. Szám kontextus nélkül ígéret;
   szám mintával állítás. */
.wouldbe{margin-top:26px;border:1px solid rgba(150,200,110,.4);border-radius:20px;
  padding:26px 22px;background:linear-gradient(180deg,rgba(150,200,110,.12),transparent 70%)}
.wouldbe .lb{font-family:var(--body);font-size:13.5px;color:var(--soft);line-height:1.5}
.wouldbe .big{font-family:var(--disp);font-weight:800;line-height:1;margin:12px 0 10px;
  font-size:clamp(46px,13vw,80px);color:var(--green-b);font-variant-numeric:tabular-nums}
.wouldbe .sub{font-family:var(--body);font-size:14px;color:var(--soft);line-height:1.6}
.wouldbe .sub b{color:var(--ink);font-weight:700}
.wouldbe .src{font-family:var(--body);font-size:12px;color:var(--meta);line-height:1.6;
  margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
/* A veszteség ugyanolyan hangosan szól, mint a nyereség. Ha a mínuszt
   halkabbra vennénk, azzal pont azt a bizalmat játszanánk el, amiért a szám
   egyáltalán kikerült. */
.wouldbe.neg{border-color:rgba(232,137,107,.4);
  background:linear-gradient(180deg,rgba(232,137,107,.1),transparent 70%)}
.wouldbe.neg .big{color:var(--neg)}


/* ── a vízszintes sáv egérrel ──────────────────────────────────────────────
   A sáv `overflow-x:auto`, de a görgetősáv rejtve van. Érintőn ez helyes: ott
   a húzás a természetes mozdulat. Egérrel viszont nem maradt SEMMILYEN
   fogódzó — a tartalom 457 pixellel lógott túl 1280-as ablakban, és nem
   lehetett hozzáférni. A nyilak csak ott jelennek meg, ahol tényleg kell:
   pontos mutatójú eszközön, és csak ha van mit görgetni. */
.railwrap{position:relative}
.rnav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:44px;height:44px;border-radius:999px;font-size:26px;line-height:1;
  background:var(--header);border:1px solid var(--line-strong);color:var(--ink);
  display:flex;align-items:center;justify-content:center;
  backdrop-filter:saturate(140%) blur(10px);transition:opacity .2s,border-color .2s}
.rnav:hover{border-color:var(--green)}
.rnav[hidden]{display:none}
.rnav[disabled]{opacity:.25;pointer-events:none}
.rnav.prev{left:-6px}
.rnav.next{right:-6px}
@media (min-width:1180px){.rnav.prev{left:-20px}.rnav.next{right:-20px}}
/* húzás közben ne jelöljön ki szöveget, és a kurzor is mondja, mi történik */
.rail.fog{cursor:grabbing;user-select:none;scroll-snap-type:none}
@media (pointer:fine){.rail{cursor:grab}}
/* ahol a nyilak ott vannak, a „Húzd oldalra" súgó félrevezető lenne */
@media (pointer:fine){.rail-hint{display:none}}


/* ── fiók: adatsorok ───────────────────────────────────────────────────────
   Minden sor vagy egy tény, vagy egy hiányzó lépés. A hiányt nem szépítjük:
   e-mail nélkül nem tudunk szólni, ha nyert — ezt jobb pirosan látni, mint
   sehogy. */
.drows{display:flex;flex-direction:column;margin-top:22px;border-top:1px solid var(--line)}
.drow{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:15px 0;border-bottom:1px solid var(--line)}
.drow .k{font-size:14px;color:var(--meta);flex:0 0 auto}
.drow .v{font-size:15px;font-weight:600;text-align:right;overflow-wrap:anywhere}
.drow.ok .v{color:var(--green-b)}
.drow.hiany .v{color:var(--neg)}
.hero.prof .drows{margin-top:26px}

/* belépés: a Telegram-gomb kapjon levegőt, és ne ugráljon betöltés közben */
.tgbox{min-height:56px;display:flex;align-items:center;margin:26px 0 18px}
.loginalt{margin-top:34px;padding-top:26px;border-top:1px solid var(--line)}
.loginalt .lead{margin-bottom:14px}
/* a fejléc belépés-linkje a Regisztráció gomb mellett */
header .bar .login{margin-left:14px;font-size:14.5px;color:var(--soft);white-space:nowrap}
header .bar .login:hover{color:var(--ink)}
@media (max-width:859px){header .bar .login{display:none}}


/* ── „Te adod a haveroknak a tippeket?" ────────────────────────────────────
   A főoldal többi szekciója azt mondja el, mit KAP a látogató; ez az egyetlen,
   ami azt kérdezi, mit adhat. Ezért néz ki másként: egy keretbe zárt ajánlat,
   bal oldalon az összeggel, jobb oldalon a három lépéssel. Telefonon egymás
   alá kerül, az összeggel elöl — az a mondat, amiért valaki egyáltalán
   elolvassa a többit. */
.offer{margin-top:28px;border:1px solid rgba(150,200,110,.38);border-radius:22px;
  background:linear-gradient(180deg,rgba(150,200,110,.1),transparent 62%);
  display:grid;grid-template-columns:minmax(0,1fr);gap:0;overflow:hidden}
@media (min-width:860px){
  .offer{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
}
.offer .big{padding:30px 26px;display:flex;flex-direction:column;justify-content:center;
  border-bottom:1px solid var(--line)}
@media (min-width:860px){
  .offer .big{border-bottom:0;border-right:1px solid var(--line)}
}
.offer .big .v{font-family:var(--disp);font-weight:800;line-height:.95;
  font-size:clamp(58px,15vw,96px);color:var(--green-b);font-variant-numeric:tabular-nums}
.offer .big .k{font-family:var(--body);font-size:15px;color:var(--soft);line-height:1.55;
  margin-top:14px;max-width:24em}

.oteendo{padding:24px 26px;display:flex;flex-direction:column;gap:20px}
.ost{display:grid;grid-template-columns:34px minmax(0,1fr);gap:14px;align-items:start}
.ost .n{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--green);
  padding-top:3px}
.ost .t{font-size:16px;font-weight:600;line-height:1.4}
.ost .t span{display:block;font-weight:400;font-size:14px;color:var(--meta);
  line-height:1.6;margin-top:5px}


/* ── tömör szekció ─────────────────────────────────────────────────────────
   A profilon a Csomagok és A számai rövid tartalmat hordoz: egy-két kártyát
   vagy egy mondatot. A teljes 66 pixeles szekció-térköz és a 40 pixeles cím
   velük együtt annyi helyet foglalt, mintha a lap fele róluk szólna — közben
   a látogató a fal felé tart. Ugyanaz a tervezés, kisebb hangerőn. */
section.tight{padding:40px 0}
@media (min-width:860px){section.tight{padding:54px 0}}
.h2.sm{font-size:28px;margin-bottom:14px}
@media (min-width:860px){.h2.sm{font-size:32px}}
.h2.sm span:nth-child(2){font-size:1em}
section.tight .pkgs{margin-top:18px;gap:10px}
section.tight .pkg{padding:16px 18px;border-radius:16px}
section.tight .pkg .nm{font-size:19px}
section.tight .pkg .ds{font-size:12.5px;margin-bottom:6px}
section.tight .pkg .row{padding:8px 0}
section.tight .pkg .row .v{font-size:19px}
section.tight .pkg .row.on .v{font-size:22px}
section.tight .pkg .src{font-size:11px;margin-top:6px}
section.tight .pkgnote{margin-top:14px;font-size:14.5px}
section.tight .empty{padding:18px 20px;font-size:13.5px;line-height:1.6}
section.tight .statgrid{margin-top:18px}


/* a fal lapozója: a gomb a rács alatt, teljes szélességben */
.btns.wallmore{margin-top:16px}
.btns.wallmore .btn{width:100%;justify-content:center}
.btns.wallmore .db{color:var(--meta);font-weight:400;font-size:13.5px}
@media (min-width:760px){.btns.wallmore .btn{width:auto;min-width:260px}}


/* ── kétoszlopos profil ────────────────────────────────────────────────────
   Egy hasábban a látogató háromszor görgetett, mire a számokig ért, és a
   képernyő jobb fele végig üresen állt. Balra kerül minden, ami a DÖNTÉSHEZ
   kell — ki ő, mennyibe kerülne máshol, mit tudunk róla —, és görgetés közben
   ott is marad. Jobbra a fal, ami viszont hosszú.

   Telefonon marad az egymás alatt: ott nincs mit kihasználni, és a fal a
   fontosabb, ezért az adatlap előre kerül, de tömören. */
.proflayout{display:grid;grid-template-columns:minmax(0,1fr);gap:26px;margin-top:6px}
@media (min-width:980px){
  .proflayout{grid-template-columns:minmax(300px,360px) minmax(0,1fr);gap:40px;
    align-items:start}
  .profcard{position:sticky;top:96px;max-height:calc(100vh - 120px);overflow-y:auto;
    scrollbar-width:thin;padding-right:4px}
}
.profcard .phead{gap:14px}
.profcard .av.big{width:64px;height:64px;flex:0 0 64px;font-size:26px}
.profcard .pmeta h1{font-size:clamp(26px,6vw,34px)}
.profcard .bio{margin-top:14px;font-size:15px}
.profcard .btns{margin-top:18px;flex-direction:column;align-items:stretch}
.profcard .btns .btn{width:100%;justify-content:center}
.profcard .wallbar{margin-top:16px;padding:12px 0;gap:6px 16px;font-size:12.5px}
.profcard .wallbar b{font-size:18px;margin-right:5px}
.pblock{margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.pblock .pkgs{margin-top:14px}
.pblock .empty{margin-top:14px;padding:16px 18px;font-size:13px;line-height:1.6}
.pblock .statgrid{margin-top:14px}
.profwall .h2.sm{margin-top:10px}
.profwall .fine{margin-bottom:6px}
/* a jobb hasábban is három csempe fér el kényelmesen */
.profwall .wall{margin-top:16px}

/* ── az eredmény legyen LÁTHATÓ ────────────────────────────────────────────
   A sarokba tett 19 pixeles korong alig látszott, és három állapotot kellene
   megkülönböztetnie: bejött, nem jött be, és hogy EZT HONNAN tudjuk. Most a
   csempe alján színes sáv fut végig — tele, ha független forrásból tudjuk,
   szaggatott, ha csak a tippszter mondta. A jel így akkor is olvasható, ha a
   kép sötét, és akkor is, ha valaki nem látja a színeket: a sáv helye és a
   pipa alakja önmagában elmondja. */
.post .tile{position:relative}
.post .mk{width:26px;height:26px;font-size:14px;left:6px;bottom:10px;
  background:rgba(7,12,9,.92);font-weight:800}
.post.nyert .mk{color:var(--abyss);background:var(--green);box-shadow:none}
.post.vesztett .mk{color:#2A0E08;background:var(--neg);box-shadow:none}

.post.nyert .tile::after,
.post.vesztett .tile::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px}
.post.nyert .tile::after{background:var(--green)}
.post.vesztett .tile::after{background:var(--neg)}
/* nem ellenőrzött: szaggatott sáv — ugyanaz az állítás, gyengébb bizonyítékkal */
.post.nyert:not(.ell) .tile::after{
  background:repeating-linear-gradient(90deg,var(--green) 0 7px,transparent 7px 13px)}
.post.vesztett:not(.ell) .tile::after{
  background:repeating-linear-gradient(90deg,var(--neg) 0 7px,transparent 7px 13px)}
.post:not(.ell) .mk{opacity:.82}

/* jelmagyarázat a fal fölé: enélkül a sávok csak díszek */
.wallkulcs{display:flex;flex-wrap:wrap;gap:8px 18px;margin:14px 0 2px;
  font-family:var(--body);font-size:12.5px;color:var(--meta)}
.wallkulcs span{display:inline-flex;align-items:center;gap:7px}
.wallkulcs i{width:18px;height:5px;border-radius:2px;flex:0 0 auto}
.wallkulcs i.w{background:var(--green)}
.wallkulcs i.l{background:var(--neg)}
.wallkulcs i.u{background:repeating-linear-gradient(90deg,var(--green) 0 5px,transparent 5px 10px)}


/* ── a megerősítés utáni képernyő ──────────────────────────────────────────
   A panaszt szó szerint idézve: „mit kell akkor most csináljak?" A válasz ott
   volt a lapon, csak egy nagy főcím és egy hosszú bekezdés ALATT — mobilon a
   hajtás alá került. Most a gomb a főcím után jön, a magyarázat utána. */
.hero.done{padding-top:30px}
.hero.done h1{font-size:clamp(30px,8vw,54px)}
.hero.done .btns{margin-top:22px;flex-direction:column;align-items:stretch}
.hero.done .btns .btn{width:100%;justify-content:center}
@media (min-width:620px){
  .hero.done .btns{flex-direction:row;align-items:center}
  .hero.done .btns .btn{width:auto}
}
.hero.done .lead{margin-top:18px;font-size:15px;color:var(--meta)}
.hero.done .panel{margin-top:30px}

/* Állapotlista sorszám helyett. A kontúros „03"/„04" sötét háttéren
   olvashatatlan volt — és amúgy sem a sorszám érdekes, hanem hogy KÉSZ-e. */
.hollepes{list-style:none;margin-top:14px;display:flex;flex-direction:column}
.hollepes li{position:relative;padding:13px 0 13px 30px;border-top:1px solid var(--line)}
.hollepes li:first-child{border-top:0}
.hollepes li::before{position:absolute;left:0;top:14px;width:19px;height:19px;
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:800;line-height:1}
.hollepes li.kesz::before{content:"✓";background:var(--green);color:var(--abyss)}
.hollepes li.most::before{content:"";background:transparent;
  box-shadow:inset 0 0 0 2px var(--green)}
.hollepes li.var::before{content:"";background:transparent;
  box-shadow:inset 0 0 0 1px var(--line-strong)}
.hollepes b{display:block;font-size:15px;font-weight:600;line-height:1.35}
.hollepes span{display:block;font-size:13.5px;color:var(--meta);line-height:1.55;margin-top:3px}
.hollepes li.var b,.hollepes li.var span{opacity:.5}
.hollepes li.most b{color:var(--green-b)}


/* ═══════════════════════════════════════════════════════════════════════════
   TÉRKÖZ-RENDSZER
   ═══════════════════════════════════════════════════════════════════════════
   A stíluslapban 39 KÜLÖNBÖZŐ pixelérték szerepelt térközként (2, 3, 4, 5, 6,
   7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 32,
   34, 40, 44, 52, 54, 56, 64, 66, 70, 72, 84, 100). Ez nem stílus, hanem
   véletlen: minden szekció ott állt meg, ahol az írója épp jónak látta, és
   ettől a lap ritmusa szekciónként más lett. A szem pont ezt érzi
   rendezetlennek, még ha nem is tudja megnevezni.

   Innentől egy skála van, és minden térköz ebből jön. A lépések aránya
   nagyjából 1,5× — elég nagy ahhoz, hogy két szomszédos fokozat
   megkülönböztethető legyen, és elég sűrű, hogy mindenre legyen megfelelő.

   A szekció-térköz és az oldalmargó FOLYAMATOSAN nő a képernyővel (clamp),
   nem töréspontnál ugrik. Eddig 22-ről 48-ra ugrott 860 pixelnél: alatta
   szűk volt, fölötte hirtelen tág. */
:root{
  --s1:4px; --s2:8px; --s3:12px; --s4:18px; --s5:26px; --s6:38px; --s7:56px;
  --gut:clamp(18px, 4.6vw, 48px);
  --sec:clamp(46px, 6.6vw, 88px);
  /* olvasható sorhossz: ennél szélesebb bekezdésben a szem elveszti a sort */
  --measure:64ch;
}
@media (min-width:860px){ :root{ --gut:clamp(18px, 4.6vw, 48px); } }

section{padding:var(--sec) 0}
@media (min-width:860px){ section{padding:var(--sec) 0} }
section.tight{padding:calc(var(--sec) * .62) 0}
@media (min-width:860px){ section.tight{padding:calc(var(--sec) * .62) 0} }

.h2{margin-bottom:var(--s4)}
.kick{margin-bottom:var(--s3)}
.lead{max-width:var(--measure)}
.lead + .btns, .h2 + .btns{margin-top:var(--s5)}
.btns{gap:var(--s3)}
.fine{margin-top:var(--s4);max-width:var(--measure)}

/* ═══════════════════════════════════════════════════════════════════════════
   KATTINTHATÓSÁG
   ═══════════════════════════════════════════════════════════════════════════
   „Eltéved az ember szeme a weben." A gombok látszottak, a LINKEK nem: a folyó
   szövegben ugyanolyan színűek voltak, mint a szöveg, és a kattintható
   csempéken sem volt jele annak, hogy rájuk lehet nyomni.

   Három szabály, és mindhárom önmagában is működik (nem csak színnel, mert azt
   nem mindenki látja egyformán):
     · szövegbeli link: aláhúzva ÉS zöld,
     · kattintható doboz: mutató kurzor, hoverre kiemelt keret,
     · minden kattintható elem látható fókuszgyűrűt kap billentyűzetnél. */
main a:not(.btn):not(.tcard):not(.post):not(.brand):not(.lnk){
  color:var(--green-b);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
  text-decoration-color:rgba(185,226,148,.45)}
main a:not(.btn):not(.tcard):not(.post):hover{text-decoration-color:var(--green-b)}
.lnk{text-decoration-thickness:1px;text-decoration-color:rgba(150,200,110,.55)}
.lnk:hover{text-decoration-color:var(--green)}

/* kattintható doboz: a keret hoverre megerősödik, és a kurzor is mondja */
.tcard,.post,.pkg[role="button"],[role="button"]{cursor:pointer}
.tcard.pick:hover,.tcard:hover{border-color:var(--green)}
.post:hover .tile{outline:2px solid var(--green);outline-offset:-2px}

/* a fókuszgyűrű sosem tűnik el — billentyűzettel is használható a lap */
a:focus-visible,button:focus-visible,[role="button"]:focus-visible,
summary:focus-visible,input:focus-visible,select:focus-visible{
  outline:2px solid var(--green);outline-offset:3px;border-radius:6px}

/* a lábléc és a menü linkjei is kapjanak jelet, ne csak a szövegbeliek */
footer .links a{text-decoration-color:rgba(203,216,205,.4)}
footer .links a:hover{color:var(--ink);text-decoration-color:var(--ink)}
header nav a{position:relative}
header nav a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;
  background:var(--green);transform:scaleX(0);transform-origin:left;
  transition:transform .2s cubic-bezier(.16,1,.3,1)}
header nav a:hover::after,header nav a[aria-current]::after{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){header nav a::after{transition:none}}


/* ── fejléc-műveletek ──────────────────────────────────────────────────────
   Eddig a fiók-gomb a logóhoz tapadt, a hamburger meg a jobb szélen állt,
   mert MINDKETTŐN `margin-left:auto` volt — a kettő közti üres sáv volt a
   panasz. Most egy csoportban vannak, egymás mellett.

   Telefonon ikon, ugyanabban a körben, mint a hamburger, halvány zöld
   háttérrel. A „Regisztráció" az egyetlen, aminek a szava is számít, ezért
   ott ikon + szöveg. */
.headacts{margin-left:auto;display:flex;align-items:center;gap:8px}
header nav{margin-left:auto}

.hbtn{width:44px;height:44px;flex:0 0 auto;border-radius:999px;
  border:1px solid var(--line-strong);color:var(--ink);
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:linear-gradient(145deg,rgba(150,200,110,.16),rgba(150,200,110,.04));
  transition:border-color .2s,background .2s,color .2s}
.hbtn svg{width:19px;height:19px;flex:0 0 auto}
.hbtn:hover{border-color:var(--green);color:var(--green-b);
  background:linear-gradient(145deg,rgba(150,200,110,.26),rgba(150,200,110,.08))}
.hbtn .hlab{display:none}

/* a Regisztráció szöveggel is: ugyanaz a forma, csak szélesebb */
.hbtn.reg{width:auto;padding:0 16px 0 13px;font-family:var(--body);font-weight:700;
  font-size:14px;color:var(--abyss);background:var(--green);border-color:var(--green)}
.hbtn.reg svg{width:17px;height:17px}
.hbtn.reg:hover{background:var(--green-b);border-color:var(--green-b);color:var(--abyss)}
@media (max-width:419px){
  /* nagyon keskeny kijelzőn a Regisztráció is csak ikon — három gomb
     szöveggel már kiszorítaná a logót */
  .hbtn.reg span{display:none}
  .hbtn.reg{width:44px;padding:0}
}

/* asztali gépen visszakapják a szót, mert ott van hely */
@media (min-width:860px){
  .headacts{gap:10px}
  .hbtn{width:auto;padding:0 18px;height:42px}
  .hbtn .hlab{display:inline;font-family:var(--body);font-weight:600;font-size:14px}
  .hbtn.reg{padding:0 20px 0 17px}
  /* A hamburgert asztalon a `.burger{display:none}` rejtette el — amíg a gomb
     nem kapta meg a `.hbtn` osztályt is. A `.hbtn{display:inline-flex}` később
     áll a lapon, azonos fajsúllyal, tehát felülírta: a gomb visszajött, és vele
     a MOBILRA tervezett fiókos menü, ami 1280 pixel szélességben üres sávokká
     nyúlt. Itt a szabály erősebb, mint mindkettő. */
  .burger.hbtn{display:none}
}

/* A fejléc öt menüpontot, két gombot és a logót visz egy sorban. 1024 pixelen
   ebből a „Hogyan működik" és a „Tippszter vagyok" két sorba tört, és a
   fejléc kétszer olyan magas lett, mint máshol — ez az, ami szétcsúszottnak
   látszik. Egy menüpont soha nem törik: ha nem fér el, a térköz enged. */
header nav a{white-space:nowrap}
@media (min-width:860px) and (max-width:1099px){
  header .bar{padding-left:32px;padding-right:32px;gap:14px}
  header nav{gap:16px}
  header nav a{font-size:14px}
  .headacts{gap:8px}
  .hbtn{padding:0 14px}
  .hbtn.reg{padding:0 16px 0 13px}
}


/* tetel-tablazat a kifizetesi felteteleknel: nev balra, osszeg jobbra, kozottuk
   pontsor. Igazi <table> nem kell hozza, es telefonon az sem torne meg. */
.ratelist{list-style:none;margin:var(--s4) 0 0;padding:0;max-width:var(--measure);
  border-top:1px solid var(--line)}
.ratelist li{display:flex;align-items:baseline;gap:var(--s3);
  padding:var(--s3) 0;border-bottom:1px solid var(--line)}
.ratelist b{font-weight:700;color:var(--ink)}
.ratelist li::before{content:"";order:1;flex:1 1 auto;height:1px;
  background:repeating-linear-gradient(90deg,var(--line) 0 2px,transparent 2px 6px);
  transform:translateY(-3px)}
.ratelist li:last-child{border-bottom:none}
.ratelist span{order:2;font-variant-numeric:tabular-nums;font-weight:700;
  color:var(--green-b);white-space:nowrap}


/* masolhato link: a mezo es a gomb egy sorban, telefonon egymas alatt. A mezo
   readonly, de NEM disabled — egy disabled inputot a bongeszok nem engednek
   kijelolni, tehat a kezi masolas is elveszne, ha a clipboard API nem megy. */
.copyrow{display:flex;gap:var(--s2);align-items:stretch;margin-top:var(--s4);
  max-width:var(--measure)}
.copyrow .in{flex:1 1 auto;min-width:0;font-family:var(--mono,monospace);font-size:14px}
.copyrow .btn{flex:0 0 auto;white-space:nowrap}
.copyrow .btn.ok{background:var(--green);color:var(--abyss);border-color:var(--green)}
@media (max-width:520px){ .copyrow{flex-direction:column} }

.setform{max-width:var(--measure)}
.setform .f + .f{margin-top:var(--s4)}
.setform .chks{margin-top:var(--s4)}
.setform .btns{margin-top:var(--s5)}
.formmsg{margin-top:var(--s3);font-family:var(--body);font-size:14px;color:var(--meta);
  min-height:1.2em}
.formmsg.ok{color:var(--green-b)}
.formmsg.bad{color:var(--neg)}


/* ═══ TARTALÉK BETŰK — a főoldal CLS-e ══════════════════════════
   A főoldal elrendezés-elmozdulása 0,0979 volt — a 0,1-es határ alatt, de
   épp csak. A mérés szerint az egész a 4,2. másodpercnél történt, egyetlen
   lépésben: amikor a webfont megérkezett, a főcím <span>-je 137,6 pixelről
   93,8-ra ugrott, és vele ugrott fel minden, ami alatta van — a bevezető, az
   e-mail-mező és a gomb is.

   Az ok kimérve: ugyanaz a főcím a tartalék betűvel 3159 pixel széles, a
   Barlow Condensed-del 2211 — a tartalék 43%-kal szélesebb, tehát több sorba
   törik, és a betőltés pillanatában visszaugrik kevesebbre.

   A megoldás nem a betű gyorsítása (az érkezhet bármikor), hanem az, hogy a
   tartalék UGYANANNYI helyet foglaljon. Ezért a tartalékot nem bízzuk arra,
   mi van telepítve a látogató gépén (az Impact egyik gépen megvan, a másikon
   nem, és a kettő más szélességű): egy megnevezett, `size-adjust`-tal
   húzott saját családot adunk meg, ami mindenhol ugyanúgy méreteződik.

   Függőleges eltolódást nem okoz: a címeknek és a szövegnek fix
   `line-height`-ja van, tehát a sormagasság nem a betű metrikájából jön. */
@font-face{
  font-family:"Barlow Condensed tartalek";
  src:local("Arial"), local("Helvetica"), local("Liberation Sans"), local("Nimbus Sans");
  size-adjust:70%;          /* mért: 2211 / 3159,48 */
  font-weight:700 800;
  font-style:normal;
}
@font-face{
  font-family:"DM Sans tartalek";
  src:local("Arial"), local("Helvetica"), local("Liberation Sans"), local("Nimbus Sans");
  size-adjust:93.2%;        /* mért: 3571 / 3830,08 */
  font-weight:400 700;
  font-style:normal;
}
:root{
  --disp:'Barlow Condensed',"Barlow Condensed tartalek",sans-serif;
  --body:'DM Sans',"DM Sans tartalek",sans-serif;
}


/* ═══ tippszter-árak táblázata ═══════════════════════════════
   Nem <table>: telefonon egy négyoszlopos táblázat vagy oldalra csúszik, vagy
   olvashatatlanra zörtöl. Gridben a fejléc eltűnik, és minden sor egy kártyává
   áll össze; asztalon visszajön a négy hasáb.
   A forrás SOHA nem tűnik el — ezért áll kimondva minden soron, nem lábjegyzetben. */
.artabla{margin-top:var(--s5);border-top:1px solid var(--line)}
.arsor{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s1) var(--s4);
  padding:var(--s4) 0;border-bottom:1px solid var(--line)}
.arfej{display:none}
.arnev{font-family:var(--body);font-weight:700;font-size:16px;color:var(--ink);
  text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(185,226,148,.45)}
.arnev:hover{text-decoration-color:var(--green-b)}
.arcsomag{font-size:14.5px;color:var(--soft)}
.arar{font-family:var(--body);font-weight:700;font-size:20px;color:var(--green-b);
  font-variant-numeric:tabular-nums}
.arar small{font-size:13px;font-weight:500;color:var(--meta);margin-left:2px}
.arforras{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--meta);
  line-height:1.5}
@media (min-width:860px){
  .artabla{border-top:0}
  .arsor{grid-template-columns:minmax(0,1.1fr) minmax(0,1.2fr) 150px minmax(0,1.4fr);
    align-items:baseline;gap:var(--s4)}
  .arfej{display:grid;border-bottom:1px solid var(--line-strong);padding-bottom:var(--s3)}
  .arfej span{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
    text-transform:uppercase;color:var(--meta)}
  .arar{text-align:right}
}


/* ═══ FEJLÉC-FELOSZTÁS ══════════════════════════════════════
   A fejléc flex sor volt, és KÉT elemen is `margin-left:auto` állt: a
   `nav`-on és a `.headacts`-en. Két automatikus margó a maradék helyet
   KETTÉOSZTJA, ezért lett a sorrend „logó — nagy hézag — menü — nagy hézag
   — gombok": a menü se a logóhoz, se a gombokhoz nem tartozott, hanem lebegett
   köztük egy olyan ponton, amit semmi nem határozott meg.

   Most három sáv van, kimondva: logó | menü | gombok. A menü a középső
   sávban ül és középre igazodik, tehát a két oldalt maradó hely egyforma —
   nem véletlen, hanem szabály. */
@media (min-width:860px){
  header .bar{display:grid;grid-template-columns:auto minmax(0,1fr) auto;
    gap:var(--s5);align-items:center}
  header nav{margin:0;justify-content:center;flex-wrap:nowrap}
  .headacts{margin:0}
}
/* Szűkebb asztali kijelzőn a középre igazítás már szétfeszítené a sort: ott a
   menü a logóhoz tapad, és a maradék hely egy helyen, a gombok előtt gyűlik
   össze. Így is van szabály, csak másik. */
@media (min-width:860px) and (max-width:1179px){
  header .bar{gap:var(--s4)}
  header nav{justify-content:flex-start}
}