/*
 * NEXTCAR FLEET – főoldali tartalmi blokkok (WEB-F/1)
 *
 * Csak a frontend/index.html tölti be, a közös tokens/styles/header/footer
 * fájlok UTÁN. Minden szabály a <main class="nh"> alá van határolva, így a
 * közös fejléc, lábléc és a további nyolc oldal megjelenése nem változik.
 *
 * Forrás: kutatas/2026-10-14-uj-terv/UJ_WEBOLDALTERV.md §2 és H1–H8.
 * Térközritmus: 8 / 16 / 24 / 32 / 48 / 64 / 96 px. Konténer: 1280 px.
 */

.nh {
  --nh-ink: #17212b;
  --nh-body: #33404d;
  --nh-muted: #52606d;
  --nh-soft: #f3f5f7;
  --nh-white: #ffffff;
  --nh-line: #dde3e9;
  --nh-line-strong: #c5ced8;
  --nh-blue: var(--nc-color-blue-500, #185adb);
  --nh-blue-hover: var(--nc-color-blue-600, #1449b4);
  --nh-link: var(--nc-color-blue-600, #1449b4);
  --nh-focus: var(--nc-color-blue-700, #1d4f8f);
  --nh-icon-bg: #e8eef5;
  --nh-radius: 14px;
  --nh-radius-sm: 10px;
  --nh-gutter: 20px;
  --nh-section-y: 56px;
  --nh-transition: 160ms ease;

  display: block;
  background: var(--nh-white);
  color: var(--nh-ink);
  font-family: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  overflow-x: clip;
}

.nh:focus {
  outline: none;
}

/* Alaphelyzet nulla specificitással, hogy a komponensek térközei érvényesüljenek. */
:where(.nh) :where(h1, h2, h3) {
  margin: 0;
  font-family: inherit;
  color: var(--nh-ink);
  letter-spacing: -0.01em;
  overflow-wrap: break-word;
  hyphens: manual;
}

:where(.nh) :where(p, dd) {
  margin: 0;
}

:where(.nh) :where(ul, ol, dl) {
  margin: 0;
  padding: 0;
  list-style: none;
}

.nh-icon {
  display: block;
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
}

/* ---------- Elrendezés ---------- */
.nh-container {
  width: 100%;
  max-width: 80rem;
  margin-inline: auto;
  padding-inline: var(--nh-gutter);
}

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

.nh-section--soft {
  background: var(--nh-soft);
}

.nh-section-head {
  max-width: 45rem;
}

.nh-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  color: var(--nh-muted);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.01em;
}

.nh-eyebrow::before {
  content: "";
  display: block;
  width: 24px;
  height: 2px;
  border-radius: 2px;
  background: var(--nh-blue);
}

.nh-h2 {
  font-size: clamp(1.75rem, 1.5rem + 0.9vw, 2.25rem);
  font-weight: 700;
  line-height: 1.2;
}

.nh-lead {
  margin-top: 16px;
  color: var(--nh-body);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  line-height: 1.6;
  max-width: 65ch;
}

.nh-section-foot {
  margin-top: 24px;
}

/* ---------- Gomb és szöveges link ---------- */
.nh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 12px 24px;
  border: 1px solid transparent;
  border-radius: var(--nh-radius-sm);
  background: var(--nh-blue);
  color: var(--nh-white);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 6px 16px rgb(24 90 219 / 0.22);
  transition: background-color var(--nh-transition), box-shadow var(--nh-transition), transform var(--nh-transition);
}

.nh-btn:hover {
  background: var(--nh-blue-hover);
  box-shadow: 0 8px 24px rgb(24 90 219 / 0.32);
}

.nh-btn .nh-icon {
  width: 1.125rem;
  height: 1.125rem;
  transition: transform var(--nh-transition);
}

.nh-btn:hover .nh-icon {
  transform: translateX(3px);
}

.nh-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--nh-link);
  font-weight: 700;
  line-height: 1.35;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color var(--nh-transition), text-decoration-thickness var(--nh-transition);
}

.nh-link:hover {
  color: var(--nh-ink);
  text-decoration-thickness: 2px;
}

.nh-link .nh-icon {
  width: 1.125rem;
  height: 1.125rem;
  transition: transform var(--nh-transition);
}

.nh-link:hover .nh-icon {
  transform: translateX(3px);
}

.nh a:focus-visible,
.nh summary:focus-visible {
  outline: 3px solid var(--nh-focus);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- H1: hero (UJ_WEBOLDALTERV H1.1–H1.11) ----------
 * Minden szabály .nh-hero alatt él; a közös .nh-btn/.nh-link/.nh-container
 * értékei nem változnak, a herón belüli eltérés helyi felülírás.
 * Elrendezés: a .nh-hero a mért konténer, a .nh-hero__stage és utódai a
 * formázott elemek. A rétegzett tierhez a viewport-media ÉS a rem-alapú
 * konténerfeltétel is kell; különben szöveg felül, kép alul.
 * Képforrás: kizárólag a picture viewport-mediája (90rem wide, 64rem standard,
 * egyébként mobile); a konténervédelem nem cserél forrást.
 */
.nh-hero {
  --nh-hero-bg: var(--nc-color-surface-dark, oklch(23.5% 0.045 247));
  --nh-hero-fg: var(--nc-color-text-on-dark, oklch(99.5% 0.002 240));
  --nh-hero-muted: var(--nc-color-text-on-dark-muted, oklch(86% 0.015 250));
  --nh-hero-accent: var(--nc-color-accent-on-dark, oklch(80.9% 0.096 251.8));
  --nh-hero-focus: var(--nc-focus-color-on-dark, oklch(80.9% 0.096 251.8));
  --nh-hero-btn: var(--nc-btn-primary-bg, oklch(55% 0.16 250));
  --nh-hero-btn-hover: var(--nc-btn-primary-bg-hover, oklch(48% 0.15 250));
  --nh-hero-btn-active: var(--nc-color-blue-700, oklch(43% 0.105 245));
  --nh-hero-pad-x: 1rem;
  --nh-hero-shift: 6px;
  --nh-hero-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --nh-hero-ui: 150ms ease-out;

  container: nh-hero / inline-size;
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(ellipse 85% 65% at 75% 40%, rgba(0, 116, 202, 0.12) 0%, transparent 65%),
    var(--nh-hero-bg);
  color: var(--nh-hero-fg);
}

.nh-hero__stage {
  position: relative;
  display: flex;
  flex-direction: column;
}

.nh-hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 80rem;
  margin-inline: auto;
  padding: 2rem var(--nh-hero-pad-x) 1.5rem;
}

.nh-hero__eyebrow {
  color: var(--nh-hero-muted);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.08em;
}

.nh-hero .nh-hero__title {
  margin-top: 0.75rem;
  color: var(--nh-hero-fg);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
}

.nh-hero__title-line {
  display: block;
}

.nh-hero__lead {
  margin-top: 1rem;
  color: var(--nh-hero-muted);
  font-size: 1rem;
  line-height: 1.6;
}

.nh-hero__actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.375rem;
  margin-top: 1.5rem;
}

.nh-hero .nh-hero__cta {
  width: 100%;
  min-height: 3.25rem;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  border-radius: 6px;
  background: var(--nh-hero-btn);
  color: var(--nh-hero-fg);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.01em;
  box-shadow: 0 4px 14px rgb(0 116 202 / 0.22);
  transition: background-color var(--nh-hero-ui), box-shadow var(--nh-hero-ui);
}

.nh-hero .nh-hero__cta:hover,
.nh-hero .nh-hero__cta:focus-visible {
  background: var(--nh-hero-btn-hover);
  box-shadow: 0 6px 20px rgb(0 116 202 / 0.30);
}

.nh-hero .nh-hero__cta:active {
  background: var(--nh-hero-btn-active);
  transition: none;
}

.nh-hero .nh-hero__cta .nh-icon {
  width: 1.125rem;
  height: 1.125rem;
  transition: transform var(--nh-hero-ui);
}

.nh-hero .nh-hero__cta:hover .nh-icon {
  transform: translateX(3px);
}

.nh-hero .nh-hero__secondary {
  justify-content: flex-start;
  min-width: 2.75rem;
  min-height: 2.75rem;
  color: var(--nh-hero-muted);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.4;
  text-decoration-line: none;
  text-decoration-color: var(--nh-hero-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color var(--nh-hero-ui), text-decoration-color var(--nh-hero-ui);
}

.nh-hero .nh-hero__secondary:hover,
.nh-hero .nh-hero__secondary:focus-visible {
  color: var(--nh-hero-fg);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
}

/* Fókusz: 3 px világoskék kontúr, 2 px eltolás, átmenet nélkül azonnal. */
.nh-hero .nh-hero__cta:focus-visible,
.nh-hero .nh-hero__secondary:focus-visible {
  outline: 3px solid var(--nh-hero-focus);
  outline-offset: 2px;
}

.nh-hero .nh-hero__cta:focus-visible {
  border-radius: 6px;
}

.nh-hero__response {
  margin-top: 0.75rem;
  color: var(--nh-hero-muted);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5;
}

/* Egymás alatti elrendezés: kép a szöveg alatt, saját mezőben. */
.nh-hero__media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  margin-inline: auto;
  overflow: hidden;
  background: var(--nh-hero-bg);
  pointer-events: none;
}

.nh-hero__media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: screen;
  background: radial-gradient(ellipse 65% 55% at 50% 60%,
      rgba(0, 140, 255, 0.40) 0%,
      rgba(20, 90, 220, 0.18) 40%,
      transparent 70%);
}

.nh-hero__media::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  z-index: 2;
  height: 2rem;
  background: linear-gradient(180deg, var(--nh-hero-bg), transparent);
  pointer-events: none;
}

.nh-hero__picture {
  display: block;
  width: 100%;
  height: 100%;
}

.nh-hero__img {
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  object-position: 100% 50%;
}

@media (min-width: 22.5rem) {
  .nh-hero {
    --nh-hero-pad-x: 1.25rem;
  }

  .nh-hero .nh-hero__title {
    font-size: 2.125rem;
  }
}

@media (min-width: 30rem) {
  .nh-hero__copy {
    max-width: 37.5rem;
  }

  .nh-hero .nh-hero__title {
    font-size: 2.5rem;
  }

  .nh-hero__lead {
    max-width: 35rem;
  }

  .nh-hero__media {
    aspect-ratio: 8 / 5;
  }
}

