:root{
  --background:#F8FAFC;--surface:#FFF;--surface-subtle:#F1F5F9;--surface-hover:#E2E8F0;
  --primary:#4F46E5;--primary-hover:#4338CA;--primary-light:#EEF2FF;--on-primary:#FFF;
  --title:#0F172A;--body:#475569;--muted:#64748B;
  --border-clean:#E2E8F0;--border-darker:#CBD5E1;
  --success:#10B981;--success-light:#ECFDF5;--emerald-700:#047857;
  --error:#EF4444;--error-light:#FEF2F2;
  --shadow-sm:0 1px 2px rgba(15,23,42,.06);
  --shadow-md:0 4px 12px -2px rgba(15,23,42,.08);
  --shadow-lg:0 12px 32px -8px rgba(15,23,42,.12),0 2px 6px rgba(15,23,42,.04);
  --shadow-xl:0 24px 56px -16px rgba(15,23,42,.18),0 2px 6px rgba(15,23,42,.04);
  --r-sm:6px;--r:8px;--r-lg:12px;--r-xl:16px;--r-full:9999px;
  --sans:"Geist",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --display:"Plus Jakarta Sans",var(--sans);
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,"Roboto Mono",monospace;
  --ease:cubic-bezier(.16,1,.3,1);
}
*{margin:0;padding:0;box-sizing:border-box}
::selection{background:var(--primary-light);color:var(--primary)}
html{scroll-behavior:smooth}
body{background:var(--background);color:var(--body);font-family:var(--sans);font-size:16px;font-weight:400;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{color:inherit;text-decoration:none}
code,pre,.mono{font-family:var(--mono)}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:var(--r-sm)}
.container{max-width:1280px;margin:0 auto;padding:0 24px}
.container-narrow{max-width:896px;margin:0 auto;padding:0 24px}
.material-symbols-outlined{font-family:"Material Symbols Outlined";font-weight:400;font-style:normal;font-size:20px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:"liga";-webkit-font-smoothing:antialiased}
.i14{font-size:14px}.i15{font-size:15px}.i16{font-size:16px}.i18{font-size:18px}.i20{font-size:20px}.i22{font-size:22px}.i13{font-size:13px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent;border-radius:var(--r);font-family:inherit;font-size:14px;font-weight:600;line-height:1;white-space:nowrap;cursor:pointer;transition:background .15s var(--ease),transform .15s var(--ease),box-shadow .15s var(--ease)}
.btn-primary{background:var(--primary);color:var(--on-primary);padding:8px 16px;box-shadow:0 1px 2px rgba(79,70,229,.25)}
.btn-primary:hover{background:var(--primary-hover);transform:scale(1.02)}
.btn-dark{background:var(--title);color:#fff;padding:12px 24px;box-shadow:0 4px 12px -2px rgba(15,23,42,.28)}
.btn-dark:hover{background:#1E293B;transform:scale(1.02)}
.btn-ghost{background:var(--surface);color:var(--title);border-color:var(--border-clean);padding:12px 20px;box-shadow:var(--shadow-sm)}
.btn-ghost:hover{background:var(--surface-subtle)}

/* ---------- header ---------- */
header{position:fixed;top:0;left:0;right:0;z-index:50;background:rgba(255,255,255,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--border-clean)}
.nav{max-width:1280px;margin:0 auto;padding:0 24px;height:64px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:700;font-size:18px;letter-spacing:-.02em;color:var(--title)}
.brand svg{display:block;border-radius:var(--r)}
.nav-links{display:flex;align-items:center;gap:32px;font-size:14px;font-weight:500;color:var(--muted)}
.nav-links a:hover{color:var(--title);transition:color .15s}
.nav-actions{display:flex;align-items:center;gap:16px}
.nav-actions .signin{font-size:14px;font-weight:500;color:var(--muted);transition:color .15s}
.nav-actions .signin:hover{color:var(--title)}

/* ---------- hero ---------- */
main{padding-top:64px}
.hero{position:relative;overflow:hidden;padding:80px 24px;text-align:center}
.hero::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:850px;max-width:100%;height:340px;background:linear-gradient(to bottom,rgba(79,70,229,.1),rgba(79,70,229,.05),transparent);filter:blur(64px);pointer-events:none}
.hero>.container{position:relative}
.pill{display:inline-flex;align-items:center;gap:8px;padding:4px 12px;border-radius:var(--r-full);background:var(--surface);border:1px solid var(--border-clean);box-shadow:var(--shadow-sm);margin-bottom:24px}
.pill .material-symbols-outlined{color:var(--primary)}
.pill span:last-child{font-size:12px;font-weight:500;color:var(--title)}
.hero h1{max-width:768px;margin:0 auto 20px;font-family:var(--display);font-weight:800;font-size:60px;letter-spacing:-.03em;line-height:1.15;color:var(--title)}
.hero h1 .grad{background:linear-gradient(90deg,var(--primary),#6366F1);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .sub{max-width:672px;margin:0 auto 32px;font-size:20px;line-height:1.625;color:var(--muted)}
.hero-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px;margin-bottom:40px}
.trust{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 24px;font-family:var(--mono);font-size:12px;color:var(--muted);margin-bottom:48px}
.trust span{display:inline-flex;align-items:center;gap:6px}
.trust .dot{color:var(--border-darker)}
.trust .ok{color:var(--success)}

/* ---------- product mock ---------- */
.mock{max-width:896px;margin:0 auto;background:var(--surface);border:1px solid var(--border-clean);border-radius:var(--r-xl);box-shadow:var(--shadow-xl);padding:28px;text-align:left}
.mock-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding-bottom:16px;margin-bottom:24px;border-bottom:1px solid var(--border-clean)}
.mock-head .left{display:flex;align-items:center;flex-wrap:wrap;gap:12px}
.mock-dots{display:flex;align-items:center;gap:6px}
.mock-dots i{width:12px;height:12px;border-radius:50%;background:var(--surface-hover)}
.mock-app{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding-left:8px}
.mock-app b{font-family:var(--display);font-weight:600;font-size:14px;color:var(--title)}
.mock-slug{padding:2px 8px;border-radius:4px;background:var(--surface-subtle);border:1px solid var(--border-clean);font-family:var(--mono);font-size:12px;font-weight:500;color:var(--primary);overflow-wrap:anywhere}
.badge-live{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:var(--r-full);background:var(--success-light);color:var(--success);font-size:12px;font-weight:500}
.badge-live i{width:6px;height:6px;border-radius:50%;background:var(--success)}
.mock-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:20px}
.mock-col{grid-column:span 7;display:flex;flex-direction:column;gap:16px}
.mock-col.side{grid-column:span 5}
.panel{background:var(--surface-subtle);border:1px solid var(--border-clean);border-radius:var(--r-lg);padding:16px}
.build{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.build .info{display:flex;align-items:center;gap:12px}
.build .icon{width:40px;height:40px;border-radius:var(--r);background:var(--primary-light);color:var(--primary);display:flex;align-items:center;justify-content:center}
.build .ver{display:flex;align-items:center;gap:8px}
.build .ver b{font-size:14px;color:var(--title)}
.build .ver .num{font-family:var(--mono);font-size:12px;color:var(--muted)}
.tag-active{padding:2px 6px;border-radius:4px;background:#D1FAE5;color:var(--emerald-700);font-size:10px;font-weight:700}
.build .meta{margin-top:2px;font-size:12px;color:var(--muted)}
.build .actions{display:flex;gap:8px}
.mini{padding:6px 10px;border-radius:var(--r-sm);font-size:12px;font-weight:500;cursor:default}
.mini.ghost{background:var(--surface);border:1px solid var(--border-clean);color:var(--title)}
.mini.solid{background:var(--primary);color:#fff}
.drop{border:1px dashed rgba(79,70,229,.4);background:rgba(238,242,255,.3);border-radius:var(--r-lg);padding:16px;display:flex;flex-direction:column;gap:12px}
.drop .row{display:flex;align-items:center;flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:12px;font-weight:500}
.drop .row .file{display:flex;align-items:center;gap:6px;color:var(--title)}
.drop .row .file .material-symbols-outlined{color:var(--primary)}
.drop .row .ok{font-family:var(--mono);font-weight:600;color:var(--primary)}
.bar{height:6px;border-radius:var(--r-full);background:var(--surface);border:1px solid var(--border-clean);overflow:hidden}
.bar i{display:block;height:100%;width:100%;background:var(--primary);border-radius:var(--r-full)}
.drop .foot{display:flex;align-items:center;flex-wrap:wrap;justify-content:space-between;gap:12px;font-family:var(--mono);font-size:11px;color:var(--muted)}
.drop .foot .scan{display:flex;align-items:center;gap:4px;color:var(--success);font-weight:600}
.stat{background:var(--surface-subtle);border:1px solid var(--border-clean);border-radius:var(--r-lg);padding:16px;display:flex;flex-direction:column;justify-content:space-between}
.stat .label{font-size:12px;font-weight:500;color:var(--muted)}
.stat .value{display:flex;align-items:baseline;gap:8px;margin-top:4px}
.stat .value b{font-family:var(--display);font-weight:800;font-size:24px;color:var(--title)}
.stat .value .up{display:flex;align-items:center;font-size:12px;font-weight:600;color:var(--success)}
.stat .foot{margin-top:8px;font-family:var(--mono);font-size:11px;color:var(--muted)}
.hook{border-radius:var(--r-lg);padding:14px;display:flex;flex-direction:column;gap:8px}
.hook .row{display:flex;align-items:center;flex-wrap:wrap;justify-content:space-between;gap:8px}
.hook .row code{font-size:11px;font-weight:500;color:var(--title)}
.hook .row .ok{font-family:var(--mono);font-size:11px;font-weight:600;color:var(--success)}
.hook p{font-size:11px;line-height:1.4;color:var(--muted)}

/* ---------- generic sections ---------- */
.section{padding:64px 24px}
.section.surface{background:var(--surface);border-top:1px solid var(--border-clean);border-bottom:1px solid var(--border-clean)}
.section-head{text-align:center;max-width:576px;margin:0 auto 48px}
.kicker{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--primary);text-transform:uppercase;letter-spacing:.08em}
.section-head h2{margin:4px 0 8px;font-family:var(--display);font-size:30px;font-weight:700;letter-spacing:-.02em;color:var(--title)}
.section-head p{font-size:14px;color:var(--muted)}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;max-width:1152px;margin:0 auto}
.step{display:flex;flex-direction:column;justify-content:space-between;padding:24px;border-radius:var(--r-lg);background:var(--surface-subtle);border:1px solid var(--border-clean);transition:border-color .2s var(--ease)}
.step:hover{border-color:var(--border-darker)}
.step .num{width:40px;height:40px;border-radius:var(--r);background:var(--surface);border:1px solid var(--border-clean);display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:700;font-size:16px;color:var(--primary);box-shadow:var(--shadow-sm);margin-bottom:16px}
.step h3{font-family:var(--display);font-size:16px;font-weight:700;color:var(--title);margin-bottom:6px}
.step p{font-size:14px;line-height:1.625;color:var(--muted)}
.step p code{font-size:12px;font-weight:500;color:var(--primary)}
.step .foot{margin-top:24px;padding-top:16px;border-top:1px solid var(--border-clean);font-family:var(--mono);font-size:12px;color:var(--muted)}

/* contrast */
.contrast{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;max-width:1024px;margin:0 auto}
.contrast .card{display:flex;flex-direction:column;justify-content:space-between;padding:28px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--border-clean)}
.contrast .card.now{border:2px solid rgba(79,70,229,.2);box-shadow:0 4px 16px -2px rgba(79,70,229,.08)}
.contrast .card .head{display:flex;align-items:center;gap:8px;margin-bottom:16px}
.contrast .card .head .mark{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.contrast .card.old .head .mark{background:var(--error-light);color:var(--error)}
.contrast .card.now .head .mark{background:var(--success-light);color:var(--success)}
.contrast .card h3{font-family:var(--display);font-size:16px;font-weight:700;color:var(--title)}
.contrast ul{list-style:none;display:flex;flex-direction:column;gap:12px}
.contrast li{display:flex;align-items:flex-start;gap:8px;font-size:14px}
.contrast .card.old li{color:var(--muted)}
.contrast .card.now li{color:var(--title);font-weight:500}
.contrast li .material-symbols-outlined{flex-shrink:0;margin-top:2px}
.contrast .card.old li .material-symbols-outlined{color:var(--error)}
.contrast .card.now li .material-symbols-outlined{color:var(--success)}
.contrast .foot{margin-top:24px;padding-top:16px;border-top:1px solid var(--border-clean);font-size:12px;font-weight:500}
.contrast .card.old .foot{color:var(--error)}
.contrast .card.now .foot{font-family:var(--mono);color:var(--primary)}

/* features */
.features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;max-width:1152px;margin:0 auto}
.feature{padding:20px;border-radius:var(--r-lg);background:var(--surface-subtle);border:1px solid var(--border-clean);transition:border-color .2s var(--ease)}
.feature:hover{border-color:var(--border-darker)}
.feature .icon{width:36px;height:36px;border-radius:var(--r);background:var(--surface);border:1px solid var(--border-clean);color:var(--primary);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm);margin-bottom:12px}
.feature h3{font-family:var(--display);font-size:14px;font-weight:700;color:var(--title);margin-bottom:4px}
.feature p{font-size:12px;line-height:1.625;color:var(--muted)}
.feature p code{font-weight:500;color:var(--primary)}

