/* =========================================================
   Planina App marketing site
   Vanilla CSS. Tokens on :root, dark via prefers-color-scheme
   and an explicit .dark / .light class set before first paint.
   The season (season-winter / season-green, also set before first
   paint) moves a handful of the same tokens towards the sun.
   ========================================================= */

:root {
  /* Brand scale (pine) */
  --pine-50:  #F3F9F5;
  --pine-100: #E4F1E9;
  --pine-200: #C7E3D2;
  --pine-300: #9BCDB0;
  --pine-400: #63AC82;
  --pine-500: #3A7A52;
  --pine-600: #2D5F3E;
  --pine-700: #254E35;
  --pine-800: #1B4332;
  --pine-900: #143626;
  --pine-950: #0A2418;

  --sun: #FFD93D;

  /* Piste difficulty */
  --novice: #55B555;
  --easy:   #4A90D9;
  --inter:  #D94A4A;
  --expert: #1A1A1A;

  /* Semantic, light */
  --bg:        #FFFFFF;
  --bg-tint:   #F3F9F5;
  --surface:   #FFFFFF;
  --surface-2: #FFFFFF;
  --line:      rgba(10, 36, 24, .10);
  --line-soft: rgba(10, 36, 24, .06);
  --text:      #0A2418;
  --text-2:    rgba(10, 36, 24, .68);
  --text-3:    rgba(10, 36, 24, .52);
  --brand:     #1B4332;
  --brand-hi:  #2D5F3E;
  --on-brand:  #F3F9F5;
  --ring:      #2D5F3E;
  --shadow-lg: 0 30px 80px -32px rgba(10, 36, 24, .34);
  --shadow-md: 0 14px 40px -18px rgba(10, 36, 24, .22);
  --shadow-sm: 0 2px 10px -4px rgba(10, 36, 24, .18);
  --nav-bg:    rgba(255, 255, 255, .72);
  --snow:      rgba(99, 172, 130, .55);
  --leaf:      rgba(122, 170, 74, .6);
  --hero-sky:  radial-gradient(120% 90% at 78% -10%, rgba(199, 227, 210, .70), transparent 62%),
               radial-gradient(90% 70% at 8% 0%, rgba(255, 217, 61, .16), transparent 60%);

  --font-display: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;

  color-scheme: light;
}

/* Dark palette: system preference, unless the user explicitly chose light */
@media (prefers-color-scheme: dark) {
  :root:not(.light) {
    --bg:        #0B1410;
    --bg-tint:   #0F1D17;
    --surface:   #13241D;
    --surface-2: #172A22;
    --line:      rgba(227, 241, 233, .12);
    --line-soft: rgba(227, 241, 233, .07);
    --text:      #E4F1E9;
    --text-2:    rgba(228, 241, 233, .70);
    --text-3:    rgba(228, 241, 233, .52);
    --brand:     #63AC82;
    --brand-hi:  #9BCDB0;
    --on-brand:  #07130D;
    --ring:      #9BCDB0;
    --shadow-lg: 0 30px 80px -30px rgba(0, 0, 0, .8);
    --shadow-md: 0 14px 40px -18px rgba(0, 0, 0, .65);
    --shadow-sm: 0 2px 10px -4px rgba(0, 0, 0, .6);
    --nav-bg:    rgba(11, 20, 16, .72);
    --snow:      rgba(228, 241, 233, .6);
    --leaf:      rgba(155, 205, 176, .5);
    --hero-sky:  radial-gradient(120% 90% at 78% -10%, rgba(45, 95, 62, .55), transparent 62%),
                 radial-gradient(90% 70% at 8% 0%, rgba(255, 217, 61, .10), transparent 60%);
    color-scheme: dark;
  }
}

/* Dark palette: explicit toggle */
:root.dark {
  --bg:        #0B1410;
  --bg-tint:   #0F1D17;
  --surface:   #13241D;
  --surface-2: #172A22;
  --line:      rgba(227, 241, 233, .12);
  --line-soft: rgba(227, 241, 233, .07);
  --text:      #E4F1E9;
  --text-2:    rgba(228, 241, 233, .70);
  --text-3:    rgba(228, 241, 233, .52);
  --brand:     #63AC82;
  --brand-hi:  #9BCDB0;
  --on-brand:  #07130D;
  --ring:      #9BCDB0;
  --shadow-lg: 0 30px 80px -30px rgba(0, 0, 0, .8);
  --shadow-md: 0 14px 40px -18px rgba(0, 0, 0, .65);
  --shadow-sm: 0 2px 10px -4px rgba(0, 0, 0, .6);
  --nav-bg:    rgba(11, 20, 16, .72);
  --snow:      rgba(228, 241, 233, .6);
  --leaf:      rgba(155, 205, 176, .5);
  --hero-sky:  radial-gradient(120% 90% at 78% -10%, rgba(45, 95, 62, .55), transparent 62%),
               radial-gradient(90% 70% at 8% 0%, rgba(255, 217, 61, .10), transparent 60%);
  color-scheme: dark;
}

