/* ============================================================
   GrowMore CookMore — site.css
   Premium botanical-editorial design system, 2026 redesign.
   Palette: deep pine greens, warm cream paper, terracotta clay.
   Type: Fraunces (display serif) + Karla (body sans), self-hosted.
   ============================================================ */

/* ---------- fonts ---------- */
@font-face{
  font-family:'Fraunces';
  src:url('/fonts/fraunces-normal.woff2') format('woff2');
  font-weight:300 700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Fraunces';
  src:url('/fonts/fraunces-italic.woff2') format('woff2');
  font-weight:300 700;font-style:italic;font-display:swap;
}
@font-face{
  font-family:'Karla';
  src:url('/fonts/karla-normal.woff2') format('woff2');
  font-weight:300 800;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Karla';
  src:url('/fonts/karla-italic.woff2') format('woff2');
  font-weight:300 800;font-style:italic;font-display:swap;
}

/* ---------- tokens ---------- */
:root{
  --pine-950:#12241a;
  --pine-900:#1a3325;
  --pine-800:#224231;
  --pine-700:#2b543c;
  --leaf-600:#3d7350;
  --leaf-500:#4d8a5f;
  --sage-400:#8fac91;
  --sage-300:#aec4ab;
  --sage-200:#cfdcca;
  --cream-50:#faf8f1;
  --cream-100:#f3eee1;
  --cream-200:#e7dfc9;
  --paper:#fffdf6;
  --ink-900:#202b20;
  --ink-600:#5a6753;
  --clay-600:#c05f33;
  --clay-700:#a34d27;
  --gold-500:#d3a244;
  --warm-white:#fdfcf6;

  --font-display:'Fraunces',Georgia,'Times New Roman',serif;
  --font-body:'Karla',-apple-system,'Segoe UI',sans-serif;

  --container:1180px;
  --pad-x:clamp(20px,5vw,48px);
  --radius-lg:22px;
  --radius-md:16px;
  --radius-sm:10px;

  --shadow-card:0 1px 2px rgba(26,51,37,.06),0 14px 40px -14px rgba(26,51,37,.16);
  --shadow-card-hover:0 2px 4px rgba(26,51,37,.07),0 24px 56px -16px rgba(26,51,37,.26);
  --shadow-phone:0 40px 80px -24px rgba(15,30,21,.5);

  --ease-out:cubic-bezier(.22,.72,.24,1);
}

/* ---------- reset-ish base ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-body);
  font-size:1.0625rem;line-height:1.7;
  color:var(--ink-900);
  background:var(--cream-50);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--pine-700);text-decoration:none}
p a,li a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--sage-300);transition:text-decoration-color .25s}
p a:hover,li a:hover{text-decoration-color:var(--clay-600)}
::selection{background:var(--sage-200);color:var(--pine-900)}
:focus-visible{outline:3px solid var(--clay-600);outline-offset:3px;border-radius:4px}

h1,h2,h3,.display{
  font-family:var(--font-display);
  font-weight:560;
  line-height:1.12;
  letter-spacing:-.015em;
  color:var(--pine-900);
  text-wrap:balance;
}
h1{font-size:clamp(2.5rem,5.6vw,4.1rem)}
h2{font-size:clamp(1.9rem,3.6vw,2.75rem)}
h3{font-size:clamp(1.25rem,2vw,1.5rem);font-weight:600}
strong{font-weight:700}

.skip-link{position:absolute;left:-999px;top:0;background:var(--pine-900);color:var(--warm-white);padding:.6rem 1rem;z-index:200;border-radius:0 0 10px 0}
.skip-link:focus{left:0}

/* ---------- layout helpers ---------- */
.container{max-width:var(--container);margin-inline:auto;padding-inline:var(--pad-x)}
.narrow{max-width:820px;margin-inline:auto}
section{position:relative}
.section{padding-block:clamp(4rem,9vw,7.5rem)}
.section-tight{padding-block:clamp(3rem,6vw,4.5rem)}

.eyebrow{
  display:inline-flex;align-items:center;gap:.55em;
  font-size:.78rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--clay-600);margin-bottom:1.1rem;
}
.eyebrow::before{content:"";width:26px;height:1.5px;background:var(--clay-600);opacity:.6}
.on-dark .eyebrow{color:var(--gold-500)}
.on-dark .eyebrow::before{background:var(--gold-500)}

