/* Chatomatic site — shared styles. Tokens carried over from the original single page. */
:root{
  --bg:#F0F5F2; --surface:#FFFFFF; --ink:#0F1A19; --muted:#506260; --line:#D3DDD8;
  --accent:#2540FF; --on-accent:#FFFFFF; --accent-soft:#E3E8FF;
  --hi:#FFC531; --on-hi:#1B1500; --ok:#13804A; --ok-soft:#DFF4E8; --warn-soft:#FFF1CC;
  --bubble-in:#E4EBE7; --bubble-out:#2540FF; --bubble-out-ink:#FFFFFF;
  --display:'Bricolage Grotesque','Arial Narrow',Arial,sans-serif;
  --body:'Instrument Sans','Noto Sans Devanagari','Noto Sans Tamil',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0B1312; --surface:#121D1B; --ink:#E9F1EE; --muted:#97A8A3; --line:#25332F;
  --accent:#8F9DFF; --on-accent:#0B1030; --accent-soft:#1B2250; --ok:#5FD497; --ok-soft:#14352A; --warn-soft:#3A3010;
  --bubble-in:#1C2A27; --bubble-out:#8F9DFF; --bubble-out-ink:#0B1030; color-scheme:dark}}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.6 var(--body);-webkit-text-size-adjust:100%}
h1,h2,h3,h4{font-family:var(--display);line-height:1.06;letter-spacing:-.02em;text-wrap:balance;margin:0}
p{margin:0}a{color:inherit}img{max-width:100%}
.wrap{max-width:1140px;margin-inline:auto;padding-inline:20px}
section{padding-block:80px}
.sec-tight{padding-block:48px}
.eyebrow{font:500 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:18px;display:flex;gap:10px;align-items:center}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--accent)}
h2{font-size:clamp(30px,4.6vw,52px);font-weight:800;max-width:18ch}
h2.wide{max-width:26ch}
.lead{font-size:18px;color:var(--muted);max-width:58ch;margin-top:16px}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--bg);padding:10px 14px;border-radius:8px;z-index:50}
.skip:focus{left:8px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:600 15px var(--body);background:var(--accent);color:var(--on-accent);text-decoration:none;padding:13px 22px;border-radius:12px;border:2px solid var(--accent);cursor:pointer;transition:transform .15s}
.btn:hover{transform:translateY(-1px)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn.sm{padding:9px 16px;font-size:14px}
.btn.light{background:var(--on-accent);color:var(--accent);border-color:var(--on-accent)}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}

/* nav */
.nav{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.navrow{display:flex;align-items:center;gap:14px;padding-block:11px}
.logo{display:flex;align-items:center;gap:10px;font:800 21px var(--display);text-decoration:none;letter-spacing:-.02em;margin-right:auto}
.mark{width:30px;height:26px;background:var(--accent);border-radius:9px 9px 9px 2px;display:grid;place-items:center}
.mark i{width:6px;height:6px;border-radius:50%;background:var(--on-accent);box-shadow:-9px 0 0 var(--on-accent),9px 0 0 var(--on-accent)}
.menu{display:flex;align-items:center;gap:2px}
.menu>a,.ddb{font:500 15px var(--body);text-decoration:none;padding:9px 14px;border-radius:99px;color:var(--muted);background:none;border:0;cursor:pointer;white-space:nowrap}
.menu>a:hover,.ddb:hover,.dd.open .ddb,.menu>a[aria-current]{background:var(--accent-soft);color:var(--ink)}
.dd{position:relative}
.ddb::after{content:"";display:inline-block;width:6px;height:6px;margin-left:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px)}
.mega{display:none;position:absolute;left:50%;top:calc(100% + 8px);transform:translateX(-30%);width:min(780px,92vw);background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:22px;box-shadow:0 24px 50px -24px color-mix(in srgb,var(--ink) 50%,transparent);grid-template-columns:repeat(3,1fr);gap:22px}
.dd.open .mega{display:grid}
@media(hover:hover) and (min-width:901px){.dd:hover .mega{display:grid}}
.mega h5{font:700 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 10px}
.mega a{display:block;text-decoration:none;padding:7px 10px;margin-inline:-10px;border-radius:9px;font-size:15px;font-weight:500}
.mega a:hover{background:var(--accent-soft)}
.mega a small{display:block;font-weight:400;color:var(--muted);font-size:12.5px;line-height:1.35}
.soon-dot{display:inline-block;font:700 9.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;background:var(--hi);color:var(--on-hi);padding:2px 6px;border-radius:5px;margin-left:6px;vertical-align:middle}
.burger{display:none;font:600 14px var(--body);background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:9px 14px;color:var(--ink);cursor:pointer}
@media(max-width:900px){
  .burger{display:inline-block}
  .menu{display:none;position:absolute;left:0;right:0;top:100%;background:var(--bg);border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;padding:12px 20px 18px;max-height:calc(100vh - 60px);overflow:auto}
  .menu.open{display:flex}
  .menu>a,.ddb{text-align:left;padding:12px 14px;font-size:16px;width:100%;border-radius:12px}
  .mega{position:static;transform:none;width:auto;box-shadow:none;border:0;padding:6px 6px 10px;grid-template-columns:1fr;gap:14px;background:transparent}
  .navrow .btn.sm{display:none}
  .menu .btn.mobile{display:inline-flex}
}
@media(min-width:901px){.menu .mobile{display:none}}