@media (min-width: 48rem) {
  .nh-hero {
    --nh-hero-pad-x: 2rem;
  }

  .nh-hero__inner {
    padding-block: 2.5rem 2rem;
  }

  .nh-hero__copy {
    max-width: 40rem;
  }

  .nh-hero .nh-hero__title {
    font-size: 2.75rem;
  }

  .nh-hero__lead {
    max-width: 37.5rem;
    font-size: 1.0625rem;
  }

  .nh-hero__actions {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
  }

  .nh-hero .nh-hero__cta {
    width: auto;
    min-width: 13rem;
  }

  .nh-hero__media {
    max-width: 60rem;
    aspect-ratio: 2 / 1;
  }

  /* A 960 px-es mező szélesebb herón finoman olvad a márkasötétbe. */
  @container nh-hero (min-width: 61rem) {
    .nh-hero__media {
      mask-image: linear-gradient(90deg, transparent, #000 1.5rem, #000 calc(100% - 1.5rem), transparent);
    }
  }
}

@media (min-width: 64rem) {
  .nh-hero {
    --nh-hero-shift: 10px;
  }

  .nh-hero .nh-hero__title {
    margin-top: 1rem;
  }

  .nh-hero__lead {
    margin-top: 1.25rem;
  }

  .nh-hero__actions {
    margin-top: 1.75rem;
  }

  /* Hozzáférhetőségi kivétel (pl. megnövelt gyökérbetű): egymás alatti
   * elrendezésben a kiválasztott standard/wide forrás saját arányában,
   * újabb vágás nélkül, a teljes rendelkezésre álló szélességben. */
  .nh-hero__media {
    max-width: none;
    aspect-ratio: auto;
    mask-image: none;
  }

  .nh-hero__picture,
  .nh-hero__img {
    height: auto;
  }

  /* Rétegzett tier 1 (normál fontnál 1024–1199 px). */
  @container nh-hero (min-width: calc(64rem - 1.25rem)) {
    .nh-hero__stage {
      justify-content: center;
      min-height: 32.5rem;
    }

    .nh-hero__inner {
      padding-block: 3rem;
    }

    .nh-hero__copy {
      max-width: 27.5rem;
    }

    .nh-hero .nh-hero__title {
      font-size: 2.5rem;
      line-height: 1.12;
    }

    .nh-hero__lead {
      max-width: 25rem;
      font-size: 1.0625rem;
    }

    .nh-hero__media {
      position: absolute;
      z-index: 0;
      inset-block: 0;
      left: 50%;
      width: min(100%, 2560px);
      transform: translateX(-50%);
    }

    /* 1. Showroom ambient backlight az autó fémfelületeire vetítve */
    .nh-hero__media::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      mix-blend-mode: screen;
      background: radial-gradient(ellipse 55% 50% at 70% 55%,
          rgba(0, 140, 255, 0.42) 0%,
          rgba(24, 100, 230, 0.20) 38%,
          transparent 68%);
    }

    /* 2. Szövegolvashatósági sötétítő réteg a bal oldali cím és lead alatt */
    .nh-hero__media::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 2;
      pointer-events: none;
      mix-blend-mode: normal;
      background: linear-gradient(90deg,
          color-mix(in oklab, var(--nh-hero-bg) 66%, transparent) 0%,
          color-mix(in oklab, var(--nh-hero-bg) 58%, transparent) 40%,
          color-mix(in oklab, var(--nh-hero-bg) 50%, transparent) 48%,
          color-mix(in oklab, var(--nh-hero-bg) 16%, transparent) 58%,
          transparent 70%);
    }

    .nh-hero__picture,
    .nh-hero__img {
      height: 100%;
    }

    .nh-hero__img {
      object-position: 50% 65%;
    }

    /* Ultra-wide: a 2560 px-es képréteg két oldalán márkasötét kitöltés, finom átmenettel. */
    @container nh-hero (min-width: 2561px) {
      .nh-hero__media {
        mask-image: linear-gradient(90deg, transparent, #000 6rem, #000 calc(100% - 6rem), transparent);
      }
    }
  }
}

/* Rétegzett tier 2 (normál fontnál 1200–1439 px). */
@media (min-width: 75rem) {
  @container nh-hero (min-width: calc(75rem - 1.25rem)) {
    .nh-hero__stage {
      min-height: 35rem;
    }

    .nh-hero__inner {
      padding-block: 4rem;
    }

    .nh-hero__copy {
      max-width: 32.5rem;
    }

    .nh-hero .nh-hero__title {
      font-size: 3rem;
      line-height: 1.1;
    }

    .nh-hero__lead {
      max-width: 30rem;
      font-size: 1.125rem;
    }
  }
}

/* Rétegzett tier 3 (normál fontnál legalább 1440 px). */
@media (min-width: 90rem) {
  @container nh-hero (min-width: calc(90rem - 1.25rem)) {
    .nh-hero__stage {
      min-height: 40rem;
    }

    .nh-hero__copy {
      max-width: 35rem;
    }

    .nh-hero .nh-hero__title {
      font-size: 3.25rem;
    }
  }
}

@media (prefers-reduced-motion: reduce) {

  .nh-hero .nh-hero__title,
  .nh-hero__lead {
    animation: none;
  }
}

/* ---------- H2: szolgáltatásrács és magyarázat-buborék ---------- */
#havidij .nh-base__layout {
  container: h2-services / inline-size;
  display: grid;
  width: 100%;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 0;
}

#havidij .nh-base__head {
  max-width: 60rem;
  margin-bottom: 32px;
}

#havidij .nh-base__eyebrow {
  letter-spacing: 0.08em;
}

#havidij .nh-base__list {
  display: grid;
  width: 100%;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}

#havidij .nh-base__item {
  position: relative;
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--nh-line);
  border-radius: var(--nh-radius);
  background: var(--nh-white);
  box-shadow: 0 2px 8px rgba(9, 33, 58, 0.03);
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}

@media (hover: hover) {
  #havidij .nh-base__item:hover {
    transform: translateY(-2px);
    border-color: color-mix(in oklab, var(--nh-blue) 35%, var(--nh-line));
    box-shadow: 0 8px 24px rgba(9, 33, 58, 0.07), 0 0 0 1px color-mix(in oklab, var(--nh-blue) 12%, transparent);
  }
}

#havidij .nh-base__summary {
  position: relative;
  display: grid;
  width: fit-content;
  max-width: 100%;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
}

#havidij .nh-base__title {
  width: fit-content;
  max-width: 100%;
  color: var(--nh-ink);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
}

#havidij .nh-base__art {
  display: block;
  width: 56px;
  height: 56px;
  transition: transform 220ms ease;
}

@media (hover: hover) {
  #havidij .nh-base__item:hover .nh-base__art {
    transform: scale(1.05);
  }
}

#havidij .nh-base__trigger[hidden] {
  display: none !important;
}

#havidij .nh-base__trigger {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: transparent;
  cursor: pointer;
}

#havidij .nh-base__trigger:focus-visible {
  outline: 3px solid var(--nh-focus);
  outline-offset: 4px;
}

#havidij .nh-base__layout[data-h2-enhanced="true"] .nh-base__panel:not(.is-open) {
  display: none;
}

#havidij .nh-base__panel {
  min-width: 0;
  margin-top: 16px;
  color: var(--nh-body);
}

#havidij .nh-base__panel-text {
  color: var(--nh-body);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
}

#havidij .nh-base__panel.is-inline {
  position: relative;
  z-index: 2;
  margin-top: 16px;
  padding: 16px;
  border: 1px solid var(--nh-line);
  border-radius: 12px;
  background: var(--nh-white);
  box-shadow: 0 8px 24px rgb(23 33 43 / 0.1);
}

#havidij .nh-base__panel[popover] {
  position: fixed;
  inset: auto;
  top: 0;
  left: 0;
  box-sizing: border-box;
  width: min(320px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  margin: 0;
  padding: 18px;
  border: 1px solid var(--nh-line-strong);
  border-radius: 12px;
  background: var(--nh-white);
  color: var(--nh-body);
  box-shadow: 0 10px 28px rgb(23 33 43 / 0.14);
  transition: opacity 120ms ease;
}

#havidij .nh-base__extras {
  margin-top: 24px;
  color: var(--nh-body);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
}

#havidij .nh-base__spec {
  margin-top: 40px;
  padding: 24px 20px;
  border-radius: var(--nh-radius);
  background:
    radial-gradient(ellipse 80% 70% at 90% 10%, rgba(24, 90, 219, 0.12) 0%, transparent 70%),
    linear-gradient(150deg, #112739 0%, #0a2032 100%);
  border: 1px solid rgba(147, 197, 253, 0.14);
  box-shadow: 0 12px 32px rgba(10, 32, 50, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

#havidij .nh-base__spec-title {
  margin: 0 0 20px;
  color: var(--nc-color-text-on-dark);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.3;
}

#havidij .nh-base__spec-title::before {
  display: block;
  width: 32px;
  height: 2px;
  margin-bottom: 10px;
  border-radius: 1px;
  background: var(--nc-color-accent-on-dark);
  content: "";
}

#havidij .nh-base__facts-wrap {
  container: h2-havidij-facts / inline-size;
  width: 100%;
  min-width: 0;
}

#havidij .nh-base__facts {
  display: grid;
  width: 100%;
  grid-template-columns: minmax(0, 1fr);
  column-gap: 0;
  row-gap: 16px;
}

#havidij .nh-base__fact {
  display: flex;
  min-width: 0;
  flex-direction: column-reverse;
  gap: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--nc-color-border-on-dark);
}

#havidij .nh-base__fact dd {
  color: var(--nc-color-text-on-dark);
  font-size: 1.5rem;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

#havidij .nh-base__fact dt {
  color: var(--nc-color-text-on-dark-muted);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
}

#havidij .nh-base__spec-note {
  max-width: 48rem;
  margin-top: 24px;
  color: var(--nc-color-text-on-dark-muted);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.55;
}

@container h2-services (min-width: 40rem) {
  #havidij .nh-base__head {
    margin-bottom: 40px;
  }

  #havidij .nh-base__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #havidij .nh-base__item {
    padding: 24px;
  }

  #havidij .nh-base__summary {
    grid-template-columns: 64px minmax(0, 1fr);
  }

  #havidij .nh-base__art {
    width: 64px;
    height: 64px;
  }
}

@container h2-services (min-width: 60rem) {
  #havidij .nh-base__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #havidij .nh-base__summary {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 16px;
  }

  #havidij .nh-base__art {
    width: 80px;
    height: 80px;
  }
}

@media (min-width: 48rem) {
  #havidij .nh-base__spec {
    margin-top: 48px;
    padding: 32px;
  }

  #havidij .nh-base__spec-title {
    margin-bottom: 24px;
    font-size: 1.25rem;
  }
}

@media (min-width: 75rem) {
  #havidij .nh-base__spec {
    margin-top: 56px;
    padding: 40px 48px;
  }

  #havidij .nh-base__spec-title {
    margin-bottom: 28px;
  }

  #havidij .nh-base__spec-note {
    margin-top: 28px;
  }
}

@container h2-havidij-facts (min-width: 18rem) {
  #havidij .nh-base__facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 16px;
    row-gap: 20px;
  }
}

@container h2-havidij-facts (min-width: 30rem) {
  #havidij .nh-base__facts {
    column-gap: 24px;
    row-gap: 24px;
  }

  #havidij .nh-base__fact dd {
    font-size: 1.75rem;
  }
}

@container h2-havidij-facts (min-width: 56rem) {
  #havidij .nh-base__facts {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 0;
    row-gap: 0;
  }

  #havidij .nh-base__fact {
    padding: 0 20px;
    border-top: 0;
  }

  #havidij .nh-base__fact:nth-child(n + 2) {
    border-left: 1px solid var(--nc-color-border-on-dark);
  }

  #havidij .nh-base__fact:first-child {
    padding-left: 0;
  }

  #havidij .nh-base__fact:last-child {
    padding-right: 0;
  }

  #havidij .nh-base__fact dd {
    font-size: 2rem;
  }
}

@container h2-havidij-facts (min-width: 68rem) {
  #havidij .nh-base__fact dd {
    font-size: 2.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  #havidij .nh-base__panel[popover] {
    transition: none;
  }
}

/* ---------- H4: személyes ügyintézés (UJ_WEBOLDALTERV H4.1–H4.11) ----------
 * Teljes szélességű, tömör grafit szakasz. Minden szabály .nh-personal alatt él;
 * a közös .nh-btn/.nh-link/.nh-h2 és a tokenek nem változnak.
 * Konténer: .nh-personal__container (content-box mérés), formázott gyermek:
 * .nh-personal__layout. Kéthasábos 7/5 rács CSAK képi változatban
 * (.nh-personal__layout--media), 64rem konténertől; képi wrapper nélküli
 * szöveges állapotban (H4.8) minden szélességen egy oszlop, üres hasáb nélkül.
 * Jelenleg: grafikai változat (elfogadott dokumentum–kulcs SVG, 2026-10-17).
 */
.nh-personal {
  isolation: isolate;
  background:
    radial-gradient(ellipse 65% 55% at 75% 40%, rgba(24, 90, 219, 0.12) 0%, transparent 70%),
    var(--nc-color-surface-dark);
  color: var(--nc-color-text-on-dark);
  font-family: var(--nc-font-sans);
  overflow-wrap: break-word;
}

.nh-personal__container {
  container-type: inline-size;
  container-name: nh-personal;
}

.nh-personal__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 2rem;
  align-items: start;
}