.lede{font-size:clamp(1.1rem,1.6vw,1.28rem);line-height:1.65;color:var(--ink-600);max-width:44ch}
.center{text-align:center}
.center .lede{margin-inline:auto}
.center .eyebrow::before{display:none}
.section-head{margin-bottom:clamp(2.2rem,4.5vw,3.5rem)}

/* botanical hairline divider */
.rule{
  display:flex;align-items:center;gap:1rem;justify-content:center;
  margin-block:clamp(3rem,6vw,4.5rem);
  color:var(--sage-400);
}
.rule::before,.rule::after{content:"";flex:1;max-width:220px;height:1px;background:var(--cream-200)}
.rule svg{width:20px;height:20px;opacity:.85}

/* ---------- dark sections ---------- */
.on-dark{
  background:
    radial-gradient(120% 90% at 50% 0%,var(--pine-800) 0%,var(--pine-900) 55%,var(--pine-950) 100%);
  color:var(--warm-white);
}
.on-dark h1,.on-dark h2,.on-dark h3{color:var(--warm-white)}
.on-dark .lede,.on-dark p{color:rgba(253,252,246,.78)}
.on-dark a{color:var(--warm-white)}
/* single elegant watermark, replaces the old tiled background */
.watermarked{overflow:hidden}
.watermarked::after{
  content:"";position:absolute;right:-8%;bottom:-14%;
  width:min(620px,60vw);aspect-ratio:3/2;
  background:url('/images/watermark.png') no-repeat center/contain;
  opacity:.05;pointer-events:none;
}
/* cards sitting on dark sections keep light-surface text colors */
.on-dark .card h2,.on-dark .card h3,.on-dark .packet h3{color:var(--pine-900)}
.on-dark .card p,.on-dark .packet p{color:var(--ink-600)}
.on-dark .card .eyebrow{color:var(--clay-600)}
.on-dark .card .eyebrow::before{background:var(--clay-600)}

/* fine grain for print-paper feel on dark blocks */
.grain::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:100;
  background:rgba(250,248,241,.9);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(231,223,201,.7);
  transition:box-shadow .3s;
}
.nav.scrolled{box-shadow:0 6px 24px -12px rgba(26,51,37,.18)}
.nav-inner{
  max-width:var(--container);margin-inline:auto;padding-inline:var(--pad-x);
  display:flex;align-items:center;gap:1.4rem;height:74px;
}
.brand{display:flex;align-items:center;gap:.7rem;margin-right:auto}
.brand img{width:42px;height:42px;border-radius:11px;box-shadow:0 2px 8px rgba(26,51,37,.22)}
.brand span{font-family:var(--font-display);font-weight:600;font-size:1.18rem;color:var(--pine-900);letter-spacing:-.01em;white-space:nowrap}
.nav-links{display:flex;align-items:center;gap:clamp(.85rem,1.4vw,1.25rem);list-style:none}
.nav-links a{
  font-size:.92rem;font-weight:500;color:var(--ink-600);
  padding:.35rem 0;position:relative;white-space:nowrap;
}
.nav-links a::after{
  content:"";position:absolute;left:0;right:100%;bottom:-2px;height:2px;
  background:var(--clay-600);transition:right .3s var(--ease-out);
}
.nav-links a:hover{color:var(--pine-900)}
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{right:0}
.nav-links a[aria-current="page"]{color:var(--pine-900);font-weight:700}
.nav-cta{margin-left:.3rem}
.nav-cta .btn{font-size:.88rem;padding:.7em 1.3em}
.nav-cta .cta-long{display:none}
@media (max-width:1060px){.nav-cta .cta-long{display:inline}.nav-cta .cta-short{display:none}}
.nav-toggle{
  display:none;background:none;border:0;cursor:pointer;padding:.5rem;margin-left:auto;
}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--pine-900);margin:5px 0;border-radius:2px;transition:transform .3s,opacity .3s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media (max-width:1060px){
  .nav-toggle{display:block}
  .nav-links{
    position:absolute;top:74px;left:0;right:0;
    flex-direction:column;align-items:flex-start;gap:0;
    background:var(--cream-50);border-bottom:1px solid var(--cream-200);
    padding:0 var(--pad-x);
    max-height:0;overflow:hidden;transition:max-height .4s var(--ease-out);
  }
  .nav-links.open{max-height:70vh;overflow-y:auto;box-shadow:0 30px 40px -20px rgba(26,51,37,.25)}
  .nav-links li{width:100%;border-bottom:1px solid var(--cream-100)}
  .nav-links li:last-child{border-bottom:0}
  .nav-links a{display:block;padding:1rem 0;font-size:1.05rem}
  .nav-links a::after{display:none}
  .nav-cta{margin:.6rem 0 1.2rem}
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:var(--font-body);font-weight:700;font-size:.98rem;
  padding:.85em 1.7em;border-radius:999px;border:0;cursor:pointer;
  transition:transform .25s var(--ease-out),box-shadow .25s,background-color .25s,color .25s;
  text-decoration:none!important;white-space:nowrap;
}
.btn .arrow{transition:transform .25s var(--ease-out);display:inline-block}
.btn:hover .arrow{transform:translateX(4px)}
.btn-primary{
  background:var(--pine-800);color:var(--warm-white);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 10px 24px -10px rgba(26,51,37,.5);
}
.btn-primary:hover{background:var(--pine-700);transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 16px 32px -12px rgba(26,51,37,.55)}
.btn-clay{
  background:var(--clay-600);color:var(--warm-white);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 10px 24px -10px rgba(163,77,39,.55);
}
.btn-clay:hover{background:var(--clay-700);transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 16px 34px -12px rgba(163,77,39,.6)}
.btn-outline{
  background:transparent;color:var(--pine-800);
  box-shadow:inset 0 0 0 1.6px var(--pine-800);
}
.btn-outline:hover{background:var(--pine-800);color:var(--warm-white);transform:translateY(-2px)}
.on-dark .btn-outline{color:var(--warm-white);box-shadow:inset 0 0 0 1.6px rgba(253,252,246,.7)}
.on-dark .btn-outline:hover{background:var(--warm-white);color:var(--pine-900)}
.btn-lg{font-size:1.06rem;padding:1em 2.1em}

