:root{color:#f8fafc;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;--vg-bg:#050505;--vg-modal:#0a0a0a;--vg-card:#111;--vg-card-2:#171717;--vg-line:#ffffff1a;--vg-line-soft:#ffffff0d;--vg-text:#fff;--vg-muted:#9ca3af;--vg-dim:#6b7280;--vg-primary:#818cf8;--vg-primary-strong:#4f46e5;--vg-purple:#c084fc;--vg-emerald:#34d399;--vg-orange:#fb923c;--vg-pink:#f472b6;--vg-gold:#facc15;background:#050505;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}body{background:var(--vg-bg);min-width:320px;min-height:100vh;margin:0}button,input,textarea{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.45}.screen{isolation:isolate;min-height:100vh;padding:max(22px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(34px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));background:radial-gradient(circle at 12% 4%,#4f46e547 0,#0000 34%),radial-gradient(circle at 88% 12%,#c084fc2e 0,#0000 34%),radial-gradient(circle at 50% 92%,#34d3991a 0,#0000 34%),linear-gradient(135deg,#050505 0%,#0a0a0a 42%,#050505 100%);position:relative}.screen:before{content:"";pointer-events:none;z-index:-1;background-image:linear-gradient(#ffffff07 1px,#0000 1px),linear-gradient(90deg,#ffffff07 1px,#0000 1px);background-size:56px 56px;position:fixed;inset:0;-webkit-mask-image:radial-gradient(circle at top,#000,#0000 75%);mask-image:radial-gradient(circle at top,#000,#0000 75%)}.hero{-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);background:linear-gradient(90deg,#050505fa,#09090cf5),radial-gradient(circle at 8% 30%,#4f46e54d,#0000 34%);border:1px solid #818cf838;border-radius:34px;justify-content:space-between;align-items:center;gap:24px;max-width:1180px;margin:0 auto 18px;padding:22px 20px 22px 24px;display:flex;box-shadow:0 26px 90px #0000007a,inset 0 0 0 1px #ffffff0a}.hero-copy{flex:1;min-width:0}.brand-lockup{align-items:center;gap:12px;margin-bottom:10px;display:flex}.x8-logo{object-fit:contain;background:#fffffff5;border-radius:18px;width:52px;height:52px;padding:8px;box-shadow:0 16px 34px #818cf82e}.hero h1{color:var(--vg-text);letter-spacing:-.045em;word-spacing:.09em;text-transform:uppercase;white-space:nowrap;text-shadow:0 14px 34px #ffffff14;margin:0 0 14px;font-size:clamp(28px,5.2vw,44px);font-style:italic;font-weight:1000;line-height:.96}.hero h1 span{display:inline}.hero p{color:#d1d5db;max-width:780px;margin:0;font-size:16px;font-weight:850;line-height:1.45}.db-note{color:var(--vg-primary);text-transform:uppercase;letter-spacing:.14em;margin-top:10px;font-size:10px;font-weight:950;display:inline-flex}.eyebrow{text-transform:uppercase;letter-spacing:.22em;font-weight:950;color:var(--vg-primary)!important;margin:0!important;font-size:10px!important}.hero-actions{flex-wrap:wrap;flex-shrink:0;justify-content:flex-end;align-items:center;gap:10px;display:flex}.status{letter-spacing:.14em;text-transform:uppercase;border:1px solid var(--vg-line);color:#fff;background:#ffffff0d;border-radius:999px;align-items:center;gap:7px;padding:10px 12px;font-size:10px;font-weight:950;display:inline-flex}.status.online{color:var(--vg-emerald)}.status.offline{color:var(--vg-orange)}.install,.notice,.app-shell,.card{box-shadow:0 24px 100px #0000005c}.install,.actions button,.success-actions button{color:#000;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;background:#fff;border:0;border-radius:18px;justify-content:center;align-items:center;gap:8px;padding:14px 18px;font-size:11px;font-weight:950;transition:transform .18s,box-shadow .18s,background .18s;display:inline-flex;box-shadow:0 18px 40px #ffffff14}.install:hover,.actions button:hover,.success-actions button:hover{transform:translateY(-1px);box-shadow:0 18px 50px #818cf833}.install:active,.actions button:active,.success-actions button:active{transform:scale(.98)}.notice{color:#fde68a;background:#facc151a;border:1px solid #facc1547;border-radius:24px;max-width:1180px;margin:0 auto 18px;padding:12px 16px;font-weight:850}.mobile-card-header,.mobile-card-footer{display:none}.app-shell{border:1px solid var(--vg-line);-webkit-backdrop-filter:blur(28px);backdrop-filter:blur(28px);background:#0a0a0ad6;border-radius:40px;grid-template-rows:minmax(0,1fr);grid-template-columns:260px minmax(0,1fr);max-width:1180px;height:min(680px,100vh - 214px);min-height:400px;margin:0 auto;display:grid;overflow:hidden}.sidebar{border-right:1px solid var(--vg-line-soft);background:linear-gradient(#111111eb,#050505eb);flex-direction:column;gap:10px;padding:22px;display:flex}.sidebar button{border:1px solid var(--vg-line);color:#d1d5db;text-align:left;text-transform:uppercase;letter-spacing:.06em;background:#ffffff0b;border-radius:22px;align-items:center;gap:10px;padding:14px;font-size:11px;font-weight:950;transition:all .18s;display:flex}.sidebar button:hover{color:#fff;border-color:#818cf873;transform:translate(2px)}.sidebar span{color:#fff;background:#ffffff14;border-radius:50%;place-items:center;width:28px;height:28px;display:inline-grid}.sidebar .active{background:linear-gradient(135deg, var(--vg-primary-strong), #7c3aed);color:#fff;border-color:#ffffff40;box-shadow:0 14px 40px #4f46e547}.sidebar .active span{background:#0505056b}.panel{scrollbar-width:thin;scrollbar-color:#818cf88c #ffffff0f;background:#05050538;flex-direction:column;height:100%;min-height:0;max-height:100%;padding:28px;display:flex;overflow-y:auto}.progress{background:#ffffff0f;border-radius:999px;height:8px;margin-bottom:20px;overflow:hidden}.progress span{background:linear-gradient(90deg, var(--vg-primary-strong), var(--vg-purple), var(--vg-pink));height:100%;transition:width .25s;display:block;box-shadow:0 0 28px #818cf88c}.step{flex:1;animation:.25s fade}.step h2{letter-spacing:-.045em;color:#fff;text-transform:uppercase;align-items:center;gap:10px;margin:0 0 8px;font-size:30px;font-style:italic;font-weight:950;display:flex}.step h2 svg{color:var(--vg-primary)}.step>p{color:var(--vg-muted);margin:0 0 22px;font-weight:720;line-height:1.55}.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;display:grid}.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.tile,.collective,.plan{border:1px solid var(--vg-line);color:#fff;text-align:left;background:#111111eb;border-radius:32px;padding:18px;transition:all .18s;box-shadow:inset 0 1px #ffffff09}.tile:hover,.collective:hover,.plan:hover{border-color:#818cf88c;transform:translateY(-2px);box-shadow:0 18px 48px #4f46e529}.tile b,.collective b,.plan b{text-transform:capitalize;color:#fff;margin-bottom:6px;font-size:17px;display:block}.tile small,.collective small{text-transform:uppercase;letter-spacing:.16em;width:fit-content;color:var(--vg-primary);background:#818cf81f;border:1px solid #818cf838;border-radius:999px;margin-bottom:10px;padding:5px 8px;font-size:9px;font-weight:950;display:inline-flex}.tile span,.plan span,.checkout span{color:var(--vg-muted);font-size:13px;line-height:1.45;display:block}.tile i{color:#fff;background:linear-gradient(135deg,#4f46e5b8,#c084fc6b);border-radius:16px;place-items:center;width:42px;height:42px;margin-bottom:12px;display:grid}.tile i svg{width:22px;height:22px}.dashed-tile{border-style:dashed}.step-card{gap:18px;display:grid}.link-button{width:fit-content;color:var(--vg-primary);text-transform:uppercase;letter-spacing:.12em;background:0 0;border:0;align-items:center;gap:6px;padding:0;font-size:11px;font-weight:950;display:inline-flex}.primary-wide{color:#000;text-transform:uppercase;letter-spacing:.08em;background:#fff;border:0;border-radius:18px;width:100%;padding:15px 18px;font-weight:950}.selected{box-shadow:0 18px 55px #4f46e53d;background:linear-gradient(135deg,#4f46e53d,#c084fc1a)!important;border-color:#818cf8f2!important}.knob-card{color:#fff;border:1px solid var(--vg-line);background:radial-gradient(circle at 20% 20%,#818cf833,#0000 34%),linear-gradient(135deg,#111,#050505);border-radius:36px;margin-top:18px;padding:24px}.knob-wrap{justify-content:center;align-items:center;gap:22px;margin:12px 0 20px;display:flex}.knob{background:radial-gradient(circle at 35% 30%,#6d28d9,#111827 55%,#020617);border:9px solid #ffffff1a;border-radius:50%;place-items:center;width:132px;height:132px;transition:transform .25s;display:grid;box-shadow:inset 0 0 28px #000a,0 22px 50px #4f46e54d}.knob svg{color:#fff;filter:drop-shadow(0 0 12px #c084fccc)}.knob-readout b{color:#fff;font-size:54px;line-height:.8;display:block}.knob-readout span{color:var(--vg-muted);text-transform:uppercase;letter-spacing:.18em;font-size:12px;font-weight:950}.knob-card input{width:100%;accent-color:var(--vg-primary-strong)}.scale{color:var(--vg-muted);justify-content:space-between;margin-top:8px;font-size:12px;font-weight:850;display:flex}.scale b{color:#fff}.cups{border:1px solid var(--vg-line-soft);background:#ffffff0e;border-radius:24px;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:18px;padding:12px;display:flex}.cups button{color:#000;background:#fff;border:0;border-radius:50%;width:42px;height:42px;font-size:24px;font-weight:950;line-height:1}.cups b{color:#fff}.cups span{color:var(--vg-muted);margin-left:auto;font-size:13px}.collectives{grid-template-columns:1fr;gap:12px;display:grid}.collective{justify-content:space-between;align-items:center;gap:14px;display:flex}.collective p{color:var(--vg-muted);margin:0 0 8px;line-height:1.45}.collective em{color:var(--vg-dim);font-size:12px;font-style:normal}.collective strong{color:var(--vg-emerald);white-space:nowrap}.form{gap:12px;display:grid}.form label,.config-block label,.knob-card label{text-transform:uppercase;letter-spacing:.18em;color:var(--vg-muted);font-size:10px;font-weight:950}.config-step{gap:16px;display:grid}.config-block{border:1px solid var(--vg-line);background:#ffffff0a;border-radius:28px;padding:16px}.pill-row,.coupon-row{flex-wrap:wrap;gap:10px;display:flex}.pill-row button,.coupon-row button{border:1px solid var(--vg-line);color:#fff;text-transform:uppercase;letter-spacing:.08em;background:#ffffff0f;border-radius:16px;padding:12px 14px;font-size:11px;font-weight:950}.pill-row .selected-pill{color:#000;background:#fff;border-color:#fff}.coupon-row input{flex:1;min-width:180px}.form input,.form textarea{border:1px solid var(--vg-line);color:#fff;background:#ffffff0e;border-radius:20px;outline:none;width:100%;padding:14px 16px}.form input::placeholder,.form textarea::placeholder{color:#6b7280}.form textarea{resize:vertical;min-height:106px}.form input:focus,.form textarea:focus{border-color:#818cf8b8;box-shadow:0 0 0 4px #4f46e52e}.form input[aria-invalid=true],.form textarea[aria-invalid=true]{background:#ef44441f;border-color:#f87171d9}.row{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;display:grid}.row:has(input:nth-child(3)){grid-template-columns:1fr 1fr .7fr}.error{color:#fca5a5;margin:0;font-size:13px;font-weight:850}.plans{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;display:grid}.section-title{color:#fff;text-transform:uppercase;letter-spacing:.18em;margin:18px 0 10px;font-size:12px;font-weight:950}.payment-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:4px;display:grid}.payment-card{border:1px solid var(--vg-line);color:#fff;text-align:left;background:#111111eb;border-radius:26px;gap:8px;padding:16px;transition:all .18s;display:grid}.payment-card:hover{border-color:#818cf88c;transform:translateY(-2px)}.payment-card i{color:#fff;background:linear-gradient(135deg,#4f46e5b8,#c084fc5c);border-radius:15px;place-items:center;width:38px;height:38px;display:grid}.payment-card b{color:#fff;font-size:15px}.payment-card span{color:var(--vg-muted);font-size:12px;line-height:1.4}.plan{flex-direction:column;justify-content:space-between;min-height:150px;display:flex}.plan strong{color:var(--vg-emerald);margin-top:10px;font-size:22px;display:block}.checkout{color:#fff;background:linear-gradient(135deg,#4f46e54d,#111111f5);border:1px solid #818cf83d;border-radius:34px;grid-template-columns:auto 1fr auto;align-items:start;gap:14px;margin-top:18px;padding:18px;display:grid}.checkout svg{color:var(--vg-primary)}.checkout strong{color:#fff;white-space:nowrap;font-size:24px}.checkout span{color:#cbd5e1;margin-top:4px}.gift{align-items:center;gap:6px;color:#fde68a!important;display:flex!important}.save{background:#22c55e1f;border:1px solid #34d39938;border-radius:18px;align-items:center;gap:8px;padding:12px 14px;font-weight:950;color:#bbf7d0!important;display:flex!important}.inline-notice{max-width:none;box-shadow:none;margin:0}.knob-card.compact{gap:12px;margin-top:0;padding:18px;display:grid}.actions{z-index:5;border-top:1px solid var(--vg-line-soft);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#050505eb;justify-content:space-between;gap:12px;margin:auto -28px -28px;padding:18px 28px;display:flex;position:sticky;bottom:-28px}.actions .secondary,.success-actions .secondary{color:#fff;border:1px solid var(--vg-line);background:#ffffff0f}.success{place-items:center;display:grid}.card{border:1px solid var(--vg-line);color:#fff;background:#111111f0;border-radius:40px;padding:34px}.success-card{text-align:center;max-width:560px}.success-card>svg{color:var(--vg-emerald)}.success-card h1{letter-spacing:-.05em;text-transform:uppercase;margin:8px 0;font-size:40px;font-style:italic}.success-card p{color:var(--vg-muted);line-height:1.55}.summary{border:1px solid var(--vg-line);text-align:left;background:#ffffff0e;border-radius:26px;gap:6px;margin:22px 0;padding:16px;display:grid}.summary span{color:var(--vg-muted)}.success-actions{flex-wrap:wrap;justify-content:center;gap:10px;display:flex}@keyframes fade{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@media (width<=860px){:root{--vg-mobile-ink:#191716;--vg-mobile-muted:#9b9691;--vg-mobile-coffee:#d87908;--vg-mobile-line:#efefef}body{background:#f6f3ee}.screen{background:linear-gradient(#faf8f4 0%,#f1eee8 100%);padding:32px 16px 22px;display:block}.screen:before,.hero,.notice{display:none}.app-shell{width:min(100vw - 32px,358px);height:auto;min-height:0;color:var(--vg-mobile-ink);-webkit-backdrop-filter:none;backdrop-filter:none;background:#fff;border:1px solid #19171614;border-radius:28px;margin:0;display:block;overflow:hidden;box-shadow:0 22px 42px #14100d24}.mobile-card-header{color:#fff;background:#1d1815;justify-content:space-between;align-items:flex-start;gap:18px;min-height:132px;padding:30px 28px 42px;display:flex;position:relative}.mobile-card-header>div{min-width:0;padding-right:82px}.mobile-card-header h1{letter-spacing:-.06em;margin:0 0 12px;font-size:clamp(28px,8.5vw,38px);font-weight:1000;line-height:.95}.mobile-card-header p{color:#ffffff94;text-transform:uppercase;letter-spacing:.16em;margin:0;font-size:11px;font-weight:850;line-height:1.35}.mobile-cup-mark{color:#fff;background:linear-gradient(135deg,#f08a0a,#c96905);border-radius:19px;place-items:center;width:64px;height:64px;display:grid;position:absolute;top:28px;right:27px;box-shadow:inset 0 1px #ffffff38,0 14px 26px #d8790847}.mobile-progress-segments{grid-template-columns:repeat(7,1fr);gap:10px;display:grid;position:absolute;bottom:-6px;left:24px;right:24px}.mobile-progress-segments span{background:#dedbd7;border-radius:999px;height:10px;box-shadow:inset 0 1px #fffc}.mobile-progress-segments .active{background:var(--vg-mobile-coffee)}.sidebar,.panel>.progress{display:none}.panel{height:auto;min-height:0;max-height:none;color:var(--vg-mobile-ink);background:#fff;padding:86px 28px 36px}.step{color:var(--vg-mobile-ink)}.step h2{color:var(--vg-mobile-ink);letter-spacing:-.055em;text-transform:none;margin-bottom:34px;font-size:29px;font-style:normal;font-weight:1000;line-height:1.05}.step h2 svg{color:var(--vg-mobile-coffee);width:28px;height:28px}.step>p{display:none}.grid,.grid.two,.plans,.row{grid-template-columns:1fr}.row:has(input:nth-child(3)){grid-template-columns:1fr}.method-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.tile,.collective,.plan{border-color:var(--vg-mobile-line);color:var(--vg-mobile-ink);background:#fff;border-radius:22px;box-shadow:0 4px 16px #0f0c0a09,inset 0 0 0 1px #ffffff9e}.icon-tile{flex-direction:column;justify-content:flex-start;min-height:164px;padding:28px 22px 22px;display:flex}.tile:hover,.collective:hover,.plan:hover{border-color:#d8790859;transform:translateY(-1px);box-shadow:0 18px 30px #d879081a}.tile i{width:58px;height:58px;color:var(--vg-mobile-ink);box-shadow:none;background:#f6f6f5;border-radius:18px;margin:0 0 25px}.tile i svg{stroke-width:2.5px;width:28px;height:28px}.method-grid .tile:nth-child(4) i svg{color:#63bde8}.tile b,.collective b,.plan b{color:var(--vg-mobile-ink);letter-spacing:-.035em;margin:0 0 8px;font-size:19px;line-height:1.1}.icon-tile small{width:auto;color:var(--vg-mobile-muted);letter-spacing:-.02em;background:0 0;border:0;order:3;margin:0;padding:0;font-size:12px;line-height:1.18;display:block}.icon-tile small:first-line{text-transform:uppercase}.icon-tile span{display:none}.dashed-tile{border-style:dashed;border-color:#ddd}.dashed-tile b{font-style:italic}.collective,.checkout{grid-template-columns:1fr}.collective p,.collective small,.tile span,.plan span,.checkout span,.scale,.form label,.config-block label,.knob-card label{color:var(--vg-mobile-muted)}.collective strong,.checkout strong{color:var(--vg-mobile-coffee);white-space:normal}.selected{background:#fffaf2!important;border-color:#d87908c7!important;box-shadow:0 14px 32px #d8790826!important}.knob-card,.config-block,.checkout,.summary{border-color:var(--vg-mobile-line);color:var(--vg-mobile-ink);background:#fbfaf8}.knob-readout b,.scale b,.checkout b,.summary b,.cups b{color:var(--vg-mobile-ink)}.knob{background:radial-gradient(circle at 35% 30%,#f3a63a,#d87908 55%,#3a2411);border-color:#00000014}.form input,.form textarea,.pill-row button,.coupon-row button{color:var(--vg-mobile-ink);border-color:var(--vg-mobile-line);background:#fff}.pill-row .selected-pill,.primary-wide,.actions button,.install,.success-actions button{background:var(--vg-mobile-ink);color:#fff}.actions{padding:18px 28px max(18px, env(safe-area-inset-bottom));-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);background:#fffffff0;border-top-color:#eee;margin:18px -28px -36px;position:sticky;bottom:0}.actions .secondary,.success-actions .secondary{color:var(--vg-mobile-ink);background:#f6f4f1;border-color:#e8e5df}.actions button{border-radius:18px;flex:1}.mobile-card-footer{text-align:center;color:#aaa39b;text-transform:uppercase;letter-spacing:.18em;background:linear-gradient(#fbfaf8,#fff);padding:22px 18px 26px;font-size:11px;font-weight:950;display:block}}@media (display-mode:standalone){.install{display:none}}