.nh-personal__copy,
.nh-personal__figure {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.nh-personal__copy {
  max-width: 45rem;
}

/* Cím: két sorindítású span, köztük DOM-szóköz; nincs nowrap vagy csonkolás. */
.nh .nh-personal__heading {
  max-width: 40rem;
  color: var(--nc-color-text-on-dark);
  font-family: var(--nc-font-sans);
  font-size: 1.75rem;
  font-weight: var(--nc-weight-bold, 700);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.nh-personal__heading-line {
  display: block;
}

.nh-personal__heading-line--balance {
  text-wrap: balance;
}

.nh-personal__intro {
  margin-top: 1rem;
  color: var(--nc-color-text-on-dark-muted);
  font-size: 1rem;
  font-weight: var(--nc-weight-regular, 400);
  line-height: 1.6;
}

/* Három nyitott vállalás: 1 px dekoratív vonalak, kitöltés/ikon/számozás nélkül. */
.nh-personal__list {
  margin-top: 1.5rem;
}

.nh-personal__item {
  padding: 1rem 0.5rem;
  border-top: 1px solid var(--nc-color-border-on-dark);
  border-radius: 6px;
  transition: background-color 160ms ease, padding-inline 160ms ease;
}

.nh-personal__item:last-child {
  border-bottom: 1px solid var(--nc-color-border-on-dark);
}

@media (hover: hover) {
  .nh-personal__item:hover {
    background-color: color-mix(in oklab, var(--nc-color-white) 3%, transparent);
    padding-inline: 0.75rem;
  }
}

.nh .nh-personal__item-title {
  color: var(--nc-color-text-on-dark);
  font-family: var(--nc-font-sans);
  font-size: 1.125rem;
  font-weight: var(--nc-weight-semibold, 600);
  line-height: 1.35;
  letter-spacing: normal;
}

.nh-personal__item-text,
.nh-personal__note,
.nh-personal__response {
  color: var(--nc-color-text-on-dark-muted);
  font-size: 1rem;
  font-weight: var(--nc-weight-regular, 400);
  line-height: 1.6;
}

.nh-personal__item-text {
  margin-top: 0.375rem;
}

.nh-personal__note {
  margin-top: 1.5rem;
}

.nh-personal__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 1.5rem;
}

/* CTA: a közös .nh-btn H4-re szűkített módosítója (H4.6). */
.nh .nh-personal__cta {
  display: flex;
  width: 100%;
  max-width: 100%;
  min-height: 3.25rem;
  padding: 0.75rem 1.5rem;
  border: 1px solid var(--nc-color-accent-on-dark);
  border-radius: 10px;
  background: var(--nc-btn-primary-bg);
  color: var(--nc-btn-primary-fg);
  font-size: 1rem;
  font-weight: var(--nc-weight-bold, 700);
  line-height: 1.25;
  letter-spacing: 0.01em;
  box-shadow: none;
  transition: background-color var(--nh-transition), border-color var(--nh-transition), color var(--nh-transition);
}

.nh .nh-personal__cta:visited {
  color: var(--nc-btn-primary-fg);
}

.nh .nh-personal__cta:hover,
.nh .nh-personal__cta:active {
  background: var(--nc-btn-primary-bg-hover);
  border-color: var(--nc-color-accent-on-dark);
  color: var(--nc-btn-primary-fg);
  box-shadow: 0 4px 16px rgba(24, 90, 219, 0.35);
}

.nh-personal__response {
  margin-top: 0.5rem;
}

/* Másodlagos szöveges link: állandó aláhúzás, min. 44 px érintési cél. */
.nh .nh-personal__about {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: 2.75rem;
  margin-top: 1rem;
  color: var(--nc-color-accent-on-dark);
  font-size: 1rem;
  font-weight: var(--nc-weight-semibold, 600);
  line-height: 1.45;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color var(--nh-transition);
}

.nh .nh-personal__about:visited {
  color: var(--nc-color-accent-on-dark);
}

.nh .nh-personal__about:hover,
.nh .nh-personal__about:active {
  color: var(--nc-color-text-on-dark);
  text-decoration-thickness: 2px;
}

/* Fókusz: azonnali 3 px on-dark kontúr, 3 px eltolással, grafit rés mellett. */
.nh .nh-personal a:focus-visible {
  outline: 3px solid var(--nc-focus-color-on-dark);
  outline-offset: 3px;
}

.nh .nh-personal__cta:focus-visible {
  border-radius: 10px;
}

/* Személybemutatás a figcaptionben (élő szöveg, nem képre égetve). */
.nh-personal__name {
  color: var(--nc-color-text-on-dark);
  font-size: 1.25rem;
  font-weight: var(--nc-weight-semibold, 600);
  line-height: 1.3;
}

.nh-personal__role {
  margin-top: 0.375rem;
  color: var(--nc-color-text-on-dark-muted);
  font-size: 1rem;
  font-weight: var(--nc-weight-regular, 400);
  line-height: 1.45;
}

.nh-personal__experience {
  display: inline-flex;
  align-items: center;
  margin-top: 0.5rem;
  padding: 0.25rem 0.75rem;
  border-radius: var(--nc-radius-pill, 999px);
  background: color-mix(in oklab, var(--nh-blue) 14%, transparent);
  border: 1px solid color-mix(in oklab, var(--nh-blue) 32%, transparent);
  color: var(--nc-color-accent-on-dark);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.01em;
}

/*
 * Képi változat (H4.3–H4.4):
 * .nh-personal__layout--media > figure.nh-personal__figure >
 *   .nh-personal__media(--portrait|--graphic) + figcaption.nh-personal__caption.
 * Aktív: --graphic. A --portrait csak jóváhagyott saját fotóval kerülhet a HTML-be.
 */
.nh-personal__figure {
  width: 100%;
  max-width: 20rem;
  margin: 0;
  justify-self: start;
}

.nh-personal__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid var(--nc-color-border-on-dark);
  background:
    radial-gradient(ellipse 80% 60% at 50% 30%, rgba(24, 90, 219, 0.12) 0%, transparent 70%),
    linear-gradient(155deg, var(--nc-color-ink-800, #202a33) 0%, var(--nc-color-ink-950, #141a21) 100%);
  box-shadow:
    0 20px 42px rgba(0, 0, 0, 0.36),
    0 0 28px rgba(24, 90, 219, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.10);
  transition: border-color 220ms ease, box-shadow 220ms ease;
}

@media (hover: hover) {
  .nh-personal__media:hover {
    border-color: rgba(147, 197, 253, 0.32);
    box-shadow:
      0 24px 48px rgba(0, 0, 0, 0.40),
      0 0 36px rgba(24, 90, 219, 0.14),
      inset 0 1px 0 rgba(255, 255, 255, 0.14);
  }
}

.nh-personal__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Kék, 2 px-es nyitott sarokjel, 8 px belső insettel — csak portrénál. */
.nh-personal__media--portrait::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 8px;
  width: 48px;
  height: 48px;
  border-top: 2px solid var(--nc-color-accent-on-dark);
  border-right: 2px solid var(--nc-color-accent-on-dark);
  pointer-events: none;
}

/* Grafika egymás alatti nézetben 4:3 mező; a 4:5-ös rajz contain-nel, középen,
   legfeljebb 240 px széles dobozban (tényleges rajz 375 px-en 192, 320 px-en 168 px). */
.nh-personal__media--graphic {
  aspect-ratio: 4 / 3;
}

.nh-personal__media--graphic svg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  max-width: 15rem;
  height: 100%;
  margin: auto;
  overflow: visible;
  pointer-events: none;
}

.nh-personal__caption {
  margin-top: 1.5rem;
}

@media (min-width: 48rem) {
  .nh-personal__layout {
    row-gap: 2.5rem;
  }

  .nh .nh-personal__heading {
    font-size: 2rem;
  }

  .nh-personal__intro {
    font-size: 1.125rem;
  }

  .nh .nh-personal__item-title {
    font-size: 1.25rem;
    line-height: 1.3;
  }

  .nh .nh-personal__cta {
    display: inline-flex;
    width: auto;
  }

  .nh-personal__figure {
    max-width: 24rem;
  }
}

@container nh-personal (min-width: 64rem) {
  .nh .nh-personal__heading {
    font-size: 2.25rem;
    line-height: 1.2;
  }

  .nh-personal__layout--media {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: 3rem;
  }

  .nh-personal__layout--media .nh-personal__figure {
    max-width: 26rem;
    justify-self: end;
  }

  .nh-personal__layout--media .nh-personal__media--graphic {
    aspect-ratio: 4 / 5;
  }

  .nh-personal__layout--media .nh-personal__media--graphic svg {
    max-width: 20rem;
  }
}

@container nh-personal (min-width: 70rem) {
  .nh .nh-personal__heading {
    font-size: 2.5rem;
    line-height: 1.15;
  }

  .nh-personal__layout--media {
    column-gap: 4rem;
  }
}

/* Erősen nagyított szöveg keskeny nézetben (normál 16 px-es alapbetűnél csak
   312 px alatt teljesül): a cím nem kicsinyül, de a túl hosszú szó elválasztható. */
@media (max-width: 19.5em) {

  .nh .nh-personal__heading,
  .nh .nh-personal__item-title {
    hyphens: auto;
  }
}

@media (forced-colors: active) {
  .nh .nh-personal__cta {
    border-color: ButtonText;
  }

  .nh .nh-personal__about {
    color: LinkText;
  }

  .nh .nh-personal a:focus-visible {
    outline-color: Highlight;
  }
}

/* ---------- H5: az ajánlatkéréstől az átadásig (UJ_WEBOLDALTERV H5.1–H5.11) ----------
 * Fehér, nyitott szakasz; a tartalom statikus, a számjelvény finom hoveremelést kap.
 * Minden szabály .nh-process alatt él; a közös .nh-h2/.nh-lead, a tokenek és
 * a H6/H7 szabályai nem változnak.
 * Konténer: .nh-process__container (content-box mérés), formázott gyermek:
 * .nh-steps / .nh-step. Alap (és CQ-támogatás nélkül): függőleges lista,
 * szám balra, szöveg jobbra. 52rem content-boxtól három egyenlő oszlop
 * (32 px rés), 68rem-től 48 px rés.
 * Dekoráció CSS-pseudo-elemből: márkakékből áttűnő 1 px-es összekötők;
 * sötét körjelvények finom kék peremmel és mélységi árnyékkal.
 */
.nh-process {
  background: var(--nh-white);
  font-family: var(--nc-font-sans);
  overflow-wrap: break-word;
}

.nh-process__container {
  container-type: inline-size;
  container-name: nh-process;
}

.nh-process__head {
  max-width: 45rem;
}

