/* SoRex website.
   Layout: one 1200px column with a fixed spacing scale; colour comes only from
   the six logo nodes, and each node colour always means the channel it means in
   the console (green WhatsApp, pink Instagram, ...). Dark and light are both
   designed; the header toggle overrides the system setting. */
:root{
  --bg:#0A0A0D; --bg2:#0E0E12; --panel:#121216; --elev:#1A1A20; --ink:#F2F2F5; --muted:#9A9AA6; --line:#25252C; --line2:#30303A;
  --cyan:#00C2FE; --green:#0ABC95; --yellow:#FEBC10; --blue:#1676FD; --pink:#ED2EA5; --purple:#864AFB;
  --cyan-t:#3DD2FF; --green-t:#34D6B0; --yellow-t:#FECB45; --blue-t:#64A3FF; --pink-t:#F563C0; --purple-t:#A982FF;
  --on-cyan:#04121A;
  --shadow:0 30px 70px -35px rgba(0,0,0,.75);
  --grad:linear-gradient(120deg,#05c8fd 5%,#1b99fd 22%,#5659f5 42%,#7f2eea 60%,#d52eb6 80%,#ff318c 95%);
  --display:"Sora","Segoe UI",system-ui,sans-serif;
  --body:"Plus Jakarta Sans","Segoe UI",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  /* spacing scale */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;
  --r:18px; --r-lg:24px;
  color-scheme:dark;
}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]){
  --bg:#F7F8FB; --bg2:#EEF1F6; --panel:#FFFFFF; --elev:#F1F3F8; --ink:#12131A; --muted:#5B5F6E; --line:#E3E6EE; --line2:#D5D9E3;
  --cyan-t:#0080AD; --green-t:#06836A; --yellow-t:#8F6500; --blue-t:#0E5BD0; --pink-t:#BC1A80; --purple-t:#6230D6;
  --shadow:0 30px 70px -40px rgba(20,30,60,.28);
  color-scheme:light;
}}
:root[data-theme="light"]{
  --bg:#F7F8FB; --bg2:#EEF1F6; --panel:#FFFFFF; --elev:#F1F3F8; --ink:#12131A; --muted:#5B5F6E; --line:#E3E6EE; --line2:#D5D9E3;
  --cyan-t:#0080AD; --green-t:#06836A; --yellow-t:#8F6500; --blue-t:#0E5BD0; --pink-t:#BC1A80; --purple-t:#6230D6;
  --shadow:0 30px 70px -40px rgba(20,30,60,.28);
  color-scheme:light;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16.5px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background .3s ease,color .3s ease}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--bg)}
img{max-width:100%;display:block}
h1,h2,h3,h4{font-family:var(--display);line-height:1.1;margin:0;text-wrap:balance;letter-spacing:-.03em;font-weight:700}
p{margin:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:8px}
code{font-family:var(--mono);font-size:.86em;background:var(--elev);border:1px solid var(--line);padding:1px 6px;border-radius:6px}
.wrap{max-width:1280px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
@media (min-width:760px){.wrap{padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))}}
.eyebrow{display:inline-flex;align-items:center;gap:var(--s2);font:600 13px var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--cyan-t)}
.eyebrow::before{content:"";width:18px;height:2px;border-radius:2px;background:var(--grad)}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.muted{color:var(--muted)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);font:600 15px/1 var(--body);padding:15px 24px;border-radius:999px;border:1px solid transparent;text-decoration:none;cursor:pointer;transition:transform .15s ease,background .2s ease,box-shadow .25s ease,border-color .2s;white-space:nowrap}
.btn-sm{padding:11px 18px;font-size:14px}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--cyan);color:var(--on-cyan)}
.btn-primary:hover{box-shadow:0 10px 32px -8px rgba(0,194,254,.6)}
.btn-ghost{border-color:var(--line2);background:var(--panel);color:var(--ink)}
.btn-ghost:hover{border-color:var(--muted)}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.btn .arrow{transition:transform .2s ease}
.btn:hover .arrow{transform:translateX(3px)}

/* header */
.site-header{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--bg) 80%,transparent);backdrop-filter:saturate(1.5) blur(16px);-webkit-backdrop-filter:saturate(1.5) blur(16px);border-bottom:1px solid var(--line)}
.site-header .wrap{display:flex;align-items:center;gap:var(--s3);min-height:72px;position:relative}
.brand{display:flex;align-items:center;gap:var(--s3);font:700 21px var(--display);letter-spacing:-.03em;text-decoration:none;margin-right:auto;flex:none}
.brand img{width:36px;height:36px;flex:none;transition:transform .6s cubic-bezier(.3,1.6,.5,1)}
.brand:hover img{transform:rotate(60deg)}
.nav-links{display:flex;gap:var(--s1);list-style:none;margin:0 var(--s3) 0 0;padding:0}
.nav-links a{display:block;padding:9px 16px;border-radius:999px;text-decoration:none;font-size:15px;font-weight:500;color:var(--muted);transition:color .15s,background .15s}
.nav-links a:hover{color:var(--ink)}
.nav-links a[aria-current="page"]{color:var(--ink);background:var(--elev)}
.theme-btn,.menu-btn{display:grid;place-items:center;flex:none;width:42px;height:42px;border-radius:12px;border:1px solid var(--line2);background:var(--panel);color:var(--ink);cursor:pointer;transition:border-color .2s}
.theme-btn:hover,.menu-btn:hover{border-color:var(--muted)}
.theme-btn svg,.menu-btn svg{width:19px;height:19px}
.theme-btn .i-sun{display:none}
:root[data-theme="dark"] .theme-btn .i-sun{display:block}
:root[data-theme="dark"] .theme-btn .i-moon{display:none}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .theme-btn .i-sun{display:block}:root:not([data-theme="light"]) .theme-btn .i-moon{display:none}}
.menu-btn{display:none}
@media (max-width:1220px){
  .menu-btn{display:grid}
  .site-header .cta-head{display:none}
  .nav-links{position:absolute;top:100%;left:0;right:0;margin:0;flex-direction:column;background:var(--bg);border-bottom:1px solid var(--line);padding:var(--s3) max(16px,env(safe-area-inset-right,0px)) var(--s5) max(16px,env(safe-area-inset-left,0px));display:none;box-shadow:var(--shadow)}
  .nav-links.open{display:flex}
  .nav-links a{padding:14px 16px;font-size:17px}
}

/* sections */
.section{padding-block:var(--s10)}
.section + .section{border-top:1px solid var(--line)}
.sec-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:var(--s7);align-items:end;margin-bottom:var(--s8)}
.sec-head h2{font-size:clamp(32px,4.2vw,52px)}
.sec-head p{color:var(--muted);font-size:18px;max-width:50ch}
@media (max-width:860px){.sec-head{grid-template-columns:1fr;gap:var(--s4);margin-bottom:var(--s7)}.section{padding-block:var(--s9)}}
@media (max-width:560px){.section{padding-block:var(--s8)}}

.page-hero{padding-block:var(--s9) var(--s8);position:relative;overflow:hidden}
.page-hero h1{font-size:clamp(40px,6.2vw,80px);max-width:15ch;margin-top:var(--s5)}
.page-hero p.lede{font-size:clamp(17px,1.6vw,20px);color:var(--muted);max-width:58ch;margin-top:var(--s5)}
.page-hero::after{content:"";position:absolute;right:-160px;top:-200px;width:560px;height:560px;border-radius:50%;background:var(--grad);filter:blur(130px);opacity:.16;pointer-events:none;animation:drift 18s ease-in-out infinite alternate}
@keyframes drift{to{transform:translate(-140px,90px) scale(1.15)}}
@media (max-width:560px){.page-hero{padding-block:var(--s8) var(--s6)}}

