/* =========================================================================
   PROFIDENT — KAMPÁNY LANDING
   =========================================================================
   Kizárólag a design-tokens.css változóit használja.

   VEZÉRELV: az oldal ígérete az írásos, tételes kezelési terv. Ez a dokumentum
   a vizuális gerinc — az ártáblázat egy papírlap sötét alapon, szaggatott
   tételsorokkal és jobbra zárt mono számoszloppal. Ez az egyetlen hely, ahová
   a merészség megy; minden más szekció köré fegyelem kerül.

   MÁSODIK VEZÉRELV: nincs két szekció ugyanazzal a szerkezettel. Minden
   szekció olyan elrendezést kap, ami a saját tartalmáról mond valamit
   (elágazás, változás-főkönyv, arányos fizetési sín, karusszel), és a
   háttértónusok fejezetekre bontják az oldalt.

   Osztálynévrend: .pf-<blokk>__<elem>--<módosító>
   ========================================================================= */

/* -------------------------------------------------------------------------
   0. ALAPOK
   ---------------------------------------------------------------------- */

/* A landingnek saját fejléce és saját ragadós CTA-ja van. */
.pf-landing .site-header,
.pf-landing .call-us,
.pf-landing .mobile-menu-wrapper {
  display: none !important;
}

.pf-landing {
  background: var(--pf-surface);
  color: var(--pf-ink);
  font-family: var(--pf-font-body);
  font-size: var(--pf-text-base);
  line-height: var(--pf-leading-body);
  -webkit-font-smoothing: antialiased;
  padding-bottom: env(safe-area-inset-bottom);
}

/* A menüből (és minden #anchor linkből) simán, ne ugorva kerüljünk a
   szekcióhoz — a scroll-padding-top a ragadós topbar alá tolja a célpontot.
   (Ez a CSS csak a landing oldalon töltődik be, ezért nyugodtan a html-re
   kerülhet, nem kell .pf-landing-hez kötni.) */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* A téma `p, address { color }` és `li { color }` elemszelektorai erősebbek az
   öröklésnél, ezért a színes hátterű sávokban sötét szöveget okoznának. A
   :where() nulla specificitása miatt ez a visszaállítás nem üti felül a
   lentebbi, szándékos színbeállításokat. */
.pf-landing :where(p, address, li, dt, dd, blockquote) {
  color: inherit;
}

.pf-landing p {
  font-size: inherit;
}

.pf-main {
  overflow-x: clip;
}

.pf-container {
  width: 100%;
  max-width: var(--pf-container);
  margin-inline: auto;
  padding-inline: var(--pf-gutter);
}

.pf-container--narrow {
  max-width: var(--pf-container-narrow);
}

.pf-section {
  padding-block: var(--pf-section-y);
}

/* --- Szekciócímek ------------------------------------------------------ */

.pf-section__title {
  font-family: var(--pf-font-head);
  font-weight: var(--pf-fw-black);
  font-size: var(--pf-h2);
  line-height: 1.05;
  letter-spacing: var(--pf-tracking-display);
  color: var(--pf-primary-text);
  margin: 0 0 var(--pf-space-sm);
  max-width: 20ch;
  text-wrap: balance;
}

.pf-section__lead {
  font-size: var(--pf-text-lg);
  max-width: 58ch;
  margin: 0 0 var(--pf-space-lg);
}

.pf-section__title--invert { color: var(--pf-white); }
.pf-section__lead--invert { color: rgba(254, 254, 254, 0.86); }

.pf-eyebrow {
  font-size: var(--pf-text-sm);
  font-weight: var(--pf-fw-medium);
  letter-spacing: var(--pf-tracking-caps);
  text-transform: uppercase;
  color: var(--pf-primary-text);
  margin: 0 0 var(--pf-space-xs);
}

.pf-fineprint {
  font-size: var(--pf-text-sm);
  color: var(--pf-ink-muted);
  max-width: 78ch;
  margin-top: var(--pf-space-md);
}

.pf-fineprint--invert { color: rgba(254, 254, 254, 0.72); }

/* Kitöltetlen, ügyféltől bekérendő adat — élesítés előtt nem maradhat.

   A méret és a betűtípus szándékosan FIX, nem öröklődik. A helyőrző a
   csapatnak szóló jegyzet: legyen feltűnő, de soha ne kapja meg a valódi
   tartalom vizuális súlyát. Enélkül egy kijelző-méretű árban 46 pontos piros
   szövegblokként jelenne meg, és széttörné a szekció elrendezését. */
.pf-todo {
  display: inline;
  background: #ffe9e5;
  color: var(--pf-cta);
  font-family: var(--pf-font-body);
  font-size: var(--pf-text-sm);
  font-weight: var(--pf-fw-bold);
  font-style: normal;
  line-height: 1.45;
  letter-spacing: 0;
  text-transform: none;
  border-bottom: 2px dashed var(--pf-cta);
  padding: 0.05em 0.3em;
  border-radius: 3px;
}

.pf-skip-link {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.pf-skip-link:focus {
  width: auto;
  height: auto;
  clip-path: none;
  left: var(--pf-gutter);
  top: var(--pf-space-xs);
  z-index: 1000;
  background: var(--pf-white);
  color: var(--pf-primary-text);
  padding: var(--pf-space-xs) var(--pf-space-sm);
  border-radius: var(--pf-radius-md);
  box-shadow: var(--pf-shadow-md);
}

.pf-landing :focus-visible {
  outline: 3px solid var(--pf-cta);
  outline-offset: 3px;
  border-radius: 2px;
}

/* -------------------------------------------------------------------------
   1. GOMBOK ÉS LINKEK
   ---------------------------------------------------------------------- */

.pf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: var(--pf-tap-target);
  padding: var(--pf-btn-padding-y) var(--pf-btn-padding-x);
  border: 0;
  border-radius: var(--pf-btn-radius);
  background: var(--pf-cta);
  color: var(--pf-white);
  font-family: var(--pf-btn-font);
  font-weight: var(--pf-btn-weight);
  font-size: var(--pf-text-base);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--pf-duration) var(--pf-ease),
              transform var(--pf-duration) var(--pf-ease);
}

.pf-btn:hover,
.pf-btn:focus {
  background: var(--pf-cta-hover);
  color: var(--pf-white);
  text-decoration: none;
}

.pf-btn:active { transform: translateY(1px); }

.pf-btn--lg { font-size: var(--pf-text-lg); }
.pf-btn--sm { font-size: var(--pf-text-sm); padding: 0.6em 1.4em; }
.pf-btn--block { width: 100%; }

.pf-btn--ghost {
  background: transparent;
  color: var(--pf-primary-text);
  box-shadow: inset 0 0 0 2px currentColor;
}

.pf-btn--ghost:hover,
.pf-btn--ghost:focus {
  background: var(--pf-primary-deep);
  color: var(--pf-white);
  box-shadow: none;
}

.pf-btn--dark {
  background: var(--pf-primary-abyss);
  color: var(--pf-white);
}

.pf-btn--dark:hover,
.pf-btn--dark:focus { background: var(--pf-black); color: var(--pf-white); }

.pf-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  min-height: var(--pf-tap-target);
  font-family: var(--pf-font-head);
  font-weight: var(--pf-fw-bold);
  color: var(--pf-cta);
  text-decoration: none;
}

.pf-link-arrow::after {
  content: "\2192";
  transition: transform var(--pf-duration) var(--pf-ease);
}

.pf-link-arrow:hover::after { transform: translateX(0.3em); }

.pf-icon-phone::before {
  content: "\260E";
  font-size: 1.1em;
}

/* -------------------------------------------------------------------------
   2. FEJLÉC
   ---------------------------------------------------------------------- */

.pf-topbar {
  position: sticky;
  top: 0;
  z-index: var(--pf-z-topbar);
  background: rgba(254, 254, 254, 0.96);
  backdrop-filter: blur(8px);
  border-bottom: var(--pf-border-width) solid var(--pf-border-soft);
}

.pf-topbar__inner {
  display: flex;
  align-items: center;
  gap: var(--pf-space-md);
  min-height: 64px;
}

.pf-topbar__logo img {
  display: block;
  width: auto;
  height: 34px;
}

.pf-topbar__nav {
  margin-inline: auto;
  display: none;
}

.pf-topbar__nav ul {
  display: flex;
  gap: var(--pf-space-md);
  list-style: none;
  margin: 0;
  padding: 0;
}

.pf-topbar__nav a {
  position: relative;
  font-size: var(--pf-text-sm);
  font-weight: var(--pf-fw-medium);
  color: var(--pf-ink);
  text-decoration: none;
  white-space: nowrap;
}

.pf-topbar__nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -4px;
  height: 2px;
  background: var(--pf-cta);
  transition: right var(--pf-duration) var(--pf-ease);
}

.pf-topbar__nav a:hover::after,
.pf-topbar__nav a:focus::after { right: 0; }

.pf-topbar__actions {
  display: flex;
  align-items: center;
  gap: var(--pf-space-xs);
  margin-left: auto;
}

