/* =========================================================
   Aamr Vaatika — Design System
   Palette drawn from the brand logo: mango gold, deep olive
   leaf green, warm cream. Fraunces for editorial warmth,
   Inter for clean, family-friendly UI text.

   This file holds tokens, the reset, utilities and every
   component shared by more than one page. Anything unique to
   a single page lives in its own css/<page>.css — no styling
   is written inside the HTML documents.
   ========================================================= */

:root{
  /* --- Brand colors --- */
  --mango-900:#7d4a0f;
  --mango-800:#9c5c14;
  --mango-700:#c07a1c;
  --mango-600:#e0982a;
  --mango-500:#eeac3f;
  --mango-400:#f4bf62;
  --mango-300:#f2c87d;
  --mango-200:#f9dda3;
  --mango-100:#fbe8c2;
  --mango-50:#fdf3e0;

  --olive-900:#2c3714;
  --olive-800:#3a4a1a;
  --olive-700:#4a5c22;
  --olive-600:#5c712c;
  --olive-500:#71883a;
  --olive-400:#8ea158;
  --olive-300:#b0bd85;
  --olive-200:#c9d3aa;
  --olive-100:#e2e7d0;

  --cream-000:#fffdf8;
  --cream-50:#fbf3e2;
  --cream-100:#f6ead2;
  --cream-200:#efdfc0;

  --ink-900:#33291a;
  --ink-700:#4d4030;
  --ink-500:#6e6150;
  --ink-300:#9c9080;

  --white:#ffffff;

  /* Status colors (kept warm so they sit inside the orchard palette) */
  --leaf:#5c712c;
  --leaf-soft:#e2eecb;
  --clay:#b5493a;
  --clay-soft:#f7e2de;

  /* --- Semantic --- */
  --bg:var(--cream-50);
  --surface:var(--white);
  --text:var(--ink-900);
  --text-soft:var(--ink-500);
  --brand:var(--mango-600);
  --brand-dark:var(--mango-700);
  --accent:var(--olive-600);
  --accent-dark:var(--olive-800);
  --hairline:var(--cream-200);

  /* --- Type --- */
  --font-display:'Fraunces', 'Georgia', serif;
  --font-body:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-devanagari:'Hind', 'Noto Sans Devanagari', sans-serif;

  /* --- Radii / shadow --- */
  --r-sm:10px;
  --r-md:18px;
  --r-lg:28px;
  --r-pill:999px;
  --shadow-sm:0 2px 10px rgba(58,42,17,0.07);
  --shadow-md:0 10px 30px rgba(58,42,17,0.10);
  --shadow-lg:0 20px 55px rgba(58,42,17,0.16);
  --shadow-glow:0 10px 24px rgba(192,122,28,0.34);

  /* --- Motion --- */
  --ease:cubic-bezier(.22,.61,.36,1);
  --dur-fast:.18s;
  --dur:.28s;
  --dur-slow:.7s;

  /* --- Metrics --- */
  --container:1240px;
  --nav-h:96px;
  --nav-h-sm:84px;
  --ring:0 0 0 4px var(--mango-200);
}

/* =============== Reset =============== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 16px);color-scheme:light;}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit;}
input,textarea,select{font:inherit;color:inherit;}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.12;color:var(--olive-900);letter-spacing:-0.01em;text-wrap:balance;}
p{text-wrap:pretty;}
.container{max-width:var(--container);margin:0 auto;padding:0 24px;}
section{position:relative;}
::selection{background:var(--mango-300);color:var(--olive-900);}

/* Visible, on-brand keyboard focus everywhere. */
:focus-visible{outline:3px solid var(--mango-600);outline-offset:3px;border-radius:6px;}
.btn:focus-visible,.nav-links a:focus-visible{outline-offset:4px;}

/* Screen-reader-only text and the skip link that reveals itself on focus. */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip-link{
  position:fixed;top:10px;left:50%;transform:translate(-50%,-160%);
  z-index:2000;background:var(--olive-900);color:var(--white);
  padding:12px 22px;border-radius:var(--r-pill);font-weight:700;font-size:.9rem;
  box-shadow:var(--shadow-lg);transition:transform var(--dur) var(--ease);
}
.skip-link:focus-visible{transform:translate(-50%,0);}

/* Reading-progress hairline pinned to the very top of the viewport. */
.scroll-progress{
  position:fixed;top:0;left:0;height:3px;width:100%;z-index:1200;
  transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--mango-500),var(--mango-700));
  pointer-events:none;
}

