/* Kirsaani · site.css · v14 · 31 Oct 2026
   Shared by index, privacy, terms, promotions, accessibility, unsubscribe, 404 and the Control Room. Colours live in :root.
   Text tokens are tuned for WCAG 2.2 AA on every panel colour:
   --dim is 6:1 or better, --faint 5:1 or better, control borders (--edge) 3:1 or better.
   Gradient text only uses the light half of the gold (never --gold-d) so it stays readable.
   v14: every size is in rem, so the text size buttons (A / A+ / A++: site.js puts ts-larger or ts-largest
   on <html>) and the visitor's own browser text size scale the whole page. Body copy is 18px (1.125rem) at
   the normal size, and no visible text is smaller than 14px (.875rem). The Control Room keeps its v13
   sizes (last block of this file).
   v14 QA fixes: labels (eyebrows, badges, months, "Question 1 of 6"…) are 16px in sentence case with normal letter
   spacing; the dim and faint text tokens are lighter (.86 / .78; the Control Room keeps .78 / .68); every footer link,
   the hero's call / email links and the section links are at least 48px tall; the email tick box is 32px. */

/* Fonts live on this site (/fonts, SIL OFL 1.1: see /fonts/OFL.txt). No request goes to Google. */
@font-face{font-family:'Bitter';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/bitter-400.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Bitter';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/bitter-700.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Karla';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/karla-400.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Karla';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/karla-700.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Noto Sans Gurmukhi';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/noto-sans-gurmukhi-700.woff2) format('woff2');unicode-range:U+0951-0952,U+0964-0965,U+0A01-0A76,U+200C-200D,U+20B9,U+25CC,U+262C,U+A830-A839}

:root{
  color-scheme:dark;
  --void:#08120D; --field:#0E2016; --field2:#14291C; --raise:#1B3624; --soil:#060D09; --best:#22422C;
  --cream:#F7F2E6;
  --dim:rgba(247,242,230,.86);
  --faint:rgba(247,242,230,.78);
  --gold-l:#F2CE6E; --gold:#D9A227; --gold-d:#9C7210;
  --goldf:rgba(217,162,39,.32);
  --line:rgba(247,242,230,.12);
  --edge:rgba(247,242,230,.46);
  --ok:#7FD4A0; --bad:#FFB4A8;
  --btn:linear-gradient(150deg,#F2CE6E 0%,#D9A227 55%,#C4870C 100%);
  --gtext:linear-gradient(135deg,#F2CE6E 0%,#E2B442 45%,#D9A227 100%);
  --nav-h:calc(3rem + 1px); --bar-h:0px;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{font-size:100%;scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%;
  scroll-padding-top:calc(var(--nav-h) + .875rem);scroll-padding-bottom:calc(var(--bar-h) + .875rem)}
/* v14 text size buttons: A = 100% (no class), A+ = 118%, A++ = 135%. Everything below is in rem/em, so it all scales. */
html.ts-larger{font-size:118%}
html.ts-largest{font-size:135%}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
}
body{font-family:'Karla',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:1.125rem;line-height:1.6;
  color:var(--cream);background-color:var(--field);-webkit-font-smoothing:antialiased;min-height:100vh;
  background-image:radial-gradient(ellipse 70% 30% at 50% -4%,rgba(217,162,39,.13),transparent 62%),
                   linear-gradient(180deg,var(--field) 0%,var(--void) 100%)}
h1,h2,h3,h4{font-family:'Bitter',Georgia,'Times New Roman',serif;line-height:1.18;font-weight:700}
a{color:inherit}
img{max-width:100%;height:auto}
:focus-visible{outline:3px solid var(--gold-l);outline-offset:3px;border-radius:2px}
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:.75rem;top:-12rem;z-index:100;background:var(--cream);color:var(--void);
  padding:.625rem 1rem;font-weight:700;text-decoration:none;border-radius:2px}
.skip:focus{top:.75rem}
.wrap{max-width:60rem;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right))}

/* ── seasonal banner ── */
.season{background:var(--btn);color:var(--void);text-align:center;padding:.625rem 1rem;font-weight:700;font-size:1rem;line-height:1.45}
.season a{color:inherit;text-underline-offset:3px;white-space:nowrap}

/* ── tabs: sentence case, 16px, 48px tall (v14) ── */
nav.tabs{position:sticky;top:0;z-index:50;background:rgba(14,32,22,.97);border-bottom:1px solid var(--goldf)}
@supports ((-webkit-backdrop-filter:blur(8px)) or (backdrop-filter:blur(8px))){
  nav.tabs{background:rgba(14,32,22,.9);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}}