/* ---------- green season ----------
   The same palette walked a few steps towards the sun: a warmer tint, a
   lighter pine for the accents and a sunlit meadow instead of a snow sky.
   These blocks sit after the dark ones on purpose, so a green page in the
   dark theme still reads the dark values from .season-green.dark. */
:root.season-green {
  --bg-tint:   #F6F9F1;
  --leaf:      rgba(122, 170, 74, .6);
  --hero-sky:  radial-gradient(120% 90% at 78% -10%, rgba(199, 227, 210, .58), transparent 62%),
               radial-gradient(90% 70% at 8% 0%, rgba(255, 217, 61, .32), transparent 64%);
}

@media (prefers-color-scheme: dark) {
  :root.season-green:not(.light) {
    --bg-tint:   #111D14;
    --leaf:      rgba(178, 200, 120, .5);
    --hero-sky:  radial-gradient(120% 90% at 78% -10%, rgba(45, 95, 62, .62), transparent 62%),
                 radial-gradient(90% 70% at 8% 0%, rgba(255, 217, 61, .18), transparent 62%);
  }
}

:root.season-green.dark {
  --bg-tint:   #111D14;
  --leaf:      rgba(178, 200, 120, .5);
  --hero-sky:  radial-gradient(120% 90% at 78% -10%, rgba(45, 95, 62, .62), transparent 62%),
               radial-gradient(90% 70% at 8% 0%, rgba(255, 217, 61, .18), transparent 62%);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
[hidden] { display: none !important; }

/* A block tagged with data-season shows in that season only. With no season
   class on <html> (JavaScript off) the page reads as winter. */
:root:not(.season-green) [data-season="green"],
:root.season-green [data-season="winter"] { display: none; }

/* The season moves a few tokens; the fade keeps the change from snapping. */
body, .section--tint {
  transition: background-color .3s ease, color .3s ease;
}

h1, h2, h3 {
  font-family: var(--font-display);
  line-height: 1.1;
  letter-spacing: -.02em;
  margin: 0;
  font-weight: 800;
}

p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }

::selection { background: var(--pine-200); color: var(--pine-950); }
@media (prefers-color-scheme: dark) {
  :root:not(.light) ::selection { background: var(--pine-700); color: var(--pine-50); }
}
:root.dark ::selection { background: var(--pine-700); color: var(--pine-50); }

:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 3px;
  border-radius: 6px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--brand); color: var(--on-brand);
  padding: 10px 16px; border-radius: var(--r-sm); font-weight: 600;
  transition: top .2s ease;
}
.skip-link:focus { top: calc(env(safe-area-inset-top, 0px) + 12px); }

.wrap {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 40px);
}

/* ---------- nav ---------- */
.nav {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 60;
  background: var(--nav-bg);
  backdrop-filter: saturate(160%) blur(18px);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  padding-top: env(safe-area-inset-top, 0px);
  transition: box-shadow .3s ease, background .3s ease;
}
.nav.is-scrolled { box-shadow: 0 1px 0 var(--line), 0 12px 30px -24px rgba(10, 36, 24, .5); }

.nav__inner {
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 40px);
  height: 62px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand__mark { width: 32px; height: 32px; border-radius: 9px; }
.brand__name { font-family: var(--font-display); font-weight: 800; font-size: 1.06rem; letter-spacing: -.02em; }

.nav__links {
  display: none;
  margin-inline: auto;
  gap: 30px;
  font-size: .92rem;
  font-weight: 500;
  color: var(--text-2);
}
.nav__links a { transition: color .2s ease; }
.nav__links a:hover { color: var(--text); }

.nav__tools { display: flex; align-items: center; gap: 6px; margin-left: auto; }

.icon-btn {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-2);
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 12px;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
  font-family: inherit;
}
.icon-btn:hover { background: var(--line-soft); color: var(--text); }

.icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.icon--moon { display: none; }
:root.dark .icon--sun { display: none; }
:root.dark .icon--moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not(.light) .icon--sun { display: none; }
  :root:not(.light) .icon--moon { display: block; }
}

/* Snowflake / leaf segmented control, next to the theme button. */
.sseg {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 99px;
  border: 1px solid var(--line);
  background: var(--surface);
  flex: none;
}
.sseg button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text-3);
  font: inherit;
  display: grid;
  place-items: center;
  width: 28px; height: 24px;
  border-radius: 99px;
  cursor: pointer;
  transition: background .3s ease, color .3s ease;
}
.sseg button:hover { color: var(--text); }
.sseg button svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sseg button[aria-checked="true"] { background: var(--brand); color: var(--on-brand); }

/* The narrowest phones carry five controls in the header, so the segment
   gives a few pixels back and the language button keeps only its flag: the
   wordmark then sits at its full width and nothing is pushed into the gutter. */
@media (max-width: 400px) {
  .nav__tools { gap: 4px; }
  .sseg button { width: 24px; }
  .lang__btn .lang__code { display: none; }
}

.lang { position: relative; }
.lang__btn { width: auto; gap: 6px; padding-inline: 10px; }
.lang__code { font-size: .78rem; font-weight: 600; letter-spacing: .04em; }

/* Flags are small SVGs in assets/flags/, drawn at 3:2 and clipped to a soft
   corner so the tricolours do not read as bare stripes. */
.flag {
  display: inline-block;
  width: 20px;
  height: 14px;
  border-radius: 3px;
  box-shadow: 0 0 0 1px var(--line);
  flex: none;
  object-fit: cover;
  vertical-align: -2px;
}

.lang__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 150px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  padding: 6px;
  display: flex;
  flex-direction: column;
  transform-origin: top right;
  animation: menu-in .18s cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes menu-in { from { opacity: 0; transform: scale(.96) translateY(-4px); } }

.lang__menu button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text-2);
  font: inherit;
  font-size: .92rem;
  text-align: left;
  padding: 9px 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.lang__menu button { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.lang__menu button:hover { background: var(--line-soft); color: var(--text); }
.lang__menu button[aria-checked="true"] { color: var(--brand); font-weight: 600; }

.nav__burger { display: inline-flex; }

.nav__mobile {
  border-top: 1px solid var(--line-soft);
  padding: 10px clamp(16px, 4vw, 40px) 18px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--nav-bg);
}
.nav__mobile a {
  padding: 12px 4px;
  font-weight: 600;
  color: var(--text-2);
  border-bottom: 1px solid var(--line-soft);
}
.nav__mobile a:last-child { border-bottom: 0; color: var(--brand); }

@media (min-width: 900px) {
  .nav__links { display: flex; }
  .nav__burger { display: none; }
  .nav__mobile { display: none !important; }
  .nav__tools { margin-left: 0; }
}

/* ---------- typography helpers ---------- */
.eyebrow {
  font-family: var(--font-display);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 14px;
}
.eyebrow--sun { color: var(--sun); }

/* The season mark: one mask, two glyphs. A span where the text around it is
   translated at runtime, a ::before where the whole element is. */
