/* HolaGrower landing page — built from the static site by build_theme.py.
   Loaded only on pages using the "HolaGrower Landing" template. */

/* Neutralise anything global a parent theme or plugin may still print */
.hg-landing h1, .hg-landing h2, .hg-landing h3, .hg-landing p, .hg-landing ul { padding: 0; }
.hg-landing ul li { list-style: none; }
.hg-landing img { border: 0; }
body.hg-landing.admin-bar { --ab: 32px; }
@media (max-width: 782px) { body.hg-landing.admin-bar { --ab: 46px; } }
@media (max-width: 600px) { body.hg-landing.admin-bar { --ab: 0px; } }   /* admin bar scrolls away here */
.menu ul, .menu li { display: contents; }
/* base text, stronger than any theme's `body` rule */
body.hg-landing { margin: 0; font: 400 16px/1.7 var(--body); color: var(--text); background: var(--deep); }

/* =====================================================================
   TOKENS — colour scheme #144A34 #559950 #B2CE87 #F1F5EE #343A3F #9EA2AA
   ===================================================================== */
:root {
	--deep: #144a34;
	--green: #559950;
	--leaf: #b2ce87;
	--mist: #f1f5ee;
	--ink: #343a3f;
	--grey: #9ea2aa;
	--white: #fff;

	/* Everything below is one of the six colours, or one of them at reduced opacity */
	--text: var(--ink);                       /* body copy */
	--line: rgba(158, 162, 170, .35);         /* --grey: card borders */
	--tint: rgba(178, 206, 135, .32);         /* --leaf: icon tiles, phone screens */
	--tint-2: rgba(178, 206, 135, .55);       /* --leaf: chat bubbles */

	--head: "Nunito", system-ui, sans-serif;
	--body: "Poppins", system-ui, sans-serif;

	--wrap: 1184px;
	--pad: clamp(20px, 4vw, 64px);
	--r: 10px;
	--shadow: 0 18px 40px -24px rgba(20, 74, 52, .35);
	--stack-r: 32px;
	--sec-pad: clamp(40px, 7vh, 80px);
	--hdr: 96px;          /* header height */
	--gap: 14px;          /* space between cards and below each card */
	--top-gap: 28px;      /* space between the header and the card on screen */
	--side: clamp(16px, 3vw, 40px); /* left/right inset shared by header and cards */
	--frame: calc(min(1440px, 100%) - 2 * var(--side)); /* width of the nav row and every card */
	--card-r: 28px;       /* section corner radius */
	--plants-h: 45vh;     /* height of the plants strip at the bottom of the screen: raise to show more */
	--plants-drop: 7vh;   /* how far the plants sit below the screen edge: raise to push them further down */
	--plants-w: max(100%, calc(var(--plants-h) * 1.7286));   /* one image, wide enough to cover (1.7286 = its width/height) */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; font: 400 16px/1.7 var(--body); color: var(--text); background: var(--deep); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; color: var(--deep); }
h1, h2 { font-family: var(--head); font-weight: 800; letter-spacing: -.015em; }
h3 { font-family: var(--head); font-weight: 800; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; border-radius: 6px; }

.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--pad)); margin: 0 auto; padding: 0 var(--pad); }
.eyebrow { font: 700 11.2px/1.5 var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--green); margin-bottom: 14px; }
.h2 { font-size: clamp(2rem, min(4.4vw, 6.2vh), 3.6rem); line-height: 1.1; }
.lead { font-size: 15.2px; line-height: 1.75; }
.center { text-align: center; }
.icon { width: 18px; height: 18px; flex: none; }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 22px; border-radius: 999px; background: var(--green); color: var(--white); font: 500 14px/1.2 var(--body); transition: background-color .2s; }
.btn:hover { background: var(--deep); }
.link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14px; color: var(--deep); }
.link:hover { color: var(--green); }

.stores { display: flex; flex-wrap: wrap; gap: 12px; }
.store { display: inline-block; line-height: 0; border-radius: 999px; transition: transform .2s, box-shadow .2s; }
.store img { height: 44px; width: auto; }
.store:hover { transform: translateY(-1px); box-shadow: 0 10px 20px -12px rgba(20, 74, 52, .6); }
.dl .store img { height: 46px; }
@media (max-width: 560px) {
	:root { --hdr: 76px; --gap: 8px; --top-gap: 12px; --side: 8px; --card-r: 22px; } .store img { height: 40px; } }

