/* The supplied artwork stays intact. The window only removes empty margins. */
.brand-uploaded{display:block;flex:none;width:268px;line-height:1}
.logo-crop{display:block;position:relative;width:100%;aspect-ratio:1440 / 400;overflow:hidden}
.brand-uploaded .logo-crop img{position:absolute;left:-8.333333%;top:-73.5%;width:116.041667%;max-width:none;height:auto;filter:none}
.logo-caption{position:absolute;left:46.5%;bottom:0;color:#102955;font-family:var(--font-body);font-size:8.5px;font-weight:600;line-height:1.3;letter-spacing:.07em;text-transform:uppercase;white-space:nowrap}
.brand-uploaded.brand-footer{width:224px}
.brand-footer .logo-caption{font-size:7.3px}
.hero h1{font-size:49px;line-height:1.17;margin-bottom:24px;letter-spacing:-.035em}
.hero h1 .happ-word{color:#0868d9;font-family:VortexBrand,var(--font-display);font-weight:800;letter-spacing:-.04em}
.hero-description{max-width:475px}
@media(max-width:1100px){.brand-uploaded{width:238px}.logo-caption{font-size:7.5px}.hero h1{font-size:43px}}
@media(max-width:850px){.brand-uploaded{width:228px}.hero h1{font-size:36px}}
@media(max-width:580px){.brand-uploaded{width:176px}.logo-caption{font-size:5.8px;letter-spacing:.045em}.header-inner{gap:8px}.hero h1{font-size:36px;line-height:1.2;letter-spacing:-.04em}.hero .eyebrow{font-size:8px;max-width:300px}.hero-description{font-size:14px}.hero-actions{gap:18px}.hero-points{column-gap:14px}.brand-uploaded.brand-footer{width:200px}.brand-footer .logo-caption{font-size:6.6px}}
@media(max-width:365px){.brand-uploaded{width:154px}.logo-caption{font-size:5.1px}.hero h1{font-size:32px}}

/* A softer typeface for the Happ introduction; the supplied logo is unchanged. */
:root{--font-body:Onest,Arial,sans-serif;--font-display:Onest,Arial,sans-serif}
.hero-copy{min-width:0}
.hero h1{font-family:Onest,Arial,sans-serif;font-weight:650;font-size:44px;line-height:1.2;letter-spacing:-.038em}
.hero h1 .happ-word{font-family:inherit;font-weight:700;letter-spacing:inherit;color:#0868d9}
.device-badge{display:inline-flex;align-items:center;gap:9px;border:1px solid #a7cbe288;background:#dfeef833;padding:7px 13px;border-radius:99px;color:#365572;font-size:12px;font-weight:550;margin-bottom:23px}
.hero-description{font-size:15px;line-height:1.7;color:#455f79;max-width:485px}
.hero-actions{gap:22px;align-items:center;margin-top:24px;margin-bottom:20px}
.hero-access{display:flex;flex-direction:column;line-height:1.55;font-size:11px;color:#5b7389}
.hero-access strong{font-weight:600;color:#244464}
.hero-lte{display:flex;gap:12px;align-items:center;max-width:480px;padding:12px 14px;border:1px solid #82b7dd85;border-radius:14px;background:linear-gradient(110deg,#d7edfc6b,#ebf6ff20);color:#294d70}
.lte-label{flex:none;display:grid;place-items:center;border:1px solid #81b8e4;background:#deeffc;color:#1161c2;border-radius:10px;width:40px;height:40px;font-size:13px;font-weight:650;letter-spacing:.04em}
.hero-lte strong{display:block;font-size:12px;line-height:1.5;font-weight:600}
.hero-lte small{display:block;font-size:10px;line-height:1.6;color:#4b6983;margin-top:2px}
.hero-lte:hover{border-color:#1582cd;background:#e4f3fd88}
.hero-points{font-size:10px;gap:15px;flex-wrap:wrap;margin-top:20px;line-height:1.7}
@media(max-width:1100px){.hero h1{font-size:40px}.hero-points{gap:9px;font-size:9px}}
@media(min-width:581px) and (max-width:850px){.hero h1{font-size:33px}.hero-description{font-size:13px}.hero-actions{gap:13px}.hero-access{font-size:10px}.hero-lte{padding:10px}.hero-lte strong{font-size:11px}.hero-lte small{font-size:9px}}
@media(max-width:580px){.hero h1{font-size:33px;line-height:1.2;margin-bottom:18px}.device-badge{font-size:10px;padding:6px 11px;margin-bottom:18px}.hero-description{font-size:14px;line-height:1.7}.hero-actions{gap:17px;flex-wrap:nowrap;margin-top:22px;margin-bottom:18px}.hero-access{font-size:9px}.hero-lte{padding:11px;gap:10px}.hero-lte strong{font-size:11px}.hero-lte small{font-size:10px}.hero-points{gap:8px 13px;font-size:9px;margin-top:17px}}
@media(max-width:365px){.hero h1{font-size:30px}.hero-actions{gap:12px}.hero-access{font-size:8.5px}}
@media(max-width:580px){.hero-actions{flex-direction:column;align-items:flex-start;gap:11px}.hero-actions .button{white-space:nowrap}.hero-access{flex-direction:row;flex-wrap:wrap;gap:0 8px;font-size:9px}}