/* home hero */
.hero{padding-block:var(--s9) var(--s8);position:relative;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:var(--s8);align-items:center}
.hero h1{font-size:clamp(42px,6vw,80px);margin-top:var(--s5)}
.hero .lede{font-size:clamp(17px,1.6vw,20px);color:var(--muted);max-width:44ch;margin-top:var(--s5)}
.hero .ctas{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s6)}
.hero .proof{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);margin-top:var(--s6);font-size:14.5px;color:var(--muted)}
.hero .proof span{display:inline-flex;align-items:center;gap:var(--s2)}
.hero .proof span::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green)}
@media (max-width:960px){.hero .wrap{grid-template-columns:1fr;gap:var(--s7)}.hero{padding-block:var(--s8) var(--s7)}}
.hero-word{display:inline-block;animation:wordin .8s cubic-bezier(.2,.8,.2,1) both}
.hero-word:nth-child(2){animation-delay:.08s}.hero-word:nth-child(3){animation-delay:.16s}.hero-word:nth-child(4){animation-delay:.24s}
@keyframes wordin{from{transform:translateY(18px);opacity:.15;filter:blur(6px)}to{transform:none;opacity:1;filter:none}}

/* the hub: the logo as a live diagram of channels arriving at one inbox */
.hub{position:relative;width:min(100%,520px);aspect-ratio:1;margin-inline:auto;padding:6%}
.hub svg{width:100%;height:100%;display:block;overflow:visible}
.hub .node{transform-box:view-box;transform-origin:628px 618px;animation:nodein .9s cubic-bezier(.2,1.3,.4,1) both,breathe 6s ease-in-out infinite;animation-delay:calc(var(--i)*.09s),calc(1s + var(--i)*.5s)}
@keyframes nodein{from{transform:scale(.55);opacity:.2}to{transform:none;opacity:1}}
@keyframes breathe{50%{transform:scale(1.025)}}
.hub .core{transform-box:fill-box;transform-origin:center;animation:corein .7s .45s cubic-bezier(.2,1.4,.4,1) both}
@keyframes corein{from{transform:scale(.6) rotate(-12deg)}to{transform:none}}
.hub .ring{transform-box:fill-box;transform-origin:center;animation:ring 3s ease-out infinite;fill:none;stroke:url(#hub-grad);stroke-width:6}
.hub .ring.r2{animation-delay:1.5s}
@keyframes ring{from{transform:scale(1);opacity:.7}to{transform:scale(2.1);opacity:0}}
.hub .bar{transform-box:fill-box;transform-origin:left center;animation:typebar 2.6s ease-in-out infinite}
.hub .bar:nth-of-type(2){animation-delay:.3s}.hub .bar:nth-of-type(3){animation-delay:.6s}
@keyframes typebar{0%,100%{transform:scaleX(1)}45%{transform:scaleX(.55)}}
.hub .glow{position:absolute;inset:26%;border-radius:50%;background:var(--grad);filter:blur(60px);opacity:.3;z-index:-1;animation:spin 14s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.chan{position:absolute;display:inline-flex;align-items:center;gap:7px;font:600 12.5px var(--body);padding:6px 12px;border-radius:999px;background:color-mix(in srgb,var(--panel) 90%,transparent);border:1px solid var(--line2);white-space:nowrap;backdrop-filter:blur(6px);box-shadow:var(--shadow);transform:translate(var(--tx),var(--ty));animation:chanin .6s cubic-bezier(.2,1.3,.4,1) both;animation-delay:calc(.6s + var(--i)*.1s)}
.chan::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c)}
@keyframes chanin{from{transform:translate(var(--tx),var(--ty)) scale(.7);opacity:.1}to{transform:translate(var(--tx),var(--ty));opacity:1}}
.chan.c1{--c:var(--cyan);left:50%;top:4%;--tx:-50%;--ty:-50%}
.chan.c2{--c:var(--green);left:100%;top:30%;--tx:-100%;--ty:-50%}
.chan.c3{--c:var(--yellow);left:100%;top:72%;--tx:-100%;--ty:-50%}
.chan.c4{--c:var(--blue);left:50%;top:96%;--tx:-50%;--ty:-50%}
.chan.c5{--c:var(--pink);left:0;top:72%;--tx:0;--ty:-50%}
.chan.c6{--c:var(--purple);left:0;top:30%;--tx:0;--ty:-50%}
@media (max-width:440px){.chan{font-size:11px;padding:4px 9px}}

/* channel marquee */
.marquee{border-block:1px solid var(--line);overflow:hidden;padding-block:var(--s5);background:var(--bg2);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee .track{display:flex;gap:var(--s7);width:max-content;animation:marq 40s linear infinite}
.marquee:hover .track{animation-play-state:paused}
.marquee span{display:inline-flex;align-items:center;gap:var(--s3);font:600 16px var(--display);letter-spacing:-.01em;color:var(--muted);white-space:nowrap}
.marquee span::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--c)}
@keyframes marq{to{transform:translateX(-50%)}}

/* agent flow: how the agent handles a message */
.flow{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:var(--s6);align-items:stretch}
@media (max-width:960px){.flow{grid-template-columns:1fr}}
.flow-steps{list-style:none;margin:0;padding:0;display:grid;gap:var(--s2)}
.flow-step{width:100%;display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s2) var(--s4);align-items:center;text-align:left;font:inherit;color:inherit;background:transparent;border:1px solid transparent;border-radius:16px;padding:var(--s4) var(--s5);cursor:pointer;position:relative;transition:background .25s,border-color .25s}
.flow-step:hover{background:var(--panel)}
.flow-step b{display:block;font:600 17px var(--display);letter-spacing:-.015em;color:var(--muted);transition:color .25s}
.flow-step small{display:block;color:var(--muted);font-size:14.5px;margin-top:2px}
.fs-dot{width:12px;height:12px;border-radius:50%;background:var(--line2);transition:background .25s,box-shadow .25s}
.fs-bar{grid-column:1/-1;height:3px;border-radius:3px;background:var(--line);overflow:hidden;display:none}
.fs-bar i{display:block;height:100%;width:0;background:var(--c)}
.flow-step.on{background:var(--panel);border-color:var(--line2);box-shadow:var(--shadow)}
.flow-step.on b{color:var(--ink)}
.flow-step.on .fs-dot{background:var(--c);box-shadow:0 0 0 5px color-mix(in srgb,var(--c) 22%,transparent)}
.flow-step.on .fs-bar{display:block}
.flow-step.on .fs-bar i{animation:fill var(--dur,5.2s) linear forwards}
.flow.paused .flow-step.on .fs-bar i{animation-play-state:paused}
@keyframes fill{to{width:100%}}
.flow-stage{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);display:flex;flex-direction:column;min-height:380px;overflow:hidden;position:relative}
.flow-stage::before{content:"";position:absolute;inset:-30% -30% auto auto;width:320px;height:320px;border-radius:50%;background:var(--glow,var(--cyan));opacity:.14;filter:blur(80px);transition:background .5s;pointer-events:none}
.fl-top{display:flex;align-items:center;gap:var(--s3);padding:var(--s4) var(--s5);border-bottom:1px solid var(--line);font-size:14.5px;position:relative}
.fl-mark{width:34px;height:34px;border-radius:10px;background:var(--elev);display:grid;place-items:center;flex:none}
.fl-status{margin-left:auto;font:600 12px var(--body);padding:5px 11px;border-radius:999px;background:color-mix(in srgb,var(--green) 16%,transparent);color:var(--green-t);display:inline-flex;align-items:center;gap:6px}
.fl-status::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green);animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{50%{opacity:.3}}
.fl-body{flex:1;padding:var(--s6) var(--s5);display:flex;flex-direction:column;gap:var(--s4);position:relative}
.fl-foot{padding:var(--s3) var(--s5);border-top:1px solid var(--line);font-size:13px;color:var(--muted);background:var(--bg2);position:relative}
.fl-label{font:600 12px var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--ct)}
.fl-line{font-size:16px;line-height:1.55;min-height:1.55em}
.fl-line.big{font:600 clamp(19px,2vw,23px)/1.4 var(--display);letter-spacing:-.015em}
.fl-chip{align-self:flex-start;display:inline-flex;align-items:center;gap:var(--s2);font:600 13px var(--body);padding:7px 12px;border-radius:10px;background:color-mix(in srgb,var(--c) 14%,transparent);color:var(--ct);animation:pop .4s cubic-bezier(.2,1.4,.4,1) both}
.fl-chip::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c)}
.fl-card{border:1px solid var(--line2);background:var(--elev);border-radius:14px;padding:var(--s4);display:grid;gap:4px;animation:pop .45s cubic-bezier(.2,1.2,.4,1) both}
.fl-card small{color:var(--muted);font-size:13px}
.fl-card b{font-size:15.5px}
.fl-bubble{align-self:flex-end;max-width:90%;background:var(--cyan);color:var(--on-cyan);padding:var(--s3) var(--s4);border-radius:18px 18px 5px 18px;font-size:15.5px;line-height:1.5}
.fl-bubble.in{align-self:flex-start;background:var(--elev);color:var(--ink);border-radius:18px 18px 18px 5px}
.caret::after{content:"";display:inline-block;width:2px;height:1.05em;margin-left:2px;vertical-align:-2px;background:currentColor;animation:blinkc .8s steps(1) infinite}
@keyframes blinkc{50%{opacity:0}}
@keyframes pop{from{transform:translateY(8px) scale(.96);opacity:.1}to{transform:none;opacity:1}}

