.home-shell,.how-shell{grid-template-rows:auto 1fr auto;min-height:100svh;display:grid}.home-shell>*,.how-shell>*{min-width:0}.home-shell>main{align-items:center;display:grid}.home-shell>.footer,.how-shell>.footer{flex-flow:wrap;align-items:center;gap:4px 10px;padding-block:4px}.hero.feature-hero{justify-content:center;width:100%;max-width:1200px;min-height:0;margin:auto;padding:12px 24px}.hero.feature-hero h1{font-size:clamp(2.5rem, calc(4vw * var(--text-scale,1)), 4rem);text-wrap:balance;overflow-wrap:anywhere;max-width:18ch;margin:4px auto 10px;line-height:1.08}.hero.feature-hero .hero-description{color:#d1c6df;text-wrap:pretty;max-width:880px;margin:0 0 12px;font-size:1rem;line-height:1.45}.feature-hero .hero-note{flex-wrap:wrap;margin-top:8px;font-size:.9375rem}.feature-hero .hero-pill{margin-bottom:4px;padding:2px 10px;font-size:.9375rem}.hero.feature-hero>.button{min-height:44px;padding-block:10px;font-size:1rem}.hero-features{text-align:left;grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr) 24px minmax(0,1fr);gap:8px;width:100%;margin-top:16px;display:grid}.hero-feature{background:#17101fdf;border:1px solid #453656;border-radius:20px;min-width:0}.hero-feature>a{color:var(--ink);border-radius:inherit;flex-direction:column;height:100%;padding:12px 14px;text-decoration:none;display:flex}.hero-feature>a:hover{background:#24192f}.hero-feature>a:focus-visible{outline-offset:-4px}.hero-feature>a>div:last-child{flex-direction:column;flex:1;align-items:flex-start;display:flex}.hero-feature h2{text-wrap:balance;margin:8px 0 0;font-size:1.125rem;line-height:1.25}.hero .hero-feature p{color:#c1b6d0;margin:8px 0 12px;font-size:1rem;line-height:1.4}.hero-feature .future-label,.marketing-how .future-label{font-size:.875rem;line-height:1.4}.feature-action{color:#dbc5ff;align-items:center;gap:6px;margin-top:auto;font-size:1rem;display:inline-flex}.feature-action svg{flex-shrink:0}.hero-how{align-items:center;min-height:44px;margin-top:4px;font-size:1rem;display:inline-flex}.marketing-visual{background:radial-gradient(at top,#48226444,#141018);border:1px solid #473455;border-radius:14px;flex-direction:column;justify-content:center;gap:8px;min-width:0;min-height:110px;margin-bottom:10px;padding:8px;display:flex}.marketing-sources{flex-wrap:wrap;justify-content:center;gap:10px;display:flex}.hero-feature .marketing-visual{min-height:104px;padding:10px}.marketing-source{background:#241c2e;border:1px solid #604377;border-radius:12px;align-items:center;gap:8px;padding:6px 8px;font-size:.9375rem;font-weight:600;display:inline-flex}.marketing-source img{filter:invert();flex-shrink:0;width:28px;height:28px}.marketing-source:last-child img{filter:invert(79%)sepia(22%)saturate(959%)hue-rotate(316deg)brightness(96%)}.marketing-summary-path,.marketing-game-caption{color:#d8c8ed;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;font-size:.9375rem;display:flex}.marketing-summary-path>span{align-items:center;gap:6px;display:inline-flex}.marketing-summary-path>svg{flex-shrink:0}.marketing-profile-chip{border-bottom:1px solid #9b79c5;padding-bottom:3px}.marketing-visual-games{gap:4px;padding:8px 10px 12px}.marketing-draft-preview{width:100%}.marketing-draft-preview img{object-fit:contain;width:100%;height:72px;display:block}.marketing-offer-preview{background:#2c1e39;border:1px dashed #9270b4;border-radius:12px;align-items:center;gap:12px;padding:8px;display:flex}.marketing-offer-preview>svg{color:#d8bbff;flex-shrink:0}.marketing-offer-preview>div{flex-direction:column;gap:6px;display:flex}.marketing-offer-preview strong{font-size:1rem;font-weight:600;line-height:1.4}.marketing-offer-label{color:#ccb6e5;font-size:.875rem}.feature-progression{color:#c5a4f3;align-self:center;width:24px;height:24px}.how-shell .how-page{overflow-wrap:anywhere;align-self:center;max-width:1100px;min-height:0;padding-block:12px}.how-shell .how-page>h1{max-width:none;margin-bottom:6px;font-size:clamp(1.5rem,3vw,2.125rem)}.how-shell .how-intro{margin:4px 0 8px;font-size:1rem}.marketing-how .visual-carousel{max-width:none;margin:8px auto}.marketing-how .carousel-slide{grid-template-columns:minmax(180px,.7fr) minmax(0,1.7fr);gap:0 20px;padding:18px;display:grid}.marketing-how .carousel-visual{grid-row:span 2;align-self:center;min-width:0;margin:0}.marketing-how .carousel-visual .marketing-source{max-width:100%}.marketing-how .carousel-visual .marketing-source img{object-fit:contain;border-radius:0;width:28px;max-width:28px;height:28px;max-height:28px}.marketing-how .marketing-visual{max-width:100%;min-height:120px;margin:0 auto;padding:10px}.marketing-how .marketing-draft-preview img{height:120px}.marketing-how .carousel-body{font-size:1rem;line-height:1.45}.marketing-how .carousel-slide h2{font-size:clamp(1.375rem, calc(3vw * var(--text-scale,1)), 1.875rem);line-height:1.3}.marketing-how .carousel-progress{font-size:.9375rem}.marketing-how .carousel-navigation{flex-wrap:wrap;gap:12px;margin-top:10px}.marketing-how .carousel-navigation .button{white-space:normal;text-align:center;min-height:44px;font-size:1rem}@media (min-width:881px) and (max-height:800px){.hero.feature-hero{padding-block:6px}.hero.feature-hero h1{font-size:clamp(2.25rem, calc(2.8vw * var(--text-scale,1)), 3rem)}.hero .hero-feature p{margin-block:6px 8px}.hero-features{margin-top:10px}.hero-feature .marketing-visual{min-height:96px;margin-bottom:4px}.hero-feature .marketing-draft-preview img{height:64px}}@media (max-width:880px){.hero-features{grid-template-columns:1fr}.feature-progression{justify-self:center;transform:rotate(90deg)}.hero-feature>a{grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr);align-items:center;gap:20px;display:grid}.hero-feature .marketing-visual{margin:0}}@media (max-width:620px){.home-shell .header,.how-shell .header{gap:6px;padding:6px 12px}.home-shell .header .wordmark,.how-shell .header .wordmark{letter-spacing:-.5px;gap:6px;font-size:1.3125rem}.home-shell .nav,.how-shell .nav{gap:8px;max-width:100%}.home-shell .nav .login-button,.how-shell .nav .login-button{min-height:44px;padding:8px 12px}.home-shell>.footer,.how-shell>.footer{padding-inline:12px}.how-shell .how-page{padding:8px 12px}.how-shell .how-page>h1{margin-top:0}.hero.feature-hero{min-height:auto;padding:16px}.hero.feature-hero h1{font-size:clamp(2.5rem, calc(10vw * var(--text-scale,1)), 3.5rem);margin-bottom:10px}.hero-features{gap:8px;margin-top:18px}.hero-feature>a{align-items:stretch;gap:8px;padding:14px;display:flex}.hero-feature h2{font-size:1.125rem}.marketing-visual{min-height:96px}.marketing-how .marketing-visual{gap:6px;min-height:84px;padding:8px}.marketing-how .carousel-slide{padding:12px;display:block}.marketing-how .carousel-visual{margin-bottom:10px}.marketing-how .marketing-draft-preview img{height:74px}.marketing-how .carousel-slide h2{margin-bottom:8px;font-size:1.25rem}.marketing-how .carousel-body{line-height:1.35}.marketing-how .carousel-navigation .button{flex:auto}}