: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;
  --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. `.jw-panel{display:flex}` and
   `.jw-tuck{display:inline-flex}` were therefore overriding `hidden`, so the
   chat panel and the "Tap to chat" hint rendered on every page load no matter
   what the script set. Every DOM test still passed, 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:10px;font-family:'Manrope',sans-serif;font-weight:800;font-size:19px;letter-spacing:-0.01em;}
/* 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. */
.logo .mark{
  width:28px;height:28px;flex-shrink:0;display:block;
}
.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);}}

.stub{
  background:rgba(255,255,255,0.95);border:1px solid rgba(255,255,255,0.9);border-radius:20px;
  margin-top:18px;position:relative;overflow:hidden;
  box-shadow:var(--shadow-soft);
}
@media(min-width:901px){
  .stub{background:rgba(255,255,255,0.82);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);}
}
.stub-head{
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 22px;border-bottom:1px solid var(--line);
}
.stub-head .tag{font-family:'Inter',sans-serif;font-weight:600;font-size:12.5px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:0.05em;}
.stub-body{padding:20px 22px 22px;}
.msg{display:flex;gap:10px;margin-bottom:14px;}
.msg .bubble{
  background:var(--paper);border:1px solid var(--line);
  padding:11px 14px;border-radius:4px 14px 14px 14px;font-size:14px;max-width:270px;
}
.msg.out{flex-direction:row-reverse;}
.msg.out .bubble{background:var(--gradient-brand);color:#fff;border-color:transparent;border-radius:14px 4px 14px 14px;}
.stamp{
  margin-top:6px;display:inline-flex;align-items:center;gap:6px;
  padding:8px 16px;border:1px solid rgba(6,214,160,0.35);color:var(--teal-ink);
  background:rgba(6,214,160,0.1);
  font-family:'Manrope',sans-serif;font-weight:700;font-size:13px;
  letter-spacing:0.04em;text-transform:uppercase;border-radius:999px;
}
.stamp::before{content:"✓";}
@media (prefers-reduced-motion: no-preference){
  .stamp{animation:stampIn 0.5s cubic-bezier(.2,1.4,.4,1) 0.35s both;}
}
@keyframes stampIn{0%{opacity:0;transform:scale(0.85);}100%{opacity:1;transform:scale(1);}}
.stub-foot{
  background:rgba(250,246,240,0.6);padding:12px 22px;border-top:1px solid var(--line);
  font-size:12.5px;color:var(--ink-soft);display:flex;justify-content:space-between;
}

/* ---------- 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:16px;}
.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);}

/* ---------- 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;}
.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);}

/* ---------- 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;
}
.wt-screen{background:var(--card);border-radius:22px;overflow:hidden;}
.wt-head{display:flex;align-items:center;gap:9px;padding:20px 12px 11px;border-bottom:1px solid var(--line);}
.wt-av{width:26px;height:26px;border-radius:8px;flex-shrink:0;}
.wt-name{font-family:'Manrope',sans-serif;font-size:12px;font-weight:700;line-height:1.3;}
.wt-live{font-size:10.5px;color:var(--teal-ink);display:flex;align-items:center;gap:4px;}
.wt-live::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--teal);}
.wt-log{
  padding:12px;display:flex;flex-direction:column;gap:8px;
  min-height:250px;justify-content:flex-end;
}

.wt-b{
  font-size:11.5px;line-height:1.5;padding:8px 10px;max-width:92%;
  background:var(--paper);border:1px solid var(--line);
  border-radius:3px 12px 12px 12px;align-self:flex-start;
}
.wt-b.out{
  align-self:flex-end;background:var(--gradient-brand);color:#fff;
  border-color:transparent;border-radius:12px 3px 12px 12px;
}
.wt-stamp{
  align-self:flex-start;font-family:'Manrope',sans-serif;font-weight:700;
  font-size:9.5px;letter-spacing:0.04em;text-transform:uppercase;
  color:var(--teal-ink);background:rgba(6,214,160,0.11);
  border:1px solid rgba(6,214,160,0.3);border-radius:999px;padding:5px 11px;
}
.wt-stamp::before{content:"✓ ";}
.wt-dots-typing{display:flex;gap:4px;padding:11px 12px;}
.wt-dots-typing i{width:6px;height:6px;border-radius:50%;background:var(--flame-light);opacity:.4;}
@media (prefers-reduced-motion: no-preference){
  .wt-dots-typing i{animation:jwBlink 1.2s infinite ease-in-out;}
  .wt-dots-typing i:nth-child(2){animation-delay:.18s;}
  .wt-dots-typing i:nth-child(3){animation-delay:.36s;}
  .wt-b, .wt-stamp, .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;
}
.phone-screen{background:var(--card);border-radius:24px;overflow:hidden;}

.ph-head{
  display:flex;align-items:center;gap:8px;padding:20px 11px 10px;
  border-bottom:1px solid var(--line);
}
.ph-av{
  width:26px;height:26px;border-radius:8px;background:var(--gradient-brand);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;color:#fff;
  font-family:'Inter',sans-serif;font-size:11.5px;font-weight:600;
}
.ph-who{min-width:0;line-height:1.25;}
.ph-name{font-family:'Manrope',sans-serif;font-size:12px;font-weight:700;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ph-status{font-size:10.5px;color:var(--teal-ink);display:flex;align-items:center;gap:4px;}
.ph-status::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--teal);}

.ph-body{padding:12px 11px 16px;display:flex;flex-direction:column;gap:7px;min-height:186px;}
.ph-b{
  font-size:11.5px;line-height:1.45;padding:7px 9px;max-width:90%;
  background:var(--paper);border:1px solid var(--line);
  border-radius:3px 12px 12px 12px;
}
.ph-b.out{
  align-self:flex-end;background:var(--gradient-brand);color:#fff;border-color:transparent;
  border-radius:12px 3px 12px 12px;
}
.ph-b .lang{
  display:block;font-family:'Inter',sans-serif;font-weight:600;font-size:9.5px;
  letter-spacing:0.05em;opacity:0.62;margin-bottom:3px;text-transform:uppercase;
}

/* Floating quick-action panel, overlapping the handset */
.ph-menu{
  position:absolute;right:-16px;bottom:34px;width:136px;z-index:4;
  background:rgba(255,255,255,0.96);border:1px solid rgba(255,255,255,0.95);
  border-radius:13px;padding:11px 12px;
  box-shadow:0 16px 32px -14px rgba(45,32,22,0.4);
}
/* Six of these render on the industries page — blur on each is not free. */
@media(min-width:901px){
  .ph-menu{background:rgba(255,255,255,0.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);}
}
@media(max-width:420px){.ph-menu{right:-6px;width:126px;}}
/* A label inside the simulated phone, not a section heading — it was an <h4>,
   which put fake UI chrome into the page's real heading outline. */
.ph-menu .qa-label{
  font-family:'Inter',sans-serif;font-size:10px;text-transform:uppercase;
  letter-spacing:0.07em;color:var(--ink-soft);font-weight:600;margin-bottom:7px;
}
.ph-menu ol{list-style:none;counter-reset:qa;}
.ph-menu li{
  counter-increment:qa;font-size:11px;line-height:1.35;color:var(--ink);
  padding:4px 0;display:flex;gap:6px;border-top:1px solid rgba(237,229,218,0.9);
}
.ph-menu li:first-child{border-top:none;}
.ph-menu li::before{
  content:counter(qa);font-family:'Inter',sans-serif;font-size:10px;
  color:var(--flame);font-weight:600;flex-shrink:0;
}
.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 on purpose — see the note in build.js. The demo launcher owns the
   bottom-right corner and so do .jw-hint, .jw-tuck and .jw-nudge, which all
   hang off it; a second button stacked above the launcher lands under all of
   them.

   z-index sits one below .jw (120) rather than above it. On phones the chat
   panel spans the full width from left:0, so it paints over this button
   instead of leaving a green circle floating on an open conversation — and
   because it genuinely covers it, the panel takes the taps too. Nothing has to
   listen for the panel opening. */
.wa-float{
  position:fixed;left:22px;bottom:22px;z-index:119;
  width:56px;height:56px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  /* WhatsApp's own green, not a brand colour of ours. The white-on-green
     lockup is what makes the glyph readable at this size with no label, which
     is the whole reason the button can be label-free. */
  background:#25D366;
  color:#fff;
  box-shadow:0 16px 34px -12px rgba(9,110,50,0.75);
  transition:transform .2s ease, box-shadow .2s ease;
}
/* Matches .jw-launch's lift, so the two floating controls behave as a pair. */
.wa-float:hover{
  transform:translateY(-3px) scale(1.04);
  box-shadow:0 22px 44px -14px rgba(9,110,50,0.85);
}
/* Smaller on phones, but still over the 48dp minimum tap target. */
@media(max-width:520px){
  .wa-float{left:14px;bottom:14px;width:52px;height:52px;}
}
@media (prefers-reduced-motion: reduce){
  .wa-float{transition:none;}
  .wa-float:hover{transform:none;}
}

/* ================= Demo chat widget ================= */
/* The container stretches full-width on mobile, so it must not intercept taps
   meant for the page behind it — only its actual controls do. */
.jw{position:fixed;right:22px;bottom:22px;z-index:120;font-family:'Inter',sans-serif;pointer-events:none;}
@media(max-width:520px){.jw{right:14px;bottom:14px;left:14px;}}
.jw-launch, .jw-panel, .jw-nudge{pointer-events:auto;}
.jw-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);}

