/* ============================================================
   Tandy — WhatsApp feature-page design system, Tandy palette.
   Same page, same copy, same behavior; new visual system:
   Figtree, big regular-weight type, warm alternating bands,
   pill buttons with a hairline outline, flat rounded cards.
   Palette locked 2026-08: navy ink + trade green (design doc's
   "Work Blue" DNA inside the new structure).
   ============================================================ */

:root{
  --brand:#16a34a;            /* decorative green — dots, accents, quote mark */
  --brand-fill:#13863c;       /* fills behind white text: buttons, tandy bubbles (4.5:1) */
  --brand-bright:#3ecf70;     /* stat numbers + accents on navy */
  --brand-deep:#14532d;       /* headings on tint, small accents on light */
  --on-brand:#ffffff;         /* text on brand fills */
  --cream:#faf8f3;            /* warm band — nav, hero, pricing, footer */
  --tint:#e4f4ea;             /* green band — problem, proof */
  --ink:#0f2a43;              /* navy panels: stats, final CTA, phone frame */
  --text:#12293f;
  --muted:#566676;
  --line-strong:#0f2a43;      /* the 1px button outline */
  --line:#e8e3d8;             /* hairlines on warm surfaces */
  --line-cool:#e8ecf0;        /* hairlines on white */
  --bubble-them:#edf2f7;
  --on-bubble:#ffffff;
  --err:#c0322b;
  --paper:var(--cream);       /* legacy alias used by inline styles */

  --r-card:24px;
  --r-panel:32px;
  --pill:50px;
  --sh-card:0 10px 50px rgba(0,0,0,.05);

  --pad-sec:64px;
  --pad-sec-lg:96px;
  --head-gap:56px;

  --w-head:450;               /* Figtree needs a touch over 400 at display sizes */
  font-synthesis-weight:none;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
@media(prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth;} }
body{
  margin:0;background:#fff;color:var(--text);overflow-x:hidden;
  font-family:'Figtree',system-ui,-apple-system,sans-serif;
  font-size:17px;line-height:1.55;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
h1,h2,h3,p{margin:0;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
::selection{background:var(--brand-fill);color:var(--on-brand);}

:focus-visible{outline:2.5px solid var(--brand);outline-offset:3px;border-radius:4px;}
a:focus-visible,.btn:focus-visible,.btn-ghost:focus-visible{border-radius:var(--pill);}
.final-panel :focus-visible,.statpanel :focus-visible{outline-offset:4px;}
.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;}

/* ── layout ─────────────────────────────────────────────────── */
.wrap{max-width:1080px;margin:0 auto;padding:0 24px;}
.section{padding:var(--pad-sec) 0;}
@media(min-width:860px){ .section{padding:var(--pad-sec-lg) 0;} }
.section.tight{padding-top:0;}
.band-tint{background:var(--tint);}

.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:13.5px;font-weight:600;letter-spacing:.35px;color:var(--muted);
  margin-bottom:20px;text-transform:uppercase;
}
.eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--brand);flex:0 0 auto;}
.eyebrow.center{justify-content:center;}
.eyebrow.on-dark{color:rgba(255,255,255,.72);}
.band-tint .eyebrow{color:var(--brand-deep);}

h2.h{
  font-size:clamp(36px,4.8vw,56px);line-height:1.1;font-weight:var(--w-head);
  letter-spacing:-0.02em;text-wrap:balance;
}
.band-tint h2.h{color:var(--brand-deep);}
.lead{font-size:clamp(17px,2vw,19px);line-height:1.5;font-weight:400;color:var(--muted);text-wrap:pretty;}
.band-tint .lead{color:var(--brand-deep);opacity:.85;}
.section-head{max-width:700px;}
.section-head.center{margin:0 auto;text-align:center;}
.section-head .lead{margin-top:20px;}