/* Saját határolt cím: a közös .nh-h2 keskeny/nagyított nézetű eltérése nem ér ide. */
.nh .nh-process__title {
  max-width: 45rem;
  color: var(--nh-ink);
  font-size: clamp(1.75rem, 1.5rem + 0.9vw, 2.25rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.nh-process__intro {
  max-width: 45rem;
  margin-top: 1rem;
  color: var(--nh-body);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
}

.nh-process .nh-steps {
  /* Függőleges alap: 48×48 px körjelvény, 32 px szám, 16 px rés. */
  --nh-step-num-w: 3rem;
  --nh-step-num-h: 3rem;
  --nh-step-num-size: 2rem;
  --nh-step-col-gap: 1rem;
  --nh-step-body-pad: 0.25rem;
  --nh-step-line: 2px;

  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin-top: 2rem;
}

.nh-process .nh-step {
  position: relative;
  display: grid;
  grid-template-columns: var(--nh-step-num-w) minmax(0, 1fr);
  column-gap: var(--nh-step-col-gap);
  align-content: start;
  align-items: start;
  min-width: 0;
  padding-bottom: 2rem;
}

.nh-process .nh-step:last-child {
  padding-bottom: 0;
}

/* Függőleges összekötés: a számoszlop közepén, a számmező aljától a tétel végéig.
   Az utolsó tételnek nincs vonala. */
.nh-process .nh-step:not(:last-child)::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: var(--nh-step-num-h);
  bottom: 0;
  left: calc(var(--nh-step-num-w) / 2 - var(--nh-step-line) / 2);
  width: var(--nh-step-line);
  background: linear-gradient(180deg, var(--nc-color-blue-500) 0%, var(--nc-color-border) 100%);
  pointer-events: none;
}

.nh-process .nh-step__num {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  justify-self: start;
  width: var(--nh-step-num-w);
  height: var(--nh-step-num-h);
  border-radius: 50%;
  background: var(--nc-color-surface-dark);
  color: var(--nc-color-text-on-dark);
  border: 2px solid var(--nc-color-blue-500);
  box-shadow: 0 4px 12px rgba(24, 90, 219, 0.16);
  font-size: calc(var(--nh-step-num-size) * 0.7);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

/* A régi alsó kék vonás törlése */
.nh-process .nh-step__num::after {
  content: none;
}

.nh-process .nh-step:hover .nh-step__num {
  transform: translateY(-2px);
  border-color: var(--nc-color-accent-on-dark);
  box-shadow: 0 6px 18px rgba(24, 90, 219, 0.28);
}

@media (prefers-reduced-motion: reduce) {
  .nh-process .nh-step__num {
    transition: none;
  }

  .nh-process .nh-step:hover .nh-step__num {
    transform: none;
  }
}

.nh-process .nh-step__body {
  position: relative;
  z-index: 1;
  min-width: 0;
  padding-top: var(--nh-step-body-pad);
}

.nh .nh-process .nh-step__title {
  padding-top: 0;
  color: var(--nh-ink);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: normal;
  transition: color 180ms ease;
}

@media (hover: hover) {
  .nh-process .nh-step:hover .nh-step__title {
    color: var(--nh-blue);
  }
}

.nh-process .nh-step__text {
  max-width: none;
  margin-top: 0.5rem;
  color: var(--nh-body);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
}

@media (min-width: 48rem) {
  .nh-process__intro {
    font-size: 1.125rem;
  }

  .nh-process .nh-steps {
    --nh-step-num-w: 3.5rem;
    --nh-step-num-h: 3.5rem;
    --nh-step-num-size: 2.25rem;
    --nh-step-col-gap: 1.5rem;
    --nh-step-body-pad: 0.5rem;

    margin-top: 2.5rem;
  }

  .nh .nh-process .nh-step__title {
    font-size: 1.25rem;
    line-height: 1.3;
  }
}

/* Háromoszlopos változat a tényleges belső (content-box) szélesség alapján. */
@container nh-process (min-width: 52rem) {
  .nh-process .nh-steps {
    --nh-step-num-w: 4rem;
    --nh-step-num-h: 4rem;
    --nh-step-num-size: 3rem;
    --nh-step-body-pad: 0;
    --nh-step-gap: 2rem;

    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--nh-step-gap);
  }

  /* Egyetlen vízszintes fővonal: az első számmező közepétől az utolsóéig.
     C = (W − 2G) / 3; jobb visszahúzás C − félmező. */
  .nh-process .nh-steps::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: calc(var(--nh-step-num-h) / 2 - var(--nh-step-line) / 2);
    right: calc((100% - 2 * var(--nh-step-gap)) / 3 - var(--nh-step-num-w) / 2);
    left: calc(var(--nh-step-num-w) / 2);
    height: var(--nh-step-line);
    background: linear-gradient(90deg, var(--nc-color-blue-500) 0%, var(--nc-color-blue-600) 60%, var(--nc-color-border) 100%);
    pointer-events: none;
  }

  .nh-process .nh-step {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 1.5rem;
    padding-bottom: 0;
  }

  .nh-process .nh-step:not(:last-child)::before {
    content: none;
  }
}

@container nh-process (min-width: 68rem) {
  .nh-process .nh-steps {
    --nh-step-gap: 3rem;
  }
}

/* Erősen nagyított szöveg keskeny nézetben: a számoszlop marad, hosszú szó
   szükség esetén elválasztható; méretcsökkentés nincs. */
@media (max-width: 19.5em) {

  .nh .nh-process__title,
  .nh .nh-process .nh-step__title,
  .nh-process .nh-step__text {
    hyphens: auto;
  }
}

/* Forced-colors: a dekoráció elhagyható; a sorrendet a lista és a szöveg hordozza. */
@media (forced-colors: active) {

  .nh-process .nh-steps::before,
  .nh-process .nh-step:not(:last-child)::before {
    content: none;
  }
}

/* ---------- H6: VIP-bérlet és eladó autók — másodlagos utak ---------- */
.nh-secondary {
  margin: 0;
  padding-block: 0;
  background: var(--nh-white);
  color: var(--nh-ink);
  font-family: var(--nc-font-sans);
}

.nh-secondary__container {
  container-type: inline-size;
  container-name: nh-secondary;
}

.nh-secondary__panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 2rem;
  min-inline-size: 0;
  padding: 1.25rem;
  border-radius: var(--nh-radius, 14px);
  border: 1px solid var(--nc-color-border-on-dark);
  background:
    radial-gradient(ellipse 70% 60% at 90% 20%, rgba(24, 90, 219, 0.10) 0%, transparent 70%),
    linear-gradient(150deg, var(--nc-color-ink-900) 0%, var(--nc-color-ink-950) 100%);
  color: var(--nc-color-text-on-dark);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.nh-secondary__head,
.nh-secondary__paths,
.nh-secondary__path {
  min-inline-size: 0;
}

.nh .nh-secondary__heading {
  max-inline-size: 100%;
  color: var(--nc-color-text-on-dark);
  font-family: var(--nc-font-sans);
  font-size: 1.75rem;
  font-weight: var(--nc-weight-bold, 700);
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.nh-secondary__intro {
  margin-top: 0.75rem;
  color: var(--nc-color-text-on-dark-muted);
  font-size: 1rem;
  font-weight: var(--nc-weight-regular, 400);
  line-height: 1.6;
  overflow-wrap: anywhere;
  hyphens: auto;
}

.nh-secondary__paths {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

.nh-secondary__path {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
}

.nh-secondary__path+.nh-secondary__path {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--nc-color-border-on-dark);
}

.nh .nh-secondary__path-title {
  color: var(--nc-color-text-on-dark);
  font-family: var(--nc-font-sans);
  font-size: 1.25rem;
  font-weight: var(--nc-weight-semibold, 600);
  line-height: 1.3;
  letter-spacing: 0;
}

.nh-secondary__text {
  margin-top: 0.5rem;
  color: var(--nc-color-text-on-dark-muted);
  font-size: 1rem;
  font-weight: var(--nc-weight-regular, 400);
  line-height: 1.6;
  overflow-wrap: anywhere;
  hyphens: auto;
}

.nh .nh-secondary__link {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  width: fit-content;
  max-width: 100%;
  min-width: 2.75rem;
  min-height: 2.75rem;
  inline-size: fit-content;
  max-inline-size: 100%;
  min-inline-size: 2.75rem;
  min-block-size: 2.75rem;
  box-sizing: border-box;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding: 0.5rem 0;
  color: var(--nc-color-accent-on-dark);
  font-family: var(--nc-font-sans);
  font-size: 1rem;
  font-weight: var(--nc-weight-semibold, 600);
  line-height: 1.375;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color var(--nc-duration-fast) var(--nc-ease-standard);
}

.nh .nh-secondary__link:visited {
  color: var(--nc-color-accent-on-dark);
}

.nh .nh-secondary__link:hover,
.nh .nh-secondary__link:active {
  color: var(--nc-color-blue-200);
  text-decoration-thickness: 2px;
}

.nh .nh-secondary__link:focus-visible {
  color: var(--nc-color-accent-on-dark);
  outline: var(--nc-focus-width) solid var(--nc-focus-color-on-dark);
  outline-offset: var(--nc-focus-offset);
  border-radius: 4px;
  text-decoration-thickness: 2px;
}

.nh-secondary__link-text {
  min-inline-size: 0;
  overflow-wrap: anywhere;
  hyphens: auto;
}

.nh-secondary__arrow {
  flex: none;
  width: 1em;
  height: 1em;
  text-decoration: none;
  transition: transform 180ms ease;
}

@media (hover: hover) {
  .nh .nh-secondary__link:hover .nh-secondary__arrow {
    transform: translateX(4px);
  }
}

@container nh-secondary (min-width: 36rem) {
  .nh-secondary__panel {
    padding: 2rem;
  }
}

@container nh-secondary (min-width: 56rem) {
  .nh-secondary__panel {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    column-gap: 3rem;
    row-gap: 0;
    padding: 2.5rem;
  }

  .nh .nh-secondary__heading {
    font-size: 2rem;
  }

  .nh .nh-secondary__path-title {
    font-size: 1.375rem;
  }
}

@container nh-secondary (min-width: 68rem) {
  .nh-secondary__panel {
    column-gap: 4rem;
    padding: 3rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nh .nh-secondary__link {
    transition: none;
  }

  .nh-secondary__arrow {
    transition: none;
    transform: none !important;
  }
}

@media (forced-colors: active) {
  .nh-secondary {
    background: Canvas;
    color: CanvasText;
  }

  .nh-secondary__panel {
    background: Canvas;
    color: CanvasText;
  }

  .nh .nh-secondary__heading,
  .nh .nh-secondary__path-title,
  .nh-secondary__intro,
  .nh-secondary__text {
    color: CanvasText;
  }

  .nh .nh-secondary__link,
  .nh .nh-secondary__link:visited,
  .nh .nh-secondary__link:hover,
  .nh .nh-secondary__link:active {
    color: LinkText;
    transition: none;
  }

  .nh-secondary__path+.nh-secondary__path {
    border-color: GrayText;
  }

  .nh .nh-secondary__link:focus-visible {
    outline-color: Highlight;
    transition: none;
  }
}

/* ---------- H7: GYIK — szerkesztett kérdéslista ---------- */
#gyik.nh-faq-section {
  --nh-faq-open-bg: #f2f6fa;

  padding-block: clamp(3.5rem, 6vw, 5rem);
  background-color: var(--nh-white);
}

#gyik .nh-faq {
  container: nh-faq / inline-size;
}

#gyik .nh-faq__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
}

#gyik .nh-faq__heading {
  max-width: 15ch;
  font-size: clamp(1.75rem, 1.5rem + 1vw, 2.25rem);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -0.02em;
  text-wrap: balance;
  hyphens: auto;
}

#gyik .nh-faq__lead {
  max-width: 38ch;
  margin-top: 1rem;
  color: var(--nh-body);
  font-size: 1rem;
  line-height: 1.6;
}

#gyik .nh-faq__list {
  width: 100%;
  max-width: 47.5rem;
  justify-self: stretch;
  border-top: 1px solid var(--nh-line-strong);
}

#gyik .nh-faq__item {
  box-sizing: border-box;
  border-inline-start: 3px solid transparent;
  border-bottom: 1px solid var(--nh-line-strong);
  background-color: transparent;
  transition: background-color var(--nh-transition), border-color var(--nh-transition);
}

#gyik .nh-faq__item[open] {
  border-inline-start-color: var(--nh-blue);
  background-color: var(--nh-faq-open-bg);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(9, 33, 58, 0.04);
}

#gyik .nh-faq__item>summary {
  display: flex;
  width: 100%;
  min-height: 4rem;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem;
  color: var(--nh-ink);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.4;
  list-style: none;
  cursor: pointer;
  transition: background-color var(--nh-transition);
}

#gyik .nh-faq__item>summary::-webkit-details-marker {
  display: none;
}

#gyik .nh-faq__item>summary::marker {
  content: "";
}

#gyik .nh-faq__item:not([open])>summary:hover {
  background-color: var(--nh-soft);
}

#gyik .nh-faq__question {
  min-width: 0;
  flex: 1 1 auto;
  overflow-wrap: anywhere;
  color: var(--nh-ink);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.4;
}