.pf-topbar__phone {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  min-height: var(--pf-tap-target);
  font-weight: var(--pf-fw-bold);
  font-size: var(--pf-text-base);
  color: var(--pf-primary-text);
  text-decoration: none;
  white-space: nowrap;
}

.pf-topbar__phone span:last-child { display: none; }
.pf-topbar .pf-btn { display: none; }

.pf-topbar__burger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: var(--pf-tap-target);
  height: var(--pf-tap-target);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.pf-topbar__burger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--pf-ink);
  border-radius: 2px;
}

@media (min-width: 48em) {
  .pf-topbar__phone span:last-child { display: inline; }
  .pf-topbar .pf-btn { display: inline-flex; }
}

@media (min-width: 64em) {
  .pf-topbar__nav { display: block; }
  .pf-topbar__logo img { height: 40px; }
  .pf-topbar__burger { display: none; }
}

/* -------------------------------------------------------------------------
   2b. MOBIL MENÜ — a topbar navigáció off-canvas változata kis képernyőn.
   ---------------------------------------------------------------------- */

.pf-mobile-menu {
  position: fixed;
  inset: 0;
  z-index: var(--pf-z-modal);
  visibility: hidden;
}

.pf-mobile-menu.is-open { visibility: visible; }

.pf-mobile-menu__overlay {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, 0.56);
  opacity: 0;
  transition: opacity var(--pf-duration) var(--pf-ease);
}

.pf-mobile-menu.is-open .pf-mobile-menu__overlay { opacity: 1; }

.pf-mobile-menu__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(80vw, 320px);
  display: flex;
  flex-direction: column;
  gap: var(--pf-space-md);
  padding: var(--pf-space-xl) var(--pf-space-md) var(--pf-space-md);
  background: var(--pf-white);
  box-shadow: var(--pf-shadow-lg);
  transform: translateX(100%);
  transition: transform var(--pf-duration) var(--pf-ease);
}

.pf-mobile-menu.is-open .pf-mobile-menu__panel { transform: translateX(0); }

.pf-mobile-menu__close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 0;
  border-radius: 999px;
  background: var(--pf-bg-muted, rgba(10, 10, 10, 0.06));
  color: var(--pf-primary-text);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.pf-mobile-menu__panel ul {
  display: flex;
  flex-direction: column;
  gap: var(--pf-space-xs);
  list-style: none;
  margin: 0;
  padding: 0;
}

.pf-mobile-menu__panel a {
  display: block;
  min-height: var(--pf-tap-target);
  display: flex;
  align-items: center;
  font-size: var(--pf-text-lg);
  font-weight: var(--pf-fw-medium);
  color: var(--pf-ink);
  text-decoration: none;
}

.pf-mobile-menu__panel .pf-btn { display: inline-flex; }

@media (min-width: 64em) {
  .pf-mobile-menu { display: none; }
}

/* -------------------------------------------------------------------------
   3. HERO
   ---------------------------------------------------------------------- */

/* Letisztult klinikai nyitókép: a nyugodt színfelület és a nagy, emberközeli
   fotó viszi a vizuális súlyt. Az ígéret, a CTA és a bizalmi jelek külön
   rétegek, ezért a hero néhány másodperc alatt átfutható. */
.pf-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 88% 12%, rgba(132, 186, 185, 0.18), transparent 30rem),
    linear-gradient(135deg, var(--pf-primary-abyss) 0%, var(--pf-primary-deep) 58%, var(--pf-primary-dark) 100%);
}

.pf-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 22rem;
  height: 22rem;
  left: -12rem;
  bottom: -14rem;
  border: 1px solid rgba(254, 254, 254, 0.1);
  border-radius: 50%;
  box-shadow: 0 0 0 4rem rgba(254, 254, 254, 0.018),
              0 0 0 8rem rgba(254, 254, 254, 0.012);
}

.pf-hero__inner {
  display: grid;
  box-sizing: border-box;
  min-width: 0;
  gap: var(--pf-space-lg);
  padding-block: clamp(2.8rem, 6vw, 5.6rem) var(--pf-space-lg);
}

.pf-hero__content {
  align-self: center;
  min-width: 0;
  max-width: 44rem;
}

.pf-hero .pf-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  max-width: 100%;
  margin: 0 0 var(--pf-space-sm);
  padding: 0.52rem 0.9rem;
  border: 1px solid rgba(254, 254, 254, 0.22);
  border-radius: var(--pf-radius-pill);
  background: rgba(254, 254, 254, 0.08);
  color: var(--pf-white);
  font-size: var(--pf-text-xs);
  font-weight: var(--pf-fw-bold);
  line-height: var(--pf-leading-snug);
  letter-spacing: 0.055em;
  white-space: normal;
  backdrop-filter: blur(8px);
}

.pf-hero .pf-eyebrow > span {
  width: 0.55rem;
  height: 0.55rem;
  flex: none;
  border-radius: 50%;
  background: var(--pf-cta);
  box-shadow: 0 0 0 0.3rem rgba(178, 42, 17, 0.1);
}

.pf-hero__title {
  max-width: 19ch;
  margin: 0 0 var(--pf-space-sm);
  color: var(--pf-white);
  font-family: var(--pf-font-head);
  font-size: clamp(2.15rem, 4.35vw, 3.7rem);
  font-weight: var(--pf-fw-black);
  line-height: 1.01;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

.pf-hero__lead {
  max-width: 58ch;
  color: rgba(254, 254, 254, 0.82);
  font-size: var(--pf-text-lg);
  line-height: 1.62;
}

.pf-hero__lead p { margin: 0; }
.pf-hero__lead strong { color: var(--pf-white); }

.pf-hero__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--pf-space-sm);
  margin-top: var(--pf-space-md);
}

.pf-hero__actions .pf-btn {
  box-sizing: border-box;
  width: 100%;
  min-height: 3.75rem;
  padding-inline: 1.6rem;
  box-shadow: 0 0.75rem 1.8rem rgba(178, 42, 17, 0.2);
}

.pf-hero__button-arrow {
  font-size: 1.35em;
  line-height: 0;
  transition: transform var(--pf-duration) var(--pf-ease);
}

.pf-hero__actions .pf-btn:hover .pf-hero__button-arrow,
.pf-hero__actions .pf-btn:focus .pf-hero__button-arrow { transform: translateX(0.25rem); }

.pf-hero__text-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--pf-tap-target);
  color: var(--pf-white);
  font-size: var(--pf-text-sm);
  font-weight: var(--pf-fw-bold);
  text-decoration: underline;
  text-decoration-color: rgba(254, 254, 254, 0.38);
  text-underline-offset: 0.3em;
}

.pf-hero__text-link:hover,
.pf-hero__text-link:focus { color: var(--pf-accent); }

.pf-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 1.15rem;
  margin-top: var(--pf-space-sm);
}

.pf-hero__assurance {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  color: rgba(254, 254, 254, 0.72);
  font-size: var(--pf-text-xs);
}

.pf-hero__assurance span {
  display: inline-grid;
  place-items: center;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  background: rgba(254, 254, 254, 0.14);
  color: var(--pf-white);
  font-size: 0.75rem;
  font-weight: var(--pf-fw-bold);
}

.pf-hero__period {
  margin: var(--pf-space-xs) 0 0;
  color: rgba(254, 254, 254, 0.62);
  font-size: var(--pf-text-xs);
}

.pf-hero__figure {
  position: relative;
  margin: 0;
}

.pf-hero__media {
  position: relative;
  overflow: hidden;
  line-height: 0;
  border-radius: 2.8rem 2.8rem 2.8rem 0.65rem;
  background: var(--pf-primary-light);
  box-shadow: var(--pf-shadow-lg);
}

.pf-hero__media::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 1rem;
  border: 1px solid rgba(254, 254, 254, 0.5);
  border-radius: 2rem 2rem 2rem 0.35rem;
  pointer-events: none;
}

.pf-hero__image {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
  transform: scale(1.002);
}

.pf-hero__image-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(47, 78, 77, 0.22), transparent 45%);
  pointer-events: none;
}

.pf-hero__badge {
  position: absolute;
  z-index: 3;
  left: var(--pf-space-sm);
  bottom: var(--pf-space-sm);
  max-width: calc(100% - 2.4rem);
}

/* A jelvény tartalmát (logó, csillagok, pontszám) a Google Places Rating
   plugin [google_places_rating] shortcode-ja adja a saját .gpr-* stílusaival
   — itt csak a hero képre pozicionáljuk. */
.pf-hero__badge .gpr-widget {
  justify-content: flex-start;
  width: auto;
}

