:root {
  color-scheme:light;
  --ink:#112f51;
  --blue:#1769cf;
  --light:#edf5fc;
  --yellow:#ffe276;
  --muted:#51667b;
  --font:'Nunito Sans',Arial,sans-serif
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth
}
body {
  margin:0;
  color:var(--ink);
  background:#fff;
  font-family:var(--font);
  font-size:16px;
  line-height:1.6
}
h1,h2,h3,p,figure {
  margin:0
}
a {
  color:inherit;
  text-decoration:none
}
button {
  font:inherit
}
img,video {
  display:block;
  max-width:100%
}
a:focus-visible,button:focus-visible,summary:focus-visible {
  outline:3px solid #e05d00;
  outline-offset:5px
}
::selection {
  background:var(--yellow);
  color:var(--ink)
}
.skip-link {
  position:absolute;
  left:20px;
  top:-80px;
  z-index:20;
  padding:10px;
  background:#fff
}
.skip-link:focus {
  top:10px
}
.site-header {
  position:absolute;
  inset:0 0 auto;
  z-index:3;
  padding:28px 5%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px
}
.logo .logo-mark {
  display:none
}
.logo-word {
  font-size:39px;
  letter-spacing:-2px;
  font-weight:900;
  line-height:1
}
.site-nav,.header-tools,.languages {
  display:flex;
  align-items:center;
  gap:28px
}
.header-tools {
  gap:24px
}
.languages {
  font-size:12px;
  gap:9px
}
.languages a[aria-current] {
  font-weight:900;
  text-decoration:underline;
  text-underline-offset:5px
}
.button {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  min-height:52px;
  padding:13px 27px;
  border-radius:28px;
  font-size:16px;
  font-weight:800;
  background:var(--yellow);
  color:var(--ink);
  border:0;
  transition:background .15s
}
.button:hover {
  background:#ffcf38
}
.button.small {
  background:var(--ink);
  color:#fff;
  font-size:13px;
  min-height:42px;
  padding:10px 22px
}
.button.small:hover {
  background:var(--blue)
}
.hero {
  position:relative;
  min-height:850px;
  height:100svh;
  max-height:1100px;
  display:flex;
  align-items:flex-start;
  padding:155px 5% 100px;
  background:#afd2ed;
  overflow:hidden
}
.ski-day-photo {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 60%
}
.hero-content {
  position:relative;
  z-index:1;
  max-width:600px
}
.eyebrow {
  font-size:14px;
  font-weight:800;
  margin-bottom:24px
}
.hero h1 {
  font-size:clamp(58px,6.5vw,100px);
  font-weight:900;
  line-height:1.02;
  letter-spacing:-.055em
}
.hero h1 span {
  display:block
}
.hero-intro {
  max-width:355px;
  margin-top:26px
}
.lead {
  font-size:18px;
  line-height:1.55;
  font-weight:600
}
.hero-actions {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:24px;
  margin-top:27px
}
.text-link {
  font-size:13px;
  font-weight:800;
  text-decoration:underline;
  text-underline-offset:5px
}
.section {
  max-width:1260px;
  width:88%;
  margin:auto;
  padding:100px 0;
  scroll-margin-top:25px
}
.section-header {
  max-width:750px;
  margin:0 auto 50px;
  text-align:center
}
.section h2 {
  font-size:clamp(37px,4vw,58px);
  line-height:1.1;
  font-weight:900;
  letter-spacing:-.04em;
  text-wrap:balance
}
.section-lead {
  font-size:18px;
  line-height:1.65;
  color:var(--muted);
  margin-top:24px
}
.section-header .eyebrow {
  color:var(--blue);
  margin-bottom:16px
}
.grid.three {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:30px
}
.media-card {
  min-width:0
}
.media-card img {
  width:100%;
  aspect-ratio:1.3;
  object-fit:cover;
  border-radius:18px
}
.media-card-body {
  padding:22px 4px
}
.media-card h3 {
  font-size:23px;
  font-weight:900;
  letter-spacing:-.035em;
  line-height:1.2;
  margin-bottom:10px
}
.media-card p {
  font-size:16px;
  color:var(--muted)
}
.hero-visual {
  display:grid;
  grid-template-columns:1fr .8fr;
  gap:10%;
  align-items:center;
  margin-top:75px;
  background:var(--light);
  border-radius:32px;
  padding:55px 8%
}
.hero-visual .eyebrow {
  color:var(--blue);
  margin-bottom:18px
}
.hero-visual h2 {
  font-size:48px
}
.hero-collage {
  min-width:0
}
.hero-image {
  width:100%;
  border-radius:22px;
  aspect-ratio:976/1296;
  object-fit:contain;
  background:var(--ink)
}
.split {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8%;
  align-items:center
}
.split>* {
  min-width:0
}
#platform {
  padding-top:20px
}
.device-trust-note {
  margin-top:30px;
  font-size:14px
}
.device-trust-note strong {
  display:block;
  margin-bottom:5px
}
.device-trust-note span {
  color:var(--muted)
}
.platform-card img {
  width:100%;
  aspect-ratio:1.1;
  object-fit:cover;
  border-radius:50% 50% 24px 24px
}
.platform-card figcaption {
  text-align:center;
  font-size:13px;
  margin-top:14px
}
.offpiste-media video {
  width:100%;
  aspect-ratio:1;
  object-fit:cover;
  border-radius:22px
}
#offpiste {
  padding:60px 0 100px
}
.offpiste-text h2 {
  max-width:12ch
}
.feature-group {
  border-bottom:1px solid #d9e3eb
}
.feature-group:first-of-type {
  border-top:1px solid #d9e3eb
}
.feature-group summary {
  list-style:none;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:25px;
  cursor:pointer;
  padding:25px 0;
  font-size:21px;
  font-weight:800
}
.feature-group summary::-webkit-details-marker {
  display:none
}
.expand-mark {
  color:var(--blue);
  font-size:26px;
  line-height:1
}
.feature-group[open] .expand-mark {
  transform:rotate(45deg)
}
.feature-lines {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px 45px;
  list-style:none;
  margin:0;
  padding:10px 0 32px
}
.feature-title {
  display:block;
  font-size:16px;
  margin-bottom:8px
}
.feature-desc {
  font-size:15px;
  color:var(--muted)
}
#features {
  padding-top:20px;
  max-width:950px
}
.waitlist {
  width:100%;
  max-width:none;
  background:var(--yellow);
  padding:75px 8%;
  text-align:center
}
.waitlist-card {
  max-width:750px;
  margin:auto
}
.waitlist-card .eyebrow {
  margin-bottom:15px
}
.waitlist-card h2 {
  font-size:58px
}
.waitlist-card .section-lead {
  color:var(--ink);
  max-width:550px;
  margin:24px auto 0
}
.waitlist-actions {
  margin-top:28px
}
.waitlist-actions .button {
  background:var(--ink);
  color:white
}
.waitlist-actions .button:hover {
  background:var(--blue)
}
.fine-print {
  font-size:11px;
  font-weight:800;
  letter-spacing:.03em;
  margin-top:16px
}
.site-footer {
  padding:55px 6% 30px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:25px;
  flex-wrap:wrap
}
.footer-word {
  flex-basis:100%;
  text-align:center;
  font-size:40px;
  font-weight:900;
  letter-spacing:-.05em;
  margin-bottom:35px
}
.footer-brand,.footer-meta {
  display:flex;
  align-items:center;
  gap:15px;
  font-size:12px
}
.footer-brand .logo-mark {
  width:28px;
  height:28px
}
.footer-link {
  text-decoration:underline;
  text-underline-offset:4px
}
@media(min-width:1650px) {
  .hero {
    padding-top:180px
  }
  .hero-content {
    margin-left:3%
  }
  .hero-intro {
    max-width:430px
  }
  .lead {
    font-size:21px
  }
}
@media(max-width:1000px) {
  .site-header {
    gap:15px
  }
  .header-tools {
    gap:16px
  }
  .hero {
    min-height:780px;
    height:90svh;
    padding-top:140px
  }
  .hero h1 {
    font-size:70px
  }
  .hero-content {
    max-width:500px
  }
  .ski-day-photo {
    object-position:60% center
  }
  .grid.three {
    gap:20px
  }
  .media-card h3 {
    font-size:20px
  }
  .hero-visual {
    padding:40px 5%;
    gap:6%
  }
  .hero-visual h2 {
    font-size:40px
  }
  .section {
    padding-block:75px
  }
  .split {
    gap:6%
  }
}
@media(max-width:700px) {
  .site-header {
    padding:20px 5%;
    flex-wrap:wrap;
    gap:20px
  }
  .logo-word {
    font-size:32px
  }
  .header-tools {
    gap:14px
  }
  .button.small {
    min-height:36px;
    font-size:11px;
    padding:8px 15px
  }
  .hero {
    min-height:920px;
    height:110svh;
    max-height:1150px;
    padding:145px 6% 40px
  }
  .ski-day-photo {
    object-position:66% bottom
  }
  .hero-content {
    max-width:100%
  }
  .hero .eyebrow {
    font-size:12px;
    margin-bottom:22px
  }
  .hero h1 {
    font-size:clamp(46px,12vw,76px);
    letter-spacing:-.05em
  }
  .hero-intro {
    max-width:290px;
    margin-top:22px
  }
  .lead {
    font-size:16px;
    line-height:1.55
  }
  .hero-actions {
    gap:18px;
    margin-top:23px
  }
  .button {
    font-size:15px;
    padding:12px 24px
  }
  .text-link {
    font-size:12px
  }
  .section {
    width:88%;
    padding:60px 0
  }
  .section-header {
    margin-bottom:35px
  }
  .section h2 {
    font-size:37px
  }
  .section-lead {
    font-size:16px;
    margin-top:18px
  }
  .grid.three {
    grid-template-columns:1fr;
    gap:24px
  }
  .media-card img {
    aspect-ratio:1.4;
    border-radius:16px
  }
  .media-card h3 {
    font-size:24px
  }
  .media-card-body {
    padding:18px 2px
  }
  .hero-visual {
    grid-template-columns:1fr;
    gap:28px;
    padding:30px 22px;
    margin-top:35px;
    border-radius:24px
  }
  .hero-visual h2 {
    font-size:35px
  }
  .hero-image {
    max-height:65svh;
    object-fit:contain;
    background:#112f51
  }
  .hero-collage {
    max-width:340px;
    width:100%;
    margin:auto
  }
  .split {
    grid-template-columns:1fr;
    gap:35px
  }
  #platform {
    padding-top:0
  }
  .platform-card img {
    aspect-ratio:1
  }
  .offpiste-text h2 {
    max-width:none
  }
  #offpiste {
    padding:15px 0 55px
  }
  .feature-lines {
    grid-template-columns:1fr;
    gap:23px
  }
  .feature-group summary {
    font-size:18px;
    padding-block:22px
  }
  .waitlist {
    width:100%;
    padding:55px 7%
  }
  .waitlist-card h2 {
    font-size:39px
  }
  .footer-word {
    font-size:32px;
    margin-bottom:15px
  }
  .site-footer {
    padding:40px 6% 30px
  }
  .footer-meta {
    flex-wrap:wrap;
    gap:12px
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*::before,*::after {
    transition:none!important
  }
}
@media(max-width:700px) {
  .hero {
    min-height:1020px
  }
}

.hero-actions .text-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 13px 22px;
  border-radius: 28px;
  background: #fff;
  color: var(--ink);
  font-size: 14px;
  text-decoration: none;
}
.hero-actions .text-link:hover {
  background: var(--light);
}
.hero-actions {
  gap: 14px;
}