/* =============== Utility type scale =============== */
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-body);font-weight:700;font-size:12.5px;
  letter-spacing:0.14em;text-transform:uppercase;color:var(--brand-dark);
  background:var(--mango-100);padding:7px 16px;border-radius:var(--r-pill);
}
.eyebrow.on-dark{background:rgba(255,255,255,0.12);color:var(--mango-200);}
.eyebrow.leaf{background:var(--olive-100);color:var(--olive-700);}
h1{font-size:clamp(2.4rem,4.6vw,4.1rem);}
h2{font-size:clamp(1.9rem,3.2vw,2.7rem);}
h3{font-size:clamp(1.25rem,1.8vw,1.5rem);}
.lead{font-size:1.15rem;color:var(--text-soft);max-width:56ch;}
.section-head{max-width:680px;margin-bottom:48px;}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center;}
.section-head.center .lead{margin-left:auto;margin-right:auto;}
.section-head .eyebrow{margin-bottom:16px;}
.section-head h2{margin-bottom:14px;}

.section-pad{padding:96px 0;}
.section-pad.pt-0{padding-top:0;}
.section-pad.pb-0{padding-bottom:0;}
@media (max-width:768px){.section-pad{padding:64px 0;}}

/* Alternating band background — replaces per-page inline backgrounds. */
.section-alt{background:var(--cream-100);}

/* Small shared text helpers */
.text-soft{color:var(--text-soft);}
.fs-sm{font-size:.9rem;}
.fs-xs{font-size:.85rem;}
.center{text-align:center;}
.mt-md{margin-top:18px;}
.mt-lg{margin-top:26px;}
.price-note{font-size:.8rem;color:var(--text-soft);text-align:center;margin-top:16px;max-width:70ch;margin-left:auto;margin-right:auto;}

/* =============== Buttons =============== */
.btn{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:15px 30px;border-radius:var(--r-pill);
  font-weight:700;font-size:0.98rem;white-space:nowrap;
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
             background var(--dur) var(--ease), color var(--dur) var(--ease),
             border-color var(--dur) var(--ease);
}
.btn-primary{
  background:linear-gradient(135deg,var(--mango-500),var(--mango-700));
  color:var(--white);box-shadow:var(--shadow-glow);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(192,122,28,0.42);}
.btn-outline{
  background:transparent;color:var(--olive-800);
  border:1.5px solid var(--olive-700);
}
.btn-outline:hover{background:var(--olive-800);color:var(--white);transform:translateY(-2px);}
.btn-ghost-on-dark{background:rgba(255,255,255,0.08);color:var(--white);border:1.5px solid rgba(255,255,255,0.35);}
.btn-ghost-on-dark:hover{background:rgba(255,255,255,0.18);}
.btn-light{background:var(--white);color:var(--olive-800);box-shadow:0 10px 24px rgba(0,0,0,0.12);}
.btn-light:hover{transform:translateY(-2px);}
.btn-sm{padding:10px 20px;font-size:0.86rem;}
.btn-block{width:100%;}
.btn[disabled]{opacity:0.5;cursor:not-allowed;transform:none !important;}
.btn:active{transform:translateY(0);}

/* Inline text link with an arrow that nudges on hover. */
.link{font-weight:700;color:var(--brand-dark);display:inline-flex;align-items:center;gap:6px;}
.link .arrow{transition:transform var(--dur) var(--ease);}
.link:hover .arrow{transform:translateX(4px);}