/* store badges */
.store-badges{display:flex;gap:.9rem;flex-wrap:wrap;align-items:center}
.store-badges img{height:52px;width:auto;transition:transform .25s var(--ease-out),filter .25s}
.store-badges img[src*="googleplay"]{height:58px;margin-block:-3px}
.store-badges a:hover img{transform:translateY(-3px)}
.store-note{font-size:.85rem;color:var(--ink-600);margin-top:.8rem}
.on-dark .store-note{color:rgba(253,252,246,.6)}

/* ---------- hero ---------- */
.hero{
  padding-block:clamp(4rem,8vw,7rem) clamp(4.5rem,9vw,8rem);
}
.hero-grid{
  display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,4.5rem);
  align-items:center;
}
.hero-word{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(3.1rem,7.2vw,5.4rem);
  line-height:1.02;letter-spacing:-.02em;color:var(--warm-white);
}
.hero-word em{font-style:italic;font-weight:480;color:var(--sage-300)}
.hero-tag{
  font-family:var(--font-display);font-style:italic;font-weight:430;
  font-size:clamp(1.25rem,2.2vw,1.6rem);color:var(--gold-500);
  margin-top:1.2rem;letter-spacing:.01em;
}
.hero .lede{color:rgba(253,252,246,.8);margin-top:1.3rem}
.hero .store-badges{margin-top:2.2rem}
.hero-phone{position:relative;display:flex;justify-content:center}
.hero-phone img{
  width:min(380px,78%);
  filter:drop-shadow(var(--shadow-phone));
  transform:rotate(-2.5deg);
  animation:levitate 7s ease-in-out infinite;
}
@keyframes levitate{
  0%,100%{transform:rotate(-2.5deg) translateY(0)}
  50%{transform:rotate(-2.2deg) translateY(-12px)}
}

/* page hero (interior pages, shorter) */
.page-hero{padding-block:clamp(3.5rem,7vw,5.5rem)}
.page-hero .lede{margin-top:1.1rem}

/* load-in stagger */
.stagger>*{opacity:0;transform:translateY(24px);animation:rise .8s var(--ease-out) forwards}
.stagger>*:nth-child(1){animation-delay:.05s}
.stagger>*:nth-child(2){animation-delay:.16s}
.stagger>*:nth-child(3){animation-delay:.27s}
.stagger>*:nth-child(4){animation-delay:.38s}
.stagger>*:nth-child(5){animation-delay:.49s}
.stagger>*:nth-child(6){animation-delay:.6s}
@keyframes rise{to{opacity:1;transform:none}}

/* scroll reveals */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out);transition-delay:var(--d,0s)}
.reveal.in-view{opacity:1;transform:none}