:root:not(.season-green) { --season-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 2v20M3.3 7 20.7 17M20.7 7 3.3 17M12 6.6 8.8 4.7M12 6.6l3.2-1.9M12 17.4l-3.2 1.9M12 17.4l3.2 1.9M4.4 11.1 4.5 7.4M4.4 11.1 1.2 9.2M19.6 12.9l-.1 3.7M19.6 12.9l3.2 1.9M4.4 12.9 1.2 14.8M4.4 12.9l.1 3.7M19.6 11.1l3.2-1.9M19.6 11.1l-.1-3.7'/%3E%3C/svg%3E"); }
:root.season-green { --season-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M21 3C10.5 3.6 3 8 3 15.2 3 18.4 5.3 21 8.6 21c7.2 0 12.4-7.3 12.4-18zM6.4 18.2C8 13.6 11.4 10 16 7.7c-4.3 3.3-7.2 7.3-8.6 11.6z'/%3E%3C/svg%3E"); }

.seasonmark,
.eyebrow--season::before {
  content: '';
  display: inline-block;
  width: 13px;
  height: 13px;
  flex: none;
  background: currentColor;
  -webkit-mask: var(--season-glyph) center / contain no-repeat;
  mask: var(--season-glyph) center / contain no-repeat;
}
.eyebrow--season::before { margin-right: 8px; vertical-align: -1px; }

.lede { color: var(--text-2); font-size: 1.06rem; line-height: 1.65; }
.lede--center { max-width: 640px; margin-inline: auto; }

.grad {
  background: linear-gradient(105deg, var(--brand) 0%, var(--pine-400) 55%, var(--sun) 130%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* In the green season the title catches more sun. Only the image changes,
   so the clip and the transparent colour above still hold. */
:root.season-green .grad {
  background-image: linear-gradient(105deg, var(--brand) 0%, var(--pine-400) 42%, var(--sun) 108%);
}

.section { padding-block: clamp(64px, 9vw, 116px); }
.section--tint { background: var(--bg-tint); }

.sechead { text-align: center; max-width: 760px; margin: 0 auto clamp(40px, 5vw, 64px); }
.sechead h2 { font-size: clamp(1.75rem, 3.6vw, 2.7rem); margin-bottom: 16px; }

/* ---------- hero ---------- */
.hero {
  position: relative;
  padding-top: calc(env(safe-area-inset-top, 0px) + clamp(96px, 13vw, 150px));
  padding-bottom: clamp(56px, 8vw, 96px);
  overflow: hidden;
}
.hero__sky {
  position: absolute;
  inset: 0;
  background: var(--hero-sky);
  pointer-events: none;
}
.snow { position: absolute; inset: 0; overflow: hidden; }
.snowflake {
  position: absolute;
  top: -4%;
  border-radius: 50%;
  background: var(--snow);
  animation: snow-fall linear infinite;
  will-change: transform;
}
@keyframes snow-fall { to { transform: translate3d(var(--drift, 16px), 92vh, 0); } }

/* Green season: the same host, leaves instead of flakes. They fall slower
   and sway, so the hero reads as a meadow and not as a blizzard. */
.leaf {
  position: absolute;
  top: -6%;
  border-radius: 0 70% 0 70%;
  background: var(--leaf);
  animation: leaf-fall linear infinite;
  will-change: transform;
}
@keyframes leaf-fall {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg); }
  50%  { transform: translate3d(var(--drift, 16px), 46vh, 0) rotate(180deg); }
  100% { transform: translate3d(0, 92vh, 0) rotate(360deg); }
}

.hero__inner {
  position: relative;
  display: grid;
  gap: clamp(40px, 6vw, 64px);
  align-items: center;
}

.hero__title {
  font-size: clamp(2.3rem, 6.4vw, 4.1rem);
  margin-bottom: 20px;
}
.hero__title span { display: block; }

.hero__copy .lede { max-width: 540px; }
.hero__cta { margin-top: 30px; }
.hero__note { margin-top: 14px; font-size: .86rem; color: var(--text-3); }

.hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 26px;
  font-size: .85rem;
  color: var(--text-2);
}
.hero__chips li { display: inline-flex; align-items: center; gap: 8px; }
.dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.dot--novice { background: var(--novice); }
.dot--easy { background: var(--easy); }
.dot--inter { background: var(--inter); }

.hero__phones {
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (min-width: 980px) {
  .hero__inner { grid-template-columns: 1.02fr .98fr; }
}

/* ---------- phones ---------- */
.phone {
  position: relative;
  margin: 0;
  padding: 2.6%;
  /* Elliptical radii keep the corner circular while the frame scales. */
  border-radius: 13% / 5.9%;
  background: linear-gradient(160deg, #2a2f2c 0%, #0d100e 45%, #232825 100%);
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(0, 0, 0, .35);
  flex: none;
}
.phone::after {
  content: '';
  position: absolute;
  top: 2.4%; left: 50%;
  translate: -50% 0;
  width: 30%; height: 3.2%;
  min-height: 9px;
  background: #0a0c0b;
  border-radius: 99px;
  z-index: 2;
}
.phone img {
  width: 100%;
  height: auto;
  aspect-ratio: 1206 / 2622;
  object-fit: cover;
  border-radius: 11% / 5.05%;
  background: var(--bg-tint);
  color: var(--text-3);
  font-size: .7rem;
}

.phone--hero { width: min(56%, 268px); z-index: 3; }
.phone--side { width: min(42%, 202px); z-index: 1; }
.phone--left { transform: rotate(-7deg); margin-right: -8%; }
.phone--right { transform: rotate(7deg); margin-left: -8%; }

/* Keep all three inside the gutter on small screens. */
@media (max-width: 680px) {
  .phone--hero { width: 46%; }
  .phone--side { width: 30%; }
  .phone--left { margin-right: -6%; }
  .phone--right { margin-left: -6%; }
}

@keyframes floaty { from { translate: 0 0; } to { translate: 0 -12px; } }
.float { animation: floaty 6.5s ease-in-out infinite alternate; }
.float--slow { animation-duration: 8.5s; animation-delay: -1.5s; }
.float--fast { animation-duration: 5.5s; animation-delay: -.8s; }

/* ---------- mountains ---------- */
.mtns {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) { .mtns { grid-template-columns: repeat(3, 1fr); } }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 26px 24px;
  box-shadow: var(--shadow-sm);
  transition: transform .3s cubic-bezier(.16, 1, .3, 1), box-shadow .3s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.mtn h3 { font-size: 1.28rem; margin-bottom: 10px; }
.mtn p { color: var(--text-2); font-size: .95rem; }

.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: clamp(40px, 5vw, 62px);
  text-align: center;
}
@media (min-width: 720px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stats strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 4.5vw, 3rem);
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--brand);
  line-height: 1;
}
.stats span { display: block; margin-top: 8px; font-size: .84rem; color: var(--text-3); }

