:root{
  --ink:#1F1A16;
  --ink-soft:#6A6058;
  --paper:#FAF6F0;
  --card:#FFFFFF;
  /* Fire-dominant brand ramp. --flame is the TEXT-SAFE deep ember (5.57:1 on
     --paper); --flame-light is decorative only and must never back small text.
     The bright saffron of the gradient is ~1.9:1 on paper and fails AA badly,
     which is why the two roles are separate variables and not one. */
  --flame:#B23A0E;
  --flame-light:#F5A524;
  --stub:#FF3D9A;
  --stub-deep:#D6117A;
  --teal:#06D6A0;
  --teal-deep:#04946E;
  /* Darker variants reserved for small text — the bright brand accents fall
     below WCAG AA at label sizes. */
  --teal-ink:#037A5B;
  --amber-ink:#9A5A12;
  --glow:#FFB86B;
  --line:#EDE5DA;
  --line-strong:#DCD1C3;
  --radius:12px;
  /* WhatsApp's own palette, not ours. Every chat mock on this site is meant to
     be recognised as WhatsApp at a glance, so these are sampled from the real
     client and must not be "brought on brand" — the moment they drift towards
     our orange, the mock reads as a chatbot widget again, which is the exact
     failure the mocks were rebuilt to fix. Our brand shows up in one place
     only: the business's avatar. */
  --wa-green:#008069;      /* header bar */
  --wa-bg:#EFE7DE;         /* chat wallpaper base */
  --wa-in:#FFFFFF;         /* incoming bubble */
  --wa-out:#D9FDD3;        /* outgoing bubble */
  --wa-ink:#111B21;
  /* WhatsApp's own timestamp grey is #667781, which lands at 4.19:1 on the
     outgoing bubble — under AA. Darkened just enough to clear 4.5 on both
     bubble fills; at timestamp size the difference is invisible. */
  --wa-ink-soft:#5B686E;   /* timestamps, placeholder text */
  --wa-tick:#53BDEB;       /* read receipt blue */
  --wa-sys:#FFF3C7;        /* system / encryption notice pill */
  --wa-bar:#F0F2F5;        /* composer bar */
  --wa-link:#026F9E;       /* interactive reply buttons */
  /* The double-tick as a mask, for the places that draw it in CSS rather than
     as inline SVG — a pseudo-element cannot hold markup. Same path as the
     inline copies; keep the two in step if the glyph is ever redrawn. */
  --wa-tick-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 11'%3E%3Cpath d='M11.1.4L4.6 8 2.1 5.5 1 6.6l3.5 3.6L12.2 1.5z'/%3E%3Cpath d='M16.4.4L9.9 8l-.5-.5-1.1 1.1 1.6 1.6L17.5 1.5z'/%3E%3C/svg%3E");
  --gradient-brand:linear-gradient(135deg,#F9B234 0%,#EF7C29 45%,#D13A1E 100%);
  --gradient-warm:linear-gradient(135deg,#FF3D9A 0%,#FF8A5C 100%);
  --gradient-dusk:linear-gradient(135deg,#2B211A 0%,#3B2C22 55%,#4A3628 100%);
  --shadow-soft:0 20px 50px -30px rgba(74,54,38,0.28);
  --shadow-glow:0 14px 34px -12px rgba(178,58,14,0.45);
}
*{box-sizing:border-box;margin:0;padding:0;}

/* The `hidden` attribute is only enforced by a UA rule, and ANY author rule
   that sets `display` on the same element beats it — specificity does not even
   come into it, author styles simply win. The two elements this originally
   caught (the floating chat panel and its "Tap to chat" hint) have since been
   deleted along with the chat bot, but the trap has not gone anywhere: it
   applies to every `hidden` element on the site, and the form steps still rely
   on it. Every DOM test passed throughout the original bug, because jsdom reads
   the .hidden property and evaluates no CSS.

   !important is load-bearing here, not decoration: without it this rule loses
   to the very declarations it exists to defeat. build/test-pages.js asserts it
   stays. */
[hidden]{display:none !important;}

html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto;}}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter',sans-serif;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  position:relative;
  overflow-x:hidden;
}
body::before, body::after{
  content:"";position:fixed;border-radius:50%;pointer-events:none;z-index:0;
}
/* Purely decorative — not worth the fixed-position repaint cost on phones. */
@media(max-width:640px){body::before, body::after{display:none;}}
body::before{
  top:-220px;right:-180px;width:620px;height:620px;
  background:radial-gradient(circle, rgba(249,178,52,0.20), rgba(249,178,52,0) 70%);
}
body::after{
  bottom:-260px;left:-220px;width:660px;height:660px;
  background:radial-gradient(circle, rgba(255,184,107,0.20), rgba(255,184,107,0) 70%);
}
header, main, footer{position:relative;z-index:1;}

.display{font-family:'Manrope',sans-serif;}
.mono{font-family:'Inter',sans-serif;font-weight:600;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}

.wrap{max-width:1180px;margin:0 auto;padding:0 32px;}
@media(max-width:640px){.wrap{padding:0 20px;}}

/* ---------- Header ---------- */
header{
  position:sticky;top:0;z-index:50;
  background:rgba(250,246,240,0.97);
  border-bottom:1px solid var(--line);
  transition:background .2s ease, box-shadow .2s ease;
}
/* Blurring everything behind a sticky bar on every scroll frame is the single
   most expensive effect on the page. Large viewports only. */
@media(min-width:901px){
  header{
    background:rgba(250,246,240,0.78);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
  }
}
/* Once scrolled past the hero the header tightens and the secondary nav steps
   back, so the one action that matters keeps its weight. */
header.scrolled{
  box-shadow:0 10px 30px -22px rgba(74,54,38,0.55);
}
@media(min-width:901px){
  header.scrolled{background:rgba(250,246,240,0.93);}
}
header.scrolled .nav{padding:11px 0;}
header.scrolled .nav-links{opacity:0.72;}
header.scrolled .nav-links:hover{opacity:1;}
header.scrolled .nav-links a[aria-current="page"]::after{bottom:-12px;}
.nav{display:flex;align-items:center;justify-content:space-between;padding:18px 0;transition:padding .2s ease;}
.logo{display:flex;align-items:center;gap:11px;font-family:'Manrope',sans-serif;font-weight:800;font-size:24px;letter-spacing:-0.015em;}
/* The mark is now the brand SVG itself, not a lettered tile — no background,
   no shadow, so the glyph reads cleanly against the translucent header.
   Sized well above the 19px wordmark on purpose: the J is what has to survive
   being seen at a glance, and this rule wins over the img width/height
   attributes, so those are kept in step with it only to reserve layout space. */
.logo .mark{
  width:52px;height:52px;flex-shrink:0;display:block;
}
/* The footer lockup is a sign-off, not a masthead, so it keeps a smaller mark.
   Without this it would inherit the 40px above and tower over 16px text. */
.logo-sm .mark{
  width:40px;height:40px;
}
.nav-links{display:flex;gap:30px;font-size:14.5px;color:var(--ink-soft);}
.nav-links a{position:relative;transition:color .15s ease;}
.nav-links a:hover{color:var(--ink);}
.nav-links a[aria-current="page"]{color:var(--ink);font-weight:600;}
.nav-links a[aria-current="page"]::after{
  content:"";position:absolute;left:0;right:0;bottom:-19px;height:2px;border-radius:2px;background:var(--gradient-brand);
}
@media(max-width:900px){.nav-links{display:none;}}
.nav-toggle{display:none;}
@media(max-width:900px){
  .nav-toggle{
    display:inline-flex;align-items:center;justify-content:center;
    width:38px;height:38px;border-radius:10px;border:1px solid var(--line-strong);
    background:rgba(255,255,255,0.7);cursor:pointer;
  }
}
.mobile-nav{display:none;flex-direction:column;gap:2px;padding:8px 0 18px;border-top:1px solid var(--line);}
.mobile-nav.open{display:flex;}
.mobile-nav a{padding:12px 4px;font-size:15px;color:var(--ink-soft);border-bottom:1px solid var(--line);}
.mobile-nav a[aria-current="page"]{color:var(--flame);font-weight:700;}