/* ---------- cards ---------- */
.card{
  background:var(--paper);border:1px solid var(--cream-200);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-card);
  transition:transform .35s var(--ease-out),box-shadow .35s;
}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow-card-hover)}
.card-pad{padding:clamp(1.5rem,3vw,2.2rem)}

/* seed-packet card — signature component */
.packet{
  position:relative;background:var(--paper);
  border:1px solid var(--cream-200);border-radius:var(--radius-md);
  padding:1.9rem 1.6rem 1.7rem;
  box-shadow:var(--shadow-card);
  transition:transform .35s var(--ease-out),box-shadow .35s;
}
.packet::before{
  content:"";position:absolute;inset:7px;border:1px solid var(--sage-200);
  border-radius:calc(var(--radius-md) - 6px);pointer-events:none;
}
.packet:hover{transform:translateY(-5px);box-shadow:var(--shadow-card-hover)}
.packet .stamp{
  position:absolute;top:-14px;right:16px;
  width:44px;height:44px;border-radius:50%;
  background:var(--cream-100);border:1px solid var(--cream-200);
  display:flex;align-items:center;justify-content:center;
  font-size:1.25rem;box-shadow:0 4px 10px -4px rgba(26,51,37,.25);
}
.packet h3{font-size:1.18rem;margin-bottom:.45rem}
.packet p{font-size:.95rem;color:var(--ink-600);line-height:1.6}

/* grid utilities */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1.2rem,2.5vw,2rem)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.2rem,2.5vw,2rem)}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.1rem,2vw,1.6rem)}
@media (max-width:960px){.grid-4{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}

/* ---------- app screenshot gallery (snap scroll) ---------- */
.gallery-wrap{position:relative;margin-top:clamp(2rem,4vw,3rem)}
.gallery{
  display:flex;gap:clamp(1rem,2vw,1.6rem);
  overflow-x:auto;scroll-snap-type:x mandatory;
  padding:1.5rem .5rem 2rem;
  scrollbar-width:thin;scrollbar-color:var(--sage-300) transparent;
}
.gallery::-webkit-scrollbar{height:6px}
.gallery::-webkit-scrollbar-thumb{background:var(--sage-300);border-radius:3px}
.gallery::-webkit-scrollbar-track{background:var(--cream-100);border-radius:3px}
.shot{
  flex:0 0 auto;width:min(272px,72vw);scroll-snap-align:center;
  border-radius:24px;overflow:hidden;
  box-shadow:var(--shadow-card);
  border:1px solid var(--cream-200);
  transition:transform .35s var(--ease-out),box-shadow .35s;
  background:var(--paper);
}
.shot:hover{transform:translateY(-6px) scale(1.015);box-shadow:var(--shadow-card-hover)}
.shot img{width:100%;height:auto}
.shot figcaption{
  font-size:.82rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-600);text-align:center;padding:.8rem .5rem .9rem;
  background:var(--paper);
}
.gallery-hint{display:flex;align-items:center;gap:.5rem;justify-content:center;font-size:.85rem;color:var(--ink-600)}

/* ---------- feature rows (alternating) ---------- */
.feature-row{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);
  align-items:center;padding-block:clamp(2.5rem,5vw,4rem);
}
.feature-row+.feature-row{border-top:1px solid var(--cream-200)}
.feature-row .num{
  font-family:var(--font-display);font-style:italic;font-weight:420;
  font-size:1.1rem;color:var(--clay-600);
  display:inline-flex;align-items:center;gap:.7rem;margin-bottom:.9rem;
}
.feature-row .num::after{content:"";width:34px;height:1px;background:var(--clay-600);opacity:.5}
.feature-row h3{font-size:clamp(1.5rem,2.6vw,2rem);margin-bottom:.8rem}
.feature-row p{color:var(--ink-600)}
.feature-row .chip{margin-top:1.1rem}
.feature-media{display:flex;justify-content:center}
.feature-media img{
  width:min(320px,80%);border-radius:26px;
  border:1px solid var(--cream-200);
  box-shadow:var(--shadow-card);
  transition:transform .4s var(--ease-out);
}
.feature-row:hover .feature-media img{transform:rotate(-1.2deg) translateY(-6px)}
@media (max-width:820px){
  .feature-row{grid-template-columns:1fr;gap:1.8rem}
  .feature-row .feature-media{order:-1}
}
.feature-row:nth-child(even) .feature-media{order:-1}
@media (max-width:820px){.feature-row:nth-child(even) .feature-media{order:-1}}

