/* HOME — the Magnetic Screens family homepage.
   Ported 2026-08-27 from the sibling magneticscreens.mx (src/index.html), which is the
   design insectscreensaustria.com and magneticscreens.nl also run, on the CEO's
   instruction to "port the family home page properly for both languages".

   Loaded ONLY by the two home pages, via `extraCss` in their front matter, because it
   carries global resets (body font-size, section padding, h2/h3/h4) that are meant for
   this page and would restyle the whole site if they sat in style.css.

   The family page's OWN .nav / .footer / .overlay / .burger rules are stripped: this repo
   keeps its house .topnav and .site-footer, which are bilingual since 2026-08-27 and which
   the siblings' standalone page does not have. Tokens (--ink, --gold-deep, --maxw, --line)
   come from style.css, exactly as the source file assumed. */

/* Four tokens the source stylesheet uses and THIS repo's style.css does not define:
   --accent, --ink-faint, --radius and --radius-lg. Left undefined they resolve to
   nothing, which makes the whole declaration invalid: rounded corners disappear and a
   colour falls back to whatever it inherits. Values are the source repo's own
   (WEB-magneticscreensmx-port/src/assets/css/style.css), and --accent is the same
   #ff7300 this store already has as --gold, so nothing new is introduced. Scoped to
   this stylesheet, which only the two home pages load. */
:root{
  --accent:#ff7300;
  --ink-faint:#9b9b9b;
  --radius:10px;
  --radius-lg:16px;
}


/* Page-specific styles only. Tokens, buttons, nav and footer come from
   /assets/css/style.css and /assets/css/nav.css, loaded above. */

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:"Inter",system-ui,-apple-system,sans-serif;
  font-size:18px;line-height:1.65;color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
h2,h3,h4{font-family:"Inter",system-ui,-apple-system,sans-serif;font-weight:500;line-height:1.12;letter-spacing:-.01em}
h2{font-size:clamp(1.9rem,5vw,3rem)}
h3{font-size:clamp(1.35rem,3vw,1.7rem)}
h4{font-size:1.18rem;font-weight:600}
.eyebrow{
  font-size:.8rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold-deep);margin-bottom:14px;
}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
section{padding:clamp(64px,9vw,110px) 0}
/* Buttons come from style.css. This page used to redeclare them identically. */

/* ============ NAV: solid, sticky, readable ============ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:60;
  padding-top:env(safe-area-inset-top,0px);
  background:rgba(250,251,252,.92);backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);
}
section[id]{scroll-margin-top:84px}
.nav-inner{
  max-width:var(--maxw);margin:0 auto;padding:13px 24px;
  display:flex;align-items:center;justify-content:space-between;
}
.nav-links{display:none;align-items:center;gap:26px}
.nav-links a{color:var(--ink-soft);font-weight:600;font-size:.97rem;transition:.2s}
.nav-links a:hover{color:var(--gold-deep)}
.nav-cta{
  display:none;min-height:46px;padding:0 22px;border-radius:var(--radius);
  background:var(--accent);border:none;
  color:#fff;font-weight:700;font-size:.92rem;align-items:center;transition:.25s;
}
.nav-cta:hover{box-shadow:var(--shadow-sm)}
/* hamburger */
.burger{
  width:50px;height:50px;background:#fff;
  border-radius:var(--radius);border:1px solid var(--line);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer;
}
body.menu-open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.menu-open .burger span:nth-child(2){opacity:0}
body.menu-open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* fullscreen overlay nav */
.overlay{
  position:fixed;inset:0;z-index:55;background:var(--ink);
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px;
  opacity:0;visibility:hidden;transform:translateY(-12px);transition:.35s ease;
  padding:calc(env(safe-area-inset-top) + 80px) 24px calc(env(safe-area-inset-bottom) + 40px);
}
body.menu-open .overlay{opacity:1;visibility:visible;transform:none}
/* ============ HERO ============ */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;isolation:isolate}
.hero-bg{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:72% center}
/* multi-layer blend: warm wash + legibility gradient over the photo */
.hero-bg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg, rgba(250,251,252,.97) 0%, rgba(250,251,252,.86) 32%, rgba(250,251,252,.34) 56%, rgba(250,251,252,0) 78%),
    linear-gradient(180deg, rgba(15,20,25,.28) 0%, rgba(15,20,25,0) 30%),
    radial-gradient(120% 90% at 12% 40%, rgba(95,128,67,.16) 0%, rgba(95,128,67,0) 55%);
  mix-blend-mode:normal;
}
.hero-grid{display:grid;grid-template-columns:1fr;gap:40px;align-items:center}
.hero-content{padding-top:120px;padding-bottom:120px;max-width:600px}
.hero-col-right{display:none}
.hero .badge{
  display:inline-flex;align-items:center;gap:9px;
  background:rgba(255,255,255,.7);border:1px solid var(--gold-soft);
  padding:8px 16px;border-radius:999px;font-size:.82rem;font-weight:700;
  color:var(--gold-deep);letter-spacing:.04em;margin-bottom:22px;backdrop-filter:blur(3px);
}
.hero .badge svg{width:15px;height:15px}
/* The source page's hero heading is an <h2>; this page's is the <h1> (its only one).
   Both selectors, or the headline falls through to style.css's Fraunces serif. */