#gyik .nh-faq__toggle {
  position: relative;
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  flex: 0 0 1.5rem;
  color: var(--nh-blue);
}

#gyik .nh-faq__toggle::before,
#gyik .nh-faq__toggle::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.875rem;
  height: 2px;
  border-radius: 2px;
  background-color: currentColor;
  content: "";
  transform: translate(-50%, -50%);
}

#gyik .nh-faq__toggle::after {
  transform: translate(-50%, -50%) rotate(90deg);
  transition: opacity var(--nh-transition), transform var(--nh-transition);
}

#gyik .nh-faq__item[open] .nh-faq__toggle::after {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(90deg) scale(0.65);
}

#gyik .nh-faq__answer {
  padding: 0 1rem 1.25rem;
  color: var(--nh-body);
  font-size: 1rem;
  line-height: 1.65;
  overflow-wrap: anywhere;
}

#gyik .nh-faq__answer p {
  max-width: 65ch;
}

@supports (interpolate-size: allow-keywords) {
  #gyik .nh-faq__item {
    interpolate-size: allow-keywords;
  }

  #gyik .nh-faq__item::details-content {
    block-size: 0;
    overflow: clip;
    transition:
      block-size 280ms cubic-bezier(0.2, 0.7, 0.2, 1),
      content-visibility 280ms allow-discrete;
  }

  #gyik .nh-faq__item[open]::details-content {
    block-size: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  #gyik .nh-faq__item::details-content {
    transition: none !important;
  }
}

@container nh-faq (min-width: 64rem) {
  #gyik .nh-faq__layout {
    grid-template-columns: minmax(16rem, 0.85fr) minmax(0, 2.15fr);
    align-items: start;
    column-gap: clamp(3rem, 6vw, 5rem);
  }

  #gyik .nh-faq__list {
    justify-self: end;
  }
}

/* ---------- H8: A-kompozíció, publikus mailto és helyi űrlap ---------- */
#ajanlatkeres {
  --h8-field-border: #7e8d9e;
  --h8-error: #b42318;
  padding-block: 56px;
  background: var(--nc-color-ink-800, #202a33);
  color: var(--nc-color-text-on-dark, #fff);
}

#ajanlatkeres *,
#ajanlatkeres *::before,
#ajanlatkeres *::after {
  box-sizing: border-box;
  min-inline-size: 0;
}

#ajanlatkeres [hidden] {
  display: none !important;
}

#ajanlatkeres .nh-contact {
  container: h8 / inline-size;
}

#ajanlatkeres .h8-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}

#ajanlatkeres .h8-visual {
  min-inline-size: 0;
  color: var(--nc-color-text-on-dark, #fff);
}

#ajanlatkeres .h8-visual__scene {
  position: relative;
  isolation: isolate;
}

#ajanlatkeres .h8-visual__scene::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 16px -14px -14px 16px;
  background: linear-gradient(140deg, var(--nc-color-blue-700), var(--nc-color-ink-700));
  clip-path: polygon(12% 0, 100% 0, 100% 88%, 88% 100%, 0 100%, 0 12%);
  opacity: .7;
}

#ajanlatkeres .h8-visual__headline {
  position: absolute;
  z-index: 3;
  inset-block-start: clamp(16px, 3vw, 28px);
  inset-inline-start: clamp(16px, 3vw, 28px);
  width: min(88%, 26rem);
}

#ajanlatkeres .h8-visual .nh-h2 {
  color: var(--nc-color-text-on-dark, #fff);
  font-size: clamp(2.5rem, 3.15vw, 3rem);
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -.02em;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

#ajanlatkeres .h8-visual__media {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 14px;
  background: var(--nc-color-ink-800, #202a33);
}

#ajanlatkeres .h8-visual__media picture {
  display: block;
  width: 100%;
  height: 100%;
}

#ajanlatkeres .h8-visual__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

#ajanlatkeres .h8-visual__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgb(10 17 25 / .54) 0%, rgb(10 17 25 / .18) 38%, transparent 68%);
}

#ajanlatkeres .h8-visual__details {
  margin-top: 24px;
  padding-inline: 4px;
}

#ajanlatkeres p {
  margin: 0;
}

#ajanlatkeres .h8-lead {
  margin-top: 0;
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--nc-color-text-on-dark-muted, #d9e0e8);
}

#ajanlatkeres .h8-response {
  margin-top: 24px;
  padding-left: 12px;
  border-left: 3px solid var(--nc-color-blue-300, #8abef5);
  color: var(--nc-color-text-on-dark, #fff);
  font-weight: 700;
  line-height: 1.5;
}

#ajanlatkeres .h8-explanation {
  margin-top: 8px;
  color: var(--nc-color-text-on-dark-muted, #d9e0e8);
  line-height: 1.5;
}

#ajanlatkeres .h8-channels-title {
  margin-top: 24px;
  color: var(--nc-color-text-on-dark, #fff);
  font-weight: 700;
}

#ajanlatkeres .nh-contact__card,
#ajanlatkeres .h8-sheet {
  padding: 16px;
  border: 1px solid var(--nh-line);
  border-radius: 14px;
  background: #fff;
  color: var(--nh-ink);
  max-width: 52rem;
}

#ajanlatkeres .h8-sheet {
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.32), 0 0 0 1px rgba(255, 255, 255, 0.05);
}

#ajanlatkeres .nh-contact__card-title {
  font-size: 1.375rem;
  line-height: 1.3;
}

#ajanlatkeres .nh-contact__card .nh-btn {
  margin-top: 16px;
}

#ajanlatkeres .nh-contact__note {
  margin-top: 12px;
  font-size: .875rem;
  line-height: 1.5;
  color: var(--nh-muted);
}

#ajanlatkeres .nh-contact__channels {
  margin-top: 12px;
  border-top: 1px solid var(--nc-color-border-on-dark, rgb(255 255 255 / .14));
}

#ajanlatkeres .nh-contact__channel {
  display: grid;
  padding-top: 12px;
}

#ajanlatkeres .nh-contact__channel dt {
  font-size: .875rem;
  color: var(--nc-color-text-on-dark-muted, #d9e0e8);
}

#ajanlatkeres .nh-contact__channel a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--nc-color-blue-300, #8abef5);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  overflow-wrap: anywhere;
}

#ajanlatkeres .nh-contact__channel a:hover {
  color: var(--nc-color-text-on-dark, #fff);
  text-decoration-thickness: 2px;
}

#ajanlatkeres .h8-sheet {
  container: nh-form / inline-size;
}

#ajanlatkeres .h8-test-banner {
  padding: 12px;
  border-left: 3px solid var(--nh-blue);
  background: #eef3fc;
  font-size: .875rem;
  line-height: 1.5;
  margin-bottom: 20px;
}

#ajanlatkeres .h8-instruction {
  line-height: 1.6;
}

#ajanlatkeres .h8-context {
  margin: 20px 0 24px;
  padding: 16px;
  background: color-mix(in oklab, var(--nh-blue) 6%, #f3f5f7);
  border: 1px solid color-mix(in oklab, var(--nh-blue) 18%, transparent);
  border-radius: 10px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

#ajanlatkeres [data-h8-selected]:not(:empty),
#ajanlatkeres [data-h8-context-note]:not(:empty) {
  margin-top: 8px;
}

#ajanlatkeres form,
#ajanlatkeres fieldset {
  padding: 0;
  margin: 0;
  border: 0;
}

#ajanlatkeres fieldset+fieldset {
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid var(--nh-line);
}

#ajanlatkeres legend {
  float: left;
  width: 100%;
  padding: 0;
  margin-bottom: 16px;
  font-size: 1.125rem;
  line-height: 1.4;
  font-weight: 700;
  color: var(--nh-ink);
}

#ajanlatkeres .h8-fields {
  clear: both;
  display: grid;
  gap: 24px;
}

#ajanlatkeres .h8-pair {
  display: grid;
  gap: 24px 16px;
}

#ajanlatkeres .h8-field {
  display: grid;
  gap: 6px;
  align-content: start;
}

#ajanlatkeres label {
  display: block;
  margin-bottom: 2px;
  font-size: 1rem;
  line-height: 1.45;
  font-weight: 600;
  color: var(--nh-ink);
}

#ajanlatkeres input:not([type=hidden]),
#ajanlatkeres select,
#ajanlatkeres textarea {
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  border: 1px solid var(--h8-field-border);
  border-radius: 10px;
  background: #fff;
  color: var(--nh-ink);
  font: inherit;
  font-size: 1rem;
  line-height: 1.5;
  transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

#ajanlatkeres textarea {
  min-height: 144px;
  resize: vertical;
}

#ajanlatkeres input::placeholder,
#ajanlatkeres textarea::placeholder {
  color: var(--nh-muted);
  opacity: 1;
}

#ajanlatkeres input:hover:not(:focus),
#ajanlatkeres select:hover:not(:focus),
#ajanlatkeres textarea:hover:not(:focus) {
  border-color: var(--nh-ink);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

#ajanlatkeres :is(button, a, [tabindex]):focus-visible {
  outline: 3px solid var(--nh-focus);
  outline-offset: 3px;
}

#ajanlatkeres :is(input, select, textarea):focus-visible {
  outline: none;
  border-color: var(--nc-color-blue-500);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--nh-blue) 25%, transparent);
}

#ajanlatkeres .h8-help,
#ajanlatkeres .h8-error,
#ajanlatkeres .h8-legal {
  font-size: .875rem;
  line-height: 1.5;
  color: var(--nh-muted);
}

#ajanlatkeres #h8-rental-help {
  margin-top: 6px;
}

#ajanlatkeres .h8-legal {
  margin: 24px 0 16px;
}

#ajanlatkeres .h8-error,
#ajanlatkeres .h8-errors {
  color: var(--h8-error);
}

#ajanlatkeres [aria-invalid=true] {
  border-color: var(--h8-error);
}

#ajanlatkeres .h8-errors {
  border: 1px solid var(--h8-error);
  padding: 16px;
  margin-bottom: 24px;
  border-radius: 10px;
  line-height: 1.5;
}

#ajanlatkeres .h8-errors a {
  display: block;
  min-height: 44px;
  color: inherit;
  padding-block: 10px;
  overflow-wrap: anywhere;
}

#ajanlatkeres button {
  font: inherit;
  cursor: pointer;
  min-height: 44px;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

#ajanlatkeres [data-h8-general],
#ajanlatkeres [data-h8-reset] {
  margin-top: 12px;
  padding: 10px 14px;
  border: 1px solid var(--h8-field-border);
  border-radius: 10px;
  background: #fff;
  color: var(--nh-ink);
}

#ajanlatkeres [data-h8-submit] {
  min-height: 52px;
  font-size: 1rem;
  font-weight: 700;
  border-radius: 10px;
  transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

@media (hover: hover) {
  #ajanlatkeres [data-h8-submit]:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 22px rgba(24, 90, 219, 0.42);
  }
}

#ajanlatkeres :disabled {
  cursor: wait;
  opacity: .7;
}

#ajanlatkeres .h8-status:not(:empty) {
  margin-top: 12px;
  line-height: 1.5;
}

#ajanlatkeres .h8-status+.h8-help {
  margin-top: 12px;
}

#ajanlatkeres .h8-success {
  line-height: 1.6;
}

#ajanlatkeres .h8-success h3 {
  font-size: 1.375rem;
  margin-bottom: 16px;
}

@container h8 (min-width: 24rem) {

  #ajanlatkeres .h8-sheet,
  #ajanlatkeres .nh-contact__card {
    padding: 24px;
  }
}

@container h8 (min-width: 64rem) {
  #ajanlatkeres .h8-layout {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 48px;
  }
}

@container h8 (min-width: 68rem) {

  #ajanlatkeres .h8-sheet,
  #ajanlatkeres .nh-contact__card {
    padding: 32px;
  }
}

