/* ==========================================================================
   WOMP site — homepage v2 (index.html) on the "What's new in 4.0.0" template.
   Loaded AFTER styles.css?v=14 and whats-new-4-0-0.css?v=1.
   The page is built from the .wn400 components as they are (rows, strips,
   mini grid, #update cards, dark card, final CTA). This file only adds what
   the What's-new page doesn't need: the wrapping hero headline, small links,
   card tweaks for #free, the dark card used as a teaser, the FAQ look and
   the "Android — soon" pill on the green panel. Everything is scoped under
   .wn400.hv2 and uses the shared tokens from styles.css (:root).
   Site is light-only (no dark theme in styles.css).
   ========================================================================== */

/* ---------- Hero headline (wraps, unlike the one-line "WOMP 4.0.0") ---------- */
.wn400.hv2 .hv2-title {
  font-size: clamp(46px, 4.9vw, 66px);
  line-height: 1.02;
  letter-spacing: -0.045em;
  -webkit-hyphens: manual;
  hyphens: manual;
  text-wrap: balance;
}
.wn400.hv2 .hv2-title .wn-accent { white-space: normal; }

/* Section headings: no lone last word (older Safari ignores it — harmless) */
.wn400.hv2 .wn-sec h2,
.wn400.hv2 .wn-sec h3,
.wn400.hv2 .wn-sec h4,
.wn400.hv2 .final-cta h2 { text-wrap: balance; }

/* Sub-rows with their own anchor (#recipes, #alcohol) clear the sticky header */
.wn400.hv2 .wn-row[id] { scroll-margin-top: 92px; }

/* ---------- Small link "All about … →" and CTA row ---------- */
.wn400.hv2 .hv2-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
  color: var(--green);
  font-size: 15px;
  font-weight: 600;
}
.wn400.hv2 .hv2-more:hover { text-decoration: underline; }
.wn400.hv2 .hv2-cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.wn400.hv2 .hv2-note-center { max-width: 760px; margin: 22px auto 0; text-align: center; }
.wn400.hv2 .wn-list a { color: var(--green); text-decoration: underline; }

/* ---------- Wellness disclaimer under #privacy (template p.wn-note) ---------- */
.wn400.hv2 .hv2-disclaimer { max-width: 860px; margin-top: 56px; font-size: 13.5px; }
.wn400.hv2 .hv2-disclaimer strong { color: var(--text); font-weight: 600; }

/* ---------- Free & Premium: template #update cards with a list ---------- */
.wn400.hv2 .wn-update-ico { font-size: 24px; }
.wn400.hv2 .wn-update .wn-list { align-self: stretch; }
.wn400.hv2 .wn-update .wn-list li { font-size: 15.5px; }
.wn400.hv2 .wn-update p.text-secondary { font-size: 14.5px; }

/* ---------- What's new teaser: the template dark card on its own ---------- */
.wn400.hv2 #whats-new .wn-dark { margin-top: 0; }
.wn400.hv2 #whats-new .wn-dark .h3 { font-size: 34px; letter-spacing: -0.025em; }
.wn400.hv2 .hv2-dark-btn { margin-top: 26px; }

/* ---------- FAQ in the What's-new card look (markup stays for site.js toggleFaq) ---------- */
.wn400.hv2 .faq { max-width: 860px; gap: 12px; }
.wn400.hv2 .faq-item {
  border-radius: var(--r-card);
  border-color: var(--border-soft);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--dur-ui) var(--ease), background var(--dur-ui) var(--ease), box-shadow var(--dur-ui) var(--ease);
}
.wn400.hv2 .faq-item:hover { border-color: var(--border); box-shadow: var(--shadow-md); }
.wn400.hv2 .faq-item.open { background: var(--green-soft-2); border-color: var(--border-strong); }
.wn400.hv2 .faq-q { padding: 22px 24px; font-size: 17px; gap: 16px; }
.wn400.hv2 .faq-q:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; border-radius: var(--r-card); }
.wn400.hv2 .faq-q-chev {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--green-soft);
  color: var(--green);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 20px;
  line-height: 1;
}
.wn400.hv2 .faq-item.open .faq-q-chev { background: var(--green); color: #fff; }
.wn400.hv2 .faq-a { font-size: 15.5px; }
.wn400.hv2 .faq-a-body { padding: 0 24px 22px; }
.wn400.hv2 .faq-a-body a { color: var(--green); text-decoration: underline; }

.wn400.hv2 .hv2-reviews { max-width: 860px; margin: 22px auto 0; text-align: center; font-size: 15px; color: var(--text-secondary); }
.wn400.hv2 .hv2-reviews a { color: var(--green); font-weight: 600; }
.wn400.hv2 .hv2-reviews a:hover { text-decoration: underline; }

/* ---------- Final CTA: template "Coming soon" pill (#8A5A12 on #FFF4E0) ---------- */
.wn400.hv2 .hv2-final-soon {
  align-self: center;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 600;
}
.wn400.hv2 .hv2-final-soon svg { flex-shrink: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .wn400.hv2 .hv2-title { font-size: 54px; margin-inline: auto; max-width: 680px; }
}

@media (max-width: 900px) {
  .wn400.hv2 #whats-new .wn-dark { margin-top: 0; }
  .wn400.hv2 #whats-new .wn-dark .h3 { font-size: 28px; }
  .wn400.hv2 .hv2-disclaimer { margin-top: 40px; }
  .wn400.hv2 .faq-q { padding: 18px 18px; font-size: 16px; }
  .wn400.hv2 .faq-a-body { padding: 0 18px 18px; }
}

@media (max-width: 500px) {
  .wn400.hv2 .hv2-title { font-size: 38px; line-height: 1.05; letter-spacing: -0.035em; }
  .wn400.hv2 .hv2-cta-row .btn,
  .wn400.hv2 .wn-update .btn,
  .wn400.hv2 .hv2-dark-btn { align-self: stretch; width: 100%; }
  .wn400.hv2 .hv2-final-soon { flex: 1 1 100%; justify-content: center; }
  .wn400.hv2 #whats-new .wn-dark .h3 { font-size: 24px; }
  .wn400.hv2 .faq-q-chev { width: 30px; height: 30px; font-size: 18px; }
}

@media (max-width: 400px) {
  .wn400.hv2 .hv2-title { font-size: 34px; }
}

@media (max-width: 360px) {
  .wn400.hv2 .hv2-title { font-size: 31px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .wn400.hv2 .faq-item { transition: none; }
}