/* =============== Navbar =============== */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  padding:18px 0;transition:background var(--dur) var(--ease), padding var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
/* The nav row is allowed to run wider than the 1240px content container:
   seven links plus the account pill and the CTA genuinely need more than
   the article measure, and without this the row overflows at every
   desktop width. */
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;max-width:1400px;}
.nav.scrolled{
  background:rgba(251,243,226,0.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 4px 20px rgba(58,42,17,0.08);padding:11px 0;
}
/* Brand and CTA hold their size; only the link row may give ground. */
.brand{display:flex;align-items:center;gap:11px;flex-shrink:0;}
/* The emblem ships on a transparent background so it sits directly on the
   cream nav with no visible plate, and the width is left to the intrinsic
   aspect ratio so it never squashes. */
.brand-emblem{height:58px;width:auto;object-fit:contain;transition:height var(--dur) var(--ease);}
.nav.scrolled .brand-emblem{height:46px;}
/* The wordmark is now artwork rather than type. Height drives it and the
   width follows the intrinsic aspect ratio, so it never distorts. */
.brand-word-img{height:34px;width:auto;flex-shrink:0;object-fit:contain;transition:height var(--dur) var(--ease);}
.nav.scrolled .brand-word-img{height:28px;}

.nav-links{display:flex;align-items:center;gap:2px;flex-shrink:1;min-width:0;}
.nav-links a{
  position:relative;
  padding:10px 14px;border-radius:var(--r-pill);font-weight:600;font-size:0.94rem;color:var(--olive-800);
  transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);
}
.nav-links a:hover{background:var(--mango-100);color:var(--mango-800);}
/* The current page is marked with aria-current, so the style follows the
   semantics rather than a duplicate .active class. */
.nav-links a[aria-current="page"]{background:var(--mango-100);color:var(--mango-800);}
.nav-links a[aria-current="page"]::after{
  content:"";position:absolute;left:50%;bottom:2px;transform:translateX(-50%);
  width:16px;height:2px;border-radius:2px;background:var(--mango-600);
}
.nav-cta{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.nav-account{
  display:flex;align-items:center;gap:8px;padding:9px 16px 9px 9px;border-radius:var(--r-pill);
  background:var(--white);box-shadow:var(--shadow-sm);font-weight:700;font-size:0.9rem;color:var(--olive-800);
  border:1px solid var(--cream-200);transition:transform var(--dur-fast) var(--ease);
  /* Without this the label wraps to two lines the moment the row is tight,
     which doubles the pill's height and breaks the nav's vertical rhythm. */
  white-space:nowrap;
}
.nav-account:hover{transform:translateY(-1px);}
/* flex-shrink:0 keeps the avatar a circle rather than letting it squash
   into an oval when space runs short. */
.nav-account .avatar{width:26px;height:26px;flex-shrink:0;border-radius:50%;background:var(--olive-700);color:var(--white);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;line-height:1;}
.nav-cta .btn{white-space:nowrap;}
.nav-toggle{display:none;width:44px;height:44px;border-radius:50%;align-items:center;justify-content:center;background:var(--white);box-shadow:var(--shadow-sm);}
.nav-toggle span{display:block;width:19px;height:2px;background:var(--olive-900);position:relative;}
.nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:0;width:19px;height:2px;background:var(--olive-900);transition:transform var(--dur) var(--ease), top var(--dur) var(--ease);}
.nav-toggle span::before{top:-6px;}
.nav-toggle span::after{top:6px;}
.nav-toggle[aria-expanded="true"] span{background:transparent;}
.nav-toggle[aria-expanded="true"] span::before{top:0;transform:rotate(45deg);}
.nav-toggle[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg);}

.nav-drawer-extra{display:none;}

/* With a single link on the right the row has room to spare, so it runs
   at full size all the way down to the drawer breakpoint. */
@media (max-width:1200px){
  .nav-links a{padding:10px 11px;font-size:0.9rem;}
}

@media (max-width:1140px){
  .nav-links{
    position:fixed;top:0;right:0;height:100vh;height:100dvh;width:min(340px,84vw);
    background:var(--cream-000);flex-direction:column;align-items:stretch;
    padding:110px 28px 40px;gap:4px;box-shadow:-16px 0 40px rgba(0,0,0,0.15);
    transform:translateX(100%);transition:transform .32s var(--ease);overflow-y:auto;
  }
  .nav-links.open{transform:translateX(0);}
  .nav-links a{padding:15px 18px;font-size:1.05rem;}
  .nav-links a[aria-current="page"]::after{display:none;}
  .nav-toggle{display:flex;flex-shrink:0;}
  .nav-cta .nav-account{display:none;}
  .nav-drawer-extra{
    display:flex;flex-direction:column;gap:10px;margin-top:18px;padding-top:18px;
    border-top:1px solid var(--cream-200);
  }
  .nav-drawer-extra a{padding:14px 18px;}
  .nav-drawer-extra .nav-account{display:flex;justify-content:center;}
}

/* Give the emblem back some room once the burger button joins the row. */
@media (max-width:600px){
  .brand-emblem{height:48px;}
  .nav.scrolled .brand-emblem{height:42px;}
  .brand-word-img{height:28px;}
  .nav.scrolled .brand-word-img{height:24px;}
}