/* inbox demo */
.demo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:var(--s8);align-items:center}
@media (max-width:960px){.demo{grid-template-columns:1fr;gap:var(--s7)}}
.demo h2{font-size:clamp(32px,4.2vw,52px);margin:var(--s4) 0 var(--s6)}
.demo-points{display:grid;gap:var(--s5)}
.demo-points > div{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s4);align-items:start}
.demo-points b{display:block;font:600 17px var(--display);letter-spacing:-.015em;margin-bottom:var(--s1)}
.demo-points p{color:var(--muted);font-size:15.5px}
.dot{width:12px;height:12px;border-radius:4px;margin-top:7px;background:var(--c)}
.inbox{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow);min-width:0}
.inbox-top{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);padding:var(--s4) var(--s5);border-bottom:1px solid var(--line)}
.who{display:flex;align-items:center;gap:var(--s3);min-width:0}
.avatar{width:38px;height:38px;border-radius:50%;background:var(--elev);display:grid;place-items:center;font:600 13px var(--body);flex:none;position:relative}
.avatar::after{content:"";position:absolute;right:-1px;bottom:-1px;width:12px;height:12px;border-radius:50%;background:var(--green);border:2px solid var(--panel)}
.who b{display:block;font-size:15px;line-height:1.25}
.who small{color:var(--muted);font-size:12.5px}
.pill{display:inline-flex;align-items:center;gap:6px;font:600 12px var(--body);padding:5px 11px;border-radius:999px;white-space:nowrap;background:color-mix(in srgb,var(--c) 16%,transparent);color:var(--ct)}
.pill::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--c)}
.pill.agent{--c:var(--cyan);--ct:var(--cyan-t)}
.pill.staff{--c:var(--yellow);--ct:var(--yellow-t)}
.thread{padding:var(--s5);display:flex;flex-direction:column;gap:var(--s3);height:420px;overflow:hidden;justify-content:flex-end}
.msg{max-width:84%;padding:11px 15px;border-radius:18px;font-size:15px;line-height:1.5;animation:msgin .35s cubic-bezier(.2,1,.3,1) both}
.msg.in{background:var(--elev);align-self:flex-start;border-bottom-left-radius:5px}
.msg.out{align-self:flex-end;border-bottom-right-radius:5px;background:var(--cyan);color:var(--on-cyan)}
.msg.human{background:var(--yellow);color:#1A1405}
.sys{align-self:center;font-size:12.5px;color:var(--muted);border:1px dashed var(--line2);border-radius:10px;padding:5px 12px;animation:msgin .35s ease both;max-width:94%;text-align:center}
.sys b{color:var(--ink);font-weight:600}
.typing{display:inline-flex;gap:4px;padding:14px 16px}
.typing i{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.4;animation:blink 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes blink{50%{opacity:1;transform:translateY(-2px)}}
@keyframes msgin{from{transform:translateY(10px) scale(.97);opacity:.1}to{transform:none;opacity:1}}
.inbox-foot{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);padding:var(--s3) var(--s5);border-top:1px solid var(--line);background:var(--bg2);flex-wrap:wrap}
.inbox-foot small{color:var(--muted);font-size:13px}
.takeover{font:600 13.5px var(--body);border-radius:999px;padding:9px 16px;border:1px solid var(--yellow);color:var(--yellow-t);background:transparent;cursor:pointer;transition:background .15s}
.takeover:hover{background:color-mix(in srgb,var(--yellow) 12%,transparent)}
.takeover[aria-pressed="true"]{background:var(--yellow);color:#1A1405}
.example-note{font-size:12.5px;color:var(--muted);margin-top:var(--s3);text-align:right}

/* cards & grids */
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5)}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5)}
@media (max-width:960px){.grid3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.grid3,.grid2{grid-template-columns:1fr}}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:var(--s6);display:flex;flex-direction:column;gap:var(--s3);min-width:0;position:relative;overflow:hidden;transition:transform .25s ease,border-color .25s ease,box-shadow .25s}
.card:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--c,var(--cyan)) 50%,var(--line));box-shadow:var(--shadow)}
.card::before{content:"";position:absolute;inset:auto -40% -60% auto;width:260px;height:260px;border-radius:50%;background:var(--c,var(--cyan));opacity:0;filter:blur(70px);transition:opacity .35s ease;pointer-events:none}
.card:hover::before{opacity:.16}
.card .icon{margin-bottom:var(--s2)}
.card h3{font-size:21px;letter-spacing:-.02em}
.card p{color:var(--muted);font-size:15.5px}
.card .tag{font:600 12.5px var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--ct,var(--cyan-t))}
.card ul{margin:var(--s2) 0 0;padding:var(--s4) 0 0;border-top:1px solid var(--line);list-style:none;display:grid;gap:var(--s2);font-size:15px}
.card li{display:grid;grid-template-columns:14px minmax(0,1fr);gap:var(--s2)}
.card li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--c,var(--cyan));margin-top:10px}
.icon{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;background:color-mix(in srgb,var(--c) 15%,transparent);color:var(--c)}
.icon svg{width:22px;height:22px}
.k-cyan{--c:var(--cyan);--ct:var(--cyan-t)} .k-green{--c:var(--green);--ct:var(--green-t)} .k-yellow{--c:var(--yellow);--ct:var(--yellow-t)}
.k-blue{--c:var(--blue);--ct:var(--blue-t)} .k-pink{--c:var(--pink);--ct:var(--pink-t)} .k-purple{--c:var(--purple);--ct:var(--purple-t)}

/* scale section */
.scale{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:var(--s5)}
@media (max-width:860px){.scale{grid-template-columns:1fr}}
.co{border-radius:var(--r);padding:var(--s6);border:1px solid var(--line);background:var(--panel);display:flex;flex-direction:column;gap:var(--s4);min-width:0}
.co h3{font-size:24px}
.co p{color:var(--muted)}
/* team size: how conversations reach people. Channels come in, the agent
   answers what it can, the rest goes to the owners or to queues. */
.co{container-type:inline-size}
.route{display:grid;grid-template-columns:auto minmax(20px,1fr) auto minmax(20px,1fr) auto;align-items:center;gap:var(--s2);
  padding:var(--s4);border-radius:14px;background:var(--bg2);border:1px solid var(--line)}
.rt-in{display:flex;flex-direction:column;gap:5px}
.rt-in span{display:inline-flex;align-items:center;gap:6px;font:500 12px var(--body);color:var(--muted);white-space:nowrap}
.rt-in span::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c);box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 22%,transparent)}
.rt-line{position:relative;height:2px;border-radius:2px;background:var(--line2);overflow:visible}
.rt-line::after{content:"";position:absolute;top:-2px;left:0;width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan);animation:rtgo 1.8s linear infinite}
.rt-rest::after{background:var(--pink);box-shadow:0 0 10px var(--pink);animation-delay:.9s}
.rt-line small{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);font:500 11px var(--mono);color:var(--muted);white-space:nowrap}
@keyframes rtgo{from{left:0;opacity:0}15%{opacity:1}85%{opacity:1}to{left:calc(100% - 6px);opacity:0}}
.rt-agent{display:grid;justify-items:center;text-align:center;gap:2px;padding:var(--s3);border-radius:12px;max-width:118px;
  background:linear-gradient(var(--panel),var(--panel)) padding-box,var(--grad) border-box;border:1px solid transparent}