.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 23px;border-radius:999px;
  font-size:14.5px;font-weight:600;
  border:1px solid transparent;cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, color .18s ease, background .18s ease;
  font-family:inherit;
}
.btn:focus-visible{outline:2px solid var(--flame);outline-offset:2px;}
.btn-primary{background:var(--gradient-brand);color:#fff;box-shadow:var(--shadow-glow);}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 40px -12px rgba(178,58,14,0.6);}
.btn-ghost{background:rgba(255,255,255,0.72);border-color:var(--line-strong);color:var(--ink);}
.btn-ghost:hover{border-color:var(--flame);color:var(--flame);transform:translateY(-2px);}
.btn-block{width:100%;justify-content:center;}

/* The dotted mono "eyebrow" tag that sat above headings site-wide (.qno, plus
   .qno-on-dark and .value-card .qno) was removed 3 Aug 2026 — every heading now
   starts at the heading. Deleted rather than left unused so nothing reapplies it
   by habit; recover from git history if it is ever wanted back. */

/* ---------- Hero ---------- */
.hero{padding:96px 0 80px;display:grid;grid-template-columns:1.05fr 0.95fr;gap:64px;align-items:center;}
@media(max-width:900px){.hero{grid-template-columns:1fr;padding:52px 0 44px;gap:44px;}}

h1{
  font-family:'Manrope',sans-serif;font-size:clamp(34px,5vw,54px);
  line-height:1.06;font-weight:800;letter-spacing:-0.02em;margin-bottom:22px;
}
h1 em{
  font-style:normal;background:var(--gradient-brand);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero p.lead{font-size:18px;color:var(--ink-soft);max-width:48ch;margin-bottom:30px;}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:26px;}
.trust-line{font-size:13.5px;color:var(--ink-soft);display:flex;align-items:center;gap:10px;}
.trust-line .dots{display:flex;}
.trust-line .dots span{
  width:21px;height:21px;border-radius:50%;border:2px solid var(--paper);
  margin-left:-6px;
}
.trust-line .dots span:nth-child(1){background:var(--flame);}
.trust-line .dots span:nth-child(2){background:var(--teal);}
.trust-line .dots span:nth-child(3){background:var(--stub);}
.trust-line .dots span:first-child{margin-left:0;}

/* ---------- Signature: glass chat card ---------- */
.signature{position:relative;}
.signboard{
  background:var(--gradient-brand);color:#fff;border-radius:20px;
  padding:20px 24px;position:relative;
  box-shadow:0 24px 50px -22px rgba(178,58,14,0.55);
}
.signboard .row{display:flex;justify-content:space-between;align-items:center;}
.signboard .shop{font-family:'Manrope',sans-serif;font-weight:700;font-size:15px;}
.signboard .status{
  font-family:'Inter',sans-serif;font-weight:600;font-size:13px;letter-spacing:0.08em;
  padding:5px 10px;border-radius:6px;background:rgba(255,255,255,0.16);
}
.signboard .hours{font-size:13px;color:rgba(255,255,255,0.78);margin-top:6px;}
.badge-open{
  position:absolute;top:-13px;right:22px;
  background:#fff;color:var(--teal-ink);
  font-family:'Inter',sans-serif;font-size:12px;font-weight:700;
  padding:6px 13px;border-radius:999px;letter-spacing:0.05em;
  box-shadow:0 10px 22px -8px rgba(6,214,160,0.55);
  display:inline-flex;align-items:center;
}
.badge-open::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--teal);
  display:inline-block;margin-right:7px;
  animation:pulseDot 1.6s ease-in-out infinite;
}
@keyframes pulseDot{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(6,214,160,0.5);}50%{opacity:0.55;box-shadow:0 0 0 4px rgba(6,214,160,0);}}

/* ---------- Sections ---------- */
section{padding:76px 0;}
.section-head{max-width:640px;margin-bottom:48px;}
.section-head.center{max-width:680px;margin-left:auto;margin-right:auto;text-align:center;}
h2{font-family:'Manrope',sans-serif;font-size:clamp(25px,3.4vw,35px);font-weight:800;letter-spacing:-0.015em;margin-bottom:14px;}
.section-head p{color:var(--ink-soft);font-size:16px;max-width:54ch;}
.section-head.center p{margin-left:auto;margin-right:auto;}

/* Page hero (inner pages) */
.page-hero{padding:64px 0 56px;max-width:760px;}
.page-hero p.lead{font-size:17px;color:var(--ink-soft);max-width:60ch;margin-top:16px;}

/* Problem band */
.problem{background:var(--gradient-dusk);color:#FAF6F0;border-radius:26px;position:relative;overflow:hidden;}
.problem .section-head p{color:rgba(250,246,240,0.82);}
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
@media(max-width:760px){.stat-row{grid-template-columns:1fr;}}
.stat{
  background:rgba(255,255,255,0.12);
  border:1px solid rgba(255,255,255,0.18);border-radius:16px;padding:28px 24px;
}
.stat .num{font-family:'Manrope',sans-serif;font-size:38px;font-weight:800;color:var(--glow);}
.stat .label{font-size:14px;color:rgba(250,246,240,0.82);margin-top:6px;}

/* Flow */
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
@media(max-width:900px){.flow{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.flow{grid-template-columns:1fr;}}
.flow-step{
  background:var(--card);border:1px solid var(--line);border-radius:18px;
  padding:28px 24px;box-shadow:var(--shadow-soft);
  transition:transform .2s ease, box-shadow .2s ease;
}
.flow-step:hover{transform:translateY(-4px);box-shadow:var(--shadow-glow);}
.flow-step .wo{font-family:'Inter',sans-serif;font-size:13px;color:var(--stub-deep);margin-bottom:14px;font-weight:600;}
.flow-step h3{font-family:'Manrope',sans-serif;font-size:17px;font-weight:700;margin-bottom:8px;}
.flow-step p{font-size:14.2px;color:var(--ink-soft);}

/* Feature ledger */
.ledger{border:1px solid var(--line);border-radius:20px;overflow:hidden;background:var(--card);box-shadow:var(--shadow-soft);}
.ledger-row{display:grid;grid-template-columns:44px 1fr 1.6fr;gap:20px;padding:24px 26px;border-bottom:1px solid var(--line);align-items:start;transition:background .15s ease;}
.ledger-row:last-child{border-bottom:none;}
.ledger-row:hover{background:rgba(178,58,14,0.035);}
.ledger-row .icon{
  width:38px;height:38px;border-radius:11px;background:var(--gradient-brand);
  display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0;
  box-shadow:0 8px 18px -8px rgba(178,58,14,0.55);
}
.ledger-row h3{font-family:'Manrope',sans-serif;font-size:17px;font-weight:700;margin-bottom:4px;}
.ledger-row p{font-size:14.5px;color:var(--ink-soft);}
@media(max-width:640px){.ledger-row{grid-template-columns:38px 1fr;}.ledger-row > p{grid-column:1 / -1;}}

/* Industries */
.industries{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
@media(max-width:900px){.industries{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.industries{grid-template-columns:1fr;}}
.ind-card{
  background:var(--card);border:1px solid var(--line);border-radius:18px;padding:26px 24px;
  box-shadow:var(--shadow-soft);transition:transform .2s ease, box-shadow .2s ease;
}
.ind-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-glow);}
.ind-card .tape{width:32px;height:5px;background:var(--gradient-warm);border-radius:99px;margin-bottom:14px;}
.ind-card h2, .ind-card h3{font-family:'Manrope',sans-serif;font-size:16.5px;font-weight:700;letter-spacing:normal;margin-bottom:8px;}
.ind-card p{font-size:14.2px;color:var(--ink-soft);}
.ind-card ul{list-style:none;font-size:14px;color:var(--ink-soft);margin-top:14px;}
.ind-card li{padding:6px 0;border-top:1px solid var(--line);display:flex;gap:8px;}
.ind-card li:first-child{border-top:none;}
.ind-card li::before{content:"—";color:var(--stub-deep);}

/* Pricing */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
@media(max-width:900px){.price-grid{grid-template-columns:1fr;}}
.price-card{
  background:var(--card);border:1px solid var(--line);border-radius:20px;
  padding:32px 28px;display:flex;flex-direction:column;box-shadow:var(--shadow-soft);
  transition:transform .2s ease, box-shadow .2s ease;
}
.price-card:hover{transform:translateY(-4px);}
.price-card.featured{border:2px solid var(--flame);position:relative;box-shadow:var(--shadow-glow);}
.price-card.featured::before{
  content:"MOST POPULAR";position:absolute;top:-12px;left:26px;
  background:var(--gradient-brand);color:#fff;font-family:'Inter',sans-serif;font-weight:600;
  font-size:12px;letter-spacing:0.06em;padding:5px 11px;border-radius:999px;
}
.price-card .tier{font-family:'Inter',sans-serif;font-weight:600;font-size:13px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:0.05em;}
.price-card .amount{font-family:'Manrope',sans-serif;font-size:33px;font-weight:800;margin:10px 0 4px;}
.price-card .amount span{font-size:14px;color:var(--ink-soft);font-weight:500;font-family:'Inter',sans-serif;}
.price-card .desc{font-size:14px;color:var(--ink-soft);margin-bottom:20px;}
/* Applies to all three cards, so it sits under the grid rather than in each. */
.price-note{font-size:13px;color:var(--ink-soft);margin-top:20px;text-align:center;line-height:1.5;}
.price-card ul{list-style:none;font-size:14.2px;flex:1;margin-bottom:22px;}
.price-card li{padding:7px 0;display:flex;gap:8px;}
.price-card li::before{content:"✓";color:var(--teal-ink);font-weight:700;}

/* FAQ */
.faq{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--card);box-shadow:var(--shadow-soft);}
.faq-item{border-bottom:1px solid var(--line);}
.faq-item:last-child{border-bottom:none;}
.faq-item summary{
  padding:20px 24px;cursor:pointer;font-family:'Manrope',sans-serif;font-weight:700;
  font-size:15.5px;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center;
  transition:background .15s ease;
}
.faq-item summary:hover{background:rgba(178,58,14,0.035);}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:"+";font-family:'Inter',sans-serif;font-weight:600;font-size:20px;color:var(--flame);flex-shrink:0;}
.faq-item[open] summary::after{content:"–";}
.faq-item .faq-a{padding:0 24px 20px;font-size:14.5px;color:var(--ink-soft);max-width:70ch;}