/* App icon */
.app-icon { width: 64px; height: 64px; border-radius: 16px; box-shadow: 0 12px 28px -12px rgba(20, 74, 52, .55); margin-bottom: 22px; }

.checks li { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 14.5px; }
.checks .tick { width: 20px; height: 20px; border-radius: 50%; background: var(--tint); color: var(--green); display: grid; place-items: center; flex: none; }
.checks .tick svg { width: 12px; height: 12px; }

/* A real app screen (images/screens/*.svg, 390x844) as a straight, rounded-corner image */
.phone { position: relative; width: 190px; aspect-ratio: 390 / 844; border: 1px solid var(--line); border-radius: 24px; background: var(--white); overflow: hidden; box-shadow: var(--shadow); flex: none; }
.phone > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* =====================================================================
   SECTION 1 — HERO + HEADER
   ===================================================================== */
.hero { background: var(--mist); overflow: hidden; }
.hero .wrap { max-width: calc(1440px); }

.site-header {
	position: fixed; top: var(--ab, 0px); left: 0; right: 0; z-index: 100;
	height: var(--hdr);
	background: transparent;              /* the dark-green page shows through */
	transition: background-color .25s;
}
.site-header.solid { background: rgba(20, 74, 52, .92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.site-header .wrap { width: var(--frame); max-width: none; padding: 0; margin: 0 auto; }
.nav { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; height: 100%; }
.brand { display: flex; align-items: center; gap: 8px; font: 600 16px var(--body); color: var(--white); }
.brand img { height: 48px; width: auto; }
.menu { display: flex; gap: 44px; font-size: 16px; font-weight: 500; color: rgba(241, 245, 238, .8); }
.menu a { position: relative; }
.menu a:hover, .menu a[aria-current] { color: var(--white); }
.menu a[aria-current]::after { content: ""; position: absolute; left: 50%; bottom: -10px; width: 20px; height: 2px; margin-left: -8px; border-radius: 2px; background: var(--leaf); }
.nav .btn { justify-self: end; padding: 14px 28px; font-size: 16px; }
.nav .btn:hover { background: var(--white); color: var(--deep); }
.burger { display: none; justify-self: end; background: none; border: 0; padding: 8px; color: var(--white); cursor: pointer; }
.burger .icon { width: 28px; height: 28px; }

.hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: center; padding-bottom: 24px; }
.hero h1 { font-size: clamp(2.4rem, min(5.4vw, 8.4vh), 4.5rem); line-height: 1.05; max-width: 11.5em; }
.circled { position: relative; display: inline-block; color: var(--green); padding: 0 .12em; }
.circled::before { content: ""; position: absolute; inset: -.02em -.1em -.06em; border: 2px solid var(--green); border-radius: 50%; transform: rotate(-4deg); opacity: .8; }
.hero .lead { max-width: 30em; margin: 24px 0 26px; font-size: 16px; }

.proof { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 44px; }
.pill { display: inline-flex; align-items: center; gap: 12px; padding: 8px 18px 8px 10px; border-radius: 999px; background: rgba(255, 255, 255, .8); box-shadow: var(--shadow); font-weight: 600; font-size: 14px; color: var(--deep); }
.dots { display: flex; }
.dots img { width: 36px; height: 36px; padding: 4px; border-radius: 50%; border: 2px solid var(--white); margin-left: -10px; background: var(--mist); object-fit: contain; box-shadow: 0 2px 6px -2px rgba(20, 74, 52, .35); }
.dots img:first-child { margin-left: 0; }
.ring { width: 64px; height: 64px; border-radius: 50%; border: 1.5px solid rgba(85, 153, 80, .45); display: grid; place-items: center; text-align: center; font-size: 8px; font-weight: 700; letter-spacing: .04em; color: var(--text); line-height: 1.2; }
.ring b { display: block; font: 800 15px var(--head); color: var(--deep); }

.hero-img { --w: min(330px, 40vh, 60%); position: relative; align-self: stretch; min-height: 360px; }
.hero-img::before { content: ""; position: absolute; left: 8%; right: 8%; top: 18%; bottom: -30%; border-radius: 50% 50% 0 0; background: rgba(178, 206, 135, .55); }
/* three straight screens: the main one in front, two smaller ones peeking out behind it */
.shot { position: absolute; border-radius: 30px; box-shadow: 0 40px 60px -30px rgba(20, 74, 52, .55); animation: shot-float 7s ease-in-out infinite; }
.phone--hero { top: 3%; left: 50%; transform: translateX(-50%); width: var(--w); border-radius: 36px; z-index: 2; }
.shot--side { top: 15%; width: calc(var(--w) * .74); z-index: 1; animation-delay: -2.3s; }
.shot--left { right: calc(50% + var(--w) * .5 - var(--w) * .74 * .56); }
.shot--right { left: calc(50% + var(--w) * .5 - var(--w) * .74 * .56); animation-delay: -4.6s; }
@keyframes shot-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@media (prefers-reduced-motion: reduce) { .shot { animation: none; } }

/* =====================================================================
   SECTION 2 — ABOUT (why local dates)
   ===================================================================== */
.about { padding: 96px 0 128px; background: var(--white); }
.about-top { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 48px; }
/* "Solar system": the app icon in the middle, the app's plant art orbiting it.
   Sizes use container units (cqw) so everything scales with the square. */
.orbit-sys { position: relative; width: min(440px, 46vh, 100%); aspect-ratio: 1; margin: 0 auto; container-type: inline-size; }
.orbit-sys::before { content: ""; position: absolute; inset: 30%; border-radius: 50%; background: rgba(178, 206, 135, .28); }
.orbit-sys .sun { position: absolute; left: 50%; top: 50%; width: 24cqw; height: 24cqw; margin: -12cqw 0 0 -12cqw; border-radius: 24%; box-shadow: 0 0 0 2.4cqw rgba(178, 206, 135, .35), 0 5cqw 9cqw -3cqw rgba(20, 74, 52, .55); animation: sun-pulse 4s ease-in-out infinite; z-index: 2; }
.orb-ring { position: absolute; border-radius: 50%; border: 1.5px dashed rgba(85, 153, 80, .4); animation: orbit var(--t) linear infinite; }
.orb-ring--1 { inset: 25%; --r: 25cqw; --t: 24s; }
.orb-ring--2 { inset: 13%; --r: 37cqw; --t: 38s; animation-direction: reverse; }
.orb-ring--3 { inset: 2%; --r: 48cqw; --t: 56s; }
.orb-planet { position: absolute; left: 50%; top: 50%; width: 14cqw; height: 14cqw; margin: -7cqw 0 0 -7cqw; transform: rotate(var(--a)) translate(var(--r)) rotate(calc(-1 * var(--a))); }
.orb-ring--3 .orb-planet { width: 13cqw; height: 13cqw; margin: -6.5cqw 0 0 -6.5cqw; }
.orb-planet img { display: block; width: 100%; height: 100%; object-fit: contain; animation: orbit var(--t) linear infinite reverse; }
.orb-ring--2 .orb-planet img { animation-direction: normal; }   /* ring spins backwards, so its plants counter-spin forwards */
@keyframes orbit { to { transform: rotate(360deg); } }
@keyframes sun-pulse { 50% { box-shadow: 0 0 0 4cqw rgba(178, 206, 135, .18), 0 5cqw 9cqw -3cqw rgba(20, 74, 52, .55); } }
@media (prefers-reduced-motion: reduce) { .orb-ring, .orb-planet img, .orbit-sys .sun { animation: none; } }
.about-top .lead { max-width: 28em; margin: 16px 0 22px; }

.climate { background: var(--mist); }
.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 44px; }
.card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r); box-shadow: 0 1px 2px rgba(20, 74, 52, .04); }
.card-big { display: grid; grid-template-columns: 1fr auto; gap: 18px; padding: 0 28px 0 32px; overflow: hidden; }
.card-big .copy { align-self: center; padding: 28px 0; }
.card-big h3 { font-size: 24px; line-height: 1.3; margin-bottom: 14px; }
.card-big p { font-size: 14px; line-height: 1.7; margin-bottom: 20px; max-width: 24em; }
.card-big .phone { align-self: end; width: 220px; margin-bottom: -210px; margin-top: 18px; }
.stack { display: grid; gap: 20px; }
.card-small { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 28px; }
.card-small h3 { font-size: 20px; margin-bottom: 4px; }
.card-small p { font-size: 14px; line-height: 1.5; }
.card-small .big-ico { width: 52px; height: 52px; color: var(--green); flex: none; }