.rt-agent img{width:28px;height:28px;margin-bottom:2px}
.rt-agent b{font:600 12.5px var(--display)}
.rt-agent small{font-size:11px;line-height:1.3;color:var(--muted)}
.rt-team{display:grid;gap:6px}
.rt-q{display:grid;gap:3px}
.rt-q b{font:600 11.5px var(--body);color:var(--ink)}
.pp-row{display:flex;gap:4px}
.pp{width:20px;height:20px;border-radius:50%;flex:none;background:
  radial-gradient(circle at 50% 36%,var(--muted) 0 17%,transparent 19%),
  radial-gradient(ellipse 58% 42% at 50% 100%,var(--muted) 0 98%,transparent 100%),var(--elev);
  border:1px solid var(--line2)}
.rr .pp{animation:rrturn 5s infinite;animation-delay:calc(var(--i)*1s + var(--q,0)*1.7s)}
@keyframes rrturn{0%,18%{border-color:var(--green);box-shadow:0 0 0 2px color-mix(in srgb,var(--green) 35%,transparent)}22%,100%{border-color:var(--line2);box-shadow:none}}
.rt-note{font-size:11px;color:var(--muted);max-width:16ch;line-height:1.3}
@container (max-width:470px){
  .route{grid-template-columns:1fr;justify-items:center;gap:var(--s3)}
  .rt-in{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:6px 12px}
  .rt-line{width:2px;height:26px}
  .rt-line::after{left:-2px;animation-name:rtdown}
  .rt-line small{left:12px;bottom:auto;top:50%;transform:translateY(-50%)}
  .rt-agent{max-width:none}
  .rt-team{justify-items:center;text-align:center}
  .rt-q{justify-items:center}
  .rt-note{max-width:none}
}
@keyframes rtdown{from{top:0;opacity:0}15%{opacity:1}85%{opacity:1}to{top:calc(100% - 6px);opacity:0}}
.rows{display:grid;gap:var(--s3);font-size:15px;margin-top:var(--s2)}
.rows div{display:flex;justify-content:space-between;gap:var(--s4);border-top:1px solid var(--line);padding-top:var(--s3)}
.rows span:last-child{text-align:right;color:var(--muted)}
.same{margin-top:var(--s5);padding:var(--s5) var(--s6);border-radius:var(--r);background:var(--panel);border:1px solid var(--line);font:600 clamp(18px,2vw,24px)/1.35 var(--display);letter-spacing:-.02em;position:relative;overflow:hidden}
.same::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--grad)}

/* pipeline (how it works) */
.pipe{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center}
.pipe .stage{position:relative;font:500 14px var(--body);padding:10px 16px;border-radius:12px;background:var(--panel);border:1px solid var(--line);overflow:hidden}
.pipe .stage::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--cyan) 30%,transparent),transparent);transform:translateX(-100%);animation:sweep 5.5s linear infinite;animation-delay:calc(var(--i)*.38s)}
@keyframes sweep{0%{transform:translateX(-100%)}12%,100%{transform:translateX(100%)}}
.pipe .to{color:var(--muted)}
.pipe .stage.key{border-color:var(--cyan);color:var(--cyan-t);font-weight:600}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s6)}
@media (max-width:1000px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.steps{grid-template-columns:1fr}}
.step{border-top:3px solid var(--c);padding-top:var(--s5);display:flex;flex-direction:column;gap:var(--s3);min-width:0}
.step .n{font:600 13px var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--ct)}
.step h3{font-size:21px}
.step p{color:var(--muted);font-size:15.5px}

.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--panel)}
table{width:100%;border-collapse:collapse;font-size:15px;min-width:560px}
th,td{text-align:left;padding:var(--s4) var(--s5);border-bottom:1px solid var(--line);vertical-align:top}
th{font:600 12.5px var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);background:var(--elev)}
tr:last-child td{border-bottom:0}
td:first-child{font-weight:600;white-space:nowrap}
td.m{color:var(--muted)}

pre.code{margin:0;font:13.5px/1.7 var(--mono);background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:var(--s5) var(--s6);overflow-x:auto;color:var(--ink)}
pre.code .c{color:var(--muted)} pre.code .s{color:var(--green-t)} pre.code .k{color:var(--cyan-t)}

/* pricing */
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5);align-items:stretch}
@media (max-width:1000px){.plans{grid-template-columns:1fr;max-width:560px;margin-inline:auto}}
.plan{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s6);display:flex;flex-direction:column;gap:var(--s5);min-width:0;transition:transform .25s ease,box-shadow .25s ease}
.plan:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.plan.featured{background:linear-gradient(var(--panel),var(--panel)) padding-box,var(--grad) border-box;border:1.5px solid transparent;box-shadow:0 30px 80px -40px rgba(127,46,234,.55)}
.plan .badge{position:absolute;top:-13px;left:var(--s6);font:700 11.5px var(--body);letter-spacing:.06em;text-transform:uppercase;padding:6px 12px;border-radius:999px;background:var(--grad);color:#fff}
.plan h3{font-size:26px}
.plan .for{color:var(--muted);font-size:15px;min-height:3.2em;margin-top:var(--s2)}
.price{display:flex;align-items:baseline;gap:var(--s2);flex-wrap:wrap;min-height:56px;padding-block:var(--s2);border-block:1px solid var(--line)}
.price .amt{font:700 44px/1 var(--display);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.price .per{color:var(--muted);font-size:15px}
.price .tbd{font:500 14px var(--body);color:var(--muted);padding:var(--s2) 0}
.plan ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--s3);font-size:15px}
.plan li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:var(--s3)}
.plan li svg{width:18px;height:18px;margin-top:3px;color:var(--green)}
.plan li.ph{color:var(--muted);font-style:italic}
.plan .btn{margin-top:auto;width:100%}
.includes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4) var(--s6)}
@media (max-width:900px){.includes{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.includes{grid-template-columns:1fr}}
.includes div{display:grid;grid-template-columns:18px minmax(0,1fr);gap:var(--s3);font-size:15.5px}
.includes svg{width:18px;height:18px;margin-top:4px;color:var(--cyan)}
.notice{display:flex;gap:var(--s3);align-items:flex-start;padding:var(--s4) var(--s5);border-radius:14px;border:1px dashed color-mix(in srgb,var(--yellow) 60%,var(--line));background:color-mix(in srgb,var(--yellow) 7%,transparent);font-size:14.5px;margin-bottom:var(--s7)}
.notice b{color:var(--yellow-t)}
.paybar{display:flex;align-items:center;justify-content:center;gap:var(--s2);margin-top:var(--s6);color:var(--muted);font-size:14px;flex-wrap:wrap;text-align:center}
.paybar svg{width:16px;height:16px;color:var(--green)}

/* faq */
.faq{display:grid;gap:var(--s3);max-width:840px}
.faq details{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:0 var(--s5)}
.faq summary{cursor:pointer;list-style:none;font:600 16.5px var(--display);letter-spacing:-.01em;padding:var(--s5) 0;display:flex;justify-content:space-between;gap:var(--s4)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:400 24px/1 var(--body);color:var(--muted);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--muted);padding-bottom:var(--s5)}

/* home FAQ: heading and a way to reach us on the left, the questions on the
   right. One accent: the open question gets the logo gradient. */
.qa-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--s8);align-items:start}
.qa-aside{position:sticky;top:112px;display:grid;gap:var(--s5)}
.qa-aside h2{font-size:clamp(34px,4.4vw,56px)}
.qa-lede{color:var(--muted);font-size:18px;max-width:40ch}
.qa-more{display:grid;gap:var(--s4);margin-top:var(--s3);padding:var(--s5);border-radius:var(--r);border:1px solid var(--line);
  background:linear-gradient(135deg,color-mix(in srgb,var(--blue) 10%,var(--panel)),color-mix(in srgb,var(--purple) 12%,var(--panel)) 60%,color-mix(in srgb,var(--pink) 8%,var(--panel)))}