.chip{
  display:inline-flex;align-items:center;gap:.5em;
  background:var(--cream-100);border:1px solid var(--cream-200);
  border-radius:999px;padding:.4em 1em;
  font-size:.85rem;font-weight:700;color:var(--pine-800);
}

/* ---------- stats band ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;text-align:center}
@media (max-width:820px){.stats{grid-template-columns:repeat(2,1fr);gap:2rem 1rem}}
.stat b{
  display:block;font-family:var(--font-display);font-weight:560;
  font-size:clamp(2.3rem,4.5vw,3.4rem);line-height:1;color:var(--pine-900);
}
.stat b i{font-style:normal;color:var(--clay-600)}
.stat span{font-size:.92rem;font-weight:500;color:var(--ink-600);letter-spacing:.03em}
.on-dark .stat b{color:var(--warm-white)}
.on-dark .stat b i{color:var(--gold-500)}
.on-dark .stat span{color:rgba(253,252,246,.65)}

/* ---------- quote band ---------- */
.quote-band{text-align:center;padding-block:clamp(4rem,8vw,6.5rem)}
.quote-band blockquote{
  font-family:var(--font-display);font-style:italic;font-weight:440;
  font-size:clamp(1.45rem,2.8vw,2.1rem);line-height:1.45;
  color:var(--warm-white);max-width:820px;margin-inline:auto;
}
.quote-band blockquote::before{
  content:"“";display:block;font-size:4.5rem;line-height:.6;
  color:var(--gold-500);margin-bottom:1.4rem;font-style:normal;
}
.quote-band cite{
  display:block;margin-top:1.6rem;font-family:var(--font-body);font-style:normal;
  font-size:.9rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--sage-300);
}

/* ---------- steps ---------- */
.steps{counter-reset:step;display:grid;gap:0;max-width:760px;margin-inline:auto}
.step{
  counter-increment:step;position:relative;
  display:grid;grid-template-columns:64px 1fr;gap:1.3rem;
  padding-block:1.6rem;
}
.step+.step{border-top:1px solid var(--cream-200)}
.step::before{
  content:counter(step);
  font-family:var(--font-display);font-style:italic;font-weight:450;font-size:1.5rem;
  width:56px;height:56px;border-radius:50%;
  border:1.5px solid var(--sage-300);color:var(--pine-800);
  display:flex;align-items:center;justify-content:center;
  background:var(--paper);
}
.step h3{font-size:1.15rem;margin-bottom:.3rem}
.step p{color:var(--ink-600);font-size:.98rem}

/* ---------- accordions ---------- */
.accordion{max-width:820px;margin-inline:auto}
.accordion details{border-bottom:1px solid var(--cream-200)}
.accordion details:first-child{border-top:1px solid var(--cream-200)}
.accordion summary{
  cursor:pointer;list-style:none;position:relative;
  padding:1.35rem 3rem 1.35rem .2rem;
  font-weight:700;font-size:1.06rem;color:var(--pine-900);
  transition:color .25s;
}
.accordion summary::-webkit-details-marker{display:none}
.accordion summary::after{
  content:"";position:absolute;right:.4rem;top:50%;width:14px;height:14px;
  transform:translateY(-50%);
  background:
    linear-gradient(var(--clay-600),var(--clay-600)) center/14px 1.6px no-repeat,
    linear-gradient(var(--clay-600),var(--clay-600)) center/1.6px 14px no-repeat;
  transition:transform .3s var(--ease-out);
}
.accordion details[open] summary{color:var(--clay-600)}
.accordion details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.accordion .a-body{padding:0 .2rem 1.5rem;color:var(--ink-600);max-width:64ch;animation:fadein .45s var(--ease-out)}
@keyframes fadein{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ---------- pricing ---------- */
.pricing{display:grid;grid-template-columns:1fr 1.08fr;gap:clamp(1.4rem,3vw,2.2rem);align-items:stretch;max-width:900px;margin-inline:auto}
@media (max-width:760px){.pricing{grid-template-columns:1fr}}
.pricing-3{grid-template-columns:.92fr 1fr 1.12fr;max-width:1100px}
@media (max-width:980px){.pricing-3{grid-template-columns:1fr;max-width:560px}}
.price-card{
  border-radius:var(--radius-lg);padding:clamp(1.8rem,3.5vw,2.6rem);
  background:var(--paper);border:1px solid var(--cream-200);box-shadow:var(--shadow-card);
  display:flex;flex-direction:column;
}
.price-card.premium{
  background:
    radial-gradient(130% 110% at 50% 0%,var(--pine-800) 0%,var(--pine-900) 60%,var(--pine-950) 100%);
  color:var(--warm-white);border:0;position:relative;overflow:hidden;
}
.price-card.premium h3,.price-card.premium .amount{color:var(--warm-white)}
.price-card h3{font-size:1.35rem}
.price-card .plan-label{font-size:.8rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-600);margin-bottom:.5rem}
.price-card.premium .plan-label{color:var(--gold-500)}
.price-card .amount{font-family:var(--font-display);font-weight:560;font-size:clamp(2.4rem,4vw,3.2rem);line-height:1;margin:.8rem 0 .2rem;color:var(--pine-900)}
.price-card .amount small{font-family:var(--font-body);font-size:1rem;font-weight:500;color:inherit;opacity:.65}
.price-card .per{font-size:.92rem;opacity:.7;margin-bottom:1.4rem}
.price-card ul{list-style:none;margin-top:.4rem;display:grid;gap:.55rem;flex:1}
.price-card li{display:flex;gap:.65rem;align-items:baseline;font-size:.97rem}
.price-card li .tick{color:var(--leaf-500);font-weight:700}
.price-card.premium li .tick{color:var(--gold-500)}
.price-card li.off{opacity:.45}
.price-card li.off .tick{color:var(--ink-600)}
.ribbon{
  display:inline-block;background:var(--gold-500);color:var(--pine-950);
  font-size:.78rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  border-radius:999px;padding:.35em 1em;margin-bottom:1rem;align-self:flex-start;
}
.price-card .btn{margin-top:1.6rem;justify-content:center}

