/* ==========================================================
   Prečo si nerozumieme? (/vztahy) – v dizajne ŇUŇU
   Načítava sa PO /assets/fonts.css a /assets/nunu.css: písma Nunito + DM Sans, logo, tlačidlá,
   zaoblenia, karty, hlavička a pätička sú spoločné s webom. Tu je len vínový akcent sekcie
   a komponenty, ktoré zvyšok webu nemá. Na ostatných stránkach webu sa tento súbor nenačítava.
   Kontrast (WCAG AA): víno #7D2E46 na krémovej 9,6:1 · biely text na víne 10,1:1 · sekundárny text 6,1:1
   ========================================================== */

:root {
  --wine: #7D2E46;
  --wine-deep: #5E2034;
  --wine-mid: #C25B78;
  --wine-soft: #F4E1E6;
  --sage-soft: #EAF1E6;
  --field: #8C8378;
  --error: #9B2C2C;
  --error-bg: #FBE9E7;
  --vz-y: 56px;
}
@media (min-width: 900px) { :root { --vz-y: 88px; } }

.vz-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
[hidden] { display: none !important; }
.vz .hl { color: var(--wine); }
.vz a:not(.btn):not(.logo) { text-decoration-color: var(--wine-mid); text-underline-offset: 3px; }
.vz :focus-visible { outline-color: var(--wine-mid); }
.small { font-size: .9rem; }
.measure { max-width: 46rem; }
.center { margin-inline: auto; }
.m0 { margin: 0; }
.mt-s { margin: .4em 0 0; }
.mt { margin-top: 24px; }
.mt-l { margin-top: 40px; }
.mb0 { margin-bottom: 0; }
.mb { margin-bottom: 24px; }

/* ---------- rytmus sekcií (menej prázdneho miesta než na produktových stránkach) ---------- */
.vz main > section { padding-block: var(--vz-y); position: relative; }
.vz main > section:first-child { padding-top: clamp(28px, 4vw, 48px); }
.band-paper { background: var(--paper); }
.band-wine { background: var(--wine-soft); }
.band-powder { background: var(--powder); }
.band-sky { background: var(--sky); }
.vz .section-head { margin-bottom: 36px; }
.vz .section-head h2 { margin-bottom: .3em; }
.vz .section-head .lead { margin-inline: auto; max-width: 44ch; }
.section-head--left { text-align: left; margin-left: 0; }

/* ---------- typografia sekcie ---------- */
.kicker {
  display: inline-flex; align-items: center; gap: .4em; margin-bottom: 14px;
  padding: 6px 14px; border-radius: 999px; background: var(--wine-soft); color: var(--wine-deep);
  font-family: var(--font-head); font-weight: 800; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; line-height: 1.2;
}
.band-wine .kicker, .card--wine .kicker { background: var(--paper); }
.h-page { font-size: clamp(2.1rem, 5.4vw, 3.4rem); font-weight: 900; }
.h-small { font-size: clamp(1.35rem, 3vw, 1.7rem); }
.h-step { font-size: 1.2rem; margin-bottom: .25em; }
.vz .lead { color: var(--ink-soft); }