@container nh-form (min-width: 32rem) {
  #ajanlatkeres .h8-pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 6px;
  }

  #ajanlatkeres .h8-pair>.h8-field {
    grid-template-rows: subgrid;
    grid-row: span 4;
  }
}

@media (min-width: 48rem) {
  #ajanlatkeres {
    padding-block: 72px;
  }

  #ajanlatkeres .nh-h2 {
    font-size: 2.25rem;
  }

  #ajanlatkeres .h8-lead {
    font-size: 1.125rem;
  }
}

@media (min-width: 64rem) {
  #ajanlatkeres {
    padding-block: 88px;
  }
}

@media (max-width: 74.999rem) {
  #ajanlatkeres .h8-visual__scene {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  #ajanlatkeres .h8-visual__scene::before {
    inset: 12px -8px -8px 8px;
  }

  #ajanlatkeres .h8-visual__headline {
    position: relative;
    inset: auto;
    z-index: 2;
    order: 0;
    width: 100%;
  }

  #ajanlatkeres .h8-visual .nh-h2 {
    font-size: clamp(1.75rem, 4vw, 2rem);
    line-height: 1.15;
  }

  #ajanlatkeres .h8-visual__media {
    order: 1;
    aspect-ratio: 16 / 9;
  }

  #ajanlatkeres .h8-visual__media::after {
    background: linear-gradient(180deg, transparent 52%, rgb(10 17 25 / .2) 100%);
  }

  #ajanlatkeres .h8-visual__details {
    margin-top: 20px;
  }
}

@media (min-height: 64rem) and (prefers-reduced-motion: no-preference) {
  @container h8 (min-width: 64rem) {
    #ajanlatkeres .h8-visual {
      position: sticky;
      top: calc(var(--nc-header-measured, 88px) + 24px);
    }
  }
}

/* H8 imagery is now owned by the unified, fail-visible home motion controller. */
@media (prefers-reduced-motion: reduce) {
  #ajanlatkeres * {
    transition: none !important;
    scroll-behavior: auto !important;
  }

  #ajanlatkeres [data-h8-submit] {
    transform: none !important;
  }

  #ajanlatkeres .h8-visual__media {
    clip-path: none !important;
    animation: none !important;
  }

  #ajanlatkeres .h8-visual__scene::before {
    transform: none !important;
    animation: none !important;
  }
}

/* ---------- Töréspontok ---------- */


@media (min-width: 48rem) {
  .nh {
    --nh-gutter: 32px;
    --nh-section-y: 72px;
  }


}

@media (min-width: 64rem) {
  .nh {
    --nh-gutter: clamp(36px, 3.5vw, 48px);
    --nh-section-y: 88px;
  }


}

/*
 * Nagyított szöveg keskeny nézetben: az em-alapú lekérdezés a böngésző
 * alapbetűméretéhez viszonyít, ezért normál méretnél (16 px) csak 312 px alatt,
 * 150–200%-os szövegnél viszont 375 px-es telefonon is teljesül. Ilyenkor a
 * címek mérsékeltebben nőnek és elválaszthatók, hogy ne törjenek szó közben.
 */
@media (max-width: 19.5em) {

  /* H1: a nagyított főcím nem kicsinyül vissza; hosszú szónál elválasztható. */
  .nh-hero .nh-hero__title {
    hyphens: auto;
  }

  /* A H5 címei és számoszlopa saját .nh-process szabályt kapnak (H5.4/H5.5). */
  .nh-h2 {
    font-size: 1.125rem;
    hyphens: auto;
  }

  .nh .nh-secondary__heading,
  .nh .nh-secondary__path-title {
    hyphens: auto;
  }
}

@media (prefers-reduced-motion: reduce) {

  .nh *,
  .nh *::before,
  .nh *::after {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
}

/* ---------- H3/H8: állandó láthatóság, a küldési/adatkaputól külön ---------- */
#kiemelt-ajanlatok .nh-offers__preview-notice {
  margin-top: 24px;
  padding: 16px;
  border-left: 3px solid var(--nh-blue);
  background: var(--nh-white);
  color: var(--nh-body);
  font-size: .9375rem;
  line-height: 1.6;
}

#kiemelt-ajanlatok .nh-offers__preview-list {
  display: grid;
  gap: 24px;
  margin-top: 24px;
  grid-template-columns: minmax(0, 1fr);
}

#kiemelt-ajanlatok .nh-offers__preview-list>li {
  min-width: 0;
}

#kiemelt-ajanlatok .nh-offer--placeholder {
  display: flex;
  flex-direction: column;
  height: 100%;
}

#kiemelt-ajanlatok .nh-offer--placeholder .nh-offer__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
}

#kiemelt-ajanlatok .nh-offer--placeholder .nh-btn {
  margin-top: auto;
}

#kiemelt-ajanlatok .nh-offers__preview-media {
  display: grid;
  place-items: center;
  border-radius: 13px 13px 0 0;
  color: var(--nh-muted);
  font-size: .875rem;
}

#ajanlatkeres [data-h8-display] [data-h8-submit]:disabled {
  cursor: not-allowed;
}

@media (min-width: 64rem) {
  #kiemelt-ajanlatok .nh-offers__preview-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ---------- H3: kiemelt ajanlatok ---------- */
.nh-offers__head {
  max-width: 45rem;
}

.nh-offers__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 1.5rem;
  margin-top: 2rem;
}

.nh-offers__item {
  min-width: 0;
  container: nh-offer-card / inline-size;
}

.nh-offer {
  min-width: 0;
  border: 1px solid var(--nh-line);
  border-radius: var(--nh-radius);
  background: var(--nh-white);
  color: var(--nh-ink);
  box-shadow: 0 4px 16px rgba(9, 33, 58, 0.04);
  transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease;
}

@media (hover: hover) {
  .nh-offer:hover {
    transform: translateY(-2px);
    border-color: color-mix(in oklab, var(--nh-blue) 40%, var(--nh-line));
    box-shadow: 0 14px 32px rgba(9, 33, 58, 0.09), 0 0 0 1px color-mix(in oklab, var(--nh-blue) 16%, transparent);
  }
}

.nh-offer__media {
  min-width: 0;
  aspect-ratio: 8 / 5;
  background: var(--nh-soft);
  overflow: hidden;
  border-radius: 13px 13px 0 0;
}

.nh-offer__img {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  aspect-ratio: 8 / 5;
  border-radius: 13px 13px 0 0;
  object-fit: cover;
  transition: transform 300ms ease;
}

@media (hover: hover) {
  .nh-offer:hover .nh-offer__img {
    transform: scale(1.025);
  }
}

.nh-offer__img--contain {
  object-fit: contain;
  background: var(--nh-soft);
}

.nh-offer__body {
  min-width: 0;
  padding: 1.5rem;
}

.nh-offer__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.nh-offer__type,
.nh-offer__status {
  display: inline-flex;
  align-items: center;
  min-height: 1.75rem;
  padding: 0.25rem 0.625rem;
  border-radius: var(--nc-radius-pill, 999px);
  font-size: 0.8125rem;
  line-height: 1.3;
  letter-spacing: 0.01em;
}

.nh-offer__type {
  background: color-mix(in oklab, var(--nh-blue) 9%, var(--nh-white));
  color: var(--nh-ink);
  border: 1px solid color-mix(in oklab, var(--nh-blue) 22%, transparent);
  font-weight: 600;
}

.nh-offer__status {
  background: var(--nc-color-gray-100);
  border: 1px solid var(--nc-color-border);
  color: var(--nh-body);
  font-weight: 500;
}

.nh-offer__title {
  margin-top: 0.75rem;
  color: var(--nh-ink);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
}

.nh-offer__facts {
  display: flex;
  flex-wrap: wrap;
  margin-top: 0.5rem;
  color: var(--nh-muted);
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.5;
}

.nh-offer__fact+.nh-offer__fact::before {
  content: "·" / "";
  margin-inline: 0.375rem;
}

.nh-offer__price {
  min-width: 0;
  margin-top: 1.25rem;
}

.nh-offer__label {
  color: var(--nh-muted);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
}

.nh-offer__amount-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.5rem;
}