.qa-more p{color:var(--muted)}
.qa-more b{display:block;color:var(--ink);font:600 18px var(--display);margin-bottom:4px}
.qa-more .row{display:flex;gap:var(--s3);flex-wrap:wrap}

.faq-list{max-width:none;counter-reset:q;interpolate-size:allow-keywords}
.faq-list details{counter-increment:q;border-radius:18px;padding:0 var(--s5);transition:border-color .25s,box-shadow .3s}
.faq-list details:hover{border-color:var(--line2)}
.faq-list details[open]{border-color:transparent;background:linear-gradient(var(--panel),var(--panel)) padding-box,var(--grad) border-box;
  box-shadow:0 24px 60px -36px color-mix(in srgb,var(--purple) 80%,transparent)}
.faq-list summary{display:grid;grid-template-columns:2.2em minmax(0,1fr) auto;align-items:center;gap:var(--s3);font-size:17px;line-height:1.35}
.faq-list summary::before{content:counter(q,decimal-leading-zero);font:500 14px var(--mono);color:var(--muted)}
.faq-list details[open] summary::before{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:600}
.faq-list summary::after{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;border:1px solid var(--line2);font-size:20px;transition:transform .3s,background .3s,color .3s,border-color .3s}
.faq-list details[open] summary::after{transform:rotate(45deg);background:var(--grad);color:#fff;border-color:transparent}
.faq-list details p{padding:0 var(--s7) var(--s5) calc(2.2em + var(--s3));font-size:16px}
.faq-list details::details-content{block-size:0;overflow:hidden;transition:block-size .35s ease,content-visibility .35s allow-discrete}
.faq-list details[open]::details-content{block-size:auto}
.faq-list code{font:500 .9em var(--mono);color:var(--purple-t);background:color-mix(in srgb,var(--purple) 12%,transparent);padding:1px 6px;border-radius:6px}

@media (max-width:960px){
  /* one column: heading, then the questions, then the way to ask us */
  .qa-grid{grid-template-columns:1fr;gap:var(--s5)}
  .qa-aside{display:contents}
  .qa-aside .eyebrow{justify-self:start}
  .qa-lede{margin-bottom:var(--s4)}
  .faq-list{order:1}
  .qa-more{order:2;margin-top:var(--s5)}
}
@media (max-width:560px){
  .faq-list details{padding:0 var(--s4)}
  .faq-list summary{font-size:16px}
  .faq-list details p{padding:0 0 var(--s5)}
}

/* checkout dialog */
.modal{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));background:rgba(5,5,10,.6);backdrop-filter:blur(6px);animation:fade .2s ease both}
@keyframes fade{from{opacity:0}}
.sheet{width:min(100%,460px);background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s6);display:flex;flex-direction:column;gap:var(--s4);animation:msgin .3s cubic-bezier(.2,1,.3,1) both;max-height:100%;overflow:auto;box-shadow:var(--shadow)}
.sheet h3{font-size:24px;margin-top:var(--s2)}
.sheet .sum{display:flex;justify-content:space-between;gap:var(--s3);padding:var(--s4);border-radius:12px;background:var(--elev);font-size:15px}
.sheet .sum b{font-variant-numeric:tabular-nums}
.field{display:grid;gap:6px}
.field label{font-size:14px;font-weight:600}
.field input,.field select,.field textarea{font:15px var(--body);color:var(--ink);background:var(--bg);border:1px solid var(--line2);border-radius:12px;padding:13px 14px;width:100%}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--cyan);outline-offset:0;border-color:transparent}
.sheet .row{display:flex;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s2)}
.sheet .row .btn{flex:1}
.err{color:var(--pink-t);font-size:14px}
.okmark{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--green) 18%,transparent);color:var(--green);animation:corein .5s cubic-bezier(.2,1.5,.4,1) both}
.okmark svg{width:30px;height:30px}

/* cta band */
.cta-band{padding-block:var(--s9)}
.cta-box{position:relative;overflow:hidden;border-radius:28px;padding:clamp(32px,6vw,72px);background:var(--panel);border:1px solid var(--line);display:grid;grid-template-columns:minmax(0,1.5fr) auto;gap:var(--s6);align-items:end}
.cta-box::before{content:"";position:absolute;inset:-40%;background:conic-gradient(from 0deg,#00c2fe,#0abc95,#febc10,#ed2ea5,#864afb,#1676fd,#00c2fe);opacity:.14;filter:blur(80px);animation:spin 24s linear infinite;pointer-events:none}
.cta-box > *{position:relative}
.cta-box h2{font-size:clamp(30px,4.4vw,56px)}
.cta-box p{margin-top:var(--s4);color:var(--muted);max-width:48ch;font-size:18px}
.cta-box .row{display:flex;gap:var(--s3);flex-wrap:wrap}
@media (max-width:760px){.cta-box{grid-template-columns:1fr}}

/* reveal on scroll where the browser ties animation to scroll; elsewhere
   everything simply sits in place */
@supports (animation-timeline: view()){
  .reveal{animation:reveal linear both;animation-timeline:view();animation-range:entry 0% entry 55%}
  @keyframes reveal{from{opacity:.15;transform:translateY(28px)}to{opacity:1;transform:none}}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* voice agent: a live call, answered by the agent */
.voice{position:relative;overflow:hidden}
.voice::before{content:"";position:absolute;left:-200px;top:10%;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--green) 40%,transparent),transparent 65%);opacity:.18;pointer-events:none}
.voice-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:var(--s8);align-items:center;position:relative}
@media (max-width:960px){.voice-grid{grid-template-columns:1fr;gap:var(--s7)}}
.voice-copy h2{font-size:clamp(36px,5vw,64px);margin-top:var(--s4)}
.voice-lede{color:var(--muted);font-size:clamp(17px,1.6vw,19px);max-width:50ch;margin-top:var(--s5)}
.voice-points{list-style:none;margin:var(--s7) 0 0;padding:0;display:grid;gap:var(--s5)}
.voice-points li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s4);align-items:start}
.voice-points .icon{width:42px;height:42px}
.voice-points b{display:block;font:600 17px var(--display);letter-spacing:-.015em}
.voice-points small{display:block;color:var(--muted);font-size:15px;margin-top:2px}
.phone-wrap{display:flex;flex-direction:column;align-items:center}
.phone{width:min(100%,380px);border-radius:40px;padding:var(--s6) var(--s5) var(--s4);background:var(--panel);border:1px solid var(--line2);box-shadow:var(--shadow),inset 0 0 0 6px var(--bg2);display:flex;flex-direction:column;gap:var(--s4);min-height:600px;position:relative;overflow:hidden}
.phone::before{content:"";position:absolute;top:12px;left:50%;width:90px;height:6px;border-radius:6px;background:var(--line2);transform:translateX(-50%)}
.ph-top{display:flex;flex-direction:column;align-items:center;gap:var(--s1);padding-top:var(--s4);text-align:center}
.ph-avatar{position:relative;width:88px;height:88px;display:grid;place-items:center;margin-bottom:var(--s3)}
.ph-face{width:88px;height:88px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--green) 18%,var(--elev));color:var(--green);position:relative;z-index:1;transition:background .4s,color .4s}
.ph-face svg{width:34px;height:34px}
.ph-ring{position:absolute;inset:0;border-radius:50%;border:2px solid var(--green);opacity:0}
.phone[data-state="ringing"] .ph-ring{animation:phring 1.6s ease-out infinite}
.phone[data-state="ringing"] .ph-ring.r2{animation-delay:.8s}
.phone[data-state="ringing"] .ph-face{animation:shake 1.6s ease-in-out infinite}
@keyframes phring{from{transform:scale(1);opacity:.7}to{transform:scale(1.7);opacity:0}}
@keyframes shake{0%,40%,100%{transform:none}5%,15%,25%{transform:rotate(-9deg)}10%,20%,30%{transform:rotate(9deg)}}
.phone[data-state="live"] .ph-face{background:color-mix(in srgb,var(--cyan) 18%,var(--elev));color:var(--cyan)}
.phone[data-state="ended"] .ph-face{background:var(--elev);color:var(--muted)}
.ph-name{font:600 20px var(--display);letter-spacing:-.02em}
.ph-status{font-size:14px;color:var(--green-t);font-weight:600}
.phone[data-state="live"] .ph-status{color:var(--cyan-t)}
.phone[data-state="ended"] .ph-status{color:var(--muted)}
.ph-timer{font:500 13px var(--mono);color:var(--muted);font-variant-numeric:tabular-nums}
.ph-wave{display:flex;align-items:center;justify-content:center;gap:3px;height:44px}
.ph-wave i{width:4px;height:6px;border-radius:4px;background:var(--line2);transition:background .3s}
.phone[data-speaker="agent"] .ph-wave i{background:var(--cyan);animation:wave .9s ease-in-out infinite;animation-delay:calc(var(--i)*-53ms)}
.phone[data-speaker="caller"] .ph-wave i{background:var(--green);animation:wave 1.1s ease-in-out infinite;animation-delay:calc(var(--i)*-71ms)}
@keyframes wave{0%,100%{height:6px}30%{height:34px}60%{height:14px}}
.ph-wave i:nth-child(3n){animation-duration:1.3s!important}
.ph-wave i:nth-child(4n+1){animation-duration:.75s!important}
.ph-script{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:var(--s2);min-height:220px;overflow:hidden}
.ph-line{font-size:14px;line-height:1.5;padding:var(--s2) var(--s3);border-radius:14px;max-width:92%;animation:msgin .35s cubic-bezier(.2,1,.3,1) both}
.ph-line small{display:block;font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;margin-bottom:2px}
.ph-line.caller{align-self:flex-start;background:var(--elev)}
.ph-line.caller small{color:var(--green-t)}
.ph-line.agent{align-self:flex-end;background:color-mix(in srgb,var(--cyan) 14%,var(--panel));border:1px solid color-mix(in srgb,var(--cyan) 30%,transparent)}
.ph-line.agent small{color:var(--cyan-t)}
.ph-tool{align-self:center;font-size:12.5px;color:var(--purple-t);background:color-mix(in srgb,var(--purple) 12%,transparent);border-radius:999px;padding:5px 12px;display:inline-flex;align-items:center;gap:6px;animation:pop .4s cubic-bezier(.2,1.4,.4,1) both}
.ph-tool::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--purple)}
.ph-sum{align-self:stretch;border:1px solid var(--line2);background:var(--elev);border-radius:14px;padding:var(--s3) var(--s4);font-size:13.5px;animation:pop .45s cubic-bezier(.2,1.2,.4,1) both}
.ph-sum b{display:block;font-size:14px;margin-bottom:2px;color:var(--green-t)}
.ph-foot{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);padding-top:var(--s3);border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
.ph-agent{display:inline-flex;align-items:center;gap:var(--s2);font-weight:600;color:var(--ink)}