.pf-hero__proof {
  display: grid;
  gap: 0.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.pf-hero__proof li {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  min-width: 0;
  padding: 0.95rem 1rem;
  border: 1px solid rgba(254, 254, 254, 0.14);
  border-radius: var(--pf-radius-md);
  background: rgba(254, 254, 254, 0.075);
}

.pf-hero__proof-icon {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  flex: none;
  border-radius: 50%;
  background: rgba(254, 254, 254, 0.14);
  color: var(--pf-white);
  font-weight: var(--pf-fw-bold);
}

.pf-hero__proof li > span:last-child { min-width: 0; }

.pf-hero__proof strong {
  display: block;
  color: var(--pf-white);
  font-family: var(--pf-font-head);
  font-size: var(--pf-text-base);
  font-weight: var(--pf-fw-black);
  line-height: 1.15;
}

.pf-hero__proof small {
  display: block;
  margin-top: 0.15rem;
  color: rgba(254, 254, 254, 0.66);
  font-size: var(--pf-text-xs);
  line-height: var(--pf-leading-snug);
}

/* Mobilon/tableten (a 2-hasábos elrendezés alatt) a kép kerül elsőnek —
   a szöveges tartalom és a bizalmi kártyák a DOM-sorrendtől függetlenül
   utána következnek. */
@media (max-width: 63.999em) {
  .pf-hero__figure { order: -1; }
}

@media (max-width: 39.999em) {
  /* A régi Foundation réteg content-box konténere mobilon a két gutterrel
     szélesebbre nőne a viewportnál; auto szélességgel a padding beleszámít. */
  .pf-hero__inner {
    width: auto;
    gap: var(--pf-space-sm);
    padding-block: var(--pf-space-sm) var(--pf-space-lg);
  }

  /* A kép megtartja a helyét, de nem viheti el a képernyő nagy részét —
     így a címsor, az ár-ígéret és a CTA is a hajtás felett fér el. */
  .pf-hero__media {
    border-radius: 1.6rem 1.6rem 1.6rem 0.55rem;
  }

  .pf-hero__image {
    aspect-ratio: auto;
    height: clamp(11rem, 32vh, 15rem);
  }

  /* A rövidebb mobil képen az úszó jelvény kitakarná a fotót — a figure
     "kibontásával" a média és a jelvény külön-külön sorolható be a hero
     rácsába, így a jelvény a bizalmi USP-lista alá, a kép alól lejjebb
     kerülhet, középre húzva, nem teljes szélességben. */
  .pf-hero__figure { display: contents; }

  .pf-hero__media { order: -1; }

  .pf-hero__proof { order: 1; }

  .pf-hero__badge {
    order: 2;
    position: static;
    left: auto;
    bottom: auto;
    display: flex;
    justify-content: center;
    width: auto;
    max-width: fit-content;
    margin: var(--pf-space-sm) auto 0;
  }

  .pf-hero .pf-eyebrow {
    margin-bottom: var(--pf-space-2xs);
    padding: 0.4rem 0.75rem;
  }

  .pf-hero__title {
    font-size: clamp(1.9rem, 7.6vw, 2.35rem);
    margin-bottom: var(--pf-space-2xs);
  }

  .pf-hero__lead {
    font-size: var(--pf-text-base);
    line-height: 1.5;
  }

  .pf-hero__actions {
    margin-top: var(--pf-space-sm);
    gap: var(--pf-space-xs);
  }

  .pf-hero__actions .pf-btn { min-height: 3.25rem; }

  .pf-hero__meta { margin-top: var(--pf-space-xs); }

  .pf-hero__period { margin-top: var(--pf-space-2xs); }
}

@media (min-width: 40em) {
  .pf-hero__actions {
    flex-direction: row;
    align-items: center;
  }

  .pf-hero__actions .pf-btn { width: auto; }
  .pf-hero__proof { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 64em) {
  .pf-hero__inner {
    max-width: none;
    margin-inline: 0;
    padding-left: max(var(--pf-gutter), calc((100vw - var(--pf-container)) / 2 + var(--pf-gutter)));
    padding-right: 0;
    grid-template-columns: minmax(0, 40%) minmax(0, 60%);
    grid-template-rows: minmax(0, 1fr);
    gap: 0;
    min-height: calc(100svh - 64px);
    padding-block: 0;
  }

  .pf-hero__content {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    padding: var(--pf-space-lg) var(--pf-space-lg) var(--pf-space-lg) 0;
  }

  .pf-hero__title {
    font-size: clamp(2.8rem, 3.65vw, 3.35rem);
  }

  .pf-hero__figure {
    grid-column: 2;
    grid-row: 1;
    align-self: stretch;
    min-height: 100%;
  }

  .pf-hero__media,
  .pf-hero__media::before {
    border-radius: 0;
  }

  .pf-hero__media,
  .pf-hero__image { height: 100%; }

  .pf-hero__image {
    min-height: 100%;
    aspect-ratio: auto;
  }

  .pf-hero__badge {
    left: calc(var(--pf-space-md) * -1);
    top: var(--pf-space-md);
    bottom: auto;
  }

  .pf-hero__proof {
    position: relative;
    z-index: 4;
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.65rem;
    padding: var(--pf-space-sm) var(--pf-space-sm) calc(var(--pf-space-lg) + 1rem);
  }

  .pf-hero__proof li {
    padding: 0.75rem;
    border-color: rgba(254, 254, 254, 0.2);
    background: rgba(47, 78, 77, 0.84);
    backdrop-filter: blur(10px);
  }

  .pf-hero__proof-icon { display: none; }

  .pf-hero__actions .pf-btn { font-size: var(--pf-text-base); }
}

/* Az All-on-4 árblokkja nem kijelző-szám, hanem egyetlen tételsor a fenti
   nyugta nyelvén: tétel balra, összeg jobbra, pontozott vezetővonallal. Így
   akkor is befejezettnek látszik, amikor az ár még nem érkezett meg — és
   ugyanaz a dokumentum-logika viszi tovább, ami az oldal gerince. */
.pf-slip {
  background: var(--pf-white);
  color: var(--pf-ink);
  border-radius: var(--pf-radius-md);
  padding: var(--pf-space-sm) var(--pf-space-md) var(--pf-space-md);
  margin-bottom: var(--pf-space-md);
  box-shadow: var(--pf-shadow-md);
}

.pf-slip__label {
  font-size: var(--pf-text-xs);
  font-weight: var(--pf-fw-bold);
  letter-spacing: var(--pf-tracking-caps);
  text-transform: uppercase;
  color: var(--pf-primary-deep);
  margin: 0 0 var(--pf-space-xs);
}

.pf-slip__row {
  display: flex;
  flex-wrap: wrap;          /* keskeny nézetben az összeg új sorba kerül */
  justify-content: space-between;
  align-items: baseline;
  gap: var(--pf-space-2xs) var(--pf-space-xs);
  margin: 0;
  padding-bottom: var(--pf-space-2xs);
  border-bottom: 1px dotted var(--pf-border);
}

.pf-slip__item {
  font-weight: var(--pf-fw-medium);
  flex: 1 1 auto;
  min-width: 0;
}

.pf-slip__amount {
  flex: 0 1 auto;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-size: var(--pf-text-xl);
  font-weight: var(--pf-fw-bold);
  color: var(--pf-cta);
}

.pf-slip__free {
  display: flex;
  gap: 0.5em;
  margin: var(--pf-space-xs) 0 0;
  font-size: var(--pf-text-sm);
  color: var(--pf-primary-deep);
}

.pf-slip__free::before {
  content: "\2713";
  flex: none;
  font-weight: var(--pf-fw-bold);
}

.pf-slip__note {
  margin: var(--pf-space-xs) 0 0;
  font-size: var(--pf-text-sm);
  color: var(--pf-ink-muted);
}

/* -------------------------------------------------------------------------
   4. KÉT ÚT — perszóna A és B szétválasztása
   -------------------------------------------------------------------------
   Korábban teljes szélességű, telített pasztell (blue-1 / green-1) panel
   volt, fekete szöveggel — az eredeti témában ezek a színek sehol nem
   jelennek meg ekkora felületen és fekete szöveggel, csak kis jelvényeken,
   fehéren. Most a bevett kártya-nyelvet kapja: fehér kártya, keretes mono
   jelvény (ugyanaz a stílus, mint a pácienstörténetek tényjelvényei),
   primary-text cím. A „választás” gondolatát egy középre helyezett „VAGY”
   korong viszi tovább — ugyanaz a motívum, mint az előnyök-főkönyv nyíl-
   korongja, hogy a két szekció egy vizuális rendszer részének látsszon.
   ---------------------------------------------------------------------- */

.pf-paths { background: var(--pf-surface); }

.pf-paths__grid {
  position: relative;
  display: grid;
  gap: var(--pf-space-md);
}

.pf-path {
  padding: var(--pf-space-lg);
  border-radius: var(--pf-radius-lg);
  background: var(--pf-surface-alt);
  box-shadow: var(--pf-shadow-sm);
  display: flex;
  flex-direction: column;
  gap: var(--pf-space-xs);
}

.pf-path__badge {
  display: inline-flex;
  align-self: flex-start;
  font-size: var(--pf-text-xs);
  font-weight: var(--pf-fw-medium);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--pf-primary-deep);
  padding: 0.2em 0.8em;
  border: 1px solid var(--pf-border-soft);
  border-radius: var(--pf-radius-pill);
}

.pf-path__title {
  font-family: var(--pf-font-head);
  font-size: var(--pf-h3);
  font-weight: var(--pf-fw-black);
  letter-spacing: var(--pf-tracking-display);
  color: var(--pf-primary-text);
  margin: 0;
}

.pf-path__text { margin: 0; color: var(--pf-ink); max-width: 46ch; }

.pf-path .pf-link-arrow { margin-top: auto; }

/* A „VAGY” korong — csak nagy nézetben van hely középre tenni. */
.pf-paths__or {
  display: none;
  font-size: var(--pf-text-xs);
  font-weight: var(--pf-fw-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

@media (min-width: 64em) {
  .pf-paths__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--pf-space-xl);
  }

  .pf-paths__or {
    display: grid;
    place-items: center;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 50%;
    background: var(--pf-primary-deep);
    color: var(--pf-white);
    box-shadow: 0 0 0 6px var(--pf-surface);
  }
}

/* -------------------------------------------------------------------------
   5. NYUGTA — az oldal signature eleme
   ---------------------------------------------------------------------- */

.pf-price {
  background: var(--pf-primary-abyss);
  color: var(--pf-white);
}

.pf-price__head { margin-bottom: var(--pf-space-lg); }

.pf-price__grid {
  display: grid;
  gap: var(--pf-space-lg);
  align-items: start;
}

.pf-price__aside {
  display: flex;
  flex-direction: column;
  gap: var(--pf-space-sm);
}

.pf-price__aside-lead {
  font-size: var(--pf-text-lg);
  color: rgba(254, 254, 254, 0.9);
  margin: 0;
  padding-left: var(--pf-space-sm);
  border-left: 3px solid var(--pf-accent);
}

.pf-price__aside .pf-fineprint { margin-top: 0; }

.pf-price__free {
  margin: 0;
  padding: var(--pf-space-md);
  border: 2px dashed rgba(255, 212, 0, 0.5);
  border-radius: var(--pf-radius-md);
}

.pf-price__free-title {
  font-size: var(--pf-text-xs);
  font-weight: var(--pf-fw-bold);
  letter-spacing: var(--pf-tracking-caps);
  text-transform: uppercase;
  color: var(--pf-accent);
  margin: 0 0 var(--pf-space-xs);
}

.pf-price__free-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--pf-space-2xs);
}