@media (max-width:420px){
  .brand-word-img{height:24px;}
}
.nav-scrim{position:fixed;inset:0;background:rgba(44,55,20,0.4);z-index:900;opacity:0;pointer-events:none;transition:opacity var(--dur) var(--ease);}
.nav-scrim.open{opacity:1;pointer-events:auto;}

/* =============== Cards =============== */
.card{
  background:var(--surface);border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);transition:box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.card:hover{box-shadow:var(--shadow-md);transform:translateY(-4px);}

/* =============== Listing cards (hamper-card family) ===============
   Shared by gifting hampers, subscription plans, farm-visit passes and
   tree adoption tiers so every "pick one of these" listing on the
   site reads as one consistent component: image/icon banner on top,
   centered title + price/meta, left-aligned feature list, full-width CTA. */
.hamper-card,.tier-card{padding:0;overflow:hidden;position:relative;text-align:center;display:flex;flex-direction:column;}
.hamper-card .badge-ribbon,.tier-card .badge-ribbon{top:14px;z-index:2;}
.hamper-visual,.tier-visual{
  height:190px;display:flex;align-items:center;justify-content:center;position:relative;
  background:radial-gradient(circle at 50% 35%,var(--mango-200),var(--mango-100) 70%);
}
.hamper-visual::after,.tier-visual::after{
  content:"";position:absolute;left:14%;right:14%;bottom:14px;height:14px;border-radius:50%;
  background:var(--olive-900);opacity:0.08;filter:blur(6px);
}
.hamper-visual img{position:relative;max-height:150px;max-width:80%;width:auto;height:auto;object-fit:contain;mix-blend-mode:multiply;}
.hamper-visual svg{position:relative;}
.hamper-body,.tier-body{padding:26px 26px 30px;display:flex;flex-direction:column;flex:1;}
.hamper-body h3,.tier-body h3{margin-bottom:6px;}
.hamper-body ul,.tier-card ul{text-align:left;margin:16px 0 22px;font-size:0.9rem;flex:1;}
.hamper-body ul li,.tier-card ul li{display:flex;gap:9px;margin-bottom:9px;color:inherit;}
.hamper-body ul li svg,.tier-card ul li svg{color:var(--mango-600);flex-shrink:0;margin-top:3px;}
.hamper-card.featured .hamper-body,.tier-card.featured .tier-body{background:linear-gradient(180deg,var(--olive-800),var(--olive-900));color:var(--white);}
.hamper-card.featured .hamper-body p,.tier-card.featured .tier-body p{color:rgba(255,255,255,0.75);}
.hamper-card.featured .hamper-body h3,.tier-card.featured h3{color:var(--white);}
.hamper-card.featured .hamper-body ul li svg,.tier-card.featured ul li svg{color:var(--mango-400);}
.hamper-card.featured,.tier-card.featured{transform:scale(1.04);}
.hamper-card.featured:hover,.tier-card.featured:hover{transform:scale(1.04) translateY(-4px);}
@media (max-width:900px){
  .hamper-card.featured,.tier-card.featured{transform:none;}
  .hamper-card.featured:hover,.tier-card.featured:hover{transform:translateY(-4px);}
}

/* Price + meta line shared by tiers, plans and passes. */
.tier-price{font-family:var(--font-display);font-size:2rem;color:var(--olive-900);margin:10px 0 4px;}
.tier-price small{font-size:0.85rem;font-weight:400;opacity:0.65;}
.tier-card.featured .tier-price,.hamper-card.featured .tier-price{color:var(--white);}
.tier-meta{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 18px;margin:14px 0 6px;font-size:.82rem;font-weight:700;color:var(--olive-700);}
.tier-card.featured .tier-meta{color:var(--mango-300);}

/* Alternate visual washes for icon-only listing banners. */
.visual-mango{background:linear-gradient(135deg,var(--mango-200),var(--mango-400));}
.visual-olive{background:linear-gradient(135deg,var(--olive-300),var(--olive-600));}

/* =============== Grids =============== */
.grid{display:grid;gap:28px;}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
@media (max-width:980px){.grid-4{grid-template-columns:repeat(2,1fr);} .grid-3{grid-template-columns:repeat(2,1fr);}}
@media (max-width:680px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}}