/* ---------- story sections ---------- */
.story__grid {
  display: grid;
  gap: clamp(36px, 6vw, 68px);
  align-items: center;
}
@media (min-width: 900px) {
  .story__grid { grid-template-columns: 1fr 1fr; }
  .story--flip .story__copy { order: 2; }
  .story--flip .story__shot { order: 1; }
}

.story__copy h2 { font-size: clamp(1.6rem, 3.2vw, 2.4rem); margin-bottom: 16px; }
.story__copy > p { color: var(--text-2); font-size: 1.02rem; }

.ticks { margin-top: 22px; display: flex; flex-direction: column; gap: 12px; }
.ticks li {
  position: relative;
  padding-left: 30px;
  font-size: .95rem;
  color: var(--text-2);
}
.ticks li::before {
  content: '';
  position: absolute;
  left: 0; top: .42em;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--brand);
  opacity: .16;
}
.ticks li::after {
  content: '';
  position: absolute;
  left: 5px; top: .72em;
  width: 6px; height: 3px;
  border-left: 1.8px solid var(--brand);
  border-bottom: 1.8px solid var(--brand);
  transform: rotate(-45deg);
}

.legend, .pills, .tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-top: 24px;
  font-size: .82rem;
  color: var(--text-3);
}
.legend li { display: inline-flex; align-items: center; gap: 8px; }
.swatch { width: 22px; height: 5px; border-radius: 99px; background: var(--c, var(--brand)); }
.swatch--dark { background: linear-gradient(90deg, #444 0%, var(--expert) 100%); }
:root.dark .swatch--dark { background: linear-gradient(90deg, #8d8d8d 0%, #2a2a2a 100%); }

.pill {
  padding: 5px 13px;
  border-radius: 99px;
  font-size: .78rem;
  font-weight: 600;
  border: 1px solid var(--line);
}
.pill--open { color: var(--novice); border-color: color-mix(in srgb, var(--novice) 45%, transparent); }
.pill--limited { color: #C98A17; border-color: color-mix(in srgb, var(--sun) 55%, transparent); }
.pill--closed { color: var(--inter); border-color: color-mix(in srgb, var(--inter) 45%, transparent); }

.tags li {
  padding: 6px 13px;
  border-radius: 99px;
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: .8rem;
  color: var(--text-2);
}

.story__shot { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(18px, 3vw, 26px); }
.shot__stage { display: flex; align-items: center; justify-content: center; width: 100%; }
.phone--pair-front { width: min(54%, 252px); z-index: 3; }
.phone--pair-back { width: min(45%, 210px); z-index: 1; transform: rotate(-6deg); margin-right: -9%; align-self: center; }
.story--flip .phone--pair-back { transform: rotate(6deg); margin-right: 0; margin-left: -9%; order: 2; }

/* ---------- screen slider ---------- */
/* Before app.js wraps them, the extra slides are plain children of the frame,
   so hide all but the first and the no-script page still reads as one screen. */
.phone--slider > img ~ img { display: none; }

.phone--slider { touch-action: pan-y; }
.slides { display: grid; }
.slides img { pointer-events: none; }
.slide {
  grid-area: 1 / 1;
  opacity: 0;
  translate: calc(var(--dir, 1) * 8px) 0;
  transition: opacity .35s ease, translate .35s ease;
}
.slide.is-active { opacity: 1; translate: 0 0; }
.slide.is-out { opacity: 0; translate: calc(var(--dir, 1) * -8px) 0; }

.shot__ctl { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
.shot__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }

.schip {
  appearance: none;
  font: inherit;
  font-size: .78rem;
  font-weight: 600;
  padding: 6px 13px;
  border-radius: 99px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text-2);
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.schip:hover { border-color: color-mix(in srgb, var(--brand) 45%, transparent); color: var(--text); }
.schip[aria-selected="true"] {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--on-brand);
}

.sdots { display: flex; align-items: center; gap: 6px; }
.sdot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--text-3);
  opacity: .32;
  transition: opacity .2s ease, background .2s ease;
}
.sdot.is-on { background: var(--brand); opacity: 1; }

/* ---------- coming soon ---------- */
.soon__list {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .soon__list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .soon__list { grid-template-columns: repeat(3, 1fr); } }

.soon__card { display: flex; flex-direction: column; align-items: flex-start; }
.soon__tag {
  display: inline-block;
  padding: 4px 11px;
  margin-bottom: 14px;
  border-radius: 99px;
  border: 1px dashed color-mix(in srgb, var(--brand) 45%, transparent);
  color: var(--brand);
  font-family: var(--font-display);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.soon__card h3 { font-size: 1.16rem; margin-bottom: 10px; }
.soon__card p { color: var(--text-2); font-size: .95rem; }

/* ---------- faq ---------- */
.faq__list {
  max-width: 800px;
  margin-inline: auto;
  border-top: 1px solid var(--line);
}
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px 4px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: -.01em;
  color: var(--text);
  transition: color .2s ease;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--brand); }
.faq__item summary:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: -2px;
  border-radius: 10px;
}
.faq__item summary::after {
  content: '';
  flex: none;
  width: 11px; height: 11px;
  margin-left: auto;
  margin-top: .38em;
  border-right: 2px solid var(--brand);
  border-bottom: 2px solid var(--brand);
  transform: rotate(45deg);
  transition: transform .25s cubic-bezier(.16, 1, .3, 1);
}
.faq__item[open] summary::after { transform: rotate(-135deg); }
.faq__item > p {
  padding: 0 40px 22px 4px;
  color: var(--text-2);
  font-size: .97rem;
  max-width: 68ch;
}

