/* WHATIF Experience: a vivid, accessible, CSS-only creative layer.
   No third-party image/CDN dependencies. Animation respects reduced motion. */
:root { --wi-purple:#a68aff; --wi-cyan:#55dfff; --wi-pink:#ff64c8; --wi-amber:#ffbd73; }
.whatif-home {--g:#a98bff;--c:#62e1ff;background:radial-gradient(ellipse 800px 650px at 90% 5%,#24359d6c,transparent 68%),radial-gradient(ellipse 560px 540px at 0% 28%,#491f8263,transparent 72%),radial-gradient(ellipse 680px 480px at 95% 58%,#083d7069,transparent 70%),#070a17;color:#f8f8ff;}
.whatif-home header {background:#070b18e8;border-bottom:1px solid #b390ff35;backdrop-filter:blur(18px);padding:18px clamp(18px,4vw,64px);box-shadow:0 8px 30px #03050d66;}
.whatif-home header .brand {font-size:28px;font-weight:1000;letter-spacing:-.08em;color:#fff;}
.whatif-home header .brand span {color:#69e4ff;text-shadow:0 0 28px #58dfff80;}
.whatif-home header nav a {font-size:13px;color:#e6dfff;font-weight:900;letter-spacing:.04em;padding:8px 9px;}
.whatif-home header nav a:hover {color:#69eaff;text-shadow:0 0 20px #54dfff70;}
.whatif-home main {max-width:1640px;overflow:hidden;}
.whatif-home .whatif-hero {position:relative;display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);align-items:center;gap:clamp(10px,3vw,50px);min-height:675px;padding:clamp(65px,6vw,94px) clamp(18px,4vw,62px) 85px;}
.whatif-hero:before {content:"";pointer-events:none;position:absolute;inset:0;z-index:0;background:linear-gradient(0deg,transparent 0 96%,#7ee6ff08 97%),linear-gradient(90deg,transparent 0 96%,#7ee6ff07 97%);background-size:66px 66px;mask-image:linear-gradient(90deg,transparent,#000 45%,#000 90%,transparent);}
.whatif-hero:after {content:"";position:absolute;pointer-events:none;width:330px;height:330px;right:-140px;top:85px;border:1px solid #5ad8ff39;border-radius:50%;box-shadow:0 0 0 90px #8f5aff08,0 0 0 180px #8f5aff05;}
.whatif-hero .hero-copy,.whatif-hero .hero-visual {position:relative;z-index:1;min-width:0;}
.whatif-hero .eyebrow {display:inline-flex;align-items:center;gap:9px;font-size:11px;font-weight:900;letter-spacing:.2em;color:#87ecff;border:1px solid #87ecff55;border-radius:100px;background:linear-gradient(90deg,#12253d,#1e1532);padding:11px 16px;box-shadow:0 0 34px #40caff17;}
.whatif-hero .eyebrow:before {content:"";display:inline-block;background:#6de9ff;width:8px;height:8px;border-radius:50%;box-shadow:0 0 0 4px #5ddfff20,0 0 20px #5ddfff;}
.whatif-home .whatif-hero h1 {font-weight:1000;font-size:clamp(46px,5.8vw,91px);line-height:1.02;letter-spacing:-.07em;max-width:800px;margin:28px 0 18px;text-wrap:balance;}
.whatif-home .whatif-hero h1 span {background:linear-gradient(102deg,#76edff 2%,#9fa6ff 43%,#ff76d0 88%);color:transparent;background-clip:text;-webkit-background-clip:text;}
.whatif-home .whatif-hero h1 .line-small {display:block;font-size:clamp(25px,3vw,45px);font-weight:900;line-height:1.25;color:#d3e0ff;letter-spacing:-.045em;margin-top:13px;}
.whatif-hero .hero-subline {color:#fff;font-size:clamp(18px,2vw,25px);font-weight:900;margin:0 0 8px;letter-spacing:-.04em;}
.whatif-hero .hero-description {font-size:clamp(16px,1.28vw,19px);line-height:1.65;color:#bfc8e6;max-width:590px;margin:0 0 22px;}
.whatif-hero .hero-actions {display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:21px 0;}
.whatif-home .whatif-hero .cta,.whatif-home .whatif-hero .hero-secondary {display:inline-flex;align-items:center;justify-content:center;min-height:55px;margin:0;padding:14px 21px;border-radius:13px;font-weight:1000;letter-spacing:.02em;font-size:14px;text-decoration:none;transition:transform .2s,box-shadow .2s;}
.whatif-home .whatif-hero .cta {color:#0b0b20;background:linear-gradient(105deg,#67e8ff,#aa95ff 55%,#ff88d2);box-shadow:0 13px 44px #8787ff50,0 0 0 1px #e0d7ff66;}
.whatif-home .whatif-hero .hero-secondary {color:#e8dcff;background:#201b3d;border:1px solid #8f7fd48f;}
.whatif-home .whatif-hero .cta:hover,.whatif-home .whatif-hero .hero-secondary:hover {transform:translateY(-3px);box-shadow:0 16px 50px #8c7cff52;}
.whatif-hero .hero-proof {font-size:13px;color:#93a6c8;margin:18px 0 0;font-weight:650;}
.whatif-hero .hero-proof b {color:#d8e5f9;}
.whatif-hero .hero-visual {isolation:isolate;min-height:525px;display:flex;align-items:center;justify-content:center;perspective:1200px;}
.whatif-hero .orbital {position:absolute;width:min(100%,550px);aspect-ratio:1;border:1px solid #99a3ff48;border-radius:50%;transform:rotateX(58deg) rotateZ(-17deg);box-shadow:0 0 0 55px #8292ff09,0 0 0 118px #f364cb06;}
.whatif-hero .orbital:after {content:"";position:absolute;inset:70px;border:2px dashed #64d9ff25;border-radius:50%;}
.whatif-hero .glow-disc {position:absolute;width:350px;height:350px;filter:blur(56px);opacity:.7;background:conic-gradient(from 15deg,#55c5ffbb,#b260ffbb,#ff67c1a6,#52d4ffb6);border-radius:50%;animation:wi-orbit 22s linear infinite;}
.whatif-hero .mock-window {position:relative;width:min(100%,548px);border:1px solid #a6b8ff88;border-radius:19px;background:linear-gradient(125deg,#171d40 0%,#090e24 68%,#0d1430 100%);box-shadow:0 50px 105px #01020ba6,0 0 85px #6657fa4d,inset 0 1px #ffffff40;overflow:hidden;transform:rotateY(-6deg) rotateX(5deg) rotateZ(-2deg);animation:wi-float 8s ease-in-out infinite;}
.whatif-hero .mock-window:before {content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 76% 40%,#b85cff30,transparent 56%),repeating-linear-gradient(90deg,transparent 0 24px,#ffffff04 25px 26px);}
.whatif-hero .mock-top {position:relative;display:flex;align-items:center;gap:5px;border-bottom:1px solid #ffffff23;background:#090f28cc;padding:13px 18px;}
.whatif-hero .mock-dot {width:8px;height:8px;border-radius:50%;background:#ff7088}.whatif-hero .mock-dot:nth-child(2){background:#ffca7e}.whatif-hero .mock-dot:nth-child(3){background:#5fedcf}
.whatif-hero .mock-url {margin:auto;color:#9eb8de;background:#ffffff0d;border:1px solid #ffffff16;border-radius:100px;font-size:10px;padding:4px 22px;}
.whatif-hero .mock-content {position:relative;padding:39px 39px 38px;min-height:340px;}
.whatif-hero .mock-label {font-size:11px;color:#75e8ff;font-weight:950;letter-spacing:.18em;}
.whatif-hero .mock-heading {font-size:clamp(38px,4vw,60px);line-height:.99;letter-spacing:-.07em;font-weight:1000;margin:24px 0 15px;max-width:460px;}
.whatif-hero .mock-heading span {background:linear-gradient(100deg,#73eaff,#e68bff);background-clip:text;-webkit-background-clip:text;color:transparent;}
.whatif-hero .mock-caption {font-size:14px;color:#b7c7e3;max-width:310px;}
.whatif-hero .mock-button {display:inline-block;margin-top:16px;background:#c69aff;color:#140d2b;border-radius:8px;padding:10px 14px;font-size:12px;font-weight:1000;}
.whatif-hero .mock-gem {position:absolute;right:-36px;bottom:-86px;width:250px;height:250px;border-radius:32%;transform:rotate(25deg);background:linear-gradient(115deg,#38cfff,#a14eff 45%,#f354bf 90%);box-shadow:0 0 90px #c967ffc1,inset 0 0 70px #ffffff55;filter:drop-shadow(0 30px 24px #371b7990);clip-path:polygon(50% 0,100% 26%,90% 80%,51% 100%,6% 82%,0 24%);}
.whatif-hero .mock-gem:before {content:"";position:absolute;inset:24px;border:2px solid #d9ffff6a;clip-path:polygon(50% 0,100% 26%,90% 80%,51% 100%,6% 82%,0 24%);}
.whatif-hero .float-chip {position:absolute;z-index:2;padding:12px 17px;background:#13162ff2;border:1px solid #bd8dffb2;box-shadow:0 16px 48px #0008,0 0 25px #9270ff44;border-radius:12px;color:#efdbff;font-size:11px;font-weight:850;letter-spacing:.05em;animation:wi-float 9s ease-in-out infinite;}
.whatif-hero .float-chip.one {top:60px;right:0;animation-delay:-3s}.whatif-hero .float-chip.two{bottom:44px;left:-8px;border-color:#63dfffaa;color:#baf4ff;animation-delay:-5s}
.whatif-home .section {padding:64px clamp(18px,4vw,62px);}
.whatif-home .section h2 {letter-spacing:-.045em;color:#f7f7ff;}
.whatif-home .section .eyebrow {color:#8ee6ff;font-size:11px;}
.whatif-home .muted {color:#b2c2dc;}
.whatif-home .card {background:linear-gradient(140deg,#161e3b,#0b1428 68%,#1a112e);border:1px solid #a797ff45;}
.whatif-home .card:hover {border-color:#72dbff;box-shadow:0 12px 35px #365dfb20;}
.whatif-home .card .tag {color:#90e9ff;}
.whatif-home .card a {border-color:#a6a3ff7b;color:#dbdfff;}
.whatif-home .card a:hover {background:#a48bff;color:#0c0721;}
.whatif-home .filters button,.whatif-home .directory-toolbar select {background:#171b34;border-color:#776eaa;color:#f3e7ff;min-height:44px;}
.whatif-home .filters button.active {color:#7edfff;border-color:#6fe4ff;}
.whatif-home .filters input {min-height:44px;background:#101830;border-color:#647eab;color:white;}
.whatif-home .triple > div {background:linear-gradient(145deg,#19203f,#131227 70%);border-color:#a17efe55;box-shadow:0 12px 32px #01020d35;}
.whatif-home .triple strong {color:#8be8ff;}
.whatif-home .contact-link {border-color:#aa93ffb0;color:#e1caff;background:#30234b50;min-height:46px;display:inline-flex;align-items:center;justify-content:center;}
.whatif-home .contact-link:hover {background:#9579fa;color:#0c061c;}
.whatif-home .panel {background:#181a37;border-color:#958bce55;}
.whatif-home footer {border-color:#a18dff3a;background:#080a19;color:#b5bed7;}
.whatif-home footer a {color:#a8dfff;}
.whatif-showroom {position:relative;padding-top:72px!important;padding-bottom:76px!important;border-top:1px solid #8079d43c;border-bottom:1px solid #8079d43c;background:radial-gradient(ellipse at 80% 12%,#462b9166,transparent 62%),radial-gradient(ellipse at 4% 92%,#0a506369,transparent 58%);}
.whatif-showroom .showroom-intro {max-width:780px;}
.whatif-showroom .showroom-intro h2 {font-size:clamp(35px,5.2vw,63px);line-height:1.08;margin:12px 0;}
.whatif-showroom .showroom-intro h2 span {background:linear-gradient(90deg,#5fe0ff,#ff86cf);background-clip:text;-webkit-background-clip:text;color:transparent;}
.whatif-showroom .showroom-intro p {color:#b6c6dd;font-size:17px;}
.showroom-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:30px 0 0;}
.showroom-card {position:relative;background:#11162d;border:1px solid #ffffff35;border-radius:20px;overflow:hidden;transition:transform .25s,box-shadow .25s,border-color .25s;box-shadow:0 20px 60px #0008;}
.showroom-card:hover {transform:translateY(-7px);border-color:#a9a3ff;box-shadow:0 25px 72px #8367fc40;}
.showroom-art {min-height:250px;position:relative;overflow:hidden;padding:25px 26px;isolation:isolate;}
.showroom-art:before {content:"";position:absolute;inset:0;z-index:-1;opacity:.75;background-size:32px 32px;background-image:linear-gradient(#ffffff0a 1px,transparent 1px),linear-gradient(90deg,#ffffff0a 1px,transparent 1px);}
.showroom-art .mini-top {display:flex;gap:5px;align-items:center}.showroom-art .mini-top i{display:block;width:7px;height:7px;border-radius:50%;background:#ffffff78}.showroom-art .mini-top b{font-size:10px;letter-spacing:.1em;margin-left:9px;}
.showroom-art .mini-kicker {font-size:10px;font-weight:900;letter-spacing:.17em;margin:36px 0 12px;}
.showroom-art .mini-head {font-weight:1000;font-size:clamp(28px,2.7vw,43px);line-height:1.04;letter-spacing:-.06em;max-width:250px;}
.showroom-art .mini-action {display:inline-block;margin-top:19px;font-size:10px;font-weight:1000;padding:10px 13px;border-radius:7px;}
.showroom-art .mini-orbit {position:absolute;width:155px;height:155px;border-radius:50%;right:-35px;bottom:-53px;filter:blur(0);pointer-events:none;}
.showroom-art.violet {background:radial-gradient(ellipse at 82% 48%,#a947ff88,transparent 55%),linear-gradient(132deg,#211853,#0b0d27);}
.showroom-art.violet .mini-kicker {color:#80e0ff}.showroom-art.violet .mini-action {color:#101123;background:#d6a2ff}.showroom-art.violet .mini-orbit{border:31px solid #b576ffb3;box-shadow:0 0 80px #a96dff94,inset 0 0 35px #8c6dfc98}
.showroom-art.cyan {background:radial-gradient(ellipse at 82% 48%,#12b4ee87,transparent 55%),linear-gradient(135deg,#071c36,#0b1230);}
.showroom-art.cyan .mini-kicker{color:#54f4fe}.showroom-art.cyan .mini-action{background:#55dafa;color:#001b28}.showroom-art.cyan .mini-orbit{border:30px solid #34c8ec;box-shadow:0 0 80px #48e7ff9e,inset 0 0 40px #c8ffff54}
.showroom-art.gold {background:radial-gradient(ellipse at 80% 50%,#df6c2788,transparent 62%),linear-gradient(140deg,#2a1820,#130e1c);}
.showroom-art.gold .mini-kicker{color:#ffcc89}.showroom-art.gold .mini-action{background:#ffc077;color:#271306}.showroom-art.gold .mini-orbit{border:30px solid #f4a651;box-shadow:0 0 80px #ffb45896,inset 0 0 40px #ffbd7298}
.showroom-copy {padding:19px 23px 24px;}.showroom-copy h3 {font-size:21px;color:#fff;letter-spacing:-.035em;margin:0 0 4px;}.showroom-copy p{font-size:13px;color:#b4bfdb;margin:4px 0 19px;min-height:44px;}
.showroom-copy a {display:inline-flex;align-items:center;justify-content:center;min-height:47px;width:100%;border:1px solid #b2a1ff7f;border-radius:10px;background:linear-gradient(100deg,#212445,#23163b);color:#e5daff;text-decoration:none;font-size:13px;font-weight:900;}
.showroom-copy a:hover{background:#987cff;color:#120b22;}
.whatif-how{margin:0;padding:18px clamp(18px,4vw,62px) 70px;background:linear-gradient(180deg,#0d1027,#080b18);}
.whatif-how h2{margin:10px 0 23px;font-size:clamp(27px,3vw,40px);letter-spacing:-.04em;}
.whatif-how .steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;}
.whatif-how .steps div {background:#19182f;border:1px solid #7975b354;border-radius:15px;padding:22px;}
.whatif-how .steps b {font-size:12px;color:#78dfff;letter-spacing:.12em;}
.whatif-how .steps h3 {margin:13px 0 7px;font-size:19px;}
.whatif-how .steps p{font-size:14px;color:#b3bcdc;margin:0;}
.whatif-home :is(a,button,input,select):focus-visible,.builder-app :is(a,button,input,textarea,select,summary):focus-visible{outline:3px solid #78e6ff;outline-offset:4px;}
/* Website Starter uses same energy, but its three questions remain clear. */
.builder-app {--mint:#89a9ff;background:radial-gradient(ellipse at 95% -12%,#743bb27a,transparent 55%),radial-gradient(ellipse at 0 56%,#115a9680,transparent 65%),#070a17;}
.builder-app header{border-bottom-color:#9678d057;background:#0c0d22ed;}
.builder-app .logo span{color:#77d9ff;}
.builder-app header nav a{color:#e2d6ff;font-size:13px;}
.builder-app .hero{position:relative;border-bottom:1px solid #a481fa2a;padding:54px 0 45px;max-width:none;}
.builder-app .hero .eyebrow{display:inline-block;border:1px solid #a68bff88;color:#b9a1ff;background:#2d235077;padding:9px 13px;border-radius:100px;letter-spacing:.15em;}
.builder-app .hero h1{max-width:850px;font-size:clamp(43px,6.6vw,81px);letter-spacing:-.065em;}
.builder-app .hero h1 em{background:linear-gradient(90deg,#76dfff,#a19bff,#ff88d1);background-clip:text;-webkit-background-clip:text;color:transparent;}
.builder-app .hero p{max-width:750px;color:#c5c7e3;}
.builder-app .pills span{background:#1d2140;color:#bfefff;border-color:#769bfa81;}
.builder-app .panel{background:linear-gradient(150deg,#15162d,#131b33 70%);border:1px solid #8576bc80;box-shadow:0 15px 48px #04061888;}
.builder-app .panel h2{color:#faf8ff;}
.builder-app .step{color:#070d21;background:linear-gradient(135deg,#73deff,#b794ff);box-shadow:0 0 24px #8777ff66;}
.builder-app .quick-start input,.builder-app .quick-start textarea{border-color:#9385cd;background:#0b1330;}
.builder-app .quick-start input:focus,.builder-app .quick-start textarea:focus{border-color:#66dcff;}
.builder-app .btn-primary{color:#0b0a23;border-color:#9fb4ff;background:linear-gradient(100deg,#63dbff,#ae96ff 60%,#ff9bce);box-shadow:0 9px 32px #8c85ff51;}
.builder-app .advanced summary strong{color:#8ce2ff;}
.builder-app .note{border-color:#8485d087;background:#191f4085;color:#c7ccef;}
.builder-app .note strong{color:#a9cbff;}
.builder-app .frame{border-color:#a5a7ed8f;box-shadow:0 20px 90px #424fc631;}
.builder-app .address{color:#c9d5ff;}
.builder-app .preview-actions button[aria-pressed="true"] {background:#7879df;color:#fff;}
.builder-app .theme-swatches {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin:15px 0 0;}
.builder-app .theme-swatch {min-height:93px;border:1px solid #7777b6;background:#11142a;border-radius:12px;padding:10px;color:#e8e9ff;font-size:12px;font-weight:850;text-align:left;cursor:pointer;transition:transform .2s,border-color .2s;}
.builder-app .theme-swatch[aria-pressed="true"]{border-color:#7ce5ff;box-shadow:0 0 0 2px #86d5ff44;}
.builder-app .theme-swatch:hover{transform:translateY(-3px);}
.builder-app .swatch-art{height:33px;border-radius:7px;margin-bottom:9px;box-shadow:inset 0 0 20px #ffffff20;}
.builder-app .swatch-art.violet{background:linear-gradient(120deg,#151740,#954cfa 55%,#ee70d5);}
.builder-app .swatch-art.blue{background:linear-gradient(120deg,#061c36,#0b91d9 55%,#62f1f9);}
.builder-app .swatch-art.amber{background:linear-gradient(120deg,#26121d,#ba5c24 55%,#ffcb76);}
.builder-app .swatch-note {font-size:12px;color:#b6bddf;margin:7px 0 0;}
@keyframes wi-float{0%,100%{transform:rotateY(-6deg) rotateX(5deg) rotateZ(-2deg) translateY(0)}50%{transform:rotateY(-6deg) rotateX(5deg) rotateZ(-2deg) translateY(-16px)}}
@keyframes wi-orbit{to{transform:rotate(360deg)}}
@media(max-width:1170px){.whatif-home .whatif-hero{grid-template-columns:1fr 1fr}.whatif-home .whatif-hero h1{font-size:clamp(46px,6vw,72px)}.whatif-hero .float-chip.one{right:10px}.whatif-hero .float-chip.two{left:6px}}
@media(max-width:900px){.whatif-home .whatif-hero{grid-template-columns:1fr;padding-top:70px;gap:0}.whatif-hero .hero-visual{min-height:490px}.whatif-home .whatif-hero h1{max-width:720px}.showroom-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.whatif-how .steps{grid-template-columns:1fr}}
@media(max-width:620px){.whatif-home .whatif-hero{padding:49px 17px 38px;min-height:0}.whatif-home .whatif-hero h1{font-size:clamp(43px,11vw,65px);margin-top:22px}.whatif-hero .eyebrow{font-size:10px;padding:10px 12px}.whatif-hero .hero-visual{min-height:365px;padding:0 8px}.whatif-hero .mock-window{transform:none;animation:none}.whatif-hero .mock-content{padding:27px;min-height:300px}.whatif-hero .mock-heading{font-size:43px}.whatif-hero .mock-gem{width:170px;height:170px;right:-25px;bottom:-60px}.whatif-hero .float-chip.one{top:14px;right:0}.whatif-hero .float-chip.two{bottom:2px;left:0}.whatif-home .section{padding:52px 18px}.showroom-grid{grid-template-columns:1fr}.showroom-art{min-height:220px}.showroom-art .mini-head{font-size:39px}.whatif-home header{gap:5px}.whatif-home header nav{gap:3px 8px}.whatif-home header nav a{font-size:12px;padding:9px 3px}.builder-app .theme-swatches{grid-template-columns:repeat(3,minmax(0,1fr))}.builder-app .theme-swatch{font-size:11px;padding:7px}.whatif-how{padding:23px 18px 54px}}
@media(prefers-reduced-motion:reduce){.whatif-hero .mock-window,.whatif-hero .glow-disc,.whatif-hero .float-chip {animation:none}.whatif-home .showroom-card,.builder-app .theme-swatch{transition:none}.whatif-home html{scroll-behavior:auto}}


/* FIRST PARTY SOFTWARE: the store shelves now carry WHATIF products. */
.whatif-home .whatif-products {position:relative;isolation:isolate;padding-top:85px;padding-bottom:95px;background:radial-gradient(ellipse 820px 500px at 90% 12%,#663cde52,transparent 70%),radial-gradient(ellipse 620px 550px at 0% 95%,#155fa25c,transparent 65%),#090b1d;border-top:1px solid #6d7bd64a;border-bottom:1px solid #6d7bd64a;}
.whatif-products:before {content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(#a6b2ff08 1px,transparent 1px),linear-gradient(90deg,#a6b2ff08 1px,transparent 1px);background-size:56px 56px;}
.products-heading{max-width:840px;margin:0 0 34px;}
.whatif-home .products-heading h2 {font-size:clamp(39px,5vw,69px);line-height:1.07;letter-spacing:-.058em;margin:13px 0 18px;}
.products-heading h2 span {background:linear-gradient(100deg,#6de3ff,#c28aff,#ff81cb);background-clip:text;-webkit-background-clip:text;color:transparent;}
.products-heading p {font-size:clamp(16px,1.5vw,19px);line-height:1.65;color:#c2cbe5;margin:0;}
.product-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:19px;align-items:stretch;}
.product-card{position:relative;isolation:isolate;display:flex;flex-direction:column;min-width:0;overflow:hidden;border:1px solid #9ca1ff58;background:linear-gradient(140deg,#1c1a3c,#131c3a 75%,#151030);border-radius:22px;padding:29px 26px 26px;box-shadow:0 20px 54px #03051573;transition:transform .2s,border-color .2s,box-shadow .2s;}
.product-card:before {content:"";position:absolute;z-index:-1;width:270px;height:270px;right:-128px;top:-92px;border-radius:50%;filter:blur(35px);background:#9259ff5e;}
.product-card:nth-child(2):before {background:#36caff5c;}
.product-card:nth-child(3):before {background:#e89d5a53;}
.product-card:hover{transform:translateY(-5px);border-color:#7ae8ff;box-shadow:0 28px 66px #4453dc48;}
.product-card.first{border-color:#c18dffb0;background:linear-gradient(130deg,#291f54,#151f3f 75%,#19102e);}
.product-number {font-size:11px;font-weight:950;letter-spacing:.18em;color:#8ee7ff;}
.product-mark{height:102px;display:flex;align-items:center;justify-content:flex-start;font-size:93px;line-height:1;filter:drop-shadow(0 5px 28px #aa85ffcc);color:#b898ff;margin:6px 0 2px;}
.product-card:nth-child(2) .product-mark{color:#6bdbff;filter:drop-shadow(0 5px 26px #6fdbffbb);}
.product-card:nth-child(3) .product-mark{color:#ffc183;filter:drop-shadow(0 5px 26px #ffd2879e);}
.product-card h3{font-size:clamp(24px,2.25vw,31px);line-height:1.16;letter-spacing:-.04em;margin:9px 0 12px;color:#fff;}
.product-card p {font-size:15px;color:#bccbe4;line-height:1.6;margin:0 0 20px;flex:1;}
.product-tags{display:flex;gap:7px;flex-wrap:wrap;margin:0 0 21px;}
.product-tags span{font-size:10px;font-weight:800;color:#c9d5ff;letter-spacing:.02em;border:1px solid #847db377;background:#22203c;border-radius:99px;padding:7px 9px;}
.product-cta{display:flex;align-items:center;justify-content:center;min-height:52px;border:1px solid #baa6ff8c;border-radius:11px;background:linear-gradient(100deg,#343670,#42214f);color:#f7eaff;text-decoration:none;font-weight:950;font-size:13px;letter-spacing:.025em;text-align:center;}
.product-card.first .product-cta{color:#100e22;border-color:#b9e1ff;background:linear-gradient(110deg,#75dcff,#ae9bff,#f896d2);}
.product-cta:hover{background:#a78cfa;color:#100e22;}
.product-roadmap{display:grid;grid-template-columns:1.2fr 1fr;gap:22px;padding:27px 30px;margin-top:28px;background:linear-gradient(110deg,#161a3a,#14243d);border:1px solid #6582b178;border-radius:18px;}
.product-roadmap h3{margin:6px 0 12px;font-size:clamp(23px,2.7vw,35px);line-height:1.2;letter-spacing:-.035em;}
.product-roadmap p{font-size:14px;color:#b9c7dd;line-height:1.6;margin:0;max-width:600px;}
.roadmap-pills{display:flex;flex-wrap:wrap;gap:9px;align-content:center;}
.roadmap-pills span{padding:11px 14px;color:#d5e0ff;background:#25284f;border:1px solid #8b84ca6c;border-radius:11px;font-size:13px;font-weight:800;}
@media(max-width:960px){.product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.product-roadmap{grid-template-columns:1fr}.product-card:nth-child(3){grid-column:span 2}}
@media(max-width:640px){.product-grid{grid-template-columns:1fr}.product-card:nth-child(3){grid-column:auto}.whatif-home .whatif-products{padding-top:62px;padding-bottom:64px}.product-card{padding:24px}.product-mark{height:78px;font-size:77px}.product-roadmap{padding:20px}.product-roadmap h3{font-size:27px}.product-roadmap .roadmap-pills span{font-size:12px}}
@media(prefers-reduced-motion:reduce){.product-card{transition:none;transform:none!important}}


/* Mobile review after testing the protected WHATIF preview on an Android phone:
   navigation gets a full-width second line, and purely decorative labels no
   longer obscure the example website or a call to action. */
@media(max-width:700px){
  .whatif-home header{
    display:flex;flex-direction:column;align-items:stretch;justify-content:center;
    gap:9px;padding:14px 17px 10px;
  }
  .whatif-home header .brand{font-size:27px;line-height:1.1;align-self:flex-start}
  .whatif-home header nav{
    display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
    gap:0;width:100%;align-items:stretch;border-top:1px solid #8d93cd43;
  }
  .whatif-home header nav a{
    display:flex;justify-content:center;min-width:0;padding:7px 1px;
    min-height:43px;white-space:nowrap;font-size:clamp(9px,2.25vw,12px);
    letter-spacing:0;line-height:1.25;
  }
  .whatif-hero .hero-proof{margin-bottom:25px;line-height:1.5;}
  .whatif-hero .hero-visual{min-height:385px;margin-top:10px;padding:0 5px;}
  .whatif-hero .float-chip{display:none;}
  .whatif-hero .mock-window{width:100%;max-width:490px;overflow:hidden;}
  .whatif-hero .mock-content{min-height:321px;padding:26px 24px 32px;}
  .whatif-hero .mock-heading{font-size:clamp(35px,8.2vw,44px);}
  .whatif-hero .mock-gem{width:140px;height:140px;right:-35px;bottom:-57px;opacity:.76;pointer-events:none;}
  .whatif-hero .mock-button{position:relative;z-index:2;}
  .whatif-hero .mock-url{font-size:9px;padding:4px 11px;}
  .whatif-hero .mock-top{padding:12px 13px;}
}
@media(max-width:360px){
  .whatif-home header nav a{font-size:9px;}
  .whatif-home .whatif-hero h1{font-size:43px;}
  .whatif-hero .mock-content{padding:23px 19px 31px;}
  .whatif-hero .mock-heading{font-size:35px;}
  .whatif-hero .mock-gem{width:112px;height:112px;bottom:-34px;right:-34px;}
}


/* Independent side-by-side research stays prominent without sending
   visitors off-site from the homepage or selling editorial placements. */
.whatif-home .whatif-comparisons {
  position:relative;isolation:isolate;
  padding-top:86px;padding-bottom:92px;
  background:radial-gradient(ellipse 800px 630px at 96% 0%,#3c2a8370,transparent 68%),
    radial-gradient(ellipse 700px 580px at 0% 95%,#0a52735d,transparent 69%),#090d20;
  border-top:1px solid #88a9f040;border-bottom:1px solid #9a91da3b;
}
.whatif-comparisons:before {
  content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;
  background-image:linear-gradient(#9ae0ff08 1px,transparent 1px),linear-gradient(90deg,#9ae0ff08 1px,transparent 1px);
  background-size:55px 55px;
}
.compare-head {max-width:840px;margin-bottom:31px;}
.compare-kicker {display:inline-flex;align-items:center;gap:10px;color:#8ce9ff;font-size:11px;font-weight:950;letter-spacing:.16em;}
.compare-kicker-dot {display:inline-block;flex:none;width:9px;height:9px;border-radius:50%;background:#75e5ff;box-shadow:0 0 0 5px #75e5ff1b,0 0 20px #75e5ff9c;}
.whatif-home .compare-head h2 {font-size:clamp(39px,5.5vw,74px);line-height:1.04;letter-spacing:-.058em;margin:16px 0;}
.compare-head h2 span {background:linear-gradient(105deg,#6fe4ff,#b0a0ff,#ff81d5);background-clip:text;-webkit-background-clip:text;color:transparent;}
.compare-head p {color:#cad1e9;font-size:clamp(16px,1.4vw,19px);line-height:1.68;max-width:790px;margin:0;}
.compare-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px;}
.compare-card {display:flex;flex-direction:column;min-width:0;min-height:265px;
  border-radius:19px;padding:24px 23px 22px;
  background:linear-gradient(143deg,#17223f,#11172f 71%,#21152f);
  border:1px solid #758ec07b;box-shadow:0 16px 40px #0307196b;
  transition:border-color .2s,transform .2s,box-shadow .2s;}
.compare-card:hover {border-color:#78dfff;transform:translateY(-4px);box-shadow:0 19px 51px #3c5dc63e;}
.compare-top {display:flex;align-items:center;justify-content:space-between;gap:12px;}
.compare-topic {font-size:10px;font-weight:950;letter-spacing:.14em;color:#81e6ff;}
.compare-symbol {font-size:25px;font-weight:950;color:#c5a5ff;line-height:1;filter:drop-shadow(0 2px 15px #ab85ff89);}
.compare-card h3 {font-size:clamp(23px,2.2vw,31px);font-weight:1000;line-height:1.17;letter-spacing:-.04em;color:#f8f8ff;margin:25px 0 12px;}
.compare-card h3 span {font-size:.67em;font-weight:850;letter-spacing:0;color:#b79aff;text-transform:uppercase;}
.compare-card p {color:#b5c7e0;font-size:14px;line-height:1.62;margin:0 0 24px;flex:1;}
.compare-card a {align-self:flex-start;display:inline-flex;align-items:center;gap:14px;
  color:#b0f2ff;font-size:12px;font-weight:950;letter-spacing:.04em;
  text-decoration:none;border-bottom:1px solid #81ddff8a;padding-bottom:6px;min-height:35px;}
.compare-card a:hover {color:white;border-color:#fff;}
.compare-card a span {font-size:18px;}
.compare-owned {background:radial-gradient(ellipse at 90% 13%,#935cff5c,transparent 58%),linear-gradient(145deg,#211a45,#14203b);border-color:#b08bffba;}
.compare-owned .compare-topic {color:#e2b5ff;}
.compare-owned a {color:#eac4ff;border-color:#bd95ff;}
.compare-disclosure {margin:24px 0 0;padding:17px 21px;border:1px solid #7d93bb69;border-radius:12px;background:#101931cf;color:#b1bfd9;font-size:13px;line-height:1.7;}
.compare-disclosure strong {color:#f5f5ff;}
@media(max-width:950px){.compare-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:620px){
  .whatif-home .whatif-comparisons{padding:57px 18px 65px;}
  .compare-kicker{font-size:9px;letter-spacing:.13em;line-height:1.5;}
  .whatif-home .compare-head h2{font-size:clamp(38px,9.5vw,55px);}
  .compare-grid{grid-template-columns:1fr;gap:12px;}
  .compare-card{min-height:0;padding:21px;}
  .compare-card h3{margin:17px 0 10px;font-size:27px;}
  .compare-card p{margin-bottom:18px;}
  .compare-disclosure{padding:14px 16px;}
}
@media(prefers-reduced-motion:reduce){.compare-card{transition:none;transform:none!important;}}