/* =====================================================================
   SECTION 3 — FEATURES
   ===================================================================== */
.features { padding: 96px 0; background: var(--white); }
.tile { width: 40px; height: 40px; border-radius: 8px; background: var(--tint); color: var(--deep); display: grid; place-items: center; margin-bottom: 26px; }
/* Live demo: the phone in the middle plays through the app; the features on
   either side light up as each one is shown, and clicking one jumps to it. */
.demo { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: clamp(24px, 4vw, 64px); }
.demo-col { display: grid; gap: 12px; }
.demo-head { margin-bottom: 14px; text-align: right; }
.demo-head .h2 { font-size: clamp(1.8rem, min(3.2vw, 5vh), 2.8rem); }
.demo-feat { position: relative; display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--white); font: inherit; color: inherit; text-align: left; cursor: pointer; overflow: hidden; transition: background-color .3s, border-color .3s; }
.demo-col--left .demo-feat { flex-direction: row-reverse; text-align: right; }
.demo-feat:hover { border-color: rgba(85, 153, 80, .5); }
.demo-feat.is-active { background: var(--mist); border-color: var(--green); }
.demo-feat .tile { margin: 0; flex: none; transition: background-color .3s, color .3s; }
.demo-feat.is-active .tile { background: var(--green); color: var(--white); }
.demo-feat .t { display: block; font: 800 17px/1.3 var(--head); color: var(--deep); margin-bottom: 3px; }
.demo-feat p { font-size: 13px; line-height: 1.5; color: rgba(52, 58, 63, .8); }
.demo-feat .bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--green); transform: scaleX(0); transform-origin: left; }
.demo-hint { font-size: 12.5px; color: var(--grey); padding: 4px 18px 0; }
.demo-phone { position: relative; display: grid; place-items: center; }
.demo-phone::before { content: ""; position: absolute; width: 150%; aspect-ratio: 1; border-radius: 50%; background: rgba(178, 206, 135, .3); }
.demo-screen { width: min(310px, calc((100vh - var(--ab, 0px) - var(--hdr) - var(--top-gap) - var(--gap) - 2 * var(--sec-pad)) * .455)); border-radius: 34px; box-shadow: 0 40px 60px -30px rgba(20, 74, 52, .55); }
.demo-screen .layer { position: absolute; inset: 0; transition: transform .45s cubic-bezier(.2, .8, .2, 1), opacity .45s, filter .45s; will-change: transform; }
.tap { position: absolute; z-index: 5; width: 13%; aspect-ratio: 1; border-radius: 50%; background: rgba(37, 107, 69, .3); border: 2px solid rgba(255, 255, 255, .95); box-shadow: 0 4px 14px rgba(0, 0, 0, .25); transform: translate(-50%, -50%) scale(.6); opacity: 0; pointer-events: none; }
.tap::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid rgba(37, 107, 69, .6); opacity: 0; }
.tap.is-on { animation: tap .65s ease-out forwards; }
.tap.is-on::after { animation: tap-ring .65s ease-out forwards; }
@keyframes tap { 0% { opacity: 0; transform: translate(-50%, -50%) scale(1.25); } 30% { opacity: 1; transform: translate(-50%, -50%) scale(.8); } 70% { opacity: 1; transform: translate(-50%, -50%) scale(.85); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(.95); } }
@keyframes tap-ring { 0%, 30% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(2.2); } }