/* ---------- glut editorial ---------- */
.story-row{
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4.5rem);
  align-items:center;padding-block:clamp(2.8rem,5vw,4.5rem);
}
.story-row:nth-child(even) .story-media{order:2}
@media (max-width:820px){
  .story-row{grid-template-columns:1fr;gap:1.6rem}
  .story-row:nth-child(even) .story-media{order:0}
  .story-media{order:0}
}
.story-media img{
  border-radius:var(--radius-lg);box-shadow:var(--shadow-card);
  aspect-ratio:4/3.4;object-fit:cover;width:100%;
  transition:transform .5s var(--ease-out);
}
.story-row:hover .story-media img{transform:scale(1.02) rotate(-.5deg)}
.story-row h2{margin-bottom:1rem}
.story-row p{color:var(--ink-600);margin-bottom:1rem}
.story-row p:last-child{margin-bottom:0}
.dropcap::first-letter{
  font-family:var(--font-display);font-weight:600;
  font-size:3.4em;line-height:.8;float:left;
  padding:.08em .12em 0 0;color:var(--clay-600);
}

/* photo mosaic */
.mosaic{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.8rem,1.6vw,1.3rem)}
@media (max-width:680px){.mosaic{grid-template-columns:repeat(2,1fr)}}
.mosaic img{
  width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--radius-md);
  box-shadow:var(--shadow-card);
  transition:transform .4s var(--ease-out),box-shadow .4s;
}
.mosaic img:hover{transform:scale(1.03) rotate(.6deg);box-shadow:var(--shadow-card-hover)}

/* ---------- CTA band ---------- */
.cta-band{text-align:center}
.cta-band h2{font-size:clamp(2rem,4.2vw,3rem);margin-bottom:1rem}
.cta-band .lede{margin-inline:auto;margin-bottom:2.2rem}
.cta-band .store-badges{justify-content:center}
.cta-band .actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-top:2.2rem}

/* ---------- blog/recipe cards (fetched) ---------- */
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.2rem,2.5vw,2rem)}
@media (max-width:960px){.post-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.post-grid{grid-template-columns:1fr}}
.post-card{display:flex;flex-direction:column;overflow:hidden;border-radius:var(--radius-lg);background:var(--paper);border:1px solid var(--cream-200);box-shadow:var(--shadow-card);transition:transform .35s var(--ease-out),box-shadow .35s}
.post-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-card-hover)}
.post-card img{aspect-ratio:16/10;object-fit:cover;width:100%}
.post-card .pc-body{padding:1.4rem 1.5rem 1.6rem}
.post-card h3{font-size:1.15rem;line-height:1.35;margin-bottom:.5rem}
.post-card p{font-size:.93rem;color:var(--ink-600)}
.post-card .pc-more{margin-top:.9rem;font-size:.88rem;font-weight:700;color:var(--clay-600)}