/* ---------- pruh sekcie pod hlavičkou ---------- */
.vz-bar { background: var(--paper); border-block: 1.5px solid var(--line); }
.vz-bar .wrap { display: flex; align-items: center; gap: 6px 22px; min-height: 54px; flex-wrap: wrap; padding-block: 6px; }
.vz-bar-brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-head); font-weight: 900; font-size: 1.08rem; color: var(--wine); text-decoration: none; margin-right: auto; }
.vz-bar-brand .ico { width: 30px; height: 30px; }
.vz-bar-links { order: 3; flex: 1 1 0; min-width: 0; list-style: none; margin: 0 0 0 calc(var(--gutter) * -1); padding: 0 0 4px var(--gutter); display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.vz-bar-break { order: 2; flex-basis: 100%; height: 0; }
.vz-bar-out { order: 4; margin: 0; }
.vz-bar-links::-webkit-scrollbar { display: none; }
.vz-bar-links a, .vz-bar-me a { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 999px; text-decoration: none; font-weight: 500; font-size: .95rem; white-space: nowrap; }
.vz-bar-links a:hover, .vz-bar-links a[aria-current="page"] { background: var(--wine-soft); }
.vz-bar-links a[aria-current="page"] { font-weight: 700; color: var(--wine-deep); }
.vz-bar-me { display: flex; align-items: center; gap: 4px; }
.vz-bar-me a { border: 1.5px solid var(--line); font-size: .9rem; color: var(--ink-soft); }
.vz-bar-me a:hover, .vz-bar-me a[aria-current="page"] { border-color: var(--wine-mid); color: var(--wine-deep); }
.vz-bar-me .ico { width: 20px; height: 20px; }
.vz-bar-me form { margin: 0; }
.linklike { background: none; border: 0; padding: 6px 8px; font: inherit; font-size: .9rem; color: var(--ink-soft); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.linklike:hover { color: var(--wine); }
@media (max-width: 899px) { .vz-bar .wrap { gap: 4px 10px; } .vz-bar-brand { font-size: 1rem; gap: 8px; } .vz-bar-brand .ico { width: 24px; height: 24px; } .vz-bar-me a { padding: 6px 12px; font-size: .86rem; } }
@media (max-width: 400px) { .vz-bar-brand .ico, .vz-bar-me .ico { display: none; } }
@media (min-width: 900px) {
  .vz-bar-links { order: 0; flex: 0 1 auto; margin: 0; padding: 0; overflow: visible; }
  .vz-bar-break { display: none; }
  .vz-bar-out { order: 0; }
  .vz-bar-brand { margin-right: 6px; }
  .vz-bar-me { margin-left: auto; }
}

/* ---------- tlačidlá: vínový akcent v obsahu (hlavička ostáva v štýle webu) ---------- */
.vz main .btn:not(.btn--ghost):not(.btn--dark) { --bg: var(--wine); --fg: #FFFDF9; }
.vz main .btn--ghost { --fg: var(--ink); }
.vz main .btn--ghost:hover { --bg: var(--paper); }
.btn--light { --bg: var(--paper) !important; --fg: var(--ink) !important; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }
.btn.is-busy { pointer-events: none; opacity: .75; }
.actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 26px; }
.actions form { margin: 0; }
.link-arrow { border-bottom-color: var(--wine-mid); }

/* ---------- formuláre ---------- */
.field { display: grid; gap: 6px; margin-bottom: 18px; }
.field label { font-family: var(--font-head); font-weight: 800; font-size: 1rem; }
.field .hint { font-size: .88rem; color: var(--ink-soft); }
.vz input[type="email"], .vz input[type="text"] {
  width: 100%; min-height: 54px; padding: 12px 16px; border: 2px solid var(--field); border-radius: var(--r-sm);
  background: #fff; font: inherit; color: var(--ink);
}
.vz input[type="email"]:focus, .vz input[type="text"]:focus { border-color: var(--wine); outline: 3px solid var(--wine-soft); outline-offset: 0; }
.vz input[aria-invalid="true"] { border-color: var(--error); }
.check {
  display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; margin-bottom: 12px;
  padding: 14px 16px; border-radius: var(--r-md); background: var(--cream); border: 2px solid var(--line);
  font-size: .93rem; line-height: 1.5; cursor: pointer;
}
.check:has(input:checked) { border-color: var(--wine-mid); background: var(--wine-soft); }
.check input { width: 21px; height: 21px; margin: 1px 0 0; accent-color: var(--wine); cursor: pointer; }
.error { background: var(--error-bg); color: var(--error); border-radius: var(--r-md); padding: 12px 16px; margin-bottom: 18px; font-weight: 700; }
.flash { padding: 14px 18px; border-radius: var(--r-md); margin: 20px 0 0; background: var(--paper); border: 1.5px solid var(--line); font-weight: 500; }
.flash--ok { background: var(--sage-soft); border-color: transparent; }
.flash--warn { background: var(--error-bg); border-color: transparent; color: var(--error); }

/* ---------- karty a zoznamy ---------- */
.card { background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--r-lg); padding: clamp(22px, 3.6vw, 34px); box-shadow: var(--shadow-soft); }
.card--wine { background: var(--wine-soft); border-color: transparent; box-shadow: none; }
.card--cream { background: var(--cream); box-shadow: none; }
.card > :last-child { margin-bottom: 0; }
.grid-2, .grid-3 { display: grid; gap: 18px; }
@media (min-width: 760px) { .grid-2 { grid-template-columns: 1fr 1fr; gap: 24px; } .grid-3 { grid-template-columns: repeat(3, 1fr); gap: 22px; } }
.split { display: grid; gap: 28px; align-items: start; }
@media (min-width: 900px) { .split { grid-template-columns: .85fr 1.15fr; gap: 56px; } .split--center { align-items: center; } }
.list-plain { list-style: none; padding: 0; margin: 0; }
.list-lines { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.list-lines li { background: var(--cream); border-radius: var(--r-sm); padding: 12px 16px; }
.card--cream .list-lines li, .band-paper .list-lines li { background: var(--paper); }
.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.ticks li { position: relative; padding-left: 34px; line-height: 1.45; }
.ticks li::before { content: "✓"; position: absolute; left: 0; top: 0; width: 23px; height: 23px; border-radius: 50%; background: var(--wine-soft); color: var(--wine); font-weight: 900; font-size: .8rem; display: grid; place-items: center; }
.ticks li.is-open::before { content: ""; background: var(--paper); border: 2px solid var(--line); }
.ticks li.is-done::before { background: var(--wine); color: #fff; }
.dim-ico { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; flex: none; }
.dim-ico .ico { width: 38px; height: 38px; }
.tile-powder { background: var(--powder); }
.tile-wine { background: var(--wine-soft); }
.tile-sky { background: var(--sky); }
.tile-mustard { background: var(--mustard-soft); }
.tile-sage { background: var(--sage-soft); }
.tile-paper { background: var(--paper); }
.price { color: var(--ink); }
.price small { font-family: var(--font-body); }
.sample-badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px;
  background: var(--mustard); color: var(--ink); font-family: var(--font-head); font-weight: 900; font-size: .72rem;
  letter-spacing: .08em; text-transform: uppercase; line-height: 1.2;
}
.safety { background: var(--paper); border: 1.5px dashed var(--field); border-radius: var(--r-md); padding: 16px 20px; font-size: .92rem; color: var(--ink-soft); }
.safety strong { color: var(--ink); }
.safety p:last-child { margin: 0; }

/* ==========================================================
   ÚVODNÁ STRÁNKA
   ========================================================== */
.vz-hero { overflow: hidden; }
.vz-hero .wrap { display: grid; gap: 24px; align-items: center; }
.vz-hero h1 { font-size: clamp(2.5rem, 7.4vw, 4.6rem); margin-bottom: .3em; }
.vz-hero h1 .hl { display: block; }
.vz-hero .lead { font-size: clamp(1.1rem, 2.2vw, 1.25rem); max-width: 36ch; margin-bottom: 26px; }
.vz-hero .hero-ctas .btn { flex: 0 1 auto; }
.vz-hero .reassure { margin-top: 20px; font-size: .92rem; }
.vz-hero .reassure .ico { width: 22px; height: 22px; }
.vz-hero-visual { position: relative; display: grid; place-items: center; min-height: 300px; }
.vz-hero-visual .blob-1 { width: 92%; aspect-ratio: 1; left: 4%; top: -2%; color: var(--wine-soft); }
.vz-hero-visual .blob-2 { width: 46%; aspect-ratio: 1; right: -6%; bottom: -4%; color: var(--sky); opacity: .8; }
.vz-hero-visual img { position: relative; z-index: 1; width: min(100%, 560px); }
@media (min-width: 900px) {
  .vz-hero .wrap { grid-template-columns: 1fr 1.05fr; gap: 40px; }
  .vz-hero-visual { min-height: 480px; }
}
@media (max-width: 899px) { .vz-hero-visual { order: -1; margin: -10px auto -4px; width: min(86%, 340px); min-height: 0; } .vz-hero .wrap { gap: 10px; } .vz-hero .lead { margin-bottom: 20px; } }

/* chvíle, v ktorých sa míňate */
.situ-grid { display: grid; gap: 16px; }
@media (min-width: 700px) { .situ-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .situ-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.situ { background: var(--paper); border-radius: var(--r-lg); padding: 20px 20px 22px; border: 1.5px solid var(--line); }
.situ .q-bubbles { margin: 0; }
.situ .q-bubbles li { font-size: .98rem; line-height: 1.35; max-width: 88%; }
.situ .q-bubbles li:nth-child(odd) { background: var(--powder); }
.situ .q-bubbles li:nth-child(even) { background: var(--sky); }
.situ-punch {
  grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 16px; text-align: center;
  background: var(--wine); color: #FFFDF9; border-radius: var(--r-lg); padding: 22px 24px;
  font-family: var(--font-head); font-weight: 900; font-size: clamp(1.2rem, 2.6vw, 1.55rem); line-height: 1.25;
}
.situ-punch .ico { width: 44px; height: 44px; flex: none; }

/* kroky */
.vz-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.vz-step { position: relative; background: var(--paper); border-radius: var(--r-lg); padding: 22px 20px; display: grid; grid-template-columns: 70px 1fr; gap: 16px; align-items: center; }
.vz-step .step-ico { width: 70px; height: 70px; border-radius: 24px; display: grid; place-items: center; position: relative; }
.vz-step .step-ico .ico { width: 46px; height: 46px; }
.vz-step .step-num { position: absolute; top: -8px; right: -8px; width: 30px; height: 30px; border-radius: 50%; background: var(--wine); color: #fff; display: grid; place-items: center; font-family: var(--font-head); font-weight: 900; font-size: .92rem; border: 3px solid var(--paper); }
.vz-step h3 { margin: 0 0 4px; font-size: 1.18rem; }
.vz-step p { margin: 0; color: var(--ink-soft); font-size: .96rem; line-height: 1.5; }
.vz-step .step-tag { display: inline-block; margin-top: 8px; font-family: var(--font-head); font-weight: 800; font-size: .78rem; letter-spacing: .04em; color: var(--wine-deep); background: var(--wine-soft); border-radius: 999px; padding: 3px 10px; }
.vz-step .step-tag--free { background: var(--sage-soft); color: #3F5A36; }
@media (min-width: 700px) { .vz-steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) {
  .vz-steps { grid-template-columns: repeat(4, 1fr); gap: 20px; }
  .vz-steps--6 { grid-template-columns: repeat(3, 1fr); }
  .vz-step { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 30px 22px 26px; align-content: start; }
  .vz-step .step-ico { width: 92px; height: 92px; border-radius: 30px; margin-bottom: 6px; }
  .vz-step .step-ico .ico { width: 60px; height: 60px; }
}
.steps-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 34px; }

/* náhľady reportov */
.previews { display: grid; gap: 22px; align-items: start; }
@media (min-width: 960px) { .previews { grid-template-columns: 1fr 1fr; gap: 28px; } }
.preview { background: var(--paper); border-radius: var(--r-xl); border: 1.5px solid var(--line); box-shadow: var(--shadow-page); overflow: hidden; }
.preview-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 20px; border-bottom: 1.5px solid var(--line); background: var(--cream); }
.preview-top .dots { display: flex; gap: 6px; }
.preview-top .dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--line); display: block; }
.preview-top .dots i:first-child { background: var(--powder-deep); }
.preview-top .dots i:nth-child(2) { background: var(--mustard); }
.preview-body { padding: 22px 22px 24px; }
.preview-body.report-section { border: 0; border-radius: 0; margin: 0; }
.preview-title { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.preview-title h3 { margin: 0; font-size: 1.3rem; }
.preview-title small { display: block; font-family: var(--font-body); font-weight: 500; font-size: .85rem; color: var(--ink-soft); letter-spacing: 0; }
.preview .say { font-size: 1rem; }
.preview-more { margin: 16px 0 0; font-size: .88rem; color: var(--ink-soft); }
@media (min-width: 600px) { .preview-body { padding: 26px 30px 30px; } }

/* kto čo uvidí */
.who { display: grid; gap: 16px; }
@media (min-width: 800px) { .who { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.who-card { background: var(--paper); border-radius: var(--r-lg); padding: 24px 22px; }
.who-card header { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.who-card h3 { margin: 0; font-size: 1.2rem; }
.who-card p { margin: 0; color: var(--ink-soft); font-size: .97rem; }
.who-card--shared { background: var(--wine); color: #FFFDF9; }
.who-card--shared p { color: #F6E6EA; }
.privacy-points { margin-top: 26px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; list-style: none; padding: 0; }
.privacy-points li { background: var(--paper); border-radius: 999px; padding: 8px 16px; font-weight: 500; font-size: .93rem; display: inline-flex; align-items: center; gap: 8px; }
.privacy-points .ico { width: 20px; height: 20px; }

/* cenový blok */
.vz-buy .featured-media { background: var(--wine-soft); min-height: 300px; }
.vz-buy .featured-media .blob { color: var(--powder); opacity: .9; }
.vz-buy .featured-media img { position: relative; z-index: 1; width: min(88%, 400px); }
.vz-buy .featured-body h2 { font-size: clamp(1.9rem, 3.6vw, 2.6rem); margin-bottom: .2em; }
.vz-buy .sub { font-family: var(--font-head); font-weight: 700; font-size: 1.1rem; color: var(--wine); margin-bottom: 1em; }
.vz-buy .ticks { margin: 0 0 26px; }
.vz-buy .ticks strong { font-family: var(--font-head); }
.vz-buy .price { font-size: 2.6rem; }
.vz-buy .buy-row .btn { flex: 1 1 240px; }
.vz-buy .reassure .ico { width: 20px; height: 20px; }
.vz-buy .alt { margin: 16px 0 0; font-size: .93rem; color: var(--ink-soft); }
@media (min-width: 900px) { .vz-buy .featured-media { min-height: 520px; } .vz-buy .featured-body { padding: 48px 52px; } }

/* FAQ – komponent webu */
.vz .faq .answer { padding: 0 22px 20px; }
.vz .faq details[open] { border-color: var(--wine-mid); }
.vz .faq details[open] summary::after { background-color: var(--wine-soft); }
.vz-faq .safety { margin-top: 18px; }

/* záverečná výzva */
.vz .final-card { background: var(--wine-soft); }
.vz .final-card .blob-a { color: var(--powder); }
.vz .final-card .blob-b { color: var(--sky); }
.vz .final-card .hero-ctas { justify-content: center; margin-top: 26px; }
.final-ico { width: 84px; height: 84px; margin: 0 auto 14px; display: block; }

/* ==========================================================
   PODSTRÁNKY: nákup, stavy, prihlásenie, pozvánka
   ========================================================== */
.page-head { max-width: 760px; margin-bottom: 28px; }
.page-head .lead { margin-bottom: 0; }
.page-ico { width: 76px; height: 76px; border-radius: 26px; display: grid; place-items: center; margin-bottom: 18px; }
.page-ico .ico { width: 50px; height: 50px; }
.state { max-width: 640px; margin-inline: auto; background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--r-xl); padding: clamp(28px, 5vw, 52px); text-align: center; box-shadow: var(--shadow-soft); }
.state .page-ico { margin-inline: auto; }
.state .actions { justify-content: center; }
.state p { color: var(--ink-soft); }
.state form .field, .state form { text-align: left; }
.state .h-page { font-size: clamp(1.9rem, 4.6vw, 2.6rem); }
.offer-grid { display: grid; gap: 24px; align-items: start; }
.offer-grid .page-head { margin-bottom: 0; }
@media (min-width: 960px) {
  .offer-grid { grid-template-columns: 1.05fr .95fr; grid-template-areas: "head buy" "more buy"; column-gap: 44px; row-gap: 22px; }
  .offer-grid > .page-head { grid-area: head; }
  .offer-grid > .offer-buy { grid-area: buy; position: sticky; top: 96px; }
  .offer-grid > .offer-more { grid-area: more; }
}
.offer-visual { background: var(--wine-soft); border-radius: var(--r-xl); display: grid; place-items: center; padding: 20px; margin-bottom: 22px; }
.offer-visual img { width: min(100%, 330px); }
.offer-price { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-bottom: 16px; margin-bottom: 18px; border-bottom: 1.5px solid var(--line); }
.offer-price .price { font-size: 2.3rem; }
.pay-note { display: flex; gap: 10px; align-items: flex-start; font-size: .86rem; color: var(--ink-soft); margin: 14px 0 0; }
.pay-note .ico { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.spinner { width: 46px; height: 46px; border: 5px solid var(--wine-soft); border-top-color: var(--wine); border-radius: 50%; display: inline-block; vertical-align: middle; }
.spinner--sm { width: 22px; height: 22px; border-width: 3px; margin-right: 10px; }
@media (prefers-reduced-motion: no-preference) { .spinner { animation: spin 1s linear infinite; } }
.copy-row { display: flex; gap: 8px; flex-wrap: wrap; }
.copy-row input { flex: 1 1 240px; font-size: .9rem !important; }

/* ==========================================================
   MÔJ PRIESTOR
   ========================================================== */
.space-head { display: grid; gap: 18px; align-items: center; margin-bottom: 28px; }
@media (min-width: 900px) { .space-head { grid-template-columns: 1fr auto; } }
.space-grid { display: grid; gap: 20px; align-items: start; }
@media (min-width: 960px) { .space-grid { grid-template-columns: 1fr 1fr; gap: 24px; } }
.status-row { display: grid; grid-template-columns: 56px 1fr; gap: 16px; align-items: start; padding: 18px 0; border-top: 1.5px solid var(--line); }
.card > .status-row:first-of-type { border-top: 0; padding-top: 4px; }
.status-row h3 { font-size: 1.15rem; margin: 2px 0 4px; }
.status-row p { margin: 0; color: var(--ink-soft); font-size: .96rem; }
.status-row .actions { margin-top: 14px; }
.status-ico { position: relative; }
.status-ico .done { position: absolute; right: -6px; bottom: -6px; width: 24px; height: 24px; border-radius: 50%; background: var(--wine); color: #fff; font-size: .75rem; font-weight: 900; display: grid; place-items: center; border: 2.5px solid var(--paper); }
.card-title { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.card-title h2 { margin: 0; }

/* ==========================================================
   DOTAZNÍK A KRÁTKY TEST
   ========================================================== */
.measure-q { max-width: 820px; }
.q-head { text-align: center; margin-bottom: 26px; }
.q-head .lead { margin-inline: auto; max-width: 52ch; font-size: 1.05rem; }
.q-card { background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--r-xl); padding: clamp(20px, 4vw, 40px); box-shadow: var(--shadow-soft); }
.progress { display: flex; gap: 6px; margin: 0 0 10px; padding: 4px; list-style: none; background: var(--cream); border-radius: 999px; }
.progress li { flex: 1; height: 10px; border-radius: 999px; background: var(--line); }
.progress li.is-done { background: var(--wine-mid); }
.progress li.is-current { background: var(--wine); }
.progress-label { font-family: var(--font-head); font-weight: 800; font-size: .92rem; color: var(--ink-soft); margin-bottom: 22px; }
.q { border: 0; padding: 0; margin: 0 0 30px; min-width: 0; }
.q + .q { padding-top: 26px; border-top: 1.5px dashed var(--line); }
.q legend { font-family: var(--font-head); font-weight: 800; font-size: clamp(1.18rem, 2.6vw, 1.45rem); line-height: 1.35; margin-bottom: 16px; padding: 0; }
.scale { display: grid; gap: 8px; }
@media (min-width: 760px) { .scale { grid-template-columns: repeat(5, 1fr); } }
.opt { position: relative; display: grid; }
.opt input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.opt span { display: flex; align-items: center; gap: 12px; height: 100%; min-height: 54px; padding: 10px 14px; border: 2px solid var(--line); border-radius: var(--r-md); background: #fff; font-size: .95rem; line-height: 1.3; transition: border-color .15s, background .15s; }
.opt span b { width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--cream); font-family: var(--font-head); font-weight: 900; font-size: 1rem; color: var(--wine); }
.opt:hover span { border-color: var(--wine-mid); }
.opt input:checked + span { border-color: var(--wine); background: var(--wine-soft); }
.opt input:checked + span b { background: var(--wine); color: #fff; }
.opt input:focus-visible + span { outline: 3px solid var(--wine-mid); outline-offset: 2px; }
@media (min-width: 760px) { .opt span { flex-direction: column; justify-content: center; text-align: center; min-height: 104px; gap: 8px; } }
.skip-opt { margin-top: 8px; }
.skip-opt span { min-height: 46px !important; flex-direction: row !important; justify-content: center; border-style: dashed; color: var(--ink-soft); background: transparent; }
.q-nav { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; border-top: 1.5px solid var(--line); padding-top: 22px; margin-top: 10px; }
.q-nav .linklike { font-size: .95rem; }
.js .q-step[hidden] { display: none; }
.save-state { font-size: .85rem; color: var(--ink-soft); min-height: 1.4em; text-align: center; margin: 0; }
.q-foot { text-align: center; margin: 18px 0 0; }
.area-hints { display: grid; gap: 6px; margin: 16px 0; padding: 0; list-style: none; font-size: .94rem; }
.area-hints li { display: flex; justify-content: space-between; gap: 12px; background: #fff; border-radius: var(--r-sm); padding: 10px 14px; }
.area-hints .need { color: var(--error); font-weight: 700; }

/* ==========================================================
   REPORTY (osobný, spoločný, bezplatné zhrnutie, ukážka)
   ========================================================== */
.report { max-width: 1020px; margin-inline: auto; }
.report-head { position: relative; overflow: hidden; background: var(--wine-soft); border-radius: var(--r-xl); padding: clamp(26px, 5vw, 48px); margin-bottom: 20px; }
.report-head > *:not(.blob) { position: relative; z-index: 1; }
.report-head .blob { width: 360px; aspect-ratio: 1; right: -140px; top: -150px; color: var(--powder); opacity: .9; }
.report-head .kicker { background: var(--paper); }
.report-head .lead { color: var(--ink); max-width: 52ch; }
.report-head .actions { margin-top: 18px; }
.report-meta { font-size: .85rem; color: var(--ink-soft); margin: 0; }
.report-section { background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--r-lg); padding: clamp(22px, 4vw, 36px); margin-top: 18px; }
.report-section > :last-child { margin-bottom: 0; }
.report-section .sec-head { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.report-section .sec-head h2 { margin: 0; font-size: clamp(1.35rem, 3vw, 1.75rem); }
.report-section h2 { font-size: clamp(1.35rem, 3vw, 1.75rem); }
.pole { display: inline-flex; align-items: center; gap: 8px; background: var(--wine-soft); color: var(--wine-deep); border-radius: 999px; padding: 6px 14px; font-family: var(--font-head); font-weight: 800; font-size: .95rem; margin-bottom: 14px; }
.pole-scale { margin: 4px 0 20px; }
.pole-track { position: relative; height: 12px; border-radius: 999px; background: linear-gradient(90deg, var(--powder), var(--mustard-soft) 50%, var(--sky)); margin: 30px 10px 8px; }
.pole-dot { position: absolute; top: 50%; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%; background: var(--wine); border: 3px solid var(--paper); box-shadow: 0 0 0 2px var(--wine); }
.pole-dot span { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-family: var(--font-head); font-weight: 800; font-size: .8rem; color: var(--wine-deep); }
.pole-dot--a { left: 8%; }
.pole-dot--m { left: 50%; }
.pole-dot--b { left: 92%; }
.pole-dot.who-2 { background: #4F7A99; box-shadow: 0 0 0 2px #4F7A99; }
.pole-dot.who-2 span { color: #335A75; bottom: auto; top: 26px; }
.pole-dot--a.who-2 { left: 14%; }
.pole-dot--m.who-2 { left: 56%; }
.pole-dot--b.who-2 { left: 86%; }
.pole-ends { display: flex; justify-content: space-between; gap: 16px; font-size: .85rem; color: var(--ink-soft); line-height: 1.3; }
.pole-ends span:last-child { text-align: right; }
.pole-scale:has(.who-2) .pole-ends { margin-top: 36px; }
.report-section dl { margin: 0; display: grid; gap: 12px; }
@media (min-width: 760px) { .report-section dl.dl-2 { grid-template-columns: 1fr 1fr; } .report-section dl.dl-2 > .wide { grid-column: 1 / -1; } }
.report-section dl > div { background: var(--cream); border-radius: var(--r-md); padding: 14px 18px; }
.report-section dt { font-family: var(--font-head); font-weight: 800; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--wine); margin-bottom: 4px; }
.report-section dd { margin: 0; }
.say {
  position: relative; display: block; background: var(--powder); border-radius: 22px 22px 22px 6px; padding: 14px 18px;
  font-family: var(--font-head); font-weight: 700; font-size: 1.06rem; line-height: 1.45; margin: 0;
}
.report-section dl > div:has(> .say) { background: transparent; padding: 0; }
.report-section dl > div:has(> .say) dt { padding: 0 4px; }
.says { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.says li:nth-child(even) .say, .says li.say:nth-child(even) { background: var(--sky); border-radius: 22px 22px 6px 22px; }
.compare { display: grid; gap: 10px; margin: 0 0 16px; padding: 0; list-style: none; }
@media (min-width: 640px) { .compare { grid-template-columns: 1fr 1fr; } }
.compare li { background: var(--powder); border-radius: var(--r-md); padding: 12px 16px; font-size: .96rem; }
.compare li:nth-child(2) { background: var(--sky); }
.compare li b { display: block; font-family: var(--font-head); font-weight: 900; font-size: .95rem; margin-bottom: 2px; }
.plan { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; counter-reset: d; }
.plan li { counter-increment: d; display: grid; grid-template-columns: 74px 1fr; gap: 14px; align-items: start; background: var(--cream); border-radius: var(--r-md); padding: 12px 16px 12px 12px; }
.plan li::before { content: counter(d) ". deň"; background: var(--wine); color: #fff; border-radius: 999px; padding: 3px 0; text-align: center; font-family: var(--font-head); font-weight: 800; font-size: .82rem; }
.questions { margin: 0; padding-left: 1.3em; display: grid; gap: 8px; }
.questions li::marker { color: var(--wine); font-family: var(--font-head); font-weight: 900; }
.report-foot { margin-top: 18px; }
.free-limits { background: var(--cream); }

/* ==========================================================
   TEXTOVÉ STRÁNKY (súkromie, podmienky, pomoc)
   ========================================================== */
.prose { max-width: 780px; }
.prose h2 { font-size: 1.45rem; margin-top: 1.8em; }
.prose h3 { font-size: 1.12rem; margin-top: 1.3em; }
.prose p, .prose li { color: #3E3C3B; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li { margin-bottom: .4em; }
.prose li::marker { color: var(--wine); }

/* ==========================================================
   PÄTIČKA – drobné doplnky ku komponentu webu
   ========================================================== */
.vz-footer h4.vz-footer-h { margin-top: 26px; }
.vz-footer address { font-size: .9rem; line-height: 1.65; }
@media (min-width: 900px) { .vz-footer .wrap { grid-template-columns: 1.2fr 1fr 1.1fr; } }

/* ---------- tlač / PDF ---------- */
@media print {
  @page { margin: 16mm 14mm; }
  body { background: #fff; font-size: 10.5pt; }
  .site-header, .mobile-menu, .vz-bar, .site-footer, .no-print, .flash, .blob { display: none !important; }
  .vz main > section { padding: 0; }
  .report-head { background: #fff; border: 1.5px solid #ccc; padding: 18px; }
  .report-section { break-inside: avoid; box-shadow: none; border-color: #ccc; padding: 16px; }
  .report-section dl > div, .plan li, .say, .compare li { background: #fff !important; border: 1px solid #ddd; }
  a { color: inherit; text-decoration: none; }
}

/* hlavička časti dotazníka */
.sec-head-q { display: flex; align-items: center; gap: 16px; margin: 6px 0 12px; }
.sec-head-q .kicker { margin-bottom: 6px; }
.q-card > p.muted { margin-bottom: 22px; }
.prose-page .report-section p:last-child { margin-bottom: 0; }
.js .q-step { border-top: 0 !important; padding-top: 0 !important; }
.dims-list { display: grid; gap: 12px; margin-top: 4px; }
.dims-list li { display: flex; align-items: center; gap: 14px; }
.dims-list strong { display: block; font-family: var(--font-head); font-weight: 800; line-height: 1.25; }
.dims-list span { display: block; font-size: .88rem; color: var(--ink-soft); line-height: 1.35; }
.dims-list .dim-ico { width: 48px; height: 48px; border-radius: 16px; }
.dims-list .dim-ico .ico { width: 32px; height: 32px; }
.state .spinner { display: block; margin: 0 auto 18px; }
.state .kicker { display: flex; width: max-content; margin-inline: auto; }
.measure-q.center { text-align: left; }
.q-head { text-align: center; }
.offer-grid > .offer-buy { order: 1; }
.offer-grid > .offer-more { order: 2; }

/* ==========================================================
   REPORTY v2 – vzťahová mapa (rovnaké farby a tvary ako zvyšok sekcie)
   ========================================================== */
.v2-toc ol { columns: 2 260px; padding-left: 1.4em; margin: 0; }
.v2-toc li { margin-bottom: 6px; break-inside: avoid; }
.v2-toc li::marker { color: var(--wine); font-family: var(--font-head); font-weight: 900; }
.v2-kicker { font-family: var(--font-head); font-weight: 800; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--wine); margin: 0 0 4px; }
.v2-ch > h2 { margin-bottom: 18px; }
.v2-ch h3 { font-size: 1.18rem; margin: 0 0 .4em; }
.v2-text, .v2-note, .v2-map, .v2-find, .v2-quote, .v2-list, .v2-portrait, .v2-insights, .v2-say, .v2-help, .v2-two, .v2-pair, .v2-conv, .v2-sheet, .v2-final, .questions, .v2-plan { margin: 0 0 20px; }
.v2-note { background: var(--cream); border-radius: var(--r-md); padding: 16px 20px; }
.v2-note p:last-child { margin-bottom: 0; }
.v2-note--safety { background: var(--wine-soft); }
.v2-map ul { list-style: none; padding: 0; margin: 0 0 8px; display: grid; gap: 6px; }
.v2-map li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 14px; align-items: center; padding: 8px 0; border-bottom: 1px dashed var(--line); }
.v2-map-l { font-family: var(--font-head); font-weight: 700; font-size: .98rem; line-height: 1.3; }
.v2-map-t { font-size: .85rem; color: var(--ink-soft); min-width: 7.5em; }
.v2-map li > .lvl { justify-self: end; }
.v2-map li > .v2-map-t { grid-column: 2; text-align: right; }
@media (min-width: 640px) { .v2-map li { grid-template-columns: minmax(0, 1fr) auto 8.5em; } .v2-map li > .v2-map-t { grid-column: auto; text-align: left; } }
.lvl { display: inline-flex; gap: 4px; vertical-align: middle; }
.lvl i { width: 16px; height: 16px; border-radius: 5px; background: var(--line); }
.lvl i.on { background: var(--wine); }
.lvl--need i.on { background: #4F7A99; }
.lvl--b i.on { background: #4F7A99; }
.lvl--a i.on { background: var(--wine); }
.lvl--none { color: var(--ink-soft); }
.v2-legend { font-size: .9rem; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.v2-legend .lvl i { width: 10px; height: 10px; }
.v2-cmp { display: grid; grid-template-columns: auto auto; gap: 4px 10px; align-items: center; }
.v2-map--cmp li { grid-template-columns: 1fr; }
@media (min-width: 640px) { .v2-map--cmp li { grid-template-columns: minmax(0, 1fr) auto; } }
.v2-find { border: 1.5px solid var(--line); border-radius: var(--r-lg); padding: clamp(16px, 3vw, 26px); background: #fff; }
.v2-find--combo { border-color: var(--wine-mid); background: #FFFBFC; }
.v2-find--short { background: var(--paper); }
.v2-find-area { font-family: var(--font-head); font-weight: 800; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--wine); margin: 0 0 4px; }
.v2-level { display: inline-block; background: var(--wine-soft); color: var(--wine-deep); border-radius: 999px; padding: 4px 12px; font-size: .9rem; margin-bottom: 12px; }
.v2-ev { background: var(--cream); border-radius: var(--r-md); padding: 10px 14px; margin-bottom: 14px; }
.v2-ev summary { cursor: pointer; font-family: var(--font-head); font-weight: 800; font-size: .85rem; color: var(--wine); }
.v2-ev ul { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 6px; }
.v2-ev li { display: flex; justify-content: space-between; gap: 14px; font-size: .9rem; line-height: 1.35; }
.v2-ev li b { flex: 0 1 auto; max-width: 45%; text-align: right; font-family: var(--font-head); color: var(--wine-deep); }
.v2-dl { margin: 0; display: grid; gap: 12px; }
.v2-dl > div { background: var(--cream); border-radius: var(--r-md); padding: 12px 16px; }
.v2-dl dt { font-family: var(--font-head); font-weight: 800; font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; color: var(--wine); margin-bottom: 4px; }
.v2-dl dd { margin: 0; }
.v2-dl .v2-step { background: var(--sage-soft); }
.v2-q { margin: 0; padding-left: 1.2em; display: grid; gap: 4px; }
.v2-q li::marker { color: var(--wine); }
.v2-instead { color: var(--ink-soft); text-decoration: line-through; text-decoration-color: rgba(125,46,70,.35); margin: 0 0 6px; }
.v2-instead span { text-decoration: none; font-family: var(--font-head); font-weight: 800; font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; color: var(--wine); margin-right: 4px; }
.v2-say .says li { background: transparent; }
.v2-quote { margin: 0 0 20px; background: var(--powder); border-radius: 22px 22px 22px 6px; padding: 16px 20px; }
.v2-quote figcaption { font-family: var(--font-head); font-weight: 800; font-size: .85rem; color: var(--wine-deep); margin-bottom: 6px; }
.v2-quote figcaption span { display: block; font-family: var(--font-body); font-weight: 400; font-size: .85rem; color: var(--ink-soft); }
.v2-quote blockquote { margin: 0; font-size: 1.04rem; line-height: 1.55; }
.v2-list ul { margin: 0; padding-left: 1.2em; display: grid; gap: 8px; }
.v2-list-t { font-weight: 700; }
.v2-portrait { display: grid; gap: 12px; }
@media (min-width: 760px) { .v2-portrait { grid-template-columns: 1fr 1fr; } }
.v2-portrait > div { background: var(--cream); border-radius: var(--r-md); padding: 14px 18px; }
.v2-portrait p { margin: 0; }
.v2-insights { padding: 0; list-style: none; counter-reset: ins; display: grid; gap: 12px; }
.v2-insights li { counter-increment: ins; position: relative; background: var(--wine-soft); border-radius: var(--r-lg); padding: 18px 20px 14px 66px; }
.v2-insights li::before { content: counter(ins); position: absolute; left: 18px; top: 16px; width: 34px; height: 34px; border-radius: 50%; background: var(--wine); color: #fff; display: grid; place-items: center; font-family: var(--font-head); font-weight: 900; }
.v2-insights p { margin: 0 0 6px; }
.v2-help { border: 2px solid var(--wine-soft); border-radius: var(--r-md); padding: 16px 20px; }
.v2-help ul { list-style: none; padding: 0; margin: 0 0 10px; display: grid; gap: 6px; }
.v2-help a { font-family: var(--font-head); font-weight: 800; white-space: nowrap; }
.v2-two { display: grid; gap: 12px; }
@media (min-width: 760px) { .v2-two { grid-template-columns: 1fr 1fr; } }
.v2-two > div { border-radius: var(--r-md); padding: 14px 18px; }
.v2-two-a { background: var(--powder); }
.v2-two-b { background: var(--sky); }
.v2-two ul { margin: 0; padding-left: 1.1em; display: grid; gap: 4px; }
.v2-two h4 { margin: 0 0 4px; font-size: 1rem; }
.v2-two p { margin: 0; }
.v2-sit .v2-two { margin-bottom: 12px; }
.v2-pair { border-left: 4px solid var(--line); padding: 2px 0 2px 16px; }
.v2-pair--gap { border-left-color: var(--wine-mid); }
.v2-pair--same_high { border-left-color: var(--sage); }
.v2-pair p { margin-bottom: 6px; }
.v2-pair-q { font-style: italic; color: var(--ink-soft); }
.v2-pair-q span { font-style: normal; font-family: var(--font-head); font-weight: 800; color: var(--wine); }
.v2-cycle { margin: 10px 0 14px; padding-left: 1.4em; display: grid; gap: 6px; }
.v2-cycle li::marker { color: var(--wine); font-family: var(--font-head); font-weight: 900; }
.v2-conv { background: var(--cream); border-radius: var(--r-md); padding: 14px 18px; }
.v2-conv h3 { display: flex; align-items: center; gap: 10px; }
.v2-conv h3 span { width: 30px; height: 30px; border-radius: 50%; background: var(--wine); color: #fff; display: grid; place-items: center; font-size: .9rem; flex: none; }
.v2-sheet { border: 1.5px dashed var(--wine-mid); border-radius: var(--r-md); padding: 16px 20px; break-inside: avoid; }
.v2-sheet-p { margin: 10px 0 2px; font-weight: 700; font-size: .95rem; }
.v2-sheet-lines i { display: block; height: 30px; border-bottom: 1px solid var(--line); }
.v2-plan li { grid-template-columns: 74px 1fr; }
.v2-plan b { display: block; font-family: var(--font-head); font-size: .92rem; color: var(--wine-deep); }
.v2-final { display: grid; gap: 12px; }
@media (min-width: 760px) { .v2-final { grid-template-columns: 1fr 1fr; } .v2-final > div:last-child { grid-column: 1 / -1; background: var(--wine-soft); } }
.v2-final > div { background: var(--cream); border-radius: var(--r-md); padding: 14px 18px; }
.v2-final ul, .v2-final ol { margin: 0; padding-left: 1.2em; display: grid; gap: 4px; }
.v2-pdf-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* dotazník v2 */
.q-choice .scale { grid-template-columns: 1fr; }
@media (min-width: 760px) { .q-choice .scale { grid-template-columns: repeat(2, 1fr); } .q-choice .opt span { flex-direction: row; text-align: left; min-height: 54px; justify-content: flex-start; } }
.q-multi .opt span::before { content: ""; width: 20px; height: 20px; flex: none; border: 2px solid var(--line); border-radius: 6px; background: #fff; }
.q-multi .opt input:checked + span::before { background: var(--wine); border-color: var(--wine); box-shadow: inset 0 0 0 3px #fff; }
.q-text textarea { width: 100%; min-height: 120px; border: 2px solid var(--line); border-radius: var(--r-md); padding: 12px 14px; font: inherit; background: #fff; }
.q-text textarea:focus { border-color: var(--wine-mid); outline: none; }
.q-share { display: flex; gap: 10px; align-items: flex-start; margin-top: 10px; font-size: .92rem; color: var(--ink-soft); }
.q-share input { width: 20px; height: 20px; flex: none; margin-top: 2px; accent-color: var(--wine); }
.q-safety-exit { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; background: var(--wine-soft); border-radius: var(--r-md); padding: 12px 16px; margin-bottom: 20px; }
.q-hint { font-size: .9rem; color: var(--ink-soft); margin: -8px 0 12px; }
.q-scale-help { font-size: .88rem; color: var(--ink-soft); background: var(--cream); border-radius: var(--r-md); padding: 10px 14px; margin-bottom: 22px; }
.share-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.share-table td { padding: 7px 0; border-bottom: 1px dashed var(--line); vertical-align: top; }
.share-table td:last-child { text-align: right; font-family: var(--font-head); font-weight: 700; color: var(--wine-deep); padding-left: 12px; }

@media print {
  .v2-toc, .v2-ev summary { display: none; }
  .v2-ev { display: block; }
  .v2-ch { break-before: page; }
  .v2-find, .v2-sheet, .v2-pair, .v2-insights li { break-inside: avoid; }
  .v2-find, .v2-dl > div, .v2-note, .v2-quote, .v2-portrait > div, .v2-two > div, .v2-final > div, .v2-conv { background: #fff !important; border: 1px solid #ddd; }
}

/* stručné zhrnutie na začiatku osobného reportu */
.v2-summary { background: var(--wine-soft); border-radius: var(--r-md); padding: 18px 20px; margin: 0 0 24px; }
.v2-summary h3 { margin: 0 0 10px; }
.v2-summary h4 { margin: 12px 0 4px; font-size: 1rem; }
.v2-summary ul { margin: 0; padding-left: 1.2em; display: grid; gap: 4px; }
.v2-summary > p { margin: 12px 0 0; }
@media print { .v2-summary { background: #fff !important; border: 1px solid #ddd; } }