/* Do2Grow✞ landing — styles.css
   Built to match "Design mockup/index.html" (Sep 27, 2026). See BUILD.md.
   Home-page styles only. Keep any rules your thanks/privacy/terms pages need (append them below). */
:root{
  --bg:#EBF0E6; --surface:#FFFFFF; --ink:#16381F; --ink-soft:#587064; --leaf:#245F45;
  --pill:#D5E2CF; --deep:#12362A; --amber:#F0B45A; --line:#D6DED2;
  --love:#C0447A; --joy:#E0A526; --peace:#3E8FB0; --patience:#7A5FB5; --kindness:#D97B4F;
  --goodness:#4F9B6E; --faith:#35607A; --gentle:#C98FAE; --self:#79553E;
  --pw:clamp(208px, 22vw, 272px);           /* the ONE phone width used everywhere */
  --gap:clamp(40px, 6vw, 72px);             /* section rhythm (was 120px) */
  --r:22px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{margin:0; background:var(--bg); color:var(--ink); font:400 18px/1.6 "DM Sans", system-ui, sans-serif; overflow-x:hidden}
h1,h2,h3{font-family:"Bricolage Grotesque", system-ui, sans-serif; font-weight:800; letter-spacing:-.02em; line-height:1.04; margin:0}
p{margin:0}
a{color:var(--leaf)}
.wrap{max-width:1120px; margin:0 auto; padding:0 24px; position:relative}
.kicker{display:inline-block; background:var(--pill); color:var(--leaf); font:700 12px/1 "DM Sans", sans-serif; letter-spacing:.14em; padding:8px 12px; border-radius:99px; margin-bottom:14px}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; background:var(--leaf); color:#fff; text-decoration:none; font:700 17px "DM Sans", sans-serif; padding:16px 24px; border-radius:99px; box-shadow:0 12px 24px -12px rgba(36,95,69,.8); transition:transform .15s, box-shadow .15s}
.btn:hover{transform:translateY(-2px); box-shadow:0 16px 28px -12px rgba(36,95,69,.9)}
.btn:focus-visible, a:focus-visible, summary:focus-visible{outline:3px solid var(--amber); outline-offset:3px}
.small{font-size:13.5px; color:var(--ink-soft)}
.textlink{font-weight:700; text-decoration:none}

/* ---------- top bar: floating white pill, like ObsessLess ---------- */
.top{position:fixed; top:12px; left:0; right:0; z-index:50; pointer-events:none}
.top .bar{pointer-events:auto; max-width:1120px; margin:0 auto; width:calc(100% - 24px); display:flex; align-items:center; justify-content:space-between; background:rgba(255,255,255,.88); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border-radius:20px; padding:8px 10px 8px 16px; box-shadow:0 10px 30px -18px rgba(18,54,42,.5)}
.top a > img{height:40px; width:auto; display:block}
.top .btn{padding:10px 16px; font-size:14px; box-shadow:none; background:var(--deep)}

/* ---------- blobs + floating grapes ---------- */
.blob{position:absolute; border-radius:50%; z-index:0; pointer-events:none}
.sect{position:relative; padding:var(--gap) 0}
.float{position:absolute; z-index:3; pointer-events:none; will-change:transform}
.float svg{display:block; width:100%; height:auto; filter:drop-shadow(0 14px 14px rgba(18,54,42,.25))}
.bob{animation:bob 6s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-14px) rotate(5deg)}}