/* sdk */
.sdk{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:32px;align-items:center;max-width:1024px;margin:0 auto}
.sdk-copy{grid-column:span 5}
.sdk-copy h2{margin:4px 0 12px;font-family:var(--display);font-size:30px;font-weight:700;letter-spacing:-.02em;color:var(--title)}
.sdk-copy>p{font-size:14px;line-height:1.625;color:var(--muted);margin-bottom:24px}
.sdk-copy ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.sdk-copy li{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--title)}
.sdk-copy li .material-symbols-outlined{color:var(--success)}
.sdk-code{grid-column:span 7;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--border-clean);box-shadow:var(--shadow-sm);padding:20px}
.sdk-code .head{display:flex;align-items:center;flex-wrap:wrap;justify-content:space-between;gap:8px;padding-bottom:12px;margin-bottom:12px;border-bottom:1px solid var(--border-clean);font-family:var(--mono)}
.sdk-code .head b{font-size:11px;font-weight:600;color:var(--title)}
.sdk-code .head .ok{padding:2px 8px;border-radius:4px;background:#ECFDF5;color:var(--emerald-700);font-size:10px;font-weight:700}
.sdk-code pre{background:var(--surface-subtle);border:1px solid var(--border-clean);border-radius:var(--r);padding:14px;overflow-x:auto;font-size:11px;line-height:1.7;color:var(--body)}
.sdk-code .k{color:var(--primary)}
.sdk-code .s{color:var(--title)}
.sdk-code .v{color:#059669}
.sdk-code .u{color:#4F46E5}

/* pricing */
.pricing{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:stretch;max-width:896px;margin:0 auto}
.plan{position:relative;display:flex;flex-direction:column;justify-content:space-between;padding:28px;border-radius:var(--r-lg);background:var(--surface-subtle);border:1px solid var(--border-clean)}
.plan.pro{background:var(--surface);border:2px solid var(--primary);box-shadow:0 12px 32px -12px rgba(79,70,229,.28)}
.plan .top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.plan h3{font-family:var(--display);font-size:18px;font-weight:700;color:var(--title)}
.plan .tag{padding:2px 8px;border-radius:4px;background:var(--surface);border:1px solid var(--border-clean);font-family:var(--mono);font-size:12px;color:var(--muted)}
.plan.pro .tag{background:transparent;border:0;color:var(--primary);font-weight:600}
.plan .desc{font-size:12px;color:var(--muted);margin-bottom:20px}
.plan .price{display:flex;align-items:baseline;gap:4px;margin-bottom:24px}
.plan .price b{font-family:var(--display);font-size:36px;font-weight:800;letter-spacing:-.02em;color:var(--title)}
.plan .price span{font-size:12px;font-weight:500;color:var(--muted)}
.plan ul{list-style:none;display:flex;flex-direction:column;gap:10px;margin-bottom:32px;font-size:12px;color:var(--title)}
.plan li{display:flex;align-items:center;gap:8px}
.plan li code{font-weight:500;color:var(--primary)}
.plan li .material-symbols-outlined{color:var(--primary)}
.plan.pro li{font-weight:500}
.plan.pro li .material-symbols-outlined{color:var(--success)}
.plan .cta{display:block;width:100%;padding:10px;border-radius:var(--r);background:var(--surface);border:1px solid var(--border-clean);color:var(--title);font-size:12px;font-weight:600;text-align:center;box-shadow:var(--shadow-sm);transition:background .15s var(--ease)}
.plan .cta:hover{background:var(--surface-hover)}
.plan.pro .cta{background:var(--primary);border-color:var(--primary);color:#fff;box-shadow:0 4px 12px -2px rgba(79,70,229,.3)}
.plan.pro .cta:hover{background:var(--primary-hover);transform:scale(1.01)}
.plan .popular{position:absolute;top:-12px;right:24px;padding:2px 10px;border-radius:var(--r-full);background:var(--primary);color:#fff;font-size:11px;font-weight:600;letter-spacing:.02em;box-shadow:var(--shadow-sm)}

/* faq */
.faq{max-width:768px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.faq .item{padding:16px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--border-clean)}
.faq h3{font-family:var(--display);font-size:14px;font-weight:600;color:var(--title);margin-bottom:4px}
.faq p{font-size:12px;line-height:1.625;color:var(--muted)}
.faq p code{font-weight:500;color:var(--primary)}
.faq p a{color:var(--primary);font-weight:500}
.faq p a:hover{text-decoration:underline}

/* bottom cta */
.cta-wrap{padding:64px 24px;background:var(--surface);border-top:1px solid var(--border-clean)}
.cta{max-width:896px;margin:0 auto;padding:48px;border-radius:var(--r-xl);background:linear-gradient(90deg,#0F172A,#1E293B);color:#fff;text-align:center;box-shadow:var(--shadow-lg)}
.cta h2{font-family:var(--display);font-size:30px;font-weight:700;letter-spacing:-.02em;margin-bottom:8px}
.cta p{font-size:14px;color:#CBD5E1;margin-bottom:24px}
.cta .note{display:block;margin-top:12px;font-family:var(--mono);font-size:11px;color:#94A3B8}

/* footer */
footer{background:var(--surface);border-top:1px solid var(--border-clean);padding:32px 24px;font-size:12px;color:var(--muted)}
.foot{max-width:1280px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px}
.foot .left{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.foot .left b{font-family:var(--display);font-size:14px;color:var(--title)}
.foot .left .sep{color:var(--border-darker)}
.foot nav{display:flex;align-items:center;gap:24px;font-weight:500}
.foot nav a:hover{color:var(--title)}

/* ---------- docs & legal ---------- */
.doc{max-width:896px;margin:0 auto;padding:48px 24px 72px}
.doc h1{font-family:var(--display);font-size:36px;font-weight:800;letter-spacing:-.02em;line-height:1.2;color:var(--title);margin-bottom:10px}
.doc .lede{font-size:16px;line-height:1.7;color:var(--muted);margin-bottom:8px}
.doc .updated{font-family:var(--mono);font-size:12px;color:var(--muted);margin-bottom:32px}
.doc h2{font-family:var(--display);font-size:22px;font-weight:700;letter-spacing:-.01em;color:var(--title);margin:40px 0 12px;scroll-margin-top:80px}
.doc h3{font-family:var(--display);font-size:15px;font-weight:700;color:var(--title);margin:24px 0 8px}
.doc p{font-size:14px;line-height:1.75;color:var(--body);margin-bottom:12px}
.doc ul,.doc ol{margin:0 0 12px 20px;font-size:14px;line-height:1.75;color:var(--body)}
.doc li{margin-bottom:6px}
.doc a{color:var(--primary);font-weight:500}
.doc a:hover{text-decoration:underline}
.doc code{font-family:var(--mono);font-size:12px;background:var(--surface-subtle);border:1px solid var(--border-clean);border-radius:4px;padding:1px 5px;color:var(--primary);overflow-wrap:anywhere}
.doc pre{background:var(--surface-subtle);border:1px solid var(--border-clean);border-radius:var(--r);padding:16px;overflow-x:auto;font-family:var(--mono);font-size:12px;line-height:1.7;color:var(--body);margin-bottom:16px}
.doc pre code{background:none;border:0;padding:0;color:inherit;font-size:12px}
.doc table{width:100%;border-collapse:collapse;margin-bottom:16px;font-size:13px}
.doc th,.doc td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--border-clean);vertical-align:top}
.doc th{font-family:var(--display);font-size:12px;font-weight:700;color:var(--title);background:var(--surface-subtle)}
.doc .toc{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:32px}
.doc .toc a{padding:4px 10px;border-radius:var(--r-full);background:var(--surface);border:1px solid var(--border-clean);font-size:12px;font-weight:500;color:var(--muted);box-shadow:var(--shadow-sm)}
.doc .toc a:hover{color:var(--primary);border-color:var(--primary);text-decoration:none}
.doc .note{padding:14px 16px;border-radius:var(--r-lg);background:var(--primary-light);border:1px solid rgba(79,70,229,.2);font-size:13px;line-height:1.7;color:var(--title);margin-bottom:16px}
.doc .note code{background:var(--surface)}

@media(max-width:1024px){
  .features{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sdk{grid-template-columns:minmax(0,1fr);gap:32px}
  .sdk-copy,.sdk-code{grid-column:span 1}
}
@media(max-width:768px){
  .nav-links{display:none}
  .hero{padding:64px 24px 56px}
  .hero h1{font-size:36px}
  .hero .sub{font-size:17px}
  .mock{padding:20px}
  .mock-grid{grid-template-columns:minmax(0,1fr)}
  .mock-col,.mock-col.side{grid-column:span 1}
  .steps,.contrast,.pricing,.features{grid-template-columns:minmax(0,1fr)}
  .section{padding:56px 24px}
  .section-head h2,.sdk-copy h2,.cta h2{font-size:24px}
  .cta{padding:32px 24px}
  .foot{flex-direction:column;align-items:flex-start}
  .doc{padding:32px 24px 56px}
  .doc h1{font-size:28px}
  .foot nav{flex-wrap:wrap;gap:12px 20px}
}
@media(max-width:640px){
  .nav-actions .signin{display:none}
}