/* =====================================================================
   SECTION 4 — DIAGNOSE
   ===================================================================== */
.diagnose { padding: 96px 0; background: var(--mist); }
.split { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 48px; }
.diagnose .lead { max-width: 28em; margin: 22px 0 22px; }
.diagnose .stores { margin-top: 26px; }
.diagnose .split { grid-template-columns: 1fr 1.1fr; }
.stage { --pw: min(300px, 30vh); --px: 6%; position: relative; display: grid; place-items: center start; padding-left: var(--px); min-height: min(520px, 62vh); }
.stage::before { content: ""; position: absolute; left: calc(var(--px) + var(--pw) / 2); top: 50%; width: calc(var(--pw) * 1.45); aspect-ratio: 1; border-radius: 50%; background: rgba(178, 206, 135, .35); transform: translate(-50%, -50%); }
.stage .phone { position: relative; width: var(--pw); border-radius: 30px; }
/* callouts sit beside the phone (never on it), joined by a short dotted line */
.note { position: absolute; z-index: 2; display: flex; align-items: center; gap: 12px; width: max-content; max-width: 260px; padding: 10px 16px 10px 10px; background: var(--white); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); font-size: 12.5px; line-height: 1.45; color: rgba(52, 58, 63, .8); }
.note .tile { width: 36px; height: 36px; margin: 0; flex: none; background: var(--green); color: var(--white); border-radius: 10px; }
.note b { display: block; font: 800 14px/1.3 var(--head); color: var(--deep); margin-bottom: 1px; }
.note--a, .note--b { left: calc(var(--px) + var(--pw) + 34px); }
.note--a { top: 24%; }
.note--b { bottom: 26%; }
.note::before { content: ""; position: absolute; right: 100%; top: 50%; width: 34px; border-top: 2px dotted rgba(85, 153, 80, .6); }

