@font-face{font-family:Inter;src:url('/fonts/inter-latin.woff2') format('woff2');font-style:normal;font-weight:100 900;font-display:swap}
:root{--ink:#141522;--paper:#f7f8fc;--blue:#2643ef;--purple:#7540f4;--accent-soft:#ece9ff;--accent-light:#b7a5ff;--brand-gradient:linear-gradient(135deg,var(--blue),var(--purple));--muted:#5b6274;--line:#dde2ed;--font:Inter,Arial,sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:100px}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.6 var(--font);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}
a:focus-visible,summary:focus-visible{outline:3px solid var(--ink);outline-offset:6px}
::selection{background:var(--accent-soft);color:var(--ink)}
.wrap{width:min(1280px,100% - 96px);margin-inline:auto}
.section{padding-block:90px}
.skip{position:fixed;top:-100px;left:20px;background:var(--blue);color:#fff;padding:12px 20px;z-index:100}
.skip:focus{top:12px}
h1,h2,h3,p,figure{margin:0}
h1,h2,h3{font-weight:720;line-height:1.06}
h1{font-size:clamp(43px,4.4vw,65px);letter-spacing:-3px}
h2{font-size:clamp(34px,3.8vw,52px);letter-spacing:-2px}
h3{font-size:25px;letter-spacing:-.8px;line-height:1.15}
em{font-style:normal}
h1 em{box-shadow:inset 0 -.24em 0 var(--accent-soft)}
.eyebrow{font-size:11px;font-weight:700;letter-spacing:1.5px;margin-bottom:18px}
.icon{display:block;width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.button{display:inline-flex;align-items:center;justify-content:center;gap:28px;min-height:56px;padding:15px 24px;background:var(--brand-gradient);border:1px solid var(--blue);border-radius:7px;color:#fff;font-size:15px;font-weight:750;line-height:1.4;transition:background .15s,box-shadow .15s,transform .15s}
.button span{font-size:20px;font-weight:500}
.button:hover{background:var(--purple);box-shadow:3px 3px 0 var(--ink);transform:translate(-1px,-1px)}
.button-small{min-height:40px;padding:9px 17px;font-size:13px;gap:18px}
.header{position:sticky;top:0;z-index:20;background:var(--paper);border-bottom:1px solid var(--line)}
.nav{height:82px;display:flex;align-items:center;justify-content:space-between;gap:32px}
.brand{display:block;width:187px;line-height:0;flex-shrink:0}
.brand img{display:block;width:100%;height:auto}
.nav nav,.nav-actions{display:flex;align-items:center;gap:30px;font-size:13px;font-weight:600}
.nav nav a,.login{padding-block:12px}
.nav a:not(.button):hover,.footer a:hover{opacity:.7}
.nav-actions{gap:24px}

/* The product and its four benefits are readable before the illustration. */
.hero{display:grid;grid-template-columns:1.05fr 1fr;gap:52px;align-items:center;padding-block:60px 70px}
.crm-brands{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin-block:23px 25px;font-size:12px;font-weight:650}
.crm-brands>a{min-width:0;padding:11px 10px;border:1px solid var(--line);border-radius:6px;background:#fafbff}
.crm-brands>a:hover{border-color:var(--ink);background:#eef0f9}
.crm-brands .brand-name{display:flex;align-items:center;gap:7px;min-height:25px;font-size:12px;letter-spacing:-.1px}
.crm-brands img{object-fit:contain;width:25px;height:25px}
.crm-brands .automation-logo img{width:83px;height:25px;object-position:left center}
.crm-brands small{display:block;font-size:9px;font-weight:500;color:var(--muted);margin-top:5px}
.hero-intro{font-size:18px;line-height:1.6;color:#4b5268;margin-top:23px;max-width:500px}
.hero-checks{list-style:none;padding:0;margin:25px 0 27px;display:grid;gap:12px;font-size:14px;line-height:1.5}
.hero-checks li{display:flex;gap:11px;align-items:flex-start}
.check{font-size:14px;line-height:21px;background:var(--blue);color:#fff;border-radius:50%;width:21px;min-width:21px;text-align:center;font-weight:750}
.hero-actions{display:flex;align-items:center;gap:17px;flex-wrap:wrap}
.price-caption{font-size:11px;color:var(--muted)}
.requirements{font-size:11px;margin-top:18px;color:#4b5268;line-height:1.7}

/* CSS-only example: one short sequence, with a complete static reduced-motion view. */
.demo{position:relative;min-width:0;min-height:555px;align-self:stretch;border:1px solid #d8ddec;border-radius:14px;padding:23px 20px 16px;overflow:hidden;background:#eceefa radial-gradient(#c9d0e8 .85px,transparent .85px);background-size:18px 18px}
.demo-topline{display:flex;align-items:center;gap:7px;font-size:9px;font-weight:700;letter-spacing:.5px}
.demo-indicator{height:7px;width:7px;background:var(--ink);border-radius:50%}
.example-label{margin-left:auto;font-size:8px;border:1px solid #bec7df;border-radius:3px;padding:2px 5px}
.demo-content{display:grid;grid-template-columns:.95fr 1fr;align-items:center;gap:14px;padding-top:32px;padding-bottom:60px}
.workflow-rail{position:relative;z-index:2;min-width:0}
.workflow-node{display:flex;gap:9px;align-items:center;min-width:0;border:1px solid #b9c3dd;border-radius:7px;background:var(--paper);padding:14px 10px;box-shadow:2px 3px 0 #b9c3dd33}
.node-icon{display:grid;place-items:center;width:29px;height:29px;flex-shrink:0;border:1px solid #dce1f1;border-radius:5px;background:#eceefa}
.node-icon .icon{width:16px;height:16px}
.clock-icon{font-size:22px;line-height:1}
.workflow-node small{display:block;font-size:7px;letter-spacing:.6px;color:#5a6378;margin-bottom:2px}
.workflow-node b{display:block;font-size:12px;font-weight:700}
.node-tick{margin-left:auto;font-size:12px}
.connector{height:28px;position:relative;text-align:center;font-size:18px;line-height:28px}
.connector:before{content:'';position:absolute;left:50%;top:0;height:100%;border-left:1px dashed #9ca9c9}
.connector span{position:relative;display:inline-block;background:#eceefa;line-height:1;margin-top:5px}
.node-one{animation:node-fire .65s .1s both}
.node-two{animation:node-fire .65s .9s both}
.node-three{animation:node-fire .65s 1.7s both}
.sim-route{margin-top:20px;padding:10px 8px;font-size:8px;font-weight:600;display:flex;gap:5px;align-items:center;background:var(--accent-soft);border-radius:4px}
.sim-route>span:last-child{margin-left:auto;font-size:16px}
.route-dot{height:5px;width:5px;border-radius:50%;background:var(--blue);flex-shrink:0}
.android-phone{position:relative;min-width:0;background:#fefefe;border:5px solid var(--ink);border-radius:29px;min-height:400px;box-shadow:9px 11px 0 #14152212;overflow:hidden}
.punch-hole{width:7px;height:7px;border-radius:50%;position:absolute;left:calc(50% - 3px);top:9px;background:var(--ink)}
.phone-status{font-size:8px;display:flex;justify-content:space-between;padding:10px 13px 16px;font-weight:650}
.conversation-header{display:flex;gap:7px;align-items:center;padding:8px 9px 14px;border-bottom:1px solid #e7eaf3}
.contact-avatar{width:27px;height:27px;border-radius:50%;display:grid;place-items:center;background:#eceefa;font-size:10px;font-weight:650;flex-shrink:0}
.conversation-header b{display:block;font-size:10px}
.conversation-header small{display:block;font-size:7px;color:#5b657a}
.conversation-header>.icon{width:14px;height:14px;margin-left:auto}
.conversation{padding:13px 10px 48px;font-size:10px;line-height:1.5}
.chat-date{text-align:center;font-size:7px;color:#737c90;margin-bottom:15px}
.missed-call{font-size:8px;background:#eef0f7;border-radius:4px;padding:8px;display:flex;align-items:center;gap:7px;margin-bottom:19px}
.missed-call .icon{width:12px;height:12px}
.workflow-message{background:var(--brand-gradient);color:#fff;padding:11px;border-radius:10px 10px 2px 10px;margin-left:11px;animation:message-arrive .45s 2.4s both}
.message-origin{display:block;font-size:5.5px;font-weight:700;letter-spacing:.4px;margin-bottom:5px}
.sent-status{text-align:right;font-size:6px;color:#616b82;padding:5px 0 12px;animation:message-arrive .45s 2.6s both}
.sent-status span{font-size:8px;color:var(--ink)}
.reply-message{background:#eceffa;border-radius:10px 10px 10px 2px;padding:10px;margin-right:10px;animation:message-arrive .45s 3.1s both}
.reply-status{font-size:6px;color:#616b82;padding:5px 0;animation:message-arrive .45s 3.3s both}
.phone-compose{position:absolute;bottom:33px;left:9px;right:9px;border:1px solid #dfe3ef;padding:7px 9px;font-size:7px;border-radius:20px;display:flex;align-items:center;justify-content:space-between;color:#6a748b}
.phone-compose>span:last-child{display:grid;place-items:center;font-size:12px;line-height:18px;background:var(--ink);color:var(--paper);border-radius:50%;width:18px}
.android-navigation{position:absolute;bottom:6px;left:0;right:0;display:flex;justify-content:space-evenly;font-size:12px;color:#707b91}
.usage-tag{position:absolute;left:25px;bottom:53px;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:27px;padding:17px 22px;background:var(--ink);color:var(--paper);border-radius:8px;box-shadow:5px 6px 0 var(--purple);border:1px solid var(--ink);transform:rotate(-4deg);animation:tag-arrive .4s 2.8s both}
.usage-tag span{font-size:7px;letter-spacing:.6px}
.usage-tag strong{display:block;color:var(--accent-light);font-size:43px;font-weight:700;line-height:1.1;letter-spacing:-2px}
.usage-tag>.icon{color:var(--accent-light);width:24px;height:24px}
.demo figcaption{font-size:8px;color:#626e87;position:absolute;bottom:15px;left:20px;right:20px;text-align:center}

.section-heading{margin-bottom:36px}
.heading-split{display:flex;align-items:flex-end;justify-content:space-between;gap:40px}
.heading-split>p{font-size:14px;line-height:1.7;color:var(--muted);max-width:350px}
.benefits{border-top:1px solid var(--line)}
.benefit-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.benefit{border:1px solid var(--line);border-radius:9px;padding:28px;display:flex;flex-direction:column;min-height:300px;background:#fafbff}
.tile-index{display:block;font-size:9px;letter-spacing:1px;font-weight:650;margin-bottom:25px}
.tile-icon{width:35px;height:35px;margin-bottom:20px}
.benefit h3{font-size:27px}
.benefit p{font-size:13px;line-height:1.75;color:var(--muted);margin-top:14px;max-width:340px}
.benefit-dark{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.benefit-dark p{color:#c5cbe0}
.benefit-dark .tile-index,.benefit-dark .tile-icon{color:var(--accent-light)}
.tile-flow{display:flex;gap:10px;font-size:10px;border-top:1px solid #3e4764;padding-top:17px;margin-top:24px}
.tile-flow span{color:var(--accent-light)}
.benefit-accent{background:var(--brand-gradient);color:#fff;border-color:var(--purple)}
.benefit-accent p{color:#eeebff}
.benefit-accent .tile-index{margin-bottom:4px}
.tile-number{font-size:87px;line-height:1.15;font-weight:720;letter-spacing:-6px;margin-bottom:12px}
.number-mark{font-size:33px;font-weight:650;letter-spacing:-1px;margin-bottom:20px;line-height:1.05}
.benefit-wide{grid-column:span 2;display:grid;grid-template-columns:1.4fr 1fr;align-items:center;gap:15px;min-height:280px}
.benefit-wide .tile-index{margin-bottom:28px}
.signal-art{display:flex;gap:8px;align-items:flex-end;justify-content:center;height:113px}
.signal-art span{width:22px;background:var(--ink);border-radius:3px 3px 0 0}
.signal-art span:nth-child(1){height:24%}.signal-art span:nth-child(2){height:42%}.signal-art span:nth-child(3){height:60%}.signal-art span:nth-child(4){height:80%}.signal-art span:nth-child(5){height:100%;background:var(--brand-gradient);border:1px solid var(--purple)}
.comparison,.pricing{background:#eef0f9;border-block:1px solid var(--line)}
.receipt-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:1000px;margin:auto}
.receipt{background:var(--paper);padding:32px 38px;border:1px solid #d4daec;border-radius:7px}
.receipt-kicker{font-size:9px;letter-spacing:1px;margin-bottom:14px;color:var(--muted)}
.receipt h3{font-size:25px}
.receipt dl{margin:28px 0}
.receipt dl>div{display:flex;justify-content:space-between;gap:20px;padding:13px 0;border-bottom:1px solid #dfe4f0;font-size:13px}
.receipt dt{color:#4b566f}
.receipt dd{margin:0;font-weight:600;text-align:right}
.receipt-total{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:17px;border-top:2px dashed #c5cfe7;font-size:11px}
.receipt-total strong{font-size:22px;letter-spacing:-.9px}
.receipt-vexa{border:2px solid var(--ink);box-shadow:6px 6px 0 var(--purple)}
.receipt-brand{display:flex;align-items:center;gap:10px;min-height:41px}
.receipt-brand img{width:30px;height:30px}
.receipt-pill{margin-left:auto;font-size:7px;letter-spacing:.5px;padding:4px 7px;border-radius:3px;background:var(--accent-soft);font-weight:700}
.receipt-vexa .receipt-total strong{font-size:57px;line-height:1;letter-spacing:-3px}
.receipt-total strong span{font-size:13px;letter-spacing:0;font-weight:500;padding-left:3px}
.comparison-note{margin-top:26px;text-align:center}
.fine-print{font-size:10px;color:var(--muted);line-height:1.7}
.quality{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.quality-copy>p:not(.eyebrow){color:var(--muted);font-size:15px;margin-top:23px;max-width:440px;line-height:1.8}
.quality-paths{display:grid;gap:18px}
.quality-path{padding:25px;border:1px solid var(--line);border-radius:8px;background:#fafbff}
.sim-path{border-color:var(--ink);box-shadow:4px 4px 0 var(--purple)}
.path-heading{display:flex;justify-content:space-between;gap:20px;font-size:16px}
.path-heading>span{font-size:8px;letter-spacing:1px;background:var(--accent-soft);padding:3px 7px;align-self:center;font-weight:700}
.path-route{display:flex;align-items:center;gap:10px;margin-block:26px}
.path-route b{font-size:11px;white-space:nowrap}
.solid-line,.dashed-line{height:1px;flex:1;min-width:10px;border-top:2px solid var(--ink)}
.dashed-line{border-top:2px dashed #b4bed7}
.voip-path{background:transparent}
.voip-path .path-route{color:var(--muted)}
.browser-icon{font-size:25px;line-height:1}
.quality-path>p{font-size:11px;color:var(--muted);line-height:1.7}

.workflows{background:var(--ink);color:var(--paper)}
.workflows .eyebrow{color:var(--accent-light)}
.workflows .heading-split>p{color:#c4cbe0}
.workflow-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid #39425c;border-left:1px solid #39425c}
.workflow-example{padding:29px;border-bottom:1px solid #39425c;border-right:1px solid #39425c}
.example-number{display:block;color:var(--accent-light);font-size:11px;margin-bottom:23px;font-weight:650}
.workflow-example h3{font-size:21px;line-height:1.3;letter-spacing:-.6px}
.workflow-example p{font-size:13px;color:#c4cbe0;margin-top:14px;line-height:1.8}
.workflow-example p span{color:var(--accent-light);padding-inline:4px}
.automation-tools{background:var(--paper);color:var(--ink);border-radius:7px;padding:28px 32px;margin-top:30px;display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 28px}
.automation-tools h3{font-size:20px}
.automation-tools p{font-size:12px;margin-top:8px;color:#4b5871}
.automation-tools a{font-weight:650;text-decoration:underline;text-underline-offset:3px}
.tool-logos{display:flex;align-items:center;gap:24px;padding-block:10px}
.tool-logos img{display:block;object-fit:contain;max-height:33px;width:auto}
.tool-logos img:first-child{max-width:102px}.tool-logos img:last-child{max-width:91px}
.tool-logos>span{color:#aaa}
.automation-tools .tools-note{font-size:9px;margin:0;grid-column:2;text-align:center}
.setup-steps{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:45px;margin:0;padding:0}
.setup-steps li{border-top:1px solid var(--ink);padding-top:23px}
.step-number{font-size:62px;font-weight:650;letter-spacing:-4px;line-height:1.1;display:block;margin-bottom:26px}
.setup-steps h3{font-size:23px}
.setup-steps p{font-size:14px;line-height:1.8;color:var(--muted);margin-top:15px}
.pricing-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.plan{border:1px solid #cfd7ec;border-radius:8px;padding:30px;display:flex;flex-direction:column;background:var(--paper)}
.plan-main{background:var(--brand-gradient);color:#fff;border-color:var(--purple)}
.plan-label{font-size:9px;letter-spacing:1px;font-weight:650;margin-bottom:19px}
.plan h3{font-size:25px}
.plan-price{font-size:65px;letter-spacing:-4px;font-weight:720;line-height:1.2;margin-block:22px}
.plan-price span{display:block;font-size:12px;letter-spacing:0;font-weight:450;margin-top:7px}
.plan ul{list-style:none;padding:0;margin:0 0 25px;font-size:12px;line-height:2.2}
.plan li:before{content:'✓';margin-right:9px}
.plan .button{background:#fff;color:var(--blue);border-color:#fff;margin-top:auto;font-size:13px;gap:20px}
.plan .button:hover{background:var(--accent-soft);box-shadow:3px 3px 0 #b7a5ff}
.plan>p:not(.plan-price){font-size:13px;color:#4b5871;line-height:1.8}
.plan .plan-bottom{border-top:1px solid #d5ddef;padding-top:20px;margin-top:auto}
.plan>p:not(.plan-price):not(.plan-bottom){margin-bottom:24px}
.pricing-notes{display:flex;justify-content:space-between;align-items:flex-start;gap:40px;margin-top:26px}
.pricing-notes p{font-size:11px;line-height:1.8;color:var(--muted);max-width:740px}
.pricing-notes a{font-size:11px;font-weight:600;white-space:nowrap;text-decoration:underline;text-underline-offset:3px}
.faq{display:grid;grid-template-columns:.85fr 1.15fr;gap:80px}
.faq h2{font-size:42px}
.support-link{font-size:13px;display:inline-block;margin-top:25px;text-decoration:underline;text-underline-offset:4px}
.faq-list{border-top:1px solid var(--ink)}
.faq details{border-bottom:1px solid var(--line)}
summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:21px;font-size:15px;font-weight:600;line-height:1.5}
summary::-webkit-details-marker{display:none}
summary span{font-size:25px;line-height:1;font-weight:400}
details[open] summary span{transform:rotate(45deg)}
.faq details p{font-size:13px;color:var(--muted);line-height:1.8;padding:0 35px 22px 0}
.closing{background:var(--ink);color:var(--paper)}
.closing-inner{padding-block:70px;display:flex;align-items:center;justify-content:space-between;gap:40px}
.closing .eyebrow{color:#c4cbe0}
.closing h2{font-size:clamp(45px,5.7vw,78px);letter-spacing:-3px}
.closing em{color:var(--accent-light)}
.closing p:not(.eyebrow){margin-top:23px;font-size:14px;color:#c4cbe0}
.closing .button{border-color:var(--purple);min-width:250px}
.closing .button:hover{box-shadow:3px 3px 0 #c4cbe0}
.closing a:focus-visible,.workflows a:focus-visible{outline-color:var(--accent-light)}
.automation-tools a:focus-visible{outline-color:var(--ink)}
.footer{display:flex;align-items:center;gap:35px;justify-content:space-between;padding-block:35px}
.footer .brand{width:156px}
.footer .brand img{width:100%;height:auto}
.footer nav{display:flex;align-items:center;gap:22px;font-size:11px;flex-wrap:wrap}
.footer p{font-size:10px;color:var(--muted);white-space:nowrap}
@keyframes node-fire{0%{background:var(--paper);border-color:#b9c3dd}50%{background:var(--accent-soft);border-color:var(--blue);transform:translateY(-2px)}100%{background:var(--paper);border-color:var(--ink)}}
@keyframes message-arrive{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
@keyframes tag-arrive{from{opacity:0;transform:rotate(-4deg) translateY(7px)}to{opacity:1;transform:rotate(-4deg) translateY(0)}}

@media(max-width:1100px){
  .wrap{width:calc(100% - 64px)}.hero{gap:28px}.nav{gap:22px}.nav nav{gap:22px}
  h1{font-size:47px;letter-spacing:-2.2px}.hero-intro{font-size:16px}.hero-checks{font-size:12px}
  .hero-actions{gap:12px}.hero .button{font-size:13px;gap:20px}
  .demo{padding-inline:14px;min-height:530px}.demo-content{gap:9px;padding-top:36px}
  .workflow-node{padding:12px 7px;gap:6px}.workflow-node b{font-size:10px}.workflow-node small{font-size:6px}
  .node-icon{width:23px;height:23px}.node-icon .icon{width:14px;height:14px}.node-tick{font-size:10px}
  .sim-route{font-size:7px;padding-inline:5px}.android-phone{border-width:4px;border-radius:23px;min-height:380px}
  .conversation-header{gap:5px;padding-inline:7px}.contact-avatar{width:22px;height:22px;font-size:8px}
  .conversation-header small{font-size:6px}.conversation-header>.icon{width:12px;height:12px}
  .conversation{padding-inline:7px;font-size:8px}.usage-tag{left:21px;bottom:56px;padding:14px 18px;gap:22px}
  .quality,.faq{gap:40px}.benefit{padding:24px}.benefit h3{font-size:23px}
  .signal-art{gap:6px;height:95px}.signal-art span{width:16px}
  .receipt{padding:29px}.receipt h3{font-size:22px}.receipt-pill{font-size:6px}
  .workflow-example{padding:24px}.workflow-example h3{font-size:19px}
  .plan{padding:25px}.plan h3{font-size:22px}.plan-price{font-size:57px}
  .plan .button{padding-inline:16px;font-size:12px;gap:10px}.footer{gap:25px}.footer nav{gap:16px}
}
@media(max-width:900px){
  .nav nav{display:none}.hero{grid-template-columns:1fr;gap:35px;padding-block:42px 55px}
  .hero-copy{max-width:680px}.hero h1{font-size:clamp(42px,7vw,62px)}
  .hero-intro{font-size:18px}.hero-checks{font-size:14px}.hero-actions{gap:17px}.hero .button{font-size:15px}
  .demo{width:100%;max-width:540px;min-height:545px;justify-self:center;padding-inline:24px}
  .demo-content{gap:18px;padding-top:30px}.workflow-node{padding:14px 10px;gap:9px}
  .workflow-node b{font-size:12px}.workflow-node small{font-size:7px}
  .node-icon{width:29px;height:29px}.node-icon .icon{width:16px;height:16px}
  .sim-route{font-size:9px;padding-inline:10px}.android-phone{min-height:400px}
  .conversation-header{padding-inline:9px;gap:7px}.conversation-header small{font-size:7px}
  .contact-avatar{width:27px;height:27px;font-size:10px}.conversation{padding-inline:10px;font-size:10px}
  .usage-tag{left:30px;padding:17px 22px;gap:27px}.section{padding-block:72px}
  .benefit-grid{gap:14px}.benefit{padding:22px}.benefit h3{font-size:22px}
  .benefit p{font-size:12px}.tile-number{font-size:75px}.tile-index{font-size:8px}
  .benefit-wide{grid-template-columns:1.5fr .5fr}.signal-art{gap:4px;height:75px}.signal-art span{width:10px}
  .heading-split{gap:25px}.heading-split>p{font-size:12px;max-width:260px}
  .receipt{padding:24px}.receipt dl>div{font-size:11px}.receipt-pill{display:none}
  .receipt-total strong{font-size:19px}.receipt-vexa .receipt-total strong{font-size:49px}
  .quality h2{font-size:34px}.quality-copy>p:not(.eyebrow){font-size:13px}
  .quality-path{padding:20px}.path-heading{font-size:13px}.path-route{gap:7px}.path-route b{font-size:9px}
  .path-route .icon{width:18px;height:18px}.quality-path>p{font-size:10px}
  .workflow-example{padding:22px}.workflow-example h3{font-size:18px}.workflow-example p{font-size:12px}
  .automation-tools{padding:24px}.tool-logos{gap:15px}.setup-steps{gap:25px}
  .setup-steps h3{font-size:21px}.setup-steps p{font-size:12px}
  .pricing-grid{gap:12px}.plan{padding:22px}.plan h3{font-size:19px}
  .plan-price{font-size:48px;letter-spacing:-2px}.plan-price span{font-size:11px}
  .plan ul{font-size:10px}.plan>p:not(.plan-price){font-size:11px}
  .plan .button{font-size:11px;gap:8px;padding-inline:10px}.pricing-notes p{font-size:10px}
  .faq{gap:30px}.faq h2{font-size:32px}.faq summary{font-size:13px}
  .closing h2{font-size:58px}.closing .button{min-width:220px}
  .footer{flex-wrap:wrap}.footer nav,.footer p{margin-left:auto}
}
@media(max-width:700px){
  .wrap{width:calc(100% - 40px)}.nav{height:70px;gap:15px}.brand{width:162px}
  .brand img{width:100%;height:auto}.login{display:none}.nav-actions{gap:0}
  .button-small{font-size:11px;gap:12px;min-height:37px;padding:8px 13px}
  .hero{padding-block:36px 48px}.hero h1{font-size:clamp(38px,8.3vw,58px);letter-spacing:-2px}
  .hero-intro{font-size:16px;margin-top:20px}.crm-brands{grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:24px}
  .hero-checks{font-size:13px;gap:12px;margin-block:22px 26px}.hero .button{font-size:14px;gap:25px}
  .price-caption,.requirements{font-size:10px}.requirements{margin-top:15px}
  .demo{max-width:480px;min-height:525px;padding:20px}
  .demo-topline{font-size:8px}.example-label{font-size:7px}
  .demo-content{gap:13px}.workflow-node{padding:13px 9px;gap:7px}
  .workflow-node b{font-size:11px}.node-icon{width:25px;height:27px}
  .sim-route{font-size:8px;padding:10px 7px}.android-phone{min-height:385px}
  .conversation{font-size:9px;padding-inline:9px}.conversation-header small{font-size:6px}
  .contact-avatar{width:25px;height:25px}.usage-tag{bottom:54px;left:28px;padding:15px 20px;gap:25px}
  .section{padding-block:58px}.section-heading{margin-bottom:30px}
  h2{font-size:36px;letter-spacing:-1.5px}.eyebrow{font-size:10px;margin-bottom:15px}
  .heading-split{display:block}.heading-split>p{font-size:13px;margin-top:20px;max-width:none}
  .benefit-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .benefit{min-height:260px;padding:23px}.benefit h3{font-size:23px}
  .benefit-dark{grid-column:span 2;min-height:0;display:grid;grid-template-columns:1fr auto;gap:0 25px}
  .benefit-dark .tile-index,.benefit-dark p,.tile-flow{grid-column:span 2}
  .benefit-dark .tile-icon{grid-row:2;grid-column:2}.benefit-dark h3{grid-row:2}
  .benefit-wide{grid-column:span 2;min-height:235px;grid-template-columns:1.4fr .6fr}
  .signal-art{height:85px;gap:5px}.signal-art span{width:13px}
  .receipt-grid{grid-template-columns:1fr;gap:20px}.receipt{padding:29px}
  .receipt h3{font-size:24px}.receipt dl>div{font-size:13px}.receipt-total strong{font-size:21px}
  .receipt-pill{display:block;font-size:7px}.receipt-vexa .receipt-total strong{font-size:56px}
  .comparison-note{text-align:left;font-size:9px}.quality{grid-template-columns:1fr;gap:32px}
  .quality h2{font-size:36px}.quality-copy>p:not(.eyebrow){font-size:14px;max-width:none}
  .quality-path{padding:25px}.path-heading{font-size:16px}.path-route b{font-size:12px}
  .path-route .icon{width:23px;height:23px}.quality-path>p{font-size:11px}
  .workflow-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .workflow-example{padding:24px 21px}.workflow-example h3{font-size:19px}
  .automation-tools{display:flex;flex-wrap:wrap;padding:25px;gap:20px}
  .automation-tools>div:first-child{width:100%}.automation-tools p{font-size:12px}
  .automation-tools .tools-note{text-align:left;max-width:130px;font-size:9px;margin-left:auto}
  .tool-logos{gap:18px}.tool-logos img:first-child{max-width:85px}.tool-logos img:last-child{max-width:70px}
  .setup-steps{grid-template-columns:1fr;gap:30px}
  .setup-steps li{display:grid;grid-template-columns:48px 1fr;gap:0 21px;padding-top:22px}
  .step-number{grid-row:span 2;font-size:42px;letter-spacing:-2px;margin:0}
  .setup-steps h3{font-size:24px;margin-top:2px}.setup-steps p{font-size:13px;margin-top:12px}
  .pricing-grid{grid-template-columns:1fr;gap:16px}.plan{padding:29px}.plan h3{font-size:24px}
  .plan-label{font-size:9px;margin-bottom:15px}.plan-price{font-size:65px;letter-spacing:-4px}
  .plan-price span{font-size:12px}.plan ul,.plan>p:not(.plan-price){font-size:13px}
  .plan .button{font-size:14px;gap:25px}.pricing-notes{display:block}.pricing-notes p{font-size:11px}
  .pricing-notes a{display:inline-block;margin-top:17px}.faq{grid-template-columns:1fr;gap:30px}
  .faq h2{font-size:36px}.support-link{margin-top:18px;font-size:12px}
  .faq summary{font-size:14px}.closing-inner{display:block;padding-block:55px}
  .closing h2{font-size:55px;letter-spacing:-2.5px}.closing p:not(.eyebrow){font-size:13px}
  .closing .button{margin-top:30px;min-width:0}.footer{gap:26px;padding-block:30px}
  .footer nav{order:3;width:100%;gap:20px;margin:0}.footer .brand{width:156px}.footer p{font-size:9px}
}
@media(max-width:390px){
  .wrap{width:calc(100% - 32px)}.nav .brand{width:140px}.nav .brand img{width:100%;height:auto}
  .button-small{padding-inline:11px;gap:8px}.hero h1{font-size:36px;letter-spacing:-1.8px}
  .hero-intro{font-size:15px}.hero-checks{font-size:12px}.hero-actions{display:block}
  .price-caption{display:block;margin-top:10px}.requirements{font-size:9px}
  .demo{padding:16px 13px;min-height:500px}.demo-topline{font-size:7px;gap:5px}
  .demo-content{gap:9px}.workflow-node{gap:6px;padding:12px 7px}.node-icon{width:21px;height:24px}
  .workflow-node b{font-size:9px}.workflow-node small{font-size:6px}.node-tick{display:none}
  .sim-route{font-size:7px;gap:4px;padding-inline:5px}.sim-route .route-dot{display:none}
  .android-phone{min-height:365px;border-radius:22px}.conversation-header{padding-inline:6px;gap:5px}
  .contact-avatar{width:21px;height:21px;font-size:8px}.conversation-header>.icon{display:none}
  .conversation-header b{font-size:9px}.conversation-header small{font-size:5px}
  .conversation{font-size:7.5px;padding-inline:6px}.workflow-message{padding:9px;margin-left:5px}
  .message-origin{font-size:4.7px;letter-spacing:0}.reply-message{padding:9px;margin-right:5px}
  .usage-tag{left:19px;bottom:53px;padding:13px 16px;gap:15px}.usage-tag strong{font-size:39px}
  .usage-tag span{font-size:6px}.demo figcaption{font-size:7px}
  .benefit{padding:19px}.benefit h3{font-size:20px}.benefit p{font-size:11px}
  .tile-index{font-size:7px;letter-spacing:.7px}.tile-number{font-size:65px}
  .signal-art span{width:9px}.signal-art{gap:4px;height:70px}
  .workflow-grid{grid-template-columns:1fr}.workflow-example{padding:24px}
  .workflow-example h3{font-size:21px}.workflow-example p{font-size:13px}
  .automation-tools{padding:22px}.automation-tools .tools-note{width:100%;max-width:none;margin:0}
  .receipt{padding:23px}.receipt dl>div{font-size:12px}.receipt-brand h3{font-size:22px}
  .receipt-pill{font-size:6px;padding:4px 5px}.receipt-vexa .receipt-total strong{font-size:49px}
  .receipt-total strong{font-size:19px}.path-route b{font-size:10px}.quality-path{padding:21px}
  .plan{padding:25px}.closing h2{font-size:48px}.footer nav{gap:16px;font-size:10px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}
@media print{.header{position:static}.demo *{animation:none!important}.button{box-shadow:none}.wrap{width:100%}.section{padding-block:30px}}