/* ---------- languages ---------- */
.langs__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 12px;
}
.langs__list li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px 10px 16px;
  border-radius: 99px;
  border: 1px solid var(--line);
  background: var(--surface);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .95rem;
  color: var(--text-2);
  box-shadow: var(--shadow-sm);
}

/* ---------- business ---------- */
.biz {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  background:
    radial-gradient(90% 120% at 100% 0%, rgba(255, 217, 61, .16), transparent 55%),
    linear-gradient(160deg, #143626 0%, #0A2418 100%);
  color: var(--pine-50);
  padding: clamp(32px, 5vw, 60px);
  box-shadow: var(--shadow-lg);
}
.biz__head { max-width: 640px; }
.biz__head h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); margin-bottom: 16px; }
.biz__head p { color: rgba(228, 241, 233, .72); font-size: 1.02rem; }
.biz__head .eyebrow--sun { color: var(--sun); }

.biz__cards {
  display: grid;
  gap: 18px;
  margin-top: clamp(30px, 4vw, 44px);
}
@media (min-width: 760px) { .biz__cards { grid-template-columns: 1fr 1fr; } }

.biz__card {
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--r-lg);
  padding: 26px 24px;
}
.biz__card h3 { font-size: 1.2rem; margin-bottom: 10px; color: var(--sun); }
.biz__card p { color: rgba(228, 241, 233, .72); font-size: .95rem; }

.ticks--light li { color: rgba(228, 241, 233, .78); }
.ticks--light li::before { background: var(--sun); opacity: .2; }
.ticks--light li::after { border-color: var(--sun); }

.biz__free { margin-top: 24px; font-size: .95rem; color: rgba(228, 241, 233, .78); max-width: 720px; }
.biz__mod { margin-top: 10px; font-size: .86rem; color: rgba(228, 241, 233, .55); }