.navin{max-width:60rem;margin:0 auto;display:flex;gap:2px;overflow-x:auto;padding:0 .5rem;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  background:linear-gradient(90deg,#0E2016 30%,rgba(14,32,22,0)) left center/34px 100% no-repeat local,
             linear-gradient(270deg,#0E2016 30%,rgba(14,32,22,0)) right center/34px 100% no-repeat local,
             radial-gradient(farthest-side at 0 50%,rgba(217,162,39,.3),transparent) left center/10px 100% no-repeat scroll,
             radial-gradient(farthest-side at 100% 50%,rgba(217,162,39,.3),transparent) right center/10px 100% no-repeat scroll}
.navin::-webkit-scrollbar{display:none}
.tab{flex:0 0 auto;display:flex;align-items:center;min-height:3rem;color:var(--dim);font-size:1rem;font-weight:700;letter-spacing:.01em;
  padding:0 .875rem;text-decoration:none;white-space:nowrap;
  border-bottom:3px solid transparent;transition:color .15s,border-color .15s}
.tab:hover{color:var(--cream)}
.tab.on{color:var(--gold-l);border-bottom-color:var(--gold)}
.tab:focus-visible{outline-offset:-4px}

/* ── hero ── */
.hero{position:relative;padding:3.5rem 0 3.125rem}
.gur{display:inline-block;font-family:'Noto Sans Gurmukhi',sans-serif;font-weight:700;font-size:clamp(2.5rem,1.5rem + 5vw,4rem);
  line-height:1.3;padding:0 .25rem 2px 0;background:var(--gtext);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 24px rgba(217,162,39,.2))}
.nm{font-family:'Bitter',Georgia,serif;font-weight:400;font-size:.875rem;letter-spacing:.58em;
  text-transform:uppercase;margin-top:.375rem;color:var(--faint)}
h1{font-size:clamp(2rem,1.25rem + 4vw,3.25rem);margin-top:1.375rem;max-width:15ch}
h1 em{font-style:normal;background:var(--gtext);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.sub{margin-top:1rem;font-size:1.25rem;color:var(--dim);max-width:46ch}
.pre{margin-top:1.125rem;font-size:1.125rem;max-width:54ch;padding:.75rem 1rem;border-left:2px solid var(--gold);background:rgba(6,13,9,.55)}
.actions{display:flex;flex-wrap:wrap;gap:.625rem 1rem;margin-top:1.625rem;align-items:center}
.cta{display:inline-flex;align-items:center;justify-content:center;min-height:3rem;padding:.8125rem 1.625rem;border:0;border-radius:2px;
  background:var(--btn);color:var(--void);font:700 1.125rem/1.2 'Karla',system-ui,sans-serif;text-decoration:none;cursor:pointer;
  box-shadow:0 3px 18px rgba(217,162,39,.22);transition:transform .16s,box-shadow .16s}
.cta:hover{transform:translateY(-2px);box-shadow:0 6px 24px rgba(217,162,39,.32)}
.btn2{display:inline-flex;align-items:center;min-height:3rem;padding:.625rem .375rem;color:var(--gold-l);font-weight:700;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.btn2:hover{color:var(--cream)}
.reach{margin-top:.625rem;font-size:1.125rem;color:var(--dim);line-height:1.6}
.reach a{display:inline-flex;align-items:center;min-height:3rem;color:var(--gold-l);font-weight:700;text-underline-offset:4px;white-space:nowrap}
.reach a:hover{color:var(--cream)}
.trust{list-style:none;margin-top:1.375rem;font-size:1rem;color:var(--dim);display:flex;flex-wrap:wrap;gap:.5rem 1.5rem}
.trust li::before{content:"✓";content:"✓" / "";color:var(--gold);margin-right:.5rem;font-weight:700}

/* ── v14 QA: every section as a plain list under the hero on narrow screens (phones and tablets), where the tab strip
   scrolls sideways; wide screens show every tab at once ── */
.jump{margin-top:1.75rem}
.jump-h{font-size:1rem;font-weight:700;color:var(--dim);margin-bottom:.5rem}
.jump ul{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem}
.jump a{display:inline-flex;align-items:center;min-height:3rem;padding:.375rem .875rem;border:1px solid var(--edge);border-radius:2px;
  background:var(--field2);color:var(--cream);font-weight:700;font-size:1rem;line-height:1.25;text-decoration:none}
.jump a:hover{border-color:var(--gold)}
@media (min-width:1024px){.jump{display:none}}

/* ── v14: text size buttons, top right of each page's header (hidden until site.js shows them) ──
   They sit in the header's own top padding, so showing them moves nothing else. */
.tsize{position:absolute;top:.75rem;right:0;z-index:2;display:flex;align-items:center;gap:.5rem}
.hero .tsize + .hero-copy{margin-top:1rem}
.page-head .tsize{top:.875rem}
.page-head .tsize + .lockup{margin-top:2rem}
.tsize-label{font-size:1rem;color:var(--dim);white-space:nowrap;margin-right:.125rem}
.tsize button{display:inline-flex;align-items:center;justify-content:center;min-width:3rem;min-height:3rem;padding:0 .5rem;
  font-family:'Bitter',Georgia,serif;font-weight:700;line-height:1;color:var(--cream);background:var(--field2);
  border:1px solid var(--edge);border-radius:2px;cursor:pointer;transition:border-color .15s,background-color .15s}
.tsize button[data-size="normal"]{font-size:1rem}
.tsize button[data-size="larger"]{font-size:1.1875rem}
.tsize button[data-size="largest"]{font-size:1.375rem}
.tsize button:hover{border-color:var(--gold)}
.tsize button[aria-pressed="true"]{background:var(--btn);color:var(--void);border-color:var(--gold)}
@media (max-width:379px){   /* very narrow phones at A+ / A++: the words "Text size" stay for screen readers only */
  html.ts-larger .tsize-label,html.ts-largest .tsize-label{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}

/* ── v14 · the designer's art (design/SPEC.md §6–7), all decorative: line icons in --gold-l, the hero illustration ── */
.hero{display:grid;gap:0 3.5rem}
.hero-art{display:block;width:100%;max-width:26.25rem;height:auto;margin:2.25rem auto 0}
@media (min-width:960px){
  .hero{grid-template-columns:minmax(0,1fr) 23.75rem;align-items:center}
  .hero-art{max-width:none;margin:0}
}
.ico{display:inline-block;flex:none;width:1.5rem;height:1.5rem;color:var(--gold-l)}
.card-head{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .875rem;margin-bottom:.75rem}
.card .card-head h3{margin:0;flex:1 1 8rem;min-width:0;overflow-wrap:break-word}   /* on a small phone at A++ the title goes under the seal instead of out of the card */
.seal{flex:0 0 3.25rem;height:3.25rem;display:grid;place-items:center;border:1px solid var(--goldf);border-radius:50%;background:var(--soil);color:var(--gold-l)}
.seal .ico{width:1.75rem;height:1.75rem}
.photo{margin-top:1.75rem;max-width:45rem}
.photo img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:2px}

/* ── v14 · the owner's mark (design/logo/owner/kirsaani-mark.svg, inline so it takes the site's gold): beside the wordmark in
   every header, larger over the tagline in every footer. Decorative (aria-hidden): the words next to it carry the name. ── */
.mark{display:block;flex:none;width:auto;height:2.75rem;aspect-ratio:1176/1281;color:var(--gold)}
.lockup{display:flex;align-items:center;gap:.875rem}
.hero .mark{height:clamp(2.75rem,1.5rem + 5vw,4rem)}
.lockup .gur,.lockup .nm{display:block}
.lockup .nm{margin-top:.125rem}
a.home{display:inline-flex;min-height:3.5rem;text-decoration:none;color:inherit;border-radius:2px}
.foot-mark{display:flex;flex-direction:column;align-items:flex-start;gap:.5rem;margin-bottom:1.25rem}
.mark-lg{height:6rem}
.tagline{font-family:'Bitter',Georgia,serif;font-weight:700;font-size:1.1875rem;line-height:1.4;color:var(--gold-l)}
@media (forced-colors:active){.mark{color:CanvasText}}

/* ── panes ── */
.pane{display:none;padding:3.5rem 0 3.75rem;border-top:1px solid var(--line)}
.pane.on{display:block}
.eyebrow{font-size:1rem;color:var(--gold);font-weight:700;margin-bottom:.75rem}
h2{font-size:clamp(1.625rem,1rem + 2.4vw,2.25rem);max-width:24ch}
h2:focus{outline:none}
h2:focus-visible{outline:3px solid var(--gold-l);outline-offset:4px}
h3.sec{font-size:1.5rem;margin-top:2.625rem}
.lede{margin-top:.875rem;font-size:1.1875rem;color:var(--dim);max-width:58ch}
.lede + .lede{margin-top:.75rem}
.note{margin-top:1.375rem;padding:.9375rem 1.125rem;background:var(--soil);border-left:2px solid var(--gold);font-size:1.125rem;color:var(--dim);max-width:70ch}
.note b,.note strong{color:var(--cream)}
.note p + p{margin-top:.5rem}
/* v14: the dashed edge is a border, not an outline, so it stays inside the placeholder's own box (an outline 2px outside
   reached under the text just before it once the type got bigger) */
.fill{color:var(--gold-l);background:rgba(242,206,110,.12);border:1px dashed var(--gold);padding:0 .25rem;border-radius:2px;font-weight:700}

/* ── service cards ── */
.cards{display:grid;gap:.875rem;margin-top:1.375rem}
@media (min-width:760px){.cards{grid-template-columns:repeat(auto-fit,minmax(22rem,1fr))}}   /* two columns; one at A++ when the screen is too narrow for two */
.card{background:linear-gradient(160deg,var(--raise) 0%,var(--field2) 58%,var(--field) 100%);border:1px solid var(--line);
  border-radius:2px;padding:1.375rem;position:relative;display:flex;flex-direction:column;
  box-shadow:0 1px 0 rgba(247,242,230,.045) inset,0 12px 30px rgba(6,13,9,.34)}
.card h3{font-size:1.375rem;margin-bottom:.375rem}
.card p{font-size:1.125rem;color:var(--dim)}
.req{margin-top:.75rem;padding-top:.6875rem;border-top:1px solid var(--line);font-size:1rem;color:var(--faint)}
.req b{color:var(--dim)}
.inplan{margin-top:.625rem;font-size:1rem;letter-spacing:.02em;color:var(--gold-l);font-weight:700}
/* v14: "Ask about this" (a link to the form; site.js also picks the matching option). Bottom of the card, full width. */
.card .act{margin-top:auto;padding-top:1.125rem}
.ask{display:flex;align-items:center;justify-content:center;width:100%;min-height:3rem;padding:.5rem 1rem;text-align:center;
  border:1px solid var(--gold);border-radius:2px;background:rgba(217,162,39,.08);color:var(--gold-l);font-weight:700;font-size:1.0625rem;
  line-height:1.25;text-decoration:none;transition:background-color .15s,color .15s}
.ask:hover{background:rgba(217,162,39,.18);color:var(--cream)}
.later{margin-top:1.375rem;border:1px dashed var(--goldf);padding:1.125rem 1.25rem;border-radius:2px;background:rgba(6,13,9,.45)}
.later h3{font-size:1.25rem}
.later ul{margin:.625rem 0 0 1.125rem;color:var(--dim);font-size:1.125rem}
.later li{margin-top:.4375rem}
.later li b{color:var(--cream)}

/* ── on / off lists (what goes on your lawn) ── */
.onoff{display:grid;gap:.875rem;margin-top:1.25rem}
@media (min-width:700px){.onoff{grid-template-columns:repeat(auto-fit,minmax(20rem,1fr))}}
.onoff > div{padding:1.125rem 1.25rem;border:1px solid var(--line);border-radius:2px;background:rgba(20,41,28,.6)}
.onoff h4{font-size:1.1875rem;margin-bottom:.375rem}
.onoff p{font-size:1.125rem;color:var(--dim)}

/* ── steps ── */
.steps{margin-top:1rem;list-style:none;counter-reset:s}
.steps li{display:flex;gap:.9375rem;padding:.8125rem 0;border-bottom:1px solid var(--line);font-size:1.125rem;color:var(--dim);counter-increment:s}
.steps li:last-child{border-bottom:0}
.steps li::before{content:counter(s);flex:0 0 2.25rem;height:2.25rem;display:grid;place-items:center;font-family:'Bitter',Georgia,serif;
  font-size:1rem;color:var(--gold-l);border:1px solid var(--goldf);border-radius:50%}
.steps b{color:var(--cream)}

/* ── plans ── */
.plans{display:grid;gap:1rem;margin-top:1.5rem}
@media (min-width:820px){.plans{grid-template-columns:repeat(auto-fit,minmax(15.5rem,1fr))}}   /* three columns; fewer at A++ on narrower screens */
.pk{background:linear-gradient(165deg,var(--raise) 0%,var(--field2) 60%,var(--field) 100%);border:1px solid var(--line);
  border-radius:2px;padding:1.625rem 1.5rem;position:relative;display:flex;flex-direction:column;
  box-shadow:0 1px 0 rgba(247,242,230,.04) inset,0 14px 34px rgba(6,13,9,.34)}
.pk.best{border-color:var(--goldf);background:linear-gradient(165deg,var(--best) 0%,var(--raise) 55%,var(--field2) 100%);
  box-shadow:0 0 0 1px rgba(217,162,39,.18),0 20px 52px rgba(6,13,9,.5),0 0 60px rgba(217,162,39,.07)}
.pk.best::before,.pk.best::after{content:'';position:absolute;width:13px;height:13px;border:2px solid var(--gold)}
.pk.best::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.pk.best::after{bottom:-1px;right:-1px;border-left:0;border-top:0}
.tagb{align-self:flex-start;background:var(--btn);color:var(--void);font-size:1rem;font-weight:700;padding:.25rem .75rem;margin-bottom:.75rem}
.pk h3{font-size:1.625rem}
.pk .for{color:var(--dim);font-size:1.125rem;margin-top:.25rem}
.price{margin:.875rem 0 .25rem;font-family:'Bitter',Georgia,serif;font-size:2.125rem;line-height:1.1;background:var(--gtext);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.price small{font-family:'Karla',system-ui,sans-serif;font-size:1rem}
.price.tbd{display:inline-block;align-self:flex-start;font:700 1rem/1.3 'Karla',system-ui,sans-serif;background:none;
  color:var(--gold-l);-webkit-text-fill-color:currentColor;border:1px dashed var(--goldf);padding:.4375rem .625rem;border-radius:2px}
.pk ul{list-style:none;margin:1rem 0 0;font-size:1.125rem;color:var(--dim);flex:1}
.pk li{display:grid;grid-template-columns:1.35em 1fr;gap:.65em;align-items:start;margin-bottom:.625rem}
.pk li > .ico{width:1.35em;height:1.35em;margin-top:.1em}
.pk li > .dot{height:1.6em;display:grid;place-items:center}
.pk li > .dot::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold)}
.pk li b{color:var(--cream)}
/* v14: "Choose Cut / Nurture / Full Season" (a link to the form; site.js also picks the plan). Full card width. */
.pk .act{margin-top:1.25rem}
.choose{display:flex;width:100%;text-align:center}
.choose.alt{background:transparent;color:var(--cream);border:2px solid var(--gold);box-shadow:none}
.choose.alt:hover{background:rgba(217,162,39,.14);box-shadow:none}
.addons{margin-top:1rem;display:flex;flex-wrap:wrap;gap:.5rem;list-style:none}
.addons li{font-size:1rem;padding:.4375rem .8125rem;border:1px solid var(--edge);border-radius:99px;color:var(--cream)}

/* ── soil science ── */
.sci{list-style:none;margin-top:.875rem}
.sci li{display:flex;gap:.9375rem;padding:.875rem 0;border-bottom:1px solid var(--line);font-size:1.125rem;color:var(--dim)}
.sci li:last-child{border-bottom:0}
.sci li > span{flex:0 0 2.25rem;height:2.25rem;display:grid;place-items:center;font-family:'Bitter',Georgia,serif;font-size:1rem;
  color:var(--gold-l);border:1px solid var(--goldf);border-radius:50%}
.sci b{color:var(--cream)}
.leaves{margin-top:.75rem;list-style:none}
.leaves li{padding:.375rem 0 .375rem 1.125rem;position:relative;color:var(--dim);font-size:1.125rem}
.leaves li::before{content:"";position:absolute;left:0;top:.94em;width:.4375rem;height:.4375rem;background:var(--gold);border-radius:50%}
.leaves b{color:var(--cream)}

/* ── seasons ── */
.sea{border-left:2px solid var(--gold);padding:.125rem 0 .125rem 1.125rem;margin-top:1.625rem}
.sea .when{font-size:1rem;color:var(--gold-l);font-weight:700;margin-bottom:.375rem}
.sea h3{font-size:1.375rem;margin-bottom:.3125rem}
.sea p{font-size:1.125rem;color:var(--dim);max-width:60ch}

/* ── quiz ── */
.quiz{background:var(--soil);border:1px solid var(--goldf);border-radius:2px;padding:1.625rem 1.375rem;margin-top:1.375rem;position:relative;max-width:40rem}
.quiz::before,.quiz::after{content:'';position:absolute;width:13px;height:13px;border:2px solid var(--gold)}
.quiz::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.quiz::after{bottom:-1px;right:-1px;border-left:0;border-top:0}
.meter{height:6px;background:rgba(247,242,230,.12);overflow:hidden;margin-bottom:1.25rem}
.meter i{display:block;height:100%;width:0;background:var(--gold);transition:width .35s;box-shadow:0 0 12px rgba(217,162,39,.6)}
.qstep{font-size:1rem;color:var(--faint);margin-bottom:.5rem;font-weight:700}
.qtext{font-size:1.375rem;margin-bottom:1rem;line-height:1.32}
.qtext:focus{outline:none}
.qopts{display:flex;flex-direction:column;gap:.5625rem}
.qopts button{font:inherit;font-size:1.125rem;text-align:left;background:transparent;color:var(--cream);border:1px solid var(--edge);
  border-radius:2px;padding:.8125rem 1rem;min-height:3rem;cursor:pointer;transition:border-color .15s,background-color .15s}
.qopts button:hover{border-color:var(--gold);background:rgba(217,162,39,.1)}
.score{font-family:'Bitter',Georgia,serif;font-size:3.5rem;line-height:1;background:var(--gtext);-webkit-background-clip:text;
  background-clip:text;color:transparent;-webkit-text-fill-color:transparent;display:inline-block}
.score small{font-size:1.125rem}
.verdict{font-size:1.5rem;margin:.75rem 0 .5rem}
.verdict:focus{outline:none}
.advice{color:var(--dim);font-size:1.125rem;max-width:50ch}
.restart{display:inline-block;margin-top:.875rem;background:none;border:0;color:var(--dim);font:inherit;font-size:1.0625rem;
  text-decoration:underline;text-underline-offset:4px;cursor:pointer;padding:.5rem 0;min-height:3rem}
.fine{margin-top:.75rem;font-size:1rem;color:var(--faint);max-width:56ch}
/* v14 soil check: Back, the answer chosen before (after Back), the named soil level. Nothing moves by itself. */
.qback{display:inline-flex;align-items:center;gap:.5rem;margin-top:.875rem;min-height:3rem;padding:.5rem 1.125rem;background:none;color:var(--cream);
  border:1px solid var(--edge);border-radius:2px;font:inherit;font-size:1.0625rem;font-weight:700;cursor:pointer}
.qback::before{content:"←";content:"←" / "";color:var(--gold-l)}
.qback:hover{border-color:var(--gold)}
.qopts button[aria-pressed="true"]{border-color:var(--gold);background:rgba(217,162,39,.14)}
.qopts button[aria-pressed="true"]::before{content:"✓ ";content:"✓ " / "";color:var(--gold-l);font-weight:700}
.level{display:flex;align-items:center;gap:.625rem;margin-top:.625rem;font-weight:700;font-size:1.125rem;color:var(--gold-l)}
.lvl-ico{flex:none;width:3.125rem;height:1.5rem}
.lvl-ico .on{fill:var(--gold)}
.lvl-ico .off{fill:none;stroke:var(--edge);stroke-width:1.5}
#lawn-advice{margin-top:.625rem}
[hidden]{display:none!important}

/* ── shop ── */
.brandbar{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1.375rem}
.brandbar button{font:700 1rem/1.2 'Karla',system-ui,sans-serif;letter-spacing:.02em;padding:.6875rem 1rem;min-height:3rem;
  background:var(--field2);color:var(--dim);border:1px solid var(--edge);border-radius:2px;cursor:pointer;transition:color .15s,border-color .15s}
.brandbar button:hover{color:var(--cream);border-color:var(--gold)}
.brandbar button[aria-pressed="true"]{background:var(--btn);color:var(--void);border-color:var(--gold)}
.brandline{margin-top:1.125rem;padding:.875rem 1.125rem;background:var(--soil);border-left:2px solid var(--gold);font-size:1.125rem;color:var(--dim)}
.brandline b{color:var(--gold-l)}
.group h3{font-size:1.375rem;margin-top:2rem}
.group h3 span{display:block;font-family:'Karla',system-ui,sans-serif;font-size:1rem;color:var(--faint);margin-top:.3125rem;font-weight:700}
.grid{display:grid;gap:.75rem;margin-top:1rem}
@media (min-width:640px){.grid{grid-template-columns:repeat(auto-fit,minmax(18.25rem,1fr))}}
.item{background:linear-gradient(160deg,var(--raise) 0%,var(--field2) 62%,var(--field) 100%);border:1px solid var(--line);
  border-radius:2px;padding:1.1875rem;display:flex;flex-direction:column;box-shadow:0 1px 0 rgba(247,242,230,.04) inset,0 10px 26px rgba(6,13,9,.3)}
.item h4{font-size:1.25rem;line-height:1.25}
.item p{font-size:1.125rem;color:var(--dim);margin-top:.4375rem;flex:1}
.item p + p:not(.spec):not(.avail){flex:0 0 auto}   /* v14: a second paragraph (the herb card) sits right under the first */
.item p.badge{font-size:1rem;flex:0 0 auto}   /* v14 QA: a badge is a label (16px), not body copy (.item p is 18px), and never stretches */
.item p a,.note a{color:var(--gold-l);font-weight:700;text-underline-offset:3px}
.item .spec{margin-top:.625rem;padding-top:.5625rem;border-top:1px solid var(--line);font-size:1rem;color:var(--faint)}
.badge{align-self:flex-start;max-width:100%;font-size:1rem;font-weight:700;line-height:1.35;padding:.1875rem .6875rem;
  border-radius:.75rem;margin-bottom:.625rem}
.b-soon{background:rgba(217,162,39,.16);color:var(--gold-l)}
.b-free{background:rgba(127,212,160,.14);color:var(--ok)}
.b-later{background:rgba(247,242,230,.1);color:var(--dim)}

/* ── about ── */
.loop{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-top:1.5rem;list-style:none}
.loop li{font-size:1rem;padding:.5625rem .875rem;border:1px solid var(--goldf);color:var(--gold-l)}
.loop li + li::before{content:"→";content:"→" / "";color:var(--gold);margin-right:.625rem;margin-left:-.25rem}
.values{list-style:none;margin-top:.875rem}
.values li{padding:.6875rem 0;border-bottom:1px solid var(--line);color:var(--dim);font-size:1.125rem}
.values li:last-child{border-bottom:0}
.values b{color:var(--cream)}
.areas{display:flex;flex-wrap:wrap;gap:.4375rem;margin-top:1rem;list-style:none}
.areas li{font-size:1rem;padding:.375rem .8125rem;background:var(--field2);border:1px solid var(--line);border-radius:99px;color:var(--dim)}
.bmap{margin-top:1rem}
.bm{padding:.9375rem 0;border-bottom:1px solid var(--line);display:flex;gap:.375rem 1.125rem;flex-wrap:wrap;align-items:baseline}
.bm:last-child{border-bottom:0}
.bm b{font-family:'Bitter',Georgia,serif;font-size:1.25rem;color:var(--gold-l);min-width:10.625rem}
.bm span{font-size:1.125rem;color:var(--dim);flex:1 1 13.75rem}
.faq{margin-top:.75rem}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:.9375rem 2.125rem .9375rem 0;font-family:'Bitter',Georgia,serif;font-size:1.25rem;font-weight:700;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:.375rem;top:.75rem;font-family:'Karla',sans-serif;font-size:1.375rem;color:var(--gold-l)}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 0 1rem;font-size:1.125rem;color:var(--dim);max-width:62ch}
.land{margin-top:2.125rem;font-size:1rem;color:var(--faint);max-width:70ch}