/* ---------- lead magnet / split ---------- */
.magnet{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
@media (max-width:860px){.magnet{grid-template-columns:1fr}}
.magnet-list{list-style:none;display:grid;gap:.9rem;margin-block:1.6rem}
.magnet-list li{display:flex;gap:.8rem;align-items:baseline}
.magnet-list .tick{color:var(--leaf-500);font-weight:800}
.on-dark .magnet-list .tick{color:var(--gold-500)}
.byline{display:flex;align-items:center;gap:1rem;margin-top:1.8rem}
.byline img{width:58px;height:58px;border-radius:50%;object-fit:cover;border:2px solid var(--sage-200)}
.byline b{display:block;font-size:.98rem}
.byline span{font-size:.86rem;color:var(--ink-600)}
.on-dark .byline span{color:rgba(253,252,246,.65)}

/* beehiiv iframe wrapper */
.subscribe-frame{max-width:560px;margin-inline:auto}
.subscribe-frame iframe{width:100%;border:0;border-radius:var(--radius-md)}

/* ---------- testimonials ---------- */
.testimonials{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.2rem,2.5vw,1.8rem)}
@media (max-width:860px){.testimonials{grid-template-columns:1fr}}
.testimonial{padding:1.8rem 1.7rem}
.testimonial .stars{color:var(--gold-500);letter-spacing:.18em;font-size:.95rem;margin-bottom:.9rem}
.testimonial p{font-size:.98rem;color:var(--ink-900);font-style:italic;line-height:1.6}
.testimonial footer{margin-top:1.1rem;font-size:.88rem;color:var(--ink-600)}
.testimonial footer b{color:var(--pine-900)}

/* ---------- course cards ---------- */
.course-card{overflow:hidden;display:flex;flex-direction:column}
.course-card .cc-img{position:relative;aspect-ratio:16/10;overflow:hidden}
.course-card .cc-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease-out)}
.course-card:hover .cc-img img{transform:scale(1.06)}
.course-card .flag{
  position:absolute;top:14px;left:14px;
  background:rgba(18,36,26,.82);color:var(--warm-white);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  font-size:.76rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  padding:.4em 1em;border-radius:999px;
}
.course-card .flag.gold{background:var(--gold-500);color:var(--pine-950)}
.course-card .cc-body{padding:1.7rem 1.7rem 1.9rem;display:flex;flex-direction:column;flex:1}
.course-card .cc-kicker{font-size:.8rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--clay-600);margin-bottom:.5rem}
.course-card h3{font-size:1.45rem;margin-bottom:.7rem}
.course-card p{font-size:.96rem;color:var(--ink-600);flex:1}
.course-card .cc-meta{display:flex;gap:1rem;flex-wrap:wrap;margin:1.2rem 0;font-size:.88rem;font-weight:700;color:var(--pine-800)}
.course-card .cc-meta span{display:inline-flex;align-items:center;gap:.4em}

/* trust strip */
.trust{display:flex;flex-wrap:wrap;gap:1rem 2.4rem;justify-content:center;font-size:.92rem;font-weight:600;color:var(--ink-600)}
.trust span{display:inline-flex;align-items:center;gap:.5em}
.trust .dot{color:var(--leaf-500)}
.on-dark .trust{color:rgba(253,252,246,.7)}

/* ---------- problem/solution cards ---------- */
.ps-card{padding:1.7rem 1.6rem}
.ps-card .prob{
  font-family:var(--font-display);font-style:italic;font-weight:440;
  font-size:1.12rem;line-height:1.5;color:var(--pine-900);
  padding-left:1rem;border-left:3px solid var(--cream-200);margin-bottom:1.1rem;
}
.ps-card .sol{display:flex;gap:.7rem;align-items:baseline;font-size:.95rem;color:var(--ink-600)}
.ps-card .sol .tick{color:var(--leaf-500);font-weight:800}

/* ---------- download / thanks pages ---------- */
.dl-card{max-width:640px;margin-inline:auto;text-align:center;padding:clamp(2rem,4vw,3rem)}
.dl-card .big-emoji{font-size:3rem;line-height:1;margin-bottom:1rem}
.dl-card h2{margin-bottom:.8rem}
.dl-card p{color:var(--ink-600)}
.dl-card .btn{margin-top:1.8rem}
.dl-note{font-size:.85rem;color:var(--ink-600);margin-top:.9rem}