.biz__cta { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; }
.biz__mail { font-size: .88rem; color: rgba(228, 241, 233, .6); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: 99px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .95rem;
  border: 0;
  cursor: pointer;
  transition: transform .2s cubic-bezier(.16, 1, .3, 1), filter .2s ease, box-shadow .2s ease;
}
.btn:hover { transform: translateY(-2px); filter: brightness(1.05); }
.btn:active { transform: translateY(0); }
.btn--sun { background: var(--sun); color: #2A2100; box-shadow: 0 12px 30px -14px rgba(255, 217, 61, .8); }
.btn--brand { background: var(--brand); color: var(--on-brand); }

/* ---------- store badges ---------- */
.stores { display: flex; flex-wrap: wrap; gap: 12px; }

.store {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 11px 20px 11px 17px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-sm);
  transition: transform .2s cubic-bezier(.16, 1, .3, 1), box-shadow .2s ease;
}
.store--live:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.store--soon { opacity: .58; cursor: default; }
.store svg { width: 24px; height: 24px; fill: currentColor; flex: none; }
.store__text { display: flex; flex-direction: column; line-height: 1.2; text-align: left; }
.store__small { font-size: .66rem; letter-spacing: .07em; text-transform: uppercase; color: var(--text-3); }
.store__big { font-family: var(--font-display); font-weight: 700; font-size: 1rem; letter-spacing: -.01em; }

/* ---------- get / waitlist ---------- */
.get__box { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.get .stores { justify-content: center; }

.waitlist {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  width: 100%;
  max-width: 460px;
  margin-inline: auto;
  position: relative;
}
.waitlist input {
  flex: 1 1 220px;
  min-width: 0;
  padding: 13px 18px;
  border-radius: 99px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: .95rem;
}
.waitlist input::placeholder { color: var(--text-3); }
.waitlist__msg { flex: 1 0 100%; text-align: center; font-size: .88rem; color: var(--text-2); min-height: 1.2em; }
.waitlist__msg:empty { min-height: 0; }
.waitlist__msg.is-error { color: var(--inter); }
.waitlist__msg.is-ok { color: var(--brand); font-weight: 600; }

.waitlist__note { flex: 1 0 100%; text-align: center; font-size: .86rem; color: var(--text-3); }
.waitlist__fine { flex: 1 0 100%; text-align: center; font-size: .78rem; color: var(--text-3); }
.waitlist__fine a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }

/* In the hero the form sits left, with the copy. */
.hero__cta .waitlist { justify-content: flex-start; margin-inline: 0; margin-bottom: 20px; }
.hero__cta .waitlist .waitlist__msg,
.hero__cta .waitlist .waitlist__note,
.hero__cta .waitlist .waitlist__fine { text-align: left; }

/* ---------- footer ---------- */
.foot {
  border-top: 1px solid var(--line);
  padding-block: clamp(36px, 5vw, 56px);
  padding-bottom: calc(clamp(36px, 5vw, 56px) + env(safe-area-inset-bottom, 0px));
  background: var(--bg);
}
.foot__inner {
  display: grid;
  gap: 28px;
}
@media (min-width: 780px) {
  .foot__inner { grid-template-columns: 1.6fr 1fr 1fr 1fr; align-items: start; }
  .foot__meta { text-align: right; }
}
.foot__brand p { margin-top: 12px; color: var(--text-3); font-size: .9rem; max-width: 320px; }
.foot__links { display: flex; flex-direction: column; gap: 10px; font-size: .92rem; color: var(--text-2); }
.foot__links a { transition: color .2s ease; }
.foot__links a:hover { color: var(--text); }
.foot__meta { font-size: .84rem; color: var(--text-3); display: flex; flex-direction: column; gap: 8px; }

/* ---------- sub-pages (privacy, terms, status) ----------
   Shared prose column. A sub-page uses the same nav and footer as index.html
   and wraps its body in <main class="page"><div class="page__inner">. */
.page {
  padding-top: calc(env(safe-area-inset-top, 0px) + clamp(92px, 11vw, 130px));
  padding-bottom: clamp(56px, 8vw, 96px);
}
.page__inner {
  width: 100%;
  max-width: 760px;
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 40px);
}

.page h1 {
  font-size: clamp(1.9rem, 4.4vw, 2.8rem);
  margin-bottom: 16px;
}
.page h2 {
  font-size: clamp(1.25rem, 2.6vw, 1.6rem);
  margin-top: clamp(34px, 4vw, 48px);
  margin-bottom: 12px;
}
.page h3 {
  font-size: 1.08rem;
  margin-top: 26px;
  margin-bottom: 8px;
}
.page p { color: var(--text-2); margin-bottom: 14px; }
.page p:last-child { margin-bottom: 0; }
.page a:not(.brand):not(.btn) {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.page strong { color: var(--text); font-weight: 600; }
.page code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .88em;
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--bg-tint);
  border: 1px solid var(--line-soft);
}