.nh-offer__amount {
  color: var(--nc-color-ink-900);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.nh-offer__unit {
  color: var(--nh-muted);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
}

.nh-offer__terms,
.nh-offer__note,
.nh-offer__rate-meta {
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.5;
}

.nh-offer__terms {
  margin-top: 0.75rem;
  color: var(--nh-body);
}

.nh-offer__term {
  white-space: nowrap;
}

/* Keep normal 320px+ cards unchanged; enlarged text must not be clipped
   when its card is narrower than sixteen root-font units. */
@container nh-offer-card (max-width: 16rem) {
  .nh-offer__term {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

.nh-offer__note {
  margin-top: 0.5rem;
  color: var(--nh-muted);
}

.nh-offer__rates {
  min-width: 0;
  container: nh-offer-rates / inline-size;
}

.nh-offer__rates-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.nh-offer__rate {
  min-width: 0;
}

/* Egymás alatti tarifák: 12 px + 1 px vonal + 12 px; első felül, utolsó alul padding nélkül (H3.4). */
.nh-offer__rate:not(:last-child) {
  padding-bottom: 0.75rem;
}

.nh-offer__rate+.nh-offer__rate {
  padding-top: 0.75rem;
  border-top: 1px solid var(--nh-line);
}

.nh-offer__rate-meta {
  margin-top: 0.5rem;
  color: var(--nh-muted);
}

.nh-offer__actions {
  display: grid;
  gap: 0.25rem;
  margin-top: 1.5rem;
}

.nh-offer__cta {
  width: 100%;
  margin-top: 0;
}

.nh-offers .nh-offer__more {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--nh-link);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  cursor: pointer;
  transition: color var(--nh-transition), background-color var(--nh-transition);
}

.nh-offers .nh-offer__more:hover {
  color: var(--nh-ink);
  background: color-mix(in oklab, var(--nh-blue) 6%, transparent);
  text-decoration-thickness: 1.5px;
}

@media (prefers-reduced-motion: reduce) {

  .nh-offer,
  .nh-offers .nh-offer__more {
    transition: none;
  }
}

.nh-offers button:focus-visible,
.nh-offer-dialog button:focus-visible {
  outline: 3px solid var(--nh-focus);
  outline-offset: 3px;
  border-radius: 4px;
}

.nh-offers__foot {
  margin-top: 2rem;
}

@container nh-offer-card (max-width: 21.99rem) {
  .nh-offer__body {
    padding: 1.25rem;
  }

  .nh-offer__amount {
    font-size: 1.5rem;
    line-height: 1.2;
  }
}

@container nh-offer-card (min-width: 22rem) {
  .nh-offer__amount {
    font-size: 1.75rem;
    line-height: 1.15;
  }
}

@container nh-offer-card (min-width: 23rem) {
  .nh-offer__title {
    font-size: 1.375rem;
  }
}

@container nh-offer-card (min-width: 40rem) {
  .nh-offer {
    display: grid;
    grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
    align-items: start;
  }

  .nh-offer__media {
    grid-column: 1;
    grid-row: 1;
  }

  .nh-offer__img {
    border-radius: 13px 0 0 13px;
  }

  .nh-offer__body {
    grid-column: 2;
    grid-row: 1;
    padding: 2rem 2.5rem;
  }
}

@container nh-offer-rates (min-width: 34rem) {
  .nh-offer__rates-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 1.5rem;
  }

  .nh-offer__rate:not(:last-child) {
    padding-bottom: 0;
  }

  .nh-offer__rate+.nh-offer__rate {
    padding: 0 0 0 1.5rem;
    border-top: 0;
    border-left: 1px solid var(--nh-line);
  }
}

@media (min-width: 48rem) {
  .nh-offers__list {
    margin-top: 2.5rem;
  }
}

@media (min-width: 64rem) {
  .nh-offers__list[data-count="2"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(4, auto);
    grid-auto-flow: row;
    align-content: start;
    column-gap: 2rem;
    row-gap: 0;
  }

  .nh-offers__list[data-count="2"]>.nh-offers__item {
    container-type: normal;
    container-name: none;
  }

  .nh-offers__list[data-count="2"] .nh-offer__title {
    font-size: 1.375rem;
  }

  .nh-offers__list[data-count="2"] .nh-offer__amount {
    font-size: 1.75rem;
    line-height: 1.15;
  }

  .nh-offers__list[data-count="2"]>.nh-offers__item,
  .nh-offers__list[data-count="2"]>.nh-offers__item>.nh-offer {
    display: grid;
    grid-row: span 4;
    grid-template-rows: subgrid;
  }

  .nh-offers__list[data-count="2"] .nh-offer__media {
    grid-row: 1;
  }

  .nh-offers__list[data-count="2"] .nh-offer__body {
    display: contents;
  }

  .nh-offers__list[data-count="2"] .nh-offer__head {
    grid-row: 2;
    padding: 1.5rem 1.5rem 0;
  }

  .nh-offers__list[data-count="2"] .nh-offer__price {
    grid-row: 3;
    padding-inline: 1.5rem;
  }

  .nh-offers__list[data-count="2"] .nh-offer__actions {
    grid-row: 4;
    width: calc(100% - 3rem);
    margin: 1.5rem 1.5rem;
  }
}

@media (min-width: 75rem) {
  .nh-offers__list[data-count="3"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(4, auto);
    grid-auto-flow: row;
    align-content: start;
    column-gap: 2rem;
    row-gap: 0;
  }

  .nh-offers__list[data-count="3"]>.nh-offers__item {
    container-type: normal;
    container-name: none;
  }

  .nh-offers__list[data-count="3"] .nh-offer__amount {
    font-size: 1.75rem;
    line-height: 1.15;
  }

  .nh-offers__list[data-count="3"]>.nh-offers__item,
  .nh-offers__list[data-count="3"]>.nh-offers__item>.nh-offer {
    display: grid;
    grid-row: span 4;
    grid-template-rows: subgrid;
  }

  .nh-offers__list[data-count="3"] .nh-offer__media {
    grid-row: 1;
  }

  .nh-offers__list[data-count="3"] .nh-offer__body {
    display: contents;
  }

  .nh-offers__list[data-count="3"] .nh-offer__head {
    grid-row: 2;
    padding: 1.5rem 1.5rem 0;
  }

  .nh-offers__list[data-count="3"] .nh-offer__price {
    grid-row: 3;
    padding-inline: 1.5rem;
  }

  .nh-offers__list[data-count="3"] .nh-offer__actions {
    grid-row: 4;
    width: calc(100% - 3rem);
    margin: 1.5rem 1.5rem;
  }
}

@supports not (grid-template-rows: subgrid) {
  @media (min-width: 64rem) {
    .nh-offers__list[data-count="2"] {
      grid-template-rows: none;
      grid-auto-flow: row;
      grid-auto-rows: 1fr;
      row-gap: 2rem;
    }

    .nh-offers__list[data-count="2"]>.nh-offers__item,
    .nh-offers__list[data-count="2"]>.nh-offers__item>.nh-offer {
      display: block;
      grid-row: auto;
      grid-template-rows: none;
    }

    .nh-offers__list[data-count="2"]>.nh-offers__item>.nh-offer {
      display: flex;
      flex-direction: column;
    }

    .nh-offers__list[data-count="2"] .nh-offer__body {
      display: flex;
      flex: 1;
      flex-direction: column;
      grid-row: auto;
      grid-template-rows: none;
    }

    .nh-offers__list[data-count="2"] .nh-offer__actions {
      margin-top: auto;
    }
  }

  @media (min-width: 75rem) {
    .nh-offers__list[data-count="3"] {
      grid-template-rows: none;
      grid-auto-flow: row;
      grid-auto-rows: 1fr;
      row-gap: 2rem;
    }

    .nh-offers__list[data-count="3"]>.nh-offers__item,
    .nh-offers__list[data-count="3"]>.nh-offers__item>.nh-offer {
      display: block;
      grid-row: auto;
      grid-template-rows: none;
    }

    .nh-offers__list[data-count="3"]>.nh-offers__item>.nh-offer {
      display: flex;
      flex-direction: column;
    }

    .nh-offers__list[data-count="3"] .nh-offer__body {
      display: flex;
      flex: 1;
      flex-direction: column;
      grid-row: auto;
      grid-template-rows: none;
    }

    .nh-offers__list[data-count="3"] .nh-offer__actions {
      margin-top: auto;
    }
  }

  @media (min-width: 64rem) {

    .nh-offers__list[data-count="2"] .nh-offer__head,
    .nh-offers__list[data-count="3"] .nh-offer__head {
      padding: 0;
    }

    .nh-offers__list[data-count="2"] .nh-offer__price,
    .nh-offers__list[data-count="3"] .nh-offer__price {
      padding-inline: 0;
    }

    .nh-offers__list[data-count="2"] .nh-offer__actions,
    .nh-offers__list[data-count="3"] .nh-offer__actions {
      width: 100%;
      margin: auto 0 0;
    }

    .nh-offers__list[data-count="2"] .nh-offer__cta,
    .nh-offers__list[data-count="3"] .nh-offer__cta {
      width: 100%;
      margin: 0;
    }
  }
}

/* ---------- H3: részletek és feltételek natív dialog ---------- */
.nh-offer-dialog {
  position: fixed;
  inset: 0;
  box-sizing: border-box;
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  border: 0;
  border-radius: 0;
  overflow: hidden;
  background: transparent;
  color: var(--nh-ink);
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.6;
}

.nh-offer-dialog::backdrop {
  background: var(--nc-color-overlay);
}

/* Flexoszlop: a törzs zsugorodik és görget, ha a tartalom eléri a magassági korlátot. */
.nh-offer-dialog__surface {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: var(--nh-white);
  color: var(--nh-ink);
}

.nh-offer-dialog__header,
.nh-offer-dialog__footer {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  min-width: 0;
  background: var(--nh-white);
}

.nh-offer-dialog__header {
  justify-content: space-between;
  gap: 16px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--nh-line);
}

.nh-offer-dialog__title {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--nh-ink);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.nh-offer-dialog__close {
  display: inline-flex;
  flex: 0 0 44px;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--nh-line-strong);
  border-radius: var(--nh-radius-sm);
  background: var(--nh-white);
  color: var(--nh-ink);
  cursor: pointer;
  transition: background-color var(--nh-transition);
}

.nh-offer-dialog__close:hover {
  background: var(--nh-soft);
}

.nh-offer-dialog__close-icon {
  display: block;
  width: 20px;
  height: 20px;
}

.nh-offer-dialog__body {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 20px;
  background: var(--nh-white);
}

.nh-offer-dialog__content,
.nh-offer-dialog__main,
.nh-offer-dialog__summary,
.nh-offer-dialog__media,
.nh-offer-dialog__details {
  min-width: 0;
}

.nh-offer-dialog__media {
  width: 100%;
}

.nh-offer-dialog__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 8 / 5;
  border-radius: 8px;
  background: var(--nh-soft);
  object-fit: cover;
}

.nh-offer-dialog__image.nh-offer__img--contain {
  object-fit: contain;
}

.nh-offer-dialog__gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.nh-offer-dialog__thumb {
  display: block;
  flex: 0 0 72px;
  width: 72px;
  height: 45px;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--nh-line);
  border-radius: 4px;
  background: var(--nh-white);
  cursor: pointer;
}

.nh-offer-dialog__thumb[aria-pressed="true"] {
  border: 2px solid var(--nh-ink);
}

.nh-offer-dialog__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.nh-offer-dialog__summary {
  margin-top: 24px;
}

.nh-offer-dialog__data {
  container: nh-offer-dialog-data / inline-size;
  display: grid;
  gap: 8px;
  margin-top: 20px;
}

.nh-offer-dialog__data-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px 12px;
  min-width: 0;
}

.nh-offer-dialog__data-label {
  color: var(--nh-muted);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
}

.nh-offer-dialog__data-value {
  min-width: 0;
  color: var(--nh-body);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.nh-offer-dialog__section {
  min-width: 0;
  margin-top: 24px;
}

.nh-offer-dialog__section-title {
  margin: 0;
  color: var(--nh-ink);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
}

.nh-offer-dialog__section--price>.nh-offer__price {
  margin-top: 12px;
}

.nh-offer-dialog__copy,
.nh-offer-dialog__list {
  margin-top: 8px;
  color: var(--nh-body);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
}

.nh-offer-dialog__list {
  padding: 0;
  list-style: none;
}

.nh-offer-dialog__list-item+.nh-offer-dialog__list-item {
  margin-top: 4px;
}

.nh-offer-dialog__footer {
  justify-content: stretch;
  padding: 12px 20px;
  border-top: 1px solid var(--nh-line);
}

.nh-offer-dialog__cta {
  width: 100%;
  min-height: 48px;
  margin: 0;
}

@container nh-offer-dialog-data (min-width: 22rem) {
  .nh-offer-dialog__data-row {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    align-items: baseline;
  }
}

@media (min-width: 40rem) {
  .nh-offer-dialog__details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 32px;
    row-gap: 0;
  }
}

@media (min-width: 48rem) {
  .nh-offer-dialog {
    inset: 0;
    width: min(60rem, calc(100vw - 64px));
    /* Tartalomhoz igazodó magasság, csak felső korláttal (H3.7, H3.13). */
    height: fit-content;
    max-height: calc(100dvh - 64px);
    margin: auto;
    padding: 0;
    border: 1px solid var(--nh-line);
    border-radius: var(--nh-radius);
    overflow: hidden;
    background: var(--nh-white);
  }

  .nh-offer-dialog__surface {
    height: auto;
    max-height: calc(100dvh - 66px);
  }

  .nh-offer-dialog__header {
    padding: 20px 32px;
  }

  .nh-offer-dialog__title {
    font-size: 1.5rem;
    line-height: 1.25;
  }

  .nh-offer-dialog__body {
    padding: 32px;
  }

  .nh-offer-dialog__footer {
    justify-content: flex-end;
    padding: 16px 32px;
  }

  .nh-offer-dialog__cta {
    width: auto;
  }
}

@media (min-width: 64rem) {
  .nh-offer-dialog__main {
    display: grid;
    grid-template-columns: minmax(0, 11fr) minmax(0, 9fr);
    align-items: start;
    gap: 32px;
  }

  .nh-offer-dialog__summary {
    margin-top: 0;
  }

  .nh-offer-dialog__details {
    margin-top: 32px;
    padding-top: 32px;
    border-top: 1px solid var(--nh-line);
  }
}

@media (max-height: 30rem) {
  .nh-offer-dialog {
    height: auto;
    min-height: 100dvh;
    max-height: none;
    overflow-y: auto;
  }

  .nh-offer-dialog__surface {
    display: block;
    height: auto;
    min-height: 100dvh;
    max-height: none;
    overflow: visible;
  }

  .nh-offer-dialog__body {
    overflow: visible;
  }
}

@media (prefers-reduced-motion: reduce) {

  .nh-offer-dialog *,
  .nh-offer-dialog *::before,
  .nh-offer-dialog *::after {
    transition: none !important;
  }
}

