/* Home V4 — page layout on top of tokens.css + components.css (brand manual v4).
   Also styles the shared header_v4/footer_v4 partials on every V4 journey page.
   Mobile first (360–430px); desktop from 960px. */

html { scroll-behavior: smooth; }
body.v3 { margin: 0; }
.v3 img { max-width: 100%; }

.v3-skip { position: absolute; left: -9999px; top: var(--space-8); z-index: 50; background: var(--surface-200); color: var(--ink); padding: var(--space-8) var(--space-16); border-radius: var(--radius-pill); }
.v3-skip:focus { left: var(--space-16); }

.v3-container { max-width: var(--container-max); margin: 0 auto; }

/* ---------- Header ---------- */
.v3-header { display: block; height: auto; padding: 0; }
.v3-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); height: var(--header-h); padding: 0 var(--space-16); max-width: calc(var(--container-max) + var(--space-48)); margin: 0 auto; }
.v3-nav { display: none; }
.v3-header .uv-header__brand { min-height: var(--tap-min); }
.v3-nav a { text-decoration: none; font-weight: 600; font-size: 15px; color: var(--ink-muted); min-height: var(--tap-min); min-width: var(--tap-min); display: inline-flex; align-items: center; justify-content: center; padding: 0 var(--space-4); }
.v3-nav a:hover { color: var(--ink); }

.v3-theme-toggle .v3-theme-toggle__sun { display: none; }
[data-theme="dark"] .v3-theme-toggle .v3-theme-toggle__sun { display: block; }
[data-theme="dark"] .v3-theme-toggle .v3-theme-toggle__moon { display: none; }
.v3-theme-toggle .uv-icon, .v3-menu-toggle .uv-icon { width: 24px; height: 24px; }
.v3-menu-toggle .v3-menu-toggle__close { display: none; }
.v3-menu-toggle[aria-expanded="true"] .v3-menu-toggle__open { display: none; }
.v3-menu-toggle[aria-expanded="true"] .v3-menu-toggle__close { display: block; }

.v3-menu { display: flex; flex-direction: column; padding: var(--space-8) var(--space-16) var(--space-16); border-top: 1px solid var(--line); background: var(--surface-000); }
.v3-menu[hidden] { display: none; }
.v3-menu a { text-decoration: none; font-weight: 600; min-height: var(--tap-min); display: flex; align-items: center; border-bottom: 1px solid var(--line); }
.v3-menu a:last-child { border-bottom: 0; }

@media (max-width: 380px) {
  .v3-header .uv-header__actions .uv-btn { display: none; }
}
@media (min-width: 960px) {
  .v3-header__inner { padding: 0 var(--space-24); }
  .v3-nav { display: flex; gap: var(--space-24); }
  .v3-menu-toggle, .v3-menu { display: none !important; }
  .uv-header__logo { height: 34px; }
}

/* ---------- Hero ---------- */
.v3-hero {
  display: grid; grid-template-areas: "copy" "trust" "price";
  max-width: calc(var(--container-max) + var(--space-48)); margin: 0 auto;
}
.v3-hero__copy { grid-area: copy; padding: var(--space-32) var(--space-16) var(--space-32); }
.v3-hero__trust { grid-area: trust; padding: var(--space-32) var(--space-16) var(--space-24); background: var(--surface-100); }
.v3-hero__price { grid-area: price; padding: 0 var(--space-16) var(--space-48); background: var(--surface-100); scroll-margin-top: calc(var(--header-h) + var(--space-12)); }
.v3-hero__title { font: 800 38px/42px var(--font-sans); letter-spacing: -0.02em; margin: 0 0 var(--space-12); }
.v3-hero__lead { font: 400 17px/26px var(--font-sans); color: var(--ink-muted); margin: 0 0 var(--space-24); }
.v3-rating { display: flex; align-items: center; justify-content: center; gap: var(--space-8); min-height: var(--tap-min); margin-top: var(--space-8); font: 500 13px/20px var(--font-sans); color: var(--ink-muted); text-decoration: none; }
.v3-rating strong { color: var(--ink); }

@media (min-width: 960px) {
  .v3-hero {
    grid-template-columns: 1fr 480px; grid-template-areas: "copy price" "trust price";
    grid-template-rows: auto 1fr;
    column-gap: var(--space-48); padding: var(--space-48) var(--space-24) var(--space-80); align-items: start;
  }
  .v3-hero__copy { padding: var(--space-48) 0 var(--space-32); }
  .v3-hero__title { font-size: 56px; line-height: 60px; letter-spacing: -0.025em; }
  .v3-hero__lead { max-width: 520px; font-size: 18px; line-height: 28px; }
  .v3-hero__cta { display: inline-flex; width: auto; }
  .v3-rating { justify-content: flex-start; }
  .v3-hero__trust { padding: 0; background: none; }
  .v3-hero__trust .uv-trust { grid-template-columns: repeat(2, 1fr); max-width: 520px; border: 1px solid var(--line); }
  .v3-hero__price { padding: 0; background: none; }
  /* One primary per screen: on desktop the hero CTA shares the screen with the price card,
     so the card CTA takes the secondary look (same link, same tracking attributes). */
  .v3-price-cta.uv-btn--primary { background: transparent; color: var(--ink); border-color: var(--line-strong); }
  .v3-price-cta.uv-btn--primary:hover { background: transparent; border-color: var(--ink); }
}

.uv-stepper button:disabled { opacity: .45; cursor: default; }

/* ---------- Section helpers ---------- */
.v3-subtitle { font: 700 17px/24px var(--font-sans); margin: 0 0 var(--space-16); }
.v3-grid-2, .v3-grid-3 { display: grid; gap: var(--space-12); }
.v3-posts { gap: var(--space-24); }
.v3-more { margin-top: var(--space-16); }
.v3-more--desktop { display: none; }
/* .v3-split--stack: title on top, long list below (FAQ, steps). Two columns left a tall empty
   column next to a short title on desktop. */
