/* The full-width Gnisti world with live prices above the fold. */
.compact-hero{min-height:680px;background:var(--forest);overflow:hidden}
.compact-hero::before{display:none}
.compact-world{position:absolute;inset:0;width:100%;height:100%;max-width:none;aspect-ratio:auto;margin:0;border-radius:0;mask-image:none}
.compact-world picture{display:block;width:100%;height:100%}
.compact-world .world-scene{position:static;width:100%;height:100%;max-width:none;min-height:0;object-fit:cover;object-position:30% center;translate:none}
.compact-world::after{background:linear-gradient(to bottom,transparent 80%,#05342c55 92%,var(--forest) 100%)}
.compact-hero-shell{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-content:center;width:50%;min-height:680px;margin:0 0 0 auto;padding:25px clamp(28px,4vw,70px) 40px 14px}
.compact-hero .hero-branding{margin:0;padding:0;max-width:none;background:transparent}
.compact-hero .hero-logo{width:min(90%,370px);height:auto;mask-image:none;filter:drop-shadow(0 3px 3px #17382c55)}
.compact-hero .resources{gap:30px;margin-top:10px}
.compact-hero .utility-icon{width:50px;height:50px}
.compact-hero .resource{font-size:15px;line-height:1.1;color:var(--forest)}
.compact-hero h1{font:500 clamp(24px,2.05vw,31px)/1.18 var(--display);letter-spacing:-.02em;text-align:center;margin:15px auto 0;max-width:480px;color:#103e36;text-wrap:balance}
.compact-hero h1 a{font-weight:600;white-space:nowrap}
.compact-hero h1 a:hover{text-decoration:underline;text-underline-offset:4px}
.compact-hero .hero-splash{width:clamp(108px,10vw,150px);font-size:clamp(13px,1.3vw,19px);gap:5px;top:24px;left:24px}
.compact-hero .hero-splash strong{font-size:1.3em;letter-spacing:.04em}
.compact-prices{display:block;min-width:0;min-height:0;width:100%;max-width:none;padding:0;margin:0}
.compact-prices .app-showcase{padding:0;perspective:none}
.compact-prices .price-regions{margin:0 auto 10px;width:150px;padding:3px;background:#174f42}
.compact-prices .price-regions button{min-height:36px;padding:6px 12px;color:#dcebd4;font-size:16px}
.compact-prices .price-regions button[aria-pressed=true]{background:#ffda63;color:#163e30;box-shadow:none}
.compact-prices .live-price-card{max-width:none;box-shadow:0 5px 0 #02271f33,0 14px 30px #001c2420}
.front-saving-advice{max-width:1320px;margin:auto;padding:75px 6vw 70px}
.compact-home .history-section{padding-top:50px}
.history-resources{margin-top:25px;gap:30px}
.history-resources .utility-icon{width:56px;height:56px}
.history-resources .resource{color:var(--ink);font-size:18px}
.release-kicker{font-size:14px;font-weight:900;letter-spacing:.12em;color:var(--yellow);margin-bottom:18px}
.release-copy{font-size:18px;font-weight:600;line-height:1.6;color:#c6ddc3;max-width:420px;margin-top:24px}
@media(min-width:1500px){.compact-hero,.compact-hero-shell{min-height:790px}.compact-hero-shell{width:48%;padding-right:max(70px,calc((100vw - 1440px)/2));padding-left:0}}
@media(max-width:1100px) and (min-width:901px){.compact-hero-shell{width:52%;padding-inline:12px 30px}.compact-hero .hero-logo{max-width:300px}.compact-hero .resources{margin-top:6px}.compact-hero h1{font-size:25px}}
@media(max-width:900px){
 .compact-hero{min-height:0}
 .compact-world{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:4/2.7}
 .compact-world picture{height:auto}
 .compact-world .world-scene{width:100%;height:auto;max-width:100%;min-height:0;object-fit:cover;object-position:center top}
 .compact-world::after{background:linear-gradient(to bottom,transparent 67%,#05342c66 82%,var(--forest) 100%)}
 .compact-hero-shell{width:100%;min-height:0;max-width:640px;margin:-4vw auto 0;gap:18px;padding:0 20px 32px}
 .compact-hero .hero-logo{width:245px}
 .compact-hero .resources{gap:25px;margin-top:11px}
 .compact-hero .utility-icon{width:42px;height:42px}
 .compact-hero .resource{font-size:14px;color:#d7e6c9}
 .compact-hero h1{font-size:25px;line-height:1.16;margin-top:17px;max-width:450px;color:#fff3d5}
 .compact-hero h1 a{color:var(--yellow)}
 .compact-hero .hero-splash{width:110px;font-size:13px;top:16px;left:16px;gap:4px}
 .compact-hero .hero-splash strong{font-size:18px}
 .front-saving-advice{padding:50px 24px;gap:28px}
 .compact-home .history-section{padding-top:25px}
 .release-copy{font-size:17px;margin-top:20px}
}
@media(max-width:600px){.history-resources{margin-top:22px;gap:28px}.history-resources .utility-icon{width:50px;height:50px}.history-resources .resource{font-size:16px}.compact-hero .hero-logo{width:220px}.compact-hero h1{font-size:23px}}
@media(max-width:360px){.compact-hero-shell{padding-inline:14px;gap:16px}.compact-hero .hero-logo{width:195px}.compact-hero h1{font-size:22px}.compact-hero .hero-splash{width:88px;font-size:10px}.compact-hero .hero-splash strong{font-size:15px}}

/* A compact footer, with the homepage mascot and the transparent wordmark. */
.compact-home footer{position:relative;margin-top:-2px;gap:10px;padding:18px 20px 28px}
.footer-identity{display:flex;flex-direction:column;align-items:center;gap:0}
.footer-mascot{display:block;width:112px;height:146px;object-fit:contain}
.footer-logo{display:block;width:142px;height:auto;margin-top:-12px;filter:drop-shadow(0 2px 3px #001c2470)}
.compact-home .footer-social{gap:10px;margin:0}
.compact-home .footer-social a{width:40px;height:40px}
.compact-home .footer-social svg{width:21px;height:21px}
.footer-details{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;font-size:13px;line-height:1.5}
.footer-details>*{white-space:nowrap}
.footer-details .footer-copyright{font-size:inherit}
.footer-details a:hover{color:var(--yellow)}
@media(min-width:1000px){
 .compact-home .beta{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);padding:75px clamp(26px,6vw,88px) 70px;max-width:1480px}
 .compact-home .beta-copy{min-width:0}
 .compact-home .beta-copy h2{font-size:clamp(40px,4.2vw,64px);white-space:nowrap}
 .compact-home .release-copy{max-width:none;font-size:clamp(16px,1.3vw,18px);margin-top:20px;text-wrap:pretty}
}
@media(max-width:600px){
 .compact-home footer{padding:12px 14px 28px;gap:10px}
 .footer-mascot{width:88px;height:116px}
 .footer-logo{width:122px;margin-top:-10px}
 .footer-details{gap:12px;font-size:11px}
}
@media(max-width:360px){.footer-details{gap:8px;font-size:10px}}

/* The mascot opens the entire page in the browser's native fullscreen mode. */
.hero-fullscreen{position:absolute;z-index:2;left:5%;top:3%;width:41%;height:84%;padding:0;border:0;border-radius:45%;background:transparent;cursor:zoom-in;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.hero-fullscreen:focus-visible{outline:3px dashed var(--yellow);outline-offset:-5px}
.hero-fullscreen[aria-pressed=true]{cursor:zoom-out}
.fullscreen-exit{position:fixed;z-index:100;top:max(16px,env(safe-area-inset-top));right:max(16px,env(safe-area-inset-right));display:flex;align-items:center;gap:8px;border:1px solid #c8d6bf;border-radius:24px;padding:10px 16px;background:#f4f9ebf5;color:var(--forest);font:800 14px/1.2 var(--body);box-shadow:0 3px 12px #001c2420}
.fullscreen-exit span{font-size:24px;line-height:1}
.fullscreen-status{position:fixed;z-index:101;bottom:64px;left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100% - 36px);padding:14px 20px;border-radius:16px;background:var(--forest);color:var(--paper);font:700 15px/1.4 var(--body);text-align:center;box-shadow:0 4px 18px #001c2440}
.hero-fullscreen[hidden],.fullscreen-exit[hidden],.fullscreen-status[hidden]{display:none}
html:fullscreen{overflow-y:auto;background:var(--forest)}
html:-webkit-full-screen{overflow-y:auto;background:var(--forest)}
@media(max-width:900px){.hero-fullscreen{left:28%;top:3%;width:43%;height:80%}}