/* ── form ── */
.form{margin-top:1.5rem;max-width:38.75rem}
.field{margin-top:1.125rem}
.field > label{display:block;font-size:1.125rem;font-weight:700;color:var(--cream);margin-bottom:.375rem}
.opt{font-weight:400;color:var(--faint)}
.hint{display:block;font-size:1rem;color:var(--faint);margin:-.125rem 0 .4375rem}
input[type=text],input[type=tel],input[type=email],select,textarea{width:100%;font:inherit;font-size:1.125rem;color:var(--cream);
  background:var(--soil);border:1px solid var(--edge);border-radius:2px;padding:.75rem .875rem;min-height:3rem}
textarea{min-height:6.875rem;resize:vertical}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--gold-l);outline-offset:1px;border-color:var(--gold)}
[aria-invalid="true"]{border-color:var(--bad)!important}
.err{color:var(--bad);font-size:1rem;font-weight:700;margin-top:.375rem}
.check{display:flex;gap:.75rem;align-items:flex-start;margin-top:1.375rem;padding:.9375rem 1rem;border:1px solid var(--edge);border-radius:2px;background:rgba(6,13,9,.5)}
.check input{width:2rem;height:2rem;flex:0 0 2rem;margin:0;accent-color:var(--gold)}
.check label{font-size:1.125rem;color:var(--cream);cursor:pointer}
.check .who{display:block;color:var(--faint);font-size:1rem;margin-top:.375rem}
.hp{display:none!important}
button.send{margin-top:1.375rem;width:100%}
.form.waiting > *{display:none!important}          /* v14 QA: until site.js knows whether the form can send (3 s at most) */
.form.offline > :not(.notice){display:none!important}   /* it can't: only the "not connected" notice, with the phone number and email */
.privacy-line{margin-top:.875rem;font-size:1rem;color:var(--faint);line-height:1.6}
.privacy-line a{color:var(--gold-l)}
.notice,.status{margin-top:1rem;padding:.9375rem 1.125rem;border-left:3px solid var(--gold);background:var(--soil);color:var(--cream);font-size:1.125rem;line-height:1.6}
.status:empty{padding:0;margin:0;border:0}
.status.bad{border-left-color:var(--bad)}
.status.good{border-left-color:var(--ok)}
.notice a,.status a{color:var(--gold-l);font-weight:700}
.status:focus{outline:2px solid var(--goldf);outline-offset:3px}
.orcall{margin-top:1.875rem;padding-top:1.25rem;border-top:1px solid var(--line);max-width:38.75rem}
.orcall a{display:block;text-decoration:none;padding:.8125rem 0;border-bottom:1px solid var(--line);font-family:'Bitter',Georgia,serif;
  font-size:clamp(1.1875rem,.75rem + 1.6vw,1.4375rem);transition:color .15s,padding .15s}