/* =============== Badges / chips =============== */
.chip{
  display:inline-flex;align-items:center;gap:6px;padding:6px 13px;border-radius:var(--r-pill);
  background:var(--olive-100);color:var(--olive-800);font-size:0.78rem;font-weight:700;
}
.chip.gold{background:var(--mango-100);color:var(--mango-800);}

.badge-ribbon{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--olive-800);color:var(--white);font-size:0.74rem;font-weight:700;padding:6px 18px;border-radius:var(--r-pill);letter-spacing:0.04em;box-shadow:var(--shadow-sm);white-space:nowrap;}

/* =============== Steps (numbered "how it works" rows) =============== */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;}
.step{position:relative;padding:30px 24px 26px;}
.step .step-num{font-family:var(--font-display);font-size:2.6rem;color:var(--mango-300);font-weight:600;margin-bottom:10px;line-height:1;}
.step h4{font-family:var(--font-body);font-weight:800;font-size:1rem;color:var(--olive-900);margin-bottom:8px;}
.step p{font-size:0.92rem;color:var(--text-soft);}
@media (max-width:900px){.steps{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.steps{grid-template-columns:1fr;}}

/* =============== Vertical timeline =============== */
.timeline{position:relative;max-width:800px;margin:0 auto;}
.timeline::before{content:"";position:absolute;left:27px;top:8px;bottom:8px;width:2px;background:var(--cream-200);}
.t-item{display:flex;gap:24px;margin-bottom:32px;position:relative;}
.t-item:last-child{margin-bottom:0;}
.t-item .t-dot{
  width:56px;height:56px;border-radius:50%;background:var(--mango-100);color:var(--mango-700);
  display:flex;align-items:center;justify-content:center;font-family:var(--font-display);
  font-weight:700;font-size:1.2rem;flex-shrink:0;z-index:1;box-shadow:0 0 0 6px var(--bg);
}
.t-item .t-dot.leaf{background:var(--olive-100);color:var(--olive-700);font-family:var(--font-body);font-size:.78rem;text-align:center;line-height:1.1;}
.t-item h4{margin-bottom:6px;}
.t-item p{color:var(--text-soft);font-size:.94rem;}
/* On a cream band the dot halo has to match the band, not the page. */
.section-alt .t-item .t-dot{box-shadow:0 0 0 6px var(--cream-100);}
@media (max-width:560px){
  .timeline::before{left:21px;}
  .t-item{gap:16px;}
  .t-item .t-dot{width:44px;height:44px;font-size:1rem;}
  .t-item .t-dot.leaf{font-size:.7rem;}
}

/* =============== FAQ accordion ===============
   The open/close animation uses a 0fr→1fr grid row rather than a fixed
   max-height, so answers of any length expand fully without clipping. */
.faq-list{max-width:820px;margin:0 auto;}
.faq-item{background:var(--white);border-radius:var(--r-md);margin-bottom:14px;box-shadow:var(--shadow-sm);overflow:hidden;transition:box-shadow var(--dur) var(--ease);}
.faq-item.open{box-shadow:var(--shadow-md);}
.faq-q{width:100%;text-align:left;padding:22px 26px;display:flex;justify-content:space-between;align-items:center;gap:18px;font-weight:700;font-size:0.98rem;color:var(--olive-900);}
.faq-q svg{transition:transform var(--dur) var(--ease);flex-shrink:0;color:var(--mango-700);}
.faq-item.open .faq-q svg{transform:rotate(45deg);}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--dur) var(--ease);}
.faq-item.open .faq-a{grid-template-rows:1fr;}
.faq-a > div{overflow:hidden;}
.faq-a p{padding:0 26px 22px;color:var(--text-soft);font-size:0.94rem;}

/* =============== CTA band =============== */
.cta-band{
  background:linear-gradient(120deg,var(--mango-600),var(--mango-800));
  border-radius:var(--r-lg);padding:70px 60px;text-align:center;color:var(--white);
  position:relative;overflow:hidden;
}
/* Soft light bloom so the flat gradient reads as sunlit rather than printed. */
.cta-band::before{
  content:"";position:absolute;top:-40%;right:-10%;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,0.22),transparent 65%);pointer-events:none;
}
.cta-band > *{position:relative;}
.cta-band h2{color:var(--white);}
.cta-band .lead{color:rgba(255,255,255,0.88);margin:0 auto;}
.cta-band .btn-row{justify-content:center;margin-top:30px;}
@media (max-width:600px){.cta-band{padding:50px 26px;}}