.jw-launch{
  position:relative;margin-left:auto;
  width:58px;height:58px;border-radius:50%;border:none;cursor:pointer;
  background:var(--gradient-brand);color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 16px 34px -12px rgba(178,58,14,0.7);
  transition:transform .2s ease, box-shadow .2s ease;
}
.jw-launch:hover{transform:translateY(-3px) scale(1.04);box-shadow:0 22px 44px -14px rgba(178,58,14,0.8);}

/* ---------- Compact state ----------
   While the page is being scrolled the launcher folds down into a small rotated
   diamond carrying just the J. It shrinks rather than hides: a control that
   vanishes has to be rediscovered. One rotation into the shape, then still —
   a permanent spin would compete with the reading it's making room for. */
/* Scaled, never resized: width/height would force layout on every frame, which
   is precisely the jank this audience's phones can't absorb. transform and
   border-radius stay off the layout path. The element box remains 58px, so the
   tap target never drops below the 48dp minimum even though it looks like 40. */
.jw-launch{
  transition:transform .3s cubic-bezier(.2,.9,.3,1),
             border-radius .3s ease,
             box-shadow .18s ease;
}
.jw-mark{
  display:none;font-family:'Manrope',sans-serif;font-weight:800;font-size:24px;
  line-height:1;color:#fff;transform:rotate(-45deg);
}
/* The diamond is both the scrolling state and the put-away state. Same look,
   different reasons: is-compact reverts on its own, is-dismissed does not. */