/* ---------- THE phone: same size everywhere, never stretched, 3D ---------- */
.stage{position:relative; z-index:2; perspective:1400px; display:flex; justify-content:center}
.device{
  --rx:6deg; --ry:-16deg; --rz:-5deg;               /* resting tilt, flipped per side */
  --fly:0;                                          /* 0 = settled, 1 = off-screen (set by JS) */
  position:relative; width:var(--pw); aspect-ratio:300/620; flex:none;
  border-radius:calc(var(--pw) * .16); padding:calc(var(--pw) * .035);
  background:linear-gradient(145deg,#2A4034 0%,#182A21 45%,#0E1A14 100%);
  transform-style:preserve-3d;
  transform:
    translate3d(calc(var(--fly) * 90px), calc(var(--fly) * 120px), 0)
    rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(calc(var(--rz) + var(--fly) * 22deg));
  opacity:calc(1 - var(--fly) * .9);
  box-shadow:
    inset 0 0 0 1.5px rgba(255,255,255,.14),       /* metal edge */
    10px 12px 0 -2px #0B1510,                        /* bezel thickness (3D side) */
    30px 50px 60px -20px rgba(12,32,22,.55),         /* long soft shadow */
    60px 90px 90px -40px rgba(12,32,22,.35);
  transition:transform .12s linear, opacity .12s linear;
}
.device.flip{--ry:16deg; --rz:5deg; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.14), -10px 12px 0 -2px #0B1510, -30px 50px 60px -20px rgba(12,32,22,.55), -60px 90px 90px -40px rgba(12,32,22,.35)}
.device .screen{position:relative; width:100%; height:100%; border-radius:calc(var(--pw) * .13); overflow:hidden; background:#EDF3EA}
.device picture{display:block; width:100%; height:100%}
.device img{display:block; width:100%; height:100%; object-fit:cover; object-position:top center}   /* never stretch */
.device .screen::before{content:""; position:absolute; top:calc(var(--pw) * .03); left:50%; width:30%; height:calc(var(--pw) * .085); transform:translateX(-50%); background:#0B1510; border-radius:99px; z-index:2} /* Dynamic Island */
.device .screen::after{content:""; position:absolute; inset:0; background:linear-gradient(115deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,0) 32%, rgba(255,255,255,0) 70%, rgba(255,255,255,.08) 100%); pointer-events:none; z-index:3}  /* glass */
.ground{position:absolute; left:50%; bottom:-34px; width:calc(var(--pw) * .9); height:28px; transform:translateX(-50%); background:radial-gradient(closest-side, rgba(12,32,22,.35), rgba(12,32,22,0)); filter:blur(4px); z-index:1}
.idle{animation:idle 7s ease-in-out infinite}
.device.enter{animation:enter 1.1s cubic-bezier(.2,.8,.2,1) both}
.device.enter.e2{animation-delay:.18s}
@keyframes enter{from{opacity:0; translate:80px 60px; rotate:14deg}to{opacity:1; translate:0 0; rotate:0deg}}
.idle.d2{animation-delay:-2.3s}.idle.d3{animation-delay:-4.6s}
@keyframes idle{0%,100%{translate:0 0}50%{translate:0 -12px}}
.pair{position:relative; display:flex; justify-content:center; align-items:flex-end}
.pair > .idle + .idle{margin-left:calc(var(--pw) * -.42); margin-bottom:calc(var(--pw) * .22)}

/* ---------- 1. hero ---------- */
.hero{padding-top:110px; padding-bottom:70px; overflow:hidden}
.hero .grid{display:grid; grid-template-columns:1.05fr 1fr; align-items:center; gap:10px}
.hero h1{font-size:clamp(40px, 6vw, 68px)}
.hero h1 em{font-style:normal; color:var(--leaf)}
.hero .sub{font-size:19px; max-width:470px; margin:18px 0 26px; color:#24452F}
.hero .actions{display:flex; flex-direction:column; align-items:flex-start; gap:12px}

/* ---------- 2. the moment (pulled up into the hero) ---------- */
.moment{margin-top:-40px; padding-top:0}
.moment .card{position:relative; z-index:4; max-width:620px; background:var(--surface); border-radius:28px; padding:28px 30px; box-shadow:0 30px 50px -30px rgba(18,54,42,.45); rotate:-1.2deg}
.moment h2{font-size:clamp(28px, 3.6vw, 40px); margin-bottom:10px}
.knowdo{display:flex; align-items:center; gap:10px; margin-top:16px; font:700 14px "DM Sans", system-ui, sans-serif; color:var(--ink-soft)}
.knowdo span{display:inline-flex; align-items:center; gap:6px; background:var(--bg); border-radius:99px; padding:6px 12px}

/* ---------- 3. hope ---------- */
.hope{padding-top:24px}
.hope .grid{display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:center}
.hope h2{font-size:clamp(32px, 4.4vw, 50px); margin-bottom:12px}
.stats{position:relative; height:250px}
.stat{position:absolute; background:var(--surface); border-radius:20px; padding:16px 20px; box-shadow:0 20px 34px -20px rgba(18,54,42,.5); min-width:170px}
.stat b{display:block; font:800 44px/1 "Bricolage Grotesque", system-ui, sans-serif; letter-spacing:-.03em}
.stat span{font-size:14px; color:var(--ink-soft)}
.stat:nth-child(1){left:2%; top:10px; transform:rotate(-4deg)}
.stat:nth-child(2){left:34%; top:78px; transform:rotate(3deg); z-index:2}
.stat:nth-child(3){left:62%; top:4px; transform:rotate(-2deg)}
.stat:nth-child(1) b{color:var(--love)} .stat:nth-child(2) b{color:var(--patience)} .stat:nth-child(3) b{color:var(--leaf)}

/* ---------- marquee of the nine fruit (moves with scroll, like "TEA TEA TEA") ---------- */
.marquee{overflow:hidden; padding:8px 0 4px; white-space:nowrap; position:relative; z-index:1}
.marquee .track{display:inline-flex; gap:34px; font:800 clamp(34px, 6vw, 72px)/1.1 "Bricolage Grotesque", system-ui, sans-serif; letter-spacing:-.03em; color:transparent; -webkit-text-stroke:1.5px rgba(22,56,31,.28); will-change:transform}
.marquee .track i{font-style:normal; display:inline-flex; align-items:center; gap:34px}
.marquee .track i::after{content:""; width:.34em; height:.34em; border-radius:50%; background:var(--c); -webkit-text-stroke:0}

/* ---------- 4. pillars: alternating, overlapping, scattered ---------- */
.pillar{position:relative; padding:28px 0}
.pillar .grid{display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:10px; position:relative}
.pillar.rev .grid .copy{order:2}
.pillar h2{font-size:clamp(30px, 4vw, 46px); margin-bottom:12px}
.pillar .copy{position:relative; z-index:4; max-width:470px}
.pillar .stage{min-height:calc(var(--pw) * 2.2)}
.pillar + .pillar{margin-top:-50px}                /* rows overlap each other's air */
.pillar .blob{width:calc(var(--pw) * 2); height:calc(var(--pw) * 2); top:50%; transform:translateY(-50%)}
.pillar:not(.rev) .blob{right:-6%}
.pillar.rev .blob{left:-6%}
.pillar .chip{position:absolute; z-index:5; background:#fff; border-radius:16px; padding:10px 14px; font:700 13.5px/1.3 "DM Sans", system-ui, sans-serif; box-shadow:0 18px 30px -18px rgba(18,54,42,.55); max-width:210px}
.pillar .chip small{display:block; font-weight:500; color:var(--ink-soft)}
.band{background:var(--deep); color:#F4EFE3; border-radius:48px; margin:0 12px; padding:44px 0 54px; overflow:hidden}
.band .kicker{background:rgba(255,255,255,.12); color:#BFE3CC}
.band p{color:#D4E3D8}
.band.pillar{padding:28px 0 37px}
.band .stage{min-height:calc(var(--pw) * 1.95)}   /* GROW band trimmed ~10% (Sep 27) */

/* ---------- 5. how it works: scattered, overlapping cards ---------- */
.how h2{font-size:clamp(30px, 4vw, 46px); text-align:center; margin-bottom:26px}
.steps{display:flex; justify-content:center; padding:10px 0 20px}
.step{position:relative; width:300px; background:#fff; border-radius:24px; padding:22px 22px 24px; box-shadow:0 26px 40px -26px rgba(18,54,42,.55)}
/* tilt uses the individual rotate/translate properties so the .reveal fade (which sets transform) can't flatten it */
.step + .step{margin-left:-18px}
.step:nth-child(1){rotate:-3deg; translate:0 10px; z-index:1; padding-right:42px}     /* right edge sits under card 2 */
.step:nth-child(2){rotate:2deg; translate:0 -14px; z-index:3; background:#FFF7E6}
.step:nth-child(3){rotate:-1.5deg; translate:0 18px; z-index:2; padding-left:42px}     /* left edge sits under card 2 */
.step .n{display:inline-flex; width:38px; height:38px; border-radius:50%; align-items:center; justify-content:center; font:800 18px "Bricolage Grotesque", system-ui, sans-serif; color:#fff; background:var(--leaf); margin-bottom:10px}
.step h3{font-size:23px; margin-bottom:6px}
.step p{font-size:15.5px; color:#34503D}

/* ---------- 6. commitment ---------- */
.commit .grid{display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:10px}
.commit blockquote{margin:0 0 16px; font:italic 400 clamp(22px, 2.6vw, 30px)/1.35 "Literata", Georgia, serif; color:var(--ink)}
.commit h2{font-size:clamp(28px, 3.4vw, 38px); margin-bottom:12px}

/* ---------- 7. reassurance: scattered tiles ---------- */
.reassure .tiles{display:grid; grid-template-columns:repeat(4, 1fr); gap:0}
.tile{background:#fff; border-radius:20px; padding:18px; box-shadow:0 20px 34px -24px rgba(18,54,42,.5); margin:0 -8px; position:relative}
.tile:nth-child(odd){rotate:-2deg; translate:0 8px; padding-left:24px; padding-right:26px} .tile:nth-child(even){rotate:2deg; translate:0 -8px; z-index:2}
.tile b{display:block; font:800 18px/1.2 "Bricolage Grotesque", system-ui, sans-serif; margin-bottom:4px}
.tile p{font-size:14.5px; color:#34503D}
.tile .ic{width:34px; height:34px; border-radius:11px; display:flex; align-items:center; justify-content:center; margin-bottom:10px; color:#fff}

/* ---------- 8. offer ---------- */
.offer .card{position:relative; z-index:3; max-width:560px; margin:0 auto; background:#fff; border-radius:24px; border-top:6px solid var(--amber); padding:30px; text-align:center; box-shadow:0 34px 60px -34px rgba(18,54,42,.6)}
.offer h2{font-size:clamp(30px, 3.8vw, 42px); margin-bottom:6px}
.offer ul{list-style:none; padding:0; margin:18px auto 22px; text-align:left; max-width:380px}
.offer li{padding:6px 0 6px 32px; position:relative}
.offer li::before{content:""; position:absolute; left:0; top:9px; width:20px; height:20px; border-radius:50%; background:var(--leaf) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/13px no-repeat}

/* ---------- 9. faq ---------- */
.faq h2{font-size:clamp(30px, 4vw, 44px); text-align:center; margin-bottom:22px}
.faq details{max-width:760px; margin:0 auto 10px; background:#fff; border:1.5px solid var(--ink); border-radius:18px; padding:0 20px}
.faq summary{cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:12px; padding:16px 0; font-weight:700}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; font:400 26px/1 "DM Sans", system-ui, sans-serif; transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 18px; color:#34503D}

/* ---------- 10. final ask ---------- */
.final{margin:0 12px; border-radius:48px 48px 0 0; background:var(--pill); text-align:center; overflow:hidden; padding-bottom:0}
.final h2{font-size:clamp(34px, 5vw, 60px); margin-bottom:10px}
.final .hills{display:block; width:100%; height:auto; margin-top:24px}
footer{background:var(--deep); color:#CFE0D5; padding:30px 0 40px; font-size:14px}
footer .wrap{display:flex; flex-wrap:wrap; gap:14px 28px; align-items:center; justify-content:space-between}
footer a{color:#fff}

/* ---------- reveal ---------- */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .5s ease, transform .5s ease}
.reveal.in{opacity:1; transform:none}


/* ---------- phone layout ---------- */
@media (max-width: 820px){
  :root{--pw:min(58vw, 236px)}
  .hero .grid, .hope .grid, .pillar .grid, .commit .grid{grid-template-columns:1fr}
  .pillar.rev .grid .copy{order:0}
  .pillar .stage{min-height:auto; padding:20px 0 50px}
  .pillar + .pillar{margin-top:-10px}
  .hero{padding-top:92px}
  .hero .stage{margin-top:20px}
  .pair > .idle + .idle{margin-left:calc(var(--pw) * -.55)}
  .moment{margin-top:-10px}
  .stats{height:230px}
  .stat{min-width:150px}
  .stat:nth-child(1){left:0} .stat:nth-child(2){left:auto; right:0; top:70px} .stat:nth-child(3){left:6%; top:150px}
  .steps{flex-direction:column; align-items:center}
  .step{width:min(330px, 100%)}
  .step + .step{margin-left:0; margin-top:-14px}
  .step:nth-child(n){translate:0 0}
  .step:nth-child(1){padding-right:22px; padding-bottom:36px}
  .step:nth-child(3){padding-left:22px; padding-top:34px}
  .reassure .tiles{grid-template-columns:1fr 1fr; gap:14px 0}
  .band{border-radius:32px; margin:0 8px}
  .band.pillar{padding:28px 0 24px}
  .band .stage{min-height:auto; padding:6px 0 22px}
  .pillar .chip{display:none}
  .top a > img{height:34px}
  .hero .float{display:none}
  .final .float{top:14px !important}
}
@media (prefers-reduced-motion: reduce){
  .bob, .idle, .device.enter{animation:none}
  .device{--fly:0 !important; transition:none}
  .reveal{opacity:1; transform:none; transition:none}
  .marquee .track{transform:none !important}
  .float{transform:none !important}
}

/* sub-pages: rules thanks/, privacy/ and terms/ still need (home page doesn't use these) */
.fine-print{ font-size:13.5px; color:var(--ink-soft); line-height:1.55; }
.link-quiet{ display:inline-flex; align-items:center; gap:6px; color:var(--leaf); font-family:"Bricolage Grotesque", sans-serif; font-weight:700; font-size:15px; text-decoration:none; }
.link-quiet:hover{ text-decoration:underline; }
.skip-link{ position:absolute; left:12px; top:-60px; background:var(--leaf); color:#fff; padding:10px 16px; border-radius:10px; z-index:100; text-decoration:none; transition:top .15s ease; }
.skip-link:focus{ top:12px; }

.legal{ max-width:720px; margin:0 auto; padding-block:56px; }
.legal h1{ font-size:32px; margin-bottom:14px; }
.legal h2{ font-size:22px; margin-top:36px; margin-bottom:10px; }
.legal p, .legal li{ color:var(--ink-soft); font-size:16px; line-height:1.65; }
.legal ul{ padding-left:20px; }
.refund-box{ background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:20px 22px; margin-top:16px; }

.thanks{ min-height:70vh; display:flex; align-items:center; }
.thanks-card{ max-width:560px; margin:0 auto; text-align:center; padding-block:56px; }
.thanks-check{ width:64px; height:64px; border-radius:50%; background:var(--leaf); color:#fff; display:flex; align-items:center; justify-content:center; margin:0 auto 24px; }
.share-row{ margin-top:36px; display:flex; flex-direction:column; gap:12px; align-items:center; }
.share-row .btn{ width:100%; max-width:280px; }