.orcall a:hover{color:var(--gold-l);padding-left:.5rem}
.orcall small{display:block;font-family:'Karla',system-ui,sans-serif;font-size:1rem;color:var(--faint);margin-bottom:.1875rem;font-weight:700}

/* ── footer ── */
footer{padding:2.75rem 0 2.25rem;font-size:1rem;color:var(--faint);line-height:1.9;border-top:1px solid var(--line)}
footer a{color:var(--dim);text-underline-offset:3px}
footer a{display:inline-flex;align-items:center;min-height:3rem;vertical-align:middle}
.mool{font-family:'Noto Sans Gurmukhi',sans-serif;font-weight:700;color:var(--gold-l);font-size:1.1875rem;line-height:1.7}

/* ── mobile call bar: "Join the list" | "Call 587 287 6452", 60px tall at the normal size (v14: at least 56px) ── */
.callbar{display:none}
@media (max-width:759px){
  :root{--bar-h:3.75rem}
  body{padding-bottom:calc(var(--bar-h) + env(safe-area-inset-bottom))}
  .callbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--field2);
    border-top:1px solid rgba(0,0,0,.35);padding-bottom:env(safe-area-inset-bottom)}
  .callbar a{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;min-height:var(--bar-h);padding:.25rem .5rem;
    font-weight:700;font-size:1.125rem;line-height:1.2;text-decoration:none}
  .callbar .c1{background:var(--btn);color:var(--void)}
  .callbar .c2{color:var(--cream);border-left:1px solid rgba(0,0,0,.35)}
  .callbar a:focus-visible{outline:3px solid var(--cream);outline-offset:-6px}
  .callbar .c1:focus-visible{outline-color:var(--void)}
}