/* CTA */
.cta-band{
  background:var(--gradient-brand);color:#F2F1FF;border-radius:26px;padding:56px 48px;
  display:flex;justify-content:space-between;align-items:center;gap:32px;
  box-shadow:0 30px 60px -28px rgba(178,58,14,0.55);
}
@media(max-width:760px){.cta-band{flex-direction:column;align-items:flex-start;padding:40px 28px;}}
.cta-band h2{color:#fff;margin-bottom:8px;}
.cta-band p{color:rgba(242,241,255,0.82);font-size:15px;}
/* The launcher is pinned bottom-right. Between these widths the content
   column reaches far enough across that the CTA button lands underneath it. */
@media(min-width:761px) and (max-width:1279px){
  .cta-band{padding-right:112px;}
}
/* Nor should the last thing on the page rest under it. */
@media(max-width:760px){
  footer{padding-bottom:96px;}
}

footer{border-top:1px solid var(--line);padding:36px 0;font-size:13.5px;color:var(--ink-soft);}
.footer-row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;}
.footer-links{display:flex;gap:22px;flex-wrap:wrap;}
.footer-links a:hover{color:var(--flame);}

/* ---------- About page ---------- */
.story-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;}
@media(max-width:860px){.story-grid{grid-template-columns:1fr;gap:32px;}}
.story-grid p{color:var(--ink-soft);font-size:15.5px;margin-bottom:16px;}
.story-grid p:last-child{margin-bottom:0;}

.values-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
@media(max-width:900px){.values-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.values-grid{grid-template-columns:1fr;}}
.value-card{
  background:var(--card);border:1px solid var(--line);border-radius:18px;padding:26px 22px;
  box-shadow:var(--shadow-soft);transition:transform .2s ease, box-shadow .2s ease;
}
.value-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-glow);}
.value-card h3{font-family:'Manrope',sans-serif;font-size:16.5px;font-weight:700;margin-bottom:8px;}
.value-card p{font-size:14.2px;color:var(--ink-soft);}

.timeline{border-left:2px solid var(--line-strong);padding-left:28px;}
.timeline-item{position:relative;padding-bottom:32px;}
.timeline-item:last-child{padding-bottom:0;}
.timeline-item::before{
  content:"";position:absolute;left:-33px;top:4px;width:10px;height:10px;border-radius:50%;
  background:var(--gradient-brand);border:2px solid var(--paper);
  box-shadow:0 0 0 3px rgba(178,58,14,0.18);
}
.timeline-item .yr{font-family:'Inter',sans-serif;font-size:13px;color:var(--stub-deep);font-weight:600;margin-bottom:4px;}
.timeline-item h3{font-family:'Manrope',sans-serif;font-size:16px;font-weight:700;margin-bottom:6px;}
.timeline-item p{font-size:14px;color:var(--ink-soft);}

/* ---------- Blog page ---------- */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
@media(max-width:900px){.blog-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:640px){.blog-grid{grid-template-columns:1fr;}}
.blog-card{
  background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden;
  display:flex;flex-direction:column;box-shadow:var(--shadow-soft);
  transition:transform .2s ease, box-shadow .2s ease;
}
.blog-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-glow);}
.blog-card .thumb{
  height:140px;background:var(--gradient-brand);
  display:flex;align-items:center;justify-content:center;
  font-family:'Inter',sans-serif;font-weight:600;color:rgba(255,255,255,0.7);font-size:13px;letter-spacing:0.06em;
}
.blog-card .body{padding:20px 20px 22px;flex:1;display:flex;flex-direction:column;}
.blog-card .tag-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;}
.blog-card .cat{font-family:'Inter',sans-serif;font-weight:600;font-size:12px;color:var(--stub-deep);text-transform:uppercase;letter-spacing:0.05em;}
.blog-card .date{font-family:'Inter',sans-serif;font-weight:600;font-size:12px;color:var(--ink-soft);}
/* h2 on blog.html, where the cards sit directly under the page h1; h3 kept for
   any context that nests them under a section heading. letter-spacing is pinned
   because the global h2 rule would otherwise tighten it. */
.blog-card h2, .blog-card h3{font-family:'Manrope',sans-serif;font-size:16.5px;font-weight:700;letter-spacing:normal;margin-bottom:8px;line-height:1.3;}
.blog-card p{font-size:14.2px;color:var(--ink-soft);flex:1;margin-bottom:14px;}
.blog-card .read{font-size:13.5px;font-weight:600;color:var(--flame);}
.blog-featured{
  display:grid;grid-template-columns:1fr 1fr;gap:0;background:var(--card);
  border:1px solid var(--line);border-radius:20px;overflow:hidden;margin-bottom:40px;
  box-shadow:var(--shadow-soft);
}
@media(max-width:760px){.blog-featured{grid-template-columns:1fr;}}
.blog-featured .thumb{height:100%;min-height:220px;border-radius:0;}
.blog-featured .body{padding:32px 30px;}
/* Manrope, matching every other card title. This rendered in Inter for a while
   because .blog-featured is a separate class from .blog-card and inherited the
   body font — the largest headline on the blog index was the one piece of it
   set in the wrong family. */
.blog-featured h2, .blog-featured h3{font-family:'Manrope',sans-serif;font-size:23px;font-weight:800;letter-spacing:-0.015em;margin-bottom:12px;}
.blog-featured p{font-size:14.5px;}

/* ---------- Contact page ---------- */
.contact-grid{display:grid;grid-template-columns:1.1fr 0.9fr;gap:48px;align-items:start;}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr;gap:36px;}}
.form-card{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:32px;box-shadow:var(--shadow-soft);}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
@media(max-width:520px){.form-row{grid-template-columns:1fr;}}
.field{margin-bottom:18px;}
.field label{display:block;font-size:13.5px;font-weight:600;margin-bottom:7px;}
.field input, .field select, .field textarea{
  width:100%;padding:11px 14px;border:1px solid var(--line-strong);border-radius:10px;
  font-family:'Inter',sans-serif;font-size:14.5px;background:var(--paper);color:var(--ink);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.field textarea{resize:vertical;min-height:110px;}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none;border-color:var(--flame);box-shadow:0 0 0 4px rgba(178,58,14,0.15);
}
.form-note{font-size:13px;color:var(--ink-soft);margin-top:14px;}
.form-step{
  font-family:'Inter',sans-serif;font-size:12.5px;text-transform:uppercase;
  letter-spacing:0.06em;color:var(--flame);font-weight:600;margin-bottom:20px;
  padding-bottom:14px;border-bottom:1px solid var(--line);
}
.field label .opt{
  font-family:'Inter',sans-serif;font-size:12px;text-transform:uppercase;
  letter-spacing:0.05em;color:var(--ink-soft);font-weight:500;margin-left:6px;
}
#form-step-2{
  margin-top:4px;
}
@media (prefers-reduced-motion: no-preference){
  #form-step-2:not([hidden]){animation:jwUp .3s cubic-bezier(.2,1.1,.4,1) both;}
}
.form-privacy{font-size:13px;color:var(--ink-soft);margin-top:16px;line-height:1.5;}
/* Honeypot. display:none keeps it out of the layout and the tab order; bots
   parsing the HTML fill it anyway, and js/contact.js refuses a submission that
   arrives with it filled. (It used to be Netlify Forms that dropped those; since
   the move to Apache hosting the check is ours, so this rule is load-bearing —
   make the field visible and real people start failing it.) */
.hp{display:none;}

/* ---------- Testimonials ----------
   Deliberately quiet: no star ratings, no photos, no logo wall. The claim being
   made is "a real person said this", and ornament around a quote reads as
   compensation for it. Sized so a two-sentence quote fills the card. */