.pf-price__free-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.6em;
  align-items: baseline;
  font-size: var(--pf-text-sm);
  color: var(--pf-white);
}

.pf-price__free-list b {
  font-weight: var(--pf-fw-bold);
  color: var(--pf-accent);
}

@media (min-width: 64em) {
  .pf-price__grid { grid-template-columns: minmax(0, 46rem) minmax(0, 1fr); }
  .pf-price__aside { position: sticky; top: 6rem; }
}

.pf-receipt {
  position: relative;
  background: var(--pf-white);
  color: var(--pf-ink);
  padding: var(--pf-space-lg) clamp(1.2rem, 4vw, 2.8rem);
  box-shadow: 0 24px 60px rgba(10, 10, 10, 0.35);
}

/* Perforált felső és alsó él — a lap letéphető szelvényként olvasódik. */
.pf-receipt::before,
.pf-receipt::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 14px;
  background: radial-gradient(circle at 8px 0, var(--pf-primary-abyss) 0 7px, transparent 7.5px) 0 0 / 16px 14px repeat-x;
}

.pf-receipt::before { top: 0; }
.pf-receipt::after { bottom: 0; transform: scaleY(-1); }

.pf-receipt__table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
}

.pf-receipt__caption {
  caption-side: top;
  text-align: left;
  padding: 0 0 var(--pf-space-md);
  font-family: var(--pf-font-mono);
  font-size: var(--pf-text-sm);
  color: var(--pf-ink-muted);
}

.pf-receipt__doc {
  display: block;
  font-weight: var(--pf-fw-bold);
  letter-spacing: var(--pf-tracking-caps);
  text-transform: uppercase;
  color: var(--pf-primary-deep);
  margin-bottom: 0.2em;
}

/* A fejléc csak a képernyőolvasónak és a nagy nézetnek kell — a nyugtán a
   sorok önmagukban is érthetőek. */
.pf-receipt__table thead th {
  font-family: var(--pf-font-mono);
  font-size: var(--pf-text-xs);
  font-weight: var(--pf-fw-medium);
  letter-spacing: var(--pf-tracking-caps);
  text-transform: uppercase;
  color: var(--pf-ink-muted);
  text-align: left;
  padding: 0 0 var(--pf-space-2xs);
  border-bottom: 2px solid var(--pf-ink);
}

.pf-receipt__table thead th:last-child { text-align: right; }

/* Figyelem: itt szándékosan nincs `text-align`. A korábbi
   `tbody td { text-align: left }` erősebb volt a .pf-receipt__amount
   szabálynál, és balra rántotta a számoszlopot. Az igazítást a cellák
   saját osztályai adják. */
.pf-receipt__table tbody th,
.pf-receipt__table tbody td,
.pf-receipt__table tfoot th,
.pf-receipt__table tfoot td {
  padding: var(--pf-space-sm) 0;
  vertical-align: baseline;
}

.pf-receipt__table tbody th,
.pf-receipt__table tfoot th { text-align: left; }

.pf-receipt__table tbody tr { border-bottom: 1px dotted var(--pf-border); }

.pf-receipt__item {
  display: block;
  font-weight: var(--pf-fw-medium);
  font-size: var(--pf-text-base);
}

.pf-receipt__note {
  display: block;
  font-size: var(--pf-text-sm);
  font-weight: var(--pf-fw-regular);
  color: var(--pf-ink-muted);
  margin-top: 0.15em;
  max-width: 44ch;
}

.pf-receipt__amount {
  text-align: right;
  white-space: nowrap;
  font-family: var(--pf-font-mono);
  font-variant-numeric: tabular-nums;
  padding-left: var(--pf-space-sm);
}

.pf-receipt__was {
  display: block;
  font-size: var(--pf-text-sm);
  color: var(--pf-ink-muted);
}

.pf-receipt__now {
  display: block;
  font-size: var(--pf-text-lg);
  font-weight: var(--pf-fw-bold);
  color: var(--pf-cta);
}

.pf-receipt__now--free { color: var(--pf-primary-deep); }

/* Könyvelői dupla vonal a végösszeg fölött. */
.pf-receipt__total th,
.pf-receipt__total td {
  border-top: 4px double var(--pf-ink);
  padding-top: var(--pf-space-sm);
  font-family: var(--pf-font-head);
  font-size: var(--pf-text-lg);
  font-weight: var(--pf-fw-black);
  color: var(--pf-ink);
}

.pf-receipt__total td {
  font-family: var(--pf-font-mono);
  color: var(--pf-cta);
}

.pf-receipt__promise {
  margin: var(--pf-space-md) 0 0;
  padding-top: var(--pf-space-md);
  border-top: 1px dotted var(--pf-border);
  font-size: var(--pf-text-base);
}

.pf-receipt__promise::first-line {
  font-weight: var(--pf-fw-bold);
}

/* Az áthúzás nem terjedhet rá a kitöltetlen helyőrzőkre. */
.pf-receipt__was .pf-todo { display: inline-block; }

@media (max-width: 47.99em) {
  .pf-receipt__table thead { display: none; }
  .pf-receipt__amount { padding-left: var(--pf-space-xs); }
  .pf-receipt__was,
  .pf-receipt__now { white-space: normal; }
}

/* -------------------------------------------------------------------------
   6. ÖT KÉRDÉS — vízszintes karusszel, mellékes súlyú tartalom
   -------------------------------------------------------------------------
   A kérdéssor kevésbé fontos, mint az árbontás fölötte, ezért nem foglal
   önálló, teljes szélességű sávot: az árreceptet és a bizonyítékokat idéző
   .pf-carousel keretet használja újra (lásd .pf-reviews), így egy kártyányi
   magasságra zsugorodik és görgethető. A sorszám tartalmi infó marad
   („01 / 05”), az idézőjel pull-quote-ként nyitja meg a kérdést.
   ---------------------------------------------------------------------- */

.pf-ask { background: var(--pf-surface); }

.pf-ask__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--pf-space-md);
  margin-bottom: var(--pf-space-lg);
}

.pf-ask__head > div { max-width: 46rem; }

/* Világos alapon a karusszel nyílgombjai sötét kontúrral, nem fehérrel.
   Kettőzött szelektor kell a specificitáshoz: a .pf-carousel__btn alapszabálya
   (fehér szín/szegély a sötét Google-vélemények sávhoz) lejjebb áll a fájlban,
   tehát azonos specificitás mellett felülírná ezt — a gombok láthatatlanok
   lennének fehér háttéren. */
.pf-carousel__btn.pf-carousel__btn--dark {
  border-color: var(--pf-border);
  color: var(--pf-ink);
}