/* =====================================================================
   SECTION 4B — FREE AI (monthly interactions + free follow-ups)
   ===================================================================== */
.aifree { background: var(--white); }
.aistage { --pw: min(300px, 30vh); position: relative; display: grid; place-items: center; }
.aistage::before { content: ""; position: absolute; width: calc(var(--pw) * 1.45); aspect-ratio: 1; border-radius: 50%; background: rgba(178, 206, 135, .35); }
.aistage .phone { position: relative; width: var(--pw); border-radius: 30px; }
.aifree .lead { max-width: 30em; margin: 20px 0 0; }
.perks { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 28px; }
.perk { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--white); }
.perk .tile { width: 38px; height: 38px; margin: 0; flex: none; }
.perk b { display: block; font: 800 15px/1.3 var(--head); color: var(--deep); margin-bottom: 3px; }
.perk span { display: block; font-size: 13px; line-height: 1.5; }

/* =====================================================================
   SECTION 5 — ESSENTIALS
   ===================================================================== */
.essentials { padding: 96px 0; background: var(--white); }
.ess-head { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; }
.ess-head .lead { max-width: 28em; justify-self: end; }
.ess { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 36px; }
.ess .card { padding: 26px 26px 0; height: min(400px, 45vh); min-height: 330px; overflow: hidden; display: flex; flex-direction: column; }
.ess .top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px; }
.ess .top .tile { margin: 0; }
.ess h3 { font-size: 20px; margin-bottom: 6px; }
.ess p { font-size: 14px; }
.ess .phone { width: min(270px, 92%); margin: 30px auto 0; flex: none; border-radius: 26px; }

/* =====================================================================
   SECTION 5B — HOME SCREEN (phone corner bleeds off the card's bottom-right)
   ===================================================================== */
.homescreen { background: var(--mist); }
.homescreen .copy { max-width: 50%; }
.homescreen .lead { max-width: 28em; margin: 22px 0 22px; }
.homescreen .stores { margin-top: 26px; }
.homescreen .mockup { position: absolute; right: 0; bottom: 0; width: min(46%, 560px); max-height: 92%; object-fit: contain; object-position: right bottom; transform-origin: 100% 100%; }

/* =====================================================================
   SECTION 6 — STORIES (reviews)
   ===================================================================== */
