/*
 * PAGINIO.RO - a nyilvanos lap arca.
 * Marka: notes/manager/paginio-arculat.md (szinek, Outfit, a logo aranyai, az animacio).
 * Kompozicio: paginio-design/U2-landing es U3-ajanlatkero. A merce: taste-skill (docs/paginio.md).
 * A betu helyben (@fontsource), nem a Google CDN-rol.
 */
/* outfit-latin-ext-400-normal */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/build/assets/outfit-latin-ext-400-normal-5tcqmc2S.woff2) format('woff2'), url(/build/assets/outfit-latin-ext-400-normal-DHm7mdGe.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* outfit-latin-400-normal */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/build/assets/outfit-latin-400-normal-BGsTXAXT.woff2) format('woff2'), url(/build/assets/outfit-latin-400-normal-DMwTpYkH.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* outfit-latin-ext-500-normal */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/build/assets/outfit-latin-ext-500-normal-zeox_O30.woff2) format('woff2'), url(/build/assets/outfit-latin-ext-500-normal-DrCvqoFD.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* outfit-latin-500-normal */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/build/assets/outfit-latin-500-normal-DKnIMDSk.woff2) format('woff2'), url(/build/assets/outfit-latin-500-normal-ClnHRwRh.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* outfit-latin-ext-600-normal */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/build/assets/outfit-latin-ext-600-normal-B85nYjL1.woff2) format('woff2'), url(/build/assets/outfit-latin-ext-600-normal-CWJcPgd7.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* outfit-latin-600-normal */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/build/assets/outfit-latin-600-normal-B7SfZ07L.woff2) format('woff2'), url(/build/assets/outfit-latin-600-normal-BEfTtDA7.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* outfit-latin-ext-700-normal */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/build/assets/outfit-latin-ext-700-normal-CI4iH74K.woff2) format('woff2'), url(/build/assets/outfit-latin-ext-700-normal-fjS8-Gm7.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* outfit-latin-700-normal */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/build/assets/outfit-latin-700-normal-Cu9v6i1X.woff2) format('woff2'), url(/build/assets/outfit-latin-700-normal-D4itBLBr.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root {
    --yellow: #F4B13E; --yellow-corner: #FBD99A; --yellow-soft: #FDF0D5;
    --blue: #2F6FEB;   --blue-corner: #9DBBF6;   --blue-soft: #E3ECFD; --blue-press: #1F4FB8;
    --green: #1FB86A;  --green-corner: #9BE3BD;  --green-soft: #D8F3E5;
    --green-text: #12804B;
    --ink: #101828; --ink-2: #344054; --ink-3: #475467;
    --ground: #FFFFFF; --mist: #F5F7FB; --soft: #F2F4F7; --line: #E4E7EC;
    --font: 'Outfit', system-ui, sans-serif;
    --gutter: clamp(16px, 4vw, 40px);
    --max: 1200px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body.pg { margin: 0; background: var(--ground); color: var(--ink); font: 400 18px/1.5 var(--font); -webkit-font-smoothing: antialiased; }
.pg img { max-width: 100%; height: auto; display: block; }
.pg a { color: var(--blue); }
.pg a:hover { color: var(--blue-press); }
.pg :focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.pg-num { font-variant-numeric: tabular-nums; }
.pg h1, .pg h2, .pg h3 { margin: 0; font-weight: 700; letter-spacing: -0.03em; }
.pg p { margin: 0; }

/* ---- gombok ---------------------------------------------------------- */
.pg-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 22px; border: 0; border-radius: 14px; font: 600 18px/1.2 var(--font); text-decoration: none; cursor: pointer; background: var(--soft); color: var(--ink); transition: background-color .15s, transform .1s; }
.pg .pg-btn { color: var(--ink); }
.pg-btn:active { transform: translateY(1px); }
.pg .pg-btn--blue { background: var(--blue); color: #fff; }
.pg .pg-btn--blue:hover { background: var(--blue-press); color: #fff; }
.pg .pg-btn--ink { background: var(--ink); color: #fff; }
.pg .pg-btn--ink:hover { background: #1D2939; color: #fff; }
.pg .pg-btn--soft:hover { background: #E4E7EC; color: var(--ink); }
.pg-btn--lg { min-height: 60px; padding: 18px 28px; font-size: 18px; border-radius: 16px; }

/* ---- a logo: aranyok a terv szamaibol, em-ben (1em = a nev merete) ----- */
.pg-logo { --n: 48px; display: inline-flex; align-items: center; gap: .2545em; font-size: var(--n); color: var(--ink); }
.pg-logo__mark { width: 1.4636em; height: 1.4636em; margin-top: .1082em; flex: none; }
.pg-logo__text { display: flex; flex-direction: column; gap: .236em; }
.pg-logo__name { font-size: 1em; letter-spacing: -0.03em; line-height: .95; white-space: nowrap; }
.pg-logo__pagin { font-weight: 600; }
.pg-logo__io { font-weight: 400; color: var(--green-text); }
.pg-logo__motto { font-size: .273em; margin-left: .1648em; /* 0,045 * nev / 0,273 */ color: var(--ink-2); letter-spacing: .01em; line-height: 1; white-space: nowrap; }

/* Az animacio: paginio-design/U4-animacio, valtozatlan idozites. */
.pg-page { transform-box: fill-box; transform-origin: 50% 100%; animation: pg-drop .46s cubic-bezier(.2, .75, .3, 1.2) both; }
.pg-p1 { animation-delay: .15s; }
.pg-p2 { animation-delay: .55s; }
.pg-p3 { animation-delay: .95s; }
@keyframes pg-drop {
    0% { visibility: hidden; transform: translate(-18%, -70%) rotate(-16deg); }
    1% { visibility: visible; transform: translate(-18%, -70%) rotate(-16deg); }
    72% { visibility: visible; transform: translate(0, 3%) rotate(2deg); }
    100% { visibility: visible; transform: none; }
}
.pg-l { animation: pg-sweep .34s linear both; }
@keyframes pg-sweep { 0% { color: var(--ink); } 45% { color: var(--green); } 100% { color: var(--ink); } }
.pg-io { animation: pg-stay .3s linear both; }
@keyframes pg-stay { 0% { color: var(--ink); } 100% { color: var(--green-text); } }
.pg-logo__motto { display: inline-block; clip-path: inset(0 100% 0 0); animation: pg-type 1s steps(14, end) 2.35s both; }
@keyframes pg-type { to { clip-path: inset(0 0 0 0); } }

.pg-wordmark { font-size: 26px; letter-spacing: -0.03em; line-height: 1; font-weight: 600; color: var(--ink); }
.pg-io-static { font-weight: 400; color: var(--green-text); }

/* ---- fejlec ---------------------------------------------------------- */
.pg-head { max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: 20px var(--gutter); display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.pg .pg-head__brand { text-decoration: none; color: var(--ink); display: inline-flex; }
.pg-head__nav { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-left: auto; font-size: 18px; font-weight: 500; }
.pg .pg-head__nav a { color: var(--ink); text-decoration: none; padding: 6px 0; }
.pg .pg-head__nav a:hover { color: var(--blue); }
.pg-head__end { display: flex; align-items: center; gap: 12px; }
.pg-lang { display: flex; gap: 2px; background: var(--soft); border-radius: 12px; padding: 4px; font-size: 16px; font-weight: 600; }
.pg-lang a, .pg-lang__on { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; border-radius: 9px; text-decoration: none; }
.pg .pg-lang a { color: var(--ink-3); }
.pg .pg-lang a:hover { color: var(--ink); }
.pg-lang__on { background: #fff; color: var(--ink); }

/* ---- vaz ------------------------------------------------------------- */
.pg-wrap { max-width: var(--max); margin: 0 auto; }
.pg-band { padding: clamp(64px, 9vw, 136px) var(--gutter); }
.pg-band--mist { background: var(--mist); }
.pg-band--tight { padding-top: 0; }
.pg-lead { font-size: clamp(18px, 1.6vw, 22px); line-height: 1.5; color: var(--ink-2); max-width: 600px; }
.pg h2 { font-size: clamp(32px, 3.6vw, 48px); line-height: 1.08; }
.pg-intro { display: flex; flex-direction: column; gap: 16px; max-width: 760px; margin-bottom: 48px; }
.pg-h2-wide { max-width: 800px; margin-bottom: 48px !important; }

/* ---- hero ------------------------------------------------------------ */
.pg-hero { max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: clamp(32px, 6vw, 88px) var(--gutter) clamp(56px, 8vw, 120px); display: flex; flex-wrap: wrap; align-items: center; gap: 56px; }
.pg-hero__text { flex: 999 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 32px; }
.pg-hero h1 { font-size: clamp(44px, 6.2vw, 84px); letter-spacing: -0.035em; line-height: 1.02; max-width: 12ch; }
.pg-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.pg-hero__art { flex: 1 1 380px; min-width: 0; display: flex; justify-content: center; }
.pg-hero__art svg { width: 100%; max-width: 470px; height: auto; overflow: visible; }
/* A hero lapjai ugyanugy raesnek, mint a jel lapjai - a logo utan. */
.pg-art { transform-box: fill-box; transform-origin: 50% 100%; animation: pg-drop .5s cubic-bezier(.2, .75, .3, 1.2) both; }
.pg-art--1 { animation-delay: .35s; } .pg-art--2 { animation-delay: .75s; } .pg-art--3 { animation-delay: 1.15s; }

/* ---- csomagok -------------------------------------------------------- */
.pg-packages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.pg-pack { background: #fff; border-radius: 24px; overflow: hidden; display: flex; flex-direction: column; transition: transform .2s; }
.pg-pack:hover { transform: translateY(-3px); }
.pg-pack__head { background: var(--pack); padding: 28px; display: flex; flex-direction: column; gap: 6px; }
.pg-pack__head h3 { font-size: 28px; letter-spacing: -0.02em; }
.pg-pack__head p { font-size: 18px; font-weight: 500; }
.pg-pack--jelenlet .pg-pack__head p { color: #3B2A05; }
.pg-pack--erdeklodo .pg-pack__head { color: #fff; }
.pg-pack--bolt .pg-pack__head p { color: #06301B; }
.pg-pack__body { padding: 28px; display: flex; flex-direction: column; gap: 6px; flex-grow: 1; }
.pg-pack__price { font-size: 48px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; }
.pg-pack__per { font-size: 18px; font-weight: 500; color: var(--ink-3); letter-spacing: 0; }
.pg-pack__setup { font-size: 16px; color: var(--ink-3); margin-bottom: 16px !important; }
.pg-pack ul { margin: 0 0 24px; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; font-size: 18px; line-height: 1.4; }
.pg .pg-pack__cta { margin-top: auto; }
.pg .pg-pack--jelenlet .pg-pack__cta { background: var(--yellow-soft); }
.pg .pg-pack--erdeklodo .pg-pack__cta { background: var(--blue); color: #fff; }
.pg .pg-pack--bolt .pg-pack__cta { background: var(--green-soft); }
.pg .pg-pack--jelenlet .pg-pack__cta:hover { background: #FBE3B2; }
.pg .pg-pack--erdeklodo .pg-pack__cta:hover { background: var(--blue-press); color: #fff; }
.pg .pg-pack--bolt .pg-pack__cta:hover { background: #BDEBD3; }

.pg-then { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: center; margin-top: 72px; }
.pg-then__pic { margin: 0; border-radius: 24px; overflow: hidden; aspect-ratio: 4 / 3; }
.pg-then__pic img { width: 100%; height: 100%; object-fit: cover; }
.pg-then__text { display: flex; flex-direction: column; gap: 24px; }
.pg-statement { font-size: clamp(22px, 2.4vw, 28px); line-height: 1.25; font-weight: 500; letter-spacing: -0.015em; }
.pg-note { font-size: 16px; color: var(--ink-3); }

/* ---- hogyan ---------------------------------------------------------- */
.pg-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.pg-step { display: flex; flex-direction: column; gap: 12px; }
.pg-step p { font-size: 18px; color: var(--ink-2); }
.pg .pg-step__word { font-size: 48px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; }
.pg-step--0 .pg-step__word { color: #B7791F; }
.pg-step--1 .pg-step__word { color: var(--blue); }
.pg-step--2 .pg-step__word { color: var(--green-text); }

.pg-show { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px; margin-top: 80px; align-items: start; }
.pg-show figure { margin: 0; display: flex; flex-direction: column; gap: 14px; }
.pg-show figcaption { font-size: 16px; color: var(--ink-3); }
.pg-show figcaption strong { color: var(--ink); font-weight: 600; }
.pg-show__pic picture { border-radius: 24px; overflow: hidden; aspect-ratio: 4 / 5; display: block; }
.pg-show__pic img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 50%; }

/* Egy valodi portal-kepernyo kicsiben (a portal sajat tokenjei, data-ui). */
.pgui { display: grid; grid-template-columns: 190px minmax(0, 1fr); background: #f5f5f2; border-radius: 20px; padding: 0 8px 8px 0; min-height: 380px; font-family: 'Outfit', system-ui, sans-serif; color: #131416; font-size: 14px; line-height: 20px; overflow: hidden; }
.pgui__side { padding: 16px 12px; display: flex; flex-direction: column; gap: 4px; }
.pgui__brand { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; padding: 0 8px; }
.pgui__brand .pg-mark { width: 20px; height: 20px; }
.pgui__scope { display: flex; flex-direction: column; margin: 14px 8px 10px !important; font-weight: 500; }
.pgui__scope span { font-size: 14px; color: #5d5f60; font-weight: 400; }
.pgui ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.pgui li { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 8px; color: #3c3e3f; }
.pgui li.is-on { background: #e9e9e5; color: #131416; font-weight: 500; }
.pgui__st { width: 14px; height: 14px; border-radius: 50%; flex: none; border: 1.5px solid #c9cbcc; }
.pgui__st--kesz { background: #1b6c80; border-color: #1b6c80; }
.pgui__st--elkezdve { border-color: #1b6c80; position: relative; overflow: hidden; }
.pgui__st--elkezdve::after { content: ""; position: absolute; top: 0; right: 0; width: 50%; height: 100%; background: #1b6c80; }
.pgui__main { display: flex; flex-direction: column; min-width: 0; }
.pgui__top { display: flex; justify-content: space-between; padding: 14px 16px; color: #5d5f60; }
.pgui__top span:first-child { color: #131416; }
.pgui__sheet { flex: 1; background: #fff; border: 1px solid #e6e7e5; border-radius: 14px; padding: 20px; }
.pgui__title { font-size: 22px; font-weight: 600; margin-bottom: 12px !important; }
.pgui__row { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 16px; padding: 14px 0; border-top: 1px solid #efefed; align-items: center; }
.pgui__row > span:first-child { font-weight: 500; }
.pgui__input { min-height: 36px; border: 1px solid #c9cbcc; border-radius: 6px; padding: 7px 10px; }

/* ---- az elofizetes --------------------------------------------------- */
.pg-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; }
.pg-split__head { display: flex; flex-direction: column; gap: 16px; }
.pg-incl { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 40px; font-size: 18px; line-height: 1.45; }
.pg-incl dt { font-weight: 600; }
.pg-incl dd { margin: 0; color: var(--ink-3); }

/* ---- az adatok, sotet ------------------------------------------------ */
.pg-dark { background: var(--ink); color: #fff; border-radius: 28px; padding: clamp(32px, 5vw, 64px); display: flex; flex-direction: column; gap: 40px; }
.pg-dark h2 { max-width: 760px; }
.pg-dark__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; font-size: 18px; }
.pg-dark__grid p { color: #D0D5DD; }
.pg .pg-dark__t { font-size: 22px; font-weight: 600; margin-bottom: 8px; }
.pg .pg-dark__t--0 { color: var(--yellow-corner); }
.pg .pg-dark__t--1 { color: var(--blue-corner); }
.pg .pg-dark__t--2 { color: var(--green-corner); }

/* ---- kiegeszitok ----------------------------------------------------- */
.pg-band--tight h2 { margin-bottom: 28px; }
.pg-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.pg .pg-chip a { display: inline-flex; align-items: center; min-height: 48px; padding: 10px 20px; border-radius: 999px; font-size: 18px; font-weight: 500; color: var(--ink); text-decoration: none; transition: background-color .15s; }
.pg .pg-chip--0 a { background: var(--yellow-soft); } .pg .pg-chip--0 a:hover { background: #FBE3B2; }
.pg .pg-chip--1 a { background: var(--blue-soft); } .pg .pg-chip--1 a:hover { background: #CCDCFB; }
.pg .pg-chip--2 a { background: var(--green-soft); } .pg .pg-chip--2 a:hover { background: #BDEBD3; }

/* ---- zaro sav -------------------------------------------------------- */
.pg-close { background: var(--yellow); padding: clamp(56px, 7vw, 104px) var(--gutter); }
.pg-close__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px; }
.pg-close h2 { font-size: clamp(34px, 4.4vw, 60px); letter-spacing: -0.035em; line-height: 1.04; max-width: 15ch; }

/* ---- lablec ---------------------------------------------------------- */
.pg-foot { max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: 64px var(--gutter) 48px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: end; color: var(--ink-3); font-size: 16px; }
.pg-foot__brand { display: flex; flex-direction: column; gap: 6px; }
.pg-foot__name { font-size: clamp(64px, 10vw, 140px); line-height: .95; letter-spacing: -0.03em; font-weight: 600; color: var(--ink); }
.pg-foot__legal { display: flex; flex-direction: column; gap: 16px; align-items: flex-end; text-align: right; max-width: 460px; }
.pg-foot__marks { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: flex-end; }
.pg-foot__credits { font-size: 14px; color: var(--ink-3); }
.pg .pg-foot__credits a { color: var(--ink-3); }
/*
 * "PAGES DELIVERED BY" + A BESTUDION JELE (U5), a kozos komponensbol. A terv szamai:
 * 30 px-es mottohoz 293 x 119-es jel, balra 46 px-szel behuzva (a jel sajat urese), a
 * felirat alapvonala a jel tetejetol 70 px-re. Arányosan: margin-left -46/293 w,
 * es a jel 70/119-e all az alapvonalon, tehat alatta (1 - 70/119) * h = 0,1674 w lóg.
 * A motto merete = w * 30/293.
 */
.pg-by.sitekit-madeby { gap: 0; padding: 0; align-items: flex-end; font-size: calc(var(--madeby-width) * 30 / 293); color: var(--ink-2); letter-spacing: .01em; margin-left: .1648em; }
.pg-by .sitekit-madeby__svg { margin-left: calc(var(--madeby-width) * -46 / 293); position: relative; top: calc(var(--madeby-width) * 0.145); }
.pg-by .sitekit-madeby__caption { white-space: nowrap; line-height: 1; }

/* ---- koszonjuk ------------------------------------------------------- */
.pg-thanks { padding: clamp(40px, 7vw, 104px) var(--gutter); background: var(--mist); }
.pg-thanks__in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: start; }
.pg-thanks__text { display: flex; flex-direction: column; gap: 24px; }
.pg-thanks h1 { font-size: clamp(40px, 5vw, 60px); line-height: 1.04; }
.pg-thanks__card { background: var(--ink); color: #fff; border-radius: 24px; padding: 32px 28px; display: flex; flex-direction: column; gap: 16px; }
.pg-thanks__card h2 { font-size: 22px; letter-spacing: -0.01em; }
.pg-thanks__code { display: flex; flex-direction: column; gap: 4px; }
.pg-thanks__code span { color: #D0D5DD; font-size: 16px; }
.pg-thanks__code strong { font-size: 28px; letter-spacing: .06em; }

/* ---- a teljes kepernyos ajanlatkero (U3) ----------------------------- */
.pg--quote { background: #fff; }
.pq { min-height: 100vh; display: grid; grid-template-columns: 280px minmax(0, 1fr) 360px; }
.pq-trap { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.pq-side { background: var(--mist); padding: 28px 24px; display: flex; flex-direction: column; gap: 28px; position: sticky; top: 0; height: 100vh; }
.pg .pq-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.pq-brand .pg-mark { width: 36px; height: 36px; }
.pq-nav ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pg .pq-nav a { display: flex; align-items: center; min-height: 48px; padding: 12px 16px; border-radius: 12px; color: var(--ink); text-decoration: none; font-size: 18px; font-weight: 500; transition: background-color .15s; }
.pg .pq-nav a:hover { background: #E9EDF5; }
.pg .pq-nav a.is-on { background: var(--blue); color: #fff; font-weight: 600; }
.pq-nav a.is-done::before { content: '\2713'; margin-right: 8px; }
.pq-side__note { margin-top: auto !important; font-size: 16px; line-height: 1.5; color: var(--ink-3); }

.pq-main { padding: clamp(24px, 4vw, 56px); display: flex; flex-direction: column; gap: 40px; min-width: 0; }
.pq-step { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.pq-step + .pq-step { border-top: 2px solid var(--line); padding-top: 40px; }
.pq.is-enhanced .pq-step + .pq-step { border-top: 0; padding-top: 0; }
.pq.is-enhanced .pq-step:not(.is-current) { display: none; }
.pq-step__h { font-size: clamp(32px, 3.4vw, 48px) !important; line-height: 1.08 !important; }
.pq-lead { font-size: 18px; color: var(--ink-2); margin-bottom: 16px !important; }
.pq-packs { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.pq-pack { position: relative; display: flex; flex-direction: column; border: 3px solid var(--line); border-radius: 20px; padding: 24px; cursor: pointer; transition: border-color .15s, background-color .15s; }
.pq-pack:hover { border-color: #C8D7FA; }
.pq-pack input, .pq-extra input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pq-pack:has(input:checked) { background: #EEF3FE; border-color: var(--blue); }
.pq-pack:has(input:focus-visible), .pq-extra:has(input:focus-visible), .pq-term:has(input:focus-visible) { outline: 3px solid var(--blue); outline-offset: 3px; }
.pq-pack__bar { width: 44px; height: 10px; border-radius: 5px; }
.pq-pack__name { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; margin-top: 18px; }
.pq-pack__desc { font-size: 16px; color: var(--ink-3); margin-top: 6px; line-height: 1.4; }
.pq-pack__price { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; margin-top: 20px; }
.pq-pack__setup { font-size: 16px; color: var(--ink-3); }
.pq-group { font-size: 1.125rem; margin: 28px 0 12px; }
.pq-later { list-style: none; padding: 0; margin: 0; }
.pq-extra--later { cursor: default; border-style: dashed; }
.pq-extras { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.pq-extra { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 16px; border: 3px solid var(--line); border-radius: 16px; padding: 18px 20px; cursor: pointer; min-height: 48px; transition: border-color .15s, background-color .15s; }
.pq-extra:hover { border-color: #C8D7FA; }
.pq-extra:has(input:checked) { background: #EEF3FE; border-color: var(--blue); }
.pq-extra__text { display: flex; flex-direction: column; gap: 4px; }
.pq-extra__name { font-size: 18px; font-weight: 600; }
.pq-extra__price { font-size: 16px; color: var(--ink-3); }
.pq-extra__mark span { font-size: 14px; font-weight: 600; white-space: nowrap; padding: 8px 12px; border-radius: 10px; }
.pq-extra__mark .is-add { color: var(--blue-press); background: #EEF3FE; }
.pq-extra__mark .is-added { display: none; color: #fff; background: var(--blue); }
.pq-extra:has(input:checked) .is-add { display: none; }
.pq-extra:has(input:checked) .is-added { display: inline; }
.pq-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; max-width: 680px; }
.pq-field { display: flex; flex-direction: column; gap: 8px; font-size: 16px; font-weight: 500; }
.pq-field input { font: inherit; font-size: 18px; font-weight: 400; padding: 14px 16px; border-radius: 12px; border: 2px solid #D0D5DD; background: #fff; color: var(--ink); min-height: 52px; }
.pq-field input:focus { outline: 3px solid var(--blue); outline-offset: 0; border-color: var(--blue); }
.pq-field input[aria-invalid='true'] { border-color: #B42318; }
.pq-opt { font-weight: 400; color: var(--ink-3); }
.pq-err { color: #B42318; font-size: 16px; }
.pq-alert { background: #FEF3F2; color: #912018; padding: 14px 18px; border-radius: 12px; font-weight: 500; }
.pq-note { font-size: 16px; color: var(--ink-3); max-width: 680px; }
.pq-terms { display: flex; flex-direction: column; gap: 14px; max-width: 680px; }
.pq-term { display: flex; gap: 14px; align-items: flex-start; font-size: 18px; line-height: 1.45; background: var(--mist); padding: 18px 20px; border-radius: 14px; cursor: pointer; }
.pq-term input { width: 24px; height: 24px; margin-top: 2px; accent-color: var(--blue); flex: none; }
.pq-move { display: flex; flex-wrap: wrap; gap: 12px; margin-top: auto; }
.pq.is-enhanced .pq-move [data-submit][hidden] { display: none; }

.pq-sum { background: var(--ink); color: #fff; padding: 32px 28px; display: flex; flex-direction: column; gap: 22px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.pq-sum__h { font-size: 22px !important; letter-spacing: -0.01em !important; }
.pq-period { border: 0; margin: 0; padding: 6px; display: flex; gap: 6px; background: #1D2939; border-radius: 12px; }
.pq-period label { flex: 1; position: relative; }
.pq-period input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.pq-period span { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 10px; border-radius: 8px; font-size: 14px; font-weight: 600; color: #D0D5DD; text-align: center; }
.pq-period input:checked + span { background: #fff; color: var(--ink); }
.pq-period input:focus-visible + span { outline: 3px solid var(--blue-corner); outline-offset: 2px; }
.pq-lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.pq-lines li { display: flex; justify-content: space-between; gap: 16px; font-size: 16px; }
.pq-lines li span:last-child { text-align: right; color: #D0D5DD; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pq-totals { background: #1D2939; border-radius: 16px; padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.pq-totals p { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.pq-totals span { font-size: 16px; color: #D0D5DD; }
.pq-totals strong { font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pq-green { color: var(--green-corner); }
.pq-vat { font-size: 14px; color: #98A2B3; }
.pg .pq-copy { background: var(--yellow-corner); color: var(--ink); }
.pg .pq-copy:hover { background: var(--yellow); color: var(--ink); }

/* ---- tablet, telefon ------------------------------------------------- */
@media (max-width: 1100px) {
    .pq { grid-template-columns: 240px minmax(0, 1fr); }
    .pq-sum { grid-column: 1 / -1; position: static; height: auto; }
    .pg-packages { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
    .pg-steps, .pg-dark__grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}
@media (max-width: 900px) {
    .pg-head__nav { display: none; }
    .pg-head__end { margin-left: auto; }
    .pg-then, .pg-show, .pg-split, .pg-thanks__in { grid-template-columns: minmax(0, 1fr); }
    .pg-show__pic picture { aspect-ratio: 4 / 3; }
    .pg-incl { grid-template-columns: minmax(0, 1fr); }
    .pg-foot { grid-template-columns: minmax(0, 1fr); align-items: start; }
    .pg-foot__legal { align-items: flex-start; text-align: left; }
    .pg-foot__marks { justify-content: flex-start; }
    .pq { grid-template-columns: minmax(0, 1fr); }
    .pq-side { position: static; height: auto; padding: 16px; gap: 12px; }
    .pq-nav ol { flex-direction: row; overflow-x: auto; gap: 4px; }
    .pg .pq-nav a { white-space: nowrap; font-size: 16px; padding: 10px 12px; }
    .pq-side__note { display: none; }
    .pq-main { padding: 24px 16px; }
    .pq-sum { padding: 24px 16px; }
}
@media (max-width: 640px) {
    .pg-logo { --n: 34px; }
    .pg-logo__motto { display: none; }
    .pg-head { padding-top: 14px; padding-bottom: 14px; }
    .pg-head__cta { display: none; }
    .pg-pack:hover { transform: none; }
    .pgui { grid-template-columns: minmax(0, 1fr); }
    .pgui__side ul { display: none; }
    .pgui__row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}

/* ---- mozgas: belepes szakaszonkent (csak JS-sel, tartalom sosem marad rejtve) ---- */
/* Csak helyzet, atlatszosag NELKUL: a meg be nem usztatott tartalom is latszik (egy meres, egy lassu gep, egy hibas IO mellett is). */
.js-reveal [data-reveal] { transform: translateY(24px); transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.js-reveal [data-reveal].is-in { transform: none; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .pg-page, .pg-l, .pg-io, .pg-logo__motto, .pg-art { animation-duration: 0s !important; animation-delay: 0s !important; }
    .js-reveal [data-reveal] { opacity: 1; transform: none; transition: none; }
    .pg-btn, .pg-pack, .pq-pack, .pq-extra { transition: none; }
}

[hidden] { display: none !important; }

/* ---- a nyomda-video, a regi nyomda, az ajanlat-osszegzes reszlete ---- */
.pg-video { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 24px; background: #1D2939; display: block; }
.pg-split__pic { margin: 24px 0 0; display: flex; flex-direction: column; gap: 12px; }
.pg-split__pic picture { border-radius: 20px; overflow: hidden; aspect-ratio: 3 / 2; display: block; }
.pg-split__pic img { width: 100%; height: 100%; object-fit: cover; }
.pg-split__pic figcaption { font-size: 16px; color: var(--ink-3); }
.pg-close__in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: center; }
.pg-close__text { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; }
.pg-close__ui { margin: 0; }
.pqui { background: var(--ink); color: #fff; border-radius: 24px; padding: 28px; display: flex; flex-direction: column; gap: 16px; font-size: 16px; }
.pqui p { margin: 0; }
.pqui__h { font-size: 22px; font-weight: 700; }
.pqui__seg { display: flex; gap: 6px; background: #1D2939; padding: 6px; border-radius: 12px; }
.pqui__seg span { flex: 1; text-align: center; padding: 10px; border-radius: 8px; font-size: 14px; font-weight: 600; color: #D0D5DD; }
.pqui__seg .is-on { background: #fff; color: var(--ink); }
.pqui__line { display: flex; justify-content: space-between; gap: 16px; }
.pqui__line span:last-child { color: #D0D5DD; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pqui__tot { background: #1D2939; border-radius: 16px; padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.pqui__tot p { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; color: #D0D5DD; }
.pqui__tot strong { font-size: 28px; color: #fff; font-variant-numeric: tabular-nums; }
.pqui__tot strong.pq-green { color: var(--green-corner); }
@media (max-width: 900px) {
    .pg-close__in { grid-template-columns: minmax(0, 1fr); }
    .pg-video { aspect-ratio: 16 / 10; }
    .pg-dark { padding: 28px 22px; }
}

/* ---- telefonos menu (details) ---------------------------------------- */
.pg-menu { display: none; position: relative; }
.pg-menu summary { list-style: none; }
.pg-menu summary::-webkit-details-marker { display: none; }
.pg-menu__list { position: absolute; right: 0; top: calc(100% + 8px); z-index: 20; min-width: 240px; background: #fff; border-radius: 16px; padding: 10px; display: flex; flex-direction: column; gap: 2px; background: var(--mist); }
.pg .pg-menu__list a:not(.pg-btn) { display: flex; align-items: center; min-height: 48px; padding: 0 12px; border-radius: 10px; color: var(--ink); text-decoration: none; font-weight: 500; }
.pg .pg-menu__list a:not(.pg-btn):hover { background: var(--mist); }
.pg-menu__list .pg-btn { margin-top: 6px; }
.pg-incl { align-content: start; }
@media (max-width: 1100px) { .pg-packages { max-width: none; } }
@media (max-width: 900px) { .pg-menu { display: block; } }

/* A kozos <x-quotes::money-lines /> a koszonjuk-lapon: egyszeri + havonta/evente, kulon sorban. */
.pq-totals--dl { margin: 0; }
.pq-totals--dl .quotes-money__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.pq-totals--dl dt { font-size: 16px; color: #D0D5DD; }
.pq-totals--dl dd { margin: 0; font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pq-totals--dl .quotes-money__row--monthly dd, .pq-totals--dl .quotes-money__row--yearly dd { color: var(--green-corner); }

/* ---- a hoszting-lepes: csuszkak es kapcsolok ------------------------------------ */
.pq-slider { display: flex; flex-direction: column; gap: 10px; max-width: 680px; padding: 22px 24px; background: var(--mist); border-radius: 16px; }
.pq-slider + .pq-slider { margin-top: 14px; }
.pq-slider label { font-size: 18px; font-weight: 600; }
.pq-slider input[type='range'] { width: 100%; height: 44px; margin: 0; accent-color: var(--blue); cursor: pointer; background: transparent; }
.pq-slider input[type='range']:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; border-radius: 8px; }
.pq-slider__scale { display: flex; justify-content: space-between; font-size: 14px; color: var(--ink-3); margin-top: -6px !important; }
.pq-slider__out { font-size: 18px; line-height: 1.45; color: var(--ink); }
.pq-toggles { display: flex; flex-direction: column; gap: 14px; max-width: 680px; margin-top: 14px; }
.pq-toggle { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: start; border: 3px solid var(--line); border-radius: 16px; padding: 18px 20px; cursor: pointer; transition: border-color .15s, background-color .15s; }
.pq-toggle:hover { border-color: #C8D7FA; }
.pq-toggle:has(input:checked) { background: #EEF3FE; border-color: var(--blue); }
.pq-toggle:has(input:focus-visible) { outline: 3px solid var(--blue); outline-offset: 3px; }
.pq-toggle input { width: 24px; height: 24px; margin: 2px 0 0; accent-color: var(--blue); }
.pq-toggle__text { display: flex; flex-direction: column; gap: 4px; }
.pq-toggle__name { font-size: 18px; font-weight: 600; }
.pq-toggle__desc { font-size: 16px; color: var(--ink-3); }
.pq-toggle__rec { font-size: 14px; font-weight: 600; color: var(--green-text); }
.pq-toggle__price { font-size: 16px; font-weight: 600; white-space: nowrap; }
@media (max-width: 640px) {
    .pq-toggle { grid-template-columns: auto minmax(0, 1fr); }
    .pq-toggle__price { grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) { .pq-toggle { transition: none; } }

/* Az ajanlatkero cime az oldalsavban (app-meret), es az osszegzes a tartalmahoz igazodo, ragado kartya. */
.pg .pq-title { font-size: 22px; line-height: 1.25; letter-spacing: -0.01em; font-weight: 700; margin-top: -8px; }
.pq { align-items: start; }
.pq-sum { height: auto; max-height: calc(100vh - 32px); margin: 16px 16px 16px 0; border-radius: 24px; top: 16px; }
@media (max-width: 1100px) { .pq-sum { margin: 0 16px 16px; max-height: none; } }
@media (max-width: 900px) { .pq-sum { margin: 0; border-radius: 0; } .pg .pq-title { margin-top: 0; font-size: 20px; } }

/* ===== TOBB TARTALOM, INTERAKTIVABBAN (2026-11-07) ===================================== */

/* -- 1-2. elo proba a heroban: nev + csomag-fulek, mellette a mini oldal (data-ui) -- */
.pgtry { width: 100%; max-width: 520px; display: flex; flex-direction: column; gap: 18px; }
.pgtry__ctl { display: flex; flex-direction: column; gap: 8px; }
.pgtry__ctl > label { font-size: 16px; font-weight: 600; }
.pgtry__ctl input[type='text'] { font: inherit; font-size: 18px; padding: 12px 16px; min-height: 52px; border: 2px solid #D0D5DD; border-radius: 12px; color: var(--ink); background: #fff; }
.pgtry__ctl input[type='text']:focus { outline: 3px solid var(--blue); outline-offset: 0; border-color: var(--blue); }
.pgtry__hint { font-size: 14px; color: var(--ink-3); }
.pgtry__tabs { border: 0; margin: 6px 0 0; padding: 4px; display: flex; gap: 4px; background: var(--soft); border-radius: 12px; }
.pgtry__tab { flex: 1; position: relative; }
.pgtry__tab input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.pgtry__tab span { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 44px; padding: 6px 8px; border-radius: 9px; font-size: 14px; font-weight: 600; color: var(--ink-3); }
.pgtry__tab input:checked + span { background: #fff; color: var(--ink); }
.pgtry__tab input:focus-visible + span { outline: 3px solid var(--blue); outline-offset: 2px; }
.pgtry__fig { margin: 0; }
.pgsite { --acc: #2F6FEB; --acc-ink: #fff; border-radius: 18px; overflow: hidden; background: #fff; border: 1px solid var(--line); font-size: 14px; color: var(--ink); }
.pgtry:has(#try-jelenlet:checked) .pgsite { --acc: #F4B13E; --acc-ink: #101828; }
.pgtry:has(#try-bolt:checked) .pgsite { --acc: #1FB86A; --acc-ink: #101828; }
.pgsite__bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.pgsite__brand { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 15px; }
.pgsite__brand b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pgsite__dot { width: 14px; height: 14px; border-radius: 4px; background: var(--acc); flex: none; transition: background-color .3s; }
.pgsite__nav { display: flex; gap: 12px; color: var(--ink-3); font-size: 14px; }
.pgsite__hero { background: var(--acc); color: var(--acc-ink); padding: 22px 16px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; transition: background-color .3s, color .3s; }
.pgsite__h { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; overflow-wrap: anywhere; }
.pgsite__btn { display: inline-flex; padding: 8px 14px; border-radius: 10px; background: var(--ink); color: #fff; font-weight: 600; font-size: 14px; }
.pgsite__hero .pgsite__btn { background: var(--acc-ink); color: var(--acc); }
.pgsite__body { display: none; padding: 16px; flex-direction: column; gap: 10px; min-height: 172px; }
.pgtry:has(#try-jelenlet:checked) .pgsite__body--jelenlet, .pgtry:has(#try-erdeklodo:checked) .pgsite__body--erdeklodo, .pgtry:has(#try-bolt:checked) .pgsite__body--bolt { display: flex; }
.pgsite__t { font-weight: 700; font-size: 16px; }
.pgsite__gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.pgsite__gallery i { aspect-ratio: 1; border-radius: 8px; background: var(--mist); display: block; }
.pgsite__gallery i:nth-child(2) { background: #E3ECFD; } .pgsite__gallery i:nth-child(3) { background: #FDF0D5; } .pgsite__gallery i:nth-child(4) { background: #D8F3E5; }
.pgsite__map { display: flex; justify-content: space-between; gap: 12px; padding: 12px; border-radius: 10px; background: var(--mist); color: var(--ink-2); }
.pgsite__field { display: block; padding: 10px 12px; border: 1px solid #D0D5DD; border-radius: 8px; color: var(--ink-3); }
.pgsite__field--tall { min-height: 56px; }
.pgsite__products { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pgsite__product { display: flex; flex-direction: column; gap: 6px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; }
.pgsite__product i { aspect-ratio: 4 / 3; border-radius: 8px; background: #D8F3E5; display: block; }
.pgsite__product .pgsite__btn { background: var(--acc); color: var(--acc-ink); align-self: flex-start; }

/* -- 4. ar-csuszka a landingon -- */
.pg-calc { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: start; }
.pg-calc__head { display: flex; flex-direction: column; gap: 16px; }
.pg-calc__box { background: var(--mist); border-radius: 24px; padding: clamp(22px, 3vw, 36px); display: flex; flex-direction: column; gap: 14px; }
.pg-calc__packs { border: 0; margin: 0; padding: 4px; display: flex; gap: 4px; background: #fff; border-radius: 12px; }
.pg-calc__pack { flex: 1; position: relative; }
.pg-calc__pack input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.pg-calc__pack span { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 48px; padding: 6px 8px; border-radius: 9px; font-size: 16px; font-weight: 600; color: var(--ink-3); border-bottom: 4px solid transparent; }
.pg-calc__pack input:checked + span { color: var(--ink); background: var(--mist); border-bottom-color: var(--pack); }
.pg-calc__pack input:focus-visible + span { outline: 3px solid var(--blue); outline-offset: 2px; }
.pg-calc__label { font-size: 18px; font-weight: 600; margin-top: 8px; }
.pg-calc__box input[type='range'] { width: 100%; height: 44px; margin: 0; accent-color: var(--blue); cursor: pointer; }
.pg-calc__box input[type='range']:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; border-radius: 8px; }
.pg-calc__sentence { font-size: 18px; }
.pg-calc__result { display: flex; flex-direction: column; gap: 2px; padding-top: 14px; border-top: 2px solid #E4E7EC; }
.pg-calc__result p:first-child { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 18px; }
.pg-calc__result strong { font-size: 48px; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.pg-calc__setup { font-size: 16px; color: var(--ink-3); text-align: right; }
.pg-calc__box .pg-btn { align-self: flex-start; }

/* -- 3. „Pentru cine": radio-chipek + a valasztott panel (JS nelkul is) -- */
.pg-who { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; align-items: start; }
.pg-who__chips { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.pg-who__chip { position: relative; }
.pg-who__chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.pg-who__chip span { display: inline-flex; align-items: center; min-height: 48px; padding: 10px 18px; border-radius: 999px; background: #fff; font-size: 18px; font-weight: 500; transition: background-color .15s, color .15s; }
.pg-who__chip:hover span { background: var(--blue-soft); }
.pg-who__chip input:checked + span { background: var(--ink); color: #fff; }
.pg-who__chip input:focus-visible + span { outline: 3px solid var(--blue); outline-offset: 2px; }
.pg-who__panel { display: none; background: #fff; border-radius: 24px; padding: 28px; flex-direction: column; gap: 18px; }
.pg-who:has(input[value='producator']:checked) [data-who='producator'], .pg-who:has(input[value='evenimente']:checked) [data-who='evenimente'],
.pg-who:has(input[value='cabinet']:checked) [data-who='cabinet'], .pg-who:has(input[value='horeca']:checked) [data-who='horeca'],
.pg-who:has(input[value='ferma']:checked) [data-who='ferma'], .pg-who:has(input[value='turism']:checked) [data-who='turism'],
.pg-who:has(input[value='instalator']:checked) [data-who='instalator'], .pg-who:has(input[value='portofoliu']:checked) [data-who='portofoliu'] { display: flex; }
.pg .pg-who__type { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
.pg-who__panel dl { margin: 0; display: flex; flex-direction: column; gap: 14px; }
.pg-who__panel dt { font-size: 16px; color: var(--ink-3); }
.pg-who__panel dd { margin: 4px 0 0; font-size: 18px; }
.pg-who__panel ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.pg-who__panel ul span { color: var(--ink-3); }
.pg-who__pkg { font-weight: 700; border-bottom: 4px solid var(--pack); }
.pg-who__panel .pg-btn { align-self: flex-start; }

/* -- 5. idovonal -- */
.pg-timeline { list-style: none; margin: 0; padding: 0 0 0 28px; position: relative; display: flex; flex-direction: column; gap: 30px; }
.pg-timeline::before { content: ''; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 3px; border-radius: 2px; background: #E4E7EC; }
.pg-timeline__item { position: relative; display: flex; flex-direction: column; gap: 4px; }
.pg-timeline__item::before { content: ''; position: absolute; left: -28px; top: 6px; width: 17px; height: 17px; border-radius: 50%; background: var(--blue); }
.pg-timeline__item--0::before { background: var(--yellow); } .pg-timeline__item--2::before { background: var(--green); }
.pg .pg-timeline__when { font-size: 16px; font-weight: 600; color: var(--ink-3); }
.pg .pg-timeline__what { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
.pg-timeline__text { font-size: 18px; color: var(--ink-2); }

/* -- 6. osszevetes (valodi tablazat) -- */
.pg-compare__scroll { overflow-x: auto; }
.pg-compare { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 18px; }
.pg-compare th, .pg-compare td { text-align: left; vertical-align: top; padding: 18px 20px; border-bottom: 1px solid #E4E7EC; }
.pg-compare thead th { font-size: 18px; font-weight: 700; }
.pg-compare tbody th { font-weight: 600; width: 22%; }
.pg-compare td { color: var(--ink-2); }
.pg-compare .is-us { background: #EEF3FE; color: var(--ink); font-weight: 600; }
.pg-compare thead .is-us { border-radius: 16px 16px 0 0; color: var(--blue-press); }

/* -- 7. GYIK -- */
.pg-faq { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; }
.pg-faq__list { display: flex; flex-direction: column; gap: 10px; }
.pg-faq__item { background: var(--mist); border-radius: 16px; }
.pg-faq__item summary { list-style: none; cursor: pointer; padding: 18px 54px 18px 22px; font-size: 18px; font-weight: 600; position: relative; min-height: 48px; }
.pg-faq__item summary::-webkit-details-marker { display: none; }
.pg-faq__item summary::after { content: '+'; position: absolute; right: 22px; top: 50%; transform: translateY(-50%); font-size: 26px; font-weight: 500; color: var(--blue); transition: transform .2s; }
.pg-faq__item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.pg-faq__item summary:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 16px; }
.pg-faq__item p { padding: 0 22px 20px; font-size: 18px; color: var(--ink-2); max-width: 64ch; }

/* -- 8. mikro-mozgas: a csomagkartya ramutatasra szint valt (arnyek nelkul), a lapok raesnek a cimekre -- */
.pg-pack__body { transition: background-color .2s; }
.pg-pack--jelenlet:hover .pg-pack__body { background: #FFFBF2; }
.pg-pack--erdeklodo:hover .pg-pack__body { background: #F6F9FF; }
.pg-pack--bolt:hover .pg-pack__body { background: #F4FBF7; }
.pg-hmark { display: inline-block; width: .62em; height: .62em; margin-right: .22em; vertical-align: .02em; overflow: visible; }
.js-reveal .pg-hmark .pg-page { animation: none; visibility: hidden; }
.js-reveal .is-in .pg-hmark .pg-page, .js-reveal .pg-hmark.is-in .pg-page { visibility: visible; animation: pg-drop .46s cubic-bezier(.2, .75, .3, 1.2) both; }
.js-reveal .is-in .pg-hmark .pg-p1, .js-reveal .pg-hmark.is-in .pg-p1 { animation-delay: .05s; }
.js-reveal .is-in .pg-hmark .pg-p2, .js-reveal .pg-hmark.is-in .pg-p2 { animation-delay: .25s; }
.js-reveal .is-in .pg-hmark .pg-p3, .js-reveal .pg-hmark.is-in .pg-p3 { animation-delay: .45s; }

@media (max-width: 1100px) { .pg-calc, .pg-who, .pg-faq { grid-template-columns: minmax(0, 1fr); gap: 28px; } }
@media (max-width: 640px) {
    .pgsite__nav { display: none; }
    .pg-calc__result strong { font-size: 40px; }
    .pg-timeline__what { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
    .pgsite__dot, .pgsite__hero, .pg-pack__body, .pg-who__chip span, .pg-faq__item summary::after { transition: none; }
    .js-reveal .pg-hmark .pg-page { visibility: visible !important; animation: none !important; }
}

/* A diszkret „Belepes" a fejlecben (admin es ugyfel; a /belepes terel). */
.pg .pg-head__nav .pg-head__login { color: var(--ink-3); }
.pg .pg-head__nav .pg-head__login:hover { color: var(--ink); }

/* ---- ar: promocio (athuzott eredeti + promocios) es „ingyenes" cimke (Admin -> Arak, 2026-11-07) ---- */
.pg-was s { color: var(--ink-3); font-weight: 500; font-size: .62em; text-decoration-thickness: 2px; margin-right: .15em; }
.pq-pack__setup .pg-was s, .pg-pack__setup .pg-was s, .pq-extra__price .pg-was s, .pg-who__panel .pg-was s, .pq-toggle__price .pg-was s { font-size: 1em; }
.pg-promo { color: var(--green-text); }
.pg-free { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px; background: var(--green-soft); color: #06301B; font-weight: 600; font-size: .9em; }
.pg-pack__price .pg-free { font-size: .5em; vertical-align: middle; }