.quote-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
@media(max-width:900px){.quote-grid{grid-template-columns:1fr;}}
.quote-card{
  background:var(--card);border:1px solid var(--line);border-radius:20px;
  padding:28px 26px;box-shadow:var(--shadow-soft);
  display:flex;flex-direction:column;gap:18px;position:relative;
}
.quote-card blockquote{
  font-size:15.5px;line-height:1.6;color:var(--ink);flex:1;
}
/* The quote mark is decoration, so it is drawn rather than spoken. */
.quote-card blockquote::before{
  content:"“";position:absolute;top:10px;right:22px;
  font-family:'Manrope',sans-serif;font-size:60px;line-height:1;
  color:var(--flame);opacity:0.12;pointer-events:none;
}
.quote-card figcaption{display:flex;flex-direction:column;gap:2px;}
.quote-card .who{font-family:'Manrope',sans-serif;font-weight:700;font-size:14.5px;color:var(--ink);}
.quote-card .biz{font-size:13.5px;color:var(--ink-soft);}
.quote-card .quote-tag{
  font-family:'Inter',sans-serif;font-weight:600;font-size:11.5px;text-transform:uppercase;
  letter-spacing:0.05em;color:var(--stub-deep);
}

.info-list{display:flex;flex-direction:column;gap:0;}
.info-item{padding:20px 0;border-bottom:1px solid var(--line);}
.info-item:first-child{padding-top:0;}
.info-item:last-child{border-bottom:none;}
.info-item .lbl{font-family:'Inter',sans-serif;font-weight:600;font-size:12.5px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:6px;}
.info-item .val{font-family:'Manrope',sans-serif;font-weight:700;font-size:16px;}
.info-item .sub{font-size:14px;color:var(--ink-soft);margin-top:3px;}

/* ---------- Utilities ----------
   These replace the inline style="" attributes the pages used to carry, so the
   Content-Security-Policy can forbid inline styles outright rather than having
   to allow style-src-attr. */
.nav-actions{display:flex;align-items:center;gap:10px;}
.logo-sm{font-size:21px;}
.btn-cta{background:var(--stub);color:#fff;}
.section-flush{padding-top:0;}
.page-title{font-size:clamp(30px,4.4vw,46px);}
.stack-24{margin-top:24px;}
/* Two classes are needed: `.ind-card .tape` is more specific than a lone class,
   and the inline style it replaces used to outrank it. */
.tape.tape-teal{background:var(--teal);}
.h-26{font-size:26px;}
.band-pad{padding:60px 32px;}
/* The inline version of this overrode the responsive rules too, so the two-column
   industries grid never collapsed on a phone. As a class it can behave properly. */
.grid-2{grid-template-columns:repeat(2,1fr);}
@media(max-width:760px){.grid-2{grid-template-columns:1fr;}}
.link-u{text-decoration:underline;}
.nf-title{font-size:clamp(26px,3.6vw,38px);}
.nf-lead{font-size:17px;color:var(--ink-soft);max-width:52ch;margin-top:14px;}
.try-note{text-align:center;margin-top:18px;font-size:13.5px;color:var(--ink-soft);}

/* ---------- The demo request under the transcript ----------
   Matched to .jw-inline's 640px so the card and the chat share one edge. The
   transcript is no longer interactive, so this is the only thing on the page
   a visitor can actually do at this point — it should not look like an
   afterthought bolted under the demo. */
.try-ask{max-width:640px;margin:34px auto 0;}
.try-ask .form-card{padding:28px;}
.try-ask .form-row{margin-bottom:16px;}
.try-ask .field{margin-bottom:16px;}
.try-ask .form-row .field{margin-bottom:0;}
.try-ask-h{font-size:20px;line-height:1.3;margin-bottom:8px;}
.try-ask-h em{font-style:italic;color:var(--flame);}
.try-ask-p{font-size:14.5px;color:var(--ink-soft);margin-bottom:22px;line-height:1.55;}
@media(max-width:560px){.try-ask .form-card{padding:22px;}}

/* ---------- Accessibility helpers ---------- */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--card);color:var(--ink);border:1px solid var(--flame);
  padding:12px 20px;border-radius:0 0 12px 0;font-size:14px;font-weight:600;
}
.skip-link:focus{left:0;}
.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;
}
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible{
  outline:2px solid var(--flame);outline-offset:3px;border-radius:4px;
}

/* ---------- Scroll reveal ---------- */
@media (prefers-reduced-motion: no-preference){
  .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1);}
  .reveal.in{opacity:1;transform:none;}
}

/* ---------- Form validation ---------- */
.field .err{display:none;font-size:13px;color:var(--stub-deep);margin-top:6px;font-weight:500;}
.field.invalid input, .field.invalid select, .field.invalid textarea{
  border-color:var(--stub);background:rgba(255,61,154,0.04);
}
.field.invalid input:focus, .field.invalid textarea:focus{box-shadow:0 0 0 4px rgba(255,61,154,0.15);}
.field.invalid .err{display:block;}

/* Replaces the demo-request form once it has been sent. Same padding as the
   card it sits in, so the box doesn't visibly resize on submit. */
.form-done{text-align:center;padding:8px 0;}
.form-done .try-ask-p{margin-bottom:22px;}
.form-note.ok{
  color:var(--teal-ink);background:rgba(6,214,160,0.1);
  border:1px solid rgba(6,214,160,0.32);border-radius:12px;padding:14px 16px;font-size:14px;
}
.form-note.bad{
  color:var(--stub-deep);background:rgba(255,61,154,0.07);
  border:1px solid rgba(255,61,154,0.3);border-radius:12px;padding:14px 16px;font-size:14px;
}
.btn[aria-busy="true"]{opacity:.65;pointer-events:none;}

/* ---------- Blog cards as real links ---------- */
a.blog-card, a.blog-featured{display:flex;color:inherit;}
a.blog-featured{display:grid;}
a.blog-card:hover .read, a.blog-featured:hover .read{color:var(--stub-deep);}
.blog-card .read::after, .blog-featured .read::after{content:" →";transition:none;}

/* ---------- Blog post page ---------- */
.post-hero{padding:56px 0 34px;max-width:760px;}
.post-hero h1{font-size:clamp(29px,4.2vw,44px);margin-bottom:18px;}
.post-meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px;
  font-family:'Inter',sans-serif;font-weight:600;font-size:13px;color:var(--ink-soft);
  padding-top:18px;border-top:1px solid var(--line);
}
.post-meta .cat{color:var(--stub-deep);text-transform:uppercase;letter-spacing:0.05em;font-weight:600;}
.post-meta .sep{width:4px;height:4px;border-radius:50%;background:var(--line-strong);}
.post-lead{font-size:18px;color:var(--ink-soft);max-width:60ch;}

.post-body{max-width:70ch;padding-bottom:24px;}
.post-body h2{font-size:clamp(21px,2.6vw,27px);margin:44px 0 14px;}
.post-body h3{font-family:'Manrope',sans-serif;font-size:18px;font-weight:700;margin:30px 0 10px;}
.post-body p{font-size:16.5px;color:var(--ink-soft);margin-bottom:18px;line-height:1.68;}
.post-body strong{color:var(--ink);font-weight:600;}
.post-body a:not(.btn){color:var(--flame);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;}
.post-body a:not(.btn):hover{color:var(--stub-deep);}
.post-body ul, .post-body ol{margin:0 0 20px 0;padding-left:20px;color:var(--ink-soft);font-size:16.5px;line-height:1.66;}
.post-body li{margin-bottom:9px;}
.post-body ul{list-style:none;padding-left:0;}
.post-body ul li{padding-left:24px;position:relative;}
.post-body ul li::before{
  content:"";position:absolute;left:2px;top:10px;width:7px;height:7px;border-radius:50%;
  background:var(--gradient-brand);
}
.post-body ol li::marker{color:var(--flame);font-weight:700;font-family:'Inter',sans-serif;}
.post-body hr{border:none;border-top:1px solid var(--line);margin:36px 0;}

.pull{
  border-left:3px solid transparent;
  border-image:var(--gradient-brand) 1;
  padding:6px 0 6px 24px;margin:30px 0;
}
.pull p{
  font-family:'Manrope',sans-serif;font-size:20px;font-weight:700;
  color:var(--ink);line-height:1.4;margin:0;letter-spacing:-0.01em;
}
.callout{
  background:var(--card);border:1px solid var(--line);border-left:4px solid var(--teal);
  border-radius:14px;padding:22px 24px;margin:30px 0;box-shadow:var(--shadow-soft);
}
.callout .lbl{
  font-family:'Inter',sans-serif;font-size:12.5px;text-transform:uppercase;
  letter-spacing:0.06em;color:var(--teal-ink);font-weight:600;margin-bottom:8px;
}
.callout p{margin-bottom:0;font-size:15px;}
.post-stat{
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:30px 0;
}
@media(max-width:620px){.post-stat{grid-template-columns:1fr;}}
.post-stat div{
  background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px;
}
.post-stat .n{font-family:'Manrope',sans-serif;font-size:26px;font-weight:800;color:var(--flame);}
.post-stat .t{font-size:13px;color:var(--ink-soft);margin-top:4px;line-height:1.45;}

.post-foot{
  max-width:70ch;border-top:1px solid var(--line);margin-top:36px;padding-top:26px;
  display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
}
.byline{display:flex;align-items:center;gap:12px;}
.byline .av{
  width:38px;height:38px;border-radius:50%;background:var(--gradient-brand);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;color:#fff;
  font-family:'Inter',sans-serif;font-size:13.5px;font-weight:600;
}
.byline .who{font-family:'Manrope',sans-serif;font-weight:700;font-size:14px;}
.byline .role{font-size:13px;color:var(--ink-soft);}