/* ---------- techy background: grid + live network canvas ---------- */
.bg-tech{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.bg-tech::before{content:"";position:absolute;inset:-2px;background-image:linear-gradient(var(--gridline) 1px,transparent 1px),linear-gradient(90deg,var(--gridline) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(ellipse 85% 70% at 50% 30%,#000 30%,transparent 80%);-webkit-mask-image:radial-gradient(ellipse 85% 70% at 50% 30%,#000 30%,transparent 80%);animation:gridpan 30s linear infinite}
@keyframes gridpan{to{background-position:56px 56px,56px 56px}}
.bg-tech canvas{position:absolute;inset:0;width:100%;height:100%;opacity:var(--net-opacity)}
:root{--gridline:rgba(255,255,255,.035);--net-opacity:.55}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]){--gridline:rgba(20,30,70,.05);--net-opacity:.45}}
:root[data-theme="light"]{--gridline:rgba(20,30,70,.05);--net-opacity:.45}
.section + .section{border-top-color:color-mix(in srgb,var(--line) 70%,transparent)}
.marquee{background:color-mix(in srgb,var(--bg2) 80%,transparent)}

/* placeholders the business must fill in */
.ph{background:color-mix(in srgb,var(--yellow) 16%,transparent);color:var(--yellow-t);border:1px dashed color-mix(in srgb,var(--yellow) 55%,transparent);border-radius:6px;padding:0 6px;font-weight:600;white-space:normal}

/* ---------- footer ---------- */
.site-footer{position:relative;border-top:1px solid var(--line);padding-block:var(--s9) var(--s6);color:var(--muted);font-size:15px;background:color-mix(in srgb,var(--bg2) 92%,transparent);overflow:hidden}
.ft-beam{position:absolute;top:-1px;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,#00c2fe,#0abc95,#febc10,#ed2ea5,#864afb,transparent);background-size:50% 100%;background-repeat:no-repeat;animation:beam 6s linear infinite}
@keyframes beam{from{background-position:-50% 0}to{background-position:150% 0}}
.ft-top{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:var(--s7);padding-bottom:var(--s7);border-bottom:1px solid var(--line)}
@media (max-width:860px){.ft-top{grid-template-columns:1fr}}
.ft-intro{display:flex;flex-direction:column;gap:var(--s4)}
.ft-intro .brand{color:var(--ink);margin:0}
.ft-intro p{max-width:40ch;font-size:16px}
.ft-chans{display:flex;flex-wrap:wrap;gap:var(--s2)}
.ft-chans span{display:inline-flex;align-items:center;gap:6px;font:600 12.5px var(--body);padding:6px 11px;border-radius:999px;border:1px solid var(--line2);background:var(--panel);color:var(--ink);transition:transform .2s,border-color .2s}
.ft-chans span::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--c)}
.ft-chans span:hover{transform:translateY(-2px);border-color:var(--c)}
.ft-cta{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s6);display:flex;flex-direction:column;gap:var(--s5);justify-content:center;position:relative;overflow:hidden}
.ft-cta::before{content:"";position:absolute;right:-80px;bottom:-120px;width:280px;height:280px;border-radius:50%;background:var(--grad);filter:blur(70px);opacity:.22}
.ft-cta > *{position:relative}
.ft-cta-title{font:700 clamp(22px,2.4vw,30px)/1.2 var(--display);letter-spacing:-.025em;color:var(--ink)}
.ft-cta .row{display:flex;gap:var(--s3);flex-wrap:wrap}
.ft-cols{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s6);padding-block:var(--s7)}
@media (max-width:860px){.ft-cols{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ft-cols h4{font:600 14px var(--display);color:var(--ink);margin-bottom:var(--s4);letter-spacing:-.01em}
.ft-cols ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--s3)}
.ft-cols a{text-decoration:none;transition:color .15s}.ft-cols a:hover{color:var(--ink)}
.ft-mark{font:800 clamp(80px,19vw,260px)/.82 var(--display);letter-spacing:-.06em;text-align:center;background:linear-gradient(110deg,var(--line) 20%,#05c8fd 35%,#7f2eea 45%,#ff318c 55%,var(--line) 70%);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 9s ease-in-out infinite;user-select:none;margin-top:var(--s4)}
@keyframes shine{0%,100%{background-position:100% 0}50%{background-position:0 0}}
.ft-bottom{display:flex;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;border-top:1px solid var(--line);padding-top:var(--s5);margin-top:var(--s5);font-size:14px}
.ft-live{display:inline-flex;align-items:center;gap:var(--s2)}
.ft-live i{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 color-mix(in srgb,var(--green) 60%,transparent);animation:live 2s ease-out infinite}
@keyframes live{to{box-shadow:0 0 0 10px transparent}}

/* ---------- features: bento highlights ---------- */
.bento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5)}
@media (max-width:960px){.bento{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.bento{grid-template-columns:1fr}}
.tile{position:relative;overflow:hidden;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s6);display:flex;flex-direction:column;gap:var(--s3);min-width:0;transition:transform .25s,border-color .25s,box-shadow .25s}
.tile:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--c) 50%,var(--line));box-shadow:var(--shadow)}
.tile::after{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,var(--c),transparent)}
.tile h3{font-size:22px}
.tile p{color:var(--muted);font-size:15.5px}
.tile .tag{font:600 12.5px var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--ct)}
.t-wide{grid-column:span 2;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s6);align-items:center}
.tile-copy{display:flex;flex-direction:column;gap:var(--s3)}
@media (max-width:960px){.t-wide{grid-column:1/-1}}
@media (max-width:640px){.t-wide{grid-template-columns:1fr}}
.mini{margin-top:auto;border:1px solid var(--line2);background:var(--bg2);border-radius:14px;padding:var(--s4);font-size:13.5px;display:flex;flex-direction:column;gap:var(--s2)}
.mini-cite .mq{align-self:flex-start;background:var(--elev);border-radius:14px 14px 14px 4px;padding:var(--s2) var(--s3)}
.mini-cite .ma{align-self:flex-end;background:var(--cyan);color:var(--on-cyan);border-radius:14px 14px 4px 14px;padding:var(--s2) var(--s3);max-width:90%}
.msrc{align-self:flex-end;font:600 12px var(--body);color:var(--ct);background:color-mix(in srgb,var(--c) 14%,transparent);border-radius:999px;padding:4px 10px;animation:glowc 2.4s ease-in-out infinite}
.msrc.t2{--c:var(--green);--ct:var(--green-t);animation-delay:1.2s}
@keyframes glowc{50%{box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 18%,transparent)}}
.mini-steps{flex-direction:row;flex-wrap:wrap;align-items:center}
.mini-steps span{font-weight:600;font-size:12.5px;padding:5px 10px;border-radius:999px;background:var(--elev);color:var(--muted);animation:stepon 6s infinite}
.mini-steps span:nth-child(2){animation-delay:1.5s}.mini-steps span:nth-child(3){animation-delay:3s}.mini-steps span:nth-child(4){animation-delay:4.5s}
@keyframes stepon{0%,20%{background:color-mix(in srgb,var(--c) 22%,transparent);color:var(--ct)}30%,100%{background:var(--elev);color:var(--muted)}}
.mini-code{font:13px/1.8 var(--mono)}
.mini-code span{color:var(--ct)}
.mini-code b{color:var(--ink);font-weight:500;border-bottom:1px dashed var(--c)}
.mini-checks span{display:flex;align-items:center;gap:var(--s2);font-weight:600}
.mini-checks span::before{content:"✓";display:grid;place-items:center;width:20px;height:20px;border-radius:6px;background:color-mix(in srgb,var(--green) 18%,transparent);color:var(--green-t);font-size:12px;animation:tick 3s infinite}
.mini-checks span:nth-child(2)::before{animation-delay:.4s}.mini-checks span:nth-child(3)::before{animation-delay:.8s}
@keyframes tick{0%,10%{transform:scale(.6);opacity:.3}20%,100%{transform:none;opacity:1}}
.mini-csat b{font:600 13px var(--body)}
.mini-csat .bar{height:8px;border-radius:8px;background:var(--elev);overflow:hidden}
.mini-csat .bar i{display:block;height:100%;width:78%;background:linear-gradient(90deg,var(--pink),var(--purple));animation:barfill 3.5s ease-in-out infinite alternate}
@keyframes barfill{from{width:30%}to{width:82%}}
.mini-csat small{color:var(--muted)}
.mini-lock{flex-direction:row;align-items:center;justify-content:space-between}
.mini-lock .dots{font:15px var(--mono);letter-spacing:2px;color:var(--muted);overflow:hidden;white-space:nowrap;animation:scramble 2s steps(4) infinite}
@keyframes scramble{50%{letter-spacing:4px;opacity:.6}}
.mini-lock .lk{font:600 12px var(--body);color:var(--ct);background:color-mix(in srgb,var(--c) 14%,transparent);border-radius:999px;padding:4px 10px}