/* Mobil összetömörítés és arányrendezés: csak a 48rem alatti főoldali ritmus. */
@media (max-width: 47.999rem) {
  .nh {
    --nh-gutter: 18px;
    --nh-section-y: clamp(2.25rem, 6vw, 2.75rem);
  }

  .nh-eyebrow {
    gap: 8px;
    margin-bottom: 8px;
    font-size: 0.75rem;
  }

  .nh-eyebrow::before {
    width: 18px;
  }

  .nh-h2,
  .nh .nh-process__title,
  #gyik .nh-faq__heading,
  .nh .nh-personal__heading,
  .nh .nh-secondary__heading {
    font-size: clamp(1.5rem, 5.2vw, 1.875rem);
    line-height: 1.18;
  }

  .nh-lead,
  .nh-personal__intro,
  .nh-process__intro,
  #gyik .nh-faq__lead,
  .nh-secondary__intro {
    margin-top: 0.625rem;
    font-size: 0.96875rem;
    line-height: 1.55;
  }

  /* H1 Hero: mobilon a fő CTA gomb rejtett, a tartalom és kép aránya kiegyensúlyozott */
  .nh-hero__inner {
    padding: 1.5rem var(--nh-hero-pad-x) 1.25rem;
  }

  .nh-hero__eyebrow {
    font-size: 0.75rem;
    letter-spacing: 0.075em;
    line-height: 1.4;
  }

  .nh-hero .nh-hero__title {
    margin-top: 0.5rem;
    font-size: clamp(1.75rem, 6.2vw, 2.25rem);
    line-height: 1.14;
  }

  .nh-hero__lead {
    margin-top: 0.75rem;
    font-size: 0.96875rem;
    line-height: 1.55;
  }

  .nh-hero .nh-hero__cta {
    display: none;
  }

  .nh-hero__actions {
    margin-top: 1rem;
    gap: 0.25rem;
  }

  .nh-hero .nh-hero__secondary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    width: fit-content;
    min-height: 2.75rem;
    padding: 0.5rem 0.875rem;
    border: 1px solid rgba(147, 197, 253, 0.28);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.045);
    color: var(--nh-hero-fg);
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration-line: none;
  }

  .nh-hero .nh-hero__secondary::after {
    content: "→";
    color: var(--nh-hero-accent);
    font-weight: 700;
    line-height: 1;
  }

  .nh-hero__response {
    margin-top: 0.625rem;
    font-size: 0.8125rem;
    line-height: 1.45;
  }

  .nh-hero__media {
    aspect-ratio: 16 / 10;
  }

  #gyik.nh-faq-section {
    padding-block: clamp(2.25rem, 6vw, 2.75rem);
  }

  #havidij .nh-base__head {
    margin-bottom: 1.25rem;
  }

  #havidij .nh-base__list {
    gap: 0.75rem;
  }

  #havidij .nh-base__item {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0.9375rem;
    border-radius: 12px;
  }

  #havidij .nh-base__summary {
    width: 100%;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 0.5rem;
  }

  #havidij .nh-base__art {
    width: 2.5rem;
    height: 2.5rem;
  }

  #havidij .nh-base__title {
    font-size: 1.0625rem;
    line-height: 1.28;
  }

  #havidij .nh-base__panel {
    margin-top: 0.5rem;
  }

  #havidij .nh-base__panel-text {
    font-size: 0.875rem;
    line-height: 1.5;
  }

  #havidij .nh-base__extras {
    margin-top: 1rem;
    font-size: 0.9375rem;
    line-height: 1.55;
  }

  #havidij .nh-base__spec {
    margin-top: 1.5rem;
    padding: 1.25rem 1.125rem;
    border-radius: 12px;
  }

  #havidij .nh-base__spec-title {
    margin-bottom: 0.875rem;
    font-size: 1.0625rem;
  }

  #havidij .nh-base__facts {
    column-gap: 0.875rem;
    row-gap: 0.875rem;
  }

  #havidij .nh-base__fact {
    gap: 0.25rem;
    padding-top: 0.625rem;
  }

  #havidij .nh-base__fact dd {
    font-size: 1.375rem;
    line-height: 1.15;
  }

  #havidij .nh-base__fact dt {
    font-size: 0.8125rem;
    line-height: 1.35;
  }

  #havidij .nh-base__fact:last-child {
    flex-direction: column;
  }

  #havidij .nh-base__fact:last-child dd {
    font-size: 0.96875rem;
    font-weight: 600;
    letter-spacing: normal;
    line-height: 1.38;
  }

  #havidij .nh-base__fact-mobile-note {
    display: block;
    margin-top: 0.2rem;
    color: var(--nc-color-text-on-dark-muted);
    font-size: 0.8125rem;
    font-weight: 400;
    font-variant-numeric: normal;
    line-height: 1.38;
  }

  #havidij .nh-base__spec-note {
    margin-top: 1rem;
    font-size: 0.9375rem;
    line-height: 1.5;
  }

  #havidij .nh-section-foot {
    margin-top: 1rem;
  }

  #kiemelt-ajanlatok .nh-offers__list {
    margin-top: 1.25rem;
    row-gap: 1rem;
  }

  #kiemelt-ajanlatok .nh-offers__preview-list {
    gap: 1rem;
    margin-top: 1rem;
  }

  #kiemelt-ajanlatok .nh-offers__preview-notice {
    margin-top: 1rem;
    padding: 0.75rem 0.875rem;
    border-radius: 0 8px 8px 0;
    font-size: 0.875rem;
    line-height: 1.5;
  }

  #kiemelt-ajanlatok .nh-offer {
    border-radius: 12px;
  }

  #kiemelt-ajanlatok .nh-offer__media,
  #kiemelt-ajanlatok .nh-offer__img {
    aspect-ratio: 16 / 10;
    border-radius: 11px 11px 0 0;
  }

  #kiemelt-ajanlatok .nh-offer__body {
    padding: 1.125rem;
  }

  #kiemelt-ajanlatok .nh-offer__title {
    margin-top: 0.5rem;
    font-size: 1.1875rem;
    line-height: 1.28;
  }

  #kiemelt-ajanlatok .nh-offer__amount {
    font-size: 1.5rem;
    line-height: 1.15;
  }

  #kiemelt-ajanlatok .nh-offer__price {
    margin-top: 0.875rem;
  }

  #kiemelt-ajanlatok .nh-offer__terms {
    margin-top: 0.375rem;
    font-size: 0.875rem;
  }

  #kiemelt-ajanlatok .nh-offer__actions {
    margin-top: 1rem;
  }

  #kiemelt-ajanlatok .nh-offer .nh-btn {
    width: 100%;
    min-height: 3rem;
    padding: 0.6875rem 1.25rem;
    font-size: 0.96875rem;
  }

  #kiemelt-ajanlatok .nh-offer--placeholder .nh-offer__body {
    gap: 0.75rem;
  }

  #kiemelt-ajanlatok .nh-offers__foot {
    margin-top: 1rem;
  }

  /* H4 Személyes ügyintézés mobilos arányok */
  .nh-personal__layout {
    row-gap: 1.5rem;
  }

  .nh-personal__list {
    margin-top: 1.125rem;
  }

  .nh-personal__item {
    padding: 0.875rem 0.25rem;
  }

  .nh .nh-personal__item-title {
    font-size: 1.0625rem;
    line-height: 1.3;
  }

  .nh-personal__item-text,
  .nh-personal__note,
  .nh-personal__response {
    font-size: 0.9375rem;
    line-height: 1.55;
  }

  .nh-personal__note,
  .nh-personal__actions {
    margin-top: 1.125rem;
  }

  .nh .nh-personal__cta {
    min-height: 3rem;
    font-size: 0.96875rem;
  }

  .nh-personal__figure {
    max-width: 100%;
  }

  .nh-personal__media--graphic {
    aspect-ratio: 16 / 10;
    border-radius: 12px;
  }

  .nh-personal__media--graphic svg {
    max-width: 12.5rem;
  }

  .nh-personal__caption {
    margin-top: 1rem;
  }

  .nh-personal__name {
    font-size: 1.125rem;
  }

  .nh-personal__role {
    margin-top: 0.25rem;
    font-size: 0.9375rem;
  }

  /* H5 Folyamat mobilos arányok */
  .nh-process .nh-steps {
    --nh-step-num-w: 2.75rem;
    --nh-step-num-h: 2.75rem;
    --nh-step-num-size: 1.75rem;
    --nh-step-col-gap: 0.875rem;
    margin-top: 1.5rem;
  }

  .nh-process .nh-step {
    padding-bottom: 1.5rem;
  }

  .nh .nh-process .nh-step__title {
    font-size: 1.0625rem;
  }

  .nh-process .nh-step__text {
    margin-top: 0.375rem;
    font-size: 0.9375rem;
    line-height: 1.55;
  }

  /* H6 Másodlagos utak mobilos arányok */
  .nh-secondary__panel {
    padding: 1.375rem 1.125rem;
    row-gap: 1.25rem;
    border-radius: 12px;
  }

  .nh-secondary__path+.nh-secondary__path {
    margin-top: 1.125rem;
    padding-top: 1.125rem;
  }

  .nh .nh-secondary__path-title {
    font-size: 1.125rem;
  }

  .nh-secondary__text {
    margin-top: 0.375rem;
    font-size: 0.9375rem;
    line-height: 1.55;
  }

  .nh .nh-secondary__link {
    margin-top: 0.5rem;
    font-size: 0.9375rem;
  }

  /* H7 GYIK mobilos arányok */
  #gyik .nh-faq__layout {
    gap: 1.25rem;
  }

  #gyik .nh-faq__heading {
    max-width: none;
  }

  #gyik .nh-faq__item>summary {
    min-height: 3.5rem;
    padding: 0.875rem 0.75rem;
    gap: 0.75rem;
    font-size: 1rem;
  }

  #gyik .nh-faq__question {
    font-size: 1rem;
    line-height: 1.38;
  }

  #gyik .nh-faq__answer {
    padding: 0 0.75rem 1rem;
    font-size: 0.9375rem;
    line-height: 1.58;
  }

  /* H8 Ajánlatkérő mobilos arányok */
  #ajanlatkeres {
    padding-block: clamp(2.25rem, 6vw, 2.75rem);
  }

  #ajanlatkeres .h8-layout {
    gap: 1.5rem;
  }

  #ajanlatkeres .h8-visual .nh-h2 {
    font-size: clamp(1.5rem, 5.4vw, 1.875rem);
    line-height: 1.16;
  }

  #ajanlatkeres .h8-lead {
    font-size: 0.96875rem;
    line-height: 1.55;
  }

  #ajanlatkeres .h8-response,
  #ajanlatkeres .h8-explanation {
    font-size: 0.9375rem;
  }

  #ajanlatkeres .h8-visual__details {
    margin-top: 1rem;
  }

  #ajanlatkeres .h8-response,
  #ajanlatkeres .h8-channels-title {
    margin-top: 1rem;
  }

  #ajanlatkeres .h8-sheet {
    padding: 1.25rem 1rem;
    border-radius: 12px;
  }

  #ajanlatkeres .h8-context {
    margin-block: 0.875rem;
    padding: 0.875rem;
    font-size: 0.9375rem;
  }

  #ajanlatkeres .h8-test-banner {
    margin-bottom: 0.875rem;
    padding: 0.625rem 0.75rem;
    font-size: 0.8125rem;
  }

  #ajanlatkeres fieldset+fieldset {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
  }

  #ajanlatkeres legend {
    margin-bottom: 0.75rem;
    font-size: 1.0625rem;
  }

  #ajanlatkeres label {
    font-size: 0.9375rem;
  }

  #ajanlatkeres input:not([type=hidden]),
  #ajanlatkeres select,
  #ajanlatkeres textarea {
    min-height: 48px;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 1rem;
  }

  #ajanlatkeres textarea {
    min-height: 116px;
  }

  #ajanlatkeres .h8-fields {
    gap: 0.875rem;
  }

  #ajanlatkeres .h8-pair {
    row-gap: 0.875rem;
  }

  #ajanlatkeres .h8-legal {
    margin: 1.125rem 0 0.75rem;
    font-size: 0.8125rem;
  }

  #ajanlatkeres [data-h8-submit] {
    min-height: 48px;
    width: calc(100% - 4.5rem);
    margin-left: 4.5rem;
  }
}

@media (min-width: 22.5rem) and (max-width: 47.999rem) {
  #havidij .nh-base__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
}

@media (min-width: 48rem) {
  #havidij .nh-base__fact:last-child dd {
    font-size: 1.125rem;
    line-height: 1.3;
  }

  #havidij .nh-base__fact-mobile-note {
    display: block;
    margin-bottom: 4px;
    color: var(--nc-color-text-on-dark-muted);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: normal;
    line-height: 1.3;
  }
}