.pf-carousel__btn.pf-carousel__btn--dark:hover:not(:disabled) {
  background: var(--pf-accent);
  border-color: var(--pf-accent);
  color: var(--pf-black);
}

/* A kártyák a konténer szélességén belül maradnak (nincs teljes szélességű
   „kilógás”, mint a Google-vélemények sávjánál), és lapozó módban a nyilak a
   teljes látható sávot ugorják egyszerre — lásd data-pf-carousel="page". */
.pf-carousel--contained { overflow: hidden; }

/* Kettőzött szelektor a nagyobb specificitásért: a .pf-carousel__track
   alapszabálya (padding: ... var(--pf-gutter) ...) lejjebb áll a fájlban,
   tehát azonos specificitás mellett felülírná ezt — a konténer padding-je
   fölé még egy gutternyit adva, ami jobbra tolja a teljes sávot. */
.pf-carousel__track.pf-carousel__track--contained {
  padding-left: 0;
  padding-right: 0;
  scroll-padding-left: 0;
}

@media (min-width: 80em) {
  .pf-carousel__track.pf-carousel__track--contained {
    padding-left: 0;
    scroll-padding-left: 0;
  }
}

.pf-ask__list {
  list-style: none;
  margin: 0;
}

.pf-ask__item {
  position: relative;
  flex: 0 0 clamp(16rem, 80vw, 22rem);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  padding: var(--pf-space-lg) var(--pf-space-md) var(--pf-space-md);
  border: 1px solid var(--pf-border);
  border-top: 3px solid var(--pf-ink);
  border-radius: var(--pf-radius-md);
  background: var(--pf-surface);
}

@media (min-width: 48em) {
  .pf-ask__item { flex-basis: calc((100% - var(--pf-space-md)) / 2); }
}

@media (min-width: 64em) {
  .pf-ask__item { flex-basis: calc((100% - (2 * var(--pf-space-md))) / 3); }
}

.pf-ask__num {
  font-size: var(--pf-text-sm);
  font-weight: var(--pf-fw-bold);
  font-variant-numeric: tabular-nums;
  color: var(--pf-primary-deep);
  margin-bottom: var(--pf-space-sm);
}

.pf-ask__num small {
  font-weight: var(--pf-fw-regular);
  color: var(--pf-ink-muted);
}

.pf-ask__q {
  position: relative;
  font-family: var(--pf-font-head);
  font-size: var(--pf-text-lg);
  font-weight: var(--pf-fw-bold);
  letter-spacing: var(--pf-tracking-display);
  line-height: var(--pf-leading-snug);
  color: var(--pf-primary-text);
  margin: 0 0 var(--pf-space-xs);
}

/* Kimondható mondat, tehát valódi, nagyméretű idézőjelben áll — mint egy
   pull-quote, ez nyitja meg a sort. Inline elem, negatív margóval „lóg ki” a
   szövegtömbből (hanging punctuation), nincs abszolút pozicionálás, tehát
   minden szélességen egyszerűen, törés nélkül viselkedik. A jelek a CSS-ben
   vannak, hogy az adat tiszta kérdés maradjon (a GYIK-schemába is így
   kerülne be). */
.pf-ask__q::before {
  content: "\201E";
  display: inline-block;
  margin-left: -0.34em;
  margin-right: 0.05em;
  font-size: 1.3em;
  line-height: 0;
  vertical-align: -0.12em;
  color: var(--pf-accent-dark);
}

.pf-ask__q::after {
  content: "\201D";
  color: var(--pf-accent-dark);
}

.pf-ask__why {
  margin: 0;
  max-width: 62ch;
  color: var(--pf-ink);
}

/* -------------------------------------------------------------------------
   7. CTA SÁV — vékony, sárga ritmusjel az oldalon
   ---------------------------------------------------------------------- */

.pf-ctaband {
  background: var(--pf-accent);
  color: var(--pf-black);
  padding-block: var(--pf-space-md);
}

.pf-ctaband__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pf-space-sm) var(--pf-space-md);
  justify-content: space-between;
}

.pf-ctaband__text {
  flex: 1 1 26rem;
  color: var(--pf-black);
}

.pf-ctaband__title {
  font-family: var(--pf-font-head);
  font-size: var(--pf-text-xl);
  font-weight: var(--pf-fw-black);
  letter-spacing: var(--pf-tracking-display);
  line-height: var(--pf-leading-snug);
  margin: 0;
}

.pf-ctaband__sub {
  margin: 0.15em 0 0;
  font-size: var(--pf-text-base);
  max-width: 60ch;
}

.pf-ctaband .pf-btn {
  background: var(--pf-primary-abyss);
  color: var(--pf-white);
}

.pf-ctaband .pf-btn:hover,
.pf-ctaband .pf-btn:focus { background: var(--pf-black); color: var(--pf-white); }

/* -------------------------------------------------------------------------
   8. VÁLTOZÁS-FŐKÖNYV (előnyök)
   -------------------------------------------------------------------------
   A két oldal szándékosan nem egyforma súlyú. A „ma” oldal halk: nincs
   kitöltése, kisebb és szürkébb. A nyereség oldala kapja a sötét kitöltést,
   a nagyobb szedést és a sárga nyereség-sort. A hierarchia maga az érv.
   ---------------------------------------------------------------------- */

.pf-change { background: var(--pf-surface); }

.pf-change__list {
  margin: 0;
  border-top: 2px solid var(--pf-ink);
}

.pf-change__row {
  border-bottom: 1px solid var(--pf-border);
  padding-block: var(--pf-space-md);
}

.pf-change__topic {
  font-family: var(--pf-font-head);
  font-size: var(--pf-text-lg);
  font-weight: var(--pf-fw-black);
  letter-spacing: var(--pf-tracking-display);
  color: var(--pf-ink);
  margin-bottom: var(--pf-space-sm);
}

.pf-change__states {
  display: grid;
  gap: var(--pf-space-sm);
  margin: 0;
}

.pf-change__label {
  font-size: var(--pf-text-xs);
  font-weight: var(--pf-fw-bold);
  letter-spacing: var(--pf-tracking-caps);
  text-transform: uppercase;
  margin: 0 0 var(--pf-space-2xs);
}

/* --- A halk oldal ------------------------------------------------------- */

.pf-change__now {
  padding-left: var(--pf-space-sm);
  border-left: 2px dotted var(--pf-border);
  transition: opacity var(--pf-duration) var(--pf-ease),
              transform var(--pf-duration) var(--pf-ease);
}

.pf-change__now .pf-change__label { color: var(--pf-ink-muted); }

.pf-change__now-text {
  margin: 0;
  font-size: var(--pf-text-sm);
  color: var(--pf-ink-muted);
  max-width: 46ch;
}

/* --- A hangsúlyos oldal ------------------------------------------------- */

.pf-change__after {
  padding: var(--pf-space-md);
  border-radius: var(--pf-radius-lg);
  background: var(--pf-primary-deep);
  color: var(--pf-white);
  box-shadow: var(--pf-shadow-md);
  transition: transform var(--pf-duration) var(--pf-ease),
              background-color var(--pf-duration) var(--pf-ease),
              box-shadow var(--pf-duration) var(--pf-ease);
}

.pf-change__after .pf-change__label { color: rgba(254, 254, 254, 0.85); }

.pf-change__gain {
  display: flex;
  align-items: flex-start;
  gap: 0.45em;
  font-family: var(--pf-font-head);
  font-size: var(--pf-text-xl);
  font-weight: var(--pf-fw-black);
  letter-spacing: var(--pf-tracking-display);
  line-height: var(--pf-leading-tight);
  color: var(--pf-accent);
  margin: 0 0 var(--pf-space-2xs);
  text-wrap: balance;
}

.pf-change__gain::before {
  content: "\2713";
  flex: none;
  width: 1.1em;
  height: 1.1em;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--pf-accent);
  color: var(--pf-primary-abyss);
  font-size: 0.72em;
  margin-top: 0.22em;
  transition: transform var(--pf-duration) var(--pf-ease);
}

.pf-change__after-text {
  margin: 0;
  color: rgba(254, 254, 254, 0.92);
  max-width: 50ch;
}

/* --- A nyíl a két állapot között ---------------------------------------- */

.pf-change__arrow {
  justify-self: center;
  width: 1.6rem;
  height: 1.6rem;
  background: var(--pf-accent);
  /* Lefelé mutató háromszög — mobilon a „ma” alatt, a nyereség fölött áll. */
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  transition: transform var(--pf-duration) var(--pf-ease);
}

/* --- Élővé tett átmenet: hoverre desktopon, görgetésre mobilon ---------- */

@media (hover: hover) and (pointer: fine) {
  .pf-change__row:hover .pf-change__now {
    opacity: 0.5;
    transform: scale(0.96);
  }

  .pf-change__row:hover .pf-change__after {
    background: var(--pf-primary-abyss);
    transform: scale(1.035);
    box-shadow: var(--pf-shadow-lg);
  }

  .pf-change__row:hover .pf-change__arrow {
    transform: scale(1.3);
  }

  .pf-change__row:hover .pf-change__gain::before {
    transform: scale(1.15);
  }
}