.page ul, .page ol {
  margin: 0 0 16px;
  padding-left: 22px;
  color: var(--text-2);
  list-style: disc;
}
.page ol { list-style: decimal; }
.page li { margin-bottom: 8px; }

.page-meta {
  font-size: .86rem;
  color: var(--text-3);
  margin-bottom: clamp(28px, 4vw, 40px);
}

.page table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
  font-size: .93rem;
}
.page table th, .page table td {
  text-align: left;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.page table th {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-3);
  border-bottom-color: var(--line);
}
.page table td { color: var(--text-2); }
.page__table { overflow-x: auto; }

/* ---------- platform page (platform.html) ----------
   The unlisted page for mountain operators. It reuses .section, .story,
   .card, .stats, .biz and the .phone frame from above; everything here is
   what those do not already cover: the hero heading, the step cards and the
   browser frame the console screenshots sit in. The console images are
   captured separately, so every frame has to look deliberate while its
   image is still missing: hence the tinted background under .browser__shot
   and the alt text left visible. */

.plat-hero { padding-bottom: clamp(40px, 5vw, 64px); }
.plat-hero .sechead { margin-bottom: 0; max-width: 820px; }
.plat-hero h1 { font-size: clamp(1.9rem, 4.4vw, 3.1rem); margin-bottom: 18px; }

.plat-hero__cta {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 18px;
}
.plat-hero__mail { font-size: .88rem; color: var(--text-3); }

/* How it works: three numbered cards, same .card as the mountains. */
.plat-steps {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
  /* The reset only clears <ul>, and the steps are an ordered list whose
     numbers are drawn by .plat-step__n. */
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 860px) { .plat-steps { grid-template-columns: repeat(3, 1fr); } }
.plat-steps h3 { font-size: 1.16rem; margin-bottom: 10px; }
.plat-steps p { color: var(--text-2); font-size: .95rem; }
.plat-step__n {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--brand) 14%, transparent);
  color: var(--brand);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .9rem;
}

/* The shot column: one or two browser frames with the app phones leaning
   on the bottom corner. A column of flex items, so a section with no phone
   or with three of them needs no special case. */
.plat-stage { width: 100%; display: flex; flex-direction: column; gap: 14px; }

.browser {
  position: relative;
  margin: 0;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
}
/* The second frame is the detail view of the first, so it sits inset. */
.browser--sub { width: 88%; margin-left: auto; }

.browser__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 12px;
  background: var(--bg-tint);
  border-bottom: 1px solid var(--line);
}
.browser__bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); flex: none; }
.browser__url {
  flex: 1;
  height: 12px;
  margin-left: 8px;
  border-radius: 99px;
  background: var(--line-soft);
}

.browser__shot {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  /* Holds the frame open, and reads as a placeholder, while the capture of
     this console screen is still missing. */
  background: var(--bg-tint);
  color: var(--text-3);
  font-size: .74rem;
}

.plat-phones {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: clamp(10px, 2vw, 18px);
  /* Leans the phones over the bottom corner of the console frame. */
  margin-top: -7%;
  padding-right: 3%;
}
.plat-phones .phone { width: min(30%, 138px); }

/* The field section is the console on a phone, so there is no browser
   frame to lean on and the three shots stand on their own. */
.plat-stage--trio .plat-phones {
  justify-content: center;
  margin-top: 0;
  padding-right: 0;
}
.plat-stage--trio .plat-phones .phone { width: min(31%, 168px); }

@media (max-width: 520px) {
  .browser--sub { width: 94%; }
  .plat-phones .phone { width: min(34%, 118px); }
}

/* ---------- reveal ---------- */
.reveal {
  opacity: 0;
  translate: 0 24px;
  transition: opacity .8s cubic-bezier(.16, 1, .3, 1), translate .8s cubic-bezier(.16, 1, .3, 1);
}
.reveal.is-in { opacity: 1; translate: 0 0; }
.reveal--d1 { transition-delay: .09s; }
.reveal--d2 { transition-delay: .18s; }
.reveal--d3 { transition-delay: .27s; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; translate: 0 0; transition: none; }
  .float, .snowflake, .leaf, .lang__menu { animation: none !important; }
  .slide, .slide.is-out { transition: none; translate: 0 0; }
  .snow { display: none; }
  .card:hover, .btn:hover, .store--live:hover { transform: none; }
  * { transition-duration: .01ms !important; }
}