/* MON — OETP 2026 Q4 campaign (GO-LIVE 37). Own design system, prefix "q4-". Black / graphite / off-white / red. */
:root {
	--q4-black: #0b0b0d;
	--q4-graphite: #17181c;
	--q4-steel: #26282e;
	--q4-line: #34363d;
	--q4-off: #f3f1ec;
	--q4-paper: #fbfaf7;
	--q4-mute: #9b9ea6;
	--q4-red: #e2231a;
	--q4-red-d: #b81810;
	--q4-r: 14px;
	--q4-font: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body.q4 { margin: 0; background: var(--q4-off); color: var(--q4-black); font: 16px/1.55 var(--q4-font); }
.q4 a { color: inherit; }
.q4 img, .q4 svg { max-width: 100%; }
.q4-wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.q4 h1, .q4 h2, .q4 h3, .q4 h4 { margin: 0; letter-spacing: -0.02em; line-height: 1.08; }
.q4 h2 { font-size: clamp(1.7rem, 4.6vw, 2.6rem); font-weight: 800; margin-bottom: 18px; }
.q4-small { font-size: 0.86rem; color: #55585f; }

.q4-preview { position: sticky; top: 0; z-index: 30; background: var(--q4-red); color: #fff; font-weight: 700; font-size: 0.8rem; letter-spacing: 0.06em; text-align: center; padding: 7px 12px; }

/* Top bar */
.q4-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; background: var(--q4-black); color: #fff; }
.q4-brand { display: flex; align-items: baseline; gap: 10px; text-decoration: none; }
.q4-brand-mark { font-weight: 900; font-size: 1.55rem; letter-spacing: 0.06em; padding-right: 10px; border-right: 3px solid var(--q4-red); }
.q4-brand-sub { font-size: 0.78rem; color: var(--q4-mute); letter-spacing: 0.08em; text-transform: uppercase; }
/* Approved MON wordmark (same as the homepage header: M·O·N, red O) — 2026-10-21 replaces the text-only "MONKFT" mark. */
.q4-brand--mon { align-items: center; gap: 13px; }
.q4-brand-logo { font-weight: 900; font-size: 29px; line-height: 1; letter-spacing: -2px; color: #fff; }
.q4-brand-logo span { color: var(--q4-red); }
.q4-brand--mon .q4-brand-sub { font-size: 9px; letter-spacing: 0.06em; color: #bbb; }
.q4-top-call { text-decoration: none; font-weight: 700; font-size: 0.95rem; white-space: nowrap; }
.q4-top-call span { color: var(--q4-mute); font-weight: 500; margin-right: 4px; }
@media (max-width: 520px) { .q4-brand-sub, .q4-top-call span { display: none; } }

/* Buttons */
.q4-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 26px; border-radius: 999px; font-weight: 800; font-size: 1rem; text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: transform .15s, background .15s; }
.q4-btn:hover { transform: translateY(-1px); }
.q4-btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 6px var(--q4-red); }
.q4-btn--red { background: var(--q4-red); color: #fff !important; }
.q4-btn--red:hover { background: var(--q4-red-d); }
.q4-btn--ghost { border-color: #fff; color: #fff !important; }
.q4-btn--block { width: 100%; }
.q4-btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }

/* Hero */
.q4-hero { background: radial-gradient(120% 90% at 85% 10%, #2a2c33 0%, var(--q4-graphite) 45%, var(--q4-black) 100%); color: #fff; padding: 56px 0 64px; overflow: hidden; }
.q4-hero-grid { display: grid; gap: 32px; align-items: center; }
@media (min-width: 900px) { .q4-hero-grid { grid-template-columns: 1.15fr 0.85fr; } }
.q4-kicker { color: var(--q4-red); font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.8rem; margin: 0 0 14px; }
.q4-hero h1 { font-size: clamp(2.4rem, 8vw, 4.6rem); font-weight: 900; }
.q4-lead { font-size: clamp(1.05rem, 2.4vw, 1.25rem); color: #d7d8dc; max-width: 36em; margin: 18px 0 26px; }
.q4-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.q4-chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 26px 0 0; }
.q4-chips li { border: 1px solid var(--q4-line); border-radius: 999px; padding: 6px 14px; font-size: 0.85rem; color: #e6e6e8; }
.q4-chips li::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--q4-red); margin-right: 8px; vertical-align: 1px; }
.q4-hero-art { background: linear-gradient(160deg, #24262c, #101114); border: 1px solid var(--q4-line); border-radius: 24px; padding: 28px; }
.q4-dev { display: block; width: 100%; height: auto; }

/* Packages */
.q4-packages { padding: 64px 0; }
.q4-tabs { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 28px; scrollbar-width: thin; }
.q4-tabs a { flex: 0 0 auto; text-decoration: none; background: var(--q4-black); color: #fff; border-radius: var(--q4-r); padding: 12px 18px; font-weight: 800; font-size: 0.95rem; }
.q4-tabs a small { display: block; font-weight: 500; color: var(--q4-mute); font-size: 0.76rem; }
.q4-group { margin-bottom: 44px; scroll-margin-top: 60px; }
.q4-group h3 { font-size: 1.35rem; margin-bottom: 16px; }
.q4-group h3 span { font-weight: 500; color: #6a6d74; font-size: 0.95rem; margin-left: 6px; }
.q4-grid { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 680px) { .q4-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .q4-grid { grid-template-columns: repeat(3, 1fr); } }
.q4-card { position: relative; display: flex; flex-direction: column; gap: 14px; background: var(--q4-paper); border: 1px solid #e2dfd8; border-radius: 20px; padding: 18px 18px 20px; box-shadow: 0 1px 0 rgba(0,0,0,.03); }
.q4-card.is-selected { border-color: var(--q4-red); box-shadow: 0 0 0 3px rgba(226,35,26,.18); }
.q4-card--draft { background: repeating-linear-gradient(135deg, var(--q4-paper) 0 18px, #f6f4ef 18px 36px); }
.q4-flag { position: absolute; top: 14px; right: 14px; background: var(--q4-black); color: #fff; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em; padding: 4px 9px; border-radius: 999px; }
.q4-card-art { background: linear-gradient(170deg, #1f2025, #0e0f12); border-radius: 14px; padding: 18px 22px; }
.q4-card h4 { font-size: 1.28rem; font-weight: 900; }
.q4-specs { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; list-style: none; padding: 0; margin: 0; }
.q4-specs li { background: var(--q4-black); color: #fff; border-radius: 10px; padding: 8px 10px; }
.q4-specs b { display: block; font-size: 1.05rem; font-weight: 900; }
.q4-specs li:first-child b, .q4-specs li:nth-child(2) b { color: #fff; border-bottom: 2px solid var(--q4-red); display: inline-block; }
.q4-specs span { display: block; font-size: 0.72rem; color: var(--q4-mute); }
.q4-models { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; font-size: 0.9rem; }
.q4-models dt { color: #6a6d74; font-weight: 600; }
.q4-models dd { margin: 0; font-weight: 700; }
.q4-models em { font-weight: 500; color: #8a6d00; font-style: normal; }
.q4-incl { list-style: none; padding: 0; margin: 0; font-size: 0.88rem; }
.q4-incl li { padding-left: 18px; position: relative; margin: 3px 0; }
.q4-incl li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 9px; height: 2px; background: var(--q4-red); }
.q4-price { margin-top: auto; background: var(--q4-black); color: #fff; border-radius: 14px; padding: 16px 16px 14px; display: flex; flex-direction: column; gap: 2px; }
.q4-price-label { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--q4-mute); }
.q4-price-amount { font-size: clamp(1.9rem, 6vw, 2.4rem); font-weight: 900; letter-spacing: -0.02em; color: #fff; }
.q4-price-note { font-size: 0.78rem; color: var(--q4-mute); }
.q4-price-pending { font-size: 1.4rem; font-weight: 800; color: #f1b9b5; }
.q4-grant { margin-top: 8px; font-size: 0.85rem; color: #e9e9ea; border-top: 1px solid var(--q4-line); padding-top: 8px; }
.q4-grant b { color: #fff; }
.q4-upgrade { margin-top: 8px; font-size: 0.85rem; color: #e9e9ea; border-top: 1px solid var(--q4-line); padding-top: 8px; }
.q4-upgrade b { color: #fff; }
.q4-note { background: #fff4d6; border: 1px solid #f0d488; border-radius: 10px; padding: 10px 14px; }
.q4-empty { background: var(--q4-black); color: #fff; border-radius: 20px; padding: 28px; display: grid; gap: 10px; max-width: 640px; }
.q4-empty-h { font-size: 1.3rem; font-weight: 900; margin: 0; }

/* Bands */
.q4-band { background: var(--q4-black); color: #fff; padding: 60px 0; }
.q4-band .q4-small { color: var(--q4-mute); margin-top: 22px; }
.q4-four, .q4-three { display: grid; gap: 16px; }
@media (min-width: 760px) { .q4-four { grid-template-columns: repeat(4, 1fr); } .q4-three { grid-template-columns: repeat(3, 1fr); } }
.q4-four div { border-top: 3px solid var(--q4-red); padding-top: 14px; }
.q4-four h3, .q4-three h3 { font-size: 1.1rem; margin: 6px 0; }
.q4-four p { color: #c9cacf; margin: 0; font-size: 0.93rem; }
.q4-step { font-weight: 900; color: var(--q4-red); font-size: 0.85rem; letter-spacing: 0.1em; }
.q4-grant { }
section.q4-grant { padding: 52px 20px 12px; }
.q4-service { padding: 52px 20px; }
.q4-three div { background: var(--q4-paper); border: 1px solid #e2dfd8; border-radius: 16px; padding: 18px; }
.q4-legal { padding: 8px 20px 40px; font-size: 0.8rem; color: #63666d; }

/* Form */
.q4-form-sec { background: linear-gradient(180deg, var(--q4-graphite), var(--q4-black)); color: #fff; padding: 64px 0; scroll-margin-top: 40px; }
.q4-form-grid { display: grid; gap: 28px; }
@media (min-width: 900px) { .q4-form-grid { grid-template-columns: 0.8fr 1.2fr; align-items: start; } }
.q4-flow { padding-left: 20px; color: #d6d7db; }
.q4-flow li { margin: 8px 0; }
.q4-form-sec .q4-small { color: var(--q4-mute); }
.q4-form-sec .q4-small a { color: #fff; font-weight: 700; }
.q4-form { background: var(--q4-paper); color: var(--q4-black); border-radius: 22px; padding: 22px; }
.q4-form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.q4-form .q4-small { color: #55585f; }
.q4-row { display: grid; gap: 0 12px; }
@media (min-width: 560px) { .q4-row { grid-template-columns: 1fr 1fr; } .q4-row .q4-f--s { max-width: 140px; } .q4-row:has(.q4-f--s) { grid-template-columns: 140px 1fr; } }
.q4-f { display: block; font-weight: 700; font-size: 0.88rem; margin-bottom: 12px; }
.q4-f input, .q4-f select, .q4-f textarea { display: block; width: 100%; margin-top: 5px; min-height: 48px; padding: 10px 12px; border: 1.5px solid #cfccc4; border-radius: 10px; font: inherit; font-weight: 500; background: #fff; color: var(--q4-black); }
.q4-f textarea { min-height: 90px; }
.q4-f input:focus, .q4-f select:focus, .q4-f textarea:focus { outline: none; border-color: var(--q4-red); box-shadow: 0 0 0 3px rgba(226,35,26,.18); }
[aria-invalid="true"] { border-color: var(--q4-red) !important; }
.q4-radios { margin-bottom: 12px !important; }
.q4-radios legend { font-weight: 700; font-size: 0.88rem; margin-bottom: 6px; }
.q4-radios label { display: inline-flex; align-items: center; gap: 6px; margin-right: 16px; min-height: 40px; font-weight: 600; }
.q4-check { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; font-size: 0.9rem; margin: 6px 0 14px; }
.q4-check input { width: 22px; height: 22px; margin-top: 1px; accent-color: var(--q4-red); }
.q4-err { display: block; color: var(--q4-red-d); font-size: 0.8rem; font-weight: 700; min-height: 0; }
.q4-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.q4-status { min-height: 1.4em; font-weight: 700; margin: 10px 0 0; }
.q4-status.is-error { color: var(--q4-red-d); }
.q4-done-h { font-size: 1.3rem; font-weight: 900; margin: 0 0 6px; }

/* Footer */
.q4-foot { background: var(--q4-black); color: var(--q4-mute); font-size: 0.8rem; padding: 22px 0 calc(22px + env(safe-area-inset-bottom)); }
.q4-foot b { color: #fff; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .q4-btn { transition: none; } }

/* Itemised quotation (GO-LIVE 37B, Phase C) */
.q4-quote { background: var(--q4-paper); border: 1px solid #dcd8cf; border-radius: var(--q4-r); padding: 22px; display: grid; gap: 16px; }
.q4-quote-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }
.q4-quote-head p { margin: 0; font-size: 0.9rem; }
.q4-quote-scroll { overflow-x: auto; }
.q4-quote-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.q4-quote-table th, .q4-quote-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid #e3dfd6; vertical-align: top; }
.q4-quote-table td:nth-child(n+4), .q4-quote-table th:nth-child(n+4) { text-align: right; white-space: nowrap; }
.q4-quote-table td small { display: block; color: #6a6d74; }
.q4-quote-table tfoot th { font-weight: 900; border-top: 2px solid var(--q4-black); }
.q4-quote-oetp { border-top: 3px solid var(--q4-red); padding-top: 12px; }
.q4-quote-incomplete { background: #fff4d6; border: 1px solid #f0d488; border-radius: 10px; padding: 10px 14px; }

/* ── Lead-generation landing (GO-LIVE 37C) ───────────────────────────── */
.q4-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.q4l-hero { background: radial-gradient(120% 90% at 85% 10%, #2a2c33 0%, var(--q4-graphite) 45%, var(--q4-black) 100%); color: #fff; padding: 36px 0 48px; }
.q4l-grid { display: grid; gap: 28px; align-items: start; }
@media (min-width: 960px) { .q4l-grid { grid-template-columns: 1fr 480px; gap: 48px; } .q4l-hero { padding: 64px 0 72px; } }
.q4l-copy h1 { font-size: clamp(2rem, 7vw, 3.6rem); font-weight: 900; }
.q4l-copy .q4-lead { margin: 16px 0 22px; }
.q4l-points { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.q4l-points li { border-left: 3px solid var(--q4-red); padding: 4px 0 4px 14px; }
.q4l-points b { display: block; font-size: 1.02rem; }
.q4l-points span { color: #c4c6cc; font-size: 0.9rem; }
@media (max-width: 959px) { .q4l-points { display: none; } .q4l-copy .q4-lead { margin-bottom: 0; } }
.q4l-formcard { background: var(--q4-paper); color: var(--q4-black); border-radius: 22px; padding: 22px 20px 18px; box-shadow: 0 24px 60px rgba(0,0,0,.45); border-top: 4px solid var(--q4-red); scroll-margin-top: 16px; }
.q4l-formcard h2 { font-size: 1.55rem; font-weight: 900; margin: 0; }
.q4l-formcard > .q4-small { margin: 4px 0 14px; }
.q4l-formcard .q4-form { padding: 0; background: transparent; border-radius: 0; }
.q4-radios label { display: flex; margin-right: 0; min-height: 44px; }
.q4-radios input { width: 20px; height: 20px; accent-color: var(--q4-red); }
.q4-help { display: block; font-size: 0.8rem; color: #55585f; margin-top: 2px; }
.q4-f input[aria-invalid="true"] { border-color: var(--q4-red-d); background: #fff6f5; }
.q4l-summary { background: #fff1ef; border: 1.5px solid var(--q4-red); border-radius: 10px; padding: 10px 12px; font-weight: 700; font-size: 0.9rem; margin-bottom: 12px; }
.q4l-summary:focus { outline: 3px solid rgba(226,35,26,.35); }
.q4l-trust { padding: 36px 20px 40px; }
.q4l-trust-list { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 14px; }
@media (min-width: 760px) { .q4l-trust-list { grid-template-columns: repeat(3, 1fr); } }
.q4l-trust-list li { background: #fff; border-radius: 16px; padding: 16px 18px; border: 1px solid #e3dfd6; }
.q4l-trust-list b { display: block; font-size: 1.02rem; margin-bottom: 2px; }
.q4l-trust-list span { color: #55585f; font-size: 0.9rem; }
.q4l-thanks { background: radial-gradient(120% 90% at 85% 10%, #2a2c33 0%, var(--q4-graphite) 45%, var(--q4-black) 100%); padding: 56px 0 72px; }
.q4l-thanks-card { width: calc(100% - 32px); max-width: 680px; background: var(--q4-paper); border-radius: 22px; padding: 30px 24px; border-top: 4px solid var(--q4-red); }
.q4l-thanks-card h1 { font-size: clamp(1.7rem, 5vw, 2.4rem); font-weight: 900; margin: 10px 0 14px; }
.q4l-check { display: inline-block; width: 44px; height: 44px; border-radius: 50%; background: var(--q4-red); position: relative; }
.q4l-check::after { content: ""; position: absolute; left: 15px; top: 9px; width: 10px; height: 20px; border: solid #fff; border-width: 0 4px 4px 0; transform: rotate(45deg); }
.q4-foot a { color: #fff; }
.q4-foot .q4-consent { background: none; border: 0; padding: 0; font: inherit; color: #fff; text-decoration: underline; cursor: pointer; }
/* Optional marketing consent: visually secondary to the required acknowledgement. */
.q4-check--opt { font-weight: 400; }

/* ── Campaign landing, one column (journey consolidation 2026-10-21) ─────
   Intro → ready-made packages → OETP configurator with its summary / request CTA → process, OETP, FAQ. The landing has
   NO form: the only quote-request form is the canonical page /ajanlatkeres-2/. Phones / tablets keep a slim CTA bar. */
body.q4l--landing { background: #0e0f12; color: #e6e7ea; }
.q4l--landing .q4-small { color: #a7aab1; }
.q4l-layout { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 16px; }
.q4l-main { min-width: 0; padding: 16px 0 28px; display: grid; gap: 18px; container: q4main / inline-size; }
.q4l-main > * { min-width: 0; }
@media (min-width: 1024px) {
	.q4l-layout { padding: 0 clamp(24px, 3vw, 48px); }
	.q4l-main { padding: 20px 0 48px; gap: 24px; }
	.q4l--landing .q4-top { padding-left: max(clamp(24px, 3vw, 48px), calc((100% - 1240px) / 2 + clamp(24px, 3vw, 48px))); padding-right: max(clamp(24px, 3vw, 48px), calc((100% - 1240px) / 2 + clamp(24px, 3vw, 48px))); }
	.q4l-sec p, .q4l-faq details p { max-width: 78ch; }
}

/* Hero — compact, so the packages start high */
.q4l--landing .q4l-hero { background: radial-gradient(120% 140% at 92% 0%, #2a2c33 0%, #17181c 48%, #111215 100%); border: 1px solid rgba(255,255,255,.08); border-radius: 16px; padding: 20px 18px; color: #fff; }
.q4l--landing .q4l-hero .q4-kicker { margin: 0 0 8px; font-size: .72rem; }
.q4l--landing .q4l-hero h1 { font-size: clamp(1.6rem, 3.6vw, 2.5rem); font-weight: 900; }
.q4l--landing .q4l-hero .q4-lead { font-size: clamp(.95rem, 1.6vw, 1.05rem); color: #c9cbd1; max-width: 46em; margin: 10px 0 0; }
.q4l--landing .q4l-points { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.q4l--landing .q4l-points li { padding: 2px 0 2px 12px; }
.q4l--landing .q4l-points b { font-size: .9rem; }
.q4l--landing .q4l-points span { font-size: .8rem; }
@media (min-width: 1024px) and (min-height: 580px) { .q4l--landing .q4l-hero { padding: 26px 26px 24px; } }

/* Packages inside the left column */
.q4l--landing .q4s { background: none; padding: 2px 0 0; scroll-margin-top: 12px; }
.q4l--landing .q4s-head { margin: 0 0 16px; max-width: none; }
.q4l--landing .q4s-head h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
.q4l--landing .q4s-note { max-width: none; }
.q4c--picked { border-color: rgba(216,37,29,.9); box-shadow: 0 0 0 2px rgba(216,37,29,.55); }

/* Information sections */
.q4l-sec { background: #15161a; border: 1px solid rgba(255,255,255,.08); border-radius: 16px; padding: 20px 18px; }
.q4l-sec h2 { color: #fff; font-size: clamp(1.2rem, 2.2vw, 1.45rem); font-weight: 800; margin: 0 0 14px; }
.q4l-sec p { color: #c9cbd1; margin: 0 0 10px; }
.q4l-sec p:last-child { margin-bottom: 0; }
.q4l-steps { list-style: none; counter-reset: q4st; margin: 0; padding: 0; display: grid; gap: 14px; }
@container q4main (min-width: 640px) { .q4l-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.q4l-steps li { counter-increment: q4st; border-top: 2px solid var(--q4-red); padding-top: 10px; }
.q4l-steps li::before { content: "0" counter(q4st); display: block; font-weight: 900; color: var(--q4-red); font-size: .76rem; letter-spacing: .1em; margin-bottom: 4px; }
.q4l-steps b { display: block; color: #fff; font-size: .95rem; }
.q4l-steps span { display: block; color: #b9bcc3; font-size: .86rem; margin-top: 2px; }
.q4l-faq details { border-top: 1px solid rgba(255,255,255,.1); }
.q4l-faq details:last-of-type { border-bottom: 1px solid rgba(255,255,255,.1); }
.q4l-faq summary { position: relative; list-style: none; cursor: pointer; min-height: 44px; padding: 12px 34px 12px 0; font-weight: 700; color: #fff; }
.q4l-faq summary::-webkit-details-marker { display: none; }
.q4l-faq summary::after { content: "+"; position: absolute; right: 6px; top: 9px; font-size: 1.35rem; font-weight: 500; color: var(--q4-red); }
.q4l-faq details[open] summary::after { content: "\2212"; }
.q4l-faq summary:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.q4l-faq details p { margin: 0 0 14px; }
.q4l--landing .q4l-trust { padding: 0; }
.q4l--landing .q4l-trust-list { margin-bottom: 12px; }
.q4l--landing .q4l-trust-list li { background: #15161a; border-color: rgba(255,255,255,.08); }
.q4l--landing .q4l-trust-list b { color: #fff; }
.q4l--landing .q4l-trust-list span { color: #a7aab1; }

/* Package card actions: one line, button and "Részletek" aligned in every card of a row. */
.q4l--landing .q4c-actions { flex-wrap: nowrap; }
.q4l--landing .q4c-cta, .q4l--landing .q4c-more { white-space: nowrap; }
/* Phones: compact hero — the first package comes sooner (the disclaimers stay in the package note, OETP section, FAQ and form). */
@media (max-width: 599px) {
	.q4l--landing .q4l-hero { padding: 14px 16px; }
	.q4l--landing .q4l-hero .q4-kicker { margin-bottom: 6px; }
	.q4l--landing .q4l-hero h1 { font-size: 1.45rem; }
	.q4l--landing .q4l-hero .q4-lead { display: none; }
	.q4l--landing .q4l-main { gap: 14px; padding-top: 12px; }
	.q4l--landing .q4s-head { margin-bottom: 12px; gap: 10px; }
	.q4l--landing .q4s-head p:not(.q4s-kicker) { font-size: .9rem; }
}
/* Touch targets on phones / tablets (2026-10-20): header brand + call link and the footer contact links reach 44 px
   (WCAG 2.5.5); the footer line height keeps wrapped contact lines apart. Desktop layout unchanged. */
@media (max-width: 1023px) {
	.q4-brand, .q4-top-call { display: inline-flex; align-items: center; min-height: 44px; }
	.q4-foot .q4-wrap { line-height: 1.6; }
	.q4-foot a, .q4-foot .q4-consent { display: inline-flex; align-items: center; min-height: 44px; }
}

/* Visual milestone 2026-10 — campaign hero illustration (IMG-02, AI-generated; register: assets/images/ai-illustrations). */
.q4l-media { margin: 0; border-radius: 16px; overflow: hidden; aspect-ratio: 16 / 9; background: #17181c; border: 1px solid rgba(255,255,255,.08); }
.q4l-media picture, .q4l-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.q4l-media img { object-position: 55% 50%; }
.q4-foot-ai { color: var(--q4-mute); font-size: .74rem; }
@media (max-width: 1023px) {
	.q4l-media { border-radius: 12px; aspect-ratio: 16 / 10; }
}

/* Customer journey 2026-10 — status entry, step indicator, situation choice, embedded OETP calculator, request step. */
.q4j-status { margin: 0 0 14px; padding: 10px 12px; border-left: 3px solid var(--q4-red); background: rgba(255,255,255,.04); color: #e6e7ea; font-size: .95rem; line-height: 1.45; }
.q4j-status b { color: #fff; }
.q4j-status span { display: block; margin-top: 4px; color: #a9acb4; font-size: .8rem; }
.q4j-steps ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.q4j-steps a { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 12px; border-radius: 12px; background: #15161a; border: 1px solid rgba(255,255,255,.08); color: #fff; text-decoration: none; font-weight: 700; font-size: .92rem; line-height: 1.2; }
.q4j-steps a:hover, .q4j-steps a:focus-visible { border-color: var(--q4-red); }
.q4j-steps b { flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--q4-red); color: #fff; font-size: .85rem; }
@container q4main (max-width: 560px) { .q4j-steps a { flex-direction: column; justify-content: center; text-align: center; gap: 4px; font-size: .8rem; } }

/* ── Journey consolidation 2026-10-21: package fallback, OETP configurator (blocks 1–3 + summary 4), mobile CTA bar ── */
.q4s-alt { margin: 14px 0 0; color: #c9cbd1; font-size: .92rem; }
.q4s-alt a { color: #fff; font-weight: 700; }
.q4s-empty h2 { margin-bottom: 10px; }
.q4s-empty .q4s-empty-cta { margin-top: 6px; }
/* The configurator markup sits inside .mh (homepage isolation layer: all:revert at (0,2,1)); body.q4 rules come later. */
body.q4 .q4j-mh { display: block; margin-top: 16px; background: none; color: #e6e7ea; font-family: var(--q4-font); }
body.q4 .mh-oc { display: grid; gap: 16px; }
@container q4main (min-width: 880px) {
	body.q4 .mh-oc { grid-template-columns: minmax(0, 1fr) minmax(300px, 370px); align-items: start; gap: 20px; }
	body.q4 .mh-oc-sum { position: sticky; top: 16px; }
}
body.q4 .mh-oc-main { display: grid; gap: 14px; min-width: 0; }
body.q4 .mh-oc-block { display: block; background: #1b1c21; border: 1px solid rgba(255,255,255,.1); border-radius: 14px; padding: 18px 16px 20px; scroll-margin-top: 16px; }
body.q4 .mh-oc-bh { display: flex; align-items: center; gap: 10px; margin: 0 0 4px; }
body.q4 .mh-oc-num { display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--q4-red); color: #fff; font-weight: 900; font-size: .85rem; }
body.q4 .mh-oc-bh h3 { display: block; margin: 0; font-size: 1.08rem; font-weight: 800; line-height: 1.25; color: #fff; }
body.q4 .mh-oc-q { display: block; border: 0; margin: 16px 0 0; padding: 0; min-width: 0; }
body.q4 .mh-oc-q legend { display: block; float: none; width: 100%; padding: 0; margin: 0 0 8px; font-weight: 700; color: #fff; font-size: .96rem; line-height: 1.35; }
body.q4 .mh-oc-opts { display: flex; flex-wrap: wrap; gap: 8px; }
body.q4 .mh-oc-q--list .mh-oc-opts { display: grid; grid-template-columns: minmax(0, 1fr); }
@container q4main (min-width: 600px) { body.q4 .mh-oc-q--list .mh-oc-opts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
body.q4 .mh-oc-chip { position: relative; display: inline-flex; max-width: 100%; cursor: pointer; }
body.q4 .mh-oc-q--list .mh-oc-chip { display: flex; }
body.q4 .mh-oc-chip input { position: absolute; top: 0; left: 0; width: 1px; height: 1px; margin: 0; opacity: 0; }
body.q4 .mh-oc-chip span { display: flex; align-items: center; width: 100%; min-height: 44px; padding: 8px 14px; border: 1.5px solid rgba(255,255,255,.24); border-radius: 999px; color: #e6e7ea; font-size: .9rem; font-weight: 600; line-height: 1.25; transition: border-color .15s, background .15s; }
body.q4 .mh-oc-q--list .mh-oc-chip span { border-radius: 10px; }
body.q4 .mh-oc-chip--unknown span { border-style: dashed; color: #c3c5cb; }
body.q4 .mh-oc-chip:hover span { border-color: rgba(255,255,255,.55); }
body.q4 .mh-oc-chip input:checked + span { border-style: solid; border-color: var(--q4-red); background: #2a1416; color: #fff; box-shadow: inset 0 0 0 1px var(--q4-red); }
body.q4 .mh-oc-chip input:focus-visible + span { outline: 2px solid #fff; outline-offset: 2px; }
body.q4 .mh-oc-help { display: block; margin: 6px 0 0; color: #a9acb4; font-size: .82rem; line-height: 1.4; }
body.q4 .mh-oc-note { display: block; margin: 12px 0 0; padding: 9px 12px; border-left: 3px solid var(--q4-red); background: rgba(255,255,255,.04); color: #d7d9de; font-size: .86rem; line-height: 1.45; }
body.q4 .mh-oc-cond { display: block; margin: 2px 0 0; padding: 0 0 2px 14px; border-left: 2px solid rgba(255,255,255,.14); }
body.q4 .mh-oc-note[hidden], body.q4 .mh-oc-cond[hidden], body.q4 .mh-oc-sum-empty[hidden] { display: none; }
body.q4 .mh-oc-field { display: block; margin: 16px 0 0; }
body.q4 .mh-oc-field label { display: block; margin: 0 0 8px; font-weight: 700; color: #fff; font-size: .96rem; line-height: 1.35; }
body.q4 .mh-oc-opt { font-weight: 400; color: #a9acb4; font-size: .85rem; }
body.q4 .mh-oc-field input { display: block; width: 100%; max-width: 420px; min-height: 44px; padding: 8px 12px; border: 1.5px solid rgba(255,255,255,.24); border-radius: 10px; background: #121317; color: #fff; font: inherit; font-size: 1rem; }
body.q4 .mh-oc-field input::placeholder { color: #7d8088; }
body.q4 .mh-oc-field input:focus { outline: 2px solid #fff; outline-offset: 1px; border-color: #fff; }
body.q4 .mh-oc-unitwrap { display: flex; align-items: center; gap: 10px; max-width: 280px; }
body.q4 .mh-oc-unitwrap input { flex: 1 1 auto; min-width: 0; }
body.q4 .mh-oc-unit { flex: none; color: #c3c5cb; font-weight: 700; font-size: .9rem; }
/* 4 · Summary: paper card with the ONE request CTA */
body.q4 .mh-oc-sum { display: block; min-width: 0; scroll-margin-top: 16px; }
body.q4 .mh-oc-sum-in { display: block; background: var(--q4-paper); color: var(--q4-black); border-top: 4px solid var(--q4-red); border-radius: 14px; padding: 18px 16px; box-shadow: 0 20px 50px rgba(0,0,0,.45); }
body.q4 .mh-oc-sum .mh-oc-bh h3 { color: var(--q4-black); }
body.q4 .mh-oc-sum-empty { display: block; margin: 10px 0 0; color: #55585f; font-size: .9rem; line-height: 1.45; }
body.q4 .mh-oc-sum-groups { display: block; }
body.q4 .mh-oc-sum-g { display: block; margin: 12px 0 0; padding-top: 10px; border-top: 1px solid #e3dfd6; }
body.q4 .mh-oc-sum-gh { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 0 0 6px; font-size: .72rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--q4-red-d); }
body.q4 .mh-oc-sum-g--unknown .mh-oc-sum-gh { color: #6a6d74; }
body.q4 .mh-oc-sum-edit { display: inline-flex; align-items: center; min-height: 32px; padding: 0 2px; font-size: .8rem; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--q4-black); text-decoration: underline; }
body.q4 .mh-oc-sum-g dl { display: block; margin: 0; }
body.q4 .mh-oc-sum-g dt { display: block; color: #55585f; font-size: .8rem; line-height: 1.3; }
body.q4 .mh-oc-sum-g dd { display: block; margin: 0 0 7px; font-weight: 700; font-size: .92rem; line-height: 1.3; overflow-wrap: anywhere; }
body.q4 .mh-oc-sum-g--unknown dd { font-weight: 600; color: #55585f; }
body.q4 .mh-oc-pkg { display: block; margin: 12px 0 0; padding: 10px 12px; border: 1.5px solid var(--q4-red); border-radius: 10px; background: #fff; }
body.q4 .mh-oc-pkg .mh-oc-sum-gh { margin-bottom: 2px; }
body.q4 .mh-oc-pkg b { display: block; font-size: 1rem; line-height: 1.3; }
body.q4 .mh-oc-pkg-actions { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 6px 0 0; font-size: .82rem; }
body.q4 .mh-oc-pkg-actions a { display: inline-flex; align-items: center; min-height: 32px; color: var(--q4-black); font-weight: 700; text-decoration: underline; }
body.q4 .mh-oc-link { display: inline-flex; align-items: center; min-height: 32px; padding: 0; border: 0; background: none; font: inherit; font-weight: 700; color: var(--q4-red-d); text-decoration: underline; cursor: pointer; }
body.q4 .mh-oc-link:focus-visible, body.q4 .mh-oc-sum-edit:focus-visible, body.q4 .mh-oc-pkg-actions a:focus-visible { outline: 2px solid var(--q4-red); outline-offset: 2px; }
body.q4 .mh-oc-sum-note { display: block; margin: 14px 0 0; padding: 10px 12px; background: #f0eee8; border-radius: 10px; font-size: .86rem; font-weight: 700; line-height: 1.4; }
body.q4 .mh-oc-sum-legal { display: block; margin: 8px 0 14px; color: #55585f; font-size: .78rem; line-height: 1.4; }
body.q4 .mh-oc-sum .mh-oc-cta { height: auto; min-height: 52px; padding: 10px 18px; border-radius: 10px; font-size: .95rem; letter-spacing: .02em; gap: 12px; text-align: center; }
body.q4 .mh-oc-sum .mh-oc-cta:focus-visible { outline: 3px solid var(--q4-black); outline-offset: 2px; }
body.q4 .mh-oc-sum-micro { display: block; margin: 8px 0 0; color: #55585f; font-size: .76rem; line-height: 1.4; }
@container q4main (max-width: 420px) { body.q4 .mh-oc-block { padding: 16px 12px 18px; } body.q4 .mh-oc-chip span { padding: 8px 12px; font-size: .88rem; } body.q4 .mh-oc-cond { padding-left: 10px; } }
@media (prefers-reduced-motion: reduce) { body.q4 .mh-oc-chip span { transition: none; } }
/* Phones / tablets: slim persistent bar with the same request link (the landing has no form). */
.q4l-mcta { display: none; }
@media (max-width: 1023.98px) {
	body.q4l--landing { padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
	.q4l-mcta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; align-items: center; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(14,15,18,.96); border-top: 1px solid rgba(255,255,255,.1); box-shadow: 0 -8px 24px rgba(0,0,0,.35); }
	.q4l-mcta-txt { flex: 1 1 auto; min-width: 0; margin: 0; font-size: .82rem; line-height: 1.25; color: #c9cbd1; }
	.q4l-mcta-txt b { color: #fff; }
	.q4l-mcta .q4-btn { flex: 0 0 auto; min-height: 46px; padding: 0 18px; font-size: .95rem; }
}

/* OETP-first release (2026-10-21): "Mit ellenőrzünk szakmailag?" */
.q4l-verify > p { color: #b9bcc3; margin: 0 0 14px; }
.q4l-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
@container q4main (min-width: 640px) { .q4l-checks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.q4l-checks li { border-left: 2px solid var(--q4-red); padding: 2px 0 2px 12px; }
.q4l-checks b { display: block; color: #fff; font-size: .95rem; }
.q4l-checks span { display: block; color: #b9bcc3; font-size: .86rem; margin-top: 2px; }