/* Mobilon/érintőn nincs hover — görgetésre kapja meg a sor a JS-ből az
   is-active osztályt, amíg a képernyő közepén áll. Kicsit visszafogottabb,
   mint a desktop hover, de így is jól látható lendület. */
@media (hover: none) {
  .pf-change__row.is-active .pf-change__now {
    opacity: 0.45;
    transform: scale(0.97);
  }

  .pf-change__row.is-active .pf-change__after {
    background: var(--pf-primary-abyss);
    transform: scale(1.025);
    box-shadow: var(--pf-shadow-lg), 0 0 0 2px var(--pf-accent);
  }

  .pf-change__row.is-active .pf-change__arrow {
    transform: scale(1.3);
  }

  .pf-change__row.is-active .pf-change__gain::before {
    transform: scale(1.15);
  }
}

@media (min-width: 64em) {
  .pf-change__row {
    display: grid;
    grid-template-columns: 10rem minmax(0, 1fr);
    gap: var(--pf-space-lg);
    align-items: center;
    padding-block: var(--pf-space-lg);
  }

  .pf-change__topic { margin-bottom: 0; }

  /* A nyereség hasábja mérhetően szélesebb — ránézésre látszik, melyik oldal
     a lényeg, még mielőtt bárki elolvasná. */
  .pf-change__states {
    grid-template-columns: minmax(0, 0.78fr) auto minmax(0, 1.4fr);
    gap: var(--pf-space-md);
    align-items: center;
  }

  .pf-change__arrow {
    width: 2rem;
    height: 2rem;
    clip-path: polygon(100% 50%, 0 0, 0 100%);
  }

  .pf-change__after { padding: var(--pf-space-md) var(--pf-space-lg); }
}

/* -------------------------------------------------------------------------
   9. FOLYAMAT — arányos fizetési sín
   ---------------------------------------------------------------------- */

.pf-process { background: var(--pf-surface-alt); }

.pf-rail {
  margin: 0 0 var(--pf-space-lg);
}

.pf-rail__caption {
  font-size: var(--pf-text-sm);
  letter-spacing: var(--pf-tracking-caps);
  text-transform: uppercase;
  color: var(--pf-ink-muted);
  margin-bottom: var(--pf-space-2xs);
}

.pf-rail__track {
  display: flex;
  gap: 3px;
  height: 2.6rem;
  border-radius: var(--pf-radius-pill);
  overflow: hidden;
  background: var(--pf-white);
}

.pf-rail__seg {
  flex: var(--pf-seg) 1 0;
  display: grid;
  place-items: center;
  min-width: 0;
  background: var(--pf-primary-light);
  font-size: var(--pf-text-sm);
  font-weight: var(--pf-fw-bold);
  color: var(--pf-primary-abyss);
}

/* A szín a nagyságrendet kódolja, nem a sorrendet: sárga a 30% feletti
   tételeknél, zöld a közepesnél. Így a sínen és a lépéskártyák chipjein
   ugyanaz a jelölés fut végig. */
.pf-rail__seg--lg { background: var(--pf-accent); }
.pf-rail__seg--md { background: var(--pf-sage); }
.pf-rail__seg--sm { background: var(--pf-primary-light); }

.pf-rail__pct {
  padding-inline: 0.2em;
  overflow: hidden;
  text-overflow: clip;
}

.pf-process__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--pf-space-md);
}

.pf-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--pf-space-sm);
  padding-block: var(--pf-space-md);
  border-top: 1px solid var(--pf-border);
}

.pf-step__num {
  width: 2.6em;
  height: 2.6em;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--pf-primary-abyss);
  color: var(--pf-white);
  font-size: var(--pf-text-lg);
  font-weight: var(--pf-fw-bold);
}

.pf-step__title {
  font-family: var(--pf-font-head);
  font-size: var(--pf-text-xl);
  font-weight: var(--pf-fw-bold);
  letter-spacing: var(--pf-tracking-display);
  color: var(--pf-primary-text);
  margin: 0 0 var(--pf-space-2xs);
}

.pf-step__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pf-space-2xs);
  margin: 0 0 var(--pf-space-xs);
}

.pf-chip {
  display: inline-block;
  padding: 0.2em 0.9em;
  border-radius: var(--pf-radius-pill);
  font-size: var(--pf-text-sm);
  font-weight: var(--pf-fw-medium);
}

.pf-chip--time {
  background: var(--pf-white);
  color: var(--pf-ink-muted);
  box-shadow: inset 0 0 0 1px var(--pf-border);
}

.pf-chip--pay { background: var(--pf-primary-light); color: var(--pf-primary-abyss); }
.pf-chip--pay.pf-chip--md { background: var(--pf-sage); color: var(--pf-primary-abyss); }
.pf-chip--pay.pf-chip--lg { background: var(--pf-accent); color: var(--pf-black); }

.pf-step__text { margin: 0; max-width: 62ch; }

@media (min-width: 64em) {
  .pf-process__list { grid-template-columns: repeat(2, 1fr); column-gap: var(--pf-space-xl); }
  .pf-step:first-child { grid-column: 1 / -1; }
}

/* -------------------------------------------------------------------------
   10. ALL-ON-4 — sötét fejezet, a videó vezet
   ---------------------------------------------------------------------- */

.pf-allon4 {
  background: var(--pf-primary-abyss);
  color: var(--pf-white);
}

.pf-allon4 .pf-section__title { color: var(--pf-white); }
.pf-allon4 .pf-section__lead { color: rgba(254, 254, 254, 0.86); }

.pf-allon4__grid {
  display: grid;
  gap: var(--pf-space-lg);
  align-items: center;
}

.pf-ticklist {
  list-style: none;
  margin: 0 0 var(--pf-space-md);
  padding: 0;
  display: grid;
  gap: var(--pf-space-xs);
}

.pf-ticklist li {
  position: relative;
  padding-left: 1.9em;
}

.pf-ticklist li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0.05em;
  width: 1.3em;
  height: 1.3em;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--pf-accent);
  color: var(--pf-black);
  font-size: 0.85em;
}

.pf-video {
  position: relative;
  border-radius: var(--pf-radius-lg);
  overflow: hidden;
  box-shadow: var(--pf-shadow-lg);
  background: var(--pf-primary-deep);
  aspect-ratio: 16 / 9;
}

.pf-video__el {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pf-video__caption {
  font-size: var(--pf-text-sm);
  color: rgba(254, 254, 254, 0.72);
  margin: var(--pf-space-xs) 0 0;
}

@media (min-width: 64em) {
  .pf-allon4__grid { grid-template-columns: 1fr 1.15fr; align-items: start; }
  .pf-allon4__media { order: 2; position: sticky; top: 6rem; }
}

/* -------------------------------------------------------------------------
   11. FINANSZÍROZÁS — tömör, három tétel
   ---------------------------------------------------------------------- */

.pf-financing { background: var(--pf-surface); }

.pf-financing__grid {
  display: grid;
  gap: var(--pf-space-md);
  border-top: 2px solid var(--pf-ink);
  padding-top: var(--pf-space-md);
}

.pf-card { padding: 0; }

.pf-card__title {
  font-family: var(--pf-font-head);
  font-size: var(--pf-text-lg);
  font-weight: var(--pf-fw-bold);
  color: var(--pf-primary-text);
  margin: 0 0 var(--pf-space-2xs);
}

.pf-card__text { margin: 0; }

@media (min-width: 64em) {
  .pf-financing__grid { grid-template-columns: repeat(2, 1fr); gap: var(--pf-space-xl); }
}

/* -------------------------------------------------------------------------
   12. PÁCIENS-TÖRTÉNETEK — szerkesztőségi mozaik
   ---------------------------------------------------------------------- */

.pf-stories { background: var(--pf-surface); }

.pf-story__media { line-height: 0; }

.pf-story__image {
  width: 100%;
  object-fit: cover;
  border-radius: var(--pf-radius-md);
}

.pf-story__name {
  font-family: var(--pf-font-head);
  font-size: var(--pf-text-lg);
  font-weight: var(--pf-fw-bold);
  color: var(--pf-primary-text);
  margin: 0 0 var(--pf-space-2xs);
}

.pf-story__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pf-space-2xs);
  list-style: none;
  margin: 0 0 var(--pf-space-xs);
  padding: 0;
}

.pf-story__facts li {
  font-size: var(--pf-text-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--pf-primary-deep);
  padding: 0.15em 0.7em;
  border: 1px solid var(--pf-border-soft);
  border-radius: var(--pf-radius-pill);
}

.pf-story__quote { margin: 0; padding: 0; border: 0; }
.pf-story__quote p { margin: 0 0 var(--pf-space-xs); color: var(--pf-ink); }
.pf-story__quote p:last-child { margin-bottom: 0; }

/* --- Kiemelt történet --------------------------------------------------- */

.pf-story--lead {
  display: grid;
  gap: var(--pf-space-md);
  padding-bottom: var(--pf-space-lg);
  border-bottom: 2px solid var(--pf-ink);
  margin-bottom: var(--pf-space-lg);
}