/* Shared button cluster (hero, CTA bands, panels). */
.btn-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px;}

/* =============== Tables =============== */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r-lg);}
.compare-table{width:100%;border-collapse:separate;border-spacing:0;background:var(--white);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm);min-width:520px;}
.compare-table th,.compare-table td{padding:18px 22px;text-align:left;font-size:.92rem;border-bottom:1px solid var(--cream-100);}
.compare-table th{background:var(--cream-100);font-family:var(--font-display);font-weight:600;font-size:1.02rem;color:var(--olive-900);}
.compare-table td:first-child,.compare-table th:first-child{color:var(--text-soft);font-weight:600;width:40%;}
.compare-table tr:last-child td{border-bottom:none;}
.compare-table .yes{color:var(--olive-700);font-weight:700;}

/* =============== Misc shared =============== */
.pill-tabs{display:inline-flex;background:var(--white);padding:6px;border-radius:var(--r-pill);box-shadow:var(--shadow-sm);gap:4px;}
.pill-tabs button{padding:11px 22px;border-radius:var(--r-pill);font-weight:700;font-size:0.9rem;color:var(--text-soft);transition:all var(--dur-fast) var(--ease);}
.pill-tabs button.active{background:var(--olive-800);color:var(--white);}

.stat{text-align:center;}
.stat.left{text-align:left;}
.stat .num{font-family:var(--font-display);font-size:clamp(2rem,3.4vw,3rem);color:var(--olive-900);font-weight:600;}
.stat .label{font-size:0.86rem;color:var(--text-soft);font-weight:600;letter-spacing:0.02em;margin-top:4px;}

.icon-circle{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--mango-100);color:var(--mango-700);flex-shrink:0;}
.icon-circle.leaf{background:var(--olive-100);color:var(--olive-700);}

hr.soft{border:none;border-top:1px solid var(--cream-200);margin:32px 0;}

/* Checklist used inside prose blocks. */
.list-check{font-size:.94rem;}
.list-check li{display:flex;gap:10px;margin-bottom:12px;}
.list-check li:last-child{margin-bottom:0;}
.list-check li svg{color:var(--olive-700);flex-shrink:0;margin-top:3px;}

/* =============== Reveal on scroll =============== */
.reveal{opacity:0;transform:translateY(26px);transition:opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);}
.reveal.in{opacity:1;transform:none;}
/* Staggered entrances — replaces per-element inline transition-delay. */
.d1{transition-delay:.06s;}
.d2{transition-delay:.12s;}
.d3{transition-delay:.18s;}
.d4{transition-delay:.24s;}
.d5{transition-delay:.30s;}
.d6{transition-delay:.36s;}
.d7{transition-delay:.42s;}
.d8{transition-delay:.48s;}

/* =============== Back to top =============== */
.back-to-top{position:fixed;bottom:26px;right:26px;width:48px;height:48px;border-radius:50%;background:var(--olive-800);color:var(--white);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-md);opacity:0;pointer-events:none;transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease);z-index:500;}
.back-to-top.show{opacity:1;pointer-events:auto;}
.back-to-top:hover{transform:translateY(-3px);}

/* =============== Mobile action bar ===============
   Small screens lose the header CTA behind the hamburger, so the two
   highest-intent actions get pinned to the bottom of the viewport. */
.mobile-cta{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:800;
  gap:10px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,253,248,0.95);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 -6px 24px rgba(58,42,17,0.12);
  transform:translateY(110%);transition:transform var(--dur) var(--ease);
}
.mobile-cta.show{transform:translateY(0);}
.mobile-cta .btn{flex:1;padding:13px 16px;font-size:.9rem;}
@media (max-width:760px){
  .mobile-cta{display:flex;}
  .back-to-top{bottom:88px;right:16px;width:42px;height:42px;}
}

/* =============== Floating WhatsApp button ===============
   The one always-on route to a human. Sits in the bottom-right corner as
   the primary float; back-to-top stacks above it rather than fighting it
   for the same spot. WhatsApp's own green is used deliberately — the
   whole point is that it is recognised instantly. */