.v3-split--stack > :first-child { margin-bottom: var(--space-24); }
.v3-plans { padding-top: 0; }
.v3-grid-2--top > div + div { margin-top: var(--space-32); }

@media (min-width: 720px) {
  .v3-grid-2 { grid-template-columns: 1fr 1fr; gap: var(--space-24); }
  .v3-grid-3 { grid-template-columns: repeat(3, 1fr); gap: var(--space-24); }
  .v3-grid-2--top > div + div { margin-top: 0; }
}
@media (min-width: 960px) {
  .v3-plans { padding-top: var(--space-48); }
  .v3-split { display: grid; grid-template-columns: 1fr 1.3fr; gap: var(--space-48); align-items: start; }
  .v3-split--stack { display: block; }
  /* Stacked steps: one row of columns across the container, connector line horizontal */
  .v3-split--stack > .uv-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-24); max-width: none; }
  .v3-split--stack > .uv-steps .uv-step { grid-template-columns: 1fr; align-content: start; gap: 0; padding-bottom: 0; }
  .v3-split--stack > .uv-steps .uv-step::before { left: 52px; right: calc(-1 * var(--space-24) + 12px); top: 19px; bottom: auto; width: auto; height: 2px; }
  .v3-more--desktop { display: inline-flex; }
}

/* ---------- Closing & footer ---------- */
.v3-closing { padding-bottom: var(--space-48); }
.v3-closing__inner { text-align: center; max-width: 480px; }
.v3-closing__logo { display: block; height: 34px; width: auto; margin: 0 auto var(--space-24); }
.v3-closing__title { font: 800 30px/36px var(--font-sans); letter-spacing: -0.015em; margin: 0 0 var(--space-8); }
.v3-closing__text { margin: 0 0 var(--space-24); color: var(--on-inverse-muted); }
.v3-closing__wa { color: var(--on-inverse); margin-top: var(--space-12); }
.v3-closing :focus-visible { outline-color: var(--on-inverse); }

.v3-footer { background: var(--surface-inverse); color: var(--on-inverse-muted); padding: 0 var(--space-16) var(--space-32); border-top: 1px solid color-mix(in srgb, var(--on-inverse) 12%, transparent); }
.v3-footer .v3-container { padding-top: var(--space-32); }
/* Room for the mobile sticky bar (48px button + 12px padding on each side) inside the footer, so the page never ends in a blank band */
@media (max-width: 959px) { .v3-footer { padding-bottom: calc(var(--space-32) + var(--tap-min) + var(--space-24) + var(--space-16)); } }
.v3-footer__logo { height: 30px; width: auto; display: block; }
.v3-footer__links { display: flex; flex-wrap: wrap; gap: 0 var(--space-24); margin: var(--space-16) 0; }
.v3-footer__links a { color: var(--on-inverse); text-decoration: none; font-weight: 600; font-size: 14px; min-height: var(--tap-min); display: inline-flex; align-items: center; }
.v3-footer__legal { margin: 0; font-size: 13px; line-height: 20px; }
.v3-footer :focus-visible { outline-color: var(--on-inverse); }

.v3-footer__contact { display: flex; flex-wrap: wrap; gap: 0 var(--space-24); margin: 0 0 var(--space-16); font-size: 14px; }
.v3-footer__contact a, .v3-footer__contact span { display: inline-flex; align-items: center; gap: var(--space-8); min-height: var(--tap-min); }
.v3-footer__contact a { color: var(--on-inverse); font-weight: 600; text-decoration: none; }
.v3-footer__contact .uv-icon { width: 18px; height: 18px; }
.v3-footer__links--legal { margin-top: 0; }
.v3-footer__links--legal a { font-weight: 500; color: var(--on-inverse-muted); }

/* ---------- Promo strip (same flags as the current home: Prode > Hot Sale) ---------- */
.v3-promo { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 var(--space-12); padding: 0 var(--space-16); background: var(--surface-inverse); color: var(--on-inverse); font: 500 13px/20px var(--font-sans); text-align: center; }
.v3-promo strong { font-weight: 800; }
/* Ghost link on the inverse strip: the red primary stays with the page's main action */
.v3-promo .v3-promo__cta { color: var(--on-inverse); font-size: 14px; }
.v3-promo :focus-visible { outline-color: var(--on-inverse); }

/* ---------- Sticky CTA ---------- */
.v3-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; transform: translateY(110%); transition: transform .2s ease; }
.v3-sticky.is-visible { transform: translateY(0); }

/* ---------- Floating WhatsApp (doc 043, D4) ---------- */
/* On mobile it rises above the sticky bar while the bar is visible (home.js toggles .v3-sticky-on). */
.v3-wa-float { position: fixed; right: var(--space-16); bottom: calc(var(--space-16) + env(safe-area-inset-bottom, 0px)); z-index: 21; display: grid; place-items: center; width: var(--button-lg); height: var(--button-lg); border-radius: var(--radius-pill); background: var(--surface-inverse); color: var(--on-inverse); box-shadow: var(--shadow-card); transition: bottom .2s ease; }
.v3-wa-float { background: #25D366; color: #fff; } /* WhatsApp brand green: third-party mark exception */
.v3-wa-float__logo { width: 28px; height: 28px; display: block; }
@media (max-width: 959px) {
  .v3-sticky-on .v3-wa-float { bottom: calc(var(--tap-min) + var(--space-24) + var(--space-16) + env(safe-area-inset-bottom, 0px)); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .v3-sticky, .v3-wa-float, .uv-btn, .uv-faq summary .uv-icon { transition: none; }
}