.post-nav{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:44px;}
/* Stacked to one column, the right-aligned "older post" card reads as a
   mistake rather than as a pair — so alignment resets with the layout. */
@media(max-width:620px){.post-nav{grid-template-columns:1fr;}.post-nav .next{text-align:left;}}
.post-nav a{
  background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px 22px;
  box-shadow:var(--shadow-soft);transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.post-nav a:hover{transform:translateY(-3px);box-shadow:var(--shadow-glow);border-color:var(--flame);}
.post-nav .dir{
  font-family:'Inter',sans-serif;font-weight:600;font-size:12px;text-transform:uppercase;
  letter-spacing:0.06em;color:var(--ink-soft);margin-bottom:7px;
}
.post-nav .ttl{font-family:'Manrope',sans-serif;font-weight:700;font-size:15px;line-height:1.35;}
.post-nav .next{text-align:right;}
.post-nav .empty{visibility:hidden;}

/* ---------- 404 ---------- */
.nf{padding:90px 0 70px;max-width:660px;}
.nf .code{
  font-family:'Manrope',sans-serif;font-size:clamp(70px,13vw,128px);font-weight:800;
  line-height:1;letter-spacing:-0.04em;background:var(--gradient-brand);
  -webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:12px;
}
.nf-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px;}
.nf-links a{
  background:var(--card);border:1px solid var(--line);border-radius:999px;
  padding:9px 18px;font-size:14px;transition:border-color .15s ease,color .15s ease;
}
.nf-links a:hover{border-color:var(--flame);color:var(--flame);}

/* ---------- Footer (expanded) ---------- */
.footer-top{
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px;
  padding-bottom:32px;margin-bottom:28px;border-bottom:1px solid var(--line);
}
@media(max-width:860px){.footer-top{grid-template-columns:1fr 1fr;gap:28px;}}
@media(max-width:520px){.footer-top{grid-template-columns:1fr;}}
.footer-top .blurb{font-size:14px;color:var(--ink-soft);margin-top:14px;max-width:34ch;}
/* h2, not h4 — a screen reader walking the outline should not see the footer
   jump two levels below the last heading in the page. Every property the global
   h2 rule sets is overridden here, so the rendering is unchanged. */
.footer-col h2{
  font-family:'Inter',sans-serif;font-size:12.5px;text-transform:uppercase;
  letter-spacing:0.06em;color:var(--ink);font-weight:600;margin-bottom:14px;
}
.footer-col a{display:block;padding:5px 0;font-size:14px;color:var(--ink-soft);}
.footer-col a:hover{color:var(--flame);}

/* ---------- WhatsApp Business surfaces ----------
   One set of chrome, used by every chat mock on the site: the hero, the
   how-it-works walkthrough, and the three industry scenes. They were three
   different invented "chatbot" layouts before, which is exactly what a prospect
   who has been burned by a chatbot recognises and distrusts. What we actually
   sell runs inside WhatsApp, so the mocks show WhatsApp.

   EVERYTHING IS SIZED IN em. The three surfaces are physically different sizes
   (a 360px hero card, a 248px phone, a 180px scene phone) and each one sets a
   single font-size on .wa-screen; the whole layout scales from that. Do not
   reintroduce px inside this block — it desynchronises the three. */
