/* ============================================================
   Vita D3 ODF — Layout: nav, hero, sections, grids, footer
   ============================================================ */

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: var(--container-narrow); }
.container--wide { max-width: var(--container-wide); }

section[id] { scroll-margin-top: 88px; }
.section { padding-block: clamp(var(--space-7), 9vw, var(--space-9)); position: relative; }
/* Unified page background: sections are transparent, body carries the single bg */
.section--tint, .section--gold-tint { background: transparent; }

.section__head { max-width: 720px; margin: 0 auto clamp(var(--space-6), 5vw, var(--space-8)); text-align: center; }
.section__head p { margin-inline: auto; color: var(--color-ink-700); font-size: var(--fs-lg); }
.section__head .u-eyebrow { display: inline-block; margin-bottom: var(--space-3); }

/* ---------------- Nav ---------------- */
.nav {
  position: sticky; top: 0; z-index: var(--z-nav);   /* sticky = pinned on scroll, but in-flow so it can't be stretched by page overflow */
  backdrop-filter: saturate(1.4) blur(12px);
  background: rgba(255,255,255,0.78);
  border-bottom: 1px solid rgba(201,210,214,0.5);
}
.nav__inner { display: flex; align-items: center; gap: var(--space-4); min-height: 72px; }
.nav__brand { display: flex; align-items: center; gap: var(--space-2); font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-lg); color: var(--color-teal-700); }
.nav__brand .brand-d3 { color: var(--color-gold-500); }
.nav__brand img, .nav__brand svg { width: 34px; height: 34px; }
.nav__links { display: flex; align-items: center; gap: var(--space-5); margin-inline-start: auto; }
.nav__links a { color: var(--color-ink-700); font-weight: var(--fw-medium); font-size: var(--fs-sm); }
.nav__links a:hover { color: var(--color-teal-700); }
.nav__actions { display: flex; align-items: center; gap: var(--space-3); }
.nav__link-home { color: var(--color-ink-700); font-weight: var(--fw-medium); font-size: var(--fs-sm); }
.nav__link-home:hover { color: var(--color-teal-700); }
.nav__toggle { display: none; background: transparent; border: none; color: var(--color-ink-900); padding: var(--space-2); }

@media (max-width: 920px) {
  .nav__links { display: none; }
  .nav__inner { justify-content: space-between; gap: 0.5rem; }   /* brand at start, lang toggle + menu at end */
  .nav__actions { gap: 0.5rem; }
  .nav__toggle { display: inline-flex; }
  .nav__cta { display: none; } /* hero CTA + menu cover this on mobile; avoids crowding */
  .nav--open .nav__links {
    display: flex; position: absolute; inset-inline: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--color-surface); box-shadow: var(--shadow-lg);
    padding: var(--space-3); border-bottom: 1px solid var(--color-silver-300);
  }
  .nav--open .nav__links a { padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); }
  .nav--open .nav__links a:hover { background: var(--color-teal-100); }
}

/* ---------------- Hero ---------------- */
.hero { position: relative; padding-block: 0; overflow: visible; }
.hero__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(var(--space-5), 5vw, var(--space-8)); align-items: center; min-height: calc(100vh - 72px); align-content: center; }
.hero__copy { max-width: 34rem; }
.hero__badges { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-5); }
.hero h1 { margin-bottom: var(--space-4); }
.hero__lede { font-size: var(--fs-lg); color: var(--color-ink-700); margin-bottom: var(--space-6); }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.hero__proof { display: flex; gap: var(--space-5); margin-top: var(--space-7); flex-wrap: wrap; }
.hero__proof-item { }
.hero__proof-num { font-family: var(--font-data); font-weight: var(--fw-semibold); font-size: var(--fs-xl); color: var(--color-teal-700); display: block; }
.hero__proof-label { font-size: var(--fs-sm); color: var(--color-ink-500); }