.jw.is-compact .jw-launch,
.jw.is-dismissed .jw-launch{
  transform:rotate(45deg) scale(0.69);
  border-radius:16px;
  box-shadow:0 10px 22px -8px rgba(178,58,14,0.7);
}
.jw.is-compact .jw-launch:hover,
.jw.is-dismissed .jw-launch:hover{transform:rotate(45deg) scale(0.75);}
.jw.is-compact .jw-launch-icon,
.jw.is-dismissed .jw-launch-icon{display:none;}
.jw.is-compact .jw-mark,
.jw.is-dismissed .jw-mark{display:block;}
.jw.is-compact .jw-ping,
.jw.is-dismissed .jw-ping{opacity:0;}

/* Bilingual prompt — the multilingual claim, demonstrated in two words. */
.jw-hint{
  position:absolute;right:2px;bottom:70px;
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  background:var(--card);border:1px solid var(--line-strong);border-radius:999px;
  padding:7px 14px;box-shadow:var(--shadow-soft);pointer-events:none;
  font-family:'Inter',sans-serif;font-size:12px;letter-spacing:0.04em;
  color:var(--ink);font-weight:500;
  transition:opacity .25s ease, transform .25s ease;
}
.jw-hint b{color:var(--flame);font-weight:600;}
.jw-hint::after{
  content:"";position:absolute;right:24px;bottom:-5px;
  width:8px;height:8px;background:var(--card);
  border-right:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong);
  transform:rotate(45deg);
}
/* Yields to the compact state, the open panel, and the nudge that shares its slot. */
.jw.is-compact .jw-hint,
.jw.is-dismissed .jw-hint,
.jw.jw-open .jw-hint,
.jw.has-nudge .jw-hint{opacity:0;transform:translateY(6px);}