.stories { padding: 96px 0; background: var(--mist); }
.stories .lead { margin-top: 16px; }
.reviews { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 20px) / 2); gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 56px auto 0; max-width: 1080px; padding: 2px; }
.reviews::-webkit-scrollbar { display: none; }
.review { scroll-snap-align: start; display: flex; gap: 22px; padding: 32px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r); }
.avatar { width: 80px; height: 80px; flex: none; border-radius: 8px; background: var(--tint-2); color: var(--deep); display: grid; place-items: center; font: 500 22px var(--body); }
.stars { color: var(--green); letter-spacing: 2px; font-size: 14px; line-height: 1; margin-bottom: 8px; }
.review h3 { font-size: 16px; margin-bottom: 8px; }
.review p { font-size: 14.5px; line-height: 1.65; }
.pager { display: flex; justify-content: center; gap: 6px; margin-top: 36px; }
.pager button { width: 6px; height: 6px; padding: 0; border: 0; border-radius: 6px; background: var(--leaf); cursor: pointer; transition: width .25s, background-color .25s; }
.pager button[aria-current="true"] { width: 32px; background: var(--green); }
/* "Why trust us" cards (shown until real store reviews are added) */
.trust .avatar { background: var(--tint); color: var(--green); border-radius: 16px; }
.trust .avatar svg { width: 34px; height: 34px; }
.trust h3 { font-size: 18px; }

/* =====================================================================
   SECTION 7 — DOWNLOAD
   ===================================================================== */
/* Full-width, borderless, and it looks transparent: its background is the page's own
   (deep green + the plants strip pinned to the screen exactly like .grow), so the page
   seems to show through, yet it still covers the card behind it while stacking. */
.download { padding: 96px 0; background: url("../images/plants-bg.webp") center top calc(100vh - var(--plants-h) + var(--plants-drop)) / var(--plants-w) auto no-repeat fixed, var(--deep); }
.stories::after { display: none; }   /* the page-coloured download section wipes over it; no grey dimming */
html main > section.download[class] { width: 100%; border: 0; border-radius: 0; }
/* the text column is exactly as wide as every other section's, so it lines up with them */
.download .wrap { width: var(--frame); max-width: calc(var(--wrap) + 2 * var(--pad)); margin: 0 auto; }
.dl { display: block; }
.dl .copy { max-width: 36em; }
.dl .store img { filter: invert(1); }                          /* black badges -> white badges on the dark background */
.dl .eyebrow { color: var(--leaf); }
.dl h2 { color: var(--white); font-size: clamp(1.8rem, min(3vw, 4.8vh), 2.7rem); line-height: 1.15; max-width: 14em; }
.dl .app-icon { width: 52px; height: 52px; margin-bottom: 16px; box-shadow: none; }
.dl .checks { margin: 26px 0 30px; }
.dl .checks li { color: var(--white); }
.dl .checks .tick { background: rgba(241, 245, 238, .18); color: var(--white); }
.dl .img { position: absolute; right: 0; bottom: 0; }   /* pinned to the section's bottom-right corner (screen edge) */
.dl .hand { display: block; height: min(660px, 72vh); width: auto; max-width: none; }

/* =====================================================================
   FOOTER
   ===================================================================== */
footer { padding: 64px 0 30px; background: var(--deep); color: rgba(241, 245, 238, .8); }
footer h3 { color: var(--white); }
footer .foot li a:hover { color: var(--leaf); }
.foot { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.foot p { max-width: 20em; margin-top: 18px; font-size: 15px; }
.foot h3 { font-size: 15px; margin-bottom: 16px; }
.foot li { margin-bottom: 10px; font-size: 15px; }
.foot li a:hover { color: var(--green); }
.base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 44px; padding-top: 26px; border-top: 1px solid rgba(241, 245, 238, .18); font-size: 13px; }


/* =====================================================================
   STACKING SCROLL — each section slides up over the previous one
   Sections stick once fully seen; tall sections stick by their bottom
   edge (JS sets --stick), so nothing is hidden before you read it.
   ===================================================================== */
/* Card sections: each section is a rounded card on the dark-green page,
   inset by --gap on every side and filling the space under the header.
   Cards are spaced by --gap, so at rest the next card sits just off-screen.
   Heights use the LARGE viewport (100vh / 100lvh): on phones the card still
   fills the screen when the address bar hides, so the next card never peeks in.
   The extra 3px on each card's top margin keeps rounding (browser zoom,
   display scaling) from showing a sliver of the next card. */