/* ---------- features: social ---------- */
.social{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s5)}
@media (max-width:960px){.social{grid-template-columns:1fr}}
.soc-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s6);display:flex;flex-direction:column;gap:var(--s4);min-width:0}
.soc-kicker{font:600 12.5px var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--cyan-t)}
.soc-card h3{font-size:26px}
.conv{list-style:none;margin:var(--s2) 0 0;padding:0;display:grid;gap:var(--s2)}
.conv li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s3);padding:var(--s3);border-radius:14px;transition:background .2s}
.conv li:hover{background:var(--elev)}
.conv .sd{width:12px;height:12px;border-radius:50%;background:var(--c);margin-top:6px;box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 18%,transparent)}
.conv b{display:block;font:600 16px var(--display);letter-spacing:-.01em}
.conv small{display:block;color:var(--muted);font-size:14.5px;margin-top:2px}
.composer{border:1px solid var(--line2);background:var(--bg2);border-radius:16px;padding:var(--s4);display:grid;gap:var(--s3)}
.composer > *{min-width:0}
.cmp-in{display:flex;flex-direction:column;gap:2px}
.cmp-label{font:600 11.5px var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.cmp-text{font:600 16px var(--display);overflow:hidden;white-space:nowrap;border-right:2px solid var(--cyan);width:0;animation:typew 6s steps(31) infinite;max-width:100%}
@keyframes typew{0%{width:0}35%,100%{width:31ch}}
.cmp-out{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2)}
.cmp-out span{font:600 12.5px var(--body);padding:var(--s2) var(--s3);border-radius:10px;background:color-mix(in srgb,var(--c) 14%,transparent);color:var(--ink);border-left:3px solid var(--c);animation:popin 6s infinite}
.cmp-out span:nth-child(2){animation-delay:.2s}.cmp-out span:nth-child(3){animation-delay:.4s}.cmp-out span:nth-child(4){animation-delay:.6s}
@keyframes popin{0%,38%{opacity:.25;transform:translateY(6px)}48%,100%{opacity:1;transform:none}}
.pfs{display:grid;gap:var(--s3)}
.pf-row{display:flex;justify-content:space-between;gap:var(--s3);font-size:14.5px}
.pf-row span{color:var(--muted);font-variant-numeric:tabular-nums}
.pf-bar{display:block;height:6px;border-radius:6px;background:var(--elev);overflow:hidden;margin-top:6px}
.pf-bar i{display:block;height:100%;width:var(--w);background:var(--c);border-radius:6px;transform-origin:left;animation:grow 1.4s cubic-bezier(.2,.8,.2,1) both}
@keyframes grow{from{transform:scaleX(0)}}
.pf small{color:var(--muted);font-size:12.5px}
.soc-note{font-size:14px;color:var(--muted);border-top:1px solid var(--line);padding-top:var(--s4)}

/* ---------- features: benefits ---------- */
.benefits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
@media (max-width:960px){.benefits{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.benefits{grid-template-columns:1fr}}
.benefit{background:var(--panel);padding:var(--s6);display:flex;flex-direction:column;gap:var(--s3);position:relative;transition:background .25s}
.benefit:hover{background:var(--elev)}
.bn-mark{width:40px;height:4px;border-radius:4px;background:var(--c);transition:width .3s}
.benefit:hover .bn-mark{width:72px}
.benefit h3{font-size:22px}
.benefit p{color:var(--muted);font-size:15.5px}

/* ---------- about ---------- */
.about-split{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--s7)}
@media (max-width:860px){.about-split{grid-template-columns:1fr;gap:var(--s4)}}
.about-h{font-size:clamp(30px,3.6vw,44px)}
.about-text{display:grid;gap:var(--s4);font-size:18px;max-width:62ch}
.about-text p{color:var(--muted)}
.about-text a{color:var(--cyan-t)}