/* "Tap to chat" — the one-off label that appears when the launcher folds away.
   Same pill as .jw-hint so it reads as the same family of thing, but it sits
   lower because the folded launcher is smaller than the full one. It shares the
   slot with .jw-hint, which the is-dismissed rule above has already cleared. */
.jw-tuck{
  position:absolute;right:2px;bottom:58px;
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  background:var(--card);border:1px solid var(--line-strong);border-radius:999px;
  padding:7px 14px;box-shadow:var(--shadow-soft);pointer-events:none;
  font-family:'Inter',sans-serif;font-size:12px;letter-spacing:0.04em;
  color:var(--ink);font-weight:500;
  animation:jwTuckIn .3s cubic-bezier(.2,1.1,.4,1) both;
}
.jw-tuck b{color:var(--flame);font-weight:600;}
.jw-tuck::after{
  content:"";position:absolute;right:20px;bottom:-5px;
  width:8px;height:8px;background:var(--card);
  border-right:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong);
  transform:rotate(45deg);
}
@keyframes jwTuckIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion: reduce){
  .jw-tuck{animation:none;}
}

/* Reduced motion removes the rotation, not the shrink — the point of compacting
   is to reclaim space, which is a layout courtesy rather than decoration. */
@media (prefers-reduced-motion: reduce){
  .jw-launch{transition:none;}
  .jw.is-compact .jw-launch,
  .jw.is-dismissed .jw-launch{transform:scale(0.7);border-radius:50%;}
  .jw.is-compact .jw-launch:hover,
  .jw.is-dismissed .jw-launch:hover{transform:scale(0.76);}
  .jw-mark{transform:none;}
  .jw-hint{transition:none;}
}
.jw-launch-close{display:none;}
.jw-open .jw-launch-icon{display:none;}
.jw-open .jw-launch-close{display:flex;}
.jw-open .jw-ping{display:none;}
.jw-ping{
  position:absolute;top:2px;right:2px;width:12px;height:12px;border-radius:50%;
  background:var(--teal);border:2px solid #fff;
}
@media (prefers-reduced-motion: no-preference){
  .jw-ping{animation:pulseDot 1.8s ease-in-out infinite;}
}

.jw-nudge{
  position:absolute;right:0;bottom:70px;width:264px;
  background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:16px 34px 16px 18px;box-shadow:var(--shadow-soft);cursor:pointer;
  text-align:left;
}
.jw-nudge p{font-size:14px;color:var(--ink-soft);line-height:1.5;}
.jw-nudge strong{color:var(--ink);}
.jw-nudge-x{
  position:absolute;top:8px;right:10px;background:none;border:none;cursor:pointer;
  font-size:18px;line-height:1;color:var(--ink-soft);padding:2px 5px;border-radius:6px;
}
.jw-nudge-x:hover{color:var(--ink);background:var(--paper);}
@media (prefers-reduced-motion: no-preference){
  .jw-nudge{animation:jwUp .35s cubic-bezier(.2,1.2,.4,1) both;}
}
@keyframes jwUp{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}