.hero h1,.hero h2{font-family:"Inter",system-ui,-apple-system,sans-serif;font-size:clamp(2.4rem,7vw,4.1rem);font-weight:500;color:var(--ink);margin-bottom:20px}
.hero h1 em,.hero h2 em{font-style:italic;color:var(--gold-deep)}
.hero p{font-size:1.18rem;color:var(--ink-soft);max-width:480px;margin-bottom:14px}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.hero-trust{display:flex;align-items:center;gap:18px;margin-top:30px;flex-wrap:wrap}
.stars{display:flex;gap:2px}
.stars svg{width:18px;height:18px;color:var(--gold)}
.hero-trust span{font-size:.95rem;font-weight:600;color:var(--ink-soft)}
/* ============ MARQUEE / TRUST STRIP ============ */
.strip{background:var(--ink);color:#fff;padding:18px 0}
.strip .wrap{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 40px;align-items:center}
.strip .item{display:flex;align-items:center;gap:10px;font-size:.92rem;font-weight:600;letter-spacing:.02em}
.strip svg{width:20px;height:20px;color:var(--gold-soft);flex:none}
/* ============ SECTION HEADERS ============ */
.sec-head{max-width:680px;margin:0 auto 56px;text-align:center}
.sec-head p{color:var(--ink-soft);margin-top:16px;font-size:1.1rem}
.divider{width:54px;height:3px;background:var(--accent);border-radius:3px;margin:0 auto 22px}
.divider.left{margin-left:0}
/* ============ BENEFITS ============ */
.benefits{background:var(--white)}
.grid-benefits{display:grid;grid-template-columns:1fr;gap:22px}
.bcard{
  background:var(--cream);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:34px 30px;transition:.3s;
}
.bcard:hover{box-shadow:var(--shadow);border-color:var(--gold-soft)}
.bcard .ic{
  width:56px;height:56px;border-radius:var(--radius-lg);display:grid;place-items:center;
  background:#fff;border:1px solid var(--gold-soft);margin-bottom:20px;
}
.bcard .ic svg{width:28px;height:28px;color:var(--gold-deep)}
.bcard h4{margin-bottom:10px}
.bcard p{color:var(--ink-soft);font-size:1rem}
/* ============ SOCIAL PROOF ============ */
.reviews{background:var(--cream)}
.review-meta{display:flex;flex-direction:column;align-items:center;gap:8px;margin-bottom:46px}
.review-meta .big{font-family:"Inter",system-ui,-apple-system,sans-serif;font-size:2.6rem;color:var(--ink)}
.review-meta .stars svg{width:24px;height:24px;color:var(--gold)}
.review-meta small{color:var(--ink-soft);font-weight:600}
.grid-reviews{display:grid;grid-template-columns:1fr;gap:22px}
.rcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:30px;box-shadow:var(--shadow-sm)}
.rcard .stars{display:flex;gap:2px;margin-bottom:16px}
.rcard .stars svg{width:17px;height:17px;color:var(--gold)}
.rcard blockquote{font-size:1.05rem;line-height:1.6;color:var(--ink);margin-bottom:20px}
.rcard .who{display:flex;align-items:center;gap:13px}
.rcard .av{width:42px;height:42px;border-radius:50%;background:var(--cream-2);display:grid;place-items:center;font-family:"Inter",system-ui,-apple-system,sans-serif;font-weight:600;color:var(--gold-deep);flex:none}
.rcard .who b{display:block;font-size:.95rem}
.rcard .who small{color:var(--ink-soft);font-size:.82rem;display:flex;align-items:center;gap:5px}
.rcard .who small svg{width:13px;height:13px;color:var(--gold)}
/* ============ PRODUCT DETAILS / SPECS ============ */
.product{background:var(--white)}
.product-grid{display:grid;grid-template-columns:1fr;gap:40px;align-items:center}
.product-figure{position:relative;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow);background:var(--cream)}
.product-figure img{width:100%;aspect-ratio:1/1;object-fit:contain}
.product-figure .tag{
  position:absolute;left:18px;bottom:18px;background:rgba(255,255,255,.92);
  backdrop-filter:blur(4px);padding:10px 16px;border-radius:var(--radius);
  font-weight:700;font-size:.85rem;color:var(--gold-deep);display:flex;align-items:center;gap:8px;
}
.product-figure .tag svg{width:16px;height:16px}
.spec-list{list-style:none;display:grid;gap:2px;margin-top:26px;border-top:1px solid var(--line)}
.spec-list li{display:flex;justify-content:space-between;gap:16px;padding:15px 2px;border-bottom:1px solid var(--line);font-size:1rem}
.spec-list li span:first-child{color:var(--ink-soft)}
.spec-list li span:last-child{font-weight:600;text-align:right}
.product-copy h2{margin-bottom:8px}
.product-copy>p{color:var(--ink-soft);margin-top:14px}
.price-block{display:flex;align-items:baseline;flex-wrap:wrap;gap:12px;margin:22px 0 4px}
.price-block .price{font-family:"Inter",system-ui,-apple-system,sans-serif;font-size:2.4rem;font-weight:600;color:var(--ink);line-height:1}
.price-block .ship{font-size:.95rem;font-weight:600;color:var(--gold-deep);display:inline-flex;align-items:center;gap:6px}
.price-block .ship svg{width:16px;height:16px}
.price-note{font-size:.9rem;color:var(--ink-soft);margin-top:6px}
.price-note a{color:var(--gold-deep);font-weight:600}
.feature-row{display:flex;gap:14px;align-items:flex-start;margin-top:22px}
.feature-row .fic{width:42px;height:42px;border-radius:var(--radius);background:var(--cream);display:grid;place-items:center;flex:none;border:1px solid var(--gold-soft)}
.feature-row .fic svg{width:22px;height:22px;color:var(--gold-deep)}
.feature-row h4{font-size:1.05rem;margin-bottom:3px}
.feature-row p{font-size:.96rem;color:var(--ink-soft)}
/* product cards (collection) */
.shop-grid{display:grid;grid-template-columns:1fr;gap:24px}
@media(min-width:620px){.shop-grid{grid-template-columns:1fr 1fr}
}
@media(min-width:920px){.shop-grid{grid-template-columns:repeat(3,1fr)}
}
.scard{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;display:flex;flex-direction:column;transition:.3s}
.scard:hover{border-color:var(--ink-faint)}
.scard-pic{position:relative;display:block;aspect-ratio:1/1;background:var(--cream)}
.scard-pic img{width:100%;height:100%;object-fit:cover}
.scard-badge{position:absolute;top:14px;left:14px;background:var(--accent);color:#fff;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:5px 12px;border-radius:999px}
.scard-meta{padding:24px 24px 28px;display:flex;flex-direction:column;flex:1}
.scard-meta .stars{display:flex;gap:2px;margin-bottom:12px}
.scard-meta .stars svg{width:16px;height:16px;color:var(--gold)}
.scard-meta h3{font-family:"Inter",system-ui,-apple-system,sans-serif;font-size:1.32rem;font-weight:600;margin-bottom:8px}
.scard-meta>p{color:var(--ink-soft);font-size:.98rem;margin-bottom:18px;flex:1}
.scard-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:10px;margin-bottom:18px}
.scard-price .now{font-family:"Inter",system-ui,-apple-system,sans-serif;font-size:1.7rem;font-weight:600;color:var(--ink);line-height:1}
.scard-price .was{color:var(--ink-soft);text-decoration:line-through;font-size:1.05rem}
.scard-price .ship{width:100%;font-size:.85rem;font-weight:600;color:var(--gold-deep)}
.scard .btn{width:100%}
/* ============ FAQ ============ */
.faq{background:var(--cream)}
.faq-list{max-width:var(--maxw);margin:0 auto;display:grid;gap:14px}
.faq-item{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
.faq-q{
  width:100%;min-height:52px;text-align:left;background:none;border:none;cursor:pointer;
  padding:20px 24px;display:flex;justify-content:space-between;align-items:center;gap:16px;
  font-family:"Inter",system-ui,-apple-system,sans-serif;font-size:1.06rem;font-weight:600;color:var(--ink);
}
.faq-q h3{font-family:"Inter",system-ui,-apple-system,sans-serif;font-size:1.06rem;font-weight:600;line-height:1.4;letter-spacing:0;color:var(--ink);margin:0}
.faq-q svg{width:22px;height:22px;color:var(--gold-deep);flex:none;transition:.3s}
.faq-item.open .faq-q svg{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease}
.faq-a .inner{padding:0 24px 22px;color:var(--ink-soft);font-size:1rem}
/* ============ FINAL CTA / SHOP ============ */
.shop{position:relative;background:var(--ink);color:#fff;text-align:center;overflow:hidden}
.shop::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(80% 120% at 50% 0%, rgba(95,128,67,.34) 0%, rgba(95,128,67,0) 60%);
}
.shop .wrap{position:relative;z-index:2;max-width:720px}
.shop h2{color:#fff;margin-bottom:18px}
.shop h2 em{font-style:italic;color:var(--gold-soft)}
.shop p{color:rgba(255,255,255,.82);font-size:1.15rem;margin-bottom:18px}
.shop .urgency{
  display:inline-flex;align-items:center;gap:9px;background:rgba(95,128,67,.2);
  border:1px solid rgba(228,231,235,.4);padding:9px 18px;border-radius:var(--radius);
  font-size:.9rem;font-weight:700;color:var(--gold-soft);letter-spacing:.03em;margin-bottom:30px;
}
.shop .urgency svg{width:16px;height:16px}
.shop .guarantees{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 30px;margin-top:34px}
.shop .guarantees .g{display:flex;align-items:center;gap:9px;font-size:.92rem;font-weight:600;color:rgba(255,255,255,.85)}
.shop .guarantees svg{width:18px;height:18px;color:var(--gold-soft)}
/* ============ FOOTER ============ */
.footer{background:#12171c;color:rgba(255,255,255,.7);padding:46px 0 calc(36px + var(--safe-b))}
.footer-links{display:flex;flex-wrap:wrap;gap:14px 28px}
.footer-links a{font-size:.92rem;font-weight:600;transition:.2s}
.footer-links a:hover{color:var(--gold-soft)}
.footer-cols{display:grid;grid-template-columns:1fr;gap:26px}
.footer-col h4{color:#fff;font-family:"Inter",system-ui,-apple-system,sans-serif;font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-bottom:14px;opacity:.75}
.footer-col nav{display:flex;flex-direction:column;gap:11px}
.footer-col nav a{font-size:.94rem;font-weight:600;transition:.2s;padding:5px 0;display:inline-block}
.footer-col nav a:hover{color:var(--gold-soft)}
@media(min-width:620px){.footer-cols{grid-template-columns:1fr 1fr}
}
.footer .fine{font-size:.82rem;opacity:.6;border-top:1px solid rgba(255,255,255,.12);padding-top:22px}
/* ============ STICKY SHOP NOW ============ */
.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  padding:12px 16px calc(12px + var(--safe-b));
  background:rgba(255,255,255,.9);backdrop-filter:blur(10px);
  border-top:1px solid var(--line);
  transform:translateY(120%);transition:transform .4s ease;
}
.sticky-cta.show{transform:none}
.sticky-cta .btn{width:100%;font-size:1.05rem}
@media(min-width:880px){.sticky-cta{display:none}
}

/* ============ BUYING GUIDE ARTICLE ============ */
.guide{background:var(--white)}
.guide .wrap{max-width:var(--maxw)}
.guide .sec-head{margin-bottom:40px}
.guide-body h2{font-size:clamp(1.6rem,4vw,2.2rem);margin:48px 0 14px;color:var(--ink);clear:both}
.guide-body h2:first-child{margin-top:0}
.guide-body h3{font-size:clamp(1.25rem,3vw,1.5rem);margin:34px 0 10px;color:var(--ink);clear:both}
.guide-body h4{font-size:1.12rem;font-weight:600;margin:24px 0 8px;color:var(--gold-deep);font-family:"Inter",system-ui,-apple-system,sans-serif;letter-spacing:0}
.guide-body p{color:var(--ink-soft);font-size:1.05rem;margin-bottom:16px}
.guide-body h2::after{content:"";display:block;width:46px;height:3px;margin-top:14px;background:var(--accent);border-radius:3px}
.guide-body strong{color:var(--ink);font-weight:600}
/* ============ CONTACT & COMPANY DETAILS ============ */
.contact{background:var(--white)}
.contact-grid{display:grid;grid-template-columns:1fr;gap:32px}
.contact-intro p{color:var(--ink-soft);font-size:1.06rem;margin-bottom:24px;max-width:460px}
.contact-methods{display:grid;gap:14px}
.cmethod{display:flex;align-items:center;gap:16px;background:var(--cream);border:1px solid var(--line);border-radius:var(--radius-lg);padding:18px 20px;transition:.25s}
.cmethod:hover{border-color:var(--gold-soft);}
.cmethod .ic{width:46px;height:46px;flex:none;border-radius:var(--radius);background:#fff;border:1px solid var(--gold-soft);display:grid;place-items:center}
.cmethod .ic svg{width:22px;height:22px;color:var(--gold-deep)}
.cmethod small{display:block;font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.cmethod b{font-size:1.05rem;font-weight:600;color:var(--ink);word-break:break-word}
.company-card{background:var(--cream);border:1px solid var(--line);border-radius:var(--radius-lg);padding:30px}
.company-card h3{margin-bottom:6px}
.company-card .sub{color:var(--ink-soft);font-size:.95rem;margin-bottom:20px}
.detail-list{list-style:none;display:grid;gap:0}
.detail-list li{display:grid;grid-template-columns:1fr;gap:2px;padding:14px 0;border-top:1px solid var(--line)}
.detail-list li:first-child{border-top:none;padding-top:0}
.detail-list .k{font-size:.76rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-deep)}
.detail-list .v{font-size:1rem;color:var(--ink);line-height:1.5}
.detail-list .v a{color:var(--gold-deep);font-weight:600}
.trust-badges{display:grid;grid-template-columns:1fr;gap:22px;margin-top:38px;padding-top:38px;border-top:1px solid var(--line)}
.tbadge{display:flex;gap:15px;align-items:flex-start}
.tbadge .ic{width:44px;height:44px;flex:none;border-radius:var(--radius);background:var(--cream);border:1px solid var(--gold-soft);display:grid;place-items:center}
.tbadge .ic svg{width:22px;height:22px;color:var(--gold-deep)}
.tbadge h4{font-size:1.05rem;margin-bottom:4px}
.tbadge p{font-size:.95rem;color:var(--ink-soft);margin:0}
/* ============ DELIVERY STATEMENT ============ */
.delivery{display:grid;grid-template-columns:1fr;gap:18px;align-items:start;margin-top:38px;background:var(--cream));border:1px solid var(--gold-soft);border-radius:var(--radius-lg);padding:30px}
.delivery .ic{width:52px;height:52px;flex:none;border-radius:var(--radius);background:#fff;border:1px solid var(--gold-soft);display:grid;place-items:center}
.delivery .ic svg{width:26px;height:26px;color:var(--gold-deep)}
.delivery h3{margin-bottom:8px;display:flex;align-items:center;gap:10px}
.delivery p{color:var(--ink-soft);font-size:1.04rem;margin:0;line-height:1.65}
.delivery strong{color:var(--ink);font-weight:600}
@media(min-width:680px){.delivery{grid-template-columns:auto 1fr;gap:24px;padding:32px 38px}
}

/* ============ GALLERY ============ */
.gallery{background:var(--cream)}
.gallery-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.gallery-grid figure{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;transition:.3s}
.gallery-grid figure:hover{box-shadow:var(--shadow);border-color:var(--gold-soft)}
.gallery-grid .pic{aspect-ratio:1/1;background:var(--cream);display:grid;place-items:center}
.gallery-grid .pic img{width:100%;height:100%;object-fit:contain}
.gallery-grid figcaption{padding:14px 16px;font-size:.9rem;font-weight:600;color:var(--ink-soft)}
@media(min-width:760px){.gallery-grid{grid-template-columns:repeat(3,1fr);gap:22px}
}

/* buying-guide inline figures */
.guide-fig{margin:26px 0;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;background:var(--cream)}
.guide-fig img{width:100%;aspect-ratio:1/1;object-fit:contain;display:block}
.guide-fig figcaption{padding:13px 18px;font-size:.88rem;color:var(--ink-soft);background:#fff;border-top:1px solid var(--line)}
@media(min-width:620px){.guide-fig{float:right;width:300px;margin:6px 0 18px 28px}
}

/* ============ LLM / AI SUMMARY ============ */
.summary{background:var(--cream)}
.summary .wrap{max-width:var(--maxw)}
.summary-lead{color:var(--ink-soft);font-size:1.05rem;line-height:1.7;margin-bottom:26px}
.sum-facts{list-style:none;display:grid;gap:0;border-top:1px solid var(--line)}
.sum-facts li{display:grid;grid-template-columns:1fr;gap:3px;padding:13px 0;border-bottom:1px solid var(--line)}
.sum-facts .k{font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-deep)}
.sum-facts .v{font-size:1rem;color:var(--ink);line-height:1.55}
.sum-facts .v a{color:var(--gold-deep);font-weight:600}
.sum-note{font-size:.9rem;color:var(--ink-soft);margin-top:22px}
@media(min-width:620px){.sum-facts li{grid-template-columns:210px 1fr;gap:20px;align-items:baseline}
}

/* reveal on scroll */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
/* ============ RESPONSIVE ============ */
@media(min-width:560px){.grid-benefits{grid-template-columns:1fr 1fr}
.grid-reviews{grid-template-columns:1fr 1fr}
}
@media(min-width:880px){.burger{display:none}
.nav-links{display:flex}
.nav-cta{display:inline-flex}
.grid-benefits{grid-template-columns:repeat(3,1fr)}
.grid-reviews{grid-template-columns:repeat(3,1fr)}
.product-grid{grid-template-columns:1fr 1fr;gap:56px}
.hero-content{padding-top:90px}
.hero-grid{grid-template-columns:1fr 1fr}
.hero-col-right{display:block}
.contact-grid{grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.trust-badges{grid-template-columns:repeat(3,1fr);gap:30px}
}
/* Below 880px the hero is a single column, so the text spans the full width and the
   left-to-right wash no longer protects it: with the photo cropped at 72% the heading
   lands directly on the family's faces. On narrow screens use a top-down wash instead,
   so the copy sits on clean cream and the photograph shows through underneath. */
@media(max-width:879px){.hero{min-height:auto}
.hero-bg img{object-position:68% 32%}
.hero-bg::after{
    background:
      linear-gradient(180deg,
        rgba(250,251,252,.97) 0%,
        rgba(250,251,252,.94) 42%,
        rgba(250,251,252,.62) 68%,
        rgba(250,251,252,.12) 100%),
      radial-gradient(120% 70% at 20% 20%, rgba(95,128,67,.12) 0%, rgba(95,128,67,0) 60%);
  }
.hero-content{padding-top:104px;padding-bottom:72px}
}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
.reveal{opacity:1;transform:none}


/* ---------------------------------------------------------------
   ADAPTATIONS, 2026-08-27. Three things the source file assumed that are not true here.

   1. `.reveal` is opacity:0 until a script adds `.in`. On the source page that script was
      inline in the page; if it never runs, the hero copy, all six benefit cards, every
      section heading and the contact block are INVISIBLE. That is a blank home page one
      broken script away, so the hiding is now gated behind `html.js-anim`, which
      /assets/js/home.js sets on itself before it does anything else. No JS, no animation,
      full content. The source's prefers-reduced-motion escape hatch is kept below.

   2. The FAQ is <details>/<summary> here, not a button plus a max-height div driven by
      JS. That is what the product pages already use, it is what the `product_faqs` gate
      counts, and it opens without JavaScript. `.faq-a{max-height:0}` would have kept every
      answer shut forever against that markup.

   3. (Reversed 2026-08-28.) The hero originally swapped the family's `.hero-bg` photo
      backdrop for a product PNG in `.hero-col-right`, which left the hero flat white and
      nothing like the family page, worst on mobile where the right column is display:none.
      The `.hero-bg` markup and its photo are back, matching the source page.
   --------------------------------------------------------------- */
.reveal{opacity:1;transform:none}
html.js-anim .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
html.js-anim .reveal.in{opacity:1;transform:none}

.faq-item{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg,18px);overflow:hidden}
summary.faq-q{
  list-style:none;cursor:pointer;padding:20px 24px;min-height:52px;
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  font-family:"Inter",system-ui,-apple-system,sans-serif;font-size:1.06rem;font-weight:600;
  line-height:1.4;color:var(--ink);
}
summary.faq-q::-webkit-details-marker{display:none}
summary.faq-q::after{content:"+";font-size:1.5rem;line-height:1;color:var(--gold-deep);transition:.3s}
details[open] > summary.faq-q::after{transform:rotate(45deg)}
.faq-a{max-height:none;overflow:visible;padding:0 24px 22px;color:var(--ink-soft);font-size:1rem}
.faq-a p{margin:0}