.hero__visual { position: relative; display: grid; place-items: center; }
.hero__stage { position: relative; display: grid; place-items: center; width: 100%; }
.hero__halo { width: min(560px, 96%); aspect-ratio: 1; }
/* Pack shot sits inside the ring; grid-area stack keeps img + SVG fallback centered */
.hero__halo > .hero__product { grid-area: 1 / 1; }
/* Enlarged (~2x footprint) + tilted. Tilt is baked into the keyframes so it
   survives the translate animation; base transform keeps it for reduced-motion. */
.hero__product {
  width: 112%; max-width: none;
  transform: rotate(-7deg);
  filter: drop-shadow(0 34px 50px rgba(18,35,42,0.32));
  animation: floaty 6.5s var(--ease-out) infinite;
}
@keyframes floaty {
  0%,100% { transform: rotate(-7deg) translateY(0); }
  50%     { transform: rotate(-7deg) translateY(-14px); }
}
@media (prefers-reduced-motion: reduce) { .hero__product { animation: none; } }

/* Orbiting benefit chips */
.feat {
  position: absolute; z-index: 3;
  display: inline-flex; align-items: center; gap: var(--space-2);
  background: rgba(255,255,255,0.9); backdrop-filter: saturate(1.3) blur(8px);
  border: 1px solid rgba(201,210,214,0.6); border-radius: var(--radius-pill);
  padding: 6px 14px 6px 6px; box-shadow: var(--shadow-md);
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: var(--fs-sm); color: var(--color-ink-900); white-space: nowrap;
  animation: floatChip 5.5s var(--ease-out) infinite; animation-delay: var(--d, 0s);
}
html[lang="ar"] .feat { padding: 6px 6px 6px 14px; }
.feat__ic { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--color-teal-100); color: var(--color-teal-500); }
.feat__ic--gold { background: var(--color-gold-100); color: var(--color-gold-700); }
.feat__ic svg { width: 18px; height: 18px; }
.feat--tl { top: 4%;  inset-inline-start: 0%; }
.feat--tr { top: 16%; inset-inline-end: -3%; }
.feat--bl { bottom: 14%; inset-inline-start: 1%; }
.feat--br { bottom: 3%;  inset-inline-end: 0%; }
@keyframes floatChip { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@media (prefers-reduced-motion: reduce) { .feat { animation: none; } }

@media (max-width: 860px) {
  .hero__grid { grid-template-columns: 1fr; text-align: center; }
  .hero__grid > * { min-width: 0; }              /* allow the column to shrink — stops horizontal overflow */
  .hero__copy { margin-inline: auto; }
  .hero__badges, .hero__cta, .hero__proof { justify-content: center; }
  .hero__visual { order: -1; }
  .hero__halo { width: min(340px, 82%); }
  .hero__product { width: 100%; }                /* was 106% — bled past the viewport on phones */
  .hero h1 { font-size: clamp(1.8rem, 7vw, var(--fs-3xl)); }
  .feat { display: none; } /* declutter the stacked mobile hero */
}

/* ---------------- Generic grids ---------------- */
.grid { display: grid; gap: var(--space-5); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.grid--audience { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 860px) { .grid--3, .grid--2 { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .grid--audience { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .grid--audience { grid-template-columns: 1fr; } }

/* Problem & Solution: contained panel — illustration bleeds to the panel edges, copy is padded */
.problem-panel,
.solution-panel {
  border-radius: 28px;
  overflow: hidden;               /* clip the full-bleed image to the rounded panel */
}
.problem-panel  { background: #fff; }
.solution-panel { background: #ECF3C7; }
#problem .split,
#product .split { gap: 0; }        /* image column meets copy column with no gutter */
#problem .split__body,
#product .split__body { padding: clamp(var(--space-5), 4.5vw, var(--space-8)); }
.split__illus--photo { width: 100%; object-fit: cover; object-position: center; }
/* On desktop the illustration fills the panel edge-to-edge (top, bottom, outer side); copy stays padded */
@media (min-width: 861px) {
  #problem .split,
  #product .split { align-items: stretch; }
  #problem .split__visual,
  #product .split__visual { place-items: center; }
  #problem .split__illus--photo,
  #product .split__illus--photo { height: 82%; }
}

/* Split feature (problem / solution) */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(var(--space-5), 5vw, var(--space-8)); align-items: center; }
.split--reverse .split__visual { order: -1; }
.split__visual { display: grid; place-items: center; }
/* .split__illus width cap removed — the panel photos now fill the full column width (.split__illus--photo) */
.split ul.checks { display: grid; gap: var(--space-3); margin-top: var(--space-4); }
.split ul.checks li { display: flex; gap: var(--space-3); align-items: flex-start; color: var(--color-ink-700); }
.split ul.checks svg { flex: none; color: var(--color-teal-500); width: 22px; height: 22px; margin-top: 2px; }
@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; }
  .split--reverse .split__visual { order: 0; }
  #problem .split__visual { order: 2; }   /* problem: image sits under the copy on mobile */
}

/* Symptom pills row (problem section) */
.symptoms { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.symptoms .badge { background: var(--color-surface); border: 1px solid var(--color-silver-300); color: var(--color-ink-700); }
.symptoms .badge svg { color: var(--color-gold-500); }
.problem-audience { margin-top: var(--space-6); }
.problem-audience .u-eyebrow { display: inline-block; margin-bottom: var(--space-2); }
.problem-audience h3 { margin-bottom: var(--space-4); }
.problem-audience .grid--audience { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* Why-D3 comparison */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-top: var(--space-5); }
.compare__col { display: flex; align-items: center; gap: clamp(var(--space-3), 2.5vw, var(--space-6)); padding: var(--space-6); border-radius: var(--radius-lg); }
.compare__col--d3 { background: #FBE5B9; }   /* matches the D3 sun image background */
.compare__col--d2 { background: #D4D4D4; }   /* matches the D2 mushroom image background */
.compare__text { flex: 1 1 auto; min-width: 0; }   /* title + list on the copy side */
.compare__col h3 { display: flex; align-items: center; gap: var(--space-2); }
.compare__col ul { display: grid; gap: var(--space-2); margin-top: var(--space-3); }
.compare__img { width: clamp(150px, 42%, 260px); aspect-ratio: 1; flex: none; object-fit: contain; }  /* large art on the far side */
.compare__col li { display: flex; gap: var(--space-2); align-items: flex-start; font-size: var(--fs-sm); }
@media (max-width: 620px) { .compare { grid-template-columns: 1fr; } }

/* CTA band */
.cta-band { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: #fff; border: 1px solid var(--color-silver-300); color: var(--color-ink-900); padding: clamp(var(--space-7), 7vw, var(--space-9)); text-align: center; box-shadow: var(--shadow-lg); }
.cta-band > h2, .cta-band > p { position: relative; z-index: 1; }
.cta-band h2 { color: var(--color-ink-900); }
.cta-band p { color: var(--color-ink-700); margin-inline: auto; }
.cta-band .btn { box-shadow: var(--shadow-md); }

/* Floating decorative icons behind the CTA copy */
.cta-band__deco { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.cta-ic { position: absolute; width: clamp(42px, 4.6vw, 66px); aspect-ratio: 1; display: grid; place-items: center; border-radius: 17px; background: #fff; box-shadow: 0 10px 24px -12px rgba(18,35,42,0.22); animation: ctaFloat 7s ease-in-out infinite; }
.cta-ic svg { width: 54%; height: 54%; fill: none; }   /* override the global svg{fill:currentColor} so these read as line icons */
.cta-ic--sun    { color: var(--color-gold-500); background: #FFF6E4; }
.cta-ic--sleep  { color: #8C80D8; background: #F1EFFC; }
.cta-ic--leaf   { color: #57B587; background: #ECF6F0; }
.cta-ic--batt   { color: #E97C5D; background: #FDEEE8; }
.cta-ic--bone   { color: #7691B6; background: #EEF2F9; }
.cta-ic--shield { color: var(--color-teal-500); background: #E6F7FB; }
.cta-ic--sad    { color: #7691B6; background: #EEF2F9; }
.cta-mark { position: absolute; z-index: 0; color: var(--color-silver-300); font-weight: 700; line-height: 1; font-family: var(--font-display); }
.cta-mark--q { font-size: clamp(20px, 2vw, 30px); }
.cta-mark--plus { font-size: clamp(16px, 1.8vw, 26px); }
.cta-mark--plus.is-gold { color: #EFC776; }
.cta-mark--plus.is-green { color: #A9D8B8; }
.cta-dots { position: absolute; z-index: 0; color: var(--color-silver-300); opacity: .75; }
@keyframes ctaFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@media (prefers-reduced-motion: reduce) { .cta-ic { animation: none; } }
@media (max-width: 760px) { .cta-band__deco { display: none; } }

/* ---------------- Footer ---------------- */
.footer { background: #fff; color: var(--color-ink-700); border-top: 1px solid var(--color-silver-300); padding-block: var(--space-8) var(--space-6); margin-top: var(--space-8); }
.footer a { color: var(--color-ink-700); }
.footer a:hover { color: var(--color-teal-700); }
.footer__credit a { text-decoration: underline; text-underline-offset: 2px; }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--space-6); }
.footer__brand { display: flex; align-items: center; gap: var(--space-2); font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-lg); color: var(--color-teal-700); margin-bottom: var(--space-3); }
.footer h4 { color: var(--color-ink-900); font-size: var(--fs-md); margin-bottom: var(--space-3); }
.footer ul { display: grid; gap: var(--space-2); font-size: var(--fs-sm); }
.footer__legal { font-size: var(--fs-xs); color: var(--color-ink-500); line-height: var(--lh-normal); margin-top: var(--space-4); }
.footer__bottom { border-top: 1px solid var(--color-silver-300); margin-top: var(--space-6); padding-top: var(--space-4); display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; font-size: var(--fs-xs); color: var(--color-ink-500); }
@media (max-width: 760px) { .footer__grid { grid-template-columns: 1fr; } }

/* Scroll-reveal (JS adds .in) */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* ---------------- Legal pages (privacy notice) ---------------- */
.legal { max-width: 760px; }
.legal .section__head { margin-bottom: var(--space-7); }
.legal__version { font-size: var(--fs-sm) !important; color: var(--color-ink-500) !important; }
.legal h2 { font-size: var(--fs-xl); margin: var(--space-7) 0 var(--space-3); }
.legal p, .legal li { color: var(--color-ink-700); line-height: 1.75; }
.legal ul { list-style: disc; padding-inline-start: 1.25em; margin: 0 0 var(--space-4); }
.legal .nowrap { white-space: nowrap; }
.legal li + li { margin-top: var(--space-2); }
.legal a { color: var(--color-teal-700); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.legal__item { background: var(--color-surface); border: 1px solid rgba(201,210,214,0.6); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); margin-bottom: var(--space-3); box-shadow: var(--shadow-sm); }
.legal__item h3 { font-size: var(--fs-md); margin: 0 0 var(--space-2); }
.legal__item > p { margin: 0 0 var(--space-3); }
.legal__item dl { display: grid; gap: var(--space-2); margin: 0; font-size: var(--fs-sm); }
.legal__item dl div { display: grid; grid-template-columns: 9rem 1fr; gap: var(--space-3); }
.legal__item dt { font-weight: var(--fw-semibold); color: var(--color-ink-900); }
.legal__item dd { margin: 0; color: var(--color-ink-700); }
@media (max-width: 560px) { .legal__item dl div { grid-template-columns: 1fr; gap: 0; } }