.jw-panel{
  position:absolute;right:0;bottom:72px;width:376px;max-height:min(600px,calc(100vh - 130px));
  background:var(--card);border:1px solid var(--line);border-radius:20px;overflow:hidden;
  display:flex;flex-direction:column;
  box-shadow:0 30px 70px -26px rgba(74,54,38,0.5);
}
@media(max-width:520px){
  .jw-panel{width:auto;left:0;right:0;max-height:calc(100vh - 120px);}
}
@media (prefers-reduced-motion: no-preference){
  .jw-panel{animation:jwUp .28s cubic-bezier(.2,1.1,.4,1) both;}
}
.jw-head{
  display:flex;align-items:center;gap:11px;padding:15px 16px;
  background:var(--gradient-brand);color:#fff;flex-shrink:0;
}
.jw-avatar{
  width:34px;height:34px;border-radius:10px;flex-shrink:0;display:block;
  box-shadow:0 0 0 1px rgba(255,255,255,0.35);
}
.jw-head-txt{flex:1;min-width:0;line-height:1.3;}
.jw-head-txt strong{font-family:'Manrope',sans-serif;font-size:15px;font-weight:700;display:block;}
.jw-status{font-size:12.5px;color:rgba(255,255,255,0.82);display:flex;align-items:center;gap:6px;}
.jw-status i{width:6px;height:6px;border-radius:50%;background:#5BFFC4;flex-shrink:0;}
/* 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);}
/* Minimised mid-conversation: the launcher dot turns amber to say it's still there. */
.jw.has-thread .jw-ping{background:var(--glow);}

.jw-note{
  font-family:'Inter',sans-serif;font-weight:600;font-size:12px;letter-spacing:0.03em;
  color:var(--ink-soft);background:var(--paper);
  padding:9px 16px;border-bottom:1px solid var(--line);flex-shrink:0;
}
/* 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:18px 16px 6px;
  display:flex;flex-direction:column;gap:4px;
  background:linear-gradient(180deg,rgba(250,246,240,0.5),rgba(255,255,255,0));
}
/* Shared shell for both instances */
.jw-convo{display:flex;flex-direction:column;flex:1;min-height:0;}

/* ---------- 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:12px;max-width:84%;}
.jw-bot{align-items:flex-start;align-self:flex-start;}
.jw-user{align-items:flex-end;align-self:flex-end;}
.jw-bubble{
  padding:11px 14px;font-size:14.2px;line-height:1.52;
  border-radius:4px 15px 15px 15px;background:var(--paper);border:1px solid var(--line);
  white-space:pre-wrap;word-break:break-word;
}
.jw-user .jw-bubble{
  background:var(--gradient-brand);color:#fff;border-color:transparent;
  border-radius:15px 4px 15px 15px;
}
.jw-time{
  font-family:'Inter',sans-serif;font-weight:600;font-size:10.5px;color:var(--ink-soft);
  margin-top:5px;padding:0 3px;
}
.jw-typing .jw-bubble{padding:13px 15px;}
.jw-dots{display:flex;gap:4px;align-items:center;}
.jw-dots i{width:6px;height:6px;border-radius:50%;background:var(--flame-light);opacity:.4;}
@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);}}

.jw-flag{
  align-self:flex-start;font-family:'Inter',sans-serif;font-weight:600;font-size:12px;
  color:var(--amber-ink);background:rgba(255,184,107,0.14);border:1px solid rgba(255,184,107,0.4);
  border-radius:999px;padding:5px 11px;margin:-4px 0 12px;letter-spacing:0.02em;
}
.jw-chips{
  display:flex;flex-wrap:wrap;gap:7px;padding:0 16px 12px;flex-shrink:0;
}
.jw-chips:empty{padding:0;}
.jw-chip{
  background:var(--card);border:1px solid var(--line-strong);border-radius:999px;
  padding:7px 13px;font-size:13px;color:var(--flame);cursor:pointer;
  font-family:inherit;font-weight:500;
  transition:border-color .15s ease, background .15s ease, transform .15s ease;
}
.jw-chip:hover{border-color:var(--flame);background:rgba(178,58,14,0.06);transform:translateY(-1px);}

.jw-form{
  display:flex;gap:8px;padding:12px 14px;border-top:1px solid var(--line);
  background:var(--card);flex-shrink:0;
}
.jw-input{
  flex:1;min-width:0;padding:11px 14px;border:1px solid var(--line-strong);border-radius:999px;
  font-family:inherit;font-size:14.2px;background:var(--paper);color:var(--ink);
}
.jw-input:focus{outline:none;border-color:var(--flame);box-shadow:0 0 0 3px rgba(178,58,14,0.15);}
.jw-send{
  width:40px;height:40px;border-radius:50%;border:none;cursor:pointer;flex-shrink:0;
  background:var(--gradient-brand);color:#fff;display:flex;align-items:center;justify-content:center;
  transition:transform .15s ease;
}
.jw-send:hover{transform:scale(1.06);}