/* ── buttons: the pill with the hairline outline ────────────── */
.btn{
  appearance:none;cursor:pointer;font-family:inherit;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  height:56px;padding:0 28px;border-radius:var(--pill);
  font-size:16px;font-weight:500;letter-spacing:0;line-height:1;
  background:var(--brand-fill);color:var(--on-brand);border:1px solid var(--line-strong);
  transition:transform .14s ease,opacity .15s ease;
}
.btn:hover{opacity:.9;transform:translateY(-1px);}
.btn:active{transform:translateY(0) scale(.99);}
.btn.full{width:100%;}
.btn svg{width:18px;height:18px;}
.btn.alt{background:#fff;color:var(--text);border-color:var(--line-strong);}
.btn-ghost{
  display:inline-flex;align-items:center;height:44px;padding:0 22px;border-radius:var(--pill);
  font-size:15px;font-weight:500;background:var(--brand-fill);color:var(--on-brand);
  border:1px solid var(--line-strong);white-space:nowrap;
  transition:opacity .15s ease,transform .14s ease;
}
.btn-ghost:hover{opacity:.9;transform:translateY(-1px);}

/* ── nav: solid cream band, sticky ──────────────────────────── */
.nav{position:sticky;top:0;z-index:50;background:var(--cream);
  transition:box-shadow .26s ease;}
.nav .bar{display:flex;align-items:center;justify-content:space-between;gap:16px;height:80px;}
.nav.scrolled{box-shadow:0 1px 0 var(--line),0 8px 30px -18px rgba(0,0,0,.18);}
.brand{display:inline-flex;align-items:center;gap:10px;
  font-weight:700;font-size:21px;letter-spacing:-.4px;}
.brand .dot{width:10px;height:10px;border-radius:50%;background:var(--brand);
  border:1px solid var(--line-strong);flex:0 0 auto;}
.nav-links{display:none;align-items:center;gap:32px;font-size:16px;font-weight:400;color:var(--text);
  margin-left:auto;margin-right:32px;}
.nav-links a.lnk{transition:opacity .15s ease;}
.nav-links a.lnk:hover{opacity:.65;}
@media(min-width:780px){ .nav-links{display:flex;} }
.nav-cta{margin-left:auto;}
@media(min-width:780px){ .nav-cta{margin-left:0;} }

/* ── chat bubbles ───────────────────────────────────────────── */
.thread{display:flex;flex-direction:column;gap:9px;}
.bubble{
  max-width:80%;padding:10px 14px;font-size:15px;line-height:1.42;font-weight:400;
  border-radius:17px;
}
.bubble.them{align-self:flex-start;background:var(--bubble-them);color:var(--text);border-bottom-left-radius:5px;}
.bubble.tandy{align-self:flex-end;background:var(--brand-fill);color:var(--on-bubble);border-bottom-right-radius:5px;}

.phone-thread.live{justify-content:flex-end;overflow:hidden;}
.bubble.ent{opacity:0;transform:translateY(12px) scale(.96);}
.bubble.ent.ent-in{opacity:1;transform:none;
  transition:opacity .42s cubic-bezier(.22,.8,.3,1),transform .42s cubic-bezier(.22,.8,.3,1);}
.bubble.typing{display:inline-flex;align-items:center;gap:5px;padding:13px 15px;}
.bubble.typing.them{color:#7b8794;}
.bubble.typing.tandy{color:var(--on-bubble);}
.bubble.typing span{width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.45;animation:typed 1.1s infinite ease-in-out;}
.bubble.typing span:nth-child(2){animation-delay:.16s;}
.bubble.typing span:nth-child(3){animation-delay:.32s;}
@keyframes typed{0%,60%,100%{transform:translateY(0);opacity:.4;}30%{transform:translateY(-4px);opacity:1;}}

/* ── phone ──────────────────────────────────────────────────── */
.phone{
  --pw:330px;width:var(--pw);background:var(--ink);border-radius:calc(var(--pw)*.17);
  padding:calc(var(--pw)*.035);flex:0 0 auto;position:relative;z-index:2;
}
.phone-screen{background:#fff;border-radius:calc(var(--pw)*.14);overflow:hidden;
  display:flex;flex-direction:column;position:relative;aspect-ratio:9 / 19.5;min-height:calc(var(--pw)*2.05);}
.statusbar{display:flex;justify-content:space-between;align-items:center;padding:11px 22px 4px;}
.statusbar .time{font-size:13px;font-weight:600;letter-spacing:.2px;}
.statusbar .glyphs{display:inline-flex;gap:6px;align-items:center;opacity:.9;}
.island{position:absolute;top:9px;left:50%;transform:translateX(-50%);
  width:calc(var(--pw)*.30);height:calc(var(--pw)*.085);background:var(--ink);border-radius:20px;}
.contact{display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:8px 0 12px;border-bottom:1px solid var(--line-cool);}
.avatar{width:38px;height:38px;border-radius:50%;background:var(--tint);border:1px solid var(--line-cool);
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;color:var(--brand-deep);letter-spacing:.2px;}
.contact .cname{font-size:13.5px;font-weight:600;}
.phone-thread{flex:1;padding:16px 14px;display:flex;flex-direction:column;gap:9px;}
.phone-input{padding:8px 14px 10px;}
.phone-input .pill{height:34px;border-radius:18px;border:1px solid var(--line-cool);
  display:flex;align-items:center;padding:0 14px;font-size:13px;color:#a9b4c0;}
.home-ind{display:flex;justify-content:center;padding:7px 0 8px;}
.home-ind span{width:calc(var(--pw)*.33);height:4.5px;border-radius:3px;background:var(--ink);opacity:.85;}

/* ── contact CTAs ───────────────────────────────────────────── */
.reassure{font-size:13.5px;line-height:1.5;color:var(--muted);margin-top:5px;text-wrap:pretty;}
.on-navy .reassure{color:rgba(255,255,255,.64);}

/* ── hero: cream band ───────────────────────────────────────── */
.hero{background:var(--cream);padding:40px 0 0;overflow:hidden;}
@media(min-width:860px){ .hero{padding:56px 0 0;} }
.hero-grid{display:grid;grid-template-columns:1fr;gap:40px;align-items:start;}
@media(min-width:880px){ .hero-grid{grid-template-columns:1.05fr .95fr;gap:56px;} }
.hero-left{padding-bottom:56px;}
@media(min-width:860px){ .hero-left{padding-bottom:88px;} }
.hero h1{
  font-size:clamp(42px,5.8vw,72px);line-height:1.08;font-weight:var(--w-head);
  letter-spacing:-0.02em;
}
.hero h1 .ln{display:block;}
.hero .lead{margin-top:22px;max-width:486px;}
.hero-actions{margin-top:32px;max-width:494px;}
.hero-actions .reassure{max-width:450px;margin-top:12px;}
.hero .bubble{font-size:15.5px;line-height:1.46;}

/* phone against the tint stage */
.hero-visual{position:relative;display:flex;justify-content:center;align-items:flex-end;min-height:1px;}
.hero-visual .stage{position:absolute;bottom:0;left:50%;transform:translateX(-50%);
  width:min(480px,102%);height:86%;border-radius:var(--r-panel) var(--r-panel) 0 0;background:var(--tint);z-index:1;}
.hero .phone{--pw:330px;}
@media(max-width:879px){
  .hero-grid{gap:8px;}
  .hero-left{padding-bottom:40px;}
  .hero-visual{margin-top:8px;}
  .hero .phone{--pw:300px;}
  .hero-visual .stage{height:84%;width:min(400px,100%);}
}

/* ── feature rows ───────────────────────────────────────────── */
.frow{display:grid;grid-template-columns:1fr;gap:32px;align-items:center;
  margin-top:56px;padding-top:56px;border-top:1px solid var(--line-cool);}
.frow:first-of-type{border-top:0;padding-top:0;margin-top:var(--head-gap);}
@media(min-width:900px){ .frow{grid-template-columns:1fr 1.05fr;gap:64px;} .frow.flip .frow-copy{order:2;} .frow.flip .frow-visual{order:1;} }
.frow-copy .eyebrow{margin-bottom:14px;}
.frow-h{font-size:clamp(26px,3.2vw,32px);font-weight:500;letter-spacing:-0.01em;line-height:1.2;}
.frow-copy p{margin-top:16px;font-size:17px;line-height:1.6;color:var(--muted);text-wrap:pretty;}
.frow-copy p em{font-style:italic;color:var(--text);font-weight:600;}
.chips.light{margin-top:22px;}
.chips.light .chip{border-color:var(--line-strong);color:var(--text);}
.chips.light .chip.more{color:var(--muted);border-color:var(--line-cool);}
.frow-visual{display:flex;justify-content:center;}
.mini-card{width:100%;max-width:420px;background:var(--cream);
  border-radius:var(--r-card);padding:26px 26px 24px;}
.frow.flip .mini-card{background:var(--tint);}
.mini-card .who{font-size:12px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:var(--brand-deep);margin-bottom:16px;}
.phone-thread.mini{display:flex;flex-direction:column;gap:9px;}
.phone-thread.mini .bubble{max-width:90%;font-size:14.5px;line-height:1.4;}
.mini-card .bubble.them{background:#fff;}
.frow-note{max-width:760px;margin:56px auto 0;text-align:center;font-size:17px;line-height:1.6;
  font-weight:500;color:var(--text);text-wrap:pretty;}

/* dual phones (language row) */
.dual{display:flex;gap:20px;justify-content:center;align-items:flex-start;}
.dual .phone{--pw:230px;}
.dual .phone.back{margin-top:48px;}
.dual .tag{font-size:12px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;color:var(--muted);
  text-align:center;margin-bottom:12px;}
.dual .tag b{color:var(--brand-deep);}
.dual-col{display:flex;flex-direction:column;}
.chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:30px;}
.chip{border:1px solid var(--line-strong);border-radius:var(--pill);padding:9px 17px;
  font-size:14px;font-weight:500;color:var(--text);}
.chip.more{color:var(--muted);border-color:var(--line-cool);}
@media(max-width:919px){ .lang-visual{order:-1;} .dual .phone{--pw:236px;} }
@media(max-width:560px){ .dual{flex-direction:column;align-items:center;gap:30px;} .dual .phone.back{margin-top:0;} .dual .phone{--pw:250px;} }

/* ── stat panel: the first dark moment ──────────────────────── */
.statpanel{background:var(--ink);border-radius:var(--r-panel);padding:14px 8px;margin-top:var(--head-gap);
  display:grid;grid-template-columns:1fr;}
@media(min-width:720px){ .statpanel{grid-template-columns:repeat(3,1fr);padding:48px 28px;} }
.statcell{padding:28px 30px;position:relative;}
@media(min-width:720px){ .statcell + .statcell{border-left:1px solid rgba(255,255,255,.14);} }
@media(max-width:719px){ .statcell + .statcell{border-top:1px solid rgba(255,255,255,.14);} }
.statcell .num{font-size:clamp(44px,5.6vw,60px);font-weight:var(--w-head);
  letter-spacing:-0.02em;line-height:1.05;color:var(--brand-bright);font-variant-numeric:proportional-nums;}
.statcell .lbl{margin-top:16px;font-size:15.5px;line-height:1.5;font-weight:400;color:rgba(255,255,255,.78);text-wrap:pretty;}

/* ── how it works: flat steps, tint tiles ───────────────────── */
.steps{display:grid;grid-template-columns:1fr;gap:44px;margin-top:var(--head-gap);}
@media(min-width:820px){ .steps{grid-template-columns:repeat(3,1fr);gap:48px;} }
.step{padding-top:26px;border-top:1px solid var(--line);}
.step .idx{font-size:40px;font-weight:var(--w-head);letter-spacing:-0.02em;
  line-height:1;color:var(--brand-deep);}
.step h3{margin-top:18px;font-size:23px;font-weight:500;letter-spacing:-.2px;}
.step p{margin-top:13px;font-size:16.5px;line-height:1.6;color:var(--muted);text-wrap:pretty;}
.step-visual{width:56px;height:56px;border-radius:16px;background:var(--tint);
  display:grid;place-items:center;margin-bottom:20px;}
.step-emoji{font-size:26px;line-height:1;}

/* ── pricing: flat white panel on the cream band ────────────── */
#pricing{background:var(--cream);}
.plan-single{border-radius:var(--r-panel);margin-top:var(--head-gap);max-width:920px;padding:40px 32px;
  display:grid;grid-template-columns:1fr;gap:36px;align-items:center;}
@media(min-width:760px){ .plan-single{grid-template-columns:300px 1fr;gap:52px;padding:52px 56px;} }
.plan-pricing{display:flex;flex-direction:column;gap:24px;}
@media(min-width:760px){ .plan-pricing{border-right:1px solid var(--line-cool);padding-right:56px;} }
@media(max-width:759px){ .plan-pricing{border-bottom:1px solid var(--line-cool);padding-bottom:32px;} }
.plan-single .pname{font-size:13px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:var(--brand-deep);
  max-width:180px;line-height:1.4;}
.plan-single .price{font-size:60px;font-weight:var(--w-head);letter-spacing:-0.02em;line-height:1;}
.plan-single .price span{font-size:19px;font-weight:500;color:var(--muted);}
.plan-single .btn{margin-top:4px;}
.plan-single .feats{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:16px 32px;}
@media(max-width:759px){ .plan-single .feats{grid-template-columns:1fr;} }
.plan-single .feats li{display:flex;align-items:center;gap:12px;font-size:15.5px;font-weight:400;line-height:1.35;text-wrap:pretty;}
.plan-single .feats svg{width:18px;height:18px;flex:0 0 auto;margin-top:1px;color:var(--brand-deep);}
.plan-single.inverted{background:#fff;color:var(--text);box-shadow:var(--sh-card);}
.plan-single.inverted .price{color:var(--text);}
.plan-blurb{font-size:15px;line-height:1.55;color:var(--muted);text-wrap:pretty;}
.guarantee{margin-top:32px;max-width:640px;font-size:15.5px;line-height:1.6;color:var(--muted);text-wrap:pretty;}
.guarantee b{color:var(--text);font-weight:600;}

/* ── FAQ: hairline rows ─────────────────────────────────────── */
.faq{max-width:820px;margin:var(--head-gap) auto 0;}
.faq-item{border-top:1px solid var(--line-cool);}
.faq-item:last-child{border-bottom:1px solid var(--line-cool);}
.faq-q{width:100%;background:none;border:0;cursor:pointer;font-family:inherit;color:var(--text);
  display:flex;align-items:center;justify-content:space-between;gap:20px;text-align:left;
  padding:26px 4px;font-size:18px;font-weight:500;line-height:1.35;}
.faq-q .faq-ic{width:20px;height:20px;flex:0 0 auto;color:var(--brand-deep);transition:transform .28s cubic-bezier(.22,1,.36,1);}
.faq-q[aria-expanded="true"] .faq-ic{transform:rotate(45deg);}
.faq-a{overflow:hidden;height:0;transition:height .3s cubic-bezier(.22,1,.36,1);}
.faq-a p{padding:0 44px 26px 4px;font-size:16.5px;line-height:1.62;color:var(--muted);text-wrap:pretty;}
@media(prefers-reduced-motion:reduce){ .faq-a,.faq-q .faq-ic{transition:none;} }

/* ── social proof: tint band, flat white card ───────────────── */
.proof{background:var(--tint);}
.proof h2.h{color:var(--brand-deep);}
.proof .eyebrow{color:var(--brand-deep);}
.quote{max-width:900px;margin:var(--head-gap) auto 0;background:#fff;border-radius:var(--r-panel);
  padding:52px 50px 46px;position:relative;}
@media(max-width:560px){ .quote{padding:38px 28px 32px;} }
.quote .mark{font-size:90px;line-height:.7;color:var(--brand);height:42px;display:block;font-weight:var(--w-head);}
.quote p{font-size:clamp(21px,2.6vw,29px);line-height:1.3;
  font-weight:var(--w-head);letter-spacing:-0.01em;color:var(--text);text-wrap:pretty;margin-top:8px;}
.quote .by{margin-top:28px;display:flex;align-items:center;gap:14px;}
.quote .by .avatar{width:48px;height:48px;}
.quote .by .meta{font-size:15.5px;font-weight:600;}
.quote .by .meta span{display:block;font-size:13.5px;font-weight:400;color:var(--muted);}
.proof-note{text-align:center;margin-top:26px;font-size:13.5px;color:var(--brand-deep);opacity:.75;}

/* ── final CTA: the ink band ────────────────────────────────── */
#get-started{background:var(--tint);}
.final-panel{background:var(--ink);border-radius:var(--r-panel);color:#fff;padding:56px 30px;}
@media(min-width:860px){ .final-panel{padding:78px 64px;} }
.final-grid{display:grid;grid-template-columns:1fr;gap:46px;align-items:center;}
@media(min-width:880px){ .final-grid{grid-template-columns:1.02fr .98fr;gap:60px;} }
.final-panel h2{color:#fff;font-size:clamp(33px,4.4vw,50px);
  line-height:1.1;font-weight:var(--w-head);letter-spacing:-0.02em;text-wrap:balance;}
.final-panel .lead{color:rgba(255,255,255,.78);margin-top:20px;max-width:450px;}
.final-panel .btn{border-color:transparent;}
.final-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:var(--r-card);padding:30px;}
.final-card .ttl{font-size:15px;font-weight:600;margin-bottom:16px;}

/* the tint band hugs the panel: kill the gap above/below */
#get-started .final-panel{margin:0;}
#get-started{padding:0 0 96px;}

/* ── footer: cream ──────────────────────────────────────────── */
.foot{background:var(--cream);padding:60px 0 66px;}
.foot .wrap{display:flex;flex-direction:column;gap:22px;}
@media(min-width:720px){ .foot .wrap{flex-direction:row;justify-content:space-between;align-items:flex-start;} }
.foot p{font-size:14.5px;line-height:1.6;color:var(--muted);max-width:440px;margin-top:14px;text-wrap:pretty;}
.foot .links{display:flex;gap:26px;font-size:14.5px;font-weight:500;color:var(--text);}
.foot .links a{display:inline-flex;align-items:center;min-height:44px;}
.foot .links a:hover{opacity:.65;}

/* ── scroll reveal ──────────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(22px);}
.reveal.in{opacity:1;transform:none;transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1!important;transform:none!important;}
  .bubble.ent{opacity:1!important;transform:none!important;}
}

.mono-num{font-variant-numeric:tabular-nums;}