html main > section[class] {
	width: var(--frame);
	margin: calc(var(--gap) + 3px) auto 0;
	border: 1px solid rgba(178, 206, 135, .55);
	border-radius: var(--card-r);
	overflow: hidden;
	min-height: calc(100vh - var(--ab, 0px) - var(--hdr) - var(--top-gap) - var(--gap));
	min-height: calc(100lvh - var(--ab, 0px) - var(--hdr) - var(--top-gap) - var(--gap));
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-top: var(--sec-pad);
	padding-bottom: var(--sec-pad);
}
html main > section.hero { margin-top: calc(var(--hdr) + var(--top-gap)); }
.hero-grid { flex: 1; min-height: 0; }

main > section {
	position: sticky;
	top: var(--stick, calc(var(--ab, 0px) + var(--hdr) + var(--top-gap)));
}
main > footer {
	position: relative;
	margin-top: var(--gap);
	border-radius: var(--card-r) var(--card-r) 0 0;
}
main > footer .wrap { width: var(--frame); max-width: none; padding: 0; }

/* Rest points: zero-height markers in front of each card (JS settles on them) */
.snap { display: block; height: 0; pointer-events: none; }
/* a section that's being covered stays exactly where it is and only dims
   while the next card slides up over it */
main > section::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: #000;
	opacity: calc(.35 * var(--cover, 0));
	pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
	main > section::after { display: none; }
}


/* Shorter screens (laptops, zoomed browsers): tighten so each card fits under the header */
@media (min-width: 1025px) and (max-height: 820px) {
	:root { --sec-pad: clamp(24px, 4.5vh, 48px); --hdr: 84px; --gap: 12px; --top-gap: 18px; }
	.h2 { font-size: clamp(1.8rem, 5.6vh, 3rem); }
	.hero h1 { font-size: clamp(2.2rem, 7.4vh, 4rem); }
	.hero .lead { margin: 16px 0 18px; }
	.proof { margin-top: 24px; }
	.eyebrow { margin-bottom: 8px; }
	.lead { font-size: 14.5px; line-height: 1.6; }
	.orbit-sys { width: min(400px, 44vh, 100%); }
	.cards { margin-top: 24px; }
	.card-big .copy { padding: 20px 0; }
	.card-big h3 { font-size: 20px; margin-bottom: 8px; }
	.card-big p { margin-bottom: 12px; }
	.card-big .phone { width: 190px; margin-bottom: -190px; margin-top: 12px; }
	.card-small { padding: 16px 24px; }
	.card-small h3 { font-size: 18px; }
	.features .lead { margin-top: 10px; }
	.trio { margin-top: 28px; }
	.feat { padding: 24px 24px 48px; }
	.tile { margin-bottom: 16px; }
	.feat h3 { font-size: 18px; margin-bottom: 6px; }
	.diagnose .lead, .about-top .lead { margin: 12px 0 14px; }
	.checks li { margin-bottom: 6px; }
	.diagnose .stores { margin-top: 16px; }
	.aifree .lead { margin-top: 12px; }
	.perks { gap: 10px; margin-top: 18px; }
	.perk { padding: 12px; }
	.perk .tile { width: 32px; height: 32px; }
	.perk b { font-size: 14px; }
	.perk span { font-size: 12.5px; line-height: 1.45; }
	.stage { min-height: 0; }
	.ess { margin-top: 24px; }
	.ess .card { height: 50vh; min-height: 0; padding: 20px 22px 0; }
	.ess .top { margin-bottom: 12px; }
	.ess .phone { width: min(250px, 92%); margin-top: 16px; }
	.reviews { margin-top: 32px; }
	.review { padding: 24px; }
	.pager { margin-top: 20px; }
	.dl .copy { padding: 0; }
	.dl .checks { margin: 16px 0 20px; }
	.dl .hand { height: min(560px, 70vh); }
	.homescreen .lead { margin: 12px 0 14px; }
	.homescreen .stores { margin-top: 16px; }
	.app-icon { width: 52px; height: 52px; margin-bottom: 14px; }
	.brand img { height: 42px; }
}