.wa-float{
  position:fixed;bottom:26px;right:26px;z-index:700;
  width:56px;height:56px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#25D366;color:#fff;
  box-shadow:0 6px 20px rgba(37,211,102,0.38), 0 2px 6px rgba(0,0,0,0.18);
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), bottom var(--dur) var(--ease);
}
.wa-float:hover{transform:translateY(-3px) scale(1.04);box-shadow:0 12px 28px rgba(37,211,102,0.46), 0 3px 8px rgba(0,0,0,0.2);}
.wa-float:active{transform:translateY(-1px) scale(1);}
.wa-float:focus-visible{outline:3px solid var(--olive-800);outline-offset:3px;}
.wa-float svg{display:block;}

/* Hover label for pointer devices; on touch the mark speaks for itself. */
.wa-tip{
  position:absolute;right:calc(100% + 12px);white-space:nowrap;
  background:var(--olive-900);color:var(--white);
  padding:7px 13px;border-radius:var(--r-pill);
  font-size:0.82rem;font-weight:600;
  opacity:0;transform:translateX(6px);pointer-events:none;
  transition:opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.wa-float:hover .wa-tip,
.wa-float:focus-visible .wa-tip{opacity:1;transform:translateX(0);}
@media (hover:none){.wa-tip{display:none;}}

/* Back-to-top moves up so the corner belongs to WhatsApp. Both share a
   vertical centre line: 56/2 + 26 = 54 from the right, so the 48px
   button sits at 30. */
.back-to-top{bottom:96px;right:30px;}

@media (max-width:760px){
  .wa-float{bottom:20px;right:16px;width:52px;height:52px;}
  .wa-float svg{width:26px;height:26px;}
  .back-to-top{bottom:82px;right:21px;}

  /* Only while the pinned action bar is showing. */
  body.cta-up .wa-float{bottom:calc(84px + env(safe-area-inset-bottom));}
  body.cta-up .back-to-top{bottom:calc(146px + env(safe-area-inset-bottom));}
}

@media (prefers-reduced-motion:reduce){
  .wa-float{transition:none;}
  .wa-float:hover{transform:none;}
}

/* =============== Lightbox =============== */
.lightbox{
  position:fixed;inset:0;z-index:1500;display:flex;align-items:center;justify-content:center;
  padding:24px;background:rgba(20,24,10,0.9);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;pointer-events:none;transition:opacity var(--dur) var(--ease);
}
.lightbox.open{opacity:1;pointer-events:auto;}
.lightbox figure{max-width:min(1000px,92vw);max-height:88vh;display:flex;flex-direction:column;gap:14px;}
.lightbox img{max-height:76vh;width:auto;border-radius:var(--r-md);box-shadow:var(--shadow-lg);object-fit:contain;}
.lightbox figcaption{color:var(--cream-100);font-size:.92rem;font-weight:600;text-align:center;}
.lightbox-close,.lightbox-nav{
  position:absolute;width:46px;height:46px;border-radius:50%;color:var(--white);
  background:rgba(255,255,255,0.14);display:flex;align-items:center;justify-content:center;
  transition:background var(--dur-fast) var(--ease);
}
.lightbox-close:hover,.lightbox-nav:hover{background:rgba(255,255,255,0.3);}
.lightbox-close{top:20px;right:20px;}
.lightbox-nav.prev{left:20px;top:50%;transform:translateY(-50%);}
.lightbox-nav.next{right:20px;top:50%;transform:translateY(-50%);}
@media (max-width:600px){
  .lightbox-nav.prev{left:10px;}
  .lightbox-nav.next{right:10px;}
}

/* =============== Page hero (accounts for the fixed nav) =============== */
.page-hero{padding:calc(var(--nav-h) + 86px) 0 90px;}
@media (max-width:768px){.page-hero{padding:calc(var(--nav-h-sm) + 68px) 0 60px;}}

/* Centered intro hero shared by every inner page. */
.hero-simple{background:var(--cream-100);position:relative;overflow:hidden;}
.hero-simple .container{text-align:center;max-width:800px;position:relative;z-index:1;}
.hero-simple .eyebrow{margin-bottom:18px;}
.hero-simple .lead{margin:16px auto 0;}
.hero-simple .btn-row{justify-content:center;}
/* Warm sun-wash behind the headline, drawn entirely in CSS. */
.hero-simple::before{
  content:"";position:absolute;top:-220px;left:50%;transform:translateX(-50%);
  width:900px;height:600px;border-radius:50%;
  background:radial-gradient(circle,rgba(244,191,98,0.30),transparent 62%);
  pointer-events:none;
}

/* =============== Forms =============== */
.field{margin-bottom:18px;}
.field label{display:block;font-size:0.84rem;font-weight:700;color:var(--olive-800);margin-bottom:7px;}
.field input,.field select,.field textarea{
  width:100%;padding:13px 16px;border-radius:var(--r-sm);border:1.5px solid var(--cream-200);
  background:var(--cream-000);transition:border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.field textarea{resize:vertical;min-height:96px;}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--mango-600);box-shadow:var(--ring);}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:none;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.field-hint{font-size:.78rem;color:var(--text-soft);margin-top:6px;}
