/* Camigo — camigo.css */
:root{
  /* A twelve-step neutral ramp rather than three greys. Almost every "looks
     like a template" problem is really a missing middle: borders, muted text
     and section fills all reaching for the same two values. */
  --n0:#FFFFFF; --n1:#FCFBFD; --n2:#F7F5FA; --n3:#F1EFF6; --n4:#E9E6EF;
  --n5:#DDD9E6; --n6:#C4BFD1; --n7:#9B95AA; --n8:#6E6879; --n9:#4A4553;
  --n10:#2A2533; --n11:#16131C;

  --bg:var(--n1); --surface:var(--n0); --surface2:var(--n3);
  --line:var(--n4); --line2:var(--n5);
  --text:var(--n9); --heading:var(--n11); --muted:var(--n8);
  --accent:#D62B6B; --accent-2:#BC2059; --accent-soft:#FCE7EF; --accent-ink:#A81C49;
  --ink:#17131E;

  /* Elevation as tokens, so nothing invents its own box-shadow. */
  --e1:0 1px 2px rgba(22,19,28,.04), 0 1px 3px rgba(22,19,28,.03);
  --e2:0 1px 2px rgba(22,19,28,.04), 0 8px 24px -8px rgba(22,19,28,.10);
  --e3:0 2px 4px rgba(22,19,28,.04), 0 24px 56px -16px rgba(22,19,28,.18);

  --radius:18px; --radius-lg:24px; --wrap:1160px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);
  line-height:1.65;font-size:17px;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%}
h1,h2,h3,h4{color:var(--heading);font-weight:800;letter-spacing:-.028em;line-height:1.12}
h1{font-size:clamp(33px,5.2vw,56px)}
h2{font-size:clamp(26px,3.5vw,38px)}
h3{font-size:18px}
p{margin-bottom:0}
.lead{color:var(--muted);font-size:18.5px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.wrap.narrow{max-width:880px;padding-bottom:70px}
.mt{margin-top:64px;margin-bottom:12px}
.mt-s{margin-top:20px}
.eyebrow{display:inline-block;font-weight:800;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent-ink);background:var(--accent-soft);padding:6px 13px;border-radius:999px;margin-bottom:16px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;background:#fff;padding:10px 16px;border-radius:8px;z-index:99;border:2px solid var(--accent)}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:6px}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:16px;padding:15px 28px;
  border-radius:999px;cursor:pointer;border:none;transition:.16s;font-family:inherit}