/* =====================================================================
   PLANTS BACKGROUND — plants along the bottom of the screen behind every
   section, the header and the footer; they show through the gaps.
   ===================================================================== */
.grow {
	position: fixed;
	left: 0; right: 0; bottom: calc(-1 * var(--plants-drop));
	height: var(--plants-h);
	z-index: -1;                          /* bottom layer: under every section, the footer and the header */
	pointer-events: none;                 /* never blocks clicks on the page */
	/* a single image covering the width, leaf tips at the top of the strip */
	background: url("../images/plants-bg.webp") center top / var(--plants-w) auto no-repeat;
}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 1024px) {
	.menu, .nav > .btn { display: none; }
	.burger { display: inline-flex; }
	.nav { grid-template-columns: 1fr auto; }
	.nav.open .menu { display: flex; flex-direction: column; gap: 16px; position: absolute; top: calc(var(--hdr) - 6px); left: 0; right: 0; padding: 20px 24px; background: var(--deep); border: 1px solid rgba(241, 245, 238, .15); border-radius: 18px; box-shadow: 0 20px 40px -20px rgba(0,0,0,.5); }
	.menu a[aria-current]::after { display: none; }
	.hero-grid, .about-top, .split, .ess-head { grid-template-columns: 1fr; }
	.hero-grid { min-height: 0; padding-top: 12px; }
	.ess-head .lead { justify-self: start; }
	.cards { grid-template-columns: 1fr; }
	.trio, .ess { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
	.reviews { grid-auto-columns: 100%; }
	.dl { grid-template-columns: 1fr; }
	.dl .copy { padding: 0; }
	.dl .img { position: static; }
	html main > section.download[class] { padding-bottom: 0; }
	.foot { grid-template-columns: 1fr 1fr; }
	.foot > :first-child { grid-column: 1 / -1; }
	.homescreen { padding-bottom: 0 !important; }
	.homescreen .copy { max-width: none; }
	.homescreen .mockup { position: static; align-self: flex-end; width: min(88%, 420px); max-height: none; margin-top: 36px; }
	.demo { grid-template-columns: 1fr 1fr; gap: 12px 16px; }
	.demo-col { display: contents; }
	.demo-head { grid-column: 1 / -1; order: 0; text-align: center; margin-bottom: 8px; }
	.demo-phone { grid-column: 1 / -1; order: 1; margin: 8px 0 20px; }
	.demo-screen { width: min(300px, 68vw); }
	.demo-feat { order: 2; }
	.demo-col--left .demo-feat { flex-direction: row; text-align: left; }
	.demo-hint { grid-column: 1 / -1; order: 3; text-align: center; }
	/* stacked layout: screens sit in the flow, still running off the card's bottom edge */
	html main > section.hero { padding-bottom: 0; }
	.hero-grid { padding-bottom: 0; }
	.hero-img { --w: min(300px, 58vw); align-self: auto; min-height: calc(var(--w) * 1.55); margin-top: 16px; }
	.diagnose .split { grid-template-columns: 1fr; }
	.aistage { order: 2; --pw: min(300px, 64vw); margin-top: 28px; }
	.stage { --pw: min(300px, 64vw); display: flex; flex-direction: column; align-items: center; gap: 12px; padding-left: 0; min-height: 0; }
	.stage::before { display: none; }
	.note { position: static; max-width: 340px; width: 100%; }
	.note::before { display: none; }
	.dl .hand { height: auto; width: min(340px, 90%); max-width: 90%; margin: 28px auto 0; }
}
@media (max-width: 560px) {
	.brand img { height: 40px; }
	.perks { grid-template-columns: 1fr; }
	.demo { grid-template-columns: 1fr; }
	.card-big { grid-template-columns: 1fr; }
	.card-big .phone { justify-self: center; }
	.card-small .big-ico { width: 40px; height: 40px; }
	.review { flex-direction: column; }
	.stage { display: flex; flex-direction: column; align-items: center; gap: 12px; }
	.note { position: static; max-width: 300px; width: 100%; }
	.stage { min-height: 0; padding: 20px 0; }
	.stage::before { display: none; }
}