/* ── legal pages ── */
.page-head{position:relative;padding:2.75rem 0 1.625rem}
.page-head .gur{font-size:2.125rem}
.page-head h1{font-size:clamp(1.75rem,1rem + 2.6vw,2.5rem);margin-top:1rem}
.legal{border-top:1px solid var(--line);padding:1.875rem 0 2.5rem;max-width:66ch}
.legal h2{font-size:1.375rem;margin:1.875rem 0 .5rem;max-width:none}
.legal p,.legal li{font-size:1.125rem;color:var(--dim);margin-bottom:.5625rem}
.legal ul{margin-left:1.25rem}
.legal b{color:var(--cream)}
.legal a{color:var(--gold-l)}
.legal ul.go a{display:inline-flex;align-items:center;min-height:3rem;font-weight:700}   /* 404: big targets for a lost visitor */
.back{color:var(--gold-l);font-family:'Bitter',Georgia,serif;font-size:1.1875rem;text-decoration:none;display:inline-flex;align-items:center;min-height:3rem;padding:.25rem 0}
.back:hover{text-decoration:underline}

/* ── v13: live details from the Control Room (all optional: the page reads fine without them) ── */
.avail{margin-top:.625rem;font-size:1rem;font-weight:700;color:var(--gold-l)}
.item .avail{flex:0 0 auto}
.addons .ap,.addons .ap-note{color:var(--gold-l);font-weight:700}
.iprice{font-family:'Bitter',Georgia,serif;font-size:1.375rem;color:var(--gold-l)}
.item .iprice{flex:0 0 auto;margin-top:.625rem;color:var(--gold-l)}
.iprice small{font-family:'Karla',system-ui,sans-serif;font-size:1rem}
.promos{display:grid;gap:.75rem;margin-top:1.375rem}
.promo{padding:1rem 1.125rem;border:1px solid var(--goldf);border-left:3px solid var(--gold);background:var(--soil);border-radius:2px;max-width:70ch}
.promo h3{font-size:1.25rem;margin:.25rem 0 .375rem}
.promo p{font-size:1.125rem;color:var(--dim)}
.promo p + p{margin-top:.375rem}
.promo .promo-when{font-size:1rem;color:var(--gold-l);font-weight:700}
.promo a{color:var(--gold-l);font-weight:700;display:inline-block;min-height:24px;padding:.1875rem 0}
.promo .terms{white-space:pre-line}
.promo .terms b{color:var(--cream)}
.promo:target{outline:2px solid var(--gold);outline-offset:3px}
.quote{margin-top:.875rem;padding:1.125rem 1.25rem;background:var(--soil);border:1px solid var(--goldf);border-radius:2px;max-width:40rem}
.quote-wait{font-size:1.125rem;color:var(--cream)}
.quote-wait a,.qresult a{color:var(--gold-l);font-weight:700;display:inline-block;min-height:24px;padding:.125rem 0}
.sizes{border:0;display:grid;gap:.5rem;min-width:0}
.sizes legend{font-weight:700;font-size:1.125rem;margin-bottom:.5rem;color:var(--cream)}
.size{display:flex;gap:.75rem;align-items:flex-start;padding:.75rem .875rem;border:1px solid var(--edge);border-radius:2px;cursor:pointer;min-height:3rem}
.size input{width:1.5rem;height:1.5rem;flex:0 0 1.5rem;margin-top:.0625rem;accent-color:var(--gold)}
.size b{display:block;color:var(--cream)}
.size span span{display:block;font-size:1rem;color:var(--faint)}
.size:has(input:checked){border-color:var(--gold);background:rgba(217,162,39,.08)}
.qresult{margin-top:.875rem}
.qresult p{font-size:1.125rem;color:var(--cream);margin-top:.375rem}
.qresult p.fine{font-size:1rem;color:var(--faint);margin-top:.75rem}
.ts{margin-top:1.125rem;min-height:65px}
.faq details p{white-space:pre-line}