.pf-story--lead .pf-story__image { aspect-ratio: 4 / 3; }

.pf-story--lead .pf-story__name {
  font-size: var(--pf-text-2xl);
  letter-spacing: var(--pf-tracking-display);
}

.pf-story--lead .pf-story__quote p {
  font-size: var(--pf-text-lg);
  line-height: var(--pf-leading-body);
}

/* Iniciálé itt nem működik: a történetek szövege magyar idézőjellel kezdődik,
   és a ::first-letter azt is magába foglalja. A kiemelést a nagyobb szedés adja. */

/* --- A többi történet hasábban ------------------------------------------ */

.pf-stories__rest {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--pf-space-lg);
}

.pf-stories__rest .pf-story {
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr);
  gap: var(--pf-space-sm);
  align-items: start;
}

.pf-stories__rest .pf-story__image { aspect-ratio: 1 / 1; }

@media (min-width: 48em) {
  .pf-story--lead { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); align-items: start; }
  .pf-stories__rest { grid-template-columns: 1fr 1fr; column-gap: var(--pf-space-xl); }
}

@media (min-width: 64em) {
  .pf-story--lead { grid-template-columns: minmax(0, 26rem) minmax(0, 1fr); gap: var(--pf-space-lg); }
  .pf-stories__rest { grid-template-columns: repeat(3, 1fr); }
  .pf-stories__rest .pf-story { grid-template-columns: 1fr; }
  .pf-stories__rest .pf-story__image { aspect-ratio: 3 / 2; }
}

/* -------------------------------------------------------------------------
   13. GOOGLE ÉRTÉKELÉSEK — karusszel
   ---------------------------------------------------------------------- */

.pf-reviews {
  background: var(--pf-primary-deep);
  color: var(--pf-white);
  overflow: hidden;
}

.pf-reviews__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--pf-space-md);
  justify-content: space-between;
  margin-bottom: var(--pf-space-md);
}

.pf-reviews__head .pf-section__title { margin-bottom: var(--pf-space-xs); }

.pf-reviews__score {
  margin: 0;
}

/* A pontszám/csillagok/vélemény-szám tartalmát a Google Places Rating
   plugin [google_places_rating] shortcode-ja adja a saját .gpr-* stílusaival. */
.pf-reviews__score .gpr-widget {
  justify-content: flex-start;
}

.pf-stars { color: var(--pf-accent); letter-spacing: 0.1em; }

/* --- Karusszel ---------------------------------------------------------- */

.pf-carousel__nav {
  display: flex;
  gap: var(--pf-space-2xs);
}

.pf-carousel__btn {
  width: var(--pf-tap-target);
  height: var(--pf-tap-target);
  border-radius: 50%;
  border: 2px solid rgba(254, 254, 254, 0.45);
  background: transparent;
  color: var(--pf-white);
  font-size: var(--pf-text-lg);
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--pf-duration) var(--pf-ease),
              border-color var(--pf-duration) var(--pf-ease);
}

.pf-carousel__btn:hover:not(:disabled) {
  background: var(--pf-accent);
  border-color: var(--pf-accent);
  color: var(--pf-black);
}

.pf-carousel__btn:disabled { opacity: 0.35; cursor: default; }

.pf-carousel__track {
  display: flex;
  gap: var(--pf-space-md);
  list-style: none;
  margin: 0;
  padding: var(--pf-space-2xs) var(--pf-gutter) var(--pf-space-md);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--pf-gutter);
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}

.pf-carousel__track::-webkit-scrollbar { display: none; }

@media (min-width: 80em) {
  /* Nagy képernyőn a sáv a konténerhez igazodik, de tovább fut a szélére. */
  .pf-carousel__track {
    padding-left: max(var(--pf-gutter), calc((100vw - var(--pf-container)) / 2 + var(--pf-gutter)));
    scroll-padding-left: max(var(--pf-gutter), calc((100vw - var(--pf-container)) / 2 + var(--pf-gutter)));
  }
}

.pf-review {
  flex: 0 0 clamp(16rem, 78vw, 22rem);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: var(--pf-space-xs);
  padding: var(--pf-space-md);
  background: var(--pf-white);
  color: var(--pf-ink);
  border-radius: var(--pf-radius-md);
}

.pf-review__text { flex: 1; font-size: var(--pf-text-sm); }
.pf-review__text p { margin: 0 0 var(--pf-space-xs); color: var(--pf-ink); }
.pf-review__text p:last-child { margin-bottom: 0; }

.pf-review .pf-stars { color: var(--pf-accent-dark); }

.pf-review__author {
  font-family: var(--pf-font-head);
  font-weight: var(--pf-fw-bold);
  color: var(--pf-primary-text);
  margin: 0;
}

/* -------------------------------------------------------------------------
   14. ORVOSOK
   ---------------------------------------------------------------------- */

.pf-doctors { background: var(--pf-surface-alt); }

/* Mobilon is két hasáb: nyolc portré egymás alatt túl hosszú sávot csinálna,
   és a látogató feladná a görgetést a GYIK előtt. */
.pf-doctors__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--pf-space-md);
  list-style: none;
  margin: 0;
  padding: 0;
}

.pf-doctor {
  display: flex;
  flex-direction: column;
  background: var(--pf-surface);
  border: var(--pf-border-width) solid var(--pf-border-soft);
  border-radius: var(--pf-radius-lg);
  overflow: hidden;
  box-shadow: var(--pf-shadow-sm);
  transition: transform var(--pf-duration) var(--pf-ease), box-shadow var(--pf-duration) var(--pf-ease);
}

.pf-doctor:hover,
.pf-doctor:focus-within {
  transform: translateY(-0.4rem);
  box-shadow: var(--pf-shadow-md);
}

.pf-doctor__image {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
  margin: 0;
  filter: saturate(0.92);
  transition: filter var(--pf-duration) var(--pf-ease);
}

.pf-doctor:hover .pf-doctor__image { filter: saturate(1.05); }

.pf-doctor__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: var(--pf-space-sm);
}

.pf-doctor__name {
  font-family: var(--pf-font-head);
  font-size: var(--pf-text-lg);
  font-weight: var(--pf-fw-bold);
  color: var(--pf-primary-text);
  margin: 0 0 var(--pf-space-2xs);
}

.pf-doctor__role {
  margin: 0 0 var(--pf-space-xs);
  font-size: var(--pf-text-sm);
  color: var(--pf-ink-muted);
}

.pf-doctor__creds {
  list-style: none;
  margin: 0 0 var(--pf-space-xs);
  padding: 0;
  font-size: var(--pf-text-xs);
  color: var(--pf-primary-deep);
}

/* Kártyán belül alul ül, akár rövid, akár hosszú a bemutatkozás előtte. */
.pf-doctor__more {
  margin-top: auto;
  padding-top: var(--pf-space-2xs);
  border-top: 1px solid var(--pf-border);
}

.pf-doctor__more summary {
  cursor: pointer;
  list-style: none;
  min-height: var(--pf-tap-target);
  display: flex;
  align-items: center;
  gap: var(--pf-space-2xs);
  font-family: var(--pf-font-head);
  font-size: var(--pf-text-sm);
  font-weight: var(--pf-fw-bold);
  color: var(--pf-cta);
}

.pf-doctor__more summary::-webkit-details-marker { display: none; }

.pf-doctor__more summary::after {
  content: "+";
  margin-left: auto;
  font-size: var(--pf-text-xl);
  line-height: 1;
  color: var(--pf-cta);
  transition: transform var(--pf-duration) var(--pf-ease);
}

.pf-doctor__more[open] summary::after { transform: rotate(45deg); }

/* JS animálja a magasságot; natív fallback (JS nélkül): [open] = auto,
   különben a böngésző alap "display: none"-ja rejti el a tartalmat. */
.pf-doctor__more-inner {
  height: 0;
  overflow: hidden;
  transition: height calc(var(--pf-duration) * 1.6) var(--pf-ease);
}

.pf-doctor__more[open] > .pf-doctor__more-inner { height: auto; }

.pf-doctor__more-inner > p { font-size: var(--pf-text-sm); margin: 0 0 var(--pf-space-xs); }
.pf-doctor__more-inner > p:first-child { margin-top: var(--pf-space-xs); }
.pf-doctor__more-inner > p:last-child { margin-bottom: 0; }

.pf-doctors__link { margin-top: var(--pf-space-md); }

@media (min-width: 64em) {
  .pf-doctors__grid { grid-template-columns: repeat(4, 1fr); }
}

/* -------------------------------------------------------------------------
   15. GYIK — kérdéslista vonalakkal, nem lebegő kártyák
   ---------------------------------------------------------------------- */

.pf-faq { background: var(--pf-surface); }

.pf-faq__list { border-top: 2px solid var(--pf-ink); }

.pf-faq__item { border-bottom: 1px solid var(--pf-border); }