@media (max-width:560px){.field-row{grid-template-columns:1fr;}}
.field[hidden]{display:none;}

/* API failures, surfaced on the form that caused them. The whole-form
   message and the per-field messages both come from the JSON error
   envelope, so the server decides the wording. */
.form-error{
  display:flex;align-items:flex-start;gap:10px;
  background:var(--clay-soft);color:var(--clay);
  border-left:4px solid var(--clay);
  padding:15px 18px;border-radius:0 var(--r-sm) var(--r-sm) 0;
  font-weight:600;font-size:.92rem;margin-top:16px;
}
.form-error[hidden]{display:none;}
.field-error{display:block;margin-top:6px;font-size:.84rem;font-weight:600;color:var(--clay);}
.field.has-error input,
.field.has-error textarea,
.field.has-error select{border-color:var(--clay);}

/* Confirmation shown after a preview form is "submitted". */
.form-success{
  display:none;align-items:flex-start;gap:12px;background:var(--leaf-soft);color:var(--olive-800);
  padding:16px 18px;border-radius:var(--r-sm);font-weight:600;font-size:.92rem;margin-top:14px;
}
.form-success.show{display:flex;}
.form-success svg{flex-shrink:0;margin-top:2px;}

/* Preview-mode notice used at the top of the account area. */
.demo-banner{
  background:var(--olive-900);color:var(--cream-100);text-align:center;
  padding:10px 16px;font-size:.82rem;font-weight:600;margin-top:var(--nav-h);
}
.demo-banner strong{color:var(--mango-300);}
@media (max-width:1080px){.demo-banner{margin-top:var(--nav-h-sm);}}

/* =============== Footer =============== */
.footer{background:var(--olive-900);color:var(--cream-100);padding:80px 0 0;}
.footer a{color:var(--cream-100);opacity:0.82;transition:opacity var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);}
.footer a:hover{opacity:1;color:var(--mango-300);}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:40px;padding-bottom:56px;border-bottom:1px solid rgba(255,255,255,0.1);}
.footer h4{color:var(--white);font-family:var(--font-body);font-size:0.85rem;letter-spacing:0.09em;text-transform:uppercase;margin-bottom:18px;}
.footer li{margin-bottom:11px;font-size:0.94rem;}
.footer-brand{display:flex;align-items:center;gap:10px;margin-bottom:16px;}
.footer-brand img{height:42px;}
.footer-brand span{font-family:var(--font-display);font-size:1.2rem;color:var(--white);}
.footer-note{opacity:.8;font-size:.94rem;max-width:34ch;}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding:26px 0;font-size:0.85rem;opacity:0.7;flex-wrap:wrap;gap:10px;}
.social-row{display:flex;gap:10px;margin-top:18px;}
.social-row a{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,0.08);display:flex;align-items:center;justify-content:center;opacity:1;transition:background var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease);}
.social-row a:hover{background:var(--mango-600);transform:translateY(-2px);}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr;}}
/* Keep the footer clear of the pinned mobile action bar. */
@media (max-width:760px){.footer-bottom{padding-bottom:80px;}}

/* Horizontal card rails on mobile */
.rail{display:flex;gap:20px;overflow-x:auto;padding-bottom:10px;scroll-snap-type:x mandatory;}
.rail > *{scroll-snap-align:start;}
.rail::-webkit-scrollbar{height:6px;}
.rail::-webkit-scrollbar-thumb{background:var(--cream-200);border-radius:10px;}

/* =============== Divider wave =============== */
.wave-top{position:absolute;top:-1px;left:0;width:100%;line-height:0;transform:rotate(180deg);}
.wave-bottom{position:absolute;bottom:-1px;left:0;width:100%;line-height:0;}

/* =========================================================
   Reduced motion — honour the OS setting. Entrances resolve
   instantly, the slideshow stops moving, and only
   colour/shadow transitions remain.
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .reveal{opacity:1;transform:none;}
}