/* One Wisp universe: public site, account flows and trust centre. */
:root{--text:#f4efff;--muted:#b7b0c9;--cyan:#a9e7e8;--violet:#c3a3f3;--border:#c3a4f329;--border-bright:#c3a4f34d;--spring:cubic-bezier(.2,1.75,.4,1)}
body{background:radial-gradient(ellipse at 80% 5%,#39224e2e,transparent 29%),radial-gradient(ellipse at 0% 48%,#19383c22,transparent 32%),#0e0e17;color:var(--text)}
.container{max-width:1220px}
.ambient{opacity:.28;filter:blur(110px)}
.gradient-text{background:linear-gradient(110deg,#d6bbff 8%,#f0c5e8 44%,#a8e9e5 95%);background-clip:text;color:transparent}
.button{border-radius:16px;min-height:52px;gap:18px;transition:transform .48s var(--spring),box-shadow .3s,background .2s,border-color .2s;isolation:isolate;position:relative}
.button:hover{transform:translateY(-5px) scale(1.025);box-shadow:0 15px 32px #b18ae52b}
.button:active{transform:scale(.93)}
.button-primary{background:linear-gradient(115deg,#c7abf6,#deb5ec 65%,#bde2ee);border:1px solid #ffe8ff50;box-shadow:0 4px 20px #c8a4f024;color:#261b37;font-weight:600}
.button-primary:hover{background:linear-gradient(115deg,#dac3ff,#f0cff7 65%,#cef3f4);box-shadow:0 15px 40px #b18ae538}
.button-discord{background:linear-gradient(120deg,#6650bc,#7356ba);border:1px solid #be9af777;box-shadow:0 8px 26px #a37bdf1c;color:#fff}
.button-ghost{background:#c0a0ec0a;border:1px solid #c7a5f13b;color:#dfd2f0}
.button-ghost:hover{background:#c7a5f118;border-color:#c7a5f179}
.button:disabled{opacity:.58;transform:none;box-shadow:none;cursor:not-allowed}
.button>span:last-child{transition:transform .5s var(--spring)}
.button:hover>span:last-child{transform:translate(3px,-3px)}
.text-button,.card-link{transition:color .2s,transform .45s var(--spring)}
.text-button:hover,.card-link:hover{color:#ebcfff;transform:translateX(4px)}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid #d1b1ff;outline-offset:5px}
.site-header{height:86px;max-width:1340px;margin:16px auto 0;width:calc(100% - 42px);padding:0 28px;border:1px solid #bfa3e52b;border-radius:22px;background:#13111ce3;backdrop-filter:blur(24px);top:12px;box-shadow:0 12px 36px #0002}
.brand{letter-spacing:2px;font-size:23px}
.brand img{border-radius:14px;transition:transform .65s var(--spring)}
.brand:hover img{transform:rotate(-12deg) scale(1.12)}
.brand-sub{letter-spacing:5px;font-size:8px}
.desktop-nav{font-size:12px;gap:26px}
.desktop-nav a{position:relative;color:#b7aec7}
.desktop-nav a:after{content:'';position:absolute;bottom:-9px;left:50%;width:5px;height:5px;border-radius:50%;background:#c3a2f5;transform:translateY(7px) scale(0);transition:transform .5s var(--spring)}
.desktop-nav a:hover{color:#fff}
.desktop-nav a:hover:after{transform:translateY(0) scale(1)}
.nav-actions{gap:18px}
.nav-actions .button-small{font-size:11px;min-height:43px;padding:12px 17px;border-radius:13px}
.eyebrow{color:#bba2d7;letter-spacing:2px;font-size:10px}
.hero{padding-top:77px;padding-bottom:58px;gap:32px;min-height:690px;grid-template-columns:1.12fr 1fr;align-items:center}
.hero-pill{background:#cbb0f40a;border:1px solid #d3b4f42e;border-radius:30px;padding:11px 15px;width:fit-content;font-size:8px;letter-spacing:1.6px}
.hero h1{font-size:clamp(60px,6.8vw,94px);line-height:.99;letter-spacing:-5px;font-weight:650;margin-top:28px;margin-bottom:25px}
.hero-description{font-size:17px;line-height:1.85;max-width:465px;color:#bdb3ce}
.hero-buttons{gap:12px;margin-top:30px}
.hero-buttons .button{font-size:12px;padding:16px 22px}
.hero-community-link{display:flex;align-items:center;gap:15px;margin:29px 0 24px;width:fit-content}
.hero-avatar-stack{display:flex;padding-left:7px}
.hero-avatar-stack i{display:grid;place-items:center;width:33px;height:33px;border:3px solid #15111e;border-radius:50%;margin-left:-7px;color:#d9bfff;font-style:normal;background:#372645;font-size:17px}
.hero-avatar-stack i:nth-child(2){background:#25434b;color:#a9e7e8}
.hero-avatar-stack i:nth-child(3){background:#4e2e47;color:#f3bfdc}
.hero-community-link>span:last-child{font-size:10px;line-height:1.7;color:#9b8cae}
.hero-community-link strong{display:block;font-size:12px;color:#d7bbed;font-weight:500}
.hero-community-link:hover .hero-avatar-stack i{animation:wisp-icon-pop .6s var(--spring)}
.preview-note{color:#93859f;font-size:10px;line-height:1.8;max-width:440px}
.tiny-pill{border-color:#b08bdb40;color:#bca0d7;border-radius:6px;font-size:7px;letter-spacing:.5px}
.wonder-visual{height:550px;position:relative;margin:0;display:grid;place-items:center;isolation:isolate;overflow:clip}
.wonder-aura{position:absolute;width:480px;height:480px;border-radius:50%;background:radial-gradient(ellipse at 35% 30%,#ba85f746,#95dfd422 40%,transparent 69%);filter:blur(10px);animation:wisp-aura 7s ease-in-out infinite}
.wonder-mascot-wrap{display:grid;place-items:center;position:absolute;inset:0}
.wonder-mascot-wrap .wisp-bubble-mascot{scale:1.85;z-index:2}
.wonder-shadow{position:absolute;bottom:76px;left:25%;width:50%;height:20px;background:#b89cf326;filter:blur(14px);border-radius:50%;animation:experience-shadow 5s ease-in-out infinite}
.wonder-orbit{position:absolute;inset:80px 10px;border:1px solid #ccb1f52b;border-radius:50%;transform:rotate(-28deg)}
.wonder-orbit-two{inset:42px 70px;transform:rotate(42deg);border-color:#98e2e622}
.wonder-orbit:before{content:'';position:absolute;top:50%;left:-6px;width:12px;height:12px;border-radius:50%;background:#d6b4ff;box-shadow:0 0 30px #c7a3ff}
.wonder-orbit-two:before{background:#a6e9e2;left:auto;right:-4px;width:8px;height:8px;box-shadow:0 0 25px #a6e9e2}
.wonder-stamp{position:absolute;top:19px;font-size:8px;letter-spacing:1.7px;color:#b8a1cf;display:flex;align-items:center;gap:8px}
.wonder-chip{position:absolute;display:flex;align-items:center;gap:12px;border:1px solid #d4b2f03b;background:linear-gradient(130deg,#3c2848bb,#201a34c9);backdrop-filter:blur(20px);border-radius:18px;padding:16px 18px;box-shadow:0 20px 45px #0003;animation:wisp-pill-float 6s ease-in-out infinite;z-index:3}
.wonder-chip>span{font-size:29px;color:#d7b5fa}
.wonder-chip small{font-size:7px;letter-spacing:1px;color:#b7a0cf;display:block;margin-bottom:5px}
.wonder-chip strong{font-size:13px;color:#eee0fc;font-weight:500}
.wonder-chip-one{top:98px;right:18px;rotate:8deg}
.wonder-chip-two{bottom:72px;left:18px;rotate:-8deg;background:linear-gradient(130deg,#203d45cc,#211f39cc);border-color:#9fd8de35;animation-delay:-3s}
.wonder-chip-two>span{color:#a4ddd9}
.wonder-caption{position:absolute;bottom:3px;color:#8e819f;font-size:9px;text-align:center;letter-spacing:.4px}
.wonder-spark{position:absolute;color:#cfb0fa;animation:wisp-twinkle 5s ease-in-out infinite}
.spark-a{left:48px;top:85px;font-size:36px}
.spark-b{right:25px;bottom:152px;font-size:30px;color:#b1e8e1;animation-delay:-2s}
.spark-c{left:37px;top:50%;font-size:20px;animation-delay:-3s}
.compatibility{display:flex;justify-content:space-between;gap:22px;flex-wrap:wrap;padding:24px 28px;border:1px solid #b08cc526;background:#b79ae805;border-radius:20px;color:#b7a9c7;font-size:12px}
.compatibility>span{font-size:8px;color:#8d7a9e;letter-spacing:1.6px}
.compat-icon{color:#baa0db}
.section{padding-block:98px 0}
.section h2{font-size:clamp(37px,4.4vw,59px);letter-spacing:-2.3px;line-height:1.08;font-weight:600}
.section-intro{margin-bottom:36px;align-items:end}
.section-intro>p{font-size:14px;line-height:1.85;color:#a89bb8;max-width:330px}
.section-heading{margin-bottom:42px}
.section-heading>p:last-child{font-size:15px;color:#a89bb8}
.muted-heading{color:#a69bb9}
.feature-grid{gap:20px}
.feature-card{border:1px solid #a182be35;border-radius:26px;background:linear-gradient(160deg,#1d1829,#13131c);overflow:hidden;transition:transform .55s var(--spring),box-shadow .3s,border-color .3s}
.feature-card:hover{transform:translateY(-9px) rotate(-.6deg);border-color:#b58fe36e;box-shadow:0 23px 45px #0004}
.feature-card:nth-child(2):hover{rotate:1deg}
.feature-art{height:220px;position:relative;overflow:hidden;border:0}
.feature-art img{height:100%;width:100%;object-fit:cover;filter:saturate(.8);transition:scale .7s var(--spring)}
.feature-card:hover img{scale:1.06}
.feature-art>span{font-size:7px;padding:8px 10px;border-radius:8px;letter-spacing:1px;background:#14121dd9;border:1px solid #d6b3f824}
.feature-copy{padding:28px 26px}
.feature-copy h3{font-size:25px;line-height:1.15;letter-spacing:-.6px}
.feature-copy p{color:#a99bb9;font-size:13px;line-height:1.85}
.feature-card .feature-copy p{min-height:0}
.feature-card .illustrated-menu p{min-height:0;margin:5px 0;font-size:7px;line-height:1.5}
.feature-icon{border:1px solid #b596dc33;background:#b596dc0c;color:#c6a5ee;border-radius:13px}
.card-link{color:#d1b0f4;font-size:11px}
.identity-art{display:grid;place-items:center;background:radial-gradient(ellipse at 50% 40%,#8360b244,transparent 70%),#201a2e}
.identity-art .wisp-bubble-mascot{scale:.78;animation-delay:-2s}
.identity-colours{position:absolute;bottom:26px;display:flex;gap:10px}
.identity-colours i{width:14px;height:14px;border-radius:50%;background:#b092ef;box-shadow:0 0 12px #b092ef33}
.identity-colours i:nth-child(2){background:#99d9c3}.identity-colours i:nth-child(3){background:#eaabd1}.identity-colours i:nth-child(4){background:#a2c7f4}
.interface-art{display:grid;place-items:center;background:radial-gradient(ellipse at 50% 40%,#337e8a30,transparent 70%),#15272c}
.illustrated-menu{border:1px solid #a6dfd936;background:linear-gradient(125deg,#223b46,#23213c);padding:16px;border-radius:17px;width:78%;transform:rotate(-6deg);box-shadow:0 15px 30px #0003;animation:wisp-pill-float 7s ease-in-out infinite}
.illustrated-menu>div{display:flex;gap:4px;margin-bottom:12px}
.illustrated-menu i{width:4px;height:4px;background:#c7a7f5;border-radius:50%}
.illustrated-menu>span{font-size:5px;letter-spacing:1px;color:#98b7be}
.illustrated-menu>b{display:block;color:#e6d9ef;font-size:12px;margin:5px 0 13px;font-weight:500}
.illustrated-menu p{display:flex;justify-content:space-between;background:#05091239;border:1px solid #afd2df12;border-radius:6px;padding:6px 8px;font-size:7px;color:#a5b8c8;margin:5px 0}
.illustrated-menu em{height:8px;width:16px;background:#bba1f1;border-radius:10px}
.personal-section{grid-template-columns:1fr 1fr;gap:78px;align-items:center}
.personal-copy>p:not(.eyebrow){font-size:15px;color:#ad9cbd;line-height:1.85}
.clean-list{margin-block:25px 30px;gap:0}
.clean-list li{border-bottom:1px solid #b89bc81b;padding:13px 0;color:#c4b6d3;font-size:13px}
.clean-list li>span{display:grid;place-items:center;background:#b899e40e;color:#b793dc;border:1px solid #b899e42a;width:28px;height:28px;border-radius:10px;font-size:8px}
.wisp-playground{border:1px solid #c8a7ef38;background:radial-gradient(ellipse at 50% 30%,#8d65bd2b,transparent 65%),linear-gradient(140deg,#241b33,#14252e);border-radius:29px;box-shadow:0 30px 80px #0002;overflow:hidden;position:relative}
.playground-header{display:flex;justify-content:space-between;align-items:center;font-size:7px;letter-spacing:1.3px;padding:24px;color:#ba9cd5;border-bottom:1px solid #b695d41c}
.playground-header>span:first-child{display:flex;align-items:center;gap:7px}
.playground-header>span:last-child{color:#8ea5b0}
.playground-scene{display:grid;place-items:center;height:305px;position:relative}
.playground-scene .wisp-bubble-mascot{scale:1.25}
.playground-ring{position:absolute;width:230px;height:150px;border:1px solid #c7a3ea24;border-radius:50%;rotate:-25deg}
.playground-spark{position:absolute;right:70px;top:70px;color:#d8b6ff;font-size:38px;animation:wisp-twinkle 5s ease-in-out infinite}
.playground-controls{padding:0 29px}
.playground-controls>p{color:#c7b6da;font-size:13px;text-align:center;margin-bottom:18px}
.playground-swatches{display:flex;justify-content:center;gap:15px}
.playground-swatches button{width:30px;height:30px;border:4px solid transparent;border-radius:50%;cursor:pointer;box-shadow:0 0 0 1px #fff1;transition:transform .5s var(--spring),box-shadow .2s}
.playground-swatches button:hover{transform:translateY(-5px) scale(1.15)}
.playground-swatches button[aria-pressed=true]{box-shadow:0 0 0 3px #211b2f,0 0 0 5px #e4d0ff;transform:scale(1.08)}
.tone-lilac{background:#b896f1}.tone-mint{background:#9bdfc6}.tone-rose{background:#eeb6d5}.tone-sky{background:#9ec9f3}.tone-peach{background:#ecc4a0}
.playground-toggle{display:flex;justify-content:space-between;align-items:center;width:100%;margin-top:25px;background:#10131d55;border:1px solid #d2b9ed25;padding:15px 18px;color:#c9b7df;font-size:12px;border-radius:14px;cursor:pointer}
.playground-toggle>span{width:30px;height:17px;border-radius:20px;background:#4a405a;position:relative;transition:background .2s}
.playground-toggle>span:after{content:'';position:absolute;left:3px;top:3px;width:11px;height:11px;border-radius:50%;background:#e9d9ff;transition:transform .4s var(--spring)}
.playground-toggle[aria-pressed=true]>span{background:#a183cc}
.playground-toggle[aria-pressed=true]>span:after{transform:translateX(13px)}
.playground-disclaimer{font-size:9px!important;color:#8e7b9e!important;text-align:center;margin:17px 24px 23px;line-height:1.7}
.wisp-playground:not(.has-halo) .wisp-bubble-mascot:before{opacity:0}
.wisp-playground .wisp-bubble-mascot{transition:background .45s,box-shadow .45s}
.wisp-playground[data-tone=mint] .wisp-bubble-mascot{background:radial-gradient(ellipse at 29% 23%,#fff9,transparent 28%),linear-gradient(140deg,#d4fbe4,#7bd7b5 50%,#77bfc5)}
.wisp-playground[data-tone=rose] .wisp-bubble-mascot{background:radial-gradient(ellipse at 29% 23%,#fff9,transparent 28%),linear-gradient(140deg,#fbd6ec,#df91c1 50%,#bca3ed)}
.wisp-playground[data-tone=sky] .wisp-bubble-mascot{background:radial-gradient(ellipse at 29% 23%,#fff9,transparent 28%),linear-gradient(140deg,#d4eeff,#83afed 50%,#9cdcd9)}
.wisp-playground[data-tone=peach] .wisp-bubble-mascot{background:radial-gradient(ellipse at 29% 23%,#fff9,transparent 28%),linear-gradient(140deg,#fff0d8,#e8ac8c 50%,#df9dc8)}
.showcase-section{position:relative}
.showcase-window{border-radius:25px;border:1px solid #bea1e43d;background:#1a1525;box-shadow:0 25px 65px #0004,0 0 65px #a378d20b;overflow:hidden}
.window-toolbar{background:#1d1729;border-bottom:1px solid #b994dd28;min-height:65px}
.showcase-tabs button{border-radius:11px;font-size:11px;color:#a99aba;transition:transform .4s var(--spring),background .2s}
.showcase-tabs button.active{background:#c5a3ed22;color:#ead2ff;border-color:#c5a3ed40}
.showcase-tabs button:hover{transform:translateY(-2px)}
.window-caption{background:#1a1525;font-size:11px;padding:21px 25px;color:#ac9abd}
.build-tag{font-size:8px;color:#9e88b2}
.section-caption{color:#8e7d9f;font-size:10px;text-align:center;line-height:1.8;margin-top:17px}
.pricing-grid{gap:26px;max-width:910px;margin-inline:auto}
.price-card{border:1px solid #a585c13d;border-radius:27px;background:linear-gradient(140deg,#201829,#15141f);padding:37px;transition:transform .5s var(--spring),box-shadow .3s}
.price-card:hover{transform:translateY(-8px);box-shadow:0 24px 55px #0003}
.featured-price{background:radial-gradient(ellipse at 100% 0%,#9979c82b,transparent 70%),linear-gradient(140deg,#28203c,#161e2b);border-color:#d3b3ff79;box-shadow:0 0 60px #bd98ef0d;position:relative}
.recommended{border-radius:12px 12px 0 0;background:linear-gradient(100deg,#bca0ed,#d4b2e8,#a8cedd);color:#2a1a3c;font-size:8px;font-weight:600;letter-spacing:1.6px}
.plan-top{font-size:8px;letter-spacing:1.4px;color:#a98cbf}
.plan-symbol{color:#d1b4fa;border:1px solid #bc97e53d;background:#b798db13;border-radius:15px}
.price-card h3{font-size:32px;letter-spacing:-1px}
.plan-description{color:#ad9bbb;font-size:13px}
.price{font-size:58px;letter-spacing:-3px;color:#f0e6fc;margin-block:22px 12px}
.price>span{font-size:12px;letter-spacing:0;color:#a28cb5}
.price-detail{font-size:11px;color:#a28eb3;line-height:1.8;min-height:42px}
.plan-list{font-size:13px;color:#b9a9c9;gap:14px}
.plan-list li:before{color:#c7a4ed}
.plan-footnote{font-size:10px;color:#8f7c9f}
.pricing-disclosure{max-width:910px;border:1px solid #c4a8e52b;background:#c4a8e508;border-radius:16px;padding:21px 24px;margin-top:24px;color:#b7a4c8}
.pricing-disclosure p{font-size:12px;line-height:1.8}
.pricing-preview-tag{display:inline-flex;align-items:center;gap:7px;margin-top:18px;padding:9px 12px;border:1px solid #ddb5ec2e;border-radius:30px;font-size:8px;letter-spacing:1.2px;color:#bc9fd3;background:#c9a0eb09}
.pricing-preview-tag>span{width:5px;height:5px;border-radius:50%;background:#d3b1eb}
.existing-key{font-size:12px;color:#a38ab6}
.existing-key a{color:#d5b8f0}
.dashboard-promo{gap:65px}
.dashboard-promo>div>p:not(.eyebrow){font-size:15px;color:#b1a1c2;line-height:1.8}
.dashboard-mini{background:radial-gradient(ellipse at 90% 0%,#95d9e61a,transparent 65%),linear-gradient(130deg,#342240,#1b1a2d);border:1px solid #bc94e948;border-radius:25px;padding:28px;transform:rotate(-3deg);box-shadow:0 25px 55px #0003;transition:transform .65s var(--spring)}
.dashboard-mini:hover{transform:rotate(0) translateY(-6px) scale(1.02)}
.mini-bar{font-size:8px;color:#bfa2d4}
.mini-greeting{color:#b7a4c8;font-size:24px}
.mini-greeting strong{color:#f4e9ff}
.mini-licence{background:#0e101b66;border:1px solid #c3a7e82b;border-radius:17px}
.mini-tools{gap:9px}
.mini-tools>span{background:#b294d213;border:1px solid #b294d21f;border-radius:9px;font-size:9px;color:#b7a0ce}
.guide-grid{gap:20px}
.guide-card{display:block;text-align:left;background:linear-gradient(140deg,#201a2e,#141821);border:1px solid #b99bd438;border-radius:23px;padding:28px;transition:transform .45s var(--spring),box-shadow .3s,border-color .3s;color:var(--text)}
.guide-card:hover{transform:translateY(-7px) rotate(-.5deg);box-shadow:0 15px 40px #0003;border-color:#c09be66e}
.guide-card h3{font-size:23px;letter-spacing:-.5px}
.guide-card p{color:#a895b9;font-size:13px;line-height:1.8}
.guide-number{color:#ab8fc4;font-size:8px;letter-spacing:1.3px}
.faq-section{gap:80px}
.faq-list{border-top:1px solid #c9a8e52e}
.faq-list details{border-bottom:1px solid #c9a8e52e;padding:22px 3px}
.faq-list summary{font-size:15px;color:#d2bedf;transition:transform .5s var(--spring),color .2s}
.faq-list summary:hover{transform:translateX(6px);color:#edd6ff}
.faq-list summary:after{color:#ba94db;transition:transform .45s var(--spring)}
.faq-list details[open] summary:after{transform:rotate(90deg)}
.faq-list details p{color:#ac97bc;font-size:13px;line-height:1.9}
.faq-list details[open] p{animation:wisp-bubble-in .55s var(--spring) both}
.roadmap{margin-top:95px;background:linear-gradient(115deg,#1b1b29,#1a252c);border:1px solid #9fb3d52a;border-radius:25px;padding:34px;gap:30px}
.roadmap h3{font-size:25px;letter-spacing:-.6px}
.roadmap p{font-size:12px;color:#9c97ae;line-height:1.8}
.roadmap-tags{gap:9px}
.roadmap-tags>span{background:#13131d88;border:1px solid #b699df2a;border-radius:13px;color:#c5b5d8;font-size:12px}
.roadmap-tags small{color:#8e7da3;font-size:7px}
.community-banner{margin-top:75px;background:radial-gradient(ellipse at 0% 100%,#ba8fea29,transparent 65%),radial-gradient(ellipse at 100% 0%,#88d6df29,transparent 60%),#211b31;border:1px solid #d4aaf148;border-radius:29px;padding:40px;gap:25px;position:relative;overflow:hidden}
.community-banner h2{font-size:36px;line-height:1.13;letter-spacing:-1.3px}
.community-banner p:not(.eyebrow){font-size:13px;color:#b3a0c6;line-height:1.8;max-width:420px}
.community-spark{color:#d5b8f6;font-size:62px;animation:experience-rock 7s ease-in-out infinite}
.community-banner .button{font-size:12px}
.footer{padding-top:80px}
.footer-main{border-top:1px solid #c8a2e327;padding-top:45px;gap:32px}
.footer h3{font-size:8px;letter-spacing:1.5px;color:#9b7db3}
.footer a,.footer button,.footer-brand p{font-size:12px;color:#aa94bc;line-height:1.9}
.footer-bottom{font-size:9px;color:#806d92;border-color:#c8a2e324}
.trust-links{border-color:#b293d127;font-size:10px;color:#9983ad}
dialog{border:1px solid #d4a9ef4b;background:radial-gradient(ellipse at 90% 0%,#a277da20,transparent 65%),#191321;border-radius:28px;box-shadow:0 40px 140px #0009,0 0 70px #bc8fee13;padding:38px;max-width:610px}
dialog[open]{animation:experience-dialog-in .55s cubic-bezier(.2,1.3,.4,1) both}
dialog::backdrop{background:#07060dcc;backdrop-filter:blur(12px)}
.modal-close{border:1px solid #c6a6e43b;background:#c6a6e40b;color:#d3b7e7;border-radius:50%;transition:transform .5s var(--spring)}
.modal-close:hover{transform:rotate(90deg) scale(1.1)}
.modal-kicker{color:#b18ecb;font-size:9px;letter-spacing:2px}
.modal-title{color:#f2e5ff;font-size:37px;letter-spacing:-1.3px;line-height:1.12}
dialog p,dialog li{color:#b29bc3;font-size:14px;line-height:1.85}
.modal-form{gap:19px}
.modal-form label{color:#cebbdf;font-size:12px;line-height:1.8}
.modal-form input,.modal-form textarea,.modal-form select{border:1px solid #c7a0e237;background:#0f0f19;color:#efe2ff;border-radius:13px;padding:15px;font-size:15px;transition:border-color .2s,box-shadow .2s}
.modal-form input:focus,.modal-form textarea:focus,.modal-form select:focus{border-color:#bc98e0;box-shadow:0 0 0 4px #bc98e011;outline:none}
.modal-form .button{font-size:13px}
.modal-form>.button{width:100%;justify-content:center}
.modal-form .small-note{font-size:10px;color:#9980ab}
.form-feedback{font-size:12px;color:#edb7df;line-height:1.8}
.gallery-dialog{max-width:1100px}
#toast{background:linear-gradient(120deg,#31213d,#1c2938);border:1px solid #c6a6e456;box-shadow:0 15px 50px #0005;border-radius:16px;color:#e0c8f4;font-size:12px}
.checkout-heading h1{font-size:60px;letter-spacing:-2px;line-height:1.03}
.checkout-heading>p:last-child{font-size:15px;color:#b7a2c7}
.checkout-grid{gap:24px}
.checkout-main,.checkout-summary{border:1px solid #bf9fe73d;border-radius:25px;background:radial-gradient(ellipse at 100% 0%,#b27cdb18,transparent 65%),#17141f;padding:30px}
.checkout-summary{position:sticky;top:125px;background:radial-gradient(ellipse at 100% 0%,#94cfdd18,transparent 65%),#1a1624}
.checkout-plan{background:#100f1b;border:1px solid #bb98de2c;border-radius:17px;padding:21px;transition:transform .45s var(--spring),border-color .2s,background .2s}
.checkout-plan:hover{transform:translateY(-5px)}
.checkout-plan.selected{background:linear-gradient(130deg,#3a2648,#24303e);border-color:#d0adf37a;box-shadow:0 0 25px #b68cde0c}
.checkout-plan strong{font-size:31px;color:#ead4ff}
.checkout-plan small{color:#b6a0c7}
.checkout-main h2,.checkout-summary h2{letter-spacing:-.6px}
.checkout-benefits{color:#b2a0c1;font-size:13px}
.checkout-summary-lines{border-color:#bd98df26}
.checkout-account{border-color:#bd98df26}
.checkout-account p{font-size:13px}
.checkout-total strong{color:#e2c8fa}
.checkout-main .eyebrow,.checkout-summary .eyebrow{color:#b595ce}
.checkout-policy-links a{color:#d1adee}
.checkout-summary .small-note{font-size:11px;line-height:1.9}
.checkout-shell{padding-bottom:75px}
.callback-shell{max-width:760px;padding-top:55px}
.callback-shell .dash-card{background:radial-gradient(ellipse at 100% 0%,#b07ddb1f,transparent 65%),#191321;border:1px solid #cda6e949;border-radius:27px;padding:38px;animation:experience-dialog-in .65s cubic-bezier(.2,1.3,.4,1)}
.callback-shell h1{letter-spacing:-1.5px}
.policy-header{border-color:#c4a4df26}
.policy-layout{gap:50px}
.policy-nav{background:#17121e;border:1px solid #c2a0dd26;border-radius:20px;padding:21px}
.policy-nav a{background:#c3a2e609;border-color:#c3a2e61a;border-radius:11px;color:#c0a7d3;font-size:12px;transition:transform .4s var(--spring),background .2s}
.policy-nav a:hover{transform:translateX(4px);background:#c3a2e619;border-color:#c3a2e653}
.policy-body{max-width:830px}
.policy-body h1{color:#f2e3ff;font-size:54px}
.policy-body h2{color:#e4c9f6;font-size:31px}
.policy-body h3{color:#cbb1de;font-size:19px}
.policy-body p,.policy-body li{color:#b7a3c5;font-size:15px;line-height:1.9}
.policy-body section{border-color:#bc98d529}
.policy-body a{color:#d7b4f0}
.policy-notice{background:linear-gradient(125deg,#38263c,#252039);border-color:#d1a9eb38;border-radius:20px;padding:25px}
.policy-notice strong{color:#e6c9f4}
.phone-dock{background:#201828e8;border:1px solid #c9a5ee40;border-radius:20px;backdrop-filter:blur(25px)}
.phone-dock a{font-size:10px;color:#baa1cf;transition:transform .4s var(--spring)}
.phone-dock a:active{transform:scale(.9)}
.phone-dock a.active{background:#b99ae324;color:#ead1ff}
.wisp-reveal-pending{opacity:0;translate:0 26px}
.wisp-revealed{animation:experience-reveal .85s cubic-bezier(.2,1.2,.4,1) both}
.wisp-bop{animation:experience-bop .5s var(--spring)!important}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@keyframes experience-bop{0%,100%{scale:1}35%{scale:.93}70%{scale:1.025}}
@keyframes experience-reveal{from{opacity:0;translate:0 26px}to{opacity:1;translate:0 0}}
@keyframes experience-dialog-in{from{opacity:0;transform:translateY(25px) scale(.94)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes experience-shadow{0%,100%{scale:1;opacity:.7}50%{scale:.78;opacity:.4}}
@keyframes experience-rock{0%,100%{rotate:-8deg;translate:0 0}50%{rotate:8deg;translate:0 -7px}}
@media(max-width:1150px){.desktop-nav{gap:15px;font-size:11px}.nav-actions{gap:12px}.site-header{padding-inline:22px}.header-discord{display:none}.hero h1{font-size:80px}.hero{gap:20px}.wonder-visual{height:510px}.wonder-chip-one{right:0}.wonder-chip-two{left:0}.wonder-aura{width:400px;height:400px}.feature-copy{padding:24px 21px}.feature-copy h3{font-size:23px}.feature-art{height:195px}.personal-section{gap:45px}.community-banner{gap:20px}.community-banner h2{font-size:31px}}
@media(max-width:820px){
 .container{width:calc(100% - 38px)}
 .site-header{height:69px;width:calc(100% - 28px);margin-top:11px;padding-inline:15px;border-radius:18px;top:8px;gap:10px}
 .brand{font-size:21px;gap:7px}.brand img{width:37px;height:37px;border-radius:11px}.brand-sub{font-size:7px;letter-spacing:4px}
 .nav-actions{gap:8px}.nav-actions .button-small{padding:10px 12px;font-size:10px;min-height:38px;border-radius:11px}
 .mobile-nav{top:91px;left:14px;right:14px;width:auto;border:1px solid #c09be747;background:#1c1426f5;border-radius:20px;padding:13px;backdrop-filter:blur(22px);box-shadow:0 25px 70px #0007}
 .mobile-nav:not([hidden]){animation:experience-dialog-in .4s cubic-bezier(.2,1.2,.4,1)}
 .mobile-nav a,.mobile-nav button{color:#d4bce7;border-color:#c49ee51f;font-size:13px;padding:15px}
 .mobile-nav .mobile-discord{background:linear-gradient(110deg,#60459a,#403675);border-radius:12px}
 .hero{padding-top:43px;padding-bottom:25px;min-height:0;display:flex;flex-direction:column;gap:0;align-items:stretch}
 .hero-pill{font-size:6.5px;letter-spacing:1px;padding:9px 11px}
 .hero h1{font-size:clamp(57px,12vw,81px);letter-spacing:-3.5px;line-height:1.01;margin-top:25px;margin-bottom:22px}
 .hero-description{font-size:15px;line-height:1.85;max-width:100%}
 .hero-buttons{gap:10px;display:flex;margin-top:24px;flex-wrap:wrap}
 .hero-buttons .button{font-size:11px;padding:14px 16px;min-height:48px;gap:12px}
 .hero-community-link{margin-block:24px 20px}
 .preview-note{font-size:9px;max-width:100%}
 .wonder-visual{height:400px;min-height:400px;margin-top:15px}
 .wonder-mascot-wrap .wisp-bubble-mascot{scale:1.4}
 .wonder-aura{width:330px;height:330px}
 .wonder-orbit{inset:55px 10px}.wonder-orbit-two{inset:25px 50px}
 .wonder-stamp{font-size:6px;top:3px;letter-spacing:1.3px}
 .wonder-chip{border-radius:14px;padding:12px;gap:9px}
 .wonder-chip small{font-size:5px}.wonder-chip strong{font-size:10px}.wonder-chip>span{font-size:23px}
 .wonder-chip-one{top:50px;right:14px;rotate:7deg}
 .wonder-chip-two{left:14px;bottom:42px}
 .wonder-shadow{bottom:57px}
 .wonder-caption{font-size:7px;bottom:0}
 .spark-a{font-size:28px;top:43px;left:28px}.spark-b{right:13px;bottom:104px;font-size:23px}
 .compatibility{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:22px;border-radius:19px;font-size:10px}
 .compatibility>span{grid-column:1/-1;font-size:7px;letter-spacing:1.4px}
 .compat-icon{font-size:15px}
 .section{padding-top:65px}
 .section h2{font-size:38px;line-height:1.1;letter-spacing:-1.6px}
 .section-intro{display:block;margin-bottom:27px}.section-intro>p{font-size:13px;max-width:100%;margin-top:18px}
 .section-heading{margin-bottom:29px}.section-heading>p:last-child{font-size:13px;line-height:1.8}
 .eyebrow{font-size:8px;letter-spacing:1.6px}
 .feature-grid{display:grid;grid-template-columns:1fr;gap:20px}
 .feature-art{height:230px}.feature-copy{padding:26px}.feature-copy h3{font-size:28px}.feature-copy p{font-size:13px}.card-link{font-size:12px}
 .feature-card{border-radius:24px;display:block;min-width:0}
 .feature-art{width:100%;min-width:0}
 .personal-section{display:flex;flex-direction:column;gap:34px;align-items:stretch}
 .wisp-playground{border-radius:25px}
 .playground-header{padding:20px;font-size:6px}
 .playground-scene{height:265px}.playground-scene .wisp-bubble-mascot{scale:1.1}
 .personal-copy>p:not(.eyebrow){font-size:14px}.clean-list li{font-size:12px;padding-block:13px}
 .personal-copy .button{font-size:12px}
 .window-toolbar{min-height:60px;padding:10px;gap:8px}
 .showcase-tabs{gap:2px}.showcase-tabs button{padding:9px;font-size:9px;border-radius:9px}
 .build-tag{display:none}.window-caption{padding:15px 13px;font-size:8px;gap:9px}.window-caption .text-button{font-size:9px}
 .window-dots{gap:3px}.window-dots i{width:4px;height:4px}
 .showcase-window{border-radius:18px}.section-caption{font-size:9px}
 .pricing-grid{grid-template-columns:1fr;gap:38px}
 .price-card{padding:29px;border-radius:25px}
 .price-card h3{font-size:31px}.plan-description{font-size:13px}
 .price{font-size:58px}.price>span{font-size:12px}.price-detail{font-size:11px;min-height:0}
 .price-card .button{font-size:12px;min-height:50px}
 .recommended{font-size:7px;padding-block:8px;letter-spacing:1.5px}
 .plan-list{font-size:13px}.plan-footnote{font-size:10px}
 .pricing-disclosure{padding:18px;font-size:12px;margin-top:24px}.pricing-disclosure p{font-size:11px}
 .pricing-preview-tag{font-size:6px;margin-top:16px}
 .existing-key{font-size:11px}
 .dashboard-promo{display:flex;flex-direction:column;gap:35px}
 .dashboard-promo>div>p:not(.eyebrow){font-size:14px}
 .dashboard-mini{width:100%;padding:23px;border-radius:22px;rotate:0;transform:rotate(-2deg)}
 .mini-greeting{font-size:24px}.mini-bar{font-size:6px}.mini-tools>span{font-size:8px}
 .guide-grid{grid-template-columns:1fr;gap:15px}
 .guide-card{padding:26px;border-radius:21px}
 .guide-card h3{font-size:24px}
 .guide-card p{font-size:13px}
 .faq-section{display:block}
 .faq-section>div:first-child>p:not(.eyebrow){font-size:13px}
 .faq-list{margin-top:30px}.faq-list summary{font-size:14px;line-height:1.6}.faq-list details{padding:20px 2px}
 .faq-list details p{font-size:12px;line-height:1.9}
 .roadmap{margin-top:60px;padding:25px;display:block;border-radius:22px}
 .roadmap h3{font-size:26px}.roadmap p{font-size:12px}
 .roadmap-tags{margin-top:23px;display:flex;flex-wrap:wrap}.roadmap-tags>span{font-size:11px;padding:12px}
 .community-banner{margin-top:45px;padding:29px 25px;display:flex;flex-wrap:wrap;gap:17px;border-radius:25px}
 .community-spark{font-size:41px}
 .community-banner>div{width:calc(100% - 65px)}
 .community-banner h2{font-size:27px;letter-spacing:-.8px}
 .community-banner p:not(.eyebrow){font-size:12px}
 .community-banner .eyebrow{font-size:6px;line-height:1.8}
 .community-banner .button{width:100%;font-size:13px}
 .footer{padding-top:55px}.footer-main{grid-template-columns:1fr 1fr;padding-top:30px;gap:30px 20px}
 .footer-brand{grid-column:1/-1}.footer-main h3{font-size:7px;letter-spacing:1px}.footer a,.footer button,.footer-brand p{font-size:12px}
 .footer-bottom{font-size:8px;line-height:1.8;gap:12px;padding-bottom:100px}
 .trust-links{font-size:9px;line-height:1.8;padding-bottom:105px}
 dialog{padding:31px 24px;width:calc(100vw - 28px);border-radius:23px}
 .modal-title{font-size:32px}.modal-close{width:34px;height:34px}
 .modal-form label{font-size:12px}.modal-form input,.modal-form select,.modal-form textarea{font-size:16px}
 .modal-form .button{font-size:13px}
 .checkout-shell{padding-top:24px}
 .checkout-heading h1{font-size:44px;letter-spacing:-1.8px}
 .checkout-grid{grid-template-columns:1fr}
 .checkout-main,.checkout-summary{padding:23px;border-radius:22px}
 .checkout-summary{position:static}.checkout-plan{padding:17px 13px}
 .checkout-plan strong{font-size:26px}.checkout-plan small{font-size:10px}
 .checkout-benefits{font-size:12px;line-height:1.9}
 .callback-shell{padding-top:30px}.callback-shell .dash-card{padding:29px 24px}
 .policy-header{padding-block:22px;gap:13px}
 .policy-header .button{padding:10px;font-size:10px;min-height:40px}
 .policy-layout{grid-template-columns:1fr;padding-top:25px;gap:33px}
 .policy-nav{padding:19px}.policy-nav nav{grid-template-columns:1fr 1fr;gap:7px;margin:17px 0}
 .policy-nav a{padding:10px;font-size:11px;line-height:1.7}
 .policy-body h1{font-size:37px}.policy-body h2{font-size:27px}.policy-body h3{font-size:19px}
 .policy-body p,.policy-body li{font-size:14px;line-height:1.9}.policy-notice{padding:20px}
}
@media(max-width:370px){.hero h1{font-size:55px}.hero-buttons .button{font-size:10px;padding-inline:12px}.wonder-visual{height:360px;min-height:360px}.wonder-mascot-wrap .wisp-bubble-mascot{scale:1.2}.wonder-chip strong{font-size:9px}.wonder-chip-one{right:0}.wonder-chip-two{left:0}.community-banner h2{font-size:24px}.section h2{font-size:34px}}
@media(prefers-reduced-motion:reduce){
 *,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
 .wisp-reveal-pending{opacity:1;translate:none}
 .button:hover,.feature-card:hover,.price-card:hover,.guide-card:hover,.dashboard-mini:hover,.text-button:hover,.faq-list summary:hover{transform:none}
}

/* One vector grid for controls. Glyph metrics must never position an icon. */
.wisp-icon{display:block;width:20px;height:20px;flex:0 0 auto;vertical-align:middle;overflow:visible;pointer-events:none}
.button,.text-button.card-link,.back-link,.mobile-nav>a,.community-join{align-items:center;gap:10px}
.text-button.card-link,.back-link,.community-join{display:inline-flex}
.button>.wisp-icon,.text-button>.wisp-icon{width:18px;height:18px;align-self:center}
.icon-button,.modal-close,.dash-icon-button{place-items:center;padding:0;line-height:1}
.menu-toggle>.wisp-icon,.modal-close>.wisp-icon{width:22px;height:22px}
.phone-dock a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;line-height:1.2}
.phone-dock .wisp-icon{width:21px;height:21px}
.compat-icon{display:inline-grid;place-items:center;width:24px;height:24px;flex:none;line-height:1}
.feature-icon .wisp-icon{width:23px;height:23px}.plan-symbol{display:inline-grid;place-items:center;vertical-align:middle;line-height:1}
.plan-symbol .wisp-icon{width:30px;height:30px}
.in-dashboard .wisp-icon{width:20px;height:20px;flex:none;display:block}
.in-dashboard #dashboard-nav a>span{display:grid;place-items:center;width:22px;height:22px;flex:none}
.in-dashboard #dashboard-nav a>span>.wisp-icon{width:20px;height:20px}
.in-dashboard .shortcut-icon,.in-dashboard .release-symbol,.in-dashboard .empty-icon,.in-dashboard .community-bubble{display:grid;place-items:center;flex:none}
.in-dashboard .shortcut-icon>.wisp-icon,.in-dashboard .release-symbol>.wisp-icon{width:22px;height:22px}
.in-dashboard .release-cube>.wisp-icon{width:42px;height:42px}
.in-dashboard .wisp-shortcuts a>.icon-trailing{margin-left:auto;width:18px;height:18px}
.in-dashboard .wisp-orbit-pill>.wisp-icon{width:16px;height:16px}
.caution-icon{display:grid;place-items:center;width:18px;height:18px}.caution-icon svg{display:block;width:18px;height:18px}
.preorder-notice{margin-top:22px;padding:20px 22px;border:1px solid #b79ade55;border-radius:16px;background:#b79ade0b;max-width:700px}
.preorder-notice strong{color:#e9dcff}.preorder-notice p{font-size:14px;line-height:1.7;margin:8px 0 0;color:#b5b1c1}
.button .icon-trailing{transition:transform .2s ease}.button:hover .icon-trailing{transform:translate(2px,-2px)}
@media(prefers-reduced-motion:reduce){.button .icon-trailing{transition:none}.button:hover .icon-trailing{transform:none}}

/* Real product preview replaces the dashboard's decorative floating mascot. */
.wisp-build-preview{margin:24px 24px 24px 8px;min-width:0;align-self:center;border:1px solid #cbb5f42e;border-radius:20px;overflow:hidden;background:#111118;box-shadow:0 16px 45px #08060d40;position:relative;z-index:1}
.build-preview-heading{display:flex;align-items:center;gap:7px;padding:13px 14px;font-size:8px;font-weight:600;letter-spacing:1.2px;color:#c5b8d7}
.build-preview-dot{width:5px;height:5px;background:#bba0ef;border-radius:50%;flex:none}
.build-preview-version{margin-left:auto;font-size:7px;letter-spacing:.6px;color:#88828f;white-space:nowrap}
.build-preview-image{display:block;position:relative;width:100%;height:206px;padding:0;border:0;overflow:hidden;text-align:left;color:#fff;background:#1a1d25;cursor:zoom-in}
.build-preview-image:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#080a1112 35%,#0c0e18d9 100%);pointer-events:none}
.build-preview-image>img{display:block;width:100%;height:100%;object-fit:cover;object-position:27% 45%;transition:transform .4s ease;filter:saturate(.88)}
.build-preview-image:hover>img{transform:scale(1.035)}
.build-preview-image:focus-visible{outline:3px solid #c9adff;outline-offset:-3px}
.build-preview-open{position:absolute;right:12px;top:12px;z-index:2;display:grid;place-items:center;width:30px;height:30px;border:1px solid #fff5;border-radius:9px;background:#151721b3}
.in-dashboard .build-preview-open>.wisp-icon{width:16px;height:16px}
.build-preview-caption{position:absolute;left:16px;right:16px;bottom:16px;display:grid;gap:5px;z-index:2}
.build-preview-caption strong{font-size:17px;letter-spacing:-.4px;font-weight:500;line-height:1.2}
.build-preview-caption>span{font-size:10px;color:#c3c6d1;line-height:1.4}
.wisp-build-preview figcaption{display:flex;flex-wrap:wrap;gap:6px;padding:13px 14px}
.wisp-build-preview figcaption>span{font-size:6px;font-weight:500;letter-spacing:.75px;color:#c2b1db;background:#b99ade0b;border:1px solid #b99ade24;border-radius:5px;padding:5px 6px}
.wisp-build-preview figcaption>p{width:100%;margin:4px 0 0;color:#93909f;font-size:9px;line-height:1.5}
@media(max-width:1100px) and (min-width:821px){.wisp-build-preview{margin:18px 18px 18px 0}.build-preview-heading{font-size:7px;padding:12px 10px}.build-preview-version{display:none}.build-preview-image{height:210px}.build-preview-caption strong{font-size:15px}}
@media(max-width:820px){.wisp-build-preview{width:calc(100% - 40px);max-width:480px;margin:20px auto 24px}.build-preview-image{height:230px}.build-preview-heading{font-size:9px}.build-preview-version{font-size:8px}.wisp-build-preview figcaption>span{font-size:7px}.wisp-build-preview figcaption>p{font-size:10px}}
@media(prefers-reduced-motion:reduce){.build-preview-image>img{transition:none}.build-preview-image:hover>img{transform:none}}