.pf-faq__q {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--pf-space-sm);
  min-height: var(--pf-tap-target);
  padding-block: var(--pf-space-sm);
}

.pf-faq__q::-webkit-details-marker { display: none; }

.pf-faq__q h3 {
  font-family: var(--pf-font-head);
  font-size: var(--pf-text-lg);
  font-weight: var(--pf-fw-bold);
  color: var(--pf-primary-text);
  margin: 0;
  flex: 1;
}

.pf-faq__q::after {
  content: "+";
  font-size: var(--pf-text-xl);
  line-height: 1;
  color: var(--pf-cta);
  transition: transform var(--pf-duration) var(--pf-ease);
}

.pf-faq__item[open] .pf-faq__q::after { transform: rotate(45deg); }
.pf-faq__item[open] { background: var(--pf-surface-alt); }
.pf-faq__item[open] .pf-faq__q { padding-inline: var(--pf-space-sm); }

/* JS animálja a magasságot; natív fallback (JS nélkül / csökkentett
   mozgásnál): [open] = auto, különben a natív <details> alap "display: none"-ja
   rejti el a tartalmat. */
.pf-faq__a {
  height: 0;
  overflow: hidden;
  padding: 0;
  transition: height calc(var(--pf-duration) * 1.6) var(--pf-ease);
}

.pf-faq__item[open] .pf-faq__a {
  height: auto;
  padding: 0 var(--pf-space-sm) var(--pf-space-md);
}

.pf-faq__a p { margin: 0 0 var(--pf-space-xs); max-width: 74ch; }
.pf-faq__a p:last-child { margin-bottom: 0; }

/* -------------------------------------------------------------------------
   16. ŰRLAP
   ---------------------------------------------------------------------- */

.pf-form-section { background: var(--pf-primary-abyss); color: var(--pf-white); }

.pf-form-section .pf-section__title { color: var(--pf-white); }
.pf-form-section .pf-section__lead { color: rgba(254, 254, 254, 0.86); }

.pf-form-section__grid {
  display: grid;
  gap: var(--pf-space-lg);
  align-items: start;
}

.pf-form-section__call { color: var(--pf-white); font-size: var(--pf-text-lg); margin: 0; }

.pf-form-section__call a {
  color: var(--pf-accent);
  font-weight: var(--pf-fw-bold);
  text-decoration: none;
  white-space: nowrap;
}

.pf-form-section__hours {
  display: block;
  font-size: var(--pf-text-sm);
  color: rgba(254, 254, 254, 0.8);
}

.pf-form {
  background: var(--pf-white);
  border-radius: var(--pf-radius-lg);
  padding: var(--pf-space-md);
  box-shadow: var(--pf-shadow-lg);
  color: var(--pf-ink);
}

.pf-field { margin-bottom: var(--pf-space-sm); }

.pf-field label {
  display: block;
  font-weight: var(--pf-fw-medium);
  font-size: var(--pf-text-sm);
  color: var(--pf-ink);
  margin-bottom: var(--pf-space-2xs);
}

.pf-form input[type="text"],
.pf-form input[type="tel"],
.pf-form input[type="email"],
.pf-form select {
  width: 100%;
  min-height: var(--pf-tap-target);
  padding: 0.7em 1em;
  border: 2px solid var(--pf-border);
  border-radius: var(--pf-radius-pill);
  background: var(--pf-white);
  font-family: var(--pf-font-body);
  font-size: var(--pf-text-base);
  color: var(--pf-ink);
  margin: 0;
}

.pf-form input:focus,
.pf-form select:focus { border-color: var(--pf-primary); }

.pf-form .is-invalid { border-color: var(--pf-cta); }

.pf-field__error {
  margin: var(--pf-space-2xs) 0 0;
  font-size: var(--pf-text-sm);
  color: var(--pf-cta);
  font-weight: var(--pf-fw-medium);
}

.pf-field__hint { margin: var(--pf-space-2xs) 0 0; font-size: var(--pf-text-sm); }

.pf-field--check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--pf-space-xs);
  align-items: start;
}

.pf-field--check input {
  width: 24px;
  height: 24px;
  margin-top: 0.15em;
  accent-color: var(--pf-primary-deep);
}

.pf-field--check label {
  font-family: var(--pf-font-body);
  font-size: var(--pf-text-sm);
  line-height: var(--pf-leading-snug);
  margin: 0;
}

.pf-field--check .pf-field__error { grid-column: 1 / -1; }

.pf-form input[type="submit"] { max-width: none; margin-top: var(--pf-space-xs); }
.pf-form .Response { margin-bottom: var(--pf-space-xs); }

@media (min-width: 64em) {
  .pf-form-section__grid { grid-template-columns: 1fr 1fr; }
  .pf-form { padding: var(--pf-space-lg); }
}

/* -------------------------------------------------------------------------
   17. KAPCSOLAT
   ---------------------------------------------------------------------- */

.pf-contact { background: var(--pf-surface); }

.pf-contact__grid {
  display: grid;
  gap: var(--pf-space-lg);
  align-items: start;
}

.pf-contact__address {
  font-style: normal;
  font-size: var(--pf-text-lg);
  margin-bottom: var(--pf-space-md);
}

.pf-contact__list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--pf-space-2xs) var(--pf-space-sm);
  margin: 0;
  border-top: 1px solid var(--pf-border);
  padding-top: var(--pf-space-sm);
}

.pf-contact__list dt {
  font-size: var(--pf-text-xs);
  font-weight: var(--pf-fw-bold);
  letter-spacing: var(--pf-tracking-caps);
  text-transform: uppercase;
  color: var(--pf-primary-text);
  padding-top: 0.25em;
}

.pf-contact__list dd { margin: 0; }

.pf-contact__list a {
  color: var(--pf-cta);
  font-weight: var(--pf-fw-medium);
}

.pf-contact__map {
  border-radius: var(--pf-radius-lg);
  overflow: hidden;
  box-shadow: var(--pf-shadow-md);
  line-height: 0;
}

.pf-contact__map iframe { width: 100%; height: 22rem; border: 0; }

@media (min-width: 64em) {
  .pf-contact__grid { grid-template-columns: 1fr 1fr; }
  .pf-contact__map iframe { height: 26rem; }
}

/* -------------------------------------------------------------------------
   18. LEBEGŐ BEJELENTKEZÉS GOMB — mobilon és desktopon egyaránt jobb alul
   ---------------------------------------------------------------------- */

.pf-sticky {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  left: auto;
  z-index: var(--pf-z-sticky);
  display: flex;
}

.pf-sticky__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  min-height: 56px;
  padding: 0 1.5rem;
  border-radius: 999px;
  font-family: var(--pf-font-head);
  font-weight: var(--pf-fw-bold);
  font-size: var(--pf-text-base);
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(10, 10, 10, 0.24);
}

.pf-sticky__btn--book { background: var(--pf-cta); color: var(--pf-white); }

.pf-sticky__btn:hover,
.pf-sticky__btn:focus { color: var(--pf-white); text-decoration: none; }

.pf-landing .footer { padding-bottom: 88px; }

@media (min-width: 64em) {
  .pf-sticky { right: 2rem; bottom: 2rem; }
  .pf-landing .footer { padding-bottom: 0; }
}

/* -------------------------------------------------------------------------
   18b. POPUP ŰRLAP
   ---------------------------------------------------------------------- */

.pf-modal {
  position: fixed;
  inset: 0;
  z-index: var(--pf-z-modal);
  display: none;
  align-items: flex-end;
  justify-content: center;
}

.pf-modal.is-open { display: flex; }

.pf-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, 0.56);
}

.pf-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(100%, 40rem);
  max-height: min(90dvh, 100%);
  margin: 0 auto;
  overflow-y: auto;
  background: var(--pf-white);
  border-radius: var(--pf-radius-lg) var(--pf-radius-lg) 0 0;
  box-shadow: var(--pf-shadow-lg);
}

.pf-modal__close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 0;
  border-radius: 999px;
  background: var(--pf-bg-muted, rgba(10, 10, 10, 0.06));
  color: var(--pf-primary-text);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.pf-modal__body {
  padding: 3rem 1.5rem 1.5rem;
}

.pf-modal__body .pf-section__title {
  margin-bottom: var(--pf-space-md);
}

.pf-modal-open { overflow: hidden; }

@media (min-width: 48em) {
  .pf-modal { align-items: center; }
  .pf-modal__dialog { border-radius: var(--pf-radius-lg); }
}

/* -------------------------------------------------------------------------
   19. MOZGÁS — egyetlen, összehangolt mozzanat
   ---------------------------------------------------------------------- */

/* A fizetési sín szakaszai kifutnak, amikor a szekció képbe ér. Ez az oldal
   egyetlen scroll-animációja; mindenhol máshol csak hover-visszajelzés van. */
.pf-rail__seg {
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 0.7s var(--pf-ease);
  transition-delay: calc(var(--pf-seg-index, 0) * 90ms);
}

.pf-rail.is-visible .pf-rail__seg { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  .pf-rail__seg { transform: none; transition: none; }
}