/* The logo pass, loaded after site.css and site-premium.css.
   The "dh" mark is four flat colours on an ink wordmark: blue, coral,
   amber, teal. The page takes exactly those: ink for text and the dark
   surfaces, blue for every action, and the other three only where they
   name something (the CRM is amber, Sam is teal, a problem is coral).
   No gradients standing in for colour; the mark has none. */
:root{
  --blue:#1269f7;--blue-ink:#0b4fc4;--blue-soft:#eaf1ff;
  --coral:#f65a4a;--coral-ink:#c4372a;--coral-soft:#fff0ee;
  --amber:#f8b81c;--amber-ink:#8a5a00;--amber-soft:#fff6de;
  --teal:#0aa98a;--teal-ink:#077a64;--teal-soft:#e4f7f2;
  --ink:#141a2a;--ink-2:#1b2236;--text:#141a2a;
  --muted:#535b6e;--muted-2:#667085;
  --lime:var(--blue);--indigo:var(--blue);--sky:var(--blue);--cyan:var(--teal);--violet:var(--blue-ink);
  --signal:var(--blue);
  --four:linear-gradient(90deg,var(--blue) 0 25%,var(--coral) 25% 50%,var(--amber) 50% 75%,var(--teal) 75% 100%);
  --sh:0 18px 40px -18px rgba(20,26,42,.22),0 2px 6px rgba(20,26,42,.05);
  --sh-lg:0 40px 80px -32px rgba(20,26,42,.32),0 6px 16px rgba(20,26,42,.06);
  --ease:cubic-bezier(.23,1,.32,1);
}
::selection{background:rgba(18,105,247,.16);color:var(--ink);}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:6px;}
input{caret-color:var(--blue);}
html{scrollbar-color:#c9d1e0 transparent;}

/* Emphasis is the mark's own move: same letters, a brand colour. */
.ser,h2 .ser,.show-say h3 .ser{font-family:inherit;font-style:normal;font-weight:inherit;letter-spacing:inherit;background:none;-webkit-text-fill-color:currentColor;color:var(--blue);white-space:normal;}
.fcta h2 .ser{color:var(--amber);-webkit-text-fill-color:var(--amber);}

/* Section labels repeated the menu above them. The headings say it. */
.intro .eye,.flow .eye,.agents .eye,#clients .eye,#pricing .eye,#faq .eye{display:none;}
.hero .eye{display:inline-flex;align-items:center;gap:10px;font-size:13px;letter-spacing:0;text-transform:none;font-weight:650;color:var(--muted);margin-bottom:22px;}
.hero .eye::before,.hero .eye::after{display:none;}
.hero .eye-dots{display:inline-flex;gap:3px;}
.hero .eye-dots i{width:7px;height:7px;border-radius:2px;}
.hero .eye-dots i:nth-child(1){background:var(--blue);}
.hero .eye-dots i:nth-child(2){background:var(--coral);}
.hero .eye-dots i:nth-child(3){background:var(--amber);}
.hero .eye-dots i:nth-child(4){background:var(--teal);}

/* Buttons: one blue, ink for the quiet one, and every press answers. */
.btn{transition:transform .16s var(--ease),background-color .2s ease,border-color .2s ease,box-shadow .25s var(--ease);}
.btn:active{transform:scale(.97);}
.btn-lime,.plan.mid .plan-go{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:0 12px 24px -12px rgba(18,105,247,.75);}
.btn-lime:hover,.plan.mid .plan-go:hover{background:var(--blue-ink);border-color:var(--blue-ink);color:#fff;box-shadow:0 16px 30px -12px rgba(18,105,247,.8);}
.btn-ink{background:var(--ink);border-color:var(--ink);color:#fff;}
.btn-ink:hover{background:#000814;border-color:#000814;}
nav.main a:hover{background:var(--blue-soft);color:var(--blue-ink);}

/* ---- hero: words left, the mark in 3D right, the check below ---- */
.hero{background:radial-gradient(760px 420px at 82% 18%,rgba(18,105,247,.09),transparent 64%),radial-gradient(520px 320px at 96% 70%,rgba(248,184,28,.10),transparent 62%),#fff;padding-top:64px;overflow:hidden;}
.hero-top{display:grid;grid-template-columns:minmax(0,1.22fr) minmax(0,.78fr);gap:24px 40px;align-items:center;}
.hero-say{text-align:left;max-width:none;margin:0;position:relative;z-index:1;}
.hero h1{font-size:clamp(38px,4.3vw,56px);font-weight:800;letter-spacing:-.035em;line-height:1.08;max-width:none;color:var(--ink);}
.hero h1 .h1-line{display:block;white-space:nowrap;}
@media (max-width:600px){.hero h1 .h1-line{white-space:normal;}}
.hero .lede{margin:24px 0 0;max-width:54ch;font-size:18px;line-height:1.62;color:var(--muted);}
.hero-do{justify-content:flex-start;margin-top:32px;}
.hero-note{text-align:left;max-width:52ch;}
.stage{margin-top:56px;perspective:1800px;}
.hero{padding-bottom:96px;}
@media (max-width:600px){.hero{padding-bottom:56px;}}
.inst{border-radius:22px;border:1px solid #dfe4ee;box-shadow:var(--sh-lg);transform-origin:50% 0;}
.inst::before{background:var(--four);height:4px;}
.egs,.try-note{background:#f7f9fc;}
.egs button:hover{border-color:var(--blue);color:var(--blue-ink);}
.try-line.clear .m{background:var(--teal-soft);color:var(--teal-ink);}
.try-line.found .m{background:var(--coral-soft);color:var(--coral-ink);}
#tryUrl:focus{outline:none;}
#tryUrl::placeholder{color:#6f7890;opacity:1;}
.try:focus-within{box-shadow:inset 0 0 0 2px rgba(18,105,247,.35);}

/* The check lies back on the page and stands up as it scrolls in. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .inst{animation:inst-stand linear both;animation-timeline:view();animation-range:entry 0% cover 34%;}
    @keyframes inst-stand{from{transform:rotateX(24deg) translateY(28px) scale(.94);}to{transform:none;}}
  }
}

/* The mark, in pieces, with real thickness. Built by the script below the
   page; until it runs (or without it) the flat mark sits here instead. */
.mark3d{position:relative;height:440px;perspective:1300px;perspective-origin:50% 40%;}
.mark3d .flat{position:absolute;left:50%;top:50%;width:360px;transform:translate(-50%,-55%);}
.mark3d.built .flat{display:none;}
.m3-rig{position:absolute;left:50%;top:50%;width:468px;height:402px;margin:-215px 0 0 -234px;transform-style:preserve-3d;transform:rotateX(calc(16deg + var(--prx,0deg))) rotateY(calc(-26deg + var(--pry,0deg))) scale(var(--s,1));opacity:0;transition:opacity .9s var(--ease);}
.mark3d.built .m3-rig{opacity:1;}
/* larger than its column, so the orbits have room; the hero clips at the screen edge */
.mark3d canvas{position:absolute;top:-90px;left:-14%;width:134%;height:calc(100% + 180px);pointer-events:none;display:block;opacity:0;transition:opacity 1s var(--ease);}
.mark3d.gl-on canvas{opacity:1;}
.mark3d.gl-on .m3-rig{opacity:0;transition-duration:.2s;}
.mark3d.gl-on canvas{transition-delay:.15s;}
.m3-p{position:absolute;transform-style:preserve-3d;transform:translate3d(var(--x),var(--y),var(--z));}
.m3-p svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;backface-visibility:visible;}
.m3-shadow{position:absolute;left:50%;bottom:22px;width:360px;height:46px;margin-left:-180px;border-radius:50%;background:radial-gradient(closest-side,rgba(20,26,42,.22),transparent);filter:blur(6px);transform:scaleX(1);}
@media (prefers-reduced-motion:no-preference){
  .m3-p{animation:m3-float var(--t) ease-in-out var(--d) infinite;}
  @keyframes m3-float{
    0%,100%{transform:translate3d(var(--x),var(--y),var(--z));}
    50%{transform:translate3d(var(--x),calc(var(--y) - 9px),calc(var(--z) + 10px));}
  }
  .m3-shadow{animation:m3-breathe 7s ease-in-out infinite;}
  @keyframes m3-breathe{50%{transform:scaleX(.92);opacity:.8;}}
}

/* the moving strip: ink, with the mark's colours as the dots */
.strip{background:var(--ink);padding:16px 0;}
.track span{color:rgba(255,255,255,.72);font-weight:600;}
.track span b{color:#fff;}
.track span i{width:9px !important;height:9px !important;border-radius:3px !important;box-shadow:none !important;}

/* ---- intro: the phone stands at an angle, and turns to face you ---- */
.intro{background:#fff;}
.intro::before{background:radial-gradient(circle,rgba(18,105,247,.10),rgba(10,169,138,.06) 45%,transparent 70%);}
.intro-points i{background:var(--blue);}
.intro-points li:nth-child(2) i{background:var(--amber);color:var(--ink);}
.intro-points li:nth-child(3) i{background:var(--teal);}
.intro-phone{perspective:1400px;}
.phone{background:var(--ink);transition:transform .9s var(--ease),box-shadow .9s var(--ease);}
.phone::before{background:var(--ink);}
.intro-phone:hover .phone,.phone.playing{transform:none;box-shadow:0 0 0 2px #232b44,inset 0 0 0 2px rgba(255,255,255,.06),0 50px 100px -30px rgba(20,26,42,.4);}
.phone-play{color:var(--blue);}

/* ---- the video, on a dark stage ---- */
.intro{background:#fff;padding:150px 0 130px;overflow:visible;}
.intro::before{display:none;}
.intro .intro-grid{position:relative;max-width:calc(var(--max) - 36px);margin:0 auto;padding:64px 72px;border-radius:32px;color:#fff;
  background:radial-gradient(640px 460px at 0% 0%,rgba(18,105,247,.34),transparent 60%),radial-gradient(520px 520px at 78% 55%,rgba(10,169,138,.13),transparent 62%),linear-gradient(180deg,#161d31 0%,#111727 100%);
  box-shadow:0 50px 100px -50px rgba(20,26,42,.7);grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:40px 56px;}
.intro .intro-grid::after{content:"";position:absolute;left:32px;right:32px;top:0;height:4px;border-radius:0 0 4px 4px;background:var(--four);}
.intro-say h2{color:#fff;}
.intro-say h2 .ser{color:#7fb0ff;-webkit-text-fill-color:#7fb0ff;}
.intro-say .lede{color:rgba(255,255,255,.78);}
/* the three points as a timeline */
.intro-points{position:relative;gap:18px;margin-top:30px;}
.intro-points::before{content:"";position:absolute;left:13px;top:14px;bottom:14px;width:2px;background:linear-gradient(var(--blue),var(--amber),var(--teal));opacity:.55;border-radius:2px;}
.intro-points li{position:relative;color:rgba(255,255,255,.88);font-size:15.5px;align-items:center;}
.intro-points i{position:relative;z-index:1;box-shadow:0 0 0 5px var(--ink);}
.intro .hero-do .btn:not(.btn-lime){background:transparent;border-color:rgba(255,255,255,.3);color:#fff;}
.intro .hero-do .btn:not(.btn-lime):hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.55);}
/* the phone sticks out of the card, above and below */
.intro-phone{margin:-130px 0 -120px;position:relative;z-index:2;}
.intro-phone::before{content:"";position:absolute;left:50%;top:50%;width:460px;height:460px;margin:-230px 0 0 -230px;border-radius:50%;background:radial-gradient(circle,rgba(18,105,247,.30),rgba(10,169,138,.12) 45%,transparent 68%);filter:blur(12px);pointer-events:none;}
.intro-phone{perspective:1600px;}
.phone{width:min(300px,100%);box-shadow:0 0 0 2px #2a3352,inset 0 0 0 2px rgba(255,255,255,.08),-24px 60px 100px -34px rgba(0,0,0,.65);transform:rotateY(-9deg) rotateX(3deg);}
.intro-phone:hover .phone,.phone.playing{transform:none;}
.phone-play{inset:auto;left:50%;bottom:5%;white-space:nowrap;margin:0;width:auto;height:auto;display:flex;align-items:center;gap:10px;padding:8px 18px 8px 8px;border-radius:999px;background:rgba(255,255,255,.96);color:var(--ink);font-family:inherit;font-size:14px;font-weight:750;letter-spacing:-.005em;transform:translateX(-50%);box-shadow:0 18px 40px -12px rgba(0,0,0,.55);transition:transform .2s var(--ease),opacity .25s ease;}
.phone-play:hover{transform:translateX(-50%) scale(1.04);}
.phone-play:active{transform:translateX(-50%) scale(.97);}
.phone-play i{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--blue);color:#fff;position:relative;}
.phone-play i svg{margin-left:2px;}
.phone-play i::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid rgba(18,105,247,.45);}
.phone-play svg{margin-left:0;}
@media (prefers-reduced-motion:no-preference){
  .phone-play i::after{animation:play-ring 2.4s var(--ease) infinite;}
  @keyframes play-ring{0%{transform:scale(.9);opacity:1;}100%{transform:scale(1.45);opacity:0;}}
}
/* three chips around the phone, the steps as they happen */
.ip-chip{position:absolute;z-index:3;display:flex;align-items:center;gap:11px;padding:10px 14px 10px 10px;border-radius:14px;background:rgba(255,255,255,.97);color:var(--ink);box-shadow:0 22px 40px -18px rgba(0,0,0,.6);white-space:nowrap;opacity:0;transform:translateY(14px) scale(.96);transition:opacity .6s var(--ease),transform .6s var(--ease);}
.ip-chip i{flex:0 0 auto;width:32px;height:32px;border-radius:10px;display:grid;place-items:center;color:#fff;}
.ip-2 i{color:var(--ink);}
.ip-chip span{display:block;font-size:11.5px;color:var(--muted-2);line-height:1.3;}
.ip-chip b{display:block;font-size:13px;font-weight:800;color:var(--ink);letter-spacing:-.01em;}
.ip-1{top:14%;left:-10%;} .ip-1 i{background:var(--blue);}
.ip-2{top:44%;right:-8%;} .ip-2 i{background:var(--amber);}
.ip-3{bottom:26%;left:-16%;} .ip-3 i{background:var(--teal);}
.intro-phone.in .ip-chip{opacity:1;transform:none;}
.intro-phone.in .ip-1{transition-delay:.35s;} .intro-phone.in .ip-2{transition-delay:.75s;} .intro-phone.in .ip-3{transition-delay:1.15s;}
.phone.playing ~ .ip-chip{opacity:0;transform:translateY(8px) scale(.96);transition-delay:0s !important;}
@media (prefers-reduced-motion:no-preference){
  .intro-phone.in .ip-chip{animation:chip-float 7s ease-in-out infinite;}
  .intro-phone.in .ip-2{animation-delay:-2.3s;} .intro-phone.in .ip-3{animation-delay:-4.6s;}
  @keyframes chip-float{50%{translate:0 -6px;}}
}
@media (prefers-reduced-motion:reduce){.ip-chip{opacity:1;transform:none;}}
@media (max-width:1320px){.ip-3{left:-6%;}.ip-1{left:-6%;}}
@media (max-width:1100px){.ip-chip{display:none;}}
@media (max-width:900px){
  .intro{padding:96px 0 64px;}
  .intro .intro-grid{margin:0 16px;padding:40px 24px 44px;border-radius:26px;max-width:none;grid-template-columns:1fr;}
  .intro-phone{margin:-110px 0 0;order:-1;}
}

/* ---- the video, cinema: nothing on it, nothing around it ---- */
.cine{position:relative;background:linear-gradient(180deg,#fff 0%,#f5f8fe 55%,#fff 100%);padding:104px 0 96px;overflow:hidden;}
.cine .head{margin-bottom:44px;}
.cine .head .lede{margin:16px auto 0;max-width:60ch;text-wrap:balance;}
.cine-stage{position:relative;display:flex;justify-content:center;}
.cine-stage::before{content:"";position:absolute;left:50%;top:50%;width:min(760px,120vw);height:520px;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(closest-side,rgba(18,105,247,.16),rgba(10,169,138,.07) 55%,transparent 100%);pointer-events:none;}
.cine .phone{width:min(330px,78vw);transform:none !important;box-shadow:0 0 0 2px #232b44,inset 0 0 0 2px rgba(255,255,255,.06),0 60px 110px -40px rgba(20,26,42,.5),0 20px 40px -24px rgba(18,105,247,.35);}
.cine-steps{list-style:none;margin:52px auto 0;padding:0;max-width:960px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;position:relative;}
.cine-steps::before{content:"";position:absolute;left:calc(16.6% + 14px);right:calc(16.6% + 14px);top:15px;height:2px;background:linear-gradient(90deg,var(--blue),var(--amber),var(--teal));opacity:.35;border-radius:2px;}
.cine-steps li{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;font-size:15px;line-height:1.55;color:var(--muted);}
.cine-steps i{position:relative;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-weight:800;font-size:13px;color:#fff;background:var(--blue);box-shadow:0 0 0 6px #f7f9fd;}
.cine-steps li:nth-child(2) i{background:var(--amber);color:var(--ink);}
.cine-steps li:nth-child(3) i{background:var(--teal);}
.cine-steps span{max-width:28ch;}
.cine-do{justify-content:center;margin-top:40px;}
@media (max-width:760px){
  .cine{padding:72px 0 64px;}
  .cine-steps{grid-template-columns:1fr;gap:18px;max-width:420px;}
  .cine-steps::before{display:none;}
  .cine-steps li{flex-direction:row;text-align:left;align-items:flex-start;}
}

/* ---- how it works ---- */
.flow.flow-light{background:linear-gradient(180deg,#f7f9fc 0%,#fff 100%);}
.chart{border-radius:24px;border:1px solid #e3e8f1;box-shadow:var(--sh-lg);}
.chart-cols{color:var(--muted-2);letter-spacing:.08em;}
.node{background:#fff;border-radius:16px;box-shadow:none;}
.node:hover{border-color:#cdd6e6;box-shadow:var(--sh);}
.node .ic{box-shadow:none;border-radius:11px;background:var(--blue);}
.lane .node:nth-child(3) .ic{background:var(--coral);}
.lane .node:nth-child(5) .ic{background:var(--amber);color:var(--ink);}
.lane .node:nth-child(7) .ic{background:var(--teal);}
.link{background:#d9e0ec;}
.link::after{background:var(--blue);box-shadow:0 0 0 4px rgba(18,105,247,.16);}
.lane-2 .link::after{background:var(--teal);box-shadow:0 0 0 4px rgba(10,169,138,.16);}
.flow.flow-light .fl-promises li{border-radius:16px;box-shadow:none;}
.flow.flow-light .fl-promises i{background:var(--blue);}
.flow.flow-light .fl-promises li:nth-child(1) i{background:var(--coral);}
.flow.flow-light .fl-promises li:nth-child(2) i{background:var(--amber);color:var(--ink);}
.flow.flow-light .fl-promises li:nth-child(4) i{background:var(--teal);}

/* ---- what it does: each card tinted by who it is about ---- */
.agents{background:#fff;}
.ag-card{border-radius:24px;border:1px solid #e3e8f1;box-shadow:none;transform-style:preserve-3d;transition:box-shadow .4s var(--ease),border-color .3s ease;}
.ag-card:hover{transform:none;box-shadow:var(--sh-lg);border-color:#d5ddea;}
.ag-vis{background:var(--blue-soft);}
.ag-card:nth-child(2) .ag-vis,.ag-card:nth-child(4) .ag-vis{background:var(--teal-soft);}
.ag-card:nth-child(3) .ag-vis{background:var(--amber-soft);}
.t-bot{background:var(--blue-soft);color:var(--blue-ink);}
.t-sam{background:var(--teal-soft);color:var(--teal-ink);}
.ag-card:nth-child(3) .t-bot{background:var(--amber-soft);color:var(--amber-ink);}
.cw,.bw{box-shadow:0 24px 44px -20px rgba(20,26,42,.35);}
.cw-top i{background:var(--blue);}
.cw-me{background:var(--blue) !important;}
.cw-lead{background:var(--teal) !important;color:#fff !important;}
.mw-row .ok{color:var(--teal-ink);background:var(--teal-soft);}
.mw-row .bad{background:var(--coral);color:#fff;}
.mw-row.mw-hit{border-color:rgba(246,90,74,.5);box-shadow:0 0 0 3px rgba(246,90,74,.12);}
.bw-con{background:var(--ink);}
.bw-fix{color:#8fe3cf;}
.bw-fix em{background:var(--teal) !important;}

/* ---- the AI chatbot ---- */
.bot{background:#fff;}
.bot-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px 64px;align-items:center;}
.bot-say h2{max-width:16ch;}
.bot-say .lede{margin-top:18px;max-width:54ch;}
.bot-points{list-style:none;margin:30px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:22px 28px;}
.bot-points li{display:flex;gap:13px;align-items:flex-start;}
.bot-points i{flex:0 0 auto;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;color:#fff;}
.c-blue{background:var(--blue);} .c-coral{background:var(--coral);} .c-amber{background:var(--amber);color:var(--ink) !important;} .c-teal{background:var(--teal);}
.bot-points b{display:block;font-size:15.5px;font-weight:750;letter-spacing:-.012em;color:var(--ink);margin-bottom:4px;}
.bot-points span{font-size:14.2px;line-height:1.58;color:var(--muted);}
.bot-stage{perspective:1400px;display:flex;justify-content:center;}
.bot-3d{position:relative;width:min(470px,100%);height:540px;transform-style:preserve-3d;transform:rotateY(-14deg) rotateX(6deg);transition:transform 1s var(--ease);}
.bot-stage:hover .bot-3d{transform:rotateY(-6deg) rotateX(3deg);}
.bot-card{position:absolute;width:330px;background:#fff;border:1px solid #e3e8f1;border-radius:20px;padding:14px 14px 16px;box-shadow:0 40px 70px -30px rgba(20,26,42,.38);}
.bot-web{left:0;top:0;transform:translateZ(0);}
.bot-wa{right:0;top:318px;width:290px;transform:translateZ(70px);}
.bc-top{display:flex;align-items:center;gap:8px;padding:2px 2px 11px;margin-bottom:11px;border-bottom:1px solid #eef1f6;}
.bc-top i{width:26px;height:26px;border-radius:50%;background:var(--blue);}
.bc-top.wa i{background:#25d366;}
.bc-top b{flex:1;font-size:13px;font-weight:750;color:var(--ink);}
.bc-top span{font-size:11px;font-weight:700;color:var(--teal-ink);}
.bot-card p{margin:0 0 8px;font-size:13px;line-height:1.45;padding:9px 12px;border-radius:14px;max-width:86%;width:fit-content;}
.bc-me{margin-left:auto !important;background:var(--blue);color:#fff;border-bottom-right-radius:5px !important;}
.bot-wa .bc-me{background:#dcf8c6;color:var(--ink);}
.bc-bot{background:#f1f4f9;color:var(--ink);border-bottom-left-radius:5px !important;}
.bc-lead{display:inline-flex;align-items:center;gap:8px;margin-top:4px;font-size:12px;font-weight:650;color:var(--muted);}
.bc-lead span{background:var(--coral);color:#fff;font-weight:800;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;padding:4px 9px;border-radius:999px;}
@media (prefers-reduced-motion:no-preference){
  .bot-wa{animation:bot-float 7s ease-in-out infinite;}
  @keyframes bot-float{50%{transform:translateZ(70px) translateY(-8px);}}
}

/* ---- outreach: campaigns and automations ---- */
.reach{background:#f7f9fc;}
.reach .head{margin-bottom:46px;}
.reach-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.reach-card{position:relative;background:#fff;border:1px solid #e3e8f1;border-radius:24px;overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .4s var(--ease);}
.reach-card:hover{box-shadow:var(--sh-lg);}
.rc-vis{padding:30px;min-height:270px;display:flex;align-items:center;justify-content:center;}
.rc-camp .rc-vis{background:var(--blue-soft);}
.rc-auto .rc-vis{background:var(--teal-soft);}
.rc-say{padding:26px 30px 30px;}
.rc-say h3{font-size:22px;font-weight:800;letter-spacing:-.02em;color:var(--ink);}
.rc-say p{margin-top:10px;font-size:15px;line-height:1.62;color:var(--muted);max-width:56ch;}
.camp{width:100%;max-width:400px;background:#fff;border-radius:16px;border:1px solid #e3e8f1;box-shadow:0 24px 44px -22px rgba(20,26,42,.35);padding:16px;}
.camp-top{display:flex;align-items:center;gap:7px;margin-bottom:12px;}
.camp-top b{flex:1;font-size:14px;font-weight:800;color:var(--ink);}
.camp-top span{font-size:11px;font-weight:800;padding:4px 9px;border-radius:999px;}
.ch-wa{background:#25d366;color:#fff;}
.ch-em{background:#eef1f6;color:var(--muted);}
.camp-row{display:grid;grid-template-columns:90px 1fr;gap:2px 10px;padding:10px 0;border-top:1px solid #eef1f6;}
.camp-row span{grid-row:span 2;font-size:12px;color:var(--muted-2);font-weight:650;}
.camp-row b{font-size:13.5px;color:var(--ink);font-weight:750;}
.camp-row em{font-style:normal;font-size:11.5px;color:var(--muted-2);}
.camp-go{display:flex;justify-content:flex-end;padding-top:10px;}
.camp-go span{background:var(--blue);color:#fff;font-size:12.5px;font-weight:750;padding:8px 16px;border-radius:999px;}
.auto{width:100%;max-width:440px;display:grid;gap:12px;}
.auto-rule{display:grid;grid-template-columns:1fr 26px 1fr;align-items:center;gap:8px;background:#fff;border:1px solid #dcebe6;border-radius:14px;padding:12px 14px;box-shadow:0 10px 24px -16px rgba(20,26,42,.3);}
.auto-rule .when{font-size:12.5px;font-weight:650;color:var(--ink);line-height:1.35;}
.auto-rule .arrow{height:2px;background:#cfd8e6;position:relative;}
.auto-rule .arrow::after{content:"";position:absolute;right:-1px;top:-4px;border:5px solid transparent;border-left-color:#cfd8e6;border-right:0;}
.auto-rule .then{font-size:12px;font-weight:750;padding:7px 10px;border-radius:10px;text-align:center;}
.then.wa{background:#e3f9ea;color:#11753c;}
.then.em{background:var(--blue-soft);color:var(--blue-ink);}
.then.team{background:var(--amber-soft);color:var(--amber-ink);}
@media (prefers-reduced-motion:no-preference){
  .auto-rule{animation:auto-pulse 6s ease-in-out infinite;}
  .auto-rule:nth-child(2){animation-delay:2s;} .auto-rule:nth-child(3){animation-delay:4s;}
  @keyframes auto-pulse{0%,30%,100%{border-color:#dcebe6;}10%{border-color:var(--teal);box-shadow:0 14px 30px -14px rgba(10,169,138,.45);}}
}
@media (max-width:980px){
  .bot-grid,.reach-grid{grid-template-columns:1fr;}
  .bot-stage{order:-1;}
}
@media (max-width:600px){
  .bot-points{grid-template-columns:1fr;}
  .bot-3d{height:520px;margin-top:-30px;transform:rotateY(-8deg) rotateX(4deg) scale(.9);}
  .bot-wa{top:338px;}
  .bot-card{width:270px;}
  .bot-wa{width:240px;}
  .rc-vis{padding:20px;min-height:0;}
  .auto-rule{grid-template-columns:1fr;text-align:left;}
  .auto-rule .arrow{display:none;}
}

/* ---- clients: words left, one portal window right ---- */
.cl-grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:48px 72px;align-items:center;}
.cl-say h2{max-width:15ch;}
.cl-say .lede{margin-top:18px;max-width:52ch;}
.cl-points{margin-top:34px;display:grid;gap:26px;}
.cl-pt{display:flex;gap:16px;align-items:flex-start;}
.cl-pt > i{flex:0 0 auto;width:6px;align-self:stretch;border-radius:3px;}
.cl-pt h3{font-size:19px;font-weight:800;letter-spacing:-.018em;color:var(--ink);}
.cl-pt p{margin-top:8px;font-size:15px;line-height:1.62;color:var(--muted);max-width:52ch;}
.cl-stage{perspective:1600px;}
.cl-win{background:#fff;border:1px solid #e3e8f1;border-radius:20px;overflow:hidden;box-shadow:0 50px 90px -40px rgba(20,26,42,.42),0 6px 16px rgba(20,26,42,.05);transform:rotateY(-11deg) rotateX(4deg);transition:transform 1s var(--ease);}
.cl-stage:hover .cl-win{transform:rotateY(-4deg) rotateX(2deg);}
.cl-bar{display:flex;align-items:center;gap:6px;padding:12px 16px;background:#f3f6fb;border-bottom:1px solid #e3e8f1;}
.cl-bar i{width:10px;height:10px;border-radius:50%;background:#d5dbe6;}
.cl-bar i:nth-child(1){background:var(--coral);} .cl-bar i:nth-child(2){background:var(--amber);} .cl-bar i:nth-child(3){background:var(--teal);}
.cl-bar span{margin-left:10px;font-size:12px;font-weight:700;color:var(--muted-2);}
.cl-body{padding:18px;display:grid;gap:14px;background:#f7f9fc;}
.cl-body .surface{border-radius:14px;box-shadow:0 10px 24px -18px rgba(20,26,42,.35);transform:none;}
.cl-body .surface:hover{box-shadow:0 10px 24px -18px rgba(20,26,42,.35);}
@media (max-width:980px){.cl-grid{grid-template-columns:1fr;}.cl-win{transform:none;}}
@media (prefers-reduced-motion:reduce){.cl-win{transform:none;}}

/* ---- clients ---- */
#clients{background:#f7f9fc;}
.surface{border-radius:20px;border:1px solid #e3e8f1;box-shadow:var(--sh-lg);}
.s-btns em.go{background:var(--coral-soft);color:var(--coral-ink);}
.s-btns em{background:var(--amber-soft);color:var(--amber-ink);}
.chip.bad{background:var(--coral);color:#fff;}

/* ---- pricing ---- */
.alt{background:#fff;}
.plan{border-radius:24px;box-shadow:none;border:1px solid #e3e8f1;}
.plan:hover{transform:none;box-shadow:var(--sh-lg);}
.plan.mid{background:#fff;border:2px solid var(--blue);box-shadow:var(--sh-lg);}
.plan.mid .tag,.tag{background:var(--blue);color:#fff;}
.plan.mid h3{color:var(--muted-2);}
.plan.mid .price b{color:var(--ink);}
.plan li::before,.plan ul li::before{color:var(--teal);}
.cur button[aria-pressed="true"]{background:var(--ink);}
.price-note b{color:var(--blue-ink);}
.price-quote b{font-size:30px;letter-spacing:-.025em;}
.plan.mid .price-quote b{color:var(--blue);}

/* ---- questions: every answer on a card, two rows drifting past in
   opposite directions; a row stops while the pointer is on it ---- */
#faq .faq-head{display:flex;flex-direction:column;align-items:center;text-align:center;}
#faq .faq-head .lede{margin:14px auto 0;}
#faq .faq-head .btn{margin-top:26px;}
.faq-rows{margin-top:52px;display:flex;flex-direction:column;gap:20px;}
.faq-row{min-width:0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);padding:6px 0 18px;}
.faq-track{display:flex;width:max-content;animation:faq-slide var(--dur,60s) linear infinite;}
.faq-track.rev{animation-name:faq-slide-rev;}
.faq-row:hover .faq-track,.faq-row:focus-within .faq-track{animation-play-state:paused;}
.faq-group{display:flex;align-items:stretch;gap:18px;padding-right:18px;flex-shrink:0;}
@keyframes faq-slide{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@keyframes faq-slide-rev{from{transform:translateX(-50%);}to{transform:translateX(0);}}
.faq-card{position:relative;width:360px;flex-shrink:0;padding:26px 26px 24px;border-radius:18px;background:#fff;border:1px solid #e3e8f1;overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s var(--ease);}
.faq-card::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--blue);}
.faq-group .faq-card:nth-child(4n+2)::before{background:var(--coral);}
.faq-group .faq-card:nth-child(4n+3)::before{background:var(--amber);}
.faq-group .faq-card:nth-child(4n+4)::before{background:var(--teal);}
.faq-card:hover{transform:translateY(-4px);box-shadow:var(--sh-lg);}
.faq-card h3{font-size:17px;font-weight:750;letter-spacing:-.015em;line-height:1.35;color:var(--ink);}
.faq-card p{margin-top:12px;font-size:14.4px;line-height:1.65;color:var(--muted);}
@media (max-width:760px){.faq-card{width:290px;padding:22px;}.faq-card p{font-size:14px;}}
@media (prefers-reduced-motion:reduce){
  .faq-row{overflow-x:auto;-webkit-mask-image:none;mask-image:none;}
  .faq-track{animation:none;}
  .faq-group[aria-hidden="true"]{display:none;}
  .faq-card[aria-hidden="true"]{display:none;}
}
/* ---- old accordion styles, kept harmless ---- */
#faq{background:#f7f9fc;}
summary .n{font-family:inherit;font-style:normal;font-weight:800;font-size:13px;color:var(--blue);}
summary:hover,details[open] summary{color:var(--blue-ink);}

/* ---- footer: the call to action is an ink card, the mark's colours on it ---- */
footer{background:#f7f9fc;}
.fcta{background:var(--ink);border-radius:28px;box-shadow:0 40px 80px -40px rgba(20,26,42,.6);position:relative;overflow:hidden;}
.fcta::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:var(--four);}
.fcta .btn-lime{background:#fff;border-color:#fff;color:var(--ink);}
.fcta .btn-lime:hover{background:#eef3ff;border-color:#eef3ff;color:var(--ink);}
.stripe{background:var(--four);height:5px;}

/* sections arrive, but are never hidden while waiting to */
.up{opacity:1;filter:none;transform:translateY(16px);transition:transform .8s var(--ease);}
.up.in{transform:none;}

/* cards that lean toward the pointer (set by the script, fine pointers only) */
.tilt,.up.in.tilt{transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));will-change:transform;}
.tilt::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.35),transparent 45%);opacity:var(--glow,0);transition:opacity .3s ease;}
.ag-card,.plan{position:relative;}

@media (max-width:900px){
  /* a later desktop rule in site-premium.css was winning on phones */
  .intro-grid{grid-template-columns:1fr;}
  .intro-phone{order:-1;}
}
@media (max-width:980px){
  .hero-top{grid-template-columns:1fr;}
  .mark3d{height:330px;order:-1;margin-top:-20px;}
  .m3-rig{--s:.68;}
  .mark3d canvas{top:-30px;left:-8%;width:116%;height:calc(100% + 40px);}
  .m3-shadow{width:250px;margin-left:-125px;}
}
@media (max-width:600px){
  .hero{padding-top:36px;}
  .hero h1{font-size:clamp(34px,10vw,44px);}
  .hero .lede{font-size:16.5px;}
  .mark3d{height:250px;}
  .m3-rig{--s:.5;}
  .m3-shadow{width:190px;margin-left:-95px;bottom:2px;}
  .phone{transform:rotateY(-8deg) rotateX(3deg);}
}
@media (prefers-reduced-motion:reduce){
  .phone{transform:none;}
  .up{transform:none;}
}

/* ==== phone pass (iPhone screenshots, 2026-10-12) ==== */
/* whichever stand-in mark is showing, it goes completely when three.js is ready;
   visibility rather than opacity, because Safari ignores opacity on a 3D stack */
.mark3d.gl-on .m3-rig,.mark3d.gl-on .flat{visibility:hidden;opacity:0;}
@media (max-width:760px){
  section{padding:64px 0;}
  h2{font-size:clamp(28px,8vw,34px);letter-spacing:-.03em;}
  .lede{font-size:16px;}
  /* hero: the words first, a compact mark under them */
  .hero{padding-top:8px;padding-bottom:44px;}
  .mark3d{order:-1;height:250px;margin:0 0 4px;}
  .mark3d .flat{width:min(220px,58vw);}
  .mark3d canvas{top:-10px;left:-4%;width:108%;height:calc(100% + 20px);}
  .hero .eye{margin-bottom:16px;}
  .hero h1{font-size:clamp(32px,9.4vw,40px);line-height:1.1;}
  .hero h1 .h1-line{white-space:normal;text-wrap:balance;}
  .hero .lede{font-size:16px;margin-top:16px;}
  .hero-do{margin-top:24px;}
  /* the chatbot: heading first, smaller chat cards */
  .bot-stage{order:0;}
  .bot-3d{height:450px;margin:0 auto -70px;transform:rotateY(-6deg) rotateX(3deg) scale(.82);transform-origin:50% 0;}
  .bot-wa{top:330px;}
  /* the video: a phone that fits a phone */
  .cine{padding:64px 0 56px;}
  .cine .head{margin-bottom:28px;}
  .cine .phone{width:210px;border-radius:34px;padding:9px;}
  .cine .phone video{border-radius:26px;}
  .cine .phone::before{top:16px;width:70px;height:20px;}
  .phone-play{font-size:13px;padding:6px 14px 6px 6px;}
  .phone-play i{width:30px;height:30px;}
  .cine-steps{margin-top:34px;}
  .cine-do{margin-top:28px;}
  /* clients and outreach: a little less vertical weight */
  .cl-points{margin-top:24px;gap:20px;}
  .rc-say{padding:22px 22px 24px;}
  .faq-card{width:270px;}
}
@media (max-width:760px){.flow .chart{display:none;}.flow.flow-light .fl-promises{margin-top:24px;}}
/* ==== phone pass 2: flat chat cards, a two-column footer ==== */
@media (max-width:760px){
  .bot-stage{perspective:none;}
  .bot-3d{height:auto;margin:0;transform:none;display:grid;gap:14px;width:100%;}
  .bot-stage:hover .bot-3d{transform:none;}
  .bot-card,.bot-web,.bot-wa{position:relative;left:auto;right:auto;top:auto;bottom:auto;width:100%;transform:none;animation:none;box-shadow:0 18px 36px -22px rgba(20,26,42,.35);}
  footer .cols{grid-template-columns:1fr 1fr;gap:28px 20px;padding:36px 0 28px;}
  footer .cols > div:first-child{grid-column:1 / -1;}
  footer .cols > div:nth-child(2){grid-row:span 2;}
  footer .cols a{padding:5px 0;}
}