.btn-primary{background:var(--accent);color:#fff;box-shadow:0 10px 26px rgba(214,43,107,.26)}
.btn-primary:hover{transform:translateY(-2px);background:var(--accent-2)}
.btn-ghost{background:#fff;color:var(--heading);border:1.5px solid var(--line2)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.cta-row{display:flex;gap:13px;flex-wrap:wrap;margin-top:28px}
.ticks{margin-top:18px;font-size:14.5px;color:var(--muted);display:flex;gap:16px;flex-wrap:wrap}

/* logo */
.lock{position:relative;display:inline-flex;align-items:center;gap:11px;background:var(--accent);padding:9px 16px 10px;border-radius:13px}
.lock:after{content:"";position:absolute;left:15px;bottom:-8px;width:0;height:0;
  border-right:12px solid transparent;border-top:11px solid var(--accent)}
.lock-w{font-weight:800;font-size:21px;letter-spacing:-.045em;color:#fff;line-height:1}
.lock-d{display:inline-flex;gap:4px;align-items:center}
.lock-d i{width:5px;height:5px;border-radius:50%;background:#fff;display:block;animation:lblink 1.4s infinite}
.lock-d i:nth-child(2){animation-delay:.18s}.lock-d i:nth-child(3){animation-delay:.36s}
@keyframes lblink{0%,60%,100%{opacity:.42}30%{opacity:1}}

/* nav */
.nav{position:sticky;top:0;z-index:60;background:rgba(252,251,253,.92);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav-in{max-width:var(--wrap);margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;height:70px}
.nav-links{display:flex;align-items:center;gap:26px;font-weight:600;font-size:15px}
.nav-links a:not(.btn){color:var(--muted)}
.nav-links a:not(.btn):hover{color:var(--heading)}
.nav-links .btn{padding:11px 21px;font-size:15px}
.burger{display:none;background:none;border:none;font-size:22px;cursor:pointer;color:var(--heading)}
.mobile-menu{border-top:1px solid var(--line);padding:14px 24px 20px;display:flex;flex-direction:column;gap:14px;font-weight:600}
.mobile-menu[hidden]{display:none}
[hidden]{display:none!important}
@media(max-width:820px){.nav-links{display:none}.burger{display:block}}
@media(min-width:821px){.mobile-menu{display:none!important}}

/* hero — copy on the left, the actual product on the right.
   The old hero was one narrow column of text with the right 40% of a desktop
   viewport left empty, and the only picture of the product was 4,000px down
   the page behind a placeholder caption. A visitor decided what this was
   before ever seeing it work. */
.open{border-bottom:1px solid var(--line);position:relative;overflow:hidden;
  background:radial-gradient(1200px 520px at 78% -8%,#FDF2F7 0%,rgba(253,242,247,0) 62%),
             linear-gradient(180deg,var(--n0) 0%,var(--n1) 100%)}
.open-in{max-width:var(--wrap);margin:0 auto;padding:64px 24px 68px;
  display:grid;grid-template-columns:minmax(0,1fr) 396px;gap:56px;align-items:center}
.open-copy{max-width:664px}
.open h1{margin:14px 0 18px;font-size:clamp(32px,3.7vw,46px);letter-spacing:-.032em;line-height:1.1}
.open .lead{font-size:18.5px;max-width:34em;line-height:1.62}
.open .cta-row{margin-top:26px;gap:11px}
.open .cta-row .btn{padding:14px 24px;font-size:15.5px}
.open .ticks{margin-top:16px}
.hero-sm .cta-row{margin-top:26px}
.hero-sm{border-bottom:1px solid var(--line);padding:64px 0 60px;background:var(--surface2)}
.hero-sm h1{margin-bottom:16px}
.hero-sm .lead{max-width:620px}

/* the hero's own product panel */
.open-demo{position:relative}
.open-demo .phone{margin:0;box-shadow:var(--e3)}
.hero-pick{display:flex;flex-wrap:wrap;gap:7px;margin:24px 0 0}
.hero-pick span{font-size:13.5px;color:var(--muted);width:100%;margin-bottom:2px}
.hero-pick button{font-family:inherit;font-size:13.5px;font-weight:600;padding:7px 14px;border-radius:999px;
  border:1px solid var(--line2);background:var(--n0);color:var(--n9);cursor:pointer;transition:.14s}
.hero-pick button:hover{border-color:var(--accent);color:var(--accent-ink)}
.hero-pick button.on{background:var(--n11);border-color:var(--n11);color:#fff}
.hero-cap{text-align:center;font-size:13px;color:var(--muted);margin-top:14px}

@media(max-width:1000px){
  .open-in{grid-template-columns:1fr;gap:40px;padding:52px 24px 56px}
  .open-copy{max-width:none}
  .open-demo{max-width:396px;margin:0 auto;width:100%}
}

/* thread */
.thread{max-width:var(--wrap);margin:0 auto;padding:0 24px 90px;position:relative}
.thread:before{content:"";position:absolute;left:51px;top:170px;bottom:190px;width:2px;
  background:linear-gradient(180deg,transparent,var(--line) 6%,var(--line) 94%,transparent)}
@media(max-width:760px){.thread:before{display:none}}
.ask{display:flex;justify-content:flex-end;margin:62px 0 24px}
.ask-b{background:var(--surface2);border:1px solid var(--line);color:var(--heading);font-weight:700;font-size:17px;
  padding:13px 21px;border-radius:20px;border-bottom-right-radius:6px;max-width:80%}
.ask-b:before{content:"You";display:block;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:3px}
.ans{display:grid;grid-template-columns:56px 1fr;gap:22px;align-items:start;margin-bottom:16px}
@media(max-width:760px){.ans{grid-template-columns:1fr;gap:14px}}
.av{width:56px;height:56px;border-radius:50%;background:var(--surface);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;color:var(--accent);position:relative;z-index:2}
.av svg{width:34px;height:34px}
@media(max-width:760px){.av{width:44px;height:44px}.av svg{width:27px;height:27px}}
/* Grid and flex children default to min-width:auto, so one unbreakable string
   anywhere inside can push a whole column past the viewport. Every wrapper in
   the thread opts out of that. */
.say{padding-top:4px;min-width:0}
.ans>*{min-width:0}
.say h2{margin-bottom:13px}
.say>p{max-width:660px}
.say>p+p{margin-top:12px}
.aside{color:var(--muted);font-size:15px;margin-top:16px;max-width:640px}
.chan{color:var(--muted);font-size:15px;margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.chan strong{color:var(--text)}

/* cards */
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:15px;margin-top:22px}
@media(max-width:720px){.cards{grid-template-columns:1fr}}
/* Cards were flat white on near-white with a hairline border, which reads as a
   wireframe rather than a finished thing. A single-pixel shadow and a hover
   lift is most of the difference between "template" and "product". */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px;
  box-shadow:var(--e1);transition:box-shadow .18s ease,transform .18s ease,border-color .18s ease}
.card:hover{box-shadow:var(--e2);transform:translateY(-2px);border-color:var(--line2)}
.card p{color:var(--muted);font-size:15px;margin-top:4px}
.card .n{display:inline-flex;width:28px;height:28px;border-radius:9px;background:var(--accent-soft);color:var(--accent-ink);
  align-items:center;justify-content:center;font-weight:800;font-size:13.5px;margin-bottom:11px}
.card .pain{color:var(--heading);font-size:18px;font-weight:700;margin:0;line-height:1.4}
.wont{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;display:flex;gap:13px;
  box-shadow:var(--e1);transition:box-shadow .18s ease,transform .18s ease}
.wont:hover{box-shadow:var(--e2);transform:translateY(-2px)}
.wont .x,.wont .tick{color:var(--accent);font-weight:800;font-size:17px;flex:0 0 auto;line-height:1.4}
.wont strong{display:block;color:var(--heading);font-size:16.5px;margin-bottom:3px}
.wont small{color:var(--muted);font-size:14.5px}

/* "paste your website" band */
.tryband{margin-top:24px;display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:28px;align-items:center;
  background:var(--n11);color:var(--n3);border-radius:var(--radius-lg);padding:30px 32px;
  background-image:radial-gradient(560px 240px at 88% 10%,rgba(214,43,107,.30) 0%,rgba(214,43,107,0) 70%)}
.tryband-steps{display:grid;gap:16px}
.ts{display:flex;gap:14px;align-items:flex-start}
.ts>span{flex:0 0 auto;width:26px;height:26px;border-radius:9px;background:rgba(255,255,255,.10);
  color:#fff;display:grid;place-items:center;font-weight:800;font-size:13px;margin-top:1px}
.ts strong{display:block;color:#fff;font-size:16px;margin-bottom:2px}
.ts small{color:rgba(255,255,255,.66);font-size:14.5px;line-height:1.5;display:block}
.tryband-cta{text-align:center}
.tryband-cta .btn{width:100%;justify-content:center}
.tryband-cta .small-note{color:rgba(255,255,255,.55);margin-top:12px;font-size:13px}
@media(max-width:820px){.tryband{grid-template-columns:1fr;padding:26px 22px;gap:22px}}

/* sector chips + pack */
.qs{display:flex;flex-wrap:wrap;gap:9px;margin-top:6px}
.k{font-size:14.5px;font-weight:600;background:#fff;border:1px solid var(--line2);padding:9px 15px;border-radius:999px}
.k.hot{border-color:#F6CEDD;color:var(--accent-ink);background:var(--accent-soft)}
.pack{list-style:none;margin-top:24px;display:grid;grid-template-columns:repeat(2,1fr);gap:9px}
@media(max-width:720px){.pack{grid-template-columns:1fr}}
.pack li{display:flex;gap:10px;font-size:15px}
.pack li i{color:var(--accent);font-style:normal;font-weight:800}

/* switch + demo */
.switch{display:flex;gap:8px;flex-wrap:wrap;margin:20px 0 24px}
.switch button{font-family:inherit;font-size:13.5px;font-weight:700;padding:8px 15px;border-radius:999px;cursor:pointer;
  background:#fff;border:1px solid var(--line2);color:var(--muted);transition:.16s}
.switch button.on{background:var(--accent);border-color:var(--accent);color:#fff}
.demo{display:grid;grid-template-columns:minmax(0,1fr) 396px;gap:44px;align-items:center}
.demo.one{grid-template-columns:396px minmax(0,1fr)}
@media(max-width:900px){.demo,.demo.one{grid-template-columns:1fr;gap:28px}
  .demo .phone,.demo.one .phone{margin:0 auto}}
@media(max-width:820px){.demo,.demo.one{grid-template-columns:1fr}}
.phone{width:100%;max-width:396px;background:#fff;border:1px solid var(--line2);border-radius:30px;padding:10px;box-shadow:var(--e3)}
@media(max-width:820px){.phone{margin:0 auto}}
.screen{background:#fff;border-radius:22px;overflow:hidden;border:1px solid #EFECF3}
.ph-top{background:#FAF9FB;padding:12px 14px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--line)}
.ph-av{width:31px;height:31px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;flex:0 0 auto}
.ph-top strong{color:var(--heading);font-size:14px;display:block}
.ph-top small{color:var(--muted);font-size:10.5px}
.ph-body{padding:15px 13px;display:flex;flex-direction:column;gap:9px;min-height:320px}
.ph-body.static .bub{opacity:1;transform:none;animation:none}
.bub{max-width:85%;padding:9px 12px;border-radius:14px;font-size:13px;line-height:1.48;opacity:0;transform:translateY(8px);animation:pop .4s forwards}
@keyframes pop{to{opacity:1;transform:none}}
.b-in{background:#F2F0F5;color:#3A3742;border-bottom-left-radius:4px;align-self:flex-start}
.b-out{background:var(--accent);color:#fff;border-bottom-right-radius:4px;align-self:flex-end;font-weight:500}
.b-tag{display:block;font-size:9px;font-weight:800;opacity:.72;margin-bottom:3px;letter-spacing:.06em;text-transform:uppercase}
.typing{align-self:flex-start;background:#F2F0F5;padding:11px 14px;border-radius:14px;border-bottom-left-radius:4px;opacity:0;animation:pop .4s forwards}
.dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:#ADA7B8;margin:0 1.5px;animation:blink 1.3s infinite}
.dot:nth-child(2){animation-delay:.2s}.dot:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,60%,100%{opacity:.3}30%{opacity:1}}


/* ---------- channel-skinned mocks ---------- */
.chan-tabs{display:flex;gap:6px;margin-bottom:14px;justify-content:center;flex-wrap:wrap}
.chan-tabs button{font-family:inherit;font-size:12.5px;font-weight:700;padding:7px 13px;border-radius:999px;cursor:pointer;
  background:#fff;border:1px solid var(--line2);color:var(--muted);transition:.16s}
.chan-tabs button.on{background:var(--ink);border-color:var(--ink);color:#fff}
.mock-note{font-size:12px;color:var(--muted);text-align:center;margin-top:10px;font-style:italic}
/* Only the animated phone needs a reserved height — its messages arrive over a
   couple of seconds and the panel must not grow under the reader. The static
   ones size to their content, or they end in a pool of empty screen. */
.phone .screen{display:flex;flex-direction:column}
.phone #screen{min-height:470px}

/* WhatsApp */
.wa-top{background:#008069;color:#fff;padding:10px 12px;display:flex;align-items:center;gap:9px}
.wa-back{font-size:20px;line-height:1;opacity:.9}
.wa-av{width:30px;height:30px;border-radius:50%;background:#5d8f84;color:#fff;display:flex;align-items:center;
  justify-content:center;font-weight:700;font-size:12.5px;flex:0 0 auto}
.wa-top strong{font-size:14px;display:block;color:#fff}
.wa-top small{font-size:10.5px;opacity:.85}
.wa-body{flex:1;background:#EFE7DE;background-image:radial-gradient(#e2d8cc 1px,transparent 1px);background-size:14px 14px;
  padding:14px 10px;display:flex;flex-direction:column;gap:7px}
.wb{max-width:84%;padding:6px 9px 5px;border-radius:8px;font-size:12.6px;line-height:1.42;position:relative;box-shadow:0 1px 1px rgba(0,0,0,.09)}
.wb em{display:block;font-style:normal;font-size:9.5px;color:#667781;text-align:right;margin-top:2px}
.wb-in{background:#fff;align-self:flex-start;border-top-left-radius:2px}
.wb-in em{color:#8a9298}
.wb-out{background:#D9FDD3;align-self:flex-end;border-top-right-radius:2px}
.wb-out em{color:#5a8a6d}

/* Instagram */
.ig-top{background:#fff;padding:11px 12px;display:flex;align-items:center;gap:9px;border-bottom:1px solid #EFEFEF}
.ig-back{font-size:19px;color:#262626;line-height:1}
.ig-av{width:30px;height:30px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:12px;color:#fff;background:linear-gradient(45deg,#F58529,#DD2A7B,#8134AF)}
.ig-top strong{font-size:13.5px;color:#262626;display:block}
.ig-top small{font-size:10.5px;color:#8E8E8E}
.ig-body{flex:1;background:#fff;padding:14px 12px;display:flex;flex-direction:column;gap:6px}
.ib{max-width:78%;padding:9px 13px;border-radius:20px;font-size:12.8px;line-height:1.45}
.ib-in{background:#EFEFEF;color:#262626;align-self:flex-start}
.ib-out{background:#3797F0;color:#fff;align-self:flex-end}
.ig-seen{font-size:10px;color:#8E8E8E;align-self:flex-end;margin-top:2px}

/* Messenger */
.fb-top{background:#fff;padding:11px 12px;display:flex;align-items:center;gap:9px;border-bottom:1px solid #E4E6EB}
.fb-av{width:30px;height:30px;border-radius:50%;background:#0084FF;color:#fff;display:flex;align-items:center;
  justify-content:center;font-weight:700;font-size:12.5px;flex:0 0 auto}
.fb-top strong{font-size:13.5px;color:#050505;display:block}
.fb-top small{font-size:10.5px;color:#65676B}
.fb-body{flex:1;background:#fff;padding:14px 12px;display:flex;flex-direction:column;gap:5px}
.fbb{max-width:78%;padding:9px 13px;border-radius:18px;font-size:12.8px;line-height:1.45}
.fbb-in{background:#F0F0F0;color:#050505;align-self:flex-start}
.fbb-out{background:#0084FF;color:#fff;align-self:flex-end}

/* Email */
.em-top{background:#F6F5F8;padding:11px 13px;border-bottom:1px solid #E6E3EC}
.em-top strong{display:block;font-size:13.5px;color:var(--heading)}
.em-top small{font-size:10.5px;color:var(--muted)}
.em-body{flex:1;background:#fff;padding:14px 13px;display:flex;flex-direction:column;gap:11px}
.em-msg{border-left:2px solid var(--line);padding-left:11px}
.em-msg.reply{border-left-color:var(--accent)}
.em-from{font-size:11px;font-weight:700;color:var(--heading);margin-bottom:3px}
.em-from span{font-weight:500;color:var(--muted)}
.em-text{font-size:12.4px;line-height:1.5;color:#3A3742}
.em-sig{font-size:11px;color:var(--muted);margin-top:6px}

.ig-hero{background:linear-gradient(135deg,#FDF2F7 0%,#F6F1FB 50%,#FEF6F0 100%)}
.ig-hero .eyebrow{background:#fff;border:1px solid #F3D2DF}

/* ring */
.ringbox{background:var(--accent-soft);border:1px solid #F7CDDD;border-radius:22px;padding:28px 30px;margin-top:20px;
  display:flex;gap:26px;align-items:center;flex-wrap:wrap;justify-content:space-between}
.num{display:inline-flex;align-items:center;gap:12px;font-size:clamp(25px,3.4vw,36px);font-weight:800;color:var(--accent);
  background:#fff;border:1.5px solid #F7CDDD;padding:14px 24px;border-radius:16px}
.num-note{color:var(--accent-ink);font-size:14px;margin-top:10px;font-weight:600}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{font-size:13.5px;background:#fff;border:1px solid #F3D2DF;padding:8px 13px;border-radius:999px}
.tbc-note{font-size:13px;color:var(--muted);margin-top:10px;font-style:italic}

/* salary */
.sal-grid{display:grid;grid-template-columns:1fr 40px 1fr;gap:14px;align-items:stretch;margin-top:24px}
@media(max-width:760px){.sal-grid{grid-template-columns:1fr;gap:12px}}
.sal{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:26px 24px}
.sal.me{border:2px solid var(--accent);background:var(--accent-soft)}
.sal .who{font-size:12.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.sal.me .who{color:var(--accent-ink)}
.sal .amt{font-size:clamp(32px,4.4vw,46px);font-weight:800;color:var(--heading);letter-spacing:-.03em;line-height:1}
.sal.me .amt{color:var(--accent)}
.sal .per{font-size:14px;color:var(--muted);margin-top:5px}
.sal ul{list-style:none;margin-top:18px;display:flex;flex-direction:column;gap:8px}
.sal li{font-size:14.5px;display:flex;gap:9px}
.sal li i{font-style:normal;color:var(--muted)}
.sal.me li i{color:var(--accent)}
.vsm{display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--muted);font-size:13px}

/* bars */
.bars{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:26px 26px;margin-top:22px}
@media(max-width:700px){.bars{padding:18px 14px}}
.bar-row{display:grid;grid-template-columns:104px 1fr 84px;align-items:center;gap:13px;margin-bottom:11px}
@media(max-width:700px){.bar-row{grid-template-columns:78px 1fr 62px;gap:8px;font-size:13px}}
.bar-name{font-weight:700;color:var(--muted);font-size:14px}
.bar-track{height:28px;background:#F1EFF4;border-radius:7px;overflow:hidden}
.bar-fill{height:100%;border-radius:7px;background:#D3CEDB;width:0;transition:width 1.1s cubic-bezier(.2,.8,.2,1)}
.bar-row.us .bar-name{color:var(--heading)}
.bar-row.us .bar-fill{background:var(--accent)}
.bar-val{text-align:right;font-weight:800;color:var(--muted);font-size:14px}
.bar-row.us .bar-val{color:var(--accent);font-size:17px}
.bars-note{margin-top:18px;color:var(--muted);font-size:13.5px;border-top:1px solid var(--line);padding-top:15px}

/* pricing */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-top:24px}
@media(max-width:820px){.tiers{grid-template-columns:1fr;max-width:420px;margin-left:auto;margin-right:auto}}
.tier{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:28px 24px;display:flex;flex-direction:column;position:relative}
.tier.pop{border:2px solid var(--accent)}
.pop-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--accent);color:#fff;font-weight:800;
  font-size:10.5px;padding:5px 13px;border-radius:999px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.t-name{font-size:18px}
.t-tag{color:var(--muted);font-size:13.5px;margin-top:4px;min-height:38px}
.t-price{font-size:42px;font-weight:800;letter-spacing:-.035em;line-height:1;margin:10px 0 2px;color:var(--heading)}
.t-price span{font-size:15px;color:var(--muted);font-weight:600;letter-spacing:0}
.tier ul{list-style:none;display:flex;flex-direction:column;gap:9px;margin:18px 0 24px}
.tier li{display:flex;gap:9px;font-size:14px;align-items:flex-start}
.tier li i{color:var(--accent);font-style:normal;font-weight:800;flex:0 0 auto}
.tier .btn{margin-top:auto;width:100%;justify-content:center;font-size:15px;padding:13px 20px}
.tier-foot{color:var(--muted);font-size:14px;margin-top:20px;line-height:1.75}

/* tables, faq, code, callout */
/* On a narrow phone a three-column table and a line of API sample both refuse
   to shrink, and the whole page picks up a sideways scroll. Let the table
   scroll inside its own box, and let code wrap. */
.tbl{width:100%;border-collapse:collapse;margin:16px 0 8px;font-size:15px}
@media(max-width:560px){
  .tbl{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}
  .tbl th,.tbl td{white-space:normal;min-width:120px}
}
pre,code{white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word}
.tbl th,.tbl td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.tbl th{color:var(--heading);font-weight:700}
.tbl.wide th:first-child{width:32%}
details.faq{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:2px 22px;margin-bottom:10px}
details.faq summary{font-weight:700;font-size:16.5px;padding:18px 0;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:14px;color:var(--heading)}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+";color:var(--accent);font-size:24px;font-weight:700;line-height:1}
details.faq[open] summary::after{content:"–"}
details.faq p{color:var(--muted);padding:0 0 18px;font-size:15.5px}
.code{background:var(--ink);color:#E6DCEA;border-radius:14px;padding:20px 22px;overflow-x:auto;font-size:13.5px;line-height:1.7;margin:14px 0}
.code code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.callout{background:var(--accent-soft);border:1px solid #F7CDDD;border-left:4px solid var(--accent);border-radius:12px;padding:18px 22px;margin:22px 0;font-size:15.5px}
.callout strong{display:block;color:var(--accent-ink);margin-bottom:4px}
.callout.warn{background:#FFF8E6;border-color:#F0DFAE;border-left-color:#D9A21B}
.callout.warn strong{color:#8A6206}
.prose h2{margin:40px 0 12px}
.prose h3{margin:24px 0 6px}
.prose p,.prose ul{margin-bottom:12px}
.prose ul{padding-left:22px}
.prose li{margin-bottom:6px}
.prose a{color:var(--accent);font-weight:600}

/* signoff + footer */
.signoff{background:var(--ink);border-radius:24px;padding:54px 40px;text-align:center;margin-top:34px}
.signoff svg{width:62px;height:62px;color:#FF7BA8;margin-bottom:6px}
.signoff h2{color:#F7F3F8}
.signoff p{color:#B0A6BC;margin:14px auto 26px;max-width:460px}
.signoff .btn-primary{background:#FF7BA8;color:#2B0C1B;box-shadow:none}
.signoff .btn-primary:hover{background:#FF97BB}
footer{border-top:1px solid var(--line);padding:48px 0 40px;margin-top:20px}
.foot-in{max-width:var(--wrap);margin:0 auto;padding:0 24px;display:flex;justify-content:space-between;gap:36px;flex-wrap:wrap}
.foot-tag{color:var(--muted);font-size:14px;margin-top:18px}
.foot-cols{display:flex;gap:48px;flex-wrap:wrap}
.foot-cols h4{font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:12px}
.foot-cols a{display:block;font-size:14.5px;color:var(--text);margin-bottom:8px;font-weight:600}
.foot-cols a:hover{color:var(--accent)}
.foot-legal{max-width:var(--wrap);margin:32px auto 0;padding:0 24px;color:#928C9D;font-size:12.5px}
.sub-h{margin:34px 0 6px;font-size:1.15rem}
.trig{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px;margin-top:16px}
.trig span{display:flex;gap:10px;align-items:flex-start;background:var(--accent-soft);color:var(--accent-ink);
  border-radius:12px;padding:11px 14px;font-size:.92rem;font-weight:600;line-height:1.45}
.trig span::before{content:"→";flex:none;opacity:.7;font-weight:700}
.trust{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px}
.trust strong{display:block;color:var(--heading);margin-bottom:6px;font-size:1rem}
.trust small{color:var(--muted);font-size:.9rem;line-height:1.55;display:block}
.small-note{margin-top:16px;font-size:.86rem;color:var(--muted)}
.betabar{background:var(--ink);color:#fff;font-size:.82rem;text-align:center;padding:8px 16px;letter-spacing:-.01em}
.betabar b{color:#fff;font-weight:700}
.betabar a{color:#fff;text-decoration:underline;text-underline-offset:2px}
.foot-legal .ent{opacity:.75;font-size:.78rem;line-height:1.5}
.foot-legal .tbc{margin-top:6px;opacity:.8}
.sub-h{margin:34px 0 6px;font-size:1.15rem}
.trig{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px;margin-top:16px}
.trig span{display:flex;gap:10px;align-items:flex-start;background:var(--accent-soft);color:var(--accent-ink);
  border-radius:12px;padding:11px 14px;font-size:.92rem;font-weight:600;line-height:1.45}
.trig span::before{content:"→";flex:none;opacity:.7;font-weight:700}
.trust{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px}
.trust strong{display:block;color:var(--heading);margin-bottom:6px;font-size:1rem}
.trust small{color:var(--muted);font-size:.9rem;line-height:1.55;display:block}
.small-note{margin-top:16px;font-size:.86rem;color:var(--muted)}
.betabar{background:var(--ink);color:#fff;font-size:.82rem;text-align:center;padding:8px 16px;letter-spacing:-.01em}
.betabar b{color:#fff;font-weight:700}
.betabar a{color:#fff;text-decoration:underline;text-underline-offset:2px}
.foot-legal .ent{margin-top:6px;opacity:.72;font-size:.78rem;line-height:1.55;max-width:640px}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- shared mockup shell ---------- */
.mock{background:var(--n0);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--e2);margin-top:24px}
.mock-chrome{display:flex;align-items:center;gap:12px;padding:11px 16px;background:var(--n2);
  border-bottom:1px solid var(--line)}
.dots{display:inline-flex;gap:6px}
.dots i{width:9px;height:9px;border-radius:50%;background:var(--n5);display:block}
.mock-title{font-size:12.5px;font-weight:700;color:var(--n8);letter-spacing:.01em}
.mock-cap{font-size:12.5px;color:var(--muted);margin-top:9px;font-style:italic}
.mock-chat{max-width:390px}
.mock-chat .wa-top,.mock-chat .ig-top{border-radius:0}
.wa-static,.ig-static{min-height:0;padding:14px 12px;display:flex;flex-direction:column;gap:8px}

/* reveal on scroll — the site had no motion at all below the hero */
[data-reveal]{opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .55s ease}
[data-reveal].seen{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){[data-reveal]{opacity:1;transform:none;transition:none}}

/* channel colours, used by every mockup that shows more than one channel */
.ch-wa{--c:#25D366;--cd:#075E54}
.ch-ig{--c:#E1306C;--cd:#C13584}
.ch-fb{--c:#0084FF;--cd:#0064C8}
.ch-em{--c:#8B7BD8;--cd:#5F4FB0}

/* ---------- inbox ---------- */
.inbox{background:var(--n0)}
.nb-bar{display:flex;align-items:center;gap:8px;padding:11px 14px;border-bottom:1px solid var(--line);
  background:var(--n1)}
.nb-tab{font-size:12.5px;font-weight:700;color:var(--n8);padding:5px 11px;border-radius:999px}
.nb-tab b{font-weight:800;opacity:.6;margin-left:3px}
.nb-tab.on{background:var(--n11);color:#fff}
.nb-tab.on b{opacity:.7}
.nb-grow{flex:1}
.nb-live{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;
  color:#0F7B4F;text-transform:uppercase;letter-spacing:.06em}
.nb-live i{width:7px;height:7px;border-radius:50%;background:#16A46A;display:block;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
.nb-list{display:flex;flex-direction:column}
.nb-row{display:flex;gap:13px;padding:13px 16px;border-bottom:1px solid var(--n3);align-items:flex-start;
  transition:background .15s ease}
.nb-row:last-child{border-bottom:0}
.nb-row:hover{background:var(--n1)}
.nb-row.on{background:#FEF7FA;box-shadow:inset 3px 0 0 var(--accent)}
.nb-av{position:relative;width:38px;height:38px;flex:0 0 auto}
.nb-av span{width:38px;height:38px;border-radius:50%;background:var(--n3);color:var(--n9);
  display:grid;place-items:center;font-weight:800;font-size:14px}
.nb-ch{position:absolute;right:-2px;bottom:-2px;width:15px;height:15px;border-radius:50%;
  background:var(--c);border:2px solid #fff;display:block}
.nb-mid{flex:1;min-width:0}
.nb-top{display:flex;align-items:baseline;gap:8px}
.nb-top strong{font-size:14.5px;color:var(--heading)}
.nb-time{margin-left:auto;font-size:11.5px;color:var(--n7);flex:0 0 auto}
.nb-snip{font-size:14px;color:var(--n8);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.nb-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:6px}
.nb-state{font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  padding:3px 8px;border-radius:999px}
.st-done{background:#E7F6EE;color:#0F7B4F}
.st-you{background:#FDECC8;color:#8A6100}
.st-quiet{background:var(--n3);color:var(--n8)}
.nb-why{font-size:12.5px;color:var(--n7)}
@media(max-width:560px){.nb-why{display:none}}

/* ---------- connect ---------- */
.connect{padding:8px 0 16px}
.cn-row{display:flex;align-items:center;gap:13px;padding:14px 18px;border-bottom:1px solid var(--n3)}
.cn-ic{width:34px;height:34px;border-radius:10px;background:var(--c);flex:0 0 auto;display:block}
.cn-txt{flex:1;min-width:0}
.cn-txt strong{display:block;font-size:15px;color:var(--heading)}
/* An email address is one unbreakable word, and a flex item will not shrink
   below its content — so on a narrow phone this row pushed the whole column
   wider than the viewport and the page scrolled sideways. */
.cn-txt small{font-size:13px;color:var(--n7);display:block;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
@media(max-width:420px){.cn-row{padding:12px 14px;gap:10px}.cn-tag{display:none}}
.cn-tag{font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:3px 9px;border-radius:999px}
.tag-on{background:#E7F6EE;color:#0F7B4F}
.tag-off{background:var(--n3);color:var(--n7)}
.cn-sw{width:40px;height:23px;border-radius:999px;flex:0 0 auto;position:relative;transition:background .2s}
.sw-on{background:#16A46A}.sw-off{background:var(--n5)}
.cn-sw i{position:absolute;top:3px;width:17px;height:17px;border-radius:50%;background:#fff;transition:left .2s}
.sw-on i{left:20px}.sw-off i{left:3px}
.cn-note{font-size:13.5px;color:var(--n8);padding:15px 18px 0}

/* ---------- knowledge ---------- */
.kb{display:flex;flex-direction:column}
.kb-row{display:flex;gap:18px;padding:16px 18px;border-bottom:1px solid var(--n3);align-items:flex-start}
.kb-row:last-child{border-bottom:0}
.kb-main{flex:1;min-width:0}
.kb-origin{font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--n7);margin-bottom:5px}
.kb-q{font-size:14.5px;font-weight:700;color:var(--heading)}
.kb-a{font-size:14px;color:var(--n8);margin-top:3px;line-height:1.5}
.kb-side{flex:0 0 auto;text-align:right;display:flex;flex-direction:column;gap:9px;align-items:flex-end}
.kb-badge{font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:3px 9px;border-radius:999px}
.b-new{background:#FDECC8;color:#8A6100}
.b-ok{background:#E7F6EE;color:#0F7B4F}
.kb-act{display:flex;gap:7px}
.kb-act button{font-family:inherit;font-size:12.5px;font-weight:700;padding:6px 12px;border-radius:8px;
  border:1px solid var(--line2);background:#fff;color:var(--n9);cursor:default}
.kb-yes{background:var(--n11)!important;border-color:var(--n11)!important;color:#fff!important}
.kb-done{font-size:12.5px;font-weight:700;color:#0F7B4F}
@media(max-width:620px){.kb-row{flex-direction:column;gap:10px}.kb-side{flex-direction:row;align-items:center;text-align:left}}

/* ---------- handover + takeover ---------- */
.ho-line{display:flex;align-items:center;gap:10px;margin:4px 0}
.ho-line:before,.ho-line:after{content:"";flex:1;height:1px;background:rgba(0,0,0,.12)}
.ho-line span{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#8A6100}
.ho-card{background:#FFF8E6;border:1px solid #F2E0B4;border-radius:12px;padding:13px 15px;margin-top:4px}
.ho-h{display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;color:#8A6100;margin-bottom:6px}
.ho-h i{width:8px;height:8px;border-radius:50%;background:#D9A400;display:block}
.ho-card p{font-size:13.5px;color:#6B5416;line-height:1.5}
.ho-btns{display:flex;gap:8px;margin-top:11px}
.ho-b{font-size:12.5px;font-weight:700;padding:7px 14px;border-radius:8px;background:#fff;
  border:1px solid #E6D6A8;color:#6B5416}
.ho-b.prim{background:var(--n11);border-color:var(--n11);color:#fff}
.to-bar{display:flex;align-items:center;gap:10px;padding:11px 14px;background:var(--n2);border-top:1px solid var(--line)}
.to-who{flex:1;display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--n8);font-weight:600}
.to-who i{width:8px;height:8px;border-radius:50%;background:#16A46A;display:block;animation:pulse 2s infinite}
.to-btn{font-size:12.5px;font-weight:700;padding:7px 14px;border-radius:8px;background:var(--n11);color:#fff}

/* ---------- instagram story reply ---------- */
.ig-reply{display:flex;align-items:center;gap:9px;align-self:flex-start;margin-bottom:2px}
.ig-rl{font-size:11.5px;color:var(--n7)}
.ig-story{width:38px;height:52px;border-radius:8px;background:linear-gradient(150deg,#F09433,#DC2743 55%,#BC1888);
  display:grid;place-items:center}
.ig-story span{font-size:7.5px;font-weight:800;color:#fff;letter-spacing:.06em}

/* ---------- scorecard ---------- */
.sc{padding:20px}
.sc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media(max-width:640px){.sc-grid{grid-template-columns:repeat(2,1fr)}}
.sc-cell{background:var(--n1);border:1px solid var(--line);border-radius:12px;padding:16px 14px;text-align:center}
.sc-n{display:block;font-size:30px;font-weight:800;color:var(--heading);letter-spacing:-.03em;line-height:1}
.sc-l{display:block;font-size:12.5px;color:var(--n8);margin-top:6px;line-height:1.35}
.sc-gaps{margin-top:16px;border-top:1px solid var(--n3);padding-top:16px}
.sc-gh{font-size:12.5px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:var(--n7);margin-bottom:10px}
.sc-gap{display:flex;align-items:center;gap:10px;padding:9px 12px;background:var(--n1);
  border:1px solid var(--line);border-radius:10px;margin-bottom:7px}
.sc-gap span{flex:1;font-size:14px;color:var(--heading)}
.sc-gap i{font-size:12px;color:var(--n7);font-style:normal}

/* ---------- nothing to build ---------- */
.ntb{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:24px}
@media(max-width:620px){.ntb{grid-template-columns:1fr}}
.ntb-half{border:1px solid var(--line);border-radius:var(--radius);padding:16px 14px;background:var(--n0)}
.ntb-canvas{background:var(--n2);
  background-image:radial-gradient(var(--n5) 1px,transparent 1px);background-size:14px 14px}
.ntb-h{font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--n7);margin-bottom:12px;text-align:center}
.ntb-graph{display:flex;flex-direction:column;align-items:center;gap:0}
.nd{font-size:11.5px;font-weight:700;padding:6px 11px;border-radius:7px;background:var(--n0);
  border:1px solid var(--n5);color:var(--n9);white-space:nowrap;box-shadow:var(--e1)}
.nd-t{border-color:#9BC7A8}.nd-c{border-color:#D9BE7A}.nd-ai{border-color:var(--accent);color:var(--accent-ink)}
.nd-e{border-color:#A8B6D9}
.nd-line{width:1.5px;height:12px;background:var(--n5);display:block}
.nd-fork{display:flex;gap:44px;align-items:center;height:14px}
.nd-fork i{font-style:normal;font-size:9px;color:var(--n7);font-weight:700}
.nd-pair{display:flex;gap:8px}
.ntb-foot{font-size:11px;color:var(--n7);text-align:center;margin-top:12px}
.ntb-mine{display:flex;flex-direction:column}
.ntb-steps{display:flex;flex-direction:column;gap:9px;justify-content:center;flex:1}
.nt{display:flex;align-items:center;gap:10px;font-size:13.5px;font-weight:600;color:var(--n9);
  background:var(--n1);border:1px solid var(--line);border-radius:10px;padding:11px 13px}
.nt i{font-style:normal;flex:0 0 auto;width:20px;height:20px;border-radius:6px;background:var(--accent);
  color:#fff;display:grid;place-items:center;font-size:11px;font-weight:800}

/* ---------- side-by-side: copy and a mockup ---------- */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:44px;align-items:center;margin-top:26px}
.split.flip>*:first-child{order:2}
.split .mock{margin-top:0}
.split h3{font-size:20px;margin-bottom:9px}
.split p{color:var(--muted);font-size:16px}
.split p+p{margin-top:10px}
@media(max-width:900px){.split,.split.flip{grid-template-columns:1fr;gap:26px}
  .split.flip>*:first-child{order:0}}

/* ---------- the try-it page ---------- */
.open-try .open-in{align-items:start}
.scanner{background:var(--n0);border:1px solid var(--line);border-radius:20px;padding:20px;
  box-shadow:var(--e2);margin-top:24px}
.field{display:flex;gap:10px}
.inp{flex:1;min-width:0;display:flex;align-items:center;border:1.5px solid var(--line);
  border-radius:12px;background:var(--n2);transition:border-color .12s,background .12s}
.inp:focus-within{border-color:var(--accent);background:var(--n0)}
.inp .pre{padding-left:15px;color:var(--n7);font-size:15px}
.inp input{flex:1;min-width:0;border:0;background:transparent;outline:0;font:inherit;
  font-size:16px;padding:13px 15px 13px 4px;color:var(--heading)}
.field .btn{padding:13px 22px;font-size:15px;white-space:nowrap}
.hint{font-size:13px;color:var(--muted);margin-top:11px}
.tryerr{font-size:14.5px;color:var(--accent-ink);background:var(--accent-soft);
  border-radius:10px;padding:11px 14px;margin-top:12px;line-height:1.5}
.reading{margin-top:16px;border-top:1px solid var(--line);padding-top:14px}
.tick{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:var(--n9);padding:4px 0;
  opacity:0;transform:translateY(4px);animation:tin .35s ease forwards}
@keyframes tin{to{opacity:1;transform:none}}
.tick b{font-weight:700}
.tick .dot{width:18px;height:18px;border-radius:50%;background:var(--accent-soft);color:var(--accent-ink);
  flex:0 0 auto;display:grid;place-items:center;font-size:11px;font-weight:800;margin-top:2px}
.tick .spin{width:16px;height:16px;border:2px solid var(--line);border-top-color:var(--accent);
  border-radius:50%;animation:tspin .7s linear infinite;flex:0 0 auto;margin-top:3px}
@keyframes tspin{to{transform:rotate(360deg)}}
.found{margin-top:16px;display:grid;gap:7px;max-height:260px;overflow-y:auto}
.fact{background:var(--n2);border-radius:11px;padding:11px 13px;font-size:14px}
.fact .q{font-weight:800;font-size:11px;letter-spacing:.05em;color:var(--n7);
  text-transform:uppercase;margin-bottom:3px}
.fact .a{color:var(--n9);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}
.chip{border:1px solid var(--line2);background:var(--n0);border-radius:999px;padding:7px 13px;
  font-size:13.5px;cursor:pointer;font-family:inherit;color:var(--n9);transition:.12s}
.chip:hover{border-color:var(--accent);color:var(--accent-ink)}
.try-screen{min-height:520px;display:flex;flex-direction:column}
.try-body{flex:1;overflow-y:auto}
.try-composer{flex:0 0 auto;background:#F0F0F0;padding:8px;display:flex;gap:7px;align-items:center}
.try-composer input{flex:1;min-width:0;border:0;border-radius:999px;padding:10px 14px;
  font:inherit;font-size:14.5px;outline:0}
.try-composer button{border:0;background:#075E54;color:#fff;width:36px;height:36px;border-radius:50%;
  cursor:pointer;font-size:14px;flex:0 0 auto}
.try-composer button:disabled{opacity:.4;cursor:default}
.wb .src{display:block;margin-top:6px;font-size:11.5px;color:#6B6878;
  border-top:1px solid rgba(0,0,0,.08);padding-top:5px}
.wb.flag{background:#FFF8E6}
.wb.flag .tag{display:block;font-size:10.5px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:#8A6100;margin-bottom:3px}
.typing{align-self:flex-start;background:#fff;border-radius:10px;padding:11px 13px;display:flex;gap:4px}
.typing span{width:6px;height:6px;border-radius:50%;background:#B9B4C4;animation:tblink 1.3s infinite}
.typing span:nth-child(2){animation-delay:.2s}.typing span:nth-child(3){animation-delay:.4s}
@keyframes tblink{0%,60%,100%{opacity:.3}30%{opacity:1}}
@media(max-width:1000px){.try-screen{min-height:440px}}