/* ── Windows high contrast / forced colours: gradient text would vanish, so drop it ── */
@media (forced-colors:active){
  .gur,h1 em,.price,.score{background:none!important;color:CanvasText!important;-webkit-text-fill-color:CanvasText!important;filter:none!important}
  .cta,.season,.tagb,.callbar .c1,.brandbar button[aria-pressed="true"]{background:ButtonFace!important;color:ButtonText!important;border:2px solid ButtonText}
  .tsize button[aria-pressed="true"]{background:Highlight!important;color:HighlightText!important;border-color:Highlight}
  .tab{border-bottom-color:Canvas}
  .tab.on{border-bottom-color:Highlight}
}

/* ── print: every section, no chrome ── */
@media print{
  .season,nav.tabs,.callbar,.skip,.actions,.quiz,.form,.brandbar,.quote,.tsize,.act,.hero-art,.jump{display:none!important}
  .pane{display:block!important;border:0;padding:16px 0}
  *{color:#000!important;-webkit-text-fill-color:#000!important;background:none!important;box-shadow:none!important;filter:none!important}
}

/* ── the Control Room (body.cr) keeps its v13 sizes: v14's larger type is for the public pages.
   The Control Room never gets a text size class, so these are exactly what it had before. ── */
body.cr{font-size:16px;line-height:1.62;--dim:rgba(247,242,230,.78);--faint:rgba(247,242,230,.68)}   /* v14 QA: the public tokens got lighter; the Control Room keeps v13's */
.cr .note{font-size:15px}
.cr .notice,.cr .status{font-size:15.5px}
.cr .hint{font-size:14px}
.cr .err{font-size:14.5px}
.cr input[type=text],.cr input[type=tel],.cr input[type=email],.cr select,.cr textarea{font-size:16px}