/* upsell panel */
.upsell{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,4vw,3.5rem);align-items:center}
@media (max-width:860px){.upsell{grid-template-columns:1fr}}
.price-line{display:flex;align-items:baseline;gap:.9rem;margin:1.4rem 0 .4rem}
.price-line .now{font-family:var(--font-display);font-weight:600;font-size:2.6rem;color:var(--pine-900)}
.price-line .was{font-size:1.15rem;color:var(--ink-600);text-decoration:line-through;text-decoration-color:var(--clay-600)}
.on-dark .price-line .now{color:var(--warm-white)}

/* ---------- footer ---------- */
.footer{
  background:
    radial-gradient(120% 100% at 50% 0%,var(--pine-900) 0%,var(--pine-950) 70%);
  color:rgba(253,252,246,.78);position:relative;overflow:hidden;
  margin-top:clamp(4rem,8vw,7rem);
}
.footer::after{
  content:"";position:absolute;right:-6%;bottom:-18%;
  width:min(520px,55vw);aspect-ratio:3/2;
  background:url('/images/watermark.png') no-repeat center/contain;
  opacity:.045;pointer-events:none;
}
.footer-inner{padding-block:clamp(3.5rem,6vw,5rem) 2rem}
.footer-top{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:clamp(2rem,4vw,3rem);padding-bottom:3rem;border-bottom:1px solid rgba(253,252,246,.12)}
@media (max-width:860px){.footer-top{grid-template-columns:1fr 1fr}}
@media (max-width:540px){.footer-top{grid-template-columns:1fr}}
.footer .brand span{color:var(--warm-white)}
.footer-tag{
  font-family:var(--font-display);font-style:italic;font-weight:430;
  font-size:1.35rem;color:var(--sage-300);margin-top:1.1rem;line-height:1.4;
}
.footer h4{
  font-size:.8rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold-500);margin-bottom:1.1rem;font-family:var(--font-body);
}
.footer ul{list-style:none;display:grid;gap:.6rem}
.footer a{color:rgba(253,252,246,.78);font-size:.96rem;transition:color .25s}
.footer a:hover{color:var(--warm-white)}
.footer-bottom{
  display:flex;flex-wrap:wrap;gap:.8rem 2rem;justify-content:space-between;align-items:center;
  padding-top:1.8rem;font-size:.85rem;color:rgba(253,252,246,.5);
}
.footer-bottom a{color:rgba(253,252,246,.6);font-size:.85rem}

/* ---------- sticky buy bar (sales page) ---------- */
.buybar{
  position:fixed;left:0;right:0;bottom:0;z-index:90;
  background:rgba(18,36,26,.92);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-top:1px solid rgba(253,252,246,.14);
  transform:translateY(110%);transition:transform .4s var(--ease-out);
}
.buybar.show{transform:none}
.buybar-inner{
  max-width:var(--container);margin-inline:auto;padding:0.8rem var(--pad-x);
  display:flex;align-items:center;gap:1.2rem;justify-content:space-between;
}
.buybar b{color:var(--warm-white);font-size:.98rem}
.buybar .was{color:rgba(253,252,246,.55);text-decoration:line-through;margin-right:.5rem;font-weight:400}
@media (max-width:640px){.buybar b span.hide-sm{display:none}}

/* ---------- misc ---------- */
.img-round{border-radius:var(--radius-lg);box-shadow:var(--shadow-card)}
.avatar-lg{width:min(380px,100%);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);object-fit:cover}
.text-clay{color:var(--clay-600)}
.mt-1{margin-top:1rem}.mt-2{margin-top:2rem}.mt-3{margin-top:3rem}
.mb-1{margin-bottom:1rem}.mb-2{margin-bottom:2rem}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal,.stagger>*{opacity:1!important;transform:none!important}
}


/* ===== 2026-07-08 polish: lighter greens, brighter clay, centered watermark, badge parity, bigger phone ===== */
:root{--pine-950:#16301f;--pine-900:#1f3e2c;--pine-800:#285039;--pine-700:#326347;--leaf-600:#45805a;--leaf-500:#55976a;--clay-600:#dd6a2f;--clay-700:#c25620}
.watermarked::after{right:-5%;top:50%;bottom:auto;transform:translateY(-50%)}
.footer::after{right:-5%;top:50%;bottom:auto;transform:translateY(-50%)}
.store-badges img[src*="googleplay"]{height:68px;margin-block:-8px}
.hero-phone img{width:min(455px,88%)}