@charset "UTF-8";
:root { color-scheme:dark; --bg:#101214; --surface:#181b1f; --surface-raised:#1f232a; --text:#f4f5f7; --muted:#a0a6b0; --border:rgba(255,255,255,.09); --accent:#648fff; --purple:#a38aff; --green:#6bd9ab; --shade:rgba(12,14,18,.75); --soft-blue:rgba(100,143,255,.1); --max-width:1160px; font-family:Inter,"SF Pro Display",-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif; font-synthesis:none; }
[data-theme="light"] { color-scheme:light; --bg:#f7f8fb; --surface:#fff; --surface-raised:#f0f3f9; --text:#182135; --muted:#586276; --border:rgba(36,51,85,.13); --accent:#3e64d5; --purple:#7951d8; --green:#15815d; --shade:rgba(247,248,251,.84); --soft-blue:rgba(66,104,212,.07); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:100px; }
body { margin:0; background:var(--bg); color:var(--text); line-height:1.6; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
button,input,select { font:inherit; }
button { cursor:pointer; }
button,a { -webkit-tap-highlight-color:transparent; }
button { color:inherit; }
button:disabled { opacity:.5; cursor:not-allowed; }
button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible { outline:2px solid var(--accent); outline-offset:5px; }
svg { display:block; }
h1,h2,h3,p { margin:0; }
main { min-height:70vh; outline:none; }
main > section { animation:enter .45s ease both; }
.container { width:min(var(--max-width),calc(100% - 64px)); margin-inline:auto; }
.muted { color:var(--muted); }
.icon { flex-shrink:0; display:inline-block; vertical-align:middle; }
.brand { display:flex; align-items:center; gap:11px; white-space:nowrap; }
.brand img { width:37px; height:37px; }
.brand strong { font-size:19px; letter-spacing:.02em; font-weight:650; }
.brand span { color:var(--muted); font-size:14px; margin-left:3px; font-weight:400; letter-spacing:-.3px; }
.site-header { position:sticky; top:0; z-index:20; background:var(--shade); backdrop-filter:blur(20px); border-bottom:1px solid var(--border); }
.header-inner { display:flex; align-items:center; justify-content:space-between; height:80px; gap:24px; }
.nav { display:flex; align-items:center; gap:30px; font-size:14px; color:var(--muted); }
.nav a { position:relative; padding-block:28px; }
.nav a:hover,.nav a.active { color:var(--text); }
.nav a.active:after { content:""; position:absolute; bottom:17px; left:calc(50% - 2px); width:4px; height:4px; background:var(--accent); border-radius:50%; }
.header-actions { display:flex; align-items:center; gap:12px; }
.preview-label { font-size:10px; letter-spacing:.14em; color:var(--muted); border:1px solid var(--border); padding:4px 8px; border-radius:6px; }
.icon-button { border:1px solid transparent; width:42px; height:42px; display:inline-flex; align-items:center; justify-content:center; border-radius:11px; background:transparent; color:var(--muted); }
.icon-button:hover { background:var(--surface-raised); color:var(--text); }
.mobile-menu-button { display:none; }
.btn { display:inline-flex; justify-content:center; align-items:center; gap:9px; border:1px solid var(--border); border-radius:12px; padding:12px 20px; min-height:46px; font-size:14px; font-weight:550; line-height:1.4; transition:background .18s,transform .18s,border-color .18s; }
.btn:hover { transform:translateY(-2px); }
.btn-primary { background:#416fdc; border-color:#517ee5; color:#fff; box-shadow:0 4px 24px rgba(58,107,234,.14); }
.btn-primary:hover { background:#4c7bec; border-color:#7298f1; }
.btn-secondary { background:var(--surface-raised); color:var(--text); }
.btn-secondary:hover { border-color:var(--muted); }
.btn-ghost { background:transparent; }
.btn-sm { min-height:40px; padding:9px 15px; font-size:13px; }
.btn-wide { width:100%; }
.text-link { display:inline-flex; align-items:center; gap:8px; color:var(--accent); font-size:14px; }
.text-link:hover { text-decoration:underline; text-underline-offset:4px; }
.badge { display:inline-flex; gap:7px; align-items:center; padding:5px 10px; border-radius:7px; font-size:12px; font-weight:500; color:var(--accent); background:var(--soft-blue); border:1px solid rgba(100,143,255,.15); }
.dot { width:6px; height:6px; display:inline-block; background:var(--accent); border-radius:50%; }
.eyebrow { display:block; font-size:11px; font-weight:550; color:var(--accent); letter-spacing:.15em; text-transform:uppercase; margin-bottom:13px; }
.gradient-text { background:linear-gradient(110deg,#75a8ff 5%,#a284ef 68%); background-clip:text; -webkit-background-clip:text; color:transparent; }
[data-theme="light"] .gradient-text { background-image:linear-gradient(110deg,#446cd8,#865dd4); }
.section-heading h2 { font-size:34px; line-height:1.35; letter-spacing:-1px; font-weight:620; }
.section-heading > p { font-size:15px; color:var(--muted); margin-top:14px; max-width:590px; }
.section-heading.center { text-align:center; }
.section-heading.center > p { margin-inline:auto; }
.section-top { display:flex; justify-content:space-between; align-items:flex-end; gap:25px; margin-bottom:32px; }
.hero { position:relative; padding:91px 0 64px; background:radial-gradient(ellipse at 80% 38%,rgba(77,82,181,.09),transparent 52%); }
.hero-layout { display:grid; grid-template-columns:1.04fr 1fr; gap:40px; align-items:center; }
.hero h1 { font-size:clamp(40px,4.3vw,59px); line-height:1.26; letter-spacing:-2.4px; margin:22px 0; font-weight:650; }
.hero-lead { max-width:445px; color:var(--muted); font-size:16px; line-height:1.95; }
.hero-actions { display:flex; align-items:center; gap:13px; margin-top:30px; }
.hero-actions .btn { padding:14px 23px; }
.hero-note { display:flex; gap:17px; align-items:center; margin-top:23px; color:var(--muted); font-size:12px; }
.hero-note span { display:flex; gap:6px; align-items:center; }
.hero-note .icon { color:var(--green); }
.network-visual { position:relative; height:420px; width:100%; min-width:0; }
.globe-art { position:absolute; inset:0; width:100%; height:100%; }
.globe-art .orbit { stroke:var(--accent); opacity:.16; fill:none; stroke-width:1; }
.globe-art .mesh { stroke:var(--accent); opacity:.19; fill:none; stroke-width:.7; }
.globe-art .land { fill:var(--accent); opacity:.13; stroke:var(--accent); stroke-width:.6; }
.globe-art .route { fill:none; stroke:url(#route); stroke-width:1.4; stroke-dasharray:4 5; opacity:.8; }
.globe-art .point { fill:#81acff; }
.globe-art .point-ring { fill:rgba(100,143,255,.15); stroke:#7ea7ff; stroke-width:.5; }
.visual-label { position:absolute; top:21px; right:6px; color:var(--muted); font:10px ui-monospace,monospace; letter-spacing:.15em; }
.floating-route { position:absolute; background:var(--shade); backdrop-filter:blur(15px); border:1px solid var(--border); border-radius:14px; padding:11px 15px; font-size:12px; display:flex; align-items:center; gap:13px; box-shadow:0 18px 35px rgba(0,0,0,.1); }
.floating-route .route-icon { background:var(--soft-blue); color:var(--accent); width:32px; height:32px; border-radius:9px; display:grid; place-items:center; }
.floating-route strong { display:block; font-size:12px; font-weight:550; }
.floating-route small { color:var(--muted); font-size:10px; }
.route-hk { top:77px; left:0; }
.route-jp { top:184px; right:-7px; }
.connection-card { position:absolute; bottom:6px; left:26px; right:26px; border:1px solid var(--border); border-radius:17px; padding:16px 19px; background:var(--shade); backdrop-filter:blur(15px); }
.connection-heading { display:flex; justify-content:space-between; align-items:center; font-size:12px; }
.connection-heading strong { font-weight:550; }
.connection-heading span { color:var(--muted); font-size:10px; }
.connection-flow { display:flex; align-items:center; justify-content:space-between; gap:7px; margin-top:13px; }
.connection-end { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:11px; }
.connection-path { display:flex; flex:1; align-items:center; gap:9px; }
.connection-path:before,.connection-path:after { content:""; height:1px; flex:1; background:linear-gradient(90deg,transparent,var(--accent)); opacity:.4; }
.connection-path:after { transform:rotate(180deg); }
.connection-path .badge { font-size:10px; white-space:nowrap; }
.platform-strip { border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.platform-inner { display:flex; align-items:center; justify-content:space-between; gap:26px; min-height:92px; }
.platform-inner > p { color:var(--muted); font-size:12px; white-space:nowrap; }
.platform-list { display:flex; flex-wrap:wrap; gap:30px; align-items:center; color:var(--muted); }
.platform-item { display:flex; align-items:center; gap:9px; font-size:13px; }
.platform-mark { font-size:18px; font-weight:650; width:24px; text-align:center; color:var(--text); }
.features { padding:86px 0 80px; }
.bento { display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:17px; }
.feature-card { border:1px solid var(--border); border-radius:19px; padding:26px; background:var(--surface); min-width:0; position:relative; }
.feature-card.wide { grid-column:span 2; display:grid; grid-template-columns:1fr 1fr; gap:30px; }
.feature-icon { width:39px; height:39px; border:1px solid var(--border); background:var(--surface-raised); border-radius:12px; display:grid; place-items:center; color:var(--accent); margin-bottom:23px; }
.feature-card h3 { font-size:19px; font-weight:560; margin-bottom:10px; }
.feature-card p { color:var(--muted); font-size:13px; line-height:1.85; }
.feature-number { color:var(--muted); font:11px ui-monospace,monospace; position:absolute; top:28px; right:27px; opacity:.65; }
.mini-usage { padding:22px; border:1px solid var(--border); border-radius:14px; background:var(--bg); align-self:center; }
.mini-usage header { display:flex; justify-content:space-between; align-items:center; color:var(--muted); font-size:10px; }
.mini-usage strong { font-size:25px; display:block; font-weight:550; margin:9px 0 12px; }
.mini-usage strong span { font-size:11px; color:var(--muted); font-weight:400; }
.usage-track { height:6px; background:var(--surface-raised); border-radius:10px; }
.usage-track:before { display:block; content:""; width:64%; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--accent),var(--purple)); }
.mini-usage footer { display:flex; justify-content:space-between; color:var(--muted); font-size:10px; margin-top:12px; }
.region-chips { display:flex; gap:7px; flex-wrap:wrap; margin-top:21px; }
.region-chips span { border:1px solid var(--border); background:var(--surface-raised); padding:4px 9px; border-radius:6px; color:var(--muted); font-size:11px; }
.feature-card.compact { min-height:195px; }
.feature-card.compact .feature-icon { margin-bottom:18px; }
.plans-teaser { padding:0 0 80px; }
.teaser-inner { display:grid; grid-template-columns:1.1fr 1fr; gap:50px; border:1px solid var(--border); border-radius:24px; padding:37px 40px; background:linear-gradient(120deg,var(--surface),var(--soft-blue)); align-items:center; }
.teaser-copy h2 { font-size:29px; line-height:1.45; letter-spacing:-.8px; }
.teaser-copy p { color:var(--muted); font-size:14px; margin-top:11px; }
.teaser-copy .text-link { margin-top:21px; }
.teaser-plans { display:flex; gap:14px; }
.teaser-plan { border:1px solid var(--border); padding:18px 20px; border-radius:15px; background:var(--surface); flex:1; }
.teaser-plan > span { color:var(--muted); font-size:12px; }
.teaser-plan > strong { display:block; font-size:32px; font-weight:550; margin:7px 0; }
.teaser-plan strong small { color:var(--muted); font-size:12px; font-weight:400; }
.teaser-plan p { font-size:11px; color:var(--muted); display:flex; flex-wrap:wrap; gap:0 8px; }
.teaser-plan p span { white-space:nowrap; }
.steps-section { padding:0 0 85px; }
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:40px; margin-top:42px; }
.step { position:relative; padding-left:48px; }
.step > span { position:absolute; left:0; top:0; width:32px; height:32px; display:grid; place-items:center; background:var(--soft-blue); color:var(--accent); border-radius:50%; font:12px ui-monospace,monospace; }
.step h3 { font-size:17px; font-weight:550; margin-bottom:9px; }
.step p { font-size:13px; color:var(--muted); }
.step a { margin-top:10px; font-size:12px; }
.bottom-cta { padding:38px 0 65px; border-top:1px solid var(--border); background:radial-gradient(ellipse at 50% 100%,var(--soft-blue),transparent 70%); text-align:center; }
.bottom-cta .eyebrow { margin-top:26px; }
.bottom-cta h2 { font-size:35px; font-weight:600; line-height:1.4; letter-spacing:-1px; }
.bottom-cta h2 { text-wrap:balance; }
.bottom-cta p { margin:14px 0 25px; color:var(--muted); font-size:14px; }
.site-footer { border-top:1px solid var(--border); }
.footer-top { display:flex; align-items:center; justify-content:space-between; gap:25px; padding:28px 0; }
.footer-top .brand img { width:29px; height:29px; }
.footer-top .brand strong { font-size:15px; }
.footer-top .brand span { font-size:12px; }
.footer-links { display:flex; gap:24px; font-size:12px; color:var(--muted); }
.footer-links a:hover { color:var(--text); }
.footer-bottom { display:flex; justify-content:space-between; gap:20px; padding:18px 0 25px; border-top:1px solid var(--border); font-size:10px; color:var(--muted); }
.page-intro { text-align:center; padding:59px 0 32px; }
.page-intro h1 { font-size:42px; font-weight:600; letter-spacing:-1.5px; line-height:1.35; margin:15px 0; }
.page-intro p { font-size:14px; color:var(--muted); }
.billing-options { display:flex; justify-content:center; gap:8px; align-items:center; margin:27px auto 0; }
.segmented { display:inline-flex; padding:5px; background:var(--surface); border:1px solid var(--border); border-radius:12px; gap:5px; }
.segmented button { border:0; border-radius:8px; min-height:40px; padding:8px 19px; background:transparent; color:var(--muted); font-size:13px; }
.segmented button[aria-pressed="true"] { color:var(--text); background:var(--surface-raised); box-shadow:0 2px 8px rgba(0,0,0,.07); }
.billing-hint { font-size:11px; color:var(--green); }
.demo-note { text-align:center; font-size:12px; color:var(--muted); margin:14px 0 25px; }
.pricing-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.price-card { position:relative; border:1px solid var(--border); border-radius:20px; background:var(--surface); padding:29px 28px; margin-top:15px; }
.price-card.featured { border-color:rgba(100,143,255,.55); background:linear-gradient(150deg,var(--soft-blue),var(--surface) 60%); }
.recommended { position:absolute; top:-14px; left:26px; background:#4065c2; border:1px solid #6e93eb; color:#fff; font-size:11px; border-radius:7px; padding:4px 11px; }
.price-head { display:flex; align-items:center; justify-content:space-between; gap:15px; }
.price-head h2 { font-size:20px; font-weight:550; }
.price-head .icon { color:var(--accent); }
.price-subtitle { color:var(--muted); font-size:12px; margin-top:8px; }
.price { display:flex; align-items:baseline; margin:25px 0 8px; gap:5px; }
.price .currency { font-size:20px; color:var(--muted); }
.price strong { font-size:46px; font-weight:580; line-height:1; letter-spacing:-1.5px; }
.price > small { font-size:12px; color:var(--muted); }
.billing-total { min-height:21px; font-size:11px; color:var(--muted); }
.price-card hr { border:0; border-top:1px solid var(--border); margin:23px 0; }
.price-traffic { display:flex; align-items:baseline; gap:6px; }
.price-traffic strong { font-size:25px; font-weight:550; }
.price-traffic span { font-size:12px; color:var(--muted); }
.price-features { padding:0; margin:17px 0 26px; list-style:none; }
.price-features li { display:flex; align-items:center; gap:9px; font-size:13px; margin:12px 0; color:var(--muted); }
.price-features .icon { color:var(--accent); }
.plan-assurances { display:flex; justify-content:center; gap:25px; margin:30px 0 55px; color:var(--muted); font-size:12px; }
.plan-assurances span { display:flex; align-items:center; gap:7px; }
.faq-section { display:grid; grid-template-columns:.75fr 1.25fr; gap:65px; padding:35px 0 70px; border-top:1px solid var(--border); }
.faq-section h2 { font-size:27px; font-weight:560; }
.faq-section p { color:var(--muted); font-size:13px; margin-top:13px; }
.faq-list details { border-bottom:1px solid var(--border); }
.faq-list summary { cursor:pointer; font-size:14px; padding:18px 0; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:20px; }
.faq-list summary::-webkit-details-marker { display:none; }
.faq-list summary:after { content:"+"; font-size:21px; color:var(--muted); }
.faq-list details[open] summary:after { content:"−"; }
.faq-list details p { margin:0 0 20px; line-height:1.8; }
dialog { background:var(--surface); color:var(--text); border:1px solid var(--border); border-radius:21px; padding:26px; width:min(500px,calc(100% - 32px)); max-height:calc(100dvh - 50px); overflow:auto; box-shadow:0 30px 90px rgba(0,0,0,.3); }
dialog::backdrop { background:rgba(4,6,12,.72); backdrop-filter:blur(7px); }
.modal-heading { display:flex; justify-content:space-between; align-items:center; gap:15px; margin-bottom:15px; }
.modal-heading h2 { font-size:21px; font-weight:550; }
#modal-content { font-size:14px; }
#modal-content p { color:var(--muted); margin:12px 0; }
.modal-summary { background:var(--bg); border:1px solid var(--border); border-radius:13px; padding:18px; margin:18px 0; }
.modal-summary .summary-row { display:flex; justify-content:space-between; gap:18px; font-size:13px; margin:9px 0; }
.modal-summary .summary-row span { color:var(--muted); }
.modal-summary .summary-row.total { border-top:1px solid var(--border); padding-top:14px; margin-top:14px; }
.modal-summary .total strong { font-size:24px; color:var(--accent); }
.checkout-form label { display:block; color:var(--muted); font-size:12px; margin-bottom:8px; }
.checkout-form input { background:var(--bg); color:var(--text); border:1px solid var(--border); border-radius:10px; min-width:0; width:100%; padding:12px; }
.checkout-form .coupon-row { display:flex; gap:9px; }
.checkout-form .coupon-row .btn { flex-shrink:0; }
.form-feedback { font-size:12px; min-height:22px; color:var(--muted); }
.checkout-buttons { display:grid; grid-template-columns:1fr 1.5fr; gap:12px; margin-top:17px; }
.checkout-success { text-align:center; padding:10px 0; }
.success-icon { width:64px; height:64px; margin:0 auto 20px; background:rgba(107,217,171,.1); border:1px solid rgba(107,217,171,.2); border-radius:50%; display:grid; place-items:center; color:var(--green); }
.checkout-success h3 { font-size:24px; font-weight:550; }
.tutorial-options { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:20px; }
.tutorial-options button { background:var(--surface-raised); border:1px solid var(--border); border-radius:12px; min-height:66px; padding:12px; display:flex; gap:12px; align-items:center; text-align:left; }
.tutorial-options button:hover { border-color:var(--accent); }
.tutorial-options small { display:block; color:var(--muted); font-size:11px; }
.tutorial-steps { padding-left:22px; color:var(--muted); line-height:2; }
.toast { position:fixed; bottom:27px; left:50%; transform:translate(-50%,18px); padding:13px 20px; background:var(--surface-raised); border:1px solid var(--border); color:var(--text); border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.2); font-size:13px; max-width:calc(100% - 32px); width:max-content; opacity:0; visibility:hidden; transition:opacity .2s,transform .2s; z-index:100; }
.toast.visible { opacity:1; visibility:visible; transform:translate(-50%,0); }
.skip-link { position:fixed; z-index:100; padding:10px 20px; background:var(--accent); color:white; transform:translateY(-100%); }
.skip-link:focus { transform:translateY(0); }
@keyframes enter { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
@media(min-width:1500px) { .hero { padding-top:108px; padding-bottom:90px; } }
@media(max-width:1060px) { .header-inner { gap:14px; } .nav { gap:22px; } .preview-label { display:none; } .hero-layout { gap:17px; } .hero h1 { font-size:46px; } .hero-note { gap:10px; } .bento { grid-template-columns:1fr 1fr; } .feature-card.wide { grid-column:span 2; } .feature-card.compact:last-child { grid-column:span 2; min-height:0; } .platform-list { gap:20px; } .route-jp { right:0; } }
@media(max-width:780px) { .container { width:calc(100% - 40px); } .header-inner { height:69px; } .brand strong { font-size:17px; } .brand span { font-size:12px; } .brand img { width:32px; height:32px; } .nav { position:absolute; top:69px; left:0; right:0; background:var(--surface); border-bottom:1px solid var(--border); padding:15px 20px; display:none; flex-direction:column; align-items:stretch; gap:0; } .nav.open { display:flex; } .nav a { padding:13px 10px; } .nav a.active:after { display:none; } .mobile-menu-button { display:inline-flex; } .header-actions { gap:2px; } .header-actions > .btn { display:none; } .hero { padding:53px 0 39px; } .hero-layout { grid-template-columns:1fr; gap:17px; } .hero h1 { font-size:46px; letter-spacing:-1.7px; } .hero-lead { max-width:510px; font-size:15px; } .network-visual { height:360px; max-width:480px; margin-inline:auto; } .hero-note { gap:18px; } .platform-inner { padding:21px 0; flex-direction:column; gap:16px; } .platform-list { gap:20px; justify-content:center; } .platform-item { font-size:12px; } .features { padding:56px 0; } .section-heading h2 { font-size:28px; } .section-top { align-items:flex-start; } .section-top > .text-link { white-space:nowrap; padding-top:30px; font-size:12px; } .feature-card { padding:23px; } .feature-card.wide { gap:20px; } .teaser-inner { gap:25px; padding:28px; grid-template-columns:1fr; } .teaser-copy h2 { font-size:27px; } .plans-teaser { padding-bottom:60px; } .steps { gap:24px; } .step { padding-left:0; padding-top:47px; } .steps-section { padding-bottom:57px; } .footer-top { align-items:flex-start; } .footer-links { gap:15px; flex-wrap:wrap; justify-content:flex-end; } .footer-bottom { flex-direction:column; gap:7px; } .page-intro { padding-top:43px; } .page-intro h1 { font-size:35px; } .pricing-grid { gap:14px; } .price-card { padding:24px 17px; } .price strong { font-size:38px; } .price-subtitle { min-height:38px; } .faq-section { gap:25px; grid-template-columns:1fr; } }
@media(max-width:590px) { .pricing-grid { grid-template-columns:1fr; gap:19px; max-width:440px; margin-inline:auto; } .price-card { padding:27px; } .price-subtitle { min-height:0; } .price strong { font-size:46px; } .price-features { display:grid; grid-template-columns:1fr 1fr; column-gap:8px; } .price-features li { font-size:12px; margin:8px 0; } .plan-assurances { flex-wrap:wrap; gap:12px 21px; margin-bottom:35px; } .faq-section { padding-top:30px; } }
@media(max-width:460px) { .container { width:calc(100% - 36px); } .hero h1 { font-size:40px; line-height:1.3; } .brand { gap:8px; } .brand span { font-size:11px; } .hero-actions { gap:10px; } .hero-actions .btn { padding:13px 18px; } .hero-note { gap:12px; font-size:10px; } .hero-note .icon { width:12px; } .network-visual { height:320px; } .route-hk { top:58px; left:0; } .route-jp { top:151px; } .floating-route { gap:8px; padding:9px 12px; } .floating-route .route-icon { width:27px; height:27px; } .connection-card { left:0; right:0; bottom:0; } .visual-label { top:15px; font-size:9px; } .platform-list { gap:15px; } .platform-mark { font-size:15px; width:20px; } .platform-item { gap:5px; } .section-top { display:block; } .section-top > .text-link { padding-top:16px; } .bento { grid-template-columns:1fr; } .feature-card.wide { grid-column:auto; grid-template-columns:1fr; } .feature-card.compact:last-child { grid-column:auto; } .feature-card { padding:24px; } .mini-usage { margin-top:0; } .feature-card.compact { min-height:0; } .feature-icon { margin-bottom:17px; } .teaser-inner { padding:25px; } .teaser-plans { gap:10px; } .teaser-plan { padding:15px; } .teaser-plan > strong { font-size:29px; } .steps { grid-template-columns:1fr; gap:28px; margin-top:30px; } .step { padding:0 0 0 48px; } .bottom-cta h2 { font-size:29px; } .footer-top { flex-direction:column; gap:20px; } .footer-links { justify-content:flex-start; } .page-intro h1 { font-size:30px; } .billing-options { flex-direction:column; gap:10px; } .billing-hint { font-size:10px; } .page-intro > p { font-size:13px; } .billing-options .segmented button { padding:8px 22px; } dialog { padding:22px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*:before,*:after { animation:none!important; transition:none!important; } }
@media(max-width:460px) { .bottom-cta h2 .gradient-text { display:block; } .teaser-plan p { flex-direction:column; } }