.wa-screen{
  background:var(--wa-bg);overflow:hidden;
  display:flex;flex-direction:column;
  font-size:14px;line-height:1.45;color:var(--wa-ink);
  font-family:'Inter',sans-serif;
}
.wa-top{
  display:flex;align-items:center;gap:.55em;
  padding:.62em .7em;background:var(--wa-green);color:#fff;flex-shrink:0;
}
.wa-back{font-size:1.3em;line-height:1;opacity:.92;margin-right:-.15em;}
.wa-av{
  width:2.35em;height:2.35em;border-radius:50%;flex:0 0 auto;
  background:var(--gradient-brand);color:#fff;
  display:grid;place-items:center;font-weight:800;font-size:.8em;
}
.wa-id{min-width:0;flex:1;}
.wa-name{
  font-weight:600;font-size:.97em;line-height:1.25;
  display:flex;align-items:center;gap:.3em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* The green tick a verified WhatsApp Business account carries. */
.wa-verified{width:.85em;height:.85em;flex:0 0 auto;color:#fff;opacity:.95;}
.wa-sub{font-size:.76em;color:rgba(255,255,255,0.85);line-height:1.3;}
.wa-acts{display:flex;align-items:center;gap:.8em;opacity:.9;flex:0 0 auto;}
.wa-acts svg{width:1.1em;height:1.1em;display:block;}

.wa-paper{
  flex:1;min-height:0;padding:.75em .6em;
  display:flex;flex-direction:column;gap:.35em;justify-content:flex-end;
  background-color:var(--wa-bg);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='none' stroke='%23D9CEC1' stroke-width='1.4' stroke-linecap='round' opacity='.6'%3E%3Ccircle cx='19' cy='23' r='5.5'/%3E%3Cpath d='M52 17h15M52 23h9'/%3E%3Cpath d='M95 28l5.5-5.5L106 28l-5.5 5.5z'/%3E%3Cpath d='M16 68c4-6 10-6 14 0'/%3E%3Ccircle cx='69' cy='76' r='4.5'/%3E%3Cpath d='M97 90h13M97 96h7'/%3E%3Cpath d='M40 100c3-4 8-4 11 0'/%3E%3C/g%3E%3C/svg%3E");
  background-size:9em auto;
}
/* The yellow notice WhatsApp itself puts at the head of a business thread. */
.wa-sys{
  align-self:center;max-width:92%;text-align:center;
  background:var(--wa-sys);color:#5A5340;border-radius:.45em;
  padding:.4em .7em;font-size:.68em;line-height:1.4;
  box-shadow:0 1px 1px rgba(11,20,26,0.08);
}
.wa-b{
  position:relative;max-width:82%;align-self:flex-start;
  background:var(--wa-in);border-radius:.55em;border-top-left-radius:0;
  padding:.42em .55em .3em;font-size:.88em;
  box-shadow:0 1px .5px rgba(11,20,26,0.13);
}
.wa-b.out{
  align-self:flex-end;background:var(--wa-out);
  border-top-left-radius:.55em;border-top-right-radius:0;
}
/* Bubble tails. `background:inherit` is why both bubble colours are flat fills
   and not gradients — a gradient tail would not line up with its bubble. */
.wa-b::after{
  content:"";position:absolute;top:0;left:-.42em;width:.45em;height:.55em;
  background:inherit;clip-path:polygon(100% 0,0 0,100% 100%);
}
.wa-b.out::after{left:auto;right:-.42em;clip-path:polygon(0 0,100% 0,0 100%);}
.wa-meta{
  display:flex;align-items:center;justify-content:flex-end;gap:.25em;
  font-size:.68em;color:var(--wa-ink-soft);margin-top:.15em;
}
.wa-tick{width:1.1em;height:.8em;color:var(--wa-tick);flex:0 0 auto;}
/* Interactive reply buttons — the WhatsApp Business API's own control, which is
   what replaced the invented "Quick actions" flyout the scenes used to show. */
.wa-quick{
  align-self:flex-end;width:82%;max-width:82%;
  display:flex;flex-direction:column;gap:.18em;
}
.wa-quick span{
  background:var(--wa-in);color:var(--wa-link);border-radius:.5em;
  padding:.42em .5em;font-size:.8em;font-weight:500;text-align:center;
  box-shadow:0 1px .5px rgba(11,20,26,0.13);
}
.wa-typing{
  align-self:flex-start;display:flex;align-items:center;gap:.28em;
  background:var(--wa-in);border-radius:.55em;border-top-left-radius:0;
  padding:.7em .65em;box-shadow:0 1px .5px rgba(11,20,26,0.13);
}
.wa-typing i{width:.42em;height:.42em;border-radius:50%;background:#9AA6AC;opacity:.45;}
.wa-bar{
  display:flex;align-items:center;gap:.45em;padding:.45em .5em;
  background:var(--wa-bar);flex-shrink:0;
}
.wa-input{
  flex:1;display:flex;align-items:center;gap:.45em;
  background:#fff;border-radius:1.3em;padding:.5em .8em;
  font-size:.82em;color:var(--wa-ink-soft);
}
.wa-input svg{width:1.15em;height:1.15em;flex:0 0 auto;opacity:.75;}
.wa-input span{flex:1;}
.wa-send{
  width:2.15em;height:2.15em;border-radius:50%;flex:0 0 auto;
  background:var(--wa-green);color:#fff;display:grid;place-items:center;
}
.wa-send svg{width:1.15em;height:1.15em;}
@media (prefers-reduced-motion: no-preference){
  .wa-typing i{animation:jwBlink 1.2s infinite ease-in-out;}
  .wa-typing i:nth-child(2){animation-delay:.18s;}
  .wa-typing i:nth-child(3){animation-delay:.36s;}
}

/* Hero: the WhatsApp window as a flat card rather than inside a phone bezel —
   at hero size a bezel would crop the conversation to two lines. */
.wa-frame{
  margin-top:18px;border-radius:18px;overflow:hidden;
  box-shadow:var(--shadow-soft);border:1px solid rgba(0,0,0,0.06);
}
.wa-frame .wa-screen{font-size:14.5px;min-height:326px;}
@media(max-width:900px){.wa-frame .wa-screen{font-size:13.5px;min-height:0;}}
.wa-caption{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin-top:12px;font-size:12.5px;color:var(--ink-soft);
}
.wa-caption b{
  display:inline-flex;align-items:center;gap:6px;
  font-family:'Manrope',sans-serif;font-weight:700;font-size:12px;
  letter-spacing:0.04em;text-transform:uppercase;color:var(--teal-ink);
  background:rgba(6,214,160,0.1);border:1px solid rgba(6,214,160,0.3);
  border-radius:999px;padding:5px 11px;
}
.wa-caption b::before{content:"✓";}

/* ---------- Walkthrough: a self-playing sequence instead of a video ---------- */
.wt{
  background:var(--card);border:1px solid var(--line);border-radius:22px;
  padding:26px;box-shadow:var(--shadow-soft);margin-bottom:26px;
}
.wt-stage{
  display:grid;grid-template-columns:248px 1fr;gap:28px;align-items:start;
  min-height:396px;
}
@media(max-width:760px){
  .wt-stage{grid-template-columns:1fr;gap:20px;min-height:0;}
  .wt{padding:18px;}
}

.wt-phone{
  background:#241D18;border-radius:30px;padding:9px;position:relative;
  box-shadow:0 24px 46px -20px rgba(45,32,22,0.5);
}
.wt-phone::before{
  content:"";position:absolute;top:16px;left:50%;transform:translateX(-50%);
  width:44px;height:4px;border-radius:99px;background:rgba(255,255,255,0.28);z-index:3;
}
/* The screen is the shared WhatsApp chrome; only the scale is set here. */
.wt-phone .wa-screen{font-size:11px;border-radius:22px;min-height:352px;}
.wt-log{min-height:0;}
/* The "answered in 6 seconds" note rides in as a centred system chip, the same
   shape WhatsApp uses for its own date and encryption notices — so the one
   piece of our own messaging inside the window still belongs there. */
.wa-sys.ok{background:rgba(6,214,160,0.16);color:var(--teal-ink);font-weight:600;}
.wa-sys.ok::before{content:"✓ ";}
@media (prefers-reduced-motion: no-preference){
  .wa-b, .wa-sys, .wa-quick, .wt-card{animation:jwUp .32s cubic-bezier(.2,1.1,.4,1) both;}
}

/* Right-hand column: what the owner sees */
.wt-side{display:flex;flex-direction:column;gap:14px;}
.wt-card{
  border:1px solid var(--line);border-radius:16px;padding:18px 20px;background:var(--paper);
}
.wt-card .lbl{
  font-family:'Inter',sans-serif;font-size:10.5px;text-transform:uppercase;
  letter-spacing:0.07em;color:var(--ink-soft);font-weight:600;margin-bottom:10px;
}
.wt-field{display:flex;gap:10px;font-size:12.5px;padding:5px 0;border-top:1px solid var(--line);}
.wt-field:first-of-type{border-top:none;}
.wt-field b{font-weight:600;color:var(--ink);min-width:64px;flex-shrink:0;}
.wt-field span{color:var(--ink-soft);}
.wt-notify{
  background:var(--gradient-brand);color:#fff;border-color:transparent;
  box-shadow:var(--shadow-glow);
}
.wt-notify .lbl{color:rgba(255,255,255,0.75);}
.wt-notify p{font-size:13px;line-height:1.55;color:rgba(255,255,255,0.95);}
.wt-notify strong{font-weight:700;color:#fff;}

/* Controls */
.wt-bar{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin-top:22px;padding-top:18px;border-top:1px solid var(--line);
}
.wt-btn{
  display:inline-flex;align-items:center;gap:7px;background:var(--card);
  border:1px solid var(--line-strong);border-radius:999px;padding:7px 15px;
  font-family:inherit;font-size:13px;font-weight:600;color:var(--ink);cursor:pointer;
  transition:border-color .15s ease,color .15s ease;
}
.wt-btn:hover{border-color:var(--flame);color:var(--flame);}
.wt-steps{display:flex;gap:8px;flex:1;min-width:160px;}
.wt-pip{
  flex:1;height:4px;border-radius:99px;background:var(--line-strong);
  position:relative;overflow:hidden;
}
.wt-pip::after{
  content:"";position:absolute;inset:0;width:0;background:var(--gradient-brand);
  transition:width .3s linear;
}
.wt-pip.done::after{width:100%;}
.wt-pip.now::after{width:100%;transition:width .3s ease;}
.wt-caption{
  font-family:'Inter',sans-serif;font-size:12px;letter-spacing:0.05em;
  text-transform:uppercase;color:var(--flame);font-weight:600;
}

/* Highlight the matching step card as the sequence advances */
.flow-step{border:1px solid var(--line);}
.flow-step.is-active{
  border-color:var(--flame);box-shadow:var(--shadow-glow);
}

/* ---------- Objection ledger: what goes wrong vs. how it's handled ---------- */
.objections{
  border:1px solid var(--line);border-radius:20px;overflow:hidden;
  background:var(--card);box-shadow:var(--shadow-soft);
}
.obj-head{
  display:grid;grid-template-columns:1fr 1fr;
  font-family:'Inter',sans-serif;font-size:12px;text-transform:uppercase;
  letter-spacing:0.07em;font-weight:600;
  border-bottom:1px solid var(--line-strong);
}
.obj-head div{padding:14px 24px;}
.obj-head .h-bad{color:var(--stub-deep);background:rgba(255,61,154,0.05);}
.obj-head .h-good{color:var(--teal-ink);background:rgba(6,214,160,0.06);}
.obj-row{
  display:grid;grid-template-columns:1fr 1fr;
  border-bottom:1px solid var(--line);
}
.obj-row:last-child{border-bottom:none;}
.obj-row > div{padding:22px 24px;}
.obj-bad{
  background:rgba(255,61,154,0.028);border-right:1px solid var(--line);
}
.obj-row h3{
  font-family:'Manrope',sans-serif;font-size:15.5px;font-weight:700;
  margin-bottom:7px;line-height:1.35;
}
.obj-row p{font-size:14px;color:var(--ink-soft);line-height:1.6;}
.obj-bad h3{color:var(--ink);}
.obj-bad h3::before{
  content:"✕";color:var(--stub-deep);font-weight:700;margin-right:8px;font-size:13.5px;
}
.obj-good h3::before{
  content:"✓";color:var(--teal-ink);font-weight:700;margin-right:8px;font-size:13.5px;
}
/* Stacked on mobile, so each half needs its own visible label. */
@media(max-width:760px){
  .obj-head{display:none;}
  .obj-row{grid-template-columns:1fr;}
  .obj-bad{border-right:none;border-bottom:1px solid var(--line);}
  .obj-row > div::before{
    display:block;font-family:'Inter',sans-serif;font-size:12px;
    text-transform:uppercase;letter-spacing:0.07em;font-weight:600;margin-bottom:8px;
  }
  .obj-bad::before{content:"What owners report";color:var(--stub-deep);}
  .obj-good::before{content:"How Jawabkan handles it";color:var(--teal-ink);}
}

/* ---------- Device showcase: one assistant, three contexts ---------- */
.showcase{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
@media(max-width:960px){.showcase{grid-template-columns:1fr;max-width:400px;margin-left:auto;margin-right:auto;}}

.scene{
  position:relative;border-radius:24px;padding:30px 26px 26px;overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--shadow-soft);
  transition:transform .25s ease, box-shadow .25s ease;
}
.scene:hover{transform:translateY(-5px);box-shadow:var(--shadow-glow);}
/* Each vertical gets its own light, standing in for the setting it lives in. */
.scene.retail{background:linear-gradient(165deg,#EDE9FF 0%,#FAF6F0 62%);}
.scene.food{background:linear-gradient(165deg,#FFEFE2 0%,#FAF6F0 62%);}
.scene.clinic{background:linear-gradient(165deg,#DFFAF1 0%,#FAF6F0 62%);}
.scene::after{
  content:"";position:absolute;top:-70px;right:-70px;width:200px;height:200px;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,255,255,0.85),rgba(255,255,255,0) 70%);
}
.scene-label{
  position:relative;z-index:2;font-family:'Inter',sans-serif;font-weight:600;font-size:12px;
  text-transform:uppercase;letter-spacing:0.06em;color:var(--ink-soft);margin-bottom:18px;
  display:flex;align-items:center;gap:8px;
}
.scene-label b{color:var(--ink);font-weight:600;}

.phone{
  position:relative;z-index:2;margin:0 auto;max-width:232px;
  background:#241D18;border-radius:32px;padding:9px;
  box-shadow:0 28px 54px -22px rgba(45,32,22,0.55);
}
.phone::before{
  content:"";position:absolute;top:16px;left:50%;transform:translateX(-50%);
  width:46px;height:4px;border-radius:99px;background:rgba(255,255,255,0.28);z-index:3;
}
/* The scene handsets run the same WhatsApp chrome as the hero and the
   walkthrough; only the scale differs. The old .ph-* layout — and the floating
   "Quick actions" flyout that overlapped the bezel — were invented UI that
   exists in no messaging app, and the flyout covered the reply it was meant to
   illustrate. The real equivalent is WhatsApp's interactive reply buttons,
   which sit in the thread as .wa-quick. */
.phone .wa-screen{font-size:10.5px;border-radius:24px;min-height:250px;}
.scene-foot{
  position:relative;z-index:2;margin-top:22px;padding-top:16px;
  border-top:1px solid rgba(255,255,255,0.7);
}
/* h2 on industries.html (directly under the page h1), h3 on the homepage where
   the same cards sit under a section h2. Both render identically. */
.scene-foot h2, .scene-foot h3{font-family:'Manrope',sans-serif;font-size:15.5px;font-weight:700;letter-spacing:normal;margin-bottom:5px;}
.scene-foot p{font-size:13.5px;color:var(--ink-soft);line-height:1.5;}

/* In-page trigger that opens the demo widget */
.demo-trigger{
  margin:18px auto 0;display:flex;background:rgba(255,255,255,0.78);
  font-size:14px;padding:10px 20px;
}
.demo-trigger .dot{
  width:7px;height:7px;border-radius:50%;background:var(--teal);flex-shrink:0;
}
@media (prefers-reduced-motion: no-preference){
  .demo-trigger .dot{animation:pulseDot 1.8s ease-in-out infinite;}
}

/* ================= Floating WhatsApp button ================= */
/* Bottom-LEFT — see the note in build.js. This was forced while the demo
   launcher owned the bottom-right corner; that launcher has been removed, so
   the corner is free and this could move there. Left as-is deliberately: it is
   a change to a contact route, not a consequence of deleting the chat.

   z-index 119 is a leftover of the same history — it sat one below .jw (120) so
   the full-width mobile chat panel would paint over this button. There is no
   panel any more, and nothing else competes for the corner, so the value is now
   arbitrary rather than load-bearing. */
/* A 3D diamond, bottom right — where a messaging button is expected, and where
   a thumb reaches on a phone.

   TWO LAYERS, and the split is what makes the animation possible. The diamond
   is `::before` (rotated 45deg, animated); the link itself never rotates, so
   the glyph sits upright with no counter-rotation to keep in sync. The earlier
   single-layer version rotated the whole anchor and cancelled it on the svg —
   which works until anything animates, at which point every keyframe has to
   restate `rotate(45deg)` and the glyph has to counter-animate to match.

   Not clip-path on a square: clip would cut the drop shadow to the diamond's
   bounding box and flatten the depth. The depth is three layers, each doing a
   job — a lit-from-above gradient across the face, an inset highlight along the
   top-left edges with a matching dark inset bottom-right to read as a bevel,
   and a cast shadow offset downward. */
.wa-float{
  position:fixed;right:30px;bottom:30px;z-index:119;
  width:52px;height:52px;
  display:flex;align-items:center;justify-content:center;
  color:#fff;
  /* Slow vertical drift, so the object reads as suspended rather than stuck to
     the glass. Deliberately out of phase with the sway below — matching
     periods would sync into a single bouncing motion. */
  animation:waBob 3.6s ease-in-out infinite;
}
.wa-float::before{
  content:"";position:absolute;inset:0;border-radius:12px;z-index:0;
  /* Two stacked backgrounds: a travelling specular streak over WhatsApp's own
     green. The streak is what sells "polished solid" — a facet that never
     changes its highlight reads as flat paint no matter how it moves. */
  background-image:
    linear-gradient(120deg,transparent 32%,rgba(255,255,255,0.5) 46%,transparent 60%),
    linear-gradient(145deg,#5BF08E 0%,#25D366 42%,#12A150 78%,#0B7A3C 100%);
  background-size:260% 260%, 100% 100%;
  background-position:150% 0, 0 0;
  box-shadow:
    inset 2px 2px 3px rgba(255,255,255,0.55),
    inset -2px -2px 4px rgba(4,72,32,0.5),
    0 14px 26px -10px rgba(9,110,50,0.7),
    0 4px 10px -4px rgba(9,110,50,0.55);
  transform:rotate(45deg);
  animation:waSway 6s ease-in-out infinite, waSheen 6s ease-in-out infinite;
  transition:box-shadow .22s ease;
}
.wa-float svg{
  position:relative;z-index:1;
  filter:drop-shadow(0 1px 1px rgba(4,72,32,0.45));
}
/* Hover deliberately changes NO transform. Both transforms here belong to
   running animations, and an animated property beats a plain hover
   declaration in the cascade — a `transform:scale()` on hover would simply be
   ignored. Speeding the sway up and deepening the shadow gives the same
   "it responded" feedback through properties that are actually free. */
.wa-float:hover::before{
  animation-duration:2.4s, 2.4s;
  box-shadow:
    inset 2px 2px 3px rgba(255,255,255,0.6),
    inset -2px -2px 5px rgba(4,72,32,0.55),
    0 20px 34px -10px rgba(9,110,50,0.8),
    0 6px 14px -4px rgba(9,110,50,0.6);
}
/* Tilts a few degrees either side of rest rather than spinning: a full rotation
   would drag the eye away from the page every few seconds, and this button has
   to stay available without competing with the content. */
@keyframes waSway{
  0%,100%{transform:rotate(45deg) scale(1);}
  25%    {transform:rotate(51deg) scale(1.02);}
  50%    {transform:rotate(45deg) scale(1);}
  75%    {transform:rotate(39deg) scale(1.02);}
}
@keyframes waBob{
  0%,100%{transform:translateY(0);}
  50%    {transform:translateY(-5px);}
}
/* Rests off-face for most of the cycle, so the shine is an occasional glint
   rather than a continuous shimmer. */
@keyframes waSheen{
  0%      {background-position:150% 0, 0 0;}
  55%,100%{background-position:-50% 0, 0 0;}
}
/* Rotated 45deg, the diamond's touch target is its inscribed square — a 52px
   box presents ~37px to a thumb, under the 48dp minimum. Grown on small
   screens so the reachable area clears it. */
@media(max-width:520px){
  .wa-float{right:18px;bottom:18px;width:60px;height:60px;}
}
/* Everything above is decoration; none of it carries meaning, so all of it
   goes. The diamond stays a diamond, at rest. */
@media (prefers-reduced-motion: reduce){
  .wa-float,
  .wa-float::before{animation:none;}
  .wa-float::before{transform:rotate(45deg);transition:none;}
}

/* ================= Demo chat ================= */
/* The floating launcher and everything that orbited it — the compact/dismissed
   diamond, the bilingual hint, the tap-to-chat label, the ping dot, the nudge
   teaser and the floating panel — were removed with the chat bot. What follows
   is the conversation UI itself, which the inline demo on the homepage uses. */

/* Visually-hidden label on the message input. Written by createConversation(),
   so it belongs to the inline demo and outlived the floating widget. */
.jw-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);}

/* Also outlived the widget it was named for: the contact form's second step and
   the walkthrough cards both animate with this. Do not fold it back into a
   chat-scoped rule. */
@keyframes jwUp{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}

/* ---------- The live demo wears WhatsApp too ----------
   Class names stay jw-* because demo.js writes them and build/test-dom.js
   asserts them; only the skin changed. The palette is the same --wa-* set the
   static mocks use, so the working demo and the pictures of it cannot drift
   apart. Perspective matters here and is easy to get backwards: the visitor is
   the CUSTOMER, so THEIR messages are the green outgoing ones with ticks
   (.jw-user) and the shop's replies are white incoming (.jw-bot). */
.jw-head{
  display:flex;align-items:center;gap:10px;padding:11px 13px;
  background:var(--wa-green);color:#fff;flex-shrink:0;
}
.jw-avatar{
  width:38px;height:38px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--gradient-brand);color:#fff;
  font-family:'Inter',sans-serif;font-weight:800;font-size:13px;
}
.jw-head-txt{flex:1;min-width:0;line-height:1.25;}
.jw-head-txt strong{font-family:'Inter',sans-serif;font-size:15.5px;font-weight:600;display:block;}
.jw-status{font-size:12.5px;color:rgba(255,255,255,0.85);display:flex;align-items:center;gap:6px;}
.jw-status i{display:none;}
/* Inline instance has no launcher to collapse into, so it gets a restart
   instead of a minimise — people experiment in it and want a clean slate. */
.jw-restart{
  background:rgba(255,255,255,0.18);border:none;color:#fff;cursor:pointer;
  border-radius:999px;padding:6px 14px;flex-shrink:0;
  font-family:'Inter',sans-serif;font-weight:600;font-size:12px;letter-spacing:0.04em;
  transition:background .15s ease;
}
.jw-restart:hover{background:rgba(255,255,255,0.32);}

/* Closed means gone — launcher included. Returns on the next page load. */
/* Dismissed no longer means gone. The launcher rests as a diamond so there is
   still a way back in — a chat entry point that disappears for the rest of the
   visit costs enquiries from anyone who changes their mind. */
.jw-actions{display:flex;gap:6px;flex-shrink:0;}
.jw-close{
  background:rgba(255,255,255,0.16);border:none;color:#fff;cursor:pointer;
  width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  flex-shrink:0;transition:background .15s ease;
}
/* Close is the header's only control now — the chevron minimise beside it was
   removed as a duplicate. No red tint any more: it was there to tell the two
   buttons apart, and with nothing to contrast against it just read as a
   warning on the ordinary way out. */
.jw-close:hover{background:rgba(255,255,255,0.3);}

/* Sits on the wallpaper as one of WhatsApp's own centred notices, so the honesty
   disclaimer reads as part of the thread instead of as a banner bolted above
   it. It has to stay legible — it is the line that stops a visitor thinking the
   fictional shop's prices are ours. */
/* `width:fit-content` + auto margins make the <p> hug its own text, so it reads
   as one of WhatsApp's centred notice chips without needing an inner span that
   demo.js would have to write. The strip behind it is the wallpaper, so the
   chip sits IN the thread rather than as a banner bolted above it. */
.jw-note{
  font-family:'Inter',sans-serif;font-weight:500;font-size:11.5px;line-height:1.45;
  color:#5A5340;background:var(--wa-sys);
  width:fit-content;max-width:92%;margin:0 auto;
  padding:5px 10px;border-radius:7px;text-align:center;
  box-shadow:0 1px 1px rgba(11,20,26,0.08);
}
.jw-inline .jw-note{
  box-shadow:0 1px 1px rgba(11,20,26,0.08);
}
/* min-height:0 is load-bearing: a column flex child defaults to min-height:auto,
   so a long conversation would push the panel past its own max-height. */
.jw-log{
  flex:1;min-height:0;overflow-y:auto;padding:14px 12px 6px;
  display:flex;flex-direction:column;gap:2px;
  background-color:var(--wa-bg);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='none' stroke='%23D9CEC1' stroke-width='1.4' stroke-linecap='round' opacity='.6'%3E%3Ccircle cx='19' cy='23' r='5.5'/%3E%3Cpath d='M52 17h15M52 23h9'/%3E%3Cpath d='M95 28l5.5-5.5L106 28l-5.5 5.5z'/%3E%3Cpath d='M16 68c4-6 10-6 14 0'/%3E%3Ccircle cx='69' cy='76' r='4.5'/%3E%3Cpath d='M97 90h13M97 96h7'/%3E%3Cpath d='M40 100c3-4 8-4 11 0'/%3E%3C/g%3E%3C/svg%3E");
  background-size:132px auto;
}
/* Shared shell for both instances */
/* Wallpaper on the shell, not just on the log: the notice chip and the reply
   buttons sit outside .jw-log and would otherwise float on white. padding-top
   rather than a margin on the chip, so the gap cannot collapse through. */
.jw-convo{
  display:flex;flex-direction:column;flex:1;min-height:0;
  background:var(--wa-bg);padding-top:10px;
}

/* ---------- Inline instance: sits in the page, covers nothing ---------- */
.jw-inline{
  background:var(--card);border:1px solid var(--line);border-radius:22px;
  overflow:hidden;box-shadow:var(--shadow-soft);
  display:flex;flex-direction:column;max-width:640px;margin:0 auto;
}
.jw-inline .jw-log{min-height:326px;max-height:440px;}
.jw-inline .jw-bubble{font-size:14.2px;}
.jw-inline .jw-chip{font-size:13.5px;}
.jw-inline .jw-input{font-size:14.5px;}
@media(max-width:560px){
  .jw-inline .jw-log{min-height:280px;max-height:60vh;}
}
.jw-msg{display:flex;flex-direction:column;margin-bottom:8px;max-width:82%;}
.jw-bot{align-items:flex-start;align-self:flex-start;}
.jw-user{align-items:flex-end;align-self:flex-end;}
.jw-bubble{
  position:relative;
  padding:7px 9px 5px;font-size:14.2px;line-height:1.46;color:var(--wa-ink);
  border-radius:8px;border-top-left-radius:0;background:var(--wa-in);
  box-shadow:0 1px .5px rgba(11,20,26,0.13);
  white-space:pre-wrap;word-break:break-word;
}
.jw-user .jw-bubble{
  background:var(--wa-out);color:var(--wa-ink);
  border-top-left-radius:8px;border-top-right-radius:0;
}
/* Same tail trick as the static mocks: a clipped square inheriting the bubble
   fill, which is why both fills stay flat colours. */
.jw-bubble::after{
  content:"";position:absolute;top:0;left:-7px;width:8px;height:9px;
  background:inherit;clip-path:polygon(100% 0,0 0,100% 100%);
}
.jw-user .jw-bubble::after{left:auto;right:-7px;clip-path:polygon(0 0,100% 0,0 100%);}
/* demo.js nests the timestamp INSIDE the bubble, so it floats bottom-right the
   way WhatsApp sets it rather than sitting under the bubble as a caption. */
.jw-time{
  float:right;font-family:'Inter',sans-serif;font-weight:400;
  font-size:11px;color:var(--wa-ink-soft);
  margin:6px -3px -2px 8px;display:flex;align-items:center;gap:3px;
}
/* Read receipts belong only on the visitor's own messages. */
.jw-user .jw-time::after{
  content:"";width:15px;height:11px;flex-shrink:0;
  background-color:var(--wa-tick);
  -webkit-mask:var(--wa-tick-mask) no-repeat center/contain;
  mask:var(--wa-tick-mask) no-repeat center/contain;
}
.jw-typing .jw-bubble{padding:11px 12px;}
.jw-dots{display:flex;gap:4px;align-items:center;}
.jw-dots i{width:6px;height:6px;border-radius:50%;background:#9AA6AC;opacity:.45;}
@media (prefers-reduced-motion: no-preference){
  .jw-dots i{animation:jwBlink 1.2s infinite ease-in-out;}
  .jw-dots i:nth-child(2){animation-delay:.18s;}
  .jw-dots i:nth-child(3){animation-delay:.36s;}
}
@keyframes jwBlink{0%,60%,100%{opacity:.35;transform:translateY(0);}30%{opacity:1;transform:translateY(-3px);}}

/* Centred in the thread like WhatsApp's own notices, not pinned left as a
   badge — it is a statement about the conversation, not about one message. */
.jw-flag{
  align-self:center;text-align:center;max-width:90%;
  font-family:'Inter',sans-serif;font-weight:500;font-size:12px;
  color:#5A5340;background:var(--wa-sys);
  border-radius:7px;padding:5px 10px;margin:2px 0 10px;
  box-shadow:0 1px 1px rgba(11,20,26,0.08);
}
/* Suggested questions, styled as WhatsApp's interactive reply buttons. */
.jw-chips{
  display:flex;flex-wrap:wrap;gap:6px;padding:0 12px 10px;flex-shrink:0;
  background:var(--wa-bg);
}
.jw-chips:empty{padding:0;}
.jw-chip{
  background:var(--wa-in);border:none;border-radius:7px;
  padding:7px 12px;font-size:13px;color:var(--wa-link);cursor:pointer;
  font-family:inherit;font-weight:500;
  box-shadow:0 1px .5px rgba(11,20,26,0.13);
  transition:background .15s ease, transform .15s ease;
}
.jw-chip:hover{background:#F3F7F9;transform:translateY(-1px);}

.jw-form{
  display:flex;align-items:center;gap:7px;padding:8px 9px;
  background:var(--wa-bar);flex-shrink:0;
}
.jw-input{
  flex:1;min-width:0;padding:10px 15px;border:none;border-radius:22px;
  font-family:inherit;font-size:14.2px;background:#fff;color:var(--wa-ink);
}
.jw-input::placeholder{color:var(--wa-ink-soft);}
.jw-input:focus{outline:none;box-shadow:0 0 0 2px rgba(0,128,105,0.35);}
.jw-send{
  width:42px;height:42px;border-radius:50%;border:none;cursor:pointer;flex-shrink:0;
  background:var(--wa-green);color:#fff;display:flex;align-items:center;justify-content:center;
  transition:transform .15s ease, background .15s ease;
}
.jw-send:hover{transform:scale(1.06);background:#00705C;}