/* growtricity.ai landing + /demo, ported from Ashish's canvas (gai-landing Main/Demo, 24 Oct 2026).
   Geist (self-hosted Latin subset, OFL, 400-700), pure white, Growtricity ink #0E1013 + saffron #E78B2F (text-safe
   #A8530C on white); chat bubbles keep the WhatsApp look. 16px minimum everywhere
   (the canvas used 12-15px for a few labels; raised to keep the studio's 16px rule). Motion: transform/opacity only. */
@font-face{font-family:Geist;src:url('/site/fonts/geist.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap}

:root{
  --white:#ffffff;--ink:#0e1013;--ink-2:#262626;--grey:#4a4a4a;--grey-2:#6b6b6b;--line:#e5e9e7;--line-2:#cfd8d4;--line-3:#dde4e1;
  --saffron:#e78b2f;--saffron-ink:#a8530c;--saffron-wash:#fdf0e3;--green-deep:#0e6b4f;--chat:#f0f4f2;--bubble-you:#d9f5d0;--pill:#e1e8e5;--soft:#f1f5f3;
  --bad:#b3261e;--focus:#0e6b4f;
  --font:Geist,system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --side:clamp(20px,5vw,56px);--pad:clamp(20px,5vw,32px);
  --t-lead:clamp(32px,4.4vw,48px);--t-body:clamp(20px,2.2vw,23px);--t-h1:clamp(36px,5vw,52px);--t-h2:clamp(30px,3.8vw,40px);--t-sub:clamp(21px,2.4vw,25px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.5;min-height:100vh;display:flex;flex-direction:column;overflow-x:hidden}
a{color:var(--ink)}a:hover{color:var(--green-deep)}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:4px;border-radius:4px}
p,h1,h2,h3{margin:0}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:8px;background:var(--ink);color:#fff;padding:12px 16px;border-radius:8px;z-index:10}
.skip:focus{left:8px}

/* Header */
.top{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;padding:20px var(--side)}
.brand{text-decoration:none;font-weight:600;font-size:18px;letter-spacing:-.01em;color:var(--ink);display:inline-flex;align-items:center;gap:8px;min-height:44px}
.brand .mark{height:28px;width:auto;display:block}
.brand .word{height:19px;width:auto;display:block}
.brand .ai{margin-left:-6px;font-size:19px;line-height:1;transform:translateY(1px)}
.brand span{color:var(--saffron)}
.top nav{display:flex;align-items:center;gap:8px}
.pill{min-height:44px;padding:0 14px;border-radius:999px;font:500 16px var(--font);cursor:pointer;background:transparent;color:var(--ink-2);border:1px solid var(--line-2)}
.pill[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.login{min-height:44px;display:inline-flex;align-items:center;padding:0 16px;margin-left:4px;border:1px solid var(--line-2);border-radius:999px;text-decoration:none;font-size:16px;font-weight:500;color:var(--ink)}
.back{min-height:44px;display:inline-flex;align-items:center;font-size:16px;color:var(--ink-2)}

/* Column */
.main{flex:1;width:100%;max-width:760px;margin:0 auto;padding:clamp(40px,9vw,112px) var(--pad) 64px}
.lead{margin:48px 0 0;font-size:var(--t-lead);line-height:1.15;letter-spacing:-.02em;font-weight:600}
.body{margin:28px 0 0;font-size:var(--t-body);line-height:1.6;color:var(--ink-2)}
.body.list{line-height:1.75}
.body.also{margin-top:22px}
.meta{margin:18px 0 0;font-size:16px;line-height:1.6;color:var(--grey);max-width:620px}

/* The orb: saffron to deep brown, a small WhatsApp-green glint, breathing; rings while an example is open. */
.orb-wrap{position:relative;width:112px;height:112px}
.orb{position:absolute;inset:4px;border-radius:50%;background:radial-gradient(circle at 32% 26%,#fff 0,#ffe9cf 12%,#f6b068 38%,#e78b2f 62%,#3a1e08 100%);box-shadow:0 22px 60px -12px rgba(231,139,47,.55),inset -10px -12px 26px rgba(0,0,0,.28),inset 8px 10px 20px rgba(255,255,255,.35);animation:breathe 5s ease-in-out infinite}
.orb::after{content:"";position:absolute;width:26px;height:26px;right:18px;bottom:20px;border-radius:50%;background:radial-gradient(circle,rgba(37,211,102,.85) 0,rgba(37,211,102,0) 70%);opacity:.75;animation:glint 5s ease-in-out infinite}
.ring{position:absolute;inset:4px;border-radius:50%;border:1.5px solid rgba(231,139,47,.45);opacity:0;display:none}
.orb-wrap.listening .ring{display:block;animation:ripple 2.4s ease-out infinite}
.orb-wrap.listening .r2{animation-delay:.8s}
.orb-wrap.listening .r3{animation-delay:1.6s}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
@keyframes glint{0%,100%{opacity:.55}50%{opacity:.95}}
@keyframes ripple{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.9);opacity:0}}

/* Examples: inline links acting as buttons, so they wrap with the sentence. The padding gives a 44px target;
   the open state paints only the middle band, not the whole padded box. */
.ex{padding:13px 0;margin:0;-webkit-box-decoration-break:clone;box-decoration-break:clone;cursor:pointer;color:var(--ink);font-weight:500;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px;text-decoration-color:#9aa3a0;-webkit-tap-highlight-color:transparent}
.ex:hover{text-decoration-color:var(--saffron)}
.ex[aria-expanded="true"]{color:var(--saffron-ink);text-decoration-color:var(--saffron);background:linear-gradient(var(--saffron-wash),var(--saffron-wash)) center/100% calc(100% - 22px) no-repeat;border-radius:6px}

/* Chat panel */
.panel{margin-top:28px;background:var(--chat);border-radius:22px;padding:18px 16px 20px;display:flex;flex-direction:column;gap:10px;max-width:520px;animation:rise .35s ease-out}
.panel-head{display:flex;align-items:center;gap:10px;padding:2px 4px 8px;border-bottom:1px solid var(--line-3)}
.mini-orb{width:28px;height:28px;flex:none;border-radius:50%;background:radial-gradient(circle at 32% 26%,#fff 0,#ffe9cf 12%,#f6b068 38%,#e78b2f 62%,#3a1e08 100%)}
.panel-head b{font-size:16px;font-weight:600}
.panel-head small{font-size:16px;color:var(--grey);flex:1}
.panel-x{min-width:44px;min-height:44px;margin:-10px -8px -10px 0;border:0;background:none;color:var(--grey);font-size:22px;cursor:pointer;border-radius:10px}
.panel-x:hover{color:var(--ink)}
.msgs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.msgs > li{animation:pop .32s ease-out both}
.m-time{align-self:center;font-size:16px;color:var(--grey);background:var(--pill);border-radius:999px;padding:4px 12px}
.m-you{align-self:flex-end;max-width:82%;background:var(--bubble-you);border-radius:16px 16px 4px 16px;padding:9px 12px;font-size:16px;line-height:1.4}
.m-ai{align-self:flex-start;max-width:82%;background:#fff;border-radius:16px 16px 16px 4px;padding:9px 12px;font-size:16px;line-height:1.4;box-shadow:0 1px 0 rgba(0,0,0,.04)}
.m-text{white-space:pre-line}
.voice{display:flex;align-items:center;gap:8px;margin-bottom:4px;color:var(--green-deep);font-size:16px}
.bars{display:flex;gap:2px;align-items:center}
.bars i{width:2px;background:var(--green-deep);border-radius:2px}
.typing{align-self:flex-start;background:#fff;border-radius:16px 16px 16px 4px;padding:12px 14px;display:flex;gap:5px}
.typing i{width:7px;height:7px;border-radius:50%;background:#9aa3a0;display:block;animation:dot 1.1s ease-in-out infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes pop{from{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:none}}
@keyframes dot{0%,80%,100%{transform:translateY(0);opacity:.5}40%{transform:translateY(-4px);opacity:1}}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* CTAs */
.asks{margin-top:52px;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.cta{min-height:52px;display:inline-flex;align-items:center;gap:10px;padding:0 26px;background:var(--ink);color:#fff;border-radius:999px;text-decoration:none;font-size:17px;font-weight:600;border:0;cursor:pointer;font-family:var(--font)}
.cta:hover{color:#fff;background:#262a30}
.cta[disabled]{opacity:.55;cursor:default}
.wa{min-height:44px;display:inline-flex;align-items:center;gap:8px;font-size:16px;color:var(--green-deep);font-weight:500;text-decoration:underline;text-underline-offset:5px}

/* Pricing */
.offer{margin-top:88px;padding-top:40px;border-top:1px solid var(--line)}
.offer h2{font-weight:400;font-size:var(--t-h2);line-height:1.1}

.points{margin:22px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px;font-size:16px;line-height:1.45}
.points li{display:flex;gap:10px}
.points svg{flex:none;margin-top:2px}
.points strong{font-weight:600}
.points s{color:var(--grey-2);text-decoration-thickness:2px}
.points .zero{font-weight:700;color:var(--saffron-ink);font-size:18px}
.cards-head{margin:32px 0 0;font-size:16px;font-weight:600;color:var(--saffron-ink);letter-spacing:.02em}
.cards{margin-top:14px;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.card{border:1px solid var(--line-3);border-radius:18px;padding:20px;background:#fff;display:flex;flex-direction:column;gap:6px;position:relative}
.card.best{border:1.5px solid var(--ink)}
.badge{position:absolute;top:-13px;left:18px;padding:2px 10px;border-radius:999px;background:var(--ink);color:#fff;font-size:16px;font-weight:600}
.c-name{font-size:16px;font-weight:600;color:var(--grey)}
.c-name span{color:var(--green-deep)}
.c-was{font-size:16px;color:var(--grey-2)}
.c-was s{text-decoration-thickness:2px}
.c-was s.draw,.points s.draw{text-decoration:none}
.c-amt{font-size:36px;line-height:1;font-weight:600;letter-spacing:-.02em}
.c-unit{font-size:16px;color:var(--ink-2)}
.c-note{font-size:16px;color:var(--grey)}
.fine{margin:16px 0 0;font-size:16px;line-height:1.5;color:var(--grey)}
.offer .cta{margin-top:24px}

/* Footer */

/* ---------- /demo ---------- */
.demo h1{font-weight:400;font-size:var(--t-h1);line-height:1.08;letter-spacing:-.01em}
.demo .sub{margin:18px 0 0;font-size:var(--t-sub);line-height:1.4;color:var(--ink-2)}
.label{margin:44px 0 12px;font-size:16px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--grey)}
.label.t2{margin-top:32px}
.days{display:flex;flex-wrap:wrap;gap:8px}
.day{min-height:56px;min-width:76px;padding:6px 14px;border-radius:14px;cursor:pointer;text-align:center;background:#fff;color:var(--ink);border:1px solid var(--line-2);font-family:var(--font)}
.day[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.day .dow{display:block;font-size:16px;opacity:.75}
.day .dt{display:block;font-size:17px;font-weight:600}
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px}
.slot{min-height:48px;border-radius:12px;font:500 16px var(--font);cursor:pointer;background:#fff;color:var(--ink);border:1px solid var(--line-2)}
.slot[aria-pressed="true"]{background:var(--green-deep);color:#fff;border-color:var(--green-deep)}
.slot[disabled]{background:var(--soft);color:#9a978f;border:1px dashed var(--line-2);cursor:not-allowed;text-decoration:line-through}
.hint{font-size:16px;color:var(--grey)}
.form{margin-top:36px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.form label{display:flex;flex-direction:column;gap:6px;font-size:16px;font-weight:500;min-width:0}
.form .wide{grid-column:span 2}
.f{min-height:48px;padding:0 14px;border:1px solid var(--line-2);border-radius:12px;font:400 16px var(--font);background:#fff;color:var(--ink);width:100%}
.f:focus{outline:none;border-color:var(--green-deep);box-shadow:0 0 0 3px rgba(14,107,79,.18)}
.f[aria-invalid="true"]{border-color:var(--bad)}
.num{display:flex;border:1px solid var(--line-2);border-radius:12px;background:#fff;overflow:hidden}
.num:focus-within{border-color:var(--green-deep);box-shadow:0 0 0 3px rgba(14,107,79,.18)}
.num>span{display:inline-flex;align-items:center;padding:0 14px;background:var(--soft);font-weight:600;font-size:16px}
.num .f{border:0;border-radius:0;box-shadow:none}
.err{color:var(--bad);font-weight:600;font-size:16px}
.err:empty{display:none}
.turnstile{grid-column:span 2;min-height:65px}
.go-row{margin-top:28px;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.ready{margin:40px 0 0;padding-top:20px;border-top:1px solid var(--line);font-size:16px;color:var(--ink-2)}
.preview{background:var(--soft);border:1px dashed var(--green-deep);border-radius:12px;padding:10px 12px;font-size:16px}
.code-in{font-size:28px!important;letter-spacing:.35em;text-align:center;font-weight:600}
.code-step{display:flex;flex-direction:column;gap:18px}
.done{display:flex;flex-direction:column;gap:18px;animation:rise .35s ease-out}
.done .sum{font-size:clamp(22px,2.6vw,27px);line-height:1.4;color:var(--ink-2)}
.done p{font-size:16px;line-height:1.5;color:var(--ink-2)}
.done-btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
.outline{min-height:48px;display:inline-flex;align-items:center;padding:0 20px;border:1px solid var(--ink);border-radius:999px;background:#fff;text-decoration:none;font:600 16px var(--font);cursor:pointer;color:var(--ink)}
.plain{min-height:48px;display:inline-flex;align-items:center;padding:0 8px;color:var(--ink-2)}
@media (max-width:520px){.form{grid-template-columns:1fr}.form .wide,.turnstile{grid-column:auto}}
/* Small phones: the language pill shows only the language you can switch to. */
@media (max-width:420px){.top nav .pill[aria-pressed="true"]{display:none}}

/* Motion (canvas, 24 Oct): headline words rise in one by one (screen readers get one text), voice bars pulse,
   pricing cards rise and the struck prices draw their line on scroll (scroll-driven, static fallback). */
.w{display:inline-block;margin-right:.26em;opacity:0;transform:translateY(16px);animation:word .8s cubic-bezier(.16,1,.3,1) forwards}
@keyframes word{to{opacity:1;transform:none}}
.bars i{transform-origin:center;animation:bar 1s ease-in-out infinite}
.bars i:nth-child(2n){animation-delay:.15s}.bars i:nth-child(3n){animation-delay:.3s}
@keyframes bar{0%,100%{transform:scaleY(.5)}50%{transform:scaleY(1.15)}}
s.draw{text-decoration:none;background:linear-gradient(currentColor,currentColor) no-repeat 0 55%/100% 2px}
@supports (animation-timeline: view()){
  .reveal{animation:rise linear both;animation-timeline:view();animation-range:entry 0% cover 28%}
  s.draw{background-size:0 2px;animation:strike linear both;animation-timeline:view();animation-range:entry 30% cover 45%}
}
@keyframes strike{to{background-size:100% 2px}}

@media (prefers-reduced-motion:reduce){
  .orb,.orb::after,.ring,.panel,.msgs > li,.typing i,.done,.bars i,.reveal{animation:none!important}
  .w{opacity:1;transform:none;animation:none}
  s.draw{animation:none!important;background-size:100% 2px}
  .orb-wrap.listening .ring{display:none}
}
.c-name .plainname{color:inherit}
/* Lab line under the CTA (in-person demo, 24 Oct) */
.lab{font-size:16px;line-height:1.55;color:var(--ink-2);max-width:560px}
.dir{color:var(--saffron-ink);font-weight:600;display:inline-flex;align-items:center;min-height:44px}
.dir:hover{color:var(--ink)}
.steps{margin:24px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px;font-size:17px;line-height:1.5}
.steps li{display:flex;gap:14px}
.steps .n{flex:none;width:30px;height:30px;border-radius:50%;background:var(--ink);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:600;font-size:16px}
.steps strong{font-weight:600}
.outline.soft{border-color:var(--line-2)}
/* "Tap any example" hint (canvas, 24 Oct) */
.hint-pill{margin:28px 0 0;display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;background:var(--saffron-wash);color:var(--saffron-ink);font-size:16px;font-weight:600}
.hint-pill + .body{margin-top:18px}
.appt{font-weight:600;color:var(--ink)}
/* SEO/AEO: the one-line definition (quiet) and the FAQ (native details) */
.def{margin:18px 0 0;font-size:16px;line-height:1.55;color:var(--grey);max-width:620px}
.faq{margin-top:72px;padding-top:36px;border-top:1px solid var(--line)}
.faq h2{font-weight:400;font-size:var(--t-h2);line-height:1.1;margin-bottom:12px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{min-height:56px;display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer;font-size:18px;font-weight:600;list-style:none;padding:8px 0}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:24px;font-weight:400;color:var(--saffron-ink);transition:transform .2s ease}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:0 0 18px;font-size:17px;line-height:1.6;color:var(--ink-2);max-width:640px}
/* Headline words: staggered by position (no inline styles, so the CSP stays strict). */
.lead .w:nth-child(1){animation-delay:120ms}.lead .w:nth-child(2){animation-delay:175ms}.lead .w:nth-child(3){animation-delay:230ms}.lead .w:nth-child(4){animation-delay:285ms}.lead .w:nth-child(5){animation-delay:340ms}.lead .w:nth-child(6){animation-delay:395ms}.lead .w:nth-child(7){animation-delay:450ms}.lead .w:nth-child(8){animation-delay:505ms}.lead .w:nth-child(9){animation-delay:560ms}.lead .w:nth-child(10){animation-delay:615ms}.lead .w:nth-child(11){animation-delay:670ms}.lead .w:nth-child(12){animation-delay:725ms}.lead .w:nth-child(13){animation-delay:780ms}.lead .w:nth-child(14){animation-delay:835ms}.lead .w:nth-child(15){animation-delay:890ms}.lead .w:nth-child(16){animation-delay:945ms}.lead .w:nth-child(17){animation-delay:1000ms}.lead .w:nth-child(18){animation-delay:1055ms}.lead .w:nth-child(19){animation-delay:1110ms}.lead .w:nth-child(20){animation-delay:1165ms}
.pill[aria-current="page"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.pill{display:inline-flex;align-items:center;text-decoration:none}
@media (max-width:420px){.top nav .pill[aria-current="page"]{display:none}}
@media (prefers-reduced-motion:reduce){.faq summary::after{transition:none}}
.c-amt .gst{font-size:17px;font-weight:600;color:var(--grey);margin-left:6px;letter-spacing:0}
.scarce{font-size:16px;font-weight:600;color:var(--saffron-ink)}
.hook-sub{margin:24px 0 0;font-size:clamp(21px,2.4vw,26px);line-height:1.5;font-weight:500;color:var(--ink-2);white-space:pre-line}
/* "+ GST" always stays together (it moves under the amount in narrow cards); chat header label on one line */
.c-amt .gst{display:inline-block;white-space:nowrap}
.panel-head small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c-amt{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:6px;row-gap:4px}
.c-amt .gst{margin-left:0}
/* Secondary pill (e.g. "Change details"): same shape as the primary, quieter. */
.secondary{min-height:52px;display:inline-flex;align-items:center;justify-content:center;padding:0 24px;background:#fff;color:var(--ink);border:1px solid var(--line-2);border-radius:999px;font:600 17px var(--font);cursor:pointer;text-decoration:none}
.secondary:hover{border-color:var(--ink)}
/* Programmatic focus (tabindex=-1 headings moved to for screen readers) and mouse clicks: no ring; keyboard keeps it. */
:focus:not(:focus-visible){outline:none}
/* Headings that only receive focus by script (tabindex=-1, for screen readers) never show a ring. */
[tabindex="-1"]:focus{outline:none}
/* Footer WhatsApp line (one primary path on the page: Book a free demo) */
/* /demo: confirm on WhatsApp */
.wa-msg{font-size:clamp(20px,2.4vw,24px);font-weight:600;background:var(--chat);border-radius:14px;padding:14px 16px;display:inline-block}
.wa-go{background:#17773f}
.wa-go:hover{background:#11612f}
.waiting{display:flex;align-items:center;gap:10px;font-size:16px;color:var(--ink-2)}
.spin{width:16px;height:16px;border-radius:50%;border:2px solid var(--line-2);border-top-color:var(--green-deep);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spin{animation:none}}
/* The one journey: a quiet line under the main CTA, and the five steps on /demo */
.journey-line{font-size:16px;font-weight:600;color:var(--ink-2)}
.nothing{font-size:16px;color:var(--grey)}
.journey{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:16px;line-height:1.45}
.j-step{display:flex;gap:12px;padding:10px 12px;border-radius:14px;color:var(--grey)}
.j-step .n{flex:none;width:28px;height:28px;border-radius:50%;border:1px solid var(--line-2);display:inline-flex;align-items:center;justify-content:center;font-weight:600;font-size:16px;color:var(--ink-2)}
.j-step strong{display:block;font-weight:600;color:var(--ink)}
.j-step[aria-current="step"]{background:var(--saffron-wash);color:var(--ink-2)}
.j-step[aria-current="step"] .n{background:var(--ink);border-color:var(--ink);color:#fff}
.j-step.done .n{background:var(--green-deep);border-color:var(--green-deep);color:#fff}
.kicker{margin:40px 0 0;font-size:16px;font-weight:600;color:var(--saffron-ink);letter-spacing:.01em}.kicker + .lead{margin-top:10px}
.founding-count{font-size:16px;font-weight:600;color:var(--ink-2)}
/* Included in every plan (canvas, 24 Oct) */
.included{margin-top:28px;padding:22px;border-radius:18px;background:#fafaf8;border:1px solid var(--line)}
.included h3{margin:0;font-size:18px;font-weight:600}
.included ul{margin:14px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px 20px;font-size:16px;line-height:1.45}
.included li{display:flex;gap:10px}
.included li svg{flex:none;margin-top:3px}
.included p{margin:16px 0 0;font-size:16px;line-height:1.55;color:var(--ink-2)}
.included p + p{margin-top:8px}
.included strong{font-weight:600}

/* Header logo: the wordmark + saffron ".ai" (no G mark: it read as a double G). The inline image's bottom edge sits
   on the text baseline, so it is dropped by the wordmark's descender (24.6% of its height) to put the letters on it. */
.brand-in{display:inline-block;white-space:nowrap;line-height:1}
.brand-word{display:inline;height:20px;width:auto;vertical-align:baseline;margin-bottom:-4.9px}
.brand .brand-ai{font-family:Geist,system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;font-size:19px;font-weight:600;letter-spacing:-.01em;color:#e78b2f;margin-left:1px}
/* A booking code (GD-XXXXX) never breaks across lines, not even at its hyphen. */
.ref-code{white-space:nowrap}
/* /terms and /privacy (built from legal/*.md by scripts/build-legal.mjs) */
.legal h1.lead{font-size:clamp(30px,5vw,44px)}
.legal h2{margin:40px 0 0;font-size:clamp(20px,2.4vw,24px);line-height:1.3;color:var(--ink)}
.legal p,.legal li{font-size:16px;line-height:1.65;color:var(--ink-2)}
.legal p{margin:14px 0 0;max-width:68ch}
.legal ul,.legal ol{margin:12px 0 0;padding-left:22px;max-width:68ch}
.legal li + li{margin-top:6px}
.legal li ul{margin-top:6px}
.legal hr{margin:32px 0 0;border:0;border-top:1px solid var(--line)}
.legal a{color:var(--green-deep)}
.legal .table-wrap{margin:16px 0 0;overflow-x:auto;-webkit-overflow-scrolling:touch}
.legal table{border-collapse:collapse;min-width:100%;font-size:16px;line-height:1.5}
.legal th,.legal td{border:1px solid var(--line-2);padding:8px 10px;text-align:left;vertical-align:top;color:var(--ink-2)}
.legal th{background:var(--soft);font-weight:600;color:var(--ink)}
.legal mark.ph{background:var(--saffron-wash);color:var(--saffron-ink);font-weight:600;padding:0 3px;border-radius:4px}
.legal .legal-foot{margin-top:48px;color:var(--grey)}
/* Phones: the Book button sits on the first screen (fix round, 24 Oct 2026): a smaller orb and tighter hero rhythm. */
@media (max-width:480px){
  .landing .main{padding-top:20px}
  .landing .orb-wrap{width:64px;height:64px}
  .landing .kicker{margin-top:16px}
  .landing .hook-sub{margin-top:14px;font-size:19px;line-height:1.45}
  .landing .hint-pill{margin-top:16px}
  .landing .hint-pill + .body{margin-top:10px}
  .landing .asks{margin-top:24px}
}
/* Selects look and size the same in WebKit as elsewhere (QA M3): no native chrome, a drawn chevron, 48px tall. */
select.f{-webkit-appearance:none;appearance:none;min-height:48px;padding-right:40px;
  background-image:linear-gradient(45deg,transparent 50%,var(--grey) 50%),linear-gradient(135deg,var(--grey) 50%,transparent 50%);
  background-position:calc(100% - 22px) 50%,calc(100% - 16px) 50%;background-size:6px 6px,6px 6px;background-repeat:no-repeat}
.legal .legal-foot a{display:inline-flex;align-items:center;min-height:44px}
/* Small phones: a compact Book button in the header, so booking is on the first screen at 375x667 and 320x640. */
.nav-book{display:none}
@media (max-width:480px){
  .landing .nav-book{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:999px;background:var(--ink);color:#fff;text-decoration:none;font-size:16px;font-weight:600;white-space:nowrap}
  .landing .nav-book:focus-visible{outline:3px solid var(--saffron);outline-offset:2px}
  .landing .top nav{flex-wrap:wrap}
  .landing .login{white-space:nowrap;margin-left:0;padding:0 12px}
  .landing .top .pill{padding:0 12px}
}
/* Meet us at the lab (before pricing): one real photo of the lab and the founder; no testimonials. */
.lab-meet{margin-top:72px}
.lab-meet h2{margin:0;font-weight:400;font-size:var(--t-h2);line-height:1.1}
.lab-meet picture{display:block}
.lab-photo{display:block;width:100%;height:auto;margin-top:20px;border-radius:18px;box-shadow:0 18px 40px -24px rgba(14,16,19,.45)}
.founder{display:flex;align-items:center;gap:16px;margin-top:20px}
.founder picture{flex:none}
.founder-photo{display:block;width:96px;height:96px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px var(--white),0 0 0 4px var(--line-2)}
.founder p{margin:0;font-size:17px;line-height:1.55;color:var(--ink-2)}
.lab-test{margin:16px 0 0;font-size:17px;line-height:1.55;color:var(--saffron-ink);font-weight:600}
@media (min-width:768px){.founder-photo{width:160px;height:160px}.founder{gap:24px}}
/* The required consent box on /demo: never pre-ticked; 24px box inside a 44px row. */
.consent{display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap;font-size:16px;line-height:1.5;color:var(--ink-2)}
.consent input{flex:none;width:24px;height:24px;margin:10px 0;accent-color:var(--ink)}
.consent #consent-text{flex:1;min-width:0;padding-top:10px}
.form .consent label{display:inline;margin:0;font:inherit;color:inherit}
.consent a{color:var(--green-deep);display:inline;padding:10px 0}
.consent .err{flex-basis:100%}
/* Founding offer on/off (lib/founding.js; landing.js sets <body data-founding>): one of the two price sets shows. */
[data-founding="open"] .f-off,[data-founding="closed"] .f-on{display:none}
.c-from{margin-top:10px;font-size:16px;line-height:1.45;color:var(--grey)}
.offer-lead{margin:14px 0 0;font-size:var(--t-sub);line-height:1.4;color:var(--ink-2)}
.num>.cc-pick{position:relative;padding:0;display:flex;align-items:stretch}
.cc-face{display:flex;align-items:center;gap:6px;padding:0 10px 0 14px;font-weight:600;white-space:nowrap;pointer-events:none}
.cc-caret{font-size:16px;opacity:.6}
.cc-pick select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;font-size:16px;border:0}
.cc-pick:focus-within .cc-face{outline:3px solid rgba(14,107,79,.35);outline-offset:-3px}

/* The one-page consent sheet signed at the setup visit (/consent, 25 Oct 2026): tight on screen, one A4 page in print
   (print sizes in points: paper, not screens, so the 16px screen minimum does not apply). */
.legal.consent h2{margin-top:22px}
.legal.consent p,.legal.consent li{line-height:1.5}
@media print{
  .top,.legal-foot{display:none}
  .legal.consent{padding:0;max-width:none}
  .legal.consent h1.lead{font-size:16pt;margin:0}
  .legal.consent h2{font-size:11pt;margin:10px 0 0}
  .legal.consent p,.legal.consent li{font-size:9.5pt;line-height:1.4;color:#000;max-width:none}
  .legal.consent p{margin:6px 0 0}
  .legal.consent ul{margin:4px 0 0}
  .legal.consent li + li{margin-top:2px}
  @page{size:A4;margin:14mm}
}
/* Hero + "A day with your assistant" (26 Oct 2026). The promise on the left and one real chat on the right (desktop),
   stacked on phones; then the day as a timeline: a time of day, one line, one real chat. The chats are static HTML
   (crawlable, whole without JS); only their bubbles animate in. Everything after the day reads in one 760px column.
   (.story, not .day: .day is the /demo date button.) */
.landing .main{max-width:1120px}
.landing .col{max-width:760px}
.landing .hero{display:grid;gap:44px;align-items:center}
.landing .hero .lead{font-size:clamp(34px,5vw,62px);line-height:1.06;letter-spacing:-.025em}
.landing .hero .hook-sub{max-width:34em}
.landing .hero .asks{margin-top:36px}
.chat-card{margin-top:0;width:100%;border:1px solid var(--line-3)}
.hero-chat{max-width:440px;box-shadow:0 40px 80px -40px rgba(14,16,19,.45),0 2px 0 rgba(14,16,19,.03)}
.hero-chat .msgs > li{animation:pop .45s ease-out both}
.hero-chat .msgs > li:nth-child(1){animation-delay:.3s}.hero-chat .msgs > li:nth-child(2){animation-delay:.9s}
.hero-chat .msgs > li:nth-child(3){animation-delay:1.6s}.hero-chat .msgs > li:nth-child(4){animation-delay:2.3s}
.hero-chat .msgs > li:nth-child(5){animation-delay:2.9s}.hero-chat .msgs > li:nth-child(6){animation-delay:3.7s}
.hero-chat .msgs > li:nth-child(7){animation-delay:4.3s}
@media (min-width:960px){
  .landing .main{padding-top:48px}
  .landing .hero .orb-wrap{width:80px;height:80px}
  .landing .hero{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:64px}
  .hero-chat{justify-self:end}
}
.story{margin-top:clamp(72px,10vw,128px)}
.day-label{font-size:16px;font-weight:600;color:var(--saffron-ink);letter-spacing:.02em}
.story h2{margin-top:12px;font-weight:400;font-size:var(--t-h2);line-height:1.1;letter-spacing:-.01em;max-width:18em}
.day-sq{margin-top:18px;font-size:var(--t-body);line-height:1.6;color:var(--ink-2);max-width:36em}
.moments{list-style:none;margin:48px 0 0;padding:0;display:flex;flex-direction:column;gap:56px}
.moment{position:relative;display:grid;gap:18px;padding-left:30px}
.moment::before{content:"";position:absolute;left:0;top:9px;width:12px;height:12px;border-radius:50%;background:var(--saffron);box-shadow:0 0 0 5px var(--saffron-wash)}
.moment:not(:last-child)::after{content:"";position:absolute;left:5px;top:34px;bottom:-48px;width:2px;background:var(--line)}
.moment-time{font-size:clamp(30px,3.4vw,44px);line-height:1;font-weight:600;letter-spacing:-.02em;color:var(--saffron-ink);font-variant-numeric:tabular-nums}
.moment-cap{margin-top:12px;font-size:clamp(18px,1.8vw,21px);line-height:1.5;color:var(--ink-2);max-width:26em}
.moment .chat-card{max-width:520px}
@media (min-width:960px){
  .moments{gap:72px}
  .moment{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:64px;align-items:start;padding-left:40px}
  .moment:not(:last-child)::after{bottom:-64px}
}
.landing .asks.closing{margin-top:48px;padding:clamp(22px,4vw,36px);border-radius:24px;background:var(--saffron-wash);gap:12px}
.close-line{font-size:var(--t-sub);line-height:1.4;font-weight:500;color:var(--ink);max-width:28em}
.landing .asks.closing .cta{margin-top:6px}
.care{margin:22px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px;font-size:17px;line-height:1.5;color:var(--ink-2)}
.care li{display:flex;gap:10px}
.care svg{flex:none;margin-top:3px}
/* Bubbles the day needs: a forwarded message and a file she sends; static voice bars get their heights here (no inline
   styles under the CSP; landing.js still sets them on the bars it draws). */
.fwd{display:flex;align-items:center;gap:4px;margin-bottom:4px;font-size:16px;font-style:italic;color:var(--grey)}
.m-file{display:flex;align-items:center;gap:12px}
.file-ic{flex:none;width:44px;height:44px;border-radius:12px;background:var(--soft);color:var(--green-deep);display:inline-flex;align-items:center;justify-content:center}
.file-tx{display:flex;flex-direction:column;line-height:1.3}
.file-tx b{font-weight:600}
.file-tx small{font-size:16px;color:var(--grey)}
.bars i:nth-child(1){height:8px}.bars i:nth-child(2){height:14px}.bars i:nth-child(3){height:10px}.bars i:nth-child(4){height:16px}
.bars i:nth-child(5){height:9px}.bars i:nth-child(6){height:12px}.bars i:nth-child(7){height:6px}
/* Quiet-gate round (26 Oct 2026). Phones: no orb in the hero, so the promise, the button and the chat come sooner.
   The hero chat waits for the screen (landing.js adds .wait while it is below the fold). The header's Book button steps
   back while the hero's own is on screen (one button per action per screen); visibility keeps the header still. */
@media (max-width:767px){.landing .hero .orb-wrap{display:none}.landing .hero .kicker{margin-top:8px}}
@media (min-width:960px) and (max-width:1279px){.landing .hero .lead{font-size:46px}}
.hero-chat.wait .msgs > li{animation:none;opacity:0}
.landing .top .nav-book.stepped-back{visibility:hidden}
/* Bubbles that read as WhatsApp: tight corners with a tail on the first of a run, the next one from the same side
   tucked close, the time inside the bubble (16px, the studio minimum) and blue read ticks on the owner's own. */
.m-you{border-radius:10px 2px 10px 10px}
.m-ai{border-radius:2px 10px 10px 10px}
.m-you + .m-you,.m-ai + .m-ai{margin-top:-6px}
.m-you + .m-you{border-top-right-radius:10px}
.m-ai + .m-ai{border-top-left-radius:10px}
.m-at{float:right;position:relative;top:7px;margin-left:12px;display:inline-flex;align-items:center;gap:3px;font-size:16px;line-height:1;color:#667781;white-space:nowrap}
.m-at .ticks{color:#53bdeb}
.m-file .m-at{float:none;top:0;align-self:flex-end;margin-left:auto}
.voice .play{color:#54656f}
.voice .dur{color:var(--grey)}
/* The chat card's header: the name with "on WhatsApp" under it, never cut at 320px. */
.chat-card .panel-head{display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:center}
.chat-card .panel-head .mini-orb{grid-row:span 2}
.chat-card .panel-head b{line-height:1.25}
.chat-card .panel-head small{grid-column:2;line-height:1.25}
/* After the day: one left edge for everything, orange kept for times and the offer, the tap hint plain text. */
.landing .more{margin-top:72px}
.landing .more .hint-pill{background:none;padding:0;color:var(--grey);font-weight:500}
.landing .lab-test{color:var(--ink-2);font-weight:500}
.landing .col > .def{margin-top:40px}
@media (max-width:480px){.landing .asks.closing{padding:22px 16px}.landing .asks.closing .cta{padding:0 18px;font-size:16px}}
/* 320px: the Book button's label breaks in balanced lines, never leaving "lab" alone. */
.landing .cta{text-wrap:balance}
@media (max-width:359px){.landing .cta{padding:0 18px;font-size:16px}}
/* Site footer (26 Oct 2026, Ashish: "same footer for .ai as we have for .com, only a different offer"): growtricity.com's
   structure (brand block with one button, link columns, the Grupo Pounj band, the legal line), in growtricity.ai's own
   type and colour. Columns: five on wide screens, two on phones with the brand block across the top. */
.sf{width:100%;margin-top:88px;border-top:2px solid var(--ink);background:var(--white)}
.sf-in{max-width:1120px;margin:0 auto;padding:40px var(--pad) 48px}
.sf-top{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:28px 24px}
.sf-brand .brand{min-height:44px}
.sf-tag{margin:14px 0 6px;font-size:18px;line-height:1.35;font-weight:600;color:var(--ink);letter-spacing:-.01em}
.sf-brand p{font-size:16px;line-height:1.55;color:var(--ink-2);max-width:26em}
.sf-cta{margin-top:18px;min-height:48px;padding:0 22px;font-size:16px}
.sf-col h3{margin:4px 0 6px;font-size:16px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.sf-col a{display:flex;align-items:center;min-height:44px;font-size:16px;line-height:1.3;color:var(--ink-2);text-decoration:none}
.sf-col a:hover{color:var(--green-deep);text-decoration:underline;text-underline-offset:4px}
.sf-more{display:inline-flex;align-items:center;min-height:44px;font-size:16px;font-weight:500;color:var(--green-deep);text-decoration:none}
.sf-more:hover{text-decoration:underline;text-underline-offset:4px}
/* Trust (Ashish, 26 Oct: "show we are a stable organisation... you know how to build trust with humans"): where we are,
   in three countries, and registrations anyone can check on the government's own sites and on Google. */
.sf-trust{margin-top:36px;padding-top:28px;border-top:1px solid var(--line-2)}
.sf-trust-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 24px}
.sf-trust h3{margin:0;font-size:18px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.sf-trust-line{margin-top:6px;font-size:16px;line-height:1.55;color:var(--ink-2);max-width:42em}
.sf-offices,.sf-checks{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.sf-offices li,.sf-checks li{display:flex;flex-direction:column;gap:4px;padding:16px 18px;border:1px solid var(--line-3);border-radius:14px;background:var(--soft)}
.sf-offices .sf-office-main{background:var(--white);border-color:var(--ink-2)}
.sf-offices{align-items:start}
.sf-offices span,.sf-checks span{font-size:16px;color:var(--grey)}
.sf-offices b,.sf-checks b{font-size:16px;font-weight:600;line-height:1.35;color:var(--ink)}
.sf-checks b{font-variant-numeric:tabular-nums;letter-spacing:.01em}
.sf-offices em{font-style:normal;font-size:16px;line-height:1.45;color:var(--ink-2)}
.sf-offices a,.sf-checks a{display:inline-flex;align-items:center;min-height:44px;margin-top:auto;font-size:16px;font-weight:500;color:var(--green-deep);text-decoration:none}
.sf-offices a:hover,.sf-checks a:hover{text-decoration:underline;text-underline-offset:4px}
.sf-legal{margin-top:28px;padding-top:8px;border-top:1px solid var(--line-2);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 24px;font-size:16px;color:var(--grey)}
.sf-legal a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink-2)}
@media (max-width:959px){.sf-top{grid-template-columns:1fr 1fr}.sf-brand{grid-column:1/-1}}
@media (max-width:767px){.sf-offices,.sf-checks{grid-template-columns:1fr;gap:8px}}
@media (max-width:359px){.sf-top{grid-template-columns:1fr}}