/* ---------- contact ---------- */
.contact{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:var(--s6);align-items:start}
@media (max-width:900px){.contact{grid-template-columns:1fr}}
.contact-form{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s6);display:grid;gap:var(--s4);box-shadow:var(--shadow)}
.contact-form .two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4)}
@media (max-width:560px){.contact-form .two{grid-template-columns:1fr}}
.contact-form .btn{justify-self:start}
.field textarea{resize:vertical;min-height:140px}
.contact-side{display:grid;gap:var(--s3)}
.ccard{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:var(--s5);display:grid;gap:var(--s1);position:relative;overflow:hidden}
.ccard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--c)}
.ccard .tag{font:600 12px var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--ct)}
.ccard b{font-size:16px}
.ccard small{color:var(--muted);font-size:14px}
.sent{display:grid;gap:var(--s3);justify-items:start}

/* ---------- legal ---------- */
.legal-hero h1{max-width:20ch}
.legal{display:grid;grid-template-columns:220px minmax(0,1fr);gap:var(--s8);align-items:start}
@media (max-width:860px){.legal{grid-template-columns:1fr;gap:var(--s5)}}
.legal-toc{position:sticky;top:96px;font-size:14px}
@media (max-width:860px){.legal-toc{position:static}}
.legal-toc p{font:600 13px var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:var(--s3)}
.legal-toc ol{margin:0;padding-left:20px;display:grid;gap:var(--s2);color:var(--muted)}
.legal-toc a{text-decoration:none}.legal-toc a:hover{color:var(--ink)}
.legal-body{max-width:72ch;display:grid;gap:var(--s7)}
.legal-body h2{font-size:24px;margin-bottom:var(--s3)}
.legal-body p,.legal-body li{color:var(--muted);font-size:16.5px}
.legal-body p + p{margin-top:var(--s3)}
.legal-body ul{margin:var(--s3) 0 0;padding-left:22px;display:grid;gap:var(--s2)}
.legal-body b{color:var(--ink)}

/* ---------- support ---------- */
.g-chips{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s6)}
.g-chip{display:inline-flex;align-items:center;gap:7px;font:600 13.5px var(--body);padding:8px 14px;border-radius:999px;border:1px solid var(--line2);background:var(--panel);text-decoration:none;transition:border-color .2s,transform .2s}
.g-chip::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c)}
.g-chip:hover{border-color:var(--c);transform:translateY(-2px)}
.help .card a{color:var(--cyan-t)}
.guides{display:grid;gap:var(--s3)}
.guide{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:border-color .25s,box-shadow .25s;scroll-margin-top:96px}
.guide[open]{border-color:color-mix(in srgb,var(--c) 45%,var(--line));box-shadow:var(--shadow)}
.guide summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:var(--s4);align-items:center;padding:var(--s5)}
.guide summary::-webkit-details-marker{display:none}
.guide summary::after{content:"+";font:400 24px/1 var(--body);color:var(--muted);transition:transform .2s}
.guide[open] summary::after{transform:rotate(45deg)}
.g-dot{width:14px;height:14px;border-radius:50%;background:var(--c);box-shadow:0 0 0 5px color-mix(in srgb,var(--c) 18%,transparent)}
.g-title b{display:block;font:600 18px var(--display);letter-spacing:-.015em}
.g-title small{color:var(--muted);font-size:13.5px}
.g-steps{font:600 12.5px var(--body);color:var(--muted);background:var(--elev);border-radius:999px;padding:4px 10px;white-space:nowrap}
@media (max-width:520px){.g-steps{display:none}.guide summary{grid-template-columns:auto minmax(0,1fr) auto}}
.g-body{padding:0 var(--s5) var(--s5);display:grid;gap:var(--s5);border-top:1px solid var(--line);padding-top:var(--s5)}
.g-intro{color:var(--muted);font-size:16px}
.g-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--s6)}
@media (max-width:820px){.g-grid{grid-template-columns:1fr;gap:var(--s5)}}
.g-grid h4{font:600 13px var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:var(--s3)}
.g-need{list-style:none;margin:0;padding:0;display:grid;gap:var(--s2);font-size:15px}
.g-need li{display:grid;grid-template-columns:14px minmax(0,1fr);gap:var(--s2)}
.g-need li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--c);margin-top:9px}
.g-list{margin:0;padding:0;list-style:none;counter-reset:g;display:grid;gap:var(--s3);font-size:15px}
.g-list li{counter-increment:g;display:grid;grid-template-columns:28px minmax(0,1fr);gap:var(--s3)}
.g-list li::before{content:counter(g);display:grid;place-items:center;width:26px;height:26px;border-radius:8px;background:color-mix(in srgb,var(--c) 16%,transparent);color:var(--ink);font:600 13px var(--body)}
.g-body code{word-break:break-all}
.g-warn{font-size:14.5px;padding:var(--s3) var(--s4);border-radius:12px;background:color-mix(in srgb,var(--yellow) 9%,transparent);border:1px dashed color-mix(in srgb,var(--yellow) 45%,transparent)}
.g-warn b{color:var(--yellow-t)}

/* ---------- testimonials ---------- */
.testimonials{overflow:hidden}
.tm-rail{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);padding-block:var(--s3)}
.tm-track{display:flex;gap:var(--s5);width:max-content;animation:marq 60s linear infinite}
.tm-rail:hover .tm-track{animation-play-state:paused}
.tm-dup{display:contents}
.tm{margin:0;width:min(380px,82vw);flex:none;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s6);display:flex;flex-direction:column;gap:var(--s4);position:relative;overflow:hidden;transition:transform .25s,border-color .25s}
.tm:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--c) 50%,var(--line))}
.tm::before{content:"“";position:absolute;right:18px;top:-18px;font:800 120px/1 var(--display);color:var(--c);opacity:.14}
.tm-tag{align-self:flex-start;font:600 12px var(--body);letter-spacing:.06em;text-transform:uppercase;padding:4px 10px;border-radius:999px;background:color-mix(in srgb,var(--c) 15%,transparent);color:var(--ink)}
.tm blockquote{margin:0;font:600 18px/1.45 var(--display);letter-spacing:-.015em}
.tm figcaption{display:flex;align-items:center;gap:var(--s3);margin-top:auto;font-size:14px}
.tm figcaption b{display:block}
.tm figcaption small{color:var(--muted)}
.tm-av{width:40px;height:40px;border-radius:50%;flex:none;background:linear-gradient(135deg,var(--c),color-mix(in srgb,var(--c) 30%,var(--elev)))}

/* ---------- signup ---------- */
.signup-form .su-title{font-size:22px}
.signup-form > .su-title:not(:first-child){margin-top:var(--s4);padding-top:var(--s5);border-top:1px solid var(--line)}
.signup-form .su-summary{padding:var(--s3) var(--s4);border-radius:12px;background:color-mix(in srgb,var(--pink) 10%,transparent);border:1px solid color-mix(in srgb,var(--pink) 35%,transparent)}
.signup-form .su-summary:focus{outline:none}
.signup-form .su-fine{font-size:13px}
.signup-form .field{align-content:start}
.signup-form .su-fine a{color:var(--cyan-t)}
.field .hint{color:var(--muted);font-size:13px;line-height:1.5}
.field .field-err{color:var(--pink-t);font-size:13.5px;font-weight:600;line-height:1.5}
.field [aria-invalid="true"]{border-color:var(--pink)}
.field textarea[name="address"]{min-height:96px}
.signup-form .field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:40px}
.signup-side{position:sticky;top:96px}
/* on a phone the plan sits above the form so the price is never a scroll away;
   the steps repeat the hints under the fields, so they give way */
@media (max-width:900px){.signup-side{position:static;order:-1}.su-steps{display:none}}
.su-plan .su-change{color:var(--cyan-t);font-size:14px;font-weight:600}
.su-plan:hover{transform:none}
.su-steps{list-style:none;margin:0;padding:0;display:grid;gap:var(--s3);counter-reset:su}
.su-steps li{counter-increment:su;display:grid;grid-template-columns:32px minmax(0,1fr);column-gap:var(--s3);padding:var(--s4);border:1px solid var(--line);border-radius:var(--r);background:var(--panel)}
.su-steps li::before{content:counter(su);grid-row:span 2;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font:700 14px var(--body);background:var(--elev);color:var(--cyan-t)}
.su-steps b{font-size:15px}
.su-steps span{color:var(--muted);font-size:14px}
.su-done{padding-block:var(--s5)}
.su-done:focus{outline:none}