/* hero */
.hero{padding-block:56px 64px;display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.hero>*{min-width:0}
h1{font-size:clamp(38px,6.2vw,80px);font-weight:800}
h1 mark{background:var(--hi);color:var(--on-hi);padding:0 .12em;border-radius:.12em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.hero .lead{font-size:19px}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:30px}
.chip{font:500 12px var(--mono);letter-spacing:.04em;padding:7px 12px;border:1px solid var(--line);border-radius:99px;background:var(--surface);text-decoration:none}
a.chip:hover{border-color:var(--accent)}
@media(max-width:900px){.hero{grid-template-columns:1fr;gap:36px}}
.pagehero h1{font-size:clamp(34px,5.4vw,66px)}
.crumbs{font:500 12px var(--mono);letter-spacing:.06em;color:var(--muted);margin-bottom:22px}
.crumbs a{text-decoration:none}.crumbs a:hover{color:var(--accent)}

/* badges */
.tag2{display:inline-block;font:700 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;background:var(--hi);color:var(--on-hi);padding:4px 9px;border-radius:7px}
.tag-live{display:inline-block;font:700 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;background:var(--ok-soft);color:var(--ok);padding:4px 9px;border-radius:7px}

/* original hero chat card (preserved) */
.thread{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:18px;box-shadow:0 18px 40px -22px color-mix(in srgb,var(--ink) 45%,transparent)}
.thread-head{display:flex;justify-content:space-between;align-items:center;font:500 12px var(--mono);color:var(--muted);padding-bottom:14px;border-bottom:1px dashed var(--line);margin-bottom:16px;gap:8px;flex-wrap:wrap}
.live{display:inline-flex;gap:6px;align-items:center}.live::before{content:"";width:8px;height:8px;border-radius:50%;background:#1FB866}
.msgs{display:flex;flex-direction:column;gap:10px;min-height:236px}
.b{max-width:84%;padding:10px 14px;border-radius:16px;font-size:15px;line-height:1.45}
.b.in{background:var(--bubble-in);border-bottom-left-radius:4px;align-self:flex-start}
.b.out{background:var(--bubble-out);color:var(--bubble-out-ink);border-bottom-right-radius:4px;align-self:flex-end}
.tag{display:block;font:500 10.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;opacity:.7;margin-bottom:3px}
.sys{align-self:center;font:500 11px var(--mono);color:var(--muted);padding:4px 10px;border:1px dashed var(--line);border-radius:99px;text-align:center}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.tabs button{font:500 12px var(--mono);letter-spacing:.04em;background:var(--bg);color:var(--muted);border:1px solid var(--line);border-radius:99px;padding:6px 12px;cursor:pointer}
.tabs button[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.pop{animation:pop .35s ease both}
@keyframes pop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.typing{display:inline-flex;gap:4px;align-items:center;padding:14px 16px}
.typing i{width:7px;height:7px;border-radius:50%;background:var(--bubble-out-ink);opacity:.5;animation:blink 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes blink{0%,100%{opacity:.25}50%{opacity:.9}}

/* ===== phone mockup ===== */
.phonebox{display:flex;flex-direction:column;align-items:center;gap:18px}
.phone{width:288px;height:570px;border-radius:40px;border:9px solid #101615;background:#101615;position:relative;box-shadow:0 30px 60px -28px rgba(0,0,0,.55);flex:none}
.phone::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:84px;height:20px;background:#101615;border-radius:0 0 14px 14px;z-index:5}
.pin{position:absolute;inset:0;border-radius:30px;overflow:hidden;background:#ECE5DD;display:flex;flex-direction:column;color:#16201E;font:400 13px/1.4 var(--body)}
.pin *{box-sizing:border-box}
.hdr{flex:none;padding:30px 14px 10px;background:#0E7A5F;color:#fff;display:flex;gap:10px;align-items:center;min-height:68px}
.hdr.app{background:#2540FF}.hdr.dark{background:#16201E}.hdr.ads{background:#fff;color:#16201E;border-bottom:1px solid #ddd}.hdr.soon{background:#8A6A00}
.hdr .av{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.25);display:grid;place-items:center;font:700 13px var(--display);flex:none}
.hdr b{display:block;font:700 14px/1.15 var(--body)}.hdr small{display:block;font-size:11px;opacity:.8;line-height:1.2}
.screen{flex:1;min-height:0;overflow:hidden;padding:12px 10px;display:flex;flex-direction:column;gap:7px;justify-content:flex-end}
.screen.top{justify-content:flex-start}
.pb{max-width:84%;padding:7px 10px 5px;border-radius:10px;box-shadow:0 1px 1px rgba(0,0,0,.12);animation:pop .3s ease both;font-size:13px}
.pb.in{background:#fff;align-self:flex-start;border-top-left-radius:2px}
.pb.out{background:#D9FDD3;align-self:flex-end;border-top-right-radius:2px}
.pb .who{display:block;font:700 9.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#0E7A5F;margin-bottom:2px}
.pb .who.ai{color:#2540FF}.pb .who.hu{color:#B45309}.pb .who.pl{color:#2540FF}
.pb i.tk{display:block;text-align:right;font:normal 10px var(--mono);color:#6b7a77;margin-top:2px}
.pb i.tk.blue{color:#2B8CF0}
.pb.dots{display:flex;gap:4px;padding:11px 12px}
.pb.dots b{width:6px;height:6px;border-radius:50%;background:#98a5a2;animation:blink 1s infinite}
.pb.dots b:nth-child(2){animation-delay:.15s}.pb.dots b:nth-child(3){animation-delay:.3s}
.psys{align-self:center;background:#FFF3C4;color:#6b5400;font:500 10.5px var(--mono);padding:4px 9px;border-radius:8px;text-align:center;animation:pop .3s ease both;max-width:92%}
.psys.ok{background:#DDF3E5;color:#0E5C3D}.psys.blue{background:#E3E8FF;color:#1E34C8}
.pcard{background:#fff;border-radius:12px;padding:11px 12px;box-shadow:0 1px 2px rgba(0,0,0,.1);animation:pop .3s ease both}
.pcard small{display:block;font:700 9.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#6b7a77;margin-bottom:5px}
.pcard p{font-size:13px;line-height:1.45;min-height:3em}
.pcard.note{background:#FFF8DC;border:1px dashed #D9B84A}
.prow{display:flex;align-items:center;gap:9px;background:#fff;border-radius:11px;padding:8px 10px;box-shadow:0 1px 2px rgba(0,0,0,.08);animation:pop .35s ease both}
.prow.sel{outline:2px solid #2540FF}
.prow .av{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:#fff;font:700 12px var(--display);flex:none}
.prow div{min-width:0;flex:1}.prow b{display:block;font-size:12.5px;line-height:1.2}.prow span{display:block;font-size:11.5px;color:#5c6a67;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prow em{font:700 9px var(--mono);font-style:normal;letter-spacing:.05em;text-transform:uppercase;padding:3px 6px;border-radius:5px;background:#E3E8FF;color:#1E34C8;flex:none}
.prow em.wa{background:#DDF3E5;color:#0E5C3D}.prow em.ig{background:#FCE4F1;color:#A3175F}.prow em.fb{background:#E1ECFF;color:#174EA6}.prow em.web{background:#EEE;color:#444}
.chipx{display:inline-block;font:500 11px var(--mono);background:#fff;border:1px solid #ccd5d2;border-radius:99px;padding:4px 9px;margin:0 4px 4px 0}
.chipx.on{background:#2540FF;color:#fff;border-color:#2540FF}
.pbtn{display:block;text-align:center;background:#2540FF;color:#fff;border-radius:10px;padding:9px;font-weight:600;font-size:13px;transition:transform .15s,background .2s}
.pbtn.wa{background:#0E7A5F}.pbtn.tap{transform:scale(.94);background:#0b5c47}
.pbtn.ghost{background:#fff;color:#2540FF;border:1px solid #2540FF}
.pbar{height:8px;border-radius:9px;background:#dfe6e3;overflow:hidden}
.pbar i{display:block;height:100%;width:0;background:#2540FF;border-radius:9px;transition:width 2s ease}
.pbar.go i{width:100%}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.stats div{background:#fff;border-radius:10px;padding:9px 6px;text-align:center;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.stats b{display:block;font:800 17px var(--display);color:#2540FF}.stats span{font-size:10px;color:#5c6a67}
.sample{align-self:center;font:500 9.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#6b7a77;margin-top:2px}
.homeg{display:grid;grid-template-columns:repeat(4,1fr);gap:14px 8px;padding:6px 4px}
.ico2{text-align:center;font-size:10px;color:#222}.ico2 u{display:block;width:44px;height:44px;margin:0 auto 4px;border-radius:12px;text-decoration:none;display:grid;place-items:center;color:#fff;font:700 15px var(--display)}
.ico2.pulse u{animation:pulse 1.2s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(37,64,255,.5)}50%{box-shadow:0 0 0 9px rgba(37,64,255,0)}}
.notif{background:#fff;border-radius:14px;padding:9px 11px;box-shadow:0 6px 18px rgba(0,0,0,.18);animation:drop .45s ease both;display:flex;gap:9px;align-items:center}
@keyframes drop{from{opacity:0;transform:translateY(-22px)}to{opacity:1;transform:none}}
.ad{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.15);animation:pop .35s ease both}
.ad .img{height:150px;background:linear-gradient(135deg,#FFC531,#FF7A59 60%,#C23B7B);display:grid;place-items:center;color:#fff;font:800 20px/1.1 var(--display);text-align:center;padding:10px}
.ad .t{padding:9px 11px;font-size:12px}.ad .t b{display:block;font-size:13px}
.ad .s{font:500 9.5px var(--mono);color:#6b7a77;padding:8px 11px 0}
.twoapp{display:grid;gap:8px}
.appbox{background:#fff;border-radius:12px;padding:10px 12px;display:flex;gap:10px;align-items:center;box-shadow:0 1px 2px rgba(0,0,0,.1);animation:pop .4s ease both}
.appbox u{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;color:#fff;font:700 13px var(--display);text-decoration:none;flex:none}
.appbox b{display:block;font-size:12.5px}.appbox span{font-size:11px;color:#5c6a67}
.numpill{align-self:center;background:#16201E;color:#fff;font:700 12px var(--mono);padding:6px 12px;border-radius:99px;animation:pop .4s ease both}
.link{align-self:center;width:3px;height:26px;background:repeating-linear-gradient(#2540FF 0 5px,transparent 5px 9px);animation:flow .8s linear infinite}
@keyframes flow{to{background-position:0 9px}}
.flow{display:flex;flex-direction:column;gap:6px}
.node{background:#fff;border:2px solid #dfe6e3;border-radius:10px;padding:7px 10px;font-size:12px;font-weight:600;transition:border-color .3s,background .3s}
.node.on{border-color:#2540FF;background:#E3E8FF}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;background:#fff;border-radius:12px;padding:8px;animation:pop .3s ease both}
.cal span{font-size:10px;text-align:center;padding:5px 0;border-radius:6px;color:#444}
.cal span.h{font:700 9px var(--mono);color:#8a9794}.cal span.hit{background:#2540FF;color:#fff;font-weight:700}
.cal span.dim{color:#bbb}
.check{display:flex;gap:8px;align-items:center;background:#fff;border-radius:10px;padding:8px 10px;font-size:12px;box-shadow:0 1px 2px rgba(0,0,0,.08);animation:pop .3s ease both}
.check::before{content:"✓";width:18px;height:18px;border-radius:50%;background:#DDF3E5;color:#0E5C3D;font-weight:700;font-size:11px;display:grid;place-items:center;flex:none}
.check.todo::before{content:"!";background:#FFF3C4;color:#7a5a00}
.rate-mini{font:800 24px var(--display);color:#2540FF;text-align:center}
.steps-cap{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px;justify-content:center;max-width:340px}
.steps-cap li{font:500 11.5px var(--mono);letter-spacing:.03em;padding:6px 11px;border-radius:99px;border:1px solid var(--line);background:var(--surface);color:var(--muted);transition:all .25s}
.steps-cap li.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.demonote{font:500 11px var(--mono);color:var(--muted);text-align:center;letter-spacing:.04em}
.demotabs{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;max-width:420px}
.demotabs button{font:500 12px var(--mono);background:var(--surface);color:var(--muted);border:1px solid var(--line);border-radius:99px;padding:7px 13px;cursor:pointer}
.demotabs button[aria-pressed="true"]{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.demo{display:grid;grid-template-columns:1fr auto;gap:56px;align-items:center}
.demo>*{min-width:0}
@media(max-width:900px){.demo{grid-template-columns:1fr;gap:32px}.demo .phonebox{order:-1}}
.demo-copy ul{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:10px}
.demo-copy li{display:flex;gap:10px}.demo-copy li::before{content:"";flex:none;width:8px;height:8px;margin-top:9px;border-radius:2px;background:var(--accent)}

/* cards & grids */
.grid{display:grid;gap:16px;margin-top:40px}
.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:980px){.g4{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.g2,.g3,.g4{grid-template-columns:1fr}}
.card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:24px;display:flex;flex-direction:column;gap:10px;min-width:0}
.card h3{font-size:22px;font-weight:700}.card p{color:var(--muted);font-size:15px}
.card .ico{font:700 12px var(--mono);color:var(--accent);letter-spacing:.1em;text-transform:uppercase}
a.card{text-decoration:none;transition:border-color .2s,transform .2s}
a.card:hover{border-color:var(--accent);transform:translateY(-2px)}
.card .more{margin-top:auto;font:600 14px var(--body);color:var(--accent)}
.card.dashed{border:2px dashed var(--line);background:transparent}
.hl{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.hl p{color:color-mix(in srgb,var(--bg) 78%,transparent)}
.hl .ico{color:var(--hi)}
.big{font:800 clamp(40px,6vw,64px)/.95 var(--display);letter-spacing:-.03em}
.big small{font:500 13px var(--mono);letter-spacing:.02em;margin-left:6px;opacity:.75}
.hl .big{color:var(--hi)}
.band{background:var(--surface);border-block:1px solid var(--line)}
.dark-band{background:var(--ink);color:var(--bg)}
.how{counter-reset:h;display:grid;gap:14px;margin:36px 0 0;padding:0;list-style:none}
.how.c3{grid-template-columns:repeat(3,1fr)}.how.c4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.how.c3,.how.c4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.how.c3,.how.c4{grid-template-columns:1fr}}
.how li{counter-increment:h;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:22px}
.how li::before{content:"0" counter(h);display:block;font:700 13px var(--mono);color:var(--accent);margin-bottom:10px}
.how h3{font-size:20px;margin-bottom:6px}.how p{color:var(--muted);font-size:15px}
.uses{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.uses span{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:11px 16px;font-weight:500;font-size:15px}
.callout{margin-top:32px;background:var(--hi);color:var(--on-hi);border-radius:16px;padding:20px 24px}
.callout b.k{font:700 12px var(--mono);letter-spacing:.1em;text-transform:uppercase;display:block;margin-bottom:6px}
.callout .big{font-size:clamp(34px,5vw,54px)}
.callout p{max-width:70ch;margin-top:8px;font-size:15.5px}
.callout.soft{background:var(--accent-soft);color:var(--ink)}
.callout.ok{background:var(--ok-soft);color:var(--ink)}
.callout ul{margin:10px 0 0;padding-left:20px;font-size:15px}
.fine{font-size:13px;color:var(--muted);margin-top:16px;max-width:90ch}

/* rate band + calculator */
.rate{background:var(--ink);color:var(--bg);padding:56px 0}
.rate .wrap{display:grid;grid-template-columns:auto 1fr;gap:40px;align-items:center}
.rate .wrap>*{min-width:0}
.rate .bigr{font:800 clamp(64px,12vw,140px)/.9 var(--display);letter-spacing:-.04em}
.rate .bigr small{font:500 clamp(13px,1.8vw,18px) var(--body);letter-spacing:0;display:block;margin-top:14px;opacity:.8;max-width:30ch;line-height:1.4}
.rate .bigr b{color:var(--hi)}
.calc{background:color-mix(in srgb,var(--bg) 10%,transparent);border:1px solid color-mix(in srgb,var(--bg) 22%,transparent);border-radius:18px;padding:22px}
.calc label{font:500 12px var(--mono);letter-spacing:.1em;text-transform:uppercase;opacity:.8;display:block;margin-bottom:10px}
.calc input[type=range]{width:100%;accent-color:var(--hi)}
.calc .row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:14px;flex-wrap:wrap}
.calc .n{font:700 22px var(--mono)}.calc .cost{font:800 clamp(30px,5vw,46px) var(--display);color:var(--hi)}
.calc p{font-size:13px;opacity:.75;margin-top:12px}
@media(max-width:860px){.rate .wrap{grid-template-columns:1fr}}

/* pricing */
.ptop{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.toggle{display:inline-flex;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:4px}
.toggle button{font:600 14px var(--body);background:none;border:0;color:var(--muted);padding:10px 18px;border-radius:10px;cursor:pointer}
.toggle button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.notice{margin-top:28px;background:var(--hi);color:var(--on-hi);border-radius:14px;padding:16px 20px;font-size:15px;font-weight:500}
.notice b{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;display:block;margin-bottom:4px}
.plans{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:30px}
.plan{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:24px;display:flex;flex-direction:column;gap:16px;position:relative;min-width:0}
.plan.rec{border:2px solid var(--accent)}
.badge{position:absolute;top:-13px;left:20px;background:var(--accent);color:var(--on-accent);font:700 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:5px 10px;border-radius:8px}
.plan h3{font-size:24px;font-weight:700}
.price{font:800 38px/1 var(--display);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.price small{display:block;font:500 12px var(--mono);color:var(--muted);letter-spacing:.04em;margin-top:8px}
.stack{border-top:1px dashed var(--line);padding-top:14px;display:flex;flex-direction:column;gap:9px;font-size:14.5px;list-style:none;margin:0;padding-left:0}
.stack li{display:flex;gap:10px}
.stack li::before{content:"";flex:none;width:8px;height:8px;margin-top:8px;border-radius:2px;background:var(--accent)}
.stack li.off{color:var(--muted)}.stack li.off::before{background:var(--line)}
.plan .btn{margin-top:auto}
@media(max-width:1000px){.plans{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.plans{grid-template-columns:1fr}}
.inc{margin-top:28px;display:grid;grid-template-columns:1.2fr 1fr;gap:16px}
.inc>div{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:24px;min-width:0}
.inc h3{font-size:22px;margin-bottom:14px}
.inc ul{margin:0;padding:0;list-style:none;display:grid;gap:9px;font-size:15px}
.inc li{display:flex;justify-content:space-between;gap:16px;border-bottom:1px dashed var(--line);padding-bottom:9px}
.inc li span:last-child{font:600 13px var(--mono);text-align:right}
.inc .plain li{justify-content:flex-start}
.inc .plain li::before{content:"+";font:700 14px var(--mono);color:var(--accent)}
@media(max-width:700px){.inc{grid-template-columns:1fr}}
.pgroups{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:36px}
@media(max-width:980px){.pgroups{grid-template-columns:1fr}}
.pg{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:24px;min-width:0}
.pg>.lab{display:inline-block;font:700 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:4px 9px;border-radius:7px;margin-bottom:12px}
.pg>.lab.us{background:var(--accent-soft);color:var(--accent)}.pg>.lab.meta{background:var(--warn-soft)}.pg>.lab.free{background:var(--ok-soft);color:var(--ok)}
.pg h3{font-size:22px;margin-bottom:12px}
.pg dl{margin:0;display:grid;gap:14px}
.pg dt{font-weight:700;font-size:15px}
.pg dd{margin:2px 0 0;color:var(--muted);font-size:14.5px}
.pg dt b{font:700 14px var(--mono);color:var(--accent)}

/* faq */
details{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:0;margin-top:10px}
details summary{cursor:pointer;list-style:none;padding:16px 20px;font-weight:600;display:flex;justify-content:space-between;gap:16px}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+";font:700 18px var(--mono);color:var(--accent);flex:none}
details[open] summary::after{content:"–"}
details .ans{padding:0 20px 18px;color:var(--muted);max-width:75ch}
.faqgroup{margin-top:44px}.faqgroup h3{font-size:26px;margin-bottom:6px}

/* coming soon + steps */
.soongrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:36px}
@media(max-width:900px){.soongrid{grid-template-columns:repeat(2,1fr)}}@media(max-width:560px){.soongrid{grid-template-columns:1fr}}
.s{border:2px dashed var(--line);border-radius:18px;padding:22px;display:flex;flex-direction:column;gap:10px;min-width:0;text-decoration:none;transition:border-color .2s}
a.s:hover{border-color:var(--accent)}
.s .tag2{align-self:flex-start}.s h4{font:700 21px/1.15 var(--display);margin:0}.s p{color:var(--muted);font-size:14.5px}
.steps{margin-top:40px;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;list-style:none;padding:0;counter-reset:s}
.step{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:24px;counter-increment:s;min-width:0}
.step::before{content:"Step " counter(s);font:700 12px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:12px}
.step h3{font-size:22px;margin-bottom:8px}.step p{color:var(--muted);font-size:15px}
.step .pay{display:inline-block;margin-top:12px;font:700 13px var(--mono);background:var(--accent-soft);padding:5px 10px;border-radius:8px}
@media(max-width:1000px){.steps{grid-template-columns:repeat(2,1fr)}}@media(max-width:560px){.steps{grid-template-columns:1fr}}
.final{margin-top:56px;background:var(--accent);color:var(--on-accent);border-radius:26px;padding:clamp(28px,5vw,56px);display:flex;justify-content:space-between;gap:28px;align-items:center;flex-wrap:wrap}
.final h2{font-size:clamp(28px,4.2vw,48px);max-width:16ch}
.fin-r{display:flex;flex-direction:column;gap:12px;align-items:flex-start}.mail{font-size:15px}.mail b{font-family:var(--mono);font-weight:700;user-select:all}
.final .btn{background:var(--on-accent);color:var(--accent);border-color:var(--on-accent)}
.wlist{margin-top:40px;display:grid;grid-template-columns:repeat(2,1fr);gap:0 56px}
.w{display:grid;grid-template-columns:auto 1fr;gap:18px;padding:22px 0;border-top:1px solid var(--line);min-width:0}
.w .k{font:700 13px var(--mono);color:var(--accent);padding-top:5px;white-space:nowrap;min-width:38px}
.w h3{font-size:21px;margin-bottom:6px}.w p{color:var(--muted);font-size:15px}
@media(max-width:760px){.wlist{grid-template-columns:1fr}}

/* offers */
.offer{display:flex;flex-direction:column;gap:12px}
.chain{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font:600 12.5px var(--mono);margin-top:6px}
.chain span{background:var(--accent-soft);padding:6px 10px;border-radius:8px}
.chain i{font-style:normal;color:var(--muted)}

/* compare */
.cmphint{display:flex;gap:10px;align-items:center;font:500 12px var(--mono);color:var(--muted);margin-top:30px}
.cmpwrap{margin-top:10px;overflow:auto;max-height:78vh;border:1px solid var(--line);border-radius:18px;background:var(--surface);cursor:grab;position:relative}
.cmpwrap.drag{cursor:grabbing;user-select:none}
.cmp{border-collapse:separate;border-spacing:0;font-size:14px;min-width:980px;width:100%}
.cmp th,.cmp td{padding:14px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line);line-height:1.45;background:var(--surface);min-width:210px}
.cmp thead th{position:sticky;top:0;z-index:3;font:800 19px var(--display);letter-spacing:-.01em;padding-block:16px}
.cmp th:first-child{position:sticky;left:0;z-index:4;min-width:150px;max-width:150px;border-right:1px solid var(--line)}
.cmp thead th:first-child{z-index:5}
.cmp tbody th{font:600 11.5px var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.cmp .us{background:var(--accent-soft)}
.cmp thead .us{background:var(--accent);color:var(--on-accent)}
.cmp tr:last-child td,.cmp tr:last-child th{border-bottom:0}
.st{display:inline-block;font:700 10px var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:3px 7px;border-radius:6px;margin-bottom:6px}
.st.yes{background:var(--ok-soft);color:var(--ok)}.st.no{background:#F6DCDC;color:#9B1C1C}.st.soon{background:var(--hi);color:var(--on-hi)}.st.unk{background:var(--bg);color:var(--muted);border:1px solid var(--line)}
@media(prefers-color-scheme:dark){.st.no{background:#3E1B1B;color:#F2A3A3}}
.cmp td span.d{display:block;color:var(--muted);font-size:13.5px}.cmp .us span.d{color:var(--ink)}
.cmp td .v{font-weight:600}
.cmpnote{font-size:13px;color:var(--muted);margin-top:14px;max-width:90ch}
.legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:16px;font-size:13px;color:var(--muted);align-items:center}

/* footer */
footer{border-top:1px solid var(--line);background:var(--surface);padding:48px 0 28px;color:var(--muted);font-size:14.5px}
.fcols{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:28px}
@media(max-width:800px){.fcols{grid-template-columns:repeat(2,1fr)}}
footer h5{font:700 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink);margin:0 0 12px}
footer a{display:block;text-decoration:none;padding:4px 0}footer a:hover{color:var(--accent)}
.fbase{margin-top:34px;padding-top:20px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:13px}
.fbase a{display:inline}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn:hover,a.card:hover{transform:none}.pop,.pb,.psys,.pcard,.prow,.typing i,.pb.dots b,.link,.ico2.pulse u,.notif,.ad,.cal,.check,.appbox,.numpill{animation:none!important}.pbar i{transition:none}}